/* Frontend refresh. Existing field IDs and RPC contracts are preserved. */
:root {
  --red: #a62d3d;
  --red-dark: #842231;
  --red-soft: #f9edef;
  --ink: #292b30;
  --ink-2: #55565f;
  --muted: #74757d;
  --line: #e9e5e3;
  --paper: #f7f7f5;
  --shadow: 0 12px 40px #30252b08;
  --shadow-sm: 0 4px 16px #30252b04;
}
body { background:var(--paper); }
button { -webkit-tap-highlight-color:transparent; }
button, input, select, textarea { touch-action:manipulation; }
.hidden { display:none!important; }
.skipLink { position:fixed; left:20px; top:-80px; z-index:100; padding:12px 20px; background:white; color:var(--red); border:2px solid var(--red); border-radius:10px; }
.skipLink:focus { top:12px; }
.topbar { background:#fff; color:var(--ink); min-height:92px; display:flex; gap:24px; padding:14px max(28px,calc((100vw - 1240px)/2)); box-shadow:none; border-bottom:1px solid var(--line); }
.siteIdentity { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brandMark { display:block; width:48px; height:60px; object-fit:contain; flex-shrink:0; }
.topbarTitle { font-size:1.25rem; letter-spacing:-.6px; line-height:1.35; }
.topbarTitle>span { color:var(--red); font-weight:500; }
.topbarTitle small { color:var(--muted); font-size:.69rem; letter-spacing:0; margin-top:3px; }
.quickNav { display:flex; align-items:center; gap:5px; margin-inline:auto; }
.quickNav button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border:0; border-radius:10px; padding:10px 14px; background:transparent; color:var(--ink-2); cursor:pointer; font-size:.86rem; font-weight:500; white-space:nowrap; }
.quickNav button:hover { background:#f6f4f3; color:var(--red); }
.quickNav button.active { background:var(--red-soft); color:var(--red-dark); }
.headerAdmin { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:10px; background:white; color:var(--ink-2); font-size:.8rem; padding:10px 12px; min-height:44px; cursor:pointer; white-space:nowrap; }
.headerAdmin:hover { border-color:var(--red); color:var(--red); }
.topbar .menuToggle { display:none; }
.topbar button:focus-visible, .side button:focus-visible { outline-color:var(--red); }
.side { background:white; color:var(--ink); }
.side .brand small { color:var(--muted); }
.side .brand:before { background:var(--red-soft); color:var(--red); }
.side .brand:before { content:"SSTB"; font-size:.66rem; letter-spacing:0; box-shadow:none; }
.side .menuClose { background:white; color:var(--ink); border-color:var(--line); }
.side .nav button { color:var(--ink-2); }
.side .nav button:hover { background:#f6f4f3; }
.side .nav button.active { background:var(--red-soft); color:var(--red-dark); box-shadow:none; }
.side .nav .adminBtn { background:#f7f7f5!important; border-color:var(--line)!important; }
.main { max-width:1240px; padding:32px 28px 48px; min-height:calc(100dvh - 190px); }
.main:focus { outline:none; }
h1:focus { outline:none; }
.bookingHero { display:grid; grid-template-columns:1.2fr 1fr; min-height:340px; background:#f0eeea; border:1px solid #e8e3de; border-radius:24px; overflow:hidden; margin-bottom:38px; }
.heroCopy { padding:38px 44px; }
.eyebrow { display:flex; align-items:center; gap:9px; color:var(--red); font-size:.7rem; font-weight:600; letter-spacing:.09em; }
.eyebrowLine { width:22px; height:2px; background:var(--red); }
.bookingHero h1 { font-size:clamp(2rem,3.1vw,2.8rem); font-weight:600; line-height:1.36; letter-spacing:-.04em; color:var(--ink); margin:16px 0 14px; }
.bookingHero h1 span { color:var(--red); }
.bookingIntro { margin:0 0 20px; color:var(--ink-2); font-size:.89rem; line-height:1.85; }
.heroLink { display:inline-flex; align-items:center; gap:16px; background:none; border:0; border-bottom:1px solid #a62d3d55; padding:0 0 5px; color:var(--red-dark); cursor:pointer; font-weight:600; font-size:.85rem; }
.heroLink:hover { border-color:var(--red); }
.heroVisual { display:grid; place-items:center; position:relative; isolation:isolate; padding:38px; }
.visualOrbit { position:absolute; width:310px; height:310px; border:1px solid #d9c9c5; border-radius:50%; z-index:-1; }
.visualOrbit:before { content:""; position:absolute; inset:25px; border:1px dashed #d9c9c5; border-radius:50%; }
.visualOrbit:after { content:""; width:15px; height:15px; border:6px solid #f0eeea; background:var(--red); border-radius:50%; position:absolute; right:30px; top:24px; box-sizing:content-box; }
.visualCalendar { width:226px; transform:rotate(-6deg); background:white; border:1px solid #e6dcd7; border-radius:18px; box-shadow:12px 16px 0 #e0d9d280,0 18px 40px #543b3510; }
.visualCalendarTop { height:42px; border-radius:17px 17px 0 0; background:var(--red); display:flex; justify-content:space-between; padding:0 42px; }
.visualCalendarTop span { width:8px; height:27px; border-radius:6px; background:#e7d7cd; border:2px solid white; transform:translateY(-10px); }
.visualCalendarBody { padding:20px; text-align:center; }
.visualCalendarBody>i { display:block; color:var(--red); font-size:38px; margin:2px 0 10px; }
.visualCalendarBody>strong { display:block; font-size:.94rem; font-weight:600; }
.visualCalendarBody>span { color:var(--muted); font-size:.69rem; }
.visualDays { display:flex; gap:8px; margin:20px 0 3px; justify-content:center; }
.visualDays b { width:14px; height:14px; background:#f0eeea; border-radius:4px; }
.visualDays b:nth-child(4) { background:var(--red); }
.visualTag { position:absolute; bottom:43px; right:32px; display:flex; align-items:center; gap:8px; border:1px solid #e5dfd9; padding:10px 16px; border-radius:12px; background:#fff; font-size:.76rem; box-shadow:var(--shadow); transform:rotate(3deg); }
.visualTag i { color:#368066; }
.bookingFormHead { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 22px; }
.bookingFormHead h2 { padding:0; margin:4px 0 0; font-size:1.35rem; font-weight:600; }
.bookingFormHead h2:before { display:none; }
.formHint { font-size:.78rem; color:var(--muted); display:flex; align-items:center; gap:8px; }
#bookingForm { display:grid; grid-template-columns:minmax(0,1fr) 302px; column-gap:24px; align-items:start; }
#bookingForm>.bookingSection { grid-column:1; min-width:0; }
.card { border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm); }
.card:before { display:none; }
.bookingSection { padding:28px; margin-bottom:20px; }
.sectionHeading { gap:14px; align-items:center; padding-bottom:20px; border-bottom:1px solid #efedeb; margin-bottom:22px; }
.sectionNumber { flex-basis:38px; height:38px; border-radius:11px; background:var(--red-soft); color:var(--red); font-size:.9rem; }
.sectionHeading h2 { font-size:1.04rem; font-weight:600; }
.sectionHeading p { color:var(--muted); font-size:.76rem; margin-top:3px; }
.field { gap:7px; min-width:0; }
label { font-size:.82rem; }
input, select, textarea, .prefixTrigger, .pickerTrigger, .statusDateTrigger { background:#fff; border-color:#dedddf; border-radius:9px; font-size:.86rem; min-height:48px; }
.requesterNameFields { grid-template-columns:108px minmax(0,1fr); }
.prefixTrigger { padding:10px; }
textarea { min-height:100px; }
.grid { gap:18px 16px; }
.checks { gap:10px; }
.check { background:#fcfcfb; border-radius:10px; font-size:.82rem; padding:12px; }
.check:hover { transform:none; box-shadow:none; }
.check .qty { border-radius:7px; }
.equipmentHeading { font-size:.88rem; margin-top:22px; }
.uploadBox { background:#faf9f7; border-color:#d8ccca; border-radius:12px; padding:20px 16px; }
.uploadCopy strong { font-size:.85rem; }
.uploadCopy small { font-size:.72rem; }
.uploadAction { border-radius:8px; font-size:.74rem; }
#bookingForm>.bookingSummaryCard { grid-column:2; grid-row:1/4; position:sticky; top:116px; padding:24px; background:#fff; border-top:3px solid var(--red); }
.summaryLabel { display:flex; align-items:center; gap:8px; color:var(--red); font-size:.74rem; font-weight:600; }
.bookingSummaryCard h2 { font-size:1.08rem; margin:16px 0 12px; padding:0; }
.bookingSummaryCard h2:before { display:none; }
#bookingSummary { color:var(--ink-2); font-size:.83rem; line-height:1.85; padding:14px; background:#f7f7f5; border-radius:10px; }
#formSlotMessage:empty { display:none; }
#formSlotMessage { font-size:.8rem; }
.summaryDivider { height:1px; background:var(--line); margin:24px 0; }
.bookingSummaryCard h3 { font-size:.85rem; font-weight:600; margin:0 0 20px; }
.bookingJourney { list-style:none; padding:0; margin:0; }
.bookingJourney li { display:flex; gap:12px; position:relative; padding-bottom:23px; }
.bookingJourney li:not(:last-child):before { content:""; position:absolute; width:1px; background:#e5dddd; top:29px; bottom:5px; left:13px; }
.bookingJourney li>span { flex:0 0 27px; display:grid; place-items:center; height:27px; background:#f4f1ef; border:1px solid #e8e2de; color:var(--ink-2); border-radius:50%; font-size:.73rem; }
.bookingJourney li:first-child>span { background:var(--red-soft); color:var(--red); border-color:#eacdd2; }
.bookingJourney strong { display:block; font-size:.78rem; font-weight:500; margin:2px 0; }
.bookingJourney small { display:block; font-size:.7rem; line-height:1.75; color:var(--muted); }
.summaryStatusLink { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:9px; padding:11px 14px; width:100%; background:white; color:var(--red); font-size:.78rem; cursor:pointer; }
.summaryStatusLink:hover { background:var(--red-soft); }
.summaryNote { color:var(--muted); font-size:.7rem; line-height:1.85; margin:16px 0 0; }
.bookingFooter { grid-column:1; flex-direction:column; align-items:stretch; gap:12px; padding:0 0 10px; }
.bookingFooter p { font-size:.75rem; color:var(--muted); }
.bookingFooter .actions { justify-content:flex-end; gap:12px; }
.primary, .outline { border-radius:9px; min-height:46px; font-size:.85rem; }
.primary { box-shadow:0 4px 10px #a62d3d15; background:var(--red); }
.primary:hover { background:var(--red-dark); transform:none; }
.pageHero { align-items:center; padding:28px 0 30px; border-bottom:1px solid var(--line); margin-bottom:28px; gap:24px; }
.pageHero h1 { margin-top:12px; font-size:clamp(1.6rem,2.8vw,2.2rem); color:var(--ink); font-weight:600; }
.pageHero p { font-size:.87rem; color:var(--muted); margin:10px 0 0; }
.pageHeroIcon { display:grid; place-items:center; width:82px; height:82px; border-radius:24px; background:var(--red-soft); color:var(--red); font-size:32px; flex-shrink:0; }
.calendar { border-radius:12px; border-color:var(--line); }
.calendarDay { background:#fcfcfb; border-radius:8px; }
.calendarToolbar strong { color:var(--ink); }
.statusSearch { border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm); background:white; padding:26px; }
.adminPageHead { padding:12px 0 24px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.adminPageHead h1 { color:var(--ink); font-size:1.8rem; }
.adminWorkspaceNav { border-radius:14px; }
.siteFooter { display:flex; justify-content:space-between; align-items:center; gap:20px; max-width:1184px; margin:0 auto; padding:24px 0 30px; border-top:1px solid var(--line); font-size:.71rem; color:var(--muted); }
.siteFooter>span:first-child { font-size:.9rem; color:var(--ink); }
.siteFooter strong { color:var(--red); font-weight:500; }
.siteFooter .footerCredit { color:var(--ink-2); }
@media(min-width:901px) and (max-width:1120px) {
  .topbar { gap:12px; padding-inline:24px; }
  .quickNav button { padding-inline:10px; font-size:.79rem; }
  .headerAdmin { font-size:.74rem; }
}
@media(max-width:900px) {
  .topbar { display:grid; grid-template-columns:1fr auto; gap:14px 12px; min-height:unset; padding:16px 24px 0; }
  .siteIdentity { grid-column:1; grid-row:1; }
  .topbar .menuToggle { display:flex; grid-column:2; grid-row:1; color:var(--ink); background:white; border-color:var(--line); min-height:40px; padding:8px 12px; }
  .headerAdmin { display:none; }
  .quickNav { grid-row:2; grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:6px; padding-bottom:12px; }
  .quickNav button { font-size:.8rem; padding:10px 6px; }
  .main { padding:24px; }
  .heroCopy { padding:30px; }
  .heroVisual { padding:30px 16px; }
  .visualOrbit { width:240px; height:240px; }
  .visualCalendar { width:200px; }
  .visualTag { right:5px; bottom:33px; font-size:.68rem; }
  #bookingForm { grid-template-columns:minmax(0,1fr) 260px; gap:0 18px; }
  .bookingSection { padding:22px; }
  #bookingForm>.bookingSummaryCard { padding:20px; top:155px; }
  #bookingForm .grid, #bookingForm .checks { grid-template-columns:1fr; }
  .siteFooter { margin-inline:24px; }
}
@media(max-width:700px) {
  .topbar { padding:12px 16px 0; gap:12px; }
  .brandMark { width:40px; height:50px; }
  .siteIdentity { gap:10px; }
  .topbarTitle { font-size:1.12rem; }
  .topbarTitle small { font-size:.63rem; }
  .menuToggle span { display:none; }
  .quickNav { gap:3px; padding-bottom:10px; }
  .quickNav button { gap:6px; font-size:.74rem; padding-inline:4px; }
  .main { padding:20px 16px 30px; }
  .bookingHero { min-height:unset; grid-template-columns:1fr; border-radius:18px; margin-bottom:28px; }
  .heroCopy { padding:28px 24px; }
  .bookingHero h1 { font-size:2rem; margin:14px 0; }
  .bookingIntro { font-size:.82rem; }
  .heroVisual { display:none; }
  .bookingFormHead { align-items:flex-start; flex-direction:column; gap:8px; margin-bottom:18px; }
  .bookingFormHead h2 { font-size:1.18rem; }
  .formHint { font-size:.72rem; }
  #bookingForm { display:block; }
  #bookingForm>.bookingSummaryCard { position:static; }
  .bookingSection { padding:20px; border-radius:14px; margin-bottom:16px; }
  .sectionHeading { gap:10px; padding-bottom:16px; margin-bottom:18px; }
  .sectionHeading p { font-size:.72rem; }
  .sectionHeading h2 { font-size:.95rem; }
  .sectionNumber { flex-basis:34px; height:34px; }
  .grid { gap:16px; }
  .bookingFooter .actions { flex-direction:row; }
  .bookingFooter .actions .outline { width:auto; flex-shrink:0; }
  .bookingFooter .actions .primary { flex:1; }
  .bookingJourney { display:none; }
  .bookingSummaryCard h3 { display:none; }
  .summaryDivider { margin:18px 0; }
  .pageHero { padding:12px 0 24px; }
  .pageHeroIcon { display:none; }
  .pageHero p { font-size:.8rem; }
  .statusSearch { padding:20px; }
  .siteFooter { flex-direction:column; align-items:flex-start; gap:6px; margin:0 16px; padding:20px 0 24px; font-size:.65rem; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *:before, *:after { animation:none!important; transition:none!important; }
}