/* =========================================================================
   Iron Night — dark background, white glowing cards, collapsible sidebar.
   Layered on top of Bootstrap 5 (loaded first). Used by the app, guest and
   shared-dashboard layouts. To change the accent colour, edit --in-accent
   and the --in-glow-* rgba values below.
   Backup of the pre-restyle files: /_backup_pre-restyle_2026-10-11
   ========================================================================= */

:root {
  --in-bg: #07080C;
  --in-accent: #E11D48;
  --in-accent-dark: #BE123C;
  --in-accent-text: #B4122F;          /* accent for text on white (AA) */
  --in-glow-a: rgba(225, 29, 72, 0.50);
  --in-glow-b: rgba(225, 29, 72, 0.26);
  --in-glow-card: rgba(225, 29, 72, 0.38);
  --in-ink: #0B0D12;
  --in-muted-on-white: #5B6270;
  --in-muted-on-dark: #A9B0C0;
  --in-text-on-dark: #E8EAF0;
  --in-font-display: 'Barlow Condensed', 'Segoe UI', sans-serif;
  --in-font-body: 'Barlow', -apple-system, 'Segoe UI', sans-serif;
  --in-nav-collapsed: 76px;
  --in-nav-expanded: 236px;

  /* Bootstrap variable overrides so .btn-primary, links, bg-primary etc. follow the accent */
  --bs-primary: #E11D48;
  --bs-primary-rgb: 225, 29, 72;
  --bs-link-color: #B4122F;
  --bs-link-color-rgb: 180, 18, 47;
  --bs-link-hover-color: #881337;
  --bs-link-hover-color-rgb: 136, 19, 55;
}

/* ---- page ground: dark, faint dot grid, glows -------------------------- */

body.in-app,
body.in-guest {
  margin: 0;
  min-height: 100vh;
  background-color: var(--in-bg) !important;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  font-family: var(--in-font-body);
  color: var(--in-text-on-dark);
}

/* the big blurred glows live on a fixed pseudo-element behind everything */
body.in-app::before,
body.in-guest::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 760px at 22% -8%, var(--in-glow-a), transparent 65%),
    radial-gradient(700px 700px at 100% 55%, var(--in-glow-b), transparent 65%),
    radial-gradient(800px 520px at 30% 108%, var(--in-glow-b), transparent 65%);
}

.in-shell,
.in-guest-wrap { position: relative; z-index: 1; }

h1, h2, h3, h4, h5, h6 { font-family: var(--in-font-display); letter-spacing: 0.02em; }

/* ---- shell: sidebar + content ------------------------------------------ */

.in-shell {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 28px;
  min-height: 100vh;
}

.in-sidebar {
  position: sticky;
  top: 28px;
  flex: 0 0 var(--in-nav-collapsed);
  width: var(--in-nav-collapsed);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  scrollbar-width: none;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 40px var(--in-glow-b);
  backdrop-filter: blur(6px);
  transition: flex-basis 0.2s ease, width 0.2s ease;
}
.in-sidebar::-webkit-scrollbar { display: none; }

html.in-expanded .in-sidebar {
  flex-basis: var(--in-nav-expanded);
  width: var(--in-nav-expanded);
}

.in-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 48px;
  margin-bottom: 10px;
  text-decoration: none;
}
html.in-expanded .in-brand { justify-content: flex-start; }

.in-brand-mark {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--in-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 24px var(--in-glow-a);
}
.in-brand-mark svg { width: 26px; height: 26px; }

