/* ===============================
   True Crime Blog – Cozy Cabin Theme
   Palette:
   #040101 (bg)
   #650A0B (deep red)
   #9A0101 (blood red)
   #3B383A (charcoal)
   #909595 (cool gray)
   =============================== */

:root {
  --tc-bg: #040101;
  --tc-bg-alt: #3B383A;
  --tc-surface: #1a1515;
  --tc-primary: #9A0101;
  --tc-primary-soft: #650A0B;
  --tc-border: #3B383A;
  --tc-text: #f5f5f5;
  --tc-text-muted: #909595;
  --tc-card-radius: 18px;
  --tc-shadow-soft: 0 22px 55px rgba(0, 0, 0, 0.75);
}

/* Light theme base tokens */
html[data-theme="light"],
body[data-theme="light"],
.tc-body.tc-light,
.tc-body.tc-theme-light {
  --tc-bg: #f4f4f4;
  --tc-bg-alt: #ffffff;
  --tc-surface: #ffffff;
  --tc-primary: #9A0101;
  --tc-primary-soft: #650A0B;
  --tc-border: #d1d1d1;
  --tc-text: #181818;
  --tc-text-muted: #555555;
}

/* ========== Base ========== */

body.tc-body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at top, #2c0505 0, #040101 55%, #040101 100%);
  color: var(--tc-text);
}

a {
  color: var(--tc-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.tc-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 80px 20px 60px;
}

/* ========== Header ========== */

/* ========== Site Hero Banner ========== */

.tc-site-hero {
  padding: 1.5rem 0 0;
  background: transparent; /* let body gradient show through */
}

.tc-site-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.tc-site-hero-img {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}

/* Case body main title color */
.tc-case-body h1 {
  color: #9A0101;
}


/* Slightly softer shadow in light mode */
html[data-theme="light"] .tc-site-hero-img,
body[data-theme="light"] .tc-site-hero-img,
.tc-body.tc-light .tc-site-hero-img,
.tc-body.tc-theme-light .tc-site-hero-img {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25);
}

.tc-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(to bottom, rgba(4,1,1,0.98), rgba(4,1,1,0.85));
  border-bottom: 1px solid rgba(144,149,149,0.25);
  backdrop-filter: blur(10px);
}

.tc-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tc-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tc-text);
  font-size: 0.9rem;
}
.tc-logo a {
  color: inherit;
  text-decoration: none;
}
.tc-logo-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #ff4b4b 0, #9A0101 45%, #040101 95%);
  box-shadow: 0 0 18px rgba(154,1,1,0.9);
}

.tc-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tc-nav a {
  font-size: 0.9rem;
  color: var(--tc-text-muted);
}
.tc-nav a:hover {
  color: var(--tc-text);
}

/* Theme toggle button */

.tc-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(144,149,149,0.5);
  background: rgba(59,56,58,0.8);
  color: var(--tc-text);
  font-size: 0.8rem;
  cursor: pointer;
}
.tc-theme-toggle span:first-child {
  font-size: 1rem;
}

/* ========== Case List (index) ========== */

.tc-case-list-page .tc-main {
  padding-top: 60px;
}

/* Title + intro for list page */
.tc-case-list-page .tc-main > h1 {
  margin: 0 0 4px;
  font-size: 2.1rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.tc-case-list-page .tc-main > p {
  margin: 0 0 24px;
  font-size: 0.95rem;
  color: var(--tc-text-muted);
}

/* stack cards instead of masonry grid */
.tc-case-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* DRAMATIC case card */

.tc-case-card {
  position: relative;
  padding: 18px 22px 16px 26px;
  border-radius: var(--tc-card-radius);
  background: radial-gradient(circle at top left, rgba(154,1,1,0.38), rgba(4,1,1,0.98));
  border: 1px solid rgba(59,56,58,0.92);
  box-shadow: var(--tc-shadow-soft);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

/* red spine on the left */
.tc-case-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(to bottom, #9A0101, #650A0B);
  box-shadow: 0 0 18px rgba(154,1,1,0.9);
}

/* subtle overlay */
.tc-case-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(250,250,250,0.08), transparent 50%) ,
    linear-gradient(135deg, rgba(144,149,149,0.15), transparent 40%, rgba(154,1,1,0.18));
  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
}

