/* ══════════════════════════════════════════════════════════
   InvoiceFlow — responsive.css  (v3 — targeted fixes)
   
   3 main problems fixed:
   1. Navbar overflow — tabs cut off on small screens
   2. History content going outside card/box
   3. Inventory content going outside screen
   
   Breakpoints: 1200 → 992 → 768 → 576 → 420 → 360
   Load order: style.css → inventory.css → responsive.css
══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   GLOBAL — prevent horizontal bleed on all screens
══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body               { overflow-x: hidden; max-width: 100%; }
html                     { -webkit-text-size-adjust: 100%; }

/* iOS zoom prevention on input focus */
input, select, textarea  { touch-action: manipulation; }

/* Momentum scroll on iOS */
.items-scroll,
.table-wrap,
.modal-body              { -webkit-overflow-scrolling: touch; }

/* Remove tap flash */
button, a                { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }


/* ══════════════════════════════════════════════════════════
   FIX 1 — NAVBAR
   Problem: "Create Invoice" tab wraps to 2 lines, History
            and Inventory overflow off screen.
   Solution: Tab-nav scrolls horizontally, tabs never wrap.
             Brand shrinks gracefully.
══════════════════════════════════════════════════════════ */

/* Start fixing from 900px so it never breaks */
@media (max-width: 900px) {

  .header-inner {
    padding: 0 16px;
    height: 56px;
    flex-wrap: nowrap;          /* never let brand + nav wrap */
    overflow: hidden;
    gap: 8px;
  }

  /* Brand — shrinks but never hides */
  .brand       { flex-shrink: 0; min-width: 0; }
  .brand-icon  { font-size: 20px; }
  .brand-name  { font-size: 18px; white-space: nowrap; }

  /* Tab nav container — scrolls horizontally, no wrap */
  .tab-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;          /* ← KEY: tabs stay on one line */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;      /* hide scrollbar Firefox */
    -ms-overflow-style: none;   /* hide scrollbar IE */
    gap: 3px;
    padding: 4px;
    flex-shrink: 1;             /* nav can shrink, then scroll */
    min-width: 0;
    /* Fixed height — prevents vertical reflow on load */
    height: 40px;
    box-sizing: border-box;
    contain: layout style;
  }

  .tab-nav::-webkit-scrollbar { display: none; } /* hide scrollbar Chrome/Safari */

  /* Each tab button — never wraps, never shrinks */
  .tab-btn {
    flex-shrink: 0;             /* ← KEY: tabs don't compress */
    white-space: nowrap;        /* ← KEY: text stays 1 line */
    padding: 7px 14px;
    font-size: 13px;
    transform: none !important; /* no vertical shift on this breakpoint */
    opacity: 0.72;
  }

  .tab-btn.active  { opacity: 1; }
  .tab-btn:hover   { opacity: 1; }
}

@media (max-width: 600px) {
  .header-inner { padding: 0 12px; height: 52px; }
  .brand-name   { font-size: 16px; }
  .tab-btn      { padding: 7px 12px; font-size: 12.5px; }
}

@media (max-width: 420px) {
  .header-inner { padding: 0 10px; height: 50px; }
  .brand-name   { font-size: 14px; }
  .brand-icon   { font-size: 16px; }
  .tab-btn      { padding: 6px 10px; font-size: 12px; }
}

@media (max-width: 360px) {
  .header-inner { padding: 0 8px; height: 48px; }
  .brand-name   { font-size: 13px; }
  .tab-btn      { padding: 6px 9px; font-size: 11.5px; }
}

/* Landscape — keep header single row always */
@media (max-width: 768px) and (orientation: landscape) {
  .header-inner { height: 46px; }
  .tab-btn      { padding: 5px 11px; font-size: 12px; }
}


/* ══════════════════════════════════════════════════════════
   FIX 2 — HISTORY TAB
   Problem: Search bar, table, content bleeds outside box.
   Solution: Proper padding, contained table with scroll.
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Tab padding — safe margins */
  #tab-history {
    padding: 16px 14px 50px;
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Page title row */
  .page-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
  }

  .page-title    { font-size: 22px; }
  .page-subtitle { font-size: 13px; }

  /* Refresh button full width */
  .page-title-row .btn {
    width: 100%;
    justify-content: center;
  }

  /* Search bar card — contained */
  .search-bar-card {
    padding: 14px 12px;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
  }

  .sf-toprow { gap: 8px; flex-wrap: wrap; }
  .sf-tab    { padding: 7px 12px; font-size: 12.5px; }
  .sf-clear  { padding: 7px 12px; font-size: 12.5px; }
  .sf-arrow  { display: none; }

  /* Search input — full width, no overflow */
  .sf-search-wrap   { width: 100%; }
  .sf-search-input  {
    width: 100%;
    box-sizing: border-box;
    font-size: 15px;
  }

  /* Date inputs */
  .sf-dates         { gap: 8px; flex-wrap: wrap; }
  .sf-date-input    { width: 140px; font-size: 15px; }

  /* History card that contains the table */
  #tab-history .card {
    padding: 0;
    overflow: hidden;           /* ← KEY: clip content inside card */
    border-radius: var(--radius-lg);
  }

  /* Table wrapper — horizontal scroll INSIDE card */
  #historyTableWrap,
  #tab-history .table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    border: none;               /* card already has border */
    border-radius: 0;
  }

  /* Table itself — minimum width so columns don't squash */
  .history-table {
    min-width: 460px;
    width: 100%;
    table-layout: auto;
  }

  .history-table thead th,
  .history-table td { padding: 11px 12px; font-size: 13px; }

  /* Hide Date column — saves space */
  .history-table thead th:nth-child(3),
  .history-table tbody td:nth-child(3) { display: none; }

  /* Action buttons */
  .action-btns { gap: 4px; flex-wrap: nowrap; }
  .btn-edit-row, .btn-delete-row, .btn-download-row {
    padding: 5px 9px;
    font-size: 12px;
    min-height: 34px;
  }

  /* Results meta */
  .results-meta { font-size: 12.5px; }

  /* Empty + no-match states — stay inside card */
  #historyEmpty, #historyNoMatch { padding: 36px 16px; }
}

