/* ============================================================================
   Arctic — Dynamica SaaS design system (Direction A)
   All-light, white surfaces, indigo accent. This is the shared scheme adopted
   first by HeadService, then TemplateCore, and onward to portal / service /
   templateAgent. Look-and-feel only — no functional behaviour lives here.
   ============================================================================ */

:root {
    /* Surfaces & structure */
    --arc-bg:            #f4f5f7;   /* app background            */
    --arc-surface:       #ffffff;   /* cards, sidebar, header    */
    --arc-surface-2:     #f8f9fb;   /* subtle raised / hover row */
    --arc-surface-3:     #fafbfc;   /* modal footer, insets      */

    /* Borders & dividers */
    --arc-border:        #e5e7eb;   /* primary border            */
    --arc-border-strong: #d1d5db;   /* inputs, segmented control */
    --arc-divider:       #f0f1f3;   /* faint internal divider    */
    --arc-divider-soft:  #f8f9fb;   /* barely-there row divider  */

    /* Brand blue — the CRM's own colour.
       Each console owns its palette in ITS OWN arctic.css, so which console you are on is legible
       at a glance rather than from the URL: the operator console stays indigo, the client console is
       green, and this one is blue. Only these ten values differ between the three files; everything
       downstream reads the tokens, so nothing else needs to know.
       Azure rather than a navy blue, deliberately — a blue close to the operator console's indigo
       would defeat the point of colouring them at all. */
    --arc-brand:         #0284c7;   /* primary buttons, active text */
    --arc-brand-accent:  #0ea5e9;   /* icon / focus accent          */
    --arc-brand-hover:   #0369a1;   /* primary hover                */
    --arc-brand-100:     #7dd3fc;   /* light blue text              */
    --arc-brand-tint:    rgba(14, 165, 233, 0.08);  /* active nav bg */
    --arc-brand-tint-2:  rgba(14, 165, 233, 0.10);  /* icon tile bg  */
    --arc-brand-ring:    rgba(14, 165, 233, 0.12);  /* focus ring    */
    --arc-brand-grad:    linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    --arc-brand-panel:   linear-gradient(160deg, #075985 0%, #0284c7 55%, #38bdf8 100%);

    /* Text */
    --arc-text:          #111827;   /* headings / primary       */
    --arc-text-2:        #374151;   /* body                     */
    --arc-text-3:        #4b5563;   /* secondary body           */
    --arc-muted:         #6b7280;   /* muted labels             */
    --arc-faint:         #9ca3af;   /* placeholders / faint     */

    /* Status */
    --arc-green:         #059669;
    --arc-green-bright:  #10b981;
    --arc-green-tint:    rgba(16, 185, 129, 0.10);
    --arc-green-border:  rgba(16, 185, 129, 0.20);

    --arc-red:           #dc2626;   /* danger / Prod            */
    --arc-red-tint:      rgba(220, 38, 38, 0.08);
    --arc-red-border:    rgba(220, 38, 38, 0.20);

    --arc-amber:         #b45309;   /* QA / warning             */
    --arc-amber-tint:    rgba(217, 119, 6, 0.10);
    --arc-amber-border:  rgba(217, 119, 6, 0.25);

    --arc-blue:          #2563eb;   /* Dev / info               */
    --arc-blue-tint:     rgba(37, 99, 235, 0.08);
    --arc-blue-border:   rgba(37, 99, 235, 0.20);

    --arc-purple:        #7c3aed;   /* secondary accent         */
    --arc-purple-tint:   rgba(139, 92, 246, 0.10);

    /* Radii */
    --arc-r-card:   12px;
    --arc-r-ctl:    8px;   /* buttons, inputs              */
    --arc-r-nav:    6px;   /* nav items                    */
    --arc-r-chip:   4px;   /* badges                       */
    --arc-r-modal:  14px;

    /* Shadows */
    --arc-shadow-card:  0 2px 8px rgba(0, 0, 0, 0.07);
    --arc-shadow-hover: 0 4px 16px rgba(91, 94, 244, 0.10);
    --arc-shadow-modal: 0 24px 70px rgba(17, 24, 39, 0.30);

    /* Type */
    --arc-font:    'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --arc-font-display: 'Space Grotesk', 'Figtree', sans-serif;
    --arc-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

}

/* ---- Radzen component variable overrides -> indigo Arctic scheme ----------
   Recolors every Radzen button / input / card / dialog in one place.
   !important because Continental injects Radzen's material-base.css from the
   render tree (loads after this file), so a plain :root rule would lose the
   cascade tie-break on load order. */
:root {
    --rz-primary:            #4f46e5 !important;
    --rz-primary-light:      #eef0fe !important;
    --rz-primary-lighter:    #f5f6ff !important;
    --rz-primary-dark:       #4338ca !important;
    --rz-primary-darker:     #3730a3 !important;
    --rz-secondary:          #5b5ef4 !important;
    --rz-base-background-color: #f4f5f7 !important;
    --rz-body-background-color: #f4f5f7 !important;
    --rz-text-color:         #111827 !important;
    --rz-text-secondary-color: #6b7280 !important;
    --rz-border-radius:      8px !important;
    --rz-success:            #059669 !important;
    --rz-danger:             #dc2626 !important;
    --rz-warning:            #b45309 !important;
    --rz-info:               #2563eb !important;
    --rz-link-color:         #4f46e5 !important;
    --rz-link-hover-color:   #4338ca !important;
}

/* ---- Material Symbols icon helper (mockup uses `.mi` with the icon name as
   ligature text). Font is loaded in the host <head>. ------------------------- */
.mi {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ---- Base ---------------------------------------------------------------- */
html, body {
    font-family: var(--arc-font);
    background: var(--arc-bg);
    color: var(--arc-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--arc-brand); }
a:hover { color: var(--arc-brand-hover); }

/* Thin light scrollbars everywhere (was dark) */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd0d8 transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #cbd0d8; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: #b3b9c4; }

/* ---- Shared primitives (opt-in classes reused across screens) ------------ */
.arc-card {
    background: var(--arc-surface);
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-r-card);
    box-shadow: var(--arc-shadow-card);
}

.arc-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border: none;
    border-radius: var(--arc-r-ctl);
    background: var(--arc-brand);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s;
}
.arc-btn:hover { background: var(--arc-brand-hover); }

