:root{
    --primary-color-header: #1e4f5d;
    --primary-color-background: #1FAFBE;
    --color-disabled: #757575;
    --color-selected: grey;
    --color-overlay: rgba(0, 0, 0, 0.5);
    --spinner-track: #f3f3f3;
    --spinner-color: #3498db;
}

html,
body {
    font-family: 'Merriweather', sans-serif !important;
    background-color: var(--primary-color-background);
    height: 100%;
    max-width: 100%;
}
body { overflow-x:hidden; }
.wrap {
    min-height: 100%;
}

.main {
    overflow: auto;
    padding-bottom: 72px;
}

/* must be same height as the footer */

#footer {
    position: relative;
    margin-top: -72px;
    /* negative value of footer height */
    height: 72px;
    clear: both;
}

/* navbar settings */
.bg-primary {
    background-color: var(--primary-color-header) !important;
}
.mobile-nav-calendar { display:none; }

#nav-heading {
    padding-left: 0.5em;
}

#timestamp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Adjust the minmax values as needed */
    gap: 10px;
}

.timestamp-button {
    background-color: var(--primary-color-header);
    border: none;
    color: white;
    padding: 0.5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    height: 73px;
    border-radius: 10px;
}
.timestamp-button.disabled {
    background-color: var(--color-disabled);
    border: none;
    color: white;
    padding: 0.5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    height: 73px;
    border-radius: 10px;
}

.timestamp-button.selected, .timestamp-button.in-range {
    background-color: var(--color-selected);
    color: white;
}

.date-separator {
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
    text-align: center;
    /* Add any additional styling as needed */
}

.spinner-overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-overlay);
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* High z-index to ensure it's above other elements */
}

