:root {
    --rl-primary: #0b5d3b;
    --rl-primary-dark: #08452c;
    --rl-accent: #f2a900;
    --rl-sidebar-w: 260px;
    --rl-bar-h: 56px;
    --bs-font-sans-serif: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}
html, body, button, input, select, textarea, .btn, .form-control, .form-select, .swal2-popup, .swal2-container,
.table, .badge, .dropdown-menu, .modal, .card, .alert {
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
body { -webkit-text-size-adjust: 100%; font-size: .93rem; }
.app-body { background: #f4f6f5; min-height: 100vh; }

.btn-primary { --bs-btn-bg: var(--rl-primary); --bs-btn-border-color: var(--rl-primary);
    --bs-btn-hover-bg: var(--rl-primary-dark); --bs-btn-hover-border-color: var(--rl-primary-dark);
    --bs-btn-active-bg: var(--rl-primary-dark); --bs-btn-active-border-color: var(--rl-primary-dark); }
.btn-outline-primary { --bs-btn-color: var(--rl-primary); --bs-btn-border-color: var(--rl-primary);
    --bs-btn-hover-bg: var(--rl-primary); --bs-btn-hover-border-color: var(--rl-primary);
    --bs-btn-active-bg: var(--rl-primary); --bs-btn-active-border-color: var(--rl-primary); }
a { color: var(--rl-primary); }

/* ---- Sidebar ---- */
.app-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: var(--rl-sidebar-w); z-index: 1040;
    background: var(--rl-primary-dark); color: #e6f0eb; display: flex; flex-direction: column;
    transition: transform .2s ease;
}
.sb-brand { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.1rem; color: #fff; text-decoration: none;
    font-weight: 700; line-height: 1.2; border-bottom: 1px solid rgba(255,255,255,.1); }
.sb-logo { font-size: 1.5rem; }
.sb-user { display: flex; align-items: center; gap: .7rem; padding: .8rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.sb-user-text { min-width: 0; font-size: .85rem; color: #fff; }
.sb-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--rl-accent); color: #3a2a00;
    display: flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; }
.sb-nav { flex: 1 1 auto; overflow-y: auto; padding: .5rem .6rem 1rem; }
.sb-section { text-transform: uppercase; font-size: .66rem; letter-spacing: .08em; color: rgba(255,255,255,.5);
    padding: .9rem .6rem .3rem; font-weight: 600; }
.sb-link { display: flex; align-items: center; gap: .65rem; padding: .5rem .7rem; border-radius: .5rem; color: #d7e6de;
    text-decoration: none; font-size: .86rem; font-weight: 500; }
.sb-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.sb-link:hover { background: rgba(255,255,255,.09); color: #fff; }
.sb-link.active { background: rgba(255,255,255,.17); color: #fff; font-weight: 600; }
/* Logout row: same height and baseline as the fixed footer so both sit on one horizontal line */
.sb-bottom { flex: 0 0 auto; height: var(--rl-bar-h); display: flex; align-items: center; padding: 0 .8rem;
    border-top: 1px solid rgba(255,255,255,.15); background: #06331f; }
.sb-backdrop { display: none; }

/* ---- Main ---- */
.app-main { margin-left: var(--rl-sidebar-w); min-height: 100vh; padding-bottom: calc(var(--rl-bar-h) + 1rem); }
.app-main.no-sidebar { margin-left: 0; }
.app-topbar { display: flex; align-items: center; gap: .6rem; padding: .6rem 1.25rem; background: #fff; border-bottom: 1px solid #e3e8e5; }
.app-topbar-brand { font-weight: 700; color: var(--rl-primary-dark); text-decoration: none; }
.app-content { padding: 1.25rem; max-width: 1280px; }
.app-content > .container, .app-content > .container-fluid { max-width: 100%; padding-left: 0; padding-right: 0; }

/* ---- Fixed footer ---- */
.app-footer {
    position: fixed; left: var(--rl-sidebar-w); right: 0; bottom: 0; height: var(--rl-bar-h); z-index: 1030;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.25rem;
    background: #fff; border-top: 1px solid #dfe5e2; font-size: .8rem; color: #4b5a53;
}
.app-footer.no-sidebar { left: 0; }
.app-clock { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; color: var(--rl-primary-dark); }

/* ---- Auth screens ---- */
.auth-body { background: linear-gradient(160deg, #e8f3ee 0%, #f4f6f5 60%); min-height: 100vh; }
.auth-wrap { max-width: 460px; padding-top: 3rem; padding-bottom: 5rem; }
.auth-logo { font-size: 2.5rem; line-height: 1; }
.auth-card { border: 0; border-radius: 1rem; }

/* ---- Password show/hide ---- */
.pw-group .pw-toggle { border-color: var(--bs-border-color); background: #fff; color: #5b6862; }
.pw-group .pw-toggle:hover { color: var(--rl-primary); }
.pw-group:has(.is-invalid) ~ .invalid-feedback,
.was-validated .pw-group:has(:invalid) ~ .invalid-feedback { display: block; }

/* ---- Dashboard tiles ---- */
.tile { border: 1px solid #dfe5e2; border-radius: .9rem; transition: transform .08s, box-shadow .08s; }
.tile-icon { font-size: 2rem; line-height: 1; margin-bottom: .5rem; }
.tile-live:hover { transform: translateY(-2px); box-shadow: 0 .4rem 1rem rgba(0,0,0,.08); }
.tile-soon { opacity: .6; background: #fafbfb; }
.tile-primary { background: var(--rl-primary); color: #fff; border-color: var(--rl-primary); opacity: 1; }
.tile-primary .text-muted { color: rgba(255,255,255,.8) !important; }
.tile-primary .card-body { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.tile-primary .fw-semibold { font-size: 1.15rem; letter-spacing: .02em; }

/* ---- SweetAlert ---- */
.swal2-popup { font-size: .95rem; }
.swal2-styled.swal2-confirm { background-color: var(--rl-primary) !important; }
.swal2-toast { font-size: .85rem; }

/* ---- Mobile ---- */
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }
    body.sb-open .app-sidebar { transform: none; box-shadow: 0 0 2rem rgba(0,0,0,.4); }
    body.sb-open .sb-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1035; }
    .app-main { margin-left: 0; }
    .app-footer { left: 0; }
}
@media (max-width: 576px) {
    .btn { min-height: 44px; }
    .form-control, .form-select { min-height: 44px; }
    .app-footer { font-size: .72rem; padding: 0 .75rem; }
    .app-footer .text-truncate { display: none; }
    .app-footer .app-clock { margin: 0 auto; }
    .app-content { padding: .9rem; }
}

/* topbar user menu */
.sb-avatar-sm{width:26px;height:26px;font-size:.8rem;flex:0 0 auto}
.user-menu-name{max-width:160px}

/* two-column login */
.auth-wrap.auth-wide{max-width:980px}
.demo-tile{display:flex;align-items:center;gap:.75rem;width:100%;text-align:left;border:1px solid #dfe5e2;background:#fff;border-radius:.75rem;padding:.7rem .9rem;transition:.15s}
.demo-tile:hover:not(:disabled){border-color:#198754;box-shadow:0 .25rem .75rem rgba(25,135,84,.15);transform:translateY(-1px)}
.demo-tile .demo-ico{font-size:1.4rem;line-height:1}
.demo-tile small{color:#6c757d;display:block;line-height:1.2}
.demo-tile.active{border-color:#198754;background:#e8f3ee}

/* form wizard */
.wizard-steps{list-style:none;display:flex;gap:.25rem;padding:0;margin:0 0 1.25rem;counter-reset:w}
.wizard-steps li{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;counter-increment:w;font-size:.8rem;color:#6c757d;cursor:default}
.wizard-steps li::before{content:'';position:absolute;top:14px;left:-50%;width:100%;height:2px;background:#dfe5e2;z-index:0}
.wizard-steps li:first-child::before{display:none}
.wizard-dot{width:30px;height:30px;border-radius:50%;background:#dfe5e2;color:#495057;display:flex;align-items:center;justify-content:center;font-weight:600;z-index:1;margin-bottom:.25rem}
.wizard-dot::before{content:counter(w)}
.wizard-steps li.active .wizard-dot{background:#198754;color:#fff}
.wizard-steps li.active{color:#198754;font-weight:600}
.wizard-steps li.done .wizard-dot{background:#a3cfbb}
.wizard-steps li.done::before,.wizard-steps li.active::before{background:#a3cfbb}
.wizard-steps li.done{cursor:pointer}
form.wizard-on fieldset[data-step]{border:0;padding:0;margin:0;min-width:0}
@media (max-width:575px){.wizard-label{display:none}.wizard-steps li.active .wizard-label{display:block}}

/* public landing page */
.public-body{background:#f7faf8}
.hero{background:linear-gradient(135deg,#0b5d3b 0%,#198754 55%,#2e9e6b 100%)}
.stat-card{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:1rem;padding:1.1rem .5rem;backdrop-filter:blur(2px)}
.stat-num{font-size:2.4rem;font-weight:700;line-height:1}
.stat-label{font-size:.78rem;opacity:.9;margin-top:.35rem}
.coverage-map{height:520px;width:100%;background:#dfe9e4}
@media (max-width:575px){.coverage-map{height:400px}}
.key{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:4px;border-radius:3px}
.key-line{background:#198754;height:4px;vertical-align:3px}.key-border{background:#fd7e14;border-radius:50%}.key-load{background:#0d6efd;border-radius:50%}.key-truck{background:#dc3545;border-radius:50%}
.map-pin span{display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:.75rem}
.map-border span{width:14px;height:14px;border-radius:50%;background:#fd7e14;border:2px solid #fff;box-shadow:0 0 0 1px #fd7e14}
.map-load span{width:28px;height:28px;border-radius:50%;background:#0d6efd;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35);animation:pinpulse 2s infinite}
.map-truck span{width:28px;height:28px;border-radius:50%;background:#fff;border:2px solid #dc3545;font-size:1rem;box-shadow:0 2px 6px rgba(0,0,0,.3)}
@keyframes pinpulse{0%{box-shadow:0 0 0 0 rgba(13,110,253,.55)}70%{box-shadow:0 0 0 12px rgba(13,110,253,0)}100%{box-shadow:0 0 0 0 rgba(13,110,253,0)}}
@media (prefers-reduced-motion:reduce){.map-load span{animation:none}}
.map-country span{display:inline-block;transform:translate(-50%,-50%);white-space:nowrap;font-size:.68rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#0b5d3b;background:rgba(255,255,255,.75);padding:1px 6px;border-radius:999px;cursor:pointer}
.map-country.transit span{color:#6c757d;font-style:italic}
.corridor-chip{display:flex;gap:.6rem;align-items:center;border:1px solid #dfe5e2;background:#fff;border-radius:.6rem;padding:.5rem .7rem;font-size:.82rem;transition:.15s}
.corridor-chip:hover{border-color:#198754;box-shadow:0 .2rem .6rem rgba(25,135,84,.15)}
.chip-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.gate-card{border:1px solid #e3e9e6;transition:.15s;cursor:pointer;background:#fff}
.gate-card:hover{border-color:#198754;transform:translateY(-2px);box-shadow:0 .5rem 1rem rgba(25,135,84,.15)}
.cta-band{background:linear-gradient(135deg,#0b5d3b,#198754)}

/* Map without tiles (offline): plain water-coloured background, with a small note */
.no-tiles { background: #e8f0f7 !important; position: relative; }
.map-offline-note { position: absolute; left: 8px; bottom: 8px; z-index: 500; background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 6px; }

/* Phase 27: buttons centre their words (and icon) everywhere; headings with action rows wrap on small screens */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; text-align: center; }
.btn.w-100, .btn.d-block { display: flex; }
.btn-group > .btn, .btn-group-vertical > .btn { flex: 1 1 auto; }
.dropdown-toggle::after { margin-left: .2rem; }
.back-home { max-width: 100%; }
.back-home i { line-height: 1; }
h1, h2, h3 { overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
    .app-content { padding-left: .75rem; padding-right: .75rem; }
    .card-body { padding: .9rem; }
    .btn-toolbar, .page-actions { flex-wrap: wrap; gap: .5rem; }
    .btn-toolbar > .btn, .page-actions > .btn { flex: 1 1 auto; }
    .table td, .table th { white-space: normal; }
    .swal2-popup { width: 92vw !important; }
    .modal-dialog { margin: .5rem; }
}
.btn-group > .btn { min-width: 0; white-space: normal; }
.demo-tile { min-width: 0; }
.demo-tile > span:last-child, .demo-tile > div { min-width: 0; }
@media (max-width: 575.98px) { .demo-tile { padding: .6rem .7rem; } .demo-tile strong { font-size: .95rem; } }

/* Phase 28: smaller type on phones, centred footers, public menu in a hamburger */
@media (max-width: 575.98px) {
    html { font-size: 14px; }
    body { font-size: .9rem; }
    .hero h1, .hero .display-4, .hero .display-5 { font-size: 1.7rem; line-height: 1.2; }
    .hero .lead { font-size: 1rem; }
    h1.h4, .h4 { font-size: 1.15rem; }
    h2.h5, .h5 { font-size: 1rem; }
    .display-6 { font-size: 1.6rem; }
    .navbar-brand { font-size: 1rem; }
    .app-footer { justify-content: center; text-align: center; }
    .app-footer .app-clock { margin: 0; font-size: .72rem; }
    .public-footer .container { justify-content: center !important; }
}
.public-body .navbar .btn { min-width: 8rem; }