/* ════════════════════════════════════════════════════════════════════════
   assets/css/ml-ui.css — v1.4.0 design layer (loaded LAST)
   1. Sidebar: clear "you are here" + group labels that don't look like links
   2. Tables: one look for Listings / Orders / Website / Pallets / Refunds
   3. View menu, Customise panel
   4. Small-screen polish
   Admin Appearance overrides (api/theme_css.php) still win where set.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --ml-accent:#2563eb;
  --ml-accent-2:#3b82f6;
  --ml-accent-soft:rgba(59,130,246,.14);
  --ml-sb-bg:#0b1220;
  --ml-sb-text:#cbd5e1;
  --ml-sb-muted:#64748b;
  --ml-sb-hover:rgba(148,163,184,.12);
  --ml-sb-line:rgba(148,163,184,.14);
}
[data-theme="light"]{
  --ml-sb-bg:#ffffff;
  --ml-sb-text:#334155;
  --ml-sb-muted:#94a3b8;
  --ml-sb-hover:#f1f5f9;
  --ml-sb-line:#e2e8f0;
}

/* ── 1. SIDEBAR ─────────────────────────────────────────────────────────── */
.sidebar{ background:var(--ml-sb-bg) !important; border-right:1px solid var(--ml-sb-line) !important; }
[data-theme="light"] .sidebar{ box-shadow:1px 0 0 var(--ml-sb-line); }
[data-theme="light"] .sidebar .logo-text, [data-theme="light"] .sidebar .logo-sub{ color:#0f172a !important; }
[data-theme="light"] .sidebar-collapse-btn{ border-color:#e2e8f0 !important; color:#64748b !important; }
[data-theme="light"] .sidebar-brand,[data-theme="light"] .sidebar-footer,[data-theme="light"] .sidebar-ops{ border-color:var(--ml-sb-line) !important; }

/* Group labels — small, muted, NOT clickable-looking: no box, no bar. */
html .sidebar .nav-section{
  background:none !important;
  border:0 !important;
  border-top:1px solid var(--ml-sb-line) !important;
  border-radius:0 !important;
  color:var(--ml-sb-muted) !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.09em !important;
  text-transform:uppercase;
  padding:16px 10px 6px !important;
  margin:10px 4px 2px !important;
  gap:6px;
  cursor:default;
  user-select:none;
}
html .sidebar .nav-section:first-of-type{ border-top:0 !important; margin-top:0 !important; padding-top:8px !important; }
html .sidebar .nav-section i{ font-size:11px !important; opacity:.8; }

/* Page links */
.sidebar .nav-link{
  color:var(--ml-sb-text);
  font-weight:500;
  border-radius:9px;
  padding:9px 12px;
  margin:1px 2px;
}
[data-theme="light"] .sidebar .nav-link, [data-theme="light"] .sidebar .nav-label{ color:var(--ml-sb-text); }
.sidebar .nav-link i{ color:var(--ml-sb-muted); transition:color .15s; }
.sidebar .nav-link:hover{ background:var(--ml-sb-hover) !important; }
.sidebar .nav-link:hover i{ color:var(--ml-accent-2); }

/* YOU ARE HERE — solid accent pill, white text, left marker. Impossible to miss. */
html[data-theme] .sidebar .nav-link.active,
html .sidebar .nav-link.active{
  background:linear-gradient(135deg,var(--ml-accent),var(--ml-accent-2)) !important;
  color:#fff !important;
  font-weight:700 !important;
  box-shadow:0 4px 14px rgba(37,99,235,.35);
}
html[data-theme] .sidebar .nav-link.active .nav-label,
html[data-theme] .sidebar .nav-link.active i,
html .sidebar .nav-link.active i{ color:#fff !important; opacity:1; }
.sidebar .nav-link.active::before{
  content:''; position:absolute; left:-2px; top:18%; height:64%; width:4px;
  background:#fff; border-radius:0 4px 4px 0; opacity:.9;
}
/* Sub-links (Website ▸ Listings …) */
.sidebar .nav-sub-link{ color:var(--ml-sb-text); opacity:.85; border-radius:8px; }
.sidebar .nav-sub-link:hover{ background:var(--ml-sb-hover); opacity:1; }
html[data-theme] .sidebar .nav-sub-link.active{ color:var(--ml-accent-2) !important; background:var(--ml-accent-soft) !important; font-weight:700; opacity:1; }
.sidebar.collapsed .nav-link.active::before{ display:none; }
/* v1.7.1 — COLLAPSED SIDEBAR: icons only, centred in one column.
   Group headings become a thin divider line; labels, badges and chevrons are
   hidden completely (not just shrunk), so nothing pushes the icons sideways. */
html .sidebar.collapsed .sidebar-nav{ overflow-x:hidden !important; padding-left:0 !important; padding-right:0 !important; }
html .sidebar.collapsed .nav-section{
  display:block !important; height:0 !important; min-height:0 !important; padding:0 !important;
  margin:10px 12px !important; border:0 !important; border-top:1px solid var(--ml-sb-line) !important;
  font-size:0 !important; line-height:0 !important; overflow:hidden !important; opacity:1 !important; width:auto !important;
}
html .sidebar.collapsed .nav-section *{ display:none !important; }
html .sidebar.collapsed .nav-label,
html .sidebar.collapsed .nav-badge{ display:none !important; }
html .sidebar.collapsed .nav-link,
html .sidebar.collapsed .nav-sub-link{
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:0 !important; padding:10px 0 !important; margin:2px 8px !important; width:auto !important;
  text-indent:0 !important; overflow:visible !important;
}
html .sidebar.collapsed .nav-link > i:not(.nav-label),
html .sidebar.collapsed .nav-sub-link > i:not(.nav-label){
  display:inline-block !important; margin:0 !important; font-size:18px !important; width:auto !important;
  opacity:1 !important; visibility:visible !important; line-height:1 !important;
}
html .sidebar.collapsed .nav-link:not(.active) > i:not(.nav-label),
html .sidebar.collapsed .nav-sub-link:not(.active) > i:not(.nav-label){ color:var(--ml-sb-text) !important; }
html .sidebar.collapsed .nav-sub-link{ margin-left:8px !important; }

/* ── 2. TABLES — one consistent look ─────────────────────────────────────── */
table[data-coltable]{ width:100%; border-collapse:separate; border-spacing:0; }
table[data-coltable] thead th{
  font-size:12px !important; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-3); background:var(--bg-card-2); border-bottom:1px solid var(--border);
  white-space:nowrap; vertical-align:middle;
}
table[data-coltable] thead th a{ color:inherit !important; text-decoration:none; }
table[data-coltable] tbody td{ vertical-align:middle; border-bottom:1px solid var(--border); }
table[data-coltable] tbody tr:hover > td{ background:var(--bg-card-2); }
/* Row spacing (View menu) */
table[data-coltable][data-density="compact"] tbody td{ padding-top:4px !important; padding-bottom:4px !important; font-size:13px; }
table[data-coltable][data-density="compact"] thead th{ padding-top:6px !important; padding-bottom:6px !important; }
table[data-coltable][data-density="comfortable"] tbody td{ padding-top:14px !important; padding-bottom:14px !important; }
/* Image column: identical everywhere; scales with the column width. */
table[data-coltable] th.col-img{ text-align:center; }
table[data-coltable] td.col-img img.col-scale-img,
table[data-coltable] td.col-img .col-scale-ph{ width:100%; max-width:100%; aspect-ratio:1/1; object-fit:contain; border-radius:8px; background:var(--bg-card-2); }
table[data-coltable] td.col-img .col-scale-ph{ display:grid; place-items:center; }
/* Actions column label */
table[data-coltable] th.col-actions{ text-align:right; }

/* ── 3. VIEW MENU & CUSTOMISE ───────────────────────────────────────────── */
.tv-menu{ min-width:250px; }
.tv-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); margin-bottom:6px; }
.tv-menu .btn.active{ background:var(--ml-accent) !important; border-color:var(--ml-accent) !important; color:#fff !important; }

.ui-cust{ width:360px !important; background:var(--bg-card) !important; color:var(--text-1); }
.ui-cust .offcanvas-header{ border-bottom:1px solid var(--border); align-items:flex-start; }
.ui-cust-title{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--text-3); margin:0 0 8px; }
.ui-cust-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border:1px solid var(--border); border-radius:9px; margin-bottom:6px; font-size:14px; cursor:pointer; }
.ui-cust-row:hover{ background:var(--bg-card-2); }
.ui-cust-fab{
  position:fixed; left:calc(var(--sidebar-w, 264px) + 16px); bottom:16px; z-index:1040;
  display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px;
  background:var(--bg-card); color:var(--text-1); border:1px solid var(--border);
  box-shadow:0 6px 20px rgba(0,0,0,.25); font-size:13px; font-weight:600;
}
.ui-cust-fab:hover{ border-color:var(--ml-accent-2); color:var(--ml-accent-2); }
.ui-cust-fab i{ font-size:15px; }
.sidebar.collapsed ~ * .ui-cust-fab, body.sidebar-collapsed .ui-cust-fab{ left:76px; }
.ui-cust-fab-mini span{ display:none; }
.ui-cust-fab-mini{ padding:9px 11px; opacity:.75; }

