/* ==============================================================
   responsive.css — Warqa responsive layer
   Loaded AFTER style.css so it can override without !important.

   Breakpoints (mobile-first mental model, but CSS uses max-width
   for simplicity since style.css is desktop-first):
     Mobile   : ≤ 640px    — one-handed phone use, single column
     Tablet   : 641–1024px — comfortable multi-column
     Desktop  : ≥ 1025px   — existing design, no changes needed

   Design tokens live here so any page CSS can read them via var().
   ============================================================== */

:root {

  --bp-mobile: 640px;
  --bp-tablet: 1024px;

  /* Container padding: shrinks on smaller screens so content isn't
     visually strangled on a 375px phone. Overridden per-breakpoint below. */
  --container-padding-x: 28px;
  --container-padding-y-top: 36px;
  --container-padding-y-bottom: 80px;
  --section-gap: 40px;
  --card-padding-x: 22px;
  --card-padding-y: 20px;
}

@media (max-width: 1024px) {
  :root {
    --container-padding-x: 24px;
    --container-padding-y-top: 28px;
    --container-padding-y-bottom: 64px;
    --section-gap: 32px;
  }
}

@media (max-width: 640px) {
  :root {
    --container-padding-x: 16px;
    --container-padding-y-top: 20px;
    --container-padding-y-bottom: 48px;
    --section-gap: 24px;
    --card-padding-x: 18px;
    --card-padding-y: 16px;
  }
}

/* Apply the padding tokens to main. Your existing `main` rule stays
   as-is in style.css — this override just wires it to the tokens. */
main {
  padding: var(--container-padding-y-top) var(--container-padding-x) var(--container-padding-y-bottom);
}

/* Section-head spacing scales too. Your existing rule sets
   `margin: 40px 0 18px;` — this ties the top margin to --section-gap. */
.section-head {
  margin-top: var(--section-gap);
}
.section-head:first-of-type {
  margin-top: 0;  /* first section already has main's padding above it */
}

:root {
  --font-base: 15px;
  --font-scale-sm: 0.87;   /* small text: 13px at 15px base */
  --font-scale-md: 1;      /* body: 15px */
  --font-scale-lg: 1.2;    /* subheads: 18px */
  --font-scale-xl: 1.47;   /* h2: 22px */
  --font-scale-2xl: 1.87;  /* h1: 28px */
}

html {
  font-size: var(--font-base);
}

body {
  font-size: 1rem;              /* = 15px */
  line-height: 1.5;
}

/* Heading scale */
.section-head h2 {
  font-size: 1.47rem;           /* was 22px */
}
.greeting h1 {
  font-size: 1.87rem;           /* was 28px */
}

/* Common text roles */
.eyebrow {
  font-size: 0.73rem;           /* was 11px — micro caps */
}
.stat .num {
  font-size: 2.13rem;           /* was 32px — big numeric readout */
}

/* Mobile type sizing.
   On phones, we shrink the largest sizes so headings don't dominate the
   viewport. Body text stays put — it's already comfortable at 15px on
   small screens. */
@media (max-width: 640px) {
  .greeting h1 {
    font-size: 1.47rem;         /* was 28px, now behaves like 22px */
    line-height: 1.2;
  }
  .section-head h2 {
    font-size: 1.27rem;         /* was 22px, now behaves like ~19px */
  }
  .stat .num {
    font-size: 1.73rem;         /* was 32px, now ~26px */
  }
  .stat.risk .num {
    font-size: 1.4rem;          /* was 26px, keep it smaller than default */
  }
}
/* ==============================================================
   Block 3 — Touch targets + form field heights
   Ensures buttons and form inputs are tappable on mobile without
   changing your desktop density.
   ============================================================== */

