/* ────────────────────────────────────────────────────────────────────────
 * Keller Schneider Invoice Assistant — base stylesheet.
 *
 * Design goals:
 *   • Calm, dense layout with tabular numbers in the editor.
 *   • Clear visual hierarchy for collapsible bucket sections.
 *   • Confidence-driven row highlighting drives the user's attention.
 * ──────────────────────────────────────────────────────────────────────── */

:root {
    --ks-bg:        #f6f7f9;
    --ks-surface:   #ffffff;
    --ks-border:    #d9dde3;
    --ks-text:      #1f2933;
    --ks-muted:     #5a6573;
    --ks-accent:    #003b6f;        /* KS deep blue */
    --ks-accent-2:  #0064b5;
    --ks-warn-bg:   #fffbe6;
    --ks-warn-bd:   #f0c419;
    --ks-bad-bg:    #fff1f0;
    --ks-bad-bd:    #cf1322;
    --ks-good:      #2e7d32;

    --radius: 6px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font-sans);
    background: var(--ks-bg);
    color: var(--ks-text);
    font-size: 14px;
    line-height: 1.45;
}
h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.2; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
a  { color: var(--ks-accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted   { color: var(--ks-muted); }
.center  { text-align: center; }
.stack > * + * { margin-top: 1rem; }
.inline  { display: inline; }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.topbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: .6rem 1.2rem;
    background: var(--ks-surface);
    border-bottom: 1px solid var(--ks-border);
}
.brand { display: flex; flex-direction: column; line-height: 1.1; }
.brand strong { color: var(--ks-accent); letter-spacing: .04em; }
.brand-sub    { font-size: .8rem; color: var(--ks-muted); }
.topnav       { display: flex; align-items: center; gap: 1rem; }
.user-chip    { font-size: .85rem; color: var(--ks-muted); }
.link-btn     { background: none; border: none; color: var(--ks-accent-2);
                cursor: pointer; padding: 0; font: inherit; }
.lang-switch  { display: inline-flex; border: 1px solid var(--ks-border);
                border-radius: var(--radius); overflow: hidden; }
.lang-switch a {
    padding: .15rem .45rem; color: var(--ks-muted); font-size: .8rem;
}
.lang-switch a.active {
    background: var(--ks-accent); color: #fff; text-decoration: none;
}

/* ── Layout ──────────────────────────────────────────────────────────── */
.container { max-width: 1300px; margin: 0 auto; padding: 1.5rem 1.2rem 4rem; }
.footer    { text-align: center; padding: 1rem; color: var(--ks-muted); }

.card {
    background: var(--ks-surface);
    border: 1px solid var(--ks-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.2rem 1.4rem;
}
.card.narrow { max-width: 460px; margin: 4rem auto; }

details.card > summary {
    cursor: pointer; font-weight: 600; padding-right: 1rem;
    display: flex; justify-content: space-between; align-items: center;
    list-style: none;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before {
    content: "▸"; display: inline-block; width: 1em; transition: transform .15s;
}
details.card[open] > summary::before { transform: rotate(90deg); }
details.card > *:not(summary) { margin-top: 1rem; }
.subtotal { font-variant-numeric: tabular-nums; color: var(--ks-muted); }

/* ── Form primitives ─────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: .25rem; }
.field > span { font-size: .8rem; color: var(--ks-muted); }
input, select, textarea {
    font: inherit;
    padding: .4rem .55rem;
    border: 1px solid var(--ks-border);
    border-radius: 4px;
    background: #fff;
    width: 100%;
}
input.num { text-align: right; font-variant-numeric: tabular-nums; }
input:focus, select:focus { outline: 2px solid var(--ks-accent-2); outline-offset: -1px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.period-row, .rate-row { display: flex; gap: .4rem; }

/* Buttons */
.btn {
    display: inline-block; padding: .45rem .9rem;
    border: 1px solid var(--ks-border); background: #fff;
    border-radius: 4px; cursor: pointer; font: inherit;
    text-decoration: none; color: inherit;
}
.btn:hover { border-color: var(--ks-accent-2); text-decoration: none; }
.btn-primary {
    background: var(--ks-accent); color: #fff; border-color: var(--ks-accent);
}
.btn-primary:hover { background: var(--ks-accent-2); color: #fff; }
.btn-sm  { padding: .25rem .55rem; font-size: .85rem; }
.icon-btn {
    border: none; background: none; cursor: pointer;
    color: var(--ks-muted); font-size: 1rem; padding: .15rem .3rem;
}
.icon-btn:hover { color: var(--ks-bad-bd); }

.alert        { padding: .6rem .8rem; border-radius: 4px; }
.alert-error  { background: var(--ks-bad-bg); color: var(--ks-bad-bd);
                border: 1px solid var(--ks-bad-bd); }

/* ── Dashboard ───────────────────────────────────────────────────────── */
.tools-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.tool-card {
    display: block; padding: 1rem 1.2rem;
    background: var(--ks-surface);
    border: 1px solid var(--ks-border); border-radius: var(--radius);
    text-decoration: none; color: inherit; transition: border-color .15s;
}
.tool-card:hover { border-color: var(--ks-accent-2); text-decoration: none; }
.tool-card.is-disabled { opacity: .55; pointer-events: none; }
.tool-icon {
    display: inline-block; padding: .15rem .55rem;
    background: var(--ks-accent); color: #fff; border-radius: 3px;
    font-weight: 700; font-size: .85rem;
}
.badge {
    display: inline-block; margin-top: .5rem;
    font-size: .75rem; background: #eee; color: var(--ks-muted);
    padding: .1rem .4rem; border-radius: 3px;
}

.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
    text-align: left; padding: .55rem .75rem;
    border-bottom: 1px solid var(--ks-border);
}
.status { font-size: .75rem; padding: .1rem .4rem; border-radius: 3px;
          background: #eef2f7; }
.status-ready      { background: #e7f5ec; color: var(--ks-good); }
.status-extracting { background: var(--ks-warn-bg); }
.status-error      { background: var(--ks-bad-bg); color: var(--ks-bad-bd); }

/* ── Upload + dropzone ───────────────────────────────────────────────── */
.dropzone {
    display: block;
    border: 2px dashed var(--ks-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    background: #fafbfc;
}
.dropzone.is-drag { border-color: var(--ks-accent-2); background: #f0f7ff; }
.dropzone-hint    { color: var(--ks-muted); }
.dropzone-list    { margin: .8rem 0 0; padding: 0; list-style: none;
                    text-align: left; font-size: .85rem; }
.dropzone-list li { padding: .15rem 0; color: var(--ks-text); }

/* ── Extraction log (SSE) ────────────────────────────────────────────── */
.extraction-log .log-list {
    list-style: none; padding: 0; margin: 1rem 0 .5rem;
    font-family: var(--font-mono); font-size: .85rem;
}
.log-row {
    display: flex; align-items: baseline; gap: .55rem;
    padding: .25rem 0; opacity: 0; animation: slideIn .2s forwards;
}
.log-icon { width: 1.3em; text-align: center; }
.log-error { color: var(--ks-bad-bd); }
@keyframes slideIn { to { opacity: 1; transform: translateY(0); }
                     from { opacity: 0; transform: translateY(2px); } }

.progressbar     { background: #eef2f7; height: 6px; border-radius: 3px;
                   overflow: hidden; }
.progressbar-fill { height: 100%; background: var(--ks-accent-2);
                    transition: width .25s ease-out; }

/* ── Editor layout ───────────────────────────────────────────────────── */
.editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 1.5rem;
}
@media (max-width: 1000px) {
    .editor-layout { grid-template-columns: 1fr; }
}
.editor-main  { min-width: 0; }
.editor-side  { position: sticky; top: 1rem; align-self: start; }

.page-header   { display: flex; justify-content: space-between;
                 align-items: flex-end; gap: 1rem; }
.header-actions { display: flex; gap: .5rem; }

/* Line tables */
.line-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.line-table th, .line-table td {
    padding: .35rem .4rem;
    border-bottom: 1px solid #eef2f7;
    vertical-align: middle;
}
.line-table th { text-align: left; font-size: .75rem; color: var(--ks-muted);
                 text-transform: uppercase; letter-spacing: .04em; }
.line-table td:nth-child(n+3) { text-align: right; }
.line-table input { padding: .25rem .4rem; font-size: .85rem; }
.code-input  { font-family: var(--font-mono); font-size: .8rem; }
.desc-input  { width: 100%; }
.user-input  { width: 4em; margin-top: 2px; }

/* ── Confidence-driven highlighting — Guided Attention principle ─────── */
.line-item.confidence-high   { /* default — no highlight */ }
.line-item.confidence-medium { background: var(--ks-warn-bg); }
.line-item.confidence-medium td:first-child {
    box-shadow: inset 3px 0 0 var(--ks-warn-bd);
}
.line-item.confidence-low    { background: var(--ks-bad-bg); }
.line-item.confidence-low td:first-child {
    box-shadow: inset 3px 0 0 var(--ks-bad-bd);
}
.line-item.confidence-low input.amount-input,
.line-item.confidence-low input.unit-input {
    border-color: var(--ks-bad-bd);
}

/* Forgiving Interface — the revert button appears only when dirty. */
.line-item.is-dirty .revert-btn { display: inline-block; }
.revert-btn {
    background: none; border: 1px solid var(--ks-border);
    border-radius: 3px; cursor: pointer; padding: 0 .3rem;
    margin-left: .25rem; color: var(--ks-accent-2);
}
.revert-btn:hover { border-color: var(--ks-accent-2); }

.actions { white-space: nowrap; text-align: right; }

/* ── Totals panel ────────────────────────────────────────────────────── */
.totals-panel {
    background: var(--ks-surface);
    border: 1px solid var(--ks-border);
    border-radius: var(--radius);
    padding: 1rem 1.2rem;
}
.totals-table { width: 100%; border-collapse: collapse;
                font-variant-numeric: tabular-nums; }
.totals-table th { text-align: left; font-weight: 400;
                   color: var(--ks-muted); padding: .25rem 0; }
.totals-table td { text-align: right; padding: .25rem 0; }
.totals-table .row-strong th, .totals-table .row-strong td {
    font-weight: 600; border-top: 1px solid var(--ks-border);
    padding-top: .5rem;
}
.totals-table .row-grand th, .totals-table .row-grand td {
    font-weight: 700; font-size: 1.1rem;
    border-top: 2px solid var(--ks-accent);
    padding-top: .5rem; color: var(--ks-accent);
}
.issues {
    margin-top: 1rem; padding: .8rem; border-radius: 4px;
    background: var(--ks-warn-bg); border: 1px solid var(--ks-warn-bd);
}
.issues h4 { margin: 0 0 .3rem; font-size: .85rem; }
.issues ul { margin: 0; padding-left: 1.1rem; font-size: .85rem; }

/* ── Admin / user-management ─────────────────────────────────────────── */
.add-user-row {
    display: grid;
    grid-template-columns: 2fr 1.5fr auto auto;
    gap: .6rem; align-items: center;
    padding: .8rem; margin: 1rem 0;
    background: #f7f9fc; border: 1px solid #e3e8ef; border-radius: 6px;
}
.add-user-row input[type=email],
.add-user-row input[type=text] {
    padding: .5rem .6rem; border: 1px solid #d0d7e2; border-radius: 4px;
    font: inherit;
}
.add-user-row .checkbox { display: flex; align-items: center; gap: .35rem;
                          font-size: .9rem; }
.user-table {
    width: 100%; border-collapse: collapse; margin-top: .5rem; font-size: .92rem;
}
.user-table th, .user-table td {
    text-align: left; padding: .55rem .7rem;
    border-bottom: 1px solid #eef1f5;
}
.user-table th {
    font-size: .78rem; text-transform: uppercase;
    letter-spacing: .04em; color: #6b7280; font-weight: 600;
    background: #fafbfc;
}
.user-table tr.inactive td { color: #9ca3af; }
.user-table .actions-col { text-align: right; width: 1%; white-space: nowrap; }
.user-table td.actions { text-align: right; white-space: nowrap; }
.user-table td.actions .link-btn { margin-left: .8rem; }
.user-table td.actions .link-btn[disabled] { opacity: .35; cursor: not-allowed; }
.role, .status {
    display: inline-block; padding: .12rem .55rem; border-radius: 999px;
    font-size: .75rem; font-weight: 600; letter-spacing: .02em;
}
.role-admin  { background: #e0e7ff; color: #3730a3; }
.role-user   { background: #f1f5f9; color: #475569; }
.status-on   { background: #dcfce7; color: #166534; }
.status-off  { background: #fee2e2; color: #991b1b; }
.self-badge {
    display: inline-block; margin-left: .5rem;
    padding: 0 .4rem; font-size: .7rem; font-weight: 600;
    background: var(--ks-accent); color: #fff; border-radius: 3px;
}
td.muted { color: #6b7280; font-variant-numeric: tabular-nums; }

.link-btn.danger { color: #b42318; }
.link-btn.danger:hover { color: #9a1d11; text-decoration: underline; }
td.actions { white-space: nowrap; }
td.actions .link-btn { margin-left: .8rem; }

/* Magic-link invite panel (admin) */
.invite-link-row td { padding: 0 !important; background: #f7f9fc;
                      border-bottom: 1px solid #e3e8ef; }
.invite-panel { padding: .8rem 1rem; }
.invite-head { display: flex; align-items: center; gap: .6rem;
               font-size: .9rem; margin-bottom: .55rem; }
.invite-head code { padding: .1rem .4rem; background: #fff;
                    border: 1px solid #e3e8ef; border-radius: 3px;
                    font-size: .85rem; }
.invite-head .link-btn { margin-left: auto; font-size: 1.1rem;
                         line-height: 1; padding: 0 .35rem; }
.invite-link { display: flex; gap: .4rem; }
.invite-link input[type=text] {
    flex: 1; padding: .45rem .55rem; font-family: ui-monospace, monospace;
    font-size: .82rem; border: 1px solid #d0d7e2; border-radius: 4px;
    background: #fff;
}