/* ── ADSB1090 Network — NOC Design System v3 ────────────────────────────────
   Navy/charcoal theme with high-information density.
   The NOC is a professional monitoring interface.
───────────────────────────────────────────────────────────────────────────── */
:root {
  --bg:    #030710;
  --bg-1:  #060c1a;
  --bg-2:  #090f22;
  --bg-3:  #0d1530;
  --bg-4:  #111d3c;

  --border:  rgba(148,163,184,.07);
  --border-2:rgba(148,163,184,.13);
  --border-3:rgba(148,163,184,.22);

  --text:  #dce8f8;
  --text-2:#6880a8;
  --text-3:#2c3c58;

  --accent:  #1d4ed8;
  --accent-2:#2563eb;
  --accent-3:#93c5fd;
  --accent-d:rgba(29,78,216,.09);

  --green:#10b981; --green-d:rgba(16,185,129,.1);
  --yellow:#f59e0b;--yellow-d:rgba(245,158,11,.1);
  --red:#ef4444;   --red-d:rgba(239,68,68,.1);
  --cyan:#06b6d4;  --cyan-d:rgba(6,182,212,.1);
  --orange:#f97316;--purple:#8b5cf6;

  --mono:'JetBrains Mono','Fira Code',ui-monospace,monospace;
  --body:'Inter',system-ui,-apple-system,sans-serif;

  --r:6px;--r2:10px;--r3:14px;--rpill:999px;
  --sidebar-w:240px;
  --t:140ms ease;
  --shadow:0 4px 20px rgba(0,0,0,.6);
  --shadow-lg:0 16px 60px rgba(0,0,0,.7);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{font-family:var(--body);font-size:13px;line-height:1.6;background:var(--bg);color:var(--text);
     -webkit-font-smoothing:antialiased;display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
img{max-width:100%;display:block}
a{color:var(--accent-3);text-decoration:none}
a:hover{text-decoration:underline}
input,select,textarea,button{font-family:inherit;font-size:inherit}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.noc-sidebar{background:var(--bg-1);border-right:1px solid var(--border);display:flex;flex-direction:column;
               position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden}
.noc-brand{padding:18px 16px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
.noc-brand img{width:130px;opacity:.88;margin-bottom:8px}
.noc-brand-label{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#4a6fa5}
.noc-nav{padding:6px;flex:1}
.noc-nav-section{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);padding:12px 10px 4px}
.noc-nav-link{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r2);
               font-size:13px;font-weight:500;color:var(--text-2);text-decoration:none;transition:all var(--t)}
.noc-nav-icon{font-size:13px;flex-shrink:0;opacity:.7;width:16px;text-align:center}
.noc-nav-link:hover{color:var(--text);background:var(--bg-3);text-decoration:none}
.noc-nav-link:hover .noc-nav-icon{opacity:1}
.noc-nav-link.active{color:var(--accent-3);background:var(--accent-d)}
.noc-nav-link.active .noc-nav-icon{opacity:1}
.noc-nav-div{height:1px;background:var(--border);margin:6px 0}
.noc-badge{margin-left:auto;background:var(--accent);color:#fff;font-family:var(--mono);
            font-size:10px;font-weight:800;padding:1px 6px;border-radius:var(--rpill);min-width:18px;text-align:center}
.noc-badge.red{background:var(--red)}
.noc-badge.yellow{background:var(--yellow);color:#000}
.noc-sidebar-foot{padding:12px 16px;border-top:1px solid var(--border);flex-shrink:0;
                   font-size:11px;color:var(--text-3);font-family:var(--mono);display:flex;align-items:center;gap:8px}
.noc-online-dot{width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}

/* ── Alert banner ─────────────────────────────────────────────────────────── */
.noc-alert-banner{background:rgba(239,68,68,.1);border-bottom:1px solid rgba(239,68,68,.2);
                   padding:7px 28px;font-size:12px;color:var(--red);font-weight:600;display:flex;align-items:center;gap:8px}
.noc-maint-banner{background:rgba(245,158,11,.1);border-bottom:1px solid rgba(245,158,11,.2);
                   padding:7px 28px;font-size:12px;color:var(--yellow);font-weight:600;display:flex;align-items:center;gap:8px}

/* ── Main area ────────────────────────────────────────────────────────────── */
.noc-main{display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden}
.noc-content{padding:28px;flex:1}
.noc-page-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.noc-page-title{font-size:20px;font-weight:700;letter-spacing:-.02em}
.noc-page-sub{font-size:11px;color:var(--text-2);font-family:var(--mono);margin-top:3px}

/* ── Stat grid ────────────────────────────────────────────────────────────── */
.noc-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:24px}
.noc-stat{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r3);padding:16px 18px;position:relative;overflow:hidden}
.noc-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--border)}
.noc-stat.c-blue::before  {background:var(--accent)}
.noc-stat.c-green::before {background:var(--green)}
.noc-stat.c-red::before   {background:var(--red)}
.noc-stat.c-yellow::before{background:var(--yellow)}
.noc-stat.c-cyan::before  {background:var(--cyan)}
.noc-stat-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2);margin-bottom:6px}
.noc-stat-val{font-family:var(--mono);font-size:24px;font-weight:700;line-height:1}
.noc-stat.c-blue   .noc-stat-val{color:var(--accent-3)}
.noc-stat.c-green  .noc-stat-val{color:var(--green)}
.noc-stat.c-red    .noc-stat-val{color:var(--red)}
.noc-stat.c-yellow .noc-stat-val{color:var(--yellow)}
.noc-stat.c-cyan   .noc-stat-val{color:var(--cyan)}
.noc-stat-sub{font-size:11px;color:var(--text-2);font-family:var(--mono);margin-top:4px}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.noc-card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--r3);overflow:hidden;margin-bottom:16px}
.noc-card:last-child{margin-bottom:0}
.noc-card-header{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border);
                  background:var(--bg-2);font-size:12px;font-weight:700;letter-spacing:.02em}
