/* ==========================================================================
   SalesHub ERP — Responsive Framework v1
   Sprint R-1. Shared tokens, official breakpoints, and component defaults.
   Every page includes this file. No page may define its own breakpoint
   literal, @media query, or responsive component override outside this file.
   ========================================================================== */

:root{
  /* Official breakpoints (documented here; media queries below use literal
     px since CSS custom properties are not usable inside @media conditions) */
  --bp-phone-sm: 375px;   /* 0-374: Phone Small */
  --bp-phone: 480px;      /* 375-479: Phone */
  --bp-phone-lg: 600px;   /* 480-599: Phone Large */
  --bp-tablet: 1024px;    /* 600-1023: Tablet */
  --bp-desktop: 1440px;   /* 1024-1439: Desktop, 1440+: Desktop Large */

  /* Spacing scale (4px base unit) */
  --sh-space-1:4px; --sh-space-2:8px; --sh-space-3:12px; --sh-space-4:16px;
  --sh-space-5:20px; --sh-space-6:24px; --sh-space-7:32px; --sh-space-8:40px;

  /* Typography scale -- 12px is a hard floor, nothing renders smaller */
  --sh-font-xs:12px; --sh-font-sm:13px; --sh-font-base:14px; --sh-font-md:16px;
  --sh-font-lg:18px; --sh-font-xl:20px; --sh-font-2xl:24px; --sh-font-3xl:28px; --sh-font-4xl:32px;

  /* Touch targets (WCAG 2.5.5) */
  --sh-touch-min:44px; --sh-touch-lg:48px;

  /* Border radius (kept consistent with existing --sh-radius:8px in saleshub.css) */
  --sh-radius-sm:4px; --sh-radius-md:8px; --sh-radius-lg:12px;

  /* Icon sizes */
  --sh-icon-sm:16px; --sh-icon-md:20px; --sh-icon-lg:24px;

  /* Button heights */
  --sh-btn-sm:36px; --sh-btn-md:44px; --sh-btn-lg:52px;

  /* Animation duration */
  --sh-dur-fast:150ms; --sh-dur-base:250ms; --sh-dur-slow:350ms;
}

/* ── Root fix (Root Cause A from the Mobile Audit): grid/flex children must
   be able to shrink below their content's intrinsic size, otherwise a single
   wide table/kanban forces the whole page wider than the device. ── */
.sh-card, .sh-grid > *, .sh-stats-grid > *, .sh-kanban > * { min-width: 0; }
/* The min-width:0 fix must apply through the FULL nesting chain, not just the
   outer .sh-card -- confirmed via the Visual Layout Debug Tool that a table
   cell inside .sh-card-body > .sh-table-wrap was still forcing 694px because
   .sh-table-wrap itself couldn't shrink, so its own overflow-x:auto never
   actually engaged (a wrapper can't scroll content it's still sized to fit).
   Scoped narrowly to the table-wrapping chain specifically, not a blanket
   .sh-card * rule, to avoid zeroing out legitimate min-widths elsewhere
   (buttons/badges/inputs) inside cards. */
.sh-card-body, .sh-table-wrap { min-width: 0; }
/* Same gotcha one level deeper: .sh-stat-card is itself display:flex, and its
   label/value/sub children default to min-width:auto, so on a narrow forced
   column (see sh_sales_dashboard.php's Cash/Card totals row, which sets an
   inline grid-template-columns:repeat(2,1fr) that this framework file cannot
   override since inline styles win over stylesheet rules regardless of
   specificity) the longest word in the Arabic label/sub text refuses to
   shrink, and because .sh-stat-card has overflow-x:visible that content
   spills out and inflates the whole page's scrollable width. Confirmed via
   the Visual Layout Debug Tool (brute-force per-element hide test) as the
   exact remaining source of a 22px page-level overflow on a 360px viewport. */
