/* Vet practice app. Palette + shared components come from
   crates/ui/style/web.css (default blue/green theme, per-tenant
   overridable). Only vet-specific components live here. */

/* ===== Patient search box ===== */
/* Standalone (not inside a <form>), so it needs its own control styling
   mirroring the shared form-input look from web.css. */
.pet-search {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--bg);
    color: inherit;
    font: inherit;
    margin-bottom: 1rem;
    -webkit-appearance: none;
            appearance: none;
}
.pet-search:focus {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
    border-color: var(--focus);
}

/* Printable code card. Shown on screen as a regular card; in print
   mode it's the only visible content so the page becomes a one-shot
   handout the holder can take home. */
.print-card-header {
    text-align: center;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.print-card-header h2 { margin: 0; color: var(--primary); }
.print-card-body { text-align: center; padding: 1rem 0; }
.print-code-token {
    font-size: 1.6rem;
    font-weight: 700;
    display: block;
    margin: 1rem 0;
    letter-spacing: 0.1em;
}
.print-qr {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}
.print-qr svg {
    width: 240px;
    height: 240px;
    max-width: 100%;
}
.print-card-actions { text-align: center; margin-top: 1rem; }

@media print {
    body * { visibility: hidden; }
    .print-card,
    .print-card * { visibility: visible !important; }
    .print-card {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 100%;
        box-shadow: none;
        border: none;
        margin: 0;
        padding: 2cm;
        background: #fff;
    }
    .no-print { display: none !important; }
}

/* ---------- Patient list ---------- */
.patient-list a.patient-row {
    display: block;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
}
.patient-list a.patient-row:hover { background: var(--bg-soft); }
.patient-name {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}
.patient-state {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.patient-state.state-active      { background: #d1fae5; color: #065f46; }
.patient-state.state-readonly    { background: #fef3c7; color: #92400e; }
.patient-state.state-maintenance { background: #dbeafe; color: #1e40af; }
.patient-state.state-terminated  { background: #fee2e2; color: #7f1d1d; }
.patient-meta { font-size: 0.875rem; margin-top: 0.25rem; }

/* ---------- Code list ---------- */
.code-list .code-row {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}
.code-row > div + div { margin-top: 0.25rem; }
.code-status {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    margin-left: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.code-status-open     { background: #dbeafe; color: #1e40af; }
.code-status-redeemed { background: #d1fae5; color: #065f46; }
.code-status-expired  { background: #f3f4f6; color: #6b7280; }

/* ---------- Alerts ---------- */
.alert-list { display: flex; flex-direction: column; gap: 0.75rem; }
.alert-row { padding: 1rem; }
.alert-row.acknowledged { opacity: 0.6; }
.alert-row-head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.alert-kind {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.alert-kind-weekly-loss { background: #fef3c7; color: #92400e; }
.alert-kind-bcs         { background: #ede9fe; color: #5b21b6; }
.alert-kind-missing     { background: #f3f4f6; color: #4b5563; }
.alert-kind-auth        { background: #dbeafe; color: #1e40af; }
.alert-pet { font-weight: 600; text-decoration: none; color: var(--text); }
.alert-pet:hover { text-decoration: underline; }
.alert-row-body { margin-bottom: 0.5rem; }
.alert-row-foot { font-size: 0.875rem; }
.alert-row-actions { margin-top: 0.5rem; text-align: right; }

/* ---------- Profile editor ---------- */
.profile-preview {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-soft);
    border-radius: var(--radius-control);
    margin-bottom: 1rem;
}
.profile-preview-bar {
    flex: 1;
    background: var(--primary);
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-control);
    font-weight: 600;
}
.profile-preview-pill {
    background: var(--accent);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.profile-logo-preview {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-control);
    object-fit: cover;
    background: #fff;
    border: 1px solid var(--border);
}

/* Logo block: the practice logo shown large above everything else. */
.profile-logo-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.profile-logo-large {
    max-width: 100%;
    max-height: 140px;
    width: auto;
    height: auto;
    border-radius: var(--radius-control);
    background: #fff;
    border: 1px solid var(--border);
    padding: 0.5rem;
}

/* ---------- Personnel list ---------- */
.personnel-list { display: flex; flex-direction: column; gap: 0.75rem; }
.personnel-row {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}
.personnel-row:last-child { border-bottom: 0; }
.personnel-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.personnel-name { font-weight: 600; }
.personnel-role-tag {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.personnel-self { color: var(--muted); font-size: 0.875rem; }