@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,600&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* Vixen Logistics brand hue - the rose-pink from the fox mark, deepened
       for AA text contrast (fully customizable per company/user - see
       Settings > Appearance and ThemeService, which defaults to this same
       color). Carries color through the product: sidebar accents, buttons,
       links, focus rings. --accent (blue) is kept as a separate, fixed hue
       only for a couple of narrow cases that intentionally don't follow the
       brand color - see its usages below. */
    --primary: #b02f66;
    --primary-dark: #7a2049;
    --primary-light: #e46696;
    --primary-tint: #fdf1f5;
    --accent: #2563eb;
    --accent-dark: #1d4ed8;
    --accent-tint: #eff6ff;
    --gradient: linear-gradient(135deg, #b02f66 0%, #e46696 100%);
    --gradient-text: linear-gradient(135deg, #b02f66 0%, #e46696 100%);
    --danger: #dc2626;
    --success: #16a34a;
    --warning: #d97706;
    --bg: #f6f4f3;
    --bg-deep: #efecea;
    --card: #ffffff;
    --text: #1c1614;
    --muted: #736660;
    --border: #e8e1de;
    --sidebar-width: 260px;
    --rail-width: 68px;
    --topbar-height: 68px;
    /* Display serif for brand marks and headings - the counterpart to the
       wordmark's high-contrast serif "VIXEN LOGISTICS" lettering. Body
       copy, tables and forms stay on the sans stack below; this is layered
       on top for h1/h2 and the logotype only (see the "Display type" rule
       near the top of this file). */
    --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    /* Sidebar now reads as a clean white panel (matching the reference
       dashboards) with the brand color used only as an accent - the active
       nav item's tinted pill and icon, not the whole rail - rather than a
       full solid brand-color flood. Built entirely from the same surface
       tokens as the rest of the app (--card/--text/--muted/--border), so it
       automatically follows dark mode and any brand color change with no
       separate sidebar-specific dark-mode overrides needed. */
    --sidebar-bg: var(--card);
    --sidebar-border: var(--border);
    --sidebar-text: var(--muted);
    --sidebar-hover: var(--bg);
    --sidebar-active-bg: var(--primary-tint);
    --sidebar-active-text: var(--primary-dark);
    --topbar-bg: #ffffff;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 20px 45px -14px rgba(15, 23, 42, 0.16);
    --shadow-xl: 0 30px 70px -18px rgba(15, 23, 42, 0.20);
    --shadow-glow: 0 6px 16px rgba(176, 47, 102, 0.18);
    /* One radius scale, applied consistently: sm for controls (buttons,
       inputs, chips, icon buttons), base for cards/surfaces, lg for hero
       banners only. Every container in the app should map to one of these
       three - see the "container shapes" pass throughout this file. */
    --radius: 20px;
    --radius-sm: 12px;
    --radius-lg: 26px;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode -----------------------------------------------------------
   Only the "surface" tokens change here (background/card/text/border) -
   --primary and its derived shades are left alone because those are set
   per-request as inline :root overrides (see layouts/main.php +
   ThemeService), computed from the active brand color, and already work
   correctly in both modes. --primary-tint is the one exception: it's
   normally a near-white tint meant to sit on a light card, which reads as
   a bright patch on a dark one, so main.php additionally swaps it for a
   translucent dark-mode-safe version here via --primary-tint (see the
   [data-theme="dark"] rule injected there).
   Applied via [data-theme="dark"] (explicit user choice, always wins) or,
   for anyone who left their preference on "System", via the OS-level
   prefers-color-scheme media query below - kept as two blocks with the
   same values rather than one shared selector, since the media-query
   version must only apply when nothing explicit has been chosen. */
[data-theme="dark"] {
    --bg: #17130f;
    --bg-deep: #100d0a;
    --card: #211a17;
    --text: #f1e9e6;
    --muted: #ab9a94;
    --border: #382c27;
    --topbar-bg: #211a17;
    /* A darkened primary reads fine as the active nav item's text on the
       light tint used in light mode, but goes near-invisible on the
       translucent dark-mode tint - a lighter shade keeps it legible here. */
    --sidebar-active-text: var(--primary-light);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 28px 64px -16px rgba(0, 0, 0, 0.6);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg: #17130f;
        --bg-deep: #100d0a;
        --card: #211a17;
        --text: #f1e9e6;
        --muted: #ab9a94;
        --border: #382c27;
        --topbar-bg: #211a17;
        --sidebar-active-text: var(--primary-light);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
        --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
        --shadow-xl: 0 28px 64px -16px rgba(0, 0, 0, 0.6);
    }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}

/* Display type -----------------------------------------------------------
   The warm serif from the wordmark ("VIXEN LOGISTICS") carries through as
   the brand's headline voice - h1/h2 and anything explicitly marked
   .font-display - while h3/h4 (card headers, table captions, dense UI
   chrome) stay on the sans stack so data-heavy screens stay legible and
   compact. Tables, forms and body copy are never touched by this rule. */
h1, h2, .font-display {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}
h3, h4 { letter-spacing: -0.02em; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Reusable "advanced system" accents ------------------------------------ */
.text-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.bg-grid-fade {
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 70% at 50% 0%, #000 40%, transparent 100%);
}
@keyframes jx-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.jx-animate { animation: jx-fade-up 0.5s var(--ease) both; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Buttons -----------------------------------------------------------------
   One shape (--radius-sm) and one motion pattern (1px lift + shadow-md on
   hover) for every variant, so the only thing that changes button-to-button
   is color weight: solid brand color for the primary action, an outline for
   secondary actions, a no-fill ghost for low-emphasis actions, and danger
   reserved for destructive ones. Nothing above .btn-secondary uses more than
   one color at a time. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(15, 42, 36, 0.08);
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.1s var(--ease);
}
.btn:hover { background: var(--primary-dark); text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: #fff; color: var(--text); border-color: var(--border); box-shadow: none; }
.btn-secondary:hover { background: var(--bg); border-color: var(--border); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--muted); border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--bg); color: var(--text); box-shadow: none; transform: none; }
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #b91c1c; }
.btn-sm { padding: 6px 12px; font-size: 0.85rem; border-radius: var(--radius-sm); }
.btn-lg { padding: 13px 26px; font-size: 1.02rem; border-radius: var(--radius-sm); }
/* Reserved for a small number of hero-level CTAs (marketing page, auth
   screens) - same single brand hue as everything else, just with a soft
   two-tone wash and a gentle glow instead of a flat fill, so it still reads
   as "the one thing to click" without introducing a second color. */
.btn-gradient { background: var(--gradient); border: none; color: #fff; box-shadow: var(--shadow-glow); }
.btn-gradient:hover { background: var(--gradient); filter: brightness(1.06); box-shadow: var(--shadow-md); }
.btn-block { width: 100%; }

/* Sidebar (Zoho Books-style persistent module rail) */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(-100%);
    transition: transform 0.2s var(--ease), width 0.2s var(--ease);
    z-index: 1000;
    box-shadow: none;
}
@media (max-width: 1023px) {
    .sidebar.open { box-shadow: var(--shadow-lg); }
}
.sidebar.open { transform: translateX(0); }
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 16px;
    height: var(--topbar-height);
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
    transition: padding 0.2s var(--ease), height 0.2s var(--ease);
}
.logo { font-size: 1.15rem; font-weight: 800; color: var(--text); white-space: nowrap; letter-spacing: -0.02em; }
.logo span { color: var(--muted); }
.logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--gradient);
    border: none;
    color: #ffffff !important;
    font-weight: 800;
    font-size: 0.95rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-glow);
}
/* The Vixen fox mark is a wide glyph (not square), so its slot widens to
   fit instead of squeezing it into the old 34x34 letter-avatar box. It
   carries no background/border of its own - just the mark, sitting
   directly on the sidebar surface. */
