/* ─────────────────────────────────────────────────────────────────────────────
   CHROME
   The top bar, masthead, language dropdown, navigation and buttons.

   Part 2 of 11, cut from the 5,142-line app.css. THE ORDER OF THESE
   FILES IS LOAD-BEARING — they are one cascade, split for navigation only, and
   index.php links them in this sequence. Moving one changes which rule wins.
   ───────────────────────────────────────────────────────────────────────────── */
/* ============================================================
   LOEWE-STYLE FLAT HEADER (.bar-flat) — plain text category links
   left, bare icon cluster right, no pills. A full-bleed solid strip
   (::before) keeps scrolling content legible beneath the fixed bar.
   ============================================================ */
.floating-topbar.bar-flat {
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 14px;
}
.floating-topbar.bar-flat::before {
    content: '';
    position: absolute; inset: 0; left: 50%; transform: translateX(-50%);
    width: 100vw; background: var(--bg-main); z-index: -1;
}

/* text links — LOEWE language: quiet ink, underline = current page */
.bar-flat .nav-links { gap: var(--space-6); }
.bar-flat .top-nav-link {
    padding: 6px 0;
    border-radius: 0;
    font-size: 14px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.01em;
    opacity: 0.58;
    background: none;
    box-shadow: none;
    text-underline-offset: 7px;
    text-decoration-thickness: 1.5px;
}
.bar-flat .nav-links:not(.has-glider) .top-nav-link:hover { background: none; }
.bar-flat .top-nav-link:hover { opacity: 1; text-decoration: underline; }
.bar-flat .top-nav-link.active,
.bar-flat .nav-links.has-glider .top-nav-link.active {
    opacity: 1;
    background: none;
    box-shadow: none;
    text-decoration: underline;
    font-weight: var(--fw-semibold);
}
.bar-flat .pill-glider { display: none; }

