/* NOC-MGT | Premium App Theme — visual layer only
   Dark is the default. Light is opt-in. No changes to business logic. */
:root,
html[data-mgt-theme="dark"]{
  color-scheme:dark;
  --noc-bg:#0a0e12;
  --noc-bg-soft:#10161b;
  --noc-sidebar:#0c1115;
  --noc-surface:rgba(20,27,33,.87);
  --noc-surface-solid:#171f25;
  --noc-surface-raised:#1c262c;
  --noc-glass:rgba(25,36,39,.73);
  --noc-border:rgba(191,222,207,.115);
  --noc-border-strong:rgba(160,201,179,.20);
  --noc-ink:#edf3f2;
  --noc-muted:#9aada9;
  --noc-muted-soft:#718781;
  --noc-green:#5dcd96;
  --noc-green-faint:rgba(78,193,125,.12);
  --noc-orange:#f39a4a;
  --noc-orange-hover:#ffad63;
  --noc-orange-ink:#241207;
  --noc-shadow:0 12px 32px rgba(0,0,0,.19);
  --bg:var(--noc-bg);
  --ink:var(--noc-ink);
  --muted:var(--noc-muted);
  --border:var(--noc-border);
  --green:var(--noc-green);
  --forest:var(--noc-sidebar);
}
html[data-mgt-theme="light"]{
  color-scheme:light;
  --noc-bg:#f4f6f5;
  --noc-bg-soft:#e9efec;
  --noc-surface:rgba(255,255,255,.88);
  --noc-surface-solid:#ffffff;
  --noc-surface-raised:#f4f8f6;
  --noc-glass:rgba(255,255,255,.81);
  --noc-border:rgba(39,79,62,.11);
  --noc-border-strong:rgba(35,91,59,.20);
  --noc-ink:#20332e;
  --noc-muted:#64776f;
  --noc-muted-soft:#80928b;
  --noc-green:#268558;
  --noc-green-faint:rgba(35,135,86,.08);
  --noc-orange:#ef8934;
  --noc-orange-hover:#e8771a;
  --noc-orange-ink:#fff;
  --noc-shadow:0 10px 27px rgba(17,54,35,.055);
}
html{background:var(--noc-bg)}
body{
  background:
    radial-gradient(ellipse 700px 460px at 91% 1%,rgba(45,149,99,.105),transparent 70%),
    radial-gradient(ellipse 520px 340px at 13% 94%,rgba(57,129,102,.045),transparent 75%),
    var(--noc-bg);
  color:var(--noc-ink);
}
html[data-mgt-theme="light"] body{
  background:
    radial-gradient(ellipse 720px 440px at 100% 0%,rgba(34,148,88,.09),transparent 72%),
    radial-gradient(ellipse 500px 380px at 10% 85%,rgba(255,172,95,.052),transparent 75%),
    var(--noc-bg);
}
a,button,input,select{transition:border-color .18s ease,background-color .18s ease,color .18s ease,box-shadow .18s ease}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--noc-green);outline-offset:3px;
}
.shell,.main{background:transparent}
.sidebar{
  background:linear-gradient(173deg,#0e1519 3%,#0b1014 67%,#0c1513 100%);
  border-right:1px solid rgba(114,177,142,.13);
  box-shadow:6px 0 34px rgba(0,0,0,.14);
}
.brand{padding-top:27px;padding-bottom:25px}
.brand-mark{
  border:1px solid rgba(112,221,157,.55);
  color:#91e2b5;
  background:linear-gradient(138deg,rgba(51,144,92,.19),rgba(28,64,45,.04));
  box-shadow:0 0 27px rgba(50,157,101,.12),inset 0 0 0 1px rgba(255,255,255,.035);
}
.brand strong{letter-spacing:1.2px}
.brand small{color:#829e94}
.workspace{
  background:linear-gradient(115deg,rgba(65,108,87,.19),rgba(255,255,255,.025));
  border:1px solid rgba(115,170,139,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.workspace-icon{background:rgba(94,175,127,.22);color:#a1efbf;border:1px solid rgba(113,199,145,.23)}
.workspace b{color:#e5f1e9}
.workspace small,.workspace-chev{color:#86a99a}
.nav-label{color:#719889}
.nav-link{color:#adbfba;font-weight:570;letter-spacing:.05px;min-height:42px}
.nav-link .nav-icon{color:#8fa79f}
.nav-link:hover{background:rgba(104,170,125,.09);color:#f2faf4}
.nav-link.active{
  background:linear-gradient(92deg,rgba(72,163,110,.22),rgba(48,141,93,.075));
  box-shadow:inset 0 0 0 1px rgba(101,194,140,.13),0 0 20px rgba(47,160,91,.075);
  color:#e7fbec;border-left-color:#70d99c;
}
.nav-link.active .nav-icon{color:#89e7af}
.sidebar-bottom{border-color:rgba(137,189,151,.13)}
.side-status{color:#c9f3d6}
.dot{background:#71db9e;box-shadow:0 0 12px rgba(71,223,135,.34)}
.sidebar-bottom p,.sidebar-bottom small{color:#7b9a8e}
.topbar{
  background:var(--noc-glass);
  border-bottom:1px solid var(--noc-border);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(255,255,255,.015);
  position:relative;z-index:2;
}
.breadcrumb{color:var(--noc-muted-soft)}
.breadcrumb strong{color:var(--noc-ink)}
.breadcrumb span{color:var(--noc-muted-soft)}
.avatar{
  background:linear-gradient(145deg,rgba(59,146,92,.23),rgba(58,101,76,.13));
  color:var(--noc-green);border:1px solid var(--noc-border-strong);
}
.top-demo{
  background:rgba(69,163,105,.10);
  border:1px solid rgba(82,175,116,.20);
  color:var(--noc-green);
  box-shadow:0 0 20px rgba(57,180,96,.035);
}
.content{position:relative;z-index:1}
.eyebrow{color:var(--noc-green);letter-spacing:2px}
.page-head h1{color:var(--noc-ink);font-size:28px;font-weight:780}
.page-head p{color:var(--noc-muted)}
.stat-card,.panel{
  background:var(--noc-surface);
  border:1px solid var(--noc-border);
  color:var(--noc-ink);
  box-shadow:var(--noc-shadow),inset 0 1px 0 rgba(255,255,255,.026);
}
.stat-card{position:relative;overflow:hidden}
.stat-card:before{
  content:"";pointer-events:none;position:absolute;top:-44px;right:-48px;width:140px;height:140px;
  border-radius:50%;background:radial-gradient(circle,rgba(82,202,130,.085),transparent 72%);
}
.stat-card:nth-child(2):before{background:radial-gradient(circle,rgba(244,149,64,.075),transparent 70%)}
.stat-top,.stat-foot{color:var(--noc-muted)}
.stat-icon{
  background:rgba(67,170,103,.12);
  color:var(--noc-green);
  border:1px solid rgba(86,187,121,.095);
}
.stat-card:nth-child(2) .stat-icon{color:var(--noc-orange);background:rgba(244,145,66,.095)}
.stat-value,.panel h2,.table-toolbar h2{color:var(--noc-ink)}
.panel-heading a{color:var(--noc-green)}
.panel-heading p,.small-note{color:var(--noc-muted)}
.activity-row,.metric-line{border-bottom:1px solid var(--noc-border)}
.activity-icon{background:var(--noc-green-faint);color:var(--noc-green);border:1px solid var(--noc-border)}
.activity-text b,.activity-value,.metric-line b{color:var(--noc-ink)}
.activity-text small{color:var(--noc-muted)}
.quick-action{
  background:var(--noc-surface-raised);border:1px solid var(--noc-border);color:var(--noc-ink);
  min-height:90px;position:relative;overflow:hidden;
}
.quick-action:after{
  content:"";position:absolute;inset:auto -30px -65px auto;width:126px;height:126px;border-radius:50%;
  background:radial-gradient(circle,rgba(52,174,107,.12),transparent 70%);pointer-events:none;
}
.quick-action span{color:var(--noc-green)}
.quick-action:nth-child(3) span,.quick-action:nth-child(4) span{color:var(--noc-orange)}
.quick-action:hover{background:var(--noc-glass);border-color:rgba(91,198,133,.35);transform:translateY(-1px)}
.btn{
  background:var(--noc-surface-raised);color:var(--noc-ink);border:1px solid var(--noc-border-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.btn:hover:not(:disabled){filter:none;background:var(--noc-green-faint);border-color:rgba(101,194,137,.4)}
.btn.primary{
  background:linear-gradient(112deg,#e98431,#ffa651);
  color:#241406;border-color:rgba(255,186,108,.34);
  box-shadow:0 4px 18px rgba(220,113,25,.15),inset 0 1px 0 rgba(255,255,255,.24);
}
.btn.primary:hover:not(:disabled){
  background:linear-gradient(112deg,#f39847,#ffba75);
  border-color:rgba(255,195,128,.65);
  box-shadow:0 6px 23px rgba(219,109,20,.23);
}
.btn.ghost{background:var(--noc-surface-raised)}
.btn.danger{color:#ee9898;border-color:rgba(219,102,102,.3)}
.btn.danger:hover{background:rgba(184,71,71,.10);border-color:rgba(219,102,102,.5)}
.btn.small{box-shadow:none}
.demo-note{
  background:linear-gradient(112deg,rgba(51,132,84,.125),rgba(26,78,56,.075));
  border:1px solid rgba(78,169,107,.20);color:var(--noc-muted);
}
.demo-note b{color:var(--noc-green)}
.table-panel{overflow:hidden}
.table-toolbar{border-bottom:1px solid var(--noc-border)}
.table-toolbar small{color:var(--noc-muted)}
.table-scroll{background:transparent}
thead,th{background:var(--noc-surface-raised);color:var(--noc-muted)}
thead th{border-bottom:1px solid var(--noc-border)}
td{color:var(--noc-muted);border-top:1px solid var(--noc-border)}
td strong{color:var(--noc-ink)}
td small{color:var(--noc-muted-soft)}
tbody tr:hover{background:var(--noc-green-faint)}
.search,.field input,.field select{
  background:var(--noc-bg-soft);color:var(--noc-ink);border:1px solid var(--noc-border-strong);
}
.search::placeholder,.field input::placeholder{color:var(--noc-muted-soft)}
.search:focus,.field input:focus,.field select:focus{border-color:var(--noc-green);outline:none;box-shadow:0 0 0 3px rgba(57,175,105,.115)}
.field label{color:var(--noc-muted)}
.pill{background:rgba(76,177,105,.12);color:var(--noc-green)}
.pill.warning{background:rgba(238,166,59,.12);color:#f2b360}
.pill.danger{background:rgba(224,100,107,.14);color:#f1a0a2}
.pill.neutral{background:var(--noc-surface-raised);color:var(--noc-muted)}
.empty{color:var(--noc-muted)}
.empty h3{color:var(--noc-ink)}
.callout{
  background:var(--noc-green-faint);border:1px solid var(--noc-border-strong);color:var(--noc-muted);
}
.tab{background:var(--noc-surface-raised);border:1px solid var(--noc-border);color:var(--noc-muted)}
.tab:hover{border-color:var(--noc-border-strong);color:var(--noc-ink)}
.tab.active{background:rgba(77,167,110,.16);color:var(--noc-green);border-color:rgba(100,194,130,.25)}
.chart-bar{background:linear-gradient(0deg,rgba(48,130,84,.24),rgba(98,221,150,.8))}
.chart-bar:nth-child(odd){background:linear-gradient(0deg,rgba(141,80,38,.14),rgba(247,160,84,.83))}
.mini-chart{border-color:var(--noc-border)}
.chart-labels{color:var(--noc-muted)}
.modal-backdrop{background:rgba(3,8,10,.77)}
.modal{
  background:var(--noc-surface-solid);
  border:1px solid var(--noc-border-strong);
  color:var(--noc-ink);
  box-shadow:0 30px 85px rgba(0,0,0,.45),0 0 60px rgba(28,117,73,.07);
}
.modal-header,.modal-footer{border-color:var(--noc-border)}
.modal-header h2{color:var(--noc-ink)}
.modal-close{color:var(--noc-muted);border-radius:7px}
.modal-close:hover{color:var(--noc-ink);background:var(--noc-green-faint)}
.form-hint{color:var(--noc-muted)}
.toast{background:var(--noc-surface-solid);color:var(--noc-ink);border:1px solid rgba(86,185,120,.28);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.footer{border-color:var(--noc-border);color:var(--noc-muted-soft)}
.theme-switch,.sidebar-collapse{
  border:1px solid var(--noc-border-strong);background:var(--noc-surface-raised);
  color:var(--noc-ink);border-radius:10px;min-height:36px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:7px 11px;font-size:12px;font-weight:650;
}
.theme-switch:hover,.sidebar-collapse:hover{background:var(--noc-green-faint);border-color:rgba(100,191,130,.34)}
.theme-switch .theme-symbol{font-size:16px;color:var(--noc-orange)}
.sidebar-collapse{height:34px;width:34px;padding:0;font-size:18px;flex:none}
.top-left{gap:14px}
html[data-mgt-theme="light"] .stat-card,
html[data-mgt-theme="light"] .panel{box-shadow:var(--noc-shadow),inset 0 1px 0 rgba(255,255,255,.92)}
html[data-mgt-theme="light"] .sidebar{background:linear-gradient(168deg,#10171a,#0b1215 72%,#101914)}
html[data-mgt-theme="light"] .demo-note{background:linear-gradient(110deg,rgba(45,149,82,.065),rgba(30,153,100,.035))}
html[data-mgt-theme="light"] .btn.primary{color:white;background:linear-gradient(115deg,#e87924,#f49746)}
html[data-mgt-theme="light"] .btn.primary:hover:not(:disabled){background:linear-gradient(115deg,#d86b1b,#ea8935)}
html[data-mgt-theme="light"] .pill.warning{color:#97590d}
html[data-mgt-theme="light"] .pill.danger{color:#a73745}
html[data-mgt-theme="light"] .stat-card:nth-child(2) .stat-icon{color:#ce732e}
html[data-mgt-theme="light"] .modal{box-shadow:0 26px 72px rgba(8,30,20,.16)}
/* Optional compact left rail for desktop workspace. */
@media(min-width:761px){
  body.sidebar-compact .sidebar{width:78px}
  body.sidebar-compact .brand{justify-content:center;padding:25px 10px}
  body.sidebar-compact .brand>span:last-child,
  body.sidebar-compact .workspace>span:not(.workspace-icon),
  body.sidebar-compact .workspace>div,
  body.sidebar-compact .nav-label,
  body.sidebar-compact .sidebar-bottom p,
  body.sidebar-compact .sidebar-bottom small,
  body.sidebar-compact .sidebar-bottom .side-status{display:none}
  body.sidebar-compact .workspace{margin:0 12px 20px;padding:9px;justify-content:center}
  body.sidebar-compact .sidebar nav{padding:0 10px}
  body.sidebar-compact .nav-link{
    justify-content:center;font-size:0;gap:0;padding:12px 8px;
    min-height:46px;white-space:nowrap;overflow:hidden;
  }
  body.sidebar-compact .nav-link.active{padding:12px 8px;border-left:0;border-bottom:2px solid #70d99c}
  body.sidebar-compact .nav-link .nav-icon{font-size:20px;width:auto;flex:none}
  body.sidebar-compact .sidebar-bottom{padding:14px 0}
}
@media(max-width:760px){
  .sidebar-collapse{display:none}
  .topbar{padding:0 14px}
  .top-actions{gap:8px}
  .theme-switch{height:34px;width:36px;min-height:34px;padding:0}
  .theme-switch .theme-label{display:none}
  .theme-switch .theme-symbol{font-size:18px}
  .page-head h1{font-size:24px}
  .quick-action:hover{transform:none}
}
@media(max-width:400px){
  .topbar{padding:0 12px}
  .top-actions .top-demo{display:none}
  .breadcrumb{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  a,button,input,select{transition:none}
  .quick-action:hover{transform:none}
}