.noc-card-body{padding:16px}
.noc-empty{padding:48px;text-align:center;color:var(--text-2)}
.noc-empty-icon{font-size:36px;display:block;margin-bottom:12px;opacity:.3}
.noc-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.noc-three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.mb-16{margin-bottom:16px} .mb-24{margin-bottom:24px}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.noc-table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
          color:var(--text-2);padding:9px 13px;border-bottom:1px solid var(--border-2);text-align:left;white-space:nowrap}
tbody td{padding:10px 13px;border-bottom:1px solid var(--border);font-size:12px}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--t)}
tbody tr:hover td{background:var(--bg-2)}
.mono{font-family:var(--mono)} td.mono{color:var(--text-2)}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;height:32px;
     border-radius:var(--r2);font-size:12px;font-weight:600;letter-spacing:.01em;cursor:pointer;
     transition:all var(--t);white-space:nowrap;border:1px solid;text-decoration:none!important}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary {background:var(--accent);  border-color:var(--accent);    color:#fff}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn-secondary{background:var(--bg-3);border-color:var(--border-2);color:var(--text)}
.btn-secondary:hover{background:var(--bg-4)}
.btn-ghost{background:transparent;border-color:var(--border-2);color:var(--text-2)}
.btn-ghost:hover{background:var(--bg-3);color:var(--text)}
.btn-danger{background:var(--red-d);border-color:rgba(239,68,68,.3);color:var(--red)}
.btn-danger:hover{background:rgba(239,68,68,.2);border-color:var(--red)}
.btn-success{background:var(--green-d);border-color:rgba(16,185,129,.3);color:var(--green)}
.btn-success:hover{background:rgba(16,185,129,.2);border-color:var(--green)}
.btn-sm{height:26px;padding:0 10px;font-size:11px}
.btn-xs{height:22px;padding:0 8px;font-size:10px;border-radius:var(--r)}
.btn-lg{height:38px;padding:0 18px;font-size:13px}
.btn-full{width:100%}

/* ── Badges ───────────────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;border-radius:var(--rpill);
        font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.badge-blue  {background:var(--accent-d);color:var(--accent-3)}
.badge-green {background:var(--green-d); color:var(--green)}
.badge-yellow{background:var(--yellow-d);color:var(--yellow)}
.badge-red   {background:var(--red-d);   color:var(--red)}
.badge-cyan  {background:var(--cyan-d);  color:var(--cyan)}
.badge-gray  {background:var(--bg-4);    color:var(--text-2)}

/* ── Status dots ──────────────────────────────────────────────────────────── */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dot-green {background:var(--green)}
.dot-yellow{background:var(--yellow)}
.dot-red   {background:var(--red)}
.dot-cyan  {background:var(--cyan)}
.dot-gray  {background:var(--text-3)}

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.form-label{font-size:11px;font-weight:600;color:var(--text-2);letter-spacing:.04em}
.form-control{background:var(--bg-3);border:1px solid var(--border-2);border-radius:var(--r2);
               padding:0 10px;height:32px;color:var(--text);font-size:12px;width:100%;
               transition:border-color var(--t);outline:none;appearance:none}
.form-control:focus{border-color:var(--accent)}
.form-control::placeholder{color:var(--text-3)}
textarea.form-control{height:auto;padding:8px 10px;resize:vertical;min-height:70px}
select.form-control{cursor:pointer}
.form-hint{font-size:11px;color:var(--text-2)}

/* ── Flash ────────────────────────────────────────────────────────────────── */
.noc-flash{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;
            border-radius:var(--r2);font-size:12px;border:1px solid;margin-bottom:8px;gap:10px}
.noc-flash button{background:none;border:none;cursor:pointer;font-size:16px;line-height:1;flex-shrink:0}
.noc-flash-success{background:var(--green-d);border-color:rgba(16,185,129,.25);color:var(--green)}
.noc-flash-error  {background:var(--red-d);  border-color:rgba(239,68,68,.25);  color:var(--red)}
.noc-flash-info   {background:var(--accent-d);border-color:rgba(29,78,216,.25); color:var(--accent-3)}
.noc-flash-warning{background:var(--yellow-d);border-color:rgba(245,158,11,.25);color:var(--yellow)}

/* ── Login ────────────────────────────────────────────────────────────────── */
.noc-login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;
                  background:var(--bg);grid-column:1/-1}
