/**
 * Flight NMS — White NOC Dashboard Theme
 * Aligned pixel-for-pixel to the Pdev Admin Dashboard PDF reference.
 * Inter + JetBrains Mono · Blue accent system · UniFi-style NOC console.
 */

/* === Variables === */
:root {
  --ink:#0b1e3b; --ink-2:#475569; --ink-3:#94a3b8;
  --paper:#f6f8fb; --paper-2:#f1f5f9; --surface:#ffffff;
  --rule:#e5edf5; --rule-2:#d8e2ee;
  --b-50:#eff6ff; --b-100:#dbeafe; --b-200:#bfdbfe; --b-300:#93c5fd; --b-400:#60a5fa;
  --b-500:#3b82f6; --b-600:#2563eb; --b-700:#1d4ed8; --b-800:#1e40af; --b-900:#0c2a6b;
  --indigo:#6366f1; --indigo-2:#4f46e5;
  --amber:#f59e0b; --amber-2:#b45309;
  --green:#16a34a; --green-2:#047857;
  --red:#dc2626; --red-2:#991b1b;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* === Reset & Base === */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--paper);font-family:var(--sans);color:var(--ink);font-size:14px;line-height:1.4;}
a{color:var(--b-600);text-decoration:none;}
a:hover{color:var(--b-700);text-decoration:underline;}

/* === App Shell === */
.nms-shell{display:grid;grid-template-columns:220px 1fr;grid-template-rows:auto 1fr;min-height:100vh;}

/* === Sidebar === */
.nms-sidebar{
  grid-column:1;grid-row:1/span 2;
  position:sticky;top:0;align-self:start;height:100vh;
  background:var(--surface);border-right:1px solid var(--rule);
  display:flex;flex-direction:column;overflow-y:auto;
}
.nms-sidebar-header{padding:18px 18px 16px;border-bottom:1px solid var(--rule);}
/* Brand lockup — single U icon, title, subtitle */
.nms-brand{
  display:flex;align-items:center;gap:10px;
}
.nms-brand-mark{
  display:inline-grid;place-items:center;
  width:36px;height:36px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,#1d4ed8,#2563eb);color:#fff;
  font:700 15px/1 var(--mono);letter-spacing:.04em;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 4px 10px rgba(37,99,235,.25);
}
.nms-brand-copy{display:flex;flex-direction:column;gap:1px;}
.nms-brand-title{
  font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.1;
}
.nms-brand-subtitle{
  font:500 11px var(--mono);color:var(--ink-2);letter-spacing:.06em;
}
/* ENV card — compact single-line */
.nms-env-card{
  margin-top:12px;padding:6px 10px;border:1px solid var(--rule);border-radius:7px;
  background:linear-gradient(180deg,#f7fbff,#eef4fb);
  display:flex;align-items:center;gap:8px;
}
.nms-env-label{font:600 10px var(--mono);color:var(--ink-2);letter-spacing:.14em;}
.nms-env-value{font:600 11px var(--mono);color:var(--b-700);flex:1;}
.nms-env-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.18);flex-shrink:0;}

.nms-sidebar-section-label{
  font:600 10px var(--mono);color:var(--ink-3);letter-spacing:.14em;
  padding:14px 20px 6px;text-transform:uppercase;
}
.nms-sidebar-nav{list-style:none;margin:0;padding:0 12px 6px;}
.nms-sidebar-nav li a{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:7px;color:var(--ink);
  font-size:13.5px;font-weight:500;line-height:1.2;position:relative;transition:background .15s;
  text-decoration:none;
}
.nms-sidebar-nav li+li{margin-top:2px;}
.nms-sidebar-nav li a:hover{background:var(--paper);text-decoration:none;color:var(--ink);}
.nms-sidebar-nav li a.active{background:#eef4fb;color:var(--b-700);font-weight:600;text-decoration:none;}
.nms-sidebar-nav li a.active::before{
  content:"";position:absolute;left:-12px;top:6px;bottom:6px;width:3px;
  border-radius:0 3px 3px 0;background:var(--b-600);
}
.nms-sidebar-nav li a .material-icons{font-size:18px;color:var(--ink-2);width:18px;text-align:center;}
.nms-sidebar-nav li a.active .material-icons{color:var(--b-700);}
.nms-nav-badge{
  margin-left:auto;font:600 10px var(--mono);
  padding:2px 6px;border-radius:999px;background:#fff;border:1px solid var(--rule);color:var(--ink-2);
}
.nms-sidebar-nav li a.active .nms-nav-badge{background:#dbeafe;border-color:#bfdbfe;color:var(--b-700);}
.nms-nav-badge-alert{background:#fef2f2!important;border-color:#fecaca!important;color:var(--red-2)!important;}
.nms-nav-placeholder{opacity:.6;}

.nms-sidebar-footer{margin-top:auto;padding:14px 18px;border-top:1px solid var(--rule);}
.lab-card{
  background:linear-gradient(180deg,#fffaf0,#fff5e0);border:1px solid #fde6b6;
  border-radius:10px;padding:10px 12px;
}
.lab-card-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 3px rgba(245,158,11,.2);vertical-align:middle;margin-right:6px;
}
.lab-card strong{font-size:12.5px;color:#7a4a07;}
.lab-card p{margin:6px 0 0;font-size:11.5px;color:#7a4a07;line-height:1.35;}

/* === Main Area === */
.nms-main{grid-column:2;grid-row:1/span 2;display:flex;flex-direction:column;min-width:0;}

/* === Topbar === */
.nms-topbar{
  position:sticky;top:0;z-index:5;
  background:var(--surface);border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:16px;padding:12px 24px;
}
.nms-topbar-breadcrumb{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:13px;white-space:nowrap;}
.nms-topbar-breadcrumb b,.nms-topbar-breadcrumb span:last-child{color:var(--ink);font-weight:600;}
.nms-topbar-sep{color:var(--ink-3);}
.nms-topbar-center{flex:1;display:flex;justify-content:center;}
.nms-topbar-search{
  display:flex;align-items:center;gap:8px;max-width:420px;width:100%;
  background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:7px 12px;
}
.nms-topbar-search .material-icons{font-size:16px;color:var(--ink-3);}
.nms-topbar-search input{
  border:0;background:transparent;outline:none;flex:1;font:inherit;font-size:13px;color:var(--ink);
}
.nms-topbar-search .kbd{
  font:600 10px var(--mono);padding:2px 6px;border:1px solid var(--rule);
  border-radius:4px;background:#fff;color:var(--ink-2);
}
.nms-topbar-right{display:flex;align-items:center;gap:8px;}
.nms-topbar-chip{
  display:inline-flex;align-items:center;gap:6px;padding:6px 10px;
  border:1px solid var(--rule);border-radius:7px;background:#fff;font-size:12.5px;color:var(--ink);
}
.nms-dot{width:7px;height:7px;border-radius:50%;display:inline-block;}
.nms-dot-green{background:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.18);}
.nms-dot-yellow{background:var(--amber);box-shadow:0 0 0 3px rgba(245,158,11,.18);}
.nms-dot-red{background:var(--red);box-shadow:0 0 0 3px rgba(220,38,38,.18);}
.nms-topbar-link{
  font:500 12px var(--mono);color:var(--b-600);padding:6px 10px;
  border:1px solid var(--b-200);border-radius:7px;background:var(--b-50);
}
.nms-topbar-avatar{
  width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  display:grid;place-items:center;color:#7a4a07;font:700 12px var(--mono);
}
.nms-topbar-user{line-height:1.15;}
.nms-user-name{font-size:13px;font-weight:600;display:block;}
.nms-user-role{font-size:11px;color:var(--ink-2);display:block;}

/* === Content Area === */
.nms-content{padding:20px 24px 60px;flex:1;overflow-y:auto;}
.nms-page{max-width:1200px;}

/* === Page Header === */
.nms-page-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;}
.nms-page-header h2{margin:0;font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--ink);}
.nms-page-sub{margin:6px 0 0;font-size:13.5px;color:var(--ink-2);}
.nms-back-link{font-size:13px;color:var(--b-600);}

/* === Page Tools (time filters, buttons) === */
.nms-page-tools{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
.nms-seg{display:inline-flex;border:1px solid var(--rule);border-radius:8px;background:#fff;overflow:hidden;}
.nms-seg button{
  border:0;background:transparent;padding:7px 12px;font:600 12px var(--mono);
  color:var(--ink-2);cursor:pointer;letter-spacing:.04em;
}
.nms-seg button+button{border-left:1px solid var(--rule);}
.nms-seg button.on{background:#eef4fb;color:var(--b-700);}
.nms-btn{
  display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;
  font:600 13px var(--sans);border:1px solid var(--rule);background:#fff;color:var(--ink);cursor:pointer;
}
.nms-btn:hover{background:var(--paper);}
.nms-btn-primary{background:var(--b-600);border-color:var(--b-600);color:#fff;}
.nms-btn-primary:hover{background:var(--b-700);}
.nms-btn .material-icons{font-size:14px;}

/* === KPI Strip === */
.nms-kpi-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px;}
.nms-kpi{
  background:#fff;border:1px solid var(--rule);border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;
}
.nms-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--b-500);}
.nms-kpi.warn::before{background:var(--amber);}
.nms-kpi.crit::before{background:var(--red);}
.nms-kpi.ok::before{background:var(--green);}
.nms-kpi.idle::before{background:var(--ink-3);}
.nms-kpi-label{font:600 10px var(--mono);color:var(--ink-2);letter-spacing:.14em;text-transform:uppercase;}
.nms-kpi-value{font:700 26px var(--sans);letter-spacing:-.02em;color:var(--ink);line-height:1;}
.nms-kpi-value small{font:600 14px var(--mono);color:var(--ink-2);margin-left:2px;}
.nms-kpi-detail{font-size:11.5px;color:var(--ink-2);}
.nms-kpi-detail .pos{color:var(--green-2);font-weight:600;}
.nms-kpi-detail .neg{color:var(--red-2);font-weight:600;}
.nms-kpi-spark{height:22px;width:100%;}
.nms-kpi-spark polyline{fill:none;stroke-width:1.4;}

/* Legacy card row (still used in some partials) */
.nms-card-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:20px;}
.nms-stat-card{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:14px 16px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;}
.nms-stat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--b-500);}
.nms-stat-card-warn::before{background:var(--red);}
.nms-stat-card-ok::before{background:var(--green);}
.nms-stat-card-amber::before{background:var(--amber);}
.nms-stat-card-idle::before{background:var(--ink-3);}
.nms-stat-value{font-size:26px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.02em;}
.nms-stat-value small{font:600 14px var(--mono);color:var(--ink-2);margin-left:2px;}
.nms-stat-card-warn .nms-stat-value{color:var(--red-2);}
.nms-stat-label{font:600 10px var(--mono);color:var(--ink-2);letter-spacing:.14em;text-transform:uppercase;}
.nms-stat-detail{font-size:11.5px;color:var(--ink-2);}
.nms-stat-detail .pos{color:var(--green-2);font-weight:600;}
.nms-stat-detail .neg{color:var(--red-2);font-weight:600;}

