/*
 * chardou.css — Unified Design System
 * Loaded by BOTH public pages and tenant app pages.
 * ─────────────────────────────────────────────────
 * 1. Fonts
 * 2. CSS Variables (light / dark themes)
 * 3. Global styles
 * 4. UI Components (cards, inputs, buttons, tables, badges)
 * 5. Utilities
 * 6. Functional colors (primary, danger, success, warning)
 * 7. Bootstrap theme adapters
 * 8. Shared components (navbar, dropdowns, scrollbar, alerts)
 */

/* ═══════════════════════════════════════════════════
   1. FONTS
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');


/* ═══════════════════════════════════════════════════
   2. CSS VARIABLES
═══════════════════════════════════════════════════ */

/* — Light Mode (default) — */
:root {
    --bg-body:              #F7F7F5;   /* near-white concrete */
    --bg-card:              #FFFFFF;
    --bg-header:            #EFEFED;   /* light concrete grey */
    --bg-header-comp:       #E6E6E3;

    --text-main:            #111111;   /* near-black */
    --text-muted:           #666666;   /* concrete grey */

    --color-primary:        #CC2A0D;   /* chardou red */
    --color-primary-hover:  #B32408;
    --color-primary-soft:   #FFF1EF;

    --color-accent:         #8F3025;   /* muted brick red */
    --color-accent-soft:    #F5EDEB;

    --border-color:         #E0E0DC;   /* neutral grey border */
    --border-input:         #D4D4D0;

    --color-danger:         #D94F2E;
    --color-danger-hover:   #B83D20;
    --bg-danger-soft:       #FDF0EC;
    --border-danger-soft:   #F5C8BC;

    --color-success:        #2E7D5A;
    --bg-success-soft:      #E6F5EE;
    --border-success-soft:  #A8DBBF;

    --color-warning:        #B86A10;
    --bg-warning:           #D97F18;
    --bg-warning-soft:      #FEF3DC;
    --border-warning-soft:  #F5DDA0;

    --color-action:          #4B5563;   /* slate — workflow/management actions */
    --color-action-hover:    #374151;
    --bg-action-soft:        #F3F4F6;

    --color-info:            #2E6FA3;   /* steel blue — export/info actions */
    --color-info-hover:      #245A87;
    --bg-info-soft:          #EBF4FF;

    --font-ui:              'Inter', sans-serif;
    --font-mono:            'JetBrains Mono', monospace;

    --radius-main:          0px;
    --radius-btn:           0px;
    --radius-badge:         0px;
    --border-width:         1px;

    --shadow-sm:            none;
    --shadow-main:          none;
    --shadow-focus:         0 0 0 2px rgba(204, 42, 13, 0.25);

    --transition-smooth:    all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* — Dark Mode — */
[data-theme="dark"] {
    --bg-body:              #131210;   /* warm charcoal */
    --bg-card:              #1E1C19;   /* warm dark card */
    --bg-header:            #252320;   /* warm section bg */
    --bg-header-comp:       #2D2B27;

    --text-main:            #EDE9E2;   /* warm off-white */
    --text-muted:           #8C8680;   /* warm stone */

    --color-primary:        #E8300F;   /* chardou red — brighter on dark */
    --color-primary-hover:  #FF4A2A;
    --color-primary-soft:   rgba(232, 48, 15, 0.15);

    --color-accent:         #B85848;   /* muted brick red for dark */
    --color-accent-soft:    rgba(184, 88, 72, 0.12);

    --border-color:         #302D28;   /* warm dark border */
    --border-input:         #3E3B34;

    --color-danger:         #F06040;
    --color-danger-hover:   #D94E2A;
    --bg-danger-soft:       rgba(240, 96, 64, 0.12);
    --border-danger-soft:   rgba(240, 96, 64, 0.25);

    --color-success:        #3DAD7A;
    --bg-success-soft:      rgba(61, 173, 122, 0.12);
    --border-success-soft:  rgba(61, 173, 122, 0.25);

    --color-warning:        #D4963A;
    --bg-warning:           #C4841E;
    --bg-warning-soft:      rgba(212, 150, 58, 0.12);
    --border-warning-soft:  rgba(212, 150, 58, 0.25);

    --color-action:          #9CA3AF;   /* slate — lighter on dark bg */
    --color-action-hover:    #D1D5DB;
    --bg-action-soft:        rgba(156, 163, 175, 0.12);

    --color-info:            #60A5FA;   /* steel blue — brighter on dark */
    --color-info-hover:      #93C5FD;
    --bg-info-soft:          rgba(96, 165, 250, 0.12);

    --shadow-main:          none;
    --shadow-sm:            none;
    --shadow-focus:         0 0 0 2px rgba(232, 48, 15, 0.35);
}


/* ═══════════════════════════════════════════════════
   3. GLOBAL STYLES
═══════════════════════════════════════════════════ */

body {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
    font-family: var(--font-ui);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.font-mono {
    font-family: var(--font-mono) !important;
    letter-spacing: 0px !important;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-smooth);
}
a:hover, a:focus { color: var(--color-primary-hover); }

/* Page load animation */
@keyframes smoothFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
main, .container {
    animation: smoothFadeIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Text selection */
::selection      { background-color: var(--color-primary); color: #FFF; }
::-moz-selection { background-color: var(--color-primary); color: #FFF; }


/* ═══════════════════════════════════════════════════
   4. UI COMPONENTS
═══════════════════════════════════════════════════ */

/* Cards */
.card {
    background-color: var(--bg-card) !important;
    border: var(--border-width) solid var(--border-color) !important;
    border-radius: var(--radius-main) !important;
    box-shadow: var(--shadow-main) !important;
    transition: var(--transition-smooth);
}
.card .table tbody tr:last-child td { border-bottom: none; }

/* Card headers */
.bg-brutal-header {
    background-color: var(--bg-header) !important;
    color: var(--text-main) !important;
    border-bottom: var(--border-width) solid var(--border-color) !important;
    border-radius: var(--radius-main) var(--radius-main) 0 0 !important;
    padding: 1.25rem 1.5rem !important;
}
.bg-brutal-header-complementary {
    background-color: var(--bg-header-comp) !important;
    color: var(--text-main) !important;
}

/* Inputs */
.form-control, .form-select, .input-group-text {
    background-color: var(--bg-card) !important;
    border: var(--border-width) solid var(--border-input) !important;
    color: var(--text-main) !important;
    border-radius: var(--radius-btn) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: var(--transition-smooth);
    padding: 0.75rem 1rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: var(--shadow-focus) !important;
    outline: none;
}
.form-control::placeholder { color: var(--text-muted) !important; }
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Primary button — solid fill at rest */
.btn-primary {
    background-color: var(--color-primary) !important;
    color: #FFF !important;
    border: none !important;
    border-radius: var(--radius-btn) !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    transition: var(--transition-smooth) !important;
}
.btn-primary:hover {
    background-color: var(--color-primary-hover) !important;
    color: #FFF !important;
}
.btn-primary:active { transform: scale(0.97); }


/* Danger button — solid fill at rest */
.btn-danger {
    background-color: var(--color-danger) !important;
    color: #FFF !important;
    border: none !important;
    border-radius: var(--radius-btn) !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    transition: var(--transition-smooth) !important;
}
.btn-danger:hover {
    background-color: var(--color-danger-hover) !important;
    color: #FFF !important;
}
.btn-danger:active { transform: scale(0.97) !important; }

/* When the hidden radio button is checked, highlight the card in RED! */
.btn-check:checked + .trade-card {
    border-color: #EF4444 !important; /* A beautiful, vibrant red */
    background-color: rgba(239, 68, 68, 0.05) !important; /* A very soft, transparent red tint */
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15); /* A subtle red glowing shadow */
}

/* Optional: Make the icon inside the selected card turn red too! */
.btn-check:checked + .trade-card .text-primary {
    color: #EF4444 !important;
}
.btn-check:checked + .trade-card .bg-primary.bg-opacity-10 {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

/* Tables */
.table {
    --bs-table-bg: transparent;
    background-color: transparent !important;
    margin-bottom: 0;
    color: var(--text-main);
    border-collapse: separate;
    border-spacing: 0;
}

.table th, 
.table td, 
.table tr {
    background-color: transparent !important;
    color: var(--text-main) !important;
}

.table th {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted) !important;
    border-bottom: 2px solid var(--border-color);
    padding: 1rem;
    font-weight: 600;
}
.table td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition-smooth);
}

.table tbody tr:hover td { background-color: var(--bg-header); }

/* Sticky thead — add .table-sticky-header to <table> to pin column headers on scroll.
   Requires the table NOT be wrapped in a table-responsive div (overflow clips sticky). */
.table-sticky-header thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--bg-header) !important;  /* override transparent !important */
    box-shadow: 0 1px 0 var(--border-color);        /* replace border-bottom lost by sticky stacking */
}

