/* ============================================================
   MASTER CONTROL — design tokens
   Broadcast / NOC control-room aesthetic:
   near-black navy base, amber tally accent, mono for data.
   ============================================================ */
:root{
  --bg:            #0a0f1a;
  --bg-raised:     #0e1524;
  --panel:         #121b2e;
  --panel-2:       #16203590 25%;
  --panel-border:  #232f47;
  --panel-border-soft: #1a2439;
  --text:          #e7ecf3;
  --text-dim:      #a7b3c8;
  --text-mute:     #6d7a92;

  --amber:         #e8a33d;
  --amber-dim:     #6b5228;
  --green:         #3fbf7f;
  --green-dim:     #1f4a37;
  --red:           #e5484d;
  --red-dim:       #4a2226;
  --blue:          #5b9dd9;

  --radius-sm: 3px;
  --radius-md: 4px;

  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shadow-panel: 0 1px 0 rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.hidden{ display:none !important; }
a{ color: var(--amber); }
code{ font-family: var(--font-mono); background: #0000004d; padding: .1em .35em; border-radius: 2px; font-size: .92em; }
::selection{ background: var(--amber-dim); color:#fff; }

/* focus ring for accessibility */
:focus-visible{ outline: 2px solid var(--amber); outline-offset: 2px; }

/* subtle background texture — signal grid, restrained */
body::before{
  content:"";
  position: fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, #ffffff08 1px, transparent 1px),
    linear-gradient(to bottom, #ffffff08 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 20% 0%, #000 40%, transparent 100%);
}

/* ============================== boot ============================== */
.boot-screen{
  position: fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background: var(--bg); z-index: 999;
}
.boot-mark{
  font-family: var(--font-mono); letter-spacing: .16em; font-size: 12px; color: var(--text-mute);
  display:flex; align-items:center; gap:8px;
}
.boot-dot{ width:7px; height:7px; border-radius:50%; background: var(--amber); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform: scale(1);} 50%{ opacity:.35; transform: scale(.75);} }

/* ============================== login ============================== */
.login-screen{
  position: fixed; inset:0; z-index: 50;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, #1a2440 0%, transparent 60%),
    var(--bg);
  overflow:hidden;
}
.login-scanlines{
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, #ffffff03 3px, #ffffff03 4px);
}
.login-card{
  position:relative; z-index:1;
  width: min(380px, 90vw);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
  padding: 28px 26px 22px;
  display:flex; flex-direction:column; gap: 16px;
}
.login-brand{ display:flex; align-items:center; gap: 12px; margin-bottom: 4px; }
.brand-mark{
  font-family: var(--font-mono); font-weight:600; font-size: 15px;
  width: 36px; height:36px; display:flex; align-items:center; justify-content:center;
  background: var(--amber); color:#1a1206; border-radius: var(--radius-sm);
  letter-spacing: .02em;
}
.brand-mark.small{ width:30px; height:30px; font-size:13px; }
.brand-title{ font-weight:600; font-size: 15px; color: var(--text); }
.brand-sub{ font-size: 12px; color: var(--text-mute); margin-top:1px; }
.brand-env{ font-family: var(--font-mono); font-size: 10.5px; color: var(--text-mute); margin-top:2px; letter-spacing:.02em; word-break: break-all; }

.field{ display:flex; flex-direction:column; gap:6px; }
.field-label{ font-size: 12px; color: var(--text-dim); font-weight:500; }
.field-hint{ font-size: 11px; color: var(--text-mute); }
input, select, textarea{
  font-family: var(--font-sans);
  background: var(--bg-raised);
  border: 1px solid var(--panel-border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font-size: 13.5px;
  width: 100%;
}
textarea{ font-family: var(--font-mono); font-size: 12.5px; resize: vertical; min-height: 70px; }
input:focus, select:focus, textarea:focus{ border-color: var(--amber); }
input::placeholder{ color: var(--text-mute); }

.btn{
  font-family: var(--font-sans);
  font-size: 13.5px; font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  border: 1px solid var(--panel-border);
  background: var(--bg-raised);
  color: var(--text);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition: border-color .12s ease, background .12s ease;
  white-space: nowrap;
}
.btn:hover{ border-color: #37456300; background:#182238; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-block{ width:100%; }
.btn-primary{ background: var(--amber); border-color: var(--amber); color:#1a1206; }
.btn-primary:hover{ background:#f0ae4d; }
.btn-ghost{ background:transparent; }
.btn-danger{ background: var(--red-dim); border-color:#6b2c30; color:#ffd7d8; }
.btn-danger:hover{ background:#5a262b; }
.btn-sm{ padding: 5px 10px; font-size: 12.5px; }
.btn-icon{ padding: 7px 8px; }

.tally-dot{ width:7px; height:7px; border-radius:50%; background: var(--text-mute); flex:none; }
.tally-dot.on{ background: var(--green); box-shadow: 0 0 8px #3fbf7f80; }
.tally-dot.off{ background: var(--red); }
.tally-dot.warn{ background: var(--amber); }

.login-error{
  background: var(--red-dim); border:1px solid #6b2c30; color:#ffd7d8;
  padding: 9px 11px; border-radius: var(--radius-sm); font-size: 12.5px;
}
.login-foot{ font-size: 11px; color: var(--text-mute); line-height:1.5; }

/* ============================== app shell ============================== */
.app-shell{ display:flex; height:100vh; position:relative; z-index:1; }

.sidebar{
  width: 220px; flex: none;
  background: var(--bg-raised);
  border-right: 1px solid var(--panel-border-soft);
  display:flex; flex-direction:column;
}
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding: 18px 16px 14px; border-bottom: 1px solid var(--panel-border-soft); }
.brand-copy{ min-width:0; }

.nav{ flex:1; overflow-y:auto; padding: 10px 8px; display:flex; flex-direction:column; gap:1px; }
.nav-group-label{ font-family: var(--font-mono); font-size: 10px; letter-spacing:.1em; color: var(--text-mute); padding: 12px 10px 5px; }
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--text-dim); text-decoration:none; font-size: 13px; font-weight:500;
  cursor:pointer; border-left: 2px solid transparent;
}
.nav-item svg{ width:16px; height:16px; flex:none; opacity:.85; }
.nav-item:hover{ background: #ffffff08; color: var(--text); }
.nav-item.active{ background: #e8a33d14; color: var(--amber); border-left-color: var(--amber); }
.nav-item.active svg{ opacity:1; }

.sidebar-foot{ padding: 12px; border-top: 1px solid var(--panel-border-soft); display:flex; flex-direction:column; gap:10px; }
.conn-row{ display:flex; align-items:center; gap:8px; font-size:11.5px; font-family: var(--font-mono); color: var(--text-mute); padding: 0 2px; }

.global-search-wrap{ position:relative; padding: 4px 12px 10px; border-top: 1px solid var(--panel-border-soft); }
.global-search-input{
  width:100%; font-size:12.5px; padding: 8px 10px;
  background: var(--bg-raised); border:1px solid var(--panel-border); border-radius: var(--radius-sm); color: var(--text);
  margin-top: 10px;
}
.global-search-input:focus{ border-color: var(--amber); }
.global-search-results{
  position:absolute; left:12px; right:12px; top: 100%; margin-top: -4px;
  background: var(--panel); border:1px solid var(--panel-border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-panel); max-height: 60vh; overflow-y:auto; z-index: 70;
}
.gs-group-label{ font-family: var(--font-mono); font-size: 10px; letter-spacing:.08em; color: var(--text-mute); padding: 8px 10px 4px; }
.gs-item{ display:flex; flex-direction:column; gap:2px; padding: 7px 10px; cursor:pointer; border-radius: var(--radius-sm); }
.gs-item:hover{ background:#ffffff0a; }
.gs-item-title{ font-size: 12.5px; color: var(--text); font-weight:500; }
.gs-item-sub{ font-size: 11px; color: var(--text-mute); font-family: var(--font-mono); }
.gs-empty{ padding: 14px 10px; font-size:12px; color: var(--text-mute); text-align:center; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:flex-start; justify-content:space-between; gap: 16px;
  padding: 20px 28px; border-bottom: 1px solid var(--panel-border-soft);
  background: linear-gradient(to bottom, #0d1424, transparent);
}
.topbar-title h1{ font-size: 19px; margin:0; font-weight:600; letter-spacing:-.01em; }
.topbar-sub{ margin: 4px 0 0; font-size:12.5px; color: var(--text-mute); }
.topbar-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.view-scroll{ flex:1; overflow-y:auto; }
.view-root{ padding: 22px 28px 60px; max-width: 1280px; }

/* ============================== stat cards ============================== */
.stat-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap:12px; margin-bottom: 20px; }
.stat-card{
  background: var(--panel); border:1px solid var(--panel-border-soft); border-radius: var(--radius-md);
  padding: 14px 16px;
}
.stat-label{ font-size: 11px; color: var(--text-mute); text-transform: none; letter-spacing:.02em; }
.stat-value{ font-family: var(--font-mono); font-size: 24px; font-weight:600; margin-top:6px; color: var(--text); }
.stat-value.amber{ color: var(--amber); }
.stat-value.green{ color: var(--green); }
.stat-value.red{ color: var(--red); }

/* ============================== panels / sections ============================== */
.panel{
  background: var(--panel); border:1px solid var(--panel-border-soft); border-radius: var(--radius-md);
  margin-bottom: 18px;
}
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 14px 16px; border-bottom: 1px solid var(--panel-border-soft); }
.panel-head h2{ font-size: 14px; margin:0; font-weight:600; }
.panel-head p{ margin:2px 0 0; font-size: 12px; color: var(--text-mute); }
.panel-body{ padding: 16px; }
.panel-body.flush{ padding:0; }

/* ============================== table ============================== */
.table-wrap{ overflow-x:auto; }
table.grid{ width:100%; border-collapse: collapse; font-size: 13px; }
table.grid th{
  text-align:left; font-weight:600; color: var(--text-mute); font-size: 11px;
  padding: 10px 14px; border-bottom: 1px solid var(--panel-border-soft);
  white-space: nowrap; position: sticky; top:0; background: var(--panel);
}
table.grid td{ padding: 10px 14px; border-bottom: 1px solid var(--panel-border-soft); vertical-align: middle; }
table.grid tr:last-child td{ border-bottom:none; }
table.grid tr:hover td{ background:#ffffff05; }
.mono{ font-family: var(--font-mono); font-size: 12.5px; }
.dim{ color: var(--text-mute); }
.cell-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.td-wrap{ max-width: 260px; white-space: normal; word-break: break-word; }

.badge{
  display:inline-flex; align-items:center; gap:5px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight:600; border:1px solid transparent;
}
.badge-green{ background: var(--green-dim); color:#a3e8c4; border-color:#2c6b4c; }
.badge-red{ background: var(--red-dim); color:#ffb4b7; border-color:#6b2c30; }
.badge-amber{ background: var(--amber-dim); color:#ffd399; border-color:#8a6a30; }
.badge-mute{ background:#1c273c; color: var(--text-mute); border-color: var(--panel-border); }
.badge-blue{ background:#1c3550; color:#a9d0f5; border-color:#2c5a86; }

.empty-state{ padding: 46px 20px; text-align:center; color: var(--text-mute); }
.empty-state .em-mark{ font-family: var(--font-mono); font-size: 11px; letter-spacing:.1em; color: var(--text-mute); margin-bottom:6px; }
.empty-state h3{ margin: 0 0 4px; color: var(--text); font-size:14px; }
.empty-state p{ margin:0; font-size: 12.5px; }

.loading-row{ padding: 30px; text-align:center; color: var(--text-mute); font-family: var(--font-mono); font-size:12px; }

/* ============================== forms ============================== */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .col-span-2{ grid-column: 1 / -1; }
.form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom: 0; }
.form-section-label{
  grid-column: 1/-1; font-family: var(--font-mono); font-size: 10.5px; letter-spacing:.08em;
  color: var(--text-mute); border-top:1px solid var(--panel-border-soft); padding-top:14px; margin-top:2px;
}
.checkbox-row{ display:flex; align-items:center; gap:8px; }
.checkbox-row input{ width:auto; }
.checkbox-row label{ font-size:13px; color: var(--text-dim); }
@media (max-width: 720px){ .form-grid{ grid-template-columns: 1fr; } }

/* ============================== modal ============================== */
.modal-overlay{
  position: fixed; inset:0; background:#000000b3; display:flex; align-items:flex-start; justify-content:center;
  padding: 5vh 16px; overflow-y:auto; z-index: 200;
}
.modal-card{
  background: var(--panel); border:1px solid var(--panel-border); border-radius: var(--radius-md);
  width: min(640px, 100%); box-shadow: var(--shadow-panel);
}
.modal-card.wide{ width: min(880px, 100%); }
.modal-head{ display:flex; align-items:center; justify-content:space-between; padding: 16px 20px; border-bottom:1px solid var(--panel-border-soft); }
.modal-head h3{ margin:0; font-size:15px; font-weight:600; }
.modal-close{ background:none; border:none; color: var(--text-mute); font-size:20px; cursor:pointer; line-height:1; padding:2px 6px; }
.modal-close:hover{ color: var(--text); }
.modal-body{ padding: 18px 20px; max-height: 68vh; overflow-y:auto; }
.modal-foot{ display:flex; justify-content:flex-end; gap:8px; padding: 14px 20px; border-top:1px solid var(--panel-border-soft); }

/* ============================== toast ============================== */
.toast-stack{ position: fixed; bottom: 18px; right: 18px; display:flex; flex-direction:column; gap:8px; z-index: 400; }
.toast{
  background: var(--panel); border:1px solid var(--panel-border); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: 13px; box-shadow: var(--shadow-panel); min-width: 220px; max-width: 340px;
  display:flex; align-items:flex-start; gap:9px; animation: toast-in .15s ease-out;
}
@keyframes toast-in{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:translateY(0);} }
.toast.success{ border-left: 3px solid var(--green); }
.toast.error{ border-left: 3px solid var(--red); }
.toast.info{ border-left: 3px solid var(--blue); }

/* ============================== misc ============================== */
.pill-toggle{ display:inline-flex; border:1px solid var(--panel-border); border-radius: var(--radius-sm); overflow:hidden; }
.pill-toggle button{
  background: var(--bg-raised); border:none; color: var(--text-dim); padding: 7px 13px; font-size:12.5px; font-weight:600; cursor:pointer;
  font-family: var(--font-sans);
}
.pill-toggle button + button{ border-left:1px solid var(--panel-border); }
.pill-toggle button.active{ background: var(--amber); color:#1a1206; }

.search-input{ max-width: 260px; }
.toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom: 14px; }
.toolbar-spacer{ flex:1; }

.helper-text{ font-size: 11.5px; color: var(--text-mute); margin-top:4px; }
.json-view{ font-family: var(--font-mono); font-size:11.5px; background:#080c15; border:1px solid var(--panel-border-soft); border-radius: var(--radius-sm); padding:10px; white-space:pre-wrap; word-break:break-word; max-height:220px; overflow-y:auto; color:#9fb0cc; }

.drag-handle{ cursor: grab; color: var(--text-mute); user-select:none; }
.order-controls{ display:flex; flex-direction:column; gap:2px; }
.order-controls button{ background:none; border:none; color: var(--text-mute); cursor:pointer; line-height:1; padding:1px 4px; }
.order-controls button:hover{ color: var(--amber); }

.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
@media (max-width: 900px){ .two-col{ grid-template-columns: 1fr; } }

.thumb{ width: 36px; height:36px; border-radius: var(--radius-sm); object-fit: cover; background: #1a2440; border: 1px solid var(--panel-border-soft); flex:none; }
.name-cell{ display:flex; align-items:center; gap:10px; }

.menu-toggle{
  display:none; align-items:center; justify-content:center;
  width:34px; height:34px; flex:none;
  background: var(--bg-raised); border:1px solid var(--panel-border); border-radius: var(--radius-sm);
  color: var(--text-dim); cursor:pointer;
}
.menu-toggle:hover{ color: var(--text); border-color: var(--amber); }

.sidebar-backdrop{
  display:none; position: fixed; inset:0; background:#000000a6; z-index:55;
}

@media (max-width: 900px){
  .sidebar{ position: fixed; z-index:60; height:100%; transform: translateX(-100%); transition: transform .18s ease; }
  .sidebar.open{ transform: translateX(0); }
  .menu-toggle{ display:inline-flex; }
  .sidebar-backdrop.open{ display:block; }
  .view-root{ padding: 16px; }
  .topbar{ padding: 14px 16px; }
}