:root {
  --navy: #12304a; --navy-2: #1d4668; --ink: #17212b; --muted: #657586;
  --line: #d8e0e8; --surface: #fff; --background: #eef2f6; --blue: #2176ae;
  --blue-soft: #e3f1fb; --green: #23865f; --red: #c43e42; --amber: #b86d08;
  --shadow: 0 8px 25px rgba(20, 45, 65, .09); --radius: 12px;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--background); }
body { margin: 0; color: var(--ink); background: var(--background); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.topbar { height: 64px; display: flex; align-items: center; gap: 26px; padding: 0 24px; background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px #09233833; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; letter-spacing: -.01em; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--navy); background: #fff; font-weight: 900; box-shadow: inset 0 0 0 2px #ffffff55; }
.main-nav { display: flex; align-items: center; gap: 2px; height: 100%; }
.main-nav > a, .nav-more > summary { padding: 10px 11px; border-radius: 7px; color: #d9e7f1; font-weight: 600; list-style: none; cursor: pointer; }
.main-nav > a:hover, .nav-more > summary:hover { color: #fff; background: #ffffff13; }
.nav-more { position: relative; }
.nav-more summary::-webkit-details-marker { display: none; }
.nav-more[open] > div { position: absolute; right: 0; top: 45px; width: 190px; padding: 7px; border-radius: 10px; background: #fff; color: var(--ink); box-shadow: var(--shadow); border: 1px solid var(--line); }
.nav-more[open] > div a { display: block; padding: 9px 10px; border-radius: 6px; }
.nav-more[open] > div a:hover { background: var(--blue-soft); }
.user-menu { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 13px; color: #d9e7f1; }
.user-menu form { margin: 0; }
.link-button { border: 0; background: transparent; color: #fff; padding: 5px; }
.page { width: min(1440px, calc(100% - 40px)); margin: 0 auto; padding: 32px 0 60px; }
.board-page { min-height: calc(100vh - 64px); }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(25px, 3vw, 36px); margin-bottom: 8px; letter-spacing: -.035em; }
h2 { letter-spacing: -.025em; }
.eyebrow { display: block; margin-bottom: 4px; color: var(--blue); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .11em; }
.muted { color: var(--muted); }.small { font-size: 12px; }.nowrap { white-space: nowrap; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 14px; border: 1px solid transparent; border-radius: 8px; font-weight: 700; transition: .15s ease; }
.button:hover { transform: translateY(-1px); filter: brightness(.98); }
.button:disabled { cursor: default; opacity: .78; transform: none; }
.button.primary { background: var(--blue); color: #fff; }
.button.secondary { background: #fff; border-color: var(--line); color: var(--ink); }
.button.ghost { background: transparent; color: var(--navy); border-color: transparent; }
.button.success { background: var(--green); color: #fff; }.button.danger { background: var(--red); color: #fff; }.button.warning { background: #f0a127; color: #302002; }
.button.small { min-height: 31px; padding: 5px 9px; font-size: 12px; }.button.wide { width: 100%; }
.icon-button { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line); background: #fff; font-size: 19px; }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 24px; }
.page-heading p { color: var(--muted); max-width: 720px; margin-bottom: 0; }
.back-link { display: inline-block; color: var(--blue); margin-bottom: 12px; }
.messages { position: fixed; z-index: 500; top: 75px; left: 50%; transform: translateX(-50%); width: min(600px, calc(100% - 30px)); }
.message { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--blue); padding: 12px 15px; border-radius: 9px; box-shadow: var(--shadow); margin-bottom: 8px; }
.message.success { border-left-color: var(--green); }.message.error { border-left-color: var(--red); }
.table-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { background: #f5f8fa; color: #4b5e70; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; white-space: nowrap; }
th, td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; } tr.inactive { opacity: .58; }
.status-pill { display: inline-flex; align-items: center; border: 1px solid #ccd7e0; border-radius: 99px; background: #f3f6f8; padding: 4px 8px; color: #435464; font-size: 11px; font-weight: 750; white-space: nowrap; }
.status-pill.good, .status-approved { background: #e1f5eb; color: #146343; border-color: #a9dec7; }.status-rejected { background: #fde8e8; color: #9d292d; border-color: #f4b9bb; }.status-requested { background: #fff3d8; color: #855307; border-color: #f1d18e; }
.feature-list { display: flex; flex-wrap: wrap; gap: 4px; }
.feature { display: inline-flex; align-items: center; justify-content: center; min-width: 23px; min-height: 23px; border-radius: 6px; color: var(--feature, #1d4668); background: color-mix(in srgb, var(--feature, #1d4668) 13%, white); font-size: 13px; font-weight: 800; }
.feature-list.large .feature { padding: 6px 9px; gap: 5px; }
.form-card, .narrow-card { max-width: 840px; margin: 0 auto; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.narrow-card { max-width: 580px; }
.stacked-form { display: grid; gap: 18px; }
.stacked-form > div { display: grid; gap: 6px; }
label, .stacked-form label { font-weight: 700; font-size: 13px; color: #35495c; }
input[type=text], input[type=password], input[type=search], input[type=number], input[type=date], input[type=url], input[type=email], select, textarea { width: 100%; padding: 10px 11px; border: 1px solid #becbd6; border-radius: 7px; background: #fff; color: var(--ink); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #2176ae22; }
textarea { resize: vertical; }
.stacked-form ul { margin: 4px 0; padding-left: 20px; color: var(--muted); }
.errorlist { color: var(--red) !important; }.form-actions { display: flex !important; justify-content: flex-end; flex-direction: row !important; gap: 8px !important; }
.form-intro { margin: 0; padding: 12px 14px; border-radius: 8px; background: var(--blue-soft); color: #315a76; line-height: 1.5; }.form-extra-action { display: flex !important; justify-content: flex-end; }.inline-link { color: var(--blue); font-weight: 750; white-space: nowrap; }
.search-bar { display: flex; gap: 8px; max-width: 600px; margin-bottom: 18px; }
.number-small { width: 75px !important; }.sticky-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: 14px; margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; background: #ffffffee; backdrop-filter: blur(10px); }
.inline-decision { display: flex; gap: 5px; min-width: 360px; }.inline-decision input { min-width: 130px; }
.warning-text { color: var(--amber); font-size: 12px; font-weight: 650; }
.callout { padding: 12px 14px; border-radius: 8px; background: var(--blue-soft); color: #214e70; }.callout.warning { background: #fff4dc; color: #714804; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 840px; margin: 0 auto 18px; }.stat { padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow); }.stat span { color: var(--muted); }.stat strong { display: block; margin-top: 4px; font-size: 27px; }
.event-admin-grid { display: grid; gap: 12px; }.event-admin-card { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); transition: .15s ease; }.event-admin-card:hover { transform: translateY(-1px); border-color: #9eb9cd; }.event-admin-symbol { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: #fff0d8; color: #875407; font-size: 23px; }.event-admin-heading { display: flex; justify-content: space-between; gap: 12px; }.event-admin-heading time { color: var(--muted); font-size: 12px; }.event-admin-body h2 { margin: 3px 0; font-size: 18px; }.event-admin-body p { margin: 0; color: #506475; }.event-admin-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 9px; color: var(--muted); font-size: 11px; }.event-admin-arrow { color: var(--blue); font-size: 22px; }.event-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); gap: 18px; align-items: start; }.event-detail-card, .event-photo-card { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow); }.detail-list { margin: 0; }.detail-list > div { display: grid; grid-template-columns: 125px 1fr; gap: 15px; padding: 13px 0; border-bottom: 1px solid var(--line); }.detail-list > div:last-child { border-bottom: 0; }.detail-list dt { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }.detail-list dd { margin: 0; }.preserve-lines { white-space: pre-wrap; }.event-photo-card h2 { margin-bottom: 13px; }.event-photo-card a { display: grid; gap: 9px; color: var(--blue); font-weight: 750; }.event-photo-card img { display: block; width: 100%; max-height: 520px; object-fit: contain; border-radius: 9px; background: #eef2f5; }.event-no-photo { min-height: 240px; display: grid; place-items: center; align-content: center; color: var(--muted); font-size: 35px; }.event-no-photo p { margin: 8px 0 0; font-size: 13px; }

/* Login */
.login-page { background: #e8eef3; }.login-page .page { min-height: 100vh; width: 100%; padding: 0; display: grid; place-items: center; }
.login-card { display: grid; grid-template-columns: 1.15fr .85fr; width: min(920px, calc(100% - 40px)); min-height: 520px; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 30px 70px #17344e24; }
.login-visual { padding: 64px; color: #fff; background: radial-gradient(circle at 85% 20%, #4f91bc 0 3%, transparent 25%), linear-gradient(145deg, #102b42, #1c5477); display: flex; flex-direction: column; justify-content: flex-end; }
.login-visual .eyebrow { color: #9bd5fa; }.login-visual h1 { font-size: 48px; line-height: 1.05; }.login-visual p { max-width: 380px; color: #d4e7f3; font-size: 16px; }
.login-form { padding: 56px 46px; display: flex; flex-direction: column; justify-content: center; gap: 9px; }.login-brand { color: var(--navy); margin-bottom: 32px; }.login-brand .brand-mark { color: #fff; background: var(--navy); }.login-form h2 { font-size: 28px; margin-bottom: 14px; }.login-form input { margin-bottom: 9px; }.form-error { margin-bottom: 8px; padding: 10px; background: #fde9e9; color: #94282c; border-radius: 7px; }

/* Planning board */
.board-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 22px 12px; background: #fff; border-bottom: 1px solid var(--line); }
.week-switcher, .toolbar-actions { display: flex; align-items: center; gap: 10px; }.week-switcher h1 { margin: 0; font-size: 23px; }.week-switcher .eyebrow { margin: 0; }.toolbar-actions { justify-content: flex-end; flex-wrap: wrap; }
.day-tabs { display: flex; gap: 5px; padding: 10px 22px; background: #fff; border-bottom: 1px solid var(--line); }
.day-tab { min-width: 115px; padding: 8px 15px; border-radius: 8px; color: var(--muted); position: relative; }.day-tab span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }.day-tab strong { color: var(--ink); font-size: 15px; }.day-tab:hover { background: #f2f6f9; }.day-tab.active { background: var(--navy); color: #cbe2f1; }.day-tab.active strong { color: #fff; }.tab-dot { position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: #f0a127; }.tab-dot.released { background: #54d69a; }
.empty-day { max-width: 650px; margin: 90px auto; text-align: center; padding: 50px; }.empty-day .empty-icon { width: 64px; height: 64px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 16px; background: var(--blue-soft); color: var(--blue); font-size: 32px; }.empty-day p { color: var(--muted); }
.planning-shell { display: grid; grid-template-columns: 315px minmax(0, 1fr); min-height: calc(100vh - 184px); align-items: start; }
.unplanned-panel { position: sticky; left: 0; top: 64px; z-index: 30; height: calc(100vh - 64px); overflow: hidden; display: flex; flex-direction: column; background: #f8fafc; border-right: 1px solid #cbd6df; box-shadow: 5px 0 14px #142c3f0b; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 8px; }.panel-heading h2 { margin: 0; font-size: 20px; }.count-badge { min-width: 27px; height: 27px; display: grid; place-items: center; border-radius: 99px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 800; }
.weight-summary { margin: 0 12px 8px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #b7d3e6; border-radius: 8px; background: #e9f5fc; }.weight-summary span { color: #43627a; font-size: 11px; }.weight-summary strong { color: var(--navy); }
.drop-hint { padding: 0 16px; margin: 0 0 8px; color: var(--muted); font-size: 11px; line-height: 1.45; }.unplanned-list { overflow-y: auto; padding: 4px 10px 80px; flex: 1; }.unplanned-list.drag-over { background: #dceef9; }
.vehicle-scroll { min-width: 0; overflow-x: auto; padding: 10px 14px 40px; }.vehicle-columns { display: flex; align-items: flex-start; gap: 10px; min-width: max-content; }
.vehicle-column { width: 292px; flex: 0 0 292px; overflow: hidden; border: 1px solid #cbd6df; border-radius: 10px; background: #fff; box-shadow: 0 3px 12px #17344e0c; }.vehicle-column.subcontractor { border-top: 3px solid #bf7b2a; }
.vehicle-header { padding: 12px; border-bottom: 1px solid var(--line); background: #f9fbfc; }.vehicle-title, .vehicle-title > div { display: flex; align-items: center; gap: 8px; }.vehicle-title { justify-content: space-between; }.vehicle-title h2 { font-size: 16px; margin: 0; }.column-number { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 6px; background: var(--navy); color: #fff; font-size: 10px; font-weight: 800; }.vehicle-meta { display: flex; justify-content: space-between; margin: 7px 0 9px; color: var(--muted); font-size: 10px; }.compact-label { display: block; margin-top: 7px; color: #627485; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }.compact-label select, .compact-label textarea { margin-top: 3px; padding: 6px 7px; border-radius: 5px; font-size: 11px; text-transform: none; letter-spacing: 0; }.compact-label textarea { min-height: 42px; }.subcontractor-note { padding: 7px; border-radius: 5px; background: #fff1df; color: #7f4b0c; font-size: 10px; }
.tour-block { padding: 10px; border-bottom: 4px solid var(--background); }.tour-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }.tour-heading > div { display: flex; align-items: center; gap: 6px; }.tour-label { font-size: 13px; font-weight: 850; color: var(--navy); }.status-dot { color: var(--muted); font-size: 9px; }.tour-weight { text-align: right; }.tour-weight strong { display: block; font-size: 12px; }.tour-weight span { font-size: 9px; color: var(--muted); }.tour-weight.overweight strong, .tour-weight.overweight span { color: var(--red); }.capacity-bar { height: 4px; border-radius: 9px; background: #e6ecf1; overflow: hidden; margin-bottom: 7px; }.capacity-bar i { display: block; height: 100%; background: var(--green); }.tour-weight.overweight + .capacity-bar i { background: var(--red); }
.tour-slots { display: grid; gap: 4px; }.tour-slot { position: relative; min-height: 55px; padding: 4px 4px 4px 25px; display: flex; align-items: stretch; border: 1px dashed #c4d0d9; border-radius: 7px; background: #fafcfd; transition: .12s; }.tour-slot.drag-over { border: 2px solid var(--blue); background: #e8f4fb; }.tour-slot.occupied { padding: 3px 3px 3px 24px; border-style: solid; background: #fff; }.slot-number { position: absolute; left: 6px; top: 7px; color: #8998a5; font-size: 10px; font-weight: 800; }.slot-placeholder { margin: auto 0; color: #a5b0ba; font-size: 10px; }
.load-card { width: 100%; position: relative; padding: 8px; border: 1px solid #cbd7e1; border-left: 4px solid var(--blue); border-radius: 7px; background: #fff; box-shadow: 0 2px 5px #18334a0a; cursor: grab; user-select: none; }.load-card:active { cursor: grabbing; }.load-card.dragging { opacity: .35; }.load-card.overdue { border-left-color: var(--red); background: #fff9f9; }.card-top { display: flex; justify-content: space-between; gap: 5px; font-size: 10px; }.card-top strong { color: var(--navy); }.card-weight { white-space: nowrap; font-weight: 800; }.card-title { margin-top: 3px; font-size: 12px; font-weight: 750; line-height: 1.2; }.card-subtitle { margin-top: 2px; color: var(--muted); font-size: 9.5px; line-height: 1.25; }.card-meta { display: flex; justify-content: space-between; gap: 5px; margin-top: 5px; color: #5c6e7d; font-size: 9px; }.load-card .feature-list { margin-top: 4px; }.load-card .feature { min-width: 18px; min-height: 18px; font-size: 10px; }.date-overdue { color: var(--red); font-weight: 750; }.overdue-label { position: absolute; right: 7px; bottom: 7px; color: var(--red); font-size: 8px; font-weight: 850; text-transform: uppercase; }.original-date { margin-top: 3px; color: #8a5b13; font-size: 8.5px; font-weight: 750; }.unplanned-card { margin-bottom: 7px; }.empty-list { text-align: center; color: var(--muted); padding: 40px 20px; }.empty-list span { font-size: 28px; color: var(--green); }
.return-load-row { display: grid; grid-template-columns: auto 1fr auto; gap: 5px; align-items: center; padding: 7px; margin-top: 7px; border: 1px dashed #c4d0d9; border-radius: 6px; color: #667886; font-size: 9px; }.return-load-row.filled { border-style: solid; background: #f2f8ed; color: #3f6d2b; }.return-load-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.return-load-row a { font-size: 15px; color: var(--blue); }.tour-print { display: block; margin-top: 6px; color: var(--blue); font-size: 9px; text-align: right; }
.context-menu { position: fixed; z-index: 800; min-width: 230px; padding: 6px; border: 1px solid var(--line); border-radius: 9px; background: #fff; box-shadow: 0 16px 40px #142e4340; }.context-menu button { display: block; width: 100%; padding: 9px 10px; text-align: left; border: 0; border-radius: 6px; background: transparent; }.context-menu button:hover { background: var(--blue-soft); }.context-menu button[hidden] { display: none; }
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 900; }.toast { max-width: 380px; padding: 12px 15px; margin-top: 8px; border-radius: 8px; background: #152e42; color: #fff; box-shadow: var(--shadow); }.toast.error { background: #9f2e33; }

/* Driver PWA */
.driver-page { background: #f1f5f7; }.driver-page .page { max-width: 860px; }.driver-hero { display: flex; align-items: center; justify-content: space-between; padding: 5px 4px 20px; }.driver-hero h1 { margin-bottom: 4px; }.driver-hero p { color: var(--muted); margin: 0; }
.language-switcher { display: flex; gap: 5px; }.language-switcher button { width: 39px; height: 35px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 19px; }.language-switcher button.active { border-color: var(--blue); background: var(--blue-soft); }
.sync-banner { display: flex; align-items: center; gap: 8px; padding: 11px 14px; margin-bottom: 18px; border: 1px solid #acd9c6; border-radius: 10px; background: #e9f8f1; color: #205e45; }.sync-banner.offline { border-color: #efcc8b; background: #fff5df; color: #80530a; }.sync-banner.error { border-color: #efb8ba; background: #fdeaea; color: #8a292d; }.sync-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }.sync-banner.offline .sync-dot { background: #d68710; }.sync-banner #sync-detail { color: inherit; opacity: .75; }.sync-banner .button { margin-left: auto; }
.driver-section { margin-bottom: 22px; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }.section-heading h2 { margin: 0; }.driver-days { display: grid; gap: 14px; }.driver-day-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }.driver-day-card > header { display: flex; justify-content: space-between; align-items: center; padding: 15px 17px; color: #fff; background: linear-gradient(120deg, var(--navy), var(--navy-2)); }.driver-day-card h3 { margin: 2px 0 0; font-size: 20px; }.date-kicker { color: #85bcdc; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.version-badge { padding: 4px 7px; border-radius: 6px; background: #ffffff1d; font-size: 11px; }.driver-day-card.changed { border: 2px solid #e59820; box-shadow: 0 0 0 4px #f7c66b33, var(--shadow); }.driver-day-card.changed .version-badge { background: #f0a127; color: #2f2108; }.change-label { display: inline-flex; margin-left: 6px; padding: 2px 5px; border-radius: 5px; background: #fff1d5; color: #7b4d07; font-size: 9px; font-weight: 850; text-transform: uppercase; }.driver-vehicle { display: flex; gap: 10px; padding: 13px 16px 4px; align-items: center; }.driver-vehicle > span { font-size: 22px; }.driver-vehicle strong, .driver-vehicle small { display: block; }.driver-vehicle small { color: var(--muted); }.driver-comment { margin: 9px 15px; padding: 9px 11px; border-radius: 7px; background: #fff5dc; color: #75500e; }
.driver-tour-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 15px 15px; }.driver-tour-summary { padding: 12px; border: 1px solid var(--line); border-radius: 10px; }.driver-tour-title { display: flex; justify-content: space-between; font-weight: 850; }.mini-stop-list { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 7px; }.mini-stop-list li { display: flex; align-items: center; gap: 8px; }.mini-stop-list li > span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: 10px; font-weight: 850; }.mini-stop-list strong, .mini-stop-list small { display: block; }.mini-stop-list strong { font-size: 11px; }.mini-stop-list small { color: var(--muted); font-size: 9px; }.empty-driver { padding: 45px; text-align: center; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); background: #fff; }.empty-driver > span { font-size: 35px; }
.notification-control { display: grid; justify-items: end; gap: 4px; }.notification-control small { display: block; width: 100%; max-width: 270px; color: var(--muted); font-size: 10px; text-align: right; white-space: normal; }.return-summary { display: flex; gap: 9px; align-items: center; padding: 9px; margin: 10px 0; border: 1px solid #bad6a9; border-radius: 8px; background: #f3faee; color: #355f24; }.return-summary > span { font-size: 21px; }.return-summary div { min-width: 0; }.return-summary strong, .return-summary small { display: block; }.return-summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.return-summary small { font-size: 9px; }
.event-section { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow); }.event-form { display: grid; gap: 13px; }.event-form label { display: grid; gap: 6px; }.checkbox-row { display: flex !important; align-items: center; gap: 8px; }.photo-field input { padding: 9px; border: 1px dashed var(--line); border-radius: 8px; }
.mobile-back { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }.mobile-back > a { color: var(--blue); font-weight: 750; }.tour-detail-hero { padding: 22px; margin-bottom: 18px; border-radius: 14px; background: linear-gradient(130deg, #102b42, #1d597d); color: #fff; box-shadow: var(--shadow); }.tour-detail-hero h1 { margin-bottom: 2px; }.tour-detail-hero p { color: #c8deec; }.tour-detail-hero .driver-comment { margin: 12px 0; color: #684307; }
.route-line { position: relative; }.route-line::before { content: ""; position: absolute; left: 20px; top: 22px; bottom: 25px; width: 3px; background: #b9ccda; }.route-stop { display: grid; grid-template-columns: 44px 1fr; gap: 10px; position: relative; margin-bottom: 16px; }.route-marker { position: relative; z-index: 2; }.route-marker span { width: 42px; height: 42px; display: grid; place-items: center; border: 4px solid #f1f5f7; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 850; }.route-content { padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow); }.route-heading { display: flex; justify-content: space-between; gap: 10px; }.route-heading h2 { margin: 0; font-size: 21px; }.project-name { color: var(--muted); margin: 4px 0 13px; }.address-card, .contact-card { display: flex; align-items: center; gap: 10px; padding: 12px; margin: 8px 0; border: 1px solid var(--line); border-radius: 9px; background: #f8fafb; }.address-card > span, .contact-card > span { font-size: 20px; }.address-card div, .contact-card div { flex: 1; }.address-card strong, .address-card small, .contact-card strong, .contact-card small { display: block; }.address-card small, .contact-card small { color: var(--blue); }.status-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }.local-status { margin-top: 8px; color: var(--muted); font-size: 11px; text-align: right; }.return-detail { margin: 16px 0; padding: 18px; border: 1px solid #bad6a9; border-radius: 13px; background: #f3faee; }.return-weight { display: flex; align-items: baseline; gap: 12px; padding: 10px 2px; }.return-weight strong { font-size: 19px; color: #315e21; }.return-weight span { color: #4d6b40; }.complete-tour { margin: 20px 0 50px; }.absence-cards { display: grid; gap: 8px; }.absence-cards article { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }.absence-cards article strong, .absence-cards article span { display: block; }.absence-cards article p { grid-column: 1 / -1; margin: 0; }

@media (max-width: 900px) {
  .topbar { padding: 0 14px; height: 57px; }.brand > span:last-child { display: none; }.main-nav { overflow-x: auto; }.main-nav > a { font-size: 12px; padding: 9px 8px; }.nav-more, .user-menu > span { display: none; }
  .page { width: min(100% - 24px, 860px); padding-top: 20px; }.login-card { grid-template-columns: 1fr; width: min(500px, calc(100% - 24px)); }.login-visual { display: none; }.login-form { padding: 40px 28px; }
  .planning-shell { grid-template-columns: 280px minmax(0, 1fr); }.unplanned-panel { top: 57px; height: calc(100vh - 57px); }.board-toolbar { align-items: flex-start; }.toolbar-actions { max-width: 45%; }
  .event-detail-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topbar { gap: 8px; }.brand-mark { width: 31px; height: 31px; }.user-menu { margin-left: 0; }.main-nav { flex: 1; }.main-nav > a { white-space: nowrap; }
  .page-heading, .driver-hero, .section-heading { align-items: flex-start; flex-direction: column; }.stat-grid { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }.stat { padding: 10px; }.stat strong { font-size: 21px; }.notification-control { justify-items: start; }.notification-control small { text-align: left; }
  .driver-tour-grid { grid-template-columns: 1fr; }.driver-page .page { width: calc(100% - 18px); }.sync-banner { flex-wrap: wrap; }.sync-banner #sync-detail { flex-basis: 70%; }.sync-banner .button { margin-left: 0; }
  .route-content { padding: 13px; }.route-stop { grid-template-columns: 38px 1fr; }.route-line::before { left: 17px; }.route-marker span { width: 36px; height: 36px; }.status-actions { grid-template-columns: 1fr; }
  .inline-decision { min-width: 280px; flex-wrap: wrap; }.table-card { margin-left: -5px; margin-right: -5px; }
  .event-admin-card { grid-template-columns: 42px 1fr; padding: 13px; }.event-admin-symbol { width: 40px; height: 40px; }.event-admin-arrow { display: none; }.event-admin-heading { display: grid; gap: 2px; }.detail-list > div { grid-template-columns: 1fr; gap: 4px; }.event-detail-card, .event-photo-card { padding: 16px; }
  .board-toolbar { flex-direction: column; }.toolbar-actions { max-width: none; justify-content: flex-start; }.day-tabs { overflow-x: auto; }.day-tab { min-width: 100px; }
}