@media (max-width: 640px) {
  /* Every button, input, and select on mobile hits the 44px floor.
     Applied as min-height, not height — so existing paddings and
     multiline buttons still expand naturally. */
  button,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  select,
  textarea,
  .custom-dropdown-trigger,
  .warqa-trigger,
  a.ghost-btn,
  a.primary-btn,
  label.ghost-btn {
    min-height: 44px;
  }

  /* Textarea is a special case — we want a comfortable typing area,
     not a 44px squished box. Bump to a reasonable minimum. */
  textarea {
    min-height: 88px;   /* ~2 rows at comfortable line-height */
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* Buttons keep their existing font-size — no iOS zoom trigger there. */

  /* Row-action buttons (Edit / Delete on list rows) are intentionally
     small on desktop (10px font). On mobile they need more finger room —
     bump padding, keep the small text. */
  .item-actions button,
  .row-actions button,
  .invoice-row .row-actions button {
    padding: 10px 14px;
  }

  /* Tiny buttons (button.tiny) same treatment. */
  button.tiny {
    padding: 10px 14px;
    font-size: 11px;
  }
}
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
.custom-dropdown-trigger:focus-visible,
.warqa-trigger:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
/* ==============================================================
   Block 4 — Layout utilities + shared grid overrides
   ============================================================== */

@media (max-width: 640px) {
  .stack-on-mobile {
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }
  .stack-on-mobile > * {
    width: 100%;
  }
}

/* --- .flex-wrap-on-mobile ---
   Softer than stack — for section-head-actions and similar rows that
   should wrap when out of space rather than force single-column.
*/
@media (max-width: 640px) {
  .flex-wrap-on-mobile {
    flex-wrap: wrap;
    gap: 8px;
  }
  .flex-wrap-on-mobile > * {
    flex: 1 1 auto;
  }
}

@media (max-width: 400px) {
  .stats {
    grid-template-columns: 1fr;
  }
}

/* --- .attention-row (dashboard) ---
   Currently 3 columns at all sizes. Stack below 640px. */
@media (max-width: 640px) {
  .attention-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (max-width: 640px) {
  .quick-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .quick-action {
    min-height: 88px;
    padding: 16px 18px;
  }
  .quick-action .qa-icon {
    margin-bottom: 6px;
  }
}
@media (max-width: 640px) {
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 14px;
  }
  .section-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .modal {
    padding: 12px;
    align-items: flex-start;   /* modals anchor to top on mobile so long forms scroll naturally */
    padding-top: 20px;
  }
  .modal-body {
    max-width: 100%;
    padding: 24px 20px;
    max-height: calc(100vh - 40px);
  }
  .modal-body.wide {
    max-width: 100%;
  }
  .modal-overlay {
    padding: 12px;
  }
  .modal-box {
    padding: 24px 20px;
  }
}
@media (max-width: 640px) {
  .toast-container {
    top: 12px;
    right: 12px;
    left: 12px;
    max-width: none;
  }
  .toast {
    padding: 12px 14px;
  }
}
/* ==============================================================
  Mobile navigation (hamburger + overlay sheet)
   ============================================================== */

/* Hamburger button — hidden on desktop, shown on mobile */
.hamburger-btn {
  display: none;
  background: none;
  border: 1px solid #2E3B4F;
  color: var(--paper);
  padding: 8px 10px;
  border-radius: 2px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}
.hamburger-btn:hover { border-color: var(--amber); color: var(--amber); }

/* Icon: three lines, drawn with CSS so no external asset */
.hamburger-icon {
  display: inline-block;
  width: 18px;
  height: 12px;
  position: relative;
}
.hamburger-icon::before,
.hamburger-icon::after,
.hamburger-icon span {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s, opacity 0.2s;
}
.hamburger-icon::before { top: 0; }
.hamburger-icon span { top: 50%; transform: translateY(-50%); }
.hamburger-icon::after { bottom: 0; }

/* When menu is open, animate to an X */
.hamburger-btn.open .hamburger-icon::before {
  transform: translateY(5px) rotate(45deg);
}
.hamburger-btn.open .hamburger-icon span { opacity: 0; }
.hamburger-btn.open .hamburger-icon::after {
  transform: translateY(-5px) rotate(-45deg);
}


.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ink);
  color: var(--paper);
  z-index: 1000;
  display: none;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.open { display: flex; }

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 3px solid var(--amber);
}
.mobile-menu-header .brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.mobile-menu-header .brand-mark {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 22px;
  color: var(--amber);
  font-weight: 500;
}
.mobile-menu-header .brand-name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mobile-menu-close {
  background: none;
  border: 1px solid #2E3B4F;
  color: var(--paper);
  padding: 8px 10px;
  border-radius: 2px;
  cursor: pointer;
  width: 40px;
  height: 40px;
}

.mobile-menu-section {
  padding: 24px 20px 8px;
}
.mobile-menu-section-label {
  font-family: 'IBM Plex Mono';
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 12px;
}

