/* RoadStock core design system - Section 1.  Existing forms and routes stay intact. */
:root {
  --rs-text-scale: 1;
  --rs-bg: #0b1220;
  --rs-surface: #121d31;
  --rs-surface-raised: #18263e;
  --rs-border: #2a3b58;
  --rs-text: #f4f7ff;
  --rs-muted: #9aabc5;
  --rs-blue: #3289e8;
  --rs-green: #37d486;
  --rs-orange: #f2a33b;
  --rs-red: #f06472;
  --rs-radius: 14px;
}

body { font-size: calc(16px * var(--rs-text-scale)); }
button, input, select, textarea { font-size: inherit; }

/* Shared, non-gradient surfaces and controls. */
body { background: linear-gradient(180deg, #07111f 0, #0b1220 92px, var(--rs-bg) 210px) fixed !important; color: var(--rs-text); }
header { background: var(--rs-bg) !important; border-bottom-color: var(--rs-border) !important; }
main, header, .brandrow, .appbar { max-width: 1180px; }
.stat, .card, .panel, .quick-dropzone, .location-switch {
  background: var(--rs-surface) !important;
  border-color: var(--rs-border) !important;
  box-shadow: none !important;
}
button, .buttonlink, .quick-chip, .hub-card, .iconbtn {
  background: var(--rs-blue) !important;
  box-shadow: none !important;
  border: 1px solid transparent;
}
button.secondary, .buttonlink.secondary { background: transparent !important; border-color: var(--rs-border); }
button.confirm, .action.sell button { background: #146b4b !important; }
button.danger, .action.danger button { background: #8d3045 !important; }
input, select, textarea { background: var(--rs-surface-raised) !important; border-color: var(--rs-border) !important; color: var(--rs-text) !important; }
.ready-line, .ok { color: var(--rs-green) !important; }
.warn, .warning { color: var(--rs-orange) !important; }
.error, .err { color: var(--rs-red) !important; }

/* Compact mobile-first dashboard. */
.home-hub, .quick-access { gap: 8px; }
.quick-chip, .hub-card { min-height: 42px; border-radius: 12px; }
.stats { gap: 9px; }
.stat, .card { border-radius: var(--rs-radius); }
.card { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  body { font-size: 15px; }
  header { padding: 8px; }
  main { padding: 10px; }
  .brand { height: 72px; }
  .brandrow { margin-bottom: 4px; }
  .appbar { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .stat { padding: 10px; }
  .stat b { font-size: 20px; }
  .grid { grid-template-columns: 1fr !important; }
  .actionrow { grid-template-columns: 1fr 1fr !important; }
  .actionlabel { grid-column: 1 / -1; }
  .quick-access, .home-hub { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .quick-access::-webkit-scrollbar, .home-hub::-webkit-scrollbar { display: none; }
  .quick-chip, .hub-card { flex: 0 0 140px; }
  .bottom-nav { position: fixed !important; z-index: 9999; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; justify-content: space-around; padding: 8px; background: var(--rs-surface); border-top: 1px solid var(--rs-border); transform: translate3d(0,0,0); will-change: transform; }
  .bottom-nav a { color: var(--rs-muted); text-decoration: none; font-size: 12px; font-weight: 850; }
  .bottom-nav a.active { color: var(--rs-text); }
  main { padding-bottom: 70px; }
}

/* Keep the mobile app navigation attached to the viewport while the page
   content scrolls.  The important flag also wins over legacy inline rules. */
.bottom-nav { position: fixed !important; z-index: 9999 !important; left: 50% !important; right: auto !important; width: min(680px, calc(100% - 24px)) !important; transform: translate3d(-50%, 0, 0); bottom: max(12px, env(safe-area-inset-bottom)) !important; }
html, body { min-height: 100%; }

/* UI V3 shared primitives. Existing routes keep their data/actions; these
   rules give them one consistent SaaS surface without Bootstrap or gradients. */
*, *::before, *::after { box-sizing: border-box; }
html { background: #07111f; }
body { background-image: linear-gradient(180deg, rgba(7,17,31,.98) 0, rgba(11,18,32,.96) 120px, transparent 230px) !important; overflow-x: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; line-height: 1.35; }
body { margin: 0 !important; }
h1, h2, h3, p { font-family: inherit; }
a { color: var(--rs-text); }
button, .button, .buttonlink, .primary, .secondary, .confirm, .danger {
  min-height: 42px; border-radius: 10px; font-weight: 800; cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
button:hover, .button:hover, .buttonlink:hover { transform: translateY(-1px); }
.primary, button.primary, .button.primary { background: var(--rs-blue) !important; }
.confirm, button.confirm, .button.confirm { background: #16734e !important; }
.danger, button.danger, .button.danger { background: #8e3046 !important; }
.ghost, .button.ghost, button.ghost { background: transparent !important; border-color: var(--rs-border) !important; }
.status-badge, .badge, .pill { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 3px 9px; border: 1px solid var(--rs-border); border-radius: 999px; background: var(--rs-surface-raised); font-size: .82rem; font-weight: 800; }
.status-badge.ok, .badge.ok { color: var(--rs-green); border-color: rgba(55,212,134,.42); }
.status-badge.warn, .badge.warn { color: var(--rs-orange); border-color: rgba(242,163,59,.42); }
.status-badge.error, .badge.error { color: var(--rs-red); border-color: rgba(240,100,114,.42); }
.page-header, .app-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 8px 0 16px; }
.page-header h1, .app-header h1 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.25rem); letter-spacing: -.03em; }
.metric-card, .job-card, .vehicle-card, .customer-card, .invoice-card, .stock-card { background: var(--rs-surface) !important; border: 1px solid var(--rs-border) !important; border-radius: var(--rs-radius); box-shadow: none !important; }
.home-hub { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.home-hub .hub-card { min-height: 132px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px; background: var(--rs-surface) !important; border: 1px solid var(--rs-border); border-radius: var(--rs-radius); text-decoration: none; }
.home-hub .hub-card:nth-child(1) { border-color: rgba(50,137,232,.55); }
.home-hub .hub-card:nth-child(2) { border-color: rgba(55,212,134,.45); }
.home-hub .hub-card:nth-child(3) { border-color: rgba(150,112,240,.5); }
.home-hub .hub-card:nth-child(4) { border-color: rgba(242,163,59,.5); }
.home-hub .hub-label b { display:block; font-size: 1.08rem; }
.home-hub .hub-label span { display:block; color: var(--rs-muted); font-size: .84rem; margin-top: 3px; }
.home-hub .quick-icon { font-size: 2rem; }
.card, .job-card { position: relative; }
.job-card::before, .card[data-card]::before { content: ""; position:absolute; inset: 0 auto 0 0; width: 4px; border-radius: var(--rs-radius) 0 0 var(--rs-radius); background: var(--rs-blue); }
.card[data-card]:nth-of-type(4n)::before { background: var(--rs-green); }
.card[data-card]:nth-of-type(4n+2)::before { background: var(--rs-orange); }
@media (max-width: 700px) { .home-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .home-hub .hub-card { min-height: 110px; padding: 12px; } }
.table-wrap { overflow-x: auto; border: 1px solid var(--rs-border); border-radius: var(--rs-radius); }
table { background: transparent; }
th { color: var(--rs-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
td, th { border-color: var(--rs-border) !important; }
details > summary { color: var(--rs-text); }
.app-header { max-width: 1120px; margin: 0 auto; padding: 18px 16px 8px; }
.app-header .brand img { width: 170px; height: 54px; object-fit: contain; }
.header-actions, .action-strip, .job-actions, .more-actions, .detail-head, .payment-card-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.back-link, .icon-button { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--rs-border); border-radius:12px; background:var(--rs-surface); text-decoration:none; font-size:1.4rem; }
.back-link { font-size:2rem; }
.hero, .section-heading, .list-heading, .detail-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.hero { margin: 8px 0 22px; }
.hero h1, .list-heading h2, .section-heading h2 { margin:0; }
.eyebrow { color:var(--rs-muted); text-transform:uppercase; font-size:.73rem; font-weight:900; letter-spacing:.08em; margin:0 0 5px; }
.search-bar { display:flex; gap:8px; width:min(100%, 540px); }
.search-bar input { min-height:44px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:10px 0 18px; }
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:10px 0 24px; }
.stats .stat { min-height:78px; padding:14px; background:var(--rs-surface) !important; border:1px solid var(--rs-border); border-radius:var(--rs-radius); }
.stats .stat b { display:block; font-size:1.55rem; margin-top:6px; }
.metric-card { padding:14px; }
.metric-card span, .stat span { display:block; color:var(--rs-muted); font-size:.77rem; font-weight:800; }
.metric-card b { display:block; font-size:1.65rem; margin-top:5px; }
.toolbar-v3 { display:flex; align-items:center; gap:10px; margin:12px 0; }
.filter-chips { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:12px 0; }
.filter-chips::-webkit-scrollbar { display:none; }
.toast { border:1px solid var(--rs-border); border-radius:12px; background:var(--rs-surface); padding:12px 14px; margin:12px 0; }
.toast.ok { color:var(--rs-green); } .toast.error { color:var(--rs-red); }
.detail-shell { background:var(--rs-surface); border:1px solid var(--rs-border); border-radius:var(--rs-radius); padding:16px; margin:14px 0 20px; }
.job-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,280px); gap:16px; align-items:start; padding:16px 16px 16px 20px; }
.job-main { min-width:0; }
.job-main h3 { font-size:1.15rem; }
.job-status { display:grid; gap:8px; justify-items:stretch; }
.job-status form { display:grid; gap:6px; }
.job-status select { min-height:40px; }
.job-status form + form { margin-top:6px; }
.assigned-orders form { display:inline-block; margin:6px 6px 0 0; }
.assigned-orders form button { min-height:40px; }
.contact-actions { display:flex; gap:7px; flex-wrap:wrap; margin:10px 0 6px; }
.contact-actions .button { min-height:34px; padding:6px 10px; font-size:.85rem; }
.job-status .status-badge { justify-content:center; }
.job-actions { display:grid; gap:8px; }
.job-actions > .button, .job-actions > form, .job-actions > form button { width:100%; text-align:center; }
.more-actions { display:grid; gap:8px; margin-top:8px; }
.plate { display:inline-flex; align-items:center; width:max-content; max-width:100%; padding:4px 9px; color:#07101c; background:#f3f5f7; border-left:5px solid var(--rs-blue); border-radius:5px; font-weight:950; letter-spacing:.04em; overflow-wrap:anywhere; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:14px 0; }
.detail-section, .payment-option { background:var(--rs-surface-raised); border:1px solid var(--rs-border); border-radius:12px; padding:12px; }
.payment-option { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:8px 0; }
.payment-list { display:grid; gap:10px; margin:10px 0 24px; }
.payment-card { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px; background:var(--rs-surface); border:1px solid var(--rs-border); border-radius:var(--rs-radius); }
.payment-card h3, .job-card h3 { margin:8px 0 4px; }
.receipt-text { white-space:pre-wrap; font:inherit; color:var(--rs-text); background:var(--rs-surface-raised); border:1px solid var(--rs-border); border-radius:12px; padding:12px; overflow-wrap:anywhere; }
.empty-state { padding:28px 16px; background:var(--rs-surface); border:1px dashed var(--rs-border); border-radius:var(--rs-radius); text-align:center; }
.load-more { display:block; width:max-content; margin: 14px auto 70px; }
.nav-add { width:48px !important; height:48px !important; margin-top:-16px; border-radius:50% !important; background:var(--rs-blue) !important; color:#fff !important; font-size:1.8rem !important; }
.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; }
@media (max-width: 700px) {
  .app-header { padding:10px 10px 5px; }
  .app-header .brand img { width:150px; }
  .hero, .section-heading, .list-heading, .detail-head { align-items:flex-start; flex-direction:column; }
  .hero { margin:8px 0 16px; }
  .hero .search-bar, .toolbar-v3 .search-bar { width:100%; }
  .toolbar-v3 { align-items:stretch; flex-direction:column; }
  .toolbar-v3 > * { width:100%; text-align:center; }
  .action-strip { align-items:stretch; flex-direction:column; }
  .action-strip > * { width:100%; text-align:center; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .detail-grid { grid-template-columns:1fr; }
  .job-card { display:block; }
  .job-status { margin-top:12px; }
  .payment-option, .payment-card { align-items:stretch; flex-direction:column; }
  .payment-option form, .payment-card-actions { width:100%; }
  .payment-option button, .payment-card-actions .button { width:100%; }
  .page-header, .app-header { align-items: flex-start; flex-direction: column; }
  .table-wrap { overflow: visible; border: 0; }
  .table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; }
  .table-wrap thead { display: none; }
  .table-wrap tr { margin: 8px 0; padding: 10px; background: var(--rs-surface); border: 1px solid var(--rs-border); border-radius: var(--rs-radius); }
  .table-wrap td { display: grid; grid-template-columns: minmax(7.2rem, 38%) minmax(0, 1fr); gap: 8px; padding: 7px 0; border-bottom: 1px solid rgba(42,59,88,.65) !important; overflow-wrap: anywhere; }
  .table-wrap td:last-child { border-bottom: 0 !important; }
  .table-wrap td::before { content: attr(data-label); color: var(--rs-muted); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
  .table-wrap td button, .table-wrap td .button, .table-wrap td form { width: 100%; }
  .table-wrap td form { display: block; }
  .bottom-nav { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}
/* Global dashboard search */
.global-search{display:flex;gap:8px;margin:0 0 18px}
.global-search input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px;color:#f3f6ff;background:#101a30;font-size:16px}
@media(max-width:560px){.global-search{flex-direction:column}.global-search .button{width:100%}}
.vehicle-label{font-size:13px;font-weight:600;color:#a9c8f5}.job-note{margin:6px 0;padding:7px 9px;border-left:3px solid #f0b45b;border-radius:7px;background:rgba(240,180,91,.1);color:#f5d59b;font-size:13px;line-height:1.35}
/* Stable app navigation: five equal touch targets, no oversized middle
   button, and the same proportions on desktop and mobile. */
.bottom-nav { display:grid !important; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:center; gap:6px; padding:8px 12px !important; min-height:58px; }
.bottom-nav a { min-width:0; min-height:42px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; overflow:hidden; white-space:nowrap; }
.bottom-nav .nav-add { width:auto !important; height:auto !important; margin:0 !important; border-radius:12px !important; background:transparent !important; color:inherit !important; font-size:12px !important; }
.bottom-nav .nav-add span { font-size:12px; margin-top:0; }
@media (min-width:701px) { .bottom-nav { bottom:20px !important; } }
@media (max-width:700px) { .bottom-nav { left:10px !important; right:10px !important; width:auto !important; transform:none !important; bottom:max(8px,env(safe-area-inset-bottom)) !important; } }
/* Neutral admin dashboard header: keep the identity visible without a personal greeting. */
.dash-head h1 { font-size: 0 !important; }
.dash-head h1::after { content: "Dashboard"; font-size: clamp(24px, 4vw, 34px); }
.dash-head::before { content: ""; display: block; width: 152px; height: 44px; background: url("/static/roadstock-logo-dark.png") center/contain no-repeat; flex: 0 0 auto; }
.dash-head { position: relative; }
.dash-head .dash-actions a[href="/profil"] { display: none !important; }
.period-switch { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.period-switch .button { border:1px solid #2b4362; }
.period-switch .button:first-child { border-color:#248cff; }
.period-switch .button.active { background:#248cff; border-color:#248cff; color:#fff; }
.quick-link small { display:block; margin-top:4px; font-weight:600; }
@media (max-width: 800px) { .dash-head::before { width: 132px; height: 38px; } }