/* Field panels: independent of the management layout and external UI libraries. */
.role-landing { margin:0; min-height:100vh; min-height:100dvh; color:#18342d; background:radial-gradient(ellipse at top,#dff7ef,transparent 55%),#f5f7f6; font:16px Tahoma,system-ui,sans-serif; -webkit-text-size-adjust:100%; }
.role-landing * { box-sizing:border-box; }
.role-shell { width:100%; max-width:1080px; margin-inline:auto; padding:calc(32px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)); }
.role-intro { text-align:center; margin-bottom:28px; }
.role-brand { display:inline-block; font-size:32px; font-weight:900; color:#0f766e; letter-spacing:-1px; }
.role-intro h1 { font-size:clamp(22px,5vw,32px); line-height:1.7; margin:12px 0 8px; }
.role-intro p,.role-footnote { color:#536760; line-height:1.9; }
.role-cards { display:grid; gap:16px; }
.role-card { --role-accent:#b42332; --role-tint:#fff0f1; display:flex; align-items:center; gap:16px; min-height:148px; padding:20px 16px; border:1px solid #e0e7e3; border-inline-start:5px solid var(--role-accent); border-radius:22px; background:#fff; color:var(--role-accent); text-decoration:none; box-shadow:0 8px 28px #16382c0c; touch-action:manipulation; transition:transform .2s,box-shadow .2s; }
.role-card-visitor { --role-accent:#0f766e; --role-tint:#e6faf6; }
.role-card-driver { --role-accent:#7f1d2d; --role-tint:#f9e9ee; }
.role-logo { flex:0 0 88px; width:88px; height:88px; display:grid; place-items:center; border-radius:20px; background:var(--role-tint); }
.role-logo img { display:block; width:100%; height:100%; object-fit:contain; border-radius:20px; }
.role-logo [hidden] { display:none!important; }
.role-logo-fallback { font-size:40px; font-weight:900; }
.role-card-copy { display:grid; gap:8px; min-width:0; }
.role-card-copy strong { font-size:24px; }.role-card-copy>span { color:#536760; font-size:14px; line-height:1.8; overflow-wrap:anywhere; }
.role-card-arrow { margin-inline-start:auto; font-size:26px; }
.role-card:focus-visible { outline:3px solid #d97706; outline-offset:4px; }
.role-footnote { text-align:center; font-size:13px; margin-top:24px; }
@media(hover:hover) { .role-card:hover { transform:translateY(-3px); box-shadow:0 14px 32px #16382c18; } }
@media(min-width:760px) { .role-shell { padding-top:64px; }.role-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }.role-card { flex-direction:column; text-align:center; padding:30px 18px; }.role-logo { flex-basis:104px; width:104px; height:104px; }.role-card-arrow { margin:0; } }
@media(max-width:350px) { .role-card { gap:12px; padding:16px 12px; }.role-logo { flex-basis:72px; width:72px; height:72px; }.role-card-copy strong { font-size:22px; } }
@media(prefers-reduced-motion:reduce) { .role-card { transition:none; } }
.visitor-mobile *, .driver-mobile * { box-sizing: border-box; }
.visitor-mobile { min-height:100vh; min-height:100dvh; -webkit-text-size-adjust:100%; }
.visitor-mobile main,.visitor-mobile .container { width:100%; max-width:720px; margin-inline:auto; padding:20px 16px; }
.visitor-mobile .visitor-nav { position:sticky; top:0; z-index:1000; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; padding:8px 10px; padding-top:max(8px,env(safe-area-inset-top)); background:#fff; border-bottom:1px solid #dce7e2; box-shadow:0 3px 15px #123a2910; }
.visitor-mobile .visitor-nav a { min-height:48px; display:flex; align-items:center; justify-content:center; padding:6px; border-radius:12px; text-decoration:none; font-size:14px; font-weight:700; }
.visitor-mobile .visitor-nav a[aria-current] { color:#fff; background:#0f766e; }
.visitor-mobile .row { display:flex; flex-wrap:wrap; margin-inline:-6px; }
.visitor-mobile .col-6 { width:50%; padding-inline:6px; }
.visitor-mobile .d-flex { display:flex; }.visitor-mobile .align-items-center { align-items:center; }
.visitor-mobile .justify-content-between { justify-content:space-between; }.visitor-mobile .gap-3 { gap:12px; }
.visitor-mobile .text-center { text-align:center; }.visitor-mobile .fw-bold { font-weight:800; }
.visitor-mobile .text-dark { color:#19342f; }.visitor-mobile .text-muted,.visitor-mobile .text-secondary { color:#536b63; }
.visitor-mobile .small,.visitor-mobile small { font-size:13px; }.visitor-mobile .d-block { display:block; }
.visitor-mobile .m-0,.visitor-mobile .mb-0 { margin:0; }.visitor-mobile .mb-1 { margin-bottom:4px; }
.visitor-mobile .mb-3 { margin-bottom:16px; }.visitor-mobile .mb-4 { margin-bottom:24px; }
.visitor-mobile .badge { border:1px solid #dce7e2; border-radius:8px; padding:4px 8px; }
.visitor-mobile .action-tile>div,.visitor-mobile .action-tile>div>div:last-child { min-width:0; }
.visitor-mobile .action-tile small { display:block; overflow-wrap:anywhere; }
.visitor-mobile :is(input,select,textarea,button) { font-size:16px; min-height:48px; }
.visitor-mobile :is(input,select,textarea) { width:100%; background:#fff; color:#18342d; }
.visitor-mobile :is(button,a,input,select):focus-visible { outline:3px solid #d97706; outline-offset:3px; }
.visitor-mobile button,.visitor-mobile a { touch-action:manipulation; }
.visitor-mobile input[type=hidden] { display:none; }
.visitor-mobile summary { padding:12px 0; overflow-wrap:anywhere; }
.visitor-mobile article p,.visitor-mobile td { overflow-wrap:anywhere; }
.visitor-mobile form { min-width:0; }
.visitor-mobile .fields { grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); }
.visitor-mobile .table-wrap { max-width:100%; overscroll-behavior-inline:contain; }
.visitor-mobile #shopMap { width:100%; z-index:0; }
@media(max-width:600px) {
 .visitor-mobile main,.visitor-mobile .container { padding:16px 12px calc(24px + env(safe-area-inset-bottom)); }
 .visitor-mobile section,.visitor-mobile form,.visitor-mobile article { padding:14px; }
 .visitor-mobile .visitor-hero { padding:20px 14px; }
 .visitor-mobile .visitor-logo-box { width:76px; height:76px; }
 .visitor-mobile .btn-neoclassic-primary { font-size:17px; min-height:58px; padding:14px 12px; }
 .visitor-mobile .action-tile { padding:14px 12px; }.visitor-mobile .action-tile:hover { transform:none; }
 .visitor-mobile .action-icon { width:44px; height:44px; }.visitor-mobile .gap-3 { gap:9px; }
 .visitor-mobile h3 { font-size:20px; }.visitor-mobile .kpi-card { height:100%; padding:14px 8px; }
 .visitor-mobile form>button[type=submit] { width:100%; margin-top:12px; }
 .visitor-mobile table:has(td[data-label]) thead { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
 .visitor-mobile table:has(td[data-label]),.visitor-mobile table:has(td[data-label]) tbody { display:block; }
 .visitor-mobile table:has(td[data-label]) tr { display:block; border:1px solid #dce7e2; border-radius:12px; padding:8px 12px; margin-bottom:12px; }
 .visitor-mobile td[data-label] { display:grid; grid-template-columns:minmax(90px,35%) minmax(0,1fr); align-items:center; gap:8px; padding:9px 0; }
 .visitor-mobile td[data-label]::before { content:attr(data-label); font-weight:700; color:#536b63; }
 .driver-mobile .shell { padding:14px 12px calc(24px + env(safe-area-inset-bottom)); }
 .driver-mobile :is(input,select,textarea) { font-size:16px!important; max-width:100%; }
 .driver-mobile :is(.action,.icon-button,.modal-close,.quantity-control,.filter-chip,.location-picker-button) { min-height:48px; touch-action:manipulation; }
 .driver-mobile :is(.icon-button,.modal-close,.quantity-control) { min-width:48px; }
 .driver-mobile .quantity-controls { grid-template-columns:48px 60px 48px; gap:4px; }
 .driver-mobile .quantity-value { width:60px; min-width:0; height:48px; }
 .driver-mobile .quantity-row { grid-template-columns:minmax(0,1fr); gap:10px; }
 .driver-mobile .quantity-controls { justify-self:end; }
 .driver-mobile .modal-panel { max-height:94dvh; }
 .driver-mobile .modal-content { min-height:0; overscroll-behavior:contain; padding-bottom:20px; }
 .driver-mobile .modal-head,.driver-mobile .modal-footer { flex-shrink:0; }
 .driver-mobile :is(.hero-copy,.brand,.invoice-card,.store-toggle-name,.receipt-line strong) { min-width:0; overflow-wrap:anywhere; }
 .driver-mobile .topbar,.driver-mobile .section-head { flex-wrap:wrap; }
 .driver-mobile .hero { grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:20px 15px; }
 .driver-mobile .metric { min-width:0; flex-direction:column; align-items:flex-start; }
 .driver-mobile .metric-label { font-size:12px; }.driver-mobile .action { font-size:14px; }
 .driver-mobile .store-toggle { width:100%; white-space:normal; }
}
@media(prefers-reduced-motion:reduce) {
 .visitor-mobile * { transition:none!important; scroll-behavior:auto!important; }
}