/* Badges */
.badge {
    border-radius: var(--radius-badge) !important;
    border: var(--border-width) solid var(--border-color) !important;
    padding: 0.35em 0.65em;
    font-weight: 600;
    color: var(--text-main) !important;
    background-color: var(--bg-card) !important;
}

/* Dropdown menus */
.dropdown-menu {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: var(--shadow-main) !important;
    padding: 0.5rem;
    border-radius: var(--radius-main);
}
.dropdown-item {
    color: var(--text-muted);
    font-size: 0.8rem;
    border-radius: var(--radius-btn);
    transition: var(--transition-smooth);
    background-color: transparent;
}
.dropdown-item:active, .dropdown-item:focus, .dropdown-item:hover,
.nav-link:active, .nav-link:focus, .nav-link:hover {
    background-color: var(--bg-header) !important;
    color: var(--text-main) !important;
}
.dropdown-item:hover i { color: var(--color-primary) !important; }

/* Navbar */
.navbar { border-bottom: var(--border-width) solid var(--border-color) !important; }

/* Password toggle */
.password-toggle-btn {
    z-index: 10;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 4px;
    color: var(--text-muted);
    transition: var(--transition-smooth);
}
.password-toggle-btn:hover { color: var(--color-primary) !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb {
    background: var(--border-input);
    border-radius: 10px;
    border: 2px solid var(--bg-body);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }


/* ═══════════════════════════════════════════════════
   5. UTILITIES
═══════════════════════════════════════════════════ */

.max-w-450 { max-width: 450px; }
.max-w-460 { max-width: 460px; }
.max-w-500 { max-width: 500px; }
.max-w-520 { max-width: 520px; }
.max-w-550 { max-width: 550px; }
.max-w-560 { max-width: 560px; }
.max-w-600 { max-width: 600px; }
.max-w-780 { max-width: 780px; }
.max-w-800 { max-width: 800px; }
.max-w-900 { max-width: 900px; }

.size-32 { width: 32px; height: 32px; }
.size-48 { width: 48px; height: 48px; }
.size-64 { width: 64px; height: 64px; }
.size-72 { width: 72px; height: 72px; }
.size-80 { width: 80px; height: 80px; }
.img-cover { object-fit: cover; }

.hover-lift { transition: var(--transition-smooth) !important; }
.hover-lift:hover { transform: translateY(-1px); }

/* Colored KPI cards */
.brutal-card-yellow { background-color: var(--bg-warning-soft) !important;  border: var(--border-width) solid var(--border-warning-soft) !important; }
.brutal-card-cyan   { background-color: var(--color-primary-soft) !important; border: var(--border-width) solid var(--color-primary) !important; }
.brutal-card-red    { background-color: var(--bg-danger-soft) !important;   border: var(--border-width) solid var(--border-danger-soft) !important; }

/* Legacy shadow overrides (kept for template compatibility) */
.brutal-shadow-sm, .brutal-shadow-md, .brutal-shadow-danger {
    box-shadow: var(--shadow-sm) !important;
}

/* Alert (generic) */
.alert-danger {
    background-color: var(--bg-danger-soft) !important;
    border: var(--border-width) solid var(--border-danger-soft) !important;
    color: var(--color-danger) !important;
    border-radius: var(--radius-main);
}
.alert-warning {
    background-color: var(--bg-warning-soft) !important;
    border: var(--border-width) solid var(--border-warning-soft) !important;
    color: var(--color-warning) !important;
}


/* ═══════════════════════════════════════════════════
   6. FUNCTIONAL COLORS
═══════════════════════════════════════════════════ */

/* Primary */
.text-primary  { color: var(--color-primary) !important; }
.bg-primary    { background-color: var(--color-primary) !important; color: #FFF !important; }
.bg-primary.bg-opacity-10 { background-color: var(--color-primary-soft) !important; color: var(--color-primary) !important; }

/* Danger */
.text-danger   { color: var(--color-danger) !important; }
.bg-danger     { background-color: var(--color-danger) !important; color: #FFF !important; }
.bg-danger.bg-opacity-10  { background-color: var(--bg-danger-soft) !important; color: var(--color-danger) !important; }
.badge.bg-danger  { background-color: var(--bg-danger-soft) !important; color: var(--color-danger) !important; border-color: var(--border-danger-soft) !important; }

/* Success */
.text-success  { color: var(--color-success) !important; }
.bg-success    { background-color: var(--color-success) !important; color: #FFF !important; }
.bg-success.bg-opacity-10 { background-color: var(--bg-success-soft) !important; color: var(--color-success) !important; }
.badge.bg-success { background-color: var(--bg-success-soft) !important; color: var(--color-success) !important; border-color: var(--border-success-soft) !important; }

/* Warning */
.text-warning  { color: var(--color-warning) !important; }
.bg-warning    { background-color: var(--bg-warning) !important; color: #FFF !important; }
.bg-warning.bg-opacity-10 { background-color: var(--bg-warning-soft) !important; color: var(--color-warning) !important; }
.badge.bg-warning { background-color: var(--bg-warning-soft) !important; color: var(--color-warning) !important; border-color: var(--border-warning-soft) !important; }


/* ═══════════════════════════════════════════════════
   7. BOOTSTRAP THEME ADAPTERS
   Force Bootstrap utilities to respect CSS variables
   so light/dark/google modes work automatically.
═══════════════════════════════════════════════════ */

.text-dark   { color: var(--text-main) !important; }
.text-muted  { color: var(--text-muted) !important; }
.text-accent { color: var(--color-accent) !important; }
.bg-white    { background-color: var(--bg-card) !important; }
.bg-light    { background-color: var(--bg-header) !important; }
.border-dark { border-color: var(--border-color) !important; }
.border-2    { border-width: var(--border-width) !important; }

/* Badge exceptions — solid yellow/white must stay readable in dark mode */
.badge.bg-warning.text-dark,
.badge.bg-white.text-dark {
    color: #1A1C20 !important;
}

/* Pricing card highlight */
.pricing-card-pro { border: 2px solid var(--color-primary) !important; }
.badge-pro {
    background-color: var(--color-primary) !important;
    color: #FFF !important;
    border: none !important;
}


/* ═══════════════════════════════════════════════════
   9. PAGE SEMANTICS
   Semantic layout & typographic classes — no inline
   style= attributes needed in templates.
═══════════════════════════════════════════════════ */

/* — Typography — */
.overline {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.overline-sm {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.heading-hero {
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 300;
    letter-spacing: -2px;
    line-height: 1.1;
    max-width: 860px;
}
.heading-section {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: -1px;
}
.heading-page {
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: -1px;
}
.heading-cta {
    font-size: 2.2rem;
    font-weight: 300;
    letter-spacing: -1px;
}
.prose {
    max-width: 500px;
    font-size: 1.05rem;
    line-height: 1.8;
}
.text-lh  { line-height: 1.8; }
.text-xs      { font-size: 0.7rem; }
.icon-display { font-size: 3rem; }
.brand-wordmark { letter-spacing: -0.5px; }

/* — Sections — */
.section-hero {
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: 5rem 0;
}
.section-padded { padding: 6rem 0; }
.section-cta    { padding: 7rem 0; }

/* — Dividers — */
.section-divider { border-color: var(--border-color) !important; margin: 0; }
.section-rule    { border-color: var(--border-color) !important; margin: 3rem 0; }

/* — Navbar — */
.navbar-public { background-color: var(--bg-body) !important; }

/* — Footer — */
.page-footer  { padding: 3rem 0; border-top: 1px solid var(--border-color); }
.footer-bottom { border-top: 1px solid var(--border-color); }

/* — Feature grid — */
.feature-icon { font-size: 1.25rem; }
.feature-body { line-height: 1.8; }

/* — Trust row (home page features section) — */
.trust-row      { border-top: 1px solid var(--border-color); }
.trust-item-sep { border-right: 1px solid var(--border-color); }

/* — Story: cats card & quote — */
.cat-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
    padding: 2rem;
    background: var(--bg-card);
}
.cat-row  { border-bottom: 1px solid var(--border-color); }
.cat-emoji { font-size: 2.5rem; line-height: 1; }
.quote-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
    padding: 1.5rem;
    background: var(--bg-header);
}

/* — Pricing cards — */
.pricing-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
    padding: 2.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.pricing-card--pro { border: 2px solid var(--color-primary); }
.pricing-price {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: -1px;
}

/* — CTA section — */
.cta-wrap  { max-width: 560px; margin: 0 auto; }
.cta-emoji { font-size: 2rem; margin-bottom: 1.5rem; }

/* — Dashboard — */
.section-label {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.profile-strip { border-bottom: 1px solid var(--border-color); }
.profile-logo {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border: 1px solid var(--border-color);
}
.profile-logo-placeholder {
    width: 48px;
    height: 48px;
    border: 1px solid var(--border-color);
    background: var(--bg-header);
    display: flex;
    align-items: center;
    justify-content: center;
}
.kpi-strip {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
    overflow: hidden;
}
.kpi-item     { padding: 1.5rem; }
.kpi-item--sep { border-right: 1px solid var(--border-color); }
.kpi-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.kpi-value {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 0;
}
.kpi-unit {
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.6;
}
.data-table-wrap {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-main);
    overflow: hidden;
}


/* ═══════════════════════════════════════════════════
   10. HOME PAGE — Databricks-inspired
   White hero · split layout · red accent · dark strip
   These classes are only used in home.html.
   App templates are unaffected.
═══════════════════════════════════════════════════ */

/* ---- Color tokens (home only) ---- */
:root {
    --db-red:        #E8300F;
    --db-red-hover:  #CC2A0D;
    --db-dark:       #1C2A3A;
    --db-dark-hover: #0F1D2A;
    --db-strip:      #0A1929;
    --db-muted:      #5A6A7E;
    --db-border:     #E2E8F0;
}

/* ---- Navbar ---- */
.navbar-db {
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--db-border) !important;
}
.navbar-db .brand-wordmark      { color: var(--db-dark) !important; letter-spacing: -0.5px; }
.navbar-db .nav-link {
    color: var(--db-muted) !important;
    font-size: 0.9rem;
    border-bottom: 2px solid transparent;
    padding-bottom: calc(0.5rem - 2px);
    transition: color 0.15s ease, border-color 0.15s ease !important;
}
.navbar-db .nav-link:hover {
    color: var(--db-dark) !important;
    background: transparent !important;
    border-bottom-color: var(--db-red) !important;
}
.navbar-db .btn-light           { color: var(--db-muted) !important; font-size: 0.9rem; }
.navbar-db .btn-light:hover     { background-color: #F1F5F9 !important; color: var(--db-dark) !important; }
.navbar-db .dropdown-menu       { background: #FFFFFF !important; border-color: var(--db-border) !important; }
.navbar-db .dropdown-item       { color: var(--db-muted) !important; }
.navbar-db .dropdown-item:hover { background-color: #F1F5F9 !important; color: var(--db-dark) !important; }
.navbar-db .font-mono           { color: var(--db-muted) !important; }

/* ---- CTA buttons ---- */
.btn-db-red {
    background: var(--db-red) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    transition: all 0.18s ease !important;
}
.btn-db-red:hover  { background: var(--db-red-hover) !important; color: #FFFFFF !important; }
.btn-db-red:active { transform: scale(0.97); }

.btn-db-dark {
    background: var(--db-dark) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0 !important;
    font-weight: 500 !important;
    transition: all 0.18s ease !important;
}
.btn-db-dark:hover  { background: var(--db-dark-hover) !important; color: #FFFFFF !important; }
.btn-db-dark:active { transform: scale(0.97); }

/* ---- Hero section ---- */
.section-db-hero {
    background: #FFFFFF;
    padding: 4rem 0 0;
    overflow: hidden;
}
.hero-db-headline {
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: 800;
    letter-spacing: -3px;
    line-height: 1.05;
    color: var(--db-dark);
    margin-bottom: 1.5rem;
}
.hero-db-accent { color: var(--db-red); }
.hero-db-subtitle {
    font-size: 1.05rem;
    color: var(--db-muted);
    line-height: 1.75;
    max-width: 440px;
    margin-bottom: 2rem;
}

/* ---- Screenshot frame (right side of hero) ---- */
.hero-screenshot-outer {
    position: relative;
    padding-top: 1rem;
}
.hero-screenshot-frame {
    background: #F8FAFC;
    border: 1px solid var(--db-border);
    border-bottom: none;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(28, 42, 58, 0.12);
}
.hero-screenshot-chrome {
    background: #F1F5F9;
    border-bottom: 1px solid var(--db-border);
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.chrome-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.chrome-dot-red    { background: #FF5F56; }
.chrome-dot-yellow { background: #FFBD2E; }
.chrome-dot-green  { background: #27C93F; }
.chrome-url-bar {
    flex: 1;
    background: #FFFFFF;
    border: 1px solid var(--db-border);
    border-radius: 4px;
    height: 22px;
    margin: 0 0.5rem;
}
.hero-screenshot-body {
    min-height: 360px;
    background: linear-gradient(135deg, #EFF6FF 0%, #F8FAFC 60%, #F0FDF4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.hero-screenshot-body img {
    width: 100%;
    height: auto;
    display: block;
}
/* Placeholder shown when no image is provided */
.hero-screenshot-placeholder {
    text-align: center;
    color: #94A3B8;
}
.hero-screenshot-placeholder i  { font-size: 2.5rem; display: block; margin-bottom: 0.75rem; }
.hero-screenshot-placeholder p  { font-size: 0.8rem; margin: 0; }

/* ---- Beta announcement bar ---- */
.beta-announcement-bar {
    background: #FEF9C3;
    border-bottom: 1px solid #FDE68A;
    padding: 0.5rem 0;
    color: #92400E;
    font-size: 0.85rem;
}
.beta-badge {
    background: #F59E0B;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}
.beta-bar-link {
    color: #92400E;
    font-weight: 500;
}
.beta-bar-link:hover {
    color: #78350F;
}

/* ---- "Trusted by" dark strip ---- */
.trusted-strip {
    background: var(--db-strip);
    padding: 1.25rem 0;
}
.trusted-strip-inner {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.trusted-label {
    color: rgba(255,255,255,0.40);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.12);
    padding-right: 2.5rem;
    flex-shrink: 0;
}
.trusted-item {
    color: rgba(255,255,255,0.55);
    font-size: 0.82rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}
.trusted-item i { color: rgba(255,255,255,0.35); }

/* ---- Feature cards ---- */
.section-db-features { padding: 6rem 0; background: var(--bg-body); }
.overline-db { color: var(--db-red); }

.feature-card-db {
    border: 1px solid var(--border-color);
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 2rem;
    background: var(--bg-card);
    height: 100%;
    transition: border-bottom-color 0.2s ease;
}
.feature-card-db:hover {
    border-bottom-color: var(--db-red);
}
.feature-icon-db {
    width: 42px;
    height: 42px;
    border-radius: 0;
    background: #FFF1EF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    color: var(--db-red);
    font-size: 1rem;
    flex-shrink: 0;
}
[data-theme="dark"] .feature-icon-db { background: rgba(255,54,33,0.12); }

/* ---- Compliance section ---- */
.section-db-compliance { padding: 6rem 0; background: var(--bg-subtle); }

.compliance-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--db-red);
    border-radius: 8px;
    padding: 2rem;
}

.compliance-card-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.compliance-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--db-red) 12%, transparent);
    color: var(--db-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.compliance-icon--amber {
    background: color-mix(in srgb, #F59E0B 12%, transparent);
    color: #D97706;
}

.compliance-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.compliance-status {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.compliance-status--live   { color: #16A34A; }
.compliance-status--upcoming { color: #D97706; }

.compliance-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.compliance-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.compliance-list .bi-check-circle-fill { color: #16A34A; flex-shrink: 0; margin-top: 2px; }
.compliance-list .bi-clock            { color: #D97706; flex-shrink: 0; margin-top: 2px; }

.compliance-footnote {
    font-size: 0.78rem;
    color: var(--db-muted);
    margin-top: 1rem;
    margin-bottom: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* ---- Story section ---- */
.section-db-story { padding: 6rem 0; background: var(--bg-body); }

/* ---- Pricing ---- */
.section-db-pricing { padding: 6rem 0; background: var(--bg-body); }
.pricing-card--db-pro { border: 2px solid var(--db-red) !important; }
.overline-db-pro { color: var(--db-red); }

/* ---- CTA strip ---- */
.section-db-cta {
    background: var(--db-strip);
    padding: 6rem 0;
}
.section-db-cta h2          { color: #FFFFFF !important; }
.section-db-cta .text-muted { color: rgba(255,255,255,0.50) !important; }
.section-db-cta .text-lh    { color: rgba(255,255,255,0.55) !important; }
.section-db-cta .cta-emoji  { opacity: 0.85; }

/* ---- Footer ---- */
.footer-db {
    background: var(--db-strip);
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 3rem 0;
}
.footer-db .fw-medium,
.footer-db .brand-wordmark    { color: rgba(255,255,255,0.85) !important; }
.footer-db .text-muted        { color: rgba(255,255,255,0.38) !important; }
.footer-db a.text-muted:hover { color: rgba(255,255,255,0.75) !important; }
.footer-db .footer-bottom     { border-top-color: rgba(255,255,255,0.07) !important; }


/* ═══════════════════════════════════════════════════
   11. DASHBOARD — Sidebar + Workspace layout
═══════════════════════════════════════════════════ */

/* Top search/action bar */
.dash-topbar {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    min-height: 60px;
    position: sticky;
    top: 0;
    z-index: 100;
}
.dash-search .input-group-text {
    border: none !important;
    background: transparent !important;
    padding-right: 0;
}
.dash-search .form-control {
    border: none !important;
    box-shadow: none !important;
    font-size: 0.9rem;
    padding-left: 0.5rem;
}
.dash-search .form-control:focus { box-shadow: none !important; }

/* Sidebar */
.dash-sidebar {
    min-height: calc(100vh - 61px);
    background: var(--bg-card);
    border-right: 1px solid var(--border-color);
}
.dash-sidebar-section { border-bottom: 1px solid var(--border-color); padding: 1.25rem 1.5rem; }

/* Sidebar nav bricks */
.dash-nav-brick {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition-smooth);
    border-left: 2px solid transparent;
}
.dash-nav-brick:hover {
    background: var(--bg-header);
    color: var(--text-main);
    border-left-color: var(--color-primary);
}
.dash-nav-brick.active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    font-weight: 600;
}
.dash-nav-brick i { font-size: 0.95rem; width: 18px; text-align: center; flex-shrink: 0; }

/* KPI bricks */
.kpi-brick {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 1.25rem 1.5rem;
    transition: var(--transition-smooth);
}
.kpi-brick:hover { border-color: var(--color-primary); }
.kpi-brick-label {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.kpi-brick-value {
    font-family: var(--font-mono);
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1;
    color: var(--text-main);
}
.kpi-brick-unit {
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.5;
}
.kpi-brick-accent   { border-top: 2px solid var(--color-primary); }
.kpi-brick-warn     { border-top: 2px solid var(--color-warning); }
.kpi-brick-success  { border-top: 2px solid var(--color-success); }
.kpi-brick-info     { border-top: 2px solid #0dcaf0; }
.kpi-brick-danger   { border-top: 2px solid var(--color-danger); }

/* Payment method icon inside invoice list status cell */
.payment-method-icon {
    font-size: 0.8rem;
    vertical-align: middle;
    cursor: default;
}

/* Main workspace */
.dash-main { background: var(--bg-body); padding: 2rem; }

/* Workspace heading in sidebar */
.dash-workspace-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-main);
    line-height: 1.3;
}
.dash-plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ═══════════════════════════════════════════════════
   CREDIT NOTE SUB-ROW  (inline under credited invoice)
═══════════════════════════════════════════════════ */

.credit-note-row td {
    background-color: var(--bg-warning-soft);
}
.credit-note-row td:first-child {
    border-left: 3px solid var(--bg-warning);
    padding-left: calc(1rem + 3px); /* compensate for the border */
}
.credit-note-row .credit-note-indent {
    color: var(--color-warning);
    margin-right: 0.35rem;
}

/* ═══════════════════════════════════════════════════
   DOCUMENT PIPELINE BAR  (invoices, quotes)
═══════════════════════════════════════════════════ */

/* ── Invoice pipeline — 2-row CSS Grid ────────────────────────
   Row 1 (main flow):     All  Draft  Sent  Unpaid  Paid
   Row 2 (terminal exits):               ↳Void  ↳Credited
   Placement is declared per .pipeline-step--{value} class so
   the template loop needs no positional logic or inline styles.
────────────────────────────────────────────────────────────── */

/* ── Chart wrappers ────────────────────────────────────────────
   Chart.js with maintainAspectRatio:false requires the parent
   container to have a defined CSS height, otherwise the canvas
   grows unbounded. Use .chart-wrapper around every <canvas>.
────────────────────────────────────────────────────────────── */
.chart-wrapper {
    position: relative;
    height: 240px;
}
.chart-wrapper--sm {
    position: relative;
    height: 200px;
}

.pipeline-grid {
    display: grid;
    grid-template-columns: 0.65fr repeat(4, 1fr);
    margin-bottom: 1.25rem;
    border-left: 1px solid var(--border-color);
    border-top:  1px solid var(--border-color);
}

.pipeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.55rem 0.35rem;
    background: var(--bg-card);
    border-right:  1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    text-decoration: none;
    transition: var(--transition-smooth);
    cursor: pointer;
}
.pipeline-step:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary);
    text-decoration: none;
}
.pipeline-step.active {
    background: var(--color-primary-soft);
    border-top: 2px solid var(--color-primary);
}
.pipeline-step.active .pipeline-count,
.pipeline-step.active .pipeline-label {
    color: var(--color-primary);
}

/* Icon — opacity driven by CSS, not inline style */
.pipeline-icon {
    font-size: 0.85rem;
    opacity: 0.3;
}
.pipeline-step.active .pipeline-icon,
.pipeline-step:hover .pipeline-icon {
    opacity: 1;
}

.pipeline-count {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text-main);
}
.pipeline-label {
    font-size: 0.62rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Grid placement — row 1 */
.pipeline-step--all      { grid-column: 1; grid-row: 1; }
.pipeline-step--draft    { grid-column: 2; grid-row: 1; }
.pipeline-step--sent     { grid-column: 3; grid-row: 1; }
.pipeline-step--unpaid   { grid-column: 4; grid-row: 1; }
.pipeline-step--paid     { grid-column: 5; grid-row: 1; }

/* Grid placement — row 2 terminal exits.
   Same padding/font as row 1 so both rows share identical height.
   The muted background is the sole visual distinction. */
.pipeline-step--void,
.pipeline-step--credited {
    grid-row: 2;
    background: var(--bg-header);
}
.pipeline-step--void     { grid-column: 4; }
.pipeline-step--credited { grid-column: 5; }

/* Quote pipeline — single row, 6 columns (All + 5 statuses) */
.pipeline-grid--quotes {
    grid-template-columns: 0.65fr repeat(5, 1fr);
    grid-template-rows: 1fr;
}
.pipeline-grid--quotes .pipeline-step--all      { grid-column: 1; grid-row: 1; }
.pipeline-grid--quotes .pipeline-step--draft    { grid-column: 2; grid-row: 1; }
.pipeline-grid--quotes .pipeline-step--sent     { grid-column: 3; grid-row: 1; }
.pipeline-grid--quotes .pipeline-step--accepted { grid-column: 4; grid-row: 1; background: unset; }
.pipeline-grid--quotes .pipeline-step--rejected { grid-column: 5; grid-row: 1; background: unset; }
.pipeline-grid--quotes .pipeline-step--expired  { grid-column: 6; grid-row: 1; background: unset; }

/* ── btn-outline-primary → slate (workflow/manage actions) ───
   Overrides Bootstrap default so it doesn't collide with
   btn-danger (delete), since --color-primary is red.        */
.btn-outline-primary {
    --bs-btn-color:              var(--color-action);
    --bs-btn-border-color:       var(--color-action);
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           var(--color-action);
    --bs-btn-hover-border-color: var(--color-action);
    --bs-btn-active-color:       #fff;
    --bs-btn-active-bg:          var(--color-action);
    --bs-btn-active-border-color:var(--color-action);
}

/* ── btn-outline-info → steel blue (export/PDF actions) ───── */
.btn-outline-info {
    --bs-btn-color:              var(--color-info);
    --bs-btn-border-color:       var(--color-info);
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           var(--color-info);
    --bs-btn-hover-border-color: var(--color-info);
    --bs-btn-active-color:       #fff;
    --bs-btn-active-bg:          var(--color-info);
    --bs-btn-active-border-color:var(--color-info);
}

/* ── Period filter tabs ────────────────────────────────────── */

.period-tabs {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.25rem;
}
.period-tab {
    padding: 0.45rem 1rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: var(--transition-smooth);
}
.period-tab:hover {
    color: var(--text-main);
    text-decoration: none;
}
.period-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════
   PALETTE THEMES  (data-palette on <html>)
   "red" is the default — already defined in :root.
   Each block only overrides the primary colour tokens
   and the focus shadow so every component picks it up
   automatically via var(--color-primary).
═══════════════════════════════════════════════════ */

/* — Navy Blue — */
[data-palette="blue"] {
    --color-primary:       #1A4FA0;
    --color-primary-hover: #1440A0;
    --color-primary-soft:  #EEF3FB;
    --shadow-focus:        0 0 0 2px rgba(26, 79, 160, 0.25);
}
[data-theme="dark"][data-palette="blue"] {
    --color-primary:       #4A80D0;
    --color-primary-hover: #3A70C0;
    --color-primary-soft:  rgba(74, 128, 208, 0.15);
    --shadow-focus:        0 0 0 2px rgba(74, 128, 208, 0.35);
}

/* — Forest Green — */
[data-palette="green"] {
    --color-primary:       #2D7A3A;
    --color-primary-hover: #226030;
    --color-primary-soft:  #EBF5ED;
    --shadow-focus:        0 0 0 2px rgba(45, 122, 58, 0.25);
}
[data-theme="dark"][data-palette="green"] {
    --color-primary:       #4AAD5A;
    --color-primary-hover: #3A9048;
    --color-primary-soft:  rgba(74, 173, 90, 0.15);
    --shadow-focus:        0 0 0 2px rgba(74, 173, 90, 0.35);
}

/* — Purple — */
[data-palette="purple"] {
    --color-primary:       #6B3FA0;
    --color-primary-hover: #563090;
    --color-primary-soft:  #F2ECFB;
    --shadow-focus:        0 0 0 2px rgba(107, 63, 160, 0.25);
}
[data-theme="dark"][data-palette="purple"] {
    --color-primary:       #9B6FD0;
    --color-primary-hover: #8A5EC0;
    --color-primary-soft:  rgba(155, 111, 208, 0.15);
    --shadow-focus:        0 0 0 2px rgba(155, 111, 208, 0.35);
}

/* — Teal — */
[data-palette="teal"] {
    --color-primary:       #1A7A6E;
    --color-primary-hover: #136058;
    --color-primary-soft:  #E6F5F3;
    --shadow-focus:        0 0 0 2px rgba(26, 122, 110, 0.25);
}
[data-theme="dark"][data-palette="teal"] {
    --color-primary:       #3AADA0;
    --color-primary-hover: #2A9088;
    --color-primary-soft:  rgba(58, 173, 160, 0.15);
    --shadow-focus:        0 0 0 2px rgba(58, 173, 160, 0.35);
}

/* — Slate — */
[data-palette="slate"] {
    --color-primary:       #3A4A5A;
    --color-primary-hover: #2A3A4A;
    --color-primary-soft:  #EEF0F3;
    --shadow-focus:        0 0 0 2px rgba(58, 74, 90, 0.25);
}
[data-theme="dark"][data-palette="slate"] {
    --color-primary:       #7A90A8;
    --color-primary-hover: #6A80A0;
    --color-primary-soft:  rgba(122, 144, 168, 0.15);
    --shadow-focus:        0 0 0 2px rgba(122, 144, 168, 0.35);
}


/* ═══════════════════════════════════════════════════
   THEME COLOUR SWATCHES  (business profile page)
═══════════════════════════════════════════════════ */

.theme-swatch {
    width: 36px;
    height: 36px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition-smooth);
    position: relative;
    outline: none;
}
.theme-swatch:hover {
    transform: scale(1.12);
}
.theme-swatch.active {
    border-color: var(--text-main);
    box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 5px var(--text-main);
}
.theme-swatch--red    { background-color: #CC2A0D; }
.theme-swatch--blue   { background-color: #1A4FA0; }
.theme-swatch--green  { background-color: #2D7A3A; }
.theme-swatch--purple { background-color: #6B3FA0; }
.theme-swatch--teal   { background-color: #1A7A6E; }
.theme-swatch--slate  { background-color: #3A4A5A; }

/* Active border for selectable option cards (e.g. export format picker).
   Uses the CSS variable so it follows the workspace palette automatically. */
.option-card--active {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 1px var(--color-primary);
}