/* right cluster — bare line icons; the + Quick Add stays the single filled action */
.bar-flat .action-group,
.bar-flat .glass-panel.action-group {
    background: transparent;
    box-shadow: none;
    /* This cluster is a .glass-panel that .bar-flat DE-materialises — it is not a
       card here, just a row of bare icons. It already dropped the fill and the
       shadow; the hairline has to go with them, or the card edge draws a stray
       rectangle around the header icons. Same for .nav-group above. */
    border: 0;
    padding: 0;
    gap: 8px;
    border-radius: 0;
    margin-left: auto;    /* stays right even when the text links hide (mobile) */
}
.bar-flat .action-icon-btn { background: transparent; box-shadow: none; }
.user-avatar-btn { border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.user-avatar-btn:hover { transform: translateY(-1px); }
/* (sign-out now lives in the avatar's account menu — see .hdr-dd below) */
/* initials avatar in the header (replaces the generic person icon) */
.hdr-avatar {
    display: flex; align-items: center; justify-content: center;
    width: 27px; height: 27px; border-radius: 50%;
    background: var(--text-main); color: var(--bg-card);
    font-family: var(--font-sans, inherit); font-size: 12px; font-weight: var(--fw-bold, 700);
    line-height: 1; letter-spacing: 0; text-transform: uppercase;
}
.bar-flat .user-avatar-btn { opacity: 1; }

/* ============================================================
   BRAND MASTHEAD — oversized wordmark under the bar (LOEWE-style),
   rendered by the SAME 3D foil-logo module the login uses
   (js/glass/brand-logo.js → #brand-logo-3d). NO CSS mask — the
   canvas bleeds past the layout box so the gentle 3D turn never
   clips. The flat <img> is the no-WebGL fallback.
   ============================================================ */
.brand-masthead {
    position: relative;
    display: block;
    width: min(520px, 56vw);
    aspect-ratio: 484.7 / 137.5;            /* assets/logo.svg viewBox */
    margin: 2px 0 30px;
    flex-shrink: 0;
}
.brand-3d {
    position: absolute;
    inset: -18% -7%;                          /* bleed: rotation stays inside the canvas */
    pointer-events: none;
}
.brand-mark--masthead {
    position: absolute; inset: 0;
    height: 100%; width: 100%;
    object-fit: contain; object-position: left center;
}

/* right-cluster icons — LINE STYLE only (LOEWE): no fills, no borders. The
   quick-add CTA is the deliberate exception: it keeps its ink fill so the
   primary action reads instantly against the quiet icon row (it only gains a
   little air on its right, separating it from the chrome icons). */
.bar-flat .btn-icon-add { margin-left: 0; margin-right: 6px; }
.bar-flat .action-icon-btn { opacity: 0.78; transition: opacity 0.16s ease; }
.bar-flat .action-icon-btn:hover { opacity: 1; background: transparent; }
.bar-flat .action-icon-btn .material-icons-outlined { font-size: 21px; }

/* ============================================================
   LANGUAGE DROPDOWN — a bare globe button + a small floating menu. Shared by the
   logged-in header (?lang reload) and the pre-login bar (re-localise the demo).
   Theme-safe colours (tokens + rgba) so it reads in both light/dark, app + landing.
   ============================================================ */
.lang-dd { position: relative; display: inline-flex; }
.lang-dd-btn {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0; margin: 0; border: 0; background: none;
    color: currentColor; opacity: 0.72; cursor: pointer; border-radius: 50%;
    transition: opacity 0.16s ease;
}
.lang-dd-btn:hover, .lang-dd.open .lang-dd-btn { opacity: 1; }
.lang-dd-btn svg { width: 19px; height: 19px; display: block; }
.lang-dd-menu {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
    min-width: 168px; padding: 6px; margin: 0;
    /* app tokens first, landing tokens as the fallback — --card is unset inside the
       app, so a bare var(--card,#fff) painted the menu white in dark mode. */
    background: var(--bg-card, var(--card, #fff)); border: 1px solid var(--divider, rgba(128,128,128,0.2));
    border-radius: var(--radius-sm); box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.28), 0 2px 6px rgba(0, 0, 0, 0.08);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top right;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.lang-dd.open .lang-dd-menu,
.hdr-dd.open .lang-dd-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.lang-dd-menu button,
.lang-dd-menu a[role='menuitem'] {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; margin: 0; padding: 9px 12px; border: 0; background: none; box-shadow: none;
    border-radius: var(--radius-sm); cursor: pointer; text-align: left; white-space: nowrap;
    font-family: inherit; font-size: 13.5px; font-weight: var(--fw-medium, 500);
    color: var(--ink, var(--text-main, #18181B)); transition: background 0.14s ease;
}
.lang-dd-menu button:hover,
.lang-dd-menu a[role='menuitem']:hover { background: rgba(128, 128, 128, 0.14); }
.lang-dd-menu button.active { font-weight: var(--fw-semibold, 600); }
.lang-dd-menu button.active::after { content: '✓'; font-size: 12px; opacity: 0.8; }

/* ACCOUNT MENU — the avatar opens the same floating menu as the globe
   (.lang-dd-menu chassis, shared above); these are only the extras: the
   identity block on top and the trailing icon on each row. */
.hdr-dd { position: relative; display: inline-flex; }
.hdr-menu { min-width: 208px; }
.hdr-menu-id {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 12px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--divider, rgba(128, 128, 128, 0.2));
}
.hdr-menu-name {
    font-size: 13px; font-weight: var(--fw-semibold, 600);
    color: var(--ink, var(--text-main, #18181B)); line-height: 1.25;
}
.hdr-menu-mail {
    font-size: 11px; font-weight: var(--fw-medium, 500);
    color: var(--text-muted); line-height: 1.3;
    max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hdr-menu a[role='menuitem'] { text-decoration: none; }
.hdr-menu .material-icons-outlined { font-size: 17px; opacity: 0.6; }

/* The shared sliding indicator — an Apple-style DYNAMIC LIQUID-GLASS capsule:
   a frosted translucent substrate (backdrop-blur for spatial depth), a crisp
   specular high-light rim, an inner refraction gloss (beveled lip), and a soft
   ambient luminescence. Glides behind the items (z-index 0). */
.pill-glider {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    height: 0;
    width: 0;
    box-sizing: border-box;
    border-radius: var(--radius-pill);                 /* perfect capsule */
    /* 1 · glass substrate — low-opacity tinted white + extreme backdrop blur */
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    /* 1 · specular border (high-light rim) */
    border: 1px solid rgba(255, 255, 255, 0.7);
    /* 1 · inner refraction gloss (beveled lip)  +  2 · soft ambient glow */
    box-shadow:
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 2px 0 rgba(255, 255, 255, 0.12),
        0 2px 6px rgba(17, 19, 28, 0.10),
        0 8px 22px -4px rgba(17, 19, 28, 0.14);
    overflow: hidden;                                  /* clip the sheen */
    transform: translateX(0);
    opacity: 0;
    pointer-events: none;
    will-change: transform, width;
    transition:
        transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
        width 0.46s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s ease;
}
.pill-glider::before {  /* top specular sweep — light grazing the crystal */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.05) 46%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}
.pill-glider.ready { opacity: 1; }
/* DARK MODE — a smoked-glass crystal: translucent graphite substrate, a faint
   white rim + sheen so it reads as glass without the bright sheen popping. */
html:not([data-theme='light']) .pill-glider {
    background: rgba(62, 62, 74, 0.42);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow:
        inset 0 1px 1px 0 rgba(255, 255, 255, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.36),
        0 8px 22px -4px rgba(0, 0, 0, 0.46);
}
html:not([data-theme='light']) .pill-glider::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%);
}
@media (prefers-reduced-motion: reduce) {
    .pill-glider { transition: opacity 0.3s ease; }
}

/* ---- QUICK ADD — the app's primary action. An INK PILL (icon + label): the
   only filled element in a header of quiet line icons, so it can't be mistaken
   for chrome. Same ink-inversion + lift language as the .lst-cta row CTAs.
   Collapses to a 34px ink circle below 900px, where the label would crowd. ---- */
.btn-icon-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 15px 0 11px;
    flex-shrink: 0;
    margin-left: 3px;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-family: inherit;
    color: var(--bg-card);
    background: var(--text-main);
    box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease;
}

.btn-icon-add .material-icons { font-size: 19px; }
.add-btn-label {
    font-size: 12.5px; font-weight: var(--fw-semibold); letter-spacing: 0.01em;
    white-space: nowrap; line-height: 1;
}

.btn-icon-add:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-icon-add:active { transform: translateY(0) scale(0.97); }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Shared header action icons (theme toggle + logout) — quiet round buttons. */
.action-icon-btn {
    width: 34px;
    height: 34px;
    color: var(--text-main);
    opacity: 0.55;
    text-decoration: none;
    transition: opacity 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.action-icon-btn .material-icons { font-size: 18px; }
.action-icon-btn:hover { opacity: 1; background: var(--active-theme-bg); }
.action-icon-btn:active { transform: scale(0.92); }

/* ---- Initial avatar — inverted chip: black bg + light initial in LIGHT mode,
   reversed (white bg + dark initial) in DARK mode (via --text-main / --bg-main). ---- */
.user-avatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--text-main);
    box-shadow: var(--shadow-2);
    transition: transform 0.18s ease;
}
.user-avatar:hover { transform: scale(1.06); }
.user-avatar > span {
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--bg-main);
    letter-spacing: 0.02em;
}

/* ---- Hamburger (hidden on desktop) ---- */
.nav-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    transition: background 0.2s;
}

