/* shared.css - styles common to every page of the sales dashboard.
   Anything repeated across pages lives here once; a page's own <style> keeps only what is specific to that page.
   Colour/size rules: see README (colour = needs attention, four text sizes: 11 / 13 / 15 / 24px). */

/* shared-table.css - styles needed by tables built with shared-table.js (orderTableCore etc.) on
   pages that don't carry the Sales page's full stylesheet. */
.plink{color:var(--blue);font-weight:800;text-decoration:none;font-family:ui-monospace,monospace}
.plink:hover{text-decoration:underline}
.badge.cat{background:#F1F5F9;color:var(--navy)}
th.sortable-th{cursor:pointer;user-select:none}
th.sortable-th:hover{color:var(--blue)}
td.items{max-width:320px}

/* ---- rules that used to be copy-pasted into several pages ---- */
*{box-sizing:border-box;margin:0;padding:0}
.hdr .sub{font-size:13px;color:var(--muted);margin-top:2px}
.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{padding:7px 16px;border-radius:20px;border:1.5px solid var(--border);background:var(--white);color:var(--muted);font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;cursor:pointer}
.pill.active{border-color:var(--blue);background:var(--blue);color:var(--white)}
.pill:hover:not(.active){color:var(--blue);border-color:var(--blue)}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}
.btn.ghost:hover{color:var(--blue);border-color:var(--blue)}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.card-head h2{font-size:15px;font-weight:800;color:var(--navy)}
/* .card.table-card (not just .table-card): each page's own .card rule sets padding and loads after this file,
   so the table variant needs the higher specificity to keep its edge-to-edge tables. */
.card.table-card, .table-card{padding:0;overflow:hidden}
.table-head{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.dr:hover td{background:var(--tint)}
.pchip{display:inline-block;padding:2px 10px;border-radius:12px;background:#CADDEF;color:var(--navy);font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap}
.pchip:hover{background:#B7D3EC}
.loading,.empty,.error{padding:48px 20px;text-align:center;color:var(--muted);font-size:13px}
.error{color:var(--pink);font-weight:700}
.spin{display:inline-block;width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:8px}
select{padding:6px 10px;border-radius:12px;border:1px solid var(--border);background:var(--white);font-family:'Nunito',sans-serif;font-size:13px;color:var(--text);font-weight:600}
th.sortable{cursor:pointer}

/* Phone fixes shared by every page (found with a 375px-wide check): the top nav and the card
   toolbars (filters, CSV/WhatsApp buttons) used to run off the edge of the screen. */
@media (max-width: 640px) {
  .hdr nav { flex-wrap: wrap !important; row-gap: 4px; }
  .table-head { flex-wrap: wrap; gap: 8px; }
  .table-head > span { flex-wrap: wrap; row-gap: 6px; max-width: 100%; }
  .table-head select, .table-head input { max-width: 100%; }
  .card-head { flex-wrap: wrap; gap: 4px; }
}

/* ---- phone layout lifted out of the Sales page so every page gets it ---- */
  @media (max-width:640px){
    .table-wrap table{font-size:13px}
    .table-wrap th,.table-wrap td{padding:8px 10px}
    .table-wrap th:first-child,.table-wrap td:first-child{position:sticky;left:0;background:var(--white);z-index:1;box-shadow:2px 0 6px rgba(27,37,89,.08)}
    .table-wrap th:first-child{z-index:2;background:var(--bg)}
    .table-wrap tr.dr:hover td:first-child{background:var(--tint)}
  }
  @media (max-width:640px){
    table.stack-mobile,
    table.stack-mobile tbody,
    table.stack-mobile tr,
    table.stack-mobile td{display:block;width:100%}
    table.stack-mobile thead{display:none}
    table.stack-mobile tr.dr{border:1px solid var(--border);border-radius:10px;margin-bottom:10px;padding:8px 12px;background:var(--white);box-shadow:0 1px 3px rgba(27,37,89,.06)}
    table.stack-mobile tr.dr:hover td{background:transparent}
    table.stack-mobile td{border:none;padding:5px 0}
    table.stack-mobile td[data-label]{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px}
    table.stack-mobile td[data-label]::before{content:attr(data-label);font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
    table.stack-mobile td:first-child{position:static;box-shadow:none;background:transparent}
    /* A nested table (Pending/Not Picked Up's expanded per-order detail) is itself a
       table.stack-mobile and gets the same card treatment for ITS rows - the outer expand row
       that merely holds it needs no card chrome of its own, so it stays flush inside the
       parent's already-visible card boundary instead of nesting a border inside a border. */
    table.stack-mobile tr.pdetail,table.stack-mobile tr.sdetail,table.stack-mobile tr.mdetail{margin:0;padding:0;border:none;box-shadow:none;background:transparent}
    table.stack-mobile tr.pdetail td,table.stack-mobile tr.sdetail td,table.stack-mobile tr.mdetail td{padding:0}
    table.stack-mobile table.stack-mobile tr.dr{margin:6px 0;box-shadow:none;background:var(--bg)}
  }