.logo-mark-img {
    width: auto;
    max-width: 124px;
    height: 30px;
    background: transparent;
    border: none;
    padding: 0;
    object-fit: contain;
    box-shadow: none;
    transition: max-width 0.2s var(--ease);
}
.logo-text { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.logo-text span { color: var(--muted); }
.sidebar-close {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 1.5rem;
    cursor: pointer;
    display: block;
    line-height: 1;
}
.rail-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--sidebar-border);
    background: var(--bg);
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
}
.rail-toggle:hover { background: var(--sidebar-hover); color: var(--text); }
.rail-toggle svg { width: 15px; height: 15px; transition: transform 0.15s; }

/* Workspace switcher - the logo/name in the sidebar header doubles as a
   dropdown trigger (Switch company / Company settings), matching the
   reference nav's "Beyond UI" header. Reuses the app's existing .dropdown /
   .dropdown-menu component so the open/close behavior is the same
   data-dropdown-toggle script already wired up for every other menu. */
.workspace-switcher { flex: 1 1 auto; min-width: 0; }
.workspace-switcher-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 6px 8px;
    margin: 0 -8px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s var(--ease);
}
.workspace-switcher-btn:hover { background: var(--sidebar-hover); }
.workspace-switcher-btn .logo-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.workspace-chev {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--muted);
    transition: opacity 0.15s var(--ease), max-width 0.2s var(--ease);
}
.workspace-chev svg { width: 100%; height: 100%; }

/* Sidebar search - visually the same "jx-search" component the topbar used
   to own (see the inline <style> block in layouts/main.php), just full
   width and sitting under the header, as in the reference nav. */
.sidebar-search.jx-search {
    width: auto;
    max-width: none;
    flex: none;
    margin: 12px 14px;
    flex-shrink: 0;
    transition: opacity 0.15s var(--ease), max-height 0.2s var(--ease), margin 0.2s var(--ease), padding 0.2s var(--ease);
}

/* Sidebar footer - pinned under the scrollable nav list via nav-list's
   flex-grow above, holding the "Need support?" card from the reference. */
.sidebar-footer { flex-shrink: 0; padding: 0 14px 14px; }
.sidebar-support-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 14px;
    border-radius: var(--radius-sm);
    background: var(--bg);
    border: 1px solid var(--sidebar-border);
    transition: opacity 0.15s var(--ease), max-height 0.2s var(--ease), padding 0.2s var(--ease), margin 0.2s var(--ease);
}
.support-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: var(--card);
    border: 1px solid var(--sidebar-border);
    color: var(--muted);
    flex-shrink: 0;
}
.support-icon svg { width: 16px; height: 16px; }
.support-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.support-text strong { font-size: 0.85rem; color: var(--text); }
.support-text span { font-size: 0.78rem; color: var(--muted); }
.support-btn { flex-basis: 100%; }

.nav-list { list-style: none; padding: 10px 10px 20px; flex: 1 1 auto; }
.nav-list > li { margin-bottom: 2px; }
.nav-list li a { color: var(--sidebar-text); }
.nav-section {
    padding: 16px 12px 6px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    font-weight: 700;
    opacity: 0.75;
}

/* Flat + submenu nav items share this treatment */
.nav-item { margin: 2px 0; border-radius: var(--radius-sm); }
.nav-item.has-submenu { margin: 2px 0; }

.nav-link,
.nav-list > li > a.nav-link-flat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    color: var(--sidebar-text);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 500;
    position: relative;
    transition: background 0.15s var(--ease), color 0.15s var(--ease), transform 0.15s var(--ease), gap 0.2s var(--ease), padding 0.2s var(--ease);
}
.nav-list > li > a.nav-link-flat { justify-content: flex-start; }

.nav-link:hover,
.nav-link-flat:hover {
    background: var(--sidebar-hover);
    color: var(--text);
    text-decoration: none;
    transform: translateX(2px);
}
.nav-link-flat.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 700;
}
.nav-link-flat.active .nav-icon { color: var(--sidebar-active-text); }

/* A flyout group whose current page is one of its children - the trigger
   itself gets a quieter tint (not the full "active" treatment, since you're
   not literally on this link) so context survives once the mouse leaves
   the flyout. */
.nav-link.active-group {
    color: var(--sidebar-active-text);
    background: var(--sidebar-active-bg);
}
.nav-link.active-group .nav-icon { color: var(--sidebar-active-text); }

.nav-icon {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.8; }
.nav-link span.nav-label,
.nav-link-flat span.nav-label {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    max-width: 180px;
    transition: opacity 0.15s var(--ease), max-width 0.2s var(--ease);
}
.logo-text,
.nav-section,
.sidebar-plan {
    opacity: 1;
    max-width: 220px;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.15s var(--ease), max-width 0.2s var(--ease);
}

.submenu-arrow {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 1;
    max-width: 14px;
    overflow: hidden;
    transition: transform 0.2s ease, opacity 0.15s var(--ease), max-width 0.2s var(--ease);
    color: var(--muted);
}
.submenu-arrow svg { width: 100%; height: 100%; }

.submenu-arrow.rotated {
    transform: rotate(180deg);
}

/* Inline accordion (full-width sidebar): slides open/closed instead of
   snapping via display:none/block, so expanding "Sales", "Payroll" etc.
   reads as one continuous motion rather than a hard cut. max-height is a
   generous cap (comfortably above the longest group, Payroll) rather than
   an exact value, since the real height varies per group. */
.submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s var(--ease), opacity 0.18s var(--ease), padding 0.2s var(--ease);
}

.submenu.open {
    max-height: 420px;
    opacity: 1;
    padding: 2px 0 6px;
}

.submenu li a {
    display: flex;
    align-items: center;
    padding: 7px 12px 7px 43px;
    color: var(--muted);
    font-size: 0.87rem;
    border-radius: var(--radius-sm);
    margin: 1px 6px;
}

.submenu li a:hover {
    background: var(--sidebar-hover);
    color: var(--text);
    text-decoration: none;
}
.submenu li a.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 600;
}