.sh-stat-label, .sh-stat-value, .sh-stat-sub { min-width: 0; }
/* Third occurrence of the same gotcha, this time in the topbar's user chip:
   .sh-topbar > .sh-topbar-actions > .sh-user-chip > .sh-user-name renders the
   full account email (e.g. "test1@gmail.com"), a single unbreakable token
   with no space to wrap at, so min-width:auto forces it to its full-string
   width regardless of available room. Confirmed via the Visual Layout Debug
   Tool (brute-force per-element hide test) as the exact remaining source of
   the final ~11px of page-level overflow on a 360px viewport, since
   .sh-topbar itself has overflow-x:visible and an explicit width (not auto),
   so the overflowing child spills into the page's scrollable area without
   the topbar's own box ever reporting as too wide. Unlike the stat-card
   text (breakable at word spaces), an email has no natural break point, so
   letting it shrink needs actual truncation, not just wrapping. */
.sh-topbar-actions, .sh-user-chip { min-width: 0; }
.sh-user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Touch target enforcement ── */
.sh-btn { min-height: var(--sh-touch-min); }
.sh-btn-icon { width: var(--sh-touch-min); height: var(--sh-touch-min); display:inline-flex; align-items:center; justify-content:center; }
.sh-topbar-toggle, .sh-lang-btn { min-width: var(--sh-touch-min); min-height: var(--sh-touch-min); }
input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; }
/* checkbox/radio *labels* (the actual tap target a user goes for) get the real minimum */
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: var(--sh-touch-min); display:inline-flex; align-items:center; }

/* ── Typography floor ── */
body { font-size: var(--sh-font-base); }
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
small, .sh-hint, [class*="-muted"] { font-size: max(var(--sh-font-xs), 12px); }

/* ── Nav drawer: isolated stacking context, immune to page-content overflow
   (Root Cause B fix -- the sidebar can never again be pushed off-screen by
   an overflowing page, because it no longer participates in page layout flow) ── */
.sh-sidebar, .sh-nav-drawer {
  position: fixed;
  contain: layout;
  z-index: 9999;
}
.sh-drawer-close { display: none; }
@media (max-width: 768px) {
  .sh-sidebar.mobile-open { transform: translateX(0) !important; }
  .sh-drawer-close {
    position: absolute;
    top: var(--sh-space-4);
    left: var(--sh-space-4);
    width: var(--sh-touch-min);
    height: var(--sh-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--sh-radius-md);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.86);
    cursor: pointer;
  }
  .sh-sidebar.collapsed .sh-drawer-close { display: none; }
}

/* ── Kanban: responsive by default, replaces sh_finance_dashboard.php's
   un-bounded 5-column grid (the Critical finding from the Mobile Audit) ── */
