/* UI-03A. Approved UI-01A colors, scoped to the request-scoped operator shell.
   PublicLayout and Product have independent themes and do not match these selectors. */
.cc-shell, html[data-cc-shell] {
    color-scheme: light;
    --cc-ink: #182b34;
    --cc-ink-soft: #566972;
    --cc-ink-faint: #566972;
    --cc-surface: #ffffff;
    --cc-surface-sunken: #f5f6f8;
    --cc-subtle: #eff3f3;
    --cc-line: #dce4e6;
    --cc-line-strong: #788c91;
    --cc-accent: #14675f;
    --cc-accent-strong: #0f534d;
    --cc-accent-ink: #ffffff;
    --cc-accent-soft: #e6f2ef;
    --cc-accent-line: #c8deda;
    --cc-danger: #a52a3e;
    --cc-danger-soft: #fff0f2;
    --cc-danger-line: #d997a2;
    --cc-success: #226646;
    --cc-success-soft: #eaf4ed;
    --cc-warn: #805013;
    --cc-warn-soft: #fff3dc;
    --cc-info: #285a8a;
    --cc-info-soft: #edf3fb;
    --cc-focus: #286eb7;
    --cc-overlay: rgb(12 28 33 / 46%);
    --cc-shadow-sm: 0 2px 8px rgb(24 43 52 / 5%);
    --cc-shadow-md: 0 12px 36px rgb(9 29 33 / 14%);
    --cc-glow-card: rgb(23 150 128 / 9%);
    --cc-glow-button: rgb(17 160 138 / 24%);
    --cc-glow-button-hover: rgb(17 160 138 / 34%);
    --cc-glow-sheen: rgb(255 255 255 / 22%);
    --cc-scrollbar: #b1c0c4;
    --cc-radius-sm: 10px;
    --cc-radius-md: 14px;
    --cc-sidebar-width: 248px;
    --cc-topbar-height: 76px;
    --mud-palette-primary: var(--cc-accent);
    --mud-palette-primary-rgb: 20, 103, 95;
    --mud-palette-primary-text: var(--cc-accent-ink);
    --mud-palette-primary-hover: var(--cc-accent-soft);
    --mud-palette-background: var(--cc-surface-sunken);
    --mud-palette-background-grey: var(--cc-subtle);
    --mud-palette-surface: var(--cc-surface);
    --mud-palette-text-primary: var(--cc-ink);
    --mud-palette-text-secondary: var(--cc-ink-soft);
    --mud-palette-text-disabled: var(--cc-ink-faint);
    --mud-palette-action-default: var(--cc-ink-soft);
    --mud-palette-divider: var(--cc-line);
    --mud-palette-lines-default: var(--cc-line);
    --mud-palette-lines-inputs: var(--cc-line-strong);
    --mud-palette-table-lines: var(--cc-line);
    --mud-palette-table-striped: var(--cc-subtle);
    --mud-palette-table-hover: var(--cc-subtle);
    --mud-palette-error: var(--cc-danger);
    --mud-palette-success: var(--cc-success);
    --mud-palette-warning: var(--cc-warn);
    --mud-palette-info: var(--cc-info);
}
html[data-cc-theme="dark"] .cc-shell, html[data-cc-shell][data-cc-theme="dark"] {
    color-scheme: dark;
    --cc-ink: #edf4f5;
    --cc-ink-soft: #b6c8cf;
    --cc-ink-faint: #b6c8cf;
    --cc-surface: #18272e;
    --cc-surface-sunken: #101b21;
    --cc-subtle: #20323a;
    --cc-line: #354951;
    --cc-line-strong: #7f989f;
    --cc-accent: #8bd6c7;
    --cc-accent-strong: #ade9dd;
    --cc-accent-ink: #102e2a;
    --cc-accent-soft: #203f3b;
    --cc-accent-line: #3d6862;
    --cc-danger: #ffb4c1;
    --cc-danger-soft: #462a34;
    --cc-danger-line: #b87786;
    --cc-success: #a0dfb9;
    --cc-success-soft: #223c30;
    --cc-warn: #f5d298;
    --cc-warn-soft: #443824;
    --cc-info: #b3d4fb;
    --cc-info-soft: #263a50;
    --cc-focus: #9bcaff;
    --cc-overlay: rgb(2 10 14 / 68%);
    --cc-shadow-sm: 0 2px 8px rgb(0 0 0 / 12%);
    --cc-shadow-md: 0 12px 36px rgb(0 0 0 / 34%);
    --cc-glow-card: rgb(94 220 193 / 12%);
    --cc-glow-button: rgb(94 220 193 / 25%);
    --cc-glow-button-hover: rgb(94 220 193 / 38%);
    --cc-glow-sheen: rgb(182 255 236 / 12%);
    --cc-scrollbar: #526c76;
    --mud-palette-primary-rgb: 139, 214, 199;
}