.mobile-menu-link {
  display: block;
  padding: 16px 20px;
  color: #E5E9F0;
  text-decoration: none;
  font-size: 17px;
  border-left: 3px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.mobile-menu-link:hover,
.mobile-menu-link:focus-visible {
  background: rgba(232, 163, 61, 0.08);
  color: var(--amber);
  border-left-color: var(--amber);
}
.mobile-menu-link.current {
  background: rgba(232, 163, 61, 0.12);
  color: var(--amber);
  border-left-color: var(--amber);
  font-weight: 500;
}
.mobile-menu-link .mm-sub {
  display: block;
  font-size: 12px;
  color: #B7BCC9;
  margin-top: 2px;
  letter-spacing: 0;
  font-weight: 400;
}
.mobile-menu-link.current .mm-sub { color: rgba(232, 163, 61, 0.7); }

.mobile-menu-footer {
  margin-top: auto;
  padding: 24px 20px;
  border-top: 1px solid #2E3B4F;
}
.mobile-menu-footer .user-info {
  font-size: 13px;
  color: #B7BCC9;
  margin-bottom: 12px;
}
.mobile-menu-footer .user-info strong {
  color: var(--paper);
  display: block;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 2px;
}
.mobile-menu-footer .signout-btn {
  width: 100%;
  padding: 14px;
  background: none;
  border: 1px solid #2E3B4F;
  color: #B7BCC9;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
}
.mobile-menu-footer .signout-btn:hover {
  border-color: var(--alert);
  color: var(--alert);
}

/* ==============================================================
   At ≤640px: hide desktop nav, show hamburger
   ============================================================== */
@media (max-width: 640px) {
  .topnav { display: none; }
  .topbar .user-slot .business-switcher { display: none; }
  .topbar .user-slot #userName { display: none; }
  .topbar .user-slot #logoutBtn { display: none; }
  .hamburger-btn { display: inline-flex; }

  /* Simplify topbar layout: brand on left, hamburger on right */
  .topbar {
    padding: 14px 16px;
  }
  .topbar .brand-name { font-size: 16px; }

  /* Prevent body scroll when menu is open — set by JS via body class */
  body.mobile-menu-open {
    overflow: hidden;
  }
}

/* Above 640px, mobile menu never shows even if class is stuck on */
@media (min-width: 641px) {
  .mobile-menu { display: none !important; }
  .hamburger-btn { display: none !important; }
}



@media (max-width: 640px) {

  .auth-brand {
    padding: 28px 20px 32px;
    min-height: auto;  /* override the 100vh from style.css */
  }
  .auth-brand h1 {
    font-size: 24px;
    line-height: 1.2;
    margin: 16px 0 12px;
    max-width: none;
  }
  .auth-brand p {
    font-size: 13px;
    max-width: none;
  }
  .auth-brand .footer-note {
    display: none;  /* removed on phones — footprint over usefulness */
  }

  .auth-bullets {
    gap: 10px !important;
    margin-top: 8px;
  }
  .auth-bullets li {
    font-size: 13px;
    padding-left: 26px;
  }

  /* Form side: tighter padding, smaller heading. */
  .auth-form-wrap {
    padding: 28px 20px 40px;
    min-height: auto;
    justify-content: flex-start;  
  }
  .auth-form-wrap h2 {
    font-size: 22px;
    margin: 0 0 22px;
  }
  .auth-form-wrap form {
    max-width: none;  /* fill available width */
  }

  /* Field spacing tighter so more fits above the on-screen keyboard */
  .auth-form-wrap label {
    margin-bottom: 12px;
  }

  /* Password rules box tighter */
  .password-rules-inline {
    padding: 6px 10px;
  }

  /* Switch link at bottom — more breathing room from the submit button */
  .auth-form-wrap .switch {
    margin-top: 18px;
    font-size: 14px;   /* slightly larger for touch */
  }
}
@media (max-height: 500px) and (max-width: 900px) {
  .auth-brand {
    display: none;
  }
  .auth-form-wrap {
    padding: 20px;
  }
}

@media (max-width: 640px) {

  .greeting {
    margin: 12px 0 20px;
    padding-bottom: 14px;
    gap: 6px;
  }
  .greeting h1 {
    font-size: 22px;
    line-height: 1.2;
  }
  .greeting .today {
    font-size: 11px;
    letter-spacing: 0.10em;
    /* On mobile, the date reads more as a caption than a formal timestamp */
  }

  .all-clear-banner {
    padding: 16px 18px;
    gap: 12px;
  }
  .all-clear-banner .check-circle {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
  .all-clear-banner h3 { font-size: 14px; }
  .all-clear-banner p { font-size: 12px; }

  .activity-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "when"
      "desc"
      "link";
    gap: 4px;
    padding: 14px 16px;
  }
  .activity-row .activity-when {
    grid-area: when;
    font-size: 10px;
  }
  .activity-row .activity-desc {
    grid-area: desc;
    font-size: 14px;
    line-height: 1.4;
  }
  .activity-row .activity-link {
    grid-area: link;
    justify-self: flex-start;
    margin-top: 4px;
    padding: 6px 0;
    font-size: 11px;
  }
  .activity-row .activity-tag {
    /* Slightly larger on mobile so it doesn't look like typo-fine-print */
    font-size: 10px;
    padding: 3px 8px;
  }

  .payroll-widget {
    padding: 16px 18px;
  }
  .payroll-widget .pw-title {
    font-size: 16px;
    line-height: 1.3;
  }
  .payroll-widget .pw-cta {
    padding: 12px 16px;
    font-size: 12px;
  }
}
@media (max-width: 640px) {
  .attention-tile {
    padding: 16px 18px;
  }
  .attention-tile .tile-count {
    font-size: 26px;
  }
  .attention-tile .tile-hint {
    font-size: 12px;
    line-height: 1.35;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .auth-brand,
  .auth-form-wrap {
    padding: 44px 36px;
  }
  .auth-brand h1 {
    font-size: 32px;
    max-width: 320px;
  }

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

  /* Attention row + quick actions: still 3-col but tighter padding */
  .attention-tile,
  .quick-action {
    padding: 18px 20px;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .auth-brand,
  .auth-form-wrap {
    padding: 44px 36px;
  }
  .auth-brand h1 {
    font-size: 32px;
    max-width: 320px;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Attention row + quick actions: still 3-col but tighter padding */
  .attention-tile,
  .quick-action {
    padding: 18px 20px;
  }
}

@media (max-width: 640px) {
  /* Item row: restructure to 2-row layout */
  .item-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "label countdown"
      "actions actions";
    gap: 12px 16px;
    padding: 14px 16px;
    align-items: start;
  }
  .item-row > div:first-child {
    grid-area: label;
    min-width: 0;   /* let ellipsis work if a label is very long */
  }
  .item-row .countdown {
    grid-area: countdown;
    text-align: right;
    align-self: start;
  }
  .item-row .item-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
  }

  /* Label + meta text sizing */
  .item-label {
    font-size: 15px;
    line-height: 1.3;
    /* Allow wrapping instead of truncation — mobile labels can wrap 2 lines */
    word-break: break-word;
  }
  .item-meta {
    font-size: 10px;
    line-height: 1.5;
  }
  .item-meta .dot { margin: 0 4px; }

  /* Countdown badge: keep the big number but tighten */
  .countdown .days {
    font-size: 22px;
  }
  .countdown .unit {
    font-size: 9px;
    letter-spacing: 0.12em;
    max-width: 80px;    /* prevent "Days overdue" from stretching wide */
  }

  .item-actions button {
    margin-left: 0;
    padding: 10px 14px;
    font-size: 11px;
    flex: 0 0 auto;
  }

  .fine-clock {
    max-width: 100%;
    flex-wrap: wrap;
    row-gap: 2px;
  }

  /* Item notes card: tighten and let it wrap fully instead of truncating */
  .item-notes {
    max-width: 100%;
    white-space: normal;    /* override the ellipsis truncation from desktop */
    overflow: visible;
    text-overflow: clip;
  }

  /* Empty state: smaller, less domineering */
  .empty {
    padding: 40px 16px;
  }
  .empty .hint {
    font-size: 11px;
  }
}

@media (max-width: 640px) {
  .modal-body h3 {
    font-size: 18px;
  }

  /* Checklist numbered list: reduce left indent so more content fits */
  .modal-body ol li {
    padding: 12px 0 12px 32px;
    font-size: 13px;
    line-height: 1.5;
  }
  .modal-body ol li::before {
    top: 12px;
  }

  /* Modal close (×) button — bigger tap target */
  .modal-close {
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }

  /* Edit form actions: buttons wrap onto their own row cleanly, both full-width */
  .edit-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .edit-actions button {
    width: 100%;
    padding: 14px 18px;
  }
}

@media (min-width: 641px) {
  .invoice-menu-btn { display: none; }
}

@media (max-width: 640px) {

  .invoice-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "supplier"
      "date"
      "number"
      "taxable"
      "vat"
      "delta"
      "actions";
    gap: 6px;
    padding: 14px 16px;
  }
  .invoice-row .num-col:nth-child(4),
  .invoice-row .num-col:nth-child(5),
  .invoice-row .delta-cell {
    text-align: left;
  }
  .invoice-row .row-actions {
    justify-self: flex-start;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px dashed var(--line);
    width: 100%;
    flex-wrap: wrap;
  }

  .invoice-row .invoice-supplier::before {
    content: 'SUPPLIER';
    display: block;
    font-family: 'IBM Plex Mono';
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin-bottom: 4px;
  }
  .invoice-row .invoice-number::before {
    content: 'INV #';
    display: block;
    font-family: 'IBM Plex Mono';
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin-bottom: 2px;
  }
  .invoice-row .invoice-date::before {
    content: 'DATE';
    display: inline-block;
    width: 70px;
    font-family: 'IBM Plex Mono';
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin-right: 8px;
  }
  .invoice-row .num-col:nth-child(4)::before {
    content: 'TAXABLE';
    display: inline-block;
    width: 70px;
    font-family: 'IBM Plex Mono';
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin-right: 8px;
  }
  .invoice-row .num-col:nth-child(5)::before {
    content: 'VAT';
    display: inline-block;
    width: 70px;
    font-family: 'IBM Plex Mono';
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin-right: 8px;
  }
  .invoice-row .delta-cell::before {
    content: 'DELTA';
    display: inline-block;
    width: 70px;
    font-family: 'IBM Plex Mono';
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin-right: 8px;
  }

  .invoice-supplier > div:first-child {
    white-space: normal;
    line-height: 1.35;
  }

  .item-actions button,
  .row-actions button,
  .invoice-row .row-actions button {
    padding: 10px 14px;
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  .section-head-actions select,
  .entry-form-row select,
  .edit-form select {
    min-width: 0;
    width: 100%;
    padding: 12px 32px 12px 14px;
    font-size: 13px;
  }

  .section-head-actions {
    width: 100%;
  }
  .section-head-actions > * {
    flex: 1 1 100%;
  }

  .ocr-processing {
    padding: 14px 16px;
    margin-bottom: 16px;
  }
  .ocr-processing-inner {
    gap: 12px;
  }
  .ocr-processing-title {
    font-size: 11px;
  }
  .ocr-processing-hint {
    font-size: 12px;
    line-height: 1.4;
  }
  .spinner {
    width: 18px;
    height: 18px;
    border-width: 2.5px;
    flex-shrink: 0;
  }

  .direction-tag {
    padding: 3px 7px;
    font-size: 9px;
  }
  
  @media (max-width: 640px) {
  .invoice-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "supplier menu"
      "date     date"
      "number   number"
      "taxable  taxable"
      "vat      vat"
      "delta    delta"
      "actions  actions";
    gap: 2px 8px;
    padding: 16px;
    position: relative;
    align-items: start;
  }

  /* ---- Supplier zone (row 1 anchor) ---- */
  .invoice-row .invoice-supplier {
    grid-area: supplier;
    min-width: 0;
  }
  .invoice-row .invoice-supplier > div:first-child {
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.3;
    white-space: normal;
    margin-bottom: 6px;
  }
  .invoice-row .supplier-trn {
    font-size: 11px;
    margin-top: 0;
    display: inline-block;
  }
  .invoice-row .direction-tag {
    margin-right: 6px;
    vertical-align: 1px;
  }

  /* ---- Meta zone (date + invoice number) ---- */
  .invoice-row .invoice-date {
    grid-area: date;
    font-size: 12px;
    color: var(--muted);
    font-family: 'IBM Plex Mono';
    padding-top: 12px;
    margin-top: 8px;
    border-top: 1px dashed var(--line);
  }
  .invoice-row .invoice-date::before {
    content: '';
    display: none;
  }
  .invoice-row .invoice-number {
    grid-area: number;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
    padding-bottom: 4px;
  }
  .invoice-row .invoice-number::before {
    content: 'INV #';
    display: inline;
    font-family: 'IBM Plex Mono';
    font-size: 9px;
    letter-spacing: 0.10em;
    color: var(--muted);
    margin: 0;
  }
  .invoice-row .invoice-number .mono {
    font-size: 12px;
    color: var(--ink-soft);
  }

  /* ---- Amount rows (label left, value right) ---- */
  .invoice-row .num-col:nth-child(4),
  .invoice-row .num-col:nth-child(5),
  .invoice-row .delta-cell {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    font-family: 'IBM Plex Mono';
    font-size: 14px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .invoice-row .num-col:nth-child(4) {
    grid-area: taxable;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
  }
  .invoice-row .num-col:nth-child(5) { grid-area: vat; }
  .invoice-row .delta-cell { grid-area: delta; padding-bottom: 4px; }

  .invoice-row .num-col:nth-child(4)::before,
  .invoice-row .num-col:nth-child(5)::before,
  .invoice-row .delta-cell::before {
    display: inline;
    width: auto;
    margin: 0;
    font-family: 'IBM Plex Mono';
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 400;
    text-transform: uppercase;
  }
  .invoice-row .num-col:nth-child(4)::before { content: 'Taxable'; }
  .invoice-row .num-col:nth-child(5)::before { content: 'VAT'; }
  .invoice-row .delta-cell::before { content: 'Delta'; }

  /* Quiet zero-delta so it doesn't demand attention */
  .invoice-row.ok .delta-cell { opacity: 0.55; }

  /* ---- ••• menu button (injected by invoice-mobile.js) ---- */
  .invoice-menu-btn {
    grid-area: menu;
    background: none;
    border: 1px solid var(--line);
    width: 36px;
    height: 36px;
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0;
    align-self: start;
    transition: border-color 0.15s;
  }
  .invoice-menu-btn:hover,
  .invoice-menu-btn:focus-visible { border-color: var(--ink); }
  .invoice-menu-btn span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--muted);
    display: block;
  }

  /* ---- Actions: hidden by default, revealed by ••• ---- */
  .invoice-row .row-actions {
    grid-area: actions;
    display: none;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
    width: 100%;
    flex-wrap: wrap;
  }
  .invoice-row.actions-open .row-actions {
    display: flex;
  }
  .invoice-row.actions-open .invoice-menu-btn {
    border-color: var(--ink);
    background: var(--paper-warm);
  }

  .invoice-row .row-actions button {
    padding: 10px 14px;
    font-size: 11px;
    letter-spacing: 0.08em;
  }

  /* ---- Filter selects (unchanged from before) ---- */
  .section-head-actions select,
  .entry-form-row select,
  .edit-form select {
    min-width: 0;
    width: 100%;
    padding: 12px 32px 12px 14px;
    font-size: 13px;
  }
  .section-head-actions { width: 100%; }
  .section-head-actions > * { flex: 1 1 100%; }

  /* ---- OCR processing banner ---- */
  .ocr-processing { padding: 14px 16px; margin-bottom: 16px; }
  .ocr-processing-inner { gap: 12px; }
  .ocr-processing-title { font-size: 11px; }
  .ocr-processing-hint { font-size: 12px; line-height: 1.4; }
  .spinner { width: 18px; height: 18px; border-width: 2.5px; flex-shrink: 0; }

  .direction-tag { padding: 3px 7px; font-size: 9px; }
}
}
@media (max-width: 640px) {

  .entry-form-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hint-text,
  .supplier-memory-hint {
    display: inline-block;
    margin-left: 0;
    margin-top: 2px;
  }

  .delta-preview {
    padding: 12px 14px;
  }
  .delta-row {
    padding: 3px 0;
    gap: 12px;
  }
  .delta-row .delta-label {
    font-size: 9px;
    flex-shrink: 0;  
  }
  .delta-row .delta-value {
    font-size: 13px;
    text-align: right;
  }
  .delta-flag {
    font-size: 10px;
    padding-top: 6px;
    margin-top: 6px;
    line-height: 1.4;
  }

  .ocr-confidence {
    padding: 10px 12px;
  }
  .ocr-confidence span:last-child {
    font-size: 11px;
  }

  .ocr-preview-panel {
    padding: 10px;
  }
  .ocr-preview-panel img {
    max-height: 240px;
    margin-top: 6px;
  }
  .trn-warning {
    font-size: 9px;
    line-height: 1.4;
  }

  #snapInvoiceBtn,
  .snap-invoice-btn,
  label[for="ocrInput"] {
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: 13px;
  }
}

