/* ============================================================
   Tropical Paradise brand layer
   Loaded last. Maps the Tropical Paradise palette (rebranding deck,
   p.10) onto the token names of modern.css / premium-ui.css and
   Bootstrap 5.3, then restyles the components that carry their own
   colours. Same tokens and type as the Customer Hub cockpit.
   ============================================================ */

/* ---- Type: Fraunces (display) + Figtree (text), self-hosted ---- */
@font-face { font-family: "Fraunces"; src: url(/static/fonts/fraunces-normal.woff2) format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url(/static/fonts/fraunces-italic.woff2) format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree";  src: url(/static/fonts/figtree-normal.woff2)  format("woff2"); font-weight: 300 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree";  src: url(/static/fonts/figtree-italic.woff2)  format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }

:root {
    /* The deck's six colours, one job each */
    --green: #085235;        /* Tropical Green: the brand, primary actions */
    --green-deep: #063f29;
    --green-soft: #126a45;
    --green-wash: #e6f0ea;
    --teal: #1697a4;         /* Ocean Teal: work in motion, approved, success */
    --teal-ink: #0f6d78;
    --teal-wash: #def2f2;
    --blue: #26688f;         /* Lagoon Blue: links, information */
    --blue-ink: #1f5677;
    --blue-wash: #e2ecf3;
    --gold: #ca9123;         /* Sunset Gold: pending, due soon, wins */
    --gold-ink: #7a5410;
    --gold-wash: #f8ead0;
    --orange: #d36f1b;       /* Adventure Orange: overdue, rejected, lost */
    --orange-deep: #b3580e;
    --orange-ink: #9a4c0d;
    --orange-wash: #fbe6d6;
    --sand: #f5eed8;         /* Sand: quiet surfaces, bookkeeping states */
    --sand-ink: #6d5a35;

    --ink: #0f2a22;
    --ink-2: #27443b;
    --muted: #5a6d66;
    --ground: #faf9f4;
    --surface: #ffffff;
    --line: #dfe3da;
    --line-soft: #ecefe7;

    --display: "Fraunces", Georgia, "Times New Roman", serif;
    --text: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* ---- Remap modern.css tokens ---- */
    --tropical-blue: var(--teal);
    --tropical-teal: var(--teal);
    --tropical-green: var(--green);
    --ocean-dark: var(--green);
    --sand-light: var(--sand);
    --coral: #f0a26b;

    --primary: var(--green);
    --secondary: var(--teal);
    --success: var(--teal);
    --warning: var(--gold);
    --danger: var(--orange);
    --info: var(--blue);

    --gray-50: var(--ground);
    --gray-100: #f3f4ef;
    --gray-200: var(--line);
    --gray-300: #c9d1c4;
    --gray-400: #9aa8a1;
    --gray-500: var(--muted);
    --gray-600: #46584f;
    --gray-700: #33473e;
    --gray-800: var(--ink-2);
    --gray-900: var(--ink);

    --shadow-sm: 0 1px 2px rgba(15, 42, 34, 0.05);
    --shadow: 0 1px 2px rgba(15, 42, 34, 0.06);
    --shadow-md: 0 2px 6px rgba(15, 42, 34, 0.08);
    --shadow-lg: 0 8px 24px rgba(15, 42, 34, 0.12);
    --shadow-focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--teal-ink);
    --shadow-premium-sm: var(--shadow);
    --shadow-premium: var(--shadow-md);
    --shadow-premium-lg: var(--shadow-lg);
    --shadow-premium-xl: var(--shadow-lg);
    --shadow-glow-blue: none;
    --shadow-glow-teal: none;
    --shadow-glow-success: none;
    --shadow-glow-danger: none;

    --glass-bg: var(--surface);
    --glass-bg-dark: var(--surface);
    --glass-border: var(--line);
    --glass-blur: 0px;

    /* Flat colour where the old theme used gradients */
    --gradient-premium-blue: var(--green);
    --gradient-premium-teal: var(--teal);
    --gradient-premium-purple: var(--blue);
    --gradient-premium-success: var(--teal);
    --gradient-premium-warning: var(--gold);
    --gradient-premium-danger: var(--orange);

    --border-subtle: 1px solid var(--line-soft);
    --border-light: 1px solid var(--line);

    --radius-sm: 6px;
    --radius: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 16px;

    --transition-bounce: all 0.2s ease;
    --transition-spring: all 0.2s ease;

    /* premium-ui.css section colours */
    --section-hr: var(--blue);
    --section-hr-light: #4a86ab;
    --section-hr-dark: var(--blue-ink);
    --section-operations: var(--teal);
    --section-operations-light: #3fb0bb;
    --section-operations-dark: var(--teal-ink);
    --section-assets: var(--green);
    --section-assets-light: var(--green-soft);
    --section-assets-dark: var(--green-deep);
    --section-stock: var(--gold);
    --section-stock-light: #dba64a;
    --section-stock-dark: var(--gold-ink);
    --gradient-hr: var(--blue);
    --gradient-operations: var(--teal);
    --gradient-assets: var(--green);
    --gradient-stock: var(--gold);
    --premium-card-bg: var(--surface);
    --premium-card-hover-bg: var(--surface);

    /* ---- Bootstrap 5.3 ---- */
    --bs-body-font-family: var(--text);
    --bs-body-bg: var(--ground);
    --bs-body-color: var(--ink);
    --bs-border-color: var(--line);
    --bs-link-color: var(--blue);
    --bs-link-color-rgb: 38, 104, 143;
    --bs-link-hover-color: var(--blue-ink);
    --bs-link-hover-color-rgb: 31, 86, 119;
    --bs-primary: var(--green);
    --bs-primary-rgb: 8, 82, 53;
    --bs-secondary: var(--muted);
    --bs-secondary-rgb: 90, 109, 102;
    --bs-success: var(--teal);
    --bs-success-rgb: 22, 151, 164;
    --bs-info: var(--blue);
    --bs-info-rgb: 38, 104, 143;
    --bs-warning: var(--gold);
    --bs-warning-rgb: 202, 145, 35;
    --bs-danger: var(--orange);
    --bs-danger-rgb: 211, 111, 27;
    --bs-primary-text-emphasis: var(--green-deep);
    --bs-success-text-emphasis: var(--teal-ink);
    --bs-info-text-emphasis: var(--blue-ink);
    --bs-warning-text-emphasis: var(--gold-ink);
    --bs-danger-text-emphasis: var(--orange-ink);
    --bs-primary-bg-subtle: var(--green-wash);
    --bs-success-bg-subtle: var(--teal-wash);
    --bs-info-bg-subtle: var(--blue-wash);
    --bs-warning-bg-subtle: var(--gold-wash);
    --bs-danger-bg-subtle: var(--orange-wash);
    --bs-primary-border-subtle: #b9d3c4;
    --bs-success-border-subtle: #bfe0e2;
    --bs-info-border-subtle: #bfd3e2;
    --bs-warning-border-subtle: #ead4a3;
    --bs-danger-border-subtle: #f1cdb3;
    --bs-focus-ring-color: rgba(22, 151, 164, 0.3);
}