body:has(.cc-shell) { background: var(--cc-surface-sunken, #f5f6f8); }
.cc-shell { min-height: 100dvh; color: var(--cc-ink); background: var(--cc-surface-sunken); }
.cc-shell, .cc-shell *, .cc-shell *::before, .cc-shell *::after { box-sizing: border-box; }
.cc-shell [hidden] { display: none !important; }
.cc-shell :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
    outline: 3px solid var(--cc-focus); outline-offset: 3px;
}
.cc-shell :is(#cc-main,h1,h2,h3):focus:not(:focus-visible) { outline: none; }
.cc-shell ::selection { background: var(--cc-accent-soft); color: var(--cc-ink); }
.cc-shell a { color: var(--cc-accent); text-underline-offset: 4px; }
.cc-shell a:hover { text-decoration: underline; }
.cc-shell svg { flex: 0 0 auto; }
.cc-shell :is(.cc-sidebar,.cc-mobile-menu,.cc-account-menu,.cc-account-panel,.cc-table-wrap) {
    scrollbar-width: thin; scrollbar-color: var(--cc-scrollbar) transparent;
}
.cc-shell :is(.cc-shell-skip,.cc-skip-link) {
    position: fixed; inset-block-start: 12px; inset-inline-start: 12px; z-index: 2100;
    padding: 10px 18px; border-radius: 10px; color: var(--cc-accent-ink); background: var(--cc-accent);
    transform: translateY(-180%); text-decoration: none;
}
.cc-shell :is(.cc-shell-skip,.cc-skip-link):focus { transform: translateY(0); }

/* Frame and navigation use logical properties throughout. */
.cc-sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40;
    width: var(--cc-sidebar-width); display: flex; flex-direction: column;
    background: var(--cc-surface); border-inline-end: 1px solid var(--cc-line);
    padding: 26px 18px 18px; overflow-y: auto; overscroll-behavior: contain;
}
.cc-shell .cc-sidebar-brand {
    display: flex; gap: 12px; align-items: center; color: var(--cc-ink);
    padding: 0 8px 26px; min-width: 0; text-decoration: none;
}
.cc-sidebar-brand .cc-brand-image { width: 42px; height: 42px; flex: 0 0 42px; box-shadow: none; }
.cc-brand-copy { display: grid; min-width: 0; line-height: 1.7; }
.cc-brand-copy strong { font-size: 17px; font-weight: 750; overflow-wrap: anywhere; }
.cc-brand-copy small, .cc-brand-copy span { color: var(--cc-ink-soft); font-size: 11px; }
.cc-sidebar-navigation { display: grid; gap: 6px; }
.cc-shell .cc-nav-group { border: 0; margin: 0; min-width: 0; }
.cc-shell .cc-nav-group > summary {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px;
    list-style: none; border-radius: 10px; color: var(--cc-ink-soft); cursor: pointer; font-size: 12px; font-weight: 650;
}
.cc-nav-group > summary::-webkit-details-marker { display: none; }
.cc-shell .cc-nav-chevron { margin-inline-start: auto; transition: transform .15s; }
.cc-shell .cc-nav-group[open] .cc-nav-chevron { transform: rotate(180deg); }
.cc-shell .cc-nav-group > summary:hover { background: var(--cc-subtle); color: var(--cc-ink); }
.cc-shell .cc-nav-group-title svg, .cc-shell .cc-nav-link svg { width: 19px; height: 19px; }
.cc-shell .cc-nav-link {
    position: relative; display: flex; gap: 11px; align-items: center; min-height: 44px;
    padding: 9px 12px; margin-block: 3px; border-radius: 10px;
    color: var(--cc-ink-soft); font-size: 13px; line-height: 1.8; text-decoration: none;
    transition: background-color .15s, color .15s;
}
.cc-shell .cc-nav-group .cc-nav-link { margin-inline-start: 12px; }
.cc-shell .cc-nav-link:hover { color: var(--cc-ink); background: var(--cc-subtle); text-decoration: none; }
.cc-shell .cc-nav-link[aria-current="page"] { color: var(--cc-accent); background: var(--cc-accent-soft); font-weight: 750; }
.cc-shell .cc-nav-link[aria-current="page"]::before {
    content: ''; position: absolute; inset-inline-start: 0; inset-block: 14px;
    width: 3px; border-radius: 3px; background: var(--cc-accent);
}
.cc-sidebar-footer { margin-block-start: auto; padding: 24px 10px 0; color: var(--cc-ink-soft); font-size: 11px; }
.cc-sidebar-footer p { margin: 4px 0; overflow-wrap: anywhere; }
.cc-environment-dot { display: inline-block; width: 7px; height: 7px; margin-inline-end: 8px; border-radius: 50%; background: var(--cc-success); }
.cc-workspace { min-width: 0; margin-inline-start: var(--cc-sidebar-width); }
.cc-shell--auth .cc-workspace { margin-inline-start: 0; }
.cc-topbar {
    position: sticky; inset-block-start: 0; z-index: 30; min-height: var(--cc-topbar-height);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 32px; background: var(--cc-surface); border-bottom: 1px solid var(--cc-line);
}
.cc-topbar-heading { min-width: 0; display: flex; align-items: center; gap: 12px; }
.cc-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; color: var(--cc-ink-soft); font-size: 12px; }
.cc-breadcrumb ol { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.cc-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.cc-breadcrumb li + li::before { content: '/'; color: var(--cc-ink-soft); }
.cc-breadcrumb [aria-current="page"], .cc-breadcrumb strong { color: var(--cc-ink); font-weight: 650; }
.cc-topbar-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.cc-shell .cc-icon-button {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px;
    min-height: 44px; padding: 0; border: 1px solid transparent; border-radius: 10px;
    background: transparent; color: var(--cc-ink-soft);
}
.cc-shell .cc-icon-button:hover { color: var(--cc-ink); background: var(--cc-subtle); border-color: var(--cc-line); }
.cc-icon-button svg { width: 20px; height: 20px; }
.cc-shell [data-cc-theme-toggle], .cc-shell [data-cc-nav-open] { display: none; }
.cc-shell-enhanced .cc-shell [data-cc-theme-toggle] { display: inline-flex; }
html[data-cc-theme="light"] .cc-theme-light-icon, html[data-cc-theme="dark"] .cc-theme-dark-icon { display: none; }
.cc-shell .cc-logout { margin: 0; }
.cc-shell .cc-logout button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 13px; font-size: 12px; border-color: var(--cc-line); }
.cc-shell #cc-main { min-width: 0; scroll-margin-block-start: 96px; }
.cc-shell .cc-content { max-width: 1480px; min-width: 0; margin-inline: auto; padding: 28px 32px 44px; }
.cc-shell .cc-content > h1 { font-size: 28px; line-height: 1.65; font-weight: 750; letter-spacing: -.6px; margin-block: 0 12px; }
.cc-shell .cc-content > p { color: var(--cc-ink-soft); max-width: 84ch; }
.cc-shell .cc-content > footer { color: var(--cc-ink-soft); font-size: 12px; margin-block-start: 32px; }