@media (max-width: 576px) {
  #tab-history  { padding: 14px 12px 48px; }

  .history-table thead th,
  .history-table td     { padding: 10px 10px; font-size: 12.5px; }

  .history-table { min-width: 380px; }

  /* Also hide Grand Total column on very small */
  .history-table thead th:nth-child(4),
  .history-table tbody td:nth-child(4) { font-size: 12px; padding: 10px 8px; }
}

@media (max-width: 420px) {
  #tab-history { padding: 12px 10px 44px; }
  .history-table { min-width: 340px; }
  .history-table thead th,
  .history-table td { padding: 9px 8px; font-size: 12px; }
  .btn-edit-row, .btn-delete-row, .btn-download-row {
    padding: 4px 7px; font-size: 11px;
  }
}


/* ══════════════════════════════════════════════════════════
   FIX 3 — INVENTORY TAB
   Problem: Stats cards, form card, product table all bleed
            outside screen width.
   Solution: Strict width containment on every element.
══════════════════════════════════════════════════════════ */

/* Stack the 2-column layout early */
@media (max-width: 900px) {
  .inv-layout {
    grid-template-columns: 1fr;   /* stack form above table */
    gap: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .inv-form-card { position: static; }
  .inv-stats     { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {

  /* Tab container */
  #tab-inventory {
    padding: 16px 14px 50px;
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Every direct child — contained */
  .inv-stats,
  .inv-layout,
  .inv-form-card,
  .inv-table-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Stats strip — 2 columns, then 1 */
  .inv-stats {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
  }

  .inv-stat-card {
    padding: 14px 14px;
    min-width: 0;               /* ← KEY: allow grid cell to shrink */
    box-sizing: border-box;
  }

  .inv-stat-value { font-size: 24px; }
  .inv-stat-label { font-size: 10.5px; }

  /* Form card */
  .inv-form-card  { padding: 16px 14px; overflow: hidden; }

  /* Table card */
  .inv-table-card { padding: 16px 14px; overflow: hidden; }

  /* Table header section */
  .inv-table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }

  .inv-table-header > div:last-child {
    width: 100%;
    flex-wrap: wrap;
  }

  /* Search */
  .inv-search-wrap  { width: 100%; }
  .inv-search-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 15px;
  }

  /* Refresh button */
  #invRefreshBtn { width: 100%; justify-content: center; }

  /* Table wrapper — SCROLL inside card */
  .inv-table-card .table-wrap {
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm);
  }

  /* Products table — minimum so columns don't collapse */
  .products-table {
    min-width: 320px;
    width: 100%;
  }

  .products-table thead th,
  .products-table td { padding: 10px 11px; font-size: 13px; }

  /* Hide SKU column — not critical on mobile */
  .products-table thead th:nth-child(2),
  .products-table tbody td:nth-child(2) { display: none; }

  /* Action buttons */
  .products-table td.td-actions { white-space: nowrap; }
  .action-btns { gap: 4px; }
  .btn-edit-row, .btn-delete-row { padding: 5px 9px; font-size: 12px; }

  /* Form inputs */
  .inv-form-card .form-input { font-size: 15px; }
  .inv-form-actions           { gap: 8px; }
  .inv-form-actions .btn      { min-height: 46px; }
}

@media (max-width: 576px) {

  #tab-inventory { padding: 14px 12px 48px; }

  /* Stats — full single column */
  .inv-stats { grid-template-columns: 1fr; gap: 8px; }

  /* Stats card — horizontal row on single col */
  .inv-stat-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
  }
  .inv-stat-value { font-size: 22px; }
  .inv-stat-label { font-size: 11px; }

  .inv-form-card  { padding: 14px 12px; }
  .inv-table-card { padding: 14px 12px; }

  .products-table { min-width: 280px; }

  .products-table thead th,
  .products-table td { padding: 9px 9px; font-size: 12.5px; }

  /* Also hide GST% column */
  .products-table thead th:nth-child(4),
  .products-table tbody td:nth-child(4) { display: none; }
}

@media (max-width: 420px) {
  #tab-inventory { padding: 12px 10px 44px; }
  .inv-stat-value { font-size: 20px; }
  .products-table { min-width: 240px; }
  .products-table thead th,
  .products-table td { padding: 8px 8px; font-size: 12px; }
  .inv-form-card,
  .inv-table-card { padding: 12px 10px; }
}

@media (max-width: 360px) {
  #tab-inventory { padding: 10px 8px 40px; }
  .inv-stat-value { font-size: 18px; }
}


/* ══════════════════════════════════════════════════════════
   CREATE INVOICE TAB — responsive fixes
══════════════════════════════════════════════════════════ */

