/*
 * SEE restyle2 — WRM corporate visual language.
 * Retains restyle1 layout, heading padding, DOM order and gauge animation.
 * Loaded after the original styles; remove this link to restore the baseline.
 */
:root {
    color-scheme: light;
    --bg: #f5faff;
    --panel: #ffffff;
    --panel-2: #f0f8fb;
    --panel-3: #e0edf5;
    --border: #d3e5ee;
    --border-soft: #e4eef3;
    --text: #192327;
    --text-soft: #354c56;
    --text-muted: #526a76;
    --green: #087c60;
    --blue: #0066cc;
    --amber: #9b6109;
    --purple: #7543bb;
    --teal: #007c65;
    --shadow: 0 6px 30px -18px #006ce438, inset 0 1px 0 #ffffff;
    --skin-shell: #ffffff;
    --navigation-background: linear-gradient(160deg, #353535 60%, #292929);
    --sidebar-surface: #353535;
    --sidebar-surface-end: #292929;
    --skin-field: #f8fcfe;
    --skin-field-border: #bdd4df;
    --skin-tint: #eaf6fd;
    --skin-glow: #006ce414;
    --skin-highlight: #ffffffb3;
    --skin-header: #ffffffed;
    --skin-focus: #006ce4;
    --skin-ring: #006ce426;
    --skin-hover: #e7f5fb;
    /* WRM's blue-to-aqua identity, darkened on white-text controls. */
    --skin-primary: linear-gradient(110deg, #0066ce, #007f69);
    --wrm-gradient: linear-gradient(110deg, #006ce4, #00b98d);
    --wrm-ink-gradient: linear-gradient(110deg, #0066cc, #007c65);
    --wrm-facet-blue: #006ce40b;
    --wrm-facet-aqua: #00b98d0b;
    --wrm-table: #edf7fc;
    --wrm-table-text: #315564;
    --skin-error: #b6324d;
    /* Intelligence uses its own semantic token names. */
    --muted: var(--text-muted);
    --line: var(--border);
    --accent: #007c65;
    --bubble: #e7f5fc;
}
:root.dark {
    color-scheme: dark;
    --bg: #111517;
    --panel: #1c2225;
    --panel-2: #242d31;
    --panel-3: #354249;
    --border: #34434a;
    --border-soft: #2d393f;
    --text: #f2f6f8;
    --text-soft: #cedce3;
    --text-muted: #a8beca;
    --green: #66d7ac;
    --blue: #83c8ff;
    --amber: #f2c96d;
    --purple: #c1a4fa;
    --teal: #63d6cc;
    --shadow: 0 8px 28px -16px #00000080, inset 0 1px 0 #ffffff05;
    --skin-shell: #181e21;
    --navigation-background: linear-gradient(160deg, #353535 60%, #292929);
    --sidebar-surface: #353535;
    --sidebar-surface-end: #292929;
    --skin-field: #181f23;
    --skin-field-border: #47606c;
    --skin-tint: #20353f;
    --skin-glow: #006ce414;
    --skin-highlight: #ffffff08;
    --skin-header: #1c2225ed;
    --skin-focus: #83c8ff;
    --skin-ring: #83c8ff29;
    --skin-hover: #263d47;
    --wrm-ink-gradient: linear-gradient(110deg, #83c8ff, #64dfbe);
    --wrm-facet-blue: #006ce409;
    --wrm-facet-aqua: #00b98d08;
    --wrm-table: #24353e;
    --wrm-table-text: #c2e4f4;
    --skin-error: #ff9cac;
    --accent: #64dfbe;
    --bubble: #203c49;
}

/* WRM's angular hero motifs, without images, network requests or layout boxes. */
body {
    background: linear-gradient(145deg, transparent 0 73%, var(--wrm-facet-blue) 73% 85%, transparent 85%) 0 0 / 100% 880px,
        linear-gradient(25deg, var(--wrm-facet-aqua), transparent 43%) 0 0 / 100% 880px, var(--bg);
}
.sidebar {
    color: var(--text);
    background: var(--navigation-background);
    border-right-color: var(--border);
    box-shadow: 8px 0 32px -28px #006ce444;
}
.topbar {
    background: var(--skin-header);
    backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 var(--border), 0 8px 24px -22px #132b5f80;
}
.context-bar {
    background: linear-gradient(90deg, var(--panel-2), transparent);
    border-top-color: var(--border-soft);
}
.sidebar-bottom, .sidebar-admin {
    background: var(--sidebar-surface);
    border-color: var(--border-soft);
}
.sidebar nav a {
    border-radius: 999px;
    transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}
.sidebar nav a:hover:not(.area-brand) {
    color: var(--text);
    background: var(--skin-hover);
    box-shadow: inset 2px 0 0 var(--blue);
}
.sidebar nav a.selected {
    color: #ffffff;
    background: var(--skin-primary);
    box-shadow: 0 5px 16px -10px #006ce488, inset 0 1px 0 #ffffff22;
}
.sidebar nav a.selected:hover {
    color: #ffffff;
    background: var(--skin-primary);
    box-shadow: 0 5px 18px -8px #006ce488, inset 0 1px 0 #ffffff44;
}
.sidebar .nav-heading { color: var(--text-muted); }
.workspace { border-color: var(--border-soft); }
.avatar, .employee-avatar {
    background: linear-gradient(145deg, var(--skin-tint), var(--panel-2));
    color: var(--blue);
    box-shadow: inset 0 1px 0 var(--skin-highlight);
}
.page-heading h1, .header-main > div > strong { color: var(--text); }
.page-heading .eyebrow { color: var(--blue); }
.page-heading h1 {
    font-weight: 800;
    background: var(--wrm-ink-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
.sidebar .brand small, .sidebar .workspace small { color: var(--text-muted); }
.sidebar .workspace strong, .sidebar-admin a { color: var(--text); }
.sidebar nav a { color: var(--text-soft); }
.sidebar-admin a:hover { color: var(--teal); }
.context-bar { box-shadow: inset 0 -1px 0 var(--border-soft); }
.avatar, .employee-avatar { border-radius: 50%; }
.status-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 12%, transparent); }

/* Panels and modules. Gauge cards are intentionally excluded. */
.card:not(.ops-risk-iro):not(.kpi):not(.risk-hero) {
    background: linear-gradient(145deg, var(--skin-highlight), transparent 58%), var(--panel);
    border-color: var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.domain::before {
    background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 24%, transparent));
}
.ops-domains .domain:has(a[href="/areas/hse/"]) { --accent: var(--green); }
.ops-domains .domain:has(a[href="/areas/maintenance/"]) { --accent: #4984d1; }
.dark .ops-domains .domain:has(a[href="/areas/maintenance/"]) { --accent: #8ebaff; }
.ops-domains .domain:has(a[href="/areas/supply/"]) { --accent: var(--amber); }
.ops-domains .domain:has(a[href="/areas/cyber/"]) { --accent: var(--purple); }
.domain .card-foot { color: var(--accent); }
.ops-domains .domain {
    background: var(--panel) !important;
    box-shadow: var(--shadow) !important;
}
.ops-domains .domain .card-foot { border-color: color-mix(in srgb, var(--accent) 24%, var(--border)); }
.card:not(.ops-risk-iro):not(.kpi):not(.risk-hero) > .section-heading {
    background: linear-gradient(100deg, var(--skin-tint), color-mix(in srgb, var(--teal) 4%, var(--panel)));
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: inset 2px 0 0 var(--blue), inset 0 -1px 0 var(--border-soft);
}
.ops-metric > strong { color: var(--blue); }
.subcard, .ops-cell {
    background: linear-gradient(135deg, var(--panel-2), var(--skin-shell));
    border-radius: 10px;
    box-shadow: inset 0 1px 0 var(--skin-highlight);
}
.ops-missing {
    background: color-mix(in srgb, var(--amber) 6%, var(--panel));
    border-color: color-mix(in srgb, var(--amber) 30%, var(--border));
}
.empty-icon {
    background: linear-gradient(145deg, color-mix(in srgb, var(--teal) 14%, var(--panel)), var(--panel-2));
    box-shadow: inset 0 1px 0 var(--skin-highlight);
}
.module-logo, .area-brand img, .see-logo, .header-brand img {
    /* Preserve the original artwork and its white ground. */
    box-shadow: 0 0 0 1px #c7d2e533, 0 5px 15px -12px #102a5c70;
}

/* Controls: keep every box and baseline in place. */
.button {
    background: linear-gradient(180deg, var(--skin-highlight), transparent), var(--panel-2);
    border-color: var(--skin-field-border);
    border-radius: 999px;
    box-shadow: 0 1px 2px #10254209, inset 0 1px 0 var(--skin-highlight);
    transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease;
}
.button:hover {
    background-color: var(--skin-hover);
    border-color: var(--blue);
    color: var(--text);
    box-shadow: 0 3px 10px -7px var(--blue);
}
.button.primary, .jaica-button {
    background: var(--skin-primary);
    border-color: transparent;
    border-radius: 999px;
    color: #ffffff;
    box-shadow: 0 5px 15px -9px #006ce499, inset 0 1px 0 #ffffff24;
}
.button.primary:hover, .jaica-button:hover {
    color: #ffffff;
    border-color: #00a68b;
    box-shadow: 0 5px 18px -7px #006ce499, inset 0 1px 0 #ffffff3d;
}
.button.danger, .errorlist, .certificate-field-error { color: var(--skin-error); }
.auth-card .registration-errors ul, .auth-card ul.errorlist,
[data-state="error"] .job-status, .ops-escalation { color: var(--skin-error); }
.button:disabled { box-shadow: none; }
.segmented {
    background: var(--panel-2);
    border-color: var(--border);
    box-shadow: inset 0 1px 3px #00000009;
}
.segmented button.active {
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 1px 5px #112b5520;
}
input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
textarea, select {
    background: var(--skin-field);
    border-color: var(--skin-field-border);
    border-radius: 8px;
    box-shadow: inset 0 1px 2px #12294e05;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input:hover, textarea:hover, select:hover { border-color: var(--text-muted); }
input:focus, textarea:focus, select:focus {
    border-color: var(--skin-focus);
    outline-color: var(--skin-focus);
    box-shadow: 0 0 0 3px var(--skin-ring);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--blue); }
.certificate-review-fields [aria-invalid="true"] {
    border-color: var(--skin-error);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--skin-error) 15%, transparent);
}
:is(a, button, summary):focus-visible {
    outline: 2px solid var(--skin-focus);
    outline-offset: 3px;
}
.language-trigger {
    background: var(--panel-2);
    border-color: var(--skin-field-border);
    box-shadow: inset 0 1px 0 var(--skin-highlight);
}
.language-options {
    background: var(--panel);
    border-color: var(--skin-field-border);
    box-shadow: 0 16px 40px -10px #07182b4d;
}
.language-options [role="option"]:hover, .language-options [role="option"]:focus-visible,
.language-options [aria-selected="true"] {
    background: var(--skin-tint);
}

/* Registers and status indicators: quiet row rhythm, clear active state. */
thead {
    background: var(--wrm-table);
}
th { color: var(--wrm-table-text); border-bottom-color: var(--border); }
.certificate-table th { color: var(--wrm-table-text); background: var(--wrm-table); }
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--panel-2) 38%, transparent); }
tbody tr:hover { background: var(--skin-hover); }
td { border-color: var(--border-soft); }
td.row-actions a:hover { text-decoration: underline; text-underline-offset: 3px; }
.chip { border-radius: 6px; }
.chip.info { background: color-mix(in srgb, var(--blue) 10%, var(--panel)); }
.chip.ok { background: color-mix(in srgb, var(--green) 10%, var(--panel)); }
.chip.warn { background: color-mix(in srgb, var(--amber) 10%, var(--panel)); }
.employee-tabs .primary, .certificate-page.active { box-shadow: inset 0 1px 0 #ffffff26; }
.employee-pdf, .certificate-review-preview iframe { border-color: var(--skin-field-border); }
.employee-facts > div, .details-grid > div { border-color: var(--border-soft); }
.message { border-radius: 10px; box-shadow: inset 0 1px 0 var(--skin-highlight); }
.message.success { background: color-mix(in srgb, var(--green) 7%, var(--panel)); }
.message.error { background: color-mix(in srgb, var(--skin-error) 7%, var(--panel)); }

/* Certificates: richer upload surfaces, unchanged form structure. */
.certificate-type-icon {
    background: color-mix(in srgb, var(--green) 11%, var(--panel));
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 20%, transparent);
}
.certificate-type-icon.training {
    background: color-mix(in srgb, var(--purple) 11%, var(--panel));
    color: var(--purple);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purple) 20%, transparent);
}
.certificate-upload-card:has([data-upload-kind="training"]) {
    --accent: var(--purple);
    --skin-glow: color-mix(in srgb, var(--purple) 14%, transparent);
}
.certificate-upload-card:has([data-upload-kind="training"]) .certificate-drop-zone {
    border-color: color-mix(in srgb, var(--purple) 50%, var(--border));
}
.certificate-drop-zone {
    background: linear-gradient(145deg, transparent 70%, var(--wrm-facet-blue) 70%),
        radial-gradient(ellipse at top, var(--skin-glow), transparent 75%), var(--skin-shell);
    border-color: color-mix(in srgb, var(--blue) 50%, var(--border));
    box-shadow: inset 0 1px 0 var(--skin-highlight);
}
.certificate-drop-zone:hover, .certificate-drop-zone.dragging, .certificate-drop-zone:focus-within {
    background: var(--skin-tint);
    border-color: var(--blue);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 20%, transparent);
}
.certificate-toolbar, .certificate-pagination {
    background: var(--skin-shell);
    border-color: var(--border-soft);
}
[data-state="review"] .job-status { background: color-mix(in srgb, var(--amber) 10%, var(--panel)); }
[data-state="error"] .job-status { background: color-mix(in srgb, var(--skin-error) 10%, var(--panel)); }
[data-state="imported"] .job-status, [data-state="unmatched"] .job-status {
    background: color-mix(in srgb, var(--green) 10%, var(--panel));
}
#review-status { background: var(--panel-2); color: var(--text-soft); box-shadow: inset 0 1px 0 var(--skin-highlight); }
/* The requested yellow hint remains yellow in both themes. */
#review-fiscal-suggestion { background: #fef3c7; color: #713f12; box-shadow: inset 0 0 0 1px #d8ac4d55; }
.certificate-saving { background: var(--skin-tint); border-color: var(--border); }

