/* ==========================================================
   Sheriff Department UI — Brass & Leather + Case Folder (ALL-IN-ONE)
   - Dark / Brass / Leather theme
   - Case Folder header + watermark logo per record
   - Register-tab look (folder tabs)
   - Gold shimmer hover on cards
   - Save badge (top-right)
   - Smooth status change animation
   - Login logo pop animation
   ========================================================== */

:root{
  /* Base surfaces */
  --bg0:#05070c;
  --bg1:#070a10;

  /* Text */
  --text:#f2f0e6;
  --muted:#b9b2a2;
  --muted2:#9a927f;

  /* Brass */
  --gold:#d4af37;
  --gold2:#b88a1c;
  --gold3:#8a6a12;

  /* Accent + semantics */
  --accent:#7aa2ff;
  --good:#33d19a;
  --warn:#d4af37;
  --bad:#ff6b6b;

  /* Lines */
  --line: rgba(255,255,255,.08);
  --line2: rgba(212,175,55,.18);

  /* Geometry */
  --r: 18px;
  --r2: 14px;

  /* Shadows */
  --sh0: 0 18px 55px rgba(0,0,0,.55);
  --sh1: 0 10px 26px rgba(0,0,0,.45);
  --sh2: 0 0 0 3px rgba(212,175,55,.10);

  /* Typography */
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* Shimmer gradient */
  --shine: linear-gradient(120deg,
    transparent 0%,
    rgba(212,175,55,.10) 18%,
    rgba(255,255,255,.10) 26%,
    rgba(212,175,55,.10) 34%,
    transparent 55%);

  /* Chips */
  --chip-bg: rgba(0,0,0,.28);
  --chip-line: rgba(212,175,55,.18);
}

/* ---------- Reset-ish ---------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background:
    radial-gradient(1200px 850px at 18% 8%, rgba(212,175,55,.16) 0%, transparent 55%),
    radial-gradient(900px 720px at 82% 18%, rgba(122,162,255,.11) 0%, transparent 62%),
    radial-gradient(1200px 900px at 50% 120%, rgba(0,0,0,.85) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 100%);
  overflow-x:hidden;
}

/* Subtle film grain (no image) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.06;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.06) 1px, transparent 1px, transparent 4px);
  mix-blend-mode: overlay;
}

/* Links */
a{ color:inherit; text-decoration:none; }

/* ---------- Layout helpers ---------- */
.wrap{
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px;
}

.row{
  display:flex;
  align-items:center;
  gap:10px;
}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media(max-width: 760px){
  .split{ grid-template-columns:1fr; }
}

/* ---------- Header ---------- */
header{
  position: sticky;
  top: 0;
  z-index: 25;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(8,10,14,.94), rgba(7,10,16,.72));
  border-bottom: 1px solid rgba(212,175,55,.18);
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 260px;
}

.logo{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  object-fit: cover;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(212,175,55,.25);
  box-shadow: var(--sh1);
  transition: transform .28s ease, box-shadow .28s ease;
}

/* Login pop animation */
.logo.loginPop{ animation: logoPop .35s ease both; }
@keyframes logoPop{
  0%{ transform: scale(.96); }
  60%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}

h1{
  margin: 0;
  font-size: 15px;
  letter-spacing: .15px;
  line-height: 1.15;
}

.sub{
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
  opacity: .95;
}

/* ---------- Nav ---------- */
.nav{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items:center;
}

.nav a, .nav button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.14);
  background: rgba(10,14,22,.55);
  box-shadow: 0 2px 0 rgba(0,0,0,.25) inset;
  transition: transform .06s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease;
  user-select:none;
  white-space:nowrap;
  cursor:pointer;
}

.nav a:hover, .nav button:hover{
  border-color: rgba(212,175,55,.35);
  background: rgba(12,16,26,.66);
}
.nav a:active, .nav button:active{ transform: translateY(1px); }

.nav a.active{
  border-color: rgba(212,175,55,.75);
  box-shadow: var(--sh2);
  background:
    radial-gradient(250px 80px at 50% 0%, rgba(212,175,55,.18), transparent 60%),
    rgba(12,16,26,.62);
}

/* ---------- Main grid ---------- */
.grid{
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px;
  padding-top: 14px;
  display:grid;
  gap: 16px;
  grid-template-columns: 390px 1fr;
}
@media(max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
}

/* ---------- Base Cards ---------- */
.card{
  border-radius: var(--r);
  border: 1px solid rgba(212,175,55,.10);
  background:
    radial-gradient(900px 380px at 18% 0%, rgba(212,175,55,.10) 0%, transparent 60%),
    linear-gradient(180deg, rgba(12,16,26,.94), rgba(10,14,22,.93));
  box-shadow: var(--sh0);
  overflow:hidden;
}