/* ============================================================
   Type
   ============================================================ */
body,
.auth-page {
    font-family: var(--text);
    color: var(--ink);
    font-size: 0.9375rem;
    line-height: 1.5;
}

h1, h2, h3,
.topbar-title,
.page-header h2,
.section-title h2,
.card-title,
.auth-header h1,
.error-code,
.error-title {
    font-family: var(--display);
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.12;
    color: var(--ink);
}

.topbar-title { font-size: 1.5rem; }
.page-header h2, .section-title h2 { font-size: 1.375rem; }
.card-title { font-size: 1.125rem; }

/* Sentence case everywhere: the deck's uppercase lives in the logo only.
   The older sheets set uppercase on some sixty label, badge and header
   classes, several behind page-id selectors, hence the blanket rule. */
:is(.main-content, .modal) :is(th, label, .badge, .premium-badge, [class*="-label"], [class*="-badge"], [class*="-header"],
                  [class*="section-title"], [class*="-head"], .activity-type, .asset-card-code, .doc-format-tag,
                  .document-card-type, .date-day, .expense-status, .task-severity-badge, .finance-edit-grid-head,
                  .quick-actions-menu-header),
.sidebar .nav-section-title,
.modern-table th {
    text-transform: none !important;
    letter-spacing: 0 !important;
}
/* Values rendered from enum codes (boat, eco_tax) keep their capital */
:is(.main-content, .modal) :is(.premium-type-label, .asset-type-label, .expense-category-tile .category-label) { text-transform: capitalize !important; }

/* ============================================================
   Shell
   ============================================================ */
body { background: var(--ground); }

.main-content { background: var(--ground); }

.topbar {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
}

.content-wrapper { padding-top: 1.75rem; }

.card,
.premium-card,
.premium-table-card,
.task-queue-card,
.dashboard-card {
    background: var(--surface);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow);
}
.card:hover,
.premium-card:hover,
.premium-table-card:hover { box-shadow: var(--shadow); transform: none; }
.card-header { border-bottom: 1px solid var(--line-soft); background: transparent; }

/* ============================================================
   Sidebar: the transparent logo on Tropical Green, as the deck
   shows it over dark surfaces. Everything else quiet.
   ============================================================ */
.sidebar {
    background: var(--green);
    color: #cfe3d8;
    border-right: none;
    box-shadow: none;
}
.sidebar::before { display: none; }

