:root {
  --bg: #f4f6f2;
  --bg-grad: linear-gradient(180deg, #f8faf7 0%, #eef2ec 100%);
  --card: #ffffff;
  --border: #e0e4dc;
  --border-soft: #ecefe7;

  --text: #0f172a;
  --muted: #64748b;
  --muted-soft: #94a3b8;

  --brand: #1f4d3a;
  --brand-dark: #163a2b;
  --brand-soft: #e6efe9;
  --ember: #b5502c;
  --ember-soft: #fbe9e1;

  --red: #dc2626;
  --red-soft: #fee2e2;

  --amber: #b45309;
  --amber-soft: #fef3c7;

  --blue: #1d4ed8;
  --blue-soft: #dbeafe;

  --green: #15803d;
  --green-soft: #dcfce7;

  --purple: #7c3aed;
  --purple-soft: #ede9fe;

  --indigo: #4338ca;
  --indigo-soft: #e0e7ff;

  --teal: #0f766e;
  --teal-soft: #ccfbf1;

  --rose: #be185d;
  --rose-soft: #fce7f3;

  --gold: #d4af37;

  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-badge: 0 4px 14px rgba(15, 61, 42, 0.28);

  --radius: 14px;
}

/* =========================================================
   GLOBAL
========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  background: var(--bg-grad);
  background-attachment: fixed;
  color: var(--text);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  min-height: 100vh;
  overflow-x: hidden;
}

/* =========================================================
   TOP BAR
========================================================= */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 64px;
  padding: 12px 24px;

  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);

  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(15, 23, 42, 0.04);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;

  border-radius: 10px;
  display: block;

  box-shadow: var(--shadow-sm);
}

.topbar h1 {
  margin: 0;

  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar h1 .sub {
  margin-left: 4px;

  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;

  color: var(--muted);
  font-size: 13px;

  flex-shrink: 0;
}

/* =========================================================
   LIVE STATUS
========================================================= */

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 6px 11px;

  border-radius: 999px;

  background: var(--green-soft);
  color: var(--green);

  font-size: 12px;
  font-weight: 700;

  white-space: nowrap;
}

.live-pill.offline {
  background: #f1f5f9;
  color: var(--muted);
}

.live-dot {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;
  background: var(--green);

  animation: pulse 2s infinite;
}

.live-dot.offline {
  background: var(--muted-soft);
  animation: none;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.45);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(21, 128, 61, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(21, 128, 61, 0);
  }
}

.synced-at {
  color: var(--muted-soft);
  font-size: 12px;
}

.logout-btn {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.logout-btn:hover {
  background: var(--red-soft);
  color: var(--red);
  border-color: var(--red-soft);
}

/* =========================================================
   CURRENT USER CHIP (official-badge running line)
   Shows who's logged in, top-left of the topbar-right cluster, as a small
   ID-badge-style pill with the name (and role, for the owner) scrolling
   continuously inside it. No names are stored anywhere (see sheetsClient.js's
   displayNameFromEmail), so the name shown here is a best-effort formatting
   of the email's mailbox part. The green/gold "seal" treatment only ever
   shows for the account isOwner() recognizes — everyone else gets the same
   shape in a neutral slate (.current-user-chip.is-non-owner) — see the
   fetch('/api/auth/is-owner') handler in app.js, which also builds the
   scrolling text (two identical copies back to back, so the loop is
   seamless — see .current-user-track below).
========================================================= */

.current-user-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  height: 32px;
  padding: 0 14px 0 10px;

  border-radius: 999px;

  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  box-shadow: var(--shadow-badge);
}

.current-user-chip.is-non-owner {
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
  box-shadow: var(--shadow-sm);
}

.current-user-seal {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--gold);
}

.current-user-chip.is-non-owner .current-user-seal {
  color: #94a3b8;
}

.current-user-window {
  position: relative;
  width: 128px;
  height: 100%;
  overflow: hidden;

  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

.current-user-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;

  display: flex;
  align-items: center;
  white-space: nowrap;

  padding-left: 100%;
  animation: current-user-scroll 10s linear infinite;
}

.current-user-chip:hover .current-user-track {
  animation-play-state: paused;
}

.current-user-track .chunk {
  display: inline-flex;
  align-items: center;
  padding-right: 34px;
}

.current-user-track .name {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}

.current-user-track .divider {
  display: inline-block;
  width: 3px;
  height: 3px;
  flex: 0 0 auto;

  border-radius: 50%;
  background: var(--gold);

  margin: 0 8px;
}

.current-user-track .role {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: var(--gold);
}

.current-user-chip.is-non-owner .current-user-track .divider,
.current-user-chip.is-non-owner .current-user-track .role {
  color: #94a3b8;
  background: #94a3b8;
}

@keyframes current-user-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .current-user-track {
    animation: none;
    padding-left: 0;
  }

  .current-user-track .chunk:nth-child(n + 2) {
    display: none;
  }
}

/* =========================================================
   APP MENU (sliding drawer)
   The ☰ button in the topbar opens a right-side panel for things that
   don't need a permanent spot in the topbar itself: sharing the app's own
   link, a manual "refresh now", support contact and app info. See the
   openAppMenu()/closeAppMenu() pair in app.js for the show/hide + the
   requestAnimationFrame that makes the slide-in transition actually play.
========================================================= */

.menu-trigger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;

  border: 1px solid var(--border);
  border-radius: 999px;

  background: var(--card);
  color: var(--brand);
  cursor: pointer;
}

.menu-trigger-btn svg {
  width: 17px;
  height: 17px;
}

.menu-trigger-btn:hover {
  background: var(--brand-soft);
}

.app-menu-backdrop {
  position: fixed;
  inset: 0;

  background: rgba(15, 23, 42, 0.32);
  opacity: 0;
  pointer-events: none;

  transition: opacity 0.28s ease;
  /* Above .topbar's sticky z-index: 100 — otherwise the sticky header
     stacks on top of the drawer instead of being covered by it. */
  z-index: 150;
}

.app-menu-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.app-menu-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  max-width: 86vw;

  display: flex;
  flex-direction: column;

  background: var(--card);
  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.18);

  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.22, 0.9, 0.32, 1);
  z-index: 151;
}

.app-menu-drawer.is-open {
  transform: translateX(0);
}

.app-menu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;

  padding: 18px 18px 16px;

  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
}

.app-menu-id {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.app-menu-seal {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  color: var(--gold);
}

.app-menu-who {
  min-width: 0;
}

.app-menu-name {
  font-size: 13.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-menu-role {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 2px;
}

.app-menu-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;

  border: none;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
}

.app-menu-close-btn svg {
  width: 14px;
  height: 14px;
}

.app-menu-close-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.app-menu-section-title {
  padding: 16px 18px 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-soft);
}

.app-menu-share-row {
  display: flex;
  gap: 8px;
  padding: 4px 14px 10px;
}

.app-menu-share-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;

  padding: 9px 4px;
  border: 1px solid var(--border-soft);
  border-radius: 10px;

  background: var(--card);
  font-family: inherit;
  cursor: pointer;
}

.app-menu-share-btn:hover {
  border-color: var(--brand);
}

.app-menu-share-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.app-menu-share-ic svg {
  width: 14px;
  height: 14px;
}

.app-menu-share-wa .app-menu-share-ic {
  background: var(--green-soft);
  color: var(--green);
}

.app-menu-share-mail .app-menu-share-ic {
  background: var(--blue-soft);
  color: var(--blue);
}

.app-menu-share-copy .app-menu-share-ic,
.app-menu-share-copy.is-copied .app-menu-share-ic {
  background: var(--amber-soft);
  color: var(--amber);
}