@media (min-width: 641px) and (max-width: 899px) {
  .ocr-preview-panel {
    grid-column: 1;
  }
  .ocr-preview-panel img {
    max-height: 320px;
  }
}

@media (max-width: 640px) {

  .month-picker {
    width: 100%;
    justify-content: space-between;
  }
  .month-nav {
    padding: 10px 16px;
    font-size: 18px;
    min-width: 44px;
  }
  .month-label {
    flex: 1;
    font-size: 11px;
    min-width: 0;
    padding: 6px 8px;
  }

  /* Status pill inline with title on mobile */
  .status-pill {
    padding: 5px 10px;
    font-size: 9px;
  }

  /* ---- Roster rows ----
     Style.css handles stacking at 800px. Tighten padding at 640px. */
  .roster-row {
    padding: 14px 16px;
    gap: 10px;
  }
  .employee-name {
    font-size: 14px;
  }
  .employee-sub {
    font-size: 9px;
  }

  /* Line inputs: keep right-alignment (calculator convention for AED),
     but pad more generously for finger typing */
  .line-input {
    padding: 10px 12px;
    font-size: 14px;    /* still ≥16px in foundation because it's an input */
  }

  /* Row actions: right-align in the row's stacked layout */
  .roster-row .row-actions {
    text-align: left;
    margin-top: 4px;
  }
  button.tiny {
    padding: 8px 12px;
    font-size: 10px;
  }

  .cycle-actions {
    padding: 16px 18px;
    gap: 10px;
  }
  .cycle-actions .ghost-btn {
    margin-right: 0;
    width: 100%;
    padding: 14px 16px;
    text-align: center;
  }
  .cycle-actions button.primary-btn,
  .cycle-actions #finalizeBtn {
    width: 100%;
    padding: 14px 16px;
  }
  .cycle-actions-note {
    max-width: none;
    font-size: 12px;
    line-height: 1.4;
  }

  .sif-head {
    padding: 18px 18px;
    gap: 12px;
  }
  .sif-head h3 { font-size: 16px; }
  .sif-sub { font-size: 12px; }
  .sif-download {
    white-space: normal;
    width: 100%;
    text-align: center;
    padding: 14px 16px;
  }

  .sif-settings {
    padding: 16px 18px;
  }
  .sif-settings-title {
    font-size: 10px;
    margin-bottom: 10px;
  }
  .sif-settings-form {
    gap: 10px;
  }
  .sif-settings-form input {
    padding: 12px 14px;
  }
  /* When settings-form stacks, the Save button (auto column on desktop)
     should also fill width — it's already inside the stacked column. */
  .sif-settings-form button {
    width: 100%;
    padding: 12px 16px;
  }

  .sif-warnings {
    padding: 14px 18px;
  }
  .sif-warnings-title {
    font-size: 10px;
  }
  .sif-warnings ul {
    font-size: 12px;
    padding-left: 16px;
  }
  .sif-warnings-hint {
    font-size: 11px;
    line-height: 1.4;
  }
  .sif-ok {
    padding: 14px 18px;
    font-size: 11px;
  }
}
@media (max-width: 640px) {
  /* ---- Laborer modal / rate preview ---- */
  .rate-preview {
    padding: 12px 14px;
  }
  .rate-preview-values {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .rp-label {
    font-size: 9px;
  }
  .rp-value {
    font-size: 14px;
  }


  /* Date picker: full-width row */
  .date-picker-input {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    font-size: 13px;
  }

  /* Attendance row head: keep the flex row layout but tighter */
  .attendance-row-head {
    padding: 14px 14px;
    gap: 12px;
  }
  .lab-summary {
    max-width: 110px;
    font-size: 10px;
    line-height: 1.3;
  }

  .attendance-form {
    padding: 4px 14px 16px;
  }
  .entry-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "proj"
      "reg"
      "ot"
      "remove";
    gap: 10px;
    padding: 12px;
  }
  .entry-row .entry-field:nth-child(1) { grid-area: proj; }
  .entry-row .entry-field:nth-child(2) { grid-area: reg; }
  .entry-row .entry-field:nth-child(3) { grid-area: ot; }
  .entry-remove {
    grid-area: remove;
    justify-self: flex-start;
    width: auto;
    padding: 10px 16px;
    font-size: 12px;
  }
  .entry-remove::before {
    content: 'Remove entry';
    margin-right: 6px;
    font-family: 'IBM Plex Mono';
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Form actions at bottom of attendance form: primary button full width */
  .form-actions {
    gap: 8px;
  }
  .form-actions button,
  .form-actions .primary-btn {
    width: 100%;
    padding: 12px 16px;
  }

  /* ---- Labour report cards ---- */
  .labour-report-card {
    padding: 16px 16px;
  }
  .lr-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 12px;
  }
  .lr-name {
    font-size: 16px;
  }
  .lr-meta {
    font-size: 10px;
  }
  .lr-totals {
    min-width: 0;
  }
  .lr-total-line {
    gap: 12px;
    font-size: 11px;
  }
  .lr-total-line.lr-grand {
    font-size: 13px;
  }

  .lr-projects-head {
    display: none;   /* headers useless when rows stack */
  }
  .lr-project-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 4px;
  }
  .lr-project-code {
    font-size: 12px;
    display: inline;
  }
  .lr-project-code::after {
    content: ' · ';
    color: var(--muted);
    font-weight: 400;
  }
  .lr-project-name {
    display: inline;
    font-size: 12px;
  }
  .lr-project-metric,
  .lr-project-cost {
    padding-left: 0;
    text-align: left;
    font-size: 12px;
    grid-column: 1;
  }

  /* ---- Project cost cards ---- */
  .project-cost-card {
    padding: 16px 16px;
  }
  .pc-header {
    /* Style.css already stacks this at 700px. Keep the pattern, tighten. */
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
  }
  .pc-code {
    font-size: 11px;
  }
  .pc-name {
    font-size: 16px;
  }
  .pc-meta {
    font-size: 9px;
  }
  .pc-total-value {
    font-size: 20px;
  }

  /* Progress + margin blocks: no structural changes, just tighter type */
  .pc-progress-value {
    font-size: 11px;
  }
  .pc-margin-value {
    font-size: 13px;
  }

  /* Project laborer rows: same treatment as report rows above */
  .pc-laborers-head {
    display: none;
  }
  .pc-laborer-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 4px;
  }
  .pc-laborer-name {
    font-size: 13px;
    font-weight: 500;
  }
  .pc-laborer-metric,
  .pc-laborer-cost {
    padding-left: 0;
    text-align: left;
    font-size: 12px;
  }

  /* No-quote hint block */
  .pc-no-quote {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 12px 14px;
  }
  .pc-no-quote-hint {
    font-size: 11px;
    line-height: 1.4;
  }
}

