/* ===== THE ESCAPE GAME — PROJECT PLANNER ===== */

/* ── Brand Tokens (from 2022 Brand Guide) ── */
:root {
    /* TEG Core trio */
    --teg-pink: #FF4863;              /* Primary Web Red / Feverish Pink */
    --teg-pink-hover: #e63d57;
    --teg-pink-light: rgba(255,72,99,.10);
    --teg-black: #000000;             /* Cosmo Black */
    --teg-white: #FFFFFF;             /* Cosmo White */

    /* TEG Extended */
    --teg-graphite: #2B2B2B;          /* Comic Graphite */
    --teg-fog: #E5E5E5;              /* Comic Fog */
    --teg-berry: #890E40;
    --teg-mars: #E04F48;
    --teg-millennial-pink: #FCCFCD;
    --teg-blush: #FCA4A4;
    --teg-blue: #2455D1;              /* Blue Handed */
    --teg-violet: #401775;            /* Ultraviolet */
    --teg-turf: #5DA277;             /* Turf Green */
    --teg-gold: #F2C255;             /* Hamilton Gold */
    --teg-spice: #DB832C;            /* Spice Market */

    /* Semantic mapping */
    --clr-bg: #f8f8f8;
    --clr-card: var(--teg-white);
    --clr-primary: var(--teg-pink);
    --clr-primary-light: var(--teg-millennial-pink);
    --clr-accent: var(--teg-pink);
    --clr-success: var(--teg-turf);
    --clr-warning: var(--teg-spice);
    --clr-danger: var(--teg-mars);
    --clr-info: var(--teg-blue);
    --clr-muted: #999999;
    --clr-text: var(--teg-black);
    --clr-text-light: #666666;
    --clr-border: var(--teg-fog);

    --radius: 8px;
    --radius-lg: 12px;
    --shadow: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
    --shadow-md: 0 4px 12px rgba(0,0,0,.08);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.12);

    /* Typography — Din Next LT Pro approximated with system fonts */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ── Google Fonts import (closest free match to Din Next) ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Base ── */
body {
    background: var(--clr-bg);
    color: var(--clr-text);
    font-family: 'Inter', var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

a { color: var(--teg-pink); }
a:hover { color: var(--teg-pink-hover); }

/* ── Navbar — dark TEG bar ── */
.navbar {
    background: var(--teg-black);
    border-bottom: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    padding: .5rem 1rem;
}
.navbar .navbar-brand {
    color: var(--teg-white) !important;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.navbar .navbar-brand img {
    height: 26px;
}
.navbar .navbar-brand .brand-divider {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,.25);
}
.navbar .nav-link {
    color: rgba(255,255,255,.65) !important;
    font-size: .82rem;
    font-weight: 500;
    padding: .5rem .75rem !important;
    transition: color .15s;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--teg-white) !important;
}
.navbar .dropdown-menu {
    background: var(--teg-graphite);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius);
}
.navbar .dropdown-item {
    color: rgba(255,255,255,.8);
    font-size: .85rem;
}
.navbar .dropdown-item:hover {
    background: rgba(255,255,255,.08);
    color: var(--teg-white);
}
.navbar .dropdown-item.text-warning {
    color: var(--teg-gold) !important;
}
.navbar .dropdown-divider {
    border-color: rgba(255,255,255,.1);
}
.navbar .badge {
    background: var(--teg-pink) !important;
    color: var(--teg-white) !important;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
}
.navbar .text-muted {
    color: rgba(255,255,255,.45) !important;
}
.navbar .btn-outline-secondary {
    color: rgba(255,255,255,.65);
    border-color: rgba(255,255,255,.2);
    font-size: .78rem;
}
.navbar .btn-outline-secondary:hover {
    background: rgba(255,255,255,.08);
    color: var(--teg-white);
    border-color: rgba(255,255,255,.35);
}
.navbar-toggler {
    border-color: rgba(255,255,255,.2);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── Buttons ── */
.btn-primary {
    background: var(--teg-pink);
    border-color: var(--teg-pink);
    color: var(--teg-white);
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background: var(--teg-pink-hover);
    border-color: var(--teg-pink-hover);
}
.btn-outline-primary {
    color: var(--teg-pink);
    border-color: var(--teg-pink);
}
.btn-outline-primary:hover {
    background: var(--teg-pink);
    border-color: var(--teg-pink);
    color: var(--teg-white);
}
.btn-dark {
    background: var(--teg-black);
    border-color: var(--teg-black);
}

/* ── Cards ── */
.card {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: box-shadow .15s;
}
.card:hover {
    box-shadow: var(--shadow-md);
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--clr-border);
    font-weight: 600;
    font-size: .9rem;
}

