/* Structural tokens — theme-independent. Shapes, sizing, radii live here so they don't get duplicated across every theme block. */ :root{ --r:12px;--rs:8px; --topbar-h:60px; } /* Dark theme — default. Selector `:root, [data-theme="dark"]` so a fresh page with no data-theme attribute still gets dark; the explicit attribute is set by src/ui/theme.js when the user toggles or restores from storage. `color-scheme` is scoped per theme (not on :root) so native form controls — checkboxes, radio buttons, scrollbars — follow the app's data-theme rather than the OS preference. Without this, e.g. a Windows machine set to light OS would render the native checkbox light even when the app itself is in dark mode. */ :root, [data-theme="dark"]{ color-scheme:dark; --bg:#0f1115;--surface:#16181d;--surface2:#1c1f26;--surface3:#252932; --border:rgba(255,255,255,0.09);--border2:rgba(255,255,255,0.18); --border-soft:rgba(255,255,255,0.05); --text:#f1f5f9;--text2:#cbd5e1;--text3:#94a3b8; --accent:#4f9eff;--adim:color-mix(in srgb,var(--accent) 10%,transparent);--atext:#ffffff; --red:#ef4444;--red-soft:rgba(239,68,68,0.10);--red-bord:rgba(239,68,68,0.35); --green:#10b981;--orange:#f59e0b; --info-bg:rgba(56,189,248,0.08);--info-bord:rgba(56,189,248,0.28);--info-text:#7dd3fc; --shadow-1:0 1px 2px rgba(0,0,0,0.20); --shadow-2:0 4px 12px rgba(0,0,0,0.25); } /* Light theme — opt-in via [data-theme="light"]. Off-white background (slate-50) instead of pure white reads softer at typical office lighting; accent shifts a touch darker (#3b82f6) for better contrast on white. */ [data-theme="light"]{ color-scheme:light; --bg:#f8fafc;--surface:#ffffff;--surface2:#f1f5f9;--surface3:#e2e8f0; --border:rgba(15,23,42,0.10);--border2:rgba(15,23,42,0.20); --border-soft:rgba(15,23,42,0.06); --text:#0f172a;--text2:#475569;--text3:#64748b; --accent:#3b82f6;--adim:color-mix(in srgb,var(--accent) 10%,transparent);--atext:#ffffff; --red:#dc2626;--red-soft:rgba(220,38,38,0.08);--red-bord:rgba(220,38,38,0.30); --green:#059669;--orange:#d97706; --info-bg:rgba(14,165,233,0.08);--info-bord:rgba(14,165,233,0.30);--info-text:#0369a1; --shadow-1:0 1px 2px rgba(15,23,42,0.06); --shadow-2:0 4px 12px rgba(15,23,42,0.08); } /* Lucide icons — replaces emoji glyphs throughout. The Lucide UMD bundle converts tags into on createIcons(). We size them via 1em so each icon scales with its parent's font-size; vertical-align tweak keeps them centered on the text baseline. */ svg.lucide{width:1em;height:1em;vertical-align:-0.18em;stroke-width:2;flex-shrink:0} /* Inline placeholder while the Lucide script is still loading. Prevents the bare "i" letter from showing if the user sees the page before icons swap. */ i[data-lucide]{display:inline-block;width:1em;height:1em} /* Keyboard-only focus indicator. Mouse clicks keep the subtle border-color change defined on individual inputs; only Tab/arrow keys paint the ring. */ :focus{outline:none} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--rs)} button:focus-visible,input:focus-visible,select:focus-visible, .tab:focus-visible,.api-pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* Visually hidden but accessible to screen readers. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:15px} body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5} .app{display:flex;flex-direction:column;min-height:100vh} /* topbar — replaces the old sidebar; sticks to top of viewport */ .topbar{display:flex;align-items:center;gap:18px;padding:12px 24px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;flex-wrap:wrap} .topbar-brand{display:flex;align-items:center;gap:12px;flex-shrink:0} .topbar-logo{height:42px;width:auto;display:block;flex-shrink:0} .lbox{width:32px;height:32px;background:var(--accent);border-radius:var(--rs);display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-size:10px;font-weight:500;color:var(--atext)} .ltxt{font-size:14px;font-weight:500;line-height:1.1} .lsub{font-size:12px;color:var(--text3);font-family:'DM Mono',monospace} .tabs{display:flex;gap:4px;flex-shrink:0} .tab{padding:8px 16px;text-align:center;font-size:14px;font-weight:600;border-radius:var(--rs);cursor:pointer;border:1px solid var(--border);color:var(--text3);background:transparent;transition:all .15s;font-family:'DM Sans',sans-serif} .tab:hover{color:var(--text);border-color:var(--border2);background:var(--surface2)} .tab.active{background:var(--adim);border-color:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent)} .tab-exp{margin-left:8px;border-left:1px solid var(--border);padding-left:14px;border-radius:0 var(--rs) var(--rs) 0} .topbar-area{flex:0 1 auto;min-width:0} .topbar-area select.finput{font-size:13px;padding:7px 26px 7px 10px;min-width:220px} .topbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0} .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rs);color:var(--text2);cursor:pointer;transition:all .15s;padding:0} .theme-toggle:hover{border-color:var(--border2);color:var(--accent);background:var(--surface3)} .theme-toggle svg{width:16px;height:16px} .api-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 10px 6px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:99px;font-size:12px;font-family:'DM Mono',monospace;color:var(--text2);cursor:pointer;transition:all .15s} .api-pill:hover{border-color:var(--border2);color:var(--text);background:var(--surface3)} .api-pill-gear{font-size:13px;color:var(--text3);padding-left:6px;border-left:1px solid var(--border);line-height:1;transition:color .15s} .api-pill:hover .api-pill-gear{color:var(--accent)} .modal-section-title{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);font-family:'DM Sans',sans-serif;font-weight:600;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)} .slbl{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);margin-bottom:8px;font-family:'DM Sans',sans-serif} .field{margin-bottom:11px} .field label{display:block;font-size:13px;color:var(--text2);margin-bottom:4px} .field input,.field select,.finput{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rs);color:var(--text);font-size:14px;font-family:'DM Sans',sans-serif;padding:9px 11px;outline:none;transition:border-color .15s;appearance:none} .field input:focus,.field select:focus,.finput:focus{border-color:var(--border2)} .field select,.finput[data-select]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:26px;cursor:pointer} .chk{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:var(--rs);cursor:pointer;transition:background .1s;margin-bottom:2px} .chk:hover{background:var(--surface2)} .chk input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;flex-shrink:0} .chk span{font-size:14px;color:var(--text2);flex:1} .chk .pt{font-family:'DM Mono',monospace;font-size:12px;color:var(--text3)} .sub-field{margin:4px 0 8px 22px;padding:10px;background:var(--surface2);border-radius:var(--rs);border:1px solid var(--border)} .sub-field label{font-size:12px;color:var(--text3);margin-bottom:4px;display:block} .sub-field label.lbl-spaced{margin-top:6px} .sub-field input{width:100%;background:var(--surface3);border:1px solid var(--border);border-radius:4px;color:var(--text);font-size:13px;padding:6px 9px;outline:none;font-family:'DM Mono',monospace} .sub-hint{font-size:11px;color:var(--text3);margin-top:6px;line-height:1.4} .lbl-hint{color:var(--text3);font-weight:400;text-transform:none;letter-spacing:0;font-size:10px;margin-left:4px} .div{height:1px;background:var(--border);margin:12px 0} .dot{width:6px;height:6px;border-radius:50%;background:var(--text3);flex-shrink:0} .dot.ok{background:var(--green)}.dot.err{background:var(--red)} /* main */ .main{padding:14px 28px 18px;overflow-y:auto} /* Title + subtitle laid out inline so the top of the page costs ~30px instead of ~80px stacked. Subtitle wraps under title on narrow viewports. */ .main-header{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:12px} .main-title{font-size:20px;font-weight:500;margin:0} .main-sub{font-size:12px;color:var(--text3);font-family:'DM Mono',monospace;margin:0} /* sticky action bar */ /* action-bar sticks below the topbar; --topbar-h is the assumed single-row topbar height. On narrower viewports the topbar wraps to multiple rows so we switch to position:static (action-bar scrolls with content) to prevent the two sticky elements from overlapping. */ .action-bar{position:sticky;top:var(--topbar-h);z-index:10;background:var(--bg);border-bottom:1px solid var(--border);padding:8px 0 10px;margin-bottom:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap} .action-total{flex:1 1 auto;min-width:160px} @media (max-width:900px){ .action-bar{position:static} } .action-total-main{font-size:22px;font-weight:600;color:var(--accent)} .action-total-sub{font-size:12px;color:var(--text3);font-family:'DM Mono',monospace} .btn-emit{display:inline-flex;align-items:center;gap:7px;padding:12px 22px;background:var(--accent);color:var(--atext);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;border:none;border-radius:var(--rs);cursor:pointer;transition:opacity .15s,transform .1s;flex-shrink:0} .btn-emit:hover{opacity:.9}.btn-emit:active{transform:scale(.99)}.btn-emit:disabled{opacity:.3;cursor:not-allowed} /* sender (PickupAddress) collapsible card */ .sender-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow-1)} .sender-summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 16px;cursor:pointer;transition:background .15s;user-select:none} .sender-summary:hover{background:var(--surface2)} .sender-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;flex:1} .sender-label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);font-family:'DM Sans',sans-serif;background:var(--adim);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);border-radius:4px;padding:3px 8px;flex-shrink:0} .sender-text{font-size:14px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .sender-text.empty{color:var(--text3);font-style:italic} .sender-toggle{font-size:12px;color:var(--text3);font-family:'DM Mono',monospace;display:flex;align-items:center;gap:4px;flex-shrink:0} .toggle-chevron{display:inline-flex;align-items:center;color:inherit} .toggle-chevron svg.lucide{width:14px;height:14px} .sender-summary:hover .sender-toggle{color:var(--text)} .sender-body{padding:18px 20px 20px;border-top:1px solid var(--border)} .sender-card.collapsed .sender-body{display:none} .sender-actions{display:flex;justify-content:flex-end;margin-top:8px} /* login overlay — fullscreen gate before Supabase auth */ .login-overlay{position:fixed;inset:0;background:rgba(15,15,15,0.97);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px} .login-card{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r);padding:32px 30px;width:400px;max-width:100%} .login-brand{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text2);margin-bottom:24px;font-family:'DM Mono',monospace} .login-logo{display:block;height:120px;width:auto;margin:0 auto 20px;} .login-card h1{font-size:24px;font-weight:500;margin-bottom:5px;color:var(--text);text-align:center} .login-card .login-sub{text-align:center} .login-sub{font-size:14px;color:var(--text3);margin-bottom:24px} .login-input{display:block;width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rs);color:var(--text);font-size:15px;padding:12px 14px;outline:none;margin-bottom:11px;font-family:'DM Sans',sans-serif} .login-input:focus{border-color:var(--accent)} .login-btn{display:block;width:100%;background:var(--accent);color:var(--atext);font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;border:none;border-radius:var(--rs);padding:13px;cursor:pointer;transition:opacity .15s;margin-top:8px} .login-btn:hover{opacity:.9}.login-btn:disabled{opacity:.3;cursor:not-allowed} .login-err{font-size:13px;color:var(--red);background:color-mix(in srgb,var(--red) 6%,transparent);border:1px solid color-mix(in srgb,var(--red) 20%,transparent);border-radius:var(--rs);padding:10px 13px;margin-top:14px} .login-switch{font-size:13px;color:var(--text3);margin-top:20px;text-align:center} .login-switch a{color:var(--accent);text-decoration:none}.login-switch a:hover{text-decoration:underline} /* expeditii — tracking dashboard */ .exp-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r)} .exp-toolbar-sep{width:1px;height:24px;background:var(--border);margin:0 2px} .exp-toolbar .finput{font-size:13px;padding:7px 26px 7px 11px;width:auto;min-width:150px} /* Filter chips — segmented-button-style group. Each chip is its own button; the group has a shared border so they read as one control. Active state uses the accent color; status-specific chips carry a small dot painted in their semantic hue so the user can scan filter options the same way they scan row pills. */ .chip-group{display:inline-flex;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rs);padding:3px;gap:2px} .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;background:transparent;border:1px solid transparent;color:var(--text2);font-size:12px;font-weight:500;font-family:'DM Sans',sans-serif;border-radius:5px;cursor:pointer;transition:all .12s;white-space:nowrap;line-height:1.4} .chip:hover{color:var(--text);background:var(--surface3)} .chip-active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1);border-color:var(--border)} .chip-active:hover{background:var(--surface)} .chip-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0} .chip-green{color:var(--green)}.chip-green.chip-active{color:var(--green)} .chip-amber{color:var(--info-text)}.chip-amber.chip-active{color:var(--info-text)} .chip-red{color:var(--red)}.chip-red.chip-active{color:var(--red)} .chip-pending{color:var(--text3)}.chip-pending.chip-active{color:var(--text2)} .exp-toolbar .btn-sm{padding:7px 12px;font-size:13px} .exp-toolbar .btn-sm .age{color:var(--text3);margin-left:4px} .exp-toolbar .btn-sm .age.stale{color:var(--orange)} .exp-search{flex:1;min-width:220px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rs);color:var(--text);font-size:13px;padding:7px 11px;outline:none;font-family:'DM Sans',sans-serif} .exp-search:focus{border-color:var(--border2)} .exp-sync-indicator{font-size:12px;color:var(--text3);font-family:'DM Mono',monospace;display:inline-flex;align-items:center;gap:6px;padding:0 8px;white-space:nowrap} .exp-sync-indicator.on{color:var(--accent)} .exp-sync-indicator .spin{width:12px;height:12px;border-width:2px;border-color:color-mix(in srgb,var(--accent) 25%,transparent);border-top-color:var(--accent)} .exp-kpi{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-bottom:18px} .kpi-cell{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow-1)} .kpi-cell.warn{border-color:color-mix(in srgb,var(--orange) 30%,transparent);background:color-mix(in srgb,var(--orange) 4%,transparent)} .kpi-cell .kpi-lbl{font-size:11px;color:var(--text3);font-family:'DM Sans',sans-serif;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px} .kpi-cell .kpi-val{font-size:22px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .kpi-cell .kpi-val span{font-size:12px;color:var(--text3);font-weight:400} @media (max-width:1500px){.exp-kpi{grid-template-columns:repeat(4,1fr)}} @media (max-width:900px){.exp-kpi{grid-template-columns:repeat(2,1fr)}} /* Friendly empty state — pairs a large Lucide icon with a two-line message. The icon picks up --accent via currentColor on the wrapper; the wrapper bg is a low-opacity accent tint so the icon "lives in" a soft circle without needing extra DOM. */ .exp-empty{padding:48px 28px;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:var(--shadow-1)} .exp-empty-icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--adim);color:var(--accent);font-size:32px} .exp-empty-icon svg.lucide{width:32px;height:32px;stroke-width:1.5} .exp-empty-title{font-size:16px;font-weight:500;color:var(--text)} .exp-empty-text{font-size:13px;color:var(--text3);max-width:380px;line-height:1.55} .exp-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--text3);margin:-6px 0 16px 2px} .exp-legend b{color:var(--text2);font-weight:500} .exp-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden} .exp-tab{width:100%;border-collapse:collapse;font-size:13px} .exp-tab th{font-size:11px;color:var(--text3);font-family:'DM Sans',sans-serif;text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--surface2);white-space:nowrap} .exp-tab th.num{text-align:right} .exp-tab td{padding:10px 14px;border-bottom:1px solid var(--border-soft);color:var(--text2);vertical-align:middle;font-variant-numeric:tabular-nums} .exp-tab td.num{text-align:right;font-family:'DM Mono',monospace} .exp-tab td.mono{font-family:'DM Mono',monospace;font-size:12px;color:var(--text3)} .exp-tab tr:last-child td{border-bottom:none} /* Row hover — subtle bg tint + left accent rail (Stripe Dashboard pattern). Inset box-shadow paints a 2px accent bar at the left edge without taking layout space, so neighboring rows don't shift when one is hovered. */ .exp-tab .exp-row{transition:background .12s,box-shadow .12s} .exp-tab .exp-row:hover{background:var(--surface2);box-shadow:inset 2px 0 0 var(--accent)} .exp-tab .exp-row.bracket-jumped{background:color-mix(in srgb,var(--red) 6%,transparent)} .exp-tab .exp-row.bracket-jumped:hover{background:color-mix(in srgb,var(--red) 10%,transparent);box-shadow:inset 2px 0 0 var(--red)} .exp-tab .bracket{font-size:11px;color:var(--text3);margin-left:4px;font-family:'DM Mono',monospace} .exp-tab .kg-real.jump{color:var(--red);font-weight:500} .exp-tab .kg-pending{color:var(--text3)} .exp-tab .cost-up{color:var(--red);font-weight:500} .exp-tab .cost-down{color:var(--green)} .exp-tab .status-lbl{font-size:12px;color:var(--text3)} /* Status pills — replaces the colored emoji + neutral gray label combo. Each pill carries a low-opacity bg, mid-opacity border, and full-color text/dot so the hue communicates state at a glance while the embedded dot keeps the pill readable for users with color-vision deficiency. */ .status-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;font-size:12px;font-weight:500;line-height:1.5;border:1px solid;white-space:nowrap;font-family:'DM Sans',sans-serif} .status-pill-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:currentColor} .status-pill-green{color:var(--green);border-color:color-mix(in srgb,var(--green) 30%,transparent);background:color-mix(in srgb,var(--green) 10%,transparent)} /* "amber" state from mapping.js semantically means "in transit" — shipping industry convention paints that cyan/sky-blue, not amber yellow. We reuse the --info-* tokens (cyan-tinted on both themes) instead of --orange, without renaming the underlying state code. */ .status-pill-amber{color:var(--info-text);border-color:var(--info-bord);background:var(--info-bg)} .status-pill-red{color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,transparent);background:color-mix(in srgb,var(--red) 10%,transparent)} .status-pill-pending{color:var(--text3);border-color:var(--border2);background:var(--surface2)} .exp-tab .city{font-size:12px;color:var(--text3);margin-left:4px} .exp-tab th.actions,.exp-tab td.actions{text-align:right;white-space:nowrap;width:1px} .exp-tab .exp-row{cursor:pointer} /* Chevron is barely visible at rest (just enough to hint clickability) and solidifies on row hover. The opacity transition is faster than the bg transition so the chevron "snaps" forward as the user lands on a row. */ .exp-row-chevron{color:var(--text3);font-size:18px;line-height:1;padding-left:4px;opacity:.35;transition:opacity .1s,color .12s} .exp-tab .exp-row:hover .exp-row-chevron{color:var(--accent);opacity:1} /* Inline copy button on the parcel-number cell — invisible at rest, fades in on row hover. Click is intercepted (stopPropagation) so the row click (open detail modal) doesn't also fire. The copied state turns the icon green for ~1.4s, same convention as the .metric-copy-btn. */ .exp-pn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .exp-pn-num{font-family:'DM Mono',monospace;font-variant-numeric:tabular-nums} .exp-pn-copy{background:transparent;border:1px solid transparent;color:var(--text3);width:22px;height:22px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .12s,color .12s,border-color .12s,background .12s;padding:0;flex-shrink:0} .exp-pn-copy svg.lucide{width:13px;height:13px} .exp-tab .exp-row:hover .exp-pn-copy{opacity:1} .exp-pn-copy:hover{color:var(--accent);border-color:var(--border);background:var(--surface3)} .exp-pn-copy.copied{color:var(--green);border-color:transparent;background:transparent;opacity:1} .exp-act{background:transparent;border:1px solid var(--border);color:var(--text2);font-size:13px;padding:6px 10px;border-radius:var(--rs);cursor:pointer;transition:all .15s;line-height:1;font-family:'DM Sans',sans-serif} .exp-act:hover{border-color:var(--border2);color:var(--text);background:var(--surface2)} .exp-act:disabled{opacity:.3;cursor:not-allowed} .exp-act-danger:hover:not(:disabled){border-color:var(--red);color:var(--red)} .exp-tab .cod-on{color:var(--accent);font-weight:500} /* shipment detail modal */ .modal-wide{width:760px} .ms-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 18px;padding:14px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rs);font-size:13px;color:var(--text2);margin-bottom:14px} .ms-meta b{color:var(--text3);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-right:6px} .ms-totals{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px} .ms-total-cell{background:var(--surface2);border:1px solid var(--border);border-radius:var(--rs);padding:10px 12px} .ms-total-lbl{font-size:10px;color:var(--text3);font-family:'DM Sans',sans-serif;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px} .ms-total-val{font-size:15px;color:var(--text);font-weight:500;font-variant-numeric:tabular-nums} .ms-parcel-list{display:flex;flex-direction:column;gap:10px} .ms-parcel{background:var(--surface2);border:1px solid var(--border);border-radius:var(--rs);padding:12px 14px} .ms-parcel.bracket-jumped{border-color:color-mix(in srgb,var(--red) 35%,transparent);background:color-mix(in srgb,var(--red) 5%,transparent)} .ms-parcel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px} .ms-parcel-id{display:flex;align-items:baseline;gap:10px} .ms-parcel-num{font-size:14px;color:var(--text);font-family:'DM Mono',monospace} .ms-parcel-status{font-size:12px;color:var(--text3)} .ms-parcel-actions{display:flex;gap:6px;flex-wrap:wrap} .ms-parcel-stats{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--text2)} .ms-parcel-stats b{color:var(--text3);font-weight:500;margin-right:4px} .mono{font-family:'DM Mono',monospace} /* shipment detail — per-parcel timeline */ .ms-parcel-tl-head{margin-top:14px;font-size:10px;color:var(--text3);font-family:'DM Sans',sans-serif;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding-top:10px;border-top:1px solid var(--border)} .ms-timeline{position:relative;padding:10px 0 4px 4px} .ms-timeline-empty{padding:6px 0} .ms-timeline-empty-msg{font-size:12px;color:var(--text3);font-style:italic} .ms-tl-entry{position:relative;padding:0 0 14px 22px;min-height:22px} /* Connecting vertical line — draws from current dot down to the next entry. The last entry hides it via .ms-tl-last. */ .ms-tl-entry::before{content:'';position:absolute;left:5px;top:11px;bottom:-4px;width:1px;background:var(--border2)} .ms-tl-last::before{display:none} .ms-tl-last{padding-bottom:2px} .ms-tl-dot{position:absolute;left:0;top:4px;width:11px;height:11px;border-radius:50%;border:2px solid var(--surface2);box-shadow:0 0 0 1px var(--border2)} .ms-tl-green{background:var(--green)} .ms-tl-amber{background:var(--orange)} .ms-tl-red{background:var(--red)} .ms-tl-pending{background:var(--text3)} .ms-tl-body{font-size:13px;color:var(--text2);line-height:1.4} .ms-tl-desc{font-weight:500;color:var(--text)} .ms-tl-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px;font-size:11px;color:var(--text3);font-family:'DM Mono',monospace} .ms-tl-depot::before{content:'·';margin-right:8px;color:var(--text3)} .ms-tl-info{margin-top:3px;font-size:12px;color:var(--text3);font-style:italic} /* delete confirmation modal */ .mdc-line{font-size:14px;color:var(--text2);margin-bottom:8px} .mdc-line b{color:var(--text3);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin-right:6px} .mdc-warn{margin-top:14px;padding:10px 12px;background:color-mix(in srgb,var(--red) 8%,transparent);border:1px solid color-mix(in srgb,var(--red) 25%,transparent);border-radius:var(--rs);color:var(--text);font-size:13px;line-height:1.5} .btn-danger{padding:10px 20px;background:var(--red);color:#fff;border:none;border-radius:var(--rs);font-size:14px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif} .btn-danger:hover{opacity:.9} /* emit-success modal — post-emit picker */ .mes-tick{color:var(--green);margin-right:6px} .mes-info{display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rs);margin-bottom:6px;font-size:13px;color:var(--text2)} .mes-row{line-height:1.55} .mes-row b{color:var(--text3);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-right:8px} .mes-svc{display:inline-block;font-size:11px;color:var(--text);background:var(--surface3);border:1px solid var(--border);padding:3px 8px;border-radius:99px;margin-right:4px;margin-top:2px;font-family:'DM Sans',sans-serif} .mes-cod{color:var(--accent);font-weight:500} .mes-cod b{color:var(--text3);font-weight:600} /* services card — bottom of main area, replaces sidebar block */ .svc-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:18px;overflow:hidden;box-shadow:var(--shadow-1)} .svc-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;cursor:pointer;transition:background .15s;user-select:none} .svc-header:hover{background:var(--surface2)} .svc-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;flex:1} .svc-label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);font-family:'DM Sans',sans-serif;background:var(--adim);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);border-radius:4px;padding:3px 8px;flex-shrink:0} .svc-summary{font-size:14px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap} .svc-summary.empty{color:var(--text3);font-style:italic;display:block} /* Small inline count badge at the start of the chip stream — gives a quick "5 active" cue when the chip list is long enough to wrap. */ .svc-count{font-family:'DM Mono',monospace;font-size:11px;font-weight:500;color:var(--text2);background:var(--surface2);border:1px solid var(--border);border-radius:99px;padding:2px 7px;flex-shrink:0} /* Compact service chips, grouped by semantic kind. Smaller than status pills (the row pills) so the collapsed summary stays one-line-friendly while still scanning by color. */ .svc-chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:500;line-height:1.5;border:1px solid;white-space:nowrap;font-family:'DM Sans',sans-serif} .svc-chip-money{color:var(--green);border-color:color-mix(in srgb,var(--green) 30%,transparent);background:color-mix(in srgb,var(--green) 10%,transparent)} .svc-chip-notify{color:var(--info-text);border-color:var(--info-bord);background:var(--info-bg)} .svc-chip-alt{color:var(--orange);border-color:color-mix(in srgb,var(--orange) 30%,transparent);background:color-mix(in srgb,var(--orange) 10%,transparent)} .svc-chip-urgent{color:var(--red);border-color:color-mix(in srgb,var(--red) 30%,transparent);background:color-mix(in srgb,var(--red) 10%,transparent)} .svc-chip-neutral{color:var(--text3);border-color:var(--border);background:var(--surface2)} .svc-toggle{font-size:12px;color:var(--text3);font-family:'DM Mono',monospace;display:flex;align-items:center;gap:4px;flex-shrink:0} .svc-header:hover .svc-toggle{color:var(--text)} .svc-body{padding:18px 20px 20px;border-top:1px solid var(--border)} .svc-card.collapsed .svc-body{display:none} .svc-profile-row{display:flex;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px dashed var(--border)} .svc-profile-lbl{font-size:12px;color:var(--text3);font-family:'DM Sans',sans-serif;font-weight:500;flex-shrink:0} .svc-profile-sel{flex:1;max-width:300px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rs);color:var(--text);font-size:13px;padding:7px 26px 7px 10px;outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;cursor:pointer} .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 18px} .svc-grid .chk{margin-bottom:0} .svc-grid .svc-sub{grid-column:1 / -1;margin-left:0;margin-top:8px;margin-bottom:8px} @media (max-width:1100px){.svc-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:700px){.svc-grid{grid-template-columns:1fr}} /* two-column work area */ .work-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;margin-bottom:16px;align-items:start} .work-col{min-width:0} @media (max-width:1280px){.work-grid{grid-template-columns:1fr}} /* parcel rows */ .ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px} .ph-title{font-size:14px;font-weight:500} .ph-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .count-wrap{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--rs);padding:4px 5px 4px 10px} .count-wrap label{font-size:12px;color:var(--text3);font-family:'DM Sans',sans-serif;font-weight:500;letter-spacing:.04em} .count-input{width:56px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--text);font-size:14px;font-family:'DM Mono',monospace;padding:5px 7px;outline:none;text-align:center} .count-input:focus{border-color:color-mix(in srgb,var(--accent) 40%,transparent)} .count-btn{width:30px;height:30px;background:transparent;border:1px solid var(--border);border-radius:4px;color:var(--text2);cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .15s} .count-btn:hover{border-color:var(--border2);color:var(--text);background:var(--surface2)} .btn-add{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;background:transparent;color:var(--accent);font-size:13px;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:var(--rs);cursor:pointer;transition:all .15s;font-family:'DM Sans',sans-serif} .btn-add:hover{background:var(--adim)} .btn-sm{display:inline-flex;align-items:center;gap:4px;padding:7px 11px;background:transparent;color:var(--text3);font-size:12px;border:1px solid var(--border);border-radius:var(--rs);cursor:pointer;transition:all .15s;font-family:'DM Sans',sans-serif} .btn-sm:hover{color:var(--text2);border-color:var(--border2)} .prow{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;margin-bottom:10px;transition:border-color .15s;box-shadow:var(--shadow-1)} .prow:hover{border-color:var(--border2)} .prow-hdr{display:flex;align-items:center;gap:8px;margin-bottom:11px;flex-wrap:wrap} .pnum{font-family:'DM Mono',monospace;font-size:12px;font-weight:500;color:var(--accent);background:var(--adim);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);border-radius:4px;padding:3px 8px;flex-shrink:0} .pref{width:140px;background:transparent;border:1px dashed var(--border);border-radius:var(--rs);color:var(--text2);font-size:12px;padding:4px 8px;outline:none;font-family:'DM Mono',monospace;transition:all .15s} .pref::placeholder{color:var(--text3);font-style:italic} .pref:hover{border-color:var(--border2);background:var(--surface2)} .pref:focus{border-style:solid;border-color:var(--border2);background:var(--surface2);color:var(--text)} .ptype-sel{background:var(--surface3);border:1px solid var(--border);border-radius:var(--rs);color:var(--text3);font-size:12px;padding:5px 22px 5px 8px;outline:none;cursor:pointer;appearance:none;font-family:'DM Sans',sans-serif;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%2394a3b8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center} .ptype-sel:hover{color:var(--text2)} .pbadge{font-family:'DM Mono',monospace;font-size:12px;color:var(--accent);background:var(--adim);border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);border-radius:4px;padding:3px 9px;white-space:nowrap;margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums} .pbadge.warn{color:var(--orange);background:color-mix(in srgb,var(--orange) 8%,transparent);border-color:color-mix(in srgb,var(--orange) 20%,transparent)} /* Two-part badge — bracket label (smaller, dimmer) + RON cost (full accent). */ .pbadge-kg{font-size:11px;opacity:.75;font-weight:400} .pbadge-sep{opacity:.4;font-size:11px} .pbadge-ron{font-weight:500} /* Right-aligned action cluster on each parcel row. The reorder pair (up/down) fades in only on row hover to keep the typical 1-3 parcel case visually quiet; dup + rm stay always visible because they're the more common actions. */ .prow-actions{display:flex;align-items:center;gap:5px;flex-shrink:0} .prow-actions button{width:30px;height:30px;background:transparent;border:1px solid var(--border);border-radius:var(--rs);color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;padding:0} .prow-actions svg.lucide{width:15px;height:15px} .btn-rm:hover{border-color:var(--red-bord);color:var(--red);background:var(--red-soft)} .btn-dup:hover{border-color:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent);background:var(--adim)} /* Reorder buttons — narrower (24px) and hidden until row hover, so they don't crowd the header when the user isn't actively rearranging. Disabled state applies to the first row's up arrow and the last row's down. */ .btn-reorder{width:24px !important;height:24px !important;opacity:0;transition:opacity .12s,all .15s} .btn-reorder svg.lucide{width:13px;height:13px} .prow:hover .btn-reorder:not(:disabled){opacity:1} .btn-reorder:hover{border-color:var(--border2);color:var(--text);background:var(--surface2)} .btn-reorder:disabled{opacity:0 !important;cursor:not-allowed} .pfields{display:grid;grid-template-columns:repeat(5,1fr);gap:10px} @media (max-width:920px){.pfields{grid-template-columns:repeat(3,1fr)}} @media (max-width:520px){.pfields{grid-template-columns:repeat(2,1fr)}} .pf label{display:block;font-size:11px;color:var(--text3);margin-bottom:4px;font-family:'DM Sans',sans-serif;font-weight:600;letter-spacing:.05em;text-transform:uppercase} .pf input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rs);color:var(--text);font-size:14px;font-family:'DM Mono',monospace;padding:8px 10px;outline:none;transition:border-color .15s;text-align:right} .pf input:focus{border-color:color-mix(in srgb,var(--accent) 35%,transparent)} .pf input.over{border-color:color-mix(in srgb,var(--red) 50%,transparent);background:color-mix(in srgb,var(--red) 5%,transparent)} .pf input[readonly]{color:var(--text3);cursor:default;background:var(--surface3)} .pwarn{font-size:12px;color:var(--red);margin-top:7px;padding:5px 9px;background:var(--red-soft);border-radius:4px} /* summary */ .sgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:0 0 14px} @media (max-width:1500px){.sgrid{grid-template-columns:repeat(3,1fr)}} @media (max-width:780px){.sgrid{grid-template-columns:repeat(2,1fr)}} .metric{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:11px 14px;box-shadow:var(--shadow-1)} /* Action cell in the metrics row. Dashed border + centered icon-forward layout = standard "interactive action slot" affordance (distinct from the solid-bordered stat tiles next to it). Stays as a secondary CTA so it doesn't compete with the primary accent-yellow "Emite etichete" button below the parcels. */ .metric-action{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; background:var(--surface); border:1px dashed var(--border2); border-radius:var(--r); padding:11px 14px; cursor:pointer; transition:all .15s; text-align:center; font-family:'DM Sans',sans-serif;color:var(--text2); } .metric-action:hover{ border-style:solid;border-color:var(--accent); background:color-mix(in srgb,var(--accent) 5%,transparent); color:var(--text); } .metric-action:active{transform:scale(.99)} .metric-action .ma-icon{font-size:24px;line-height:1} .metric-action .ma-label{font-size:14px;font-weight:500} .metric-action .ma-hint{font-size:10px;color:var(--text3);font-family:'DM Mono',monospace;letter-spacing:.03em} .metric-copy-btn{position:absolute;top:10px;right:10px;width:26px;height:26px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rs);color:var(--text3);cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0} .metric-copy-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--surface3)} .metric-copy-btn:active{transform:scale(.94)} .metric-copy-btn.copied{border-color:var(--green);color:var(--green);background:rgba(0,208,132,0.08)} .metric.hl{border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 3%,transparent)} .mlbl{font-size:11px;color:var(--text3);font-family:'DM Sans',sans-serif;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px} .mval{font-size:22px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .mval span{font-size:13px;color:var(--text2);font-weight:400} .msub{font-size:12px;color:var(--text3);margin-top:4px} /* ramburs metric card — input replaces static value, value > 0 = active */ .metric.ramburs{transition:border-color .15s,background .15s} .metric.ramburs .mval{display:flex;align-items:center;gap:8px;margin-top:2px} .metric.ramburs .ramburs-input{flex:1;min-width:0;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--rs);outline:none;color:var(--text);font-family:'DM Mono',monospace;font-size:22px;font-weight:500;letter-spacing:-.02em;padding:5px 11px;margin:0;appearance:textfield;-moz-appearance:textfield;transition:all .15s;cursor:text;text-align:right} .metric.ramburs .ramburs-input::-webkit-outer-spin-button, .metric.ramburs .ramburs-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .metric.ramburs .ramburs-input::placeholder{color:var(--text3);font-weight:400;opacity:.7} .metric.ramburs .ramburs-input:hover{border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:var(--surface3)} .metric.ramburs .ramburs-input:focus{border-color:var(--accent);background:var(--surface3)} .metric.ramburs .ramburs-unit{font-size:14px;color:var(--text2);font-weight:500;flex-shrink:0} .metric.ramburs.active{border-color:color-mix(in srgb,var(--accent) 30%,transparent);background:color-mix(in srgb,var(--accent) 3%,transparent)} .metric.ramburs.active .ramburs-input{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 6%,transparent)} .metric.ramburs.disabled{opacity:.45} .metric.ramburs.disabled .ramburs-input{cursor:not-allowed} /* hide the legacy CashService checkbox + sub-field — kept in DOM for compat */ .svc-grid > label.chk:has(#svc-cod){display:none} #cod-sub{display:none !important} /* recipient form — section divider with inline search */ .sdiv.sdiv-with-search{display:flex;justify-content:space-between;align-items:center;gap:14px;text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--text2);padding:0 0 12px;margin:0 0 14px;border-top:none} .sdiv.sdiv-with-search > span{text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:600;color:var(--text3);font-family:'DM Sans',sans-serif;flex-shrink:0} .client-search-wrap{position:relative;flex:0 0 320px;max-width:50%} /* Inline search icon — absolutely positioned over the input so the user sees the "this is searchable" affordance the moment the field is visible. Replaces the emoji placeholder pattern, which only showed the icon while the input was empty + caused inconsistent rendering across OSes. */ .client-search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none;display:flex;align-items:center;z-index:1} .client-search-icon svg.lucide{width:15px;height:15px} /* Search input + "Clienți ⋯" button grouped on the right side of the section header. Replaces the redundant card header that used to hold these. */ .client-cluster{display:flex;align-items:center;gap:8px} .client-search-input{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--rs);color:var(--text);font-size:14px;padding:9px 12px 9px 34px;outline:none;font-family:'DM Sans',sans-serif;transition:all .15s} .client-search-input::placeholder{color:var(--text3)} .client-search-input:hover{border-color:color-mix(in srgb,var(--accent) 30%,transparent)} .client-search-input:focus{border-color:var(--accent);background:var(--surface3)} /* save-client checkbox above emit button — visible affordance */ /* Save-client checkbox. Lives inside a .ff grid cell next to the webshop input, so we need to: 1) Reset .ff label inheritance (the parent .ff applies uppercase + small font + gray to all child