@font-face {
  font-family: 'Geologica';
  src: url('/assets/geologica-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
body, button, input, select, textarea {
  font-family: 'Geologica', system-ui, sans-serif;
}
.brand-icon { object-fit: contain; }
.mobileLogo { width: 46px; height: 46px; object-fit: contain; flex: none; }
.authLogo { display: block; width: 80px; height: 80px; margin-bottom: 18px; object-fit: contain; }

/* SUPSUP Operator: approved six-color brand palette. */
:root {
  --navy: #001A33;
  --ink: #001A33;
  --turq: #31FCDE;
  --lime: #E8FA97;
  --coral: #FB795F;
  --mint: #DAF9EB;
  --paper: #F8F8F1;
  --light: #DAF9EB;
  --muted: #001A33;
  --stroke: #DAF9EB;
  --white: #F8F8F1;
}
body, .topbar, .mobileNav, dialog, .modalBody,
.stat, .boardCard, .panel, .fleetTile, .locker, .settingCard,
.quietBtn, .fieldSearch, .filterBtn,
.inputLabel input, .inputLabel select, .inputLabel textarea {
  background: var(--paper);
  color: var(--navy);
}
.sidebar, .hero, .dialogTop { background: var(--navy); color: var(--paper); }
.brandtype, .brand-sub, .sideCap, .sideVersion, .sideInfo b, .sideInfo p,
.navBtn, .hero p, .hero .small, .dialogTop .eyebrow { color: var(--paper); }
.sideInfo { background: transparent; border-color: var(--turq); }
.navBtn:hover, .navBtn.active { background: var(--turq); color: var(--navy); }
.navBtn.active:before { background: var(--navy); }
.hero:before { background: var(--turq); opacity: .15; }
.hero:after { border-color: var(--turq); opacity: .2; }
.todayPill, .dataTable th, .dataTable tr:hover td,
.rentAvatar, .statIcon, .darknotice, .returnBtn, .badge.free,
.quietBtn:hover, .lockerDoor { background: var(--mint); color: var(--navy); }
.actionPrimary { background: var(--navy); color: var(--paper); }
.actionPrimary:hover, .dialogAction, .mobileNav button.active {
  background: var(--turq); color: var(--navy);
}
.dialogAction:hover { background: var(--mint); }
.actionPrimary.lime, .actionPrimary.lime:hover, .badge.active,
.stat.limeStat .statIcon, .lockerDoor.busy { background: var(--lime); color: var(--navy); }
.badge.late, .stat.orange .statIcon, .outlineDanger { background: var(--coral); color: var(--navy); }
.badge.maintenance { background: var(--navy); color: var(--paper); }
.promo { background: var(--mint); border-color: var(--mint); }
.promo .tag, .filterBtn.selected { background: var(--navy); color: var(--paper); }
.eyebrow, .stat .label, .stat .hint, .boardBottom .sub, .rentMain span,
.rentRight small, .promo p, .empty, .filterBtn, .linkLike, .fleetTile p,
.lockerText, .lockerDoor span, .barCol small, .legendRow, .settingCard p,
.inputLabel, .priceSmall, .checkLabel, .formError, .detailLine span,
.mobileNav button, .dataTable th { color: var(--navy); }
.barFill, .boardArt .miniBoard, .fleetArt .miniBoard {
  background: linear-gradient(155deg, var(--lime) 0% 22%, var(--paper) 22% 40%, var(--turq) 40% 75%, var(--mint) 75%);
  border-color: var(--mint);
}
.barFill { background: var(--turq); }
.boardArt .miniBoard.junior {
  background: linear-gradient(155deg, var(--lime) 0% 22%, var(--paper) 22% 40%, var(--coral) 40% 75%, var(--mint) 75%);
}
.boardArt .miniBoard.duo2 {
  background: linear-gradient(155deg, var(--mint) 0% 22%, var(--paper) 22% 40%, var(--navy) 40% 75%, var(--lime) 75%);
}
.boardArt .miniBoard:after { color: var(--navy); }
.returnBtn, .returnBtn:hover, .lockerDoor, .lockerDoor.busy,
.quietBtn:hover, .boardCard:hover, .outlineDanger { border-color: var(--turq); }
.returnBtn:hover { background: var(--turq); }
.lockerDoor:after { background: var(--navy); }
.pulse { background: var(--turq); box-shadow: 0 0 0 4px var(--mint); }
.splitBar { background: var(--mint); }
.checkLabel input { accent-color: var(--navy); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--turq); }
#cloudStatus { background: var(--mint) !important; color: var(--navy); }
.rentRight strong { color: var(--navy) !important; }
.rentRight strong.isLate { background: var(--coral); border-radius: 6px; padding: 3px 6px; }



/* Supplied board illustrations: preserve the full image and its proportions. */
.boardArt { height: 190px; }
.fleetArt { height: 230px; }
.boardImage { display: block; height: 100%; width: 100%; object-fit: contain; }
@media (max-width: 560px) {
  .boardArt { height: 160px; }
  .fleetArt { height: 210px; }
}

/* Login: labels stay above fields at every screen width. */
#auth { width: calc(100% - 32px); box-sizing: border-box; }
#auth h1 { line-height: 1.2; overflow-wrap: anywhere; }
#login { display: grid; gap: 20px; }
#login label { display: grid; gap: 8px; min-width: 0; font-weight: 600; line-height: 1.4; }
#login .fieldSearch { display: block; width: 100%; min-width: 0; height: 48px; padding: 10px 13px; }
#login .actionPrimary { width: 100%; margin-top: 4px; }

.rentalActions { display: grid; gap: 6px; flex: none; }
.rentalActions .quietBtn, .rentalActions .returnBtn { font-size: 11px; min-height: 32px; padding: 7px 10px; width: auto; margin: 0; }
#extensionForm > .inputLabel { margin-top: 18px; }
#extensionQuote { margin: 16px 0; }
#extensionQuote .detailLine { flex-wrap: wrap; }
.extensionHistory { margin-top: 20px; }
.extensionHistory h3 { font-size: 16px; }
.extensionEntry { display: grid; gap: 6px; border-top: 1px solid var(--mint); padding: 12px 0; font-size: 12px; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .rentRow > .rentalActions { margin-left: 45px; flex: 1 0 calc(100% - 45px); grid-template-columns: 1fr 1fr; }
}

.badge.cancelled { background: var(--coral); color: var(--navy); }
.cancellationHistory { background: var(--mint); border-left: 4px solid var(--coral); border-radius: 12px; padding: 14px; margin-top: 20px; overflow-wrap: anywhere; font-size: 12px; }
.cancellationHistory h3 { margin-top: 0; }
#cancellationForm > .inputLabel { margin-top: 16px; }
#cancellationQuote { margin: 16px 0; }
#cancellationQuote .detailLine { flex-wrap: wrap; }
.rentalActions .outlineDanger { font-size: 11px; padding: 7px 10px; min-height: 32px; }
#cancellationForm .dialogAction { background: var(--coral); color: var(--navy); }

#refundForm > .inputLabel { margin-top: 16px; }
#refundQuote { margin: 16px 0; }
#refundQuote .detailLine { flex-wrap: wrap; }
#refundFullAmount { margin-top: 10px; }
#refundAfter { margin-top: 14px; font-size: 13px; line-height: 1.5; }
.refundHistory { margin-top: 20px; border-left: 4px solid var(--coral); padding-left: 14px; }
.refundHistory h3 { font-size: 16px; }
#refundForm .dialogAction { background: var(--coral); color: var(--navy); }

.shiftInfo { padding: 12px 22px; font-size: 12px; overflow-wrap: anywhere; }
.shiftTotals { min-width: 0; }
.shiftTotals th, .shiftTotals td { white-space: normal; }
#openShiftForm > .inputLabel, #closeShiftForm > .inputLabel { margin-top: 16px; }
#shiftCloseQuote { margin-bottom: 18px; }
#shiftCloseQuote .detailLine { flex-wrap: wrap; }
#shiftDifference { margin-top: 16px; line-height: 1.5; font-size: 13px; }
@media (max-width: 830px) {
  .mobileNav span { max-width: 100%; overflow-wrap: anywhere; line-height: 1.15; }
}
@media (max-width: 560px) {
  .shiftTotals th, .shiftTotals td { padding: 10px 8px; font-size: 11px; }
}

/* Shift page: separate the title, status/action, guidance and archive note. */
.shiftLead { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 32px; margin-bottom: 20px; border-radius: 22px; background: var(--navy); color: var(--paper); }
.shiftKicker { display: inline-block; margin-bottom: 13px; color: var(--turq); font-size: 10px; font-weight: 700; letter-spacing: 2px; }
.shiftLead h2 { margin: 0 0 10px; max-width: 680px; font-size: clamp(25px, 2.6vw, 34px); font-weight: 800; line-height: 1.16; letter-spacing: -.8px; }
.shiftLead p { margin: 0; max-width: 590px; color: var(--mint); font-size: 13px; font-weight: 400; line-height: 1.65; }
.shiftLeadArt { width: 155px; flex: 0 0 155px; color: var(--turq); }
.shiftLeadArt svg { display: block; width: 100%; }
.shiftReady { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 26px 28px; border-radius: 20px; background: var(--mint); }
.shiftReadyCopy { max-width: 640px; }
.shiftStatus { display: inline-flex; align-items: center; background: var(--turq); color: var(--navy); border-radius: 99px; padding: 6px 10px; font-size: 10px; font-weight: 650; }
.shiftStatusClosed { background: var(--paper); }
.shiftReady h3, .shiftCurrentHead h3 { margin: 12px 0 8px; font-size: 22px; line-height: 1.25; font-weight: 750; letter-spacing: -.4px; }
.shiftReady p { margin: 0; color: var(--navy); font-size: 13px; line-height: 1.6; font-weight: 400; }
.shiftAvailability { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 11px; font-weight: 550; }
.shiftAvailability svg { width: 16px; height: 16px; }
.shiftReady > .actionPrimary { flex: none; white-space: nowrap; }
.shiftCurrentHead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; padding: 24px; background: var(--mint); }
.shiftCurrentHead h3 { margin-bottom: 0; }
.shiftMeta { display: grid; grid-template-columns: 1fr 1.5fr .65fr; gap: 20px; padding: 20px 24px; margin: 0; }
.shiftMeta dt { margin-bottom: 7px; font-size: 10px; font-weight: 450; }
.shiftMeta dd { margin: 0; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.shiftImportHint { margin: 0 24px 18px; font-size: 11px; font-weight: 400; line-height: 1.5; }
.shiftGuides { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin: 22px 0; }
.shiftGuides article { padding: 20px; border: 1px solid var(--mint); border-radius: 16px; }
.shiftGuideNumber { font-size: 10px; font-weight: 800; background: var(--lime); border-radius: 7px; display: inline-flex; padding: 5px 7px; margin-bottom: 12px; }
.shiftGuides h3 { font-size: 13px; font-weight: 650; margin: 0 0 7px; }
.shiftGuides p { font-size: 11px; font-weight: 400; line-height: 1.65; margin: 0; }
.shiftArchive { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; border-top: 1px solid var(--mint); }
.shiftArchiveCount { display: grid; place-items: center; flex: 0 0 32px; min-height: 32px; border-radius: 9px; background: var(--mint); font-size: 12px; font-weight: 750; }
.shiftArchive b { font-size: 11px; font-weight: 600; }
.shiftArchive p { font-size: 11px; font-weight: 400; margin: 5px 0 0; line-height: 1.6; }
@media (max-width: 830px) {
  .shiftLead { padding: 24px; }
  .shiftLeadArt { width: 100px; flex-basis: 100px; }
  .shiftReady { align-items: flex-start; flex-direction: column; gap: 18px; padding: 24px; }
  .shiftReady > .actionPrimary { width: 100%; }
}
@media (max-width: 560px) {
  .shiftLead { padding: 23px 20px; gap: 12px; }
  .shiftLead h2 { font-size: 25px; }
  .shiftLeadArt { display: none; }
  .shiftReady { padding: 22px 20px; }
  .shiftReady h3 { font-size: 21px; }
  .shiftGuides { grid-template-columns: 1fr; gap: 10px; }
  .shiftGuides article { padding: 16px; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; align-items: start; }
  .shiftGuideNumber { grid-row: 1 / 3; margin-bottom: 0; }
  .shiftGuides h3 { margin-top: 2px; }
  .shiftMeta { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .shiftCurrentHead { padding: 20px; }
}

.reportForm { padding: 22px; border: 1px solid var(--mint); border-radius: 18px; }
.reportFilterRow { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.reportFilterRow > .inputLabel { min-width: 155px; }
#reportControls { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px; flex: 1; }
#reportControls .inputLabel { flex: 1; min-width: 155px; }
#reportControls .reportYear { flex: .6; min-width: 110px; }
.reportSeasonHint { flex-basis: 100%; margin: 0; font-size: 11px; line-height: 1.5; }
.reportPending { font-size: 12px; margin: 14px 0 0; }
.reportForm .formError:empty { display: none; }
.reportPeriod h2 { font-size: 20px; }
.reportPeriod .btnRow { margin-top: 0; }
.reportStats .num { font-size: 27px; }
.reportBasis { margin: 20px 0; padding: 16px 18px; background: var(--mint); border-radius: 14px; font-size: 12px; line-height: 1.65; }
.reportBasis summary { cursor: pointer; font-weight: 650; }
.reportBasis p { margin-bottom: 0; }
.reportChart { overflow-x: auto; }
.reportChart .barCol { min-width: 22px; }
.reportChart .barCol strong { font-size: 9px; white-space: nowrap; }
.reportChart .barCol small { white-space: nowrap; }
.reportEmpty { margin-bottom: 20px; }
@media (max-width: 560px) {
  .reportForm { padding: 18px; }
  .reportFilterRow, #reportControls { display: grid; grid-template-columns: 1fr; width: 100%; }
  .reportFilterRow > .actionPrimary { width: 100%; }
  .reportPeriod { align-items: flex-start; flex-direction: column; }
  .reportPeriod h2 { font-size: 19px; }
  .reportPeriod .btnRow { width: 100%; }
  .reportPeriod .quietBtn { flex: 1; }
  .reportStats .num { font-size: 23px; }
}
.reportChart .barCol { flex: 0 0 56px; max-width: 56px; }
.reportChart .barCol strong { display: block; max-width: 56px; overflow: hidden; text-overflow: ellipsis; }
/* Language and account controls follow the navigation, with one shared DOM instance. */
.accountTools{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0;margin:0 0 24px;}
.languageSwitch{display:flex;align-items:center;gap:3px;padding:4px;border:1px solid #DAF9EB;border-radius:12px;}
.languageSwitch button{border:0;background:transparent;border-radius:8px;padding:9px 10px;color:#001A33;font:inherit;font-size:12px;letter-spacing:.04em;font-weight:700;min-width:39px;cursor:pointer;}
.languageSwitch button[aria-pressed=true]{background:#DAF9EB;color:#001A33;}
.languageSwitch button:focus-visible,.logoutBtn:focus-visible{outline:3px solid #31FCDE;outline-offset:3px;}
.logoutBtn{border:0;border-radius:12px;background:#FB795F;color:#001A33;font:inherit;font-size:13px;font-weight:750;padding:12px 16px;cursor:pointer;}
.logoutBtn:hover{filter:brightness(.96);}
.logoutBtn[hidden]{display:none;}
.accountTools.inSidebar{margin:24px 0 18px;padding:18px 0 0;border-top:1px solid #ffffff22;flex-wrap:wrap;}
.inSidebar .languageSwitch{border-color:#ffffff33;}
.inSidebar .languageSwitch button{color:#F8F8F1;}
.inSidebar .languageSwitch button[aria-pressed=true]{color:#001A33;}
#auth>.accountTools{justify-content:flex-end;margin-bottom:22px;}
@media(max-width:830px){
 .topbar:has(.inMobileHeader){height:auto;min-height:76px;flex-wrap:wrap;padding-top:14px;padding-bottom:12px;}
 .accountTools.inMobileHeader{flex-basis:100%;margin:8px 0 0;padding-top:10px;border-top:1px solid #DAF9EB;}
 .inMobileHeader .logoutBtn{padding:10px 15px;}
 .inMobileHeader .languageSwitch button{padding:7px 10px;}
}