.sh-kanban { display: grid; grid-template-columns: 1fr; gap: var(--sh-space-4); }
@media (min-width: 600px)  { .sh-kanban { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sh-kanban { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1440px) { .sh-kanban { grid-template-columns: repeat(5, 1fr); } }

/* ── Module tab-bar (.sh-fin-nav, shared by Sales/Purchases/Inventory/Finance
   nav includes): uses a negative-margin "full-bleed" trick that works on
   desktop but inflates the element's actual box width beyond a narrow phone
   viewport regardless of its content (negative margins add to an element's
   rendered footprint independent of what's inside it) -- confirmed via
   Playwright measurement on the Sales Dashboard pilot (368px box on a 360px
   viewport). Originally scoped this fix to phone only, assuming the trick
   "worked fine" above 599px -- but the brute-force per-element hide test
   (Visual Layout Debug Tool methodology) proved the SAME negative margin
   still inflates the nav bar 8px past its container at 810px (iPad) and
   1440px (Desktop) too, just a small enough amount (net 4px page-level
   scrollWidth) to have gone unnoticed visually at those sizes. It's a
   pre-existing bug in the original shared component at every viewport, not
   a phone-only issue, so the fix must be unconditional rather than
   media-gated. ── */
/* !important required: each module's nav include (sh_sales_nav.php etc.)
   ships its own inline style block appearing later in document source
   order than this framework file's stylesheet link, so equal-specificity
   rules would otherwise lose the cascade tie to the page-level style. */
.sh-fin-nav {
  margin: 0 !important;
  padding: 0 var(--sh-space-2) !important;
  flex-wrap: nowrap !important;
}
/* overflow-x:auto was removed here (confirmed via headed live regression):
   setting overflow-x to anything but visible forces the browser to also
   compute overflow-y as auto (per spec, even with an explicit overflow-y:
   visible override -- verified this does NOT stick in Chromium), which
   silently clipped every module's "Orders/Reports/Settings" dropdown menu
   (.sh-fin-dd, position:absolute;top:100%) since it needs to visually
   escape below this row. The dropdown's own JS toggle and display:flex
   rule were both firing correctly -- the menu was just invisible and
   unclickable, exactly matching a real-phone bug report of tabs "not
   opening." Confirmed removing overflow-x entirely causes no page-level
   overflow on any of the 6 pages using this shared nav bar at 360px (the
   narrowest tested width) once the negative-margin fix above (margin:0)
   is in place -- that fix alone already eliminated the original overflow
   cause, so overflow-x:auto was redundant safety that became actively
   harmful. */

/* ── Stats grid: framework-owned breakpoints (replaces the 4 inconsistent
   thresholds -- 1200/768/600/480 -- found scattered in saleshub.css) ── */
.sh-stats-grid { display: grid; grid-template-columns: 1fr; gap: var(--sh-space-4); }
@media (min-width: 480px)  { .sh-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sh-stats-grid { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   Adaptive Tables -- 4 presentation modes
   Desktop (>=1024px): unchanged table layout
   Tablet (600-1023px): Compact Table -- hide data-priority="low" columns
   Phone (375-599px): Card View -- each table row becomes a stacked card
   Phone + .sh-compact: Compact Card View -- for high-volume lists
   ========================================================================== */
@media (max-width: 1023px) {
  .sh-table [data-priority="low"] { display: none; }
}

@media (max-width: 599px) {
  /* !important needed: this specific saleshub.css table styling has been
     confirmed (Visual Layout Debug Tool) to otherwise win cascade ties
     against equal-specificity rules loaded earlier in the page head, same as the
     .sh-fin-nav fix above. */
  .sh-table.sh-adaptive thead { display: none !important; }
  .sh-table.sh-adaptive, .sh-table.sh-adaptive tbody,
  .sh-table.sh-adaptive tr, .sh-table.sh-adaptive td { display: block !important; width: 100% !important; }
  /* The original desktop-only rule for this element (a single-class selector,
     e.g. min-width:720px) sets min-width, not width -- and per the CSS box
     model min-width always wins over a conflicting width value regardless of
     !important on the width declaration, since they are different properties,
     not a cascade tie. Confirmed via the Visual Layout Debug Tool: the table
     still rendered at its old desktop floor width on a phone viewport even
     after width:100% !important was applied above, because min-width was
     never reset. Must explicitly zero it here for the phone tier. */
  .sh-table.sh-adaptive { min-width: 0 !important; }
  .sh-table.sh-adaptive tr {
    margin-bottom: var(--sh-space-4);
    border: 1px solid var(--sh-border, #e2e8f0);
    border-radius: var(--sh-radius-md);
    padding: var(--sh-space-3);
  }
  .sh-table.sh-adaptive td {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--sh-space-2) 0; border: none; min-height: 28px;
  }
  .sh-table.sh-adaptive td::before {
    content: attr(data-label);
    font-weight: 600; color: var(--sh-text-muted, #64748b);
    margin-inline-end: var(--sh-space-3); flex-shrink: 0;
  }
  .sh-table.sh-adaptive td[data-label=""]::before,
  .sh-table.sh-adaptive td:not([data-label])::before { content: none; }

  /* Phone Compact Card View -- opt-in, for high-volume lists
     (Products, Customers, Sales list, Purchase Orders, Inventory) */
  .sh-table.sh-adaptive.sh-compact tr { padding: var(--sh-space-2); margin-bottom: var(--sh-space-2); }
  .sh-table.sh-adaptive.sh-compact td { font-size: var(--sh-font-xs); padding: 2px 0; min-height: auto; }
  .sh-table.sh-adaptive.sh-compact td[data-priority="low"] { display: none; }
}

/* ── Modals: viewport-relative width, never a fixed px value that can
   overflow a phone screen ── */
.sh-modal, .sh-modal-overlay > div { width: min(560px, calc(100vw - 32px)); }

/* ── Focus visibility (Accessibility, WCAG 2.4.7) ── */
.sh-btn:focus-visible, .sh-btn-icon:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--sh-primary, #4f46e5);
  outline-offset: 2px;
}