@media (max-width: 992px) {
  .create-layout {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
    padding: 14px 18px;
    gap: 12px;
  }

  .create-left      { overflow: visible; }
  .create-right     { position: static; }
  .items-scroll     { max-height: 260px; overflow-x: auto; }
  .cp-items-section { overflow: visible; }

  /* Right col — 2 side by side on tablet */
  .create-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
  }
  .create-right .invoice-badge { grid-column: 1 / -1; }
  .right-totals                { grid-column: 1; }
  .right-actions               { grid-column: 2; }
}

@media (max-width: 768px) {
  .create-layout { padding: 12px 14px; gap: 10px; }

  .compact-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
  }
  .compact-bar-right { width: 100%; justify-content: space-between; }
  .cb-date           { width: 100% !important; }

  .cp-grid { grid-template-columns: 1fr; gap: 8px; }

  /* Horizontal scroll for invoice table on small screens — DO NOT break grid */
  .items-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep the master grid columns, just add a minimum width so it scrolls cleanly */
  .items-header, .item-row {
    min-width: 560px;
    gap: 5px;
  }
  #itemsContainer { min-width: 560px; }

  /* Stack right col on mobile */
  .create-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .right-totals   { padding: 12px 14px; }
  .rt-label       { font-size: 12.5px; }
  .rt-value       { font-size: 12.5px; }
  .rt-grand .rt-value { font-size: 16px; }

  .btn      { padding: 11px 18px; }
  .btn-full { width: 100%; justify-content: center; }
}

@media (max-width: 576px) {
  .create-layout { padding: 10px 12px; gap: 8px; }
  .cp-section    { padding: 10px 12px; }
  .cp-addr       { height: 44px; }

  .create-right .invoice-badge { display: none; }

  /* Still scroll — do NOT override grid-template-columns */
  .items-header, .item-row { min-width: 520px; gap: 4px; }
  #itemsContainer { min-width: 520px; }

  .right-actions .btn { padding: 13px; min-height: 48px; }
}

@media (max-width: 420px) {
  .create-layout { padding: 8px 10px; }
  .items-header, .item-row { min-width: 480px; gap: 3px; }
  #itemsContainer { min-width: 480px; }
}

@media (max-width: 360px) {
  .create-layout { padding: 6px 8px; }
  .items-header, .item-row { min-width: 440px; gap: 3px; }
  #itemsContainer { min-width: 440px; }
}

/* Landscape mobile — restore 2-col */
@media (max-width: 768px) and (orientation: landscape) {
  .create-layout {
    grid-template-columns: 1fr 200px;
    height: calc(100vh - 46px);
    overflow: hidden;
    padding: 8px 14px;
    gap: 10px;
  }
  .create-left      { overflow: hidden; }
  .create-right     { display: flex; flex-direction: column; gap: 8px; }
  .items-scroll     { max-height: calc(100vh - 260px); }
  .cp-items-section { overflow: hidden; }
}


/* ══════════════════════════════════════════════════════════
   MODALS — responsive
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .modal-overlay  { padding: 0; align-items: flex-end; }
  .modal-box      {
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    width: 100%;
    max-width: 100%;
  }
  .modal-body     { padding: 14px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .modal-header   { padding: 16px 18px 12px; }
  .modal-footer   { padding: 12px 18px; }
  .modal-title    { font-size: 16px; }

  /* Two-col form grid → single col inside modal */
  .modal-body .form-grid.two-col { grid-template-columns: 1fr; gap: 12px; }

  /* Edit items in modal */
  .edit-items-header,
  #editItemsContainer .item-row {
    grid-template-columns: 120px 50px 88px 58px 90px 32px;
    min-width: 460px;
    gap: 6px;
  }
}

@media (max-width: 576px) {
  .modal-footer {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .modal-footer .btn { width: 100%; justify-content: center; min-height: 48px; }

  .edit-items-header,
  #editItemsContainer .item-row {
    grid-template-columns: 110px 46px 80px 54px 82px 30px;
    min-width: 420px;
    gap: 4px;
  }
}

@media (max-width: 420px) {
  .modal-header { padding: 14px 14px 10px; }
  .modal-body   { padding: 12px 14px; }
  .modal-title  { font-size: 15px; }

  .edit-items-header,
  #editItemsContainer .item-row {
    grid-template-columns: 100px 40px 74px 50px 74px 28px;
    min-width: 390px;
    gap: 4px;
  }
}

/* Landscape — center modal */
@media (max-width: 768px) and (orientation: landscape) {
  .modal-overlay  { align-items: center; padding: 8px; }
  .modal-box      { border-radius: 14px; max-width: 600px; max-height: 96vh; }
}


/* ══════════════════════════════════════════════════════════
   TOUCH TARGETS — 44px minimum (Apple HIG)
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .btn-remove-item  { width: 40px; height: 40px; font-size: 20px; }
  .btn-add-item     { min-height: 46px; padding: 12px; font-size: 14px; }
  .modal-close      { width: 36px; height: 36px; font-size: 22px; }
  .sf-tab           { min-height: 38px; }
  .sf-clear         { min-height: 38px; }
  .sf-date-input    { min-height: 40px; }
  .tab-btn          { min-height: 36px; }

  .cp-items-section .btn-add-item { min-height: 44px; }
  .item-product-select            { min-height: 36px; }
  .item-stock-hint                { font-size: 11px; }
}


/* ══════════════════════════════════════════════════════════
   TOAST — full width on mobile
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .toast {
    left: 12px;
    right: 12px;
    bottom: 16px;
    max-width: 100%;
    text-align: center;
  }
}


/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */

@media (max-width: 576px) {
  .site-footer { font-size: 11.5px; padding: 16px 12px; }
}

/* ══════════════════════════════════════════════════════════
   v5 — HEADER NAVIGATION: COLUMN LAYOUT ON MOBILE
   Replaces the horizontal-scroll approach (v3) with a
   stacked layout: logo on top, nav row below, equal widths.
   
   ≤ 768px  → column header, full-width nav, 33.33% tabs
   ≤ 480px  → compact, centred logo, reduced height
   Desktop  → untouched (rules are inside media queries)
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Header: switch to column layout ─────────────────── */
  .site-header {
    position: sticky;  /* keep sticky behaviour */
  }

  .header-inner {
    flex-direction: column;     /* logo on top, nav below  */
    align-items: stretch;       /* children fill full width */
    justify-content: center;
    height: auto;               /* let content set height   */
    padding: 10px 12px 0;       /* top gap; nav adds bottom */
    gap: 0;
  }

  /* ── Brand row: centred on mobile ─────────────────────── */
  .brand {
    justify-content: center;    /* logo centred              */
    padding: 4px 0 8px;
    flex-shrink: 0;
  }

  .brand-icon { font-size: 20px; }
  .brand-name { font-size: 17px; white-space: nowrap; }

  /* ── Tab nav: full-width, no scroll, one row ─────────── */
  .tab-nav {
    display: flex;
    flex-direction: row;        /* tabs in a single row      */
    align-items: center;
    flex-wrap: nowrap;          /* never wrap to second line */
    overflow: visible;          /* no horizontal scroll      */
    overflow-x: unset;
    width: 100%;                /* fill header width         */
    gap: 0;
    padding: 0;
    background: rgba(0,0,0,0.15);
    border-radius: 0;           /* flush with header edges   */
    border-top: 1px solid rgba(255,255,255,0.1);
    /* Fixed height — no reflow when active class toggles */
    height: 42px;
    box-sizing: border-box;
    contain: layout style;
  }

  /* Scrollbar — hidden (safety, but overflow is off) */
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-nav { scrollbar-width: none; }

  /* ── Each tab button: equal width (33.33%) ────────────── */
  .tab-btn {
    flex: 1 1 0;                /* equal share of full width */
    min-width: 0;               /* allow shrinking           */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    padding: 10px 4px;
    font-size: 12.5px;
    border-radius: 0;           /* no rounding inside strip  */
    /* No transform — eliminates vertical shift on activation */
    transform: none !important;
    opacity: 0.72;
  }

  /* Active tab stays gold — no layout-affecting properties change */
  .tab-btn.active {
    background: var(--gold);
    color: var(--accent);
    font-weight: 600;
    opacity: 1;
    transform: none !important;
  }

  /* Hover — visible on touch devices that support it */
  .tab-btn:hover:not(.active) {
    background: rgba(255,255,255,0.12);
    opacity: 1;
  }

  /* ── Give header enough bottom space for the nav strip ── */
  /* (no extra padding needed — nav strip sits flush)        */
}


@media (max-width: 480px) {

  .header-inner {
    padding: 8px 10px 0;
  }

  /* Logo: stay centred, slightly smaller */
  .brand { padding: 2px 0 6px; }
  .brand-icon { font-size: 18px; }
  .brand-name { font-size: 15px; }

  /* Nav strip: compact height */
  .tab-nav {
    /* width already 100% from 768px rule */
  }

  .tab-btn {
    padding: 8px 2px;
    font-size: 11.5px;
    letter-spacing: 0;
  }
}

/* ── Landscape mobile: revert to single-row header ───────
   On landscape phones the viewport is wide enough to fit
   brand + nav side by side without scrolling.
────────────────────────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {

  .header-inner {
    flex-direction: row;        /* back to side-by-side      */
    align-items: center;
    height: 46px;
    padding: 0 14px;
    gap: 10px;
  }

  .brand {
    justify-content: flex-start;
    padding: 0;
  }

  .tab-nav {
    flex: 1;
    overflow-x: auto;           /* scroll if needed landscape */
    border-top: none;
    border-radius: var(--radius);
    padding: 3px;
    background: rgba(255,255,255,0.1);
    gap: 3px;
    width: auto;
  }

  .tab-btn {
    flex: 0 0 auto;             /* natural width in landscape */
    padding: 6px 14px;
    font-size: 12px;
    border-radius: var(--radius-sm);
  }
}

/* ══════════════════════════════════════════════════════════
   v6 — CREATE INVOICE: MOBILE IMPROVEMENTS
   
   1. Line items → stacked card layout (no horizontal scroll)
   2. Payment mode checkboxes → equal-width 3-column row
   3. Totals card → full width, right-aligned, better spacing
   4. Action buttons → full width, equal height, clear order
   5. Global overflow safety for Create tab
   
   ≤ 768px  → primary mobile overrides
   ≤ 480px  → compact refinements
   Desktop  → zero changes (all rules inside media queries)
══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   1 — LINE ITEMS: HORIZONTAL SCROLL (desktop grid preserved)
   
   NOTE: Item rows now use horizontal scroll on mobile.
   The stacked card layout below (≤540px) overrides this
   only on very small phones. Do NOT add grid-template-columns
   overrides in this block — that is controlled by --inv-cols
   in style.css and invoice-ui-upgrade.css exclusively.
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Scroll wrapper keeps items readable without breaking columns */
  .cp-items-section .items-scroll,
  #itemsContainer.items-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* "Add Line Item" button — full width */
  #addItemBtn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 14px;
    margin-top: 8px;
  }
}


