:root{
  --brand:#22B0E6;
  --ink:#0f172a;
  --muted:#64748b;
  --bg:#f6f7fb;
  --surface:#ffffff;
  --ring:#e6eef7;
  --ring-strong:#d4deea;
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.topbar{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  background:var(--surface);
  border-bottom:1px solid var(--ring);
  box-shadow: 0 4px 16px rgba(2,6,23,.04);
}
.topbar .brand{ font-weight:800; letter-spacing:.2px }
.topbar .crumb{ margin-left:10px; font-size:12px; color:#64748b }
.topbar .sp{ flex:1 }
.topbar .icon{ background:transparent; border:0; color:#0f172a; font-size:18px; cursor:pointer }
.topbar .logout{ color:#334155; text-decoration:none; font-size:14px; margin-left:8px }
.topbar .user{ color:#334155; font-size:14px }

.wrap{ display:flex; min-height:calc(100vh - 54px) }
.sidenav{
  width:260px; background:var(--surface);
  border-right:1px solid var(--ring);
  padding:10px 0; transition: transform .2s ease;
  height: calc(100vh - 54px);
  overflow: auto;
  position: sticky; /* keep visible when main content scrolls */
  top: 54px; /* height of .topbar */
}
.sidenav .group{ padding:6px 0 }
.sidenav .title{ padding:8px 16px; font-size:11px; color:#94a3b8; letter-spacing:.12em; text-transform:uppercase; display:flex; align-items:center; justify-content:space-between; cursor:pointer }
.sidenav .title{ background:none; border:0; width:100%; text-align:left }
.sidenav .title .caret{ font-size:12px; color:#64748b; transition: transform .15s ease }
.sidenav .group.collapsed .title .caret{ transform: rotate(-90deg) }
.sidenav .items{ padding:2px 0 }
.sidenav .group.collapsed .items{ display:none }
.sidenav a{ display:block; padding:9px 16px; color:#0f172a; text-decoration:none; border-left:3px solid transparent; border-radius:0 8px 8px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sidenav a:hover{ background:#f1f5f9 }
.sidenav a.active{ border-left-color:var(--brand); background:#eef8fe }
.sidenav.open{ transform:translateX(0) }

.view{ flex:1; padding:18px }
.grid{ display:grid; gap:14px; grid-template-columns: repeat(12, minmax(0,1fr)) }
.col-4{ grid-column: span 4 / span 4 }
.col-6{ grid-column: span 6 / span 6 }
.col-12{ grid-column: span 12 / span 12 }

.card{ background:var(--surface); border:1px solid var(--ring); border-radius:14px; padding:14px; box-shadow:0 10px 30px rgba(2,6,23,.06) }
.k{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px }
.stat{ display:flex; align-items:center; gap:10px }
.stat .num{ font-size:26px; font-weight:800 }
.chip{ display:inline-block; padding:4px 8px; border-radius:999px; background:#eef8fe; color:#0f172a; font-size:12px; border:1px solid var(--ring-strong) }
.btn{ display:inline-block; padding:9px 12px; background:linear-gradient(135deg, var(--brand), #0ea5e9); color:#fff; text-decoration:none; border-radius:10px; border:1px solid transparent; cursor:pointer; margin-right:8px; box-shadow:0 8px 18px rgba(34,176,230,.18) }
.btn:focus-visible{ outline:2px solid #0ea5e9; outline-offset:2px }
.btn.small{ padding:7px 10px; border-radius:8px }

/* focus states */
.sidenav a:focus-visible, .topbar .icon:focus-visible, .sidenav .title:focus-visible {
  outline:2px solid #0ea5e9; outline-offset:2px; border-radius:6px;
}

/* Modal + Diff */
.modal{ position:fixed; inset:0; background:rgba(15,23,42,.5); display:flex; align-items:center; justify-content:center; z-index:200 }
.modal.hidden{ display:none }
.modal .panel{ background:#fff; border:1px solid var(--ring); border-radius:12px; width:90%; max-width:1000px; max-height:80vh; overflow:auto; box-shadow:0 18px 40px rgba(2,6,23,.28) }
.modal .panel-header{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--ring); position:sticky; top:0; background:#fff; z-index:1 }
.modal .panel-body{ padding:12px }
.diff{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px }
.diff .line{ white-space:pre-wrap; padding:2px 6px; border-radius:6px }
.diff .add{ background:#ecfdf5; color:#065f46 }
.diff .del{ background:#fef2f2; color:#991b1b }
.diff .eq { color:#334155 }
.diff .grid{ display:grid; grid-template-columns: 1fr 1fr; gap:8px }
.chip.small{ font-size:11px; padding:2px 6px }

a{ color:#0ea5e9 }
a:hover{ color:#0284c7 }

/* Form helpers */
.card label{ font-size:12px; color:var(--muted) }
.card .muted{ color:var(--muted) }
.card input[type="text"],
.card input[type="email"],
.card input[type="password"],
.card input[type="number"],
.card input[type="url"],
.card select,
.card textarea{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding:10px 12px;
  border:1px solid var(--ring);
  border-radius:10px;
  background:#fff;
  color:var(--ink);
  font-size:14px;
  box-shadow: inset 0 1px 2px rgba(2,6,23,.03);
}
.card select{ background-image:linear-gradient(45deg,transparent 50%, #94a3b8 50%),linear-gradient(135deg, #94a3b8 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px); background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:28px }
.card input:focus, .card select:focus, .card textarea:focus{
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(34,176,230,.15);
}
.fieldset label{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:6px 0 }
.fieldset input, .fieldset select, .fieldset textarea{ flex:1 1 260px; min-width:220px; max-width:420px }
.form-row{ display:grid; grid-template-columns: repeat(2, minmax(240px, 1fr)); gap:10px }
.form-row.three{ grid-template-columns: repeat(3, minmax(200px, 1fr)) }
.form-row .full{ grid-column: 1 / -1 }
.fieldset legend{ padding:0 6px; color:var(--muted); font-size:12px }
.help{ font-size:12px; color:var(--muted) }
.fieldset{ border:1px solid var(--ring); border-radius:12px; padding:12px; background:#fff }
.fieldset + .fieldset{ margin-top:10px }
.fieldset > legend{ padding:0 6px; color:var(--muted); font-size:12px }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }

/* Toggle switch */
.toggle{ position:relative; display:inline-block; width:42px; height:24px; vertical-align:middle }
.toggle input{ display:none }
.toggle .track{ position:absolute; inset:0; background:#cbd5e1; border-radius:9999px; cursor:pointer; transition:background .2s ease }
.toggle .thumb{ position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:9999px; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s ease }
.toggle input:checked + .track{ background:var(--brand) }
.toggle input:checked + .track .thumb{ transform:translateX(18px) }

/* Event list */
#ekEvents .card{ padding:10px 12px }

/* Slim, modern scrollbars (WebKit/Blink + Firefox) */
html, body, .sidenav, .view {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
/* WebKit */
::-webkit-scrollbar { width: 8px; height: 8px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb {
  background-color: #cbd5e1; /* slate-300 */
  border-radius: 8px;
  border: 2px solid transparent; /* creates slim pill */
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #94a3b8 }

@media (max-width: 900px){
  .sidenav{ position:fixed; left:0; top:54px; bottom:0; transform:translateX(-100%); background:var(--surface); height:auto; overflow:auto }
  .sidenav.open{ transform:translateX(0) }
  .view{ padding:14px }
  .grid{ grid-template-columns: repeat(6, minmax(0,1fr)) }
  .col-6{ grid-column: span 6 / span 6 }
  .col-4{ grid-column: span 6 / span 6 }
  .form-row, .form-row.three{ grid-template-columns: 1fr }
  .fieldset input, .fieldset select, .fieldset textarea{ max-width: 100% }
}