/* ============================================================
   Fionnix Administration Console — dense enterprise UI
   Reuses the public site's brand tokens (colors/fonts) but with
   a layout and density built for daily operational work.
   ============================================================ */

:root{
  --bg:#0b0e14;
  --bg-alt:#0d1119;
  --sidebar-bg:#0a0d13;
  --surface:#111621;
  --surface-2:#151b28;
  --surface-hover:#1a2233;
  --border:#212a3b;
  --border-light:#2a3549;
  --text:#eef1f7;
  --text-dim:#98a2b8;
  --text-faint:#5b6579;
  --accent:#5b7cfa;
  --accent-bright:#7d97ff;
  --accent-soft:rgba(91,124,250,.14);
  --accent-2:#22d3c5;
  --accent-2-soft:rgba(34,211,197,.14);
  --amber:#f0a93f;
  --amber-soft:rgba(240,169,63,.14);
  --red:#ef6a5f;
  --red-soft:rgba(239,106,95,.14);
  --green:#3ecf8e;
  --green-soft:rgba(62,207,142,.14);
  --font-display:'Space Grotesk','Avenir Next','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono','SF Mono','Cascadia Code','Consolas',monospace;
  --radius-sm:5px;
  --radius:8px;
  --sidebar-w:248px;
  --topbar-h:56px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  font-size:13.5px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button,input,select,textarea{font-family:inherit; font-size:inherit; color:inherit;}
button{cursor:pointer;}
:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; letter-spacing:-.01em;}

/* ---------- app shell ---------- */
.app-shell{display:flex; min-height:100vh;}

.sidebar{
  width:var(--sidebar-w); flex:none; background:var(--sidebar-bg); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; overflow-y:auto;
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--border); flex:none;
}
.sidebar-brand .mark{width:24px; height:24px; border-radius:7px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); flex:none;}
.sidebar-brand .name{font-family:var(--font-display); font-weight:700; font-size:15px;}
.sidebar-brand .tag{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.09em; color:var(--text-faint); text-transform:uppercase; display:block;}

.nav-group{padding:14px 10px;}
.nav-group + .nav-group{border-top:1px solid var(--border); padding-top:14px;}
.nav-label{font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); padding:0 10px 6px;}
.nav-item{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-sm); color:var(--text-dim);
  font-size:13px; font-weight:500; margin-bottom:2px; position:relative; transition:background .12s, color .12s;
}
.nav-item svg{width:16px; height:16px; flex:none; opacity:.85;}
.nav-item:hover{background:var(--surface-2); color:var(--text);}
.nav-item.active{background:var(--accent-soft); color:var(--accent-bright);}
.nav-item.active svg{opacity:1;}
.nav-item .label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.nav-badge{
  font-family:var(--font-mono); font-size:10.5px; font-weight:600; padding:1px 6px; border-radius:20px;
  background:var(--surface-2); color:var(--text-dim); flex:none;
}
.nav-badge.warn{background:var(--red-soft); color:var(--red);}
.nav-item.disabled{opacity:.4; pointer-events:none;}

.main-col{margin-left:var(--sidebar-w); flex:1; min-width:0; display:flex; flex-direction:column;}

.topbar{
  height:var(--topbar-h); flex:none; border-bottom:1px solid var(--border); background:var(--bg-alt);
  display:flex; align-items:center; gap:14px; padding:0 20px; position:sticky; top:0; z-index:20;
}
.topbar-search{
  flex:1; max-width:440px; position:relative;
}
.topbar-search input{
  width:100%; background:var(--surface); border:1px solid var(--border-light); border-radius:var(--radius-sm);
  padding:8px 12px 8px 34px; color:var(--text); font-size:13px;
}
.topbar-search input:focus{border-color:var(--accent); outline:none;}
.topbar-search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--text-faint);}
.search-results{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--surface-2); border:1px solid var(--border-light);
  border-radius:var(--radius); box-shadow:0 12px 32px -8px rgba(0,0,0,.5); max-height:360px; overflow-y:auto; z-index:30; display:none;
}
.search-results.open{display:block;}
.search-result-row{display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--border);}
.search-result-row:last-child{border-bottom:none;}
.search-result-row:hover{background:var(--surface-hover);}
.search-result-type{font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-2); flex:none; width:76px;}
.search-result-label{font-weight:600; font-size:13px;}
.search-result-sub{color:var(--text-faint); font-size:11.5px;}

.topbar-right{display:flex; align-items:center; gap:8px; margin-left:auto;}
.icon-btn{
  width:34px; height:34px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; position:relative; color:var(--text-dim);
}
.icon-btn:hover{background:var(--surface-2); color:var(--text);}
.icon-btn svg{width:17px; height:17px;}
.icon-dot{position:absolute; top:5px; right:5px; width:7px; height:7px; border-radius:50%; background:var(--red); border:1.5px solid var(--bg-alt);}