/* Modal and account surfaces. Only opacity animates: no displacement. */
dialog {
    background: var(--panel);
    border-color: var(--skin-field-border);
    border-radius: 16px;
    box-shadow: 0 32px 100px -24px #02081799, inset 0 1px 0 var(--skin-highlight);
}
dialog::backdrop { background: #050e22a6; backdrop-filter: blur(7px); }
.auth-body {
    background: linear-gradient(145deg, transparent 0 65%, var(--wrm-facet-blue) 65% 80%, transparent 80%),
                linear-gradient(25deg, var(--wrm-facet-aqua), transparent 60%), var(--bg);
}
.auth-card { box-shadow: 0 24px 64px -32px #102b5966, inset 0 1px 0 var(--skin-highlight); }
.auth-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .button, .sidebar nav a, input, select, textarea { transition: none; }
}

/* Intelligence iframe: same skin, same grid and composer positions. */
.assistant-shell { background: var(--panel); }
.assistant-shell .chat-sidebar {
    color: var(--text);
    background: var(--navigation-background);
    border-color: var(--border);
}
.assistant-shell .chat-header {
    background: linear-gradient(110deg, var(--skin-glow), transparent 75%), var(--panel);
}
.assistant-shell .chat-agents { background: var(--skin-shell); border-color: var(--border); }
.assistant-shell #chat-messages {
    background: linear-gradient(145deg, transparent 70%, var(--wrm-facet-blue) 70%),
        radial-gradient(ellipse at 65% 0, var(--skin-glow), transparent 65%), var(--bg);
}
.assistant-shell button {
    border-color: var(--skin-field-border);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 var(--skin-highlight);
}
.assistant-shell button:hover:not(:disabled) { border-color: var(--blue); }
.assistant-shell #new-chat, .assistant-shell #send-chat, .assistant-shell .chat-agents .active {
    background: var(--skin-primary);
    color: #fff;
    border-radius: 999px;
}
.assistant-shell #chat-list button[aria-current="true"] {
    background: var(--skin-tint);
    border-color: var(--blue);
}
.assistant-shell .message { background: var(--panel); box-shadow: var(--shadow); border-radius: 12px; }
.assistant-shell .message.user { background: var(--bubble); box-shadow: inset 0 1px 0 var(--skin-highlight); }
.assistant-shell #chat-status.error { color: var(--skin-error); }