/* === Panels === */
.nms-panel{background:#fff;border:1px solid var(--rule);border-radius:14px;overflow:hidden;margin-bottom:16px;}
.nms-panel-header{
  display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--rule);
}
.nms-panel-header .ttl{font-size:14.5px;font-weight:700;letter-spacing:-.01em;}
.nms-panel-header .ttl span{font-weight:500;color:var(--ink-2);margin-left:8px;font-size:12.5px;}
.nms-panel-header .actions{display:flex;align-items:center;gap:6px;}
.nms-panel-header .tab{
  font:600 11px var(--mono);padding:4px 8px;border-radius:6px;color:var(--ink-2);
  background:transparent;border:1px solid transparent;cursor:pointer;
}
.nms-panel-header .tab.on{background:#eef4fb;color:var(--b-700);border-color:#dbeafe;}
.nms-panel-header .ico{
  width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--rule);
  border-radius:6px;color:var(--ink-2);background:#fff;cursor:pointer;
}
.nms-panel-body{padding:16px 18px;}
.nms-panel-body.nopad{padding:0;}

/* === Grid Layouts === */
.nms-row2{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:16px;}
.nms-row-incidents{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:16px;}

/* === Topology === */
.nms-topo{background:linear-gradient(180deg,#fbfdff,#f4f8fc);}
.nms-topo-stage{
  position:relative;min-height:450px;padding:16px;
  background-image:radial-gradient(rgba(37,99,235,.08) 1px, transparent 1.4px);
  background-size:22px 22px;overflow:hidden;
}
.nms-topo-tier{display:flex;justify-content:center;gap:14px;margin-bottom:24px;flex-wrap:wrap;}
.nms-topo-tier.hub-tier{margin-bottom:16px;}
.nms-topo-tier.phone-tier{justify-content:space-between;gap:6px;}

.nms-node{
  border-radius:12px;background:#fff;border:1px solid var(--rule);
  padding:10px 14px;text-align:center;box-shadow:0 2px 8px rgba(15,23,42,.06);min-width:140px;
}
.nms-node .nm{font-size:12.5px;font-weight:700;}
.nms-node .sub{font:500 10.5px var(--mono);color:var(--ink-2);letter-spacing:.08em;text-transform:uppercase;margin-top:2px;}
.nms-node .badge{
  display:inline-flex;align-items:center;gap:5px;
  font:600 10px var(--mono);color:var(--green-2);
  background:#ecfdf5;border:1px solid #a7f3d0;border-radius:999px;padding:1px 7px;margin-top:4px;
}
.nms-node .badge.warn{color:var(--amber-2);background:#fef3c7;border-color:#fde68a;}
.nms-node .badge.idle{color:var(--ink-2);background:var(--paper);border-color:var(--rule);}
.nms-node.controller{border-color:#bfdbfe;background:linear-gradient(180deg,#fff,#eff6ff);}
.nms-node.hub{background:linear-gradient(180deg,#0c2a6b,#1d4ed8);color:#fff;border-color:#0c2a6b;}
.nms-node.hub .nm{color:#fff;}
.nms-node.hub .sub{color:#bfdbfe;}
.nms-node.store{background:linear-gradient(180deg,#fff,#f3fbf6);border-color:#bbf7d0;}

/* Phone nodes in topology */
.nms-phone-node{width:62px;text-align:center;flex-shrink:0;}
.nms-phone-node .pho{
  width:46px;height:64px;border-radius:8px;background:#fff;border:1.5px solid var(--rule);
  margin:0 auto;position:relative;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;padding:6px 4px 4px;
  box-shadow:0 2px 6px rgba(15,23,42,.06);
}
.nms-phone-node.online .pho{border-color:#86efac;}
.nms-phone-node.warn .pho{border-color:#fde68a;}
.nms-phone-node.crit .pho{border-color:#fecaca;}
.nms-phone-node.idle .pho{border-color:var(--rule-2);background:#f8fafc;}
.nms-phone-node .pho::before{content:"";width:14px;height:3px;border-radius:2px;background:#cbd5e1;display:block;margin-bottom:4px;}
.nms-phone-node .ph-led{
  width:5px;height:5px;border-radius:50%;background:var(--green);
  position:absolute;top:5px;right:5px;box-shadow:0 0 0 2px rgba(22,163,74,.2);
}
.nms-phone-node.warn .ph-led{background:var(--amber);box-shadow:0 0 0 2px rgba(245,158,11,.2);}
.nms-phone-node.crit .ph-led{background:var(--red);box-shadow:0 0 0 2px rgba(220,38,38,.2);}
.nms-phone-node.idle .ph-led{background:var(--ink-3);box-shadow:none;}
.nms-phone-node .ph-body{
  width:30px;height:32px;border-radius:3px;background:linear-gradient(180deg,#eef4fb,#fff);border:1px solid #e2eaf3;
}
.nms-phone-node.online .ph-body{background:linear-gradient(180deg,#dcfce7,#fff);border-color:#bbf7d0;}
.nms-phone-node.warn .ph-body{background:linear-gradient(180deg,#fef3c7,#fff);border-color:#fde68a;}
.nms-phone-node.crit .ph-body{background:linear-gradient(180deg,#fee2e2,#fff);border-color:#fecaca;}
.nms-phone-node.idle .ph-body{background:#f1f5f9;border-color:#e2e8f0;}
.nms-phone-node .id{font:700 10.5px var(--mono);margin-top:4px;letter-spacing:.04em;color:var(--ink);}
.nms-phone-node .st{font:500 9.5px var(--mono);color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em;}

.nms-topo-legend{
  display:flex;gap:12px;align-items:center;justify-content:center;margin-top:16px;
  background:#ffffffd9;backdrop-filter:blur(8px);border:1px solid var(--rule);border-radius:8px;padding:6px 14px;
  font:600 10.5px var(--mono);letter-spacing:.06em;color:var(--ink-2);
}
.nms-topo-legend .item{display:inline-flex;align-items:center;gap:6px;}
.nms-topo-legend .d{width:8px;height:8px;border-radius:50%;}
.nms-topo-legend .d.g{background:var(--green);}
.nms-topo-legend .d.a{background:var(--amber);}
.nms-topo-legend .d.r{background:var(--red);}
.nms-topo-legend .d.i{background:var(--ink-3);}
.nms-topo-legend .d.res{background:var(--indigo);}
.nms-phone-node.reserve .pho{border-color:#c7d2fe;background:#f5f3ff;}
.nms-phone-node.reserve .ph-led{background:var(--indigo);box-shadow:0 0 0 2px rgba(99,102,241,.2);}
.nms-phone-node.reserve .ph-body{background:linear-gradient(180deg,#ede9fe,#fff);border-color:#c7d2fe;}

/* Topology connector lines (CSS-only) */
.nms-topo-connectors{text-align:center;margin:-8px 0 8px;color:var(--b-300);font-size:20px;letter-spacing:4px;}

/* === Alert Stack === */
.nms-alert{
  display:grid;grid-template-columns:8px 1fr auto;gap:10px;align-items:flex-start;
  padding:12px 14px;border-bottom:1px solid var(--rule);
}
.nms-alert:last-child{border-bottom:0;}
.nms-alert .bar{width:3px;border-radius:2px;align-self:stretch;}
.nms-alert.crit .bar{background:var(--red);}
.nms-alert.warn .bar{background:var(--amber);}
.nms-alert.info .bar{background:var(--b-500);}
.nms-alert .tt{font-size:13px;font-weight:600;color:var(--ink);}
.nms-alert .desc{font-size:12px;color:var(--ink-2);margin-top:2px;line-height:1.4;}
.nms-alert .rt{font:600 11px var(--mono);color:var(--ink-2);text-align:right;line-height:1.2;}
.nms-alert .rt b{display:block;color:var(--ink);font-size:14px;}

/* === Tables === */
table.nms-tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
table.nms-tbl thead th{
  text-align:left;padding:9px 14px;background:var(--paper);
  font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  border-bottom:1px solid var(--rule);
}
table.nms-tbl tbody td{padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:middle;color:var(--ink);}
table.nms-tbl tbody tr:last-child td{border-bottom:0;}
table.nms-tbl tbody tr:hover{background:#fafcff;}
table.nms-tbl tbody tr.sel{background:#eef4fb;}
table.nms-tbl td .pid{font:700 12.5px var(--mono);color:var(--ink);}
table.nms-tbl td .sub-row{font-size:11.5px;color:var(--ink-2);}

/* Legacy .nms-table class */
.nms-table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:12.5px;}
.nms-table th{text-align:left;padding:9px 14px;background:var(--paper);font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);border-bottom:1px solid var(--rule);}
.nms-table td{padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:middle;color:var(--ink);}
.nms-table tbody tr:last-child td{border-bottom:0;}
.nms-table tbody tr:hover{background:#fafcff;}
.nms-table-compact th,.nms-table-compact td{padding:6px 10px;}
.nms-cell-truncate{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nms-cell-pass{color:var(--green-2);font-weight:600;}
.nms-cell-fail{color:var(--red-2);font-weight:600;}
.nms-cell-missing{color:var(--amber-2);font-weight:600;}

/* === Chips === */
.nms-chip{
  display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;
  font:600 10.5px var(--mono);letter-spacing:.06em;border:1px solid transparent;
}
.nms-chip .d{width:6px;height:6px;border-radius:50%;}
.nms-chip.ok{background:#ecfdf5;color:var(--green-2);border-color:#a7f3d0;}
.nms-chip.warn{background:#fef3c7;color:var(--amber-2);border-color:#fde68a;}
.nms-chip.crit{background:#fef2f2;color:var(--red-2);border-color:#fecaca;}
.nms-chip.idle{background:var(--paper);color:var(--ink-2);border-color:var(--rule);}
.nms-chip.hold{background:#ede9fe;color:#5b21b6;border-color:#ddd6fe;}
.nms-chip.ready{background:#eff6ff;color:var(--b-700);border-color:#bfdbfe;}
.nms-chip.miss{background:#fef2f2;color:var(--red-2);border-color:#fecaca;}
.nms-chip.partial{background:#fef3c7;color:var(--amber-2);border-color:#fde68a;}
.nms-chip.pend{background:var(--paper);color:var(--ink-2);border-color:var(--rule);}

.nms-step-pill{
  display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:6px;
  font:500 11.5px var(--sans);color:var(--ink);background:#f8fafc;border:1px solid var(--rule);
}

/* Legacy badge class */
.nms-badge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;font:600 10.5px var(--mono);letter-spacing:.06em;border:1px solid transparent;}
.nms-badge-info{background:var(--b-50);color:var(--b-700);border-color:var(--b-200);}
.nms-badge-mock{background:var(--paper);color:var(--ink-2);border-color:var(--rule);}

/* === Journey Cards === */
.nms-jy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px;}
.nms-jy-card{
  background:#fff;border:1px solid var(--rule);border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:10px;
}
.nms-jy-card .top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.nms-jy-card h4{margin:0;font-size:14px;font-weight:700;line-height:1.2;letter-spacing:-.005em;}
.nms-jy-card .meta{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12px;}
.nms-jy-card .meta dt{color:var(--ink-2);font:500 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;align-self:start;padding-top:1px;}
.nms-jy-card .meta dd{margin:0;color:var(--ink);}
.nms-jy-card .pfm{display:flex;gap:6px;}
.nms-pfm-badge{
  display:inline-flex;align-items:baseline;gap:3px;font:700 13px var(--mono);
  padding:2px 8px;border-radius:6px;border:1px solid var(--rule);background:#fff;
}
.nms-pfm-badge .lbl{font:500 9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);}
.nms-pfm-badge.pass{border-color:#a7f3d0;background:#ecfdf5;color:var(--green-2);}
.nms-pfm-badge.fail{border-color:#fecaca;background:#fef2f2;color:var(--red-2);}
.nms-pfm-badge.miss{border-color:#fde68a;background:#fef3c7;color:var(--amber-2);}

/* === Incident Queue === */
.nms-inc-list{display:flex;flex-direction:column;}
.nms-inc{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;padding:14px 18px;
  border-bottom:1px solid var(--rule);align-items:flex-start;cursor:pointer;
}
.nms-inc:last-child{border-bottom:0;}
.nms-inc:hover{background:#fafcff;}
.nms-inc.sel{background:#eef4fb;}
.nms-inc .sev{
  width:54px;text-align:center;font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:4px 0;border-radius:6px;color:#fff;
}
.sev-crit{background:var(--red);}
.sev-major{background:#ea580c;}
.sev-minor{background:var(--b-600);}
.sev-watch{background:#475569;}
.sev-low{background:var(--b-400);}
.sev-info{background:var(--ink-3);}
.nms-inc h5{margin:0;font-size:13.5px;font-weight:700;}
.nms-inc .meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:4px;font-size:11.5px;color:var(--ink-2);}
.nms-inc .meta b{color:var(--ink);}
.nms-inc .body{font-size:12.5px;color:var(--ink-2);margin-top:6px;line-height:1.4;}
.nms-inc .body b{color:var(--ink);font-weight:600;}
.nms-inc .right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.nms-inc .rt-time{font:500 11px var(--mono);color:var(--ink-2);}
.nms-inc-foot{padding:10px 18px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;align-items:center;background:var(--paper);}
.nms-inc-foot small{font:500 11px var(--mono);color:var(--ink-2);letter-spacing:.06em;}

/* === Detail Drawer (right panel) === */
.nms-drawer{position:relative;}
.nms-drawer .head{
  padding:14px 18px;border-bottom:1px solid var(--rule);display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,#fbfdff,#f4f8fc);
}
.nms-drawer .head .pid{font:700 18px var(--mono);}
.nms-drawer .head .meta{font-size:11.5px;color:var(--ink-2);line-height:1.3;}
.nms-drawer .head .x{
  margin-left:auto;width:26px;height:26px;border-radius:6px;border:1px solid var(--rule);
  background:#fff;display:grid;place-items:center;color:var(--ink-2);cursor:pointer;
}
.nms-drawer .body{padding:16px 18px;display:flex;flex-direction:column;gap:16px;}
.nms-drawer .sec-h{
  font:600 10.5px var(--mono);color:var(--ink-2);letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:space-between;
}
.nms-drawer .sec-h .ln{flex:1;height:1px;background:var(--rule);margin-left:10px;}

/* Mini phone preview */
.nms-mini-phone{
  width:108px;height:200px;border-radius:18px;background:#0b1e3b;
  padding:5px;box-shadow:0 8px 22px rgba(15,23,42,.18);position:relative;
}
.nms-mini-phone .scr{width:100%;height:100%;border-radius:14px;background:#fff;overflow:hidden;position:relative;}
.nms-mini-phone .notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:34px;height:4px;border-radius:2px;background:#0b1e3b;}

/* Surface comparison */
.nms-cmp{display:flex;flex-direction:column;gap:6px;}
.nms-cmp-row{
  display:grid;grid-template-columns:120px 1fr 1fr auto;gap:10px;align-items:start;
  padding:8px 10px;border:1px solid var(--rule);border-radius:8px;background:#fff;font-size:11.5px;
}
.nms-cmp-row .sf{font:600 12px var(--mono);color:var(--ink);}
.nms-cmp-row .l{color:var(--ink-2);}
.nms-cmp-row .l b{color:var(--ink);}
.nms-cmp-row.mm{border-color:#fecaca;background:#fffafa;}
.nms-cmp-row.miss{border-color:#fde68a;background:#fffdf5;}

/* Timeline */
.nms-timeline{display:flex;flex-direction:column;gap:8px;}
.nms-tl-item{display:grid;grid-template-columns:54px 1fr;gap:10px;align-items:flex-start;}
.nms-tl-item .tm{font:600 11px var(--mono);color:var(--ink-2);padding-top:1px;}
.nms-tl-item .nm{font-size:12.5px;font-weight:600;color:var(--ink);}
.nms-tl-item .ds{font-size:11.5px;color:var(--ink-2);line-height:1.4;}
.nms-tl-item.act .nm{color:var(--b-700);}
.nms-tl-item.act .tm{color:var(--b-700);}
.nms-tl-item .dot{
  width:8px;height:8px;border-radius:50%;background:var(--rule-2);
  box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--rule-2);
  margin-right:6px;display:inline-block;vertical-align:middle;
}
.nms-tl-item.act .dot{background:var(--b-500);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--b-500);}

/* Evidence slots */
.nms-ev-slots{display:flex;gap:10px;flex-wrap:wrap;}
.nms-ev-slot{width:80px;text-align:center;}
.nms-ev-slot .frame{
  width:80px;height:100px;border-radius:6px;background:#f8fafc;border:1.5px dashed var(--rule-2);
  display:grid;place-items:center;margin-bottom:4px;overflow:hidden;
}
.nms-ev-slot .frame.filled{border-style:solid;background:linear-gradient(180deg,#0c2a6b 30%,#eef4fb 30%);}
.nms-ev-slot .label{font:600 10px var(--mono);color:var(--ink-2);letter-spacing:.04em;}

/* === Artifact Gallery === */
.nms-art-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.nms-art-card{
  background:#fff;border:1px solid var(--rule);border-radius:12px;padding:12px;
  display:flex;flex-direction:column;gap:8px;
}
.nms-art-card .frame{
  aspect-ratio:3/4;border-radius:8px;background:repeating-linear-gradient(135deg,#f1f5f9 0 8px,#fafcff 8px 16px);
  border:1.5px dashed var(--rule-2);display:grid;place-items:center;color:var(--ink-3);
  font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:8px;
}
.nms-art-card.filled .frame{
  background:#fff;border-style:solid;border-color:var(--rule);overflow:hidden;padding:0;position:relative;
}
.nms-art-card .preview{width:100%;height:100%;position:relative;}
.nms-art-card .preview .hdr{background:#0c2a6b;height:18%;width:100%;}
.nms-art-card .preview .card-inner{
  position:absolute;top:24%;left:8%;right:8%;background:#fff;border:1px solid #e2eaf3;
  border-radius:4px;height:24%;padding:6px;display:flex;flex-direction:column;gap:3px;
}
.nms-art-card .preview .card-inner .ln{height:2px;background:#cbd5e1;border-radius:1px;}
.nms-art-card .preview .card-inner .ln.big{height:4px;background:#1d4ed8;width:60%;}
.nms-art-card .preview .rows{position:absolute;top:54%;left:8%;right:8%;display:flex;flex-direction:column;gap:3px;}
.nms-art-card .preview .rows .rr{height:8px;background:#eef4fb;border-radius:2px;}
.nms-art-card .preview .btn-mock{position:absolute;bottom:8%;left:30%;right:30%;height:8%;background:#2563eb;border-radius:3px;}
.nms-art-card .label{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.25;}
.nms-art-card .src{font:500 10.5px var(--mono);color:var(--ink-2);letter-spacing:.04em;text-transform:uppercase;}
.nms-art-card .footer-row{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.nms-art-card .upload-btn{
  background:#fff;border:1px solid var(--rule);color:var(--ink);
  font:600 10.5px var(--mono);padding:3px 8px;border-radius:6px;cursor:pointer;letter-spacing:.06em;
}

/* === Analysis Cards === */
.nms-ax-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.nms-ax-card{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:14px 16px;}
.nms-ax-card h5{margin:0 0 10px;font-size:13px;font-weight:700;}
.nms-ax-bar{display:grid;grid-template-columns:80px 1fr 28px;gap:8px;align-items:center;font-size:11.5px;margin-bottom:6px;}
.nms-ax-bar .lab{color:var(--ink-2);font-weight:500;}
.nms-ax-bar .tk{height:8px;background:var(--paper);border-radius:5px;overflow:hidden;}
.nms-ax-bar .fl{height:100%;border-radius:5px;}
.nms-ax-bar .v{font:700 12px var(--mono);text-align:right;color:var(--ink);}

/* === Export Buttons === */
.nms-export-grid{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.nms-export-btn{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;
  padding:10px 16px;border-radius:8px;border:1px solid var(--rule);background:var(--surface);
  color:var(--ink);cursor:pointer;transition:all .12s;
}
.nms-export-btn:hover{background:var(--paper);}
.nms-export-btn .material-icons{font-size:16px;}
.nms-export-btn-primary{background:var(--b-600);color:#fff;border-color:var(--b-600);}
.nms-export-btn-primary:hover{background:var(--b-700);}

/* === Privacy / Flight Mode Notes === */
.nms-privacy-note{
  display:flex;align-items:flex-start;gap:8px;padding:12px 16px;
  background:#fffbf0;border:1px solid #fde6b6;border-radius:8px;font-size:12.5px;color:#7a4a07;line-height:1.5;
}
.nms-privacy-note .material-icons{font-size:16px;color:var(--amber);margin-top:1px;}

/* === Evidence Rules - Flight Mode === */
.nms-flight-mode-banner{
  display:flex;align-items:flex-start;gap:14px;padding:16px 20px;
  background:#eff6ff;border:1px solid var(--b-200);border-radius:10px;margin-bottom:20px;
}
.nms-flight-mode-icon .material-icons{font-size:28px;color:var(--b-600);}
.nms-flight-mode-content h4{margin:0 0 4px;font-size:14px;font-weight:700;}
.nms-flight-mode-content p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5;}
.nms-override-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:14px;}
.nms-override-card{background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:14px 16px;}
.nms-override-card-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.nms-override-card-header .material-icons{font-size:18px;color:var(--b-500);}
.nms-override-card-header strong{font-size:13px;}
.nms-override-card p{font-size:12px;color:var(--ink-2);margin:0;line-height:1.5;}
.nms-scope-note{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.nms-scope-item{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:8px;font-size:13px;}
.nms-scope-item .material-icons{font-size:18px;}
.nms-scope-allowed{background:#dcfce7;color:var(--green);}
.nms-scope-denied{background:#fde8e8;color:var(--red);}
.nms-scope-info{background:var(--b-50);color:var(--b-600);}

/* === Severity Badges === */
.nms-severity-pill{
  display:inline-block;font:700 10px var(--mono);text-transform:uppercase;
  padding:4px 8px;border-radius:6px;letter-spacing:.1em;color:#fff;
}
.severity-critical{background:#fef2f2;color:var(--red-2);border-color:#fecaca;}
.severity-high{background:#fef2f2;color:var(--red-2);border-color:#fecaca;}
.severity-medium{background:#fef3c7;color:var(--amber-2);border-color:#fde68a;}
.severity-low{background:#ecfdf5;color:var(--green-2);border-color:#a7f3d0;}
.severity-info{background:var(--b-50);color:var(--b-700);border-color:var(--b-200);}

/* === Filter Bar === */
.nms-filter-bar{display:flex;align-items:center;gap:12px;padding:12px 0;flex-wrap:wrap;}
.nms-filter-tabs{display:flex;gap:4px;}
.nms-filter-tab{
  border:1px solid var(--rule);background:var(--surface);color:var(--ink-2);
  font:600 11px var(--mono);padding:5px 12px;border-radius:6px;cursor:pointer;transition:all .12s;
}
.nms-filter-tab:hover{background:var(--b-50);}
.nms-filter-tab.active{background:var(--b-600);color:#fff;border-color:var(--b-600);}
.nms-filter-count{margin-left:auto;font:500 11px var(--mono);color:var(--ink-3);letter-spacing:.06em;}
.nms-select{border:1px solid var(--rule);border-radius:6px;padding:5px 10px;font-size:12px;background:var(--surface);color:var(--ink);outline:none;}
.nms-select:focus{border-color:var(--b-400);}

/* === Status Chips (table cells) === */
.nms-status-chip{
  display:inline-flex;align-items:center;gap:5px;font:600 10.5px var(--mono);
  padding:2px 8px;border-radius:999px;letter-spacing:.06em;
}
.nms-status-chip.online{background:#ecfdf5;color:var(--green-2);border:1px solid #a7f3d0;}
.nms-status-chip.degraded{background:#fef3c7;color:var(--amber-2);border:1px solid #fde68a;}
.nms-status-chip.offline{background:var(--paper);color:var(--ink-2);border:1px solid var(--rule);}
.nms-status-chip.hold{background:#ede9fe;color:#5b21b6;border:1px solid #ddd6fe;}
.nms-status-chip.approval{background:#fef3c7;color:var(--amber-2);border:1px solid #fde68a;}
.nms-status-chip.reserve{background:var(--paper);color:var(--ink-2);border:1px solid var(--rule);}
.nms-status-chip.incident{background:#fef2f2;color:var(--red-2);border:1px solid #fecaca;}

/* === Phone Grid (legacy) === */
.nms-phone-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;}
.nms-phone-tile{display:flex;flex-direction:column;align-items:center;background:#fff;border:1.5px solid var(--rule);border-radius:10px;padding:12px;text-align:center;transition:border-color .15s,transform .1s,box-shadow .15s;cursor:pointer;color:var(--ink);box-shadow:0 2px 6px rgba(15,23,42,.04);}
.nms-phone-tile:hover{border-color:var(--b-400);transform:scale(1.02);text-decoration:none;box-shadow:0 4px 12px rgba(37,99,235,.1);}
.nms-phone-tile-id{font:700 14px var(--mono);color:var(--ink);}
.nms-phone-tile-status{font:600 10px var(--mono);text-transform:uppercase;margin-top:4px;letter-spacing:.06em;color:var(--ink-2);}
.nms-phone-tile-journey{font-size:11px;color:var(--ink-2);margin-top:4px;}
.nms-phone-tile-incidents{font-size:11px;color:var(--red-2);margin-top:2px;font-weight:600;}
.nms-phone-tile.status-running{border-color:#86efac;}
.nms-phone-tile.status-idle{border-color:var(--rule-2);}
.nms-phone-tile.status-incident{border-color:#fecaca;}
.nms-phone-tile.status-offline{border-color:var(--rule-2);}
.nms-phone-tile.status-charging{border-color:#fde68a;}
.nms-phone-tile.status-maintenance{border-color:var(--rule-2);}

/* === Warnings / Alerts === */
.nms-warnings{background:#fffbf0;border:1px solid #fde6b6;border-radius:10px;padding:12px 16px;margin-bottom:20px;}
.nms-warnings h4{margin:0 0 8px 0;color:#7a4a07;font-size:13px;font-weight:700;}
.nms-warning-item{font-size:13px;color:#7a4a07;padding:4px 0;line-height:1.4;}
.nms-icon-warn{color:var(--amber);margin-right:6px;}

/* === Sections === */
.nms-section{margin-bottom:20px;}
.nms-section h3{font-size:14.5px;font-weight:700;color:var(--ink);margin:0 0 12px 0;letter-spacing:-.01em;}
.nms-section-note{font-size:13px;color:var(--ink-2);margin-bottom:16px;}

/* === Detail Cards === */
.nms-detail-card{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:20px;margin-bottom:20px;}
.nms-detail-card h3{margin:0 0 12px 0;font-size:15px;font-weight:700;color:var(--ink);}
.nms-detail-card h4{margin:0 0 8px 0;font-size:14px;color:var(--ink-2);font-weight:600;}
.nms-detail-subtitle{font-size:12px;color:var(--ink-2);margin-bottom:8px;}
.nms-detail-table{width:100%;}
.nms-detail-table td{padding:6px 0;border-bottom:1px solid var(--rule);font-size:13px;color:var(--ink);}
.nms-dt-label{color:var(--ink-2);font-weight:600;width:180px;font-size:12px;}

/* Status classes */
.status-running{border-left:3px solid var(--green);}
.status-idle{border-left:3px solid var(--ink-3);}
.status-incident{border-left:3px solid var(--red);}
.status-offline{border-left:3px solid var(--ink-3);}
.status-charging{border-left:3px solid var(--amber);}
.status-maintenance{border-left:3px solid var(--ink-3);}
.journey-active{border-left:3px solid var(--green);}
.journey-paused{border-left:3px solid var(--amber);}
.journey-error{border-left:3px solid var(--red);}
.journey-completed{border-left:3px solid var(--b-500);}
.comparison-matched{background:rgba(22,163,74,.06);}
.comparison-mismatched{background:rgba(220,38,38,.06);}
.comparison-missing{background:rgba(245,158,11,.06);}
.comparison-not-observed{background:rgba(148,163,184,.06);}

/* === Misc Utilities === */
.nms-mono{font-family:var(--mono);}
.nms-text-muted{color:var(--ink-3);font-size:12px;}
.nms-text-secondary{color:var(--ink-2);font-size:13px;}
.nms-loading{text-align:center;padding:48px 0;color:var(--ink-2);}
.nms-not-found{text-align:center;padding:48px 0;color:var(--red-2);}
.nms-link{font-size:13px;font-weight:600;color:var(--b-600);}
.nms-link:hover{color:var(--b-700);}

/* === Drawer Action Buttons === */
.nms-drawer-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--rule);}
.nms-drawer-actions .nms-btn{font-size:12px;padding:6px 12px;}
.nms-drawer-actions .nms-btn-primary{background:#ea580c;border-color:#ea580c;color:#fff;}
.nms-drawer-actions .nms-btn-primary:hover{background:#c2410c;}

/* === Angular Material Overrides === */
md-toolbar{background:var(--surface)!important;color:var(--ink)!important;border-bottom:1px solid var(--rule);}
md-content{background:var(--paper)!important;}
md-card{background:var(--surface)!important;border:1px solid var(--rule);border-radius:12px!important;box-shadow:none!important;}
md-progress-circular path{stroke:var(--b-500)!important;}

/* === Responsive === */
@media(max-width:1200px){
  .nms-kpi-strip{grid-template-columns:repeat(3,1fr);}
  .nms-jy-grid{grid-template-columns:repeat(2,1fr);}
  .nms-art-grid{grid-template-columns:repeat(3,1fr);}
  .nms-ax-grid{grid-template-columns:repeat(2,1fr);}
  .nms-row-incidents{grid-template-columns:1fr;}
}
@media(max-width:1024px){
  .nms-kpi-strip{grid-template-columns:repeat(2,1fr);}
  .nms-row2{grid-template-columns:1fr;}
}
@media(max-width:768px){
  .nms-shell{grid-template-columns:1fr;}
  .nms-sidebar{display:none;}
  .nms-kpi-strip{grid-template-columns:1fr;}
  .nms-jy-grid{grid-template-columns:1fr;}
  .nms-art-grid{grid-template-columns:repeat(2,1fr);}
}

/* === Additional classes for new templates === */

/* Severity badge (unified) */
.nms-sev-badge{
  display:inline-block;font:700 10px var(--mono);text-transform:uppercase;
  padding:3px 8px;border-radius:6px;letter-spacing:.08em;
}
.nms-sev-badge.sev-critical{background:#fef2f2;color:var(--red-2);}
.nms-sev-badge.sev-high{background:#fff1f2;color:#be123c;}
.nms-sev-badge.sev-medium{background:#fef3c7;color:var(--amber-2);}
.nms-sev-badge.sev-low{background:#ecfdf5;color:var(--green-2);}
.nms-sev-badge.sev-info{background:var(--b-50);color:var(--b-700);}

/* Artifact badge */
.nms-artifact-badge{
  display:inline-flex;align-items:center;gap:4px;font:600 10px var(--mono);
  padding:2px 8px;border-radius:999px;letter-spacing:.06em;
}
.nms-artifact-badge.ready{background:#ecfdf5;color:var(--green-2);border:1px solid #a7f3d0;}
.nms-artifact-badge.partial{background:#fef3c7;color:var(--amber-2);border:1px solid #fde68a;}
.nms-artifact-badge.pending{background:var(--paper);color:var(--ink-2);border:1px solid var(--rule);}
.nms-artifact-badge.missing{background:#fef2f2;color:var(--red-2);border:1px solid #fecaca;}
.nms-artifact-badge.blocked{background:#ede9fe;color:#5b21b6;border:1px solid #ddd6fe;}
.nms-artifact-badge.mismatch{background:#fef2f2;color:var(--red-2);border:1px solid #fecaca;}

/* Analysis grid (reports) */
.nms-analysis-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.nms-analysis-card{background:#fff;border:1px solid var(--rule);border-radius:12px;padding:14px 16px;}
.nms-analysis-card h4{margin:0 0 10px;font-size:13px;font-weight:700;}

/* Bar rows (reports) */
.nms-bar-row{display:grid;grid-template-columns:80px 1fr 28px;gap:8px;align-items:center;font-size:11.5px;margin-bottom:6px;}
.nms-bar-label{color:var(--ink-2);font-weight:500;font-size:11.5px;}
.nms-bar-track{height:8px;background:var(--paper);border-radius:5px;overflow:hidden;}
.nms-bar{height:100%;border-radius:5px;}
.nms-bar-val{font:700 12px var(--mono);text-align:right;color:var(--ink);}
.bar-blue{background:var(--b-500);}
.bar-orange{background:#ea580c;}
.bar-yellow{background:var(--amber);}
.bar-red{background:var(--red);}
.bar-teal{background:#0d9488;}
.bar-critical{background:var(--red);}
.bar-high{background:#ea580c;}
.bar-medium{background:var(--amber);}
.bar-low{background:var(--green);}
.bar-info{background:var(--b-400);}

/* Section head with time pills */
.nms-section-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.nms-section-head h3{margin:0;}
.nms-time-pills{display:flex;gap:4px;}
.nms-time-pills button{
  border:1px solid var(--rule);background:var(--surface);color:var(--ink-2);
  font:600 11px var(--mono);padding:4px 10px;border-radius:6px;cursor:pointer;
}
.nms-time-pills button.on{background:#eef4fb;color:var(--b-700);border-color:#dbeafe;}

/* Report stats */
.nms-report-stats dl{display:grid;grid-template-columns:180px 1fr;gap:8px;font-size:13px;margin:0;}
.nms-report-stats dt{color:var(--ink-2);font-weight:600;}
.nms-report-stats dd{margin:0;color:var(--ink);}

/* Blocker list */
.nms-blocker-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
.nms-blocker-list li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);}

/* Flight banner (new unified) */
.nms-flight-banner{
  display:flex;align-items:flex-start;gap:14px;padding:16px 20px;
  background:#eff6ff;border:1px solid var(--b-200);border-radius:10px;margin-bottom:20px;
}
.nms-flight-banner i{font-size:28px;color:var(--b-600);margin-top:2px;}
.nms-flight-banner h4{margin:0 0 4px;font-size:14px;font-weight:700;}
.nms-flight-banner p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5;}

/* Flight override chip */
.nms-flight-override{
  display:inline-flex;align-items:center;gap:4px;font:500 11.5px var(--sans);
  color:var(--b-700);background:#eff6ff;border:1px solid var(--b-200);
  padding:2px 8px;border-radius:6px;
}

/* Override grid */
.nms-override-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:14px;}
.nms-override-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.nms-override-head i{font-size:18px;color:var(--b-500);}
.nms-override-head strong{font-size:13px;}

/* Scope list */
.nms-scope-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.nms-scope-item{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:8px;font-size:13px;}
.nms-scope-item i{font-size:18px;}
.nms-scope-item.ok{background:#dcfce7;color:var(--green-2);}
.nms-scope-item.deny{background:#fde8e8;color:var(--red-2);}
.nms-scope-item.info{background:var(--b-50);color:var(--b-600);}

/* Filter group */
.nms-filter-group{display:flex;align-items:center;gap:8px;}
.nms-filter-group label{font:600 11px var(--mono);color:var(--ink-2);letter-spacing:.06em;}

/* Art card sub-elements */
.nms-art-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.nms-art-id{font:700 12px var(--mono);color:var(--ink);}
.nms-art-status{font:600 10px var(--mono);padding:2px 7px;border-radius:999px;letter-spacing:.06em;}
.nms-art-thumb{
  aspect-ratio:3/4;border-radius:8px;background:repeating-linear-gradient(135deg,#f1f5f9 0 8px,#fafcff 8px 16px);
  border:1.5px dashed var(--rule-2);display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--ink-3);gap:6px;padding:8px;
}
.nms-art-thumb .material-icons{font-size:28px;}
.nms-art-type-label{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;}
.nms-art-body{display:flex;flex-direction:column;gap:4px;}
.nms-art-title{font-size:12.5px;font-weight:600;color:var(--ink);margin:0;line-height:1.25;}
.nms-art-meta{font-size:11.5px;color:var(--ink-2);margin:0;}

/* Secondary button */
.nms-btn-secondary{background:var(--paper);border-color:var(--rule);color:var(--ink-2);}
.nms-btn-secondary:hover{background:var(--rule);}

/* Responsive additions */
@media(max-width:1200px){
  .nms-analysis-grid{grid-template-columns:repeat(2,1fr);}
  .nms-override-grid{grid-template-columns:1fr;}
}
@media(max-width:768px){
  .nms-analysis-grid{grid-template-columns:1fr;}
  .nms-art-grid{grid-template-columns:1fr;}
}

/* === Chip color variants (controller-assigned) === */
.nms-chip-green{background:#ecfdf5;color:var(--green-2);border-color:#a7f3d0;}
.nms-chip-amber{background:#fef3c7;color:var(--amber-2);border-color:#fde68a;}
.nms-chip-red{background:#fef2f2;color:var(--red-2);border-color:#fecaca;}
.nms-chip-gray{background:var(--paper);color:var(--ink-2);border-color:var(--rule);}

/* === Topology status classes (controller-assigned) === */
.topo-online .pho{border-color:#86efac !important;}
.topo-online .ph-led{background:var(--green) !important;box-shadow:0 0 0 2px rgba(22,163,74,.2) !important;}
.topo-online .ph-body{background:linear-gradient(180deg,#dcfce7,#fff) !important;border-color:#bbf7d0 !important;}
.topo-idle .pho{border-color:var(--rule-2) !important;background:#f8fafc !important;}
.topo-idle .ph-led{background:var(--ink-3) !important;box-shadow:none !important;}
.topo-idle .ph-body{background:#f8fafc !important;border-color:var(--rule) !important;}
.topo-incident .pho{border-color:#fecaca !important;}
.topo-incident .ph-led{background:var(--red) !important;box-shadow:0 0 0 2px rgba(220,38,38,.2) !important;}
.topo-incident .ph-body{background:linear-gradient(180deg,#fee2e2,#fff) !important;border-color:#fecaca !important;}
.topo-offline .pho{border-color:#e2e8f0 !important;background:#f1f5f9 !important;opacity:.5;}
.topo-offline .ph-led{background:#94a3b8 !important;box-shadow:none !important;}
.topo-offline .ph-body{background:#f1f5f9 !important;border-color:#e2e8f0 !important;}

/* === Artifact status chip variants === */
.nms-art-status.ready{background:#ecfdf5;color:var(--green-2);border:1px solid #a7f3d0;}
.nms-art-status.partial{background:#fef3c7;color:var(--amber-2);border:1px solid #fde68a;}
.nms-art-status.pending{background:var(--paper);color:var(--ink-2);border:1px solid var(--rule);}
.nms-art-status.missing{background:#fef2f2;color:var(--red-2);border:1px solid #fecaca;}
.nms-art-status.mock\/pending{background:var(--paper);color:var(--ink-2);border:1px solid var(--rule);}

/* === Phone status chip variants (controller getStatusClass output) === */
.nms-status-chip.status-running{background:#ecfdf5;color:var(--green-2);border:1px solid #a7f3d0;}
.nms-status-chip.status-idle{background:var(--paper);color:var(--ink-2);border:1px solid var(--rule);}
.nms-status-chip.status-incident{background:#fef2f2;color:var(--red-2);border:1px solid #fecaca;}
.nms-status-chip.status-offline{background:var(--paper);color:var(--ink-3);border:1px solid var(--rule);}
.nms-status-chip.status-charging{background:#ede9fe;color:#5b21b6;border:1px solid #ddd6fe;}
.nms-status-chip.status-maintenance{background:#fef3c7;color:var(--amber-2);border:1px solid #fde68a;}

/* === Artifact thumb type variants (ng-class: 'thumb-' + art.type) === */
.thumb-pdev_screenshot .material-icons{color:var(--b-500);}
.thumb-ussd_menu .material-icons{color:var(--indigo);}
.thumb-ussd_confirm .material-icons{color:var(--indigo-2);}
.thumb-sms_confirm .material-icons{color:var(--green);}
.thumb-sms_missing .material-icons{color:var(--red);}
.thumb-balance_result .material-icons{color:var(--amber);}
.thumb-recording .material-icons{color:#7c3aed;}
.thumb-fb_popup .material-icons{color:#2563eb;}
.thumb-operator_note .material-icons{color:var(--ink-2);}
.thumb-collection .material-icons{color:#ea580c;}
.thumb-repayment .material-icons{color:var(--green-2);}

/* === Hold dot (topbar) === */
.nms-dot-hold{background:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.18);}

/* === Alert stack (dashboard) === */
.nms-alert-stack{display:flex;flex-direction:column;gap:10px;}
.nms-alert-item{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--ink);line-height:1.4;}
.nms-alert-item i{flex-shrink:0;margin-top:1px;}

/* === Phase 1 Toast === */
.nms-toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:#1e293b;color:#fff;font:600 12px var(--mono);
  padding:10px 20px;border-radius:8px;z-index:9999;
  box-shadow:0 8px 24px rgba(15,23,42,.25);
  animation:toastIn .2s ease-out;
}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(10px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}


/* ========================================================================
   INTERACTIVE ADMIN UX COMPONENTS — Phase 1 Overhaul
   ======================================================================== */

/* === Sortable Table Headers === */
.nms-tbl th.sortable{cursor:pointer;user-select:none;position:relative;padding-right:18px;transition:color .15s;}
.nms-tbl th.sortable:hover{color:var(--blue);}
.nms-tbl th.sortable::after{content:'⇅';position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:10px;opacity:.35;}
.nms-tbl th.sortable.sort-asc::after{content:'↑';opacity:.85;color:var(--blue);}
.nms-tbl th.sortable.sort-desc::after{content:'↓';opacity:.85;color:var(--blue);}
.nms-tbl th.sortable.sort-asc,.nms-tbl th.sortable.sort-desc{color:var(--blue);}

/* === Clickable Table Rows (enhanced) === */
.nms-tbl tbody tr.clickable{cursor:pointer;transition:background .12s;}
.nms-tbl tbody tr.clickable:hover{background:var(--hover);}
.nms-tbl tbody tr.clickable.sel{background:rgba(59,130,246,.06);border-left:3px solid var(--blue);}

/* === Detail Drawer (right-side slide panel) === */
.nms-drawer-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(15,23,42,.18);z-index:800;
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.nms-drawer-overlay.open{opacity:1;pointer-events:auto;}

.nms-drawer{
  position:fixed;top:0;right:0;bottom:0;width:480px;max-width:90vw;
  background:#fff;z-index:810;box-shadow:-8px 0 32px rgba(15,23,42,.12);
  transform:translateX(100%);transition:transform .25s cubic-bezier(.23,1,.32,1);
  display:flex;flex-direction:column;overflow:hidden;
}
.nms-drawer.open{transform:translateX(0);}

.nms-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.nms-drawer-head h3{margin:0;font:600 15px var(--sans);color:var(--ink);}
.nms-drawer-close{
  background:none;border:none;cursor:pointer;font-size:20px;
  color:var(--ink-2);padding:4px 8px;border-radius:4px;transition:background .12s;
}
.nms-drawer-close:hover{background:var(--hover);}

.nms-drawer-body{flex:1;overflow-y:auto;padding:20px;}
.nms-drawer-body .nms-kv{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--border-light,#f1f5f9);}
.nms-drawer-body .nms-kv .k{font:500 11px var(--mono);color:var(--ink-3);text-transform:uppercase;min-width:110px;flex-shrink:0;}
.nms-drawer-body .nms-kv .v{font:400 13px var(--sans);color:var(--ink);word-break:break-word;}

.nms-drawer-actions{
  padding:12px 20px;border-top:1px solid var(--border);flex-shrink:0;
  display:flex;gap:8px;
}

/* === Media Viewer / Lightbox === */
.nms-media-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(15,23,42,.75);z-index:900;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s;pointer-events:none;
}
.nms-media-overlay.open{opacity:1;pointer-events:auto;}

.nms-media-box{
  background:#fff;border-radius:12px;max-width:720px;width:90vw;
  max-height:85vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 60px rgba(15,23,42,.3);
  transform:scale(.95);transition:transform .2s cubic-bezier(.23,1,.32,1);
}
.nms-media-overlay.open .nms-media-box{transform:scale(1);}

.nms-media-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border);
}
.nms-media-head h4{margin:0;font:600 13px var(--sans);color:var(--ink);}

.nms-media-content{
  flex:1;overflow:auto;display:flex;align-items:center;justify-content:center;
  padding:20px;min-height:300px;background:#f8fafc;
}
.nms-media-content img{max-width:100%;max-height:60vh;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.08);}

.nms-media-placeholder{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  color:var(--ink-3);font:400 13px var(--sans);
}
.nms-media-placeholder .material-icons{font-size:48px;opacity:.3;}

.nms-media-meta{
  padding:12px 18px;border-top:1px solid var(--border);
  display:flex;gap:16px;flex-wrap:wrap;font:400 11px var(--mono);color:var(--ink-3);
}

/* === Page Tabs (for phone detail, settings) === */
.nms-page-tabs{
  display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:20px;
}
.nms-page-tab{
  padding:10px 18px;font:500 12px var(--sans);color:var(--ink-3);
  background:none;border:none;cursor:pointer;position:relative;
  transition:color .15s;border-bottom:2px solid transparent;margin-bottom:-2px;
}
.nms-page-tab:hover{color:var(--ink);}
.nms-page-tab.active{color:var(--blue);border-bottom-color:var(--blue);}

/* === Activity Feed === */
.nms-activity-feed{display:flex;flex-direction:column;gap:0;}
.nms-activity-item{
  display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border-light,#f1f5f9);
  cursor:pointer;transition:background .12s;border-radius:4px;
}
.nms-activity-item:hover{background:var(--hover);}
.nms-activity-icon{
  width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:16px;
}
.nms-activity-icon.screenshot{background:#eff6ff;color:#2563eb;}
.nms-activity-icon.recording{background:#faf5ff;color:#7c3aed;}
.nms-activity-icon.sms{background:#f0fdf4;color:#16a34a;}
.nms-activity-icon.incident{background:#fef2f2;color:#dc2626;}
.nms-activity-icon.step{background:#f8fafc;color:var(--ink-3);}
.nms-activity-body{flex:1;min-width:0;}
.nms-activity-body .title{font:500 13px var(--sans);color:var(--ink);}
.nms-activity-body .meta{font:400 11px var(--mono);color:var(--ink-3);margin-top:2px;}
.nms-activity-body .desc{font:400 12px var(--sans);color:var(--ink-2);margin-top:4px;}

/* === Timeline (Analysis page) === */
.nms-timeline{position:relative;padding-left:28px;}
.nms-timeline::before{
  content:'';position:absolute;left:11px;top:0;bottom:0;width:2px;
  background:var(--border);
}
.nms-timeline-item{
  position:relative;padding:12px 0 12px 16px;cursor:pointer;
  transition:background .12s;border-radius:4px;
}
.nms-timeline-item:hover{background:var(--hover);}
.nms-timeline-item::before{
  content:'';position:absolute;left:-21px;top:18px;
  width:10px;height:10px;border-radius:50%;background:var(--border);
  border:2px solid #fff;z-index:1;
}
.nms-timeline-item.sev-critical::before{background:var(--red);}
.nms-timeline-item.sev-high::before{background:var(--amber);}
.nms-timeline-item.sev-medium::before{background:var(--blue);}
.nms-timeline-item.sev-low::before{background:var(--green);}
.nms-timeline-time{font:500 11px var(--mono);color:var(--ink-3);}
.nms-timeline-title{font:500 13px var(--sans);color:var(--ink);margin-top:2px;}
.nms-timeline-desc{font:400 12px var(--sans);color:var(--ink-2);margin-top:4px;}
.nms-timeline-tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap;}
.nms-timeline-tag{
  font:500 10px var(--mono);padding:2px 8px;border-radius:4px;
  background:#f1f5f9;color:var(--ink-2);
}

/* === Settings Page === */
.nms-settings-layout{display:flex;gap:0;min-height:calc(100vh - 120px);}
.nms-settings-nav{
  width:200px;flex-shrink:0;border-right:1px solid var(--border);
  padding:16px 0;
}
.nms-settings-nav-item{
  display:flex;align-items:center;gap:8px;padding:10px 20px;
  font:400 13px var(--sans);color:var(--ink-2);cursor:pointer;
  transition:all .12s;border-left:3px solid transparent;
}
.nms-settings-nav-item:hover{background:var(--hover);color:var(--ink);}
.nms-settings-nav-item.active{color:var(--blue);background:rgba(59,130,246,.04);border-left-color:var(--blue);font-weight:500;}
.nms-settings-nav-item .material-icons{font-size:18px;}

.nms-settings-content{flex:1;padding:24px 32px;}
.nms-settings-section{margin-bottom:32px;}
.nms-settings-section h3{font:600 15px var(--sans);color:var(--ink);margin:0 0 4px;}
.nms-settings-section p{font:400 12px var(--sans);color:var(--ink-3);margin:0 0 16px;}

.nms-form-row{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--border-light,#f1f5f9);}
.nms-form-label{font:500 12px var(--sans);color:var(--ink);min-width:160px;}
.nms-form-value{font:400 13px var(--sans);color:var(--ink-2);flex:1;}
.nms-form-input{
  font:400 13px var(--sans);padding:7px 12px;border:1px solid var(--border);
  border-radius:6px;background:#fff;color:var(--ink);width:100%;max-width:320px;
  transition:border-color .15s;
}
.nms-form-input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(59,130,246,.08);}

.nms-form-toggle{
  width:40px;height:22px;border-radius:11px;background:var(--border);
  position:relative;cursor:pointer;transition:background .15s;border:none;
}
.nms-form-toggle::after{
  content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;
  border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.nms-form-toggle.on{background:var(--blue);}
.nms-form-toggle.on::after{transform:translateX(18px);}

/* === Clickable KPI Cards === */
.nms-kpi.clickable{cursor:pointer;transition:transform .12s,box-shadow .12s;}
.nms-kpi.clickable:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(15,23,42,.08);}
.nms-kpi.clickable:active{transform:translateY(0);}

/* === Clickable Journey Cards === */
.nms-journey-card.clickable{cursor:pointer;transition:transform .12s,box-shadow .12s;}
.nms-journey-card.clickable:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(15,23,42,.08);}

/* === Clickable Topology Nodes === */
.nms-phone-node.clickable{cursor:pointer;transition:transform .12s;}
.nms-phone-node.clickable:hover{transform:scale(1.08);}
.nms-phone-node.clickable:hover .ph-body{box-shadow:0 2px 8px rgba(59,130,246,.2);}

/* === Clickable Artifact Cards === */
.nms-artifact-card.clickable{cursor:pointer;transition:transform .12s,box-shadow .12s;}
.nms-artifact-card.clickable:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(15,23,42,.08);}

/* === Filter Bar Enhanced === */
.nms-filter-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.nms-filter-count{
  font:600 10px var(--mono);background:var(--blue);color:#fff;
  padding:2px 6px;border-radius:4px;margin-left:4px;
}
.nms-filter-clear{
  font:500 11px var(--sans);color:var(--blue);background:none;border:none;
  cursor:pointer;padding:4px 8px;border-radius:4px;transition:background .12s;
}
.nms-filter-clear:hover{background:rgba(59,130,246,.06);}

/* === Chart Clickable Segments === */
.nms-chart-bar{cursor:pointer;transition:opacity .12s;}
.nms-chart-bar:hover{opacity:.75;}

/* === Member List (Settings) === */
.nms-member-row{
  display:flex;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--border-light,#f1f5f9);
}
.nms-member-avatar{
  width:36px;height:36px;border-radius:50%;background:var(--blue);
  display:flex;align-items:center;justify-content:center;
  font:600 13px var(--sans);color:#fff;flex-shrink:0;
}
.nms-member-info{flex:1;}
.nms-member-info .name{font:500 13px var(--sans);color:var(--ink);}
.nms-member-info .role{font:400 11px var(--sans);color:var(--ink-3);}
.nms-member-badge{
  font:500 10px var(--mono);padding:3px 8px;border-radius:4px;
  background:#f1f5f9;color:var(--ink-2);
}
.nms-member-badge.admin{background:#eff6ff;color:var(--blue);}
.nms-member-badge.owner{background:#fef3c7;color:#92400e;}

/* === Inline Expand Row === */
.nms-expand-row{background:#f8fafc;border-left:3px solid var(--blue);}
.nms-expand-row td{padding:16px 20px !important;}
.nms-expand-content{display:flex;gap:20px;flex-wrap:wrap;}
.nms-expand-section{flex:1;min-width:200px;}
.nms-expand-section h5{font:600 11px var(--mono);color:var(--ink-3);text-transform:uppercase;margin:0 0 8px;}

/* === Notification dot === */
.nms-notif-dot{
  width:8px;height:8px;border-radius:50%;background:var(--red);
  display:inline-block;margin-left:4px;vertical-align:middle;
}


/* ── Timeline Events (Analysis page) ── */
.nms-timeline-event{display:flex;gap:12px;padding:12px 16px;border-radius:6px;cursor:pointer;transition:background .15s;}
.nms-timeline-event:hover{background:var(--paper);}
.nms-timeline-event.sel{background:#eff6ff;border-left:3px solid var(--b-600);}
.nms-timeline-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-top:4px;}
.nms-timeline-dot.dot-critical{background:var(--red);}
.nms-timeline-dot.dot-high{background:var(--amber);}
.nms-timeline-dot.dot-medium{background:var(--b-500);}
.nms-timeline-dot.dot-low{background:var(--green);}
.nms-timeline-dot.dot-info{background:var(--ink-3);}
.nms-timeline-content{flex:1;min-width:0;}

/* ── Activity Feed Dots (Phones drawer) ── */
.nms-activity-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px;}
.nms-activity-dot.dot-step{background:var(--b-500);}
.nms-activity-dot.dot-capture{background:var(--green);}
.nms-activity-dot.dot-sms{background:#16a34a;}
.nms-activity-dot.dot-start{background:var(--b-600);}
.nms-activity-dot.dot-heartbeat{background:#94a3b8;}
.nms-activity-dot.dot-warn{background:var(--amber);}
.nms-activity-dot.dot-error{background:var(--red);}
.nms-activity-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}

/* ── Clickable row highlight ── */
.nms-tbl tbody tr.clickable{cursor:pointer;transition:background .12s;}
.nms-tbl tbody tr.clickable:hover{background:var(--paper);}
.nms-tbl tbody tr.sel{background:#eff6ff;}

/* ── Drawer actions (override for new pages) ── */
.nms-drawer-actions .nms-btn-primary{background:#ea580c;border-color:#ea580c;color:#fff;padding:6px 14px;border-radius:6px;font:500 12px var(--sans);cursor:pointer;transition:background .15s;}
.nms-drawer-actions .nms-btn-primary:hover{background:#c2410c;}
.nms-drawer-actions .nms-btn-sm{padding:6px 12px;border-radius:6px;font:400 12px var(--sans);border:1px solid var(--rule);background:#fff;color:var(--ink-2);cursor:pointer;transition:background .15s;text-decoration:none;display:inline-flex;align-items:center;gap:4px;}
.nms-drawer-actions .nms-btn-sm:hover{background:var(--paper);}

/* ── Filter count badge ── */
.nms-filter-count{display:inline-block;background:rgba(0,0,0,.06);border-radius:10px;padding:1px 6px;font-size:10px;font-weight:500;margin-left:4px;}

/* ── Settings layout ── */
.nms-settings-layout{display:grid;grid-template-columns:200px 1fr;gap:24px;min-height:400px;}
.nms-settings-sidebar{border-right:1px solid var(--rule);}
.nms-settings-content{padding:0 8px;}
.nms-settings-tabs{display:flex;flex-direction:column;gap:2px;padding:8px 0;}
.nms-settings-tab{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;font:400 13px var(--sans);color:var(--ink-2);cursor:pointer;border:none;background:none;text-align:left;transition:background .15s;width:100%;}
.nms-settings-tab:hover{background:var(--paper);}
.nms-settings-tab.active{background:#eff6ff;color:var(--b-700);font-weight:500;}
.nms-settings-tab .material-icons{font-size:18px;opacity:.6;}

/* ── Form elements ── */
.nms-form-group{margin-bottom:16px;}
.nms-form-label{display:block;font:500 11px var(--mono);color:var(--ink-3);text-transform:uppercase;margin-bottom:4px;}
.nms-form-input{width:100%;padding:8px 12px;border:1px solid var(--rule);border-radius:6px;font:400 13px var(--sans);color:var(--ink);background:#fff;transition:border-color .15s;}
.nms-form-input:focus{border-color:var(--b-600);outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.nms-form-hint{font:400 11px var(--sans);color:var(--ink-3);margin-top:4px;}

/* ── Sortable headers ── */
.nms-tbl th.sortable{cursor:pointer;user-select:none;position:relative;padding-right:18px;}
.nms-tbl th.sortable::after{content:"⇅";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:10px;opacity:.3;}
.nms-tbl th.sortable.sort-asc::after{content:"↑";opacity:.7;color:var(--b-600);}
.nms-tbl th.sortable.sort-desc::after{content:"↓";opacity:.7;color:var(--b-600);}

/* ── Media placeholder ── */
.nms-media-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:32px;background:var(--paper);border:1px dashed var(--rule);border-radius:8px;
  color:var(--ink-3);text-align:center;
}
.nms-media-placeholder .material-icons{font-size:48px;opacity:.3;}
.nms-media-meta{display:flex;flex-wrap:wrap;gap:12px;padding:8px 16px;font:400 11px var(--mono);color:var(--ink-3);}

/* ── Small button ── */
.nms-btn-sm{
  display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:6px;
  font:500 12px var(--sans);border:1px solid var(--rule);background:#fff;color:var(--ink-2);cursor:pointer;transition:background .15s;
}
.nms-btn-sm:hover{background:var(--paper);}

/* ============================================================
   CLICKABILITY FIX — cursor:pointer for all interactive elements
   ============================================================ */
.nms-kpi,
.nms-phone-node,
.nms-alert-item,
.nms-jy-card,
.nms-art-card,
.nms-analysis-card,
.nms-status-chip,
.nms-topo-tier,
.nms-topo-legend span,
[role="button"] {
  cursor: pointer;
}

.nms-kpi:hover,
.nms-phone-node:hover,
.nms-alert-item:hover,
.nms-jy-card:hover,
.nms-art-card:hover,
.nms-analysis-card:hover {
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.nms-kpi:active,
.nms-phone-node:active,
.nms-alert-item:active,
.nms-jy-card:active,
.nms-art-card:active,
.nms-analysis-card:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

/* Selected state for cards */
.nms-kpi.selected,
.nms-jy-card.selected,
.nms-analysis-card.selected {
  outline: 2px solid #f5a623;
  outline-offset: 2px;
}

.nms-phone-node.selected {
  outline: 2px solid #f5a623;
  outline-offset: 1px;
}

.nms-alert-item.selected {
  background: #fff8e1;
  border-left: 3px solid #f5a623;
}

/* Topbar chips as links */
a.nms-topbar-chip {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;
}
a.nms-topbar-chip:hover {
  opacity: 0.7;
}

/* Phone node hover for clickable topology */
.nms-phone-node.clickable{cursor:pointer;transition:transform .15s cubic-bezier(.23,1,.32,1);}
.nms-phone-node.clickable:hover{transform:translateY(-2px);}
.nms-phone-node.clickable:hover .pho{box-shadow:0 4px 12px rgba(15,23,42,.12);}
/* Node hover */
.nms-node[ng-click],.nms-node[style*="cursor:pointer"]{cursor:pointer;transition:box-shadow .15s,transform .15s;}
.nms-node[ng-click]:hover,.nms-node[style*="cursor:pointer"]:hover{box-shadow:0 4px 14px rgba(15,23,42,.1);transform:translateY(-1px);}