.nav-burger:hover { background: var(--active-theme-bg); }

/* ---- Mobile nav drawer ---- */
.nav-drawer,
.glass-panel.nav-drawer {
    position: fixed;
    top: 92px;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: min(360px, calc(100vw - 24px));
    z-index: 999;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: var(--radius-board);
    /* glass material supplied by the unified .liquid-surface group below */
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
}

.nav-drawer.open {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.drawer-link {
    display: block;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    text-decoration: none;
    opacity: 0.65;
    transition: opacity 0.15s, background 0.15s;
}

.drawer-link:hover { opacity: 1; background: var(--active-theme-bg); }

.drawer-link.active {
    opacity: 1;
    background: var(--active-theme-bg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ---- Responsive header behavior ---- */
@media (max-width: 1280px) {
    .floating-topbar { gap: 12px; }
    .top-nav-link { font-size: 13px; padding: 7px 12px; }
}

@media (max-width: 1024px) {
    .floating-topbar { top: 16px; gap: 10px; padding-inline: 12px; }
    .nav-links { display: none; }
    .nav-burger { display: flex; }
    .nav-drawer { top: 76px; }
    .cms-main { padding-top: 92px; }
}

@media (max-width: 560px) {
    .floating-topbar { gap: 8px; padding-inline: 10px; }
    .cms-main { padding-left: var(--space-4); padding-right: var(--space-4); }
    /* Drop the logo pill on phones — frees the row for the nav + user pills.
       The grid's empty left 1fr keeps the centre pill centred. */
    .topbar-brand { display: none; }
}

.header-title-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
}

/* Live clock under the smart greeting (overview). Quiet, tabular, muted —
   a calm status line, not a headline. */
.live-clock {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    letter-spacing: 0.01em;
    user-select: none;
}
.live-clock .clock-pin { font-size: 14px; opacity: 0.7; }
.live-clock .clock-sep { opacity: 0.45; }
.live-clock .clock-time { color: var(--text-main); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
/* Demo only, injected by chrome.js: the date the books are stated AS AT. Weighted
   like the time because it is the more load-bearing of the two — every figure on the
   page is measured against it. */
.live-clock .clock-date { color: var(--text-main); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.live-clock .clock-tz { font-size: 10.5px; font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; opacity: 0.8; }

/* Date filter — same pill language as the header (flat glass, pill radius).
   Inner controls use the same neumorphic active pattern as top-nav-link. */
.date-filter-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--radius-pill);
    padding: 5px 6px;        /* matches nav-group outer padding */
    /* glass material supplied by the unified .liquid-surface group below */
}

/* floating-sticky: once scrolled past the fixed topbar the cluster re-anchors
   as fixed chrome (top/right set by chrome.js from its natural spot) and gains
   the floating-chrome shadow tier. The sentinel keeps its place in the row. */
.dfc-sentinel { width: 0; height: 0; }
.date-filter-container.dfc-stuck {
    position: fixed;
    z-index: 20;
    box-shadow: var(--shadow-3);
    animation: dfc-drop 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes dfc-drop {
    from { transform: translateY(-8px); opacity: 0.5; }
    to { transform: none; opacity: 1; }
}

.toggle-group {
    display: flex;
    background: transparent;
    border-radius: var(--radius-pill);
    padding: 0;
    border: none;
    gap: 2px;
    position: relative;          /* anchors the sliding .pill-glider */
}

.toggle-btn { position: relative; z-index: 1; }

.toggle-btn {
    border: none;
    background: transparent;
    padding: 10px 14px;      /* 5+10+~14+10+5 = 44px — matches header pill height */
    border-radius: var(--radius-pill);
    cursor: pointer;
    color: var(--text-main);
    opacity: 0.55;
    transition: opacity 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    /* Same type as the header nav links — title case, not uppercase. */
    font-size: 13.5px;
    font-weight: var(--fw-semibold);
    text-transform: none;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.toggle-btn:hover { opacity: 0.92; background: var(--active-theme-bg); }

.toggle-btn.active {
    opacity: 1;
    background: var(--neu-bg);
    box-shadow: var(--neu-raised);
    color: var(--text-main);
}

/* Separator + date navigation */
.date-selector {
    display: flex;
    align-items: center;
    gap: 2px;
    padding-left: 8px;
    border-left: 1px solid var(--divider);
}

.date-label {
    font-size: 13.5px;
    font-weight: var(--fw-semibold);
    color: var(--text-main);
    min-width: 100px;
    text-align: center;
    user-select: none;
    letter-spacing: 0.025em;
}

.arrow-btn {
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
    opacity: 0.65;
}

/* Hover feedback ONLY on true-hover devices — otherwise a tap/click leaves the
   highlight "stuck" (touch/hybrid have no mouse-leave to clear :hover). */
@media (hover: hover) {
    .arrow-btn:hover {
        background: var(--active-theme-bg);
        color: var(--text-main);
        opacity: 1;
    }
}
/* Momentary press feedback that always clears on release (works on touch too). */
.arrow-btn:active {
    background: var(--active-theme-bg);
    color: var(--text-main);
    opacity: 1;
    transform: scale(0.92);
}

/* Content panels — layout only; glass material (fill, refractive backdrop,
   sheen, specular, iridescent rim, shadow) comes from the unified
   .liquid-surface group near the end of this file. */
.glass-panel {
    position: relative;
    border-radius: var(--radius-board);
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.text-title {
    font-weight: var(--fw-bold);
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-display);
    color: var(--text-main);          /* flat design — real ink, no mix-blend hack (liquid bg retired) */
    line-height: var(--leading-tight);
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);          /* → 18px, a capped pill at this height */
    font-size: var(--text-base);              /* reference buttons are BODY size (14/500), not caption */
    font-weight: var(--fw-medium);
    letter-spacing: 0.005em;
    cursor: pointer;
    transition: all 0.2s;
    /* NO shadow. The reference is explicit that buttons carry none and separate
       themselves by tonal contrast alone — a lifted button on a whisper-quiet
       card inverts the elevation order and reads as the louder object. */
}

.btn-primary {
    color: var(--bg-main);
    background: var(--theme-color);
    border: 1px solid var(--theme-color-hover);
}

.btn-primary:hover {
    background: var(--theme-color-hover);
    border-color: var(--theme-text);
}

.btn-neutral {
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--divider-strong);
}

.btn-neutral:hover {
    background: var(--bg-main);
    border-color: var(--text-muted);
}

.btn-success {
    background: var(--success-green);
    color: #FFFFFF;
    border: 1px solid #0E9A3A;
}

.btn-danger {
    background: var(--danger-red);
    color: #FFFFFF;
    border: 1px solid #C20E0E;
}

.board {
    border-radius: var(--radius-board);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.board-header {
    padding: var(--space-4) var(--space-6);
    display: flex;                          /* no divider line under the title (cleaner) */
    justify-content: space-between;
    align-items: center;
    background: transparent;
}

.board-title {
    font-size: var(--text-xs);          /* 12px — the reference's caption step (was a hardcoded 12.5px) */
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;            /* Swiss section header — tracked caps, unified site-wide */
    color: var(--text-main);
    margin: 0;
}

.board-body {
    padding: var(--space-5);   /* 20px — the reference's card padding (was 24px) */
    flex: 1;
}

.board-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

.board-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

/* When a grid IS the board body, the columns already supply the 24px side inset
   (.board-grid-col padding) — so the body itself drops its horizontal padding,
   leaving content inset a consistent 24px like the chart card. Vertical stays. */
.board-body.board-grid-3,
.board-body.board-grid-4,
.board-body.board-grid-2 { padding-left: 0; padding-right: 0; }

.board-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.board-grid-col {
    padding: 0 var(--space-6);
    border-right: 1px solid var(--divider);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.board-grid-col:last-child {
    border-right: none;
}

.board-grid-col.align-left {
    align-items: flex-start;
    justify-content: center;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-10);
}

.col-4 {
    grid-column: span 4;
}

.col-6 {
    grid-column: span 6;
}

.col-8 {
    grid-column: span 8;
}

.col-12 {
    grid-column: span 12;
}

@media (max-width: 1400px) {
    .col-4 {
        grid-column: span 6;
    }

    .col-8 {
        grid-column: span 12;
    }
}

#grid-generic {
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
}

#grid-generic .board {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: visible !important;
}

.chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: var(--space-4);
}

