@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Montserrat:wght@600;700&display=swap'); :root {
--brand-500:#ff4900;
--brand-600:#e64500;
--brand-700:#e42e15;
--ink-900:#101828;
--ink-800:#1f2937;
--ink-700:#334155;
--ink-600:#475569;
--ink-500:#64748b;
--ink-300:#d0d7e1;
--ink-200:#e5e7eb;
--panel:#efefef57;
--page-bg:#e6e6e6;
--radius-sm:6px;
--radius-md:10px;
--radius-lg:14px;
--shadow-1:0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
--shadow-2:0 6px 16px rgba(16,24,40,.12);
}
* {
margin:0;
padding:0;
box-sizing:border-box;
}
html {
height:100%;
font-family:Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height:1.55;
color:var(--ink-800);
overflow-x:hidden;
}
body {
height:100%;
font-family:Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height:1.55;
color:var(--ink-800);
overflow-x:hidden;
background-color:var(--page-bg);
display:flex;
flex-direction:column;
min-height:100vh;
position:relative;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
h1 {
color:var(--ink-900);
font-weight:600;
margin-bottom:12px;
}
h2 {
color:var(--ink-900);
font-weight:400;
margin-bottom:15px;
border-bottom:2px solid var(--brand-500);
padding-bottom:6px;
font-size:1.5rem;
display:inline-block;
letter-spacing:.2px;
}
.header {
background:linear-gradient(90deg, var(--brand-500), #d531a2e0);
color:#fff;
padding:8px 20px;
display:flex;
align-items:center;
justify-content:space-between;
position:sticky;
top:0;
z-index:40;
box-shadow:var(--shadow-1);
}
.header .left {
font-size:1.65rem;
font-weight:600;
letter-spacing:1px;
}
.header .right2 {
font-size:1.65rem;
font-weight:600;
}
.header .right {
display:flex;
align-items:center;
gap:.5rem;
}
.logout-button {
background:linear-gradient(90deg, #ffffff, #ededed);
color:#161616b5;
padding:6px 16px;
border-radius:var(--radius-sm);
font-weight:600;
text-decoration:none;
box-shadow:var(--shadow-1);
transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.logout-button:hover {
background:linear-gradient(90deg, #e9e9e9, #e7e7e7);
transform:translateY(-1px);
box-shadow:var(--shadow-2);
}
.logout-button:active {
transform:translateY(0);
box-shadow:var(--shadow-1);
}
.container {
display:flex;
flex:1;
width:100%;
min-height:0;
}
.sidebar {
width:20%;
background:#f8f9fb;
padding:1rem .5rem;
box-shadow:inset -1px 0 0 var(--ink-200);
display:flex;
flex-direction:column;
}
.sidebar ul {
list-style:none;
margin:0;
padding:0;
flex:1;
overflow-y:auto;
}
.sidebar ul > li {
display:flex;
flex-direction:column;
align-items:stretch;
background:#f3f3f3;
margin:0.5rem;
padding:0.6rem 0.7rem;
border-radius:var(--radius-md);
box-shadow:var(--shadow-1);
cursor:pointer;
transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
font-weight:600;
color:var(--ink-700);
}
.sidebar ul > li:hover {
transform:translateX(2px);
box-shadow:var(--shadow-2);
background:#f9fafb;
}
.main-content {
flex:1;
padding:20px;
overflow-y:auto;
background:#f1f1f1;
}
#forecastTools {
display:flex;
flex-direction:column;
align-items:stretch;
margin-bottom:0;
color:var(--ink-700);
}
#forecastTools > span:first-of-type {
display:flex;
justify-content:space-between;
align-items:center;
width:100%;
cursor:pointer;
transition:background .15s ease, transform .1s ease;
font-weight:600;
padding:.1rem .25rem;
border-radius:var(--radius-sm);
}
#forecastTools > span:first-of-type:hover {
background:#eef2f7;
transform:translateX(2px);
}
.hamburger {
background:none;
border:none;
font-size:1.4rem;
color:#4d4d4d;
cursor:pointer;
}
.sidebar .hamburger {
display:inline-flex;
align-items:center;
font-size:1.2rem;
}
#forecastTools .hamburger {
display:inline-flex;
align-items:center;
font-size:1.2rem;
}
.sidebar .submenu {
display:none;
padding:0;
margin:.25rem 0 0;
list-style:none;
background:transparent;
}
.sidebar .submenu.show {
display:block;
}
.sidebar .submenu li {
height:36px;
padding:0.6rem 0.8rem;
font-weight:600;
text-align:left;
background:#f7f7f9;
border-radius:var(--radius-sm);
display:flex;
align-items:left;
line-height:1;
transition:background 0.2s ease;
}
.sidebar .submenu li:hover {
background:#eceff4;
}
.sidebar ul > li:last-child {
margin-bottom:1rem;
}
.mobile-nav.open {
display:flex;
}
main {
flex:1;
width:100%;
background-color:#fff;
display:flex;
flex-direction:column;
align-items:center;
padding:40px 20px;
box-sizing:border-box;
text-align:center;
}
.panel {
background:var(--panel);
border-radius:var(--radius-sm);
padding:1.5rem;
margin-bottom:20px;
border: #c9c9c91f;
border-style: solid;
box-shadow:var(--shadow-1);
}
.white-separator {
height:2px;
margin:13px 0;
border-radius:2px;
background:linear-gradient(to right, var(--brand-500), rgba(255,74,2,0.5), var(--brand-500));
}
.btn-export {
display:inline-block;
background:linear-gradient(90deg, #ff4a02, #fd3419);
color:#fff;
border:none;
padding:10px 18px;
border-radius:4px;
font-weight:600;
cursor:pointer;
text-align:center;
user-select:none;
box-shadow:0 2px 4px rgba(0,0,0,0.15);
transition:all 0.3s ease;
text-decoration:none;

}
.primary-btn:hover {
background:linear-gradient(90deg, var(--brand-600), var(--brand-700));
transform:translateY(-2px);
box-shadow:var(--shadow-2);
}
label.primary-btn:hover {
background:linear-gradient(90deg, var(--brand-600), var(--brand-700));
transform:translateY(-2px);
box-shadow:var(--shadow-2);
}
.btn-export:hover {
background:linear-gradient(90deg, #e64500, #e42e15);
transform:translateY(-2px);
box-shadow:0 4px 8px rgba(0,0,0,0.2);
}
.primary-btn:focus {
outline:2px solid var(--brand-500);
outline-offset:2px;
}
label.primary-btn:focus {
outline:2px solid var(--brand-500);
outline-offset:2px;
}
.btn-export:focus {
outline:2px solid var(--brand-500);
outline-offset:2px;
}
.forecast-controls {
display:flex;
flex-wrap:wrap;
gap:0.75rem;
align-items:center;
justify-content:space-between;
background:var(--panel);
border-radius:6px;
padding:15px;
margin-bottom:20px;
box-shadow:var(--shadow-1);
}
.controls-left {
align-items: center;
}
.controls-right {
display:flex;
align-items:center;
gap:.5rem;
margin-left:auto;
}
.control-select {
min-width:150px;
height:32px;
padding:6px 10px;
border:1px solid #ddd;
border-radius:4px;
background:#fff;
transition:border-color .15s ease, box-shadow .15s ease;
}
.control-select:focus {
border-color:var(--brand-500);
box-shadow:0 0 0 3px rgba(255,74,2,.18);
}
#zipUploadForm {
display: flex;
  align-items: center;
  gap: 0.75rem;
}
.actions-panel {
display:flex;
gap:1rem;
margin-top:10px;
flex-wrap:wrap;
margin:1rem 0;
}
.checkbox-row {
display:flex;
align-items:center;
margin:8px 0;
}
.checkbox-row input {
margin-right:8px;
width:14px;
height:14px;
}
.table-container {
background:#fff;
border-radius:6px;
box-shadow:0 2px 8px rgba(0,0,0,.1);
overflow:hidden;
margin-bottom:20px;
width:100%;
}
.table-container table {
width:100%;
border-collapse:separate;
font-size:0.95rem;
table-layout:auto;
border-spacing:0;
}
.table-container thead th {
background-color:#ff4a02;
color:#fff;
padding:12px 10px;
text-align:left;
font-weight:600;
white-space:normal;
position:sticky;
top:0;
z-index:2;
background:#ff4a02;
}
.table-container tbody td {
border-bottom:1px solid #eee;
padding:10px;
vertical-align:middle;
white-space:normal;
overflow:visible;
text-overflow:clip;
}
.table-container tbody tr:nth-child(even) {
background-color:#f9f9f9;
}
.table-container tbody tr:hover {
background-color:#f0f0f0;
}
.table-container input[type="text"] {
width:100%;
padding:6px 8px;
font-size:0.9rem;
border:1px solid #ccc;
border-radius:4px;
transition:border-color 0.2s, box-shadow 0.2s;
box-sizing:border-box;
}
.table-container input[type="number"] {
width:100%;
padding:6px 8px;
font-size:0.9rem;
border:1px solid #ccc;
border-radius:4px;
transition:border-color 0.2s, box-shadow 0.2s;
box-sizing:border-box;
}
.table-container input[type="date"] {
width:100%;
padding:6px 8px;
font-size:0.9rem;
border:1px solid #ccc;
border-radius:4px;
transition:border-color 0.2s, box-shadow 0.2s;
box-sizing:border-box;
}
.table-container select {
width:100%;
padding:6px 8px;
font-size:0.9rem;
border:1px solid #ccc;
border-radius:4px;
transition:border-color 0.2s, box-shadow 0.2s;
box-sizing:border-box;
}
.table-container input:focus {
border-color:#ff4a02;
box-shadow:0 0 0 2px rgba(255,74,2,0.2);
outline:none;
}
.table-container select:focus {
border-color:#ff4a02;
box-shadow:0 0 0 2px rgba(255,74,2,0.2);
outline:none;
}
.table-responsive {
background:#fff;
border-radius:6px;
box-shadow:0 2px 8px rgba(0,0,0,0.1);
overflow-x:hidden;
overflow-y:auto;
margin-bottom:20px;
width:100%;
}
.table-responsive #orderTable {
width:100%;
border-collapse:collapse;
font-size:0.9rem;
table-layout:auto;
}
.table-responsive #orderTable thead th {
background-color:#ff4a02;
color:#fff;
padding:8px 6px;
text-align:center;
font-weight:600;
white-space:normal;
font-size:0.85rem;
letter-spacing:0.02em;
text-transform:uppercase;
}
.table-responsive #orderTable tbody td {
border-bottom:1px solid #eee;
padding:8px 6px;
vertical-align:middle;
white-space:normal;
overflow:visible;
text-overflow:clip;
}
.table-responsive #orderTable tbody tr:nth-child(even) {
background-color:#f9f9f9;
}
.table-responsive #orderTable tbody tr:hover {
background-color:#f0f0f0;
}
#orderTable {
width:100%;
border-collapse:separate;
border-spacing:0;
margin-bottom:20px;
box-shadow:0 2px 8px rgba(0,0,0,.1);
border-radius:6px;
overflow:hidden;
font-size:0.85rem;
}
#orderTable th {
background:#ff4a02;
color:#fff;
height:40px;
padding:0 6px;
font-size:13px;
font-weight:600;
text-align:left;
white-space:normal;
position:relative;
}
#orderTable td {
padding:6px;
border-bottom:1px solid #eee;
white-space:normal;
overflow:visible;
text-overflow:clip;
}
#orderTable tbody tr:nth-child(even) {
background:#f9f9f9;
}
#orderTable tbody tr:hover {
background:#f0f0f0;
}
#orderTable td:hover {
background:#fff;
position:relative;
z-index:1;
}
#orderTable th:hover::after {
content:attr(data-title);
position:absolute;
top:100%;
left:0;
background:#333;
color:#fff;
padding:5px 10px;
border-radius:3px;
white-space:normal;
max-width:200px;
z-index:20;
pointer-events:none;
}
#orderTable th:nth-child(1) {
width:120px;
max-width:120px;
}
#orderTable td:nth-child(1) {
width:120px;
max-width:120px;
}
#orderTable th:nth-child(2) {
width:90px;
max-width:90px;
}
#orderTable td:nth-child(2) {
width:90px;
max-width:90px;
}
#orderTable th:nth-child(3) {
width:160px;
max-width:160px;
}
#orderTable td:nth-child(3) {
width:160px;
max-width:160px;
}
#orderTable th:nth-child(4) {
width:110px;
max-width:110px;
}
#orderTable td:nth-child(4) {
width:110px;
max-width:110px;
}
#orderTable th:nth-child(5) {
width:110px;
max-width:110px;
}
#orderTable td:nth-child(5) {
width:110px;
max-width:110px;
}
#orderTable th:nth-child(6) {
width:80px;
max-width:80px;
}
#orderTable td:nth-child(6) {
width:80px;
max-width:80px;
}
#orderTable th:nth-child(7) {
width:70px;
max-width:70px;
}
#orderTable td:nth-child(7) {
width:70px;
max-width:70px;
}
#orderTable th:nth-child(8) {
width:60px;
max-width:60px;
}
#orderTable td:nth-child(8) {
width:60px;
max-width:60px;
}
#orderTable th:nth-child(9) {
width:70px;
max-width:70px;
}
#orderTable td:nth-child(9) {
width:70px;
max-width:70px;
}
#orderTable th:nth-child(10) {
width:80px;
max-width:80px;
}
#orderTable td:nth-child(10) {
width:80px;
max-width:80px;
}
#orderTable th:nth-child(11) {
width:120px;
max-width:120px;
}
#orderTable td:nth-child(11) {
width:120px;
max-width:120px;
}
#orderTable input {
width:100%;
max-width:100%;
box-sizing:border-box;
font-size:0.85rem;
padding:6px 8px;
border:1px solid #ddd;
border-radius:4px;
background-color:#fcfcfc;
transition:all 0.2s ease;
}
#orderTable select {
width:100%;
max-width:100%;
box-sizing:border-box;
font-size:0.85rem;
padding:6px 8px;
border:1px solid #ddd;
border-radius:4px;
background-color:#fcfcfc;
transition:all 0.2s ease;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 8px center;
background-size:12px;
padding-right:25px;
cursor:pointer;
}
#orderTable input:hover {
border-color:#bbb;
}
#orderTable select:hover {
border-color:#bbb;
}
#orderTable input:focus {
border-color:#ff4a02;
box-shadow:0 0 0 2px rgba(255,74,2,0.15);
outline:none;
background-color:#fff;
}
#orderTable select:focus {
border-color:#ff4a02;
box-shadow:0 0 0 2px rgba(255,74,2,0.15);
outline:none;
background-color:#fff;
}
#orderTable input[type="date"] {
padding-right:8px;
background-color:#fcfcfc;
cursor:pointer;
}
#orderTable input[type="date"]::-webkit-calendar-picker-indicator {
opacity:0.7;
cursor:pointer;
transition:opacity 0.2s;
}
#orderTable input[type="date"]::-webkit-calendar-picker-indicator:hover {
opacity:1;
}
#orderTable tr {
transition:background-color 0.2s;
}
#cycle-summary-table {
width:100%;
overflow-x:auto;
margin-top:5px;
}
#joi-creator-table {
width:100%;
overflow-x:auto;
}
.summary-table {
width:100%;
table-layout:auto;
font-size:10px;
border-collapse:collapse;
}
.summary-table th {
white-space:normal;
overflow:hidden;
text-overflow:clip;
padding:6px;
border:1px solid #ccc;
word-wrap:break-word;
background-color:#f2f2f2;
}
.summary-table td {
white-space:normal;
overflow:hidden;
text-overflow:clip;
padding:6px;
border:1px solid #ccc;
word-wrap:break-word;
}
.summary-table th.select-col {
width:60px;
max-width:60px;
text-align:center;
}
.summary-table td.select-col {
width:60px;
max-width:60px;
text-align:center;
}
.summary-table th.service-col {
width:80px;
max-width:80px;
text-align:center;
}
.summary-table td.service-col {
width:80px;
max-width:80px;
text-align:center;
}
.summary-table th.edit-col {
width:80px;
max-width:80px;
text-align:center;
}
.summary-table td.edit-col {
width:80px;
max-width:80px;
text-align:center;
}
.summary-table th.actions-col {
width:60px;
max-width:60px;
text-align:center;
}
.summary-table td.actions-col {
width:60px;
max-width:60px;
text-align:center;
}
.chart-block {
border:1.5px solid #ddd;
margin-bottom:20px;
border-radius:6px;
overflow:hidden;
box-shadow:0 2px 4px rgba(0,0,0,0.05);
background:#fff;
}
.chart-header {
background:#efefef57;
border-bottom:2px solid #e0e0e0;
padding:12px 20px;
font-weight:600;
display:flex;
align-items:center;
gap:10px;
color:#333;
border-top-left-radius:6px;
border-top-right-radius:6px;
}
.chart-header .chart-title {
flex:1;
font-size:1.0rem;
font-weight:600;
}
.chart-content {
overflow:hidden;
transition:max-height 0.3s ease-out;
background:#efefef57;
padding:10px;
box-sizing:border-box;
}
.chart-content.expanded {
max-height:2000px;
}
.chart-content.collapsed {
max-height:0;
}
.toggle-chart {
background:#f0f0f0;
border:none;
border-radius:4px;
cursor:pointer;
font-size:0.85em;
color:#444;
padding:6px 12px;
transition:all 0.2s ease;
}
.toggle-chart:hover {
background:#e0e0e0;
}
.chart-row {
display:flex;
flex-wrap:nowrap;
min-height:40px;
}
.axis-container {
width:250px;
background:#fafafa;
border-right:1px solid #eee;
}
.bars-container {
overflow-x:auto;
overflow-y:hidden;
flex:1;
position:relative;
background:#fff;
}
svg {
display:block;
}
.bar-group text.bar-text {
fill:white;
font-size:11px;
font-weight:600;
text-anchor:middle;
dominant-baseline:middle;
pointer-events:none;
text-shadow:1px 1px 2px rgba(0,0,0,0.5);
}
.route-container {
display:flex;
position:relative;
width:100%;
box-sizing:border-box;
overflow:hidden;
border-top:1px solid #ccc;
margin-bottom:30px;
}
.pinned-left {
width:160px;
background:white;
position:relative;
box-sizing:border-box;
border-right:1px solid #ccc;
}
.pinned-right {
width:160px;
background:white;
position:relative;
box-sizing:border-box;
border-left:1px solid #ccc;
}
.chart-area {
flex:1;
position:relative;
background:white;
overflow:hidden;
}
.chart {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:white;
}
.consist-container {
display:flex;
flex-wrap:wrap;
gap:15px;
margin-bottom:20px;
}
.consist-box {
flex:1 1 300px;
background:#fff;
border:1px solid #ddd;
border-radius:8px;
padding:20px 12px 12px;
box-shadow:0 2px 6px rgba(0,0,0,.08);
position:relative;
}
.consist-box legend {
position:absolute;
top:-10px;
left:10px;
background:#ff4a02;
color:#fff;
padding:4px 12px;
border-radius:4px;
font-weight:700;
font-size:.9rem;
box-shadow:0 2px 4px rgba(0,0,0,.1);
}
.consist-box label {
display:block;
margin:8px 0 3px;
font-weight:600;
font-size:.9rem;
color:#333;
}
.consist-box input[type="datetime-local"] {
width:100%;
height:32px;
padding:6px 8px;
border:1px solid #ddd;
border-radius:4px;
margin-bottom:6px;
transition:border-color .3s, box-shadow .3s;
}
.consist-box input[type="text"] {
width:100%;
height:32px;
padding:6px 8px;
border:1px solid #ddd;
border-radius:4px;
margin-bottom:6px;
transition:border-color .3s, box-shadow .3s;
}
.consist-box input:focus {
border-color:#ff4a02;
box-shadow:0 0 4px rgba(255,74,2,.2);
outline:none;
}
.joi-header {
display:flex;
flex-wrap:wrap;
gap:.75rem;
align-items:center;
justify-content:space-between;
}
.chart-header label {
margin-left:1em;
font-weight:600;
}
.chart-header select#operator-select {
appearance:none;
font-size:0.85em;
padding:4px 28px 4px 8px;
border-radius:4px;
border:1px solid #ccc;
background-color:#fff;
cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M3,4L6,8L9,4Z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:calc(100% - 8px) center;
background-size:12px;
transition:border-color 0.2s, box-shadow 0.2s;
color:#4d4d4d;
}
.chart-header select#operator-select:hover {
border-color:#aaa;
}
.chart-header select#operator-select:focus {
border-color:#ff4a02;
outline:none;
box-shadow:0 0 0 3px rgba(255, 74, 2, 0.2);
}
.summary-table button {
font-size:1.0em;
font-weight:bold;
padding:2px 4px;
white-space:nowrap;
color:#fff;
background:linear-gradient(90deg, #ff4a02, #fd3419);
border-radius:4px;
border:none;
box-shadow:0 2px 4px rgba(0,0,0,.1);
transition:transform .3s, box-shadow .3s, background .3s;
cursor:pointer;
}
.summary-table button:hover {
transform:translateY(-2px);
box-shadow:0 4px 6px rgba(0,0,0,.15);
}
rect.load-bar.editable {
cursor:ew-resize;
stroke:#000;
stroke-dasharray:4 2;
animation:pulseEdit 1.5s infinite alternate;
}
@keyframes pulseEdit {
from { opacity:0.7;
}
to{
opacity:1;
}
}
.overlay-path.editable {
cursor:pointer;
stroke-width:3px;
transition:stroke-width 0.2s ease, opacity 0.2s ease;
}
.overlay-path.editable:hover {
stroke-width:5px;
opacity:1;
}
.overlay-path.selected {
stroke-width:5px;
filter:drop-shadow(0 0 2px white);
}
.panel h2 {
margin-top:0;
margin-bottom:0.75rem;
font-size: 1.2rem;
}
.panel p {
margin-bottom:1rem;
}
.table-container th {
white-space:nowrap;
font-size:0.75rem;
padding:0.4rem 0.6rem;
vertical-align:middle;
overflow:hidden;
text-overflow:ellipsis;
}
.table-container td {
white-space:nowrap;
font-size:0.75rem;
padding:0.4rem 0.6rem;
vertical-align:middle;
overflow:hidden;
text-overflow:ellipsis;
word-wrap:normal;
}
#loginPageBody {
margin:0;
display:flex;
flex-direction:column;
min-height:100vh;
background-color:#000;
}
#contentContainer {
position:relative;
flex:1;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;
background-color:#000;
}
#slideshowContainer {
position:absolute;
inset:0;
overflow:hidden;
z-index:0;
}
#slideshowContainer img {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:bottom;
filter:blur(3px);
opacity:0;
transition:opacity 1s ease;
}
#slideshowContainer img.active {
opacity:1;
}
#loginCardContainer {
position:relative;
  z-index:1;
  background:#ffffffe3;
  width:100%;
  max-width:500px;
  padding:24px;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-2);
  text-align:left;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