/* ── Stat cards ── */
.stat-card {
    border-left: 4px solid var(--teg-pink);
    padding: 1.25rem;
    border-radius: var(--radius);
}
.stat-card.green  { border-left-color: var(--clr-success); }
.stat-card.orange { border-left-color: var(--clr-warning); }
.stat-card.red    { border-left-color: var(--clr-danger); }
.stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1; }
.stat-label {
    font-size: .75rem;
    color: var(--clr-muted);
    font-weight: 600;
    letter-spacing: .03em;
}

/* ── Project cards ── */
.project-card { cursor: pointer; }
.project-card .card-body { padding: 1.25rem; }
.project-card .project-name {
    font-size: 1.1rem;
    font-weight: 700;
}
.project-card .project-meta {
    font-size: .82rem;
    color: var(--clr-muted);
}

/* ── Schedule grid ── */
.schedule-table {
    font-size: .8rem;
    white-space: nowrap;
}
.schedule-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--clr-card);
}
.schedule-table .date-header {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: .25rem .35rem;
    font-weight: 500;
}
.schedule-table .day-name { font-size: .65rem; color: var(--clr-muted); }

/* ── Task type badges ── */
.task-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: .72rem;
    font-weight: 600;
    text-align: center;
    min-width: 3rem;
}
.task-travel    { background: #dbeafe; color: var(--teg-blue); }
.task-install   { background: #d1fae5; color: #065f46; }
.task-scenic    { background: #fef3c7; color: #92400e; }
.task-foh       { background: #ede9fe; color: var(--teg-violet); }
.task-boh       { background: var(--teg-millennial-pink); color: var(--teg-berry); }
.task-punch     { background: #ffedd5; color: #9a3412; }
.task-loadinout { background: #e0e7ff; color: #3730a3; }
.task-other     { background: #f1f5f9; color: #475569; }
.task-completed { opacity: .5; text-decoration: line-through; }
.task-dayoff    { background: #f8f9fa; color: #adb5bd; }

/* ── Person chips ── */
.person-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .65rem;
    border-radius: 4px;
    background: var(--teg-pink-light);
    color: var(--teg-black);
    font-size: .82rem;
    font-weight: 600;
}
.person-chip .role-dot {
    width: 8px; height: 8px; border-radius: 50%;
}
.role-installer .role-dot  { background: var(--clr-success); }
.role-scenic .role-dot     { background: var(--clr-warning); }
.role-tech .role-dot       { background: var(--teg-pink); }
.role-supervisor .role-dot { background: var(--clr-danger); }

/* ── Lodging cards ── */
.lodging-card {
    border-left: 4px solid var(--clr-success);
    margin-bottom: .75rem;
}
.lodging-card.hotel { border-left-color: var(--teg-pink); }

/* ── Costs ── */
.cost-total { font-size: 1.2rem; font-weight: 700; color: var(--teg-pink); }

/* ── Forms ── */
.modal .form-label { font-weight: 600; font-size: .85rem; }
.form-label { font-weight: 500; }
.form-control:focus, .form-select:focus {
    border-color: var(--teg-pink);
    box-shadow: 0 0 0 .2rem rgba(255,72,99,.15);
}

/* ── Schedule wrapper ── */
.schedule-wrapper {
    overflow-x: auto;
    max-width: 100%;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    background: var(--clr-card);
}

/* ── Empty states ── */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--clr-muted);
}
.empty-state i { font-size: 3rem; margin-bottom: .75rem; }

/* ── Section headings ── */
.section-heading {
    font-size: .95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

/* ── Cost category colors ── */
.cost-labor    { color: var(--teg-pink); }
.cost-perdiem  { color: var(--teg-turf); }
.cost-lodging  { color: var(--teg-spice); }
.cost-airfare  { color: var(--teg-mars); }
.cost-ground   { color: var(--teg-violet); }
.cost-materials{ color: var(--teg-blue); }
.cost-logistics{ color: var(--teg-violet); }

/* ── Week divider ── */
.week-divider td { border-top: 3px solid var(--teg-pink) !important; }

/* ── Cost default indicators ── */
.cost-default {
    color: var(--teg-pink) !important;
    background: var(--teg-pink-light) !important;
    font-style: italic;
}
.cost-default:focus {
    color: var(--clr-text) !important;
    background: #fff !important;
    font-style: normal;
}
.text-cost-default {
    color: var(--teg-pink) !important;
    font-style: italic;
}

/* ── Login page ── */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--teg-black);
    position: relative;
}
.login-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 60%, rgba(255,72,99,.1) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 40%, rgba(255,72,99,.06) 0%, transparent 50%);
    pointer-events: none;
}
.login-card {
    width: 100%;
    max-width: 400px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 1;
    border: none;
}

/* ── Nav tabs (filter tabs on review pages) ── */
.nav-tabs {
    border-bottom: 2px solid var(--clr-border);
}
.nav-tabs .nav-link {
    color: var(--clr-text-light);
    font-size: .85rem;
    font-weight: 600;
    border: none;
    padding: .6rem 1rem;
    margin-bottom: -2px;
}
.nav-tabs .nav-link.active {
    color: var(--teg-pink);
    border: none;
    border-bottom: 3px solid var(--teg-pink);
    background: transparent;
}
.nav-tabs .nav-link:hover:not(.active) {
    border: none;
    border-bottom: 3px solid var(--teg-fog);
    color: var(--teg-black);
}

/* ── Tables ── */
.table > thead {
    font-size: .78rem;
    font-weight: 600;
    color: var(--clr-muted);
}

/* ── Badges ── */
.badge { font-weight: 600; text-transform: capitalize; }

/* ── Alerts ── */
.alert {
    border-radius: var(--radius);
    font-size: .88rem;
    border: none;
}

/* ── Accent line at bottom of content ── */
main::after {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--teg-pink), var(--teg-black));
    margin-top: 3rem;
    border-radius: 2px;
    opacity: .2;
}