/* ── 4. SMALL SCREENS ───────────────────────────────────────────────────── */
@media (max-width: 991.98px){
  .ui-cust-fab{ left:12px; bottom:12px; }
  .ui-cust-fab span{ display:none; }
  .ui-cust-fab{ padding:10px 12px; }
}
@media (max-width: 575.98px){
  .ui-cust{ width:100% !important; }
  table[data-coltable] thead th{ font-size:11px !important; }
  .tv-wrap .btn, .coltoggle-wrap .btn{ padding:4px 8px; }
  /* bulk bars wrap nicely on phones */
  .bulk-bar .d-flex{ row-gap:6px; }
}

/* ── v1.4.1 — auto-upgraded tables (includes/table_kit.php) ─────────────── */
table.ml-kit{ width:100%; border-collapse:separate; border-spacing:0; }
table.ml-kit thead th{
  font-size:12px !important; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-3); background:var(--bg-card-2); border-bottom:1px solid var(--border);
  white-space:nowrap; vertical-align:middle; padding:10px 12px;
}
table.ml-kit tbody td{ vertical-align:middle; border-bottom:1px solid var(--border); padding:9px 12px; }
table.ml-kit tbody tr:hover > td{ background:var(--bg-card-2); }
table.ml-kit tbody tr:last-child > td{ border-bottom:0; }
table.ml-kit-lite thead th{ padding:8px 10px; }
table.ml-kit-lite tbody td{ padding:7px 10px; }
.tk-bar{ margin-top:2px; }
@media (max-width:575.98px){
  table.ml-kit thead th{ font-size:11px !important; padding:8px; }
  table.ml-kit tbody td{ padding:7px 8px; }
  .tk-bar{ justify-content:flex-start !important; }
}

