/* ==========================================================================
   Pulse — WebUI design language (feature 003)
   Hand-written, no build step. Stripe/Linear-style sidebar dashboard.
   Token-driven; component class names are kept stable so every page inherits
   the look without markup changes.
   ========================================================================== */

:root {
    /* Color — neutral grayscale ramp */
    --gray-50:  #f6f9fc;
    --gray-100: #eef2f7;
    --gray-200: #e3e8ee;
    --gray-300: #d5dbe3;
    --gray-400: #b3bccb;
    --gray-500: #8792a2;
    --gray-600: #697386;
    --gray-700: #4f566b;
    --gray-800: #2a2f45;
    --gray-900: #1a1f36;

    /* Color — surfaces & text (audited Sail values) */
    --color-bg: var(--gray-50);
    --color-surface: #ffffff;
    --color-surface-offset: #f4f7fa;   /* panels, inputs, row-hover */
    --color-text: #1a2c44;             /* body / labels */
    --color-heading: #30313d;          /* headings */
    --color-value: #414552;            /* input + numeric value text */
    --color-muted: #667691;            /* captions, axis, footer, icons */
    --color-negative: #b13600;         /* negative metric deltas */
    --color-border: #d4dee9;           /* audited hairline */

    /* Color — accent (Sail brand purple; audited #533AFD, NOT #635bff) */
    --color-primary: #533AFD;          /* brand fill / active text / underline */
    --color-primary-hover: #44139F;    /* primary keyline darken on hover/focus */
    --color-link: #625afa;             /* nav / CTA link purple */
    --color-accent-soft: rgba(83, 58, 253, 0.08);

    /* Sail keyline / chrome literals (translated from audits; not raw-pasted). */
    --keyline: #d4dee9;                /* default 1px ring (rgb 212,222,233) */
    --keyline-hover: #95a4ba;          /* ring darkens on hover (rgb 149,164,186) */
    --color-navy: #273951;             /* secondary-button text (rgb 39,57,81) */
    --color-ink: #1a2c44;              /* table/body navy text (rgb 26,44,68) */
    --color-tooltip: #3c4f69;          /* dark tooltip fill (rgb 60,79,105) */
    --row-hover: rgb(244, 247, 250);   /* universal hover grey + row hover */
    --divider: #ecf1f6;               /* inset table hairline (rgb 236,241,246) */

    /* Color — semantic (success forced to audited 3-tone; warn/danger not in audit) */
    --color-success: #217005;
    --color-success-bg: #eafcdd;
    --color-success-border: #a8f170;
    --color-warn: #8a6d00;
    --color-warn-bg: #fff8e1;
    --color-warn-border: #f1d678;
    --color-danger: #df1b41;
    --color-danger-bg: #fde8ec;
    --color-danger-border: #f4a9b8;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    /* Spacing scale */
    --space-0:  0;
    --space-px: 2px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 48px;
    --space-10: 64px;
    --space-11: 80px;

    /* Typography */
    --font-sans: -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-mono: "Menlo", "Consolas", ui-monospace, SFMono-Regular, monospace;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Typography — size + line-height scale
       caption=timestamps/axis/badges, body=text+labels+table cells,
       md=card/section titles, lg=stat values & empty-state titles, title=H1.
       Note: table column headers use body style (no caps/bold);
       in-body links are underlined at rest, underline removed on :hover. */
    --text-caption: 12px;   --leading-caption: 16px;
    --text-body:    14px;   --leading-body:    20px;
    --text-md:      16px;   --leading-md:      24px;
    --text-lg:      20px;   --leading-lg:      28px;
    --text-title:   28px;   --leading-title:   36px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(50, 50, 93, 0.07);
    --shadow-card: 0 0 0 1px var(--color-border), 0 2px 5px rgba(50, 50, 93, 0.08);
    /* hover variant: surfaces/buttons elevate (deeper lift), they don't darken */
    --shadow-card-hover: 0 0 0 1px var(--color-border), 0 3px 9px rgba(50, 50, 93, 0.08), 0 2px 5px rgba(50, 50, 93, 0.08);
    --shadow-pop: 0 4px 16px rgba(50, 50, 93, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
    /* Sail popover-chrome: two-layer drop shadow shared by every dashboard popover. */
    --shadow-popover: rgba(0, 0, 0, 0.12) 0 5px 15px, rgba(48, 49, 61, 0.08) 0 15px 35px;
    /* Sail tooltip shadow: subtle two-layer lift. */
    --shadow-tooltip: rgba(0, 0, 0, 0.12) 0 1px 1px, rgba(48, 49, 61, 0.08) 0 2px 5px;
    /* primary button: brand-color keyline ring (audit: box-shadow ring, not a border).
       hover darkens the ring to --color-primary-hover (#44139F). */
    --shadow-button: 0 0 0 1px var(--color-primary), 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(64, 68, 82, 0.08);
    --shadow-button-hover: 0 0 0 1px var(--color-primary-hover), 0 1px 1px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(64, 68, 82, 0.08);

    /* Focus ring — apply on :focus-visible. Brand-tinted (Stripe uses cyan). */
    --focus-ring: 0 0 0 4px rgba(99, 91, 255, 0.28);

    /* Layout dimensions */
    --sidebar-w: 244px;
    --topbar-h: 56px;
    --content-max: 1120px;

    /* Motion */
    --transition-fast: 120ms ease;
    --transition: 240ms ease;
    --transition-slow: 400ms ease;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-surface);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Links: nav/CTA purple, no underline, no darken on hover (audit). */
a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link); }