#loginHeaderContainer h2 {
margin:0 0 12px;
  text-align:center;
}
#loginFormContainer label {
display:block;
  margin:.75rem 0 .25rem;
  font-weight:600;
}
#loginFormContainer input {
width:100%;
  height:44px;
  padding:0 .75rem;
  box-sizing:border-box;
  border:1px solid var(--ink-200);
  border-radius:var(--radius-sm);
  background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
  margin-bottom:12px;
}
#loginFormContainer input:focus {
border-color:var(--brand-500);
  box-shadow:0 0 0 3px rgba(255,74,2,.18);
  outline:0;
}
#alreadyWrapperContainer a#dashboardLink {
color:#007bff;
text-decoration:none;
}
#footerContainer {
background:#222;
color:#fff;
text-align:center;
padding:10px;
font-size:0.9rem;
z-index:2;
}
.input-label {
display:block;
margin-bottom:0.25rem;
font-weight:500;
}
.input-select {
display:block;
width:100%;
padding:0.5rem 0.75rem;
font-size:0.875rem;
line-height:1.25;
color:#444;
background-color:#fff;
border:1px solid #ccc;
border-radius:4px;
transition:border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
box-sizing:border-box;
margin-bottom:1rem;
}
.input-select:focus {
border-color:#ff6600;
outline:none;
box-shadow:0 0 0 3px rgba(255,102,0,0.25);
}
.input-select.dedicate-unit-list {
display:block;
max-height:8em;
overflow-y:auto;
padding:0.5em;
border:1px solid #ccc;
border-radius:4px;
background:#fff;
}
select.input-select {
display:block;
width:100%;
padding:0.5rem 0.75rem;
font-size:0.875rem;
line-height:1.25;
color:#444;
background-color:#fff;
border:1px solid #ccc;
border-radius:4px;
appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 0.75rem center;
background-size:0.65em;
box-sizing:border-box;
margin-bottom:1rem;
cursor:pointer;
}
.dropdown-header.input-select {
display:block;
width:100%;
padding:0.5rem 0.75rem;
font-size:0.875rem;
line-height:1.25;
color:#444;
background-color:#fff;
border:1px solid #ccc;
border-radius:4px;
appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 0.75rem center;
background-size:0.65em;
box-sizing:border-box;
margin-bottom:1rem;
cursor:pointer;
}
select.input-select:hover {
border-color:#aaa;
}
.dropdown-header.input-select:hover {
border-color:#aaa;
}
select.input-select:focus {
outline:none;
border-color:#ff6600;
box-shadow:0 0 0 3px rgba(255,102,0,0.25);
}
.dropdown-header.input-select:focus {
outline:none;
border-color:#ff6600;
box-shadow:0 0 0 3px rgba(255,102,0,0.25);
}
.checkbox-dropdown {
position:relative;
margin-top:.5em;
}
.checkbox-dropdown .dropdown-menu {
display:none;
position:absolute;
top:calc(100% + .2em);
left:0;
width:100%;
max-height:8em;
overflow-y:auto;
border:1px solid #ddd;
border-radius:4px;
background:#fff;
padding:.5em;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
z-index:10;
}
.checkbox-dropdown .dropdown-menu.show {
display:block;
}
.checkbox-dropdown .dropdown-menu label {
position:relative;
display:block;
padding:0.25em 2.5em 0.25em 0.5em;
font-size:0.875rem;
line-height:1.25;
font-weight:normal;
color:#444;
margin-bottom:.3em;
}
.checkbox-dropdown .dropdown-menu label input[type="checkbox"] {
position:absolute;
right:0.5em;
top:50%;
transform:translateY(-50%);
margin:0;
}
.checkbox-dropdown .dropdown-menu label:last-child {
margin-bottom:0;
}
#joi-load {
background:#f3f4f6;
color:#111;
border:1px solid var(--ink-200);
border-radius:var(--radius-sm);
padding:6px 10px;
appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 10px center;
background-size:12px;
}
#joi-load:focus {
border-color:var(--brand-500);
box-shadow:0 0 0 3px rgba(255,74,2,.18);
outline:none;
}
#joi-load option {
background:#e5e7eb;
color:#111;
}
#joi-load:-moz-focusring {
color:transparent;
text-shadow:0 0 0 #111;
}
.forecast-controls #joi-load {
height:32px;
}
.sidebar .nav-links a {
display:none;
}
.primary-btn,label.primary-btn,.btn-export,.btn-export-forecast,.exportzipbtn,.btn-process-zip {
display:inline-block;
  background:linear-gradient(90deg, var(--brand-500), #fd3419);
  color:#fff;
  border:none;
  padding:10px 20px;
  border-radius:var(--radius-sm);
  font-weight:700;
  cursor:pointer;
  text-align:center;
  user-select:none;
  box-shadow:var(--shadow-1);
  transition:transform .2s ease, box-shadow .2s ease, background .3s ease;
  text-decoration:none;
  line-height: 1;       
  white-space: nowrap;   
  vertical-align: middle;
}
@media screen and (max-width: 1400px) {
#orderTable{
font-size:0.8rem;
}
.summary-table{
font-size:0.8rem;
}
.table-container table{
font-size:0.8rem;
}
#orderTable td{
padding:4px 6px;
}
#orderTable th{
padding:4px 6px;
}
.summary-table td{
padding:4px 6px;
}
.summary-table th{
padding:4px 6px;
}
.table-container td{
padding:4px 6px;
}
.table-container th{
padding:4px 6px;
}
#orderTable input{
font-size:0.8rem;
padding:4px 6px;
}
#orderTable select{
font-size:0.8rem;
padding:4px 6px;
}
.summary-table input{
font-size:0.8rem;
padding:4px 6px;
}
.summary-table select{
font-size:0.8rem;
padding:4px 6px;
}
}
@media screen and (max-width: 1100px) {
#orderTable{
font-size:0.75rem;
}
.summary-table{
font-size:0.75rem;
}
.table-container table{
font-size:0.75rem;
}
#orderTable td{
padding:3px 4px;
}
#orderTable th{
padding:3px 4px;
}
.summary-table td{
padding:3px 4px;
}
.summary-table th{
padding:3px 4px;
}
.table-container td{
padding:3px 4px;
}
.table-container th{
padding:3px 4px;
}
#orderTable input{
font-size:0.75rem;
padding:3px 4px;
}
#orderTable select{
font-size:0.75rem;
padding:3px 4px;
}
.summary-table input{
font-size:0.75rem;
padding:3px 4px;
}
.summary-table select{
font-size:0.75rem;
padding:3px 4px;
}
}
@media (min-width: 768px) {
.nav-right{
display:flex;
}
.nav-bar .hamburger{
display:none;
}
.mobile-nav{
display:none;
}
.sidebar .hamburger{
display:inline-flex;
color:#212529;
}
main{
max-width:60%;
margin:0 auto;
padding:40px;
}
.header-content h1{
font-size:3rem;
}
.header-content p{
font-size:1.2rem;
}
.hero{
max-width:800px;
margin:0 auto 40px;
}
}
@media (max-width: 768px) {
.consist-box{
flex:1 1 100%;
}
.forecast-controls{
flex-direction:column;
align-items:flex-start;
}
.forecast-controls > div{
width:100%;
}
.control-select{
width:100%;
}
}
#loginHeaderContainer {
text-align:center;
}
#loginHeaderContainer h2 {
display:inline-block;          
  margin:0 0 12px;
}
#loginFormContainer {
text-align:left;
}
#loginButtonContainer .primary-btn {
display:flex;           
  width:100%;
  min-height:44px;
  align-items:center;
  justify-content:center;
  margin-top:.25rem;
  line-height:1;
  font-weight:700;
}
#loginForm .primary-btn {
display:block;   
  width:100%;
  min-height:44px;
  margin-top:.25rem;
  line-height:1;
  font-weight:500;
  letter-spacing: 1px;
  font-size: 1.25rem;
  text-align:center;
}
#loginForm {
text-align:left;
}
:root {
--page-bg:#f6f7fb;--surface:#fff;--border:#e6e7ef
}
body {
background:var(--page-bg)
}
.container {
display:flex;gap:16px
}
.sidebar {
background:var(--surface);border-right:1px solid var(--border);box-shadow:2px 0 12px rgba(16,24,40,.04)
}
.main-content {
background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.08);padding:24px;margin-top:16px
}
.container {
padding-right:20px
}