.app-menu-share-copy.is-copied .app-menu-share-ic {
  background: var(--green-soft);
  color: var(--green);
}

.app-menu-share-txt {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
}

.app-menu-divider {
  height: 1px;
  margin: 8px 14px;
  background: var(--border-soft);
}

.app-menu-list {
  list-style: none;
  margin: 0;
  padding: 0 8px;
}

.app-menu-list li {
  margin: 2px 0;
}

.app-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 10px 10px;
  border: none;
  border-radius: 10px;

  background: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.app-menu-item:hover {
  background: var(--brand-soft);
}

.app-menu-item-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;

  border-radius: 9px;

  background: var(--brand-soft);
  color: var(--brand);
}

.app-menu-item-ic svg {
  width: 16px;
  height: 16px;
}

.app-menu-item-label {
  flex: 1;
}

.app-menu-item-chev {
  color: var(--muted-soft);
}

.app-menu-item-chev svg {
  width: 14px;
  height: 14px;
}

.app-menu-foot {
  margin-top: auto;
  flex: 0 0 auto;

  padding: 12px 18px 16px;
  font-size: 11px;
  color: var(--muted-soft);
}

.app-menu-foot b {
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .app-menu-drawer,
  .app-menu-backdrop {
    transition: none;
  }
}

/* =========================================================
   PENDING APPROVALS (owner-only review of everyone else's edits)
   Everyone besides the owner has their edits queued instead of applied
   straight away (see server.js) — this button/badge/panel is where the
   owner reviews and decides them. Reuses the .proof-modal-* overlay/box/
   btn pattern for the panel chrome so it looks native to the rest of the
   app's modals, with its own classes layered on for the list/rows.
========================================================= */

.pending-approvals-btn {
  position: relative;

  display: inline-flex;
  align-items: center;
  gap: 6px;

  height: 32px;
  padding: 0 12px;

  border: 1px solid var(--amber);
  border-radius: 999px;

  background: var(--amber-soft);
  color: var(--amber);

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
  white-space: nowrap;

  transition: background 0.12s ease, opacity 0.12s ease;
}

.pending-approvals-btn:hover {
  background: #fde8b6;
}

.pending-approvals-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 18px;
  height: 18px;
  padding: 0 5px;

  border-radius: 999px;

  background: var(--amber);
  color: #fff;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

/* Row-level badge — shown in the Musaffah Status cell of any item that has
   an edit awaiting the owner's decision, so it's clear at a glance that
   what's on screen for that row may not be the final value yet. */
.pending-approval-badge {
  display: inline-flex;
  align-items: center;

  margin-left: 6px;
  padding: 3px 8px;

  border-radius: 999px;

  background: var(--amber-soft);
  color: var(--amber);

  font-size: 10.5px;
  font-weight: 700;

  white-space: nowrap;
}

.pending-approvals-box {
  max-width: 420px;
}

.pending-approvals-list {
  display: flex;
  flex-direction: column;
  gap: 10px;

  max-height: 60vh;
  overflow-y: auto;

  margin-bottom: 14px;
}

.pending-approvals-empty {
  margin: 0;
  padding: 18px 4px;

  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.pending-approval-row {
  padding: 12px 13px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: #fbfcfe;
}

.pending-approval-summary {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
}

.pending-approval-changes {
  margin-top: 5px;

  color: var(--text);
  font-size: 12.5px;
  line-height: 1.5;
}

.pending-approval-changes a {
  color: var(--brand);
}

.pending-approval-meta {
  margin-top: 6px;

  color: var(--muted-soft);
  font-size: 11px;
}

.pending-approval-actions {
  display: flex;
  gap: 8px;

  margin-top: 10px;
}

.pending-approval-btn {
  flex: 1;

  height: 32px;

  border-radius: 8px;
  border: 1px solid var(--border);

  background: #fff;
  color: var(--text);

  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;

  cursor: pointer;
}

.pending-approval-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.pending-approval-approve {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green);
}

.pending-approval-approve:hover:not(:disabled) {
  background: #bbf7d0;
}

.pending-approval-reject {
  border-color: var(--red);
  background: var(--red-soft);
  color: var(--red);
}

.pending-approval-reject:hover:not(:disabled) {
  background: #fecaca;
}

/* =========================================================
   TOAST (lightweight, non-blocking, auto-dismissing)
========================================================= */

.mt-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 2000;

  transform: translate(-50%, 12px);

  max-width: calc(100vw - 32px);
  padding: 11px 18px;

  border-radius: 999px;

  background: rgba(15, 23, 42, 0.92);
  color: #fff;

  font-size: 13px;
  font-weight: 600;
  text-align: center;

  box-shadow: var(--shadow-md);

  opacity: 0;
  pointer-events: none;

  transition: opacity 0.2s ease, transform 0.2s ease;
}

.mt-toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* =========================================================
   SUMMARY CARDS
========================================================= */

.summary {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 14px;

  padding: 20px 24px 0;
}

.stat-card {
  position: relative;

  min-width: 0;

  padding: 17px 20px;

  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);

  box-shadow: var(--shadow-sm);

  overflow: hidden;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.stat-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.stat-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 4px;

  background: var(--accent, var(--brand));
}

.stat-card.total {
  --accent: var(--ember);
}

.stat-card.not-delivered {
  --accent: #dc2626;
}

.stat-card.quotation {
  --accent: #b45309;
}

.stat-card.approval {
  --accent: #7c3aed;
}

.stat-card.pending-rahman {
  --accent: var(--rose);
}

.stat-card.forward-zaid {
  --accent: var(--teal);
}

.stat-card .n {
  font-size: 26px;
  line-height: 1.1;
  font-weight: 800;

  letter-spacing: -0.02em;
}

.stat-card .l {
  margin-top: 6px;

  color: var(--muted);

  font-size: 12.5px;
  line-height: 1.3;
  font-weight: 500;
}

/* =========================================================
   CONTROLS
========================================================= */

.controls {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 16px 24px;

  flex-wrap: wrap;
}

.controls input,
.controls select {
  height: 44px;

  padding: 0 14px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: var(--card);
  color: var(--text);

  font-family: inherit;
  font-size: 14px;

  box-shadow: var(--shadow-sm);

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.controls input {
  flex: 1;
  min-width: 240px;
}

.controls input::placeholder {
  color: var(--muted-soft);
}

.controls input:focus,
.controls select:focus {
  outline: none;

  border-color: var(--brand);

  box-shadow:
    0 0 0 3px var(--brand-soft),
    var(--shadow-sm);
}

.controls select {
  min-width: 150px;

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 8L10 12.5L14.5 8' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;

  padding-right: 36px;
}

/* =========================================================
   BULK ACTIONS BAR
   Lets the person select any mix of individual item rows — including just
   some of an MR#/LPO# group (e.g. 3 of that group's 8 items arrived today)
   — via each row's own checkbox, with a group header checkbox available as
   a "select all in this group" shortcut (see .group-select below). Then
   mark everything selected Delivered in a single pass: one date + photo +
   delivery-note prompt applies to all of it, instead of repeating that
   flow item by item. A "select all visible" toggle here selects everything
   under the current search/site/status filters.
========================================================= */

.bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  flex-wrap: wrap;
  gap: 12px;

  margin: 0 24px 14px;
  padding: 10px 16px;

  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;

  box-shadow: var(--shadow-sm);

  font-size: 13px;
}

.bulk-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: var(--muted);
  font-weight: 600;

  cursor: pointer;
  user-select: none;
}

.bulk-select-all input[type="checkbox"] {
  width: 18px;
  height: 18px;

  accent-color: var(--brand);
  cursor: pointer;
}

.bulk-select-all input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.bulk-actions {
  display: flex;
  align-items: center;
  gap: 10px;

  flex-wrap: wrap;
}

