/* ============================================================================
   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.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

/* THE HEADER IS A BAND, and both vocabularies describe the same one.

   The operator console's ten screens were unified onto this treatment first; the CRM kept a bare
   header with a 44px tile and a Space Grotesk title, so the two halves of one product disagreed
   about what a page heading looks like. Same values here, so they do not.

   cc-* AND page-* ARE THE SAME RULE. The CRM was built later with its own cc- prefix while older
   pages use page-; both names survive in markup across the estate and renaming forty files to agree
   would be churn for its own sake. They are answered together instead, so a page cannot look
   different for having picked the older name.

   EVERY PROPERTY A PAGE MIGHT SET IS DECLARED, including the visually-nothing ones (margin,
   border-radius). The body prefix wins on specificity, but only for properties this block actually
   declares — a padding left undeclared here is a padding the page keeps, which is how four screens
   ended up with four different header heights while all claiming to be unified. */

body .page-header,
body .cc-header {
    display: flex;
    align-items: center;
    gap: 16px;

    background: var(--arc-surface);
    padding: 24px 36px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--arc-border);
    border-radius: 0;
}

body .header-icon,
body .cc-header-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 12px;

    /* The CONSOLE's colour: indigo on the operator console, blue on the CRM, green for a client.
       Sizes and type are shared; identity is not. */
    background: var(--arc-brand-grad);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

/* FIGTREE, NOT SPACE GROTESK. The reference page's title carries no font-family at all and inherits
   the body face; the display face was applied to these rules earlier and is the reason titles read
   differently from screen to screen. */
body .page-title,
body .cc-title {
    font-family: var(--arc-font);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 3px;
    letter-spacing: 0;
    color: var(--arc-text);
}

body .page-subtitle,
body .cc-subtitle {
    margin: 0;
    color: var(--arc-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* Anything after the title — a refresh, a filter — sits at the right of the band rather than
   wrapping under it. */
body .page-header > .header-actions,
body .page-header > .header-counts,
body .cc-header > .header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* NO PADDING AT THE TOP, because the header is now a full-bleed band carrying its own. Left as it
   was, the band would sit inset inside the page with the background showing around it. The content
   below keeps its gutter. */
.cc-page {
    padding: 0 0 40px;
    max-width: none;
    font-family: var(--arc-font);
    color: var(--arc-text);
}

.cc-page > *:not(.cc-header):not(.page-header) {
    padding-left: 36px;
    padding-right: 36px;
    max-width: 1264px;
}

.cc-page > *:not(.cc-header):not(.page-header):first-of-type { padding-top: 24px; }

/* ── THE HEADER STAYS PUT; WHAT IS UNDER IT SCROLLS ─────────────────────────────────────────────

   Every screen scrolled as one long document, so the masthead — the icon, the title, the page's
   whole reason for existing — left the top of the window as soon as anybody read past the first
   card. On a long list you were then looking at rows with nothing above them saying what they were
   rows OF.

   The band is already surface-coloured and full-bleed, so it covers what passes underneath without
   needing anything added here. The scrollport it sticks inside is the shell's — see .crm-body /
   .cs-body, which is where the page stops being the document and starts being a box.

   z-index above the content, below the popups. */
body .page-header,
body .cc-header {
    position: sticky;
    top: 0;
    z-index: 20;
}