/* ── Supreme IT GRS — Main Styles ─────────────────────────────────────────── */

:root {
  /* English Heritage palette */
  --grs-primary:        #1E4D2B;   /* forest green */
  --grs-primary-hover:  #2A6B3C;   /* leaf green */
  --grs-gold:           #C4922A;   /* brass gold */
  --grs-gold-light:     #F0D98C;   /* pale gold tint */
  --grs-claret:         #8B1A2E;   /* claret / alerts */
  --grs-cream:          #F5F0E8;   /* warm cream page bg */
  --grs-cream-dark:     #EDE6D6;   /* slightly darker cream */
  --grs-parchment:      #FFFDF9;   /* card surface */
  --grs-charcoal:       #2C2C2C;   /* body text */
  --grs-sand:           #D4C9B0;   /* borders */
  --grs-muted:          #7A7060;   /* muted labels */
  --grs-slate:          #4A6580;   /* slate blue for AMC */

  /* Bootstrap override shims — keeps existing template classes working */
  --bs-primary:         #1E4D2B;
  --bs-primary-rgb:     30, 77, 43;
  --bs-body-bg:         #F5F0E8;
  --bs-body-color:      #2C2C2C;
  --bs-border-color:    #D4C9B0;
  --bs-link-color:      #1E4D2B;
  --bs-link-hover-color:#2A6B3C;

  --grs-sidebar-width: 240px;
}

/* ── Global body ───────────────────────────────────────────────────────────── */
body {
  background-color: var(--grs-cream) !important;
  color: var(--grs-charcoal);
}

/* ── Bootstrap primary overrides ─────────────────────────────────────────── */
.btn-primary {
  background-color: var(--grs-primary) !important;
  border-color: var(--grs-primary) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--grs-primary-hover) !important;
  border-color: var(--grs-primary-hover) !important;
}
.btn-outline-primary {
  color: var(--grs-primary) !important;
  border-color: var(--grs-primary) !important;
}
.btn-outline-primary:hover {
  background-color: var(--grs-primary) !important;
  color: #fff !important;
}
.text-primary { color: var(--grs-primary) !important; }
.bg-primary    { background-color: var(--grs-primary) !important; }
.border-primary{ border-color: var(--grs-primary) !important; }

/* Badge role variant inside navbar */
.badge.bg-light.text-primary {
  background-color: var(--grs-gold-light) !important;
  color: var(--grs-primary) !important;
  font-weight: 500;
}

/* ── Navbar ───────────────────────────────────────────────────────────────── */
.navbar.bg-primary {
  background-color: var(--grs-primary) !important;
  border-bottom: 3px solid var(--grs-gold);
}
.navbar-dark .nav-link          { color: rgba(255,255,255,.80); }
.navbar-dark .nav-link:hover,
.navbar-dark .nav-link.active   { color: #fff; background: rgba(255,255,255,.10); border-radius: .35rem; }
.navbar-dark .navbar-brand      { color: #fff; font-weight: 600; letter-spacing: .3px; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer.bg-light {
  background-color: var(--grs-cream-dark) !important;
  border-top-color: var(--grs-sand) !important;
  color: var(--grs-muted);
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card {
  border-radius: .6rem;
  background-color: var(--grs-parchment);
  border-color: var(--grs-sand);
}
.card-header {
  border-radius: .6rem .6rem 0 0 !important;
  font-size: .9rem;
  background-color: var(--grs-cream-dark);
  border-bottom-color: var(--grs-sand);
  color: var(--grs-charcoal);
}

/* Stat cards — top accent bar */
.card.stat-card-green  { border-top: 4px solid var(--grs-primary) !important; }
.card.stat-card-gold   { border-top: 4px solid var(--grs-gold) !important; }
.card.stat-card-claret { border-top: 4px solid var(--grs-claret) !important; }
.card.stat-card-slate  { border-top: 4px solid var(--grs-slate) !important; }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table > :not(caption) > * > * { padding: .6rem .75rem; }
.table { --bs-table-bg: var(--grs-parchment); --bs-table-border-color: var(--grs-sand); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: var(--grs-cream); }
.table thead th { color: var(--grs-muted); font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-bottom-color: var(--grs-sand); }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert-info    { background-color: #EAF3DE; border-color: #97C459; color: #173404; }
.alert-success { background-color: #EAF3DE; border-color: #3B6D11; color: #173404; }
.alert-danger  { background-color: #FCEBEB; border-color: #F09595; color: #501313; }
.alert-warning { background-color: #FAEEDA; border-color: #EF9F27; color: #412402; }

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-control, .form-select {
  background-color: var(--grs-parchment);
  border-color: var(--grs-sand);
  color: var(--grs-charcoal);
}
.form-control:focus, .form-select:focus {
  border-color: var(--grs-primary);
  box-shadow: 0 0 0 .2rem rgba(30,77,43,.18);
  background-color: #fff;
}
.form-label { color: var(--grs-muted); font-size: .875rem; font-weight: 500; }

/* ── Page-title accent bar ────────────────────────────────────────────────── */
.page-title-accent {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.page-title-accent::before {
  content: '';
  display: block;
  width: 4px;
  height: 1.2em;
  background: var(--grs-gold);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Dropdowns ────────────────────────────────────────────────────────────── */
.dropdown-menu {
  background-color: var(--grs-parchment);
  border-color: var(--grs-sand);
  box-shadow: 0 4px 16px rgba(30,77,43,.08);
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--grs-cream);
  color: var(--grs-primary);
}
.dropdown-item.text-danger:hover { background-color: #FCEBEB; }
.dropdown-divider { border-color: var(--grs-sand); }

/* Typography */
body { font-size: .9375rem; }

/* Letter spacing for OTP input */
.letter-spacing-wide { letter-spacing: .5rem; font-size: 1.5rem; }

/* Navbar brand */
.navbar-brand { font-size: 1.1rem; letter-spacing: -.3px; }

/* Cards */
.card { border-radius: .6rem; }
.card-header { border-radius: .6rem .6rem 0 0 !important; font-size: .9rem; }

/* Tables */
.table > :not(caption) > * > * { padding: .6rem .75rem; }

/* Status badge colours */
.text-bg-teal    { background-color: #20c997 !important; color: #fff !important; }
.text-bg-claret  { background-color: var(--grs-claret) !important; color: #fff !important; }
.text-bg-gold    { background-color: var(--grs-gold) !important; color: #fff !important; }
/* Push notification banner — green instead of Bootstrap blue */
#pushBanner.text-bg-primary,
#pushBanner { background-color: var(--grs-primary) !important; color: #fff !important; }

/* Tight pagination */
.pagination-sm .page-link { font-size: .8rem; }

/* Scrollable tables on mobile */
.table-responsive { border-radius: 0 0 .6rem .6rem; }

/* Photo grid in ticket detail */
.photo-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; cursor: pointer; }

/* Stage progress dots */
.stage-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
}

/* Push notification banner */
#pushBanner {
  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
  z-index: 9999; min-width: 300px;
}

/* Reply bubble */
.bubble-self  { background: var(--grs-primary); color: #fff; border-radius: 1rem 1rem 0 1rem; }
.bubble-other { background: var(--grs-cream-dark); border-radius: 1rem 1rem 1rem 0; }

/* Focus ring */
:focus-visible { outline: 3px solid rgba(30, 77, 43, .30); outline-offset: 2px; }

/* Responsive navbar height tweak */
@media (max-width: 576px) {
  .navbar-brand { font-size: 1rem; }
}

/* Print: hide navbar/footer */
@media print {
  nav, footer, .no-print { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid #dee2e6 !important; }
}