/* 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. */
/* Field look (border/bg/focus/placeholder) comes from the central §A1 rule in
   web.css; this only adds the search box's layout. */
.pet-search { width: 100%; margin-bottom: 1rem; }

/* 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 {
    /* Scoped to pages that actually have a print card (the code page): other
       pages (contract texts!) must print normally, not as a blank sheet. */
    body:has(.print-card) * { 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-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: var(--pk-radius-pill);
    background: var(--pk-pill-neutral-bg);
    color: var(--pk-pill-neutral-text);
}
.patient-state.state-active      { background: var(--pk-pill-ok-bg);     color: var(--pk-pill-ok-text); }
.patient-state.state-readonly    { background: var(--pk-pill-warn-bg);   color: var(--pk-pill-warn-text); }
.patient-state.state-maintenance { background: var(--pk-pill-info-bg);   color: var(--pk-pill-info-text); }
.patient-state.state-terminated  { background: var(--pk-pill-danger-bg); color: var(--pk-pill-danger-text); }
/* §02: status pills carry a 6px colour dot (matching the pill text colour)
   instead of mono-caps — one rule for every vet status pill. */
.patient-state::before,
.code-status::before,
.alert-kind::before,
.personnel-role-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

/* ---------- Code list ---------- */
.code-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: var(--pk-radius-pill);
    margin-left: 0.5rem;
}
.code-status-open     { background: var(--pk-pill-info-bg);    color: var(--pk-pill-info-text); }
.code-status-redeemed { background: var(--pk-pill-ok-bg);      color: var(--pk-pill-ok-text); }
.code-status-expired  { background: var(--pk-pill-neutral-bg); color: var(--pk-pill-neutral-text); }

/* ---------- Alerts ---------- */
.alert-kind {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: var(--pk-radius-pill);
}
.alert-kind-weekly-loss { background: var(--pk-pill-warn-bg);    color: var(--pk-pill-warn-text); }
.alert-kind-bcs         { background: var(--pk-pill-info-bg);    color: var(--pk-pill-info-text); }
.alert-kind-missing     { background: var(--pk-pill-neutral-bg); color: var(--pk-pill-neutral-text); }
.alert-kind-auth        { background: var(--pk-pill-info-bg);    color: var(--pk-pill-info-text); }
/* Stille Sicherheits-Checks (silent_safety_concern) → ernst → Clay. */
.alert-kind-silent      { background: var(--pk-pill-danger-bg);  color: var(--pk-pill-danger-text); }
.alert-pet { font-weight: 600; text-decoration: none; color: var(--text); }
.alert-pet:hover { text-decoration: underline; }

/* ---------- 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;
}

/* 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-role-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: var(--pk-radius-pill);
    background: var(--pk-pill-neutral-bg);
    color: var(--pk-pill-neutral-text);
}
.personnel-self { color: var(--muted); font-size: 0.875rem; }

/* Contract-pending badge on the topbar nav link (R4). */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.05rem;
    height: 1.05rem;
    margin-left: 0.35rem;
    border-radius: 999px;
    background: var(--pk-danger, #c0392b);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}