/* ============================================================
   Dakaar POS — Public site styles
   White + slate + navy with brand-orange accents, matching the
   rebuilt marketing site (mascot logo, navy-800 #16293f primary,
   orange #F97316 brand accent).
   NOTE: --brass now resolves to brand orange — the token name is
   kept so older selectors keep working after the rebrand.
   ============================================================ */

:root {
  --bg-1: #f8fafc;            /* slate-50 page background */
  --bg-2: #ffffff;
  --bg-3: #f1f5f9;            /* slate-100 */
  --text-1: #0f172a;          /* slate-900 */
  --text-2: #475569;          /* slate-600 */
  --text-3: #94a3b8;          /* slate-400 */
  --accent: #16293f;          /* navy-800 — primary buttons / headings */
  --accent-tint: #f0f4f8;     /* navy-50 */
  --brass: #f97316;           /* brand orange (token kept for compat) */
  --brass-dark: #ea580c;      /* orange-600 */
  --green: #2f6f3e;
  --green-soft: #d6ebd4;
  --red: #94292d;
  --red-tint: #f5dadb;
  --orange: #ea580c;
  --orange-tint: #ffedd5;
  --border: #e2e8f0;          /* slate-200 */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
  --font-mono: 'SF Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-1);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; margin: 0 0 12px; }
h1 { font-size: 44px; }
h2 { font-size: 32px; }
h3 { font-size: 22px; }
h4 { font-size: 16px; }

.muted { color: var(--text-3); }
.small { font-size: 13px; }

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header / Nav ---------- */
.site-header {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.brand:hover { text-decoration: none; }
/* Mascot logo — sits left of the wordmark in headers / footer / admin. */
.brand-logo { width: 34px; height: 34px; display: block; }
.brand-mark { color: var(--accent); }
/* "POS" / "Admin" half of the wordmark — brand orange, same baseline as
   the marketing site (no superscript treatment anymore). */
.brand-light { color: var(--brass); margin-left: 1px; font-size: 21px; font-weight: 700; }

.site-nav { display: flex; gap: 20px; align-items: center; }
.site-nav a { color: var(--text-2); }
.site-nav a:hover { color: var(--accent); }

/* Hamburger button — mobile only. The mobile media query at the bottom of
   this file flips the display rules so the button shows and the nav
   becomes a drawer. */
.nav-toggle      { display: none; }                /* hidden checkbox driver */
.nav-toggle-btn  { display: none; }                /* button hidden on desktop */

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  border: 2px solid transparent;
  transition: all 0.15s;
  text-decoration: none;
  font-family: inherit;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { background: #1f3a56; border-color: #1f3a56; }
.btn-secondary {
  background: var(--brass);
  color: #fff;
  border-color: var(--brass);
}
.btn-secondary:hover { background: var(--brass-dark); border-color: var(--brass-dark); }
.btn-ghost {
  background: transparent;
  color: var(--text-1);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg-3); }
.btn-danger {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 16px 32px; font-size: 17px; }
.btn-block { display: block; width: 100%; }

/* ---------- Hero ---------- */
.hero {
  padding: 80px 0 60px;
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
}
.hero h1 { font-size: 52px; max-width: 720px; }
.hero .lead { font-size: 19px; color: var(--text-2); max-width: 620px; margin-top: 16px; }
.hero-cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero .badge {
  display: inline-block;
  background: var(--accent-tint);
  color: var(--accent);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

/* ---------- Sections ---------- */
.section { padding: 64px 0; }
.section-alt { background: var(--bg-2); }
.section-title {
  text-align: center;
  margin-bottom: 48px;
}
.section-title h2 { margin-bottom: 12px; }
.section-title .lead { color: var(--text-2); font-size: 17px; }

/* ---------- Feature grid ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.feature {
  background: var(--bg-2);
  padding: 28px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.feature-icon {
  font-size: 32px;
  margin-bottom: 12px;
}
.feature h3 { font-size: 18px; }
.feature p { color: var(--text-2); font-size: 14px; margin: 0; }

/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
}
.plan {
  background: var(--bg-2);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  position: relative;
}
.plan.popular {
  border-color: var(--brass);
  box-shadow: var(--shadow-md);
  transform: scale(1.02);
}
.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brass);
  color: #fff;
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.plan-name { font-size: 18px; color: var(--text-2); font-weight: 600; }
.plan-price { font-size: 44px; font-family: var(--font-display); color: var(--accent); margin: 12px 0; }
.plan-price .currency { font-size: 24px; vertical-align: top; }
.plan-period { color: var(--text-3); font-size: 14px; }
.plan-features { list-style: none; padding: 0; margin: 24px 0; text-align: left; }
.plan-features li {
  padding: 6px 0;
  font-size: 14px;
  color: var(--text-2);
}
.plan-features li::before { content: "✓ "; color: var(--green); font-weight: bold; }

/* ---------- Forms ---------- */
.form-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 32px;
  max-width: 460px;
  margin: 64px auto;
  box-shadow: var(--shadow-md);
}
.form-card h2 { text-align: center; margin-bottom: 8px; }
.form-card .lead { text-align: center; color: var(--text-2); margin-bottom: 24px; }
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  transition: border-color 0.15s;
}
.input:focus {
  outline: none;
  border-color: var(--accent);
}
textarea.input { resize: vertical; min-height: 100px; }
.field-help {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px;
}
.form-footer { margin-top: 24px; text-align: center; font-size: 14px; }

/* ---------- Alerts ---------- */
.alert {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid;
}
.alert-success { background: var(--green-soft); color: var(--green); border-color: var(--green); }
.alert-error   { background: var(--red-tint);  color: var(--red);   border-color: var(--red); }
.alert-info    { background: var(--accent-tint); color: var(--accent); border-color: var(--accent); }

/* ---------- Dashboard ---------- */
.dashboard {
  padding: 32px 0;
}
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}
.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-3);
  font-weight: 600;
}
.stat-value {
  font-size: 28px;
  font-family: var(--font-display);
  color: var(--accent);
  margin-top: 6px;
}
.stat-card.danger { background: var(--red-tint); border-color: var(--red); }
.stat-card.danger .stat-value { color: var(--red); }
.stat-card.warning { background: var(--orange-tint); border-color: var(--orange); }
.stat-card.warning .stat-value { color: var(--orange); }
.stat-card.success { background: var(--green-soft); border-color: var(--green); }
.stat-card.success .stat-value { color: var(--green); }