.tc-case-card-inner {
  position: relative;
  z-index: 1;
}

/* date + status row */
.tc-case-meta-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tc-text-muted);
}

/* title row */
.tc-case-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
}
.tc-case-title-row h2 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
}
.tc-case-title-row h2 a {
  color: #fff;
  text-decoration: none;
}
.tc-case-title-row h2 a:hover {
  text-decoration: underline;
}

/* intro/summary text */
.tc-case-summary {
  margin-top: 2px;
  font-size: 0.9rem;
  color: var(--tc-text-muted);
  max-width: 90%;
}

/* bottom meta line */
.tc-case-meta-bottom {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--tc-text-muted);
}

/* card hover */
.tc-case-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.9);
  border-color: rgba(255, 153, 153, 0.55);
}

/* ========== Badges & Status ========== */

.tc-badge,
.tc-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tc-badge {
  background: rgba(59,56,58,0.9);
  color: var(--tc-text-muted);
  border: 1px solid rgba(144,149,149,0.6);
}

.tc-status {
  background: rgba(154,1,1,0.22);
  border: 1px solid rgba(154,1,1,0.7);
  color: #ffc9c9;
}

/* tweak by status name */
.tc-status-missing {
  background: rgba(154,1,1,0.35);
  border-color: #ff7777;
}
.tc-status-unsolved {
  background: rgba(101,10,11,0.4);
}
.tc-status-solved {
  background: rgba(144,149,149,0.35);
}

/* ========== Case Page Layout ========== */

.tc-case-page .tc-main {
  padding-top: 50px;
}

.tc-case-hero {
  margin-bottom: 24px;
}

.tc-case-hero-header h1 {
  margin: 10px 0 6px;
  font-size: 1.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tc-case-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--tc-text-muted);
}

.tc-case-layout {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 24px;
}

@media (max-width: 800px) {
  .tc-case-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Sidebar */

.tc-case-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tc-case-summary-box,
.tc-updates-box {
  background: rgba(16, 10, 10, 0.97);
  border-radius: var(--tc-card-radius);
  border: 1px solid rgba(59,56,58,0.95);
  padding: 16px 18px;
  box-shadow: var(--tc-shadow-soft);
}

/* CASE SUMMARY title = red */
.tc-case-summary-box h2 {
  margin-top: 0;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffb3b3;
}

/* "Latest Updates" header keeps neutral muted color */
.tc-updates-box h3 {
  margin-top: 0;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tc-text-muted);
}

/* Victim / Status labels = red */
.tc-case-summary-box strong {
  color: #ff9b9b;
}

.tc-case-summary-box p,
.tc-updates-box p,
.tc-updates-box li {
  margin: 4px 0;
  font-size: 0.9rem;
}

/* Tags */

.tc-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.tc-tag {
  font-size: 0.75rem;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(59,56,58,0.9);
  color: var(--tc-text-muted);
}


/* Case updates clickable label */
.tc-update-date {
  color: #f5d15a;
  font-weight: 600;
}
.tc-update-date:hover,
.tc-update-date:focus {
  text-decoration: underline;
}

/* Updates list */


.tc-updates-box ul {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}

/* Article */

.tc-case-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tc-case-body {
  background: rgba(16, 10, 10, 0.97);
  border-radius: var(--tc-card-radius);
  border: 1px solid rgba(59,56,58,0.95);
  padding: 20px 22px;
  box-shadow: var(--tc-shadow-soft);
  font-size: 0.98rem;
  line-height: 1.6;
  color: #f1ecea; /* softer off-white for body text */
}

/* Section headings inside case write-ups */