.donut-svg {
    width: 160px;
    max-width: 100%;             /* never overflow its column (responsive) */
    height: auto;
    aspect-ratio: 1 / 1;
    transform: rotate(-90deg);
    overflow: visible;
    flex-shrink: 0;
    margin: 0 auto;
}

#chart-overall .donut-svg,
#chart-generic-big .donut-svg {
    width: 280px;
    height: auto;
    aspect-ratio: 1 / 1;
}

.donut-segment {
    transition: stroke-width 0.18s ease, opacity 0.18s ease;
}
.donut-segment:hover {
    stroke-width: 7 !important;
    opacity: 0.85;
}
/* pie variant: slices stay full-depth on hover (donut hover would thin them) */
.donut-svg.is-pie .donut-segment:hover {
    stroke-width: 31.831 !important;
    opacity: 0.8;
}

.chart-legend {
    display: flex;
    flex-direction: column;
    gap: 0;                              /* compact — each row carries its own rhythm */
    width: 100%;
    font-size: var(--text-sm);
    color: var(--text-main);
    max-height: 190px;
    overflow-y: auto;
    padding-right: var(--space-2);
    /* Scrollbar HIDDEN — scrollability is shown instead by a soft edge-fade
       (js applyScrollFade sets a mask that fades the top/bottom only when there
       IS more to scroll, so the list breathes as you move = "live"). */
    scrollbar-width: none;
    -ms-overflow-style: none;
    transition: -webkit-mask-image 0.35s ease, mask-image 0.35s ease;
}
.chart-legend::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Donut legend = document ledger row: Executive tracked-caps label, hairline
   rule, bare tabular % — the Studio MARY house style, applied to every donut. */
.legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 400;
    border-bottom: 1px solid var(--divider);
    padding-block: 6px;
    margin-bottom: 0;
}
.legend-item:first-child { padding-top: 0; }

.legend-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.legend-item-name {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;                       /* enable ellipsis on long names */
}

/* Title Case ledger label — Swiss-elegant: tight tracking, the name reads as
   words (not a tracked all-caps tag), so longer account names stay legible. */
.legend-item-name span {
    font-size: 12px;
    letter-spacing: 0.004em;
    text-transform: capitalize;
    font-weight: var(--fw-medium);
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.legend-item .text-muted {            /* the percentage figure — reads first */
    font-size: 12.5px;
    letter-spacing: var(--tracking-tight);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 2px;                 /* square swatch — editorial, not a bubble */
    flex-shrink: 0;
}

.bi-metric-huge {
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-display);
    flex-shrink: 0;
    line-height: var(--leading-none);
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}

/* Dashboard hero figures (Financial Overview: income / expense / net profit) —
   semibold + tight tracking + tabular so the numbers read first (dashboard side). */
.kpi-value {
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-display);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.bi-content-col {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
}

.bi-subtitle {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin-bottom: var(--space-3);
    font-weight: var(--font-bold);
}

/* (Retired: .bi-funnel-step, .hbar-track/.hbar-fill, .bi-ar-grid/.bi-ar-segment —
   every horizontal bar graph now uses the ONE canonical .cdoc-chart-row system.
   The A/R aging + expense COGS segmented bars became row lists too.) */

