@import url('../js/vendor/ui/css/tokens.css');
@import url('../js/vendor/ui/css/bridge.css');
@import url('../js/vendor/ui/css/components.css');
@import url('../js/vendor/ui/css/shell.css');
@import url('../js/vendor/ui/css/primitives.css');
@import url('../js/vendor/ui/css/workspace.css');

/* Porter Chiropractic — wordmark */
.brand-caduceus {
    font-family: var(--brand-mark-font);
    font-weight: 600;
}

/* Porter Chiropractic — client accent overrides */
:root {
    --accent: #0d9488;
    --accent-dim: #0f766e;
    --accent-glow: rgba(13, 148, 136, 0.10);
    --accent-surface: rgba(13, 148, 136, 0.08);
}

[data-theme="dark"] {
    --accent: #2dd4bf;
    --accent-dim: #14b8a6;
    --accent-glow: rgba(45, 212, 191, 0.14);
    --accent-surface: rgba(45, 212, 191, 0.10);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --accent: #2dd4bf;
        --accent-dim: #14b8a6;
        --accent-glow: rgba(45, 212, 191, 0.14);
        --accent-surface: rgba(45, 212, 191, 0.10);
    }
}

/* ============================================================
   Encounter form — a dense clinical document, not a CRUD form.
   Two-column paper layout that collapses to one on narrow screens.
   ============================================================ */

.enc-sheet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .enc-sheet {
        grid-template-columns: minmax(0, 1fr);
    }
}

.enc-block {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.6rem 0.7rem;
}

.enc-block-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
}

.enc-span-2 {
    grid-column: 1 / -1;
}

/* Code checklists: one row per procedure/diagnostic code */
.enc-codelist {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.enc-code-row {
    display: grid;
    grid-template-columns: 1.25rem 4.5rem minmax(0, 1fr) 6.5rem;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.78rem;
    cursor: pointer;
}

.enc-code-row:hover {
    background: var(--surface-hover);
}

.enc-code-row.is-on {
    background: var(--accent-surface);
}

.enc-code-row .enc-code {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--accent);
    font-size: 0.72rem;
}

.enc-code-row .enc-desc {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enc-code-row .enc-fee {
    justify-self: end;
}

/* Diagnostic codes are check-only — no fee column */
.enc-dx-row {
    grid-template-columns: 1.25rem 5rem minmax(0, 1fr);
}

/* Repeatable supplement lines */
.enc-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.5rem 7rem 1.75rem;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.35rem;
}

/* Return-for-care day picker */
.enc-daypicker {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.enc-day {
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    color: var(--text-secondary);
    border-radius: 0.35rem;
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.enc-day.is-on {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Totals ledger at the foot of the sheet */
.enc-totals {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem;
    gap: 0.3rem 0.5rem;
    align-items: center;
    font-size: 0.8rem;
}

.enc-totals-label {
    color: var(--text-secondary);
}

.enc-totals-value {
    justify-self: end;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.enc-totals-rule {
    grid-column: 1 / -1;
    border-top: 1px solid var(--border);
    margin: 0.2rem 0;
}

.enc-balance-due {
    color: var(--warning);
}

.enc-balance-credit {
    color: var(--success);
}

/* ============================================================
   Day sheet — mirrors the printed reconciliation sheet
   ============================================================ */

.ds-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.ds-total-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.5rem 0.6rem;
}

.ds-total-card-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.ds-total-card-value {
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

/* `.ws-table th` sets text-align:left and outranks a bare `.ds-num`, which
   would leave money headings left of the figures they label. */
.ds-num,
.ws-table th.ds-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ds-provider-head td {
    background: var(--surface-dim);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.ds-subtotal td {
    border-top: 1px solid var(--border);
    font-weight: 600;
}

/* ============================================================
   Print — the encounter record has to survive being handed to a patient
   ============================================================ */

@media print {
    /* The Print button renders a purpose-built document in its own window; this
       block only keeps browser-level Ctrl+P from emitting a page of dark ink.
       Forcing the light token values is enough — every surface reads from them. */
    :root,
    [data-theme='dark'],
    /* Matches the specificity of the system-dark rule in tokens.css, which a
       bare :root would otherwise lose to. */
    :root:not([data-theme='light']):not([data-theme='dark']) {
        --bg: #ffffff;
        --surface: #ffffff;
        --surface-raised: #ffffff;
        --surface-dim: #ffffff;
        --surface-hover: transparent;
        --card-bg: #ffffff;
        --card-shadow: none;
        --input-bg: #ffffff;
        --sidebar-bg: #ffffff;
        --text: #111111;
        --text-secondary: #333333;
        --text-muted: #555555;
        --text-subtle: #777777;
        --border: #999999;
        --border-light: #cccccc;
        --card-border: #999999;
        --input-border: #999999;
        --sidebar-border: #999999;
        --accent-glow: transparent;
        --accent-surface: transparent;
    }

    #app-topbar,
    .page-action-footer,
    .app-launcher,
    .enc-col-list {
        display: none !important;
    }

    body,
    .app-frame,
    .app-main,
    .page-pad {
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    .ws-workspace,
    .page-stack,
    .page-stack-main,
    .ws-col-body {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }

    .enc-block {
        break-inside: avoid;
    }
}