/* ══════════════════════════════════════════════════════════
   2 — PAYMENT MODE: 3-COLUMN EQUAL CHECKBOX ROW
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .checkbox-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
    gap: 8px;
    padding: 10px 12px;
    align-items: center;
  }

  .checkbox-option {
    justify-content: center;   /* centre checkbox + label in column */
    gap: 6px;
    padding: 8px 4px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    min-height: 44px;          /* touch target */
    flex-direction: column;    /* icon above text for clarity */
    align-items: center;
    text-align: center;
  }

  .checkbox-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: unset !important;
    font-size: unset !important;
  }

  .checkbox-label {
    font-size: 12px;
    line-height: 1.2;
  }
}

@media (max-width: 480px) {
  .checkbox-option { padding: 7px 2px; min-height: 48px; }
  .checkbox-label  { font-size: 11.5px; }
}


/* ══════════════════════════════════════════════════════════
   3 — TOTALS CARD: FULL WIDTH, RIGHT-ALIGNED AMOUNTS
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .right-totals {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    gap: 10px;               /* more breathing room between rows */
  }

  /* Every total row: label left, amount right */
  .rt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

  .rt-label {
    font-size: 13px;
    flex-shrink: 0;
  }

  /* Amount: right-aligned, no overflow */
  .rt-value {
    font-size: 13.5px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;          /* prevent very long numbers pushing label off */
  }

  /* Grand Total: visually prominent */
  .rt-grand .rt-label {
    font-size: 15px;
    font-weight: 700;
  }

  .rt-grand .rt-value {
    font-size: 20px;          /* larger than v3's 16px for emphasis */
    max-width: 65%;
  }

  .rt-divider { margin: 4px 0; }
}

@media (max-width: 480px) {
  .right-totals         { padding: 14px 14px; }
  .rt-grand .rt-value   { font-size: 18px; }
}


/* ══════════════════════════════════════════════════════════
   4 — ACTION BUTTONS: FULL WIDTH, EQUAL HEIGHT, ORDERED
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .right-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  /* All three buttons: full width, equal height */
  .right-actions .btn {
    width: 100% !important;
    justify-content: center;
    min-height: 50px;
    font-size: 14.5px;
    padding: 14px 20px;
    box-sizing: border-box;
  }

  /* Save — primary visual weight on mobile */
  #saveBtn {
    order: 1;
  }

  /* Download — secondary */
  #downloadBtn {
    order: 2;
  }

  /* Reset — least prominent, last */
  #resetBtn {
    order: 3;
    min-height: 44px;       /* slightly less height for ghost button */
    font-size: 13.5px;
  }
}

@media (max-width: 480px) {
  .right-actions .btn { min-height: 48px; font-size: 14px; }
  #resetBtn           { min-height: 42px; }
}


/* ══════════════════════════════════════════════════════════
   5 — GLOBAL OVERFLOW SAFETY (Create Invoice tab)
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Absolute overflow kill-switch */
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  /* Create tab container */
  #tab-create {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* Left column: no overflow */
  .create-left {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Items section: contained */
  .cp-items-section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;        /* cards need to show, not clip */
  }

  /* No child should exceed viewport */
  .cp-section,
  .create-right,
  .right-totals,
  .right-actions {
    max-width: 100%;
    box-sizing: border-box;
  }
}




/* ══════════════════════════════════════════════════════════
   v7 — HEADER NAV: PREMIUM PILL DESIGN, ALL BREAKPOINTS
   
   Consolidates and supersedes the nav portions of v3 and v5.
   Preserves all overflow/scroll safety from v3.
   Ensures pill style is consistent from 1100px → 360px.
   
   Rules are ordered mobile-last so they win the cascade:
     Base (desktop, already in style.css)
     ≤ 900px  → shrink, keep pill, allow scroll if needed
     ≤ 768px  → column layout, inset pill nav, equal buttons
     ≤ 480px  → compact, centred, reduced sizing
     ≤ 360px  → minimal, still functional
     landscape → single-row side-by-side revert
══════════════════════════════════════════════════════════ */


/* ── ≤ 900px: shrink gracefully, keep pill intact ─────────
   Overrides v3's flat gap/padding with pill-consistent vals
────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  .header-inner {
    padding: 0 18px;
    height: 58px;
    flex-wrap: nowrap;
    gap: 12px;
    overflow: visible;   /* pills can breathe, not clip */
  }

  .brand       { flex-shrink: 0; min-width: 0; }
  .brand-icon  { font-size: 20px; }
  .brand-name  { font-size: 18px; white-space: nowrap; }

  /* Pill container — keep rounded shape, allow scroll */
  .tab-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-shrink: 1;
    min-width: 0;
    /* Preserve pill aesthetics */
    gap: 4px;
    padding: 5px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
  }

  .tab-nav::-webkit-scrollbar { display: none; }

  /* Each button — pill shape, snug padding */
  .tab-btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 7px 16px;
    font-size: 13px;
    border-radius: 999px;
  }

  /* Active keeps shadow, no lift to save vertical space */
  .tab-btn.active {
    transform: none;
    box-shadow: 0 1px 6px rgba(200,154,58,0.4);
  }
}

@media (max-width: 900px) and (min-width: 769px) {
  /* 769–900px: still side-by-side, just tighter */
  .header-inner { height: 56px; }
}