.card h2{
  margin: 0;
  padding: 14px 14px 10px;
  font-size: 12px;
  letter-spacing: .45px;
  text-transform: uppercase;
  color: rgba(239,232,210,.96);
  border-bottom: 1px solid rgba(212,175,55,.14);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.body{ padding: 14px; }

/* ---------- Text helpers ---------- */
.hint{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.mono{ font-family: var(--mono); }

/* ---------- Pills / Status ---------- */
.pill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.16);
  background:
    radial-gradient(220px 70px at 20% 0%, rgba(212,175,55,.12), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.16));
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.pill.statusPulse{ animation: statusPulse .35s ease; }
@keyframes statusPulse{
  0%{ transform: scale(1); }
  60%{ transform: scale(1.02); }
  100%{ transform: scale(1); }
}

.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display:inline-block;
  box-shadow: 0 0 0 3px rgba(255,255,255,.04);
  transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.dot.active{ background: var(--good); box-shadow: 0 0 0 3px rgba(51,209,154,.10); }
.dot.leave{ background: var(--warn); box-shadow: 0 0 0 3px rgba(212,175,55,.10); }
.dot.terminated{ background: var(--bad); box-shadow: 0 0 0 3px rgba(255,107,107,.10); }

/* ---------- Inputs ---------- */
input, select, textarea, button{ font: inherit; color: var(--text); }
input, select, textarea{
  width:100%;
  padding: 10px 12px;
  border-radius: var(--r2);
  border: 1px solid rgba(212,175,55,.10);
  background: rgba(5,7,10,.55);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea{ min-height: 92px; resize: vertical; }
input::placeholder, textarea::placeholder{ color: rgba(185,178,162,.60); }
input:focus, select:focus, textarea:focus{
  border-color: rgba(212,175,55,.65);
  box-shadow: 0 0 0 3px rgba(212,175,55,.10);
  background: rgba(6,8,12,.62);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: var(--r2);
  border: 1px solid rgba(212,175,55,.14);
  background: rgba(10,14,22,.55);
  cursor:pointer;
  user-select:none;
  transition: transform .06s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn:hover{
  border-color: rgba(212,175,55,.38);
  background: rgba(12,16,26,.62);
}
.btn:active{ transform: translateY(1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }

.btn.primary{
  border-color: rgba(212,175,55,.75);
  background:
    radial-gradient(260px 70px at 30% 0%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(135deg, rgba(212,175,55,.98), rgba(184,138,28,.92));
  color: #070a10;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(212,175,55,.14);
}
.btn.primary:hover{
  border-color: rgba(212,175,55,.95);
  box-shadow: 0 14px 34px rgba(212,175,55,.18);
}
.btn.good{ border-color: rgba(51,209,154,.45); }
.btn.good:hover{ border-color: rgba(51,209,154,.70); }
.btn.danger{ border-color: rgba(255,107,107,.40); }
.btn.danger:hover{ border-color: rgba(255,107,107,.70); }

/* ---------- CardRow blocks ---------- */
.cardRow{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(6,9,14,.35);
  border-radius: 16px;
  padding: 12px;
  transition: border-color .15s ease, background .15s ease, transform .08s ease;
  position:relative;
  overflow:hidden;
}
.cardRow:hover{
  border-color: rgba(212,175,55,.22);
  background: rgba(7,10,16,.42);
}
.cardRow.clickable{ cursor:pointer; }
.cardRow.clickable:active{ transform: translateY(1px); }
.cardRow.active{
  border-color: rgba(212,175,55,.40);
  box-shadow: 0 0 0 3px rgba(212,175,55,.10);
}

/* Gold shimmer hover */
.cardRow::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  transform: translateX(-45%) rotate(8deg);
  background: var(--shine);
  opacity: 0;
  transition: opacity .18s ease, transform .55s ease;
  pointer-events:none;
}
.cardRow:hover::after{
  opacity:.9;
  transform: translateX(35%) rotate(8deg);
}

/* ---------- Chips ---------- */
.chip{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--chip-line);
  background: var(--chip-bg);
  font-size: 12px;
  color: rgba(239,232,210,.95);
}
.chip.blue{ border-color: rgba(122,162,255,.25); }
.chip.green{ border-color: rgba(51,209,154,.25); }
.chip.red{ border-color: rgba(255,107,107,.25); }

/* ---------- Tabs (base) ---------- */
.tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(212,175,55,.12);
}
.tab{
  cursor:pointer;
  user-select:none;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.14);
  background: rgba(10,14,22,.50);
  font-size: 12px;
  color: rgba(239,232,210,.92);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .06s ease, opacity .15s ease;
}
.tab:hover{
  border-color: rgba(212,175,55,.32);
  background: rgba(12,16,26,.62);
}
.tab:active{ transform: translateY(1px); }
.tab.active{
  border-color: rgba(212,175,55,.78);
  box-shadow: 0 0 0 3px rgba(212,175,55,.10);
  background:
    radial-gradient(260px 70px at 30% 0%, rgba(212,175,55,.16), transparent 60%),
    rgba(12,16,26,.62);
}
.tabPanel{ display:none; margin-top: 12px; }
.tabPanel.active{ display:block; animation: panelIn .16s ease both; }
@keyframes panelIn{
  from{ opacity:0; transform: translateY(4px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ---------- Save badge ---------- */
.saveBadge{
  position: fixed;
  top: 74px;
  right: 18px;
  z-index: 40;
  display:none;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,.28);
  background:
    radial-gradient(260px 70px at 20% 0%, rgba(212,175,55,.14), transparent 60%),
    rgba(10,14,22,.72);
  box-shadow: var(--sh1);
  font-size: 12px;
  color: rgba(239,232,210,.98);
}
.saveBadge.show{
  display:inline-flex;
  gap:8px;
  align-items:center;
  animation: popIn .22s ease both;
}
@keyframes popIn{
  from{ opacity:0; transform: translateY(-6px); }
  to{ opacity:1; transform: translateY(0); }
}
.saveBadge .tick{
  width: 9px; height: 9px;
  border-radius: 999px;
  background: var(--good);
  box-shadow: 0 0 0 3px rgba(51,209,154,.10);
}

/* ---------- Case Folder Upgrade ---------- */
.caseFolder{
  position: relative;
  border-radius: calc(var(--r) + 2px);
  border: 1px solid rgba(212,175,55,.16);
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 18% 0%, rgba(212,175,55,.14) 0%, transparent 60%),
    linear-gradient(180deg, rgba(16,20,30,.92), rgba(10,14,22,.92));
}

/* Watermark logo per record (needs /assets/logo.png) */
.caseFolder::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  opacity: .075;
  background-image: url("/assets/logo.png");
  background-repeat:no-repeat;
  background-size: 340px;
  background-position: 92% 24%;
  filter: saturate(1.05) contrast(1.08);
}