/* Re-added for: .axis path */
.axis path{
stroke:#ddd;
stroke-width:1px;
}

/* Re-added for: .axis line */
.axis line{
stroke:#ddd;
stroke-width:1px;
}

/* Re-added for: .axis text */
.axis text{
fill:#555;
font-size:11px;
font-family:"Open Sans", Arial, sans-serif;
}

/* Re-added for: .bar-group rect */
.bar-group rect{
rx:6px;
ry:6px;
stroke:#fff;
stroke-width:0.8px;
transition:all 0.2s ease;
opacity:0.95;
}

/* Re-added for: .bar-group rect:hover */
.bar-group rect:hover{
opacity:1;
stroke-width:2px;
stroke:#333;
}

/* Re-added for: .bar-group rect[fill="#1f77b4"] */
.bar-group rect[fill="#1f77b4"]{
fill:#1f77b4;
}

/* Re-added for: .bar-group rect[fill="#28b463"] */
.bar-group rect[fill="#28b463"]{
fill:#28b463;
}

/* Re-added for: .bar-group rect[fill="#e74c3c"] */
.bar-group rect[fill="#e74c3c"]{
fill:#e74c3c;
}

/* Re-added for: .grid-line-hour */
.grid-line-hour{
stroke:blue;
stroke-width:1;
}