/* ── ≤ 768px: column layout with inset pill nav ───────────
   Logo centres on top row. Nav fills full width below it,
   rendered as a contained pill strip with equal-width tabs.
────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Header wrapper: two-row column ─────────────────── */
  .site-header {
    position: sticky;
  }

  .header-inner {
    flex-direction: column;
    align-items: center;         /* centre both rows          */
    justify-content: center;
    height: auto;
    padding: 10px 14px 10px;    /* even top & bottom padding */
    gap: 8px;
    overflow: visible;
  }

  /* ── Brand: centred, consistent vertical rhythm ──────── */
  .brand {
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
  }

  .brand-icon { font-size: 20px; }
  .brand-name { font-size: 16px; white-space: nowrap; }

  /* ── Tab nav: full-width pill container ──────────────── */
  .tab-nav {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Pill aesthetic maintained */
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
    box-sizing: border-box;
  }

  .tab-nav::-webkit-scrollbar { display: none; }

  /* ── Each button: equal share, pill shape ────────────── */
  .tab-btn {
    flex: 1 1 0;                 /* equal width               */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    padding: 8px 6px;
    font-size: 12.5px;
    border-radius: 999px;        /* pill per-button           */
    transform: none;             /* no lift on mobile         */
  }

  /* Hover: subtle only — no transform on touch */
  .tab-btn:hover {
    transform: none;
  }

  /* Active: gold pill, warm shadow, no vertical lift */
  .tab-btn.active {
    background: var(--gold);
    color: var(--accent);
    font-weight: 600;
    transform: none;
    box-shadow: 0 1px 8px rgba(200,154,58,0.45);
  }

  .tab-btn:hover:not(.active) {
    background: rgba(255,255,255,0.13);
    transform: none;
  }
}


/* ── ≤ 480px: compact but still clean ────────────────────── */
@media (max-width: 480px) {

  .header-inner {
    padding: 8px 10px 8px;
    gap: 6px;
  }

  .brand-icon { font-size: 18px; }
  .brand-name { font-size: 14px; }

  .tab-nav {
    gap: 3px;
    padding: 3px;
  }

  .tab-btn {
    padding: 8px 4px;
    font-size: 11.5px;
    letter-spacing: 0;
  }
}


/* ── ≤ 360px: minimal, functional, still pill ────────────── */
@media (max-width: 360px) {

  .header-inner { padding: 7px 8px 7px; gap: 5px; }
  .brand-name   { font-size: 13px; }

  .tab-btn {
    padding: 7px 2px;
    font-size: 11px;
  }
}


/* ── Landscape mobile: revert to horizontal single row ───── */
@media (max-width: 768px) and (orientation: landscape) {

  .header-inner {
    flex-direction: row;
    align-items: center;
    height: 46px;
    padding: 0 14px;
    gap: 12px;
  }

  .brand {
    justify-content: flex-start;
    padding: 0;
    flex-shrink: 0;
  }

  .brand-icon { font-size: 18px; }
  .brand-name { font-size: 14px; }

  .tab-nav {
    flex: 1;
    width: auto;
    overflow-x: auto;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  }

  .tab-btn {
    flex: 0 0 auto;
    padding: 6px 14px;
    font-size: 12px;
    border-radius: 999px;
    text-overflow: clip;
  }
}

/* ══════════════════════════════════════════════════════════
   LINE ITEMS — MOBILE CARD LAYOUT (≤ 540px)
   Desktop grid → mobile labeled card per item row
══════════════════════════════════════════════════════════ */

/* ── Desktop: item-field wrappers are transparent grid children ── */
.item-field {
  display: contents; /* acts as if wrapper doesn't exist in grid */
}

.item-field-label {
  display: none; /* hidden on desktop — header row shows column names */
}

/* ── Mobile: switch to card layout ────────────────────────────── */
@media (max-width: 540px) {

  /* Hide the sticky column header row */
  .items-header {
    display: none !important;
  }

  /* Scroll wrapper: no horizontal scroll needed in card mode */
  .items-table-wrap {
    overflow-x: visible !important;
  }

  /* Each item-row becomes a card */
  .item-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 12px !important;
    min-width: 0 !important;
    background: var(--surface, #fff);
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: 10px;
    padding: 12px 12px 12px 12px !important;
    margin-bottom: 10px;
    position: relative;
  }

  /* item-field: become a real flex column (label on top, input below) */
  .item-field {
    display: flex !important;
    flex-direction: column;
    gap: 3px;
  }

  /* Show labels above each input */
  .item-field-label {
    display: block !important;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-light, #888);
    white-space: nowrap;
  }

  /* Description — full width, spans both columns */
  .item-field--name {
    grid-column: 1 / -1;
  }

  /* Row Total — full width, last */
  .item-field--total {
    grid-column: 1 / -1;
  }

  /* Remove button — full-width red button at bottom of card */
  .item-row .btn-remove-item {
    position: static !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    height: 40px !important;
    min-width: unset !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 0 12px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: #fff0f0 !important;
    color: #dc2626 !important;
    border: 1.5px solid #fca5a5 !important;
    cursor: pointer;
    margin-top: 4px !important;
    order: 99 !important;
  }

  /* Hide the raw × character — ::before shows "Remove Item" label */
  .item-row .btn-remove-item {
    font-size: 0 !important;
    color: transparent !important;
  }

  .item-row .btn-remove-item::before {
    content: '✕  Remove Item';
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #dc2626 !important;
  }

  /* Inputs inside card */
  .item-row .form-input {
    width: 100%;
    box-sizing: border-box;
    font-size: 15px !important;
    padding: 9px 10px !important;
  }

  /* Row total display */
  .item-row .item-subtotal {
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: right;
    padding: 8px 12px !important;
    background: rgba(28,53,87,0.07) !important;
    border-radius: 6px;
    width: 100%;
    box-sizing: border-box;
  }

  /* VAT-only field hidden in non-vat mode */
  body.no-vat-mode .item-field--vat {
    display: none !important;
  }
}