.bulk-count {
  padding: 5px 10px;

  border-radius: 999px;

  background: var(--brand-soft);
  color: var(--brand-dark);

  font-size: 12px;
  font-weight: 700;

  white-space: nowrap;
}

.bulk-apply-btn {
  height: 38px;

  padding: 0 16px;
  border: none;
  border-radius: 8px;

  background: var(--brand);
  color: #fff;

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;

  cursor: pointer;
  white-space: nowrap;

  transition: background 0.12s ease, opacity 0.12s ease;
}

.bulk-apply-btn:hover {
  background: var(--brand-dark);
}

.bulk-apply-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.bulk-clear-btn {
  height: 38px;

  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;

  background: var(--card);
  color: var(--muted);

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;
  white-space: nowrap;
}

.bulk-clear-btn:hover {
  background: var(--red-soft);
  color: var(--red);
  border-color: var(--red-soft);
}

/* Bulk status move — the same one-click "apply to every selected row"
   idea as the Mark Delivered button above, but for the everyday routing
   statuses (Forward to Zaid / Forward to Mr Ibrahim / Waiting for Engr.
   Sreejesh Approval) that don't need a photo+note, so they get a plain
   pick-and-apply control instead of the delivery-completion flow. See
   runBulkStatusFlow() in app.js. */
.bulk-status-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bulk-status-select {
  height: 38px;

  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;

  background: var(--card);
  color: var(--text);

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;
  max-width: 220px;
}

.bulk-status-apply-btn {
  height: 38px;

  padding: 0 14px;
  border: none;
  border-radius: 8px;

  background: var(--text);
  color: #fff;

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;

  cursor: pointer;
  white-space: nowrap;

  transition: background 0.12s ease, opacity 0.12s ease;
}

.bulk-status-apply-btn:hover {
  opacity: 0.88;
}

.bulk-status-apply-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================================================
   MAIN
========================================================= */

main {
  width: 100%;

  padding: 4px 24px 48px;
}

/* =========================================================
   ERROR
========================================================= */

.error-banner {
  margin: 0 24px 14px;

  padding: 12px 16px;

  background: var(--red-soft);
  border: 1px solid #fecaca;

  color: #991b1b;

  border-radius: 10px;

  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
}

/* =========================================================
   TABLE
========================================================= */

.table-wrap {
  width: 100%;

  background: var(--card);

  border: 1px solid var(--border);
  border-radius: var(--radius);

  box-shadow: var(--shadow-md);

  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  min-width: 1200px;

  border-collapse: separate;
  border-spacing: 0;

  font-size: 13px;
}

th,
td {
  padding: 12px 13px;

  border-bottom: 1px solid var(--border-soft);

  text-align: left;
  vertical-align: middle;

  white-space: nowrap;
}

th {
  position: sticky;
  top: 0;
  z-index: 5;

  background: #f8fafc;

  color: var(--muted);

  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.045em;

  border-bottom: 1px solid var(--border);

  box-shadow: 0 1px 0 var(--border);
}

tbody tr {
  transition: background 0.12s ease;

  /* Tracks this row's current background as a custom property (inherited
     by every descendant, unlike `background` itself) so the sticky Select
     cell below — which needs its OWN opaque background instead of quietly
     inheriting nothing — can always paint the same color as the rest of
     its row, in every state (striped, hovered, selected). */
  --row-bg: var(--card);
}

tbody tr:nth-child(even) {
  background: #fbfcfe;
  --row-bg: #fbfcfe;
}

tbody tr:hover {
  --row-bg: var(--brand-soft);
}

tbody tr:hover td {
  background: var(--brand-soft);
}

td.wrap {
  min-width: 200px;

  white-space: normal;
  line-height: 1.45;
}

/* =========================================================
   SELECT COLUMN
   The rightmost column in every row — a plain checkbox used to build a
   bulk-Delivered selection (see BULK ACTIONS BAR above). Every item row
   gets one here, grouped or standalone, since a delivery can arrive for
   only part of a group (e.g. 3 of an MR#'s 8 items today) and each item
   needs to be selectable on its own; the group header's checkbox (see
   .group-select below) is a "select all in this group" shortcut on top of
   these, not a replacement for them.
   Appended as the LAST column in the markup on purpose: the mobile card
   layout below addresses every other column by its nth-child position,
   and adding this one at the end means none of those positions shift —
   on mobile it's then pulled back to the front visually with `order: 0`
   (see nth-child(22) further down).
   On desktop the table has 18 columns and comfortably exceeds the
   viewport width, so it scrolls horizontally (.table-wrap) — and being
   the LAST column, an unpinned checkbox would sit off-screen behind
   several columns nobody scrolls that far to reach, exactly the "where's
   the select box" confusion this caused. Pinning it with `position:
   sticky; right: 0` keeps it visible at the right edge of the table at
   any scroll position, the same way `th` is already pinned to the top.
   A sticky cell needs its own opaque background (see --row-bg above) —
   left transparent, whatever column is scrolled underneath would show
   through instead of being hidden behind it.
========================================================= */

.select-th {
  width: 44px;
  text-align: center;

  position: sticky;
  right: 0;
  z-index: 6; /* above the plain sticky-top th (z-index: 5) at their corner */
}

.select-cell {
  text-align: center;

  position: sticky;
  right: 0;
  z-index: 3; /* above ordinary cells scrolling underneath, below thead */

  background: var(--row-bg, var(--card));
  box-shadow: -1px 0 0 var(--border-soft);
}

.select-cell input[type="checkbox"],
input.row-select {
  width: 18px;
  height: 18px;

  accent-color: var(--brand);
  cursor: pointer;
}

tbody tr.row-selected {
  --row-bg: var(--brand-soft);
}

tbody tr.row-selected td {
  background: var(--brand-soft);
}

tbody tr.row-selected:hover td {
  background: var(--brand-soft);
}

/* =========================================================
   MR#/LPO# GROUPING
   Rows sharing the same MR#/LPO# (within a site) are pulled together
   under one header bar instead of repeating the number on every row —
   see group-item/-item-first/-item-last on individual rows below.
========================================================= */

tbody tr.group-header {
  background: var(--brand);
}

tbody tr.group-header:hover td {
  background: var(--brand);
}

tr.group-header td {
  padding: 8px 13px;

  color: #eaf3ed;
  font-size: 12px;
  font-weight: 700;

  border-bottom: none;
  white-space: normal;
}

tr.group-header .group-count {
  margin-left: 8px;

  color: #eaf3ed;
  opacity: 0.8;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

/* The group header's own checkbox — a "select all in this group" shortcut
   that checks/unchecks every row under that header at once (see the
   group-select-checkbox listener in app.js). Each row still has its own
   checkbox too, so a partial delivery (only some of the group's items
   arriving today) can be selected without this one — it goes indeterminate
   when just some of the group's rows are selected.
   Pinned to the left edge of the (horizontally scrolling) table the same
   way .select-cell is pinned to the right: the header row is one wide
   colspan cell, so without this, scrolling right to reach the per-item
   Select column would carry the group's own checkbox+label off-screen to
   the left along with it. */
.group-select {
  display: flex;
  align-items: center;
  gap: 10px;

  cursor: pointer;
  user-select: none;

  position: sticky;
  left: 0;
  background: var(--brand);
}

.group-select input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;

  accent-color: #fff;
  cursor: pointer;
}

