/* ============================================================================
   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 indigo */
    --arc-brand:         #4f46e5;   /* primary buttons, active text */
    --arc-brand-accent:  #5b5ef4;   /* icon / focus accent          */
    --arc-brand-hover:   #4338ca;   /* primary hover                */
    --arc-brand-100:     #818cf8;   /* light indigo text            */
    --arc-brand-tint:    rgba(91, 94, 244, 0.08);  /* active nav bg  */
    --arc-brand-tint-2:  rgba(91, 94, 244, 0.10);  /* icon tile bg   */
    --arc-brand-ring:    rgba(91, 94, 244, 0.12);  /* focus ring     */
    --arc-brand-grad:    linear-gradient(135deg, #5b5ef4 0%, #8b5cf6 100%);
    --arc-brand-panel:   linear-gradient(160deg, #3730a3 0%, #4f46e5 55%, #7c5cf6 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 that is the part that was missing.

   Platform Overview was the one page that never took these rules — it carries its own .sa-header in
   its own <style>, so the unification above reached every page except the one people liked. Its
   treatment is now the standard: a surface-coloured band with real padding and a bottom rule, rather
   than a bare row floating on the page background. Same product, one masthead.

   EVERY PROPERTY A PAGE MIGHT SET IS DECLARED HERE, including the ones that are visually "nothing"
   (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 exactly
   how four pages ended up with four different header heights while all claiming to be unified. */
body .page-header {
    display: flex;
    align-items: center;
    gap: 16px;

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

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

    /* The CONSOLE's colour, not the page's. Platform Overview's tile is amber and every other page
       had its own hand-picked hue; that is the drift this deliberately ends. Sizes and type come
       from Platform Overview, identity comes from the console. */
    background: var(--arc-brand-grad);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

/* FIGTREE, NOT SPACE GROTESK. Platform Overview's title carries no font-family at all, so it
   inherits the body face — which is the look being matched. The display face was applied here
   earlier and is the reason titles read differently from page to page. */
body .page-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 {
    margin: 0;
    color: var(--arc-muted);
    font-size: 13px;
    line-height: 1.5;
}

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

/* THE REFRESH CONTROL, under both names it is written as.

   Four pages say `refresh-button` and two say `refresh-btn`; of those, one defined only a margin and
   three defined nothing at all, so the same control rendered as a styled square on two screens and
   as raw browser chrome on the rest. Both names are answered here rather than renamed across six
   files, because the markup is not the thing that was wrong. */
body .page-header .refresh-button,
body .page-header .refresh-btn {
    margin-left: auto;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--arc-bg);
    border: 1px solid var(--arc-border);
    border-radius: var(--arc-r-ctl);
    color: var(--arc-muted);
    cursor: pointer;
}

/* Inside a group the auto margin belongs to the GROUP, not to each button in it. */
body .page-header > .header-actions .refresh-button,
body .page-header > .header-actions .refresh-btn,
body .page-header > .header-counts .refresh-button,
body .page-header > .header-counts .refresh-btn { margin-left: 0; }

body .page-header .refresh-button:hover:not(:disabled),
body .page-header .refresh-btn:hover:not(:disabled) { background: var(--arc-surface); color: var(--arc-text); }

body .page-header .refresh-button:disabled,
body .page-header .refresh-btn:disabled { opacity: .5; cursor: default; }

body .page-header .refresh-button i,
body .page-header .refresh-btn i { font-size: 18px; }

/* 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; }

/* ── THE HEADER STAYS PUT; WHAT IS UNDER IT SCROLLS ─────────────────────────────────────────────
                                                                                              
   Every screen in the console scrolled as one long document: 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 table you were then looking at rows with nothing above them saying what
   they were rows OF.

   THE SCROLLPORT MOVES OFF THE DOCUMENT AND ONTO THE PAGE. RadzenBody is already a flex column with
   overflow hidden, so the page's own root element becomes the scrolling box and the band above it
   simply stays. Targeted as "the body's child" rather than by page class on purpose: there are a
   dozen page roots — .requests-page, .sa-dashboard, .payouts-page — and naming them is how the
   thirteenth gets missed.

   min-height:0 is LOAD-BEARING. A flex child will not shrink below its content without it, so the
   page would grow to fit and scroll nothing, which is exactly the behaviour being replaced. */
body .rz-body > * {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* The band is already surface-coloured and full-bleed, so it covers what passes underneath without
   needing anything added. z-index above the content, below the sidebar's popups. */
body .page-header,
body .cc-header {
    position: sticky;
    top: 0;
    z-index: 20;
}