.role-select{
  background:var(--surface); border:1px solid var(--border-light); border-radius:var(--radius-sm); padding:7px 10px; font-size:12.5px; color:var(--text);
}

.dropdown-panel{
  position:absolute; top:calc(100% + 8px); right:20px; width:360px; background:var(--surface-2); border:1px solid var(--border-light);
  border-radius:var(--radius); box-shadow:0 16px 40px -10px rgba(0,0,0,.55); z-index:40; display:none; max-height:70vh; overflow-y:auto;
}
.dropdown-panel.open{display:block;}
.dropdown-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border);}
.dropdown-head h4{font-size:13px;}
.dropdown-head button{font-size:11.5px; color:var(--accent-2); background:none; border:none;}
.notif-row{padding:11px 14px; border-bottom:1px solid var(--border); font-size:12.5px; display:flex; gap:9px;}
.notif-row:last-child{border-bottom:none;}
.notif-row.unread{background:rgba(91,124,250,.06);}
.notif-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); margin-top:5px; flex:none;}
.notif-dot.read{background:transparent;}
.notif-time{color:var(--text-faint); font-size:11px; margin-top:2px;}

.view{padding:22px 26px 60px; max-width:1400px;}
.view-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap;}
.view-head h1{font-size:21px;}
.breadcrumbs{font-size:12px; color:var(--text-faint); margin-bottom:6px;}
.breadcrumbs a{color:var(--text-dim);}
.breadcrumbs a:hover{color:var(--accent-2);}
.view-actions{display:flex; gap:8px; flex-wrap:wrap;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:12.5px; padding:8px 14px;
  border-radius:var(--radius-sm); border:1px solid var(--border-light); background:var(--surface-2); color:var(--text); white-space:nowrap;
}
.btn:hover{background:var(--surface-hover);}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-bright);}
.btn-danger{border-color:rgba(239,106,95,.4); color:var(--red);}
.btn-danger:hover{background:var(--red-soft);}
.btn-sm{padding:5px 10px; font-size:11.5px;}
.btn svg{width:14px; height:14px;}

/* ---------- KPI cards ---------- */
.kpi-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:20px;}
@media(max-width:1300px){.kpi-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:800px){.kpi-grid{grid-template-columns:repeat(2,1fr);}}
.kpi-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; cursor:pointer; transition:border-color .12s;
}
.kpi-card:hover{border-color:var(--border-light);}
.kpi-card .kpi-label{font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; font-family:var(--font-mono); margin-bottom:8px;}
.kpi-card .kpi-value{font-family:var(--font-display); font-size:26px; font-weight:700;}
.kpi-card .kpi-value.tone-red{color:var(--red);}
.kpi-card .kpi-value.tone-amber{color:var(--amber);}
.kpi-card .kpi-value.tone-green{color:var(--green);}
.kpi-card .kpi-sub{font-size:11px; color:var(--text-faint); margin-top:4px;}

/* ---------- panels / cards ---------- */
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:16px;}
.panel-head{display:flex; align-items:center; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--border);}
.panel-head h3{font-size:13.5px;}
.panel-body{padding:14px 16px;}
.panel-body.no-pad{padding:0;}
.two-col{display:grid; grid-template-columns:2fr 1fr; gap:16px; align-items:start;}
@media(max-width:1100px){.two-col{grid-template-columns:1fr;}}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;}
table.data-table{width:100%; border-collapse:collapse; font-size:12.5px;}
table.data-table th{
  text-align:left; padding:9px 14px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-faint); border-bottom:1px solid var(--border); white-space:nowrap; background:var(--surface-2);
}
table.data-table td{padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:middle;}
table.data-table tbody tr{transition:background .1s;}
table.data-table tbody tr:hover{background:var(--surface-hover); cursor:pointer;}
table.data-table tbody tr:last-child td{border-bottom:none;}
.cell-primary{font-weight:600; color:var(--text);}
.cell-sub{color:var(--text-faint); font-size:11.5px;}
.cell-mono{font-family:var(--font-mono); font-size:11.5px;}

/* ---------- badges/pills/status ---------- */
.pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px; white-space:nowrap;}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor;}
.pill-green{background:var(--green-soft); color:var(--green);}
.pill-amber{background:var(--amber-soft); color:var(--amber);}
.pill-red{background:var(--red-soft); color:var(--red);}
.pill-gray{background:var(--surface-2); color:var(--text-dim);}
.pill-blue{background:var(--accent-soft); color:var(--accent-bright);}
.pill-teal{background:var(--accent-2-soft); color:var(--accent-2);}