.spinner {
    border: 5px solid var(--spinner-track);
    border-top: 5px solid var(--spinner-color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#BC-logo {
    height: clamp(28px, 5vw, 50px);
    width: auto;
}

.calendar-shell { --hour-height:60px; background:#fff; border:1px solid #dadce0; border-radius:.75rem; overflow:hidden; box-shadow:0 1px 3px rgba(60,64,67,.18); }
.calendar-head { display:grid; grid-template-columns:64px repeat(7,minmax(120px,1fr)); min-width:904px; border-bottom:1px solid #dadce0; background:#fff; }
.calendar-corner { border-right:1px solid #dadce0; }
.calendar-day-head { display:flex; flex-direction:column; align-items:center; gap:.2rem; padding:.55rem; color:#5f6368; border-right:1px solid #f1f3f4; }
.calendar-day-head span { font-size:.72rem; font-weight:600; text-transform:uppercase; }
.calendar-day-head strong { display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:50%; font-size:1.25rem; font-weight:400; }
.calendar-day-head.is-today { color:#1a73e8; }
.calendar-day-head.is-today strong { color:#fff; background:#1a73e8; }
.calendar-scroll { height:min(68vh,720px); overflow:auto; background:#fff; }
.calendar-time-grid { display:grid; grid-template-columns:64px repeat(7,minmax(120px,1fr)); min-width:904px; height:calc(24 * var(--hour-height)); }
.calendar-times { position:relative; border-right:1px solid #dadce0; }
.calendar-time { height:var(--hour-height); position:relative; border-bottom:1px solid transparent; }
.calendar-time span { position:absolute; right:.55rem; top:-.55rem; color:#70757a; font:11px Arial,sans-serif; background:#fff; padding:0 .15rem; }
.calendar-day-column { position:relative; border-right:1px solid #f1f3f4; background:#fff; }
.calendar-day-column.is-today { background:#f8fbff; }
.calendar-hour-line { height:var(--hour-height); border-bottom:1px solid #dadce0; }
.calendar-event { position:absolute; z-index:2; top:var(--event-top); left:3px; right:3px; height:30px; overflow:hidden; display:flex; flex-direction:column; text-align:left; padding:2px 5px; border:0; border-left:4px solid #188038; border-radius:4px; background:#d7f0df; color:#174d2a; font:11px Arial,sans-serif; line-height:1.15; }
.calendar-event:hover,.calendar-event:focus { z-index:4; height:auto; min-height:30px; box-shadow:0 2px 8px rgba(60,64,67,.35); outline:none; }
.calendar-event strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.calendar-event.priority-yellow { border-left-color:#f9ab00; background:#feefc3; color:#594500; }
.calendar-event.priority-red { border-left-color:#d93025; background:#fad2cf; color:#6d1711; }
.calendar-event.status-in_progress { border-color:#1a73e8; box-shadow:inset 0 0 0 1px #1a73e8; }
.event-time { font-weight:700; }
.calendar-event small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.calendar-navigation { gap:1rem; }
.calendar-nav-button { display:inline-flex; align-items:center; justify-content:center; min-width:7rem; min-height:2.75rem; padding:.6rem 1rem; border:2px solid #1e4f5d; border-radius:.5rem; background:#fff; color:#1e4f5d; font-weight:700; text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.12); }
.calendar-nav-button:hover,.calendar-nav-button:focus-visible { background:#1e4f5d; color:#fff; }
.driver-tabs { display:flex; flex-wrap:wrap; gap:.55rem; }
.driver-tab { display:inline-flex; align-items:center; min-height:2.75rem; padding:.6rem 1rem; border:2px solid #1e4f5d; border-radius:.5rem; background:#fff; color:#1e4f5d; font-weight:700; text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.12); }
.driver-tab:hover,.driver-tab:focus-visible { background:#e6f4f6; color:#163d48; }
.driver-tab.is-active { background:#1e4f5d; color:#fff; box-shadow:0 2px 5px rgba(0,0,0,.2); }
.driver-tab.is-active:hover,.driver-tab.is-active:focus-visible { background:#163d48; color:#fff; }
.driver-shift-block { position:absolute; z-index:3; top:var(--shift-top); height:var(--shift-height); min-height:60px; left:3px; right:3px; overflow:auto; padding:.35rem; border:2px solid #6ea8fe; border-radius:.6rem; background:rgba(231,241,255,.96); box-shadow:0 2px 6px rgba(0,0,0,.12); }
.driver-shift-block.status-active { border-color:#198754; background:rgba(209,231,221,.97); }
.driver-shift-block.status-ended { border-color:#adb5bd; background:rgba(233,236,239,.95); }
.driver-shift-heading { display:flex; justify-content:space-between; gap:.3rem; margin-bottom:.3rem; font-size:.74rem; }
.driver-shift-heading strong,.driver-shift-heading small { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.driver-shift-jobs { display:grid; gap:.25rem; }
.driver-shift-job { display:grid; width:100%; padding:.3rem; border:1px solid rgba(0,0,0,.15); border-left:4px solid #198754; border-radius:.3rem; background:#fff; text-align:left; font-size:.7rem; }
.driver-shift-job.priority-red { border-left-color:#dc3545; }.driver-shift-job.priority-yellow { border-left-color:#ffc107; }.driver-shift-job.priority-green { border-left-color:#198754; }
.driver-shift-job.status-in_progress { outline:2px solid #0d6efd; }
.driver-mobile-page { max-width:1200px; }
.driver-mobile-page>header { padding:1rem; border:1px solid #e1e5e9; border-radius:.85rem; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.driver-mobile-page>.row>section { padding:1rem; border:1px solid #e1e5e9; border-radius:.85rem; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.driver-mobile-page>.row { --bs-gutter-x:1rem; margin-left:0; margin-right:0; }
.driver-mobile-page>.row>section+section { margin-left:1rem; width:calc(50% - .5rem); }
.driver-mobile-page>.row>section:first-child { width:calc(50% - .5rem); }
.driver-start-shift { border:2px solid #198754; background:#f1fff7; }
.driver-start-shift>span { color:#495057; }
.driver-mission-card { overflow:hidden; border:1px solid #d8dee4; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.driver-mission-card>.card-header { width:100%; padding:.8rem; }
.driver-mission-summary { display:grid; grid-template-columns:4.2rem minmax(0,1fr) auto; align-items:center; gap:.75rem; }
.driver-mission-summary time { color:#0d6efd; font-size:1.15rem; font-weight:800; }
.driver-mission-summary strong,.driver-mission-summary small { display:block; }
.driver-mission-summary small { color:#6c757d; margin-top:.15rem; }
.driver-mission-details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.driver-empty-state { padding:1.25rem; border:1px dashed #adb5bd; border-radius:.5rem; color:#6c757d; text-align:center; }
@media (max-width:575px) {
  .navbar { padding:.45rem .5rem; }
  .navbar-brand { margin-right:.35rem; }
  #nav-heading { padding-left:0; font-size:1rem; }
  .mobile-nav-shortcuts { min-width:0; margin-right:.25rem !important; }
  .mobile-nav-shortcuts .btn { padding:.3rem .45rem; font-size:.76rem; }
  .navbar-toggler { padding:.25rem .4rem; }
  .home-page .main>.container, .driver-page .main>.container { max-width:100%; padding-left:0; padding-right:0; }
  .home-page .main>.container>.container { padding:.75rem !important; }
  .home-page .card-body { padding:1rem !important; }
  .driver-mobile-page { padding-left:.75rem; padding-right:.75rem; }
  .driver-page-header { flex-wrap:wrap; }
  .driver-page-header>div { min-width:0; }
  .driver-page-header>form { width:100%; }
  .driver-page-header>form .btn { width:100%; }
  .driver-mobile-page h1 { font-size:1.35rem; }
  .driver-mobile-page header .btn { padding:.4rem .6rem; font-size:.85rem; }
  .driver-mission-summary { grid-template-columns:3.5rem minmax(0,1fr); gap:.5rem; }
  .driver-mission-summary>.badge { grid-column:2; justify-self:start; }
  .driver-mission-details { grid-template-columns:1fr; gap:.6rem; }
  .driver-mission-card>.card-header,.driver-mission-card .card-body { padding:.7rem; }
  .driver-mobile-page>header { padding:.8rem; }
  .driver-mission-filter { flex-direction:column; align-items:flex-start !important; }
  .driver-mission-summary strong,.driver-mission-summary small { overflow-wrap:anywhere; }
}
@media (min-width:480px) and (max-width:991.98px) {
  .mobile-nav-calendar { display:inline-flex; }
}
@media (max-width:991px) {
  .driver-mobile-page>.row>section,.driver-mobile-page>.row>section:first-child,.driver-mobile-page>.row>section+section { width:100%; margin-left:0; }
}
@media (max-width:575px) { .calendar-navigation { align-items:stretch !important; } .calendar-nav-button { min-width:0; flex:1; } .calendar-navigation>div { min-width:5rem; } .driver-tab { flex:1 1 100%; justify-content:center; } }
details>summary { cursor:pointer; }
@media (max-width:991px) { .calendar-scroll { height:65vh; } .calendar-head,.calendar-time-grid { grid-template-columns:52px repeat(7,minmax(110px,1fr)); min-width:822px; } }
.allocation-shell { --hour-height:60px; background:#fff; border:1px solid #dadce0; border-radius:.75rem; overflow:hidden; box-shadow:0 1px 3px rgba(60,64,67,.18); }
.allocation-head,.allocation-grid { display:grid; grid-template-columns:64px repeat(var(--driver-count),minmax(150px,1fr)); min-width:calc(64px + var(--driver-count) * 150px); }
.allocation-head { border-bottom:1px solid #dadce0; }
.allocation-head>div:first-child { border-right:1px solid #dadce0; }
.allocation-driver { min-height:64px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:.45rem; border-right:1px solid #dadce0; text-align:center; }
.allocation-driver small { color:#5f6368; }
.allocation-scroll { height:482px; overflow:auto; padding-right:16px; padding-bottom:16px; scrollbar-gutter:stable; background:#f1f3f4; }
.allocation-scroll>.allocation-grid,.allocation-scroll>.week-allocation-grid { background:#fff; }
.allocation-grid { height:calc(24 * var(--hour-height)); }
.shift-create-zone { cursor:crosshair; }
.shift-bubble { position:absolute; z-index:3; top:var(--shift-top); height:var(--shift-height); min-height:60px; left:4px; right:4px; overflow:visible; padding:.45rem; border:2px solid #6ea8fe; border-radius:.7rem; background:rgba(231,241,255,.88); box-shadow:0 2px 7px rgba(0,0,0,.12); }
.shift-bubble.status-active { border-color:#198754; background:rgba(209,231,221,.96); }
.shift-bubble.status-ended { border-color:#adb5bd; background:rgba(233,236,239,.94); }
.shift-bubble-header { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; gap:.5rem; align-items:flex-start; padding-bottom:.35rem; background:inherit; }
.shift-bubble-header strong,.shift-bubble-header small { display:block; text-align:left; }
.shift-info-trigger { min-width:0; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.shift-info-trigger:hover strong { text-decoration:underline; }
.shift-driver-label { position:absolute; z-index:7; top:0; left:50%; max-width:calc(100% - 18px); padding:0 .45rem; overflow:hidden; transform:translate(-50%,-55%); border:0; background:#fff; color:#1f2937; font-size:.78rem; font-weight:800; line-height:1.2; white-space:nowrap; text-overflow:ellipsis; }
.shift-driver-label:hover,.shift-driver-label:focus-visible { color:#0d6efd; text-decoration:underline; }
.allocation-mode-switch { padding:.35rem .55rem .35rem 2.8rem; border:1px solid #cfd6dd; border-radius:.6rem; background:#fff; white-space:nowrap; }
.allocation-timed-mission { position:absolute; z-index:6; top:var(--mission-top); height:48px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:.3rem; align-items:start; padding:.3rem; overflow:hidden; border:1px solid rgba(0,0,0,.22); border-left:4px solid #198754; border-radius:.4rem; background:#fff; color:#212529; text-align:left; font-size:.7rem; box-shadow:0 2px 5px rgba(0,0,0,.16); }
.allocation-timed-mission.priority-red { border-left-color:#dc3545; }
.allocation-timed-mission.priority-yellow { border-left-color:#ffc107; }
.allocation-timed-mission.priority-green { border-left-color:#198754; }
.allocation-timed-mission time { font-weight:800; }
.allocation-timed-mission span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shift-jobs { display:grid; gap:.3rem; }
.shift-job { display:grid; grid-template-columns:auto 1fr; gap:.4rem; width:100%; padding:.3rem .4rem; border:1px solid rgba(0,0,0,.15); border-left-width:4px; border-radius:.35rem; background:#fff; text-align:left; font-size:.78rem; }
.shift-job.priority-red { border-left-color:#dc3545; }.shift-job.priority-yellow { border-left-color:#ffc107; }.shift-job.priority-green { border-left-color:#198754; }
.week-allocation-shell { overflow-x:auto; }
.week-allocation-head,.week-allocation-grid { display:grid; grid-template-columns:64px repeat(7,minmax(210px,1fr)); min-width:1534px; }
.week-allocation-head { position:sticky; top:0; z-index:6; background:#fff; border-bottom:1px solid #dadce0; }
.week-day-heading { padding:.45rem .25rem; text-align:center; border-left:1px solid #dadce0; }
.week-day-heading>strong,.week-day-heading>span { display:block; }
.week-day-heading.is-today { color:#0d6efd; }
.week-allocation-grid { height:calc(24 * var(--hour-height)); }
.week-day-column { position:relative; display:block; min-width:0; border-left:1px solid #dadce0; }
.week-click-lanes { position:absolute; inset:0; display:flex; }
.week-events-layer { position:absolute; inset:0; z-index:3; pointer-events:none; }
.week-events-layer .shift-bubble { pointer-events:auto; }
.week-car-lane { flex:1 1 0; min-width:0; border-left:0; }
.week-shift-bubble { left:2px; right:2px; padding:.3rem; border-color:var(--car-color); background:color-mix(in srgb,var(--car-color) 14%,white); font-size:.72rem; }
.week-shift-bubble .shift-bubble-header small { font-size:.65rem; }

/* Allocation is a full-height workspace: queue on the left, calendar on the right. */
.allocation-page { overflow:hidden; }
.allocation-page #footer { display:none; }
.allocation-page .main { height:100dvh; overflow:hidden; }
.allocation-page .navbar { height:64px; }
.allocation-page-content { display:grid; grid-template-columns:280px minmax(0,1fr); grid-template-rows:58px 42px minmax(0,1fr); height:calc(100dvh - 64px); background:#f8f9fa; }
.allocation-page-title { display:none !important; }
.allocation-help { grid-column:2; grid-row:2; align-self:stretch; justify-self:stretch; display:flex !important; justify-content:flex-end !important; z-index:3; margin:0 !important; padding:5px 16px; border-bottom:1px solid #dadce0; background:#fff; }
.allocation-help p { display:none; }
.allocation-toolbar { grid-column:2; grid-row:1; min-width:0; margin:0 !important; padding:8px 16px; border-bottom:1px solid #dadce0; background:#fff; }
.allocation-calendar { grid-column:2; grid-row:3; display:flex; flex-direction:column; min-width:0; min-height:0; margin:0 !important; border-radius:0; border-width:0 0 0 1px; box-shadow:none; }
.allocation-page .allocation-scroll { flex:1; height:auto; min-height:0; overflow:auto; overscroll-behavior:contain; }
.allocation-sidebar { grid-column:1; grid-row:1 / span 3; min-height:0; overflow-y:auto; border-right:1px solid #dadce0; background:#fff; }
.allocation-sidebar>.card { margin:.5rem .75rem !important; }
.allocation-sidebar>.card>button { padding:.65rem !important; }
.allocation-sidebar>.card .row>div { width:100%; text-align:left !important; }
.allocation-sidebar>.card .row>div:nth-child(n+4) { display:none; }
.allocation-sidebar .allocation-filters { margin:0 !important; padding:.6rem .75rem !important; }
.allocation-filters .row { display:grid; grid-template-columns:1fr 1fr; }
.allocation-filters .row>div { width:auto; }
.allocation-filters .row>div:first-child { grid-column:1 / -1; }
.allocation-filters .row>div:last-child { grid-column:1 / -1; }
.allocation-legacy { position:fixed; z-index:1050; top:70px; left:300px; right:20px; }
.allocation-page .week-allocation-shell { overflow:hidden; }
.allocation-page .week-allocation-head,.allocation-page .week-allocation-grid { grid-template-columns:54px repeat(7,minmax(0,1fr)); min-width:0; }

@media (max-width: 850px) {
  .allocation-page { overflow:auto; }
  .allocation-page .main { height:auto; overflow:visible; }
  .allocation-page-content { grid-template-columns:1fr; grid-template-rows:auto 55vh minmax(320px,auto); height:auto; }
  .allocation-sidebar { grid-column:1; grid-row:3; max-height:45vh; }
  .allocation-toolbar,.allocation-help,.allocation-calendar { grid-column:1; }
  .allocation-toolbar,.allocation-help { grid-row:1; }
  .allocation-calendar { grid-row:2; }
}

.history-status-tabs { display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)); gap:.65rem; padding:.7rem; border:1px solid #d6dbe1; border-radius:.8rem; background:#eef1f5; }
.history-status-tab { display:flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px; padding:.65rem .9rem; border:2px solid #c4cad2; border-radius:.65rem; background:#fff; color:#263238; font-weight:700; text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.08); transition:background-color .15s,border-color .15s,box-shadow .15s,transform .15s; }
.history-status-tab:hover { border-color:#6c757d; background:#f8f9fa; color:#111; transform:translateY(-1px); box-shadow:0 3px 7px rgba(0,0,0,.13); }
.history-status-dot { width:.7rem; height:.7rem; flex:0 0 auto; border-radius:50%; background:#6c757d; }
.history-status-tab.status-in_progress .history-status-dot { background:#0d6efd; }
.history-status-tab.status-pending .history-status-dot { background:#d39e00; }
.history-status-tab.status-completed .history-status-dot { background:#198754; }
.history-status-tab.status-cancelled .history-status-dot { background:#dc3545; }
.history-status-tab.active { border-color:#0d6efd; background:#0d6efd; color:#fff; box-shadow:0 3px 9px rgba(13,110,253,.32); }
.history-status-tab.active .history-status-dot { background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.25); }
@media (max-width:650px) { .history-status-tabs { grid-template-columns:repeat(2,1fr); } }

/* Read-only full-screen calendar for the signed-in driver. */
.driver-calendar-page { overflow:hidden; }
.driver-calendar-page .main { height:100dvh; overflow:hidden; }
.driver-calendar-page .navbar { height:64px; }
.driver-calendar-layout { display:grid; grid-template-rows:68px minmax(0,1fr); height:calc(100dvh - 64px); background:#f8f9fa; }
.driver-calendar-layout.has-driver-sidebar { grid-template-columns:280px minmax(0,1fr); }
.driver-calendar-sidebar { grid-column:1; grid-row:1 / span 2; min-height:0; overflow-y:auto; padding:1rem .75rem; border-right:1px solid #dadce0; background:#fff; }
.driver-calendar-sidebar h1 { padding:0 .35rem .65rem; margin:0; }
.driver-calendar-sidebar nav { display:grid; gap:.4rem; }
.driver-calendar-person { display:flex; flex-direction:column; justify-content:center; min-height:52px; padding:.65rem .75rem; border:1px solid #d8dee4; border-radius:.65rem; background:#fff; color:#263238; font-weight:700; text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.06); }
.driver-calendar-person:hover,.driver-calendar-person:focus-visible { border-color:#0d6efd; background:#f0f6ff; color:#0a58ca; }
.driver-calendar-person.is-active { border-color:#0d6efd; background:#0d6efd; color:#fff; box-shadow:0 2px 6px rgba(13,110,253,.28); }
.driver-calendar-person small { margin-top:.1rem; font-weight:500; opacity:.85; }
.driver-calendar-layout.has-driver-sidebar>.driver-calendar-toolbar { grid-column:2; grid-row:1; }
.driver-calendar-layout.has-driver-sidebar>.driver-calendar-shell { grid-column:2; grid-row:2; }
.driver-calendar-toolbar { display:grid; grid-template-columns:auto minmax(180px,1fr) auto auto; align-items:center; gap:.75rem; padding:.65rem 1rem; border-bottom:1px solid #dadce0; background:#fff; }
.driver-calendar-date { display:flex; align-items:center; justify-content:center; gap:.5rem; }
.driver-calendar-date .form-control { width:auto; }
.driver-calendar-shell { --hour-height:60px; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; background:#fff; }
.driver-calendar-head,.driver-calendar-grid { display:grid; grid-template-columns:64px minmax(220px,1fr); min-width:0; }
.driver-calendar-head.is-week,.driver-calendar-grid.is-week { grid-template-columns:64px repeat(7,minmax(150px,1fr)); min-width:1114px; }
.driver-calendar-head { flex:0 0 auto; overflow:hidden; border-bottom:1px solid #dadce0; background:#fff; }
.driver-calendar-head>div:first-child { position:relative; z-index:2; background:#fff; }
.driver-calendar-day-title { min-height:54px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-left:1px solid #dadce0; background:#fff; will-change:transform; }
.driver-calendar-day-title.is-today { color:#0d6efd; }
.driver-calendar-scroll { flex:1; min-height:0; overflow:auto; padding-right:16px; padding-bottom:16px; overscroll-behavior:contain; scrollbar-gutter:stable; background:#f1f3f4; }
.driver-calendar-scroll>.driver-calendar-grid { background:#fff; }
.driver-calendar-grid { height:calc(24 * var(--hour-height)); }
.driver-calendar-day { position:relative; min-width:0; border-left:1px solid #dadce0; }
.driver-calendar-shift { position:absolute; z-index:2; top:var(--shift-top); height:var(--shift-height); min-height:60px; left:4px; right:4px; overflow:hidden; padding:.45rem; border:2px solid #6ea8fe; border-radius:.7rem; background:#e7f1ff; box-shadow:0 2px 7px rgba(0,0,0,.12); pointer-events:none; }
.driver-calendar-shift.status-active { border-color:#198754; background:#d1e7dd; }
.driver-calendar-shift.status-ended { border-color:#adb5bd; background:#e9ecef; }
.driver-calendar-shift>header { position:sticky; top:0; z-index:2; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.25rem; padding-bottom:.3rem; background:inherit; }
.driver-calendar-shift>header small { font-weight:600; }
.driver-calendar-jobs { display:grid; gap:.3rem; }
.driver-calendar-job { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.45rem; width:100%; padding:.35rem .45rem; border:1px solid rgba(0,0,0,.15); border-left:4px solid #198754; border-radius:.4rem; background:#fff; text-align:left; font-size:.78rem; }
.driver-calendar-job.priority-red { border-left-color:#dc3545; }
.driver-calendar-job.priority-yellow { border-left-color:#ffc107; }
.driver-calendar-job.priority-green { border-left-color:#198754; }
.driver-calendar-job span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:991.98px) {
  .allocation-page .navbar,.driver-calendar-page .navbar { position:relative; z-index:1040; }
  .allocation-page #navbarSupportedContent,.driver-calendar-page #navbarSupportedContent {
    position:absolute;
    z-index:1045;
    top:100%;
    right:0;
    left:0;
    padding:.65rem 1rem 1rem;
    border-top:1px solid rgba(255,255,255,.25);
    background:var(--primary-color-header);
    box-shadow:0 6px 12px rgba(0,0,0,.22);
  }
}
@media (max-width:700px) {
  .driver-calendar-layout { grid-template-rows:auto minmax(0,1fr); }
  .driver-calendar-toolbar { grid-template-columns:1fr 1fr; gap:.45rem; padding:.5rem; }
  .driver-calendar-toolbar .calendar-nav-button { min-width:0; padding:.45rem; font-size:.82rem; }
  .driver-calendar-date { grid-column:1 / -1; grid-row:1; }
  .driver-calendar-toolbar .btn-group { grid-column:1 / -1; grid-row:2; }
  .driver-calendar-toolbar>a:first-child { grid-column:1; grid-row:3; }
  .driver-calendar-toolbar>a:last-child { grid-column:2; grid-row:3; }
  .driver-calendar-head.is-week,.driver-calendar-grid.is-week { grid-template-columns:54px repeat(7,minmax(125px,1fr)); min-width:929px; }
  .driver-calendar-head,.driver-calendar-grid { grid-template-columns:54px minmax(250px,1fr); }
  .driver-calendar-layout.has-driver-sidebar { grid-template-columns:132px minmax(0,1fr); }
  .driver-calendar-sidebar { padding:.55rem .4rem; }
  .driver-calendar-sidebar h1 { padding:.25rem; font-size:.9rem; }
  .driver-calendar-person { min-height:46px; padding:.5rem; font-size:.78rem; }
}