/* Euphrates look 2.0 - loaded only when EUPHRATES_LOOK is 2.0 (see settings).
   Everything is scoped to body.look2 so 1.0 is untouched by this file.
   One accent colour, white top bar, edge-coloured cards, lighter tables. */
body.look2 {
    --l2-blue: #0d6efd; --l2-navy: #0b1a33; --l2-ink: #14213d; --l2-mute: #5c6b82; --l2-line: #e6e9ef; --l2-gold: #ffc107; --l2-green: #198754; --l2-bg: #f6f8fb;
    background: var(--l2-bg); color: var(--l2-ink);
}
body.look2 h1, body.look2 .h1 { font-size: 1.75rem; letter-spacing: -.025em; font-weight: 800; }
body.look2 h2, body.look2 .h2 { letter-spacing: -.02em; font-weight: 750; }
body.look2 > .container { max-width: 1180px; }

/* ---- top bar: same markup and ids as 1.0, restyled as a white bar with text links ---- */
body.look2 .navbar { background: #fff !important; border-bottom: 1px solid var(--l2-line); margin-bottom: 1.4rem !important; padding: .35rem 0; }
body.look2 .navbar .l2-brand { font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; color: var(--l2-ink); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; margin-right: 1rem; }
body.look2 .navbar .l2-brand i { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, var(--l2-blue), #5aa9ff); display: inline-block; }
body.look2 .nav-buttons-group .btn { background: transparent; border-color: transparent; color: var(--l2-mute); font-weight: 500; border-radius: .5rem; padding: .45rem .7rem; box-shadow: none; }
body.look2 .nav-buttons-group .btn:hover, body.look2 .nav-buttons-group .dropdown:hover > .btn { background: #eef4ff; color: var(--l2-blue); }
body.look2 .nav-buttons-group .btn.btn-outline-primary { color: var(--l2-blue); background: #eef4ff; }
body.look2 .nav-buttons-group .btn.btn-success { background: var(--l2-blue); color: #fff; font-weight: 700; box-shadow: 0 6px 16px rgba(13,110,253,.22); }
body.look2 .nav-buttons-group .btn.btn-success:hover { background: #0b5ed7; color: #fff; }
body.look2 .nav-buttons-group .btn.btn-warning { background: transparent; color: #7a5c00; }
body.look2 .nav-buttons-group .btn.btn-warning:hover { background: #fff8e1; }
body.look2 .nav-buttons-group .btn .badge { vertical-align: top; }
body.look2 #welcomeDropdownMenuLink { background: #eef4ff; color: var(--l2-blue); border: 0; border-radius: 999px; font-weight: 700; }
body.look2 #alerts-bell-btn { border-radius: 999px; background: #fff; }
body.look2 .navbar .dropdown-menu { border: 1px solid var(--l2-line); border-radius: .8rem; box-shadow: 0 .8rem 1.6rem rgba(11,26,51,.12); }

/* ---- cards: white, rounded, a coloured left edge instead of a coloured header ---- */
body.look2 .card { border: 1px solid var(--l2-line); border-radius: 1rem; box-shadow: none !important; }
body.look2 .card > .card-header { background: #fff !important; color: var(--l2-ink) !important; border-bottom: 1px solid var(--l2-line); border-radius: 1rem 1rem 0 0 !important; font-weight: 700; }
body.look2 .card > .card-header .text-white, body.look2 .card > .card-header h1, body.look2 .card > .card-header h2, body.look2 .card > .card-header h3, body.look2 .card > .card-header h5 { color: var(--l2-ink) !important; }
body.look2 .card > .card-header .btn-close-white { filter: none; }
body.look2 .card:has(> .card-header.bg-danger), body.look2 .card.border-danger, body.look2 .card.card-pending { border-left: 4px solid #dc3545; }
body.look2 .card:has(> .card-header.bg-warning) { border-left: 4px solid var(--l2-gold); }
body.look2 .card:has(> .card-header.bg-success) { border-left: 4px solid var(--l2-green); }
body.look2 .card:has(> .card-header.bg-primary) { border-left: 4px solid var(--l2-blue); }
body.look2 .card:has(> .card-header.bg-secondary) { border-left: 4px solid #adb5bd; }
body.look2 .card > .card-header .badge.bg-dark, body.look2 .card > .card-header .badge.bg-light { background: #eef4ff !important; color: var(--l2-blue) !important; }
body.look2 .card > .card-header .btn-light, body.look2 .card > .card-header .btn-outline-light { background: #fff; color: var(--l2-ink); border-color: #cfd6e0; }
body.look2 .card > .card-header .btn-light.active, body.look2 .card > .card-header .btn-outline-light.active { background: var(--l2-blue); color: #fff; border-color: var(--l2-blue); }
body.look2 .card > .card-header .text-white-50 { color: var(--l2-mute) !important; }
body.look2 .card > .card-header a.text-white { color: var(--l2-blue) !important; }
body.look2 .card > .card-header .form-select, body.look2 .card > .card-header .form-control { color: var(--l2-ink); }
body.look2 .list-group-item { border-color: var(--l2-line); }
body.look2 .alert { border-radius: .8rem; }

/* ---- tables: quiet headings, hover rows, big prices ---- */
body.look2 .table thead th { text-transform: uppercase; font-size: .76rem; letter-spacing: .05em; color: var(--l2-mute); font-weight: 600; border-bottom: 1px solid var(--l2-line); background: #fff; }
body.look2 .table > :not(caption) > * > * { border-bottom-color: var(--l2-line); padding-top: .7rem; padding-bottom: .7rem; }
body.look2 .table-hover > tbody > tr:hover > * { --bs-table-hover-bg: #f8fbff; }
body.look2 .table-light, body.look2 .table-light > th { background: #fff; }
body.look2 .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-striped-bg: transparent; }

/* ---- buttons, pills, forms ---- */
body.look2 .btn { border-radius: .5rem; font-weight: 600; }
body.look2 .btn-primary { box-shadow: 0 6px 16px rgba(13,110,253,.18); }
body.look2 .btn-info { background: #eef4ff; border-color: #eef4ff; color: var(--l2-blue); }
body.look2 .btn-info:hover { background: #dbe7ff; border-color: #dbe7ff; color: var(--l2-blue); }
body.look2 .btn-secondary { background: #fff; border-color: #cfd6e0; color: var(--l2-ink); }
body.look2 .btn-secondary:hover { background: #f1f3f5; color: var(--l2-ink); }
body.look2 .badge { border-radius: 999px; font-weight: 700; }
body.look2 .badge.bg-warning { background: #fff3cd !important; color: #664d03 !important; }
body.look2 .badge.bg-info { background: #e8f1ff !important; color: var(--l2-blue) !important; }
body.look2 .badge.bg-success { background: #d1e7dd !important; color: #0f5132 !important; }
body.look2 .badge.bg-secondary { background: #eef0f4 !important; color: #495057 !important; }
body.look2 .badge.bg-danger { background: #dc3545 !important; color: #fff !important; }
body.look2 .form-control, body.look2 .form-select { border-radius: .5rem; border-color: #cfd6e0; }
body.look2 .form-control:focus, body.look2 .form-select:focus { border-color: var(--l2-blue); box-shadow: 0 0 0 .2rem rgba(13,110,253,.12); }
body.look2 footer { border-top: 1px solid var(--l2-line) !important; color: var(--l2-mute) !important; }

/* ---- dashboard hero: greeting, one line of what's going on, four numbers ---- */
body.look2 .l2-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
body.look2 .l2-hero h1 { margin: 0; }
body.look2 .l2-hero .l2-sub { color: var(--l2-mute); margin-top: .15rem; }
body.look2 .l2-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-bottom: 1.2rem; }
body.look2 .l2-kpi { background: #fff; border: 1px solid var(--l2-line); border-radius: .9rem; padding: .85rem 1rem; text-decoration: none; color: inherit; display: block; }
body.look2 .l2-kpi:hover { border-color: #b9d0ff; }
body.look2 .l2-kpi span { color: var(--l2-mute); font-size: .8rem; }
body.look2 .l2-kpi b { display: block; font-size: 1.5rem; letter-spacing: -.02em; margin-top: .1rem; line-height: 1.15; }
body.look2 .l2-kpi .l2-d { font-size: .78rem; color: var(--l2-green); font-weight: 600; }
body.look2 .l2-kpi .l2-d.warn { color: #b45309; }
@media (max-width: 767.98px) {
    body.look2 .l2-kpis { grid-template-columns: 1fr 1fr; gap: .6rem; }
    body.look2 .l2-kpi b { font-size: 1.25rem; }
    body.look2 h1, body.look2 .h1 { font-size: 1.45rem; }
}

/* ---- page heroes, status pills, bids strip ---- */
body.look2 .l2-status { border-radius: 999px; padding: .4rem .85rem; font-weight: 700; font-size: .85rem; background: #eef0f4; color: #495057; white-space: nowrap; }
body.look2 .l2-status-posted { background: #eef0f4; } body.look2 .l2-status-awarded, body.look2 .l2-status-dispatched { background: #fff3cd; color: #664d03; }
body.look2 .l2-status-checked_in_pickup, body.look2 .l2-status-in_transit, body.look2 .l2-status-checked_in_delivery { background: #e8f1ff; color: var(--l2-blue); }
body.look2 .l2-status-delivered { background: #d1e7dd; color: #0f5132; } body.look2 .l2-status-cancelled { background: #f8d7da; color: #842029; }
body.look2 .l2-strip { background: var(--l2-navy); color: #cfe0ff; border-radius: .8rem; padding: .8rem 1.1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: .92rem; }
body.look2 .l2-strip b { color: #fff; }
/* ---- load page timeline ---- */
body.look2 .l2-timeline { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .4rem .8rem; }
body.look2 .l2-timeline li { display: flex; gap: .5rem; padding: .35rem 0; font-size: .88rem; color: var(--l2-mute); }
body.look2 .l2-timeline li.done, body.look2 .l2-timeline li.now { color: var(--l2-ink); }
body.look2 .l2-timeline i { width: 12px; height: 12px; border-radius: 50%; margin-top: .3rem; background: #cfd6e0; flex: 0 0 12px; }
body.look2 .l2-timeline li.done i { background: var(--l2-green); } body.look2 .l2-timeline li.now i { background: var(--l2-blue); box-shadow: 0 0 0 4px rgba(13,110,253,.2); }
body.look2 .l2-timeline .l2-when { color: var(--l2-mute); font-size: .78rem; }
/* ---- post a load: form + review panel ---- */
body.look2 .l2-post { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
body.look2 .l2-review { position: sticky; top: 1rem; }
body.look2 .l2-review .card { margin-bottom: 1rem; }
/* The Review panel is the last thing read before a driver is told where to go,
   so resting on it brings it forward. Abbas, 2026-09-12: "when mouse over the
   review panel give it life by expanding %12." It grows from its top-right
   corner, into the page margin - growing from the centre would push it left
   over the form being read. Mouse only: the class is added from mouseenter
   (base.html), never on a touch screen, where the panel is full width under
   the form and has nowhere to go. */
body.look2 .l2-review { transition: transform .22s cubic-bezier(.2,.8,.2,1); transform-origin: 100% 0; }
body.look2 .l2-review.l2-lift { transform: scale(1.12); z-index: 5; }
body.look2 .l2-review.l2-lift .card { box-shadow: 0 18px 40px rgba(13,110,253,.18); }
@media (prefers-reduced-motion: reduce) {
    body.look2 .l2-review { transition: none; }
    body.look2 .l2-review.l2-lift { transform: none; }
}
body.look2 .l2-rv-lane { font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; }
body.look2 .l2-rv-meta { color: var(--l2-mute); font-size: .85rem; margin-top: .15rem; }
body.look2 .l2-rv-price { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; margin-top: .5rem; min-height: 1.2em; }
@media (max-width: 991.98px) { body.look2 .l2-post { grid-template-columns: 1fr; } body.look2 .l2-review { position: static; } body.look2 .l2-review.l2-lift { transform: none; } }

/* ---- BOL letterhead ---- */
body.look2 .l2-bol-head { border-bottom: 3px solid var(--l2-blue) !important; }
body.look2 .l2-bol-kind { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--l2-blue); font-weight: 800; margin-top: .4rem; }
/* ---- phones: tables read as cards (labels come from the header row, see l2Cardify in base.html) ---- */
@media (max-width: 767.98px) {
    body.look2 table.l2-cardify { display: block; width: 100%; border-collapse: separate; }
    body.look2 table.l2-cardify > thead { display: none; }
    body.look2 table.l2-cardify > tbody, body.look2 table.l2-cardify > tbody > tr { display: block; }
    body.look2 table.l2-cardify > tbody > tr { border: 1px solid var(--l2-line); border-radius: .8rem; margin-bottom: .6rem; padding: .35rem .8rem; background: #fff; }
    body.look2 table.l2-cardify > tbody > tr > td, body.look2 table.l2-cardify > tbody > tr > th { display: flex; justify-content: space-between; align-items: center; gap: .8rem; border: 0; padding: .3rem 0; text-align: right; background: transparent !important; white-space: normal; min-width: 0; width: auto !important; }
    body.look2 table.l2-cardify > tbody > tr > td > * { max-width: 100%; }
    body.look2 table.l2-cardify > tbody > tr > td > .d-flex { flex-wrap: wrap; justify-content: flex-end; gap: .4rem !important; }
    body.look2 table.l2-cardify > tbody > tr > td::before { content: attr(data-label); color: var(--l2-mute); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; text-align: left; flex: 0 0 auto; }
    body.look2 table.l2-cardify > tbody > tr > td:not([data-label])::before { content: none; }
    body.look2 table.l2-cardify > tbody > tr > td:first-child { font-weight: 700; }
    body.look2 .table-responsive { overflow: visible; }
}

/* Submit Pickup Details' Review panel: a two-column definition list, so what
   is about to be sent to the driver reads as facts rather than a paragraph. */
/* The Review panel's facts. Abbas, 2026-09-19: "the review window doesn't
   have right indentation." It was a two-column grid with a 5.6rem label
   column, and every value joined with " - ", so in a ~300px aside a
   three-part address became one dense run that wrapped wherever it ran out
   of room and the eye had nothing to land on.
   The label is an eyebrow above its value now, so the value gets the full
   width, and each part of an address is its own line. */
body.look2 .sd-rv { font-size: .85rem; margin: 0; }
body.look2 .sd-rv dt { color: var(--l2-mute); font-weight: 700; font-size: .68rem;
                       letter-spacing: .07em; text-transform: uppercase; margin: .7rem 0 .05rem; }
body.look2 .sd-rv dt:first-child { margin-top: 0; }
body.look2 .sd-rv dd { margin: 0; overflow-wrap: anywhere; line-height: 1.45; }
body.look2 .sd-rv dd .l { display: block; }
body.look2 .sd-rv dd .dim { color: var(--l2-mute); }