/* In-body links: underlined at rest, underline removed on hover (audit). */
p a, dd a, .prose a { color: var(--color-text); text-decoration: underline; }
p a:hover, dd a:hover, .prose a:hover { text-decoration: none; }

h1, h2, h3 { color: var(--color-heading); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }

code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: var(--color-bg);
    padding: 0 var(--space-1);
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   App shell — sidebar + main
   ========================================================================== */

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}
body.app-bare .app-shell { grid-template-columns: 1fr; }

.app-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
}

.app-main {
    display: flex;
    flex-direction: column;
    min-width: 0; /* allow tables to overflow instead of stretching the grid */
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 0 var(--space-6);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(180%) blur(6px);
    border-bottom: 1px solid var(--color-border);
}

.app-content {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-6);
}

/* ==========================================================================
   Sidebar internals
   ========================================================================== */

.sidebar-workspace {
    padding: var(--space-4) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--weight-semibold);
    font-size: 1.15rem;
    letter-spacing: -0.02em;
    color: var(--color-primary-hover);
    margin-bottom: var(--space-3);
}

.brand-logo {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    color: var(--color-primary);
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3) var(--space-2);
}

.nav-group { margin-bottom: var(--space-6); }
.nav-group:last-child { margin-bottom: 0; }
/* Section labels: sentence case, quiet (audit: Sail nav uses no caps/letter-spacing). */
.nav-group-title {
    padding: 0 var(--space-3) var(--space-2);
    font-size: var(--text-caption);
    font-weight: var(--weight-regular);
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-muted);
}

/* Geometry matched to nav-sidebar-primary: 30px rows, 6px icon gap, 16px icon. */
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: var(--space-1) var(--space-3);
    margin-bottom: 0;
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-weight: var(--weight-regular);
    font-size: var(--text-body);
    line-height: 1.2;
    transition: background var(--transition-fast), color var(--transition-fast);
}
/* Subtle universal hover tint (audit), not a heavy gray pill. */
.nav-item:hover { background: var(--row-hover); color: var(--color-text); }
/* Active = brand purple + semibold only (audit: no background pill / indicator). */
.nav-item.is-active {
    color: var(--color-primary);
    font-weight: var(--weight-semibold);
}
.nav-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-muted);
}
.nav-item:hover .nav-icon,
.nav-item.is-active .nav-icon { color: currentColor; }

.sidebar-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-4);
}

/* ==========================================================================
   Topbar internals
   ========================================================================== */

.sidebar-toggle {
    display: none; /* shown only on mobile */
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-muted);
    cursor: pointer;
}
.sidebar-toggle:hover { color: var(--color-text); }

.topbar-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: min(360px, 40%);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface-offset);
    border: 0;
    border-radius: var(--radius-lg);
    color: var(--color-muted);
    font-size: var(--text-body);
}
.topbar-search:focus-within { background: var(--color-surface); box-shadow: var(--focus-ring); }
.topbar-search > .nav-icon { width: 16px; height: 16px; flex: none; }

.topbar-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
}
.topbar-search-input:focus { outline: none; }
.topbar-search-input::placeholder { color: var(--color-muted); }
.topbar-search-input::-webkit-search-cancel-button { cursor: pointer; }

/* Results panel reuses the .actions-panel popover, sized to the search box. */
.topbar-search-panel {
    left: 0;
    right: auto;
    width: max(100%, 320px);
    max-height: 70vh;
    overflow-y: auto;
}
.topbar-search-panel[hidden] { display: none; }