.in-brand-text {
  display: none;
  font-family: var(--in-font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 0.95;
  letter-spacing: 0.05em;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
}
html.in-expanded .in-brand-text { display: block; }

.in-nav-link {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 46px;
  padding: 0;
  border-radius: 14px;
  color: #D3D7E0;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  text-decoration: none;
  background: transparent;
  border: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
html.in-expanded .in-nav-link { justify-content: flex-start; padding: 0 14px; }

.in-nav-link svg { flex: none; width: 22px; height: 22px; stroke: #C7CBD6; }
.in-nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.in-nav-link:hover svg { stroke: #fff; }
.in-nav-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.in-nav-link.is-active {
  background: #fff;
  color: var(--in-ink);
  box-shadow: 0 0 22px var(--in-glow-a);
}
.in-nav-link.is-active svg { stroke: var(--in-accent); }

.in-label { display: none; }
html.in-expanded .in-label { display: inline; }

.in-sidebar-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.in-user {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
}
html.in-expanded .in-user { justify-content: flex-start; }

.in-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--in-ink);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}
.in-user-meta { display: none; color: #fff; font-weight: 600; font-size: 15px; line-height: 1.3; min-width: 0; }
html.in-expanded .in-user-meta { display: block; }
.in-user-meta .in-user-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-user-meta a,
.in-user-meta button {
  color: #D3D7E0;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.in-user-meta a:hover,
.in-user-meta button:hover { color: #fff; text-decoration: underline; }
.in-user-meta .in-sep { color: #8E95A6; margin: 0 4px; }

.in-toggle {
  box-sizing: border-box;
  height: 44px;
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #D3D7E0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
html.in-expanded .in-toggle { justify-content: flex-start; padding: 0 14px; }
.in-toggle:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.in-toggle svg { width: 20px; height: 20px; stroke: currentColor; flex: none; }
.in-toggle .in-chev-left { display: none; }
html.in-expanded .in-toggle .in-chev-left { display: block; }
html.in-expanded .in-toggle .in-chev-right { display: none; }

.in-content { flex: 1 1 0; min-width: 0; }

/* page header slot (the <x-slot name="header"> every page uses) */
.in-page-header { padding: 0 0 4px; }
.in-page-header .container { padding-top: 0 !important; padding-bottom: 0 !important; max-width: none; padding-left: 0; padding-right: 0; }
.in-page-header h1,
.in-page-header h2 {
  margin: 0 !important;
  color: #fff !important;
  font-family: var(--in-font-display);
  font-weight: 800 !important;
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.in-eyebrow {
  font-family: var(--in-font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.22em;
  color: #FF8A9B;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.in-content main { color: var(--in-text-on-dark); }
.in-content main > .container,
.in-content main > .container-fluid { max-width: none; padding-left: 0; padding-right: 0; }
.in-content main > .container.py-5 { padding-top: 1.75rem !important; }

/* mobile top bar (hidden on desktop) */
.in-mobilebar { display: none; }

/* ---- text colours: light on the dark ground, dark inside cards --------- */

.in-content main .text-secondary,
.in-content main .text-muted { color: var(--in-muted-on-dark) !important; }
.in-content main .text-dark { color: #fff !important; }
.in-content main h3, .in-content main h4, .in-content main h5, .in-content main h6 { color: #fff; }

.card, .modal-content { color: var(--in-ink); }
.card .text-secondary,
.card .text-muted,
.modal-content .text-secondary,
.modal-content .text-muted { color: var(--in-accent-text) !important; }
/* The ".in-content main .text-secondary" rule above is more specific than
   the plain ".card .text-secondary" rule (it adds the "main" element), so
   on app pages it was winning even for text inside a white card — leaving
   card descriptions in the pale colour meant for the dark page background,
   which reads as too faint against white. These restate the same colour
   with enough specificity to actually win inside a card. */
.in-content main .card .text-secondary,
.in-content main .card .text-muted,
.in-content main .modal-content .text-secondary,
.in-content main .modal-content .text-muted { color: var(--in-accent-text) !important; }
.card .text-dark { color: var(--in-ink) !important; }
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6 { color: var(--in-ink); }
.card a:not(.btn):not(.dropdown-item) { color: var(--in-accent-text); font-weight: 600; }

/* ---- white glowing cards ------------------------------------------------ */

body.in-app .card,
body.in-guest .card {
  background: #fff;
  border-radius: 22px;
  border: 0;
}
body.in-app .card.shadow-sm,
body.in-app .card,
body.in-guest .card.shadow-sm,
body.in-guest .card {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.7),
    0 0 56px var(--in-glow-card),
    0 24px 48px -16px rgba(0, 0, 0, 0.6) !important;
}
.card h3.h6, .card .h6 {
  font-family: var(--in-font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- buttons ------------------------------------------------------------ */

.btn { font-family: var(--in-font-body); font-weight: 600; border-radius: 12px; }
.btn-primary {
  --bs-btn-bg: var(--in-accent);
  --bs-btn-border-color: var(--in-accent);
  --bs-btn-hover-bg: var(--in-accent-dark);
  --bs-btn-hover-border-color: var(--in-accent-dark);
  --bs-btn-active-bg: #9F1239;
  --bs-btn-active-border-color: #9F1239;
  --bs-btn-disabled-bg: var(--in-accent);
  --bs-btn-disabled-border-color: var(--in-accent);
  box-shadow: 0 0 22px var(--in-glow-a);
}
.btn-outline-primary {
  --bs-btn-color: var(--in-accent-text);
  --bs-btn-border-color: var(--in-accent);
  --bs-btn-hover-bg: var(--in-accent);
  --bs-btn-hover-border-color: var(--in-accent);
  --bs-btn-active-bg: var(--in-accent-dark);
  --bs-btn-active-border-color: var(--in-accent-dark);
}
/* outline buttons that sit directly on the dark ground (not in a card) */
.in-content main > .container .btn-outline-secondary:not(.card .btn-outline-secondary) {
  --bs-btn-color: #E8EAF0;
  --bs-btn-border-color: rgba(255, 255, 255, 0.3);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
  --bs-btn-hover-border-color: rgba(255, 255, 255, 0.5);
  --bs-btn-hover-color: #fff;
}

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

.form-control:focus,
.form-select:focus {
  border-color: var(--in-accent);
  box-shadow: 0 0 0 0.2rem rgba(225, 29, 72, 0.18);
}
.form-check-input:checked { background-color: var(--in-accent); border-color: var(--in-accent); }
.form-check-input:focus { border-color: var(--in-accent); box-shadow: 0 0 0 0.2rem rgba(225, 29, 72, 0.18); }
.form-label { font-weight: 600; font-size: 0.9rem; }

/* ---- progress bars / colour utilities that used Bootstrap blue ----------- */

.bg-primary { background-color: var(--in-accent) !important; }
.text-primary { color: var(--in-accent-text) !important; }
.border-primary { border-color: var(--in-accent) !important; }

/* ---- tables inside cards -------------------------------------------------- */

.card .table { --bs-table-bg: transparent; margin-bottom: 0; }
.card .table thead th {
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--in-muted-on-white);
  border-bottom-color: #E3E6EE;
}

/* ---- alerts, badges ------------------------------------------------------ */

.alert { border-radius: 14px; border: 0; }
.badge.text-bg-light {
  background: #F5F6F9 !important;
  color: #4A5160 !important;
  border: 1px solid #DDE0E8 !important;
  font-weight: 600;
}

/* ---- dropdowns & modals (Bootstrap) --------------------------------------- */

.dropdown-menu { border-radius: 14px; border: 0; box-shadow: 0 0 40px var(--in-glow-b), 0 18px 40px -12px rgba(0, 0, 0, 0.6); }
.modal-content { border: 0; border-radius: 22px; box-shadow: 0 0 56px var(--in-glow-card); }

/* ---- guest (login / register) --------------------------------------------- */

.in-guest-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.in-guest-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; text-decoration: none; }
.in-guest-brand .in-brand-mark { width: 56px; height: 56px; border-radius: 16px; }
.in-guest-brand .in-brand-mark svg { width: 32px; height: 32px; }
.in-guest-brand span.in-guest-word {
  font-family: var(--in-font-display);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: 0.05em;
  color: #fff;
  text-transform: uppercase;
}

/* ---- shared (read-only) dashboard header ----------------------------------- */

.in-shared-header {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(6px);
}
.in-shared-header .in-brand-text { display: block; }
body.in-app.in-shared main { position: relative; z-index: 1; }
body.in-app.in-shared main .container { max-width: 1320px; }

/* ---- mobile: sidebar becomes an off-canvas drawer --------------------------- */

@media (max-width: 767.98px) {
  .in-shell { display: block; padding: 16px; }
  .in-mobilebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .in-mobilebar .in-brand-mark { width: 38px; height: 38px; border-radius: 12px; }
  .in-mobilebar .in-brand-mark svg { width: 22px; height: 22px; }
  .in-mobile-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .in-mobile-btn svg { width: 22px; height: 22px; stroke: #fff; }

  .in-sidebar {
    position: fixed;
    z-index: 1050;
    top: 12px;
    left: 12px;
    bottom: 12px;
    max-height: none;
    width: var(--in-nav-expanded);
    flex-basis: auto;
    transform: translateX(calc(-100% - 24px));
    transition: transform 0.2s ease;
    background: rgba(14, 16, 24, 0.97);
  }
  body.in-nav-open .in-sidebar { transform: translateX(0); }
  /* drawer always shows labels on mobile */
  .in-sidebar .in-label { display: inline; }
  .in-sidebar .in-brand-text,
  .in-sidebar .in-user-meta { display: block; }
  .in-sidebar .in-nav-link,
  .in-sidebar .in-brand,
  .in-sidebar .in-user { justify-content: flex-start; }
  .in-sidebar .in-nav-link { padding: 0 14px; }
  .in-sidebar .in-toggle { display: none; }
  .in-page-header h1, .in-page-header h2 { font-size: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .in-sidebar { transition: none; }
}

/* ---- shared (read-only) dashboard: no sidebar, content sits straight in <body> ---- */

body.in-shared > * { position: relative; z-index: 1; }
body.in-shared { color: var(--in-text-on-dark); }
body.in-shared .text-secondary,
body.in-shared .text-muted { color: var(--in-muted-on-dark) !important; }
body.in-shared .card .text-secondary,
body.in-shared .card .text-muted { color: var(--in-muted-on-white) !important; }
body.in-shared .container.py-5 { max-width: 1320px; }

/* ---- fix: headings inside white cards must be dark ----------------------------
   The rule that makes headings white on the dark ground (.in-content main h3 …)
   out-ranked the card rule, giving white-on-white card titles. These selectors
   are more specific, so anything inside a card / modal is always ink-black. */
.in-content main .card h1,
.in-content main .card h2,
.in-content main .card h3,
.in-content main .card h4,
.in-content main .card h5,
.in-content main .card h6,
.in-content main .card .h1,
.in-content main .card .h2,
.in-content main .card .h3,
.in-content main .card .h4,
.in-content main .card .h5,
.in-content main .card .h6,
.in-content main .card .card-title,
.in-content main .modal-content h1,
.in-content main .modal-content h2,
.in-content main .modal-content h3,
.in-content main .modal-content h4,
.in-content main .modal-content h5,
.in-content main .modal-content h6,
body.in-shared .card h1,
body.in-shared .card h2,
body.in-shared .card h3,
body.in-shared .card h4,
body.in-shared .card h5,
body.in-shared .card h6,
body.in-guest .card h1,
body.in-guest .card h2,
body.in-guest .card h3,
body.in-guest .card h4,
body.in-guest .card h5,
body.in-guest .card h6 {
  color: var(--in-ink) !important;
}
.in-content main .card .text-dark { color: var(--in-ink) !important; }