.arc-btn-secondary {
    background: var(--arc-surface);
    border: 1px solid var(--arc-border-strong);
    color: var(--arc-text-3);
}
.arc-btn-secondary:hover { background: var(--arc-bg); color: var(--arc-text); }

.arc-btn-danger {
    background: var(--arc-surface);
    border: 1px solid var(--arc-red-border);
    color: var(--arc-red);
}
.arc-btn-danger:hover { background: var(--arc-red-tint); }

.arc-input {
    padding: 12px 14px;
    border: 1px solid var(--arc-border-strong);
    border-radius: var(--arc-r-ctl);
    font-size: 14px;
    font-family: inherit;
    color: var(--arc-text);
    background: var(--arc-surface);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.arc-input:focus {
    border-color: var(--arc-brand-accent);
    box-shadow: 0 0 0 3px var(--arc-brand-ring);
}

/* Status pill (uppercase micro-badge) */
.arc-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--arc-r-chip);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.arc-pill-active,
.arc-pill-prod-ok { background: var(--arc-green-tint); color: var(--arc-green); border-color: var(--arc-green-border); }
.arc-pill-prod { background: var(--arc-red-tint);   color: var(--arc-red);   border-color: var(--arc-red-border); }
.arc-pill-qa   { background: var(--arc-amber-tint); color: var(--arc-amber); border-color: var(--arc-amber-border); }
.arc-pill-dev  { background: var(--arc-blue-tint);  color: var(--arc-blue);  border-color: var(--arc-blue-border); }

/* Section eyebrow label */
.arc-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    color: var(--arc-muted);
    text-transform: uppercase;
}

/* ── SHARED CONSOLE LOOK ────────────────────────────────────────────────────────────────────────
   The CRM's page vocabulary, applied to every console.

   The three consoles drifted: the CRM was built later with cc-page / cc-header / cc-header-icon and
   a Space Grotesk display face on titles, while the operator console's pages still carry their own
   older page-header / header-icon rules — each with its own hand-picked icon colour. Same product,
   two different-looking halves.

   PREFIXED WITH `body`, and that is the whole trick. Ten of those pages define .page-header and
   .header-icon inside their own <style> block, which the browser sees AFTER this file. At equal
   specificity the later rule wins, so an unprefixed rule here would be silently ignored on exactly
   the pages it is meant to fix. `body .header-icon` scores one element higher and wins wherever it
   applies, without editing ten pages and without !important.

   The icon tile now reads --arc-brand-grad, so it takes the CONSOLE's colour: indigo on the
   operator console, blue on the CRM, green for a client. That is the visible change to expect —
   page-specific icon colours (the amber approvals tile, and so on) become the console's own.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

body .page-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

body .header-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: var(--arc-r-ctl);
    background: var(--arc-brand-grad);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

body .header-icon i { color: #fff; font-size: 22px; }

body .header-info { flex: 1 1 auto; min-width: 0; }

body .page-title {
    font-family: var(--arc-font-display);
    font-size: 1.45rem;
    font-weight: 600;
    margin: 0 0 2px;
    letter-spacing: -0.01em;
    color: var(--arc-text);
}

body .page-subtitle {
    margin: 0;
    color: var(--arc-muted);
    font-size: 0.9rem;
}

/* The CRM's own vocabulary, defined here rather than only in CrmStyles so a page on ANY console can
   reach for it. CrmStyles keeps its copy: it is loaded per page and must still stand alone on the
   sign-in screen, which renders before any console chrome. */
.cc-page {
    padding: 24px 28px 40px;
    max-width: 1200px;
    font-family: var(--arc-font);
    color: var(--arc-text);
}

.cc-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }

.cc-header-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: var(--arc-r-ctl);
    background: var(--arc-brand-grad);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-header-info { flex: 1 1 auto; min-width: 0; }

.cc-title {
    font-family: var(--arc-font-display);
    font-size: 1.45rem;
    font-weight: 600;
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}

.cc-subtitle { margin: 0; color: var(--arc-muted); font-size: 0.9rem; }