/* H2 = bold yellow tape-style block */
.tc-case-body h2,
.tc-update-body h2 {
  margin-top: 1.8em;
  margin-bottom: 0.6em;
  display: inline-block;
  padding: 4px 10px;
  background: #f5d15a; /* crime-scene yellow */
  color: #040101;      /* black text */
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 1rem;
  border-radius: 3px;
}
.tc-case-body h2:first-child {
  margin-top: 0;
}

/* H3 = slimmer red rule (original style) */
.tc-case-body h3,
.tc-update-body h3 {
  margin-top: 1.6em;
  margin-bottom: 0.4em;
  color: #fbe0e0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1rem;
  border-left: 4px solid #9A0101;
  padding-left: 9px;
}

/* Lists */
.tc-case-body ul,
.tc-update-body ul,
.tc-case-body ol,
.tc-update-body ol {
  padding-left: 1.3rem;
  margin: 0.4em 0 1em;
}
.tc-case-body ul li::marker,
.tc-case-body ol li::marker {
  color: #ff7777; /* red bullet markers */
}

/* Emphasis + links inside content */
.tc-case-body strong,
.tc-update-body strong {
  color: #ffe0e0;
}
.tc-case-body a,
.tc-update-body a {
  color: #ff9b9b;
}
.tc-case-body a:hover,
.tc-update-body a:hover {
  color: #ffd2d2;
}

/* Horizontal rules in content */
.tc-case-body hr,
.tc-update-body hr {
  border: 0;
  border-top: 1px solid rgba(144,149,149,0.5);
  margin: 1.4em 0;
}

/* Timeline – HORIZONTAL SCROLL BAR ACROSS THE TOP */

.tc-timeline {
  background: rgba(16, 10, 10, 0.97);
  border-radius: var(--tc-card-radius);
  border: 1px solid rgba(59,56,58,0.95);
  padding: 18px 20px 12px;
  box-shadow: var(--tc-shadow-soft);
}

/* Timeline header = red */
.tc-timeline h2 {
  margin-top: 0;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #ffb3b3;
  border-bottom: 1px solid rgba(255,153,153,0.65);
  padding-bottom: 4px;
  margin-bottom: 8px;
}

.tc-timeline-note {
  margin: 0 0 8px;
  font-size: 0.8rem;
  color: var(--tc-text-muted);
}

/* HORIZONTAL track with scroll */
.tc-timeline-list {
  position: relative;
  margin: 0;
  padding: 18px 0 4px;
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: #9A0101 transparent;
}

/* WebKit scrollbar (Chrome, Edge, etc.) */
.tc-timeline-list::-webkit-scrollbar {
  height: 6px;
}
.tc-timeline-list::-webkit-scrollbar-track {
  background: transparent;
}
.tc-timeline-list::-webkit-scrollbar-thumb {
  background: #9A0101;
  border-radius: 999px;
}

/* Horizontal line behind dots */
.tc-timeline-list::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 32px;
  height: 2px;
  background: linear-gradient(to right, #9A0101, rgba(154,1,1,0.1));
  pointer-events: none;
}

/* Each event "node" */
.tc-timeline-item {
  position: relative;
  min-width: 170px;
  padding-top: 40px;
  padding-bottom: 4px;
  text-align: center;
}

/* Clickable header (matches your JS selector) */
.tc-timeline-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}

/* Timeline dot centered over the track */
.tc-timeline-dot {
  position: absolute;
  left: 50%;
  top: 24px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #9A0101;
  box-shadow: 0 0 10px rgba(154,1,1,0.7);
  border: 2px solid #040101;
  transform: translateX(-50%);
}

.tc-timeline-date {
  font-size: 0.8rem;
  color: var(--tc-text-muted);
}

/* Event label/title */
.tc-timeline-header h3 {
  margin: 0;
  font-size: 0.9rem;
  color: #ffb3b3;
}

/* Expanded description under each node */
.tc-timeline-description {
  margin-top: 6px;
  font-size: 0.85rem;
  color: #f1ecea;
}

/* Keep any strong text inside descriptions readable */
.tc-timeline-item strong {
  color: #ffb3b3;
}


/* Evidence → Case Files */