.noc-login-card{width:100%;max-width:380px;padding:40px;background:var(--bg-1);
                 border:1px solid var(--border-2);border-radius:var(--r3);box-shadow:var(--shadow-lg)}
.noc-login-logo{text-align:center;margin-bottom:28px}
.noc-login-logo img{max-width:180px;margin:0 auto 10px}

/* ── Heartbeat timeline ───────────────────────────────────────────────────── */
.hb-timeline{display:flex;gap:2px;align-items:center;height:32px;flex-wrap:nowrap;overflow:hidden}
.hb-tick{width:4px;border-radius:1px;flex-shrink:0;transition:height var(--t)}
.hb-tick.present{background:var(--green)}
.hb-tick.missed {background:var(--red);opacity:.7}
.hb-tick.gap    {background:var(--yellow);opacity:.6}
.hb-tick.none   {background:var(--bg-4)}

/* ── Diagnostic charts ────────────────────────────────────────────────────── */
.chart-container{position:relative}
.chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.noc-pages{display:flex;gap:4px;margin-top:16px}
.noc-pages a,.noc-pages span.cur{display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--r);font-family:var(--mono);font-size:11px;
  text-decoration:none;transition:all var(--t);border:1px solid transparent}
.noc-pages a{color:var(--text-2)}
.noc-pages a:hover{background:var(--bg-3);color:var(--text);border-color:var(--border);text-decoration:none}
.noc-pages span.cur{background:var(--accent);color:#fff}

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--border-3)}