/* ══════════════════════════════════════════════════════════
   ↓↓↓  MERGED FROM: history-fullwidth.css  (latest)  ↓↓↓
   Full-width layout overrides for Invoice History tab.
   Replaces the older version that was previously here.
══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   history-fullwidth.css
   Full-width layout overrides for the Invoice History tab.
   Load AFTER: style.css → responsive.css
   Does NOT affect Create Invoice or Inventory tabs.
══════════════════════════════════════════════════════════ */


/* ── 1. Remove max-width constraint, use full viewport ──── */
#tab-history {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 32px 40px 60px !important;
}


/* ── 2. History page header row (title + Refresh btn) ───── */
#tab-history .history-header,
#tab-history > .section-header,
#tab-history > div:first-child {
  max-width: 100%;
}


/* ── 3. Search / filter card — stretch full width ────────── */
#tab-history .search-filter-card,
#tab-history .sf-card,
#tab-history [class*="filter"],
#tab-history [class*="search-bar"] {
  max-width: 100% !important;
}


/* ── 4. Table wrapper — full width ───────────────────────── */
#historyTableWrap {
  width: 100% !important;
  max-width: 100% !important;
}


/* ── 5. Table itself — full width with breathing room ────── */
.history-table {
  width: 100%;
  table-layout: auto;
}


/* ── 6. More generous column padding for spacious feel ───── */
.history-table thead th {
  padding: 14px 22px;
}

.history-table td {
  padding: 15px 22px;
}


/* ── 7. Actions column — fixed width to hold all 4 buttons ─ */
.history-table th:last-child,
.history-table td:last-child {
  width: 490px;
  min-width: 490px;
}

/* ── Actions cell: flex row, never wrap ──────────────────── */
.actions-cell,
.action-btns {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}

/* ── Base action button — fixed size regardless of text ───── */
.action-btn {
  min-width: 110px;
  width: 110px;          /* hard width — text never stretches it */
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: 7px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background 0.17s, color 0.17s, border-color 0.17s, transform 0.1s;
  text-align: center;
  flex-shrink: 0;
}

.action-btn:hover  { transform: translateY(-1px); }
.action-btn:active { transform: translateY(0);    }

/* ── Delete button — slightly wider for "Request Delete" ──── */
.delete-btn {
  min-width: 120px;
  width: 120px;
}

/* ── Button order anchor: ensure Edit | View | PDF | Delete ─ */
.action-btn--edit   { order: 1; }
.action-btn--view   { order: 2; }
.action-btn--pdf    { order: 3; }
.action-btn--delete { order: 4; }

/* ── Edit button variants (same size, colour changes only) ── */
.action-btn--edit {
  color: var(--accent, #1C3557);
  background: rgba(28,53,87,0.07);
  border-color: rgba(28,53,87,0.18);
}
.action-btn--edit:hover {
  background: var(--accent, #1C3557);
  color: #fff;
  border-color: var(--accent, #1C3557);
}
/* Pending state — amber tint, same dimensions */
.action-btn--edit.is-pending {
  color: #92400e;
  background: #fef3c7;
  border-color: #fcd34d;
}
.action-btn--edit.is-pending:hover {
  background: #f59e0b;
  color: #fff;
  border-color: #f59e0b;
}

/* ── View button ─────────────────────────────────────────── */
.action-btn--view {
  color: #0369a1;
  background: #e0f2fe;
  border-color: #7dd3fc;
}
.action-btn--view:hover {
  background: #0284c7;
  color: #fff;
  border-color: #0284c7;
}

/* ── PDF button ──────────────────────────────────────────── */
.action-btn--pdf {
  color: #7c3aed;
  background: #ede9fe;
  border-color: #c4b5fd;
}
.action-btn--pdf:hover {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}

/* ── Delete button variants (same size, colour changes only) */
.action-btn--delete {
  color: #b91c1c;
  background: #fee2e2;
  border-color: #fca5a5;
}
.action-btn--delete:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
/* Pending state — orange tint, same dimensions */
.action-btn--delete.is-pending {
  color: #9a3412;
  background: #ffedd5;
  border-color: #fdba74;
}
.action-btn--delete.is-pending:hover {
  background: #ea580c;
  color: #fff;
  border-color: #ea580c;
}


/* ── 8. Invoice # column — fixed, no wrapping ────────────── */
.history-table th:first-child,
.history-table td:first-child {
  min-width: 130px;
  white-space: nowrap;
}


/* ── 9. Customer column — allow growth ───────────────────── */
.history-table th:nth-child(2),
.history-table td:nth-child(2) {
  min-width: 140px;
}


/* ── 10. Responsive — scale padding down gracefully ─────── */
@media (max-width: 1200px) {
  #tab-history {
    padding: 28px 28px 60px !important;
  }
}

@media (max-width: 992px) {
  #tab-history {
    padding: 24px 20px 48px !important;
  }

  .history-table thead th,
  .history-table td {
    padding: 12px 14px;
  }
}

@media (max-width: 768px) {
  #tab-history {
    padding: 18px 14px 40px !important;
  }

  .history-table th:last-child,
  .history-table td:last-child {
    width: auto;
    min-width: unset;
  }

  /* Stack buttons 2×2 on narrow screens */
  .actions-cell,
  .action-btns {
    flex-wrap: wrap;
  }

  .action-btn {
    min-width: 100px;
    width: 100px;
    font-size: 12px;
    height: 30px;
  }

  .delete-btn {
    min-width: 110px;
    width: 110px;
  }
}

