/* ============================================================
   KINETIC AGENTS — design tokens + base styles (single source)
   Theme: white / navy / gold. Fonts: Playfair Display + DM Sans.
   ============================================================ */
:root{
  --navy:#1e3a5f;
  --navy-dark:#152a45;
  --gold:#c9a84c;
  --green:#1D9E75;
  --grey:#6b7280;
  --border:#e5e7eb;
  --bg:#ffffff;
  --bg-soft:#f8fafc;
  --font:'DM Sans',system-ui,-apple-system,sans-serif;
  --font-head:'Playfair Display',Georgia,serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);color:var(--navy);background:var(--bg);line-height:1.5}
h1,h2,h3{font-family:var(--font-head);font-weight:700;color:var(--navy);margin:0 0 .5em}
a{color:var(--navy);text-decoration:none}

/* layout */
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.page{min-height:60vh}

/* nav */
#main-nav{background:var(--navy);color:#fff;padding:0;position:sticky;top:0;z-index:200;box-shadow:0 2px 10px rgba(15,23,42,.15)}
#main-nav .nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto;padding:0 20px}
#main-nav a{color:#fff;margin:0 12px;font-weight:500;font-size:15px;cursor:pointer}
#main-nav .brand{display:flex;align-items:center;gap:10px}
/* white panel that holds the logo so it never clashes with the navy bar */
.brand-logo-panel{display:flex;align-items:center;justify-content:center;background:#fff;
  padding:6px 14px;border-radius:12px;margin:8px 0}
.brand-logo-panel img{height:44px;width:auto;display:block}
#main-nav .nav-inner{min-height:64px}

/* buttons */
.btn{display:inline-block;padding:12px 24px;border-radius:8px;border:none;cursor:pointer;
  font-family:var(--font);font-size:14px;font-weight:600;transition:all .2s}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-dark)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-green{background:var(--green);color:#fff}
.btn-ghost{background:none;border:1.5px solid var(--border);color:var(--grey)}

/* forms */
.field{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:8px;
  font-family:var(--font);font-size:14px;margin-bottom:0}
.field:focus{outline:none;border-color:var(--gold)}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:5px}
.form-err{color:#dc2626;font-size:13px;background:#fef2f2;padding:8px 12px;border-radius:6px;
  display:none;margin-bottom:10px}

/* cards */
.card{background:#fff;border:1.5px solid var(--border);border-radius:16px;padding:24px}

/* modal */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;
  align-items:center;justify-content:center}
.modal-box{background:#fff;border-radius:16px;padding:28px;max-width:520px;width:90%;
  max-height:90vh;overflow-y:auto}

/* utility */
.text-center{text-align:center}
.muted{color:var(--grey)}
.hidden{display:none!important}

.btn-sm{padding:4px 10px;font-size:12px}

/* ============================================================
   DASHBOARD SHELL — responsive sidebar (polish pass 2026-06-10c)
   Desktop (>820px): sidebar is a static 240px column, exactly as before.
   Mobile (<=820px): sidebar becomes an off-canvas drawer, hidden by
   default, toggled by a hamburger button in a slim top bar, with a
   dimming backdrop. Nothing here changes desktop behaviour.
   ============================================================ */
#dash-mobile-bar{display:none}
#dash-backdrop{display:none}

@media (max-width:820px){
  #dash-mobile-bar{
    display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:120;
    background:var(--navy);color:#fff;padding:10px 16px;box-shadow:0 2px 10px rgba(15,23,42,.15);
  }
  #dash-mobile-bar img{height:32px;width:auto}
  #dash-hamburger{
    background:none;border:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;
    padding:6px 8px;border-radius:6px;
  }
  #dash-hamburger:active{background:rgba(255,255,255,.12)}

  #dash-root{display:block!important;min-height:auto!important}
  #dash-sidebar{
    position:fixed!important;top:0;left:0;height:100vh!important;z-index:150;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:4px 0 24px rgba(0,0,0,.25);
  }
  #dash-root.dash-sidebar-open #dash-sidebar{transform:translateX(0)}
  #dash-backdrop{
    display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:140;
  }
  #dash-root.dash-sidebar-open #dash-backdrop{display:block}

  #dash-content{padding:18px!important}
}