.tc-evidence {
  background: rgba(16, 10, 10, 0.97);
  border-radius: var(--tc-card-radius);
  border: 1px solid rgba(59,56,58,0.95);
  padding: 18px 20px;
  box-shadow: var(--tc-shadow-soft);
}

/* Fake the heading text so it reads "Case Files" */
.tc-evidence h2 {
  margin-top: 0;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: transparent;       /* hide original text */
  position: relative;
}
.tc-evidence h2::after {
  content: "Case Files";
  position: absolute;
  inset: 0;
  color: #ffb3b3;
}

.tc-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 8px;
}

.tc-evidence-item {
  display: flex;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 10px;
  background: rgba(59,56,58,0.9);
  border: 1px solid rgba(144,149,149,0.35);
}

.tc-evidence-thumb {
  width: 80px;
  min-width: 80px;
  height: 80px;
  border-radius: 10px;
  background: radial-gradient(circle, #9A0101 0, #650A0B 45%, #040101 95%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  text-transform: uppercase;
  color: #ffd9d9;
  overflow: hidden;
}

.tc-evidence-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
}

.tc-evidence-meta strong {
  font-size: 0.9rem;
}
.tc-evidence-meta p {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: var(--tc-text-muted);
}


.tc-evidence-meta strong a {
  color: #ffffff;
}
.tc-evidence-meta strong a:hover {
  color: #ffb3b3;
}
/* Resources */

.tc-resources {
  background: rgba(16, 10, 10, 0.97);
  border-radius: var(--tc-card-radius);
  border: 1px solid rgba(59,56,58,0.95);
  padding: 18px 20px;
  box-shadow: var(--tc-shadow-soft);
}
.tc-resources h2 {
  margin-top: 0;
  font-size: 1.1rem;
}
.tc-resources ul {
  margin: 8px 0 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}

/* Case navigation */

.tc-case-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: 0.85rem;
}
.tc-case-nav a {
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(144,149,149,0.5);
  background: rgba(59,56,58,0.9);
  color: var(--tc-text);
}
.tc-case-nav a:hover {
  background: rgba(154,1,1,0.5);
}

/* Related cases */

.tc-related {
  margin-top: 18px;
}
.tc-related h2 {
  font-size: 1.1rem;
}
.tc-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.tc-related-card {
  border-radius: 12px;
  border: 1px solid rgba(59,56,58,0.95);
  background: radial-gradient(circle at top left, rgba(154,1,1,0.25), rgba(4,1,1,0.96));
  padding: 10px 12px;
}
.tc-related-card h3 {
  margin: 0 0 4px;
  font-size: 0.95rem;
}

/* Footer */

.tc-footer {
  border-top: 1px solid rgba(59,56,58,0.9);
  padding: 16px 20px 22px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--tc-text-muted);
}

/* ========== Light Mode Component Overrides ========== */