/* ── v2.0.0 — table fixes ────────────────────────────────────────────────
   1. The image ALWAYS fills its column, on every screen size: widen or narrow
      the Image column (drag or View menu) and the picture follows. Older
      phone rules capped it at 44px; this overrides them.
   2. The column-resize grip stays INSIDE its own header cell on touch screens
      (it used to poke 11px into the next column and draw over neighbouring
      content, e.g. the Title column on phones).                             */
table[data-coltable] td.col-img img.col-scale-img,
table[data-coltable] td.col-img .col-scale-ph{
  width:100% !important; max-width:100% !important; height:auto !important;
}
table[data-coltable] td.col-img .col-scale-ph{ aspect-ratio:1/1; }
@media (max-width:575.98px){
  table[data-coltable] thead th.col-img{ width:64px; min-width:44px; }
}
table[data-coltable] thead th[data-colresize]{ overflow:hidden; }
table[data-coltable] th[data-colresize] .col-resizer{ right:0 !important; }
@media (pointer:coarse){
  table[data-coltable] th[data-colresize] .col-resizer{ width:14px !important; right:0 !important; }
  table[data-coltable] th[data-colresize] .col-resizer::after{ left:10px !important; }
  table[data-coltable] th[data-colresize] .col-resizer::before{ left:5px !important; }
}
table[data-coltable] thead th[style*="sticky"], table[data-coltable] thead th.col-img,
table[data-coltable] thead th:first-child{ z-index:7; }
/* stock read-out */
.stk .bi-exclamation-triangle-fill{ cursor:help; }

/* ── 6. COLUMN BOUNDARIES — every table (v2.1) ───────────────────────────
   includes/table_resize.php measures each column once, gives it an explicit
   width and adds .tk-fixed. From then on the browser uses a FIXED table
   layout, so nothing can push a column wider than its width: text wraps or
   is clipped with an ellipsis INSIDE the column, and the table scrolls
   sideways inside .table-responsive instead of breaking the page on phones.
   Drag a header edge to make any column wider or narrower. */
table[data-coltable].tk-fixed{ table-layout:fixed; max-width:none; }
/* Older rules forced tables to 720–900px minimum, which stretched every
   column past the width it was given. A locked table is exactly as wide as
   its columns (or the screen, whichever is wider). */
table[data-coltable].tk-fixed,
.table-responsive > table[data-coltable].tk-fixed{ min-width:100% !important; }
.table-responsive > table[data-coltable].tk-fixed{ margin-bottom:0; }

