/* =============================================================
   THE CONCERT HALL — web theme (Bootstrap 5.3 override)
   888 Yonge St · est. 1918 · heritage rock venue
   Monochrome ink-on-paper + brick accent, concert-poster type.
   Load AFTER bootstrap.min.css and custom.css. One shared file
   across the staff / production / sales trackers.
   ============================================================= */

:root {
  /* --- brand palette --- */
  --ch-ink:        #0B0B0C;
  --ch-ink-soft:   #1A1A1C;
  --ch-smoke:      #4A4A4D;
  --ch-fog:        #8A8A8D;
  --ch-haze:       #C7C5C0;
  --ch-paper:      #EFECE5;
  --ch-paper-soft: #F7F4ED;
  --ch-bone:       #FBF9F4;
  --ch-brick:      #6B2A1F;
  --ch-brick-deep: #4E1D14;
  --ch-ember:      #B33A1A;
  --ch-gold:       #C8A24B;

  /* Per-app accent — each tracker gets its own heritage tone so they're
     tellable apart while staying one family. Default = brick (staff).
     Overridden by html[data-app="..."] below. */
  --ch-accent:      #6B2A1F;
  --ch-accent-deep: #4E1D14;

  --ch-font-marquee:  'Anton', 'Impact', sans-serif;
  --ch-font-head:     'Oswald', 'Helvetica Neue', sans-serif;
  --ch-font-body:     'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ch-font-mono:     'Special Elite', 'Courier New', monospace;

  /* --- Bootstrap overrides (light) --- */
  --bs-body-bg: var(--ch-paper-soft);
  --bs-body-color: var(--ch-ink);
  --bs-emphasis-color: var(--ch-ink);
  --bs-secondary-color: var(--ch-smoke);
  --bs-tertiary-color: var(--ch-fog);
  --bs-body-font-family: var(--ch-font-body);
  --bs-body-font-size: 0.95rem;
  --bs-body-line-height: 1.5;
  --bs-border-color: var(--ch-haze);
  --bs-border-radius: 2px;
  --bs-border-radius-sm: 2px;
  --bs-border-radius-lg: 2px;
  --bs-border-radius-xl: 2px;
  --bs-primary: var(--ch-accent);
  --bs-primary-rgb: 107, 42, 31;
  --bs-link-color: var(--ch-accent);
  --bs-link-color-rgb: 107, 42, 31;
  --bs-link-hover-color: var(--ch-accent-deep);
}

