:root {
  --ink: #10233e; --muted: #64748b; --line: #dce4ee; --paper: #ffffff;
  --bg: #f3f6fa; --blue: #1769aa; --blue-dark: #0d3f68; --cyan: #30a6b7;
  --red: #b42318; --red-bg: #fff1f0; --gold: #a15c00; --gold-bg: #fff7e6;
  font-family: "Yu Gothic UI", "Segoe UI", sans-serif; color: var(--ink); background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 90% -20%, #d9edf5 0, transparent 40%), var(--bg); }
.topbar { min-height: 92px; padding: 22px max(28px, calc((100vw - 1280px)/2)); display: flex; align-items: center; justify-content: space-between; color: white; background: linear-gradient(120deg, #0b2039, #143f62 68%, #176983); box-shadow: 0 8px 28px #19324e26; }
h1,h2,p { margin-top: 0; } h1 { margin-bottom: 0; font-size: 25px; letter-spacing: .03em; } h2 { margin-bottom: 8px; font-size: 20px; }
.eyebrow,.section-label { margin-bottom: 5px; font-size: 10px; font-weight: 800; letter-spacing: .18em; color: #65ccdc; }
.health { display: flex; gap: 8px; align-items: center; font-size: 12px; } .health span { width: 10px; height: 10px; border-radius: 50%; background: #f1b94d; box-shadow: 0 0 0 4px #ffffff1c; }
.health button { height: 30px; margin-left: 8px; padding: 0 10px; border-color: #ffffff55; color: white; background: #ffffff12; font-size: 10px; }
main { width: min(1280px, calc(100% - 40px)); margin: 28px auto 60px; }
.card { background: var(--paper); border: 1px solid #e2e8f0; border-radius: 14px; box-shadow: 0 8px 30px #1e3a5f0b; }
.hero { padding: 26px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 4px solid var(--cyan); }
.hero > div:first-child { max-width: 700px; } .hero p:not(.section-label) { margin-bottom: 0; color: var(--muted); }
.control-stack { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; min-width: 440px; }
label { display: grid; gap: 6px; font-size: 11px; color: var(--muted); font-weight: 700; }
select,input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 8px; color: var(--ink); background: white; }
.actor-role { color: var(--blue); font-size: 10px; font-weight: 800; }
.metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin: 16px 0; }
.metrics article { padding: 15px 18px; border-radius: 12px; background: #eaf1f7; border: 1px solid #dbe6ef; }
.metrics span { display: block; color: var(--muted); font-size: 11px; font-weight: 700; } .metrics strong { display: block; margin-top: 5px; font-size: 23px; }
.operation-calendar { margin: 16px 0; padding: 18px; } .calendar-controls { display: flex; align-items: center; gap: 7px; } .calendar-controls button { width: 38px; padding: 0; font-size: 22px; } .calendar-controls input { width: 150px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(115px,1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); overflow-x: auto; }
.calendar-weekday,.calendar-day { min-width: 115px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .calendar-weekday { padding: 7px; text-align: center; color: var(--muted); background: #f6f8fb; font-size: 11px; font-weight: 800; }
.calendar-day { min-height: 112px; padding: 7px; background: white; cursor: pointer; } .calendar-day.outside { background: #f8fafc; color: #94a3b8; } .calendar-day:hover { background: #f0f8fb; } .calendar-date { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 800; }
.calendar-trip { display: block; width: 100%; height: auto; min-height: 27px; margin: 3px 0; padding: 5px 6px; border: 0; border-left: 4px solid var(--route-border, var(--blue)); border-radius: 5px; text-align: left; color: var(--route-text, var(--blue-dark)); background: var(--route-bg, #eaf4fb); font-size: 10px; white-space: normal; } .calendar-trip.single { border-left-color: var(--gold); color: var(--gold); background: var(--gold-bg); }
.operation-plan-form { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; align-items: end; margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; } .operation-plan-form h3 { margin: 0; font-size: 15px; } .operation-plan-form .form-note { grid-column: 1 / -1; margin: 0; }
.weekday-select { display: flex; grid-column: span 2; gap: 7px; min-height: 62px; margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; } .weekday-select legend { color: var(--muted); font-size: 11px; font-weight: 700; } .weekday-select label { display: flex; align-items: center; gap: 3px; } .weekday-select input { width: 17px; height: 17px; }
.operation-plan-form .checkbox-label { display: flex; grid-column: span 2; align-items: center; min-height: 40px; padding: 9px 11px; border: 1px solid #9ad9c0; border-radius: 8px; color: #17602d; background: #eefaf4; }
.operation-plan-form .checkbox-label input { flex: 0 0 auto; width: 18px; height: 18px; padding: 0; }
.operation-period-delete { display: grid; grid-column: 1 / -1; grid-template-columns: auto minmax(150px,220px) minmax(150px,220px) auto; align-items: end; gap: 10px; padding: 12px; border: 1px solid #f0ba78; border-radius: 8px; background: #fff7e8; }
.operation-period-delete[hidden] { display: none; }
.operation-period-delete strong { align-self: center; color: #884900; }
.operation-period-delete small { grid-column: 1 / -1; color: #884900; }
.toolbar { padding: 14px 16px; display: flex; justify-content: space-between; gap: 12px; }
.job-panel { margin-top: 14px; padding: 16px 18px; }
.job-panel h2 { margin: 0; font-size: 17px; }
.optimizer-controls { display: grid; grid-template-columns: repeat(auto-fit,minmax(145px,1fr)); gap: 12px; margin: 14px 0; }
.optimizer-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.optimizer-controls input,.optimizer-controls select { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: white; }
.attendance-limits { margin-top: 14px; padding: 18px; }
.attendance-global { display: grid; grid-template-columns: repeat(2,minmax(140px,220px)) repeat(2,auto); gap: 10px; align-items: end; margin-bottom: 8px; }
.attendance-global label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; }
.attendance-global input,.attendance-limits input[type="number"] { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: white; min-width: 90px; }
.attendance-limits .table-wrap { margin-top: 12px; max-height: 420px; }
.attendance-override-cell { white-space: nowrap; }
.attendance-override { width: 18px; height: 18px; vertical-align: middle; }
.attendance-range-status { display: inline-flex; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.attendance-range-status.ok { color: #16734a; background: #e7f7ef; }
.attendance-range-status.ng { color: var(--red); background: var(--red-bg); }
.job-status { font-weight: 800; color: var(--blue-dark); }
.job-status.failed,.job-status.cancelled { color: var(--red); }
.job-status.succeeded { color: #16734a; }
.job-error { display: block; max-width: 420px; margin-top: 3px; color: var(--red); font-size: 10px; }
.manual { margin-top: 14px; padding: 14px 16px; display: grid; grid-template-columns: 1.35fr 1.2fr 1.2fr .55fr auto; gap: 12px; align-items: end; }
.manual h2 { margin: 0; font-size: 16px; } .manual .section-label { margin-bottom: 3px; }
.schedule-create { grid-template-columns: 1.2fr 1.15fr .8fr .8fr 1.4fr auto; }
.emergency-form { grid-template-columns: 1.25fr .9fr 1.2fr 1.1fr 1fr 1.35fr auto; border-top: 4px solid var(--red); } .emergency-form .form-note { grid-column: 1 / -1; margin: 0; }
button { height: 39px; padding: 0 15px; border: 1px solid #c9d5e2; border-radius: 8px; background: white; color: var(--ink); font-weight: 700; cursor: pointer; }
button:hover { transform: translateY(-1px); box-shadow: 0 5px 15px #163b6320; } button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
button.primary { color: white; border-color: var(--blue); background: var(--blue); } button.danger { color: white; border-color: var(--red); background: var(--red); } button.quiet { height: 34px; color: var(--blue); }
button.mini { height: 29px; padding: 0 9px; font-size: 10px; color: var(--red); }
.workflow-actions,.toolbar > div { display: flex; gap: 8px; }
.message { margin: 14px 0; padding: 12px 15px; border-radius: 9px; background: #e8f6f8; border: 1px solid #a6dce3; color: #164e59; white-space: pre-wrap; }
.message.error { background: var(--red-bg); border-color: #f5b7b1; color: var(--red); }
.save-status { margin: 10px 0 14px; padding: 11px 14px; border: 1px solid #a6dce3; border-radius: 9px; background: #e8f6f8; color: #164e59; font-weight: 700; white-space: pre-wrap; }
.save-status.saving { background: #fff8db; border-color: #e9cf70; color: #6b5200; }
.save-status.success { background: #e8f7ed; border-color: #9bd3ab; color: #17602d; }
.save-status.error { background: var(--red-bg); border-color: #f5b7b1; color: var(--red); }
.master-data { margin-top: 16px; padding: 18px; }
.master-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.master-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.master-form h3 { grid-column: 1 / -1; margin: 0; color: var(--blue-dark); font-size: 15px; }
.master-form button { justify-self: start; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.span-two { grid-column: 1 / -1; }
.direct-trip-form { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: end; }
.operation-template-form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: end; margin: 14px 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.operation-template-form h3,.operation-template-form .span-all,.operation-template-form .form-note { grid-column: 1 / -1; margin: 0; }
.operation-template-form textarea { width: 100%; font-family: ui-monospace, Consolas, monospace; resize: vertical; }
.operation-template-form .form-actions { display: flex; gap: 8px; align-items: center; }
.operation-segment-section { display: grid; gap: 10px; padding: 14px; border: 1px solid #b8cddd; border-radius: 9px; background: white; }
.operation-segment-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.operation-segment-head h4 { margin: 0; color: var(--blue-dark); font-size: 14px; }
.operation-segment-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.operation-segment-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 9px 10px; border: 1px solid #9ad9c0; border-radius: 7px; background: #eefaf4; font-size: 10px; }
.operation-segment-summary span { padding-right: 7px; border-right: 1px solid #b8dcca; }
.operation-segment-summary.warning { border-color: #f0ba78; background: #fff7e8; }
.operation-segment-summary em { width: 100%; color: #a44c00; font-style: normal; font-weight: 800; }
.operation-segment-table { min-width: 980px; }
.operation-segment-table th { padding: 7px; }
.operation-segment-table td { padding: 7px; vertical-align: middle; }
.operation-segment-table select,.operation-segment-table input { min-width: 105px; height: 35px; padding: 6px 7px; font-size: 11px; }
.operation-segment-table .operation-segment-location { min-width: 270px; }
.operation-segment-table .operation-segment-minutes { min-width: 75px; width: 75px; }
.operation-segment-start,.operation-segment-end { min-width: 78px; white-space: nowrap; color: var(--blue-dark); font-weight: 800; }
.segment-row-actions { display: flex; gap: 4px; white-space: nowrap; }
.segment-row-actions button { min-width: 30px; padding: 5px 7px; }
.form-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.segment-evidence summary { color: var(--blue); cursor: pointer; font-weight: 700; } .segment-evidence div { min-width: 320px; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.grid { display: grid; grid-template-columns: 1.55fr .85fr; gap: 16px; margin-top: 16px; align-items: start; }
.panel { padding: 18px; } .wide { grid-row: span 2; } .full { grid-column: 1 / -1; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .panel-head h2 { margin: 0; }
.panel-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 999px; background: #eaf1f7; color: var(--blue-dark); font-size: 11px; font-weight: 800; }
.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 12px; } th { padding: 10px; text-align: left; color: var(--muted); background: #f6f8fb; border-bottom: 1px solid var(--line); } td { padding: 11px 10px; border-bottom: 1px solid #edf1f5; vertical-align: top; }
.assignment-draggable { cursor: grab; transition: background .15s, outline-color .15s; }
.assignment-draggable:hover,.assignment-draggable:focus { background: #f0f8fb; outline: 2px solid #83cbd6; outline-offset: -2px; }
.assignment-draggable.dragging { opacity: .48; cursor: grabbing; }
.assignment-draggable.drop-candidate { background: #e7f7ef; outline: 3px solid #36a26b; outline-offset: -3px; }
.assignment-draggable.drop-forbidden { background: var(--red-bg); outline: 3px solid var(--red); outline-offset: -3px; }
.assignment-date-group td { padding: 0; border-bottom: 1px solid #d9e3ec; background: #eef4f8; }
.assignment-date-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 13px; border: 0; border-radius: 0; color: var(--blue-dark); background: transparent; text-align: left; }
.assignment-date-toggle::before { content: "▶"; color: var(--cyan); font-size: 10px; transition: transform .15s; }
.assignment-date-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
.assignment-date-toggle span { font-size: 13px; font-weight: 800; }
.assignment-date-toggle small { color: var(--muted); font-size: 10px; font-weight: 700; }
.assignment-date-toggle:hover,.assignment-date-toggle:focus-visible { background: #dfeaf2; outline: 2px solid #83cbd6; outline-offset: -2px; }
.assignment-date-row[hidden] { display: none; }
.validation-list,.driver-list { display: grid; gap: 9px; }
.violation { padding: 10px 11px; border-left: 4px solid var(--red); border-radius: 6px; background: var(--red-bg); font-size: 12px; } .violation strong { display: block; margin-bottom: 3px; }
.driver { padding: 10px 12px; background: #f7f9fc; border: 1px solid #e7edf4; border-radius: 8px; } .driver.inactive { opacity: .68; background: #f1f3f5; } .driver strong { display: block; font-size: 13px; } .driver span { color: var(--muted); font-size: 11px; } .driver-actions { display: flex; gap: 6px; margin-top: 8px; } .driver-actions button { color: var(--blue); }
.preference-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } .preference { padding: 3px 7px; border-radius: 999px; background: #e8f2f8; color: var(--blue-dark); font-size: 10px; font-style: normal; font-weight: 800; } .preference.off_required { background: var(--red-bg); color: var(--red); } .preference.off_preferred { background: var(--gold-bg); color: var(--gold); } .preference.work_preferred { background: #e7f7ef; color: #16734a; } .preference.regular_day_off { background: #e8f1ff; color: #17469e; } .preference.requested_day_off { background: #f1e9ff; color: #6b36a8; } .preference.paid_leave { background: #fff0df; color: #9a4f00; }
.preference-delete { width: 19px; height: 19px; margin-left: 4px; padding: 0; border: 0; color: inherit; background: transparent; font-size: 12px; }
.workflow-history { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 9px; } .history-event { padding: 10px 12px; border-left: 4px solid var(--cyan); border-radius: 7px; background: #f7f9fc; } .history-event strong,.history-event span { display: block; } .history-event span { margin-top: 3px; color: var(--muted); font-size: 10px; } .history-event p { margin: 7px 0 0; font-size: 11px; }
.snapshot-summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid #9ad9c0; border-radius: 9px; background: #eefaf4; } .snapshot-summary strong,.snapshot-summary span { display: block; } .snapshot-summary span { margin-top: 4px; color: #356b55; font-family: Consolas, monospace; font-size: 10px; word-break: break-all; } .snapshot-summary button { white-space: nowrap; color: var(--blue); font-size: 11px; }
.snapshot-actions { display: flex; align-items: end; justify-content: flex-end; flex-wrap: wrap; gap: 7px; } .snapshot-actions label { min-width: 142px; } .snapshot-actions input { height: 39px; }
.cumulative-value { display: grid; gap: 2px; min-width: 92px; } .cumulative-value strong { color: var(--blue-dark); } .cumulative-value small { color: var(--muted); } .cumulative-value.limit-exceeded { padding: 5px 7px; border-radius: 6px; background: var(--red-bg); } .cumulative-value.limit-exceeded strong,.cumulative-value.limit-exceeded small { color: var(--red); }
.route-path { display: flex; align-items: center; gap: 5px; min-width: 520px; } .route-path span { display: grid; gap: 2px; white-space: nowrap; } .route-path b { font-size: 11px; } .route-path small { color: var(--muted); font-size: 9px; } .route-path i { color: var(--cyan); font-style: normal; font-weight: 800; }
.roster-table th:first-child,.roster-table td:first-child { position: sticky; left: 0; z-index: 1; min-width: 150px; background: white; } .roster-table thead th:first-child { background: #f6f8fb; }
.roster-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: -2px 0 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; }
.roster-legend-item { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; }
.roster-legend-item i { width: 13px; height: 13px; border: 2px solid var(--route-border); border-radius: 3px; background: var(--route-bg); }
.roster-legend-item i.leave-regular { border-color: #2563eb; background: #e8f1ff; } .roster-legend-item i.leave-requested { border-color: #7c3aed; background: #f1e9ff; } .roster-legend-item i.leave-paid { border-color: #d97706; background: #fff0df; }
.transfer-day-form { display: grid; grid-template-columns: repeat(5,minmax(150px,1fr)) auto; align-items: end; gap: 9px; margin-bottom: 12px; padding: 12px; border: 1px solid #8fd3c1; border-radius: 8px; background: #effaf6; } .transfer-day-form .form-note { grid-column: 1 / -1; margin: 0; }
.roster-transfer-day { display: grid; gap: 2px; margin: 2px 0; padding: 6px 8px; border-left: 4px solid #0f766e; border-radius: 5px; background: #dff7f1; color: #115e59; } .roster-transfer-day strong { font-size: 11px; } .roster-transfer-day small { font-size: 9px; } .roster-transfer-delete { justify-self: start; height: 23px; padding: 0 6px; color: #9f1239; font-size: 9px; }
.roster-leave { display: grid; gap: 2px; margin: 2px 0; padding: 6px 8px; border-left: 4px solid #64748b; border-radius: 5px; font-size: 10px; } .roster-leave strong { font-size: 11px; } .roster-leave small { font-size: 9px; } .roster-leave.regular_day_off { border-color: #2563eb; background: #e8f1ff; color: #17469e; } .roster-leave.requested_day_off { border-color: #7c3aed; background: #f1e9ff; color: #6b36a8; } .roster-leave.paid_leave { border-color: #d97706; background: #fff0df; color: #9a4f00; } .roster-leave.off_required { border-color: #c53030; background: var(--red-bg); color: var(--red); }
.roster-cell { min-width: 150px; } .roster-duty { display: grid; gap: 2px; margin: 2px 0; padding: 6px 8px; border-left: 4px solid var(--route-border); border-radius: 5px; background: var(--route-bg); } .roster-duty strong { color: var(--route-text); font-size: 11px; } .roster-duty small { color: #475569; font-size: 9px; } .roster-duty-editable { cursor: grab; } .roster-duty-editable:hover,.roster-duty-editable:focus,.roster-duty-editable.selected { outline: 3px solid #2563eb; outline-offset: -2px; } .roster-duty-editable.dragging { opacity: .48; cursor: grabbing; } .roster-drop-cell { transition: background .15s, outline-color .15s; cursor: pointer; } .roster-drop-cell:hover { background: #f0f8fb; } .roster-drop-cell.roster-drop-candidate { background: #e7f7ef; outline: 3px solid #36a26b; outline-offset: -3px; } .roster-drop-cell.roster-drop-forbidden { background: var(--red-bg); outline: 3px solid var(--red); outline-offset: -3px; } .roster-off { color: #a0aec0; } .roster-unassigned td { background: var(--red-bg); } .roster-unassigned .roster-duty { outline: 2px solid var(--red); outline-offset: -2px; }
.route-color-0 { --route-border: #2563eb; --route-bg: #e8f1ff; --route-text: #17469e; }
.route-color-1 { --route-border: #16835f; --route-bg: #e8f7ee; --route-text: #116044; }
.route-color-2 { --route-border: #c46a00; --route-bg: #fff3df; --route-text: #884900; }
.route-color-3 { --route-border: #7c3aed; --route-bg: #f3ecff; --route-text: #5b24b5; }
.route-color-4 { --route-border: #c83a5b; --route-bg: #ffecef; --route-text: #922440; }
.route-color-5 { --route-border: #0f8f88; --route-bg: #e4f8f7; --route-text: #0b6762; }
.route-color-6 { --route-border: #a27600; --route-bg: #fff8cc; --route-text: #735400; }
.route-color-7 { --route-border: #4f46b5; --route-bg: #eceeff; --route-text: #39328a; }
.route-color-8 { --route-border: #9a5b35; --route-bg: #f7eee8; --route-text: #704126; }
.route-color-9 { --route-border: #1684ad; --route-bg: #e7f7fd; --route-text: #0f607e; }
.route-color-10 { --route-border: #526174; --route-bg: #edf2f7; --route-text: #384557; }
.route-color-11 { --route-border: #678f20; --route-bg: #eff8df; --route-text: #486517; }
.route-color-12 { --route-border: #b4238a; --route-bg: #fdebf8; --route-text: #811866; }
.route-color-13 { --route-border: #0875c1; --route-bg: #e7f4ff; --route-text: #07558b; }
.route-color-14 { --route-border: #317a28; --route-bg: #eaf7e8; --route-text: #245a1e; }
.route-color-15 { --route-border: #d14343; --route-bg: #ffeded; --route-text: #982e2e; }
.route-color-16 { --route-border: #756d00; --route-bg: #f8f6d9; --route-text: #575100; }
.route-color-17 { --route-border: #6b46c1; --route-bg: #f1ecfc; --route-text: #4e328e; }
.route-color-18 { --route-border: #007c91; --route-bg: #e3f6f9; --route-text: #005b6b; }
.route-color-19 { --route-border: #8f4e00; --route-bg: #faefe2; --route-text: #663800; }
.route-color-20 { --route-border: #ad2e77; --route-bg: #faeaf3; --route-text: #7c2055; }
.route-color-21 { --route-border: #2f6f6d; --route-bg: #e8f4f3; --route-text: #214f4e; }
.route-color-22 { --route-border: #8a6700; --route-bg: #fff5d6; --route-text: #624a00; }
.route-color-23 { --route-border: #3b5b92; --route-bg: #eaf0fa; --route-text: #2a4169; }
.empty { padding: 20px 8px; text-align: center; color: var(--muted); font-size: 12px; }
.readiness-pass { color: #16734a; font-weight: 800; } .readiness-fail { color: var(--red); font-weight: 800; }
footer { padding: 20px; text-align: center; color: var(--muted); font-size: 11px; }
@media (max-width: 900px) { .hero { align-items: stretch; flex-direction: column; } .control-stack { min-width: 0; } .grid,.master-grid { grid-template-columns: 1fr; } .direct-trip-form,.operation-plan-form,.transfer-day-form { grid-template-columns: 1fr 1fr; } .operation-period-delete { grid-template-columns: 1fr 1fr; } .operation-period-delete small { grid-column: 1 / -1; } .attendance-global { grid-template-columns: 1fr 1fr; } .attendance-global button { grid-column: 1 / -1; } .wide { grid-row: auto; } .manual,.schedule-create,.emergency-form { grid-template-columns: 1fr 1fr; } .emergency-form .form-note,.operation-plan-form .form-note,.transfer-day-form .form-note { grid-column: 1 / -1; } }
@media (max-width: 620px) { main { width: min(100% - 22px, 1280px); } .topbar { padding: 18px; } .health { display: none; } .metrics { grid-template-columns: 1fr 1fr; } .toolbar,.snapshot-summary,.panel-head { align-items: stretch; flex-direction: column; } .snapshot-actions { align-items: stretch; justify-content: flex-start; } .calendar-controls { flex-wrap: wrap; } .control-stack,.master-form,.direct-trip-form,.emergency-form,.operation-plan-form,.operation-period-delete,.attendance-global,.transfer-day-form { grid-template-columns: 1fr; } .operation-period-delete small { grid-column: auto; } .attendance-global button { grid-column: auto; } .master-form h3,.span-two,.emergency-form .form-note,.operation-plan-form .form-note,.transfer-day-form .form-note,.weekday-select { grid-column: auto; } }
.ai-assistant textarea { width: 100%; box-sizing: border-box; margin-top: .45rem; resize: vertical; }
.ai-assistant .form-actions { margin-top: .75rem; }
.ai-advice-result { margin-top: .9rem; padding: .9rem 1rem; border-left: 4px solid var(--accent, #246bfe); background: rgba(36,107,254,.07); border-radius: .35rem; }
.ai-advice-result p { margin: .4rem 0; }
.ai-advice-result small { display: block; opacity: .78; }

/* Production workspace and accessibility layer */
:root {
  --focus: #ffbf47;
  --surface-subtle: #f7f9fc;
  --nav-bg: #102f4d;
}
html { scroll-behavior: smooth; }
body { font-size: 16px; line-height: 1.55; }
.skip-link {
  position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 12px 16px;
  border-radius: 8px; color: #0b2039; background: #fff; font-weight: 800;
  box-shadow: 0 4px 18px #0005; transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
[hidden], .workspace-filtered { display: none !important; }
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid var(--focus) !important; outline-offset: 3px !important;
  box-shadow: 0 0 0 2px #10233e !important;
}
.topbar { min-height: 84px; padding-block: 18px; box-shadow: none; }
.brand { min-width: 0; }
.brand h1 { font-size: clamp(22px, 2.2vw, 29px); }
.eyebrow,.section-label { font-size: 11px; letter-spacing: .14em; }
.health { flex-wrap: wrap; justify-content: flex-end; font-size: 13px; }
.health button { min-height: 40px; height: auto; padding-inline: 14px; font-size: 13px; }
.workspace-nav {
  position: sticky; z-index: 50; top: 0; border-bottom: 1px solid #31506c;
  color: white; background: var(--nav-bg); box-shadow: 0 5px 16px #10233e20;
}
.workspace-nav-inner {
  width: min(1480px, calc(100% - 40px)); margin: 0 auto; display: flex;
  overflow-x: auto; scrollbar-width: thin;
}
.workspace-nav button {
  flex: 1 0 150px; min-height: 58px; height: auto; padding: 8px 16px;
  border: 0; border-bottom: 4px solid transparent; border-radius: 0;
  color: #dceaf5; background: transparent; font-size: 14px; text-align: left;
}
.workspace-nav button span { display: block; color: #8eb3ce; font-size: 10px; letter-spacing: .12em; }
.workspace-nav button:hover { transform: none; color: white; background: #ffffff12; box-shadow: none; }
.workspace-nav button[aria-selected="true"] { border-bottom-color: #62d4de; color: white; background: #ffffff16; }
.workspace-nav button[aria-selected="true"] span { color: #78e0e7; }
main { width: min(1480px, calc(100% - 40px)); margin-top: 24px; }
.hero { padding: 24px 28px; }
.hero h2 { font-size: clamp(20px, 2vw, 27px); line-height: 1.35; }
.hero p:not(.section-label) { font-size: 14px; }
.workspace-heading {
  display: flex; justify-content: space-between; align-items: end; gap: 18px;
  margin: 26px 0 12px; padding-bottom: 12px; border-bottom: 2px solid #b8cddd;
}
.workspace-heading h2 { margin: 0; font-size: 24px; }
.workspace-heading p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
.workspace-empty { padding: 18px; border: 2px dashed #9aacbd; border-radius: 10px; color: #44586e; background: #f8fafc; font-weight: 700; }
.keyboard-hint { white-space: nowrap; }
kbd { margin: 0 2px; padding: 2px 7px; border: 1px solid #b7c3d0; border-bottom-width: 2px; border-radius: 5px; color: var(--ink); background: white; font: 700 12px/1.5 "Segoe UI",sans-serif; }
.metrics article { min-height: 78px; padding: 14px 18px; }
.metrics span { font-size: 13px; }
.metrics strong { font-size: 25px; line-height: 1.2; }
.card { border-color: #ccd7e3; box-shadow: 0 3px 14px #1e3a5f0c; }
h2 { font-size: 21px; line-height: 1.4; }
h3 { line-height: 1.45; }
label,.optimizer-controls label,.attendance-global label { color: #4b5e73; font-size: 13px; line-height: 1.4; }
select,input,textarea { min-height: 44px; height: auto; padding: 9px 12px; border-color: #aebdcb; font: inherit; }
button { min-height: 44px; height: auto; padding: 8px 15px; font-size: 13px; line-height: 1.25; }
button.quiet { min-height: 40px; height: auto; }
button.mini { min-height: 34px; height: auto; font-size: 12px; }
button.danger { border-width: 2px; }
button:hover { transform: none; border-color: var(--blue); box-shadow: 0 3px 12px #163b6322; }
.toolbar { position: sticky; z-index: 40; top: 58px; flex-wrap: wrap; padding: 12px 16px; border-color: #adc2d3; }
.toolbar > div,.workflow-actions { flex-wrap: wrap; }
.message {
  position: sticky; z-index: 45; top: 126px; margin: 14px 0; padding: 14px 18px;
  border-width: 2px; font-weight: 700; box-shadow: 0 6px 20px #10233e22;
}
.panel-head { gap: 16px; }
.panel-head h2,.manual h2,.job-panel h2 { font-size: 20px; }
.panel-actions { min-width: max-content; }
.form-note,.operation-segment-head p,.comparison-summary { font-size: 12px; line-height: 1.65; }
.badge { min-height: 30px; padding-inline: 10px; font-size: 12px; }
.calendar-grid { scroll-margin-top: 130px; border-color: #bac8d5; }
.calendar-weekday { padding: 9px; color: #40546a; font-size: 12px; }
.calendar-date { font-size: 13px; }
.calendar-trip { min-height: 34px; padding: 7px 8px; font-size: 12px; line-height: 1.35; }
.calendar-trip[aria-pressed="true"] { outline: 3px solid #10233e; outline-offset: 2px; box-shadow: 0 0 0 3px var(--focus); }
.calendar-day:focus-within { outline: 3px solid var(--focus); outline-offset: -3px; }
.table-wrap {
  max-width: 100%; border: 1px solid #d5dee8; border-radius: 8px;
  overscroll-behavior-inline: contain; scrollbar-gutter: stable;
}
table { font-size: 13px; line-height: 1.5; }
th { position: sticky; z-index: 2; top: 0; padding: 11px 10px; color: #415469; background: #eef3f7; }
td { padding: 12px 10px; }
tbody tr:nth-child(even):not(.assignment-date-group):not(.roster-unassigned) td { background-color: #fbfcfe; }
.empty { font-size: 13px; }
.driver strong { font-size: 14px; }
.driver span,.history-event p { font-size: 12px; }
.driver,.violation,.history-event { font-size: 13px; line-height: 1.55; }
.preference,.attendance-range-status,.roster-legend-item { font-size: 11px; }
.operation-segment-summary { font-size: 12px; }
.operation-segment-table select,.operation-segment-table input { min-height: 40px; height: auto; font-size: 12px; }
.operation-segment-head h4 { font-size: 16px; }
.grid { grid-template-columns: minmax(0,1.6fr) minmax(320px,.8fr); }
footer { padding: 26px 20px; font-size: 12px; }

@media (max-width: 900px) {
  .workspace-nav-inner { width: 100%; }
  .toolbar { top: 58px; }
  .workspace-heading { align-items: start; flex-direction: column; }
  .keyboard-hint { display: none; }
  .grid { grid-template-columns: 1fr; }
  .panel-actions { min-width: 0; }
}
@media (max-width: 620px) {
  main { width: min(100% - 22px, 1480px); margin-top: 14px; }
  .topbar { min-height: 0; align-items: flex-start; gap: 12px; padding: 14px 12px; }
  .brand h1 { font-size: 20px; }
  .health { display: flex; max-width: 48%; font-size: 11px; }
  .health button { width: 100%; min-height: 36px; }
  .workspace-nav button { flex-basis: 132px; min-height: 54px; padding-inline: 12px; font-size: 13px; }
  .hero { padding: 19px 17px; }
  .control-stack { min-width: 0; }
  .metrics { gap: 8px; }
  .metrics article { min-height: 70px; padding: 11px 13px; }
  .metrics strong { font-size: 21px; }
  .workspace-heading h2 { font-size: 21px; }
  .toolbar { position: static; }
  .toolbar > div,.workflow-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .message { top: 60px; }
  .panel,.operation-calendar,.attendance-limits,.job-panel,.master-data { padding: 15px; }
  .panel-head { gap: 10px; }
  .panel-head > div:last-child { align-self: flex-start; }
  .calendar-grid { grid-template-columns: repeat(7,minmax(108px,1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media (forced-colors: active) {
  .calendar-trip,.roster-duty,.roster-leave,.badge { border: 2px solid CanvasText; }
  .health span { border: 2px solid CanvasText; }
}