/* Re-added for: .grid-line-station */
.grid-line-station{
stroke:blue;
stroke-width:0.5;
}

/* Re-added for: .cj-line */
.cj-line{
stroke:blue;
stroke-width:0.3;
}

/* Re-added for: .cj-label */
.cj-label{
font-size:10px;
text-anchor:end;
fill:blue;
}

/* Re-added for: .jc-line */
.jc-line{
stroke:blue;
stroke-width:0.3;
}

/* Re-added for: .jc-label */
.jc-label{
font-size:10px;
text-anchor:end;
fill:blue;
}

/* Re-added for: .joi-btn */
.joi-btn{
font-size:0.85em;
padding:4px 10px;
}

/* Re-added for: .joi-btn:hover */
.joi-btn:hover{
background:rgba(0,0,0,0.1);
}

/* Re-added for: .dedicate-unit-list label */
.dedicate-unit-list label{
display:block;
margin-bottom:0.25em;
font-size:0.95em;
}

/* Re-added for: .dedicate-unit-list label:last-child */
.dedicate-unit-list label:last-child{
margin-bottom:0;
}

/* Re-added for: .station-label */
.station-label{
position:absolute;
font-size:12px;
color:blue;
width:140px;
white-space:normal;
word-wrap:break-word;
line-height:1.2;
}

