/* ===================================================================
   Tangent UI — shared design system for all panels
   (dispatcher / admin, merchant panel, superadmin)
   Load once per layout, after Bootstrap so it can override it.
   Every class is namespaced .tg-* so it cannot collide with the
   existing theme. Pages opt in one at a time.
   =================================================================== */

:root {
  --tg-bg:          #eef0f4;
  --tg-surface:     #ffffff;
  --tg-surface-alt: #f8fafc;
  --tg-line:        #e2e8f0;
  --tg-line-soft:   #f1f5f9;

  --tg-ink:         #0f172a;
  --tg-ink-2:       #334155;
  --tg-ink-3:       #64748b;
  --tg-ink-4:       #94a3b8;

  --tg-primary:     #4338ca;
  --tg-primary-dk:  #312e81;
  --tg-primary-lt:  #eef2ff;
  --tg-primary-br:  #e0e7ff;

  --tg-accent:      #f97316;   /* TangentCourier orange */
  --tg-warn:        #fbbf24;
  --tg-ok:          #059669;
  --tg-danger:      #b91c1c;

  --tg-r-sm: 7px;
  --tg-r:    9px;
  --tg-r-lg: 14px;

  --tg-shadow:    0 1px 3px rgba(15,23,42,.10);
  --tg-shadow-lg: 0 12px 28px rgba(15,23,42,.16);

  --tg-font: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --tg-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

/* ---------- Page shell ---------- */
.tg-page          { font-family: var(--tg-font); color: var(--tg-ink); }
.tg-page h1,
.tg-page-title    { margin:0; font-size:26px; font-weight:700; letter-spacing:-.02em; color:var(--tg-ink); }
.tg-page-sub      { font-size:13px; color:var(--tg-ink-3); }
.tg-card          { background:var(--tg-surface); border:1px solid var(--tg-line); border-radius:var(--tg-r-lg); }
.tg-card--flush   { border-radius:var(--tg-r-lg) var(--tg-r-lg) 0 0; }

/* ---------- Toolbar ---------- */
.tg-toolbar {
  background:var(--tg-surface); border:1px solid var(--tg-line);
  border-radius:var(--tg-r-lg) var(--tg-r-lg) 0 0;
  padding:14px 18px; display:flex; flex-wrap:wrap; align-items:center; gap:10px;
}
.tg-toolbar__spacer { flex:1; }
.tg-search { position:relative; flex:1 1 260px; min-width:200px; }
.tg-search input {
  width:100%; padding:9px 12px; font-family:inherit; font-size:13px; color:var(--tg-ink);
  background:var(--tg-surface-alt); border:1px solid var(--tg-line);
  border-radius:var(--tg-r); outline:none;
}
.tg-search input:focus { border-color:#6366f1; background:var(--tg-surface); }

/* ---------- Buttons ---------- */
.tg-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; font-family:inherit; font-size:13px; font-weight:500;
  color:var(--tg-ink-2); background:var(--tg-surface);
  border:1px solid #cbd5e1; border-radius:var(--tg-r);
  cursor:pointer; text-decoration:none; line-height:1.2;
}
.tg-btn:hover        { border-color:var(--tg-ink-4); background:var(--tg-surface-alt); color:var(--tg-ink-2); text-decoration:none; }
.tg-btn--primary     { color:#fff; background:var(--tg-primary); border-color:var(--tg-primary); font-weight:600; }
.tg-btn--primary:hover { background:var(--tg-primary-dk); border-color:var(--tg-primary-dk); color:#fff; }
.tg-btn--sm          { padding:7px 13px; font-size:12px; font-weight:600; }
.tg-btn--ok          { color:#fff; background:var(--tg-ok); border-color:var(--tg-ok); }
.tg-btn--ok:hover    { background:#047857; color:#fff; }
.tg-btn--warn        { color:var(--tg-ink); background:var(--tg-warn); border-color:var(--tg-warn); }
.tg-btn--warn:hover  { background:#f59e0b; color:var(--tg-ink); }
.tg-btn--quiet       { color:#e2e8f0; background:#334155; border-color:#334155; }
.tg-btn--quiet:hover { background:#475569; color:#fff; }
.tg-btn--danger      { color:#fca5a5; background:transparent; border-color:#7f1d1d; }
.tg-btn--danger:hover{ background:#7f1d1d; color:#fff; }
.tg-btn[disabled], .tg-btn.is-disabled { opacity:.45; pointer-events:none; }

/* ---------- Segmented control (Day / Week / Merchant) ---------- */
.tg-seg { display:inline-flex; align-items:center; gap:6px; padding:3px; background:var(--tg-line-soft); border-radius:var(--tg-r); }
.tg-seg__item {
  padding:7px 13px; font-family:inherit; font-size:12px; font-weight:600;
  color:var(--tg-ink-3); background:transparent; border:none;
  border-radius:var(--tg-r-sm); cursor:pointer; text-decoration:none;
}
.tg-seg__item:hover     { color:var(--tg-ink-2); text-decoration:none; }
.tg-seg__item.is-active { background:var(--tg-surface); color:var(--tg-primary-dk); box-shadow:var(--tg-shadow); }

/* ---------- Filter drawer ---------- */
.tg-filters { background:var(--tg-surface-alt); border:1px solid var(--tg-line); border-top:none;
  padding:16px 18px; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.tg-filters[hidden] { display:none; }
.tg-label { display:block; font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--tg-ink-4); margin-bottom:5px; }
.tg-input, .tg-filters select, .tg-filters input {
  width:100%; padding:8px 10px; font-family:inherit; font-size:13px; color:var(--tg-ink);
  background:var(--tg-surface); border:1px solid var(--tg-line); border-radius:8px;
}

/* ---------- Contextual selection bar ---------- */
.tg-selbar {
  background:var(--tg-ink); padding:12px 18px;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  position:sticky; top:0; z-index:30;
}
.tg-selbar[hidden]    { display:none; }
.tg-selbar__count     { font-size:13px; font-weight:600; color:#fff; }
.tg-selbar__clear     { font-family:inherit; font-size:12px; color:var(--tg-ink-4);
  background:none; border:none; cursor:pointer; text-decoration:underline; }
.tg-selbar__clear:hover { color:#e2e8f0; }
.tg-selbar__spacer    { flex:1; }
.tg-selbar input[type="date"] { padding:7px 9px; font-family:inherit; font-size:12px;
  color:var(--tg-ink); background:#fff; border:none; border-radius:var(--tg-r-sm); }

/* ---------- Data table ---------- */
.tg-thead {
  background:var(--tg-surface-alt); border:1px solid var(--tg-line); border-top:none;
  padding:9px 18px; display:grid; gap:14px; align-items:center;
}
.tg-thead span { font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; color:var(--tg-ink-4); }
.tg-tbody { background:var(--tg-surface); border:1px solid var(--tg-line); border-top:none;
  border-radius:0 0 var(--tg-r-lg) var(--tg-r-lg); overflow:hidden; }

.tg-row { padding:14px 18px; display:grid; gap:14px; align-items:center;
  border-bottom:1px solid var(--tg-line-soft); background:var(--tg-surface); }
.tg-row:last-child     { border-bottom:none; }
.tg-row.is-selected    { background:#f5f3ff; }
.tg-row__title  { font-size:14px; font-weight:600; color:var(--tg-ink); letter-spacing:-.01em; margin-bottom:2px; }
.tg-row__sub    { font-size:12px; color:var(--tg-ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tg-row__meta   { font-family:var(--tg-mono); font-size:11px; color:#a1a8b4; margin-top:3px; }
.tg-row__stamp  { font-size:11px; color:#a1a8b4; margin-top:5px; }
.tg-row__cell   { font-size:13px; color:var(--tg-ink-2); min-width:0; }
.tg-row__cell--sm { font-size:12px; color:#475569; line-height:1.5; }

/* Group header row — same grid, indigo band */
.tg-grouprow {
  padding:11px 18px; display:grid; gap:14px; align-items:center;
  background:var(--tg-primary-lt);
  border-top:1px solid var(--tg-primary-br); border-bottom:1px solid var(--tg-primary-br);
  position:sticky; top:0; z-index:10;
}
.tg-grouprow__title { font-size:13px; font-weight:700; color:var(--tg-primary-dk); letter-spacing:-.01em; }
.tg-grouprow__meta  { font-size:12px; color:#6366f1; margin-top:1px; }
.tg-grouprow__all   { font-family:inherit; font-size:11px; font-weight:600; color:var(--tg-primary);
  background:none; border:none; cursor:pointer; text-align:right; padding:0; white-space:nowrap; }
.tg-grouprow__all:hover { text-decoration:underline; }

.tg-check { width:15px; height:15px; accent-color:var(--tg-primary); cursor:pointer; }

/* ---------- Status pills ---------- */
.tg-pill { display:inline-block; padding:3px 10px; font-size:11px; font-weight:700;
  letter-spacing:.02em; border-radius:20px; white-space:nowrap; }
.tg-pill--pending   { background:#fef3c7; color:#92400e; }
.tg-pill--overdue   { background:#fee2e2; color:#991b1b; }
.tg-pill--delivered { background:#d1fae5; color:#065f46; }
.tg-pill--transit   { background:#dbeafe; color:#1e40af; }
.tg-pill--returned  { background:#f1f5f9; color:#475569; }
.tg-pill--cancelled { background:#f1f5f9; color:#64748b; }

.tg-pay        { font-size:11px; margin-top:5px; font-weight:600; color:var(--tg-ink-4); }
.tg-pay--paid  { color:var(--tg-ok); }

/* ---------- Amount reveal ---------- */
.tg-amount { font-family:var(--tg-mono); font-size:13px; font-weight:500; color:var(--tg-ink);
  background:none; border:none; padding:0; cursor:pointer; border-bottom:1px dashed #cbd5e1; }
.tg-amount:hover { color:var(--tg-primary); border-color:var(--tg-primary); }

/* ---------- Proof-of-delivery thumbnail ---------- */
.tg-pod-thumb { width:24px; height:24px; flex:0 0 auto; padding:0; line-height:1; font-size:12px;
  color:#065f46; background:#d1fae5; border:1px solid #6ee7b7;
  border-radius:6px; cursor:pointer; overflow:hidden; }
.tg-pod-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Row menu ---------- */
.tg-menu-wrap { position:relative; text-align:right; }
.tg-menu-btn  { font-family:inherit; font-size:16px; color:var(--tg-ink-4); background:none;
  border:none; cursor:pointer; border-radius:6px; padding:2px 6px; line-height:1; }
.tg-menu-btn:hover { background:var(--tg-line-soft); color:var(--tg-ink-2); }
.tg-menu { position:absolute; right:0; top:26px; width:220px; background:var(--tg-surface);
  border:1px solid var(--tg-line); border-radius:10px; box-shadow:var(--tg-shadow-lg);
  padding:5px; z-index:40; text-align:left; }
.tg-menu[hidden] { display:none; }
.tg-menu__item { display:block; width:100%; text-align:left; padding:8px 11px;
  font-family:inherit; font-size:13px; color:var(--tg-ink-2); background:none;
  border:none; border-radius:var(--tg-r-sm); cursor:pointer; text-decoration:none; }
.tg-menu__item:hover  { background:var(--tg-line-soft); color:var(--tg-ink); text-decoration:none; }
.tg-menu__item--danger { color:var(--tg-danger); }
.tg-menu__sep { height:1px; background:var(--tg-line); margin:4px 0; }

/* ---------- Modal ---------- */
.tg-modal { position:fixed; inset:0; background:rgba(15,23,42,.6); z-index:1060;
  display:flex; align-items:center; justify-content:center; padding:32px; }
.tg-modal[hidden]   { display:none; }
.tg-modal__panel    { background:var(--tg-surface); border-radius:16px; max-width:460px; width:100%;
  overflow:auto; max-height:90vh; box-shadow:0 24px 60px rgba(15,23,42,.35); }
.tg-modal__head     { padding:18px 22px; border-bottom:1px solid var(--tg-line); }
.tg-modal__title    { font-size:16px; font-weight:700; color:var(--tg-ink); letter-spacing:-.01em; }
.tg-modal__sub      { font-size:12px; color:var(--tg-ink-3); margin-top:2px; }
.tg-modal__body     { padding:22px; display:grid; gap:16px; }
.tg-modal__foot     { padding:14px 22px; border-top:1px solid var(--tg-line);
  display:flex; justify-content:flex-end; gap:8px; }
.tg-modal__photo    { width:100%; border-radius:10px; display:block; background:var(--tg-line); }
.tg-modal__empty    { height:70px; background:var(--tg-surface-alt); border:1px dashed #cbd5e1;
  border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--tg-ink-4); }

/* ---------- Toast ---------- */
.tg-toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%);
  background:var(--tg-ink); color:#fff; padding:12px 20px; border-radius:10px;
  font-size:13px; font-weight:500; z-index:1080; box-shadow:0 12px 30px rgba(15,23,42,.35); }
.tg-toast[hidden] { display:none; }

/* ---------- Mobile ---------- */
@media (max-width: 820px) {
  .tg-thead { display:none; }
  .tg-row, .tg-grouprow { grid-template-columns: 28px 1fr !important; row-gap:6px; }
  .tg-row > *:nth-child(n+3) { grid-column: 2; }
  .tg-selbar { flex-direction:column; align-items:stretch; }
  .tg-selbar__spacer { display:none; }
}