/* =========================================================
   BADGES
========================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 26px;

  padding: 4px 9px;

  border-radius: 999px;

  font-size: 11.5px;
  line-height: 1.2;
  font-weight: 700;

  white-space: nowrap;
}

.badge.not-delivered {
  background: var(--red-soft);
  color: var(--red);
}

.badge.not-received {
  background: var(--purple-soft);
  color: var(--purple);
}

.badge.waiting-quotation {
  background: var(--amber-soft);
  color: var(--amber);
}

.badge.waiting-approval {
  background: var(--blue-soft);
  color: var(--blue);
}

.badge.under-approval {
  background: var(--indigo-soft);
  color: var(--indigo);
}

.badge.pending-rahman {
  background: var(--rose-soft);
  color: var(--rose);
}

.badge.forward {
  background: var(--teal-soft);
  color: var(--teal);
}

.badge.other {
  background: #f1f5f9;
  color: var(--muted);
}

/* =========================================================
   STATUS SELECT
========================================================= */

select.status-select {
  min-height: 30px;

  padding: 5px 28px 5px 10px;

  border: 1px solid transparent;
  border-radius: 999px;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;

  background: transparent;
  color: inherit;

  cursor: pointer;

  appearance: auto;
  -webkit-appearance: auto;
}

select.status-select:hover {
  border-color: currentColor;
}

select.status-select:focus {
  outline: none;
  border-color: var(--brand);
}

/* =========================================================
   EDITABLE TEXT
========================================================= */

.editable-text {
  min-width: 160px;
  max-width: 280px;

  padding: 6px 8px;

  border: 1px solid transparent;
  border-radius: 8px;

  background: transparent;

  color: var(--text);

  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;

  white-space: normal;

  outline: none;

  transition:
    background 0.12s ease,
    border-color 0.12s ease;
}

.editable-text:hover {
  border-color: var(--border);
  background: #fafbfd;
}

.editable-text:focus {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.editable-text.saving {
  opacity: 0.55;
}

.editable-text.error {
  border-color: var(--red);
  background: var(--red-soft);
}

/* =========================================================
   DELIVERY PROOF
========================================================= */

.proof-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.proof-thumb-link {
  display: inline-flex;
  text-decoration: none;
}

.proof-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.proof-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 28px;
  padding: 5px 10px;

  border-radius: 999px;
  border: 1px dashed var(--brand);

  background: var(--brand-soft);
  color: var(--brand-dark);

  font-size: 11.5px;
  font-weight: 700;

  cursor: pointer;
  white-space: nowrap;

  transition: background 0.12s ease, opacity 0.12s ease;
}

.proof-upload-btn:hover {
  background: #dbeafe;
}

.proof-upload-btn.uploading {
  opacity: 0.6;
  pointer-events: none;
}

.proof-empty {
  color: var(--muted-soft);
  font-size: 12px;
}

/* =========================================================
   DELIVERY DATE PROMPT (shown right when status -> Delivered)
========================================================= */

.proof-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

.proof-modal-box {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  max-width: 320px;
  width: 100%;
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.25));
}

.proof-modal-title {
  margin: 0 0 12px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink, #0f172a);
}

.proof-modal-subtitle {
  margin: -6px 0 14px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
}

.proof-modal-date {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 14px;
  margin-bottom: 14px;
}

.proof-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.proof-modal-btn {
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
}

