@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   SGS apps — ONE place for the shared look (header + page basics + components).
   Loaded by Billing, Inventory, Price Tracker, Report Portal (SGS Reports) and Image Guard AFTER each
   app's own stylesheet, so a person moving between apps sees the same family.
   Change a value in :root and every app follows. After editing this file, bump the ?v= on the <link> in
   each app's header (billing/inc/header.php, inventory/inc/header.php, tracker/lib/layout.php,
   portal/inc/layout.php, image-guard/includes/header.php).

   Deliberately NOT standardised: text SIZES inside pages and table cell padding — those follow how many
   columns / how dense a page is, so each app keeps its own.
   ========================================================================== */
:root {
  /* header bar */
  --sgs-hdr-bg: #1E2B25;
  --sgs-hdr-line: #F2B705;          /* gold bottom border colour */
  --sgs-hdr-line-w: 3px;            /* gold bottom border thickness */
  --sgs-hdr-h: 58px;                /* minimum bar height */
  --sgs-logo-size: 17px;
  --sgs-logo-weight: 800;
  --sgs-logo-color: #FFFFFF;
  --sgs-logo-accent: #F2B705;       /* the gold "SGS" */
  --sgs-nav-size: 14px;
  --sgs-nav-weight: 500;
  --sgs-nav-color: #B9C4B8;
  --sgs-nav-hover: #FFFFFF;         /* menu text colour on hover */
  --sgs-nav-pad: 6px 11px;
  --sgs-nav-radius: 7px;
  --sgs-active-bg: #F2B705;         /* current page = solid gold block */
  --sgs-active-color: #1E2B25;
  /* fonts */
  --sgs-font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --sgs-font-body: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sgs-font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  /* page basics */
  --sgs-paper: #FBFAF6;             /* page background */
  --sgs-ink: #1F2A24;               /* body text colour */
  --sgs-ink-soft: #5A6B60;          /* secondary text */
  --sgs-line: #E7E4D8;              /* card / table borders */
  --sgs-line-strong: #D3CFBE;       /* button borders (secondary buttons need to read as buttons) */
  --sgs-gold: #F2B705;
  --sgs-gold-deep: #D9A404;         /* gold used for TEXT / hover borders */
  --sgs-forest: #26372F;            /* dark green (neutral buttons) */
  --sgs-bad: #B3261E;               /* danger red */
  /* components */
  --sgs-radius-btn: 8px;            /* buttons + inputs */
  --sgs-radius-card: 12px;          /* cards + stat boxes + tables */
  --sgs-card-pad: 18px 20px;
  --sgs-card-shadow: 0 2px 8px rgba(38,55,47,.04);
  --sgs-row-hover: #FCFBF6;         /* table row under the mouse */
  --sgs-th-bg: #F7F5EE;             /* table header background */
}

/* ===================================================================== page basics (all widths) */
body { background: var(--sgs-paper); color: var(--sgs-ink); font-family: var(--sgs-font-body); }
/* headings in Billing / Inventory use the family heading font (Tracker, Reports, Image Guard already do) */
.bl-wrap h1, .iv-wrap h1 { font-family: var(--sgs-font-display); font-weight: 800; font-size: 22px; }
.bl-wrap h2, .iv-wrap h2 { font-family: var(--sgs-font-display); font-weight: 700; }
/* page titles + section headings: same size in every app (Reports used 38px and Image Guard 34px for h1) */
.pnav ~ main h1 { font-size: 22px; line-height: 1.25; margin: 0 0 6px; }
/* Suite V2 consistency pass (2026-11-03): same page title and same main-button size in every app.
   Titles: Bricolage Grotesque 800, 22px (Products used Inter 700, Image Guard 34px).
   Main buttons: 14px / weight 700 / radius 8px / about 38px high (Products and Image Guard 15px, hubs 13.5px with radius 9px). Small buttons (.sm, in tables) are left alone. */
.ls-wrap h1, .ig-body main h1, .ig-body h1, .tr-body h1, .rp-body main h1 { font-family: var(--sgs-font-display); font-weight: 800; font-size: 22px; line-height: 1.25; }
.ig-body h1 { margin: 0 0 6px; }
.ls-wrap .ls-hero h1 { font-size: 24px; }
.ls-wrap button.gold, .ls-wrap a.gold, .ls-wrap .ls-btn.gold { font-size: 14px; font-weight: 700; border-radius: 8px; }
.ig-body .btn:not(.ghost):not(.sm):not(.danger):not(.xs), .tr-body .btn:not(.ghost):not(.sm):not(.danger):not(.xs) { font-size: 14px; font-weight: 700; border-radius: 8px; }
.ig-body .btn.sgs-nofab { font-size: 14px; border-radius: 8px; }
#rv .rbtn:not(.sm) { font-size: 14px; border-radius: 8px; min-height: 38px; }
#rv table .rbtn:not(.sm) { min-height: 0; font-size: 13px; }
.pnav ~ main h2, .bl-wrap h2, .iv-wrap h2 { font-size: 16px; }
/* plain content links (no class of their own), like the Tracker / Reports / Image Guard: text colour, underline on hover */
.bl-main a:not([class]), .iv-main a:not([class]) { color: inherit; text-decoration: none; }
.bl-main a:not([class]):hover, .iv-main a:not([class]):hover { text-decoration: underline; }

/* ===================================================================== header bar */
.bl-top, .iv-top, .ls-top, .topbar, .pnav {
  background: var(--sgs-hdr-bg);
  border-bottom: var(--sgs-hdr-line-w) solid var(--sgs-hdr-line);
}
.bl-topin, .iv-topin, .ls-topin, .topbar-in, .pnav-in { min-height: var(--sgs-hdr-h); height: auto; }
.iv-topin, .ls-topin { padding-top: 4px; padding-bottom: 4px; }

.bl-logo, .iv-logo, .ls-logo, .topbar .logo, .pnav .brand {
  font-family: var(--sgs-font-display);
  font-size: var(--sgs-logo-size);
  font-weight: var(--sgs-logo-weight);
  letter-spacing: .2px;
  color: var(--sgs-logo-color);
  white-space: nowrap;
}
.bl-logo span, .iv-logo span, .ls-logo span, .topbar .logo-gold, .pnav .brand-gold { color: var(--sgs-logo-accent); }
.pnav .brand-gold, .pnav .brand-white { font-size: var(--sgs-logo-size); font-weight: var(--sgs-logo-weight); }
.pnav .brand-white { color: var(--sgs-logo-color); }