/* Collapsed icon rail (desktop only) */
@media (min-width: 1024px) {
    .sidebar.rail-collapsed { width: var(--rail-width); }
    /* Labels fade and collapse to zero width together with the sidebar's
       own width transition above (same 0.2s), instead of vanishing via
       display:none the instant the class flips - that instant cut was
       what made toggling the rail feel like a jump rather than a slide.
       gap on .nav-link/.nav-link-flat collapses at the same time so the
       icon glides over to sit where a centered icon would end up, rather
       than snapping there via a justify-content flip. */
    .sidebar.rail-collapsed .logo-text,
    .sidebar.rail-collapsed .nav-label,
    .sidebar.rail-collapsed .nav-section,
    .sidebar.rail-collapsed .sidebar-plan {
        opacity: 0;
        max-width: 0;
    }
    /* Icons are centered (not left-anchored) in the narrow rail - the old
       fixed left-padding here left them a few px too wide for the rail and
       got clipped by the sidebar's overflow-x:hidden, which is what read as
       "squished". Centering via flex means it self-corrects regardless of
       icon size or rail width. */
    .sidebar.rail-collapsed .nav-link,
    .sidebar.rail-collapsed .nav-link-flat { gap: 0; padding: 10px 0; justify-content: center; }
    .sidebar.rail-collapsed ~ .main,
    body.rail-collapsed .main { margin-left: var(--rail-width); }
    .sidebar.rail-collapsed .rail-toggle svg { transform: rotate(180deg); }
    /* The header holds two controls (workspace logo + collapse toggle) that
       comfortably sit side-by-side at full width but not in a 68px rail, so
       it stacks them instead of cramming both into one row. */
    .sidebar.rail-collapsed .sidebar-header {
        flex-direction: column;
        justify-content: center;
        height: auto;
        padding: 14px 8px 12px;
        gap: 10px;
    }
    .sidebar.rail-collapsed .submenu-arrow { opacity: 0; max-width: 0; }
    /* The search box and the support card don't fit an icon-only rail, so
       they fade out the same way the labels do - the reference nav shows
       the collapsed rail as icons only, nothing else. */
    .sidebar.rail-collapsed .sidebar-search,
    .sidebar.rail-collapsed .sidebar-support-card {
        opacity: 0;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin: 0;
        pointer-events: none;
        overflow: hidden;
    }
    .sidebar.rail-collapsed .workspace-switcher-btn { justify-content: center; padding: 6px; gap: 0; margin: 0; width: auto; }
    .sidebar.rail-collapsed .workspace-chev { opacity: 0; max-width: 0; }
    /* Whatever the logo's native aspect ratio (the stock wordmark, or an
       uploaded company logo), it's boxed to a small square and scaled down
       with its proportions kept intact, instead of being left at its full
       expanded-rail width and clipped by the rail's overflow-x:hidden. */
    .sidebar.rail-collapsed .logo-mark-img {
        width: 32px;
        max-width: 32px;
        height: 28px;
        object-fit: contain;
    }
    .sidebar.rail-collapsed .rail-toggle { margin: 0 auto; }

    /* Expanded (full-width) groups open as an inline accordion right under
       their own trigger - matching the reference nav, where "Workspace"
       pushes its own items open in place. The collapsed icon rail can't fit
       an inline list, so it keeps the flyout card version instead, anchored
       to the right of the icon; .rail-collapsed switches to
       overflow: visible so that flyout isn't clipped by the rail's own
       scroll box. */
    .sidebar.rail-collapsed { overflow: visible; }
    .sidebar.rail-collapsed .nav-item.has-submenu { position: relative; }
    .sidebar.rail-collapsed .submenu-arrow,
    .sidebar.rail-collapsed .submenu-arrow.rotated { transform: rotate(-90deg); }
    .sidebar.rail-collapsed .submenu {
        position: absolute;
        left: calc(100% + 10px);
        top: -6px;
        min-width: 208px;
        max-height: none;
        overflow: visible;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-lg);
        padding: 8px;
        margin: 0;
        z-index: 1100;
        opacity: 0;
        transform: translateX(-6px) scale(0.98);
        transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
        pointer-events: none;
    }
    .sidebar.rail-collapsed .submenu.open {
        opacity: 1;
        transform: translateX(0) scale(1);
        pointer-events: auto;
    }
    .sidebar.rail-collapsed .submenu::before {
        content: attr(data-label);
        display: block;
        padding: 4px 10px 8px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
    }
    .sidebar.rail-collapsed .submenu li a {
        padding: 8px 10px;
        margin: 1px 0;
        color: var(--text);
    }
}

/* Main layout */
.main { margin-left: 0; min-height: 100vh; transition: margin-left 0.2s var(--ease); }
.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--topbar-bg);
    padding: 0 20px;
    min-height: var(--topbar-height);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 100;
}
.topbar { position: sticky; }
.sidebar { box-shadow: 1px 0 0 rgba(15, 23, 42, 0.02), var(--shadow-sm); }
.menu-toggle {
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--text);
    flex-shrink: 0;
    transition: background 0.15s var(--ease);
}
.menu-toggle:hover { background: var(--bg); }
.company-name { font-weight: 600; }
.content { padding: 26px 32px 48px; max-width: 1440px; margin: 0 auto; width: 100%; }
@media (max-width: 1023px) {
    .content { padding: 20px 18px 40px; }
}

/* The company switcher and search box now live in the sidebar header (see
   .workspace-switcher / .sidebar-search above) - the topbar just needs
   something to push .topbar-right to the right-hand side in their place. */
.topbar-spacer { flex: 1 1 auto; }
.chev { width: 13px; height: 13px; color: var(--muted); flex-shrink: 0; transition: transform 0.15s var(--ease); }
.dropdown.open .chev { transform: rotate(180deg); }

/* Generic dropdown */
.dropdown { position: relative; }
.dropdown-menu {
    display: block;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 230px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), visibility 0.15s;
}
.dropdown-menu.align-left { right: auto; left: 0; }
.dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.dropdown-menu a,
.dropdown-menu button.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.9rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s var(--ease);
}
.dropdown-menu a:hover,
.dropdown-menu button.dropdown-item:hover { background: var(--bg); text-decoration: none; }
.dropdown-menu a:active,
.dropdown-menu button.dropdown-item:active { background: var(--primary-tint); }
.dropdown-menu .dropdown-divider { height: 1px; background: var(--border); margin: 6px 4px; }
.dropdown-menu .dropdown-heading {
    padding: 8px 10px 4px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    font-weight: 700;
}
.dropdown-menu .dropdown-user {
    padding: 10px 10px 12px;
}
.dropdown-menu .dropdown-user .u-name { font-weight: 700; font-size: 0.92rem; }
.dropdown-menu .dropdown-user .u-email { font-size: 0.8rem; color: var(--muted); margin-top: 2px; word-break: break-all; }
.dropdown-empty { padding: 16px 10px; text-align: center; color: var(--muted); font-size: 0.85rem; }

/* Topbar search now lives entirely as inline <style> in the layout's
   <head> (see app/views/layouts/main.php) using .jx-search-* class names.
   It's kept out of this external, cacheable stylesheet on purpose: an
   external CSS file can be served stale by a browser or CDN after a
   deploy, which is what caused the icon/text overlap to keep appearing
   even after the underlying rules were already fixed here. Inline styles
   in a dynamically-rendered PHP page can't go stale the same way. */

/* Quick create */
.quickcreate-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: background 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.1s var(--ease);
}
.quickcreate-btn:hover { box-shadow: var(--shadow-md); }
.quickcreate-btn:active { transform: translateY(1px); }
.quickcreate-btn svg { width: 15px; height: 15px; }
.dropdown-menu.quickcreate-menu { min-width: 210px; }

/* Icon buttons (bell, gear) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--muted);
    position: relative;
    flex-shrink: 0;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.icon-btn:hover { background: var(--bg); color: var(--text); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn .dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--danger);
    border: 1.5px solid var(--card);
}

/* User avatar */
.avatar-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    transition: box-shadow 0.15s var(--ease);
}
.avatar-circle:hover { box-shadow: 0 0 0 3px var(--primary-tint); }
.topbar-right { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }

/* Cards */
.card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 26px 26px 24px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
    transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); border-color: #d7dee2; }
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 10px;
}
.card-title { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.015em; color: var(--text); }

/* Tables */
.table-responsive { overflow-x: auto; }
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
th, td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
th {
    background: var(--bg);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
}
tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.12s var(--ease); }
tbody tr:hover { background: var(--bg); }

/* Forms */
.form-group { margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 18px; }
.address-fields .form-group { margin-bottom: 10px; }
.address-fields .form-row { gap: 10px; margin-bottom: 10px; }
.address-fields-label { font-size: 0.82rem; font-weight: 600; color: var(--muted); margin-bottom: 6px; }

/* Address autocomplete (location search on "Address line 1") */
.address-search-wrap { position: relative; }
.address-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    max-height: 260px;
    overflow-y: auto;
}
.address-suggestion {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border);
    padding: 9px 12px;
    font-family: inherit;
    font-size: 0.88rem;
    cursor: pointer;
    line-height: 1.35;
}
.address-suggestion:last-child { border-bottom: 0; }
.address-suggestion:hover,
.address-suggestion.is-active { background: rgba(37, 99, 235, 0.07); }
.address-suggestion-main { display: block; font-weight: 600; color: var(--text, #1e293b); }
.address-suggestion-sub { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 1px; }
.address-suggestion-empty { padding: 9px 12px; font-size: 0.85rem; color: var(--muted); }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 500; margin-bottom: 6px; cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: auto; margin: 0; }
@media (min-width: 640px) {
    .form-row { grid-template-columns: repeat(2, 1fr); }
}
label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    font-size: 0.9rem;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: inherit;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-tint);
}
.is-invalid { border-color: var(--danger); }
.invalid-feedback { color: var(--danger); font-size: 0.85rem; margin-top: 4px; }

