/* GTW operations — shared visual system for the live application. */
:root {
  --ink: #18382c;
  --muted: #67786e;
  --line: #dfe7df;
  --green: #a4d34f;
  --surface: #fff;
  --wash: #f1f5ee;
  --shadow: 0 3px 12px #18382c05;
  color: var(--ink);
  background: #f3f5f1;
}
body { line-height: 1.5; }
button, input, select, textarea { accent-color: #609127; }
button { transition: background-color .15s, border-color .15s, box-shadow .15s; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #78a63a; outline-offset: 3px;
}
button:disabled { cursor: not-allowed; }
h1, h2, h3 { color: var(--ink); }
h1 { font-size: 30px; letter-spacing: -.9px; line-height: 1.18; }
h2 { letter-spacing: -.3px; }
.sub { line-height: 1.55; max-width: 640px; }
.primary, .secondary { min-height: 44px; border-radius: 11px; font-size: 13px; }
.primary { background: var(--ink); border-color: var(--ink); box-shadow: 0 2px 3px #18382c0a; }
.primary:hover:not(:disabled) { background: #294d3a; border-color: #294d3a; }
.secondary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: #fff; font-weight: 600; }
.secondary:hover:not(:disabled) { background: #f1f6e9; border-color: #b8ce9c; }
.secondary.danger { color: #ab493c; }
.secondary.danger:hover { border-color: #dfb3aa; background: #fcf1ed; }
.wide { width: 100%; }
.main { padding: 24px 34px 60px; max-width: 1510px; }
.top { min-height: 48px; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.breadcrumb { font-size: 12px; }
.account { color: var(--muted); }
.account .avatar { color: var(--ink); background: #e5efcf; border-radius: 9px; }
.heading { align-items: center; gap: 16px; margin-bottom: 22px; }
.heading>div:first-child { flex: 1; min-width: 0; }
.heading h1 { margin-bottom: 7px; }
.heading .sub { font-size: 13px; }
.heading>.primary, .heading-actions { flex-shrink: 0; }
.heading .secondary { font-size: 12px; }
.sidebar { background: #15372b; overflow-y: auto; padding: 24px 16px; scrollbar-width: thin; scrollbar-color: #4b6452 transparent; }
.sidebar>* { flex-shrink: 0; }
.sidebar .brand-logo { border-radius: 12px; padding: 12px; width: 194px; }
.sidebar .brand-caption { color: #bbcfac; font-size: 9px; letter-spacing: 2.5px; margin-top: 2px; }
.sidecaption { margin: 27px 12px 10px; color: #9eb592; }
.sideitem { padding: 10px 12px; margin: 2px 0; border-radius: 9px; min-height: 43px; }
.sideitem:hover { background: #294b3b; color: #fff; }
.sideitem.active { background: #a7d451; color: #173626; box-shadow: inset 3px 0 #d8f0a5; }
.sidefoot { margin-top: 30px; color: #b6c7b8; border-color: #345440; }
.brand.mobilebrand { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; }
.brand-caption { font-family: inherit; }
/* Filters are one recognisable area, distinct from results and actions. */
.filter-panel, .live-search { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 15px; margin-bottom: 20px; box-shadow: var(--shadow); }
.filter-panel-label, .section-kicker { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: #6a8059; margin-bottom: 13px; }
.filter-panel-label svg { width: 14px; height: 14px; }
.filter-panel .toolbar { margin-bottom: 14px; }
.filter-panel .assignment-searches { margin-bottom: 0; gap: 12px; }
.filter-panel .single-search { grid-template-columns: 1fr; }
.filter-panel .status-filters { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.segments { border: 1px solid #e1e8da; background: #f1f4ed; padding: 3px; border-radius: 10px; }
.segments button { color: #62705f; min-height: 38px; font-size: 12px; }
.segments button.active { background: #e2edc9; color: #294328; box-shadow: none; }
.day-filter { font-weight: 600; color: #52664e; }
.date, .search, .filter-label input, .filter-label select { border: 1px solid #d8e2d4; border-radius: 10px; background: #fbfcf9; }
.combo>label { font-size: 12px; margin-bottom: 6px; color: #445a43; }
.combo-input { border: 1px solid #d8e2d4; background: #fbfcf9 !important; border-radius: 10px; }
.combo-input:focus-within { outline: 2px solid #83ad46; outline-offset: 1px; }
.combo-input button { background: #f0f5e9; border-left: 1px solid #e0e8d8; color: #557338; }
.combo-input input { min-height: 46px; padding: 11px 12px !important; }
input::placeholder, textarea::placeholder { color: #889482; opacity: 1; }
.combo .staff-picker-results { border-color: #cfdcbc; border-radius: 10px; box-shadow: 0 12px 25px #15372b15; }
.combo .staff-option { border-bottom: 1px solid #eef2e9; }
.combo .staff-option:hover, .combo .staff-option[aria-selected=true] { background: #edf5dd; }
.filter-panel .month-search-link { margin-top: 12px; padding: 9px 0 0; font-size: 12px; font-weight: 600; color: #587c30; text-decoration: none; }
.tabs { padding: 3px; gap: 3px; background: #e8eee2; border: 0; border-radius: 11px; margin-bottom: 18px; }
.tabs button { border: 0; border-radius: 8px; min-height: 42px; padding: 9px 16px; font-size: 12px; white-space: nowrap; color: #607356; }
.tabs button.active { background: #fff; color: #24422d; box-shadow: 0 1px 4px #19362a0a; }
.assignment-options { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; }
.assignment-options .chips { flex: 1; margin: 0; min-width: 0; padding-bottom: 2px; }
.assignment-options .tabs { flex-basis: 100%; margin: 0; }
.empty-car-filter { margin: 0; border-radius: 10px; min-height: 42px; padding: 9px 12px; font-size: 12px; }
.empty-car-filter.active { background: #e5efcf; border-color: #8db847; color: #294627; }
.chip { min-height: 38px; font-size: 11px; padding: 7px 12px; border-radius: 9px; }
.chip.active { background: #e6efcf; border-color: #aac580; color: #355325; font-weight: 600; }
.live-status { display: flex; align-items: center; gap: 7px; font-size: 11px; margin: 16px 0; color: #6d7d65; }
.live-status:not(:empty)::before { content: ''; width: 5px; height: 5px; flex: 0 0 5px; background: #84a95b; border-radius: 50%; }
/* Cards use a consistent hierarchy: identity, status, data, action. */
.cards { gap: 16px; align-items: start; }
.card, .panel, .issue-card, .source-card { border-color: var(--line); border-radius: 15px; box-shadow: var(--shadow); }
.card { padding: 20px; }
.cardhead { gap: 10px; align-items: center; }
.card .cardhead .plate { margin: 0; font-size: 21px; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.card .meta { margin: 8px 0 12px; font-size: 11px; }
.badge { padding: 5px 9px; border-radius: 6px; font-size: 10px; line-height: 1.35; }
.badge.free { background: #e8f2d8; color: #486e24; }
.badge.busy { background: #edf1ed; color: #4c6c59; }
.badge.out { background: #fbece6; color: #a64331; }
.vehicle-features { margin: 10px 0 16px; gap: 6px; }
.feature-chip { font-size: 11px; border-radius: 6px; background: #f7f9f3; padding: 4px 8px; }
.feature-chip.yes { background: #f0f6e6; color: #526e35; border-color: #dce9c6; }
.assignment-occupants { background: #f7f9f4; padding: 0 12px; border-radius: 10px; margin: 14px 0; }
.assignment-occupants>.sub { padding: 15px 0; }
.occupant { border-color: #e6eddf; padding: 13px 0; }
.occupant:first-child { border-top: 0; }
.occupant>strong { font-size: 14px; }
.occupant-actions { gap: 6px; margin-top: 9px; }
.occupant-actions .secondary { padding: 7px 10px; font-size: 11px; min-height: 40px; }
.schedule-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; padding: 15px 0; border: 0; background: #e8efdc; border-radius: 12px; margin-bottom: 18px; }
.schedule-summary>span { padding: 0 15px; min-width: 0; font-size: 11px; border-right: 1px solid #d0ddbf; line-height: 1.4; }
.schedule-summary>span:last-child { border: 0; }
.schedule-summary strong { display: block; font-size: 24px; margin: 0 0 4px; color: #26482c; line-height: 1.2; }
.issue-card { padding: 17px; }
.issue-card .issue-status { font-weight: 600; font-size: 11px; }
.issue-card h3 { font-size: 16px; }
.issue-card p { color: var(--muted); font-size: 12px; }
.missing-car { border-left: 3px solid #c7654a; }
.missing-shift { border-left: 3px solid #c6a045; }
.day-tile { border-radius: 10px; }
.day-tile.active { background: #e7f0d3; border-color: #90b254; box-shadow: none; }
.pair-gap { background: #f2f6eb; padding: 9px 11px; border-radius: 7px; border: 0; color: #54733b; }
/* Colour belongs to the status, not to an entire screen of cards. */
.staff-person[class*=status-] { background: #fff; color: var(--status-fg); border-left: 3px solid var(--status-bg); }
.staff-person[class*=status-]:hover { background: var(--status-bg); }
.staff-person[class*=status-] .staff-avatar { border: 0; background: var(--status-bg); color: var(--status-fg); border-radius: 9px; }
.staff-person strong { color: var(--status-fg,var(--ink)); }
.staff-person.status-ready { background: #faf7fd; }
.staff-person { padding: 13px 16px; min-height: 64px; }
.staff-letter>div { border-radius: 13px; box-shadow: var(--shadow); }
.staff-letter h2 { color: #69864d; font-size: 12px; }
.status-filter { border-radius: 8px; font-size: 11px; padding: 8px 10px; min-height: 38px; }
.status-filter[class*=status-] { background: #fff; border-color: #e1e7dc; }
.status-filter span { background: var(--status-bg,#edf3e3); color: var(--status-fg,#56713c); }
.status-filter.active { outline: 0; border-color: var(--status-fg,#52782e); box-shadow: inset 0 -2px var(--status-fg,#52782e); background: var(--status-bg,#edf3e3); }
/* Overview: one strong brand panel and restrained supporting figures. */
.staff-summary-hero { position: relative; overflow: hidden; background: #193e2e; border-radius: 17px; padding: 26px; border-top: 4px solid #a2d34c; }
.staff-summary-hero::after { content: ''; position: absolute; width: 130px; height: 130px; border: 22px solid #a4d34f12; border-radius: 30px; transform: rotate(-25deg); right: -45px; top: -45px; pointer-events: none; }
.staff-summary-hero span { color: #d3e1c6; font-size: 12px; }
.staff-summary-hero strong { font-size: 48px; margin: 6px 0; color: #fff; font-variant-numeric: tabular-nums; }
.staff-summary-hero p { max-width: 300px; line-height: 1.6; }
.summary-open { background: #add85c; color: #254026; border-radius: 9px; font-weight: 700; min-height: 44px; }
.staff-summary-grid { gap: 10px; }
.staff-stat[class*=status-] { background: #fff; padding: 17px; border-radius: 12px; }
.staff-stat>span { color: var(--status-fg,var(--muted)); font-size: 12px; font-weight: 500; }
.staff-stat>strong { margin: 9px 0 12px; font-size: 30px; }
.stat-bar { background: var(--status-bg,#edf3e4); height: 3px; }
.depot-summary { padding: 18px 20px; margin-top: 0; }
.depot-summary .sectionline { margin-bottom: 4px; }
.depot-summary h2 { margin: 0 0 10px; }
.overview-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 30px; }
.overview-quick button { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 9px; min-height: 42px; }
.overview-quick button strong { font-size: 11px; }
.overview-quick button small { display: none; }
.overview-quick button svg { width: 16px; height: 16px; color: #618236; }
.source-summary { margin-top: 28px; padding-top: 25px; border-top: 1px solid #d7e1ce; }
.section-kicker { color: #719546; margin-bottom: 6px; }
.source-summary .sectionline { margin-bottom: 8px; }
.source-summary h2 { font-size: 22px; line-height: 1.25; }
.source-summary>.sub { font-size: 11px; color: var(--muted); }
.source-kpis { gap: 10px; grid-template-columns: repeat(auto-fit,minmax(125px,1fr)); }
.source-kpis article { padding: 16px; border-radius: 12px; }
.source-kpis small { font-size: 11px; color: #5c7054; }
.source-kpis strong { font-size: 28px; margin: 8px 0 0; font-variant-numeric: tabular-nums; }
.source-kpis p { margin-bottom: 0; font-size: 11px; }
.summary-group { border: 1px solid var(--line); border-radius: 13px; background: #fff; margin: 12px 0; overflow: hidden; }
.summary-group>summary { padding: 17px 18px; display: flex; justify-content: space-between; gap: 12px; align-items: center; cursor: pointer; list-style: none; }
.summary-group>summary::-webkit-details-marker { display: none; }
.summary-group>summary strong { display: block; font-size: 14px; }
.summary-group>summary small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; line-height: 1.5; }
.summary-group>summary svg { width: 16px; height: 16px; color: #70904e; transform: rotate(90deg); }
.summary-group[open]>summary svg { transform: rotate(-90deg); }
.summary-group[open]>summary { background: #f7f9f2; border-bottom: 1px solid var(--line); }
.summary-group-content { padding: 16px; }
.source-card { border-radius: 10px; padding: 14px; gap: 12px; box-shadow: none; }
.source-card>div:first-child { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.source-card>div:first-child strong { font-size: 16px; }
.source-card small { font-size: 10px; color: #718166; margin-bottom: 4px; }
.source-card strong { font-size: 13px; line-height: 1.5; }
.source-note { font-size: 11px; line-height: 1.7; }
.source-links button { min-height: 40px; padding: 9px 12px; font-size: 11px; border: 1px solid #dce5d2; background: #fff; border-radius: 8px; }
/* Forms and details share the same GTW controls. */
.record-form { max-width: 780px; padding: 22px; border-top: 3px solid #9dc94b; }
.record-form h2 { font-size: 18px; }
.form input, .form select, .form textarea { background: #fbfcf9; border-color: #d8e2d4; border-radius: 10px; }
.form label { color: #465b41; font-size: 12px; }
.form .primary { margin-top: 6px; }
.formhint, #modal .formhint { background: #eef4e3; color: #567147; font-size: 12px; }
.form label:has(input[type=checkbox]) { display: flex; align-items: center; gap: 10px; }
.form input[type=checkbox] { width: 20px; height: 20px; min-height: 20px; flex: 0 0 20px; padding: 0; }
#modal { border: 1px solid #dce5d2; border-top: 4px solid #a4d34f; box-shadow: 0 28px 90px #132c2a38; border-radius: 19px; }
#modal::backdrop { background: #10291e88; backdrop-filter: blur(4px); }
#modal .modalhead { border-bottom: 1px solid var(--line); padding-bottom: 15px; }
#modal .modalhead h2 { font-size: 19px; }
#modal .close { border-radius: 10px; color: #526b43; background: #eef4e5; }
.profile-hero { padding: 0 0 10px; }
.profile-hero h3 { font-size: 23px; }
.profile-hero[class*=status-] .profile-avatar { border: 0; }
.call-button { background: #204632; border-radius: 11px; }
.copy-button { background: #eaf2db; color: #4a6c2e; }
.contract-card { border-color: #dce5d0; background: #f3f7eb; border-radius: 11px; margin: 4px 0; }
.contract-card small { color: #63784f; }
.profile-other { border-radius: 9px; background: #f8faf5; border: 1px solid var(--line); padding: 0 12px; }
.profile-data>div { font-size: 12px; }
.mail-preview { font-size: 13px; }
.menu-section { margin-bottom: 26px; }
.menu-section>h2 { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #6a8059; margin: 0 0 12px; }
.moregrid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.moregrid button { position: relative; gap: 12px; padding: 18px; border-radius: 12px; min-height: 115px; font-size: 13px; }
.moregrid svg { width: 32px; height: 32px; padding: 6px; box-sizing: content-box; border-radius: 10px; background: #edf4dd; color: #526f31; }
.moregrid button:hover { border-color: #a9c47d; background: #f8fbf2; }
.empty { padding: 32px 20px; border: 1px dashed #c9d8b6; background: #fbfcf9; }
.empty h3 { font-size: 16px; }
.empty p { color: #728266; font-size: 12px; }
.footertext { color: #86917d; margin: 30px 0 0; }
.login-panel { padding: 30px; background: #fff; border: 1px solid var(--line); border-top: 4px solid #a4d34f; border-radius: 20px; box-shadow: 0 12px 40px #18382c08; }
.login-panel .brand-logo { margin-bottom: 28px; }
.login-panel h1 { font-size: 27px; }
.login-panel p { color: var(--muted); }
/* Native-looking filter fields on TA, shifts and history. */
.main[data-view=ta] #view>.toolbar, .main[data-view=shifts] #view>.toolbar, .main[data-view=history] #view>.toolbar {
  border: 1px solid var(--line); background: #fff; padding: 16px; border-radius: 13px; justify-content: flex-start;
}
.toolbar>label:has(select) { display: grid; gap: 6px; font-size: 12px; color: #52664e; flex: 1; min-width: 110px; }
.toolbar>label>select { width: 100%; min-height: 44px; padding: 10px; background: #fbfcf9; border: 1px solid #d8e2d4; border-radius: 9px; color: var(--ink); }
.main[data-view=ta] #query { flex-basis: 100%; max-width: none; }
#records>h2 { font-size: 18px; margin: 24px 0 14px; }
@media (max-width:1150px) and (min-width:761px) { .main { padding: 24px; } }
@media (min-width:1500px) { .main { padding-left: 275px; } }
@media (max-width:760px) {
  .main { margin: 0; padding: 0 16px calc(100px + env(safe-area-inset-bottom)); }
  .top { margin: 0 -16px 22px; padding: 13px 16px 11px; min-height: 78px; background: #fff; border-bottom: 3px solid #a2cc50; gap: 12px; }
  .mobilebrand .brand-logo { width: 128px; }
  .mobilebrand .brand-caption { font-size: 7px; letter-spacing: 2.5px; color: #68834f; }
  .mobilebrand { gap: 2px; }
  .mobile-menu-trigger { border: 1px solid #dce5d1; border-radius: 10px; min-height: 40px; background: #f3f7eb; color: #405d2c; padding: 8px 11px; font-size: 11px; }
  .mobile-menu-trigger svg { width: 18px; height: 18px; }
  .heading { align-items: flex-start; gap: 12px; margin-bottom: 18px; }
  .heading h1 { font-size: 26px; line-height: 1.2; letter-spacing: -.7px; }
  .heading .sub { font-size: 12px; }
  .heading>.primary { min-height: 40px; font-size: 11px; padding: 9px 11px; }
  .heading>.secondary { min-height: 38px; font-size: 11px; padding: 8px 10px; }
  .heading-actions { gap: 6px; }
  .heading-actions button { font-size: 11px; padding: 8px 10px; }
  .filter-panel { padding: 14px; border-radius: 13px; margin-bottom: 16px; }
  .filter-panel-label { font-size: 9px; margin-bottom: 10px; }
  .filter-panel .toolbar { gap: 12px; margin-bottom: 12px; }
  .filter-panel .segments { width: 100%; }
  .segments button { padding: 6px 10px; min-height: 36px; font-size: 11px; }
  .filter-panel .day-filter { display: flex; align-items: center; gap: 14px; }
  .filter-panel .day-filter .date { flex: 1; min-width: 0; min-height: 44px; max-width: 100%; padding: 8px 10px; }
  .filter-panel .assignment-searches { gap: 10px; }
  .combo>label { font-size: 11px; }
  .combo-input input { font-size: 16px !important; min-height: 46px; }
  .combo-input button { flex-basis: 38px; width: 38px; min-height: 44px; }
  .combo .staff-picker-results { max-height: min(240px,35dvh); }
  .filter-panel .month-search-link { font-size: 11px; line-height: 1.4; }
  .status-filters { gap: 6px; }
  .status-filter { min-height: 38px; font-size: 11px; padding: 7px 9px; gap: 6px; }
  .tabs button { min-height: 40px; padding: 9px 7px; font-size: 11px; }
  .assignment-options { gap: 10px; }
  .assignment-options .empty-car-filter { flex-basis: 100%; justify-content: flex-start; width: 100%; min-height: 40px; }
  .assignment-options .empty-car-filter::after { content: ''; width: 14px; height: 14px; margin-left: auto; border: 1px solid #bacaa7; border-radius: 4px; background: #fff; }
  .assignment-options .empty-car-filter.active::after { content: '✓'; display: grid; place-items: center; font-size: 12px; line-height: 1; background: #52782e; border-color: #52782e; color: #fff; }
  .assignment-options .chips { flex-basis: 100%; }
  .live-status { font-size: 10px; margin: 14px 0; }
  .card { padding: 17px; border-radius: 14px; }
  .card .cardhead .plate { font-size: 21px; }
  .card .primary, .card .secondary.wide { min-height: 44px; font-size: 12px; }
  .cardhead .badge { font-size: 9px; }
  .schedule-summary>span { font-size: 10px; padding: 0 12px; }
  .schedule-summary strong { font-size: 23px; }
  .staff-person { padding: 12px; min-height: 62px; }
  .staff-person strong { font-size: 14px; }
  .staff-summary-hero { padding: 20px; border-radius: 15px; }
  .staff-summary-hero strong { font-size: 43px; }
  .staff-summary-hero strong small { font-size: 18px; }
  .summary-open { margin-top: 16px; padding: 11px 13px; font-size: 12px; }
  .staff-stat[class*=status-] { padding: 14px; }
  .staff-stat>strong { font-size: 28px; }
  .staff-stat>span { font-size: 11px; }
  .staff-summary-grid { margin-bottom: 18px; }
  .depot-summary { padding: 16px; }
  .depot-summary>div:not(.sectionline) { font-size: 12px; gap: 8px; }
  .overview-quick { gap: 7px; }
  .overview-quick button { flex: 1 1 100px; padding: 10px; gap: 7px; }
  .source-summary h2 { font-size: 21px; }
  .source-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .source-kpis article { padding: 14px; }
  .source-kpis strong { font-size: 27px; }
  .summary-group>summary { padding: 15px; }
  .summary-group-content { padding: 12px; }
  .source-cards { grid-template-columns: 1fr; gap: 10px; }
  .source-card { padding: 13px; }
  .source-card>div:first-child strong { font-size: 16px; }
  .record-form { padding: 18px; }
  #modal { padding: 20px 17px; border-radius: 17px; }
  #modal .modalhead h2 { font-size: 18px; }
  .profile-hero h3 { font-size: 22px; }
  .form input, .form select, .form textarea, .toolbar>label>select { font-size: 16px; }
  .moregrid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .moregrid button { padding: 16px; min-height: 112px; font-size: 12px; }
  .moregrid svg { width: 22px; height: 22px; }
  .mobile-nav { background: #173a2d; border-top: 3px solid #9ac744; padding: 6px 5px max(8px,env(safe-area-inset-bottom)); gap: 2px; box-shadow: 0 -5px 20px #12342412; }
  .mobile-nav button { padding: 8px 3px; border-radius: 9px; color: #d2dfc6; min-height: 53px; gap: 4px; }
  .mobile-nav button.active { color: #203b25; background: #add75c; }
  .mobile-nav span { font-size: 9px; letter-spacing: .1px; }
  .mobile-nav svg { width: 20px; height: 20px; stroke-width: 1.8; }
  .footertext { font-size: 9px; }
  #toast { border: 1px solid #a3c977; background: #214331; bottom: calc(90px + env(safe-area-inset-bottom)); }
  .login-panel { margin: 8vh 16px; padding: 25px; }
}
@media (min-width:440px) and (max-width:760px) { .filter-panel .assignment-searches:not(.single-search) { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion:reduce) { button, .card { transition: none; } }
/* Keep daily results close to the filters on narrow screens. */
@media (max-width:760px) {
  .main[data-view=assignment] .filter-panel-label { display: none; }
  .main[data-view=assignment] .filter-panel .month-search-link { display: none; }
  .assignment-options { display: grid; grid-template-columns: minmax(0,1fr) 116px; grid-template-areas: 'groups groups' 'views empty'; gap: 10px; }
  .assignment-options .chips { grid-area: groups; width: 100%; }
  .assignment-options .tabs { grid-area: views; min-width: 0; }
  .assignment-options .tabs button { font-size: 10px; padding: 7px 5px; min-height: 36px; }
  .assignment-options .empty-car-filter { grid-area: empty; padding: 8px; font-size: 10px; gap: 5px; min-height: 42px; border-radius: 10px; }
  .assignment-options .empty-car-filter svg { display: none; }
  .assignment-options .empty-car-filter::after { width: 12px; height: 12px; flex: 0 0 12px; }
}
@media (min-width:360px) and (max-width:760px) {
  .main[data-view=assignment] .filter-panel .assignment-searches:not(.single-search) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .main[data-view=assignment] .filter-panel .combo-input input { text-overflow: ellipsis; padding: 10px !important; }
  .main[data-view=assignment] .filter-panel .combo-input button { width: 32px; flex-basis: 32px; }
}
@media (max-width:760px) {
  .chips { scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
}
@media (min-width:360px) and (max-width:760px) {
  .main[data-view=assignment] .filter-panel .combo .staff-picker-results { min-width: min(280px,calc(100vw - 62px)); }
  .main[data-view=assignment] .filter-panel .combo[data-filter=car] .staff-picker-results { left: auto; right: 0; }
}

/* Open shifts: compact time-first rows, one clearly bounded section per depot. */
.free-shift-filters { display:grid; grid-template-columns:minmax(150px,1fr) minmax(240px,1fr); gap:14px; align-items:end; }
.free-shift-filters .filter-panel-label { grid-column:1/-1; margin:0; }
.free-shift-filters .segments { display:flex; }
.free-shift-filters .segments button { flex:1; min-height:44px; }
.free-shift-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--ink); color:#fff; border-radius:16px; padding:22px; margin-bottom:20px; }
.free-shift-summary small { display:block; color:#d2e2c5; font-size:12px; }
.free-shift-summary strong { font-size:36px; line-height:1.2; }
.free-shift-summary strong span { font-size:14px; font-weight:500; color:#d2e2c5; }
.free-shift-date { font-size:13px; text-align:right; max-width:150px; color:#e0eecf; }
.free-shift-depots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; }
.free-shift-depot { border:1px solid var(--line); border-radius:15px; background:#fff; overflow:hidden; }
.free-shift-depot-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; background:#eef4e5; border-bottom:1px solid var(--line); }
.free-shift-depot-head h2 { font-size:18px; margin:0; }
.free-shift-slot { display:grid; grid-template-columns:90px minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid #edf1e9; }
.free-shift-slot:last-child { border:0; }
.free-shift-time { display:flex; align-items:center; gap:7px; font-variant-numeric:tabular-nums; }
.free-shift-time svg { width:16px; height:16px; color:#78945b; flex-shrink:0; }
.free-shift-time strong { font-size:18px; overflow-wrap:anywhere; }
.free-shift-type { min-width:0; font-size:12px; }
.free-shift-type small { display:block; color:var(--muted); font-size:10px; overflow-wrap:anywhere; }
.free-shift-count { display:flex; align-items:center; gap:5px; white-space:nowrap; padding:5px 8px; border-radius:8px; background:#eaf3d9; color:#3e5b27; font-size:10px; }
.free-shift-count strong { font-size:17px; }
.free-shift-empty,.free-shift-note,.free-shift-warning { padding:14px 18px; margin:0; font-size:12px; color:var(--muted); }
.free-shift-warning { background:#fff5df; color:#78531c; }
.free-shift-note { border-top:1px solid var(--line); }
@media(max-width:760px){
 .free-shift-filters { grid-template-columns:minmax(0,1fr); }
 .free-shift-depots { grid-template-columns:minmax(0,1fr); }
 .free-shift-summary { padding:18px; }
 .free-shift-slot { padding:13px 14px; gap:9px; grid-template-columns:84px minmax(0,1fr) auto; }
}
/* Daily work, training and administration */
.compact-filters{display:grid;gap:14px}.compact-filters .segments{margin:0}.compact-filters label{display:grid;gap:7px;color:#49634f;font-size:14px;font-weight:600}.compact-filters .status-filters{margin:0;gap:8px}.compact-filters .search{width:100%;min-width:0}.ta-list,.daily-list,.cost-list{display:grid;gap:14px}.ta-person,.daily-person{background:#fff;border:1px solid #dce5dc;border-radius:20px;padding:20px}.ta-person h3,.daily-person h3{font-size:19px;margin:0}.ta-person .badge,.daily-person .badge{font-size:12px;white-space:nowrap}.pending-badge{background:#eee6f8;color:#745590}.ta-primary{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0 16px}.ta-primary>div{display:grid;gap:5px;min-width:0}.ta-primary small,.ta-days small,.booking-preview span,.training-trainee small{color:#728174;font-size:12px}.ta-primary strong{font-size:14px;overflow-wrap:anywhere}.ta-days{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid #e6ebe4;padding:14px 0;margin-bottom:6px}.ta-days>span{display:grid;gap:5px;font-size:13px}.ta-person .secondary{margin-top:8px;min-height:44px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center}.ta-person .secondary svg{width:18px;height:18px}.booking-preview{display:grid;gap:8px;padding:16px;background:#eff5e5;border-radius:14px}.booking-preview strong{font-size:19px}.training-trainee{display:grid;gap:5px;margin:0 0 16px}.daily-summary{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;background:#eaf2dd;border:1px solid #dbe7c5;border-radius:16px;padding:16px}.daily-summary>span{color:#49634f;font-size:13px}.daily-summary strong{font-size:25px;color:#193d2e;margin-right:5px}.daily-summary .secondary{margin-left:auto;min-height:40px;padding:9px 12px;font-size:13px}.daily-summary svg{width:16px;height:16px}.shift-pills{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.shift-pills>div{display:grid;gap:5px;background:#f4f6f1;border:1px solid #e1e7dc;border-radius:12px;padding:10px 13px;min-width:80px}.shift-pills strong{font-size:19px;font-variant-numeric:tabular-nums}.shift-pills span{font-size:11px;color:#6d7b6e;overflow-wrap:anywhere}.daily-foot{border-top:1px solid #e8ece5;padding-top:13px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;font-size:13px}.daily-foot>span{color:#718072}.daily-foot strong{font-weight:600}.extra-available{background:#e8f3d2;color:#436320;padding:7px 10px;border-radius:9px}.cost-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.cost-summary{background:#1a3b2d;color:white;border-radius:20px;padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:20px}.cost-summary div{display:grid;gap:8px;min-width:0}.cost-summary small{color:#c1cfb8;font-size:12px}.cost-summary strong{font-size:clamp(19px,3.3vw,30px);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.cost-row{width:100%;text-align:left;background:#fff;border:1px solid #dce5dc;border-radius:16px;padding:17px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:#1a3b2d}.cost-row>span{display:grid;gap:7px;min-width:0}.cost-row strong{font-size:15px;overflow-wrap:anywhere}.cost-row small{font-size:12px;color:#7a8679}.cost-row .cost-value{text-align:right;flex-shrink:0;max-width:45%}.cost-row .unsettled{color:#9a5c27}.cost-row:hover,.cost-row:focus-visible{border-color:#9dbd6d;background:#fbfdf8}.cost-list+.wide{margin-top:16px}
@media(min-width:900px){.ta-list,.daily-list{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-filters{max-width:900px}}
@media(max-width:520px){.cost-filters{grid-template-columns:1fr 1fr}.cost-filters label:last-child{grid-column:1/-1}.cost-summary{padding:20px 16px;gap:12px}.ta-person,.daily-person{padding:18px 16px}.ta-person h3,.daily-person h3{font-size:18px}.daily-summary .secondary{margin:0;width:100%;display:flex;justify-content:space-between}.main[data-view=phones] .assignment-searches{grid-template-columns:1fr}.compact-filters .segments{width:100%;min-width:0}.compact-filters .segments button{flex:1;padding:10px 8px}.compact-filters .status-filter{min-height:43px;font-size:13px;padding:9px 12px}.main[data-view=ta] h1,.main[data-view=costs] h1,.main[data-view=shifts] h1{font-size:30px}.main[data-view=ta] .heading,.main[data-view=costs] .heading,.main[data-view=shifts] .heading{gap:12px}.main[data-view=ta] .heading>.secondary,.main[data-view=costs] .heading>.secondary,.main[data-view=shifts] .heading>.secondary{font-size:13px;min-height:42px;padding:10px 13px}.main[data-view=ta] .heading svg,.main[data-view=costs] .heading svg,.main[data-view=shifts] .heading svg{width:18px;height:18px}}
.compact-filters select{appearance:auto;width:100%;min-width:0;min-height:46px;padding:11px 36px 11px 13px;border:1px solid #d6e1cf;border-radius:12px;background:#fafbf8;color:#234232;font:inherit;font-size:15px}.compact-filters select:focus{outline:2px solid #a4d34f;outline-offset:2px}
@media(max-width:520px){.main[data-view=ta] .heading>.secondary,.main[data-view=costs] .heading>.secondary,.main[data-view=shifts] .heading>.secondary{font-size:0;width:44px;min-width:44px;padding:11px;gap:0}.main[data-view=ta] h1{font-size:27px}.main[data-view=ta] .heading>div{min-width:0}}