/* menu links (direct children only, so dropdown menus keep their own look) */
.bl-nav > a, .iv-nav > a, .ls-nav > a, .topbar nav > a:not(.pnav-cta), .pnav nav > a:not(.pnav-cta):not(.pnav-logout) {
  font-family: var(--sgs-font-body);
  font-weight: var(--sgs-nav-weight);
  color: var(--sgs-nav-color);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
}
.bl-nav > a:hover, .iv-nav > a:hover, .ls-nav > a:hover, .topbar nav > a:not(.pnav-cta):hover, .pnav nav > a:not(.pnav-cta):not(.pnav-logout):hover {
  color: var(--sgs-nav-hover);
  background: transparent;
  text-decoration: none;
}
.bl-nav > a.on, .iv-nav > a.on, .ls-nav > a.on, .topbar nav > a.on, .pnav nav > a.on {
  background: var(--sgs-active-bg) !important;
  color: var(--sgs-active-color) !important;
  font-weight: 700;
  box-shadow: none;
}
.bl-acct summary, .iv-acct summary, .ls-acct summary {
  font-family: var(--sgs-font-body);
  font-size: var(--sgs-nav-size);
  font-weight: var(--sgs-nav-weight);
  color: var(--sgs-nav-color);
  padding: 6px 12px;
  border-radius: var(--sgs-nav-radius);
}
.bl-acct summary:hover, .iv-acct summary:hover, .ls-acct summary:hover { color: var(--sgs-nav-hover); background: rgba(255,255,255,.06); }
.bl-acct[open] summary, .iv-acct[open] summary, .ls-acct[open] summary { color: #fff; background: rgba(255,255,255,.10); }
.bl-acct.on summary { color: var(--sgs-active-color); background: var(--sgs-active-bg); font-weight: 700; }
.iv-acct summary small { color: inherit; opacity: .8; }
/* account name in Tracker / Reports / Image Guard: same colour, size and hover as the menu links (Image Guard used pure white) */
.topbar .acct > summary, .pnav .acct > summary {
  font-family: var(--sgs-font-body);
  font-size: var(--sgs-nav-size);
  font-weight: var(--sgs-nav-weight);
  color: var(--sgs-nav-color);
  padding: 6px 12px;
  border-radius: var(--sgs-nav-radius);
}
.topbar .acct > summary:hover, .pnav .acct > summary:hover { color: var(--sgs-nav-hover); background: rgba(255,255,255,.06); }
.topbar .acct[open] > summary, .pnav .acct[open] > summary { color: #fff; background: rgba(255,255,255,.10); }

/* ===================================================================== buttons (shape, hover, variants) */
/* shape that is the same everywhere */
.btn, .iv-wrap button, .iv-btn, .iv-ob {
  font-family: var(--sgs-font-body);
  font-weight: 600;
  line-height: 1.3;
  border-radius: var(--sgs-radius-btn);
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: filter .12s, border-color .12s, color .12s, background .12s;
}
.btn:hover, .iv-wrap button:hover, .iv-btn:hover, .iv-ob:hover { filter: brightness(1.05); opacity: 1; text-decoration: none; }
.btn[disabled], .iv-wrap button[disabled] { opacity: .5; cursor: not-allowed; filter: none; }
/* main action = gold */
.btn.gold, .iv-add, .iv-wrap button.gold, .iv-wrap button:not([class]) { background: var(--sgs-gold); border-color: var(--sgs-gold); color: var(--sgs-hdr-bg); font-weight: 700; box-shadow: 0 1px 0 var(--sgs-gold-deep); }
/* Inventory: a plain form button (Create, Filter, Show, Give access...) is the page's main action, so it is gold like every other app; the pager keeps its own dark controls */
.iv-wrap .iv-pgn-jump button { background: var(--sgs-forest); border-color: var(--sgs-forest); color: #fff; box-shadow: none; font-weight: 600; }
/* neutral solid = dark green */
.btn.forest { background: var(--sgs-forest); border-color: var(--sgs-forest); color: #fff; }
/* secondary = white with a light border, gold on hover */
.btn.ghost, .btn.line, .iv-wrap button.sec, .iv-btn.sec, .iv-ob, .iv-wrap button.iv-ob {
  background: #fff; color: var(--sgs-ink); border-color: var(--sgs-line-strong); box-shadow: none;
}
.btn.ghost:hover, .btn.line:hover, .iv-wrap button.sec:hover, .iv-btn.sec:hover, .iv-ob:hover, .iv-wrap button.iv-ob:hover {
  filter: none; border-color: var(--sgs-gold-deep); color: var(--sgs-gold-deep);
}
/* danger = solid red */
.btn.danger, .btn.bad, .btn.red, .iv-wrap button.danger, .iv-ob.iv-red, .iv-red {
  background: var(--sgs-bad); border-color: var(--sgs-bad); color: #fff; box-shadow: none;
}
.btn.danger:hover, .btn.bad:hover, .btn.red:hover, .iv-wrap button.danger:hover, .iv-ob.iv-red:hover { color: #fff; border-color: var(--sgs-bad); filter: brightness(1.08); }
.pg:hover { text-decoration: none; }

/* ===================================================================== cards, stat boxes, tables */
.bl-card, .iv-card, .card {
  background: #fff;
  border: 1px solid var(--sgs-line);
  border-radius: var(--sgs-radius-card);
  box-shadow: var(--sgs-card-shadow);
}
.kpi, .iv-stat, .mcard { border-color: var(--sgs-line); border-radius: var(--sgs-radius-card); }
table.iv-t, .card > table, .bl-card > table { border-color: var(--sgs-line); }
table.iv-t { border-radius: var(--sgs-radius-card); }

/* table header: small uppercase mono, light beige — same in every app (cell padding / text size stay per app) */
.bl-tbl th, .iv-t th {
  background: var(--sgs-th-bg);
  color: var(--sgs-ink-soft);
  font-family: var(--sgs-font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.bl-tbl td, .iv-t td { border-bottom-color: var(--sgs-line); }
/* row under the mouse (every app) */
table tbody tr:hover > td { background: var(--sgs-row-hover); }

/* ===================================================================== fields */
input[type=text], input[type=number], input[type=search], input[type=email], input[type=password], input[type=url], input[type=date], select, textarea {
  font-family: var(--sgs-font-body);
  border: 1px solid #DAD7C9;
  border-radius: var(--sgs-radius-btn);
  background: #fff;
  color: var(--sgs-ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(242,183,5,.5); border-color: var(--sgs-gold); }

/* ===================================================================== status tags (same shape; each app keeps its own colours) */
.pill, .tag, .badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* ===================================================================== desktop only (each app keeps its own phone layout) */
@media (min-width: 861px) {
  .bl-nav > a, .iv-nav > a, .ls-nav > a, .topbar nav > a:not(.pnav-cta), .pnav nav > a:not(.pnav-cta):not(.pnav-logout) {
    font-size: var(--sgs-nav-size);
    padding: var(--sgs-nav-pad);
    border-radius: var(--sgs-nav-radius);
  }
  .bl-nav, .iv-nav, .ls-nav { flex: 0 1 auto; margin-left: auto; justify-content: flex-end; gap: 4px; align-items: center; }   /* centre the links against the taller quick-stock button so the account name lines up */
  .iv-acct, .ls-acct { margin-left: 0; }

  .btn, .iv-wrap button, .iv-btn, .iv-ob { font-size: 14px; padding: 9px 16px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
  .btn.sm { font-size: 12.5px; padding: 5px 11px; min-height: 30px; border-radius: 7px; }
  .iv-pgn-jump button { padding: 6px 12px; min-height: 0; font-size: 13px; }

  .bl-card, .iv-card, .card { padding: var(--sgs-card-pad); }
}

/* ==========================================================================
   PHONES (built by assets/js/sgs-mobile.js; every rule needs html.sgs-m, so if the script does not run nothing changes)
   Under 861px: slim top bar, dark bottom bar (4 pages + More), More sheet, gold "+" button.
   Under 721px: configured tables become cards.
   ========================================================================== */
.sgs-bar, .sgs-dim, .sgs-sheet, .sgs-user { display: none; }
html.sgs-lock { overflow: hidden; }

@media (max-width: 860px) {
  html.sgs-m .bl-nav, html.sgs-m .bl-who, html.sgs-m .iv-nav, html.sgs-m .iv-acct,
  html.sgs-m .topbar nav, html.sgs-m .pnav nav, html.sgs-m .pnav-burger, html.sgs-m .pnav-toggle-cb { display: none !important; }
  html.sgs-m .bl-topin, html.sgs-m .iv-topin, html.sgs-m .ls-topin, html.sgs-m .topbar-in, html.sgs-m .pnav-in {
    min-height: 52px; flex-wrap: nowrap; align-items: center; padding: 4px 16px; gap: 10px;
  }
  html.sgs-m .sgs-user {
    display: flex; align-items: center; justify-content: center; order: 5; margin-left: auto; flex: 0 0 auto;
    width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff;
    font: 600 15px/1 var(--sgs-font-body); box-shadow: none; min-height: 0;
  }
  html.sgs-m body { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }

  html.sgs-m .sgs-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    background: #1E2B25; border-top: 1px solid rgba(255,255,255,.14);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  html.sgs-m .sgs-bar a, html.sgs-m .sgs-bar button {
    flex: 1 1 0; min-width: 0; min-height: 50px; position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 4px 2px; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; filter: none;
    color: #B9C4B8; font: 500 11px/1.2 var(--sgs-font-body); text-decoration: none; cursor: pointer;
  }
  html.sgs-m .sgs-bar i { font-size: 22px; line-height: 1; font-style: normal; }
  html.sgs-m .sgs-bar span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.sgs-m .sgs-bar .on { color: #F2B705; }
  html.sgs-m .sgs-bar em, html.sgs-m .sgs-list em {
    background: #A32D2D; color: #fff; font: 600 10px/1 var(--sgs-font-body); font-style: normal; border-radius: 99px; padding: 3px 6px;
  }
  html.sgs-m .sgs-bar em { position: absolute; top: 2px; left: calc(50% + 8px); }

  html.sgs-m .sgs-dim { display: block; position: fixed; inset: 0; z-index: 950; background: rgba(0,0,0,.55); }
  html.sgs-m .sgs-dim[hidden], html.sgs-m .sgs-sheet[hidden] { display: none; }
  html.sgs-m .sgs-sheet {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 960; max-height: 82vh; overflow-y: auto;
    background: #1E2B25; color: #E6ECE4; border-radius: 18px 18px 0 0;
    padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0,0,0,.35);
  }
  html.sgs-m .sgs-grab { width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.3); margin: 4px auto 10px; }
  html.sgs-m .sgs-who { display: flex; align-items: baseline; gap: 8px; padding: 2px 2px 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.12); }
  html.sgs-m .sgs-who b { font-weight: 600; font-size: 16px; color: #fff; }
  html.sgs-m .sgs-who span { font-size: 12px; color: #B9C4B8; }
  html.sgs-m .sgs-list a {
    display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 4px; color: #E6ECE4; text-decoration: none;
    font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.07);
  }
  html.sgs-m .sgs-list i { font-size: 20px; color: #B9C4B8; width: 22px; text-align: center; font-style: normal; }
  html.sgs-m .sgs-list a.on, html.sgs-m .sgs-list a.on i { color: #F2B705; }
  html.sgs-m .sgs-list em { margin-left: auto; }
  html.sgs-m .sgs-sec { font-size: 12px; color: #8FA091; margin: 16px 2px 8px; }
  html.sgs-m .sgs-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  html.sgs-m .sgs-apps a {
    display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 8px; text-align: center;
    border: 1px solid rgba(255,255,255,.22); border-radius: 10px; color: #E6ECE4; text-decoration: none; font-size: 14px;
  }
  html.sgs-m .sgs-apps a:last-child:nth-child(odd) { grid-column: 1 / -1; }
  html.sgs-m .sgs-apps a.me { background: #F2B705; border-color: #F2B705; color: #1E2B25; font-weight: 600; }
  html.sgs-m .sgs-out { margin-top: 10px; }
  html.sgs-m .sgs-out a { color: #F09595; border-bottom: 0; }
  html.sgs-m .sgs-out i { color: #F09595; }

  /* gold "+" for the main action of the page (the page's own button, restyled) */
  html.sgs-m .sgs-fab {
    position: fixed !important; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 880; margin: 0 !important;
    width: 54px; height: 54px; min-height: 0 !important; padding: 0 !important; border-radius: 50%;
    display: flex !important; align-items: center; justify-content: center;
    font-size: 0 !important; line-height: 0 !important; background: #F2B705 !important; border: 0 !important; color: #1E2B25 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.30) !important;
  }
  html.sgs-m .sgs-fab::before { content: '+'; font: 500 32px/1 var(--sgs-font-body); color: #1E2B25; }
  html.sgs-m .sgs-fab { transition: transform .18s ease, opacity .18s ease; }
  html.sgs-m .sgs-fab.sgs-fab-away { transform: translateY(90px); opacity: 0; pointer-events: none; }
}

/* ---- tables as cards (phones) ---- */
@media (max-width: 720px) {
  html.sgs-m .sgs-flat { background: transparent; border: 0; box-shadow: none; padding: 0; }
  html.sgs-m .sgs-flat .scroll, html.sgs-m .sgs-flat .iv-tw, html.sgs-m .sgs-flat .tbl-scroll, html.sgs-m .sgs-flat .table-scroll { margin: 0 !important; padding: 0 !important; overflow: visible !important; }
  html.sgs-m table.sgs-ct { display: block; width: 100%; min-width: 0 !important; border: 0; background: transparent; box-shadow: none; border-radius: 0; }
  html.sgs-m .sgs-ct thead, html.sgs-m .sgs-ct tr.sgs-hr { display: none; }
  html.sgs-m .sgs-ct tbody { display: block; }
  html.sgs-m table.sgs-ct tr {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; position: relative;
    background: #fff; border: 1px solid var(--sgs-line); border-radius: var(--sgs-radius-card);
    padding: 12px; margin: 0 0 10px; box-shadow: var(--sgs-card-shadow);
  }
  html.sgs-m table.sgs-ct tr.sgs-skip { display: block; }
  html.sgs-m table.sgs-ct td {
    display: block; box-sizing: border-box; min-width: 0; max-width: 100%; margin: 0;
    border: 0; padding: 0; background: transparent; text-align: left; font-size: 13.5px; line-height: 1.4;
    white-space: normal !important; overflow-wrap: anywhere; word-break: normal;
  }
  html.sgs-m table.sgs-ct tbody tr:hover > td { background: transparent; }
  html.sgs-m table.sgs-ct td.r-hide, html.sgs-m table.sgs-ct td.r-empty { display: none !important; }
  html.sgs-m table.sgs-ct td.r-title > a:first-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  html.sgs-m table.sgs-ct td.r-title > br { display: none; }
  html.sgs-m .sgs-ct .sgs-xtra { display: none; margin-top: 4px; font-size: 12.5px; color: var(--sgs-ink-soft); }
  html.sgs-m .sgs-ct tr.open .sgs-xtra { display: block; }
  html.sgs-m .sgs-ct .sgs-xtra > * { display: block; margin-top: 2px; }
  html.sgs-m .sgs-ct .sgs-xtra br { display: none; }
  html.sgs-m table.sgs-ct td.r-chk { position: absolute; top: 12px; right: 12px; width: auto; }
  html.sgs-m table.sgs-ct td.r-chk input { width: 20px; height: 20px; }
  html.sgs-m table.sgs-ct td.r-img { order: 1; flex: 0 0 52px; width: 52px; }
  html.sgs-m table.sgs-ct td.r-img img, html.sgs-m table.sgs-ct td.r-img .thumb { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--sgs-line); display: block; }
  html.sgs-m table.sgs-ct td.r-title { order: 2; flex: 1 1 calc(100% - 66px); min-width: 0; font-size: 14.5px; font-weight: 500; line-height: 1.35; }
  html.sgs-m table.sgs-ct tr:not(.has-img) td.r-title { flex-basis: 100%; }
  html.sgs-m table.sgs-ct tr.has-chk td.r-title { padding-right: 30px; }
  /* filter rows: the small action fields (Filter, Reset, a checkbox) stay side by side on one line instead of one per line */
  html.sgs-m .row > .field[style*="flex:0 0 auto"] { flex: 0 0 auto !important; width: auto; margin: 0 !important; align-self: center; }
  html.sgs-m .row > .field[style*="flex:0 0 auto"] > label:first-child { display: none; }
  html.sgs-m .row > .field[style*="flex:0 0 auto"] label { padding-top: 0 !important; padding-bottom: 0 !important; }
  html.sgs-m table.sgs-ct td.r-tagr { position: absolute; top: 12px; right: 12px; margin: 0; }
  html.sgs-m table.sgs-ct tr.has-tagr td.r-title { padding-right: 118px; }
  html.sgs-m .sgs-ct .sgs-in { font-weight: 400; color: var(--sgs-ink-soft); }
  html.sgs-m .sgs-ct .sgs-sub { margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--sgs-ink-soft); }
  html.sgs-m table.sgs-ct td.r-tag, html.sgs-m table.sgs-ct td.r-tagl { order: 3; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap !important; }
  html.sgs-m .sgs-ct td.r-tagl .sgs-l { color: var(--sgs-ink-soft); font-size: 12px; max-width: none; white-space: nowrap; }
  html.sgs-m .sgs-ct td.r-tagl .sgs-v { flex: 0 0 auto; text-align: left; }
  html.sgs-m table.sgs-ct td.r-kv { order: 4; flex: 1 1 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding-top: 6px; border-top: 1px solid var(--sgs-line); }
  html.sgs-m table.sgs-ct td.r-more { order: 6; flex: 1 1 100%; display: none; justify-content: space-between; align-items: baseline; gap: 14px; padding-top: 7px; border-top: 1px solid var(--sgs-line); }
  html.sgs-m table.sgs-ct tr.open td.r-more { display: flex; }
  html.sgs-m .sgs-ct .sgs-l { flex: 0 0 auto; max-width: 45%; color: var(--sgs-ink-soft); font-size: 12.5px; }
  html.sgs-m .sgs-ct .sgs-v { flex: 1 1 auto; min-width: 0; text-align: right; font-weight: 500; }
  html.sgs-m table.sgs-ct td.r-act { order: 5; flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; }
  html.sgs-m .sgs-ct td.r-act form { display: inline-flex; margin: 0; }
  html.sgs-m .sgs-ct td.r-act .btn, html.sgs-m .sgs-ct td.r-act button, html.sgs-m .sgs-ct td.r-act a.btn { min-height: 36px; }
  html.sgs-m table.sgs-ct td.r-tg { order: 7; flex: 1 1 100%; }
  html.sgs-m .sgs-ct td.r-tg button {
    background: none; border: 0; box-shadow: none; padding: 6px 0; min-height: 32px; cursor: pointer;
    color: var(--sgs-ink-soft); font: 500 13px/1 var(--sgs-font-body);
  }
}

/* ---- page titles and the Price Tracker product header on phones ---- */
@media (max-width: 860px) {
  html.sgs-m main h1, html.sgs-m .bl-wrap h1 { font-size: 19px; line-height: 1.25; }
  html.sgs-m .prod-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px 12px; align-items: start; }
  html.sgs-m .prod-card-main { display: contents; }
  html.sgs-m .prod-card-main > h1 { grid-column: 2; grid-row: 1; margin: 0; }
  html.sgs-m .prod-card-main > .sub { grid-column: 2; grid-row: 2; margin: 0; }
  html.sgs-m .prod-card-img { grid-column: 1; grid-row: 1 / span 2; width: 72px; }
  html.sgs-m .prod-card-img img { width: 72px; height: 72px; object-fit: contain; border-radius: 8px; border: 1px solid var(--sgs-line); background: #fff; display: block; }
  html.sgs-m .prod-card-main > .prod-actions { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
  html.sgs-m .prod-actions form { display: inline-flex; margin: 0; }
  html.sgs-m .prod-card-main > h1 { font-size: 17px; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
  html.sgs-m .prod-actions > form, html.sgs-m .prod-actions > .btn { flex: 1 1 calc(50% - 8px); margin: 0; }
  html.sgs-m .prod-actions > form:last-child { flex-basis: 100%; }
  html.sgs-m .prod-actions .btn { width: 100%; }
}


/* ==========================================================================
   Create Bill: each product line as a card (phones only; the rows are built by billing.js, so this is pure CSS on cell position)
   Row 1 image + name + delete | row 2 Qty, Rate, Total | internal box: RMB, FX, INR rate / Profit, Margin | stock status dropdown
   ========================================================================== */
@media (max-width: 720px) {
  html.sgs-m #itemsTbl { display: block; width: 100%; min-width: 0 !important; border: 0; background: transparent; }
  html.sgs-m #itemsTbl thead { display: none; }
  html.sgs-m #itemsTbl tbody { display: block; }
  html.sgs-m #itemsTbl tr[data-i] {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 0; row-gap: 0; align-items: stretch; position: relative;
    background: #fff; border: 1px solid var(--sgs-line); border-radius: var(--sgs-radius-card); box-shadow: var(--sgs-card-shadow);
    padding: 12px; margin: 0 0 10px;
  }
  html.sgs-m #itemsTbl tr[data-i] td {
    display: block; box-sizing: border-box; min-width: 0; margin: 0; padding: 0 4px; border: 0 !important;
    background: transparent !important; text-align: left; font-size: 14px; line-height: 1.35; white-space: normal;
  }
  html.sgs-m #itemsTbl tr[data-i] td::before { display: block; margin: 0 0 3px; font-size: 11px; font-weight: 400; color: var(--sgs-ink-soft); text-align: left; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(1) { display: none; }
  /* header line */
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(2) { grid-row: 1; grid-column: 1; padding-left: 0; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(2) img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; border: 1px solid var(--sgs-line); background: #fff; display: block; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(3) { grid-row: 1; grid-column: 2 / span 5; padding: 0 44px 0 8px; font-size: 14px; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(13) { position: absolute; top: 12px; right: 12px; padding: 0; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(13) .btn { width: 36px; height: 36px; min-height: 0; padding: 0; font-size: 18px; line-height: 1; }
  /* row 2: what the buyer sees */
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(4),
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(5),
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(6) { grid-row: 2; padding-top: 10px; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(4) { grid-column: 1 / span 2; padding-left: 0; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(5) { grid-column: 3 / span 2; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(6) { grid-column: 5 / span 2; padding-right: 0; text-align: right; font-weight: 500; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(4)::before { content: 'Qty'; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(5)::before { content: 'Rate \20B9'; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(6)::before { content: 'Total \20B9'; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(6), html.sgs-m #itemsTbl tr[data-i] td:nth-child(7), html.sgs-m #itemsTbl tr[data-i] td:nth-child(9) { line-height: 40px; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(6)::before, html.sgs-m #itemsTbl tr[data-i] td:nth-child(7)::before, html.sgs-m #itemsTbl tr[data-i] td:nth-child(9)::before { line-height: 1.35; }
  html.sgs-m #itemsTbl tr[data-i] input.qty,
  html.sgs-m #itemsTbl tr[data-i] input.rate,
  html.sgs-m #itemsTbl tr[data-i] input.fx { width: 100% !important; min-width: 0; box-sizing: border-box; min-height: 40px; text-align: right; font-size: 16px; }
  /* internal box (lilac, same as desktop) */
  html.sgs-m #itemsTbl tr[data-i]::before {
    content: 'Internal \B7  not on the buyer PDF'; grid-row: 3; grid-column: 1 / -1; margin-top: 12px; padding: 8px 10px 0;
    background: #f5f2ff; border-radius: 8px 8px 0 0; font-size: 11px; color: var(--sgs-ink-soft);
  }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(7),
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(8),
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(9) { grid-row: 4; padding-top: 6px; padding-bottom: 6px; background: #f5f2ff !important; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(7) { grid-column: 1 / span 2; padding-left: 10px; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(8) { grid-column: 3 / span 2; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(9) { grid-column: 5 / span 2; padding-right: 10px; text-align: right; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(10),
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(11) { grid-row: 5; padding-top: 4px; padding-bottom: 10px; background: #f5f2ff !important; border-radius: 0 0 8px 8px; font-weight: 500; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(10) { grid-column: 1 / span 3; padding-left: 10px; border-bottom-right-radius: 0; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(11) { grid-column: 4 / span 3; padding-right: 10px; text-align: right; border-bottom-left-radius: 0; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(7)::before { content: 'RMB'; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(8)::before { content: 'FX \D7'; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(9)::before { content: 'INR rate'; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(10)::before { content: 'Profit \20B9'; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(11)::before { content: 'Margin'; text-align: right; }
  /* stock status dropdown */
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(12) { grid-row: 6; grid-column: 1 / -1; padding: 10px 0 0; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(12)::before { content: 'Stock status'; }
  html.sgs-m #itemsTbl tr[data-i] td:nth-child(12) select { width: 100%; min-height: 40px; }
  html.sgs-m #itemsTbl tr[data-i] .stk { display: none; }   /* on the phone card the quantity is inside the dropdown ("In stock - 50") */
}

/* Image Guard cards: show the full product name (the page clips it to one line on desktop) */
@media (max-width: 720px) {
  html.sgs-m table.sgs-ct .cell-clip { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; overflow-wrap: anywhere; }
}

/* ==========================================================================
   Image Guard: Alerts + Infringe cards and filters on phones (markup hooks are the ig-* classes in alerts.php / scanner.php)
   ========================================================================== */
.ig-short { display: none; }
@media (max-width: 720px) {
  /* filters: search on its own line, the two dropdowns side by side at the same width, then Search / Reset, then the count */
  html.sgs-m .ig-filter { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px 8px !important; align-items: end; padding: 12px !important; }
  html.sgs-m .ig-filter .ig-q { grid-column: 1 / -1; order: 1; min-width: 0 !important; width: 100%; box-sizing: border-box; font-size: 16px !important; padding: 10px 11px !important; }
  html.sgs-m .ig-filter .ig-lb { display: block; margin: 6px 0 0 !important; font-size: 11px; font-weight: 400 !important; }
  html.sgs-m .ig-filter .ig-lb1 { order: 2; }
  html.sgs-m .ig-filter .ig-lb2 { order: 3; }
  html.sgs-m .ig-filter select[name="marketplace"] { order: 4; }
  html.sgs-m .ig-filter select[name="match_type"] { order: 5; }
  html.sgs-m .ig-filter select { width: 100% !important; min-width: 0; box-sizing: border-box; font-size: 15px !important; padding: 10px 8px !important; }
  html.sgs-m .ig-filter .ig-go { order: 6; min-height: 40px; }
  html.sgs-m .ig-filter a.btn { order: 7; min-height: 40px; display: flex; align-items: center; justify-content: center; }
  html.sgs-m .ig-filter .ig-found { order: 8; grid-column: 1 / -1; margin: 2px 0 0 !important; text-align: right; }

  /* the card: two images across the full width, then badges, name, buttons */
  html.sgs-m .ig-ac { padding: 12px !important; }
  html.sgs-m .ig-ac .ig-row { display: block !important; }
  html.sgs-m .ig-ac .ig-prev { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; min-width: 0 !important; align-items: start; }
  html.sgs-m .ig-ac .ig-arrow { display: none; }
  html.sgs-m .ig-ac .ig-im { position: relative; min-width: 0; }
  html.sgs-m .ig-ac .ig-im img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 0.85; object-fit: contain; display: block; box-sizing: border-box; }
  html.sgs-m .ig-ac .ig-im .mono { position: absolute; left: 6px; bottom: 6px; display: inline-block !important; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.92); font-size: 10px !important; }
  html.sgs-m .ig-ac .ig-det { grid-column: 1 / -1; margin: 4px 0 0 !important; }
  html.sgs-m .ig-ac .ig-bd { gap: 6px !important; margin: 4px 0 6px !important; }
  html.sgs-m .ig-ac .ig-bd > span:last-child { margin-left: auto; }
  html.sgs-m .ig-ac .cell-clip { display: block; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; max-width: none !important; overflow-wrap: anywhere; }
  html.sgs-m .ig-ac .ig-ttl { font-size: 14.5px !important; line-height: 1.35; margin: 0 0 4px !important; }
  html.sgs-m .ig-ac .ig-sub { line-height: 1.4; margin-bottom: 4px; }
  html.sgs-m .ig-ac .ig-sub .cell-clip { display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden !important; margin: 1px 0; }
  html.sgs-m .ig-ac .ig-view { display: flex !important; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; min-height: 40px; margin: 8px 0 0 !important; }
  /* all the buttons in one row at the bottom */
  html.sgs-m .ig-ac .ig-btns { display: flex !important; flex-wrap: nowrap; gap: 6px !important; margin-top: 10px; width: 100%; white-space: normal !important; }
  html.sgs-m .ig-ac .ig-btns > .btn { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 4px !important; display: flex; align-items: center; justify-content: center; font-size: 13px; text-align: center; }
  html.sgs-m .ig-ac .ig-btns > .btn.bad { flex: 1.7 1 0; }
  html.sgs-m .ig-ac .ig-btns > .pill { flex: 1 1 100%; text-align: center; padding: 8px; }
  html.sgs-m .ig-ac .ig-full { display: none; }
  html.sgs-m .ig-ac .ig-short { display: inline; }
}

/* Image Guard admin > Manage: the credits form matches the plan form above it (full-width fields, gold full-width Add) */
@media (max-width: 720px) {
  html.sgs-m .ig-cr { display: block !important; }
  html.sgs-m .ig-cr > div { max-width: none !important; width: 100%; flex: none !important; margin: 0 0 12px; }
  html.sgs-m .ig-cr input[type="text"] { width: 100%; box-sizing: border-box; }
  html.sgs-m .ig-cr .btn { width: 100%; min-height: 44px; background: var(--sgs-gold, #F2B705) !important; border-color: var(--sgs-gold, #F2B705) !important; color: #1E2B25 !important; }
}
@media (max-width: 720px) {
  html.sgs-m .card form p.small { font-size: 12.5px; line-height: 1.45; }
}

/* ==========================================================================
   Image Guard pop-ups (add product, edit images, report, Proof, takedown notice) on phones:
   a bottom sheet that sits ABOVE the bottom bar and the gold +, with the header and the buttons always in view
   ========================================================================== */
@media (max-width: 720px) {
  html.sgs-m .modal-overlay { z-index: 1000; padding: 0 !important; align-items: flex-end !important; }
  html.sgs-m .modal-box { max-width: none !important; width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0; border-left: 0; border-right: 0; border-bottom: 0; }
  html.sgs-m .modal-head { position: sticky; top: 0; z-index: 2; padding: 14px 16px; gap: 10px; align-items: flex-start; }
  html.sgs-m .modal-head > div { min-width: 0; flex: 1 1 auto; }
  html.sgs-m .modal-head h3 { font-size: 17px; line-height: 1.3; }
  html.sgs-m .modal-head .sub { display: block; margin-top: 2px; overflow-wrap: anywhere; line-height: 1.4; }
  html.sgs-m .modal-head > button { flex: 0 0 auto; min-width: 40px; min-height: 40px; }
  html.sgs-m .modal-body { padding: 14px 16px; }
  html.sgs-m .modal-foot { position: sticky; bottom: 0; z-index: 2; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); gap: 8px; flex-wrap: nowrap; }
  html.sgs-m .modal-foot .btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 4px 6px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; line-height: 1.2; white-space: normal; }
  html.sgs-m .modal-foot .btn.bad, html.sgs-m .modal-foot .btn.gold { flex: 1.5 1 0; }

  /* Proof / comparison */
  html.sgs-m #modal-compare .modal-body > div:first-child { grid-template-columns: 1fr !important; gap: 12px !important; }
  html.sgs-m #modal-compare .modal-body > div:first-child > div { padding: 12px !important; min-width: 0; }
  html.sgs-m #modal-compare .modal-body > div:first-child > div > div:first-child { flex-wrap: wrap; gap: 6px; align-items: center; }
  html.sgs-m #modal-compare .modal-body > div:first-child > div > div:nth-child(2) { height: 190px !important; }
  html.sgs-m #modal-compare .modal-body > div:first-child > div > div:last-child { flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; }
  html.sgs-m #modal-compare .card > div:nth-of-type(1) { flex-wrap: wrap !important; }
  html.sgs-m #modal-compare #compare-page-url { flex: 1 1 100%; min-width: 0; }
  html.sgs-m #modal-compare #compare-visit-link { flex: 1 1 100%; display: flex; align-items: center; justify-content: center; min-height: 40px; }
  html.sgs-m #modal-compare .card > div:last-child { flex-direction: column; align-items: stretch !important; }
  html.sgs-m #modal-compare .card > div:last-child > div { display: flex; gap: 6px; width: 100%; }
  html.sgs-m #modal-compare .card > div:last-child > div .btn { flex: 1 1 0; min-width: 0; min-height: 40px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; }

  /* takedown notice */
  html.sgs-m #modal-takedown .modal-body > div[style*="gap:6px"] { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px !important; }
  html.sgs-m #modal-takedown .modal-body > div[style*="gap:6px"] .btn { min-height: 44px; padding: 4px 6px; }
  html.sgs-m #modal-takedown .modal-body > div[style*="var(--leaf)"] { display: block !important; padding: 12px !important; }
  html.sgs-m #modal-takedown #takedown-portal-link { overflow-wrap: anywhere; word-break: break-all; }
  html.sgs-m #modal-takedown .modal-body > div[style*="var(--leaf)"] > .btn { display: flex; width: 100%; min-height: 44px; margin-top: 10px; align-items: center; justify-content: center; }
  html.sgs-m #modal-takedown .modal-body > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* Image Guard: status pills two per row, header buttons side by side, Report a Theft pop-up fields */
@media (max-width: 720px) {
  html.sgs-m .ig-tabs { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  html.sgs-m .ig-tabs > a.btn { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; height: auto; padding: 6px 8px; line-height: 1.25; white-space: normal; }
  html.sgs-m .ig-tabs > a.btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  html.sgs-m #modal-theft-report .modal-body > div[style*="display:flex;gap:8px"] { flex-wrap: wrap !important; }
  html.sgs-m #modal-theft-report #theft-report-url { flex: 1 1 100% !important; min-width: 0; }
  html.sgs-m #modal-theft-report #btn-theft-fetch { flex: 1 1 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  html.sgs-m #modal-theft-report .modal-body div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  html.sgs-m #modal-theft-report .modal-body .btn { min-height: 44px; height: auto; white-space: normal; line-height: 1.25; padding: 8px 10px; }
}
@media (max-width: 720px) {
  html.sgs-m .modal-box > .modal-body:last-child { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   Confirmation pop-ups (SweetAlert) in the SGS button colours, all apps:
   confirm = gold (main action), danger confirms = red, a lone OK = dark green, Cancel = white with a border
   ========================================================================== */
html body .swal2-popup .swal2-styled { border-radius: var(--sgs-radius-btn, 8px) !important; font-weight: 600 !important; box-shadow: none !important; min-height: 40px; padding: 8px 20px !important; }
html body .swal2-popup .swal2-styled:focus { box-shadow: 0 0 0 3px rgba(242,183,5,.35) !important; }
html body .swal2-popup .swal2-confirm { background: #1E2B25 !important; color: #fff !important; }
html body .swal2-popup .swal2-actions:has(.swal2-cancel:not([style*="display: none"])) .swal2-confirm { background: #F2B705 !important; color: #1E2B25 !important; }
html body .swal2-popup .swal2-actions .swal2-confirm[style*="rgb(178, 58, 29)"],
html body .swal2-popup .swal2-actions:has(.swal2-cancel:not([style*="display: none"])) .swal2-confirm[style*="rgb(178, 58, 29)"],
html body .swal2-popup .swal2-actions .swal2-confirm[style*="rgb(185, 74, 58)"],
html body .swal2-popup .swal2-actions:has(.swal2-cancel:not([style*="display: none"])) .swal2-confirm[style*="rgb(185, 74, 58)"],
html body .swal2-popup .swal2-actions .swal2-confirm[style*="#B23A1D" i],
html body .swal2-popup .swal2-actions:has(.swal2-cancel:not([style*="display: none"])) .swal2-confirm[style*="#B23A1D" i],
html body .swal2-popup .swal2-actions .swal2-confirm[style*="#B94A3A" i],
html body .swal2-popup .swal2-actions:has(.swal2-cancel:not([style*="display: none"])) .swal2-confirm[style*="#B94A3A" i] { background: #A32D2D !important; color: #fff !important; }
html body .swal2-popup .swal2-confirm[style*="rgb(107, 114, 128)"], html body .swal2-popup .swal2-confirm[style*="#6b7280" i] { background: #1E2B25 !important; color: #fff !important; }
html body .swal2-popup .swal2-cancel { background: #fff !important; color: #1E2B25 !important; border: 1px solid #D3CFBE !important; }
@media (max-width: 720px) {
  html.sgs-m body .swal2-popup .swal2-actions { flex-wrap: nowrap; width: calc(100% - 32px); gap: 8px; margin: 18px 16px 0; }
  html.sgs-m body .swal2-popup .swal2-actions .swal2-styled { flex: 1 1 0; min-width: 0; margin: 0 !important; min-height: 44px; padding: 8px 10px !important; }
}

/* Image Guard pagination on phones = the Billing one: page jump row, full-width page buttons, full-width results-per-page */
@media (max-width: 860px) {
  html.sgs-m .pgn { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  html.sgs-m .pgn .pgn-jump { justify-content: space-between; width: 100%; flex-wrap: wrap; }
  html.sgs-m .pgn .pgn-nums { justify-content: space-between; width: 100%; flex-wrap: nowrap; }
  html.sgs-m .pgn .pgn-nums > a { flex: 1 1 0; min-width: 0 !important; text-align: center; display: flex; align-items: center; justify-content: center; min-height: 40px; }
  html.sgs-m .pgn .pgn-nums > span { flex: 0 0 auto; }
  html.sgs-m .pgn .pgn-per, html.sgs-m .pgn .pgn-per select { width: 100% !important; }
}

/* Order / quote product cards: the product photo sits at the top right, opposite the name */
@media (max-width: 720px) {
  html.sgs-m table.sgs-ct tr.has-imgr td.r-title { order: 1; flex: 1 1 0; min-width: 0; }
  html.sgs-m table.sgs-ct td.r-imgr { order: 2; flex: 0 0 60px; width: 60px; }
  html.sgs-m table.sgs-ct td.r-imgr img, html.sgs-m table.sgs-ct td.r-imgr .thumb { width: 60px; height: 60px; object-fit: contain; display: block; border-radius: 8px; background: #fff; border: 1px solid var(--sgs-line-strong, #D3CFBE); }
}

/* ==========================================================================
   Billing > Create Bill
   ========================================================================== */
.bl-newprod { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--sgs-line-strong, #D3CFBE); font-size: 12.5px; }
@media (max-width: 720px) {
  /* the two cards you work in stand out: stronger border and a gold top bar */
  html.sgs-m .bl-card.bl-key { border: 1.5px solid #C9C3A8; border-top: 4px solid #F2B705; }
  /* + New buyer and Bill date share one row */
  html.sgs-m .row > .field.bl-half { flex: 1 1 calc(50% - 6px) !important; min-width: 0; align-self: flex-end !important; }
  html.sgs-m #btnNewCust { width: 100%; min-height: 44px; }
  html.sgs-m .bl-card.bl-key .scroll { margin: 0 !important; padding: 0 !important; overflow: visible !important; }
  html.sgs-m .row > .field.bl-half:has(#btnNewCust) > label { display: none; }
  html.sgs-m .row:has(> .bl-half) { align-items: flex-end; }
  html.sgs-m #billDate { min-height: 44px; }
  /* Bill / Quote as two big buttons */
  html.sgs-m .stampsel.bl-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
  html.sgs-m .stampsel.bl-seg > span { grid-column: 1 / -1; }
  html.sgs-m .stampsel.bl-seg > label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; border: 1px solid var(--sgs-line-strong, #D3CFBE); border-radius: 8px; background: #fff; font-weight: 600; font-size: 15px; text-transform: none; letter-spacing: 0; }
  html.sgs-m .stampsel.bl-seg > label > input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
  html.sgs-m .stampsel.bl-seg > label:has(input:checked) { background: #F2B705; border-color: #F2B705; color: #412402; }
  /* save buttons: gold Buyer PDF full width, Internal PDF + Save only side by side, WhatsApp full width */
  html.sgs-m .bl-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-left: 0 !important; }
  html.sgs-m .bl-actions .btn { min-height: 46px; display: flex; align-items: center; justify-content: center; text-align: center; }
  html.sgs-m .bl-actions #btnSavePdf { grid-column: 1 / -1; order: 1; }
  html.sgs-m .bl-actions #btnSaveInternal { order: 2; }
  html.sgs-m .bl-actions #btnSave { order: 3; }
  html.sgs-m .bl-actions #btnSaveWa { grid-column: 1 / -1; order: 4; }
}

/* Billing phone cards: quote/bill status pills stack at the top right; product cards use the full card width; no "All buyers" button on a buyer profile */
@media (max-width: 720px) {
  html.sgs-m table.sgs-ct td.r-tagr { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  html.sgs-m .scroll:has(> table.sgs-ct) { margin: 0 !important; padding: 0 !important; overflow: visible !important; }
  html.sgs-m .bl-allbuyers { display: none !important; }
}

@media (max-width: 720px) {
  html.sgs-m table.sgs-ct tr.has-tagr2 td.r-title { min-height: 56px; }
}

/* Billing cards: phone-only action links, and full-width action buttons (Buyer PDF, Edit Order / Convert Bill, WhatsApp) */
.only-m { display: none; }
@media (max-width: 720px) {
  html.sgs-m .only-m { display: flex; }
  html.sgs-m tr.sgs-fullacts td.r-act { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 6px; }
  html.sgs-m tr.sgs-fullacts td.r-act > a { flex: 1 1 0; min-width: 0; box-sizing: border-box; min-height: 44px; padding: 4px 4px; display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0; font-size: 13px; line-height: 1.2; text-align: center; white-space: normal; }
  html.sgs-m tr.sgs-fullacts td.r-act > a[href*="pdf.php"] { order: 1; }
  html.sgs-m tr.sgs-fullacts td.r-act > a[href*="pdf.php"] { background: #F2B705 !important; border-color: #F2B705 !important; color: #412402 !important; font-weight: 600; }
  html.sgs-m tr.sgs-fullacts td.r-act > a[href*="bill.php"] { order: 2; }
  html.sgs-m tr.sgs-fullacts td.r-act > a[href*="convert=1"], html.sgs-m tr.sgs-fullacts td.r-act > a.only-m { background: #1E2B25 !important; border-color: #1E2B25 !important; color: #fff !important; font-weight: 600; }
  html.sgs-m tr.sgs-fullacts td.r-act > a.wa { order: 3; }
  html.sgs-m tr.sgs-fullacts td.r-act > a[href*="copy="] { display: none; }
  html.sgs-m tr.sgs-fullacts td.r-act .wa-t { display: inline !important; }
}

/* Billing > Orders table on wide screens: short columns never wrap, the Buyer column is capped so it does not hog the free space,
   so the spare width is shared out evenly and the table fits without side scrolling */
@media (min-width: 981px) {
  .bl-t-orders th, .bl-t-orders td { padding-left: 6px; padding-right: 6px; }
  .bl-t-orders td:nth-child(1), .bl-t-orders td:nth-child(2), .bl-t-orders td:nth-child(n+4):nth-child(-n+8), .bl-t-orders td:nth-child(9) { white-space: nowrap; }
  .bl-t-orders td:nth-child(3), .bl-t-orders th:nth-child(3) { min-width: 120px; max-width: 170px; }
  .bl-t-orders td.acts { white-space: nowrap !important; }
  .bl-t-orders td.acts .btn { margin: 2px 3px 2px 0; }
}

/* Create Bill: the folded Buyer card (phones) */
@media (max-width: 860px) {
  html.sgs-m .bl-card.bl-key { position: relative; }
  html.sgs-m .bl-fold { display: none; }
  html.sgs-m .bl-fold.on { display: flex; align-items: center; gap: 10px; }
  html.sgs-m .bl-fold-tg { flex: 0 0 auto; width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 8px; border: 1px solid var(--sgs-line-strong, #D3CFBE); background: #fff; color: #1E2B25; font: 500 22px/1 var(--sgs-font-body); cursor: pointer; }
  html.sgs-m .bl-card:not(.is-folded) > .bl-fold.on { position: absolute; top: 8px; right: 8px; z-index: 2; }
  html.sgs-m .bl-card:not(.is-folded) > .bl-fold.on .bl-fold-in { display: none; }
  html.sgs-m .bl-card.is-folded { background: #FFF7DB; border-color: #F2B705; padding: 10px 10px 10px 12px; }
  html.sgs-m .bl-card.is-folded > *:not(.bl-fold) { display: none !important; }
  html.sgs-m .bl-fold-in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; flex: 1 1 auto; min-width: 0; }
  html.sgs-m .bl-fold-nm { flex: 1 1 100%; min-width: 0; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
  html.sgs-m .bl-fold-nm b { font-weight: 700; color: #1E2B25; }
  html.sgs-m .bl-fold-nm span { font-weight: 700; font-size: 17px; color: #1E2B25; }
  html.sgs-m .bl-fold-dt { flex: 0 0 auto; font-size: 12.5px; color: #5A6B60; }
  html.sgs-m .bl-fold-hi { flex: 0 0 auto; }
  html.sgs-m .bl-fold-hi a { font-size: 12.5px; color: #185FA5; text-decoration: underline; }
}

/* Manager view: masked cost-side figures */
.bl-mask { letter-spacing: .12em; color: #8a8a7a; user-select: none; }
#items input.fx:disabled { background: #f1efe6; color: #8a8a7a; text-align: center; letter-spacing: .12em; }
#items input.fx:disabled { width: 64px; padding-left: 0; padding-right: 0; }

/* Billing > Settings > Users on phones: role dropdown and Remove / Cancel invite on one row under the name */
@media (max-width: 720px) {
  html.sgs-m table.bl-team.sgs-ct td.r-tag, html.sgs-m table.bl-team.sgs-ct td.r-act { flex: 0 0 auto !important; width: auto; }
  html.sgs-m table.bl-team.sgs-ct td.r-tag { order: 3; }
  html.sgs-m table.bl-team.sgs-ct td.r-act { order: 4; padding-top: 0; }
}

/* Classic / New menu switch (a small link just above "SGS Dashboard" in every app's side menu) */
.sgs-msw { display: none !important; }   /* Classic menu is ON HOLD (2026-11-03): the link stays hidden until the owner says; remove this line to show it */
.sgs-msw { display: block; margin: 4px 8px 2px; padding: 7px 12px; border-radius: 8px; font-size: 12.5px; color: #9fb3a8; text-decoration: none; white-space: nowrap; flex: none; }
.sgs-msw:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
html[class*="-sbc"] .sgs-msw { display: none; }
@media (max-width: 860px) { .sgs-msw { display: none; } }