/* Public pages */
.public { background: #fff; }
.public-nav {
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 200;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 42, 36, 0.05);
}
.public-nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
}
.public-nav .logo { display: inline-flex; align-items: center; gap: 9px; font-size: 1.1rem; color: var(--text); }
.public-nav .logo span { color: var(--primary); }
.public-nav .nav-links { display: flex; gap: 22px; align-items: center; }
.public-nav .nav-links a:not(.btn) { color: var(--muted); font-weight: 600; font-size: 0.92rem; }
.public-nav .nav-links a:not(.btn):hover { color: var(--text); text-decoration: none; }
.public-content { min-height: calc(100vh - 120px); }
.public-footer { border-top: 1px solid var(--border); padding: 28px 0; text-align: center; color: var(--muted); background: var(--bg); }
/* Below ~600px the nav row (logo + 3 links/button) has no room to sit on
   one line at full size - it was overflowing/crowding rather than wrapping
   cleanly. Let it wrap, and trim the least essential parts first. */
@media (max-width: 600px) {
    .public-nav .container { flex-wrap: wrap; row-gap: 8px; padding: 12px 16px; }
    .public-nav .logo { font-size: 1rem; }
    .public-nav .nav-links { gap: 14px; }
    .public-nav .nav-links a.btn { padding: 8px 14px; font-size: 0.88rem; }
}

.hero {
    position: relative;
    text-align: center;
    padding: 96px 20px 84px;
    background: radial-gradient(ellipse 90% 60% at 50% -10%, var(--primary-tint) 0%, #fff 60%);
    overflow: hidden;
}
.hero > .container { position: relative; z-index: 1; }
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: 22px;
}
.hero-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.hero h1 { font-size: clamp(2.1rem, 4.5vw, 3.1rem); font-weight: 800; margin-bottom: 18px; letter-spacing: -0.03em; line-height: 1.12; }
.hero p { font-size: 1.12rem; color: var(--muted); max-width: 620px; margin: 0 auto 30px; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hero-trust { margin-top: 40px; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.02em; }

/* Marketing page sections alternate a plain white background with a soft
   tinted one, so each block reads as its own distinct section instead of
   bleeding into the one above/below it. */
.section-platform {
    padding: 88px 20px;
    background: var(--bg);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.section-pricing {
    padding: 88px 20px;
    background: #fff;
}

/* Marketing feature grid */
.section-eyebrow {
    display: block;
    text-align: center;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.section-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.02em; }
.section-lead { color: var(--muted); text-align: center; max-width: 560px; margin: 10px auto 0; }
.feature-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 18px;
}
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } }
.feature-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 22px;
    text-align: left;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: #d7dee2; }
.feature-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-tint);
    color: var(--primary-dark);
    margin-bottom: 16px;
}
.feature-icon svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.feature-card h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }
.feature-card p { font-size: 0.87rem; color: var(--muted); line-height: 1.55; }

.cta-banner {
    position: relative;
    text-align: center;
    padding: 64px 20px;
    background: var(--gradient);
    color: #fff;
    overflow: hidden;
}
.cta-banner > .container { position: relative; z-index: 1; }
.cta-banner h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin-bottom: 14px; letter-spacing: -0.02em; }
.cta-banner p { color: rgba(255,255,255,0.85); margin-bottom: 26px; max-width: 520px; margin-left: auto; margin-right: auto; }
.cta-banner .btn { background: #fff; color: var(--primary-dark); box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.cta-banner .btn:hover { filter: brightness(0.97); }

/* Auth screens (login) - same premium card treatment as the signup page */
.auth-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 48px 20px;
    background: radial-gradient(ellipse 80% 60% at 50% -10%, var(--primary-tint) 0%, #fff 55%);
}
.auth-card {
    position: relative;
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    overflow: hidden;
}
.auth-card::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: var(--gradient);
}
.auth-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--radius);
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.auth-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.9; }
.auth-card h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
.auth-foot { margin-top: 18px; font-size: 0.88rem; text-align: center; }
/* Full fox+wordmark lockup shown above the login/register card, in place
   of a generic icon glyph. */
.auth-logo { display: block; height: 76px; width: auto; margin: 0 auto 22px; object-fit: contain; }

/* Dashboard widgets */
.widgets {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
@media (min-width: 640px) { .widgets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .widgets { grid-template-columns: repeat(4, 1fr); } }
.widget {
    position: relative;
    background: var(--card);
    border-radius: var(--radius);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
/* Color on a widget's top edge is reserved for something the number is
   actually telling you (needs attention / trending well) - a neutral widget
   gets a quiet neutral edge instead of a decorative brand-colored stripe, so
   the colored ones actually stand out. */
.widget::before {
    content: "";
    position: absolute;
    left: 0; top: 0; right: 0;
    height: 3px;
    background: var(--border);
}
.widget:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: #d7dee2; }
.widget-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 8px; }
.widget-value { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.widget-sub { font-size: 0.8rem; color: var(--muted); margin-top: 6px; }
.widget-alert::before { background: var(--danger); }
.widget-alert .widget-value { color: var(--danger); }
.widget-positive::before { background: var(--success); }
.widget-positive .widget-value { color: var(--success); }

/* Dashboard header */
.dash-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}
.dash-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 4px; letter-spacing: -0.02em; }

/* Premium gradient "hero" banner used at the top of the tenant &
   platform-admin dashboards - the same visual language as the signup
   page's hero (gradient wash, soft grid, pill badge). */