/* Re-added for: .week-selector */
.week-selector{
margin-right:8px;
}

/* Re-added for: .week-selector select */
.week-selector select{
padding:6px 10px;
font-size:.95rem;
border:1px solid var(--ink-200);
border-radius:var(--radius-sm);
background:#fff;
outline:none;
transition:border-color .15s ease, box-shadow .15s ease;
}

/* Re-added for: .week-selector select:focus */
.week-selector select:focus{
border-color:var(--brand-500);
box-shadow:0 0 0 3px rgba(255,74,2,.18);
}

/* make the button + status live on one line */
#race-controls .controls-left {
  display: flex;
  align-items: center;
  gap: .75rem;          /* spacing between button and status */
  flex-wrap: nowrap;
}

/* keep the form tight so it doesn't force a wrap */
#zipUploadForm {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  flex: 0 0 auto;
}

/* status inline, no top bump, don’t wrap mid-sentence */
#race-controls #import-status {
  font-size: 0.9rem;
  margin: 0;            /* remove that inline margin-top */
  white-space: nowrap;
}

/* Right side: two rows (date-range on top, filter row below) */
#race-controls .controls-right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .5rem;
}

/* keep Start/End on one line */
.date-range-inline{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
}

/* keep "Show import from:" + select on one line */
.import-filter{
  display: inline-flex;          /* << key */
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
}
.import-filter label{ margin: 0; }
#importDateSelect, #raceDateSelect{ width: auto; }

/* optional: on small screens left-align the stack */
@media (max-width: 768px){
  #race-controls .controls-right{ align-items: flex-start; }
}