.topbar-search-row { text-decoration: none; }
.topbar-search-row mark { background: transparent; color: var(--color-primary); font-weight: var(--weight-semibold); }
.topbar-search-row[aria-selected="true"] { background: var(--color-accent-soft); }
.topbar-search-row.is-archived { color: var(--color-muted); }
.topbar-search-icon { display: inline-flex; flex: none; }
.topbar-search-icon .nav-icon { width: 16px; height: 16px; color: var(--color-muted); }
.topbar-search-row .topbar-search-icon:last-child { margin-left: auto; }
.topbar-search-text { display: flex; flex-direction: column; min-width: 0; }
.topbar-search-text strong { font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-search-text small { color: var(--color-muted); font-size: 0.8rem; overflow-wrap: anywhere; }
.topbar-search-empty { padding: var(--space-2) var(--space-3); margin: 0; color: var(--color-muted); font-size: 0.9rem; }

.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.topbar-form { margin: 0; }

/* ==========================================================================
   Notice bell (§11 dismissible notices)
   ========================================================================== */

.notice-bell { position: relative; }
.notice-bell > summary { list-style: none; }
.notice-bell > summary::-webkit-details-marker { display: none; }

.notice-bell-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-muted);
    cursor: pointer;
}
.notice-bell-toggle:hover { color: var(--color-text); }
.notice-bell[open] .notice-bell-toggle { color: var(--color-text); border-color: var(--color-primary); }

.notice-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--color-danger);
    color: #fff;
    font-size: 0.66rem;
    font-weight: var(--weight-semibold);
    line-height: 17px;
    text-align: center;
}

.notice-panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: 50;
    width: 320px;
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--space-2);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
}
.notice-panel-title {
    padding: var(--space-2) var(--space-2) var(--space-1);
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-muted);
}
.notice-empty { padding: var(--space-2); font-size: 0.85rem; }

.notice-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-warn-border);
    background: var(--color-warn-bg);
    margin-bottom: var(--space-1);
}
.notice-item-body { flex: 1; display: flex; flex-direction: column; gap: 2px; color: var(--color-text); }
.notice-item-body:hover { color: var(--color-text); }
.notice-item-amount { font-weight: var(--weight-semibold); font-size: 0.9rem; }
.notice-item-meta { font-size: 0.8rem; color: var(--color-warn); }

.notice-dismiss-form { margin: 0; }
.notice-dismiss-btn {
    display: inline-flex;
    padding: 2px;
    border: none;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
}
.notice-dismiss-btn:hover { color: var(--color-text); }

.notice-panel-footer {
    display: block;
    padding: var(--space-2);
    font-size: 0.82rem;
    font-weight: var(--weight-medium);
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(26, 31, 54, 0.4);
}

/* ==========================================================================
   Page header
   ========================================================================== */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.page-header h1 { margin: 0; font-size: var(--text-title); line-height: var(--leading-title); font-weight: var(--weight-bold); }
.page-header .subtitle { color: var(--color-muted); font-size: var(--text-caption); margin: var(--space-1) 0 0; }

/* Left column: breadcrumb stacked above the title (+ optional status tag). */
.page-header-main { min-width: 0; }
.page-header-title { display: flex; align-items: center; gap: var(--space-3); }

/* Right column: context buttons — 1 primary CTA + secondary icon buttons + "..." popover.
   Conceptually identical to the row-action cluster. */
.page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
}

/* ==========================================================================
   Breadcrumb — muted trail above the page H1; last crumb is current.
   ========================================================================== */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: 0 0 var(--space-1);
    font-size: var(--text-caption);
    line-height: var(--leading-caption);
    color: var(--color-muted);
}
.breadcrumb a { color: var(--color-muted); font-weight: var(--weight-medium); }
.breadcrumb a:hover { color: var(--color-ink); }
.breadcrumb-sep { color: var(--gray-400); user-select: none; }
.breadcrumb-current { color: var(--color-ink); font-weight: var(--weight-medium); }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: none;
    padding: var(--space-6);
}
.card h1 { margin-top: 0; }
.card + .card { margin-top: var(--space-6); }

.auth-card { max-width: 420px; margin: 12vh auto var(--space-8); }

/* Danger zone (detail pages): subtle red accent around destructive actions. */
.danger-zone { box-shadow: 0 0 0 1px var(--color-danger-bg), var(--shadow-sm); }
.danger-zone h2 { color: var(--color-danger); }

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}
.card-header h1 { margin: 0; }

.muted { color: var(--color-muted); }

/* ==========================================================================
   Summary cards (dashboard metrics — consumed by M11)
   ========================================================================== */

.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.summary-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: none;
    padding: var(--space-5);
}
.summary-card .metric-label {
    font-size: var(--text-caption);
    color: var(--color-muted);
    font-weight: var(--weight-medium);
}
.summary-card .metric {
    font-size: var(--text-lg);
    line-height: var(--leading-lg);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    margin-top: var(--space-1);
}