@media (max-width: 640px) {
  /* ---- Onboarding header (top strip with brand + skip link) ---- */
  .onboarding-header {
    margin-bottom: 16px;
  }
  .onboarding-header .brand-mark {
    font-size: 11px;
  }
  .skip-link {
    font-size: 10px;
    padding: 6px 8px;
  }

  .onboarding-progress {
    position: relative;
    padding: 0;
    margin-bottom: 24px;
    min-height: 44px;
  }

  /* Hide the pills themselves */
  .onboarding-progress .step-pill {
    display: none;
  }

  /* The track: thin grey line */
  .onboarding-progress::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 4px;
    height: 3px;
    background: var(--line);
    border-radius: 2px;
  }

  .onboarding-progress::after {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    height: 3px;
    background: var(--amber);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 25%;   /* fallback = step 1 */
  }

  /* Progress width based on which pill is .current */
  .onboarding-progress:has(.step-pill[data-step="1"].current)::after { width: 25%; }
  .onboarding-progress:has(.step-pill[data-step="2"].current)::after { width: 50%; }
  .onboarding-progress:has(.step-pill[data-step="3"].current)::after { width: 75%; }
  .onboarding-progress:has(.step-pill[data-step="4"].current)::after { width: 100%; }

  .onboarding-progress .step-pill.current {
    display: block;
    background: none !important;
    border: none;
    padding: 12px 0 0 0;
    font-family: 'IBM Plex Mono';
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: default;
    transform: none;
  }
  .onboarding-progress .step-pill.current .step-num {
    color: var(--amber);
    font-weight: 600;
    margin-right: 6px;
  }
  .onboarding-progress .step-pill.current .step-num::after {
    content: ' of 4 ·';
    color: var(--muted);
    font-weight: 400;
    margin-left: 2px;
  }
  .onboarding-progress .step-pill.current .step-label {
    display: inline;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0.06em;
  }

  /* ---- Field label above groups ---- */
  .onb-field-label {
    font-size: 9px;
    margin-bottom: 6px;
  }

  /* ---- Module cards (step 2) ---- */
  .module-card {
    padding: 14px 14px;
    gap: 12px;
  }
  .mc-title {
    font-size: 14px;
  }
  .mc-sub {
    font-size: 12px;
    line-height: 1.4;
  }
  .mc-tag {
    font-size: 8px;
    padding: 3px 7px;
    margin-top: 6px;
  }

  /* Make the whole card a comfortable tap target — the label wraps
     the checkbox so tapping anywhere on the card toggles it */
  .module-card {
    min-height: 60px;
  }

  /* ---- Reminder chips (step 3) ---- */
  .reminder-preview {
    padding: 16px 16px;
  }
  .reminder-chips {
    gap: 6px;
  }
  .reminder-chip {
    padding: 12px 14px;
    font-size: 13px;
    /* Ensure each chip is a fat tap target */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .reminder-note {
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.4;
  }

  /* ---- Summary block (step 4) ---- */
  .summary-block,
  .summary-modules {
    padding: 16px 16px;
  }
  .summary-line {
    /* Stack label above value so long values don't crush the label */
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 0;
  }
  .summary-label {
    font-size: 9px;
  }
  .summary-value {
    text-align: left;
    font-size: 13px;
    line-height: 1.35;
    /* Allow wrapping for long combined values */
    word-break: break-word;
  }
  .summary-module {
    padding: 10px 0;
  }
  .summary-module-name {
    font-size: 13px;
  }
  .summary-module-hint {
    font-size: 11px;
    line-height: 1.4;
  }

  /* ---- Finish button + error region ---- */
  .primary-btn-large {
    width: 100%;
    margin-left: 0;
    padding: 16px 20px;
    font-size: 13px;
  }
  .onb-error {
    text-align: left;
    font-size: 12px;
  }

  .empty-state-card {
    padding: 24px 20px;
  }
  .empty-state-title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .empty-state-body {
    font-size: 13px;
    margin-bottom: 18px;
    max-width: none;
  }
  .empty-state-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .empty-state-actions .primary-btn {
    width: 100%;
    text-align: center;
    padding: 14px 20px;
  }
  .empty-state-secondary {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .image-viewer-close {
    top: calc(12px + env(safe-area-inset-top));
  }
  .image-viewer-controls {
    top: calc(12px + env(safe-area-inset-top));
  }
  .image-viewer-container {
    padding: 68px 8px 20px;
    touch-action: none;
  }
}
@media (max-width: 640px) {
  .pdf-viewer-content {
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;   /* dynamic viewport height on iOS */
    max-height: none;
    border-radius: 0;
    border-top: 0;
    border-top: 3px solid var(--amber);
  }

  .pdf-viewer-header {
    padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  }
  .pdf-viewer-filename {
    font-size: 11px;
  }

  .pdf-canvas-wrap {
    padding: 8px;
    touch-action: none;   /* pinch/pan handled in JS */
  }

  .pdf-viewer-toolbar {
    padding: 8px 12px;
    gap: 8px;
  }

  /* Hide zoom controls on mobile — pinch replaces them.
     Keep the fit-to-page button as a reset. */
  .pdf-zoom .pdf-zoom-out,
  .pdf-zoom .pdf-zoom-in,
  .pdf-zoom .pdf-zoom-level {
    display: none;
  }

  .pdf-nav-btn, .pdf-zoom-btn {
    width: 44px;
    height: 44px;
  }
  .pdf-page-info {
    font-size: 13px;
    padding: 0 8px;
  }

  .pdf-viewer-footer {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .pdf-download-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
    font-size: 13px;
  }
}