/* Headers: one line, clipped to the column. */
table[data-coltable].tk-fixed > thead > tr > th{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* The Title header was set to position:static on screens under 1400px, so
   its drag handle was positioned against the PAGE and appeared at the far
   right edge (and widened the page on phones). Keep it anchored to its own
   header cell. Sticky headers (checkbox / image) are their own anchor. */
table[data-coltable] thead th.col-title[data-colresize]{ position:sticky !important; }

/* ── 7. HEADER ROW STAYS ON SCREEN WHILE SCROLLING (v2.2.2) ─────────────
   Each table scrolls inside its own box (.tk-scroll, added by
   table_resize.php) that is as tall as the screen allows. The header row is
   pinned to the top of that box, and the checkbox / image columns stay
   pinned on the left as before. position:sticky also anchors each header's
   drag handle, so resizing keeps working. */
.tk-scroll{
  max-height:max(320px, calc(100vh - 170px));
  overflow:auto !important;
  overscroll-behavior:contain;
}
.tk-scroll > table[data-coltable] > thead > tr > th{
  position:sticky !important;
  top:0;
  z-index:10;
  background:var(--bg-card-2, #1f2937);
  box-shadow:0 1px 0 var(--border, #2a3550), 0 2px 6px rgba(0,0,0,.25);
}
/* Header cells that are ALSO pinned on the left sit above everything. */
.tk-scroll > table[data-coltable] > thead > tr > th:first-child,
.tk-scroll > table[data-coltable] > thead > tr > th.col-img{ z-index:12; }

/* ── 8. SELECT CHECKBOXES — always full size and easy to hit (v2.2.2) ─────
   The checkbox column is 32px wide including its padding; with the fixed
   layout that left ~8px for the box, so it shrank to a dot. */
table[data-coltable] .tk-check{ padding-left:7px !important; padding-right:7px !important; text-align:center; }
table[data-coltable] .tk-check > input[type=checkbox],
table[data-coltable].tk-fixed input[type=checkbox]{
  width:16px !important; height:16px !important;
  min-width:16px; max-width:none !important; flex-shrink:0;
  cursor:pointer; vertical-align:middle; margin:0;
}
/* The drag handle sits INSIDE the edge so the clipped header can't hide it. */
table[data-coltable].tk-fixed > thead > tr > th[data-colresize] .col-resizer{ right:0; }

/* Body cells: content stays inside its column and wraps if it must. */
table[data-coltable].tk-fixed > tbody > tr > td{
  overflow:hidden;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  max-width:none;
}
table[data-coltable].tk-fixed > tbody > tr > td > *{ max-width:100%; min-width:0; }

/* Cells that hold menus / pop-ups / the scaling image must not clip them. */
table[data-coltable].tk-fixed > tbody > tr > td.col-actions,
table[data-coltable].tk-fixed > tbody > tr > td.col-img{ overflow:visible; }
/* Separate rule: a browser without :has() support drops only this one. */
table[data-coltable].tk-fixed > tbody > tr > td:has(.dropdown-menu){ overflow:visible; }
table[data-coltable].tk-fixed > tbody > tr > td.col-actions{ white-space:normal; }

/* Rows with one merged cell (empty-state messages) read normally. */
table[data-coltable].tk-fixed > tbody > tr > td[colspan]{ white-space:normal; text-align:center; }

/* TITLE column: every line is ONE line, clipped with "…" at the column edge.
   Widen the column to read more; the full title is in the tooltip. */
table[data-coltable].tk-fixed > tbody > tr > td.col-title{
  white-space:nowrap; text-overflow:ellipsis; overflow-wrap:normal; word-break:normal;
}
table[data-coltable].tk-fixed > tbody > tr > td.col-title > *,
table[data-coltable].tk-fixed > tbody > tr > td.col-title .d-flex > *,
table[data-coltable].tk-fixed > tbody > tr > td.col-title .d-flex > * > *,
table[data-coltable].tk-fixed > tbody > tr > td.col-title .cell-ellipsis,
table[data-coltable].tk-fixed > tbody > tr > td.col-title .text-truncate,
table[data-coltable].tk-fixed > tbody > tr > td.col-title .fee-breakdown{
  min-width:0; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
table[data-coltable].tk-fixed > tbody > tr > td.col-title .d-flex > *{ flex:1 1 auto; }
table[data-coltable].tk-fixed > tbody > tr > td.col-title a{ white-space:nowrap; }

/* Phones: slightly tighter cell padding so more fits on screen. */
@media (max-width:575.98px){
  table[data-coltable].tk-fixed > thead > tr > th,
  table[data-coltable].tk-fixed > tbody > tr > td{ padding-left:6px !important; padding-right:6px !important; }
}