:root{
  --bg: #0f172a;           /* slate-900 */
  --bg-soft:#111827;       /* gray-900 */
  --panel:#0b1222;         /* deep navy */
  --card:#0b1329;
  --muted:#9aa5b1;
  --text:#e5e7eb;
  --text-weak:#cbd5e1;
  --primary:#60a5fa;       /* blue-400 */
  --primary-weak:#93c5fd;
  --accent:#22d3ee;        /* cyan-400 */
  --danger:#ef4444;
  --ring:#1f2937;
  --surface:#0b1222;
  --border:#1e293b;
  --shadow: rgba(0,0,0,.35);
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:18px;
  --pad:14px;
  --pad-lg:22px;
  --space:18px;
  --maxw:1200px;
  --navw:260px;
  --navw-collapsed:72px;

  /* shared header/nav background — white + mild gray */
  --hdr-bg: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,247,251,.96));
}

* { box-sizing: border-box }
html, body { height:100% }
body{
  margin:0;
  font: 15px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 800px at 10% -10%, #0b1329 0%, #0b1222 38%, #0f172a 100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Links & buttons */
a{ color: var(--primary); text-decoration: none }
a:hover{ text-decoration: underline }
.linklike{ background:none; border:none; color:var(--primary); padding:0; cursor:pointer }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid var(--border);
  background:#0b172b; color:var(--text); text-decoration:none; font-weight:600; cursor:pointer;
  box-shadow: 0 2px 0 0 rgba(255,255,255,.06) inset, 0 1px 0 0 rgba(255,255,255,.04);
}
.btn:hover{ filter: brightness(1.08) }
.btn.primary{ background: linear-gradient(180deg, #60a5fa, #3b82f6); border-color:#3b82f6; color:#06121f }
.btn.ghost{ background: transparent }
.btn.danger{ background: linear-gradient(180deg, #ef4444, #b91c1c); border-color:#7f1d1d }
.btn.block{ width:100% }
.small{ font-size:.9em; color:var(--text-weak) }
.muted{ color:var(--muted) }

/* Header */
header{
  position: sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: var(--hdr-bg);
  /* UPDATED: match card border */
  border-bottom: 1px solid #e5e7eb !important;
}
.hdr{
  display:flex; align-items:center; justify-content:space-between;
  margin: 0 auto; max-width: var(--maxw); padding: 10px var(--pad-lg);
}
.brand{ display:flex; align-items:center; gap:12px }
.brand .logo{ height:28px; width:auto; border-radius:8px }
.brand .site-title{ font-weight:800; letter-spacing:.3px }
.hdr .right{ display:flex; align-items:center; gap:10px }
.hdr .avatar{
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; font-size:.85em; font-weight:700;
  background:linear-gradient(180deg, #22d3ee, #2563eb); color:#06121f;
  border:1px solid rgba(255,255,255,.35);
}
#burger{
  width:36px; height:36px; border-radius:12px;
  border:1px solid var(--border); background:#0b172b;
}
#burger .bar{ display:block; width:18px; height:2px; background:#cbd5e1; margin:4px auto; border-radius:10px }
#burger:hover{ filter:brightness(1.07) }

/* Layout */
.app{
  display:grid; grid-template-columns: var(--navw) 1fr; gap: 20px;
  max-width: var(--maxw); margin: 24px auto; padding: 0 var(--pad-lg);
  align-items:start;
}
@media (max-width: 900px){
  .app{ grid-template-columns: 1fr }
}

.sidenav{
  position:relative;
  /* UPDATED: match card border */
  border:1px solid #e5e7eb !important;
  background: var(--hdr-bg);
  border-radius: var(--radius);
  padding: var(--pad);
  min-height: 60vh;
  /* keep the lighter shade to match cards */
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.sidenav .close-sidenav{ display:none }
.sidenav h4{ margin:8px 10px 8px; color:var(--text-weak); font-size:12px; text-transform:uppercase; letter-spacing:.12em }

/* Navigation */
.navlist{ list-style:none; padding:0; margin:0 }
.navlist li{ margin: 2px 0 }

/* navigation link styles (unchanged) */
.navlist a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius: 10px;
  color:#0b1222; /* black-ish text */
  text-decoration:none; border:1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.navlist a:hover{
  background:#0f1a34;
  border-color:var(--ring);
  color:#0b1222;
}
.navlist a:visited{ color:#0b1222 }
.navlist a.active{
  background: linear-gradient(180deg, rgba(96,165,250,.18), rgba(59,130,246,.14));
  border-color:#1e3a8a;
  color:#0b1222;
}

/* Mobile drawer */
@media (max-width: 900px){
  .sidenav{
    position: fixed; left: 12px; top: 76px; width: calc(100% - 24px);
    transform: translateY(-20px) scale(.98); opacity:0; pointer-events:none;
    transition: all .18s ease;
  }
  body.nav-open .sidenav{ transform:none; opacity:1; pointer-events:all }
  .sidenav .close-sidenav{
    display:block; position:absolute; right:8px; top:8px; width:34px; height:34px;
    border-radius:10px; border:1px solid var(--border); background:#0b172b; color:#0f172a
  }
}

.content{
  min-height: 70vh;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(13,23,45,.8), rgba(11,18,34,.9));
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 1px 1px rgba(255,255,255,.05) inset;
  overflow:hidden;
}
.page{
  padding: 22px;
}

/* Cards */
.card{
  background: linear-gradient(180deg, rgba(18,29,54,.9), rgba(13,22,41,.9));
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 12px 40px var(--shadow);
}
.card + .card{ margin-top: 14px }

/* Forms */
form .row{ margin: 10px 0 }
label{ display:block; margin-bottom:6px; color:#374151; font-weight:600 }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea, select{
  width:100%; padding:12px 12px; border-radius: 12px;
  border:1px solid var(--border); background:#0b172b; color:var(--text);
  outline:none;
}
textarea{ resize: vertical }
input:focus, textarea:focus, select:focus{ border-color:#3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,.15) }
.form-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }

/* Tables */
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ border:1px solid var(--border); padding:10px 12px; text-align:left }
.table th{ background:#0f1a34; color: var(--text-weak); font-weight:700 }
.table tr:nth-child(even){ background:rgba(255,255,255,.02) }

/* Wizard */
.wizard-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.progress{
  position:relative; height:10px; background:#0b172b; border:1px solid var(--border); border-radius:999px; overflow:hidden;
}
.progress .bar{ height:100%; width:0%; background: linear-gradient(90deg, #22d3ee, #60a5fa); transition: width .2s ease }
.steps{ display:none }
.step{ display:none }
.step.active{ display:block; animation: fadeIn .2s ease }
.wizard-nav{ display:flex; gap:10px; justify-content:space-between; margin-top:10px }
.summary{ width:100%; border-collapse: collapse }
.summary th, .summary td{ border-bottom:1px dashed var(--border); padding:8px 6px }
.summary th{ color:var(--text-weak); text-align:left; width:160px }

@keyframes fadeIn{
  from{ opacity:0; transform: translateY(4px) }
  to{ opacity:1; transform:none }
}

/* Utilities */
.grid{ display:grid; gap:12px }
.grid.two{ grid-template-columns: repeat(2, 1fr) }
@media (max-width: 640px){ .grid.two{ grid-template-columns: 1fr } }
.center{ text-align:center }
.hidden{ display:none !important }
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; background:#0f1a34; border:1px solid var(--border); color:#var(--text-weak); font-size:.85em }

/* === FORCE LIGHT SURFACES (v2025-08-19) === */
body{
  background: #f5f7fb !important; /* lighter app background */
  color:#0f172a;
}
.content{
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  color:#1e293b !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.10) !important;
}
.page{ padding:22px !important }
.card{
  background:#ffffff !important;
  border:1px solid #e5e7eb !important;
  color:#1e293b !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
}
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 { color:#0f172a !important }
.muted{ color:#64748b !important }
.progress{ background:#f1f5f9 !important; border-color:#e5e7eb !important }
.table th, .table td{ border:1px solid #e5e7eb !important }
.table th{ background:#f8fafc !important; color:#475569 !important }
.table tr:nth-child(even){ background:#f9fafb !important }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea, select{
  background:#ffffff !important; border-color:#e5e7eb !important; color:#0f172a !important;
}
input:focus, textarea:focus, select:focus{ border-color:#60a5fa !important; box-shadow: 0 0 0 4px rgba(96,165,250,.2) !important }

/* === Logo sizing overrides === */
.brand .logo{
  height: 52px !important; /* originally ~28px, ~30% increase */
}
@media (max-width: 900px){
  .brand .logo{
    height: 52px !important; /* ~15% bigger than 28px */
  }
}

/* === Brand colors (logo: 30% orange, rest navy ocean blue) === */
:root{
  --brand-orange:#f97316; /* orange-500 */
  --brand-navy:#0b1329;   /* deep navy/ocean */
}

/* Nav link states */
.navlist a{
  border:1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.navlist a:hover{
  background: linear-gradient(180deg, rgba(15,26,52,.9), rgba(11,18,34,.9));
  border-color: rgba(249,115,22,.45); /* orange tint */
  color:#0b1222;
}
.navlist a:visited{ color:#0b1222 }
.navlist a.active{
  background: linear-gradient(180deg, rgba(249,115,22,.15), rgba(14,23,45,.3));
  border-color: rgba(249,115,22,.55);
  box-shadow: inset 3px 0 0 0 var(--brand-orange);
  color:#0b1222;
}

/* Burger hover affordance */
#burger{ border-color: rgba(249,115,22,.35) }
#burger:hover{ filter: none; box-shadow: 0 0 0 2px rgba(249,115,22,.15) inset }

/* Desktop collapse behavior (burger toggles collapse on desktop) */
body.nav-collapsed .app{ grid-template-columns: var(--navw-collapsed) 1fr }
body.nav-collapsed .sidenav{ padding:10px }
body.nav-collapsed .navlist a{
  padding:10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Keep desktop default open */
@media (min-width: 901px){
	#burger{ display:none !important; } 
  body:not(.nav-collapsed) .sidenav{ transform:none; opacity:1; pointer-events:auto }
}

/* Logo presentation inside dark header to harmonize white-backed mark */
.brand .logo{
  background:#ffffff;
  border-radius: 8px;
  padding: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 2px 8px rgba(0,0,0,.25);
  max-height: 52px !important;
  width: auto;
}
@media (max-width: 900px){
  .brand .logo{ max-height: 32px !important }
}