/* CSRP Sheriff's Office — Global Styles (v4)
   --------------------------------------------------
   - Dark theme with tan accent
   - Consistent control heights across pages
   - Clean cards, nav, tables, pills
   -------------------------------------------------- */

:root{
  /* Palette */
  --bg-950:#15171a;
  --bg-900:#1f2327;
  --bg-850:#24292e;
  --bg-825:#2a2f35;
  --bg-800:#2d3339;
  --bg-750:#353c44;
  --border:#3d444d;
  --border-soft:#2f353c;

  --text-100:#e9eef3;
  --text-80:#c8d0d8;
  --text-60:#9aa3ad;
  --text-40:#7d8894;

  --accent:#d0a86f; /* tan */
  --accent-soft:#b6935f;
  --accent-strong:#e3be86;
  --accent-ink:#211a12;

  --green:#2ba36a;
  --green-ink:#0e2e20;
  --red:#d24b4b;
  --red-ink:#3a1717;
  --amber:#e0a934;
  --amber-ink:#3a2c0e;

  --radius:14px;
  --radius-lg:16px;
  --radius-pill:999px;

  --shadow:0 1px 0 rgba(0,0,0,.25), 0 6px 24px rgba(0,0,0,.25);

  /* Unified control height */
  --control-h:44px;
  --control-pad-x:14px;
  --control-pad-y:0;

  /* App shell */
  --sidebar-w:250px;
  --topbar-h:64px;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html, body{
  margin:0;
  background:var(--bg-900);
  color:var(--text-100);
  font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

/* Utility text sizes */
h1,h2,h3{ color:var(--text-100); margin:0 0 .5rem 0; }
h1{ font-size:1.75rem; }
h2{ font-size:1.3rem; }
h3{ font-size:1.05rem; }
.small{ font-size:.9rem; color:var(--text-60); }
.smallmuted{ font-size:.85rem; color:var(--text-40); }
.muted{ color:var(--text-40); font-size:.9em; }

/* Layout */
.container{
  max-width:1100px;
  margin:18px auto 40px;
  padding:0 16px;
}

/* Nav */
.nav{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(to bottom, rgba(31,35,39,.9), rgba(31,35,39,.75));
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--border);
}
.nav .inner{
  max-width:1100px; margin:0 auto;
  padding:10px 16px; display:flex; align-items:center; gap:12px;
}
.logo{ height:24px; width:auto; display:block; }
.brand{ font-weight:700; color:var(--text-100); }
.nav a{ color:var(--text-80); text-decoration:none; }
.nav a:hover{ color:#fff; }

/* Cards */
.card{
  background:var(--bg-825);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}

/* Panels inside <details> */
details{ margin:10px 0; }
details > summary{
  list-style:none; cursor:pointer;
  padding:10px 14px;
  background:var(--bg-800);
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-weight:600; color:var(--text-80);
}
details[open] > summary{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.panel{
  background:var(--bg-825);
  border:1px solid var(--border);
  border-top:none;
  border-bottom-left-radius:var(--radius);
  border-bottom-right-radius:var(--radius);
  padding:16px;
}

/* Grid helpers */
.grid{ display:grid; gap:14px; }
.grid.two{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.three{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px){
  .grid.two, .grid.three{ grid-template-columns: 1fr; }
}

/* Badges / Pills */
.pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:var(--radius-pill);
  font-weight:700;
  font-size:.85rem;

  white-space:nowrap;

  white-space:nowrap;
}
.pill.green{ background:rgba(43,163,106,.2); color:#b5fdd5; border:1px solid rgba(43,163,106,.45); }
.pill.red{ background:rgba(210,75,75,.18); color:#ffd4d4; border:1px solid rgba(210,75,75,.45); }

.badge-pill{
  display:inline-block;
  padding:6px 10px;
  background:var(--bg-750);
  color:var(--text-80);
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:.85rem;
}

/* Kicker line */
.kicker{
  color:var(--text-80);
  margin:6px 0 16px;
}

/* Table */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.table th, .table td{
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}
.table th{
  color:var(--text-80);
  font-weight:600;
  background:var(--bg-800);
}

/* Buttons */
.btn{
  -webkit-appearance:none; appearance:none;
  border:none;
  background:var(--accent);
  color:var(--accent-ink);
  font-weight:700;
  border-radius:var(--radius);
  min-height:var(--control-h);
  padding:0 var(--control-pad-x);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; text-decoration:none;
  transition:transform .02s ease, filter .15s ease;
}
.btn:hover{ filter:brightness(1.03); }
.btn:active{ transform:translateY(1px); }

.btn.secondary{
  background:var(--bg-750);
  color:var(--text-80);
  border:1px solid var(--border);
}
.btn.secondary:hover{ filter:brightness(1.04); }

.btn.danger{
  background:var(--red);
  color:#fff;
}
.btn.danger:hover{ filter:brightness(1.05); }

/* Disabled-looking buttons (e.g., Quiz Passed) */
.btn[disabled],
.btn.secondary[disabled]{
  opacity:.6; pointer-events:none;
}

/* Form controls — unified heights */
label{ display:block; margin:8px 0 6px; color:var(--text-80); }
input.input,
select.input{
  width:100%;
  height:var(--control-h);
  padding:var(--control-pad-y) var(--control-pad-x);
  color:var(--text-100);
  background:var(--bg-850);
  border:1px solid var(--border);
  border-radius:var(--radius);
  outline:none;
}
input.input:focus,
select.input:focus,
textarea.input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(208,168,111,.15);
}

textarea.input{
  width:100%;
  min-height:120px;
  padding:10px var(--control-pad-x);
  color:var(--text-100);
  background:var(--bg-850);
  border:1px solid var(--border);
  border-radius:var(--radius);
  line-height:1.35;
  resize:vertical;
}

/* Lists and links in content */
.content iframe{ width:100%; min-height:520px; border:0; }
.content p{ color:var(--text-80); }
a{ color:var(--accent-strong); }
hr{ border:none; border-top:1px solid var(--border); margin:12px 0; }

/* Alerts (errors/success) */
.alert{
  border-radius:var(--radius);
  padding:12px;
  border:1px solid var(--red);
  background:rgba(210,75,75,.12);
  color:#ffdcdc;
}
.alert.success{
  border-color:var(--green);
  background:rgba(43,163,106,.12);
  color:#c7ffd7;
}

.notice{
  border-radius:var(--radius);
  padding:12px;
  border:1px solid var(--border);
  background:var(--bg-825);
  color:var(--text-80);
}
.notice.success{ border-color:var(--green); background:rgba(43,163,106,.12); color:#c7ffd7; }
.notice.danger{ border-color:var(--red); background:rgba(210,75,75,.12); color:#ffdcdc; }

/* Status chip area */
.status .pill{ margin-left:8px; 
  white-space:nowrap;

  white-space:nowrap;
}

/* Auth page 2-column layout helper (also used in index.php) */
.auth-wrap{
  max-width:1100px;
  margin:24px auto 40px;
  padding:0 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}
@media (max-width: 900px){
  .auth-wrap{ grid-template-columns:1fr; }
}

/* Details summary tweak to keep height consistent with buttons */
details > summary{
  min-height:var(--control-h);
  display:flex; align-items:center;
}

.pill.warn{ background:rgba(255,163,41,.18); color:#ffe2b6; border:1px solid rgba(255,163,41,.45); }

/* ==================================================================
   App shell — sidebar + topbar (v5)
   ================================================================== */

body:has(.app-shell){ background:var(--bg-950); }

.app-shell{
  display:flex;
  min-height:100vh;
  align-items:stretch;
}

/* Sidebar */
.sidebar{
  width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  background:var(--bg-950);
  border-right:1px solid var(--border-soft);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  z-index:30;
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px;
  padding:18px 18px;
  border-bottom:1px solid var(--border-soft);
}
.sidebar-brand .badge-icon{
  width:36px; height:36px; border-radius:50%;
  background:var(--bg-825); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); flex:0 0 auto;
}
.sidebar-brand .logo{ height:26px; width:auto; display:block; }
.sidebar-brand .brand-text{ line-height:1.25; overflow:hidden; }
.sidebar-brand .brand-title{ font-weight:700; font-size:.85rem; letter-spacing:.03em; text-transform:uppercase; color:var(--text-100); white-space:nowrap; }
.sidebar-brand .brand-sub{ font-size:.75rem; color:var(--text-40); white-space:nowrap; }

.sidebar-nav{ flex:1; overflow-y:auto; padding:14px 10px; }
.sidebar-section-label{
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-40); margin:16px 10px 6px;
}
.sidebar-section-label:first-child{ margin-top:2px; }

.sidebar-link{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px;
  border-radius:var(--radius);
  color:var(--text-80);
  text-decoration:none;
  font-size:.92rem;
  font-weight:500;
  margin:2px 0;
}
.sidebar-link svg{ flex:0 0 auto; opacity:.85; }
.sidebar-link:hover{ background:var(--bg-850); color:var(--text-100); }
.sidebar-link.active{
  background:rgba(208,168,111,.14);
  color:var(--accent-strong);
  font-weight:700;
}
.sidebar-link.active svg{ opacity:1; }

.sidebar-user{
  border-top:1px solid var(--border-soft);
  padding:12px 14px;
  display:flex; align-items:center; gap:10px;
}
.sidebar-user .user-info{ overflow:hidden; flex:1; }
.sidebar-user .user-name{ font-weight:700; font-size:.88rem; color:var(--text-100); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user .user-meta{ font-size:.75rem; color:var(--text-40); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user .signout-link{ color:var(--text-40); flex:0 0 auto; }
.sidebar-user .signout-link:hover{ color:var(--red); }

/* Avatar chip */
.avatar{
  width:34px; height:34px; border-radius:50%;
  background:var(--bg-750);
  border:1px solid var(--border);
  color:var(--accent-strong);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.8rem;
  flex:0 0 auto;
  overflow:hidden;
}
.avatar.sm{ width:26px; height:26px; font-size:.7rem; }

/* Main column */
.main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:20;
  height:var(--topbar-h);
  display:flex; align-items:center; gap:14px;
  padding:0 22px;
  background:linear-gradient(to bottom, rgba(31,35,39,.92), rgba(31,35,39,.8));
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--border-soft);
}
.topbar .page-title{ font-weight:700; font-size:1.15rem; color:var(--text-100); white-space:nowrap; }
.topbar .page-sub{ font-size:.78rem; color:var(--text-40); white-space:nowrap; }
.sidebar-toggle{
  display:none;
  background:none; border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text-80); width:36px; height:36px; align-items:center; justify-content:center;
  cursor:pointer; flex:0 0 auto;
}
.topbar-spacer{ flex:1; }
.topbar-search{
  display:flex; align-items:center; gap:8px;
  background:var(--bg-850); border:1px solid var(--border);
  border-radius:var(--radius); height:38px; padding:0 12px;
  color:var(--text-40); min-width:220px;
}
.topbar-search input{
  background:none; border:none; outline:none; color:var(--text-100);
  font:inherit; width:100%;
}
.topbar-actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.icon-btn{
  width:38px; height:38px; border-radius:var(--radius);
  background:var(--bg-850); border:1px solid var(--border);
  color:var(--text-80); display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.icon-btn:hover{ color:var(--text-100); }

.page-body{ padding:22px; flex:1; }

/* Alert banner (compliance-style notice) */
.alert-banner{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:rgba(224,169,52,.1);
  border:1px solid rgba(224,169,52,.35);
  color:var(--text-80);
  border-radius:var(--radius);
  padding:12px 16px;
  margin-bottom:18px;
}
.alert-banner .icon{ color:var(--amber); flex:0 0 auto; }
.alert-banner a{ color:var(--accent-strong); font-weight:600; margin-left:auto; }

/* Stat cards */
.stat-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(4, minmax(0,1fr));
  margin-bottom:18px;
}
@media (max-width:1100px){ .stat-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .stat-grid{ grid-template-columns:1fr; } }

.stat-card{
  background:var(--bg-825);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.stat-card .stat-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.stat-card .stat-icon{
  width:34px; height:34px; border-radius:var(--radius);
  background:var(--bg-750); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--accent-strong);
}
.stat-card .stat-delta{ font-size:.8rem; font-weight:700; }
.stat-card .stat-delta.up{ color:#7fe3ae; }
.stat-card .stat-delta.down{ color:#ff9a9a; }
.stat-card .stat-delta.flat{ color:var(--text-40); }
.stat-card .stat-value{ font-size:1.7rem; font-weight:800; color:var(--text-100); line-height:1.1; }
.stat-card .stat-label{ font-size:.78rem; color:var(--text-40); text-transform:uppercase; letter-spacing:.03em; margin-top:4px; }

/* Progress bars (mandatory modules / compliance widgets) */
.progress-row{ margin:14px 0; }
.progress-row .progress-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.progress-row .progress-name{ display:flex; align-items:center; gap:10px; color:var(--text-80); font-size:.9rem; }
.progress-row .progress-pct{ color:var(--text-40); font-size:.82rem; font-weight:700; flex:0 0 auto; }
.progress{ height:6px; border-radius:var(--radius-pill); background:var(--bg-750); overflow:hidden; }
.progress-fill{ height:100%; border-radius:var(--radius-pill); background:var(--accent); }

/* Responsive sidebar collapse */
@media (max-width:900px){
  .sidebar{
    position:fixed; left:0; top:0;
    transform:translateX(-100%);
    transition:transform .18s ease;
    box-shadow:0 0 40px rgba(0,0,0,.5);
  }
  body.sidebar-open .sidebar{ transform:translateX(0); }
  body.sidebar-open::after{
    content:"";
    position:fixed; inset:0; z-index:25;
    background:rgba(0,0,0,.5);
  }
  .sidebar-toggle{ display:flex; }
  .topbar-search{ display:none; }
  .page-body{ padding:16px; }
}