/* ═══════════════════════════════════════════════════════════════════════════
   CERTLOGIQ — POLISH LAYER v3.0  (CONSOLIDATED)
   ───────────────────────────────────────────────────────────────────────────
   ONE file that:
     • Unifies the whole app on a SINGLE accent red  (#E53935 → #C62828 dark)
     • Establishes ONE consistent type scale so all text flows and matches
       (raises the floor — no readable text below ~13px)
     • Absorbs the useful pieces of fireassistiq-upgrades.css
       (skeletons, activity feed, stat-loading)  →  you can DELETE upgrades.css
     • Keeps every refinement: cards, sidebar, buttons, inputs, tables, focus

   ▶ DEPLOY  (two steps)
     STEP 1 — app.html, in the inline <style> :root (around line 41), change:
                 --primary: #C62828;      →   --primary: #E53935;
              and add directly beneath it:
                 --primary-dark: #C62828;
              (This makes the source of truth match. This file also asserts it,
               so even if you skip this it still works — but do it for safety.)

     STEP 2 — add this as the VERY LAST stylesheet, just before </head>,
              AFTER the inline <style> block so it wins the cascade:
                 <link rel="stylesheet" href="fireassistiq-polish.css">

     Then: deploy and hard-refresh (Ctrl/Cmd + Shift + R).
     Keep design-system.css and your inline <style>. DELETE upgrades.css.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   1. TOKENS  —  one accent, one type scale, one set of greys
   ═══════════════════════════════════════════════════════════════════════════ */
/* Tokens live in fireassistiq-tokens.css, which must load BEFORE this file.
   The --p-* and --fs-* names this stylesheet uses are aliased there, so every
   rule below still resolves — but the values are now defined in one place for
   both apps. Do not redeclare them here. */


/* ═══════════════════════════════════════════════════════════════════════════
   2. BASE TYPOGRAPHY  —  crisp rendering, consistent body, readable defaults
   ═══════════════════════════════════════════════════════════════════════════ */
body {
    font-family: var(--fa-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
    font-size: var(--fs-body) !important;
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--p-ink-2);
}

h1, h2, h3, h4 { letter-spacing: -0.018em; color: var(--p-ink); }

/* small / helper text used app-wide should never be tiny */
small, .text-small, .help-text, .hint { font-size: var(--fs-caption) !important; color: var(--p-faint) !important; }

