/* =============================================================================
   AlburujITS Invoice Capture — application theme.

   Layered ON TOP of Pico.css (classless base) and the two CDN widgets we use
   (DataTables, SurveyJS). Everything here is either:
     1. a Pico variable override  (--pico-*)  — retunes the classless defaults,
     2. an app shell / utility class          — used by _Layout and page markup,
     3. a widget skin                         — makes DataTables + SurveyJS look
                                                like the rest of the app.

   Why a variable override rather than a fork: Pico's defaults are sized for
   reading-first documents (its root font scales fluidly up to 20px on wide
   screens, which is what made every control look oversized). Pinning the root
   size and retuning the spacing/colour tokens fixes the whole app at once,
   with no per-page markup changes.

   The palette is defined once in the brand tokens below. To rebrand, change
   those values and nothing else.
   ========================================================================== */

/* --- 1. Brand tokens ------------------------------------------------------ */

:root {
    /* Brand: a deep indigo, warm neutral greys, and status colours. */
    --brand-600: #3d5afe;
    --brand-700: #2f47d4;
    --brand-800: #23349c;
    --brand-050: #eef1ff;

    --ink-900: #111827;   /* headings */
    --ink-700: #374151;   /* body text */
    --ink-500: #6b7280;   /* secondary / help text */
    --ink-300: #d1d5db;   /* control borders */
    --ink-200: #e5e7eb;   /* hairlines */
    --ink-100: #f3f4f6;   /* subtle fills */
    --ink-050: #f8fafc;   /* page background */

    --ok-fg: #065f46;     --ok-bg: #ecfdf5;     --ok-border: #a7f3d0;
    --warn-fg: #92400e;   --warn-bg: #fffbeb;   --warn-border: #fcd34d;
    --err-fg: #991b1b;    --err-bg: #fef2f2;    --err-border: #fecaca;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-md: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --shadow-lg: 0 8px 24px rgba(16, 24, 40, .08);

    --radius: 10px;
    --radius-sm: 6px;

    --shell-max: 1200px;  /* content column cap — full-bleed reads as unfinished */
}

/* --- 2. Pico retune ------------------------------------------------------- */

/* Pico scales html{font-size} up to 137.5% on wide viewports. That fluid scale
   is the single reason the controls looked huge; pin it. */
html { font-size: 16px; }

:root {
    --pico-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --pico-font-size: 0.9375rem;               /* 15px body */
    --pico-line-height: 1.55;
    --pico-border-radius: var(--radius-sm);
    --pico-spacing: 1rem;
    --pico-block-spacing-vertical: 1rem;
    --pico-block-spacing-horizontal: 1rem;
    --pico-typography-spacing-vertical: 0.85rem;

    /* Form controls: the big win. Pico ships ~0.75rem/1rem padding at a fluid
       root size; these are sized for a dense-but-breathable admin UI. */
    --pico-form-element-spacing-vertical: 0.5rem;
    --pico-form-element-spacing-horizontal: 0.7rem;

    --pico-background-color: var(--ink-050);
    --pico-color: var(--ink-700);
    --pico-h1-color: var(--ink-900);
    --pico-h2-color: var(--ink-900);
    --pico-h3-color: var(--ink-900);
    --pico-muted-color: var(--ink-500);
    --pico-muted-border-color: var(--ink-200);
    --pico-form-element-border-color: var(--ink-300);
    --pico-form-element-background-color: #fff;
    --pico-card-background-color: #fff;
    --pico-card-border-color: var(--ink-200);

    --pico-primary: var(--brand-700);
    --pico-primary-background: var(--brand-600);
    --pico-primary-border: var(--brand-600);
    --pico-primary-hover: var(--brand-800);
    --pico-primary-hover-background: var(--brand-700);
    --pico-primary-hover-border: var(--brand-700);
    --pico-primary-underline: rgba(61, 90, 254, .35);
    --pico-primary-focus: rgba(61, 90, 254, .2);
    --pico-primary-inverse: #fff;
}

body {
    background: var(--ink-050);
    color: var(--ink-700);
    -webkit-font-smoothing: antialiased;
}

