/* =====================================================================
   UNDERCITY — visual identity
   A "case file under a desk lamp" aesthetic: near-black room, warm
   amber lamplight on manila folders, cold steel-blue for secondary
   info, rust-red rubber-stamp marks for status (jail/hospital).
   ===================================================================== */

:root {
  --void:       #0b0d0f;
  --panel:      #16191d;
  --panel-2:    #1d2126;
  --hairline:   #2a2f35;

  --paper:      #e8e3d8;
  --paper-dim:  #9b9588;

  --amber:      #d9a441;
  --amber-dim:  #8a6c2e;
  --steel:      #6f93a3;
  --rust:       #b3432f;
  --olive:      #7a9b6e;

  --radius: 3px;
}

* { box-sizing: border-box; }

@font-face {
  font-family: 'system-stack';
}

body {
  margin: 0;
  background: var(--void);
  background-image:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(217,164,65,0.07), transparent 60%);
  color: var(--paper);
  font-family: 'IBM Plex Sans', -apple-system, Segoe UI, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
}

h1, h2, h3, .stamp-font {
  font-family: 'Special Elite', 'Courier New', monospace;
  letter-spacing: 0.5px;
  font-weight: 400;
}

.mono, .stat-num, .timer {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
}

a { color: var(--steel); text-decoration: none; }
a:hover { color: var(--amber); text-decoration: underline; }

/* ---------------- Layout shell ---------------- */

.app-shell {
  display: grid;
  grid-template-columns: 230px 1fr;
  min-height: 100vh;
  max-width: 1180px;
  margin: 0 auto;
}

.mobile-topbar { display: none; }
.sidebar-overlay { display: none; }

.sidebar {
  background: linear-gradient(180deg, var(--panel), var(--void));
  border-right: 1px solid var(--hairline);
  padding: 22px 0 22px 0;
  display: flex;
  flex-direction: column;
}

.brand {
  font-family: 'Special Elite', monospace;
  font-size: 22px;
  color: var(--amber);
  padding: 0 20px 20px 20px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 8px;
}
.brand span { color: var(--paper-dim); font-size: 12px; display: block; font-family: 'IBM Plex Sans', sans-serif; letter-spacing: 2px; }

.folder-tabs { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; }

.folder-tabs a {
  color: var(--paper-dim);
  padding: 9px 20px;
  border-left: 3px solid transparent;
  font-size: 14px;
}
.folder-tabs a:hover { background: rgba(255,255,255,0.03); color: var(--paper); text-decoration: none; }
.folder-tabs a.active {
  color: var(--amber);
  border-left-color: var(--amber);
  background: rgba(217,164,65,0.06);
}

.sidebar-footer { margin-top: auto; padding: 14px 20px 0 20px; border-top: 1px solid var(--hairline); }
.sidebar-footer a { font-size: 13px; color: var(--rust); }

/* ---------------- Main column ---------------- */

.main { padding: 24px 28px 60px 28px; }

.topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.topbar .who { font-size: 13px; color: var(--paper-dim); }
.topbar .who b { color: var(--paper); }

.vitals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 22px;
}
@media (max-width: 700px) { .vitals { grid-template-columns: repeat(2, 1fr); } }

.vital {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.vital .label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--paper-dim); margin-bottom: 4px; }
.vital .value { font-family: 'IBM Plex Mono', monospace; font-size: 14px; margin-bottom: 6px; }
.bar { height: 6px; border-radius: 3px; background: #000; overflow: hidden; }
.bar > i { display: block; height: 100%; }
.bar.life > i { background: var(--rust); }
.bar.energy > i { background: var(--steel); }
.bar.nerve > i { background: var(--amber); }
.bar.happy > i { background: var(--olive); }

/* ---------------- Cards / panels ---------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}
.card h2 {
  font-size: 17px; color: var(--amber); margin: 0 0 12px 0;
  padding-bottom: 10px; border-bottom: 1px solid var(--hairline);
}
.card h3 { font-size: 14px; color: var(--paper); margin: 0 0 10px 0; }

.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .card-grid { grid-template-columns: 1fr; } }

/* ---------------- The signature element: case-file status stamp ---------------- */
.stamp {
  position: absolute;
  top: 18px; right: -10px;
  transform: rotate(10deg);
  border: 3px solid var(--rust);
  color: var(--rust);
  font-family: 'Special Elite', monospace;
  font-size: 22px;
  letter-spacing: 3px;
  padding: 6px 16px;
  border-radius: 6px;
  opacity: 0.85;
  background: rgba(179,67,47,0.06);
  pointer-events: none;
}
@media (max-width: 700px) { .stamp { font-size: 14px; top: 10px; right: 4px; padding: 4px 10px; } }

/* ---------------- Tables / lists ---------------- */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
@media (max-width: 700px) {
  /* display:block lets overflow-x work directly on the table itself,
     so a wide table (many columns) scrolls horizontally in place
     instead of forcing the whole page to scroll sideways, without
     needing every page to wrap its tables in a container div. */
  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--hairline); }