/* Account disclosure remains native and accessible without JavaScript. */
.cc-account { position: relative; min-width: 0; }
.cc-account > summary {
    display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer;
    min-height: 44px; padding: 4px 8px; border-radius: 10px; color: var(--cc-ink);
}
.cc-account > summary::-webkit-details-marker { display: none; }
.cc-account > summary:hover { background: var(--cc-subtle); }
.cc-account-avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: var(--cc-accent-soft); color: var(--cc-accent); border: 1px solid var(--cc-line); font-weight: 750; }
.cc-account-copy { display: grid; max-width: 150px; font-size: 12px; line-height: 1.65; }
.cc-account-copy > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-account-copy small, .cc-account-copy span { color: var(--cc-ink-soft); font-size: 10px; }
.cc-account-panel, .cc-account-menu {
    position: absolute; inset-block-start: calc(100% + 10px); inset-inline-end: 0;
    width: min(300px, calc(100vw - 32px)); padding: 16px; border: 1px solid var(--cc-line);
    border-radius: 14px; box-shadow: var(--cc-shadow-md); background: var(--cc-surface); color: var(--cc-ink); overflow-wrap: anywhere;
}
.cc-account-panel p, .cc-account-menu p { margin: 0 0 6px; }
.cc-account-panel a, .cc-account-menu a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 0; }
.cc-shell .cc-mobile-nav-fallback { display: none; }
.cc-shell [data-cc-nav-dialog] { display: none; }