/* dashboard numbers line up like a real product */
.stat-card-value, .kpi-value, [id^="kpi"], .summary-value,
.transaction-amount, .vat-amount, .total-row, .total-box {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. CONSISTENT SUBTEXT  —  every secondary/caption surface, one scale
   (this is the "make it flow" pass — pulls 10–15px chaos onto the scale)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Secondary subtext → 14px, unified colour */
.stat-card-label,
.summary-label,
.transaction-date, .transaction-method, .transaction-desc,
.tech-role, .sidebar-user-role,
.header-profile-role,
.feed-sub,
.list-empty p,
.notification-item-body,
.header-dropdown-item-subtitle {
    font-size: var(--fs-secondary) !important;
    color: var(--p-muted) !important;
    line-height: 1.45 !important;
}

/* Captions / counts / timestamps → 13px */
.summary-count,
.form-group small,
.notification-item-time,
.month-job-more,
.sidebar-logo-version {
    font-size: var(--fs-caption) !important;
    color: var(--p-faint) !important;
}

/* Body-level secondary lines that were a touch small → 15px for flow */
.tech-name, .sidebar-user-name,
.feed-title, .transaction-details,
.header-profile-name, .list-header h3 {
    font-size: var(--fs-body) !important;
    color: var(--p-ink) !important;
}

/* UPPERCASE eyebrow / micro labels — small is fine here, just consistent */
.sidebar-nav-title,
.header-brand-tagline,
th, .form-label, label.field-label {
    font-size: var(--fs-eyebrow) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--p-eyebrow) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. PAGE / SECTION TITLES
   ═══════════════════════════════════════════════════════════════════════════ */
.page-title, .content-title, h1.dashboard-title,
.financial-header h2, .tab-content > h1, .tab-content > h2:first-child {
    font-size: var(--fs-page) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: var(--p-ink) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. HEADER
   ═══════════════════════════════════════════════════════════════════════════ */
.app-header {
    background: rgba(255,255,255,0.85) !important;
    backdrop-filter: saturate(180%) blur(8px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(8px) !important;
    border-bottom: 1px solid var(--p-line) !important;
    box-shadow: var(--p-shadow-xs) !important;
}
.header-brand-name { font-size: var(--fs-title-sm) !important; font-weight: 700 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   6. SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */
.admin-sidebar {
    box-shadow: 1px 0 0 rgba(255,255,255,0.04), 4px 0 24px rgba(0,0,0,0.18) !important;
}
.sidebar-nav-title {
    color: rgba(255,255,255,0.40) !important;   /* override the eyebrow grey on dark bg */
    padding: 0 12px !important;
    margin-bottom: 8px !important;
}
.sidebar-nav-section { margin-bottom: 18px !important; }

.sidebar-nav-item {
    padding: 10px 12px !important;
    margin: 1px 6px !important;
    border-radius: var(--p-radius-sm) !important;
    color: rgba(255,255,255,0.62) !important;
    transition: background .15s ease, color .15s ease, transform .15s ease !important;
}
.sidebar-nav-item span { font-size: var(--fs-secondary) !important; font-weight: 500 !important; }
.sidebar-nav-item i    { font-size: 16px !important; color: rgba(255,255,255,0.55) !important; }
.sidebar-nav-item:hover { background: rgba(255,255,255,0.06) !important; color: #fff !important; }
.sidebar-nav-item:hover i { color: rgba(255,255,255,0.9) !important; }
.sidebar-nav-item:active { transform: scale(0.99) !important; }

/* active: tinted fill + inset accent rail (no layout shift) + brand icon */
.sidebar-nav-item.active {
    background: linear-gradient(90deg, var(--p-accent-tint2), transparent 72%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    border-left: none !important;
    box-shadow: inset 3px 0 0 var(--p-accent) !important;
}
.sidebar-nav-item.active i { color: #ff6b63 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   7. STAT CARDS (KPI row)
   ═══════════════════════════════════════════════════════════════════════════ */
.stat-card {
    border: 1px solid var(--p-line) !important;
    border-radius: var(--p-radius) !important;
    box-shadow: var(--p-shadow-sm) !important;
    transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease !important;
}
.stat-card:hover { transform: translateY(-3px) !important; box-shadow: var(--p-shadow-lg) !important; }
/* Solid rail. Every KPI card wearing a gradient means the accent marks
   nothing in particular. */
.stat-card::before { background: var(--p-accent) !important; }
.stat-card-value {
    font-size: var(--fs-stat) !important;
    font-weight: 800 !important;
    letter-spacing: -0.035em !important;
    color: var(--p-ink) !important;
    line-height: var(--lh-tight) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. CONTENT CARDS  (.card, .summary-card, .entry-card, .list-card, .vat-report-card)
   ═══════════════════════════════════════════════════════════════════════════ */
.card, .summary-card, .entry-card, .list-card, .vat-report-card {
    border: 1px solid var(--p-line) !important;
    border-radius: var(--p-radius) !important;
    box-shadow: var(--p-shadow-sm) !important;
    transition: box-shadow .18s ease, transform .18s ease !important;
}
.card:hover, .list-card:hover, .vat-report-card:hover { box-shadow: var(--p-shadow-md) !important; transform: none !important; }
.summary-card:hover { box-shadow: var(--p-shadow-md) !important; transform: translateY(-2px) !important; }

.card-header { padding: 16px 20px !important; border-bottom: 1px solid var(--p-line) !important; }
.card-header h3, .entry-card h3, .list-header h3, .vat-report-header h3 {
    font-size: var(--fs-title-sm) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: var(--p-ink) !important;
}
.card-header h3 i, .entry-card h3 i { color: var(--p-accent) !important; }

.summary-value { font-size: 24px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: var(--p-ink) !important; }

.card-header a, a.view-all, .view-all-link {
    font-size: var(--fs-caption) !important; font-weight: 600 !important;
    color: var(--p-accent) !important; text-decoration: none !important;
    opacity: .85; transition: opacity .12s ease !important;
}
.card-header a:hover { opacity: 1 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   9. BUTTONS  (refine look only; never change .btn-primary width)
   ═══════════════════════════════════════════════════════════════════════════ */
.btn-primary, .btn-export, .btn-submit {
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: var(--fs-body) !important;
    letter-spacing: 0.005em !important;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
/* Flat, not gradient. A gradient + coloured glow on a button reads as 2014,
   and it was the loudest dated detail in the admin UI. Solid brand red, and
   the hover is a darkening rather than a lift — buttons don't float. */
.btn-primary, .btn-export {
    background: var(--p-accent) !important;
    box-shadow: none !important;
}
.btn-primary:hover, .btn-export:hover {
    background: var(--p-accent-dark) !important;
    transform: none !important;
    box-shadow: none !important;
}
.btn-primary:active, .btn-export:active { transform: translateY(0) !important; filter: brightness(.98) !important; }

/* opt-in inline button system */
.btn {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    gap: 8px !important; width: auto !important; padding: 9px 16px !important;
    border-radius: var(--p-radius-sm) !important; font-size: var(--fs-secondary) !important;
    font-weight: 600 !important; line-height: 1 !important; cursor: pointer !important;
    border: 1px solid transparent !important; transition: all .15s ease !important;
}
.btn.btn-secondary { background:#fff !important; border-color: var(--p-line-2) !important; color: var(--p-ink-2) !important; box-shadow: var(--p-shadow-xs) !important; }
.btn.btn-secondary:hover { background: var(--p-bg-sub) !important; border-color: var(--p-faint) !important; }
.btn.btn-ghost { background: transparent !important; color: var(--p-ink-2) !important; }
.btn.btn-ghost:hover { background: var(--p-bg-sub) !important; }
.btn.btn-sm { padding: 6px 12px !important; font-size: var(--fs-caption) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   10. FORM CONTROLS
   ═══════════════════════════════════════════════════════════════════════════ */
input[type="text"], input[type="email"], input[type="number"], input[type="tel"],
input[type="search"], input[type="date"], input[type="password"], select, textarea,
.form-group input, .form-group select, .form-group textarea {
    border: 1.5px solid var(--p-line-2) !important;
    border-radius: var(--p-radius-sm) !important;
    background: #fff !important; color: var(--p-ink) !important;
    font-size: var(--fs-secondary) !important; padding: 9px 12px !important;
    transition: border-color .15s ease, box-shadow .15s ease !important; outline: none !important;
}
input:focus, select:focus, textarea:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--p-accent) !important;
    box-shadow: 0 0 0 3px var(--p-accent-tint) !important;
}
input::placeholder, textarea::placeholder { color: #9aa3b2 !important; }

/* field labels (sentence-case helper labels in financial forms) */
.form-group label { font-size: var(--fs-caption) !important; font-weight: 600 !important; color: var(--p-muted) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   11. TABLES
   ═══════════════════════════════════════════════════════════════════════════ */
table { border-collapse: collapse !important; width: 100% !important; }
th {
    background: var(--p-bg-sub) !important;
    padding: 10px 16px !important; border-bottom: 1px solid var(--p-line) !important; text-align: left !important;
}
td { font-size: var(--fs-secondary) !important; color: var(--p-ink-2) !important; padding: 12px 16px !important; border-bottom: 1px solid var(--p-line) !important; }
tbody tr { transition: background .1s ease !important; }
tbody tr:hover td { background: var(--p-bg-sub) !important; }
tbody tr:last-child td { border-bottom: none !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   12. BADGES / PILLS / STATUS DOTS
   ═══════════════════════════════════════════════════════════════════════════ */
.badge, .tag, .pill, .view-badge, .subscription-badge, .list-count {
    border-radius: var(--p-radius-pill) !important;
    font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; padding: 4px 11px !important;
}
.status-dot, .online-dot, [class*="status-indicator"] {
    width: 8px !important; height: 8px !important; border-radius: 50% !important;
    box-shadow: 0 0 0 3px rgba(6,118,71,0.15) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. MODAL HEADERS  (consistent with the Performance Dashboard fix)
   ═══════════════════════════════════════════════════════════════════════════ */
.modal-header h2 { font-size: var(--fs-title) !important; font-weight: 700 !important; letter-spacing: -0.01em !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   14. SCROLLBARS
   ═══════════════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }


/* ═══════════════════════════════════════════════════════════════════════════
   15. ACCESSIBLE FOCUS
   ═══════════════════════════════════════════════════════════════════════════ */
a:focus-visible, button:focus-visible, .sidebar-nav-item:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--p-accent) !important; outline-offset: 2px !important; border-radius: var(--p-radius-sm);
}


/* ═══════════════════════════════════════════════════════════════════════════
   16. ABSORBED FROM upgrades.css  (so you can delete that file)
       — skeleton loaders, stat-loading pulse, activity feed

       ⚠ upgrades.css is STILL being loaded. Every class below is currently
         defined twice and whichever file loads last wins. Remove the
         <link> to fireassistiq-upgrades.css from app.html and delete it.
         fireassistiq-upgrades.js stays — that one does real work.
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton {
    background: linear-gradient(90deg, #f1f3f6 25%, #e7eaef 50%, #f1f3f6 75%) !important;
    background-size: 200% 100% !important; animation: shimmer 1.5s infinite !important; border-radius: 6px !important;
}
.skeleton-line { height: 13px; margin-bottom: 8px; border-radius: 4px; }
.skeleton-line:last-child { margin-bottom: 0; }
.skeleton-card { padding: 14px 16px; border-bottom: 1px solid var(--p-line); }
.skeleton-card:last-child { border-bottom: none; }

@keyframes stat-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.stat-loading .stat-card-value { color: #e2e8f0 !important; animation: stat-pulse 1.5s ease-in-out infinite; user-select: none; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.feed-item { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--p-line); animation: fadeIn .3s ease; }
.feed-item:last-child { border-bottom: none; }
.feed-icon { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feed-title { font-weight: 600 !important; line-height: 1.3; }   /* size set in §3 */
.feed-sub   { margin-top: 2px; }                                  /* size/colour set in §3 */


/* ═══════════════════════════════════════════════════════════════════════════
   17. MOTION  —  respect reduced-motion
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}