:root {
  --ui-bg: #edf1f7;
  --ui-surface: #fff;
  --ui-surface-soft: #f4f7fb;
  --ui-text: #17233b;
  --ui-muted: #52647f;
  --ui-line: #dbe3ef;
  --ui-accent: #245fe5;
  --ui-focus: #005fcc;
  --ui-radius: 14px;
  --ui-space: 8px;
}
.theme-dark {
  --ui-bg: #111827;
  --ui-surface: #202b3d;
  --ui-surface-soft: #182235;
  --ui-text: #f2f6fc;
  --ui-muted: #c2cee0;
  --ui-line: #536176;
  --ui-accent: #9cc5ff;
  --ui-focus: #ffcf66;
}
.ui-icon {width:20px;height:20px;flex:none;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sidebar .nav-icon {width:22px;height:22px;flex:none;display:grid;place-items:center;font-size:inherit}
.sidebar a,.sidebar .nav-item {min-height:46px;display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;column-gap:13px;padding:9px 12px;border-radius:var(--ui-radius);color:#d3ddec;text-decoration:none;margin:2px 0}
.sidebar a:hover,.sidebar a.active {background:#285cba;color:#fff}
.sidebar a:focus-visible,.brand-mark:focus-visible,.mobile-nav-toggle:focus-visible,.nav-backdrop:focus-visible {outline:3px solid var(--ui-focus);outline-offset:2px}
.sidebar .nav-unavailable {color:#98a9c1;cursor:default}
.nav-unavailable .nav-label {display:block;min-width:0}
.nav-soon {display:block;font-size:10px;color:#b9c7db;white-space:nowrap;line-height:1.3}
.sidebar.collapsed {width:76px}
.sidebar.collapsed a,.sidebar.collapsed .nav-item {grid-template-columns:22px;justify-content:center;padding-inline:12px}
.sidebar.collapsed .nav-label {display:none}
.sidebar.collapsed a,.sidebar.collapsed .nav-item {position:relative}
.sidebar.collapsed a:hover::after,.sidebar.collapsed a:focus-visible::after,.sidebar.collapsed .nav-item:hover::after {content:attr(data-label);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);padding:7px 10px;border-radius:8px;background:#101a2c;color:#fff;white-space:nowrap;z-index:90;font-size:12px;box-shadow:0 8px 24px #0004}
.compact-brand {display:none;color:var(--ui-text);font-weight:700;white-space:nowrap}
.crumb {color:#4b5c78}
.crumb strong {color:var(--ui-text)}
.theme-dark .crumb {color:#c2cee0}
.sidebar.collapsed + .nav-backdrop + .main .compact-brand {display:inline}
.sidebar.collapsed + .nav-backdrop + .main .crumb {display:none}
.mobile-nav-toggle,.nav-backdrop {display:none}
.top-actions .icon-button,.notification-menu>summary,.user-menu>summary {width:46px;height:46px;min-width:44px;min-height:44px;display:grid;place-items:center;padding:0;line-height:1}
.top-actions .icon-button .ui-icon,.user-menu>summary .ui-icon {width:21px;height:21px}
.theme-dark .top-actions .icon-button {background:var(--ui-surface);color:var(--ui-text)}
.theme-dark #theme-toggle .icon-moon,.icon-sun {display:none}
.theme-dark #theme-toggle .icon-sun {display:block}
.notification-popover {right:0;max-width:calc(100vw - 24px);border:1px solid var(--ui-line);background:var(--ui-surface);color:var(--ui-text)}
.notification-popover p {color:var(--ui-muted)}
.theme-dark .notification-popover {background:var(--ui-surface)}
.global-search {background:var(--ui-surface);color:var(--ui-accent)}
.global-search input {color:var(--ui-text)}
.global-search input::placeholder {color:var(--ui-muted);opacity:1}
.theme-dark .search-select-input {background:var(--ui-surface-soft)!important;color:var(--ui-text)!important;border-color:var(--ui-line)!important}
.panel,.card {background:var(--ui-surface);color:var(--ui-text)}
.muted {color:var(--ui-muted)}
.ui-empty {padding:24px;color:var(--ui-muted);text-align:center}
.ui-selected {background:#eaf3ff;border-color:#81b7ff}
.priority.P1 {color:#9f1239}
.priority.P2 {color:#9a3412}
.button.success {background:#047857}
.theme-dark .ui-selected {background:#284264;border-color:#83b6f7}
.ui-tabs {display:flex;gap:18px;overflow-x:auto;border-bottom:1px solid var(--ui-line)}
.ui-tabs :is(a,button) {white-space:nowrap}
.ui-tabs :is(a,button):focus-visible,.ui-drawer :is(button,input,textarea,select):focus-visible,.button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {outline:3px solid var(--ui-focus);outline-offset:2px}
a:focus-visible,.user-menu>summary:focus-visible,.notification-menu>summary:focus-visible {outline:3px solid var(--ui-focus);outline-offset:2px}
.theme-dark .problem-row-foot,.theme-dark .incident-item small,.theme-dark .incident-item .muted {color:var(--ui-muted)}
.theme-dark .problem-row .item-id,.theme-dark .problem-overview .item-id {color:#b7c7dd}
@media (max-width:1120px) {
  .sidebar {width:76px;padding-inline:8px}
  .sidebar a,.sidebar .nav-item {grid-template-columns:22px;justify-content:center;padding-inline:12px;position:relative}
  .sidebar .nav-label,.sidebar .nav-section,.sidebar .brand-copy {display:none}
  .sidebar a:hover::after,.sidebar a:focus-visible::after,.sidebar .nav-item:hover::after {content:attr(data-label);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);padding:7px 10px;border-radius:8px;background:#101a2c;color:#fff;white-space:nowrap;z-index:90;font-size:12px}
  .compact-brand {display:inline}
  .crumb {display:none}
}
@media (max-width:760px) {
  .mobile-nav-toggle {width:44px;height:44px;border:0;border-radius:12px;background:var(--ui-surface);color:var(--ui-text);display:grid;place-items:center;flex:none}
  .nav-backdrop {display:none;position:fixed;inset:0;z-index:79;border:0;background:#0f172a99}
  .sidebar {display:flex;position:fixed;z-index:80;top:0;bottom:0;left:0;width:min(300px,85vw);padding:18px 13px;transform:translateX(-105%);transition:transform .18s;overflow-y:auto}
  .sidebar .nav-label,.sidebar .nav-section,.sidebar .brand-copy {display:initial}
  .sidebar a,.sidebar .nav-item {grid-template-columns:22px minmax(0,1fr);justify-content:initial;padding-inline:12px}
  .sidebar.collapsed {width:min(300px,85vw)}
  .sidebar.collapsed .nav-label,.sidebar.collapsed .nav-section,.sidebar.collapsed .brand-copy {display:initial}
  .sidebar.collapsed a,.sidebar.collapsed .nav-item {grid-template-columns:22px minmax(0,1fr);justify-content:initial}
  .nav-open .sidebar {transform:translateX(0)}
  .nav-open .nav-backdrop {display:block}
  .nav-open {overflow:hidden}
  .topbar {display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:9px;padding:12px}
  .compact-brand,.sidebar.collapsed + .nav-backdrop + .main .compact-brand {display:inline;overflow:hidden;text-overflow:ellipsis}
  .global-search {grid-column:1/-1;grid-row:2;width:100%}
  .top-actions {grid-column:3;grid-row:1;margin:0;gap:5px}
  .top-actions .icon-button,.notification-menu>summary,.user-menu>summary {width:42px;height:42px}
  .notification-popover {position:fixed;top:64px;right:12px;width:min(320px,calc(100vw - 24px))}
  .user-menu[open] .menu {right:0;top:48px;max-width:calc(100vw - 24px)}
}
@media (max-width:440px) {
  .compact-brand {font-size:12px;max-width:95px}
  .top-actions {gap:3px}
  .top-actions .icon-button,.notification-menu>summary,.user-menu>summary {width:44px;height:44px;min-width:44px;min-height:44px}
}