/* Explicit heading scale — Pico's is document-sized and shouts in an app. */
h1 { font-size: 1.5rem;   font-weight: 650; letter-spacing: -.015em; margin-bottom: .35rem; }
h2 { font-size: 1.125rem; font-weight: 650; letter-spacing: -.01em;  margin-bottom: .5rem; }
h3 { font-size: 1rem;     font-weight: 600; margin-bottom: .4rem; }

/* Inputs sit on a white card, so they need a visible edge rather than a fill. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]),
select, textarea {
    box-shadow: var(--shadow-sm);
    font-size: .9375rem;
}

/* Full-width inputs are the reason plain forms felt like walls. Cap them, and
   let a field opt out with .wide when it really does hold a URL or a query. */
form :is(input, select, textarea):not([type=checkbox]):not([type=radio]) { max-width: 26rem; }
form :is(input, textarea).wide { max-width: 100%; }

button, [type=submit], [type=button], [role=button] {
    font-size: .9375rem;
    font-weight: 550;
    padding: .5rem 1.1rem;
    width: auto;                 /* Pico stretches buttons to 100% by default */
    box-shadow: var(--shadow-sm);
}

/* Destructive actions. Outlined rather than solid red: a wall of red buttons in a table reads as
   an error state, and these all sit behind a confirm() anyway. */
button.danger, [role=button].danger {
    background: #fff;
    color: var(--err-fg);
    border: 1px solid var(--err-border);
}
button.danger:hover, [role=button].danger:hover {
    background: var(--err-bg);
    color: var(--err-fg);
    border-color: #ef4444;
}

/* Small secondary/outline buttons, used for row actions inside tables. */
:is(button, [role=button]).outline { box-shadow: none; }
.toolbar :is(button, [role=button]) { padding: .35rem .75rem; font-size: .8125rem; }

table { font-size: .9375rem; }
table th { font-weight: 600; color: var(--ink-900); white-space: nowrap; }
table :is(th, td) { padding: .55rem .7rem; }

code, kbd {
    font-size: .85em;
    background: var(--ink-100);
    border-radius: 4px;
    padding: .1em .35em;
}

/* --- 3. App shell --------------------------------------------------------- */

.app-header {
    position: sticky; top: 0; z-index: 20;
    background: #fff;
    border-bottom: 1px solid var(--ink-200);
    box-shadow: var(--shadow-sm);
}

.app-header__inner {
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex; align-items: center; gap: 1.5rem;
    min-height: 56px;
}

.brand {
    display: flex; align-items: center; gap: .55rem;
    font-weight: 650; font-size: .95rem; letter-spacing: -.01em;
    color: var(--ink-900); text-decoration: none;
}
.brand:hover { color: var(--ink-900); }
.brand__mark {
    width: 28px; height: 28px; flex: 0 0 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-800));
    color: #fff;
    display: grid; place-items: center;
    font-size: .8rem; font-weight: 700;
}
.brand__sub { color: var(--ink-500); font-weight: 450; }

.app-nav { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }
.app-nav a {
    padding: .4rem .7rem;
    border-radius: var(--radius-sm);
    font-size: .875rem; font-weight: 500;
    color: var(--ink-700); text-decoration: none;
    white-space: nowrap;
}
.app-nav a:hover { background: var(--ink-100); color: var(--ink-900); }
.app-nav a.is-active { background: var(--brand-050); color: var(--brand-700); font-weight: 600; }