/* Token migration for existing page content. Page structure stays with its family phase. */
.cc-shell .cc-panel {
    padding: 22px; border-radius: 14px; background: var(--cc-surface); border: 1px solid var(--cc-line);
    box-shadow: var(--cc-shadow-sm), 0 0 24px var(--cc-glow-card), inset 0 1px 0 var(--cc-glow-sheen);
}
.cc-shell button { min-height: 44px; }
.cc-shell button.cc-primary:not(:disabled) {
    box-shadow: inset 0 1px 0 var(--cc-glow-sheen), 0 3px 12px var(--cc-glow-button), 0 0 18px var(--cc-glow-card);
}
.cc-shell button.cc-primary:not(:disabled):hover { box-shadow: 0 4px 14px var(--cc-glow-button-hover), 0 0 24px var(--cc-glow-button); }
.cc-shell button.cc-danger:hover { color: var(--cc-surface-sunken); }
.cc-shell :is(input,select,textarea) { accent-color: var(--cc-accent); }
.cc-shell .cc-form :is(input,select,textarea):focus { outline: 3px solid var(--cc-focus); outline-offset: 2px; box-shadow: none; }
.cc-shell .cc-form :is(input,select,textarea):disabled { background: var(--cc-subtle); }
.cc-shell .cc-table-wrap { width: 100%; max-width: 100%; border: 1px solid var(--cc-line); border-radius: 14px; overflow-x: auto; background: var(--cc-surface); }
.cc-shell .cc-table { background: var(--cc-surface); }
.cc-shell .cc-table th { background: var(--cc-subtle); }
.cc-shell .cc-table tbody tr:last-child td { border-bottom: 0; }
.cc-shell .cc-table td { color: var(--cc-ink); }
.cc-shell :is(.cc-form,.cc-form label,.cc-form .cc-field,.cc-form fieldset,.cc-actions,.cc-metric-grid) { min-width: 0; }
.cc-shell .cc-form-inline { grid-template-columns: repeat(auto-fit,minmax(min(100%,180px),1fr)); }
.cc-shell .cc-contact-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); }
.cc-shell .cc-dashboard-columns { grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.cc-shell .cc-pipeline { max-width: 100%; }
.cc-shell .mud-alert { border-radius: 10px; }
.cc-shell .mud-alert-text-info { color: var(--cc-info); background: var(--cc-info-soft); }
.cc-shell .mud-alert-text-success { color: var(--cc-success); background: var(--cc-success-soft); }
.cc-shell .mud-alert-text-warning { color: var(--cc-warn); background: var(--cc-warn-soft); }
.cc-shell .mud-alert-text-error { color: var(--cc-danger); background: var(--cc-danger-soft); }
.cc-shell :is(.arta-dialog,.arta-toolbar,.arta-dialog-trigger) {
    --arta-surface: var(--cc-surface); --arta-ink: var(--cc-ink); --arta-muted: var(--cc-ink-soft);
    --arta-line: var(--cc-line); --arta-border: var(--cc-line-strong); --arta-brand: var(--cc-accent);
    --arta-on-brand: var(--cc-accent-ink); --arta-subtle: var(--cc-subtle); --arta-danger: var(--cc-danger);
    --arta-danger-soft: var(--cc-danger-soft); --arta-focus: var(--cc-focus); --arta-glow: var(--cc-glow-button);
}

/* Login/security requests retain a small light header, outside the operator theme. */
.cc-auth-shell { min-height: 100dvh; background: #f5f6f8; color: #182b34; color-scheme: light; }
.cc-auth-header {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px;
    padding: 14px 32px; background: #fff; border-bottom: 1px solid #dce4e6;
}
.cc-auth-header .cc-wordmark { color: #566972; }
.cc-auth-shell .cc-content { max-width: 1200px; margin-inline: auto; padding-inline: 20px; }

@media (max-width: 960px) {
    .cc-sidebar { display: none; }
    .cc-workspace { margin-inline-start: 0; }
    .cc-topbar { padding: 12px 20px; gap: 12px; }
    .cc-shell .cc-content { padding: 24px 20px 36px; }
    .cc-nav-enhanced .cc-shell [data-cc-nav-open] { display: inline-flex; }
    html:not(.cc-nav-enhanced) .cc-shell .cc-mobile-nav-fallback {
        display: block; padding: 12px 20px; background: var(--cc-surface); border-bottom: 1px solid var(--cc-line);
    }
    .cc-mobile-nav-fallback > summary { cursor: pointer; min-height: 44px; padding: 8px 0; font-weight: 650; }
    .cc-shell [data-cc-nav-dialog][open] {
        position: fixed; inset-block: 0; inset-inline-start: 0; inset-inline-end: auto; margin: 0;
        width: min(340px, calc(100% - 28px)); height: 100dvh; max-height: 100dvh; max-width: none;
        display: flex; flex-direction: column; padding: 0; color: var(--cc-ink); background: var(--cc-surface);
        border: 0; border-inline-end: 1px solid var(--cc-line); border-radius: 0; box-shadow: var(--cc-shadow-md);
        overflow: hidden; overscroll-behavior: contain; font: inherit;
    }
    .cc-shell [data-cc-nav-dialog]::backdrop { background: var(--cc-overlay); backdrop-filter: blur(3px); }
    .cc-mobile-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 20px; border-bottom: 1px solid var(--cc-line); flex: 0 0 auto; }
    .cc-mobile-menu-heading h2 { font-size: 18px; margin: 0; }
    .cc-mobile-menu > nav { padding: 18px; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
    .cc-mobile-menu-footer { padding: 16px 20px max(16px,env(safe-area-inset-bottom)); border-top: 1px solid var(--cc-line); flex: 0 0 auto; color: var(--cc-ink-soft); font-size: 12px; }
}
@media (max-width: 600px) {
    .cc-topbar { min-height: 72px; padding: 10px 16px; align-items: center; gap: 8px; }
    .cc-topbar-heading { gap: 8px; flex: 1 1 auto; }
    .cc-topbar-actions { gap: 4px; }
    .cc-breadcrumb { font-size: 11px; gap: 4px; }
    .cc-breadcrumb ol { gap: 4px; }
    .cc-account-copy { display: none; }
    .cc-account > summary { padding: 4px; }
    .cc-account > summary > svg { display: none; }
    .cc-account-panel, .cc-account-menu { position: fixed; inset-block-start: 76px; inset-inline: 16px; width: auto; max-height: calc(100dvh - 92px); overflow-y: auto; }
    .cc-shell .cc-logout button { font-size: 11px; padding-inline: 9px; }
    .cc-shell .cc-content { padding: 22px 16px 32px; }
    .cc-shell .cc-content > h1 { font-size: 24px; }
    .cc-shell .cc-panel { padding: 18px; }
    .cc-shell .cc-form-inline { grid-template-columns: minmax(0,1fr); }
    .cc-shell .cc-table { min-width: 600px; }
    .cc-shell .cc-info-grid { grid-template-columns: minmax(0,1fr); }
    .cc-shell .cc-login { margin-block: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .cc-shell *, .cc-shell *::before, .cc-shell *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
    .cc-shell :is(.cc-sidebar,.cc-topbar,.cc-panel,.cc-account-panel,.cc-account-menu,.cc-table-wrap,[data-cc-nav-dialog]) { border: 1px solid CanvasText; box-shadow: none; }
    .cc-shell :is(button,.cc-nav-link[aria-current="page"]) { border: 1px solid ButtonText; box-shadow: none; }
    .cc-shell .cc-nav-link[aria-current="page"] { font-weight: 800; text-decoration: underline; }
    .cc-shell .cc-nav-link[aria-current="page"]::before { background: Highlight; }
    .cc-shell [data-cc-nav-dialog]::backdrop { background: Canvas; opacity: .7; backdrop-filter: none; }
}
@media print {
    .cc-shell .cc-sidebar, .cc-shell .cc-topbar, .cc-shell .cc-mobile-nav-fallback, .cc-shell [data-cc-nav-dialog], .cc-shell :is(.cc-shell-skip,.cc-skip-link) { display: none !important; }
    .cc-shell .cc-workspace { margin: 0; }
    .cc-shell, .cc-shell .cc-content, .cc-shell .cc-panel, .cc-shell .cc-table { color: #000; background: #fff; box-shadow: none; }
    .cc-shell .cc-content { max-width: none; padding: 0; }
    .cc-shell .cc-panel { break-inside: avoid; }
    .cc-shell .cc-table-wrap { overflow: visible; border: 0; }
    .cc-shell .cc-table { min-width: 0; }
    .cc-shell .cc-table :is(th,td) { color: #000; background: #fff; }
}