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