/* ---------- filters ---------- */
.filter-bar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; align-items:center;}
.filter-bar select, .filter-bar input[type=text]{
  background:var(--surface); border:1px solid var(--border-light); border-radius:var(--radius-sm); padding:7px 10px; font-size:12px;
}
.filter-bar input[type=text]{min-width:220px;}
.filter-count{color:var(--text-faint); font-size:11.5px; margin-left:auto;}

/* ---------- tabs ---------- */
.tabbar{display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:16px; overflow-x:auto;}
.tab{padding:10px 14px; font-size:12.5px; font-weight:600; color:var(--text-faint); border-bottom:2px solid transparent; white-space:nowrap;}
.tab:hover{color:var(--text-dim);}
.tab.active{color:var(--accent-bright); border-bottom-color:var(--accent);}

/* ---------- record header ---------- */
.record-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:10px;}
.record-title{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.record-title h1{font-size:20px;}
.record-meta{display:flex; flex-wrap:wrap; gap:16px; margin-top:10px; font-size:12px; color:var(--text-dim);}
.record-meta .k{color:var(--text-faint); margin-right:5px;}

/* ---------- definition list ---------- */
.dl{display:grid; grid-template-columns:160px 1fr; gap:9px 12px; font-size:12.5px;}
.dl dt{color:var(--text-faint);}
.dl dd{color:var(--text);}

/* ---------- forms ---------- */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px;}
.form-grid.single{grid-template-columns:1fr;}
.form-field{display:flex; flex-direction:column; gap:5px;}
.form-field.span-2{grid-column:1 / -1;}
.form-field label{font-size:11.5px; color:var(--text-dim); font-weight:600;}
.form-field input, .form-field select, .form-field textarea{
  background:var(--surface-2); border:1px solid var(--border-light); border-radius:var(--radius-sm); padding:8px 10px; color:var(--text); font-size:12.5px;
}
.form-field textarea{resize:vertical; min-height:70px; font-family:inherit;}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{border-color:var(--accent); outline:none;}
.form-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:16px; padding-top:14px; border-top:1px solid var(--border);}

/* ---------- modal ---------- */
.modal-backdrop{position:fixed; inset:0; background:rgba(4,6,10,.6); display:none; align-items:flex-start; justify-content:center; z-index:100; padding:60px 20px;}
.modal-backdrop.open{display:flex;}
.modal{background:var(--surface); border:1px solid var(--border-light); border-radius:var(--radius); width:100%; max-width:640px; box-shadow:0 30px 80px -16px rgba(0,0,0,.6);}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--border);}
.modal-head h3{font-size:14.5px;}
.modal-close{background:none; border:none; color:var(--text-faint); font-size:18px; line-height:1;}
.modal-body{padding:18px;}

/* ---------- needs attention ---------- */
.attn-row{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border); font-size:12.5px;}
.attn-row:last-child{border-bottom:none;}
.attn-row:hover{background:var(--surface-hover); cursor:pointer;}
.attn-dot{width:8px; height:8px; border-radius:50%; flex:none;}
.attn-dot.critical{background:var(--red);}
.attn-dot.high{background:var(--amber);}
.attn-dot.medium{background:var(--accent-2);}
.attn-text{flex:1;}
.attn-arrow{color:var(--text-faint);}

/* ---------- comments ---------- */
.comment{padding:10px 12px; border-radius:var(--radius-sm); background:var(--surface-2); margin-bottom:8px;}
.comment.internal{background:var(--amber-soft); border:1px dashed rgba(240,169,63,.4);}
.comment-meta{display:flex; justify-content:space-between; font-size:11px; color:var(--text-faint); margin-bottom:5px;}
.comment-author{font-weight:600; color:var(--text-dim);}

/* ---------- misc ---------- */
.empty-state{padding:50px 20px; text-align:center; color:var(--text-faint);}
.empty-state h3{color:var(--text-dim); margin-bottom:8px; font-size:15px;}
.chip-row{display:flex; flex-wrap:wrap; gap:6px;}
.text-faint{color:var(--text-faint);}
.text-dim{color:var(--text-dim);}
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;}
.bar-track{height:6px; background:var(--surface-2); border-radius:4px; overflow:hidden;}
.bar-fill{height:100%; background:var(--accent);}
.sla-timer{font-family:var(--font-mono); font-size:12px;}

.link-btn{background:none; border:none; color:var(--accent-2); font-size:12.5px; font-weight:600;}
.link-btn:hover{text-decoration:underline;}

.avatar-init{
  width:26px; height:26px; border-radius:50%; background:var(--accent-soft); color:var(--accent-bright);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:none;
}

@media(max-width:900px){
  .sidebar{transform:translateX(-100%); transition:transform .18s ease; z-index:50;}
  .sidebar.open{transform:translateX(0);}
  .main-col{margin-left:0;}
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
}