.proof-modal-btn.proof-modal-save {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* "Skip — attach later" on the delivery-note step: distinct from both
   Cancel (aborts the whole delivery) and Choose Note (attaches one now). */
.proof-modal-btn.proof-modal-later {
  background: var(--amber-soft);
  border-color: var(--amber);
  color: var(--amber);
}

/* =========================================================
   EMPTY STATE
========================================================= */

.empty-state {
  padding: 56px 20px;

  text-align: center;

  color: var(--muted);

  font-size: 14px;
}

/* =========================================================
   SCROLLBAR
========================================================= */

.table-wrap::-webkit-scrollbar {
  height: 8px;
}

.table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.table-wrap::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

.table-wrap::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {
  .summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  main {
    padding-left: 18px;
    padding-right: 18px;
  }

  .controls {
    padding-left: 18px;
    padding-right: 18px;
  }

  .summary {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* =========================================================
   ANDROID / MOBILE
   Hides low-priority columns (Activity, Req. Date, Site Del.
   Status, Site Del. Date) and switches the table to a fixed,
   fit-to-screen layout so there is no horizontal "slider" —
   everything fits the phone width and wraps instead.
========================================================= */

@media (max-width: 640px) {
  body {
    background: #f4f6fb;
  }

  /* ---------- TOP BAR ---------- */

  .topbar {
    min-height: 58px;

    padding: 10px 14px;

    border-bottom-color: #e2e8f0;
  }

  .topbar-left {
    gap: 9px;

    min-width: 0;
  }

  .brand-mark {
    width: 30px;
    height: 30px;

    flex-basis: 30px;

    border-radius: 8px;
  }

  .topbar h1 {
    font-size: 15px;

    max-width: 170px;
  }

  .topbar h1 .sub {
    display: none;
  }

  .topbar-right {
    gap: 5px;
  }

  .live-pill {
    width: 30px;
    height: 30px;

    padding: 0;

    justify-content: center;
    gap: 0;

    border-radius: 50%;
  }

  .live-pill span#liveLabel {
    display: none;
  }

  .live-dot {
    width: 7px;
    height: 7px;
  }

  .synced-at {
    display: none;
  }

  /* Shrink the scrolling window on small screens, same treatment as the
     Live pill going icon-only above — the badge keeps its shape, just
     narrower (see the mockup's own .id-marquee .window rule). */
  .current-user-window {
    width: 92px;
  }

  .logout-btn {
    padding: 6px 9px;
    font-size: 11px;
  }

  .pending-approvals-btn {
    height: 30px;
    padding: 0 8px;
    font-size: 0;
    gap: 0;
  }

  .pending-approvals-btn::before {
    content: "⏳";
    font-size: 13px;
  }

  .pending-approvals-count {
    font-size: 10px;
  }

  /* ---------- SUMMARY ---------- */

  .summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 9px;

    padding: 12px 14px 0;
  }

  .stat-card {
    min-height: 76px;

    padding: 12px 13px;

    border-radius: 12px;
  }

  .stat-card::before {
    width: 3px;
  }

  .stat-card .n {
    font-size: 21px;
  }

  .stat-card .l {
    margin-top: 4px;

    font-size: 11px;
  }

  /* ---------- CONTROLS ---------- */

  .controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: 8px;

    padding: 12px 14px;
  }

  .controls input,
  .controls select {
    width: 100%;
    min-width: 0;

    height: 46px;

    flex: none;

    font-size: 16px;

    border-radius: 10px;
  }

  /* ---------- BULK ACTIONS BAR ---------- */

  .bulk-bar {
    flex-direction: column;
    align-items: stretch;

    margin: 0 14px 12px;
    padding: 10px 12px;
  }

  .bulk-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .bulk-actions select,
  .bulk-apply-btn,
  .bulk-clear-btn {
    width: 100%;
  }

  .bulk-status-group {
    width: 100%;
  }

  .bulk-status-select {
    max-width: none;
  }

  .bulk-status-apply-btn {
    width: 100%;
  }

  /* ---------- ERROR ---------- */

  .error-banner {
    margin: 0 14px 12px;

    padding: 11px 13px;

    font-size: 12px;
  }

  /* ---------- MAIN ---------- */

  main {
    padding: 2px 14px 30px;
  }

  /* ---------- TABLE → CARD LIST ----------
     11 columns can't read as a table on a ~360px phone — headers and
     site names were wrapping letter by letter. Instead every row
     becomes its own compact card: Site / S-L / status badge on top,
     description below, short meta chips (Unit, Qty, MR#, LPO,
     Musaffah Del. Date), then both comment fields full-width at the
     bottom with a label above each. */

  .table-wrap {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow-x: hidden;
  }

  table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  thead {
    display: none;
  }

  tbody {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 6px;
    column-gap: 9px;

    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 13px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  }

  tr:last-child {
    margin-bottom: 0;
  }

  tr:nth-child(even) {
    background: var(--card);
  }

  tr:hover td {
    background: transparent;
  }

  tr.row-selected {
    background: var(--brand-soft);
    border-color: var(--brand);
  }

  tr.row-selected:hover td {
    background: transparent;
  }

  /* ---------- MR#/LPO# GROUPING ----------
     A group header bar (brand color) sits above its members; members are
     flush against it and each other (dashed divider, square corners)
     except the last one, which rounds off the bottom and restores the
     card-to-card gap — the whole cluster reads as one card. */

  tr.group-header {
    display: block;

    background: var(--brand);
    border: none;
    border-radius: 12px 12px 0 0;
    padding: 9px 13px;
    margin-bottom: 0;
    box-shadow: none;
  }

  tr.group-header td {
    display: block;
    padding: 0;

    color: #eaf3ed;
    font-size: 12.5px;
    font-weight: 700;
  }

  .group-select input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }

  tr.group-header .group-count {
    color: #eaf3ed;
    opacity: 0.85;
    font-weight: 500;
    font-size: 11.5px;
  }

  tr.group-item {
    border-top: 1px dashed var(--border-soft);
    border-radius: 0;
    margin-bottom: 0;
    box-shadow: none;
  }

  tr.group-item-first {
    border-top: none;
  }

  tr.group-item-last {
    border-radius: 0 0 12px 12px;
    margin-bottom: 10px;
  }

  tr.group-item-last:last-child {
    margin-bottom: 0;
  }

  td {
    display: block;
    padding: 0;
    border: none;
    white-space: normal;
    word-break: break-word;
    font-size: 12.5px;
    color: var(--text);
  }

  /* hide: Activity(3), Req. Date(7), Site Del. Status(15), Site Del. Date(16) */
  td:nth-child(3),
  td:nth-child(7),
  td:nth-child(15),
  td:nth-child(16) {
    display: none;
  }

  /* a blank field collapses instead of showing an empty chip — except
     LPO(9), which is now an editable field (see .editable-text below): a
     blank LPO isn't just empty text any more, it's a `<div
     class="editable-text">` wrapper around that empty text, so this rule
     no longer matches it (td:empty needs zero child nodes) and it would
     already show up regardless — the :not() just documents that on
     purpose, since a blank-but-tappable LPO chip is exactly how someone
     adds one on mobile. */
  td:empty:not(:nth-child(9)):not(:nth-child(10)) {
    display: none;
  }

  /* Site — card title */
  td:nth-child(1) {
    order: 1;
    flex: 1 1 auto;
    font-weight: 700;
    font-size: 14px;
  }

  /* S/L */
  td:nth-child(2) {
    order: 2;
    flex: 0 0 auto;
    align-self: center;
    font-size: 11px;
    color: var(--muted);
  }

  /* Musaffah Status badge — pinned to the top-right */
  td:nth-child(12) {
    order: 3;
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* Description — its own full-width line */
  td:nth-child(4) {
    order: 4;
    flex: 1 1 100%;
    font-size: 13px;
    line-height: 1.4;
  }

  /* meta chips: Unit, Qty, MR#, LPO, Musaffah Del. Date */
  td:nth-child(5),
  td:nth-child(6),
  td:nth-child(8),
  td:nth-child(9),
  td:nth-child(11) {
    flex: 0 0 auto;
    background: #f1f5f9;
    color: var(--muted);
    border-radius: 6px;
    padding: 3px 7px !important;
    font-size: 11px;
  }
  td:nth-child(5) { order: 5; }
  td:nth-child(6) { order: 6; }
  td:nth-child(8) { order: 7; }
  td:nth-child(9) { order: 8; }
  td:nth-child(11) { order: 9; }

  td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--muted-soft);
  }

  /* comments — full width, label on its own line above the box */
  td:nth-child(17),
  td:nth-child(18) {
    flex: 1 1 100%;
    margin-top: 4px;
    padding-top: 6px !important;
    border-top: 1px dashed var(--border-soft);
  }
  td:nth-child(17) { order: 10; }
  td:nth-child(18) { order: 11; }
  td:nth-child(17)::before,
  td:nth-child(18)::before {
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* delivery proof + delivery note — full width, own rows at the bottom */
  td:nth-child(19),
  td:nth-child(20) {
    flex: 1 1 100%;
    margin-top: 4px;
    padding-top: 6px !important;
    border-top: 1px dashed var(--border-soft);
  }
  td:nth-child(19) { order: 12; }
  td:nth-child(20) { order: 13; }
  td:nth-child(19)::before,
  td:nth-child(20)::before {
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  /* select checkbox — last column in the markup, but pinned to the very
     top-left of the card (order 0, ahead of the Site title) so it reads
     as "select this card" the same way a mail app's row checkbox does.
     The desktop table pins this same cell to the right edge instead (see
     .select-cell) since there it's a genuinely scrollable table — reset
     that positioning/shadow here so it doesn't carry into the card. */
  td:nth-child(22) {
    order: 0;
    flex: 0 0 auto;
    align-self: center;

    position: static;
    background: transparent;
    box-shadow: none;
  }
  td:nth-child(22) input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--brand);
    cursor: pointer;
  }

  /* ---------- BADGES ---------- */

  .badge {
    min-height: 24px;
    padding: 4px 9px;
    font-size: 11px;
    white-space: normal;
  }

  select.status-select {
    font-size: 11px;
    padding: 5px 22px 5px 8px;
    white-space: normal;
  }

  /* ---------- EDITABLE ---------- */

  .editable-text {
    min-width: 0;
    max-width: none;

    background: #f8fafc;
    border-radius: 8px;
    padding: 7px 9px;
    font-size: 12.5px;
  }

  /* LPO sits in the compact meta-chip row (Unit/Qty/MR#/LPO/Del. Date)
     above, which already gives its <td> a background + small padding —
     without this, the plain .editable-text padding/radius right above
     would nest a second, chunkier box inside that chip. Only sizing is
     tightened here (not background/border-color), so focus/hover still
     highlight it exactly like every other editable field. */
  .editable-text[data-field="lpo"] {
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 11px;
  }
}

/* =========================================================
   VERY SMALL ANDROID PHONES
========================================================= */

@media (max-width: 380px) {
  .topbar {
    padding-left: 11px;
    padding-right: 11px;
  }

  .topbar h1 {
    max-width: 145px;

    font-size: 14px;
  }

  .summary {
    gap: 7px;

    padding-left: 11px;
    padding-right: 11px;
  }

  .stat-card {
    padding: 11px 12px;
  }

  .stat-card .n {
    font-size: 19px;
  }

  .stat-card .l {
    font-size: 10.5px;
  }

  .controls {
    padding-left: 11px;
    padding-right: 11px;
  }

  main {
    padding-left: 11px;
    padding-right: 11px;
  }

  .error-banner {
    margin-left: 11px;
    margin-right: 11px;
  }
}

/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {
  .stat-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }

  tbody tr:hover td {
    background: inherit;
  }

  .controls input,
  .controls select,
  select.status-select,
  .editable-text {
    -webkit-tap-highlight-color: transparent;
  }
}

/* =========================================================
   v2 FEATURES — overdue highlight, quick-view tabs, toolbar,
   follow-ups, history, WhatsApp share, approvals, notifications
========================================================= */

:root {
  --red-tint: #fff5f5;
  --amber-tint: #fffbeb;
  --gray-soft: #eef1f4;
  --wa: #128c4a;
}

/* `hidden` must always win over component display rules (e.g. the bulk
   actions row is display:flex, which otherwise keeps it visible). */
