/*
 * UI-02: app-specific styles. Tokens only: every colour, space, radius and size below
 * reads a wise_core (Lumen) custom property. Components come from wise_core;
 * this file only lays out the few things it does not ship (see
 * docs/architecture.md, "Additions to the design system").
 */

/* The shell. In the light theme the page is white and the sidebar (on a phone, the top bar and its slide-out menu) a
   light gray, so the work area reads as the brightest surface. Cards (and every surface drawn as one: detail panels,
   a table's rows as cards on a phone) are a very light gray, between the two, with their hairline border; fields
   inside them stay white. The dark theme keeps Lumen's own steps (the sidebar one step above the page). */
:root {
    --app-sidebar-background: var(--color-background-layer-1);
}
:root:not([data-theme="dark"]) {
    --color-background-base: var(--lumen-gray-25);
    --app-sidebar-background: var(--lumen-gray-75);
    --wise-card-bg: var(--lumen-gray-50);
}
body > .flex > aside,
.top-bar,
#mySidebar {
    background-color: var(--app-sidebar-background);
}

/* The logo beside the application's name. */
.brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: calc(var(--spacing) * 2.5);
}
.brand-logo {
    flex: none;
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
    border-radius: var(--corner-radius-300);
}
.top-bar-logo .brand-logo {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
}
.auth-logo {
    display: block;
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
    margin-bottom: calc(var(--spacing) * 4);
    border-radius: var(--corner-radius-500);
}

/* Main menu: the top level (a section, or a page on its own) is bolder than the pages inside a section. */
.tree > .tree-leaf:not(.selected),
.tree > .tree-item > .tree-item-label {
    font-weight: var(--font-weight-semibold);
}

/* Tabs: the selected tab is drawn in the accent colour and underlined by a thicker accent bar. */
.tab-bar .bar-item.selected {
    color: var(--color-accent-content);
}
.tab-bar .bar-item.selected::after {
    height: calc(var(--border-width-100) * 3);
    background-color: var(--color-accent-content);
    border-radius: var(--corner-radius-full) var(--corner-radius-full) 0 0;
}

/* Skip link (UI-06, WCAG 2.4.1): hidden until focused. */
.skip-link {
    position: absolute;
    left: calc(var(--spacing) * 2);
    top: calc(var(--spacing) * -20);
    z-index: 50;
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
    background: var(--color-background-elevated);
    color: var(--color-content-heading);
    border: var(--border-width-200) solid var(--color-border-focus);
    border-radius: var(--corner-radius-500);
}
.skip-link:focus {
    top: calc(var(--spacing) * 2);
}

/* Focus target for the skip link: headings receive focus without a ring of their own. */
[id="main-content"]:focus {
    outline: var(--border-width-200) solid var(--color-focus-ring);
    outline-offset: var(--border-width-200);
}

/* A state word beside its filled glyph (UI-04). */
.state-word {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--spacing) * 1.5);
    color: var(--color-content-default);
}

.block-title {
    margin-bottom: calc(var(--spacing) * 3);
    color: var(--color-content-heading);
    font-size: var(--text-title-m);
    font-weight: var(--text-title-m--font-weight);
    line-height: var(--text-title-m--line-height);
}

.attachment-list {
    display: grid;
    gap: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 4);
}
.attachment-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
}

.attachment-form {
    display: grid;
    gap: calc(var(--spacing) * 3);
    max-width: 40rem;
    padding: calc(var(--spacing) * 4);
    background: var(--color-background-layer-2);
    border: var(--border-width-100) solid var(--color-border-subtle);
    border-radius: var(--corner-radius-500);
}

/* Inline line items inside a form. */
.formset {
    border: 0;
    margin: calc(var(--spacing) * 2) 0 0;
    padding: 0;
    min-width: 0;
}
.formset-table td {
    vertical-align: top;
    min-width: 7rem;
}
.formset-table .input,
.formset-table .select,
.formset-table input:not([type="checkbox"]),
.formset-table select {
    width: 100%;
}

/* Dashboard tiles. */
.kpi-grid {
    display: grid;
    gap: calc(var(--spacing) * 4);
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    margin-top: calc(var(--spacing) * 5);
}
.kpi-value {
    color: var(--color-content-heading);
    font-size: var(--text-heading-m);
    font-weight: var(--text-heading-m--font-weight);
    line-height: var(--text-heading-m--line-height);
    font-variant-numeric: tabular-nums;
}