/* --- Per-app accent (set data-app on <html>) --- */
html[data-app="staff"]      { --ch-accent:#6B2A1F; --ch-accent-deep:#4E1D14; } /* brick */
html[data-app="production"] { --ch-accent:#6B5638; --ch-accent-deep:#4C3D27; } /* bronze / sepia */
html[data-app="sales"]      { --ch-accent:#B33A1A; --ch-accent-deep:#8A2C12; } /* ember */

/* ---- Typography ---- */
body { font-family: var(--ch-font-body); letter-spacing: 0; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ch-font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ch-ink);
}
h1, .h1 { font-family: var(--ch-font-marquee); font-weight: 400; letter-spacing: 0; }
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6 {
  font-family: var(--ch-font-marquee); font-weight: 400; text-transform: uppercase;
}
.text-muted, .text-secondary { color: var(--ch-smoke) !important; }
.small, small { font-size: 0.85em; }

/* ---- Links & primary accents ---- */
a { color: var(--ch-accent); text-decoration: none; }
a:hover { color: var(--ch-accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.text-primary { color: var(--ch-accent) !important; }
.bg-primary { background-color: var(--ch-accent) !important; }
.border-primary { border-color: var(--ch-accent) !important; }

/* ---- Buttons: signage voice, hard edges ---- */
.btn {
  font-family: var(--ch-font-head);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  border-radius: 2px;
}
.btn-primary {
  --bs-btn-bg: var(--ch-accent); --bs-btn-border-color: var(--ch-accent);
  --bs-btn-hover-bg: var(--ch-accent-deep); --bs-btn-hover-border-color: var(--ch-accent-deep);
  --bs-btn-active-bg: var(--ch-accent-deep); --bs-btn-active-border-color: var(--ch-accent-deep);
  --bs-btn-disabled-bg: var(--ch-accent); --bs-btn-disabled-border-color: var(--ch-accent);
}
.btn-outline-primary {
  --bs-btn-color: var(--ch-accent); --bs-btn-border-color: var(--ch-accent);
  --bs-btn-hover-bg: var(--ch-accent); --bs-btn-hover-border-color: var(--ch-accent);
  --bs-btn-active-bg: var(--ch-accent); --bs-btn-active-border-color: var(--ch-accent);
}
.btn-dark {
  --bs-btn-bg: var(--ch-ink); --bs-btn-border-color: var(--ch-ink);
  --bs-btn-hover-bg: var(--ch-ink-soft); --bs-btn-hover-border-color: var(--ch-ink-soft);
}

/* ---- Top navbar: stage-blackout (overrides the apps' inline purple/navy/dark) ---- */
.navbar.fixed-top, .ch-navbar { background-color: var(--ch-ink) !important; border-bottom: 3px solid var(--ch-accent); }
.navbar .navbar-brand span,
.navbar .text-light { font-family: var(--ch-font-head); letter-spacing: 0.04em; }

/* ---- Mobile offcanvas menu header → ink ---- */
.offcanvas-header { background-color: var(--ch-ink) !important; color: var(--ch-bone) !important; }
.offcanvas-title { font-family: var(--ch-font-head); text-transform: uppercase; letter-spacing: 0.04em; }
.offcanvas-body { background-color: var(--ch-paper); }

/* ---- Sidebar ---- */
.sidebar { background-color: var(--ch-paper) !important; box-shadow: inset -1px 0 0 var(--ch-haze); }
.sidebar .nav-link, .sidebar-offcanvas .nav-link {
  font-family: var(--ch-font-head);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 500;
  color: var(--ch-smoke);
  border-radius: 0;
}
.sidebar .nav-link:hover, .sidebar-offcanvas .nav-link:hover {
  color: var(--ch-ink); background-color: var(--ch-paper-soft);
}
.sidebar .nav-link.active, .sidebar-offcanvas .nav-link.active {
  color: var(--ch-accent) !important; background-color: #EDE6DD !important;
  border-right: 3px solid var(--ch-accent); border-left: 0;
}
.sidebar-offcanvas .nav-link.active { border-left: 3px solid var(--ch-accent); border-right: 0; }

/* ---- Cards: flyer-flat ---- */
.card {
  background-color: var(--ch-bone);
  border: 1px solid var(--ch-haze);
  border-radius: 2px;
  box-shadow: none;
}
.card:hover { box-shadow: none; }
.card-header {
  background-color: var(--ch-bone);
  border-bottom: 2px solid var(--ch-ink);
  font-family: var(--ch-font-head);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 600;
  color: var(--ch-ink);
}
/* dashboard stat cards: keep a bold ink top rule */
.card.border-primary,.card.border-success,.card.border-info,.card.border-warning,.card.border-danger {
  border-width: 1px; border-color: var(--ch-haze); border-top: 3px solid var(--ch-accent);
}

/* ---- Tables: newsprint ---- */
.table { --bs-table-bg: transparent; border-color: var(--ch-haze); }
.table > thead {
  background-color: var(--ch-ink); color: var(--ch-bone);
}
.table > thead th {
  font-family: var(--ch-font-head);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500;
  border-bottom: 0; color: var(--ch-bone);
}
.table > tbody td, .table > tbody th { border-color: var(--ch-haze); }
.table-hover > tbody > tr:hover > * { background-color: #EDE6DD; }

/* ---- Forms ---- */
.form-control, .form-select {
  border-radius: 2px; border-color: var(--ch-haze); background-color: var(--ch-bone);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ch-accent);
  box-shadow: 0 0 0 0.2rem rgba(200,162,75,0.35); /* gold focus ring */
}
.form-label { font-family: var(--ch-font-head); text-transform: uppercase;
  letter-spacing: 0.03em; font-size: 0.8rem; font-weight: 500; color: var(--ch-smoke); }
.form-check-input:checked { background-color: var(--ch-accent); border-color: var(--ch-accent); }

/* ---- Badges ---- */
.badge {
  font-family: var(--ch-font-head); text-transform: uppercase; letter-spacing: 0.03em;
  font-weight: 500; border-radius: 2px;
}
.badge.bg-primary { background-color: var(--ch-accent) !important; }
.badge.bg-secondary { background-color: var(--ch-smoke) !important; }

/* ---- Alerts: flat, left-ruled ---- */
.alert { border-radius: 2px; border: 1px solid var(--ch-haze); border-left-width: 4px; }
.alert-primary { border-left-color: var(--ch-accent); background: #F3EAE7; color: var(--ch-ink); }
.alert-success { border-left-color: #2f6b3a; }
.alert-danger  { border-left-color: var(--ch-ember); }
.alert-warning { border-left-color: var(--ch-gold); }
.alert-info    { border-left-color: var(--ch-smoke); }

/* ---- Legacy per-app brand utility classes → the app's heritage accent ---- */
.text-purple, .text-navy, .text-teal { color: var(--ch-accent) !important; }
.bg-purple { background-color: var(--ch-accent) !important; color: #fff !important; }
.btn-purple { background-color: var(--ch-accent) !important; border-color: var(--ch-accent) !important; color:#fff !important; }

/* ---- Overline / section helpers ---- */
.ch-overline { font-family: var(--ch-font-head); text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 0.7rem; color: var(--ch-fog); }
.ch-marquee { font-family: var(--ch-font-marquee); text-transform: uppercase; }
hr { border-top: 2px solid var(--ch-ink); opacity: 1; }

/* =============================================================
   DARK SURFACE (data-bs-theme="dark") — blacked-out hall
   ============================================================= */
[data-bs-theme="dark"] {
  --bs-body-bg: #0E0E10;
  --bs-body-color: var(--ch-bone);
  --bs-emphasis-color: var(--ch-bone);
  --bs-border-color: #2A2A2D;
  --bs-primary: var(--ch-accent);
  --bs-link-color: var(--ch-gold);
  --bs-link-hover-color: #E5C97A;
}
[data-bs-theme="dark"] body { color: var(--ch-bone); }
[data-bs-theme="dark"] h1,[data-bs-theme="dark"] h2,[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,[data-bs-theme="dark"] h5,[data-bs-theme="dark"] h6 { color: var(--ch-bone); }
[data-bs-theme="dark"] .sidebar { background-color: #141416 !important; box-shadow: inset -1px 0 0 #2A2A2D; }
[data-bs-theme="dark"] .sidebar .nav-link { color: var(--ch-haze); }
[data-bs-theme="dark"] .sidebar .nav-link:hover { color: #fff; background-color: #1E1E20; }
[data-bs-theme="dark"] .sidebar .nav-link.active { color: var(--ch-gold) !important;
  background-color: #1E1E20 !important; border-right-color: var(--ch-gold); }
[data-bs-theme="dark"] .card { background-color: #141416; border-color: #2A2A2D; }
[data-bs-theme="dark"] .card-header { background-color: #141416; border-bottom-color: var(--ch-bone); color: var(--ch-bone); }
[data-bs-theme="dark"] .table > thead { background-color: #000; }
[data-bs-theme="dark"] .form-control,[data-bs-theme="dark"] .form-select { background-color: #141416; border-color: #2A2A2D; color: var(--ch-bone); }
[data-bs-theme="dark"] a { color: var(--ch-gold); }