:root{
  --brand:#2f6fed;
  --brand-soft:#eaf1ff;
  --brand-dark:#1e4fb8;
  --ink:#0f172a;
  --ink-2:#1f2937;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --line:#eef0f4;
  --line-2:#e5e7eb;
  --bg:#f4f6fa;
  --card:#ffffff;
  --green:#16a34a;
  --green-soft:#dcfce7;
  --red:#ef4444;
  --red-soft:#fee2e2;
  --amber:#f59e0b;
  --amber-soft:#fef3c7;
  --indigo:#6366f1;
  --badge:#ef4444;
}
*{ box-sizing: border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.scroll-thin::-webkit-scrollbar{ width:6px; height:6px; }
.scroll-thin::-webkit-scrollbar-thumb{ background:#d8dde6; border-radius:8px; }
.scroll-thin::-webkit-scrollbar-track{ background:transparent; }
.scroll-area{ overflow-y:auto; }

/* ============= SIDEBAR ============= */
#sidebar{
  width:240px;
  background:#fff;
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  flex-shrink:0;
  position:sticky; top:0; height:100vh;
}
.logo-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1rem;
  height:64px;
  border-bottom:1px solid var(--line);
}
.logo-box{
  height:34px; width:34px; border-radius:.5rem;
  background: linear-gradient(135deg, #2f6fed, #6366f1);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:.8rem; letter-spacing:.04em;
}
.nav-scroll{ flex:1; overflow-y:auto; padding:.5rem .65rem .75rem; }
.nav-section{
  padding:.85rem .85rem .35rem;
  font-size:.68rem;
  color:#94a3b8;
  letter-spacing:.1em;
  font-weight:700;
}
.nav-item{
  display:flex; align-items:center; gap:.65rem;
  padding:.55rem .75rem;
  font-size:.85rem;
  color:#475569;
  border-radius:.5rem;
  cursor:pointer;
  font-weight:500;
  transition: background .15s, color .15s;
  user-select:none;
}
.nav-item:hover{ background:#f1f5fb; color:var(--ink); }
.nav-item.active{
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-weight:600;
}
.nav-item.active .nav-ic{ color: var(--brand); }
.nav-ic{ width:1rem; height:1rem; color:#64748b; }
.chev{ margin-left:auto; color:#94a3b8; transition: transform .2s; }
.nav-parent.open > .chev{ transform: rotate(90deg); }
.nav-children{
  display:none;
  margin: .15rem 0 .2rem .55rem;
  padding-left:.65rem;
  border-left: 1px dashed #e2e8f0;
}
.nav-parent.open + .nav-children{ display:block; }
.nav-child{
  display:flex; align-items:center;
  padding:.42rem .65rem;
  font-size:.8rem;
  color:#64748b;
  border-radius:.45rem;
  cursor:pointer;
  font-weight:500;
}
.nav-child:hover{ background:#f1f5fb; color:var(--ink); }
.nav-child.active{
  background:#fff;
  color:var(--brand-dark);
  font-weight:600;
  box-shadow: 0 0 0 1px rgba(47,111,237,.18);
}

/* ============= TOPBAR ============= */
.header-band{ background:#fff; border-bottom:1px solid var(--line); }
.topbar-inner{ display:flex; align-items:center; gap:.6rem; padding:0 1.25rem; height:64px; }
.topbar-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.55rem .9rem;
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:.55rem;
  font-size:.85rem; font-weight:600;
  color:#374151;
  transition:.15s;
  cursor:pointer;
}
.topbar-btn:hover{ border-color:#cbd5e1; }
.topbar-btn .lead-ic{ color:#64748b; width:1rem; height:1rem; }
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.65rem; height:1.25rem; padding:0 .4rem;
  background:var(--badge); color:#fff; font-size:.72rem; font-weight:700;
  border-radius:9999px; line-height:1; margin-left:.25rem;
}
.notif-btn{
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:.55rem;
  border:1px solid var(--line-2);
  background:#fff;
  position:relative; cursor:pointer;
}
.notif-btn::after{
  content:""; position:absolute; top:9px; right:11px; width:7px; height:7px;
  background:#ef4444; border-radius:50%; border:2px solid #fff;
}
.user-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .85rem .4rem .45rem;
  border:1px solid var(--line-2);
  border-radius:.55rem;
  background:#fff;
  font-weight:700; font-size:.85rem; color:#1f2937;
}
.avatar-circle{
  width:26px; height:26px; border-radius:50%;
  background:#e5e7eb; color:#475569;
  display:inline-flex; align-items:center; justify-content:center;
}
.lang-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .55rem;
  border:1px solid var(--line-2);
  border-radius:.5rem;
  background:#fff;
}
.flag-uk{
  width:26px; height:18px; border-radius:3px;
  background:
    linear-gradient(to bottom, transparent 7px, #C8102E 7px, #C8102E 11px, transparent 11px),
    linear-gradient(to right,  transparent 11px, #C8102E 11px, #C8102E 15px, transparent 15px),
    linear-gradient(to bottom, transparent 5px, #fff 5px, #fff 13px, transparent 13px),
    linear-gradient(to right,  transparent 9px, #fff 9px, #fff 17px, transparent 17px),
    #012169;
}
.datetime{ line-height:1.1; text-align:right; color:#1f2937; font-size:.78rem; font-weight:600; }
.datetime .small{ color:#64748b; font-weight:500; }

/* ============= PAGE TABS ============= */
.tab-bar{
  border-bottom:1px solid var(--line-2);
  padding: 0 .25rem;
  display:flex; align-items:flex-end;
  gap:.25rem;
}
.tab-bar .tab{
  padding:.65rem 1.15rem;
  font-size:.85rem;
  color: var(--ink);
  border:1px solid var(--line-2);
  border-bottom: none;
  border-radius:.45rem .45rem 0 0;
  background:#fff;
  margin-bottom:-1px;
  font-weight:600;
  position:relative;
  display:inline-flex; align-items:center; gap:.5rem;
}
.tab-bar .tab .close{ color:#94a3b8; cursor:pointer; }
.tab-bar .tab.inactive{
  background:transparent;
  color:#64748b;
  border-color: transparent;
}

/* ============= PAGE HEADER ============= */
.page-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:1rem;
}
.breadcrumb{ color:#94a3b8; font-size:.78rem; font-weight:500; }
h1.page-title{ font-size:1.55rem; font-weight:700; color:#0f172a; letter-spacing:-0.01em; margin: .15rem 0 0; }

.btn-primary{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem 1.05rem;
  border-radius:.5rem;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight:600;
  font-size:.85rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:.15s;
}
.btn-primary:hover{ background:#dbe7ff; }
.btn-solid{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem 1.05rem;
  border-radius:.5rem;
  background: var(--brand);
  color: #fff;
  font-weight:600;
  font-size:.85rem;
  border:1px solid var(--brand);
  cursor:pointer;
  transition:.15s;
}
.btn-solid:hover{ background: var(--brand-dark); }
.btn-outline{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem .9rem;
  border:1px solid var(--line-2);
  border-radius:.5rem;
  background:#fff;
  font-size:.83rem;
  color:#374151;
  font-weight:500;
  cursor:pointer;
  transition:.15s;
}
.btn-outline:hover{ border-color:#cbd5e1; background:#f8fafc; }
.btn-danger{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem 1.05rem;
  border-radius:.5rem;
  background: var(--red);
  color: #fff;
  font-weight:600;
  font-size:.85rem;
  border:1px solid var(--red);
  cursor:pointer;
}
.update-text{ color:#dc2626; font-size:.8rem; font-weight:500; }

/* ============= STAT CARDS ============= */
.cards-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width:1200px){ .cards-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .cards-grid{ grid-template-columns: 1fr; } }
.stat-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:.65rem;
  padding:1.05rem 1.15rem 1.1rem;
  transition: .2s ease;
}
.stat-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(31, 41, 55, .15);
  border-color:#dde3ec;
}
.stat-label{ font-size:.78rem; color:#475569; font-weight:600; }
.stat-value{ font-size:1.5rem; font-weight:700; color:#0f172a; margin-top:.55rem; letter-spacing:-0.01em; }
.stat-value.green{ color: var(--green); }
.stat-value.red{ color: var(--red); }

.tab-pill{
  padding:.5rem 1.15rem;
  border-radius:.4rem;
  font-size:.85rem;
  font-weight:500;
  color:#475569;
  background:#fff;
  border:1px solid var(--line-2);
  cursor:pointer;
}
.tab-pill:hover{ border-color:#cbd5e1; }
.tab-pill.active{
  background: var(--brand);
  color:#fff;
  border-color: var(--brand);
}

.panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:.7rem;
  padding:1.15rem 1.25rem 1rem;
}
.panel + .panel{ margin-top:1rem; }

.charts-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
@media (max-width: 1100px){ .charts-row{ grid-template-columns: 1fr; } }
.legend-dot{ width:10px; height:10px; border-radius:2px; display:inline-block; }

/* ============= FILTER PANEL ============= */
.filter-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:.7rem;
  padding:1rem 1.15rem;
}
.filter-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:.85rem .9rem;
}
@media (max-width: 1100px){ .filter-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .filter-grid{ grid-template-columns: 1fr; } }
.field label{
  display:block;
  font-size:.74rem; font-weight:600; color:#475569; margin-bottom:.25rem;
}
.field input, .field select, .field textarea{
  width:100%;
  border:1px solid var(--line-2);
  border-radius:.4rem;
  padding:.5rem .65rem;
  font-size:.85rem;
  background:#fff;
  color:var(--ink);
  font-family:inherit;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: 2px solid rgba(47,111,237,.25);
  border-color: var(--brand);
}
.filter-actions{
  display:flex; justify-content:flex-end; gap:.5rem;
  margin-top: .9rem;
  padding-top:.9rem;
  border-top:1px dashed var(--line-2);
}

/* ============= TABLE ============= */
.table-wrap{
  background:#fff;
  border:1px solid var(--line);
  border-radius:.7rem;
  overflow:hidden;
  margin-top:1rem;
}
.table-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--line);
  gap:.5rem;
  flex-wrap:wrap;
}
.table-toolbar .left{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.table-toolbar .right{ display:flex; gap:.5rem; align-items:center; }
.search-input{
  display:inline-flex; align-items:center; gap:.4rem;
  padding: .45rem .65rem;
  border:1px solid var(--line-2);
  border-radius:.45rem;
  background:#fff;
  font-size:.85rem;
  min-width:260px;
}
.search-input input{ border:none; outline:none; flex:1; font-size:.85rem; }

table.data-table{
  width:100%;
  border-collapse: collapse;
  font-size:.83rem;
}
table.data-table thead th{
  text-align:left;
  background:#f8fafc;
  color:#475569;
  font-weight:600;
  padding:.7rem .8rem;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
  font-size:.78rem;
  text-transform: uppercase;
  letter-spacing:.03em;
}
table.data-table tbody td{
  padding:.7rem .8rem;
  border-bottom:1px solid var(--line);
  color:#1f2937;
  vertical-align: middle;
}
table.data-table tbody tr:hover{ background:#fafbfd; }
table.data-table tbody tr:last-child td{ border-bottom: none; }
.t-right{ text-align:right; }
.t-center{ text-align:center; }

.pill{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.2rem .55rem;
  border-radius:9999px;
  font-size:.72rem;
  font-weight:600;
  border:1px solid transparent;
}
.pill.green{ background:var(--green-soft); color:#15803d; }
.pill.red{ background:var(--red-soft); color:#b91c1c; }
.pill.amber{ background:var(--amber-soft); color:#b45309; }
.pill.blue{ background:#dbeafe; color:#1d4ed8; }
.pill.slate{ background:#f1f5f9; color:#475569; }
.pill.indigo{ background:#e0e7ff; color:#4338ca; }
.pill.pink{ background:#fce7f3; color:#be185d; }

.row-actions{ display:flex; gap:.35rem; }
.icon-btn{
  width:28px; height:28px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:.35rem;
  background:#f1f5f9;
  color:#475569;
  cursor:pointer;
  transition:.15s;
}
.icon-btn:hover{ background:#e2e8f0; color:#0f172a; }
.icon-btn.danger{ background:#fee2e2; color:#b91c1c; }
.icon-btn.danger:hover{ background:#fecaca; }

/* ============= PAGINATION ============= */
.pagination{
  display:flex; justify-content:space-between; align-items:center;
  padding:.75rem 1rem;
  border-top: 1px solid var(--line);
  font-size:.8rem;
  color:#475569;
}
.pagination .pages{ display:flex; gap:.25rem; align-items:center; }
.page-btn{
  min-width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 .55rem;
  border-radius:.35rem;
  background:#fff;
  border:1px solid var(--line-2);
  font-weight:500;
  font-size:.78rem;
  cursor:pointer;
}
.page-btn:hover{ background:#f1f5f9; }
.page-btn.active{
  background: var(--brand); color:#fff; border-color: var(--brand);
}

/* ============= MODAL ============= */
#modal-root{ position: fixed; inset:0; pointer-events:none; z-index: 50; }
.modal-backdrop{
  position:absolute; inset:0;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(2px);
  pointer-events:auto;
  display:flex; align-items:flex-start; justify-content:center;
  padding: 6vh 1rem;
  overflow:auto;
}
.modal{
  background:#fff;
  border-radius:.8rem;
  width: 100%;
  max-width: 780px;
  box-shadow: 0 20px 50px -12px rgba(15,23,42,.35);
  overflow:hidden;
  animation: pop .18s ease-out;
}
.modal.lg{ max-width: 980px; }
.modal.sm{ max-width: 480px; }
@keyframes pop{ from{ opacity:0; transform: translateY(8px) scale(.98);} to{ opacity:1; transform:none;} }
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: .85rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.modal-head h3{ font-size:1rem; font-weight:700; color:#0f172a; }
.modal-body{ padding:1.15rem 1.15rem 1.25rem; max-height: 70vh; overflow:auto; }
.modal-foot{
  padding: .8rem 1.15rem;
  border-top: 1px solid var(--line);
  display:flex; justify-content:flex-end; gap:.5rem;
  background:#fafbfd;
}

/* ============= SECTIONED FORM ============= */
.form-section{ margin-top:1.1rem; }
.form-section h4{ font-size:.85rem; font-weight:700; color:#1f2937; margin-bottom:.55rem; }
.form-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:.75rem 1rem;
}
@media (max-width: 640px){ .form-grid{ grid-template-columns: 1fr; } }
.form-grid.full > .field{ grid-column: span 2; }

/* ============= MISC ============= */
.muted{ color:#64748b; }
.kbd{
  padding: .05rem .35rem;
  border-radius:.25rem;
  background:#f1f5f9;
  font-size:.72rem;
  color:#475569;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.toggle{
  width:36px; height:20px; border-radius:9999px; background:#cbd5e1;
  position:relative; cursor:pointer; transition: background .15s;
  display:inline-block; vertical-align: middle;
}
.toggle::after{
  content:""; position:absolute; top:2px; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  transition: transform .15s;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.toggle.on{ background: var(--brand); }
.toggle.on::after{ transform: translateX(16px); }

.empty-state{
  padding: 3rem 1rem;
  text-align:center;
  color:#94a3b8;
  font-size:.9rem;
}
.empty-state .ic{ font-size:2rem; opacity:.4; }

/* tags input */
.tag-chip{
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.15rem .45rem;
  border-radius:.3rem;
  background:#e0e7ff;
  color:#4338ca;
  font-size:.72rem; font-weight:600;
}

/* tab navigation inside page */
.subtabs{
  display:flex; gap:.25rem; border-bottom:1px solid var(--line-2);
  margin: 1rem 0 1rem;
}
.subtab{
  padding:.6rem 1rem;
  font-size:.85rem; color:#64748b; font-weight:500;
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.subtab:hover{ color:#1f2937; }
.subtab.active{
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight:600;
}