[hidden] {
  display: none !important;
}

.summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat-card.overdue {
  --accent: var(--red);
}
.stat-card.overdue .n {
  color: var(--red);
}
.stat-card.follow {
  --accent: var(--amber);
}
.stat-card.follow .n {
  color: var(--amber);
}
.stat-card[data-view] {
  cursor: pointer;
}

/* ---------- quick view tabs ---------- */
.view-tabs-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 24px 0;
  padding: 12px 16px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.view-tabs-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.view-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.view-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.view-tab:hover {
  background: var(--brand-soft);
}
.view-tab .cnt {
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--gray-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.view-tab.on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.view-tab.on .cnt {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.view-tab.warn .cnt {
  background: var(--red-soft);
  color: var(--red);
}
.view-tab.warn.on {
  background: var(--red);
  border-color: var(--red);
}
.view-tab.warn.on .cnt,
.view-tab.follow.on .cnt {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.view-tab.follow .cnt {
  background: var(--amber-soft);
  color: var(--amber);
}
.view-tab.follow.on {
  background: var(--amber);
  border-color: var(--amber);
}

/* ---------- toolbar ---------- */
.mt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 24px 12px;
}
.mt-toolbar-note {
  color: var(--muted);
  font-size: 13px;
}
.mt-toolbar-note b {
  color: var(--text);
}
.mt-toolbar-note b.red {
  color: var(--red);
}
.mt-toolbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.mt-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.mt-btn:hover {
  background: var(--brand-soft);
}
.mt-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.mt-btn-wa {
  background: var(--wa);
  border-color: var(--wa);
  color: #fff;
}
.mt-btn-wa:hover {
  background: #0f7a40;
}
.mt-btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.mt-btn-primary:hover {
  background: var(--brand-dark);
}
.mt-btn-danger {
  color: var(--red);
}
.mt-btn-danger:hover {
  background: var(--red-soft);
}
.mt-btn-reject {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.mt-btn-reject:hover {
  background: #b91c1c;
}
.mt-btn-sm {
  height: 32px;
  font-size: 12px;
}

/* ---------- legend ---------- */
.mt-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 24px 12px;
  color: var(--muted);
  font-size: 12px;
}
.mt-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.mt-legend i {
  width: 22px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid var(--border);
}
.mt-legend .lg-overdue {
  background: var(--red-tint);
  box-shadow: inset 3px 0 0 var(--red);
}
.mt-legend .lg-follow {
  background: var(--amber-tint);
  box-shadow: inset 3px 0 0 var(--amber);
}
.mt-legend .lg-selected {
  background: var(--brand-soft);
}
.mt-legend .lg-hold {
  background: var(--gray-soft);
}

/* ---------- row states ---------- */
tbody tr.is-overdue {
  --row-bg: var(--red-tint);
}
tbody tr.is-overdue td {
  background: var(--red-tint);
}
tbody tr.is-overdue td:first-child {
  box-shadow: inset 4px 0 0 var(--red);
}
tbody tr.is-fu-today {
  --row-bg: var(--amber-tint);
}
tbody tr.is-fu-today td {
  background: var(--amber-tint);
}
tbody tr.is-fu-today td:first-child {
  box-shadow: inset 4px 0 0 var(--amber);
}
tbody tr.is-overdue.is-fu-today td {
  background: var(--red-tint);
}
tbody tr.is-overdue.row-selected td,
tbody tr.is-fu-today.row-selected td {
  background: var(--brand-soft);
}

.days-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: var(--gray-soft);
  color: var(--muted);
}
.days-badge.late {
  background: var(--red);
  color: #fff;
}
.days-badge.paused {
  color: var(--muted-soft);
}
.days-badge svg {
  width: 12px;
  height: 12px;
}
.mt-dash {
  color: var(--muted-soft);
}

.fu-btn,
.hist-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px dashed var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.fu-btn svg,
.hist-btn svg {
  width: 13px;
  height: 13px;
}
.fu-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.fu-btn.set {
  border-style: solid;
  background: var(--brand-soft);
  border-color: var(--brand-soft);
  color: var(--brand-dark);
}
.fu-btn.today {
  border-style: solid;
  background: var(--amber-soft);
  border-color: #f6d98a;
  color: var(--amber);
}
.hist-btn {
  border-style: solid;
  background: var(--card);
  color: var(--brand);
  font-weight: 700;
}
.hist-btn:hover {
  background: var(--brand-soft);
}

.rej-chip {
  display: inline-flex;
  margin-top: 5px;
  padding: 2px 8px;
  border: none;
  border-radius: 999px;
  background: var(--red-soft);
  color: var(--red);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

/* ---------- bell ---------- */
.bell-btn {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--brand);
  cursor: pointer;
}
.bell-btn svg {
  width: 17px;
  height: 17px;
}
.bell-btn b {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 10.5px;
  border: 2px solid #fff;
}

/* ---------- modals ---------- */
.mt-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.42);
}
.mt-overlay.top {
  z-index: 1200;
}
.mt-modal {
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: var(--card);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
}
.mt-modal.sm {
  max-width: 440px;
}
.mt-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.mt-modal-head h3 {
  margin: 0;
  font-size: 16px;
}
.mt-modal-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.mt-x {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: none;
  border-radius: 50%;
  background: var(--gray-soft);
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.mt-modal-body {
  padding: 18px 20px;
}
.mt-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}
.mt-field {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}
.mt-field:last-child {
  margin-bottom: 0;
}
.mt-field > label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.mt-field > label em {
  color: var(--red);
  font-style: normal;
}
.mt-field input[type="date"],
.mt-field input[type="text"],
.mt-field textarea,
.mt-field select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--card);
}
.mt-field textarea {
  height: 70px;
  padding: 10px 12px;
  resize: vertical;
}
.mt-lpo-input {
  font-weight: 600;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}
.mt-field .err {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-soft);
}
.mt-lpo-box {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid #f6d98a;
  border-radius: 10px;
  background: var(--amber-tint);
}
.mt-lpo-box b {
  color: var(--amber);
  font-size: 13px;
}
.mt-lpo-box p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}
.mt-sel-list {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg);
  font-size: 12.5px;
  color: var(--muted);
  max-height: 120px;
  overflow: auto;
}
.mt-sel-list div {
  padding: 2px 0;
}
.mt-sel-list b {
  color: var(--text);
}
.mt-quick-dates,
.mt-reason-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mt-quick-dates button,
.mt-reason-chips button {
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.mt-quick-dates button:hover {
  background: var(--brand-soft);
}
.mt-reason-chips button.on {
  background: var(--red-soft);
  border-color: #f3b4b4;
  color: var(--red);
}
.mt-file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mt-file-name {
  color: var(--muted);
  font-size: 12px;
}
.mt-file-name.ok {
  color: var(--green);
  font-weight: 700;
}

/* WhatsApp preview */
.wa-chat {
  padding: 16px;
  border-radius: 10px;
  background: #e7ddd3;
}
.wa-bubble {
  position: relative;
  padding: 10px 12px 12px;
  border-radius: 8px 0 8px 8px;
  background: #dcf8c6;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
  font-size: 13.5px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

/* daily summary preview */
.mt-email {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.mt-email-meta {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  background: #f8faf7;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}
.mt-email-meta b {
  color: var(--text);
}
.mt-email-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 14px;
}
.mt-email-kpis div {
  padding: 10px 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: center;
}
.mt-email-kpis b {
  display: block;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.mt-email-kpis span {
  color: var(--muted);
  font-size: 11px;
}
.mt-email-kpis .red b {
  color: var(--red);
}
.mt-email-text {
  margin: 0;
  padding: 0 14px 14px;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--text);
}
.mt-hint {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
}

/* approvals */
.mt-approval {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.mt-approval:last-child {
  margin-bottom: 0;
}
.mt-approval.group {
  border-color: #cfe0d5;
  background: #fbfdfb;
}
.mt-approval .who {
  color: var(--muted);
  font-size: 12px;
}
.mt-approval .what {
  font-size: 13.5px;
  line-height: 1.5;
}
.mt-approval .what b {
  color: var(--brand-dark);
}
.mt-approval .what a {
  color: var(--brand);
  font-weight: 700;
}
.mt-approval .lpo-line {
  font-size: 12.5px;
  color: var(--muted);
}
.mt-approval .lpo-line b {
  color: var(--text);
}
.mt-approval .lpo-line.missing {
  color: var(--red);
  font-weight: 700;
}
.mt-approval .note {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--amber-tint);
  color: var(--amber);
  font-size: 12.5px;
}
.mt-approval .row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.resub-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--indigo-soft);
  color: var(--indigo);
  font-size: 11px;
  font-weight: 800;
}
.grp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
}
.grp-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.grp-items {
  margin: 0;
  padding: 8px 12px 8px 28px;
  border-radius: 8px;
  background: var(--bg);
  font-size: 12.5px;
  line-height: 1.6;
}
.grp-items span {
  color: var(--muted);
}
.grp-items .more {
  list-style: none;
  margin-left: -16px;
  color: var(--brand);
  font-weight: 700;
}
.mt-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--muted);
}

