/* EBLA premium visual identity */
body{background:radial-gradient(circle at 12% 8%,rgba(169,31,50,.13),transparent 32%),radial-gradient(circle at 88% 18%,rgba(80,88,96,.15),transparent 34%),linear-gradient(135deg,#f7f9fa,#dfe5e9);background-attachment:fixed;font-weight:500}
.topbar{background:rgba(39,43,48,.9);backdrop-filter:blur(20px) saturate(145%);min-height:72px;padding:8px 20px;box-shadow:0 12px 36px rgba(15,18,20,.2);position:sticky;top:0;z-index:30}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}.brand img{width:108px;height:52px;object-fit:contain;background:#fff;border-radius:10px;padding:4px;box-shadow:0 5px 18px #0003}.nav a.on{border-bottom-color:#d93b50}
.panel{background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.75);border-radius:18px;backdrop-filter:blur(18px) saturate(135%);box-shadow:0 12px 32px rgba(31,42,51,.09),inset 0 1px 0 rgba(255,255,255,.85)}
.btn{border-radius:10px;border-color:#8c1728;background:linear-gradient(135deg,#b52439,#861626);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.btn:hover{background:linear-gradient(135deg,#ca334a,#961b2d);transform:translateY(-1px);box-shadow:0 8px 20px rgba(169,31,50,.22)}.btn.ghost{background:rgba(255,255,255,.72);color:#762031;border-color:rgba(118,32,49,.35)}
.t th{font-weight:700;color:#fff;background:rgba(69,75,81,.94)}.eyebrow{margin:0;color:#a91f32;font-weight:700;letter-spacing:.12em;font-size:.78rem}dialog{width:min(720px,94vw);max-height:88vh;overflow:auto;border:1px solid rgba(255,255,255,.8);border-radius:20px;padding:26px;background:rgba(255,255,255,.94);box-shadow:0 30px 100px #15191d66;backdrop-filter:blur(22px)}dialog::backdrop{background:rgba(20,25,29,.55);backdrop-filter:blur(7px)}details{border-bottom:1px solid #d7dde2;padding:10px 0}details summary{cursor:pointer;font-weight:600}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#f4f6f7;padding:12px;border-radius:8px}
@media(max-width:900px){.brand span{display:none}.topbar{position:relative}.nav{order:3;flex-basis:100%}}

/* Stable navigation geometry regardless of page language. */
.topbar{display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);align-items:center;gap:16px}.topbar .brand{justify-self:start}.topbar .nav{justify-self:center;justify-content:center;margin:0}.topbar .who{justify-self:end}.lookup-results button.active{background:#f8e5e8;color:#a91f32;outline:2px solid #a91f32}.lookup-results{max-height:260px;overflow:auto}.receipt-partial-dialog{width:min(1050px,94vw);max-height:90vh;border:1px solid #ddd;border-radius:20px;padding:24px}.receipt-partial-dialog::backdrop{background:#17212b88;backdrop-filter:blur(4px)}.receipt-partial-dialog input[type=number]{min-width:100px}.register-table td{vertical-align:middle}.register-table th{white-space:nowrap}
/* The shipments register has enough columns that a fixed-width, wrap-friendly layout fits them
   all without ever needing horizontal scroll, at the cost of a slightly smaller type size and
   rows that grow taller when a cell's content is long - a far better trade than hiding columns
   behind a scrollbar. The colgroup above sets each column's share of the table's own width. */
.register-table-shipment{table-layout:fixed;width:100%;font-size:.78rem}
.register-table-shipment th,.register-table-shipment td{padding:6px 7px;overflow-wrap:break-word;word-break:break-word}
.register-table-shipment th{white-space:normal;line-height:1.25}.register-table th input{min-width:85px}.icon-action{font-size:18px;padding:6px 10px}.selected-row{background:#f8e5e8}.action-text{font-size:13px;padding:4px 10px}.locked-note{font-size:12px;color:#8a8f98;white-space:nowrap}.sticky-col{position:sticky;left:0;background:#fff;z-index:1;box-shadow:1px 0 0 #eee}
/* Deliberately NOT position:sticky here: sticky positioning on table cells is inconsistent
   across browsers and was overlapping the neighboring column during a partial horizontal
   scroll. A plain, generously-sized column that scrolls like every other one is reliable. */
.sticky-col-end{min-width:130px;white-space:nowrap}
/* Shipment-stage colour progression - same soft-badge shape as the existing .st classes, using
   tints of the brand's own navy as a shipment moves along, settling into the existing green
   once delivered and the existing grey/strikethrough once cancelled. */
.st.ready{background:#E3EBF2;color:var(--navy-2)}
.st.in_progress{background:#CFE0F0;color:var(--navy-2)}
.st.loaded{background:#D4EAEA;color:#1B5E5E}
.st.in_transit{background:#C3D9EC;color:var(--navy)}
.st.arrived{background:#D6E9E3;color:#1B6E52}
/* Groups the General Information key-value grid into labelled sections (Route & Parties,
   Schedule & Reference, Compliance) instead of one long undifferentiated list - same .kv
   grid and typography as before, just organised, with a thin rule between groups. */
.kv-group{padding-top:14px;margin-top:14px;border-top:1px solid var(--line)}
.kv-group:first-of-type{padding-top:0;margin-top:0;border-top:none}
.kv-group h3{margin:0 0 10px;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--steel)}
/* Live as-you-type "similar party" suggestions under the Legal Name field - sits in normal flow
   (pushes the rest of the form down a little) rather than overlaying, since it's informational,
   not a pick-one-to-fill dropdown like .lookup-results. */
.name-suggestions:empty{display:none}
.name-suggestions{margin-top:6px;border:1px solid #EAC46B;background:var(--signal-bg);border-radius:var(--radius-s);padding:6px 10px}.register-layout{display:flex;gap:16px;align-items:flex-start}.selection-panel{width:260px;flex:0 0 260px;position:sticky;top:16px}.ops-tabs a.active{color:var(--navy);border-bottom:3px solid var(--navy);font-weight:700}.btn-link{background:none;border:none;padding:0;color:var(--navy-2);text-decoration:none;cursor:pointer;font:inherit}.btn-link:hover{text-decoration:underline}.shipment-status-cell{min-width:170px;white-space:nowrap}.shipment-status-chip{display:inline-flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:8px;padding:4px 10px;text-decoration:none;line-height:1.3}.shipment-status-chip b{color:var(--navy)}.shipment-status-chip span{font-size:11px;color:var(--steel)}
#vehicle-rows{display:flex;flex-direction:column;gap:10px;margin-top:8px}.vehicle-row{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fafbfc}.vehicle-row .lookup{flex:1 1 260px;min-width:220px}.vehicle-row label{flex:1 1 180px;min-width:150px;margin:0;font-size:13px;color:var(--steel)}.vehicle-row label input{margin-top:4px;width:100%}.vehicle-row button{flex:0 0 auto;align-self:flex-end}
/* Bilingual label: Arabic (primary) stacked over English (caption) - {% bi %} tag in fms.py.
   inline-flex + column keeps the pair compact and never lets the two scripts collide or overlap,
   inside a table header, a button, or a page title alike; sizes scale off the parent font-size. */
span.bi{display:inline-flex!important;flex-direction:column!important;line-height:1.28;gap:1px;vertical-align:middle;text-align:inherit;margin:0}
.bi-ar{font-weight:600}
.bi-en{font-size:.7em;font-weight:400;color:var(--steel);letter-spacing:.2px}
h1 .bi-en,h2 .bi-en{font-size:.5em}
th .bi,.btn .bi,button .bi{align-items:center;text-align:center}
.nav .bi{align-items:center}
.nav .bi-en{font-size:.62em}.topbar .brand img{flex-shrink:0}@media(max-width:1450px){.topbar{grid-template-columns:1fr 1fr}.topbar .nav{grid-row:2;grid-column:1/-1}.topbar .who{grid-column:2;grid-row:1}}

.draft-row td{background:#fff8e6}.badge-draft{display:inline-block;background:#f0b429;color:#3b2a00;border-radius:10px;padding:1px 8px;font-size:11px;font-weight:700;margin-inline-start:6px}
.autoinfo{background:rgba(20,48,74,.06);border-radius:10px;padding:9px 12px;min-height:40px}.autoinfo small{display:block;color:#7b8794;font-size:11px;margin-top:2px}
.backbar{margin:0 0 14px}.back-btn{font-size:14px;padding:7px 16px}

/* ---- Compact data entry (receipt form on desktop and the keeper's phone) ----------------------
   Smaller type and controls and tighter spacing so a whole receipt fits with far less scrolling and
   the row of measurements (length, width, height, weight) sits side by side. */
.compact .panel{padding:12px 14px;margin-bottom:10px;border-radius:14px}
.compact h2{font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;margin:0 0 8px;color:var(--steel)}
.compact label.f{font-size:.72rem}
.compact label.f>span,.compact div.f>span{display:block;margin-bottom:2px;line-height:1.15;font-size:.72rem;color:var(--steel)}
.compact .autoinfo{min-height:34px;padding:6px 8px;font-size:.85rem}
.compact label.f small,.compact .help{font-size:.68rem}
.compact input,.compact select,.compact textarea{min-height:34px;padding:4px 8px;font-size:.88rem;border-radius:8px}
.compact textarea{min-height:52px}
.compact .grid{gap:8px 10px}
.compact .checks{gap:6px 12px;font-size:.8rem}
.compact .checks label{font-size:.8rem}
.compact .btn{padding:8px 14px;min-height:36px}
.line-top{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 10px}
.line-top .span3{grid-column:span 3}
.line-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px 10px;margin-top:8px}
.compact .line{padding:10px 12px;margin-bottom:8px}
.compact .line h3{font-size:.85rem}
.compact .rm{font-size:1.1rem;padding:2px 10px;min-height:30px}
@media (max-width:760px){
  .compact .g3,.compact .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .compact .g3>.span2,.compact .g3>[style*="span 2"]{grid-column:1/-1}
  .line-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .line-top .span3{grid-column:1/-1}
  .line-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.name-typed{margin-top:4px}
.photo-tools{display:flex;gap:8px;flex-wrap:wrap}
.photo-grid{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.photo-grid .ph{position:relative;width:72px;height:72px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.photo-grid .ph img{width:100%;height:100%;object-fit:cover}
.photo-grid .ph button{position:absolute;top:2px;right:2px;min-height:22px;width:22px;padding:0;line-height:1;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;font-size:.9rem}

/* WhatsApp template editor */
.wa-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.wa-chips .chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:2px 10px;font-size:.74rem;min-height:26px;cursor:pointer;direction:ltr}
.wa-chips .chip:hover{border-color:var(--steel)}
.wa-chips .chip.custom{background:var(--signal-bg)}
.wa-preview{margin-top:8px}
.wa-bubble{white-space:pre-wrap;background:#E7F6EC;border:1px solid #C5E6D0;border-radius:10px;padding:8px 12px;font-size:.88rem;max-width:520px}
.wa-warn{margin-top:6px;color:#8A2B2B;font-size:.8rem}

/* The hidden attribute must always win over component display rules (label.f is display:block). */
[hidden]{display:none!important}

/* ---- an open lookup list must never be covered by the panels that follow it */
.panel.has-open-lookup{position:relative;z-index:40}
.lookup-results .lookup-typed{font-style:italic;color:#7A5200;border-top:1px solid var(--line)}
.typed-note{display:block;margin-top:3px;color:#7A5200;font-size:.72rem}
/* make sure a field being tabbed to has room above the sticky bar */
html{scroll-padding-bottom:110px}

/* ---- phones */
.next-pill{position:fixed;right:12px;top:0;z-index:60;min-height:40px;padding:6px 18px;border:0;border-radius:999px;
  background:var(--brand,#a91f32);color:#fff;font-weight:700;font-size:.95rem;box-shadow:0 4px 14px rgba(0,0,0,.28)}
@media (max-width:760px){
  /* iPhone Safari zooms into any field whose text is under 16px and leaves the page zoomed and shifted -
     so the text stays 16px and the compactness comes from spacing, not type size. */
  .compact input,.compact select,.compact textarea{font-size:16px;min-height:38px}
  .compact label.f>span,.compact div.f>span{font-size:.7rem}
  .compact .grid,.line-top,.line-grid{min-width:0}
  .compact label.f,.line-top>*,.line-grid>*{min-width:0}
  .savebar{padding:8px 12px;gap:8px}
  .savebar .livetotal{font-size:.78rem}
  body.kb-open .savebar{padding:3px 10px;box-shadow:none;border-radius:8px}
  body.kb-open .savebar .btn{display:none}
  body.kb-open .savebar .livetotal{font-size:.7rem}
}

.wa-chips .chip.dim{opacity:.55}
.wa-note{margin-top:6px;color:#7A5200;font-size:.78rem}

/* ---- expenses */
.expense-table input:not([type=checkbox]),.expense-table select{width:100%;min-height:34px}
.expense-table input[type=checkbox]{width:16px;height:16px;min-height:0;margin:0 6px 0 0;vertical-align:-3px}
.expense-table th.num,.expense-table td.num{text-align:right!important}
.expense-table td{vertical-align:top}
.expense-table .num{text-align:right}
.expense-totals{margin-top:8px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.7);border:1px solid var(--line)}
.linklike{border:0;background:transparent;padding:0;color:#17618c;font:inherit;cursor:pointer;text-align:left}
.sub-table{margin:4px 0 8px 18px;width:calc(100% - 18px);font-size:.85rem}
.expense-panel .btn[disabled]{opacity:.45;cursor:not-allowed}
.expense-problems{color:#7A5200}

.lifecycle{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 4px;font-size:.78rem}
.lifecycle .step{padding:3px 10px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#62798b}
.lifecycle .step.done{background:#E3F2E8;border-color:#BFE0C9;color:#1f6b3a;font-weight:600}
.lifecycle .arrow{color:#9aa8b4}

/* ---- Accounting section: Arabic, right-to-left (only the page body; the top bar is unchanged) */
.rtl-section{font-family:"IBM Plex Sans Arabic","Noto Naskh Arabic","DejaVu Sans",Tahoma,sans-serif}
.rtl-section .t th,.rtl-section .t td{text-align:right}
.rtl-section .t th.num,.rtl-section .t td.num{text-align:left;direction:ltr}
.rtl-section .ltr,.rtl-section input.ltr{direction:ltr;text-align:left}
.rtl-section input,.rtl-section select,.rtl-section textarea{text-align:right}
.rtl-section input[type=date],.rtl-section input.ltr,.rtl-section input[inputmode=decimal]{direction:ltr;text-align:left}
.rtl-section .pagehead{flex-direction:row}
.rtl-section label.f>span{text-align:right}
.rtl-section .totals{direction:rtl}
.rtl-section .list-plain li{flex-direction:row}
.rtl-section bdi.ref{direction:ltr;unicode-bidi:isolate}
.rtl-section .lookup-results{text-align:right}
.rtl-section .report-table td.amount,.rtl-section .report-table th.amount{text-align:left;direction:ltr;font-variant-numeric:tabular-nums}
.rtl-section .report-table tr.r-head td{background:#eef2f5;font-weight:700}
.rtl-section .report-table tr.r-total td{font-weight:700;border-top:2px solid var(--ebla-blue,#0057B8)}
.rtl-section .report-table tr.r-sub td{color:#52758a}
.rtl-section .report-table td.indent{padding-right:22px}

/* ---- Phones (found by auditing every accounting screen on an iPhone 13 viewport):
   1) the top menu made EVERY page 714px wide on a 390px screen (the grid item sized itself to its content), so the whole page scrolled sideways;
   2) inputs under 16px make iOS zoom the page when a field is focused;
   3) buttons and links were under the 44px touch size. */
@media (max-width: 720px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto !important; padding: 6px 12px; min-height: 56px; }
  .topbar .nav { grid-column: 1 / -1 !important; grid-row: 2; justify-self: stretch !important; justify-content: flex-start !important; width: 100%; max-width: 100%; min-width: 0;
                 overflow-x: auto; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .topbar .nav::-webkit-scrollbar { display: none; }
  .topbar .nav a { white-space: nowrap; flex: 0 0 auto; }
  .topbar .who { grid-column: 2; grid-row: 1; justify-self: end; }
  input, select, textarea { font-size: 16px !important; }
  .btn, button.btn, a.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .rtl-section .pagehead { flex-wrap: wrap; gap: 8px; }
  .rtl-section .pagehead .actions, .rtl-section .actions { flex-wrap: wrap; gap: 8px; }
  .rtl-section form.actions > label.f, .rtl-section form.actions > .f { flex: 1 1 100%; }
  .rtl-section form.actions select, .rtl-section form.actions input:not([type=checkbox]):not([type=radio]) { width: 100%; max-width: 100%; }
  .rtl-section .totals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .rtl-section table.t th, .rtl-section table.t td { padding: 8px 8px; }
  .rtl-section .scroll { -webkit-overflow-scrolling: touch; }
  .rtl-section .panel { padding: 12px; }
  .rtl-section .report-table td.amount, .rtl-section .report-table th.amount { white-space: nowrap; }
  .rtl-section h1 { font-size: 1.35rem; }
}
@media (max-width: 720px) {
  .lookup-create { min-height: 44px; padding: 8px 14px; font-size: 14px; }
}
@media (max-width: 560px) {
  /* a field that spans several columns on a desktop grid (inline style) must not create extra columns when the grid is a single column on a phone */
  .grid > [style*="grid-column"] { grid-column: 1 / -1 !important; }
}
/* a grid cell holding a wide table must be allowed to shrink, or the whole cell (and its panel) pushes past the screen edge */
.rtl-section .grid > * { min-width: 0; }
@media (max-width: 720px) {
  .rtl-section .grid.g2, .rtl-section .grid.g3 { grid-template-columns: minmax(0, 1fr); }
}
/* the expense panel's tables (a closed sheet adds rate, base amount and billing columns) must scroll inside the panel on a phone instead of widening the page */
@media (max-width: 720px) {
  .expense-panel table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* a button with a long label (e.g. "Receipt Balance / Edit Weight & Volume / Linked Shipments") wraps instead of pushing the page wider than the phone */
@media (max-width: 720px) {
  a.btn, button.btn { white-space: normal; max-width: 100%; text-align: center; }
}
/* any data table that is not wrapped in a scroll container scrolls inside its own box on a phone instead of widening the page (e.g. a shipment's charges table) */
@media (max-width: 720px) {
  table.t { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ===== accounting section: same visual identity as the dashboard (tiles, cards, tabs, red eyebrow) ===== */
.ops-tabs a.active{color:var(--navy);border-bottom:3px solid var(--navy);font-weight:700}
.acct-tabs{border-radius:14px;box-shadow:0 8px 24px rgba(15,23,42,.06);margin-bottom:18px}
.acct-tabs a{color:var(--steel)}
.rtl-section .eyebrow{letter-spacing:0;font-size:.85rem}
.rtl-section .linklist{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;padding:0;margin:0}
.rtl-section .linklist li{background:rgba(255,255,255,.92);border-radius:18px;box-shadow:0 10px 28px rgba(15,23,42,.07);padding:16px 18px;border:1px solid rgba(15,23,42,.05)}
.rtl-section .linklist li a{display:block;font-weight:700;font-size:1.05rem;text-decoration:none;color:var(--navy);margin-bottom:4px}
.rtl-section .linklist li a:hover{color:var(--ebla-blue,#0057B8)}
.rtl-section .linklist li span{display:block;color:var(--steel);font-size:.9rem;line-height:1.5}
.rtl-section .totals{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:0 0 18px}
.rtl-section .totals>div{background:rgba(255,255,255,.92);border-radius:18px;box-shadow:0 10px 28px rgba(15,23,42,.07);padding:16px 20px}
.rtl-section .totals .n{font-size:2rem;font-weight:700;color:#111827;line-height:1.1}
.rtl-section .totals .l{color:var(--steel);margin-top:4px}
.rtl-section .needs li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #eef2f6}
.rtl-section .needs{list-style:none;margin:0;padding:0}

input.locked,input[readonly]{background:#eef1f4;color:#4b5a68;cursor:not-allowed}

.rtl-section .needs li{flex-wrap:wrap}.rtl-section .needs li a{min-width:0;overflow-wrap:anywhere}


/* =====================================================================
   EBLA SHIPPING & CLEARANCE FZE — PREMIUM VISUAL LAYER
   Presentation-only: no business logic, data flow, or JS behavior changed.
   ===================================================================== */
:root{
  --ebla-navy:#063A72;
  --ebla-navy-deep:#04274D;
  --ebla-blue:#0057B8;
  --ebla-blue-bright:#0A8DFF;
  --ebla-sky:#69C8FF;
  --ebla-turq:#18C7C9;
  --ebla-ink:#082B4A;
  --ebla-muted:#58748F;
  --ebla-line:#D7E8F5;
  --ebla-surface:#FFFFFF;
  --ebla-soft:#F2F8FD;
  --ebla-glow:rgba(10,141,255,.28);
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 8% 10%,rgba(105,200,255,.22),transparent 28%),
    radial-gradient(circle at 92% 14%,rgba(24,199,201,.13),transparent 25%),
    linear-gradient(135deg,#F7FBFF 0%,#EDF6FC 48%,#F9FCFF 100%);
  background-attachment:fixed;
}
.topbar{
  background:linear-gradient(110deg,rgba(4,39,77,.98),rgba(6,58,114,.97) 55%,rgba(0,87,184,.94));
  border-bottom:1px solid rgba(105,200,255,.32);
  box-shadow:0 14px 38px rgba(4,39,77,.22),0 1px 0 rgba(255,255,255,.08) inset;
  backdrop-filter:blur(20px) saturate(150%);
}
.brand{gap:13px;letter-spacing:.015em}.brand img{width:122px;height:58px;object-fit:contain;background:#fff;border-radius:12px;padding:5px;box-shadow:0 7px 24px rgba(0,0,0,.22)}
.brand-name{font-size:.82rem;font-weight:700;letter-spacing:.055em;color:#F7FCFF;max-width:250px;white-space:normal;line-height:1.25}
.nav a{color:#DCEFFF;border-radius:10px;border-bottom:2px solid transparent;transition:background .22s ease,color .22s ease,transform .22s ease,box-shadow .22s ease}
.nav a:hover{color:#fff;background:rgba(105,200,255,.10);transform:translateY(-1px)}
.nav a.on{color:#fff;border-bottom-color:var(--ebla-sky);background:linear-gradient(135deg,rgba(0,119,230,.34),rgba(24,199,201,.12));box-shadow:0 0 22px rgba(10,141,255,.16)}
.who button{border-color:rgba(105,200,255,.42);transition:.2s ease}.who button:hover{background:rgba(255,255,255,.08);box-shadow:0 0 18px rgba(105,200,255,.18)}
main{animation:ebla-page-in .42s ease both}
@keyframes ebla-page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.panel{
  background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(247,252,255,.86));
  border:1px solid rgba(185,218,239,.72);border-radius:18px;
  box-shadow:0 12px 34px rgba(4,39,77,.08),0 2px 0 rgba(255,255,255,.9) inset;
  backdrop-filter:blur(14px) saturate(125%);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.panel.stat:hover,.grid>.panel.stat:hover{transform:translateY(-3px);border-color:rgba(10,141,255,.36);box-shadow:0 18px 42px rgba(4,39,77,.13),0 0 28px rgba(10,141,255,.08)}
.stat .n{color:var(--ebla-navy);text-shadow:0 0 20px rgba(10,141,255,.10);animation:ebla-number-in .65s ease both}
@keyframes ebla-number-in{from{opacity:0;transform:translateY(8px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
.eyebrow{color:var(--ebla-blue)!important}.sub{color:var(--ebla-muted)}
.btn{border-radius:11px;border:1px solid var(--ebla-blue);background:linear-gradient(135deg,#0077E6,#0057B8 62%,#063A72);box-shadow:0 8px 20px rgba(0,87,184,.16);position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,background .2s ease}
.btn::after{content:"";position:absolute;inset:0;transform:translateX(-110%);background:linear-gradient(100deg,transparent,rgba(255,255,255,.23),transparent);transition:transform .5s ease}
.btn:hover{background:linear-gradient(135deg,#0A8DFF,#0057B8 65%,#063A72);transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,87,184,.26),0 0 24px rgba(10,141,255,.12);filter:saturate(1.05)}
.btn:hover::after{transform:translateX(110%)}.btn:active{transform:translateY(0) scale(.985)}
.btn.ghost{color:var(--ebla-blue);background:rgba(255,255,255,.78);border-color:rgba(0,87,184,.25);box-shadow:0 5px 15px rgba(4,39,77,.06)}
.btn.ghost:hover{background:#fff;color:var(--ebla-navy);border-color:rgba(10,141,255,.5)}
input,select,textarea{border-color:#C6DCEB;border-radius:10px;background:rgba(255,255,255,.9);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
input:hover,select:hover,textarea:hover{border-color:#8FC7EB}input:focus,select:focus,textarea:focus{border-color:var(--ebla-blue-bright);box-shadow:0 0 0 4px rgba(10,141,255,.10),0 6px 18px rgba(4,39,77,.05);outline:none}
.t th{color:#fff;background:linear-gradient(110deg,#063A72,#0057B8);border-bottom:0}.t td{border-bottom-color:#E3EEF6}.t tbody tr{transition:background .18s ease,transform .18s ease}.t tbody tr:hover{background:linear-gradient(90deg,rgba(105,200,255,.09),rgba(24,199,201,.035));}
.t tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--ebla-blue-bright)}
/* Premium shipment status chips */
.status-col{vertical-align:middle!important}.shipment-status{display:inline-flex!important;align-items:center;gap:8px;padding:7px 12px!important;border-radius:999px!important;min-width:118px;justify-content:center;border:1px solid transparent;box-shadow:0 5px 14px rgba(4,39,77,.08);font-weight:700;letter-spacing:.01em;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.shipment-status:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(4,39,77,.14);filter:saturate(1.08)}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;box-shadow:0 0 0 4px rgba(255,255,255,.45)}
.shipment-status.stage-delivered,.shipment-status.stage-closed{background:linear-gradient(135deg,#D7FFF0,#B8F4DD);color:#087653;border-color:#82DEC0}.shipment-status.stage-delivered .status-dot,.shipment-status.stage-closed .status-dot{background:#0BAA78;box-shadow:0 0 12px rgba(11,170,120,.6)}
.shipment-status.stage-in-transit,.shipment-status.stage-in_progress,.shipment-status.stage-loaded{background:linear-gradient(135deg,#D9F1FF,#B9E4FF);color:#0057B8;border-color:#7BC9F6}.shipment-status.stage-in-transit .status-dot,.shipment-status.stage-in_progress .status-dot,.shipment-status.stage-loaded .status-dot{background:#0A8DFF;box-shadow:0 0 12px rgba(10,141,255,.72);animation:ebla-pulse 1.9s ease-in-out infinite}
.shipment-status.stage-arrived{background:linear-gradient(135deg,#D8FFFE,#BDF5F2);color:#08777A;border-color:#7BDED8}.shipment-status.stage-arrived .status-dot{background:#18AEB1;box-shadow:0 0 12px rgba(24,199,201,.7)}
.shipment-status.stage-ready,.shipment-status.stage-draft,.shipment-status.stage-provisional{background:linear-gradient(135deg,#FFF7D9,#FFE8A1);color:#795500;border-color:#F0CF65}.shipment-status.stage-ready .status-dot,.shipment-status.stage-draft .status-dot,.shipment-status.stage-provisional .status-dot{background:#E7A700;box-shadow:0 0 10px rgba(231,167,0,.55)}
.shipment-status.stage-cancelled{background:linear-gradient(135deg,#F3F6F8,#E1E9EF);color:#607789;border-color:#C6D4DE;text-decoration:none}.shipment-status.stage-cancelled .status-dot{background:#8497A5}
@keyframes ebla-pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.22);opacity:1}}
/* interactive tables / tabs / dialogs */
.ops-tabs a{transition:color .2s ease,background .2s ease,box-shadow .2s ease}.ops-tabs a:hover{background:var(--ebla-soft);color:var(--ebla-blue)}
dialog{border-color:rgba(105,200,255,.45);box-shadow:0 30px 100px rgba(4,39,77,.30),0 0 40px rgba(10,141,255,.10)}
.lookup-results{border:1px solid #C6DCEB;border-radius:12px;box-shadow:0 18px 40px rgba(4,39,77,.15)}.lookup-results button{transition:background .15s ease,padding-left .15s ease}.lookup-results button:hover{background:#EFF8FF;padding-left:14px}
.msgs li{animation:ebla-slide-in .35s ease both}@keyframes ebla-slide-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
/* Login: EBLA full-screen global logistics atmosphere */
body:has(.login-stage){background:#031B35;overflow-x:hidden}
body:has(.login-stage) main{max-width:none;width:100%;margin:0;padding:0}
.login-stage{position:relative;width:100%;min-height:100vh;display:grid;place-items:center;overflow:hidden;margin:0;padding:42px 20px;background:
  radial-gradient(circle at 50% 48%,rgba(10,141,255,.16),transparent 34%),
  radial-gradient(circle at 18% 22%,rgba(105,200,255,.09),transparent 24%),
  radial-gradient(circle at 82% 74%,rgba(24,199,201,.08),transparent 26%),
  linear-gradient(135deg,#02172D 0%,#03284E 46%,#063A72 100%);}
.login-ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.login-ambient::before{content:"";position:absolute;inset:-30%;background:repeating-radial-gradient(ellipse at 50% 50%,transparent 0 92px,rgba(105,200,255,.045) 93px 94px,transparent 95px 188px);animation:ebla-rings 32s linear infinite;transform:rotate(-12deg)}
.login-ambient::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,transparent 0 49.8%,rgba(105,200,255,.035) 50%,transparent 50.2%),
  linear-gradient(0deg,transparent 0 49.8%,rgba(105,200,255,.035) 50%,transparent 50.2%);
  background-size:180px 180px;mask-image:radial-gradient(circle at center,#000,transparent 78%);animation:ebla-grid 18s ease-in-out infinite alternate}
@keyframes ebla-rings{to{transform:rotate(348deg) scale(1.05)}}
@keyframes ebla-grid{from{opacity:.22;transform:scale(1)}to{opacity:.58;transform:scale(1.06)}}
.orb{position:absolute;border-radius:50%;filter:blur(1px);opacity:.7}.orb::after{content:"";position:absolute;inset:-20px;border-radius:50%;box-shadow:0 0 55px currentColor}
.orb-a{width:180px;height:180px;left:6%;top:14%;background:radial-gradient(circle,#0A8DFF,transparent 68%);color:#0A8DFF;animation:ebla-float-a 14s ease-in-out infinite}
.orb-b{width:135px;height:135px;right:8%;top:18%;background:radial-gradient(circle,#18C7C9,transparent 68%);color:#18C7C9;animation:ebla-float-b 16s ease-in-out infinite}
.orb-c{width:250px;height:250px;right:23%;bottom:-90px;background:radial-gradient(circle,rgba(10,141,255,.46),transparent 70%);color:#0A8DFF;animation:ebla-float-a 19s ease-in-out infinite reverse}
@keyframes ebla-float-a{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(32px,-22px,0)}}
@keyframes ebla-float-b{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-36px,25px,0)}}
.transport-lane{position:absolute;z-index:1;height:76px;filter:drop-shadow(0 0 12px rgba(105,200,255,.22));opacity:.62}
.transport-lane .lane-line{position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(105,200,255,.08) 8%,rgba(105,200,255,.58) 45%,rgba(24,199,201,.48) 62%,transparent 96%);box-shadow:0 0 12px rgba(105,200,255,.35)}
.transport-icon{position:absolute;top:50%;width:150px;height:auto;fill:none;stroke:#7BD8FF;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 7px rgba(105,200,255,.62));opacity:.86}
.transport-plane{width:118px;left:-140px;transform:translateY(-50%);animation:ebla-plane 24s linear infinite}
.transport-ship{width:150px;left:-170px;transform:translateY(-50%);stroke:#35D5D1;animation:ebla-ship 34s linear infinite}
.transport-truck{width:150px;left:-175px;transform:translateY(-50%);stroke:#8CCFFF;animation:ebla-truck 28s linear infinite}
.lane-air{left:0;right:0;top:20%;transform:rotate(-5deg)}
.lane-sea{left:0;right:0;bottom:13%;transform:rotate(2deg)}
.lane-road{left:0;right:0;top:67%;transform:rotate(-2deg)}
@keyframes ebla-plane{0%{left:-140px;opacity:0}8%,82%{opacity:.86}100%{left:calc(100% + 140px);opacity:0}}
@keyframes ebla-ship{0%{left:-180px;opacity:0}10%,84%{opacity:.72}100%{left:calc(100% + 180px);opacity:0}}
@keyframes ebla-truck{0%{left:-180px;opacity:0}10%,84%{opacity:.76}100%{left:calc(100% + 180px);opacity:0}}
.node{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(105,200,255,.13),0 0 20px #69C8FF;animation:ebla-node 4.5s ease-in-out infinite}
.node-1{left:18%;top:34%}.node-2{left:67%;top:27%;animation-delay:1.1s}.node-3{right:19%;top:66%;animation-delay:2.1s}.node-4{left:38%;bottom:14%;animation-delay:3s}
@keyframes ebla-node{0%,100%{transform:scale(.65);opacity:.42}50%{transform:scale(1.35);opacity:1}}
.login-card{position:relative;z-index:3;width:min(470px,94vw);padding:34px 36px 28px!important;border:1px solid rgba(105,200,255,.34);background:linear-gradient(145deg,rgba(255,255,255,.965),rgba(241,249,255,.91));box-shadow:0 35px 100px rgba(0,0,0,.38),0 0 60px rgba(10,141,255,.16);backdrop-filter:blur(24px) saturate(145%);animation:ebla-login-in .65s cubic-bezier(.2,.75,.25,1) both}
@keyframes ebla-login-in{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.login-logo-wrap{display:flex;justify-content:center;align-items:center;min-height:118px;margin:-4px auto 0}.login-logo-wrap img{display:block;width:min(275px,78%);height:auto;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(4,39,77,.14))}
.login-brand{text-align:center;color:var(--ebla-navy);font-weight:800;letter-spacing:.08em;font-size:.78rem;margin-top:2px}.login-kicker{text-align:center;color:var(--ebla-muted);font-size:.78rem;margin:4px 0 20px}.login-title{text-align:center;font-size:1.65rem;font-weight:800;color:var(--ebla-ink);margin-top:4px}.login-card>.sub{text-align:center;margin-bottom:22px}.login-submit{width:100%;margin-top:22px;justify-content:space-between;padding-inline:18px 20px}.login-submit span:last-child{font-size:1.25rem;transition:transform .2s ease}.login-submit:hover span:last-child{transform:translateX(-3px)}.login-footer{display:flex;justify-content:center;align-items:center;gap:9px;margin-top:20px;color:#6C879C;font-size:.75rem}.login-footer i{width:3px;height:3px;border-radius:50%;background:#18C7C9;box-shadow:0 0 7px rgba(24,199,201,.6)}
@media(max-width:720px){.login-stage{min-height:100vh;padding:24px 12px}.login-card{padding:28px 22px 22px!important}.login-logo-wrap{min-height:98px}.brand-name{display:none}.brand img{width:105px;height:50px}.transport-lane{opacity:.42}.lane-air{top:12%}.lane-road{top:78%}.lane-sea{bottom:8%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Reverted top-bar logo refinement: restore the previous EBLA header logo treatment. */

/* =====================================================================
   EBLA — HIGH-CONTRAST STATUS BADGES
   Presentation-only. Applies the approved visual status system to the
   shipments register/table without changing status values or operations.
   ===================================================================== */
.register-table-shipment .shipment-status,
.register-table-booking .shipment-status,
.ops-table .shipment-status{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-width:104px;
  padding:6px 10px!important;
  border-radius:999px!important;
  border:1px solid transparent;
  font-size:.76rem;
  font-weight:800;
  line-height:1.15;
  white-space:nowrap;
  box-shadow:0 5px 14px rgba(4,39,77,.10);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.register-table-shipment .shipment-status:hover,
.register-table-booking .shipment-status:hover,
.ops-table .shipment-status:hover{
  transform:translateY(-1px);
  filter:saturate(1.08);
  box-shadow:0 9px 22px rgba(4,39,77,.16);
}
.register-table-shipment .status-dot,
.register-table-booking .status-dot,
.ops-table .status-dot{
  width:8px;height:8px;flex:0 0 8px;border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 3px rgba(255,255,255,.55),0 0 10px currentColor;
}
/* CLEARED / delivered / closed — emerald */
.shipment-status.stage-delivered,
.shipment-status.stage-closed,
.shipment-status.stage-converted,
.shipment-status.stage-confirmed{
  color:#087653!important;
  background:linear-gradient(135deg,#E0FFF3,#B8F4DD)!important;
  border-color:#82DEC0!important;
}
.shipment-status.stage-delivered .status-dot,
.shipment-status.stage-closed .status-dot,
.shipment-status.stage-converted .status-dot,
.shipment-status.stage-confirmed .status-dot{color:#0BAA78;animation:ebla-status-pulse 2.2s ease-in-out infinite}
/* IN TRANSIT / loaded / active movement — vivid EBLA blue */
.shipment-status.stage-in-transit,
.shipment-status.stage-in_progress,
.shipment-status.stage-loaded{
  color:#0057B8!important;
  background:linear-gradient(135deg,#E0F4FF,#B9E4FF)!important;
  border-color:#72C5F6!important;
}
.shipment-status.stage-in-transit .status-dot,
.shipment-status.stage-in_progress .status-dot,
.shipment-status.stage-loaded .status-dot{color:#0A8DFF;animation:ebla-status-pulse 1.8s ease-in-out infinite}
/* ARRIVED — turquoise */
.shipment-status.stage-arrived{
  color:#08777A!important;
  background:linear-gradient(135deg,#DFFFFE,#BDF5F2)!important;
  border-color:#73D9D2!important;
}
.shipment-status.stage-arrived .status-dot{color:#18BFC2}
/* PENDING / draft / ready / on hold — amber for immediate visibility */
.shipment-status.stage-pending,
.shipment-status.stage-draft,
.shipment-status.stage-ready,
.shipment-status.stage-on_hold,
.shipment-status.stage-provisional{
  color:#795500!important;
  background:linear-gradient(135deg,#FFF8DD,#FFE7A0)!important;
  border-color:#F0CF65!important;
}
.shipment-status.stage-pending .status-dot,
.shipment-status.stage-draft .status-dot,
.shipment-status.stage-ready .status-dot,
.shipment-status.stage-on_hold .status-dot,
.shipment-status.stage-provisional .status-dot{color:#E7A700}
/* CANCELLED — explicit red, while remaining polished */
.shipment-status.stage-cancelled{
  color:#B4232F!important;
  background:linear-gradient(135deg,#FFF0F2,#FFD9DE)!important;
  border-color:#F1A3AD!important;
}
.shipment-status.stage-cancelled .status-dot{color:#E11D32}
@keyframes ebla-status-pulse{0%,100%{transform:scale(1);opacity:.88}50%{transform:scale(1.18);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .shipment-status .status-dot{animation:none!important}
}

/* V7 shipment register width refinement — presentation only.
   Gives STATUS enough room for its premium badge and removes the oversized
   empty action column so adjacent booking text never gets covered. */
.register-table-shipment{
  width:100%!important;
  min-width:1500px;
  table-layout:fixed;
}
.register-table-shipment th,
.register-table-shipment td{
  overflow-wrap:anywhere;
  word-break:normal;
}
.register-table-shipment .status-col{
  min-width:0;
  white-space:nowrap;
}
.register-table-shipment .shipment-status{
  min-width:118px;
  max-width:100%;
}
@media(max-width:900px){
  .register-table-shipment{min-width:1500px;}
}

/* V7 header brand: concise one-line company name beside the logo. */
.topbar .brand-name{
  font-size:1rem;
  font-weight:800;
  letter-spacing:.035em;
  max-width:none;
  white-space:nowrap;
  line-height:1;
}

/* ---- Batch 23: uniform, professional shipment form ---------------------------------------------
   كل الحقول بنفس الارتفاع والعرض ضمن شبكة واحدة؛ الحقول الطويلة (وصف، شروط، ملاحظات) تتمدد مع النص. */
.ffrm .panel{padding:18px 20px}
.fsec{font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--steel);margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px 16px;align-items:start}
.fgrid label.f,.mi-row label.f{margin:0}
.fgrid label.f.wide{grid-column:1/-1}
.fgrid input:not([type=checkbox]):not([type=radio]),.fgrid select,.mi-row input,.mi-row select,.ffrm .t input,.ffrm .t select{height:var(--tap);min-height:var(--tap)}
.fgrid textarea,.mi-row textarea,.ffrm .t textarea{min-height:var(--tap);resize:none;overflow:hidden;line-height:1.5}
.fgrid label.fchk{display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:0 12px;border:1px solid #B8C3CE;border-radius:var(--radius-s);background:#fff;color:var(--ink)}
.fgrid label.fchk>span{display:inline;margin:0}
.formhead h1{margin-bottom:2px}.formhead .sub{margin-bottom:16px}
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.segopt{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1.5px solid #B8C3CE;border-radius:var(--radius-m);background:#fff;cursor:pointer}
.segopt:has(input:checked){border-color:var(--navy);background:#EEF3F8;box-shadow:0 0 0 2px rgba(20,48,74,.12)}
.segopt small{color:var(--steel)}
.srcnote{margin:0;padding:12px 14px;border-radius:var(--radius-s);background:var(--signal-bg);border:1px solid #EAC46B}
.mi-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px 14px;align-items:start;padding:14px;border:1px solid var(--line);border-radius:var(--radius-m);margin-bottom:12px;background:#FAFBFC}
.mi-row .wide2{grid-column:span 2}.mi-row .mi-del{align-self:end}
@media(max-width:560px){.mi-row .wide2{grid-column:1/-1}}
#vehicle-rows .vehicle-row label{flex:1 1 170px}

/* ---- Batch 23: shipment page header - the main facts and the customer, bold and first ---------- */
.shiphead{padding:20px 24px;border-top:4px solid var(--navy)}
.sh-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;flex-wrap:wrap}
.sh-kicker{margin:0 0 6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.85rem}
.sh-op{color:var(--steel);font-weight:600}
.sh-lock{background:#FBE7E5;color:var(--danger);border-radius:999px;padding:2px 10px;font-weight:700;font-size:.78rem}
.sh-lock.open{background:var(--signal-bg);color:#7A5200}
.sh-job{font-size:2.1rem;font-weight:800;line-height:1.15;margin:0;direction:ltr;text-align:start;letter-spacing:.01em;color:var(--navy)}
.sh-customer{font-size:1.45rem;font-weight:800;margin:4px 0 2px;line-height:1.3;color:var(--ink)}
.sh-sub{margin:0;color:var(--steel);font-size:.88rem}
.sh-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn.disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.sh-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px 22px;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.sh-facts>div{min-width:0}.sh-facts .wide{grid-column:span 2}
.sh-facts dt{color:var(--steel);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.sh-facts dd{margin:2px 0 0;font-weight:800;font-size:1.05rem;color:var(--ink);overflow-wrap:anywhere}
.sh-facts dd small{font-weight:600;color:var(--steel)}.sh-facts .arrow{color:var(--steel);font-weight:600}
@media(max-width:560px){.sh-job{font-size:1.6rem}.sh-customer{font-size:1.2rem}.sh-facts .wide{grid-column:1/-1}.sh-actions{width:100%}}

/* ===== Dashboard (batch 23): hero indicators, compact tiles, action list, pipeline ===== */
.dash-hero{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.dash-card{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:16px;background:#fff;border:1px solid var(--line);border-inline-start:6px solid var(--navy-2);text-decoration:none;color:var(--ink);box-shadow:0 10px 26px rgba(31,42,51,.08);transition:transform .15s,box-shadow .15s}
.dash-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(31,42,51,.14)}
.dash-card.warn{border-inline-start-color:var(--signal)}.dash-card.bad{border-inline-start-color:var(--danger)}
.dc-label{font-weight:700;color:var(--steel);font-size:.95rem}.dc-n{font-size:2.8rem;font-weight:800;line-height:1.05;color:var(--navy)}
.dc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.82rem;font-weight:700;background:#E3EBF2;color:var(--navy-2)}
.chip.ok{background:var(--ok-bg);color:var(--ok)}.chip.warn{background:var(--signal-bg);color:#8a5a00}.chip.bad{background:var(--danger-bg);color:var(--danger)}
.dash-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.dash-tile{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--ink)}
a.dash-tile:hover{border-color:var(--navy-2)}.dash-tile.warn{background:var(--signal-bg);border-color:#ecd49a}
.dt-n{font-size:1.6rem;font-weight:800;color:var(--navy)}.dt-l{font-size:.85rem;color:var(--steel)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}.sec-head h2{margin:0;font-size:1.1rem}.sec-head.pad{padding:16px 20px 0}
.act-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.act-list li{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid var(--line)}.act-list li:last-child{border-bottom:0}
.act-list li>div{flex:1;min-width:0;display:flex;flex-direction:column}.act-list li>div b{font-size:.8rem;color:var(--steel);font-weight:700}.act-list li>div a,.act-list li>div span{overflow-wrap:anywhere}
.act-list .dot{width:10px;height:10px;border-radius:50%;background:var(--steel);flex:none}.act-list .warn .dot{background:var(--signal)}.act-list .bad .dot{background:var(--danger)}
.pipe{list-style:none;margin:0;padding:0;display:grid;gap:9px}.pipe li{display:grid;grid-template-columns:96px 1fr 34px;align-items:center;gap:10px}
.pipe .pbar{background:#E7ECF1;border-radius:999px;height:12px;overflow:hidden}.pipe .pbar i{display:block;height:100%;border-radius:999px;background:var(--navy-2)}
.pipe .pbar i.in_transit{background:#2f6fa5}.pipe .pbar i.arrived{background:var(--ok)}.pipe .pbar i.draft{background:#9aa9b6}
.pipe .pn{text-align:end}.mini-h{margin:16px 0 6px;font-size:.85rem;color:var(--steel)}
.plain-rows{list-style:none;margin:0;padding:0}.plain-rows li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line)}
.ok-empty{color:var(--ok);font-weight:700}
@media(max-width:900px){.dash-hero{grid-template-columns:1fr}.dc-n{font-size:2.3rem}}
@media(max-width:560px){.pipe li{grid-template-columns:78px 1fr 28px}.dash-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dash-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-cols>*{min-width:0}
.list-plain li{flex-wrap:wrap;overflow-wrap:anywhere}
@media(max-width:900px){.dash-cols{grid-template-columns:minmax(0,1fr)}}
.sh-ltr{direction:ltr;text-align:start;unicode-bidi:plaintext}
#container-rows select[name=container_size]{min-width:84px}
.btn.btn-sm{min-height:32px;padding:0 12px;font-size:.85rem;white-space:nowrap;margin-top:4px}
td.reg-ref{max-width:210px;white-space:normal;overflow-wrap:anywhere}td.reg-ref .ref{white-space:normal;display:inline;overflow-wrap:anywhere}

/* ---- batch 24: shipping documents buttons + horizontal tracking ---- */
.docs-panel h2 small{font-weight:400;font-size:.8rem}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:10px}
.doc-btn{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--ebla-line);border-radius:12px;background:var(--ebla-soft);color:var(--ebla-ink);text-decoration:none;cursor:pointer;font:inherit;text-align:start;min-height:60px;transition:border-color .15s,box-shadow .15s,background .15s}
.doc-btn:hover,.doc-btn:focus-visible{border-color:var(--ebla-blue);background:#fff;box-shadow:0 2px 10px var(--ebla-glow);outline:none}
.doc-btn .doc-ico{flex:none;width:40px;height:40px;border-radius:10px;background:var(--ebla-navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.doc-btn .doc-txt{display:flex;flex-direction:column;min-width:0;gap:2px}
.doc-btn .doc-txt b{font-size:.95rem}
.doc-btn .doc-txt small{color:var(--ebla-muted);font-size:.78rem;overflow-wrap:anywhere}
.track-h{list-style:none;margin:6px 0 0;padding:4px 2px 10px;display:flex;gap:0;overflow-x:auto;scrollbar-width:thin}
.track-h .trk{position:relative;flex:1 0 118px;min-width:118px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:0 6px}
.track-h .trk::before{content:"";position:absolute;top:13px;inset-inline-start:-50%;width:100%;height:3px;background:#D5DEE7;z-index:0}
.track-h .trk:first-child::before{display:none}
.track-h .trk.done::before,.track-h .trk.current::before{background:#2E9E5B}
.track-h .trk-dot{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid #D5DEE7;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700}
.track-h .trk.done .trk-dot{background:#2E9E5B;border-color:#2E9E5B}
.track-h .trk.current .trk-dot{background:#16A34A;border-color:#16A34A;box-shadow:0 0 0 5px rgba(22,163,74,.22)}
.track-h .trk.flag .trk-dot{background:#C2410C;border-color:#C2410C}
.track-h .trk.flag::before{background:#C2410C}
.track-h .trk-name{font-size:.86rem;color:#58748F}
.track-h .trk.done .trk-name{color:#1E7A45}
.track-h .trk.current .trk-name{color:#fff;background:#16A34A;border-radius:999px;padding:3px 12px;box-shadow:0 2px 8px rgba(22,163,74,.35)}
.track-h .trk-when{font-size:.74rem;color:#58748F;min-height:1em}
.track-h .trk-note{font-size:.74rem;color:#58748F;overflow-wrap:anywhere}
.track-h .trk.current .trk-when{color:#16803C;font-weight:600}
@media(max-width:600px){.track-h .trk{flex-basis:104px;min-width:104px}}

/* batch 25: the shipment/booking section links are real buttons; "Files / Add files" is green with a + */
.ops-tabs.ops-btns{display:flex;flex-wrap:wrap;gap:8px;overflow:visible;background:transparent;border-bottom:0;padding:2px 0;margin-bottom:16px}
.ops-tabs.ops-btns a{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 16px;border:1px solid var(--ebla-line,#d5dee8);border-radius:10px;background:#fff;color:var(--ebla-navy,#14304A);font-weight:600;font-size:.92rem;text-decoration:none;white-space:nowrap;box-shadow:0 1px 2px rgba(20,48,74,.08);transition:background .15s,border-color .15s,box-shadow .15s,transform .05s}
.ops-tabs.ops-btns a:hover,.ops-tabs.ops-btns a:focus-visible{background:var(--ebla-soft,#eef4fb);border-color:var(--ebla-blue,#1d5fa8);color:var(--ebla-blue,#1d5fa8);box-shadow:0 2px 8px var(--ebla-glow,rgba(29,95,168,.2));outline:none}
.ops-tabs.ops-btns a:active{transform:translateY(1px)}
.ops-tabs.ops-btns a.ob-add{background:#16A34A;border-color:#15803D;color:#fff;box-shadow:0 2px 6px rgba(22,163,74,.35)}
.ops-tabs.ops-btns a.ob-add:hover,.ops-tabs.ops-btns a.ob-add:focus-visible{background:#15803D;border-color:#166534;color:#fff;box-shadow:0 2px 10px rgba(22,163,74,.5)}
.ops-tabs.ops-btns a .ob-plus{padding:0;border:0;color:inherit;font-size:1.3rem;font-weight:800;line-height:1}
@media(max-width:560px){.ops-tabs.ops-btns{margin-inline:0;gap:6px}.ops-tabs.ops-btns a{flex:1 1 calc(50% - 6px);padding:8px 10px;white-space:normal;text-align:center;min-height:44px}.ops-tabs.ops-btns a.ob-add{flex-basis:100%}}

/* ===== Batch 27: quotation pricing table, status ribbon, WhatsApp buttons, booking cancel ===== */
.sub-h{margin:18px 0 8px;font-size:1rem;color:var(--ebla-navy,#0B3B7A)}
.notice-bar{background:#FFF7E0;border:1px solid #F0D58A;color:#6B4E00;border-radius:12px;padding:10px 14px;margin:0 0 14px}
.qt-table{width:100%;table-layout:fixed;min-width:760px}
.qt-table th{white-space:nowrap}
.qt-table .c-service{width:18%}.qt-table .c-desc{width:26%}.qt-table .c-qty{width:8%}.qt-table .c-unit{width:12%}.qt-table .c-price{width:12%}.qt-table .c-cur{width:11%}.qt-table .c-total{width:11%}.qt-table select.c{padding-inline:6px}.qt-table .c-x{width:34px}
.qt-table td{vertical-align:top}
.qt-table input,.qt-table select,.qt-table textarea{width:100%;min-width:0;box-sizing:border-box}
.qt-table textarea{resize:vertical;min-height:40px}
.qt-table td.total{font-weight:700;color:var(--ebla-navy,#0B3B7A);padding-top:14px;text-align:right;white-space:nowrap}
.qt-table .lookup{display:block}
.qt-table .lookup-create{position:static;display:block;margin-top:4px;font-size:.75rem;padding:2px 8px;min-height:0}
.qt-wrap [data-add]{margin-top:10px}
.qt-totals{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0 4px}
.qt-totals div{background:linear-gradient(135deg,#EEF4FB,#E4EEFA);border:1px solid #CFE0F0;border-radius:12px;padding:10px 18px;display:flex;flex-direction:column;min-width:150px}
.qt-totals span{font-size:.75rem;color:#5B7088;text-transform:uppercase;letter-spacing:.04em}.qt-totals b{font-size:1.25rem;color:var(--ebla-navy,#0B3B7A)}
.cost-box{margin-top:16px;border:1px dashed #B9CCE0;border-radius:12px;padding:10px 14px;background:rgba(238,244,251,.5)}
.cost-box summary{cursor:pointer;font-weight:600}
.form-actions{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 24px}
@media(max-width:760px){
 .qt-table{min-width:0}.qt-table thead{display:none}
 .qt-table,.qt-table tbody,.qt-table tr,.qt-table td{display:block;width:100%}
 .qt-table tr{border:1px solid var(--line,#d5dee8);border-radius:12px;padding:8px 10px;margin-bottom:10px;background:#fff;position:relative}
 .qt-table td{padding:4px 0;border:0}.qt-table td::before{content:attr(data-label);display:block;font-size:.72rem;color:#5B7088;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
 .qt-table td.total{text-align:left;padding-top:4px}
 .qt-table td:last-child{position:absolute;top:6px;right:8px;width:auto}.qt-table td:last-child::before{display:none}
}
/* status ribbon on the quotation / booking page */
.flow{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0;list-style:none;counter-reset:fl}
.flow li{counter-increment:fl;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:#EEF2F7;color:#6B7C90;font-size:.85rem;font-weight:600;border:1px solid #DCE5EF}
.flow li::before{content:counter(fl);display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#CBD6E3;color:#fff;font-size:.72rem}
.flow li.done{background:#E3F4EA;color:#14693A;border-color:#B7E1C6}.flow li.done::before{content:"✓";background:#16A34A}
.flow li.now{background:#E1EEFB;color:#0B3B7A;border-color:#9CC4EE}.flow li.now::before{background:#0057B8}
/* WhatsApp / confirm / cancel buttons */
.btn.wa{background:linear-gradient(135deg,#22C55E,#16A34A 60%,#15803D);border-color:#15803D;color:#fff;box-shadow:0 8px 20px rgba(22,163,74,.28);display:inline-flex;align-items:center;gap:8px}
.btn.wa:hover{background:linear-gradient(135deg,#2FD66B,#16A34A 65%,#166534);box-shadow:0 12px 28px rgba(22,163,74,.36)}
.wa-ico{width:20px;height:20px;fill:currentColor;flex:none}
.btn.danger-solid{background:linear-gradient(135deg,#EF4444,#DC2626 60%,#B91C1C);border-color:#B91C1C;color:#fff;box-shadow:0 8px 20px rgba(220,38,38,.24)}
.btn.danger-solid:hover{background:linear-gradient(135deg,#F87171,#DC2626 65%,#991B1B)}
.btn.confirm{background:linear-gradient(135deg,#0A8DFF,#0057B8 62%,#063A72);letter-spacing:.03em;font-weight:700}
.btn.big{min-height:46px;padding:0 24px}
.sent-note{display:inline-block;margin-inline-start:10px;color:#14693A;font-weight:600;font-size:.9rem}
.cancel-corner{margin-inline-start:auto}
.pagehead-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between}
dialog.reason-modal{border:1px solid rgba(105,200,255,.45);border-radius:16px;padding:0;max-width:min(520px,92vw);width:100%}
dialog.reason-modal::backdrop{background:rgba(4,39,77,.45)}
dialog.reason-modal form{padding:20px 22px;display:grid;gap:12px}
dialog.reason-modal h2{margin:0;color:#B91C1C}
dialog.reason-modal .modal-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}