/* Overview / dashboard (M11) */
.year-picker { display: flex; align-items: center; gap: var(--space-2); }
.year-picker label { font-size: 0.9rem; color: var(--color-muted); font-weight: var(--weight-medium); }
.year-picker select {
    border: 0;
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-3);
    font: inherit;
    font-weight: var(--weight-medium);
    color: var(--color-value);
    background: var(--color-surface-offset);
}
.year-picker select:focus { outline: none; background: var(--color-surface); box-shadow: var(--focus-ring); }

.overview-currency + .overview-currency { margin-top: var(--space-8); }
.overview-currency-title { margin: 0 0 var(--space-4); font-size: 1.1rem; color: var(--color-muted); }

.overview-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}
.overview-charts h3 { margin: 0 0 var(--space-4); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.chart-box { position: relative; height: 280px; }

@media (max-width: 720px) {
    .overview-charts { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Forms
   ========================================================================== */

.field { display: block; margin-bottom: var(--space-4); }
.field > span {
    display: block;
    font-size: 0.85rem;
    font-weight: var(--weight-medium);
    color: var(--color-muted);
    margin-bottom: var(--space-1);
}
.field input,
.field select,
.field textarea {
    width: 100%;
    border: 0;
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-3);
    font: inherit;
    color: var(--color-value);
    background: var(--color-surface-offset);
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    background: var(--color-surface);
    box-shadow: var(--focus-ring);
}
.field.checkbox { display: flex; align-items: center; gap: var(--space-2); }
.field.checkbox input { width: auto; }
.field small.error { display: block; color: var(--color-danger); font-size: 0.85rem; margin-top: var(--space-1); }

fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-6);
}
fieldset legend { font-weight: var(--weight-medium); color: var(--color-muted); padding: 0 var(--space-2); }

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-6);
}
@media (max-width: 720px) {
    .grid-2 { grid-template-columns: 1fr; }
}

/* Definition lists rendered in the two-column grid (e.g. bill detail params):
   read as muted labels with the value beneath. */
dl.grid-2 { margin: 0 0 var(--space-6); }
dl.grid-2 > div { display: flex; flex-direction: column; gap: 2px; }
dl.grid-2 dt {
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
}
dl.grid-2 dd { margin: 0; font-size: var(--text-body); color: var(--color-text); }

/* Editable line-items table (new/edit bill): inputs fill their cell, numeric
   columns are width-capped so the description gets the room. */
#line-items td { vertical-align: top; }
#line-items input,
#line-items textarea,
#line-items select {
    width: 100%;
    border: 0;
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-3);
    font: inherit;
    color: var(--color-value);
    background: var(--color-surface-offset);
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
#line-items input:focus,
#line-items textarea:focus,
#line-items select:focus {
    outline: none;
    background: var(--color-surface);
    box-shadow: var(--focus-ring);
}
#line-items textarea { resize: vertical; min-height: 40px; line-height: 1.4; }
#line-items th:nth-child(2), #line-items td:nth-child(2) { width: 90px; }
#line-items th:nth-child(3), #line-items td:nth-child(3) { width: 80px; }
#line-items th:nth-child(4), #line-items td:nth-child(4) { width: 130px; }
#line-items th:nth-child(5), #line-items td:nth-child(5) { width: 90px; }
#line-items th:nth-child(6), #line-items td:nth-child(6) { width: 44px; text-align: center; }