.sidebar-header {
    padding: 1.5rem 1.25rem 1.125rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 400;
    letter-spacing: 0;
}
.sidebar-brand img#companyLogo {
    width: 180px !important;
    height: auto !important;
    max-height: 120px;
    margin: 0 !important;
    object-fit: contain;
    object-position: left center;
    filter: none;
}

.sidebar-user {
    margin: 0.75rem 0.75rem 0;
    padding: 0.75rem 0.875rem;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: var(--radius-md);
}
.sidebar-user:hover { background: rgba(255, 255, 255, 0.09); border: none; }
.sidebar-avatar {
    background: var(--teal-wash);
    color: var(--teal-ink);
    box-shadow: none;
    font-family: var(--display);
    font-variation-settings: "SOFT" 100;
    font-weight: 600;
    font-size: 1rem;
}
.sidebar-user-name { color: #eef6f1; font-weight: 600; }
.sidebar-user-role { color: #9fc4b2; }

.nav-section-title {
    padding: 1.25rem 1.5rem 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #9fc4b2;
}
.nav-section-header {
    color: #d8e9df;
}
.nav-section-header:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-section-header .nav-section-title { padding: 0; color: inherit; font-size: 0.875rem; font-weight: 500; }

.nav-item,
.nav-submenu-header {
    color: #d8e9df;
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
}
.nav-item::before { display: none; }
.nav-item:hover,
.nav-submenu-header:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.nav-item:active { transform: none; }
.nav-item.active {
    background: var(--green-soft);
    color: #fff;
    font-weight: 600;
}
.nav-item.active::before { display: none; }
.nav-item i { opacity: 0.85; }
.nav-badge { background: var(--gold); color: var(--ink); font-weight: 600; }

.nav-item[onclick*="logout"] { color: #f3c9a5; opacity: 1; }
.nav-item[onclick*="logout"]:hover { background: rgba(211, 111, 27, 0.18); color: #fff; }

.sidebar-footer { background: var(--green); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.sidebar-collapse-toggle,
.sidebar-footer button {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #d8e9df;
}
.sidebar-collapse-toggle:hover,
.sidebar-footer button:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ============================================================
   Buttons
   ============================================================ */
.btn { font-weight: 600; border-radius: var(--radius-sm); }
.btn:hover, .btn:active { transform: none; }

.btn-primary {
    --bs-btn-bg: var(--green);
    --bs-btn-border-color: var(--green);
    --bs-btn-hover-bg: var(--green-deep);
    --bs-btn-hover-border-color: var(--green-deep);
    --bs-btn-active-bg: var(--green-deep);
    --bs-btn-active-border-color: var(--green-deep);
    --bs-btn-disabled-bg: #5f8a75;
    --bs-btn-disabled-border-color: #5f8a75;
    background: var(--green);
    box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--green-deep); box-shadow: none; }

.btn-success {
    --bs-btn-bg: var(--teal-ink);
    --bs-btn-border-color: var(--teal-ink);
    --bs-btn-hover-bg: #0b5a63;
    --bs-btn-hover-border-color: #0b5a63;
    --bs-btn-active-bg: #0b5a63;
    background: var(--teal-ink);
    box-shadow: none;
}
.btn-success:hover { background: #0b5a63; }

.btn-danger {
    --bs-btn-bg: var(--orange-deep);
    --bs-btn-border-color: var(--orange-deep);
    --bs-btn-hover-bg: var(--orange-ink);
    --bs-btn-hover-border-color: var(--orange-ink);
    --bs-btn-active-bg: var(--orange-ink);
    background: var(--orange-deep);
    box-shadow: none;
}
.btn-danger:hover { background: var(--orange-ink); }

.btn-warning {
    --bs-btn-bg: var(--gold);
    --bs-btn-border-color: var(--gold);
    --bs-btn-color: var(--ink);
    --bs-btn-hover-bg: var(--gold-ink);
    --bs-btn-hover-border-color: var(--gold-ink);
    --bs-btn-hover-color: #fff;
    background: var(--gold);
    color: var(--ink);
    box-shadow: none;
}

.btn-info {
    --bs-btn-bg: var(--blue);
    --bs-btn-border-color: var(--blue);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--blue-ink);
    --bs-btn-hover-border-color: var(--blue-ink);
    --bs-btn-hover-color: #fff;
    background: var(--blue);
    color: #fff;
}

.btn-secondary,
.btn-light {
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: #c9d1c4;
    --bs-btn-color: var(--ink);
    --bs-btn-hover-bg: var(--line-soft);
    --bs-btn-hover-border-color: #c9d1c4;
    --bs-btn-hover-color: var(--ink);
    background: var(--surface);
    border: 1px solid #c9d1c4;
    color: var(--ink);
    box-shadow: none;
}

.btn-outline-primary {
    --bs-btn-color: var(--green);
    --bs-btn-border-color: var(--green);
    --bs-btn-hover-bg: var(--green);
    --bs-btn-hover-border-color: var(--green);
    --bs-btn-active-bg: var(--green);
    --bs-btn-active-border-color: var(--green);
    border: 1px solid var(--green);
    color: var(--green);
}
.btn-outline-success { --bs-btn-color: var(--teal-ink); --bs-btn-border-color: var(--teal-ink); --bs-btn-hover-bg: var(--teal-ink); --bs-btn-hover-border-color: var(--teal-ink); --bs-btn-active-bg: var(--teal-ink); }
.btn-outline-danger  { --bs-btn-color: var(--orange-ink); --bs-btn-border-color: var(--orange-deep); --bs-btn-hover-bg: var(--orange-deep); --bs-btn-hover-border-color: var(--orange-deep); --bs-btn-active-bg: var(--orange-deep); }
.btn-outline-warning { --bs-btn-color: var(--gold-ink); --bs-btn-border-color: var(--gold); --bs-btn-hover-bg: var(--gold); --bs-btn-hover-border-color: var(--gold); --bs-btn-hover-color: var(--ink); }
.btn-outline-info    { --bs-btn-color: var(--blue); --bs-btn-border-color: var(--blue); --bs-btn-hover-bg: var(--blue); --bs-btn-hover-border-color: var(--blue); --bs-btn-hover-color: #fff; }
.btn-outline-secondary { --bs-btn-color: var(--ink-2); --bs-btn-border-color: #c9d1c4; --bs-btn-hover-bg: var(--line-soft); --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: #c9d1c4; --bs-btn-active-bg: var(--line); --bs-btn-active-color: var(--ink); }


/* ============================================================
   Stat cards: a flat surface, a wash header that names the state,
   and the figure in Fraunces. No glass, no gradient, no lift.
   ============================================================ */
.stat-card {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow);
}
.stat-card:hover,
.stat-card.stat-card-clickable:hover { transform: none; box-shadow: var(--shadow-md); }
.stat-card::before,
.stat-card .stat-header::before { display: none; }

.stat-card .stat-header {
    background: var(--green-wash);
    background-image: none;
    color: var(--green-deep);
    border-bottom: 1px solid var(--line-soft);
}
.stat-card .stat-header .stat-title,
.stat-card .stat-header h3,
.stat-card .stat-header span { color: inherit; font-weight: 600; }
.stat-card .stat-header .stat-icon,
.stat-card .stat-header i,
.stat-card .stat-icon {
    background: rgba(255, 255, 255, 0.7);
    color: inherit;
    box-shadow: none;
    border: none;
}
.stat-card.warning .stat-header, .stat-card.stat-warning .stat-header { background: var(--gold-wash); background-image: none; color: var(--gold-ink); }
.stat-card.danger  .stat-header, .stat-card.stat-danger  .stat-header { background: var(--orange-wash); background-image: none; color: var(--orange-ink); }
.stat-card.success .stat-header, .stat-card.stat-success .stat-header { background: var(--teal-wash); background-image: none; color: var(--teal-ink); }
.stat-card.info    .stat-header, .stat-card.stat-info    .stat-header { background: var(--blue-wash); background-image: none; color: var(--blue-ink); }
.stat-card.warning:hover, .stat-card.danger:hover, .stat-card.success:hover, .stat-card.info:hover,
.stat-card.stat-warning:hover, .stat-card.stat-danger:hover, .stat-card.stat-success:hover, .stat-card.stat-info:hover { box-shadow: var(--shadow-md); }

/* Figures stay in the text face: bold sans, tabular digits, the state colour as ink */
.stat-card .stat-value,
.premium-summary-value,
.stat-content h3 { font-family: var(--text); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.02em; }
.stat-card .stat-value,
.premium-summary-value,
.stat-content h3 { font-size: 1.75rem; }
/* Same ink per state on both card families */
.premium-summary-value.hr        { color: var(--blue-ink); }
.premium-summary-value.operations,
.premium-summary-value.success   { color: var(--teal-ink); }
.premium-summary-value.assets    { color: var(--green); }
.premium-summary-value.stock,
.premium-summary-value.warning   { color: var(--gold-ink); }
.premium-summary-value.danger    { color: var(--orange-ink); }
/* A card without a footer line still closes with the same breathing room as one with it */
.stat-card > .stat-value:last-child { padding-bottom: 1.25rem; }
.stat-card:hover .stat-value { color: var(--ink); }
.stat-card.warning .stat-value, .stat-card.stat-warning .stat-value { color: var(--gold-ink); }
.stat-card.danger  .stat-value, .stat-card.stat-danger  .stat-value { color: var(--orange-ink); }
.stat-card.success .stat-value, .stat-card.stat-success .stat-value { color: var(--teal-ink); }
.stat-card.info    .stat-value, .stat-card.stat-info    .stat-value { color: var(--blue-ink); }

.premium-summary-grid > * { animation: none; }
.premium-summary-card {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow);
}
.premium-summary-card:hover { transform: none; box-shadow: var(--shadow-md); }
.premium-summary-card::before { opacity: 1; transform: none; transition: none; }

/* ============================================================
   Badges: wash + ink, sentence case, pill
   ============================================================ */
.badge, .premium-badge { border-radius: var(--radius-full); font-weight: 600; font-size: 0.75rem; }
.badge.badge-success, span.badge-success, .badge-success,
.premium-badge-active, .premium-badge-success, .premium-badge-completed, .premium-badge-available {
    background: var(--teal-wash) !important; color: var(--teal-ink) !important; border-color: #bfe0e2;
}
.badge.badge-warning, span.badge-warning, .badge-warning,
.premium-badge-in-progress, .premium-badge-warning, .premium-badge-maintenance {
    background: var(--gold-wash) !important; color: var(--gold-ink) !important; border-color: #ead4a3;
}
.badge.badge-danger, span.badge-danger, .badge-danger,
.premium-badge-cancelled, .premium-badge-danger, .premium-badge-error {
    background: var(--orange-wash) !important; color: var(--orange-ink) !important; border-color: #f1cdb3;
}
.badge.badge-info, span.badge-info, .badge-info,
.premium-badge-scheduled, .premium-badge-info, .premium-badge-pending, .premium-badge-in-use {
    background: var(--blue-wash) !important; color: var(--blue-ink) !important; border-color: #bfd3e2;
}
.badge-primary, .badge.bg-primary, .premium-badge-hr {
    background: var(--green-wash) !important; color: var(--green-deep) !important; border-color: #b9d3c4;
}
.badge-secondary, .badge.bg-secondary, .premium-badge-inactive, .premium-badge-retired {
    background: var(--sand) !important; color: var(--sand-ink) !important; border-color: #e6dcc0;
}
.badge-dark, .badge.bg-dark { background: var(--ink) !important; color: #fff !important; }

/* Bootstrap's own solid badges */
.badge.bg-success, .badge.text-bg-success { background: var(--teal-wash) !important; color: var(--teal-ink) !important; }
.badge.bg-warning, .badge.text-bg-warning { background: var(--gold-wash) !important; color: var(--gold-ink) !important; }
.badge.bg-danger,  .badge.text-bg-danger  { background: var(--orange-wash) !important; color: var(--orange-ink) !important; }
.badge.bg-info,    .badge.text-bg-info    { background: var(--blue-wash) !important; color: var(--blue-ink) !important; }

/* ============================================================
   Forms, tables, links
   ============================================================ */
a { color: var(--blue); }
a:hover { color: var(--blue-ink); }

.form-control, .form-select {
    background: var(--surface);
    border: 1px solid #c9d1c4;
    color: var(--ink);
    font-family: var(--text);
}
.form-control::placeholder { color: #68796f; }
.form-label, label { color: var(--ink-2); font-weight: 500; }

.table thead th,
.modern-table thead th,
.premium-table thead th,
.premium-table th {
    background: transparent;
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
}
.table td, .premium-table td { color: var(--ink); border-color: var(--line-soft); }
.table tbody tr:hover td,
.premium-table tbody tr:hover td { background: #f6f7f2; }
.table-total-row td, tfoot td { font-weight: 600; }

.text-success { color: var(--teal-ink) !important; }
.text-danger  { color: var(--orange-ink) !important; }
.text-warning { color: var(--gold-ink) !important; }
.text-primary { color: var(--green) !important; }
.text-info    { color: var(--blue-ink) !important; }

/* Alerts */
.alert { border-width: 1px; border-radius: var(--radius); align-items: center; }
.alert-content { align-items: center; }
.alert-content .alert-icon { line-height: 1; }
.alert-danger  { --bs-alert-bg: var(--orange-wash); --bs-alert-border-color: #f1cdb3; --bs-alert-color: var(--orange-ink); color: var(--orange-ink); border-left: 3px solid var(--orange); }
.alert-warning { --bs-alert-bg: var(--gold-wash);   --bs-alert-border-color: #ead4a3; --bs-alert-color: var(--gold-ink);   color: var(--gold-ink);   border-left: 3px solid var(--gold); }
.alert-success { --bs-alert-bg: var(--teal-wash);   --bs-alert-border-color: #bfe0e2; --bs-alert-color: var(--teal-ink);   color: var(--teal-ink);   border-left: 3px solid var(--teal); }
.alert-info    { --bs-alert-bg: var(--blue-wash);   --bs-alert-border-color: #bfd3e2; --bs-alert-color: var(--blue-ink);   color: var(--blue-ink);   border-left: 3px solid var(--blue); }

/* Flat brand backgrounds where modern.css still forces a gradient */
.bg-brand-primary, .bg-brand-info { background: var(--green) !important; }
.bg-brand-success { background: var(--teal-ink) !important; }

/* Filter chips / segmented toggles */
.btn-group .btn.active,
.btn-check:checked + .btn { background: var(--green); border-color: var(--green); color: #fff; }

/* ============================================================
   GeMa assistant button
   ============================================================ */
.gema-fab { background: var(--green); box-shadow: var(--shadow-lg); }
.gema-fab:hover { background: var(--green-deep); transform: none; }
.gema-header { background: var(--green); }

/* ============================================================
   Mobile
   ============================================================ */
.mobile-bottom-nav { background: var(--surface); border-top: 1px solid var(--line); }
.mobile-nav-item { color: var(--muted); }
.mobile-nav-item.active { color: var(--green); }
.mobile-nav-item.mobile-nav-action::before { background: var(--green); box-shadow: var(--shadow-md); }

/* ============================================================
   Sign-in, reset and error pages: the deck's brand-application
   surface. Logo on Tropical Green, a plain white card underneath.
   ============================================================ */
.auth-page { background: var(--green); }
.auth-page::before { display: none; }

.auth-container { max-width: 420px; }
.auth-brand {
    display: block;
    width: 240px;
    max-width: 70vw;
    height: auto;
    margin: 0 auto 1.75rem;
}
.auth-card {
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.45);
    animation: none;
}
.auth-header,
.auth-header.auth-header-warning {
    background: var(--surface);
    color: var(--ink);
    padding: 2rem 2rem 0;
    text-align: left;
}
.auth-header::after { display: none; }
.auth-header h1 {
    font-size: 1.75rem;
    justify-content: flex-start;
    margin-bottom: 0.25rem;
}
.auth-header p { color: var(--muted); margin: 0; }
.auth-body { padding: 1.5rem 2rem 2rem; }
.auth-input-group label { color: var(--ink-2); }
.auth-link { color: var(--blue); }
.auth-btn, .auth-body .btn-primary { background: var(--green); box-shadow: none; }
.auth-btn:hover, .auth-body .btn-primary:hover { background: var(--green-deep); }
.auth-footer, .auth-version { color: var(--muted); }
.auth-page .text-muted { color: var(--muted) !important; }

/* Error page */
.error-page { background: var(--green); }
.error-footer-logo { color: #9fc4b2; }

/* ============================================================
   Motion: only where it answers an action
   ============================================================ */
.premium-page { animation: none; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    /* A loader that stops moving reads as a hang: keep the spinners, slower */
    .spin, .explanation-loading i.spin { animation: spin 1.5s linear infinite !important; }
    .spinning-logo { animation: logoSpin 2s linear infinite !important; }
    .spinner-border { animation: 1.5s linear infinite spinner-border !important; }
    .spinner-grow { animation: 1.5s linear infinite spinner-grow !important; }
}

/* ============================================================
   Components that set their own colours in modern.css
   ============================================================ */
.topbar-actions .btn-primary {
    background: var(--green);
    box-shadow: none;
}
.topbar-actions .btn-primary:hover { background: var(--green-deep); box-shadow: none; }

.btn-auth {
    background: var(--green);
    box-shadow: none;
}
.btn-auth:hover { background: var(--green-deep); transform: none; box-shadow: none; }

.stat-card .stat-header .stat-label {
    color: inherit;
    text-shadow: none;
    letter-spacing: 0;
    font-size: 0.875rem;
}
.stat-card .stat-value-suffix,
.stat-card .stat-footer {
    font-family: var(--text);
    font-variation-settings: normal;
}

.main-content :is(.modern-table, .finance-table, .tour-detail-table, .premium-table, .table) thead th {
    font-size: 0.8125rem;
    color: var(--muted);
    background: transparent;
}
.premium-filter-panel .form-label { font-size: 0.8125rem; color: var(--ink-2); }

/* Roles and statuses as wash + ink, like every other badge */
.badge-role-admin           { background: var(--green-wash); color: var(--green-deep); box-shadow: none; }
.badge-role-manager         { background: var(--blue-wash);  color: var(--blue-ink);   box-shadow: none; }
.badge-role-fund-manager    { background: var(--blue-wash);  color: var(--blue-ink);   box-shadow: none; }
.badge-role-stock-manager   { background: var(--teal-wash);  color: var(--teal-ink);   box-shadow: none; }
.badge-role-tour-manager    { background: var(--gold-wash);  color: var(--gold-ink);   box-shadow: none; }
.badge-role-ops-coordinator { background: var(--teal-wash);  color: var(--teal-ink);   box-shadow: none; }
.badge-role-employee        { background: var(--sand);       color: var(--sand-ink);   box-shadow: none; }

.badge-status-active, .badge-status-approved { background: var(--teal-wash); color: var(--teal-ink); border-color: #bfe0e2; }
.badge-status-pending  { background: var(--gold-wash);   color: var(--gold-ink);   border-color: #ead4a3; }
.badge-status-rejected { background: var(--orange-wash); color: var(--orange-ink); border-color: #f1cdb3; }
.badge-status-inactive { background: var(--sand);        color: var(--sand-ink);   border-color: #e6dcc0; }

/* Inline code (usernames, references) */
:root { --bs-code-color: var(--blue-ink); }
code { color: var(--blue-ink); font-size: 0.9em; }

/* ============================================================
   Modals, collapsed sidebar, error and auth pages
   ============================================================ */
/* Modal headers: a white surface with the title in the display face.
   The coloured variants keep their meaning through a 3px top edge. */
.modal .modal-content { border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.modal .modal-header,
.modal .modal-header-primary, .modal .modal-header-success, .modal .modal-header-warning,
.modal .modal-header-danger, .modal .modal-header-info, .modal .modal-header-secondary,
.modal .modal-header-icon-primary, .modal .modal-header-icon-success, .modal .modal-header-icon-warning,
.modal .modal-header-icon-danger, .modal .modal-header-icon-info,
.modal .modal-dialog.modal-premium-shell .modal-header[class*="modal-header-premium-"] {
    background: var(--surface);
    color: var(--ink);
    border-bottom: 1px solid var(--line-soft);
    border-top: 3px solid var(--green);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.modal .modal-header-success, .modal .modal-header-icon-success { border-top-color: var(--teal); }
.modal .modal-header-warning, .modal .modal-header-icon-warning { border-top-color: var(--gold); }
.modal .modal-header-danger,  .modal .modal-header-icon-danger  { border-top-color: var(--orange); }
.modal .modal-header-info,    .modal .modal-header-icon-info    { border-top-color: var(--blue); }
.modal .modal-dialog.modal-premium-shell .modal-header.modal-header-premium-success { border-top-color: var(--teal); }
.modal .modal-dialog.modal-premium-shell .modal-header.modal-header-premium-warning { border-top-color: var(--gold); }
.modal .modal-dialog.modal-premium-shell .modal-header.modal-header-premium-planning,
.modal .modal-dialog.modal-premium-shell .modal-header.modal-header-premium-mauve { border-top-color: var(--blue); }
.modal .modal-header .modal-title,
.modal [class*="modal-header-"] .modal-title,
.modal [class*="modal-header-"] .modal-title i,
.modal .modal-dialog.modal-premium-shell .modal-header .modal-title,
.modal .modal-dialog.modal-premium-shell .modal-header .modal-title i,
.modal .modal-dialog.modal-premium-shell .modal-header .modal-title .bi {
    color: var(--ink);
    font-family: var(--display);
    font-variation-settings: "SOFT" 100, "WONK" 1;
    font-weight: 500;
    font-size: 1.25rem;
    background: none;
}
.modal .modal-header .btn-close,
.modal [class*="modal-header-"] .btn-close,
.modal .modal-dialog.modal-premium-shell .modal-header .btn-close { filter: none; opacity: 0.6; }
.modal .modal-header .btn-close:hover,
.modal [class*="modal-header-"] .btn-close:hover { opacity: 1; }
.modal-footer { background: var(--ground); border-top: 1px solid var(--line-soft); }
.finance-edit-modal .modal-content { background: var(--surface); border-color: var(--line); }
.finance-edit-modal .modal-content::before { display: none; }
.finance-edit-modal .modal-header.modal-header-primary { background: var(--surface); }
.finance-edit-modal .modal-header .modal-title,
.finance-edit-modal .finance-modal-header-subtitle { color: var(--ink); }
.finance-edit-modal .finance-modal-header-subtitle { color: var(--muted); }
.finance-edit-modal .finance-modal-header-icon { background: var(--green-wash); color: var(--green); }

/* Quick action menu */
.quick-actions-menu-header { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.dropdown-menu { border: 1px solid var(--line); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--green-wash); color: var(--ink); }

/* Collapsed sidebar: the crest replaces the full logo */
.sidebar-brand-mark { display: none; width: 40px; height: 40px; }
body.sidebar-collapsed .sidebar-brand img#companyLogo { display: none; }
body.sidebar-collapsed .sidebar-brand-mark { display: block; }
body.sidebar-collapsed .sidebar-brand { align-items: center; }
body.sidebar-collapsed .sidebar-brand .visually-hidden { display: block; }
body.sidebar-collapsed .sidebar-header { padding: 1rem 0.75rem; }
body.sidebar-collapsed .sidebar-user { background: transparent; padding: 0.5rem; }

/* Auth pages: room between the icon and the title */
.auth-header h1 { gap: 0.5rem; }
.auth-header h1 i { color: var(--green); font-size: 1.25rem; }

/* Error page (its own inline stylesheet loads after us, so be specific) */
body.error-page { background: var(--green); font-family: var(--text); }
.error-page .error-card { border-radius: var(--radius-lg); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.45); }
.error-page .error-icon { background: var(--gold-wash); color: var(--gold-ink); }
.error-page .error-icon-404 { background: var(--gold-wash); color: var(--gold-ink); }
.error-page .error-icon-403 { background: var(--orange-wash); color: var(--orange-ink); }
.error-page .error-icon-500 { background: var(--orange-wash); color: var(--orange-ink); }
.error-page .error-icon-default { background: var(--teal-wash); color: var(--teal-ink); }
.error-page .error-code { color: var(--green); font-weight: 500; }
.error-page .error-title { font-weight: 500; }
.error-page .error-message { color: var(--muted); }
.error-page .btn-error-primary { background: var(--green); color: #fff; box-shadow: none; border-radius: var(--radius-sm); }
.error-page .btn-error-primary:hover { background: var(--green-deep); transform: none; box-shadow: none; }
.error-page .btn-error-secondary { background: var(--surface); color: var(--ink); border: 1px solid #c9d1c4; border-radius: var(--radius-sm); }
.error-page .btn-error-secondary:hover { background: var(--line-soft); transform: none; }
/* ============================================================
   Task queue and section accents
   ============================================================ */
.task-queue-card {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.task-queue-card .card-header {
    background: var(--green);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.task-queue-card .card-header::before { display: none; }
.task-queue-card .card-header .card-title { color: #fff; }
.task-queue-card .card-header .card-title > i { color: #cfe3d8; }
.task-queue-critical-badge { background: var(--gold); color: var(--ink); box-shadow: none; }
.task-queue-critical-badge::before { display: none; }
.task-queue-card .card-header .btn { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #fff; }

.task-severity-critical { background: var(--surface); }
.task-severity-critical:hover { background: var(--orange-wash); }
.task-severity-critical::before { background: var(--orange); }
.task-severity-high { background: var(--surface); }
.task-severity-high:hover { background: var(--gold-wash); }
.task-severity-high::before { background: var(--gold); }
.task-severity-normal::before { background: var(--teal); }
.task-severity-badge { border-radius: var(--radius-full); }
.task-severity-critical .task-severity-badge { background: var(--orange-wash); color: var(--orange-ink); border-color: #f1cdb3; }
.task-severity-high .task-severity-badge { background: var(--gold-wash); color: var(--gold-ink); border-color: #ead4a3; }
.task-severity-normal .task-severity-badge { background: var(--teal-wash); color: var(--teal-ink); border-color: #bfe0e2; }
.task-type-icon,
.task-severity-critical .task-type-icon,
.task-type-icon.transfer { background: var(--green-wash); color: var(--green); border: none; box-shadow: none; animation: none; }
.task-queue-footer, .task-queue-summary { background: var(--ground); }

/* Section icons in premium cards, empty states and type chips */
.premium-summary-card.hr .premium-summary-icon         { background: var(--blue-wash); color: var(--blue); }
.premium-summary-card.operations .premium-summary-icon { background: var(--teal-wash); color: var(--teal-ink); }
.premium-summary-card.assets .premium-summary-icon     { background: var(--green-wash); color: var(--green); }
.premium-summary-card.stock .premium-summary-icon      { background: var(--gold-wash); color: var(--gold-ink); }
.premium-summary-card::before { height: 3px; }
.premium-empty-icon::before { display: none; }
.premium-empty-icon.hr         { background: var(--blue-wash); }  .premium-empty-icon.hr i { color: var(--blue); }
.premium-empty-icon.operations { background: var(--teal-wash); }  .premium-empty-icon.operations i { color: var(--teal-ink); }
.premium-empty-icon.assets     { background: var(--green-wash); } .premium-empty-icon.assets i { color: var(--green); }
.premium-empty-icon.stock      { background: var(--gold-wash); }  .premium-empty-icon.stock i { color: var(--gold-ink); }
.premium-empty-action.hr:hover, .premium-empty-action.operations:hover,
.premium-empty-action.assets:hover, .premium-empty-action.stock:hover { box-shadow: none; }
.premium-type-icon.crew { background: var(--blue-wash); color: var(--blue); }
.premium-table.hr tbody tr:hover { background: #f6f7f2; }

/* ============================================================
   Focus: last so that no component rule above can drop the ring
   ============================================================ */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
a:focus-visible,
button:focus-visible {
    outline: none;
    border-color: var(--teal);
    box-shadow: var(--shadow-focus);
}
.sidebar :is(a, button):focus-visible { box-shadow: 0 0 0 2px var(--green), 0 0 0 4px #fff; }