/* 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-900:#1f2327;
  --bg-850:#24292e;
  --bg-825:#2a2f35;
  --bg-800:#2d3339;
  --bg-750:#353c44;
  --border:#3d444d;

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

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

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

  --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;
}

*,
*::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); }

/* 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;
}

/* 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); }