@media (max-width: 576px) {
  #tab-history {
    padding: 14px 10px 32px !important;
  }

  .history-table thead th,
  .history-table td {
    padding: 10px 10px;
  }
}

/* ══════════════════════════════════════════════════════════
   ADVANCED FILTER BAR
══════════════════════════════════════════════════════════ */

.adv-filter-card {
  gap: 12px !important;
}

/* Row 1: search + clear button */
.adv-filter-row--search {
  display: flex;
  align-items: center;
  gap: 12px;
}

.adv-search-wrap {
  flex: 1;
}

/* Row 2: filter chips */
.adv-filter-row--filters {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.adv-filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.adv-filter-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-light);
  white-space: nowrap;
}

.adv-filter-input {
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--bg);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  min-width: 130px;
}

.adv-filter-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(28,53,87,0.09);
  background: var(--surface);
}

.adv-filter-select {
  cursor: pointer;
  min-width: 120px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}

/* Number inputs — narrower */
#filterMinTotal,
#filterMaxTotal {
  min-width: 110px;
  max-width: 130px;
}

/* Date inputs */
#filterFrom,
#filterTo {
  min-width: 148px;
}

/* Active filter highlight */
.adv-filter-input:not(:placeholder-shown),
.adv-filter-input[value]:not([value=""]) {
  border-color: var(--accent);
  background: rgba(28,53,87,0.03);
}


/* ══════════════════════════════════════════════════════════
   SORTABLE COLUMN HEADERS
══════════════════════════════════════════════════════════ */

.th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  position: relative;
}

.th-sort:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
}

.th-sort--active {
  background: rgba(255,255,255,0.13) !important;
  color: #ffffff !important;
}

.sort-icon {
  display: inline-block;
  font-size: 10px;
  opacity: 0.85;
  letter-spacing: 0;
  margin-left: 2px;
  vertical-align: middle;
  color: #f0d080;
  font-weight: 700;
  min-width: 10px;
}

/* Subtle hint: all sortable headers show a faint down arrow on hover */
.th-sort:not(.th-sort--active):hover .sort-icon::after {
  content: ' ⇅';
  opacity: 0.45;
  font-size: 9px;
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE: ADVANCED FILTERS
══════════════════════════════════════════════════════════ */

@media (max-width: 992px) {
  .adv-filter-row--filters {
    gap: 10px;
  }
  .adv-filter-input {
    min-width: 110px;
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .adv-filter-row--search {
    flex-wrap: wrap;
  }
  .adv-filter-row--filters {
    gap: 8px;
  }
  #filterMinTotal,
  #filterMaxTotal {
    max-width: 110px;
  }
}

@media (max-width: 576px) {
  .adv-filter-row--filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .adv-filter-input {
    min-width: 0;
    width: 100%;
    font-size: 15px;
  }
  #filterMinTotal,
  #filterMaxTotal {
    max-width: none;
  }
}

/* ══════════════════════════════════════════════════════════
   HISTORY TITLE ROW — action buttons cluster
══════════════════════════════════════════════════════════ */

.history-title-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Export Excel button ─────────────────────────────────── */
.btn-excel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #166534;
  background: #dcfce7;
  border: 1.5px solid #86efac;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.1s;
  letter-spacing: 0.01em;
}

.btn-excel:hover {
  background: #bbf7d0;
  border-color: #4ade80;
  color: #14532d;
  transform: translateY(-1px);
}

.btn-excel:active {
  transform: translateY(0);
  background: #86efac;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 576px) {
  .history-title-actions {
    gap: 7px;
  }

  .btn-excel {
    padding: 7px 12px;
    font-size: 12.5px;
  }
}

/* ══════════════════════════════════════════════════════════
   MOBILE FIX — History page (≤ 480px)
   Fixes filter overflow + table horizontal scroll
══════════════════════════════════════════════════════════ */

/* ── Prevent page itself from overflowing ────────────────── */
#tab-history {
  overflow-x: hidden;
}

/* ── Filter card: single column stack on mobile ──────────── */
@media (max-width: 480px) {

  /* Search row: stack search + clear button vertically */
  .adv-filter-row--search {
    flex-direction: column;
    align-items: stretch;
  }

  .adv-search-wrap {
    width: 100%;
  }

  .sf-clear {
    width: 100%;
    text-align: center;
  }

  /* Filters row: full single column, no overflow */
  .adv-filter-row--filters {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .adv-filter-group {
    width: 100%;
  }

  /* All filter inputs: stretch full width, reset min-width */
  .adv-filter-input,
  #filterFrom,
  #filterTo,
  #filterMinTotal,
  #filterMaxTotal {
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px !important; /* prevent iOS zoom */
  }
}

/* ── Table: enable horizontal scroll on small screens ────── */
@media (max-width: 768px) {
  .table-wrap,
  #historyTableWrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .history-table {
    min-width: 600px; /* table never shrinks below this */
  }
}