html[data-theme="light"] body.tc-body,
body[data-theme="light"].tc-body,
.tc-body.tc-light,
.tc-body.tc-theme-light {
  background: radial-gradient(circle at top, #650A0B 0, #040101 55%, #040101 100%);
  color: var(--tc-text);
}

html[data-theme="light"] .tc-header,
body[data-theme="light"] .tc-header,
.tc-body.tc-light .tc-header,
.tc-body.tc-theme-light .tc-header {
  background: linear-gradient(to bottom, #ffffff, #f1f1f1);
  border-bottom-color: rgba(0,0,0,0.06);
}

/* Light cards / panels */

html[data-theme="light"] .tc-case-card,
body[data-theme="light"] .tc-case-card,
.tc-body.tc-light .tc-case-card,
.tc-body.tc-theme-light .tc-case-card {
  background: linear-gradient(135deg, #ffffff, #f3f3f3);
  border-color: rgba(0,0,0,0.06);
}

html[data-theme="light"] .tc-case-summary-box,
html[data-theme="light"] .tc-updates-box,
html[data-theme="light"] .tc-case-body,
html[data-theme="light"] .tc-timeline,
html[data-theme="light"] .tc-evidence,
html[data-theme="light"] .tc-resources,
body[data-theme="light"] .tc-case-summary-box,
body[data-theme="light"] .tc-updates-box,
body[data-theme="light"] .tc-case-body,
body[data-theme="light"] .tc-timeline,
body[data-theme="light"] .tc-evidence,
body[data-theme="light"] .tc-resources,
.tc-body.tc-light .tc-case-summary-box,
.tc-body.tc-light .tc-updates-box,
.tc-body.tc-light .tc-case-body,
.tc-body.tc-light .tc-timeline,
.tc-body.tc-light .tc-evidence,
.tc-body.tc-light .tc-resources {
  background: #ffffff;
  border-color: rgba(0,0,0,0.06);
  box-shadow: 0 14px 30px rgba(0,0,0,0.08);
}

/* Light-mode evidence items */

html[data-theme="light"] .tc-evidence-item,
body[data-theme="light"] .tc-evidence-item,
.tc-body.tc-light .tc-evidence-item {
  background: #f6f6f6;
  border-color: rgba(0,0,0,0.06);
}

/* Light footer */

html[data-theme="light"] .tc-footer,
body[data-theme="light"] .tc-footer,
.tc-body.tc-light .tc-footer {
  border-top-color: rgba(0,0,0,0.06);
}


/* ========== Admin Layout ========== */

.tc-admin-main {
  padding-top: 80px;
  padding-bottom: 60px;
}

.tc-admin-section {
  background: rgba(12, 12, 12, 0.95);
  border-radius: 18px;
  padding: 20px 22px 24px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 18px 45px rgba(0,0,0,0.8);
  margin-bottom: 28px;
}

.tc-admin-header,
.tc-admin-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.tc-admin-header h1,
.tc-admin-header-row h1,
.tc-admin-header-row h2 {
  margin: 0;
}

.tc-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr);
  gap: 24px;
}

@media (max-width: 880px) {
  .tc-admin-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tc-admin-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.tc-admin-card {
  flex: 1 1 180px;
  min-width: 160px;
  background: radial-gradient(circle at top left, rgba(220,68,68,0.35), rgba(10,10,10,0.95));
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.12);
}

.tc-admin-number {
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 4px;
}

/* Admin table */

.tc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tc-table th,
.tc-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: top;
}

.tc-table th {
  text-align: left;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.tc-table tbody tr:nth-child(even) {
  /* fallback if browser ignores this; harmless */
}

.tc-table tbody tr:nth-child(odd) {
  background: rgba(255,255,255,0.01);
}

.tc-table tbody tr:hover {
  background: rgba(255,255,255,0.04);
}

/* Admin form layout */

.tc-form-row {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tc-form-row label {
  font-size: 0.9rem;
  font-weight: 500;
}

.tc-form-row input[type="text"],
.tc-form-row input[type="number"],
.tc-form-row input[type="date"],
.tc-form-row textarea,
.tc-form-grid input[type="text"],
.tc-form-grid input[type="number"],
.tc-form-grid input[type="date"],
.tc-form-grid textarea,
.tc-admin-notes textarea {
  width: 100%;
  max-width: 520px;
  background: rgba(12,12,12,0.95);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  padding: 8px 10px;
  font: inherit;
  color: var(--tc-text);
}

.tc-form-row textarea {
  min-height: 140px;
}

.tc-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px 24px;
  margin-bottom: 16px;
}

.tc-form-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tc-admin-notes textarea {
  min-height: 260px;
}

.tc-admin-notes-hint {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 6px;
}

/* Buttons */

.tc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.9);
  background: linear-gradient(135deg, #d92b3a, #ff6b4a);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
}

.tc-btn:hover {
  filter: brightness(1.05);
}

.tc-link {
  color: #f87171;
  text-decoration: underline;
  cursor: pointer;
}


/* === Light-mode readability tweaks (text only) === */

/* Case body text on light theme */
html[data-theme="light"] .tc-case-body,
body[data-theme="light"] .tc-case-body,
.tc-body.tc-light .tc-case-body {
  color: #181818;
}