.form-actions { display: flex; gap: var(--space-3); align-items: center; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    /* Sail button geometry: 28px tall, 6px radius, 14/600, icon+label flex row. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 28px;
    border: 0;
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-3);
    font-family: inherit;
    font-size: var(--text-body);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-body);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.btn .nav-icon { width: 16px; height: 16px; flex: none; color: currentColor; }
/* Primary: brand fill, white, brand-color keyline ring. Hover darkens the ring (audit). */
.btn-primary { background: var(--color-primary); color: white; box-shadow: var(--shadow-button); }
.btn-primary:hover { background: var(--color-primary); color: white; box-shadow: var(--shadow-button-hover); }

.btn-link { background: transparent; color: var(--color-link); padding: 0; }
.btn-link:hover { color: var(--color-link); }
.btn-link.danger { color: var(--color-danger); }
.btn-link.danger:hover { color: var(--color-danger); text-decoration: underline; }

/* Secondary: white surface, navy text, light-grey keyline ring; ring darkens on hover. */
.btn-secondary {
    background: var(--color-surface);
    color: var(--color-navy);
    font-weight: var(--weight-semibold);
    border: 0;
    box-shadow: 0 0 0 1px var(--keyline);
}
.btn-secondary:hover { background: var(--color-surface); color: var(--color-navy); box-shadow: 0 0 0 1px var(--keyline-hover), 0 2px 5px rgba(64, 68, 82, 0.08); }

/* Keyboard focus ring — controls that previously had no visible focus state. */
.btn:focus-visible,
.actions-dots:focus-visible,
.actions-item:focus-visible,
.nav-item:focus-visible,
.workspace-trigger:focus-visible,
.notice-bell-toggle:focus-visible,
.sidebar-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.btn-primary:focus-visible { box-shadow: var(--shadow-button-hover), var(--focus-ring); }
.btn-secondary:focus-visible { box-shadow: 0 0 0 1px var(--keyline-hover), var(--focus-ring); }

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: 0.92rem;
}
.alert-danger { background: var(--color-danger-bg); color: var(--color-danger); border: 1px solid var(--color-danger-border); }
.alert-warn { background: var(--color-warn-bg); color: var(--color-warn); border: 1px solid var(--color-warn-border); }

/* ==========================================================================
   Tables
   ========================================================================== */

.table-wrap {
    /* overflow must stay visible so row-action popovers aren't clipped (a nested
       scroll container also broke sticky headers). Tables fit the content column. */
    overflow: visible;
    border-radius: var(--radius-md);
}
.table { width: 100%; border-collapse: collapse; }
/* Cell padding 8px 12px; hairlines drawn as inset box-shadow (audit) to avoid a
   double-border seam at the sticky footer. */
.table th, .table td {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    box-shadow: var(--divider) 0 -1px 0 0 inset;
}
.table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-surface);
    font-weight: var(--weight-bold);
    color: var(--color-ink);
    font-size: var(--text-caption);
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
}
.table tbody tr { transition: background var(--transition-fast); }
.table tbody tr:hover { background: var(--row-hover); }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Amount / emphasized cells render at 600 weight (audit). */
.table td.amount, .table td.num.amount { font-weight: var(--weight-semibold); color: var(--color-ink); }
/* Cell links read as plain text (audit: tables carry no link-purple); the whole
   row is the click target via row-actions.js. */
.table td a { color: inherit; }
.table tbody tr[data-row-href] { cursor: pointer; }
/* Inline activate/text button in a table cell — reads as plain ink text, not a link. */
.cell-activate { padding: 0; border: 0; background: none; font: inherit; color: var(--color-text); cursor: pointer; text-align: left; }
.cell-activate:hover:not(:disabled) { text-decoration: underline; }
.cell-activate:disabled { cursor: default; font-weight: var(--weight-semibold); }
.row-active { background: var(--color-accent-soft); }
/* Last column hugs the right edge so the action cluster is flush, not inset.
   Scoped to `.table td.row-actions` so it outranks `.table td { text-align:left }`. */
.table td.row-actions { text-align: right; white-space: nowrap; padding-right: var(--space-3); }
.table thead th.row-actions, .table thead th:last-child { text-align: right; }
.inline-form, .inline { display: inline; margin-left: var(--space-3); }

/* Sticky "N items" summary footer — casts a soft shadow upward over scrolling rows. */
.table-summary {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: var(--text-body);
    box-shadow: rgba(48, 49, 61, 0.2) 0 -3px 3px -3px;
}

/* Utility: keep date/amount cells on one line. */
.nowrap { white-space: nowrap; }

/* Email-on-file indicator (companies list / detail). */
.mail-icon { width: 18px; height: 18px; vertical-align: middle; }
.mail-icon.has-email { color: var(--color-success); }
.mail-icon.no-email { color: var(--gray-400); }

.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-4);
    color: var(--color-muted);
    font-size: 0.85rem;
}

/* ==========================================================================
   Badges & status
   ========================================================================== */

.badge {
    display: inline-block;
    padding: 0 var(--space-2);
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    margin-left: var(--space-2);
    vertical-align: middle;
}

.status {
    display: inline-block;
    padding: 1px 6px;
    font-size: var(--text-caption);
    font-weight: var(--weight-regular);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}
.status-active, .status-issued, .status-paid { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }
.status-disabled, .status-cancelled, .status-archived { background: var(--gray-100); color: var(--color-muted); border-color: var(--gray-200); }
.status-draft { background: var(--color-accent-soft); color: var(--color-primary); }

/* ==========================================================================
   Actions popover — reusable "…" menu and workspace switcher.
   Native <details> dropdown (no JS), styled like samples/three-dots-dialog.png.
   ========================================================================== */