/*
 * Preserve instrument colors. Dark surfaces follow the surrounding cards;
 * --panel also supplies the matching gaps between the colored gauge bands.
 */
.ops-risk-iro, .ops-kpis .kpi, .risk-hero, .gauge {
    --bg: #eef2f7; --panel: #fff; --panel-2: #f1f5f9; --panel-3: #e2e8f0;
    --border: #d5dde7; --border-soft: #e6ecf2; --text: #0f172a;
    --text-soft: #334155; --text-muted: #64748b;
    --shadow: 0 1px 3px rgba(15,23,42,.07), 0 12px 26px -18px rgba(15,23,42,.35);
    --green: #059669; --blue: #2563eb; --amber: #d97706; --purple: #7c3aed; --teal: #0d9488;
    color: var(--text);
}
.dark .ops-risk-iro, .dark .ops-kpis .kpi, .dark .risk-hero, .dark .gauge {
    --bg: #111517; --panel: #1c2225; --panel-2: #242d31; --panel-3: #354249;
    --border: #34434a; --border-soft: #2d393f; --text: #f1f5f9;
    --text-soft: #cbd5e1; --text-muted: #94a3b8;
    --shadow: 0 1px 3px rgba(0,0,0,.5), 0 14px 30px -22px rgba(0,0,0,.9);
    --green: #34d399; --blue: #60a5fa; --amber: #fbbf24; --purple: #a78bfa; --teal: #2dd4bf;
}
.dark :is(.ops-risk-iro, .ops-kpis .kpi, .risk-hero) {
    background: linear-gradient(145deg, var(--skin-highlight), transparent 58%), var(--panel);
}

/* The general sidebar stays on a dark neutral surface in either theme. */
:root .sidebar {
    --text: #f2f6f8;
    --text-soft: #cedce3;
    --text-muted: #a8beca;
    --see-sidebar-logo-filter: url(#see-logo-light-ink);
    --module-wordmark-color: #fff;
    --skin-hover: #454545;
}
:root .sidebar .workspace { background: #20343f; }