/* ── Bootstrap overrides for TEG pink as "primary" ── */
.bg-primary-subtle { background-color: var(--teg-pink-light) !important; }
.text-primary-emphasis { color: var(--teg-berry) !important; }
.text-primary { color: var(--teg-pink) !important; }
.border-primary { border-color: var(--teg-pink) !important; }

.btn-success { background: var(--teg-turf); border-color: var(--teg-turf); }
.btn-success:hover { background: #4e8f66; border-color: #4e8f66; }

/* ── Tom Select (searchable dropdowns) ── */
.ts-wrapper { font-size: inherit; }
.ts-wrapper .ts-control { min-height: 38px; border-color: #dee2e6; }
.ts-wrapper .ts-dropdown { z-index: 10060; } /* above Bootstrap modals (z-index:1055) */
.modal .ts-dropdown { position: fixed; }

/* ── Scrollbar styling (webkit) ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--teg-fog); }
::-webkit-scrollbar-thumb { background: #bbb; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #999; }

/* ── Global Search bar (in navbar + landing top-bar) ── */
.global-search-root { position: relative; }
.global-search-input {
  width: 220px;
  height: 30px;
  font-size: 0.82rem;
  padding: 0.18rem 0.55rem 0.18rem 1.85rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: #fff;
  outline: none;
  transition: all 0.15s ease;
}
.global-search-input::placeholder { color: rgba(255,255,255,0.55); }
.global-search-input:focus {
  background: rgba(255,255,255,0.95);
  color: #212529;
  width: 320px;
  border-color: #FF4863;
  box-shadow: 0 0 0 3px rgba(255,72,99,0.18);
}
.global-search-input:focus::placeholder { color: #aaa; }
.global-search-root::before {
  content: '\F52A';                /* bi-search */
  font-family: 'bootstrap-icons';
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.6);
  font-size: 0.8rem;
  pointer-events: none;
}
.global-search-input:focus + .global-search-dropdown,
.global-search-input:focus ~ .global-search-dropdown { display: block; }
.global-search-root:focus-within::before { color: #888; }
.global-search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 360px;
  max-width: 480px;
  max-height: 480px;
  overflow-y: auto;
  background: #fff;
  color: #212529;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  z-index: 1060;
  padding: 0.25rem 0;
}
.gs-heading {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #888;
  padding: 0.4rem 0.85rem 0.2rem;
  font-weight: 600;
}
.gs-result {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.85rem;
  text-decoration: none;
  color: #212529;
  cursor: pointer;
}
.gs-result i.bi { color: #FF4863; font-size: 1rem; width: 1rem; text-align: center; flex-shrink: 0; }
.gs-result-text { flex: 1; min-width: 0; }
.gs-result-label { font-weight: 500; font-size: 0.85rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-result-sub { font-size: 0.72rem; color: #6c757d; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-kind-chip {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f1f3f5;
  color: #495057;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  flex-shrink: 0;
}
.gs-result.gs-active, .gs-result:hover {
  background: #fff5f7;
  color: #212529;
}
.gs-empty {
  padding: 0.9rem 0.85rem;
  text-align: center;
  font-size: 0.82rem;
  color: #888;
}

/* Variant: light-on-dark for landing page top-bar */
.global-search-root.gs-on-dark .global-search-input { color: #fff; }
.global-search-root.gs-on-dark .global-search-input:focus { color: #212529; }

/* ============================================================
   RESPONSIVE LAYER — added 2026-07-31
   ------------------------------------------------------------
   WHY: this stylesheet had ZERO media queries. The site relied
   entirely on Bootstrap's defaults, and the house pattern for a
   section header —

     <div class="d-flex justify-content-between align-items-center">
       <h5>Install Assignments</h5>
       <div class="d-flex gap-2"> 4 buttons </div>
     </div>

   — has no flex-wrap. Below ~400px the button group can't shrink
   any further, so it overflows the viewport: "+ Add Assignment"
   runs off the right edge and the heading squeezes into three
   lines. Reported from a Galaxy Fold 7 cover screen (~340px CSS px).

   That pattern appears in 84 view files, so this is fixed centrally
   rather than per-view. Rules are additive and scoped to narrow
   widths — nothing here changes desktop rendering.

   Selectors exclude .flex-nowrap so a view can still opt out
   deliberately.
   ============================================================ */

@media (max-width: 767.98px) {

  /* --- 1. Section header rows: wrap instead of overflow -------
     The heading takes the full first line and the action group
     drops beneath it. On a narrow screen a squeezed heading beside
     squeezed buttons is worse than two clean rows. */
  .d-flex.justify-content-between:not(.flex-nowrap) {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  .d-flex.justify-content-between:not(.flex-nowrap) > h1,
  .d-flex.justify-content-between:not(.flex-nowrap) > h2,
  .d-flex.justify-content-between:not(.flex-nowrap) > h3,
  .d-flex.justify-content-between:not(.flex-nowrap) > h4,
  .d-flex.justify-content-between:not(.flex-nowrap) > h5,
  .d-flex.justify-content-between:not(.flex-nowrap) > h6 {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* --- 2. Action groups: fill the row, wrap evenly ------------
     Buttons share the width instead of pushing past the edge.
     Forms are included because several actions (Resync dates) are
     a <form> wrapping a single submit button. */
  .d-flex.justify-content-between:not(.flex-nowrap) > .d-flex:not(.flex-nowrap) {
    flex-wrap: wrap;
    width: 100%;
    gap: 0.4rem;
  }
  .d-flex.justify-content-between:not(.flex-nowrap) > .d-flex > .btn,
  .d-flex.justify-content-between:not(.flex-nowrap) > .d-flex > form,
  .d-flex.justify-content-between:not(.flex-nowrap) > .d-flex > .btn-group {
    flex: 1 1 auto;
  }
  .d-flex.justify-content-between:not(.flex-nowrap) > .d-flex > form > .btn {
    width: 100%;
  }

  /* Button text is what forces the minimum width. Slightly tighter
     padding buys ~15% more room per button without hurting tap size
     (still comfortably over the 44px minimum in height). */
  .d-flex.justify-content-between:not(.flex-nowrap) > .d-flex > .btn,
  .d-flex.justify-content-between:not(.flex-nowrap) > .d-flex > form > .btn {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    white-space: nowrap;
  }

  /* --- 3. Button groups wrap rather than overflow ------------- */
  .btn-group:not(.flex-nowrap) {
    flex-wrap: wrap;
  }

  /* --- 4. Tables that were never wrapped in .table-responsive -
     151 view files contain a bare <table>; only 66 use the
     wrapper. Give the unwrapped ones their own horizontal scroll
     so a wide table scrolls itself instead of stretching the page.
     The :not() uses a descendant selector (Selectors 4) — if a
     browser doesn't support it the rule is simply ignored and
     behaviour is unchanged. */
  table.table:not(.table-responsive table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- 5. Nothing should be able to widen the page ------------ */
  img, pre, canvas, iframe, video {
    max-width: 100%;
  }
  pre {
    overflow-x: auto;
  }

  /* --- 6. Reclaim horizontal space ---------------------------
     At 340px, 12px of gutter per side is meaningful. */
  .container, .container-fluid, .container-lg, .container-xl {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .card-body {
    padding: 0.85rem;
  }

  /* --- 7. Clear the floating action buttons -------------------
     _floating_actions.ejs pins chat / call / suggest-a-change at
     bottom:1.1rem. Without bottom padding they sit on top of the
     last card. */
  body {
    padding-bottom: 4.75rem;
  }

  /* --- 8. Breadcrumbs and long headings ---------------------- */
  .breadcrumb {
    flex-wrap: wrap;
    row-gap: 0.15rem;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
  }
  h4 { font-size: 1.15rem; }
  h5 { font-size: 1.02rem; }

  /* --- 9. Modals get the screen ------------------------------ */
  .modal-dialog {
    margin: 0.5rem;
  }
}

/* --- Very narrow: Fold cover screens, ~340-400px CSS px -------
   Two buttons per row reads better than four cramped ones or a
   tall single-file stack. 45% basis + wrap yields 2-up. */
@media (max-width: 400px) {
  .d-flex.justify-content-between:not(.flex-nowrap) > .d-flex > .btn,
  .d-flex.justify-content-between:not(.flex-nowrap) > .d-flex > form {
    flex: 1 1 45%;
  }
  .btn-sm, .btn-group-sm > .btn {
    font-size: 0.78rem;
  }
  /* Tab strips scroll rather than stack into an unreadable pile. */
  .nav-tabs, .nav-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-tabs .nav-link, .nav-pills .nav-link {
    white-space: nowrap;
  }
}

/* --- Generic mobile action collapser (public/js/mobile_actions.js) ------
   The script keeps the primary action visible and moves the rest into
   .teg-actions-overflow behind a "…" toggle. Expands INLINE on purpose:
   several clusters sit inside .table-responsive (overflow:auto), which
   would clip an absolutely-positioned menu. */
@media (max-width: 767.98px) {
  .teg-actions-overflow {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    margin-top: 0.25rem;
  }
  .teg-actions-overflow[hidden] { display: none; }
  .teg-actions-overflow > .btn,
  .teg-actions-overflow > form > .btn { width: 100%; }
  .teg-actions-overflow > form { width: 100%; }
  .teg-actions-more { flex: 0 0 auto; }
}