/* Strong / emphasis in case body */
html[data-theme="light"] .tc-case-body strong,
body[data-theme="light"] .tc-case-body strong,
.tc-body.tc-light .tc-case-body strong,
.tc-update-body strong {
  color: #9A0101;
}

/* Links inside case body */
html[data-theme="light"] .tc-case-body a,
body[data-theme="light"] .tc-case-body a,
.tc-body.tc-light .tc-case-body a,
.tc-update-body a {
  color: #9A0101;
}
html[data-theme="light"] .tc-case-body a:hover,
body[data-theme="light"] .tc-case-body a:hover,
.tc-body.tc-light .tc-case-body a:hover,
.tc-update-body a:hover {
  color: #c10000;
}

/* Case Files titles (evidence cards) */
html[data-theme="light"] .tc-evidence-meta strong a,
body[data-theme="light"] .tc-evidence-meta strong a,
.tc-body.tc-light .tc-evidence-meta strong a {
  color: #181818;
}
html[data-theme="light"] .tc-evidence-meta strong a:hover,
body[data-theme="light"] .tc-evidence-meta strong a:hover,
.tc-body.tc-light .tc-evidence-meta strong a:hover {
  color: #9A0101;
}

/* ========== Admin Shell & Sidebar ========== */

.tc-admin-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  align-items: flex-start;
}

.tc-admin-sidebar {
  background: rgba(12, 12, 12, 0.96);
  border-radius: 18px;
  padding: 16px 16px 18px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 18px 45px rgba(0,0,0,0.85);
  position: sticky;
  top: 90px;
  align-self: flex-start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.tc-admin-sidebar-title {
  margin: 0 0 10px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--tc-text-muted);
}

.tc-admin-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tc-admin-nav a {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--tc-text-muted);
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
}

.tc-admin-nav a:hover {
  background: rgba(154,1,1,0.22);
  border-color: rgba(154,1,1,0.7);
  color: #ffffff;
}

.tc-admin-nav a.tc-admin-nav-active {
  background: linear-gradient(135deg, #d92b3a, #ff6b4a);
  border-color: rgba(255,255,255,0.9);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(217,43,58,0.7);
}

.tc-admin-nav-label {
  flex: 1;
}

/* Admin main content area next to sidebar */
.tc-admin-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (max-width: 900px) {
  .tc-admin-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .tc-admin-sidebar {
    position: static;
    max-height: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
  }

  .tc-admin-sidebar-title {
    margin-bottom: 0;
  }

  .tc-admin-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }

  .tc-admin-nav a {
    font-size: 0.8rem;
    padding: 6px 10px;
  }
}

/* Sidebar card styling */
.tc-case-sidebar .tc-case-card {
  background: #0e0e0e;            /* deep black card */
  border: 1px solid #2a2a2a;      /* subtle outline */
  padding: 1.4rem;
  border-radius: 12px;
  color: #ffffff;
}

/* Sidebar card titles */
.tc-case-sidebar .tc-case-card h2,
.tc-case-sidebar .tc-case-card h3 {
  color: #ff8a8a;                  /* soft crime-scene pink/red */
  margin-bottom: 0.8rem;
}
/* Sidebar heading styles */
.tc-case-sidebar h2,
.tc-case-sidebar h3 {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  margin: 0 0 0.75rem;
}

/* Default sidebar h2 color */
.tc-case-sidebar h2 {
  color: #f8f8f8;
}

/* Default sidebar h3 (like timeline labels) */
.tc-case-sidebar h3 {
  color: #f5c842;
  font-weight: 600;
}

/* Special highlight for "How You Can Help" card */
.tc-case-sidebar .tc-help-card h2 {
  background: #f5c842;        /* caution-tape yellow */
  color: #000000;
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}
/* Sidebar emphasis color */
.tc-case-sidebar strong {
  color: #ff4b4b;
  font-weight: 700; /* keep it bold */
}

/* Spacing + wrapping for images inside case content */
.tc-case-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.25rem auto; /* top/bottom space */
}

