/* ════════════════════════════════════════
   GLOBAL DESIGN TOKENS  — theme.css
   Change ONE value here -> reflects everywhere
════════════════════════════════════════ */

/* ── Brand Colors ─────────────────────── */
:root {
    /* ── Theme 2: Midnight Navy ── */

    /* Primary brand */
    --brand:          #2563eb;
    --brand-dark:     #1d4ed8;
    --brand-soft:     #eff6ff;

    /* Text */
    --ink:            #0f172a;
    --muted:          #475569;

    /* Surface / Background */
    --bg-gradient:    linear-gradient(135deg, #f0f4ff 0%, #f8faff 54%, #eef2ff 100%);
    --bg-dot-color:   #c7d2fe;
    --surface:        rgba(255, 255, 255, 0.94);
    --surface-soft:   rgba(248, 250, 252, 0.88);
    --line:           #e2e8f0;

    /* Status colors */
    --green:          #16a34a;
    --amber:          #d97706;
    --coral:          #dc2626;
    --blue:           #2563eb;

    /* Typography */
    --font-body:      "Inter", "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading:   "Inter", "Space Grotesk", sans-serif;
    --font-mono:      "JetBrains Mono", monospace;
    --font-size-base: 1rem;
    --font-size-sm:   0.875rem;
    --font-size-lg:   1.125rem;
    --line-height:    1.65;

    /* Layout */
    --site-header-h:  84px;
    --radius:         6px;
    --radius-lg:      12px;

    /* Legacy aliases — used by dashboard.css, profile.css, staff.css */
    --teal:              var(--brand);
    --teal-dark:         var(--brand-dark);
    --teal-soft:         var(--brand-soft);
    --nav-border:        rgba(15, 23, 42, 0.08);
    --card-bg:           var(--surface);
    --card-border:       var(--line);
    --input-bg:          var(--surface-soft);
    --input-border:      var(--line);

    /* Shared / Auth mappings */
    --auth-surface:      var(--surface);
    --auth-ink:          var(--ink);
    --auth-muted:        var(--muted);
    --auth-line:         var(--line);
    --auth-primary:      var(--brand);
    --auth-primary-dark: var(--brand-dark);
    --auth-input:        var(--surface-soft);
    --auth-shadow:       0 10px 30px rgba(15, 23, 42, 0.06);
    --auth-paper:        var(--bg-gradient);
}

/* ── Dark Theme Override ──────────────── */
html[data-theme="dark"] {
    --ink:            #f1f5f9;
    --muted:          #94a3b8;
    --bg-gradient:    linear-gradient(135deg, #070d1a 0%, #0a1124 54%, #0b152d 100%);
    --bg-dot-color:   #1e293b;
    --surface:        rgba(15, 23, 42, 0.94);
    --surface-soft:   rgba(10, 15, 30, 0.94);
    --line:           rgba(148, 163, 184, 0.16);
    --brand-soft:     rgba(37, 99, 235, 0.18);
}

/* Two-tone company name ("Covrent" + "Tax"), see partials/brand_name.html */
.brand-accent { color: var(--brand); }
html[data-theme="dark"] .brand-accent,
.au-logo .brand-accent { color: #60a5fa; } /* lighter blue on dark backgrounds and the login photo */

/* Notifications bell: same icon and colour in the staff and admin headers (partials/bell_icon.html) */
a.notif-bell { color: #475569; }
a.notif-bell:hover { color: #2563eb; }
a.notif-bell.has-unread { color: #dc2626; }
html[data-theme="dark"] a.notif-bell { color: #cbd5e1; }
html[data-theme="dark"] a.notif-bell:hover { color: #60a5fa; }
a.notif-bell .notif-bell__icon { width: 19px; height: 19px; }

/* ── Global Body Styles (applies to ALL pages) ── */
html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: var(--bg-gradient);
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--font-body);
}

/* ── Portal scale ──────────────────────────────
   Pages after login (admin, staff, client portal) render at 90%, like browser zoom at 90%,
   so more fits on a laptop screen. Login and public pages stay at 100%.
   Zoom also shrinks vh units, so full-height layouts use calc(100vh / var(--page-zoom)). */
:root { --page-zoom: 1; }
html:has(> body.admin-page, > body.staff-page, > body.cx-body) {
    --page-zoom: 0.9;
    zoom: var(--page-zoom);
}

/* ── Global Theme Toggle Button ──────────────── */
.theme-toggle {
    align-items: center;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--brand);
    display: flex;
    height: 2.4rem;
    justify-content: center;
    padding: 0;
    position: relative;
    width: 2.4rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.theme-toggle:hover {
    background: var(--brand-soft);
    border-color: var(--brand);
}

.theme-icon {
    height: 1.05rem;
    width: 1.05rem;
}

.theme-icon-sun {
    display: block;
}

.theme-icon-sun circle,
.theme-icon-sun path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.theme-icon-moon {
    display: none;
}

.theme-icon-moon path {
    stroke: currentColor;
    stroke-width: 1.8;
}

html[data-theme=dark] .theme-icon-sun {
    display: none;
}

html[data-theme=dark] .theme-icon-moon {
    display: block;
}

/* ════════════════════════════════════════
   GLOBAL LAYOUT TRANSPARENT RESET
   All layout containers are transparent by default.
   The body gradient shows through everywhere.
   Only specific cards/panels add their own surface bg.
════════════════════════════════════════ */
section,
main,
article,
aside,
header,
footer,
nav {
    background: transparent;
}

/* ── Shared status badge colors ──── */
.status-complete {
    color: var(--green);
    background: rgba(43, 139, 99, 0.12);
}

.status-pending {
    color: var(--blue);
    background: rgba(41, 105, 168, 0.12);
}