.dash-hero {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 30px 32px;
    margin-bottom: 24px;
    background: var(--gradient);
    color: #fff;
    overflow: hidden;
    box-shadow: var(--shadow-glow);
}
.dash-hero::after {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    right: -90px;
    top: -140px;
    background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
    border-radius: 50%;
}
.dash-hero-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
}
.dash-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.28);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.dash-hero-badge .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #4ade80;
}
.dash-hero h1 { font-size: 1.65rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.dash-hero p { color: rgba(255,255,255,0.82); font-size: 0.92rem; max-width: 480px; }
.dash-hero-actions { position: relative; z-index: 1; display: flex; gap: 10px; flex-wrap: wrap; }
.dash-hero .btn { background: #fff; color: var(--primary-dark); box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.dash-hero .btn:hover { background: #fff; filter: brightness(0.97); transform: translateY(-1px); }
.dash-hero .btn-secondary { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.35); }
.dash-hero .btn-secondary:hover { background: rgba(255,255,255,0.22); }
@media (max-width: 640px) {
    .dash-hero { padding: 24px 20px; border-radius: 16px; }
    .dash-hero h1 { font-size: 1.35rem; }
}

/* Alerts */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
}
.alert-success { background: #d1fae5; color: #065f46; }
.alert-danger { background: #fee2e2; color: #991b1b; }
.alert-warning { background: #fef3c7; color: #92400e; }
.alert-info { background: #dbeafe; color: #1e40af; }

/* Status badges */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}
.badge-draft { background: #f3f4f6; color: #4b5563; }
.badge-sent { background: #dbeafe; color: #1e40af; }
.badge-paid { background: #d1fae5; color: #065f46; }
.badge-partial { background: #fef3c7; color: #92400e; }
.badge-overdue { background: #fee2e2; color: #991b1b; }
.badge-active { background: #d1fae5; color: #065f46; }
.badge-suspended { background: #fee2e2; color: #991b1b; }
.badge-trial { background: #fef3c7; color: #92400e; }
.badge-trialing { background: #fef3c7; color: #92400e; }
.badge-inactive { background: #f3f4f6; color: #4b5563; }
.badge-cancelled { background: #fee2e2; color: #991b1b; }
.badge-past_due { background: #fee2e2; color: #991b1b; }
.badge-submitted { background: #dbeafe; color: #1e40af; }
.badge-approved { background: #d1fae5; color: #065f46; }
.badge-rejected { background: #fee2e2; color: #991b1b; }
.badge-accepted { background: #d1fae5; color: #065f46; }
.badge-declined { background: #fee2e2; color: #991b1b; }
.badge-expired { background: #f3f4f6; color: #4b5563; }
.badge-converted { background: #ede9fe; color: #5b21b6; }
.badge-confirmed { background: #dbeafe; color: #1e40af; }
.badge-shipped { background: #e0f2fe; color: #075985; }
.badge-delivered { background: #d1fae5; color: #065f46; }
.badge-invoiced { background: #ede9fe; color: #5b21b6; }
.badge-received { background: #d1fae5; color: #065f46; }
.badge-closed { background: #f3f4f6; color: #4b5563; }
.badge-write_off { background: #f3f4f6; color: #4b5563; }
.badge-applied { background: #ede9fe; color: #5b21b6; }
.badge-refunded { background: #dbeafe; color: #1e40af; }

/* Utility */
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.item-note-line { margin-top: 4px; font-size: 12px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 12px; }
.mt-2 { margin-top: 12px; }
.flex { display: flex; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 12px; }

@media (min-width: 1024px) {
    .sidebar { transform: translateX(0); }
    .main { margin-left: var(--sidebar-width); }
    .menu-toggle, .sidebar-close { display: none; }
    .rail-toggle { display: inline-flex; }
}

/* Below 1024px the search bar used to just vanish entirely (display:none)
   with no way to search at all. Instead, drop it to its own full-width row
   under the rest of the topbar so it stays usable on tablet/narrow-desktop
   and mobile widths. */
@media (max-width: 1023px) {
    .topbar { flex-wrap: wrap; row-gap: 8px; padding: 10px 18px; }
    .jx-search { order: 3; flex: 1 1 100%; max-width: none; }
}

/* Mobile backdrop shown behind the sidebar while it's open, so the rest of
   the page is visually dimmed and tappable-to-close - matches how the
   desktop rail behaves as a persistent, non-overlay panel. */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.2s var(--ease);
}
.sidebar-backdrop.open { display: block; opacity: 1; }
@media (min-width: 1024px) {
    .sidebar-backdrop { display: none !important; }
}

@media (max-width: 640px) {
    .content { padding: 16px 14px 32px; }
    .card { padding: 18px; }
    .dash-title { font-size: 1.3rem; }
    .stat-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .zh-summary-card { padding: 16px 18px; }
    .zh-summary-total { font-size: 1.4rem; }
    .topbar-right { gap: 2px; }
    .quickcreate-btn span { display: none; }
    .quickcreate-btn { padding: 8px 10px; }
}

/* Print */
@media print {
    .sidebar, .topbar, .menu-toggle, .sidebar-close { display: none; }
    .main { margin-left: 0; }
}

.document-page {
    max-width: 1080px;
    margin: 0 auto;
}
.document-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}
.back-link {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 600;
}
.document-heading h1 {
    color: #111827;
    font-size: clamp(1.65rem, 3vw, 2.15rem);
    letter-spacing: -0.03em;
    line-height: 1.2;
}
.document-heading p {
    color: var(--muted);
    margin-top: 8px;
}
.document-badge {
    background: var(--primary-tint);
    border: 1px solid #99e6da;
    border-radius: 999px;
    color: var(--primary-dark);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.document-heading-side {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.document-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.card-header .document-actions {
    display: inline-flex;
}
.statement-summary {
    margin: 22px 0 0 auto;
    max-width: 280px;
}
.btn-disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}
.document-form {
    display: grid;
    gap: 20px;
}
.form-section {
    background: var(--card);
    border: 1px solid #e7ebf2;
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    padding: clamp(20px, 3vw, 30px);
}
.section-heading {
    margin-bottom: 24px;
}
.section-heading-with-action {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    gap: 18px;
}
.section-kicker {
    color: var(--primary);
    display: block;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.section-heading h2 {
    color: #111827;
    font-size: 1.15rem;
    letter-spacing: -0.015em;
}
.section-heading p {
    color: var(--muted);
    font-size: 0.9rem;
    margin-top: 4px;
}
.form-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-grid-primary {
    grid-template-columns: minmax(0, 1.5fr) minmax(150px, 0.5fr);
}
.form-grid-dates {
    margin-top: 2px;
}
.form-group-wide {
    grid-column: 1 / -1;
}
.document-form .form-group {
    margin-bottom: 0;
}
.document-form label {
    color: #374151;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 7px;
}
.required-mark {
    color: var(--danger);
}
.field-help {
    color: #8a94a6;
    display: block;
    font-size: 0.78rem;
    line-height: 1.45;
    margin-top: 6px;
}
.document-form input,
.document-form select,
.document-form textarea {
    background: #fff;
    border-color: #d9e0ea;
    min-height: 44px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.document-form textarea {
    min-height: 92px;
    resize: vertical;
}
.document-form input:hover,
.document-form select:hover,
.document-form textarea:hover {
    border-color: #b9c5d5;
}
.document-form input:focus,
.document-form select:focus,
.document-form textarea:focus {
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.11);
}
.line-items-section {
    padding-bottom: 22px;
}
.line-items-table {
    border: 1px solid #e4e9f0;
    border-radius: var(--radius);
    overflow: hidden;
}
.line-items-header,
.line-item {
    display: grid;
    grid-template-columns: minmax(250px, 2.2fr) 78px 120px 145px 105px 34px;
    gap: 12px;
}
.line-items-header {
    align-items: center;
    background: #f7f9fc;
    border-bottom: 1px solid #e4e9f0;
    color: #7a8494;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    padding: 11px 14px;
    text-transform: uppercase;
}
.line-items-header span:nth-child(n+2) {
    text-align: right;
}
.line-item {
    align-items: end;
    background: #fff;
    border-bottom: 1px solid #eef1f5;
    padding: 16px 14px;
}
.line-item:last-child {
    border-bottom: 0;
}
.line-item-main {
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(115px, 0.9fr) minmax(120px, 1.1fr);
}
.line-item-fields {
    display: contents;
}
.line-item .form-group {
    min-width: 0;
}
.line-item .form-group label {
    display: none;
}
.line-item textarea.description-input {
    min-height: 44px;
    height: 44px;
    line-height: 1.4;
    padding-top: 10px;
    resize: vertical;
    overflow: hidden;
    font-family: inherit;
}
.line-item input,
.line-item select {
    font-size: 0.86rem;
    min-height: 40px;
    padding: 8px 9px;
}
.line-total {
    align-self: center;
    min-width: 0;
    text-align: right;
}
.line-total-label {
    display: none;
}
.line-total-value {
    color: #172033;
    font-size: 0.9rem;
    white-space: nowrap;
}
.line-remove {
    align-items: center;
    align-self: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: #9aa4b2;
    cursor: pointer;
    display: inline-flex;
    font-size: 1.45rem;
    height: 32px;
    justify-content: center;
    line-height: 1;
    width: 32px;
}
.line-remove:hover:not(:disabled) {
    background: #fef2f2;
    color: var(--danger);
}
.line-remove:disabled {
    cursor: not-allowed;
    opacity: 0.35;
}
.line-item-notes-wrap {
    grid-column: 1 / -1;
    margin-top: 12px;
}
.line-item-notes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.item-note-row {
    align-items: start;
    display: grid;
    gap: 10px;
    grid-template-columns: 160px 1fr 34px;
}
.item-note-row input,
.item-note-row textarea {
    font-size: 0.86rem;
    padding: 8px 9px;
    resize: vertical;
}
.item-note-remove {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: #9aa4b2;
    cursor: pointer;
    display: inline-flex;
    font-size: 1.25rem;
    height: 34px;
    justify-content: center;
    line-height: 1;
    width: 34px;
}
.item-note-remove:hover {
    background: #fef2f2;
    color: var(--danger);
}
.custom-field-row {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr 34px;
    margin-bottom: 8px;
}
.custom-field-row input {
    font-size: 0.9rem;
}
.btn-link {
    background: none;
    border: 0;
    color: var(--primary);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 0;
    text-align: left;
}
.btn-link:hover {
    text-decoration: underline;
}
.line-items-footer {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 18px;
}
.line-items-footer > .field-help {
    max-width: 360px;
}
.document-summary {
    color: #667085;
    min-width: 250px;
}
.document-summary > div {
    display: flex;
    font-size: 0.84rem;
    justify-content: space-between;
    gap: 32px;
    padding: 4px 0;
}
.document-summary strong {
    color: #344054;
    font-weight: 700;
}
.document-summary .summary-total {
    border-top: 1px solid #e4e9f0;
    color: #111827;
    font-size: 1rem;
    margin-top: 6px;
    padding-top: 10px;
}
.document-summary .summary-total strong {
    color: var(--primary-dark);
    font-size: 1.12rem;
}
.form-actions {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 4px 0 18px;
}
.document-form .btn {
    min-height: 44px;
    padding-left: 18px;
    padding-right: 18px;
}
.document-form .btn-secondary {
    background: #fff;
}

.form-page {
    max-width: 1080px;
    margin: 0 auto;
}
.form-page-header {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}
.form-page-header h1 {
    color: #111827;
    font-size: clamp(1.65rem, 3vw, 2.15rem);
    letter-spacing: -0.03em;
    line-height: 1.2;
}
.form-page-header p {
    color: var(--muted);
    margin-top: 8px;
}
.form-page-form {
    display: grid;
    gap: 20px;
}
.form-page-form .form-section {
    margin: 0;
}

/* Settings tab strip - shared between Company Settings and Subscription so
   switching between them feels like one tabbed area rather than two
   unrelated pages, even though each is still its own full page load. */
.settings-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 28px;
}
.settings-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 4px;
    margin-right: 24px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    transition: color 0.15s var(--ease, ease), border-color 0.15s var(--ease, ease);
}
.settings-tab:hover { color: var(--text); text-decoration: none; }
.settings-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.form-page-form .form-row:not(.line-item) {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.form-page-form .form-group {
    margin-bottom: 0;
}
.form-page-form label {
    color: #374151;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 7px;
}
.form-page-form input,
.form-page-form select,
.form-page-form textarea {
    background: #fff;
    border-color: #d9e0ea;
    min-height: 44px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.form-page-form textarea {
    min-height: 92px;
    resize: vertical;
}
.form-page-form input:hover,
.form-page-form select:hover,
.form-page-form textarea:hover {
    border-color: #b9c5d5;
}
.form-page-form input:focus,
.form-page-form select:focus,
.form-page-form textarea:focus {
    background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.11);
}
.form-page-form input[type="checkbox"] {
    min-height: auto;
    width: auto;
}
.form-page-form .field-help {
    color: #8a94a6;
    display: block;
    font-size: 0.78rem;
    line-height: 1.45;
    margin-top: 6px;
}
.form-page-form .form-group-wide {
    grid-column: 1 / -1;
}
.form-page-form .form-actions {
    padding: 4px 0 18px;
}
.form-page-form .form-actions .btn {
    min-height: 44px;
    padding-left: 18px;
    padding-right: 18px;
}
.form-page-form .form-actions .btn-secondary {
    background: #fff;
}
.form-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}
.form-checkbox {
    align-items: center;
    background: #f7f9fc;
    border: 1px solid #e4e9f0;
    border-radius: var(--radius-sm);
    color: #374151;
    display: inline-flex;
    gap: 9px;
    min-height: 44px;
    padding: 8px 12px;
}
.form-checkbox label {
    margin: 0;
}
.form-preview {
    align-items: center;
    background: #f7f9fc;
    border: 1px solid #e4e9f0;
    border-radius: var(--radius-sm);
    display: inline-flex;
    margin-top: 10px;
    min-height: 84px;
    padding: 10px;
}
.form-preview img {
    max-height: 60px;
    max-width: 180px;
}
.field-error {
    color: var(--danger, #dc2626);
    font-size: 0.82rem;
    margin-bottom: 8px;
}
.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--muted);
    cursor: pointer;
}
.checkbox-inline input {
    width: auto;
}

/* Document template picker */
.template-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}
.template-option {
    border: 2px solid #e4e9f0;
    border-radius: var(--radius-sm);
    padding: 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.template-option:hover {
    border-color: #c7d2e0;
}
.template-option.is-selected {
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.template-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.template-name {
    font-weight: 600;
    font-size: 0.9rem;
}
.template-desc {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.35;
}
.template-thumb {
    background: #fff;
    border: 1px solid #edf0f4;
    border-radius: 6px;
    height: 100px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}
.thumb-line { height: 3px; border-radius: 2px; }
.thumb-accent { background: var(--primary, #2563eb); width: 40%; }
.thumb-row { display: flex; justify-content: space-between; }
.thumb-block { background: #e4e9f0; border-radius: 3px; height: 10px; }
.thumb-block.thumb-sm { width: 45%; }
.thumb-block.thumb-right { background: #d7dee8; }
.thumb-table { flex: 1; background: repeating-linear-gradient(180deg, #f0f2f5 0, #f0f2f5 6px, transparent 6px, transparent 14px); border-radius: 4px; }
.thumb-table-plain { background: repeating-linear-gradient(180deg, #f5f5f5 0, #f5f5f5 4px, transparent 4px, transparent 14px); }
.thumb-band { height: 28px; background: var(--primary, #2563eb); border-radius: 4px; margin: -10px -10px 4px -10px; width: calc(100% + 20px); }
.thumb-hr { height: 1px; background: #e4e9f0; margin: 2px 0; }
.color-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.color-input-row input[type="color"] {
    width: 44px;
    height: 36px;
    padding: 2px;
    border: 1px solid #e4e9f0;
    border-radius: 6px;
    cursor: pointer;
}
.color-input-row input[type="text"] {
    width: 100px;
    text-transform: uppercase;
    font-family: monospace;
}

@media (max-width: 700px) {
    .template-picker {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .line-items-header {
        display: none;
    }
    .line-item {
        display: grid;
        gap: 14px;
        grid-template-columns: 1fr 32px;
    }
    .line-item-main {
        grid-column: 1 / -1;
    }
    .line-item-fields {
        align-items: end;
        display: grid;
        gap: 10px;
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr)) 100px;
    }
    .line-item .form-group label,
    .line-total-label {
        display: block;
    }
    .line-total {
        align-self: end;
        text-align: left;
    }
    .line-remove {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 640px) {
    .document-heading,
    .section-heading-with-action,
    .line-items-footer {
        align-items: stretch;
        flex-direction: column;
    }
    .document-heading-side {
        align-items: flex-start;
    }
    .document-badge {
        align-self: flex-start;
    }
    .form-grid,
    .form-grid-primary {
        grid-template-columns: 1fr;
    }
    .line-item-main,
    .line-item-fields {
        grid-template-columns: 1fr 1fr;
    }
    .line-item-main .form-group:first-child,
    .line-item-main .form-group:nth-child(2) {
        grid-column: 1 / -1;
    }
    .line-total {
        grid-column: 1;
    }
    .line-remove {
        grid-column: 2;
        grid-row: auto;
        justify-self: end;
    }
    .document-summary {
        min-width: 0;
        width: 100%;
    }
    .form-actions {
        flex-direction: column-reverse;
    }
    .form-actions .btn {
        width: 100%;
    }
    .form-page-header {
        flex-direction: column;
    }
    .form-page-form .form-row:not(.line-item) {
        grid-template-columns: 1fr;
    }
    .form-page-form .form-actions {
        flex-direction: column-reverse;
    }
}

/* ============================================================
   Zoho-style dashboard components
   ============================================================ */
.zh-summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
@media (min-width: 800px) { .zh-summary-grid { grid-template-columns: 1fr 1fr; } }

.zh-summary-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 20px 22px;
    border: 1px solid var(--border);
    transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.zh-summary-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border);
    transform: translateY(-2px);
}
.zh-summary-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 4px;
}
.zh-summary-title { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.zh-summary-link { font-size: 0.8rem; color: var(--primary); font-weight: 600; transition: text-decoration-color 0.15s var(--ease); }
.zh-summary-link:hover { text-decoration: underline; }
.zh-summary-total { font-size: 1.65rem; font-weight: 800; margin: 6px 0 14px; letter-spacing: -0.02em; }
.zh-bar {
    display: flex;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--border);
    margin-bottom: 12px;
}
.zh-bar-seg { height: 100%; }
.zh-bar-seg.seg-current { background: var(--primary); }
.zh-bar-seg.seg-overdue { background: var(--danger); }
.zh-bar-seg.seg-open { background: #94a3b8; }
.zh-legend { display: flex; flex-wrap: wrap; gap: 18px; }
.zh-legend-item { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--muted); }
.zh-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.zh-legend-item strong { color: var(--text); font-weight: 700; }

/* Small stat row (secondary KPIs) */
.stat-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}
@media (min-width: 700px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    border-left: 1px solid var(--border);
    transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.stat-card .stat-label { font-size: 0.78rem; color: var(--muted); margin-bottom: 6px; }
.stat-card .stat-value { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; }
.stat-card.stat-danger { border-left: 3px solid var(--danger); }
.stat-card.stat-danger .stat-value { color: var(--danger); }
.stat-card.stat-success { border-left: 3px solid var(--success); }
.stat-card.stat-success .stat-value { color: var(--success); }
.stat-card.stat-primary { border-left: 3px solid var(--primary); }
.stat-card.stat-primary .stat-value { color: var(--primary-dark); }

/* Two-column dashboard body */
.dash-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
@media (min-width: 960px) { .dash-columns { grid-template-columns: 1.6fr 1fr; align-items: start; } }

/* Bank & cash list */
.bank-list { list-style: none; }
.bank-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border);
}
.bank-list-item:last-child { border-bottom: none; }
.bank-list-item .bank-name { font-weight: 600; font-size: 0.9rem; }
.bank-list-item .bank-sub { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.bank-list-item .bank-balance { font-weight: 700; font-size: 0.92rem; white-space: nowrap; }
.bank-icon-chip {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: var(--primary-tint);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bank-icon-chip svg { width: 17px; height: 17px; }
.bank-row-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bank-row-left .bank-text { min-width: 0; }
.bank-row-left .bank-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Expense-by-category bars */
.expense-bar-list { display: flex; flex-direction: column; gap: 12px; }
.expense-bar-row .ebr-top { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 5px; }
.expense-bar-row .ebr-name { color: var(--text); font-weight: 500; }
.expense-bar-row .ebr-amount { color: var(--muted); }
.expense-bar-track { height: 7px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.expense-bar-fill { height: 100%; background: var(--warning); border-radius: 999px; }

.card-subtitle { font-size: 0.8rem; color: var(--muted); margin-top: -8px; margin-bottom: 16px; }
.empty-hint { color: var(--muted); font-size: 0.88rem; padding: 6px 0; }

/* ==========================================================================
   Platform admin screens
   ========================================================================== */

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}
.page-header h1 { font-size: 1.55rem; font-weight: 700; line-height: 1.25; }
.page-subtitle { color: var(--muted); font-size: 0.9rem; margin-top: 4px; }
.page-subtitle .badge { vertical-align: middle; }
.page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.back-link { display: inline-block; font-size: 0.83rem; color: var(--muted); margin-bottom: 6px; }
.back-link:hover { color: var(--primary); }

/* Filter bar above admin tables */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}
.filter-field { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.filter-field label { font-size: 0.75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.filter-field input,
.filter-field select { padding: 8px 10px; font-size: 0.88rem; }
.filter-grow { flex: 1 1 260px; }
.filter-actions { display: flex; gap: 8px; padding-bottom: 1px; }

/* Two-up card layout used across the admin detail screens */
.admin-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
@media (min-width: 900px) {
    .admin-split { grid-template-columns: 1fr 1fr; }
}
.admin-split > .card { margin-bottom: 0; }

/* Definition-list style detail panels */
.detail-list { display: flex; flex-direction: column; }
.detail-list > div {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.detail-list > div:last-child { border-bottom: none; }
.detail-list dt { color: var(--muted); font-weight: 500; }
.detail-list dd { word-break: break-word; }
@media (max-width: 560px) {
    .detail-list > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Table cell helpers */
.cell-strong { font-weight: 600; }
.cell-sub { font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.cell-sub .badge { font-size: 0.68rem; }

/* Pagination */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 16px 0 4px;
}
.pager-info { font-size: 0.85rem; color: var(--muted); }

/* Signup sparkline */
.spark-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 170px;
    padding-top: 10px;
}
.spark-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; position: relative; }
/* Faint full-height track so quiet days still read as a column rather than
   as an empty gap in the chart. */
.spark-col::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 21px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 34px;
    background: var(--bg);
    border-radius: 6px 6px 0 0;
}
.spark-bar {
    width: 100%;
    max-width: 34px;
    margin-top: auto;
    background: var(--gradient);
    border-radius: 6px 6px 0 0;
    position: relative;
    z-index: 1;
    min-height: 4px;
    transition: filter 0.15s var(--ease);
}
.spark-bar:hover { filter: brightness(1.12); }
.spark-value {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text);
}
.spark-label { font-size: 0.68rem; color: var(--muted); margin-top: 6px; white-space: nowrap; }

/* Plan distribution bars */
.plan-bar-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.plan-bar-row:last-child { border-bottom: none; }
.plan-bar-head { display: flex; justify-content: space-between; font-size: 0.88rem; margin-bottom: 6px; }
.plan-bar-track { height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.plan-bar-fill { height: 100%; background: var(--gradient); border-radius: 999px; }
.plan-bar-foot { font-size: 0.76rem; color: var(--muted); margin-top: 5px; }

.inline-form { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px; }

.badge-unpaid { background: #fef3c7; color: #92400e; }
.badge-super { background: #ede9fe; color: #5b21b6; }

/* ==========================================================================
   Signup - plan selection
   ========================================================================== */

.signup { max-width: 1080px; margin: 48px auto 72px; padding: 0 20px; }
.signup-head { text-align: center; margin-bottom: 28px; }
.signup-head h1 { font-size: 2rem; font-weight: 700; margin-bottom: 8px; }
.signup-head p { color: var(--muted); max-width: 560px; margin: 0 auto; }
.signup-alert { max-width: 640px; margin: 0 auto 20px; }

.signup-grid { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start; }
@media (min-width: 940px) {
    .signup-grid { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); }
}

.signup-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.signup-section-head h2 { font-size: 1.15rem; font-weight: 600; }
.signup-step {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 2px;
}

/* Monthly / yearly switch */
.cycle-toggle {
    display: inline-flex;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
}
.cycle-option {
    border: none;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s var(--ease);
}
.cycle-option.active { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); }

/* Selectable plan cards */
.plan-cards { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) {
    .plan-cards { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
}
.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 18px 52px;
    cursor: pointer;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), transform 0.15s var(--ease);
}
.plan-card:hover { border-color: var(--primary-light); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.plan-card.selected { border-color: var(--primary); box-shadow: var(--shadow-md); }
/* The radio stays in the DOM for keyboard/no-JS use but is visually hidden;
   the card itself is the click target. */
.plan-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.plan-flag {
    position: absolute;
    top: -11px;
    left: 18px;
    background: var(--gradient);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
}
.plan-name { font-size: 1.05rem; font-weight: 700; }
.plan-price { display: flex; align-items: baseline; gap: 4px; }
.plan-amount { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; }
.plan-period { font-size: 0.82rem; color: var(--muted); }
.plan-desc { font-size: 0.85rem; color: var(--muted); }
.plan-features { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.plan-feature { font-size: 0.82rem; color: var(--text); padding-left: 18px; position: relative; }
.plan-feature::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--success);
    border-bottom: 2px solid var(--success);
    transform: rotate(-45deg);
}
.plan-check {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 0;
}
.plan-card.selected .plan-check { background: var(--primary-tint); border-color: var(--primary); color: var(--primary-dark); }
.plan-card:not(.selected) .plan-check::after { content: "Select"; }
.plan-card:not(.selected) .plan-check { font-size: 0; }
.plan-card:not(.selected) .plan-check::after { font-size: 0.78rem; }

/* Right-hand details column */
.signup-details { position: sticky; top: 24px; }
@media (max-width: 939px) {
    .signup-details { position: static; }
}
.field-hint { font-size: 0.78rem; color: var(--muted); margin-top: 5px; }

.signup-summary {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    margin: 6px 0 18px;
}
.signup-summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.88rem; padding: 4px 0; }
.signup-summary-row span { color: var(--muted); }
.signup-summary-total {
    border-top: 1px solid var(--border);
    margin-top: 6px;
    padding-top: 10px;
    font-size: 1rem;
}
.signup-summary-total strong { font-size: 1.15rem; }

.signup-submit { width: 100%; justify-content: center; padding: 12px; font-size: 0.98rem; }
.signup-foot { margin-top: 14px; font-size: 0.88rem; }

/* Layout builder (drag & drop, no-code PDF layout customization) */
.template-option.template-option-recommended { position: relative; }
.template-badge {
    position: absolute;
    top: -9px;
    right: 10px;
    background: var(--primary, #2563eb);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 9999px;
}
.layout-builder {
    border: 1px solid var(--border, #e4e9f0);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #fbfbfd;
}
.layout-builder-globals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    padding: 16px;
    background: #fff;
    border-bottom: 1px solid var(--border, #e4e9f0);
}
.layout-builder-globals label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 4px;
}
.layout-builder-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    min-height: 320px;
}
.layout-palette {
    border-right: 1px solid var(--border, #e4e9f0);
    padding: 14px;
    background: #fff;
}
.layout-palette-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 10px;
}
.layout-palette-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: #f4f6f9;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text, #1f2937);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.layout-palette-btn:hover {
    border-color: var(--primary, #2563eb);
    background: #eef3fe;
}
.layout-palette-btn small {
    display: block;
    font-weight: 400;
    color: var(--muted);
    font-size: 0.72rem;
    margin-top: 2px;
}
.layout-canvas {
    padding: 14px 16px;
}
.layout-canvas-empty {
    border: 2px dashed var(--border, #e4e9f0);
    border-radius: 8px;
    text-align: center;
    color: var(--muted);
    padding: 36px 16px;
    font-size: 0.85rem;
}
.layout-block {
    border: 1px solid var(--border, #e4e9f0);
    border-radius: 8px;
    background: #fff;
    margin-bottom: 10px;
    transition: box-shadow 0.15s ease, opacity 0.15s ease;
}
.layout-block.is-dragging { opacity: 0.4; }
.layout-block.is-disabled { opacity: 0.55; }
.layout-block.drag-over-top { box-shadow: inset 0 3px 0 var(--primary, #2563eb); }
.layout-block.drag-over-bottom { box-shadow: inset 0 -3px 0 var(--primary, #2563eb); }
.layout-block-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}
.layout-drag-handle {
    cursor: grab;
    color: #b7c0cd;
    font-size: 1rem;
    line-height: 1;
    user-select: none;
    padding: 4px;
}
.layout-block-title {
    flex: 1;
    font-size: 0.86rem;
    font-weight: 600;
}
.layout-block-title small {
    display: block;
    font-weight: 400;
    color: var(--muted);
    font-size: 0.74rem;
    margin-top: 1px;
}
.layout-width-toggle {
    display: flex;
    border: 1px solid var(--border, #e4e9f0);
    border-radius: 6px;
    overflow: hidden;
    font-size: 0.72rem;
}
.layout-width-toggle button {
    background: #fff;
    border: none;
    padding: 5px 9px;
    cursor: pointer;
    color: var(--muted);
    font-weight: 600;
}
.layout-width-toggle button.is-active {
    background: var(--primary, #2563eb);
    color: #fff;
}
.layout-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    padding: 5px;
    border-radius: 5px;
    font-size: 0.95rem;
    line-height: 1;
}
.layout-icon-btn:hover { background: #f0f2f5; color: var(--text, #1f2937); }
.layout-icon-btn.is-active { background: #eef3fe; color: var(--primary, #2563eb); }
.layout-block-settings {
    border-top: 1px solid var(--border, #edf0f4);
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    background: #fafbfd;
}
.layout-block-settings label {
    display: block;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 3px;
}
.layout-block-settings .checkbox-inline { margin-top: 6px; }
.layout-setting-full { grid-column: 1 / -1; }
.layout-multiselect { display: flex; flex-wrap: wrap; gap: 6px; }
.layout-multiselect label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    color: var(--text, #1f2937);
    background: #fff;
    border: 1px solid var(--border, #e4e9f0);
    border-radius: 5px;
    padding: 4px 8px;
    margin: 0;
    cursor: pointer;
}
.layout-multiselect input { width: auto; }
@media (max-width: 760px) {
    .layout-builder-body { grid-template-columns: 1fr; }
    .layout-palette { border-right: none; border-bottom: 1px solid var(--border, #e4e9f0); }
}

/* Appearance settings page (Settings > Appearance) --------------------- */
.theme-mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    max-width: 620px;
}
.theme-mode-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.theme-mode-option:hover { border-color: var(--primary-light); }
.theme-mode-option.is-selected { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.theme-mode-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.theme-mode-label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.theme-mode-preview {
    width: 100%;
    height: 64px;
    border-radius: 8px;
    display: flex;
    overflow: hidden;
    border: 1px solid var(--border);
}
.theme-mode-preview span:first-child { width: 30%; }
.theme-mode-preview span:last-child { flex: 1; }
.theme-mode-preview-light { background: #f4f5f7; }
.theme-mode-preview-light span:first-child { background: #ffffff; border-right: 2px solid var(--primary); }
.theme-mode-preview-light span:last-child { background: #ffffff; margin: 8px; border-radius: 4px; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.theme-mode-preview-dark { background: #10161a; }
.theme-mode-preview-dark span:first-child { background: #171f23; border-right: 2px solid var(--primary); }
.theme-mode-preview-dark span:last-child { background: #171f23; margin: 8px; border-radius: 4px; }
.theme-mode-preview-system { background: linear-gradient(90deg, #f4f5f7 50%, #10161a 50%); }
.theme-mode-preview-system span:first-child { background: linear-gradient(90deg, #ffffff 50%, #171f23 50%); border-right: 2px solid var(--primary); }
.theme-mode-preview-system span:last-child { background: linear-gradient(90deg, #ffffff 50%, #171f23 50%); margin: 8px; border-radius: 4px; }