/* If you use the TinyMCE styles: Left / Right / Full */
.tc-case-content img.img-left {
  float: left;
  margin: 0 1.25rem 1.25rem 0;  /* space on right + bottom */
}

.tc-case-content img.img-right {
  float: right;
  margin: 0 0 1.25rem 1.25rem;  /* space on left + bottom */
}

.tc-case-content img.img-full {
  display: block;
  margin: 1.5rem auto;
}

/* Optional: clear floats when you need it */
.tc-case-content .clear {
  clear: both;
}
/* Force spacing around images in case content, even when TinyMCE adds float styles */
.tc-case-content img {
  max-width: 100%;
  height: auto;
}

/* Any image floated LEFT gets breathing room on the right + bottom */
.tc-case-content img[style*="float: left"],
.tc-case-content img[style*="float:left"],
.tc-case-content img.img-left {
  float: left;
  margin-right: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}

/* Any image floated RIGHT gets breathing room on the left + bottom */
.tc-case-content img[style*="float: right"],
.tc-case-content img[style*="float:right"],
.tc-case-content img.img-right {
  float: right;
  margin-left: 1.25rem !important;
  margin-bottom: 1.25rem !important;
}

/* Non-floated / full-width images */
.tc-case-content img.img-full {
  display: block;
  margin: 1.5rem auto !important;
}

/* Default vertical spacing if the image is just sitting in its own line */
.tc-case-content p > img,
.tc-case-content figure > img,
.tc-case-content img:not([style*="float"]) {
  display: block;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

/* Helper to clear floats if you need it in the editor */
.tc-case-content .clear {
  clear: both;
}
/* Image captions inside case content */
.tc-case-content figure {
  margin: 1.5rem 0;
}

.tc-case-content figure img {
  display: block;
  margin: 0 auto 0.5rem;
  max-width: 100%;
  height: auto;
}

.tc-case-content figure figcaption {
  font-size: 0.85rem;
  font-style: italic;
  color: #bbbbbb;
  text-align: center;
  line-height: 1.4;
}
/* Small italic captions under images in case content */
/* === Image + caption card inside article === */
.tc-case-content .tc-img-figure {
  display: inline-block;
  text-align: center;
  margin: 1.25rem 0;
}

/* Image inside the figure */
.tc-case-content .tc-img-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  float: none !important;    /* kill TinyMCE float on the image itself */
  margin: 0 auto;
}

/* Caption */
.tc-case-content .tc-img-caption {
  font-size: 0.85rem;
  font-style: italic;
  font-weight: normal;
  color: #bbbbbb;
  line-height: 1.4;
  margin-top: 0.35rem;
}

/* Figure floated RIGHT (image + caption move together) */
.tc-case-content .tc-img-figure.tc-img-right {
  float: right;
  margin-left: 1.25rem;
}

/* Figure floated LEFT (image + caption move together) */
.tc-case-content .tc-img-figure.tc-img-left {
  float: left;
  margin-right: 1.25rem;
}

/* ===== TinyMCE admin editor contrast fixes ===== */
.tox .tox-menubar,
.tox .tox-toolbar__primary {
  background-color: #111111;
}

/* Top menu items: File / Edit / View / Insert / Format / Tools / Table */
.tox .tox-menubar .tox-mbtn,
.tox .tox-menubar .tox-mbtn__select-label {
  color: #f9f9f9 !important;
}

/* Toolbar buttons + icons (bold, italic, align, etc.) */
.tox .tox-toolbar__primary .tox-tbtn {
  color: #f9f9f9 !important;
}

.tox .tox-toolbar__primary .tox-tbtn svg {
  fill: #f9f9f9 !important;
}

/* ===== Admin case_edit heading + label colors ===== */

/* Section headings inside the admin edit form
   (e.g., Victim Information, Suspect Information) */
.tc-admin-content h3 {
  color: #f5d15a; /* yellow */
}

/* Field labels inside the admin edit form
   (Age, Weight, Eye Color, Other Identifying Features, Location, etc.) */
.tc-admin-content .tc-form-row label {
  color: #9A0101; /* red */
}