.bi-margin-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--divider);
    font-size: var(--text-base);
    width: 100%;
    font-weight: var(--font-bold);
}

.bi-margin-row:last-child {
    border-bottom: none;
}

/* GLOBAL TOOLTIP — renewed to match the trend-graph tooltip (flat card, an
   uppercase tracked caption, then a dot + value row, with an optional muted
   detail line). One tooltip language across every chart/bar/timeline. */
.glass-tooltip {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, calc(-100% - 12px));
    min-width: 150px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--divider);
    background: var(--bg-card);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.55);
    color: var(--text-main);
    transition: opacity 0.15s ease;
}
.glass-tooltip .tt-cap {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.glass-tooltip .tt-cap:empty { display: none; }
.glass-tooltip .tt-row { display: flex; align-items: center; gap: 8px; }
.glass-tooltip .tt-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.glass-tooltip .tt-val { font-size: 14px; font-weight: var(--fw-semibold); color: var(--text-main); font-variant-numeric: tabular-nums; }
.glass-tooltip .tt-pct { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.glass-tooltip .tt-pct:empty { display: none; }

.ledger-table-wrapper {
    border-radius: var(--radius-board);
    overflow-x: auto;
    margin-bottom: var(--space-8);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
}

/* GLOBAL TABLE STYLE — the refined project-list ledger, applied to every list:
   hairline header rule (NO hard ink line anywhere), tracked-caps labels, tabular
   figures, calm vertical rhythm, hairline row dividers. */
th,
td {
    padding: 14px var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--divider);
}

th {
    color: var(--text-muted);
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-card);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: var(--tracking-caps);
    padding: 0 var(--space-4) 13px;
    vertical-align: bottom;
    white-space: nowrap;
    border-bottom: 1px solid var(--divider);   /* hairline — no hard black line */
}
tbody td { font-size: 13.5px; vertical-align: middle; }

/* CARD EDGE INSET — the first and last columns sit a comfortable 24px off the card
   edge (the same inset as a .board-header), so in a titled card the columns line up
   exactly under the title, and in an untitled card the data never hugs the rounded
   edge. Inner columns keep the tighter 16px gutter. Applies to every table. */
th:first-child, td:first-child { padding-left: var(--space-6); }
th:last-child,  td:last-child  { padding-right: var(--space-6); }

/* UNTITLED LIST CARD — the table IS the card (no .board-header above to supply the
   top inset). Left bare, the header row hugs the card's top edge; so the card frames
   itself — the header row gets top breathing room and the final row gets matching
   bottom room with no hard divider at the rounded edge. Titled cards (Recent, etc.)
   skip this: their board-header already provides the top inset. */
.list-card thead th { padding-top: var(--space-5); }
.list-card tbody tr:last-child td { border-bottom: none; padding-bottom: var(--space-5); }

/* On narrow screens the 24px card inset is too costly — tighten it to 16px. */
@media (max-width: 680px) {
    th:first-child, td:first-child { padding-left: var(--space-4); }
    th:last-child,  td:last-child  { padding-right: var(--space-4); }
}