.actions-menu { position: relative; display: inline-block; }
.actions-menu > summary { list-style: none; cursor: pointer; }
.actions-menu > summary::-webkit-details-marker { display: none; }

/* Icon-only trigger (row actions). Keyline ring (audit) darkens grey→navy on hover. */
.actions-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-muted);
    box-shadow: 0 0 0 1px var(--keyline);
    transition: box-shadow var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.actions-dots:hover { color: var(--color-navy); box-shadow: 0 0 0 1px var(--keyline-hover); }
.actions-menu[open] .actions-dots { color: var(--color-navy); box-shadow: 0 0 0 1px var(--keyline-hover); }
.actions-dots .nav-icon { width: 16px; height: 16px; }

/* Popover surface — Sail popover-chrome: white, 8px radius, 1px keyline border,
   two-layer shadow. Inner list is transparent; items supply their own inset highlight. */
.actions-panel {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    z-index: 50;
    min-width: 200px;
    padding: var(--space-1) 0;
    background: var(--color-surface);
    border: 1px solid var(--keyline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-popover);
    text-align: left;
}
.actions-panel.align-left { right: auto; left: 0; }

/* Group title — 12/700, navy, no uppercase (audit). */
.actions-section-title {
    padding: 6px 10px;
    margin: 0;
    font-size: var(--text-caption);
    font-weight: var(--weight-bold);
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-ink);
}
.actions-divider { height: 1px; margin: var(--space-1) 0; background: var(--color-border); border: 0; }

/* Menu item — 32px tall, INSET hover highlight (margin 0 4px, 3px radius, grey fill). */
.actions-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: calc(100% - 8px);
    min-height: 32px;
    margin: 0 var(--space-1);
    padding: 6px 6px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    font-weight: var(--weight-regular);
    text-align: left;
    cursor: pointer;
}
.actions-item:hover { background: var(--row-hover); color: var(--color-ink); }
.actions-item .nav-icon { width: 16px; height: 16px; color: var(--color-muted); }
.actions-item:hover .nav-icon { color: currentColor; }
.actions-item.is-active { background: var(--color-accent-soft); color: var(--color-primary); }
.actions-item.is-danger { color: var(--color-danger); }
.actions-item.is-danger .nav-icon { color: var(--color-danger); }
.actions-item.is-danger:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.actions-item.is-disabled { color: var(--gray-400); cursor: default; pointer-events: none; }
.actions-form { margin: 0; }

/* Workspace switcher reuses the popover with a full-width labelled trigger. */
.workspace-switcher { display: block; }
.workspace-label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-caption);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-muted);
}
.workspace-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font: inherit;
    font-weight: var(--weight-medium);
    color: var(--color-text);
}
.workspace-trigger:hover { border-color: var(--gray-300); }
.workspace-trigger .nav-icon { width: 16px; height: 16px; flex: none; color: var(--color-muted); }
.workspace-switcher[open] .workspace-trigger .nav-icon { transform: rotate(180deg); }
.workspace-switcher .actions-panel { left: 0; right: 0; min-width: 0; }
.sidebar-email { margin-top: var(--space-2); font-size: 0.78rem; color: var(--color-muted); word-break: break-all; }

/* ==========================================================================
   Row-action segmented pill cluster (toolbar-row-actions)
   Exposed icon pills revealed on row hover; '...' toggle is the last pill.
   Joined segmented look — only outer corners rounded; keyline ring darkens on hover.
   ========================================================================== */

.row-actions-cluster {
    display: inline-flex;
    align-items: center;
    gap: 0;                 /* pills are adjacent → segmented */
    vertical-align: middle;
}