/* ---------- side drawers (history, notifications) ---------- */
.mt-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(15, 23, 42, 0.32);
}
.mt-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1051;
  width: 360px;
  max-width: 90vw;
  display: flex;
  flex-direction: column;
  background: var(--card);
  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.18);
  transform: translateX(105%);
  transition: transform 0.3s cubic-bezier(0.22, 0.9, 0.32, 1);
}
.mt-drawer.open {
  transform: translateX(0);
}
.mt-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 20px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
}
.mt-drawer-head h3 {
  margin: 0;
  font-size: 16px;
}
.mt-drawer-head p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--gold);
  font-weight: 700;
}
.mt-drawer-head .mt-x {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.mt-drawer-sum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.mt-drawer-sum div {
  padding: 10px;
  border-radius: 8px;
  background: var(--bg);
}
.mt-drawer-sum b {
  display: block;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.mt-drawer-sum span {
  color: var(--muted);
  font-size: 11px;
}
.mt-drawer-note {
  margin: 0;
  padding: 10px 20px 0;
  color: var(--muted-soft);
  font-size: 11.5px;
}
.mt-timeline {
  list-style: none;
  margin: 0;
  padding: 18px 20px;
  overflow: auto;
}
.mt-timeline li {
  position: relative;
  padding: 0 0 18px 24px;
}
.mt-timeline li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: -2px;
  width: 2px;
  background: var(--border);
}
.mt-timeline li:last-child::before {
  display: none;
}
.mt-timeline li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--brand);
}
.mt-timeline li.current::after {
  background: var(--brand);
}
.mt-timeline li.rejected::after {
  border-color: var(--red);
}
.mt-timeline .when {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.mt-timeline .what {
  font-weight: 700;
  margin: 3px 0;
  word-break: break-word;
}
.mt-timeline .what a {
  color: var(--brand);
}
.mt-timeline .who {
  color: var(--muted);
  font-size: 12px;
}

.notif-list {
  list-style: none;
  margin: 0;
  padding: 14px 16px;
  overflow: auto;
  display: grid;
  gap: 10px;
  align-content: start;
}
.notif {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}
.notif.unread {
  border-color: #f3b4b4;
  background: #fffafa;
}
.notif.ok.unread {
  border-color: #b7dfc3;
  background: #f7fcf8;
}
.notif .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.notif .tag {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.notif .tag.rej {
  background: var(--red-soft);
  color: var(--red);
}
.notif .tag.ok {
  background: var(--green-soft);
  color: var(--green);
}
.notif .when {
  color: var(--muted-soft);
  font-size: 11.5px;
}
.notif .title {
  font-weight: 700;
  font-size: 13.5px;
}
.notif .body {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.notif .body b {
  color: var(--text);
}
.notif .reason {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--red-soft);
  color: #991b1b;
  font-size: 12.5px;
}
.notif .row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 900px) {
  .summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .view-tabs-card,
  .mt-toolbar,
  .mt-legend {
    margin-left: 18px;
    margin-right: 18px;
  }
}

@media (max-width: 640px) {
  .view-tabs-card {
    margin: 12px 14px 0;
    padding: 10px 12px 12px;
  }
  .view-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .mt-toolbar {
    margin: 0 14px 12px;
  }
  .mt-toolbar-actions {
    width: 100%;
  }
  .mt-toolbar-actions .mt-btn {
    flex: 1 1 auto;
  }
  .mt-legend {
    margin: 0 14px 10px;
    gap: 6px 14px;
    font-size: 11.5px;
  }
  .bell-btn {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  /* overdue / follow-up cards on the phone layout */
  tr.is-overdue {
    background: var(--red-tint);
    box-shadow: inset 4px 0 0 var(--red), 0 2px 8px rgba(15, 23, 42, 0.05);
  }
  tr.is-fu-today {
    background: var(--amber-tint);
    box-shadow: inset 4px 0 0 var(--amber), 0 2px 8px rgba(15, 23, 42, 0.05);
  }
  tbody tr.is-overdue td,
  tbody tr.is-fu-today td,
  tbody tr.is-overdue td:first-child,
  tbody tr.is-fu-today td:first-child,
  tbody tr.is-overdue.row-selected td,
  tbody tr.is-fu-today.row-selected td {
    background: transparent;
    box-shadow: none;
  }

  /* status cell: let the pending / rejected chips wrap under the dropdown
     instead of running off the card */
  td:nth-child(12) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    max-width: 100%;
  }
  td:nth-child(12) .rej-chip {
    margin-top: 0;
  }
  tr.row-selected.is-overdue,
  tr.row-selected.is-fu-today {
    background: var(--brand-soft);
  }

  /* Days Pending — next to the meta chips */
  td:nth-child(13) {
    order: 9;
    flex: 0 0 auto;
  }
  /* Follow-up + History — small buttons on their own line at the bottom */
  td:nth-child(14),
  td:nth-child(21) {
    order: 14;
    flex: 0 0 auto;
    margin-top: 4px;
  }
  td:nth-child(14) .mt-dash {
    display: none;
  }

  .mt-email-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mt-drawer {
    transition: none;
  }
}

/* Owner-only "Skip" on the delivery-photo step (mark Delivered without a
   photo). Muted so Camera / Gallery stay the obvious choices. */
.proof-modal-actions {
  flex-wrap: wrap;
}
.proof-modal-btn.proof-modal-nophoto {
  background: var(--gray-soft);
  border: 1px dashed var(--muted-soft);
  color: var(--muted);
}
.proof-modal-box:has(.proof-modal-nophoto) {
  max-width: 400px;
}

/* Supplier (column 10): editable like LPO; on phones it's a meta chip next
   to LPO. */
td.supplier-cell .editable-text {
  min-width: 120px;
}
td.supplier-cell .editable-text:empty::before {
  content: "Add supplier";
  color: var(--muted-soft);
  font-weight: 400;
}
@media (max-width: 640px) {
  td:nth-child(10) {
    flex: 0 0 auto;
    background: #f1f5f9;
    color: var(--muted);
    border-radius: 6px;
    padding: 3px 7px !important;
    font-size: 11px;
    order: 8;
  }
  td.supplier-cell .editable-text {
    min-width: 0;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 11px;
  }
}

/* Desktop: the table is wider than the screen, so keep the Musaffah Status
   dropdown pinned on the right (next to Select) — it stays visible without
   scrolling sideways. */
@media (min-width: 641px) {
  .select-th,
  .select-cell {
    width: 64px;
    min-width: 64px;
    max-width: 64px;
  }
  .status-th,
  td.status-cell {
    position: sticky;
    right: 64px;
  }
  .status-th {
    z-index: 6;
  }
  td.status-cell {
    z-index: 3;
    background: var(--row-bg, var(--card));
    box-shadow: -1px 0 0 var(--border-soft);
  }
  tbody tr.is-overdue td.status-cell,
  tbody tr.is-fu-today td.status-cell {
    box-shadow: -1px 0 0 var(--border-soft);
  }
}

/* Bulk actions float at the bottom while items are selected. */
.bulk-bar.is-floating {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 900;
  width: min(1100px, calc(100% - 32px));
  margin: 0;
  transform: translateX(-50%);
  border-color: var(--brand);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.22);
}
body.has-bulk-selection main {
  padding-bottom: 140px;
}
@media (max-width: 640px) {
  .bulk-bar.is-floating {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    transform: none;
    padding: 10px 12px;
    gap: 8px;
  }
  .bulk-bar.is-floating .bulk-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .bulk-bar.is-floating .bulk-status-group {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
  }
  .bulk-bar.is-floating .bulk-status-select {
    flex: 1;
    min-width: 0;
  }
  .bulk-bar.is-floating .bulk-status-apply-btn {
    width: auto;
    flex: 0 0 auto;
  }
  .bulk-bar.is-floating .bulk-count {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .bulk-bar.is-floating .bulk-apply-btn,
  .bulk-bar.is-floating .bulk-clear-btn {
    width: 100%;
  }
  body.has-bulk-selection main {
    padding-bottom: 240px;
  }
}

/* =========================================================
   v3 — Supplier ETA, New items, Today screen
========================================================= */
.eta-line {
  margin-top: 4px;
}
.eta-btn {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border: 1px dashed var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.eta-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.eta-btn.set {
  border-style: solid;
  border-color: var(--indigo-soft);
  background: var(--indigo-soft);
  color: var(--indigo);
}
.eta-btn.today {
  border-style: solid;
  border-color: #f6d98a;
  background: var(--amber-soft);
  color: var(--amber);
}
.eta-btn.missed {
  border-style: solid;
  border-color: var(--red);
  background: var(--red);
  color: #fff;
}
.eta-btn.done {
  border-style: solid;
  cursor: default;
}

.new-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.view-tab.fresh .cnt {
  background: var(--teal-soft);
  color: var(--teal);
}
.view-tab.fresh.on {
  background: var(--teal);
  border-color: var(--teal);
}
.view-tab.fresh.on .cnt {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

tbody tr.flash td,
tr.flash {
  animation: mt-flash 2.4s ease-out;
}
@keyframes mt-flash {
  0%, 30% { background: #fff3bf; }
  100% { background: inherit; }
}

.mt-btn-today {
  position: relative;
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.mt-btn-today:hover {
  background: var(--brand-dark);
}
.mt-btn-today b {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--gold);
  color: #1b2420;
  font-size: 11px;
}
.bulk-eta-btn {
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--indigo-soft);
  border-radius: 8px;
  background: var(--indigo-soft);
  color: var(--indigo);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* Today drawer */
.mt-drawer:has(.today-body) {
  width: 420px;
}
.today-body {
  overflow: auto;
  padding: 14px 16px 24px;
  display: grid;
  gap: 14px;
  align-content: start;
}
.today-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.today-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.today-action b {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--amber);
  color: #fff;
  font-size: 11px;
}
.today-action.warn b {
  background: var(--red);
}
.today-sec {
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--card);
}
.today-sec.fu { border-left-color: var(--amber); }
.today-sec.eta { border-left-color: var(--red); }
.today-sec.new { border-left-color: var(--teal); }
.today-sec.od { border-left-color: var(--red); }
.today-sec h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.today-cnt {
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--gray-soft);
  color: var(--text);
  font-size: 11px;
}
.today-empty {
  margin: 0;
  color: var(--muted-soft);
  font-size: 12.5px;
}
.today-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.today-item {
  width: 100%;
  display: grid;
  gap: 1px;
  padding: 7px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.today-item:hover {
  background: var(--bg);
}
.ti-main {
  font-size: 13px;
  color: var(--text);
}
.ti-meta {
  font-size: 11.5px;
  color: var(--muted);
}
.today-supplier + .today-supplier {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-soft);
}
.ts-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.ts-head span {
  color: var(--muted);
  font-size: 12px;
}
.ts-head .mt-btn {
  margin-left: auto;
}
.today-more {
  margin-top: 4px;
  border: none;
  background: transparent;
  color: var(--brand);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.today-auto {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
}

@media (max-width: 640px) {
  td:nth-child(10) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
  }
  td:nth-child(10) .eta-line {
    margin-top: 0;
  }
  .bulk-bar.is-floating .bulk-apply-btn {
    grid-column: 1 / -1;
  }
  .bulk-bar.is-floating .bulk-eta-btn {
    width: 100%;
  }
}
.today-body {
  flex: 1;
  min-height: 0;
}
.view-tab.quote .cnt {
  background: var(--amber-soft);
  color: var(--amber);
}
.view-tab.quote.on {
  background: var(--amber);
  border-color: var(--amber);
}
.view-tab.quote.on .cnt {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* WhatsApp reminders bar (owner) */
.mt-remind-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin: 0 24px 12px;
  padding: 10px 14px;
  border: 1px solid #b7dfc3;
  border-left: 4px solid var(--wa);
  border-radius: 10px;
  background: #f3fbf5;
}
.rb-text {
  display: grid;
  gap: 2px;
  font-size: 13px;
}
.rb-text span {
  color: var(--muted);
  font-size: 12px;
}
.rb-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rb-cnt {
  margin-left: 2px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 11px;
}
.today-action.wa {
  border-color: var(--wa);
  color: var(--wa);
}
.today-action.wa b {
  background: var(--wa);
}
@media (max-width: 900px) {
  .mt-remind-bar {
    margin-left: 18px;
    margin-right: 18px;
  }
}
@media (max-width: 640px) {
  .mt-remind-bar {
    margin: 0 14px 12px;
  }
  .rb-actions,
  .rb-actions .mt-btn {
    width: 100%;
  }
}

.grp-items .grp-note { font-size: 12px; color: var(--muted); margin-top: 2px; }
.grp-head .lpo-missing { color: var(--red); font-weight: 600; }

.app-menu-item.app-menu-logout { color: var(--red); }
.app-menu-item.app-menu-logout .app-menu-item-ic { background: var(--red-soft); color: var(--red); }

/* Log Out lives in the ☰ menu now; the top-bar button stays only as the
   handler the menu item triggers. */
#logoutBtn { display: none !important; }

/* ---------- "Show more" row at the end of the list ----------
   Only the first 100 rows are drawn; the rest load as the list scrolls
   (see loadMoreRows() in app.js). */
tbody tr.load-more-row,
tbody tr.load-more-row:hover td {
  background: transparent;
}

tr.load-more-row td {
  padding: 16px 12px;
  text-align: center;
  border-bottom: none;
}

.load-more-btn {
  padding: 9px 20px;

  color: var(--brand);
  font: inherit;
  font-size: 13px;
  font-weight: 600;

  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.load-more-btn:hover {
  background: var(--brand-soft);
}

@media (max-width: 640px) {
  tbody tr.load-more-row {
    display: block;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  tbody tr.load-more-row td {
    display: block;
    padding: 8px 0 16px;
  }

  tbody tr.load-more-row td::before {
    content: none;
  }
}