.card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
}

.license-key {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-3);
  border: 1.5px dashed var(--brass);
  padding: 16px;
  border-radius: 8px;
  margin-top: 12px;
}
.license-key code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--text-1);
}

/* ---------- Tables ---------- */
.tbl {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.tbl th, .tbl td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.tbl th {
  background: var(--bg-3);
  font-weight: 600;
  color: var(--text-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tbl tr:last-child td { border-bottom: none; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }

.tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tag-success { background: var(--green-soft); color: var(--green); }
.tag-warning { background: var(--orange-tint); color: var(--orange); }
.tag-danger  { background: var(--red-tint); color: var(--red); }
.tag-info    { background: var(--accent-tint); color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--accent);
  color: #cbd5e1;
  padding: 48px 0 16px;
  margin-top: 64px;
}
.site-footer .brand-mark { color: #fff; }
.site-footer .brand-light { color: var(--brass); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
.footer-grid h4 { color: #fff; margin-bottom: 12px; font-size: 14px; }
.footer-grid a {
  display: block;
  color: #94a3b8;
  font-size: 14px;
  padding: 4px 0;
}
.footer-grid a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid #2d4a6b;
  padding-top: 16px;
  font-size: 12px;
  color: #7d8ea3;
}

/* ---------- Admin panel ---------- */
.admin-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 240px 1fr;
}
.admin-sidebar {
  background: var(--accent);
  color: #fff;
  padding: 24px 0;
}
.admin-sidebar .brand {
  padding: 0 24px 16px;
  color: #fff;
  display: flex;
  border-bottom: 1px solid #2d4a6b;
  margin-bottom: 16px;
}
.admin-sidebar .brand .brand-mark { color: #fff; }
.admin-sidebar .brand .brand-light { color: var(--brass); }
.admin-sidebar a {
  display: block;
  padding: 10px 24px;
  color: #9fb0c3;
  font-size: 14px;
}
.admin-sidebar a:hover { background: #0f1d2e; color: #fff; text-decoration: none; }
.admin-sidebar a.active { background: #0f1d2e; color: #fff; border-left: 3px solid var(--brass); }
.admin-main {
  padding: 32px;
  background: var(--bg-1);
  overflow-x: auto;
}
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

/* Mobile-only admin chrome — hidden on desktop. The checkbox-driven
   drawer + scrim pattern only kicks in inside the @media block below;
   here we just keep the elements out of the desktop layout. */
.admin-mobile-bar  { display: none; }
.admin-nav-toggle  { display: none; }
.admin-nav-scrim   { display: none; }

/* =====================================================================
   Responsive — phones and small tablets.
   The site was originally desktop-only; this block is a comprehensive
   second pass that:
     1. Tightens container padding so 360-px viewports get usable width.
     2. Shrinks headings + buttons to phone-sized scale.
     3. Turns every wide table into a horizontally scrollable strip
        (display:block + overflow-x), preserving the table layout inside.
     4. Forces inline-styled flex rows that DON'T already wrap to wrap.
     5. Breaks long monospace strings (license keys, order IDs) so they
        don't push the parent off-screen.
     6. Stacks card grids that were `repeat(N, 1fr)` to single column.
     7. Stacks header nav + admin shell as before.
   ===================================================================== */
@media (max-width: 768px) {
  .hero h1 { font-size: 36px; }
  h1 { font-size: 28px; }
  h2 { font-size: 24px; }
  h3 { font-size: 18px; }

  .container { padding: 0 14px; }

  /* Header — collapse nav into a hamburger on mobile. The trick is a
     hidden checkbox sibling: when checked it reveals the dropdown panel
     under the brand row. No JS needed. The hamburger label is visually
     a button (≡) and clicking it toggles the checkbox. */
  .header-inner    { flex-wrap: wrap; gap: 8px; align-items: center; position: relative; }
  .nav-toggle      { display: none; }                               /* the checkbox */
  .nav-toggle-btn  {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: transparent; border: 1px solid var(--border);
    border-radius: 6px; font-size: 22px; line-height: 1;
    cursor: pointer; color: var(--text-1); user-select: none;
  }
  .nav-toggle-btn:hover { background: var(--bg-3); }
  /* Nav becomes a vertical drawer below the header bar. Hidden by default. */
  .site-nav {
    display: none;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin-top: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
  }
  .site-nav a {
    font-size: 14px; padding: 10px 4px;
    border-bottom: 1px solid var(--bg-3);
  }
  .site-nav a:last-child { border-bottom: 0; }
  /* Reveal the drawer when the checkbox is checked. */
  .nav-toggle:checked ~ .site-nav { display: flex; }

  /* Buttons — slightly smaller padding, allow full-width when block-styled. */
  .btn         { padding: 10px 18px; font-size: 14px; }
  .btn-lg      { padding: 12px 22px; font-size: 15px; }
  .btn-sm      { padding: 6px 12px;  font-size: 12px; }
  .btn-block   { width: 100%; }

  /* Cards — allow horizontal scroll if a child (typically a table) is wide,
     and trim outer padding so the card frame doesn't eat the screen. */
  .card        { padding: 16px 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Tables — biggest overflow source on phones. Don't touch the table
     element itself (display:block on a <table> breaks column alignment);
     instead, wrap it with .tbl-scroll in the HTML. The wrapper does the
     horizontal scroll; the table inside renders normally. */
  .tbl-scroll {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Extend to card edges so the scroll edge sits flush with the card
       border instead of being indented by card padding. */
    margin: 0 -14px;
    padding: 0 14px;
  }
  .tbl-scroll > .tbl,
  .tbl-scroll > table {
    min-width: 100%;
    width: max-content;       /* let table grow to its natural content width */
  }
  .tbl-scroll th, .tbl-scroll td { white-space: nowrap; }
  .tbl th, .tbl td { padding: 10px 12px; font-size: 12px; }

  /* Long monospace identifiers (license keys, payment IDs, GSTINs) — break
     onto multiple lines instead of forcing horizontal scroll on the parent. */
  code, .text-mono, .font-mono { word-break: break-all; overflow-wrap: anywhere; }

  /* Common flex rows — many pages use inline-styled `display:flex; gap:...;
     justify-content:space-between` without `flex-wrap`, which is the main
     overflow culprit for action bars / kpi rows. Force wrap globally. */
  .row, .actions, .lic-actions, .lic-row-head,
  .reinstall-card > div, .form-row, .button-row {
    flex-wrap: wrap;
  }

  /* Card / plan grids — collapse multi-column layouts to a single column. */
  .plan-grid           { grid-template-columns: 1fr; gap: 14px; }
  .dash-grid           { grid-template-columns: 1fr 1fr; gap: 10px; }
  .footer-grid         { grid-template-columns: 1fr 1fr; }
  .split               { grid-template-columns: 1fr; }
  .features-grid       { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pricing-section .plan-grid { grid-template-columns: 1fr; }

  /* Hero pages — drop the big margin and constrain headings further. */
  .hero, .pricing-hero { padding: 40px 0; }
  .lede                { font-size: 14px; }

  /* Stat tiles in admin / dashboard — readable size on small screens. */
  .stat-card .stat-value, .stat-tile .value { font-size: 18px; }
  .stat-card .stat-label, .stat-tile .label { font-size: 11px; }

  /* Customer dashboard — JS-rendered report panels use inline grid styles
     with fixed minmax columns. Override their grids to single column on
     phones. The selectors target the wrapper classes added in JS templates
     (dash-row*) so we don't accidentally hit unrelated grids elsewhere. */
  .dash-row {
    grid-template-columns: 1fr !important;
  }
  /* Reports tab strip — three tabs can overflow on 320 px screens. Allow
     wrap to a second line. */
  #reportTabs { flex-wrap: wrap; }
  .report-tab { padding: 8px 10px; font-size: 13px; }
  /* Date range bar — already wraps but the inputs can shrink to ~80 px
     each which is too narrow to read. Force a usable minimum. */
  #rangeFrom, #rangeTo { min-width: 130px; }
  /* Sales-over-time timeline — make bars narrower so 7+ days fit on a
     phone without horizontal scroll. */
  .tl-chart { gap: 3px; }
  .tl-bar   { max-width: 22px; }
  .tl-x     { font-size: 9px; }
  /* The big sales-tile total amount can overflow if the value has many
     digits (₹1,23,456). Allow it to shrink rather than push the column. */
  .dash-row--sales > div > div[style*="font-size:32px"] {
    font-size: 24px !important;
    word-break: break-all;
  }

  /* Onboarding wizard — pull in the timeline rail closer to the steps. */
  .onb-step { grid-template-columns: 44px 1fr; gap: 10px; }
  .onb-step-num { width: 44px; height: 44px; font-size: 16px; }
  .onb-step.done .onb-step-num { font-size: 22px; }
  .onb-steps::before { left: 22px; }
  .onb-step-body { padding: 14px 14px; }

  /* ---------- Admin shell on phones ----------
     Layout switches from "240px sidebar + main" grid to a single-column
     block where the sidebar is a fixed off-canvas drawer that slides in
     when the user taps the hamburger. Pure-CSS pattern driven by a
     hidden checkbox sibling (#adminNavToggle). */
  .admin-shell {
    display: block;
    min-height: 100vh;
    grid-template-columns: none;
  }

  /* Top app bar — phones only. Contains the hamburger + page title.
     Sticky so it stays at the top while the main content scrolls.
     padding-top adds safe-area clearance for iPhone notches. */
  .admin-mobile-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--accent);
    color: #fff;
    padding: 10px 14px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
    padding-left:  calc(env(safe-area-inset-left,  0px) + 14px);
    padding-right: calc(env(safe-area-inset-right, 0px) + 14px);
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid #2d4a6b;
  }
  .admin-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-radius: 8px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .admin-hamburger:active { background: rgba(255, 255, 255, 0.16); }
  .admin-mobile-title {
    flex: 1;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Sidebar becomes a fixed slide-in drawer from the left edge. The
     :checked sibling-selector on #adminNavToggle translates it into
     view. Desktop's horizontal-scroll variant from the old rule is
     intentionally NOT reused — full-width vertical drawer beats a
     pill-shaped horizontal strip for thumb reach + readability. */
  .admin-sidebar {
    display: block;             /* override prior flex/row */
    flex-direction: initial;
    overflow-y: auto;
    overflow-x: hidden;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: 280px;
    max-width: 82vw;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    padding: 20px 0;
    padding-top: calc(env(safe-area-inset-top, 0px) + 20px);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
    height: 100vh;
  }
  .admin-sidebar .brand {
    padding: 0 24px 16px;
    font-size: 22px;
    white-space: nowrap;
  }
  .admin-sidebar a {
    padding: 12px 24px;
    font-size: 14px;
    white-space: normal;
  }

  /* Scrim — semi-transparent dim layer behind the drawer. Tapping it
     uncheck the checkbox (because <label for> targets the same id),
     which closes the drawer. */
  .admin-nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  /* Checked state — drawer slid in, scrim visible + tappable */
  .admin-nav-toggle:checked ~ .admin-sidebar {
    transform: translateX(0);
  }
  .admin-nav-toggle:checked ~ .admin-nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  /* Main content area — tighter padding for phones. The mobile bar
     above eats the top space so we don't need extra padding-top here. */
  .admin-main {
    padding: 14px;
    padding-left:  calc(env(safe-area-inset-left,  0px) + 14px);
    padding-right: calc(env(safe-area-inset-right, 0px) + 14px);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
    overflow-x: hidden;
  }
  .admin-header {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
  }
  .admin-header h2 { font-size: 20px; }

  /* Tables inside cards scroll horizontally within the card boundary
     so the page itself doesn't sideswipe-scroll. Cells get nowrap so
     columns stay readable while the user scrolls. */
  .admin-main .card {
    padding: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .admin-main table.tbl {
    font-size: 12px;
  }
  .admin-main table.tbl th,
  .admin-main table.tbl td {
    padding: 8px 10px;
    white-space: nowrap;
  }

  /* Action rows / filter bars — many admin pages use inline-styled
     `display:flex` without flex-wrap. Force them to wrap on phones. */
  .admin-main .actions,
  .admin-main .filter-row,
  .admin-main .form-row,
  .admin-main .bulk-action-bar {
    flex-wrap: wrap;
    gap: 6px;
  }
  .admin-main .actions .btn,
  .admin-main .filter-row .btn,
  .admin-main .bulk-action-bar .btn {
    font-size: 12px;
    padding: 6px 12px;
  }

  /* Form inputs — full-width by default so the customer can actually
     read what they're typing on a 360px screen. */
  .admin-main input[type=text],
  .admin-main input[type=email],
  .admin-main input[type=number],
  .admin-main input[type=date],
  .admin-main input[type=search],
  .admin-main select,
  .admin-main textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Modals on subscription / reinstall flows — full-width sheets. */
  .reinstall-modal .reinstall-card,
  .modal .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    min-height: 100vh;
  }
}

/* Phones below 420px (older / narrower devices) — tighten further. */
@media (max-width: 420px) {
  .dash-grid     { grid-template-columns: 1fr; }
  .footer-grid   { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr; }
  .container     { padding: 0 12px; }
  .stat-card .stat-value { font-size: 16px; }
}

/* =====================================================================
   PWA standalone mode — make the installed app NOT look like a website.
   Triggered when the page is opened from the home-screen icon (display
   mode = standalone) OR when the JS in header.php has tagged <body>
   with the .pwa-standalone class (covers iOS Safari, which doesn't
   honour the display-mode media query reliably).

   Rules:
     1. Hide the marketing site header + footer entirely — the user is
        inside the app, they don't need brand chrome or "Pricing / Contact"
        links flowing through the top.
     2. Add safe-area padding so content clears the iPhone notch / Android
        gesture bar.
     3. Add a slim, app-style top bar inside main for authed pages that
        need a back/menu affordance. Pages that opt in by rendering a
        <div class="pwa-appbar"> get this; everything else just stretches
        edge-to-edge.
     4. Login / signup / forgot-password pages get NO chrome — just the
        form, centered, fullscreen. Cleanest sign-in feel.
   ===================================================================== */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .site-header, .site-footer {
    display: none !important;
  }
  main {
    /* iOS notch + status bar clearance. env(safe-area-inset-*) is 0 on
       devices that don't expose the value, so this is harmless on Android. */
    padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left:  env(safe-area-inset-left,  0px);
    padding-right: env(safe-area-inset-right, 0px);
    min-height: 100vh;
  }
}
/* Class-based fallback for browsers that don't reliably set display-mode
   (notably iOS Safari home-screen icons). The JS in header.php toggles
   this class on <body> when navigator.standalone is true. */
body.pwa-standalone .site-header,
body.pwa-standalone .site-footer {
  display: none !important;
}
body.pwa-standalone main {
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left:  env(safe-area-inset-left,  0px);
  padding-right: env(safe-area-inset-right, 0px);
  min-height: 100vh;
}

/* App-style slim top bar — pages that want a back/menu button render
   <div class="pwa-appbar">…</div> at the top of their content; the styles
   below give it a native-app feel. Only visible when the body is tagged
   .pwa-standalone (so it doesn't appear on the regular website). */
.pwa-appbar { display: none; }
body.pwa-standalone .pwa-appbar {
  display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; z-index: 50;
  padding: 10px 14px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
  background: var(--accent, #16293f); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
body.pwa-standalone .pwa-appbar .pwa-title {
  font-weight: 600; font-size: 16px; flex: 1;
  color: #fff;
}
body.pwa-standalone .pwa-appbar .pwa-btn {
  background: rgba(255,255,255,0.10);
  border: 0; color: #fff;
  width: 36px; height: 36px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer;
}
body.pwa-standalone .pwa-appbar .pwa-btn:hover { background: rgba(255,255,255,0.16); }
body.pwa-standalone .pwa-appbar .pwa-menu {
  position: absolute; top: calc(100% + 4px); right: 8px;
  background: #fff; color: var(--text-1);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  min-width: 200px; padding: 6px 0;
  display: none;
}
body.pwa-standalone .pwa-appbar .pwa-menu.open { display: block; }
body.pwa-standalone .pwa-appbar .pwa-menu a {
  display: block; padding: 10px 14px; color: var(--text-1);
  font-size: 14px;
}
body.pwa-standalone .pwa-appbar .pwa-menu a:hover {
  background: var(--bg-2); text-decoration: none;
}

/* Login / signup / forgot-password / reset-password in PWA — strip
   everything else and center the form fullscreen. .auth-page is a class
   set on <body> by those pages so we can target precisely. (PWA mode only;
   on the regular site they stay as designed.) */
body.pwa-standalone.auth-page .pwa-appbar { display: none; }
body.pwa-standalone.auth-page main,
body.pwa-standalone.auth-page {
  /* Match auth pages whether or not they wrap content in <main> — the
     customer login.php uses includes/header.php (which has a main); the
     admin login.php has its own bespoke HTML with no main. */
  background: linear-gradient(160deg, var(--accent, #16293f) 0%, #0c1729 100%);
}
body.pwa-standalone.auth-page main {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
}
body.pwa-standalone.auth-page {
  /* No-main fallback: turn the body itself into the flex centering host.
     The customer header.php inserts a <main>, so this rule's flex applies
     only when there's nothing else doing the centering. Pages with <main>
     get a normal block-level body (the main wins). */
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; margin: 0;
}

/* =====================================================================
   Mobile overflow hardening (2026-06-12) — stops "data overflow" on
   phones across the customer portal and the admin PWA. Strategy:
   1. the PAGE itself may never scroll sideways (overflow-x: clip on the
      root — `clip` rather than `hidden` so position:sticky keeps
      working);
   2. wide DATA slides inside its own scroll strip (report tables, the
      timeline chart) instead of pushing the layout;
   3. everything else learns to wrap (long IDs, big ₹ figures, fixed-
      width selects, inline two-column form grids).
   ===================================================================== */
@media (max-width: 768px) {
  /* 1 — page-level safety net. */
  html, body { overflow-x: clip; max-width: 100vw; }

  /* Media and form controls can never exceed their container. */
  img, svg, video, canvas { max-width: 100%; height: auto; }
  select, input, textarea { max-width: 100%; min-width: 0; }

  /* Inline-styled fixed-width selects on the customer dashboard. */
  #storeSelect, #detailReport { width: 100%; min-width: 0 !important; }

  /* Long values wrap instead of widening their column: license keys,
     Razorpay IDs, GSTINs, e-mail addresses, big ₹ totals. Headers stay
     on one line so columns remain readable. */
  .tbl th { white-space: nowrap; }
  .tbl td { overflow-wrap: anywhere; }
  .stat-value { overflow-wrap: anywhere; }

  /* 2 — JS-rendered report tables (sales dashboard tabs, detail
     reports, combined-outlet breakdown) become their own horizontal
     scrollers so the stat tiles above them stay put. These tables are
     data-dense by nature; nowrap + finger-scroll beats squished
     columns. */
  .report-panel .tbl, #detailReportBody .tbl {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .report-panel .tbl th, .report-panel .tbl td,
  #detailReportBody .tbl th, #detailReportBody .tbl td { white-space: nowrap; }

  /* Sales-over-time chart: 30-day ranges scroll inside the strip. */
  .tl-chart { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .tl-col   { min-width: 14px; }

  /* Toolbars that still use inline flex without wrap. */
  .lux-header, .lux-range { flex-wrap: wrap; row-gap: 8px; }
}

@media (max-width: 480px) {
  /* Inline two-column form grids (City/PIN, invoice forms, analytics
     split) stack on small phones. The attribute selector matches the
     inline style itself, so no per-page markup edits are needed. */
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  .dash-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   Dashboard chart containment fix (2026-06-12) — "the graph moves away"
   on 30-day ranges. Root cause: CSS grid items default to
   min-width:auto, so a grid cell can never shrink below its content's
   natural width. The 30-bar timeline (30 × ~17px) therefore widened its
   grid track, which widened the whole row, which dragged the entire
   dashboard sideways — overflow-x:auto on .tl-chart never engaged
   because its ancestors simply grew instead of constraining it.
   Fix: force min-width:0 down the chain so the chart's own scrollbar is
   the thing that absorbs the width. Applies at ALL screen sizes (the
   same blow-out happens in a narrow desktop window). No markup edits —
   the renderer's inline grids are matched by attribute selector.
   ===================================================================== */
.report-panel, #detailReportBody { max-width: 100%; }
.report-panel [style*="display:grid"],
#detailReportBody [style*="display:grid"] { max-width: 100%; }
.report-panel [style*="display:grid"] > *,
#detailReportBody [style*="display:grid"] > * { min-width: 0; }
.dash-row > * { min-width: 0; max-width: 100%; }
.tl-chart {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
/* Bars keep a readable width and the strip scrolls; without a floor the
   browser would crush 30 bars into invisible slivers instead. */
.tl-col { min-width: 14px; flex: 1 0 14px; }
body.pwa-standalone.auth-page .form-card {
  width: min(420px, 100%);
  margin: 0 !important;          /* Override page-level inline margin-top */
  background: #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
}

/* Admin shell inside PWA — drop the marketing-site framing entirely
   (already hidden via .site-header rule), and ensure the admin-shell
   sits flush to the screen edges.
   Note: safe-area padding for admin-main is desktop-only; on phones the
   new .admin-mobile-bar sits at the top of the page and already eats
   the inset, so applying it again to admin-main would double-pad. */
body.pwa-standalone .admin-shell {
  min-height: 100vh;
}
@media (min-width: 769px) {
  body.pwa-standalone .admin-main {
    padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
  }
}