.app-user { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.app-user__name { font-size: .8125rem; color: var(--ink-500); }
.app-user form { margin: 0; }
.app-user button {
    padding: .3rem .7rem; font-size: .8125rem;
    background: #fff; color: var(--ink-700);
    border: 1px solid var(--ink-300); box-shadow: none;
}
.app-user button:hover { background: var(--ink-100); color: var(--ink-900); border-color: var(--ink-300); }

.app-main {
    max-width: var(--shell-max);
    margin: 0 auto;
    padding: 1.75rem 1.25rem 4rem;
}

/* Page heading block: title, one-line description, and optional right-side
   actions. Used at the top of every page for a consistent entry point. */
.page-head {
    display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.page-head__text { flex: 1 1 22rem; min-width: 0; }
.page-head p { color: var(--ink-500); font-size: .875rem; margin: 0; }
.page-head__actions { display: flex; gap: .5rem; align-items: center; }

.breadcrumb { font-size: .8125rem; color: var(--ink-500); margin-bottom: .5rem; }
.breadcrumb a { color: var(--ink-500); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-700); text-decoration: underline; }

/* --- 4. Surfaces & utilities ---------------------------------------------- */

.card {
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 1.25rem 1.35rem;
    margin-bottom: 1.25rem;
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
/* For a card whose whole body is a table: the table bleeds to the card edges. DataTables wraps
   the table in .dataTables_wrapper and adds search/paging chrome, which does still need padding. */
.card--flush { padding: 0; overflow: hidden; }
.card--flush table { margin: 0; }
.card--flush .dataTables_wrapper { padding: .9rem 1.1rem 1rem; }
.card--flush > .empty { padding: 2.5rem 1rem; }

/* Action bar under a card's content — the counterpart to .card__head. A card--flush has no
   padding of its own, so the footer supplies it, and the hairline separates the controls from
   the table they act on. */
.card__footer {
    padding: .85rem 1.1rem;
    border-top: 1px solid var(--ink-200);
}

.card__head {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding-bottom: .85rem; margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--ink-200);
}
.card__head h2, .card__head h3 { margin: 0; }
.card__head p { margin: .15rem 0 0; font-size: .8125rem; color: var(--ink-500); }

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

/* A card that is itself a link — used for the Settings hub. */
a.tile {
    display: block; text-decoration: none; color: inherit;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.1rem 1.2rem;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
a.tile:hover { border-color: var(--brand-600); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
a.tile strong { display: block; color: var(--ink-900); font-size: .9375rem; margin-bottom: .3rem; }
a.tile span { display: block; color: var(--ink-500); font-size: .8125rem; line-height: 1.5; }

.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .75rem; font-weight: 600; line-height: 1.5;
    border: 1px solid transparent; white-space: nowrap;
}
.badge--ok      { color: var(--ok-fg);   background: var(--ok-bg);   border-color: var(--ok-border); }
.badge--warn    { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-border); }
.badge--err     { color: var(--err-fg);  background: var(--err-bg);  border-color: var(--err-border); }
.badge--neutral { color: var(--ink-500); background: var(--ink-100); border-color: var(--ink-200); }
.badge--brand   { color: var(--brand-700); background: var(--brand-050); border-color: #c7d2fe; }

.alert {
    border: 1px solid var(--ink-200);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    padding: .7rem .9rem;
    margin-bottom: 1.1rem;
    font-size: .875rem;
}
.alert--ok  { color: var(--ok-fg);  background: var(--ok-bg);  border-color: var(--ok-border);  border-left-color: #10b981; }
.alert--err { color: var(--err-fg); background: var(--err-bg); border-color: var(--err-border); border-left-color: #ef4444; }
.alert--info{ color: var(--ink-700); background: #fff;         border-color: var(--ink-200);    border-left-color: var(--brand-600); }

.impersonation-bar {
    background: var(--warn-bg);
    border-bottom: 1px solid var(--warn-border);
    color: var(--warn-fg);
}
.impersonation-bar__inner {
    max-width: var(--shell-max); margin: 0 auto;
    padding: .55rem 1.25rem;
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    font-size: .8125rem;
}
.impersonation-bar form { margin: 0 0 0 auto; }
.impersonation-bar button {
    padding: .25rem .7rem; font-size: .75rem;
    background: #fff; color: var(--warn-fg);
    border: 1px solid var(--warn-border); box-shadow: none;
}

/* --- Review screen -------------------------------------------------------- */
/* Scan on the left, fields on the right. The scan sticks while the field list scrolls, so a
   reviewer never loses sight of the document they are checking against. */
.review-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 1.25rem;
    align-items: start;
}
.review-scan { position: sticky; top: 72px; }
.review-scan img {
    display: block; width: 100%;
    border: 1px solid var(--ink-200); border-radius: var(--radius-sm);
    background: var(--ink-100);
}

/* Two fields per row, with a .field-grid__wide escape hatch for long ones. */
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1rem; }
.field-grid__wide { grid-column: 1 / -1; }
.field-grid label { font-size: .8125rem; font-weight: 550; color: var(--ink-700); }
.field-grid input { max-width: 100%; }
.field-grid .badge { margin-top: -.4rem; margin-bottom: .6rem; }

.table-scroll { overflow-x: auto; }
table.line-items :is(th, td) { padding: .3rem .35rem; }
table.line-items input { max-width: 100%; margin-bottom: 0; font-size: .875rem; padding: .35rem .5rem; }
table.line-items td:first-child { min-width: 16rem; }

/* Per-line tax components (decision #36) sit on their own row under the line they belong to.
   Tinted and un-bordered so the pair reads as one line item rather than two, and laid out as
   wrapping inline groups because the number of components varies by tax regime — one VAT row
   for a UK tenant, CGST + SGST (+ Cess) for an Indian one. */
table.line-items tr.line-items__tax > td { border-top: 0; padding-top: 0; background: var(--ink-050); }
.line-tax-component { display: inline-flex; margin: 0 .9rem .15rem 0; }
.line-tax-component label { display: inline-flex; align-items: center; gap: .35rem; font-size: .8125rem; color: var(--ink-700); }
.line-tax-component input { width: 6.5rem; }

@media (max-width: 960px) {
    .review-split { grid-template-columns: 1fr; }
    .review-scan { position: static; }
    .field-grid { grid-template-columns: 1fr; }
}

.toolbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

/* Row actions are each their own <form> (every one posts a different handler), and Pico gives a
   form — and the controls inside it — a bottom margin. Inside a toolbar that margin pushed each
   button down by a different amount, so a row of actions never sat on one line. Zero it and let
   the toolbar's own flex alignment do the work. */
.toolbar form { margin: 0; display: flex; align-items: center; gap: .5rem; }
.toolbar :is(input, select) { margin-bottom: 0; }
/* Pico also puts that bottom margin on the BUTTON itself, which the form rule above doesn't
   reach. A button inside a row-action <form> therefore carried a margin its plain-anchor
   neighbours (Settings, API keys) did not, and flex centring split the difference — so a row of
   actions sat on three slightly different lines. */
.toolbar :is(button, [type=submit], [role=button]) { margin: 0; }

/* Same problem inside any table: an input's bottom margin makes each cell a different height and
   staggers the row. table.line-items already did this for the review screen; every editable table
   needs it. */
table :is(input, select, textarea) { margin-bottom: 0; }
table form { margin: 0; }
table :is(button, [type=submit], [role=button]) { margin-bottom: 0; }
.muted { color: var(--ink-500); font-size: .875rem; }

/* What the extraction provider actually replied, on a failed row in Admin > Files. It can be one
   line or several thousand, so it scrolls in place rather than stretching the table. */
.raw-response { margin-top: .4rem; font-size: .8125rem; }
.raw-response summary { cursor: pointer; color: var(--ink-500); }
.raw-response pre {
    margin: .4rem 0 0;
    max-height: 18rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background: var(--ink-100);
    border: 1px solid var(--ink-200);
    border-radius: 6px;
    padding: .6rem .7rem;
}

/* Read-only label/value pairs (invoice detail, and anywhere else a record is shown, not edited). */
.detail-list {
    display: grid; grid-template-columns: max-content 1fr;
    gap: .45rem 1.5rem; margin: 0; font-size: .875rem;
}
.detail-list dt { color: var(--ink-500); }
.detail-list dd { margin: 0; color: var(--ink-900); }
.stack > * + * { margin-top: .9rem; }
.empty {
    text-align: center; padding: 2.5rem 1rem;
    color: var(--ink-500); font-size: .875rem;
}

/* --- 5. DataTables skin --------------------------------------------------- */

.dataTables_wrapper { font-size: .875rem; }
.dataTables_wrapper .dataTables_filter { float: right; margin-bottom: .75rem; }
.dataTables_wrapper .dataTables_length { float: left; margin-bottom: .75rem; color: var(--ink-500); }
.dataTables_wrapper .dataTables_filter input {
    margin-left: .5rem; width: 15rem; height: auto;
    padding: .35rem .6rem; font-size: .875rem;
    border: 1px solid var(--ink-300); border-radius: var(--radius-sm);
}
.dataTables_wrapper .dataTables_info { color: var(--ink-500); font-size: .8125rem; padding-top: .9rem; }
.dataTables_wrapper .dataTables_paginate { padding-top: .6rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: .3rem .65rem !important;
    margin-left: .2rem;
    border: 1px solid var(--ink-200) !important;
    border-radius: var(--radius-sm) !important;
    background: #fff !important;
    color: var(--ink-700) !important;
    font-size: .8125rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--brand-600) !important;
    border-color: var(--brand-600) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    opacity: .45; background: #fff !important; color: var(--ink-500) !important;
}
table.dataTable thead th {
    border-bottom: 1px solid var(--ink-200) !important;
    font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
    color: var(--ink-500) !important;
}
table.dataTable tbody tr:hover { background: var(--ink-050); }

/* --- 6. SurveyJS skin ----------------------------------------------------- */
/* survey-form.js applies an official SurveyJS theme (DefaultLightPanelless);
   these tokens then repaint it in the brand's colours.

   The token names are --sjs2-*, NOT --sjs-*. survey-core 3.x renamed its whole
   design system, and the --sjs-* block that used to live here matched nothing in
   3.1.0's stylesheet — which is why config forms were rendering in SurveyJS's
   own green and Open Sans while the rest of the app was brand blue and Inter.
   If a token here stops having an effect after a SurveyJS upgrade, that is the
   first thing to check: grep the new survey-core.min.css for the name.

   Setting brand-600 is enough for the whole palette — 400/700/800 are derived
   from it by the stylesheet with relative-colour hsl().

   The selector has to out-specify SurveyJS's own :where(.sd-theme-root) rules
   (specificity zero) AND the same-shaped rule that applyTheme injects, and the
   variables are declared on the theme-root element itself, so a plain
   .survey-host rule would be overridden rather than inherited. */
.survey-host .sd-theme-root,
.survey-host.sd-theme-root {
    --sjs2-color-project-brand-600: var(--brand-600);
    --sjs2-typography-font-family-text: var(--pico-font-family);
}

/* Our page already supplies the card chrome and the heading, so strip the
   survey's own outer frame and title block. */
.survey-host .sd-root-modern { background: transparent; }
.survey-host .sd-container-modern { margin: 0; }
.survey-host .sd-body.sd-body--static { padding: 0; max-width: none; }
.survey-host .sd-body__page { padding: 0; }
.survey-host .sd-page { padding: 0; }
.survey-host .sd-title.sd-container-modern__title { display: none; }
.survey-host .sd-element__num { display: none; }

/* Panels become labelled sub-sections rather than heavy boxes. */
.survey-host .sd-panel { box-shadow: none; }
.survey-host .sd-panel__title {
    font-size: .8125rem !important;
    font-weight: 650 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-500) !important;
}
.survey-host .sd-question__title { font-size: .875rem; font-weight: 550; }
.survey-host .sd-description { font-size: .8125rem; color: var(--ink-500); }

/* Pico is classless, so it also targets the survey's inputs and buttons. Let
   SurveyJS own its own controls. */
.survey-host :is(input, select, textarea) { max-width: none; box-shadow: none; }
.survey-host button { box-shadow: none; }
.survey-host .sd-navigation__complete-btn { min-width: 8rem; }

/* --- 7. Sign-in page ------------------------------------------------------ */

.auth-shell {
    min-height: 100vh;
    display: grid; place-items: center;
    padding: 2rem 1.25rem;
    background:
        radial-gradient(1000px 500px at 50% -15%, var(--brand-050), transparent 70%),
        var(--ink-050);
}
.auth-card {
    width: 100%; max-width: 24rem;
    background: #fff;
    border: 1px solid var(--ink-200);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    padding: 2rem 1.75rem;
}
.auth-card .brand { justify-content: center; margin-bottom: 1.5rem; }
.auth-card form :is(input, select) { max-width: 100%; }
.auth-card button { width: 100%; justify-content: center; }
.auth-divider {
    display: flex; align-items: center; gap: .75rem;
    margin: 1.1rem 0;
    color: var(--ink-500); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em;
}
.auth-divider::before, .auth-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--ink-200);
}
.auth-card button.secondary {
    background: #fff; color: var(--ink-700); border: 1px solid var(--ink-300);
}

/* --- 8. Small screens ----------------------------------------------------- */

@media (max-width: 720px) {
    .app-header__inner { flex-wrap: wrap; gap: .6rem; padding: .6rem 1rem; }
    .app-nav { order: 3; width: 100%; overflow-x: auto; }
    .app-user { margin-left: auto; }
    .app-main { padding: 1.25rem 1rem 3rem; }
    form :is(input, select, textarea):not([type=checkbox]):not([type=radio]) { max-width: 100%; }
}