/* World Auto Import visual system. Layout only; business rules remain in Django. */
:root {
 --bg:#f4f6f9; --surface:#fff; --surface-2:#eef2f6; --border:#e1e7ee;
 --text:#18283c; --text-muted:#56677b; --text-faint:#65768a;
 --brand:#102b46; --brand-2:#244f76; --accent:#bb862f; --accent-ink:#745019;
 --accent-bg:#faf0de; --radius:16px;
 --shadow:0 3px 16px rgba(24,40,60,.035); --shadow-lg:0 14px 36px rgba(15,35,60,.09);
}
:root[data-theme="dark"] {
 --bg:#0c1420; --surface:#142031; --surface-2:#1c2b40; --border:#293a50;
 --text:#edf2f9; --text-muted:#b2bed0; --text-faint:#99aac0;
 --brand-2:#aaccec; --accent:#dfb366; --accent-ink:#ebc98e; --accent-bg:#332b20;
 --shadow:0 3px 18px rgba(0,0,0,.12); --shadow-lg:0 16px 38px rgba(0,0,0,.25);
}
body {font-family:'Manrope','Segoe UI',sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased;}
::selection {background:var(--accent-bg);color:var(--text);}
:focus-visible {outline:3px solid var(--accent);outline-offset:3px;}
.skip-link {position:fixed;top:-100px;left:16px;z-index:1000;background:var(--surface);padding:12px 18px;border-radius:10px;}
.skip-link:focus {top:12px;}
.sidebar {width:246px;background:linear-gradient(160deg,#153653,#0c2139);padding:28px 17px 20px;}
.sb-brand {padding:0 10px 32px;gap:12px;}
.sb-brand strong.wordmark {font-size:23px;}
.sb-nav {gap:6px;}
.sb-link {padding:12px 13px;min-height:46px;border-radius:11px;opacity:1;color:#c5d3e3;}
.sb-link.active {background:#244764;border-color:#3f5c74;box-shadow:inset 3px 0 #e1b56b;color:#fff;}
.sb-link svg {width:18px;height:18px;}
.sb-avatar {width:38px;height:38px;background:#e1b56b;}
.sb-user-name {font-size:13px;}
.sb-foot-actions a,.sb-foot-actions button {padding:10px;font-size:12px;}
.view {max-width:1440px;padding:36px 36px 88px;}
.page-head {margin-bottom:26px;gap:18px;align-items:center;}
.page-head h2 {font-size:clamp(23px,2.3vw,32px);line-height:1.25;letter-spacing:-.035em;overflow-wrap:anywhere;}
.page-head p {font-size:13px;max-width:760px;line-height:1.7;margin-top:9px;}
.back-link {font-size:12px;margin-bottom:12px;}
.btn {border-radius:10px;min-height:42px;padding:10px 17px;font-weight:700;transition:background .15s,box-shadow .15s;}
.btn-primary {background:#173d60;color:#fff;box-shadow:0 3px 8px #102b4614;}
.btn-primary:hover {background:#245477;color:#fff;}
.btn-accent {background:#dfb366;color:#282016;border-color:#d2a559;}
.btn-accent:hover {background:#ebc688;}
.btn-ghost {background:var(--surface);color:var(--text);border-color:var(--border);}
.btn-ghost:hover {background:var(--surface-2);}
.btn-sm {font-size:12px;min-height:36px;padding:7px 12px;}
.panel {margin-bottom:22px;border-radius:16px;}
.panel-head {padding:19px 22px;}
.panel-head h3 {font-size:15px;font-weight:800;letter-spacing:-.015em;}
.section-description {color:var(--text-muted);font-size:12px;margin:5px 0 0;max-width:700px;font-weight:400;}
.panel-body {padding:22px;}
.panel-foot {padding:16px 22px;}
.kpi-grid {gap:16px;margin-bottom:24px;}
.kpi {padding:22px;border-radius:16px;border-top:3px solid var(--border);}
.kpi:first-child {border-top-color:var(--accent);}
.kpi-value {font-size:29px;letter-spacing:-.035em;}
.kpi-label {font-size:12px;}
.stage-cell {padding:14px;border-radius:12px;}
.toolbar {gap:10px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;align-items:center;}
nav.toolbar {padding:5px;background:var(--surface-2);border:0;width:fit-content;max-width:100%;}
nav.toolbar .btn {border:0;box-shadow:none;background:transparent;color:var(--text-muted);}
nav.toolbar .btn-accent {background:var(--surface);color:var(--text);box-shadow:var(--shadow);}
.toolbar input[type=search],.toolbar select,.toolbar input[type=date] {min-height:44px;border-radius:10px;font-size:13px;}
.table-wrap {border-radius:15px;scrollbar-width:thin;scrollbar-color:#9aabbc var(--surface-2);}
table {font-size:13px;}
thead th {background:var(--surface-2);font-size:11px;letter-spacing:.045em;text-transform:uppercase;padding:14px 18px;font-weight:700;}
tbody td {padding:17px 18px;vertical-align:middle;}
tbody td .cell-muted {font-size:11.5px;margin-top:4px;}
tbody tr:hover {background:var(--surface-2);}
.stage-badge,.badge {padding:5px 11px;line-height:1.6;font-size:11px;}
.field {margin-bottom:20px;}
.field label {color:var(--text);font-size:12px;margin-bottom:8px;font-weight:700;}
.form-control {min-height:46px;padding:11px 13px;border-radius:10px;background:var(--surface);}
.form-control:focus {box-shadow:0 0 0 3px var(--accent-bg);}
.helptext {font-size:12px;line-height:1.55;color:var(--text-muted);}
.form-grid {gap:6px 18px;}
.form-actions {padding-top:6px;}
.finance-summary {gap:14px;margin-bottom:24px;}
.finance-summary > div {padding:20px;border-radius:14px;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);}
.finance-summary > div > span {font-size:12px;color:var(--text-muted);}
.finance-summary > div > strong {font-size:clamp(17px,1.6vw,24px);letter-spacing:-.025em;}
.finance-summary > div:nth-child(3) {border-top:3px solid var(--accent);}
.stage-payments .panel-head p {max-width:760px;font-size:12px;line-height:1.65;}
.stage-payment-badge {font-size:11px;font-weight:700;padding:6px 12px;}
.timeline {padding:12px 0;}
.tl-dot {width:38px;height:38px;}
.tl-step::before {top:18px;}
.tl-label {line-height:1.5;}
.spec > div {padding:14px 22px;}
.spec dt {font-size:11px;}
.spec dd {font-size:13px;margin-top:5px;}
.cost-row {padding:14px 22px;}
.cost-total {padding:19px 22px;background:#153653;}
.photo-grid {gap:14px;}
.photo {border-radius:13px;overflow:hidden;border:1px solid var(--border);background:var(--surface-2);}
.photo img {transition:transform .2s;}
.photo a:hover img {transform:scale(1.025);}
.photo-group-title {font-size:12px;color:var(--text-muted);}
.alert {border-radius:12px;padding:14px 18px;line-height:1.7;}
.empty-state {padding:55px 24px;max-width:680px;margin:auto;}
.eyebrow {display:block;font-size:10px;font-weight:800;letter-spacing:.16em;margin-bottom:12px;}
.customer-welcome {position:relative;padding:32px;border-radius:20px;background:linear-gradient(115deg,#102b46,#244a68);color:#fff;overflow:hidden;}
.customer-welcome .eyebrow {color:#e8c38a;}
.customer-welcome p {color:#d4e0ed;max-width:650px;}
.route-label {display:flex;gap:15px;align-items:center;margin-top:24px;font-size:12px;font-weight:700;flex-wrap:wrap;}
.route-label span:nth-child(2n) {color:#e8c38a;}
.route-label span:nth-child(2n+1) {border:1px solid #ffffff30;border-radius:8px;padding:6px 13px;background:#ffffff08;}
.list-hint {color:var(--text-muted);font-size:11px;}
.login-screen {background:radial-gradient(ellipse at 15% 10%,#294a6840,transparent 60%),var(--bg);padding:28px;}
.login-card {max-width:460px;border-radius:22px;padding:36px;border:1px solid var(--border);box-shadow:var(--shadow-lg);}
.login-intro {margin:30px 0 26px;}
.login-intro .eyebrow {color:var(--accent-ink);}
.login-intro h2 {font-size:25px;letter-spacing:-.035em;line-height:1.3;}
.login-intro p {font-size:13px;color:var(--text-muted);line-height:1.7;}
.login-hint {font-size:12px;}
.login-brand p {font-size:12px;}
@media(min-width:901px){.list-hint {display:none;}}
@media(max-width:1100px){.view{padding:26px 22px 80px;}.sidebar{width:220px;}}
@media(max-width:900px){
 .view{padding:22px 16px 90px;}.topbar{background:#102b46;padding:13px 16px;}
 .mobile-nav{background:#102b46;padding:4px 10px 12px;gap:6px;}
 .mobile-nav .sb-link{border-radius:9px;min-height:42px;padding:9px 12px;}
 .customer-welcome{padding:26px;}.page-head h2{font-size:26px;}
}
@media(max-width:700px){
 .tl-step::before{top:auto;inset-inline-start:18px;bottom:calc(100% - 18px);}
 .tl-date{max-width:94px;text-align:end;}.timeline{padding:5px 0;}
}
@media(max-width:520px){
 .view{padding:19px 12px 88px;}.page-head{margin-bottom:20px;}.page-head h2{font-size:24px;}
 .panel-head,.panel-body{padding:17px;}.panel{border-radius:14px;margin-bottom:18px;}
 .customer-welcome{padding:24px 20px;border-radius:16px;}.route-label{gap:10px;}
 .finance-summary{gap:10px;}.finance-summary>div{padding:15px;}
 .finance-summary>div>strong{font-size:17px;}.finance-summary>div>span{font-size:11px;}
 .toolbar{padding:12px;}.toolbar input,.toolbar select,.form-control{font-size:16px;}
 .btn{min-height:44px;}.btn-sm{min-height:40px;}
 nav.toolbar{width:100%;gap:3px;flex-wrap:nowrap;}nav.toolbar .btn{flex:1;padding:9px 6px;font-size:12px;}
 .head-actions{width:100%;}.head-actions .btn{flex-grow:1;}
 .login-screen{padding:18px;}.login-card{padding:26px 22px;}.login-intro h2{font-size:23px;}
 .spec>div{padding:13px 17px;}.cost-row,.cost-total{padding:14px 17px;}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important;}}

/* ---- phones: tables become labelled cards (see app.js) ----------------------- */
@media(max-width:900px){
 .list-hint{display:none;}
 .table-wrap:has(.stack-table){overflow:visible;padding:12px;border-radius:0;}
 .table-wrap table.stack-table,.stack-table tbody{display:block;width:100%;min-width:0;}
 .stack-table .payment-note{min-width:0;max-width:none;}
 .stack-table thead{display:none;}
 .stack-table tr{display:block;background:var(--surface);border:1px solid var(--border);border-radius:12px;margin:0 0 10px;padding:4px 14px;box-shadow:var(--shadow);}
 .stack-table tr:last-child{margin-bottom:0;}
 .stack-table td{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:10px 0;border:0;border-bottom:1px solid var(--border);text-align:end;min-width:0;white-space:normal;}
 .stack-table td:last-child{border-bottom:0;}
 .stack-table td::before{content:attr(data-label);flex:0 0 36%;max-width:36%;text-align:start;font-size:10.5px;font-weight:700;letter-spacing:.045em;text-transform:uppercase;color:var(--text-muted);padding-top:2px;}
 .stack-table td[data-label=""]{justify-content:center;text-align:center;}
 .stack-table td[data-label=""]::before{display:none;}
 .stack-table .cell-v{min-width:0;overflow-wrap:anywhere;}
 .stack-table td[data-label=""] .cell-v{width:100%;}
 .stack-table .row-actions{justify-content:flex-end;flex-wrap:wrap;}
 .stack-table td:empty::after,.stack-table .cell-v:empty::after{content:"—";color:var(--text-faint);}
 .theme-toggle{padding:0;width:44px;height:44px;min-height:44px;border-radius:50%;font-size:0;bottom:14px;inset-inline-end:12px;}
 .theme-toggle::before{font-size:18px;content:"☾";}
 :root[data-theme="dark"] .theme-toggle::before{content:"☀";}
}
@media(max-width:520px){
 .toolbar input,.toolbar select,.form-control,input[type=number],input[type=search],input[type=text],select{min-height:44px;}
}
/* Theme switch inside the phone top bar */
.theme-toggle-inline{display:none;}
@media(max-width:900px){
 .has-topbar-theme .theme-toggle{display:none;}
 .theme-toggle-inline{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;margin-inline-start:auto;margin-inline-end:8px;font-size:0;border-radius:9px;}
 .theme-toggle-inline::before{content:"☾";font-size:18px;}
 :root[data-theme="dark"] .theme-toggle-inline::before{content:"☀";}
}
.topbar-btn,.topbar-brand .wordmark{white-space:nowrap;}
@media(max-width:400px){
 .topbar{padding-inline:12px;gap:6px;}
 .topbar-brand{gap:7px;min-width:0;}
 .topbar-brand .wordmark{font-size:15px;}
 .topbar-btn{padding:7px 10px;}
 .theme-toggle-inline{margin-inline-end:4px;width:40px;}
}
@media(max-width:520px){
 .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 .kpi{padding:14px 15px;}
 .kpi-value{font-size:24px;}
 body.guest .theme-toggle{top:12px;bottom:auto;}
}

/* ---- brand logo (artwork is silver/gold, so it always sits on navy) ---- */
.brand-logo{display:block;line-height:0;}
.brand-logo img{display:block;width:100%;height:auto;}
.sb-brand-inner{display:flex;flex-direction:column;gap:8px;min-width:0;}
.sb-brand .brand-logo{width:190px;max-width:100%;}
.sb-brand-inner>span{font-size:10.5px;color:var(--brand-ink);opacity:.75;padding-inline-start:4px;}
.topbar-brand .brand-logo{width:120px;}
.login-brand-logo{display:block;margin:-36px -36px 26px;padding:26px 30px 18px;background:#102b46;border-radius:22px 22px 0 0;text-align:center;}
.login-brand-logo h1{margin:0;}
.login-brand-logo .brand-logo{width:300px;max-width:100%;margin:0 auto;}
.login-brand-logo p{color:#c9d5e3;margin:10px 0 0;font-size:12px;}
@media(max-width:520px){
 .login-brand-logo{margin:-26px -22px 22px;padding:22px 18px 14px;}
 .login-brand-logo .brand-logo{width:240px;}
}
@media(max-width:400px){.topbar-brand .brand-logo{width:104px;}}

/* ---- customer pages: plain-language summary ---------------------------- */
.plain-head{padding:4px 2px 14px;}
.customer-cards{margin-bottom:24px;}
.customer-cards .order-card-main{color:inherit;text-decoration:none;}
.order-card-text{margin:0;font-size:13.5px;color:var(--text-muted);line-height:1.55;}
.order-card-money{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;border-top:1px solid var(--border);padding-top:12px;}
.order-card-money>div{display:flex;flex-direction:column;gap:3px;min-width:0;}
.order-card-money span{font-size:11px;color:var(--text-muted);font-weight:600;}
.order-card-money strong{font-size:14px;overflow-wrap:anywhere;}
.order-card-money .due strong{color:#b45309;}
.order-card-money .zero strong,.order-card-money .credit strong{color:var(--green);}
.order-card-actions .btn{flex:1;justify-content:center;}
.glance{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:22px;}
.glance-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;gap:10px;min-width:0;}
.glance-where{background:#102b46;border-color:#102b46;color:#fff;}
.glance-where p{color:#c9d5e3;margin:0;line-height:1.6;}
.glance-where small{color:#9fb2c8;}
.glance-eyebrow{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);}
.glance-where .glance-eyebrow{color:#e6b65c;}
.glance-title{font-size:26px;line-height:1.2;letter-spacing:-.02em;}
.glance-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:4px;}
.glance-steps span{height:8px;border-radius:8px;background:rgba(255,255,255,.18);}
.glance-steps span.done{background:#2fb879;}
.glance-steps span.current{background:#e6b65c;}
.glance-sums{margin:0;display:flex;flex-direction:column;gap:0;}
.glance-sums>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border);}
.glance-sums dt{color:var(--text-muted);font-size:13.5px;}
.glance-sums dd{margin:0;font-weight:700;}
.glance-left{border-bottom:0!important;}
.glance-left dt{color:var(--text);font-weight:800;font-size:15px;}
.glance-left dd{font-size:22px;font-weight:800;color:#b45309;}
.glance-left.zero dd,.glance-left.credit dd{color:var(--green);}
.glance-status{margin:0;font-size:13px;color:var(--text-muted);}
.glance-note{margin:4px 0 0;font-weight:700;font-size:13.5px;}
.glance-due{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.glance-due li{display:flex;justify-content:space-between;gap:10px;background:var(--surface-2);border-radius:10px;padding:10px 12px;font-size:13px;}
.glance-due li span{min-width:0;overflow-wrap:anywhere;}
.glance-ok{margin:4px 0 0;color:var(--green);font-weight:700;}
.glance-hint{margin:0;font-size:12px;color:var(--text-muted);line-height:1.55;}
@media(max-width:760px){.glance{grid-template-columns:1fr;gap:12px;}.glance-card{padding:18px;}.glance-title{font-size:23px;}}
@media(max-width:420px){.order-card-money{grid-template-columns:1fr 1fr;}.order-card-money>div:last-child{grid-column:1/-1;}}
.glance-where{justify-content:center;}