/* Each exposed pill (icon-only button or link). */
.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 24px;
    padding: 0;
    border: 0;
    background: var(--color-surface);
    color: var(--color-navy);
    border-radius: var(--radius-md);   /* base; segmented rules below override in clusters */
    box-shadow: 0 0 0 1px var(--keyline);
    cursor: pointer;
    transition: box-shadow var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
    position: relative;
}
.pill:hover { color: var(--color-navy); box-shadow: 0 0 0 1px var(--keyline-hover); z-index: 1; }
.pill .nav-icon { width: 16px; height: 16px; }
.pill.is-danger { color: var(--color-danger); }
/* Standalone pill (single row action, e.g. Payment review) — full capsule. */
.pill-solo { border-radius: 999px; }
/* Segmented radii: outer corners 6px, inner corners 0. */
.row-actions-cluster > .pill:first-child,
.row-actions-cluster > .actions-menu:first-child .pill { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.row-actions-cluster > .pill:last-child,
.row-actions-cluster > .actions-menu:last-child .pill { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.row-actions-cluster > .pill:only-child,
.row-actions-cluster > .actions-menu:only-child .pill { border-radius: var(--radius-md); }
.row-actions-cluster > .actions-menu .pill { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

/* Reveal on row hover; keep visible on keyboard focus. JS-free fallback: always shown. */
.table tbody tr .row-actions-cluster { opacity: 1; }
@media (hover: hover) {
    .table tbody tr .row-actions-cluster { opacity: 0; transition: opacity var(--transition-fast); }
    .table tbody tr:hover .row-actions-cluster,
    .table tbody tr:focus-within .row-actions-cluster { opacity: 1; }
}

/* ==========================================================================
   Tooltip — dark slate label revealed above an icon pill on hover/focus.
   CSS-only (data-tooltip) + a JS-managed variant share the same look.
   ========================================================================== */

.tip { position: relative; }
.tip[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    padding: var(--space-1) var(--space-2);
    max-width: 200px;
    background: var(--color-tooltip);
    color: #fff;
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-weight: var(--weight-regular);
    white-space: nowrap;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-tooltip);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s cubic-bezier(0, 0.09, 0.4, 1);
}
.tip[data-tooltip]:hover::after,
.tip[data-tooltip]:focus-visible::after { opacity: 1; }

/* ==========================================================================
   Tags / chips — Sail badge look (status pills). Variants map to semantic tones.
   ========================================================================== */

.tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px var(--space-2);
    font-size: var(--text-caption);
    line-height: var(--leading-caption);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}
.tag--success { background: var(--color-success-bg); color: var(--color-success); box-shadow: var(--color-success-border) 0 0 0 1px inset; }
.tag--neutral { background: var(--gray-100); color: var(--color-muted); box-shadow: var(--gray-200) 0 0 0 1px inset; }
.tag--draft   { background: var(--color-accent-soft); color: var(--color-primary); }
.tag--vat     { background: var(--color-warn-bg); color: var(--color-warn); box-shadow: var(--color-warn-border) 0 0 0 1px inset; }
.tag--danger  { background: var(--color-danger-bg); color: var(--color-danger); box-shadow: var(--color-danger-border) 0 0 0 1px inset; }

/* ==========================================================================
   Filter toolbar shell (toolbar-active-filters) — UI only, no query wiring.
   Empty filter = dashed outline; filled = solid; hover greys the fill.
   ========================================================================== */

.filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 24px;
    padding: 3px var(--space-2) 3px 6px;
    border: 1px dashed var(--keyline);
    border-radius: 9999px;
    background: transparent;
    color: var(--color-ink);
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-caption);
    cursor: pointer;
}
.filter-chip:hover { background: var(--row-hover); }
.filter-chip.is-applied { border-style: solid; }
.filter-chip.is-applied .filter-chip-value { color: var(--color-primary); }
.filter-chip-sep { width: 1px; height: 12px; background: var(--keyline); }
.filter-chip .nav-icon { width: 12px; height: 12px; color: var(--color-muted); }
.filter-clear { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--color-primary); cursor: pointer; }

/* Filter popover container — popover-chrome (reuse .actions-panel for the menu body). */
.filter-popover {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    z-index: 50;
    min-width: 220px;
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--keyline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-popover);
}
.filter-popover-title { margin: 0 0 var(--space-3); font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--color-navy); }
.filter-form { display: flex; flex-direction: column; gap: var(--space-3); }
.filter-form .filter-search { width: 100%; }
.filter-check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-body); color: var(--color-ink); cursor: pointer; }
.filter-check input { accent-color: var(--color-primary); }
/* Scrollable option list for the searchable customer filter. */
.filter-options { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; }
.filter-option { display: block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); color: var(--color-ink); font-size: var(--text-body); }
.filter-option:hover { background: var(--row-hover); color: var(--color-ink); }
.filter-option.is-selected { color: var(--color-primary); font-weight: var(--weight-semibold); }

/* ==========================================================================
   Endless-scroll container helper (Payments) — UI only, no fetch.
   ========================================================================== */

.scroll-wrap { position: relative; }
.scroll-sentinel { height: 1px; }
.scroll-loading {
    display: none;
    padding: var(--space-4);
    text-align: center;
    color: var(--color-muted);
    font-size: var(--text-caption);
}
.scroll-wrap.is-loading .scroll-loading { display: block; }

/* ==========================================================================
   Notifications popover layout (popover-notifications)
   header + tablist indicator + list items with unread dot + footer.
   Classes the notice-bell partial can adopt; chrome shares --shadow-popover.
   ========================================================================== */