/* Leather-ish vignette */
.caseFolder::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 650px at 40% -20%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(900px 650px at 110% 60%, rgba(212,175,55,.06), transparent 55%),
    radial-gradient(1200px 800px at 50% 120%, rgba(0,0,0,.70), transparent 55%);
  opacity: .9;
}

/* Keep folder content above watermark */
.caseFolder > *{ position: relative; z-index: 1; }

/* Case header strip (folder label) */
.caseHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(212,175,55,.14);
  background: linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.12));
}

.caseTitle{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.caseTitleTop{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.caseLabel{
  font-size: 12px;
  letter-spacing:.45px;
  text-transform: uppercase;
  color: rgba(239,232,210,.92);
  opacity:.95;
}

.caseName{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: .2px;
  line-height: 1.12;
}

.caseMeta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.caseActions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Folder register tabs */
.tabs.caseTabs{
  margin-top: 0;
  padding: 10px 14px 0;
  border-bottom: 1px solid rgba(212,175,55,.12);
  background: rgba(0,0,0,.06);
}

.tab.caseTab{
  position: relative;
  padding: 10px 14px;
  border-radius: 14px 14px 0 0;
  border: 1px solid rgba(212,175,55,.14);
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(20,25,38,.92), rgba(12,16,26,.72));
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  z-index: 1;
  opacity: .92;
}

.tab.caseTab::before{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  top: -1px;
  height: 1px;
  background: rgba(255,255,255,.06);
  opacity:.6;
}

.tab.caseTab:hover{
  opacity: 1;
  border-color: rgba(212,175,55,.32);
}

.tab.caseTab.active{
  border-color: rgba(212,175,55,.70);
  background:
    radial-gradient(260px 70px at 30% 0%, rgba(212,175,55,.18), transparent 60%),
    linear-gradient(180deg, rgba(24,30,46,.96), rgba(12,16,26,.78));
  box-shadow:
    0 0 0 3px rgba(212,175,55,.10),
    0 12px 28px rgba(0,0,0,.35);
  z-index: 3;
}

/* Folder body / paper */
.caseBody{ padding: 14px; }
.casePaper{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 320px at 12% 0%, rgba(255,255,255,.06) 0%, transparent 60%),
    linear-gradient(180deg, rgba(6,9,14,.30), rgba(6,9,14,.22));
  padding: 12px;
}

/* Optional separators */
.hr{
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 12px 0;
}

/* Auth gate overlay (if present) */
#authGate{ animation: gateIn .22s ease both; }
@keyframes gateIn{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}

/* Small polish */
@media (min-width: 1100px){
  .wrap{ padding-left: 18px; padding-right: 18px; }
  .grid{ padding-top: 14px; }
}