/* A table that scrolls sideways inside its card: the visually hidden labels in its cells (position: absolute) have to
   be clipped by the card too, or they widen the whole page. */
.card-table {
    position: relative;
}

/* Money and quantities line up. */
.data-table td.text-right,
.detail-panel td.num {
    font-variant-numeric: tabular-nums;
}

/* Totals block under a document's lines. */
.totals {
    margin-left: auto;
    margin-top: calc(var(--spacing) * 4);
    max-width: 26rem;
}
.totals th {
    text-align: left;
    color: var(--color-content-subdued);
    font-weight: var(--text-detail-m--font-weight);
}
.totals td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.totals tr.grand td,
.totals tr.grand th {
    color: var(--color-content-heading);
    font-weight: var(--text-title-s--font-weight);
}

/* The design system's add button floats over the bottom right corner of a phone (UI-12): leave room under the lines
   and their totals so it never covers them. */
@media (max-width: 39.99rem) {
    .child-body {
        padding-bottom: calc(var(--component-height-400) + var(--spacing) * 6);
    }
}

/* Scan screen (WM-24): one large field per step, usable with a keyboard-wedge scanner on a handheld. */
.scan-panel {
    max-width: 36rem;
}
.scan-input {
    width: 100%;
    min-height: var(--control-height-lg);
    font-family: var(--font-mono);
    font-size: var(--text-title-l);
}
.scan-expect {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: calc(var(--spacing) * 1) calc(var(--spacing) * 4);
    margin: calc(var(--spacing) * 3) 0;
}
.scan-expect dt {
    color: var(--color-content-subdued);
}
.scan-expect dd {
    margin: 0;
    color: var(--color-content-heading);
    font-weight: var(--text-title-s--font-weight);
}

/* Large touch targets on the driver's phone screens. */
.driver-actions {
    display: grid;
    gap: calc(var(--spacing) * 3);
    margin-top: calc(var(--spacing) * 4);
}

/* Login card centred on the page canvas. */
.auth-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: calc(var(--spacing) * 4);
}
.auth-card {
    width: 100%;
    max-width: 26rem;
}

/* "Sign in with Google": full width, the multicoloured Google "G" (its brand colours are fixed, set on the SVG) before the label. */
.google-button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: calc(var(--spacing) * 3);
}
.google-button svg {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
}

/* Parameters: JSON values in a readable monospace block. */
.param-value {
    min-width: 16rem;
    font-family: var(--font-mono);
    font-size: var(--text-code-s);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Two-column reconciliation and comparison layouts collapse on phones. */
.split {
    display: grid;
    gap: calc(var(--spacing) * 4);
}
@media (min-width: 64rem) {
    .split {
        grid-template-columns: 1fr 1fr;
    }
}

/* Styleguide (DEBUG only). */
.styleguide-section {
    margin-top: calc(var(--spacing) * 8);
    padding-top: calc(var(--spacing) * 4);
    border-top: var(--border-width-100) solid var(--color-border-subtle);
}
.styleguide-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    margin-top: calc(var(--spacing) * 3);
}

/* wise_core styles a bare <section> for its marketing pages (wide padding, centred);
   inside the app shell a section is just a labelled region of the page. A section that is a component
   (a .detail-panel) keeps the component's own padding. */
.page-panel section:not(.detail-panel) {
    padding-inline: 0;
    padding-block: 0;
    text-align: start;
}

/* Status glyphs take their status family's content colour (Lumen: filled glyph + word). */
.state-word[data-glyph="info"] .status-glyph {
    color: var(--color-informative-content);
}
.state-word[data-glyph="positive"] .status-glyph {
    color: var(--color-positive-content);
}
.state-word[data-glyph="notice"] .status-glyph {
    color: var(--color-notice-content);
}
.state-word[data-glyph="negative"] .status-glyph {
    color: var(--color-negative-content);
}

/* Quick search above a data table (the box, and the clear link beside it). */
.table-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    margin-top: calc(var(--spacing) * 4);
}
.table-tools .search-field {
    max-width: 24rem;
}
.table-tools-empty {
    color: var(--color-content-subdued);
}

