/* TLC Always Moving - staff header and footer (shared by every staff page).
   Both are drawn by staff-nav.js. A yellow and violet hazard stripe plus a "Staff only"
   badge mark this whole area as the back office, so it is never mistaken for the customer site. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600&display=swap');

.staff-header, .staff-footer{
  --sx-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --sx-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sx-violet: #7c3aed; --sx-deep: #34166b; --sx-hivis: #ffd60a; --sx-hivis-ink: #2a1d00;
  --sx-ink: #1e1236; --sx-dim: #54476f; --sx-line: #ddd2f1; --sx-bg: #fbf9ff; --sx-panel: #ffffff; --sx-panel2: #f6f1fd;
}
html[data-theme="dark"] .staff-header, html[data-theme="dark"] .staff-footer{
  --sx-ink: #efe8ff; --sx-dim: #b5a6d6; --sx-line: #35294f; --sx-bg: #120c1d; --sx-panel: #1b1230; --sx-panel2: #22173a;
}

/* ---------- Header ---------- */
.staff-header{
  margin: 0 -24px 24px; position: relative; z-index: 40;
  background: var(--sx-bg); border-bottom: 1px solid var(--sx-line);
  font-family: var(--sx-body); font-size: 16px; line-height: 1.4; color: var(--sx-ink);
}
.staff-header *{ box-sizing: border-box; }
.staff-header .sh-hazard{ height: 7px; background: repeating-linear-gradient(-45deg, #ffd60a 0 14px, #1d0f3d 14px 28px); }
.staff-header .sh-in{ width: min(1380px, 100% - 28px); margin-inline: auto; display: flex; align-items: center; gap: 18px; min-height: 62px; }
.staff-header .sh-brand{ font-family: var(--sx-display); font-weight: 700; font-size: 24px; color: var(--sx-ink); text-decoration: none; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.staff-header .sh-mark{ min-width: 34px; height: 34px; padding: 0 6px; border-radius: 8px; background: var(--sx-deep); color: #fff; display: grid; place-items: center; font-size: 18px; letter-spacing: .02em; flex: none; }
html[data-theme="dark"] .staff-header .sh-mark{ background: var(--sx-violet); color: #120c1d; }
.staff-header .sh-badge{ background: var(--sx-hivis); color: var(--sx-hivis-ink); font-weight: 700; font-size: 13px; line-height: 1; padding: 6px 10px; border-radius: 999px; white-space: nowrap; }
.staff-header .sh-nav{ display: flex; align-items: center; gap: 20px; margin-left: 8px; }
.staff-header .sh-nav > a, .staff-header .sh-dd > summary{ color: var(--sx-dim); text-decoration: none; font-weight: 500; font-size: 16px; padding: 4px 0; border-bottom: 3px solid transparent; cursor: pointer; list-style: none; background: none; border-top: 0; border-left: 0; border-right: 0; font-family: var(--sx-body); }
.staff-header .sh-dd > summary::-webkit-details-marker{ display: none; }
.staff-header .sh-dd > summary::after{ content: "\25BE"; font-size: 12px; margin-left: 5px; }
.staff-header .sh-nav > a:hover, .staff-header .sh-dd > summary:hover, .staff-header .sh-dd[open] > summary{ color: var(--sx-ink); }
.staff-header .sh-nav > a[aria-current="page"], .staff-header .sh-dd.here > summary{ color: var(--sx-ink); border-bottom-color: var(--sx-hivis); }
.staff-header .sh-dd{ position: relative; }
.staff-header .sh-dd-panel, .staff-header .sh-panel{ position: absolute; top: 40px; left: -12px; min-width: 230px; background: var(--sx-bg); border: 1px solid var(--sx-line); border-radius: 10px; padding: 8px; box-shadow: 0 16px 40px -18px rgba(30,18,54,.45); z-index: 60; }
.staff-header .sh-dd-panel a, .staff-header .sh-panel a{ display: block; padding: 10px 12px; border-radius: 6px; color: var(--sx-ink); text-decoration: none; font-weight: 500; font-size: 16px; }
.staff-header .sh-dd-panel a:hover, .staff-header .sh-panel a:hover{ background: var(--sx-panel2); }
.staff-header .sh-dd-panel a[aria-current="page"], .staff-header .sh-panel a[aria-current="page"]{ background: var(--sx-panel2); box-shadow: inset 3px 0 0 var(--sx-hivis); }
.staff-header .sh-panel .sh-group{ font-size: 13px; font-weight: 600; color: var(--sx-dim); padding: 10px 12px 4px; }
.staff-header .sh-actions{ margin-left: auto; display: flex; align-items: center; gap: 10px; }
.staff-header .sh-user{ font-size: 14px; color: var(--sx-dim); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-header .sh-out{ background: var(--sx-deep); color: #fff; font-family: var(--sx-body); font-weight: 600; font-size: 15px; line-height: 1; padding: 11px 16px; border-radius: 8px; border: 0; cursor: pointer; }
html[data-theme="dark"] .staff-header .sh-out{ background: var(--sx-violet); color: #120c1d; }
.staff-header .theme-toggle{ width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--sx-line); background: transparent; color: var(--sx-ink); cursor: pointer; font-size: 18px; display: grid; place-items: center; padding: 0; flex: none; }
.staff-header .theme-toggle:hover{ border-color: var(--sx-violet); }
.staff-header .sh-menu{ display: none; position: relative; }
.staff-header .sh-menu summary{ list-style: none; cursor: pointer; width: 40px; height: 40px; border: 1px solid var(--sx-line); border-radius: 8px; display: grid; place-items: center; font-size: 20px; color: var(--sx-ink); }
.staff-header .sh-menu summary::-webkit-details-marker{ display: none; }
.staff-header .sh-panel{ left: auto; right: 0; top: 48px; width: 250px; }
.staff-header :focus-visible{ outline: 3px solid var(--sx-hivis); outline-offset: 2px; }
@media (max-width: 980px){
  .staff-header .sh-nav, .staff-header .sh-user, .staff-header .sh-out{ display: none; }
  .staff-header .sh-menu{ display: block; }
  .staff-header .sh-in{ gap: 12px; }
}
@media (max-width: 420px){ .staff-header .sh-brand{ font-size: 21px; } .staff-header .sh-badge{ font-size: 12px; padding: 5px 8px; } }
.staff-header .sh-menu-out{ display: none; }
@media (max-width: 980px){ .staff-header .sh-menu-out{ display: block; } }
.staff-header .sh-panel button.sh-panel-out{ display: block; width: 100%; text-align: left; margin-top: 6px; padding: 10px 12px; border: 0; border-top: 1px solid var(--sx-line); border-radius: 0 0 6px 6px; background: none; color: var(--sx-ink); font-family: var(--sx-body); font-weight: 600; font-size: 16px; cursor: pointer; }
.staff-header .sh-panel .sh-who{ padding: 8px 12px 2px; font-size: 13px; color: var(--sx-dim); overflow: hidden; text-overflow: ellipsis; }

/* ---------- Footer ---------- */
.staff-footer{ margin: 40px -24px -24px; background: #120c1d; color: #bfb1dd; font-family: var(--sx-body); font-size: 15px; line-height: 1.6; flex: none; }
.staff-footer .sh-hazard{ height: 7px; background: repeating-linear-gradient(-45deg, #ffd60a 0 14px, #1d0f3d 14px 28px); }
.staff-footer .sf-in{ width: min(1380px, 100% - 28px); margin-inline: auto; padding-block: 18px 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.staff-footer strong{ color: #fff; font-family: var(--sx-display); font-size: 20px; font-weight: 700; margin-right: 10px; }
.staff-footer a, .staff-footer button.sf-link{ color: #d8cbf7; text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.staff-footer a:hover, .staff-footer button.sf-link:hover{ text-decoration: underline; }
.staff-footer .sf-links{ display: flex; flex-wrap: wrap; gap: 6px 20px; }
@media print{ .staff-header, .staff-footer{ display: none !important; } }
.staff-header.flush{ margin: 0; }
@media (max-width: 520px){ .staff-header .sh-name{ display: none; } }

/* =====================================================================
   Page look: same palette, type and surfaces as the customer site.
   Loaded last, so it re-skins each staff page's own styles without changing how they work.
   ===================================================================== */
:root{
  --display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --violet: #7c3aed; --violet-deep: #34166b; --hivis: #ffd60a;
  --ink: #1e1236; --ink-dim: #54476f;
  --line: #ddd2f1; --field-line: #cdbfe8; --card-line: #ddd2f1;
  --app-bg: #fbf9ff; --bg: #fbf9ff; --panel: #ffffff; --panel-2: #f6f1fd;
  --amber: #34166b;
  --card-shadow: 0 1px 2px rgba(30,18,54,.05), 0 16px 32px -22px rgba(30,18,54,.3);
  --focus-ring: 0 0 0 3px rgba(255,214,10,.7);
}
html:root[data-theme="dark"]{
  --ink: #efe8ff; --ink-dim: #b5a6d6;
  --line: #35294f; --field-line: #4b3b70; --card-line: #35294f;
  --app-bg: #120c1d; --bg: #120c1d; --panel: #1b1230; --panel-2: #22173a;
  --amber: #a78bfa;
  --card-shadow: 0 1px 2px rgba(0,0,0,.45), 0 16px 32px -22px rgba(0,0,0,.8);
  --focus-ring: 0 0 0 3px rgba(255,214,10,.55);
}
html{ scroll-behavior: smooth; }
body{
  padding-top: 0;
  background-color: var(--app-bg) !important; background-image: none !important;
  color: var(--ink);
  line-height: 1.5; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums;
  display: flex; flex-direction: column; min-height: 100vh;
}
body > .wrap{ flex: 1 0 auto; width: 100%; }
:focus-visible{ outline: 3px solid var(--hivis); outline-offset: 2px; }

/* Type: one family, condensed for titles */
body :not(.staff-header, .staff-header *, .staff-footer, .staff-footer *, svg, svg *, canvas),
body :not(.staff-header, .staff-header *, .staff-footer, .staff-footer *)::before,
body :not(.staff-header, .staff-header *, .staff-footer, .staff-footer *)::after{
  font-family: var(--body) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
:is(h1, h2, h3, .masthead h1, .section-title, .card-title, .detail-booking-id, .detail-quote-id, .detail-section-title, .detail-total,
    .run-title, .sg-title, .dr-id, .menu-link, .hub-btn, .section-head h2, .sc-title):not(.staff-header *, .staff-footer *){
  font-family: var(--display) !important;
}
:is(button, select, .tab, .pg-tab){ font-weight: 600; }

/* The staff header now carries the menu link, theme toggle and log out */
.masthead .home-link, .masthead #theme-toggle, #loggedInAs, #logoutBtn{ display: none !important; }

/* Page title */
.masthead{ border-bottom: 2px solid var(--ink) !important; padding: 0 0 14px !important; margin: 0 0 24px !important; align-items: flex-end !important; flex-wrap: wrap; gap: 10px 20px !important; }
.masthead h1{ font-weight: 700; font-size: clamp(32px, 4.4vw, 46px) !important; line-height: 1 !important; margin: 0; color: var(--ink); }
.masthead-sub{ color: var(--ink-dim); font-size: 15px; max-width: 70ch; margin-top: 8px; }

/* Surfaces */
:is(.card, .panel, .list-panel, .detail-panel, .detail-box, .center-card, .left-panel, .dialog, .modal-box, .drawer){
  border-color: var(--card-line) !important; border-radius: 12px !important;
}
:is(.card, .panel, .detail-panel, .detail-box, .center-card, .left-panel){ box-shadow: var(--card-shadow); }
.section-title{ font-weight: 700; font-size: 24px; line-height: 1.1; color: var(--ink); }

/* Fields */
input:not([type="checkbox"]):not([type="radio"]), select, textarea{
  border: 1.5px solid var(--field-line) !important; border-radius: 8px !important; color: var(--ink);
}
input::placeholder, textarea::placeholder{ color: var(--ink-dim); opacity: .7; }
input:focus, select:focus, textarea:focus{ outline: none !important; border-color: var(--violet-deep) !important; box-shadow: var(--focus-ring) !important; }
html[data-theme="dark"] :is(input, select, textarea):focus{ border-color: var(--violet) !important; }

/* Buttons */
button.action-btn, a.action-btn{ border-radius: 8px !important; font-weight: 600; }
button.action-btn:not(.secondary):not(.danger-btn):not(:disabled), a.action-btn:not(.secondary){
  background: var(--violet-deep); color: #fff; border: 2px solid transparent;
}
html[data-theme="dark"] :is(button.action-btn:not(.secondary):not(.danger-btn):not(:disabled), a.action-btn:not(.secondary)){
  background: var(--violet); color: #120c1d;
}
button.action-btn.secondary, a.action-btn.secondary{ border-color: var(--field-line) !important; color: var(--ink) !important; }
button:disabled{ cursor: not-allowed; }

/* Active tabs: readable text in both themes */
html[data-theme="dark"] :is(.seg-btn.active, .toggle button.active){ color: #120c1d !important; }

/* Menu pages: wider, left aligned cards */
.menu-link{ border: 1.5px solid var(--card-line) !important; border-radius: 12px !important; background: var(--panel) !important; box-shadow: var(--card-shadow); font-size: 28px !important; font-weight: 700 !important; }
.menu-link:hover{ border-color: var(--violet) !important; }
.menu-link .sub{ font-size: 15px !important; font-weight: 400 !important; color: var(--ink-dim) !important; margin-top: 4px !important; line-height: 1.45; }
body > .wrap:has(.menu-link){ max-width: 760px !important; margin-top: 8px !important; }
body > .wrap:has(#loginBtn){ max-width: 520px !important; margin-top: 8px !important; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }
@media (max-width: 640px){ .masthead{ align-items: flex-start !important; flex-direction: column !important; } }
@media (max-width: 520px){ .menu-link{ font-size: 24px !important; } }
/* Settings > Customer keys: let the two columns shrink on phones (they had a 420px minimum) */
@media (max-width: 520px){ #pg-keys .two-col .list-col, #pg-keys .two-col .edit-col{ min-width: 0 !important; } }