th { color: var(--paper-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
tr:hover td { background: rgba(255,255,255,0.02); }

/* ---------------- Buttons / forms ---------------- */

.btn {
  display: inline-block;
  background: var(--amber-dim);
  color: var(--void);
  border: none;
  padding: 9px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.btn:hover { background: var(--amber); color: var(--void); text-decoration: none; }
.btn.secondary { background: var(--panel-2); color: var(--paper); border: 1px solid var(--hairline); }
.btn.secondary:hover { border-color: var(--steel); color: var(--steel); background: var(--panel-2); text-decoration: none; }
.btn.danger { background: var(--rust); color: var(--paper); }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

input, select, textarea {
  width: 100%;
  background: var(--void);
  border: 1px solid var(--hairline);
  color: var(--paper);
  padding: 9px 10px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--steel); border-color: var(--steel); }
label { font-size: 12px; color: var(--paper-dim); text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 5px; margin-top: 12px; }

.auth-shell {
  max-width: 380px; margin: 8vh auto; padding: 0 16px;
}

/* ---------------- Flash messages ---------------- */

.flash { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; font-size: 14px; border-left: 3px solid; }
.flash.success { background: rgba(122,155,110,0.08); border-color: var(--olive); color: var(--olive); }
.flash.error   { background: rgba(179,67,47,0.08); border-color: var(--rust); color: #e08a78; }
.flash.info    { background: rgba(111,147,163,0.08); border-color: var(--steel); color: var(--steel); }

.muted { color: var(--paper-dim); font-size: 13px; }
.right { text-align: right; }
.tag { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 10px; border: 1px solid var(--hairline); color: var(--paper-dim); }

/* Notification badge strobe animation */
@keyframes strobe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ---------------------------------------------------------------------
   Mobile layout (<=800px) - deliberately placed at the very end of this
   file. CSS cascade order matters: for equal-specificity selectors,
   whichever rule appears LATER in the source wins, regardless of
   whether it's wrapped in a media query. Placing this block earlier
   (like it originally was) meant the later base .main/.topbar/etc.
   rules further down the file were silently overriding these mobile
   overrides even at mobile widths. Being last guarantees these win.
--------------------------------------------------------------------- */
@media (max-width: 800px) {
  .app-shell { grid-template-columns: 1fr; min-height: auto; }

  /* Fixed top bar with hamburger toggle - the sidebar itself becomes an
     off-canvas drawer instead of being pushed below all the page's
     content, which would otherwise mean scrolling past everything just
     to reach navigation on a phone. */
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 54px;
    background: var(--panel);
    border-bottom: 1px solid var(--hairline);
    padding: 0 16px;
    z-index: 300;
  }
  .mobile-topbar .hamburger-btn {
    background: none; border: none; color: var(--amber); font-size: 26px; line-height: 1;
    cursor: pointer; padding: 6px 8px; margin: 0; -webkit-tap-highlight-color: transparent;
  }
  .mobile-topbar .mobile-brand {
    font-family: 'Special Elite', monospace; color: var(--amber); font-size: 16px;
  }

  .sidebar {
    position: fixed;
    top: 0; left: -280px;
    bottom: 0;
    width: 260px;
    z-index: 400;
    transition: left 0.25s ease;
    overflow-y: auto;
    box-shadow: 2px 0 16px rgba(0,0,0,0.6);
  }
  .sidebar.mobile-open { left: 0; }

  .sidebar-overlay.mobile-open {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 350;
  }

  /* Pushes page content below the fixed top bar - this is the rule
     that wasn't actually taking effect before, since the base .main
     rule further up the file (but still earlier in source order than
     where this block used to live) was winning the cascade. */
  /* Docks the date/search/settings/logout row as a second fixed bar
     directly under the hamburger row, instead of it sitting inline
     further down the page content. This repositions the existing
     .topbar element rather than duplicating it - duplicating it would
     mean two elements with the same #user-search-input id, which would
     break the search JS (getElementById only ever finds the first one). */
  .topbar {
    position: fixed;
    top: 54px; left: 0; right: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--hairline);
    padding: 8px 14px;
    margin-bottom: 0;
    z-index: 290;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .topbar .who { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar > div:last-child { gap: 8px !important; flex-shrink: 0; }
  #user-search-input { width: 96px !important; font-size: 11px !important; padding: 5px 8px !important; }
  #user-search-results { width: 200px !important; }

  .main { padding: 104px 14px 50px 14px; }

  .card { padding: 14px 16px; }
  .card-grid { grid-template-columns: 1fr; }
}