/* The recap tab: charts side by side where there is room, one per row on a phone. */
.chart-grid {
    display: grid;
    gap: calc(var(--spacing) * 4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    margin-top: calc(var(--spacing) * 4);
}
.chart-grid .card-title {
    margin-bottom: calc(var(--spacing) * 3);
}

/* A line's form with a card beside it (a receipt's lots: the product's pricing and purchase history). The card
   follows the form on a narrow screen and stays in view beside it on a wide one. */
.form-with-aside {
    display: grid;
    gap: calc(var(--spacing) * 4);
    align-items: start;
}
.form-with-aside > .back-link {
    grid-column: 1 / -1;
}
.form-aside {
    max-width: none;
}
@media (min-width: 80rem) {
    .form-with-aside {
        grid-template-columns: minmax(0, 44rem) minmax(24rem, 1fr);
    }
    .form-aside {
        position: sticky;
        top: calc(var(--spacing) * 4);
        max-height: calc(100vh - var(--spacing) * 8);
        overflow-y: auto;
    }
}
.form-aside[aria-busy="true"] {
    opacity: 0.6;
}
.product-card-section + .product-card-section {
    margin-top: calc(var(--spacing) * 5);
    padding-top: calc(var(--spacing) * 4);
    border-top: var(--border-width-100) solid var(--color-border-subtle);
}
.product-card-text {
    margin-block: calc(var(--spacing) * 2);
    color: var(--color-content-default);
}
.product-card-chart {
    height: 12rem;
    margin-bottom: calc(var(--spacing) * 3);
}

/* Prices worked out from what is typed: a label (with how it is reached) and an amount, aligned on the right. */
.price-rows {
    display: grid;
    gap: calc(var(--spacing) * 2);
    margin: 0;
}
.price-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: calc(var(--spacing) * 3);
    padding-block: calc(var(--spacing) * 1.5);
    border-bottom: var(--border-width-100) solid var(--color-border-subtle);
}
.price-row dt {
    display: grid;
    gap: calc(var(--spacing) * 0.5);
    color: var(--color-content-default);
}
.price-row dd {
    margin: 0;
    color: var(--color-content-heading);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.price-row[data-tone="positive"] dd {
    color: var(--color-positive-content);
}
.price-row[data-tone="notice"] dd {
    color: var(--color-notice-content);
}
.price-row[data-tone="negative"] dd {
    color: var(--color-negative-content);
}

/* The language of the interface, under the security settings of the profile. */
.profile-language {
    display: grid;
    gap: calc(var(--spacing) * 3);
    max-width: 20rem;
    margin-top: calc(var(--spacing) * 5);
    padding-top: calc(var(--spacing) * 4);
    border-top: var(--border-width-100) solid var(--color-border-subtle);
}

/* Contrast (WCAG 2.2 AA, 1.4.11 non-text contrast): a field's edge is what tells it apart from the surface, so it
   holds 3:1 against every surface a field sits on (white page, gray-50 cards, white or gray-75 drawers; and their dark
   steps). Lumen's soft gray-300 edge (#dadada, 1.3-1.4:1) is replaced by step 500 (#8f8f8f light: 3.05-3.23:1;
   #6d6d6d dark: 3.07-3.65:1), the hover deepens it. Selects drop their gray fill (1.3:1, the same problem) and are drawn
   like text fields: a white field with the same edge, as an inset line so their size does not change. Text colours
   already hold 4.5:1 (measured on every page in both themes) and keep Lumen's tokens. */
:root {
    --color-border-field: var(--lumen-gray-500);
}
.select:not([multiple]),
.form-field select:not([multiple]),
.filter-container select:not([multiple]),
.language-switcher select:not([multiple]),
.picker-button {
    background-color: var(--color-background-layer-2);
    box-shadow: inset 0 0 0 var(--border-width-200) var(--color-border-field);
}
.select:not([multiple]):hover,
.form-field select:not([multiple]):hover,
.filter-container select:not([multiple]):hover,
.language-switcher select:not([multiple]):hover,
.picker-button:hover,
.picker-button[aria-expanded="true"] {
    background-color: var(--color-background-layer-2);
    box-shadow: inset 0 0 0 var(--border-width-200) var(--color-border-hover);
}

/* The card's note naming the form fields it filled. */
.product-card-filled {
    margin-bottom: calc(var(--spacing) * 2);
}

/* A field the product's pricing filled (the receipt line's card): a light accent tint until the user types in it. */
.form-field input.is-filled {
    background-color: var(--color-selected-subtle);
}