.notif-popover {
    width: min(420px, 90vw);
    padding: 0;
    background: var(--color-surface);
    border: 1px solid var(--keyline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-popover);
    overflow: hidden;
}
.notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
}
.notif-header h2 { margin: 0; font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-bold); color: var(--color-heading); }
.notif-header-actions { display: flex; align-items: center; gap: var(--space-3); }
.notif-header-actions a, .notif-header-actions button { color: var(--color-primary); background: none; border: 0; font: inherit; cursor: pointer; }

/* Tab strip with sliding underline indicator. */
.notif-tabs {
    position: relative;
    display: flex;
    padding: 0 var(--space-4);
    box-shadow: var(--divider) 0 -1px 0 0 inset;
}
.notif-tab {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    background: none;
    border: 0;
    font: inherit;
    font-weight: var(--weight-regular);
    color: var(--color-ink);
    text-align: center;
    cursor: pointer;
}
.notif-tab.is-active { color: var(--color-primary); font-weight: var(--weight-semibold); }
.notif-tab-indicator {
    position: absolute;
    bottom: -1px;
    height: 2px;
    background: var(--color-primary);
    transition: transform 0.15s cubic-bezier(0, 0.09, 0.4, 1), width 0.15s ease;
}

.notif-list { max-height: 60vh; overflow-y: auto; padding: var(--space-1) 0; }
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
}
.notif-item:hover { background: var(--row-hover); }
.notif-dot { width: 8px; height: 8px; margin-top: 6px; flex: none; border-radius: 50%; background: var(--color-primary); }
.notif-item.is-read .notif-dot { background: transparent; }
.notif-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-item-date { font-size: var(--text-caption); color: var(--color-muted); }
.notif-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--divider) 0 1px 0 0 inset;
    font-size: var(--text-caption);
    color: var(--color-muted);
}
.notif-footer a { color: var(--color-primary); font-size: var(--text-body); }

/* ==========================================================================
   ARES autosuggest widget (unchanged behaviour)
   ========================================================================== */

.ares-input { display: flex; gap: var(--space-2); align-items: stretch; }
.ares-input input { flex: 1; }
.ares-input .btn { white-space: nowrap; }

.ares-suggest { position: relative; }
.ares-suggest-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    max-height: 280px;
    overflow-y: auto;
}
.ares-suggest-menu[hidden] { display: none; }
.ares-suggest-option {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.ares-suggest-option strong { display: block; font-weight: var(--weight-medium); }
.ares-suggest-option small { display: block; color: var(--color-muted); font-size: 0.8rem; }
.ares-suggest-option:hover,
.ares-suggest-option[aria-selected="true"] { background: var(--color-accent-soft); }
.ares-suggest-empty { padding: var(--space-2) var(--space-3); color: var(--color-muted); font-size: 0.9rem; }

/* Workspace (active-issuer) switcher in the sidebar */
.active-issuer-switcher { display: block; }
.active-issuer-switcher label { display: block; }
.active-issuer-switcher .muted { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.07em; display: block; margin-bottom: var(--space-1); }
.active-issuer-switcher select {
    width: 100%;
    border: 0;
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-3);
    font: inherit;
    font-weight: var(--weight-medium);
    color: var(--color-value);
    background: var(--color-surface-offset);
}
.active-issuer-switcher select:focus { outline: none; background: var(--color-surface); box-shadow: var(--focus-ring); }

/* ==========================================================================
   Responsive — sidebar becomes off-canvas
   ========================================================================== */

@media (max-width: 860px) {
    .app-shell { grid-template-columns: 1fr; }
    .app-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 50;
        width: var(--sidebar-w);
        transform: translateX(-100%);
        transition: transform var(--transition);
        box-shadow: var(--shadow-pop);
    }
    .app-sidebar.is-open { transform: translateX(0); }
    .app-sidebar.is-open ~ .sidebar-backdrop,
    .sidebar-backdrop.is-open { display: block; }
    .sidebar-toggle { display: inline-flex; }
    .table thead th { top: 0; }
}

@media (max-width: 600px) {
    .app-content { padding: var(--space-4); }
    .card { padding: var(--space-4); }
}

/* ==========================================================================
   Legacy topbar classes — retained for backward-compat during transition.
   No live template references these after feature 003; safe to remove later.
   ========================================================================== */
.top {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.container { max-width: 960px; margin: var(--space-8) auto; padding: 0 var(--space-4); }
.topbar-nav { display: flex; gap: var(--space-4); margin-right: auto; margin-left: var(--space-6); }
.topbar-link { color: var(--color-muted); font-weight: var(--weight-medium); }
.topbar-link:hover { color: var(--color-primary-hover); }