/* ==========================================================================
   AAJ Invoice Vault — stylesheet (v2, final design pass)
   Single source of truth — no duplicated/conflicting rules.
   Mobile-first; desktop rules live in the min-width queries near the bottom.
   ========================================================================== */

:root{
  --navy:#12233f;
  --navy-2:#1d4778;
  --gold:#c7a253;
  --gold-dark:#a9843b;
  --bg:#f4f6f9;
  --card:#fff;
  --text:#172033;
  --muted:#738096;
  --border:#e3e7ee;
  --green:#1a7f59;
  --green-bg:#e6f5ef;
  --amber:#b26a00;
  --amber-bg:#fff3d8;
  --red:#9b2c22;
  --red-bg:#fde9e7;

  --radius-sm:8px;
  --radius:12px;
  --radius-lg:18px;

  --space-3:12px;
  --space-4:16px;
  --space-5:24px;

  --font-xs:12px;
  --font-sm:13.5px;
  --font-base:15px;
  --font-md:17px;
  --font-lg:20px;
  --font-xl:26px;

  --header-h:64px;
  --mobilebar-h:64px;
  --content-max:1180px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  font-size:var(--font-base);
  line-height:1.5;
}
img{max-width:100%}
button{touch-action:manipulation}

/* ---------------------------------- header ---------------------------------- */
.topbar{
  height:var(--header-h);
  background:var(--navy);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding:var(--safe-t) max(16px,calc((100vw - var(--content-max))/2)) 0;
  position:sticky;
  top:0;
  z-index:30;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand .mark{background:var(--gold);color:#17130a;padding:7px 9px;border-radius:9px;font-weight:800;font-size:13px;flex-shrink:0}
.brand b{display:block;font-size:15px;line-height:1.2}
.brand small{display:none;color:#b9c6db;font-size:11.5px}

.topbar nav{display:flex;align-items:center;gap:14px}
.topbar a,.linkbtn{color:#fff;text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;font-size:14px;white-space:nowrap}
.topbar a:hover,.linkbtn:hover{color:var(--gold)}
.topbar .primary{background:var(--gold);color:#17130a;padding:9px 14px;border-radius:10px;font-weight:700}
.topbar .primary:hover{color:#17130a;opacity:.9}
.linkbtn{padding:0}

#aajLangSwitch{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);
  border-radius:8px;padding:7px 10px;cursor:pointer;font-size:12px;flex-shrink:0
}
#aajLangSwitch:hover{border-color:var(--gold);color:var(--gold)}

/* hamburger — hidden on desktop, shown on mobile/tablet */
.menu-toggle{
  display:none;background:transparent;border:1px solid rgba(255,255,255,.35);
  color:#fff;border-radius:8px;width:40px;height:40px;font-size:18px;cursor:pointer;flex-shrink:0
}

/* Mobile slide-down menu: holds the secondary nav links + logout.
   It is a plain block hidden by default and toggled by JS — it pushes
   content down in normal flow, so it never floats over other controls. */
.mobile-menu{display:none}
.mobile-menu.open{
  display:flex;flex-direction:column;gap:2px;
  background:var(--navy-2);padding:var(--space-3) 16px calc(var(--space-3) + var(--safe-b));
  position:sticky;top:var(--header-h);z-index:29;
}
.mobile-menu a,.mobile-menu .linkbtn{
  color:#fff;text-decoration:none;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.12);
  font-size:15px;text-align:right;background:none;border-inline:0;border-top:0;width:100%;font:inherit;cursor:pointer
}
.mobile-menu form{width:100%;margin:0}
.mobile-menu .logout-link{color:#ffb4a8}

/* ---------------------------------- layout ---------------------------------- */
.container{max-width:var(--content-max);margin:0 auto;padding:var(--space-5) 16px calc(var(--mobilebar-h) + var(--safe-b) + 32px)}
.page-title{margin-bottom:var(--space-4)}
.page-title h1,.hero h1,.section-head h1{margin:0 0 6px;font-size:var(--font-xl);line-height:1.25}
.page-title p,.hero p,.section-head p{margin:0;color:var(--muted);font-size:var(--font-sm)}

.hero,.section-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.hero{background:linear-gradient(135deg,#152b4e,#223f69);color:#fff;padding:22px;border-radius:var(--radius-lg);margin-bottom:var(--space-5)}
.hero p{color:#cdd7e6}
.section-head{margin:var(--space-5) 0 var(--space-3)}
.section-head.tight{margin:0 0 var(--space-3)}
.section-head a:not(.btn){color:var(--navy)}

.dashboard-hero{
  background:linear-gradient(135deg,#10284b,#1d4778);color:#fff;padding:22px;border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5);flex-wrap:wrap
}
.dashboard-hero h1{margin:0 0 6px;font-size:var(--font-xl)}
.dashboard-hero p{margin:0;color:#cdd7e6;font-size:var(--font-sm)}

/* ---------------------------------- buttons ---------------------------------- */
.btn,.secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:11px;
  padding:12px 18px;font-weight:700;font-size:var(--font-base);text-decoration:none;cursor:pointer;
  min-height:46px;line-height:1.2
}
.btn{background:var(--gold);color:#17130a}
.btn:hover{background:var(--gold-dark)}
.secondary{background:#e9edf3;color:#25334c}
.secondary:hover{background:#dde3ec}
.secondary.danger-btn{background:var(--red-bg);color:var(--red)}
.secondary.danger-btn:hover{background:#fbdbd6}
.wide{width:100%}

/* ---------------------------------- cards / grids ---------------------------------- */
.cards,.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:var(--space-5)}
.card,.dash-card,.info-card,.upload-card,.login-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.dash-card{text-decoration:none;color:inherit;display:block}
.card span,.dash-label{display:block;color:var(--muted);font-size:var(--font-xs);margin-bottom:8px}
.card strong,.dash-card strong{font-size:22px;display:block}
.card small,.dash-card small{font-size:var(--font-xs);color:var(--muted)}
.card.good{border-inline-start:4px solid var(--green)}
.card.warn{border-inline-start:4px solid var(--amber)}
.card.danger{border-inline-start:4px solid var(--red)}
.card.gold-card{border-inline-start:4px solid var(--gold-dark)}
.card.tax-card{border-inline-start:4px solid #315a91}

/* ---------------------------------- tables ---------------------------------- */
.table-wrap,.invoice-table-shell{overflow-x:auto;overflow-y:hidden;background:#fff;border:1px solid var(--border);border-radius:var(--radius);-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:640px}
th,td{padding:12px;text-align:right;border-bottom:1px solid var(--border);font-size:var(--font-sm)}
th{font-size:11.5px;color:var(--muted);background:#fafbfc;white-space:nowrap;font-weight:700}
tbody tr{cursor:pointer}
.invoice-table-clean{min-width:1050px}
.invoice-table-grid th,.invoice-table-grid td{border:1px solid var(--border);text-align:center}
.invoice-table-grid td.supplier-cell{text-align:start;white-space:normal}
.invoice-table-grid td.notes-cell{text-align:start;white-space:normal}
.invoice-table-grid td.nowrap-cell{white-space:nowrap}
.invoice-no-link{color:var(--navy);font-weight:700;text-decoration:none}
.invoice-no-link:hover{text-decoration:underline}
.supplier-name-link{color:var(--navy);font-weight:700;font-size:var(--font-base);text-decoration:none}
.supplier-name-link:hover{text-decoration:underline}
.row-flag{display:inline-flex;white-space:nowrap;color:var(--red);background:var(--red-bg);border-radius:6px;padding:2px 6px;font-size:11px;text-decoration:none;margin:2px 4px 2px 0}
.row-flag-dup{cursor:pointer}
.row-actions{position:relative;text-align:center}
.row-menu-btn{background:none;border:1px solid var(--border);border-radius:8px;width:32px;height:32px;font-size:16px;cursor:pointer;color:var(--text)}
.row-menu{display:none;position:fixed;z-index:40;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 6px 18px rgba(15,25,45,.12);min-width:120px;padding:6px;flex-direction:column;gap:2px}
.row-menu.open{display:flex}
.row-menu a,.row-menu button{display:block;width:100%;text-align:start;padding:8px 10px;border-radius:6px;text-decoration:none;color:var(--text);background:none;border:0;font:inherit;font-size:13px;cursor:pointer}
.row-menu a:hover,.row-menu button:hover{background:var(--bg)}
.row-menu .row-delete{color:var(--red)}
.total-cell{font-weight:700}
.empty,.empty-cell{text-align:center;padding:30px;color:var(--muted)}
.empty{background:#fff;border-radius:var(--radius)}

.pill,.confidence{display:inline-block;white-space:nowrap;background:#eef2f7;border-radius:999px;padding:6px 10px;font-size:var(--font-xs)}
.pay-paid{background:var(--green-bg);color:var(--green)}
.pay-partial{background:var(--amber-bg);color:var(--amber)}
.pay-unpaid{background:var(--red-bg);color:var(--red)}
.vat-claimed{background:var(--green-bg);color:var(--green)}
.vat-not_claimed{background:var(--amber-bg);color:var(--amber)}
.vat-adjusted_rejected{background:var(--red-bg);color:var(--red)}
.vat-not_reviewed{background:#eef2f7;color:var(--muted)}

/* ---------------------------------- forms ---------------------------------- */
.form-grid{display:grid;grid-template-columns:1fr;gap:12px}
.form-grid label,.supplier-field{display:flex;flex-direction:column;gap:6px;font-size:var(--font-xs);color:var(--muted)}
.form-grid input,.form-grid select,.form-grid textarea,
.filters input,.filters select,.invoice-filter-card input,.invoice-filter-card select{
  width:100%;border:1px solid #d6dce5;background:#fff;border-radius:10px;
  padding:12px;font:inherit;font-size:16px;color:var(--text);min-height:46px
}
.form-grid textarea{min-height:80px}
.form-grid label:has(textarea),.form-grid .wide,.field-ai_notes,.field-description{grid-column:1/-1}
.field-error{color:var(--red)!important}
.inline-form{margin-top:10px}
.employee-form,.supplier-form{max-width:720px;margin:0 auto}

.login-card{max-width:400px;margin:8vh auto 0}
.login-card .form-grid{display:block}
.login-card .form-grid p{margin:0 0 12px}
.login-card p{color:var(--muted)}

/* ---------------------------------- upload page ---------------------------------- */
.upload-card{max-width:640px;margin:0 auto var(--space-5)}
.upload-step{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.upload-step div{display:flex;flex-direction:column}
.upload-step small{color:var(--muted);font-size:var(--font-xs)}
.step-no{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:800;font-size:13px;flex-shrink:0}

.invoice-types{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.type-card{position:relative;border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:flex;align-items:center;gap:10px;cursor:pointer;background:#fff;min-height:56px}
.type-card input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.type-card:has(input:checked){border:2px solid var(--gold);background:#fffaf0}
.type-icon{width:32px;height:32px;border-radius:9px;background:#f2f4f7;display:grid;place-items:center;font-size:17px;flex-shrink:0}

/* The file input is visually hidden but has zero footprint (0x0) instead
   of being absolutely stacked under other controls — so it can never
   overlap the camera / choose-file buttons or anything else. */
.hidden-file{position:absolute!important;width:0;height:0;padding:0;margin:0;border:0;overflow:hidden;opacity:0;pointer-events:none}

/* Action tiles and everything that follows them stack in normal document
   flow, each with its own margin — nothing here is position:absolute, so
   a button can never sit on top of another control. */
.upload-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.action-tile{border:1px solid var(--border);background:#fff;border-radius:var(--radius);padding:20px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font:inherit;min-height:110px}
.action-tile span{font-size:28px;line-height:1}
.action-tile b{font-size:var(--font-sm)}
.action-tile small{color:var(--muted);font-size:11.5px;text-align:center}
.action-tile.camera{background:#f8f3e8;border-color:#e3cc98}
.action-tile:active{transform:scale(.98)}

.selected-file{margin:0 0 12px;padding:10px 12px;background:var(--green-bg);border-radius:10px;color:#176044;font-size:var(--font-sm);word-break:break-word}
.preview-before{margin:0 0 16px;max-height:240px;overflow:auto;border:1px solid var(--border);border-radius:12px;background:#f7f8fa}
.preview-before img{width:100%;height:auto;display:block}
.pdf-chip{padding:24px;text-align:center;font-weight:700;color:var(--muted)}
.submit-upload:disabled{opacity:.45;cursor:not-allowed}
.hint{text-align:center;color:var(--muted);font-size:var(--font-sm);margin-top:14px}

/* ---------------------------------- review page ---------------------------------- */
.split,.review-split,.detail-grid{display:grid;grid-template-columns:1fr;gap:16px}
.review-form-contents{display:contents}
.gold-section-full{grid-column:1/-1}
.review-submit-row{grid-column:1/-1;max-width:640px;display:flex;gap:10px;flex-wrap:wrap}
.review-submit-row .btn,.review-submit-row .cancel-edit-link{flex:1;min-width:160px}
.review-side-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.review-side-actions form{flex:1;min-width:220px;margin:0}
.doc-panel,.review-panel{min-width:0}
.doc-toolbar{display:flex;justify-content:space-between;align-items:center;background:#fff;padding:12px 14px;border:1px solid var(--border);border-bottom:0;border-radius:var(--radius) var(--radius) 0 0;font-size:var(--font-sm);flex-wrap:wrap;gap:8px}
.zoom-controls{display:flex;align-items:center;gap:4px}
.zoom-controls button{width:30px;height:30px;border:1px solid var(--border);background:#fff;border-radius:7px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}
.zoom-controls button:hover{background:var(--bg)}
.zoom-controls span{font-size:12px;color:var(--muted);min-width:42px;text-align:center}
.doc-preview-frame{overflow:auto}
.doc-preview-frame img,.doc-preview-frame iframe{transition:transform .15s ease}
.doc-toolbar a{font-size:12px}
.doc-preview{background:#e8ebf0;min-height:280px;border-radius:0 0 var(--radius) var(--radius);display:flex;align-items:flex-start;justify-content:center;overflow:auto;max-height:60vh}
.doc-preview img{width:100%;height:auto;display:block}
.doc-preview iframe{width:100%;height:100%;border:0;min-height:60vh}
.review-panel{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.review-panel h3{margin:0 0 12px;font-size:var(--font-md)}
.review-panel h3.section-gap{margin-top:20px}
.gold-computed-row{background:#f7f8fa;border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin:14px 0;font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.gold-charges-grid{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}

/* review page: step nav */
.review-stepper{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;margin-bottom:var(--space-4);overflow-x:auto}
.review-stepper .step{display:flex;align-items:center;gap:8px;text-decoration:none;color:inherit;flex-shrink:0}
.review-stepper .step-circle{width:28px;height:28px;border-radius:50%;background:#eef1f5;color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0}
.review-stepper .step.active .step-circle{background:var(--gold);color:#17130a}
.review-stepper .step b{display:block;font-size:12.5px}
.review-stepper .step small{display:block;color:var(--muted);font-size:10.5px}
.review-stepper .step-line{flex:1;height:1px;background:var(--border);min-width:20px}

/* review page: highlighted summary boxes for total/vat/subtotal */
.summary-highlight-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
.summary-highlight{background:#fdf6e8;border:1px solid #eddcab;border-radius:12px;padding:12px;display:flex;align-items:center;gap:10px}
.summary-highlight .sh-icon{width:34px;height:34px;border-radius:9px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.summary-highlight .sh-body{flex:1;min-width:0}
.summary-highlight .sh-body span{display:block;font-size:11px;color:#8a6d2e;margin-bottom:4px}
.summary-highlight .sh-body input{background:transparent;border:0;padding:0;font-size:18px;font-weight:800;color:var(--navy);width:100%;min-height:auto}

/* review page: AI notes */
.ai-notes-box{background:#eef8f2;border:1px solid #bfe3cc;border-radius:12px;padding:12px 14px;margin-bottom:14px;display:flex;gap:10px;align-items:flex-start}
.ai-notes-box .ai-icon{font-size:20px;flex-shrink:0}
.ai-notes-box .ai-body{flex:1;font-size:12.5px;color:#1c4a30}
.ai-confidence-pill{background:#1a7f59;color:#fff;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:4px;margin-bottom:6px}

/* review page: gold lines as a real table */
.gold-lines-table{width:100%;border-collapse:collapse;min-width:760px}
.gold-lines-table th,.gold-lines-table td{border:1px solid var(--border);padding:8px;text-align:center;font-size:12.5px}
.gold-lines-table input{width:100%;min-height:36px;padding:6px;font-size:12.5px;border:1px solid #d6dce5;border-radius:6px}
.gold-lines-table td.gl-desc{min-width:130px;text-align:start}
.gold-row-delete{background:var(--red-bg);color:var(--red);border:0;border-radius:7px;width:30px;height:30px;cursor:pointer;font-size:14px}
.add-gold-line{margin-top:10px}
.gold-computed-badge{display:inline-flex;align-items:center;gap:6px;background:#eef2f7;border-radius:999px;padding:8px 14px;font-size:12.5px;font-weight:700;margin-top:12px}

/* review page: sticky bottom action bar */
.review-bottom-bar{position:sticky;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);padding:12px 16px calc(12px + var(--safe-b));display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px;border-radius:var(--radius) var(--radius) 0 0;box-shadow:0 -4px 14px rgba(15,25,45,.06)}
.review-bottom-bar .spacer{flex:1}
.review-bottom-bar button,.review-bottom-bar a{white-space:nowrap}
.gold-section{border-top:1px solid var(--border);margin-top:8px;padding-top:14px}
.subhead h3{margin:0;font-size:var(--font-md)}
.subhead p{margin:4px 0 12px;color:var(--muted);font-size:var(--font-xs)}
.gold-lines{display:grid;gap:10px}
.gold-line{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:#f8f9fb;border:1px solid var(--border);padding:10px;border-radius:var(--radius);align-items:end}
.gold-line>div:first-child{grid-column:1/-1}
.gold-line span{font-size:11px;color:var(--muted);display:block;margin-bottom:4px}
.gold-line input{width:100%;border:1px solid #d6dce5;border-radius:8px;padding:9px;font-size:15px;min-height:40px}
.delete-line{font-size:11px;color:var(--red);white-space:nowrap;display:flex;align-items:center;gap:4px}

/* ---------------------------------- detail page ---------------------------------- */
.info-card h3{margin-top:0;font-size:var(--font-md)}
.doc-card{display:flex;flex-direction:column}
.doc-file-row{display:flex;align-items:center;gap:10px;background:#f7f8fa;border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:12px}
.doc-file-icon{font-size:26px;flex-shrink:0}
.doc-file-name{font-size:12px;color:var(--muted);word-break:break-all}
.doc-actions{display:flex;gap:10px;flex-wrap:wrap}
.doc-actions .btn,.doc-actions .secondary{flex:1;min-width:140px}
.payments-table th,.payments-table td{white-space:nowrap}
.payments-table td.attachments{white-space:normal}
dl{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin:0}
dt{color:var(--muted);font-size:var(--font-xs)}
dd{margin:0;font-weight:650;font-size:var(--font-sm)}
.vat-state{font-size:22px;font-weight:800;margin:12px 0 16px}
.alert{background:#fff4dd;border:1px solid #f1d28e;padding:12px;border-radius:10px;font-size:var(--font-sm)}
.duplicate-alert{background:var(--red-bg);border:1px solid #f3b3ab;color:var(--red);font-weight:700;margin-bottom:var(--space-4)}
.duplicate-alert a{color:var(--red);text-decoration:underline}
.eyebrow{display:inline-block;font-size:11px;font-weight:800;color:#7a5d1f;background:#f6edd8;border-radius:999px;padding:5px 8px;margin-bottom:6px}
.needs-review-badge{color:var(--red);background:var(--red-bg);margin-inline-start:6px}
.detail-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.balance-strip{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 16px}
.balance-strip .pill{display:block;width:fit-content}
.balance-strip>div{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:12px}
.balance-strip span{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}
.balance-strip strong{font-size:16px}
.mini-preview{height:220px;overflow:hidden;background:#eef0f3;border-radius:10px;margin-bottom:10px}
.mini-preview img{width:100%;height:100%;object-fit:contain}
.mini-preview iframe{width:100%;height:100%;min-height:220px}

.section-card{margin-top:14px}
.payments-layout{display:grid;grid-template-columns:1fr;gap:14px}
.payment-list{display:grid;gap:8px}
.payment-row{display:grid;grid-template-columns:1fr;gap:8px;border:1px solid var(--border);border-radius:var(--radius);padding:12px}
.payment-row span{display:block;color:var(--muted);font-size:11.5px;margin-top:4px}
.payment-value{font-weight:800}
.attachments{display:flex;gap:6px;flex-wrap:wrap}
.attachments a{font-size:11px;background:#eef2f7;padding:5px 8px;border-radius:7px;text-decoration:none}
.full{grid-column:1/-1}
.payment-form input[type=file]{border:1px dashed #cbd3df;border-radius:10px;padding:12px;background:#fafbfc;min-height:auto}

/* ---------------------------------- filters / lists ---------------------------------- */
.filters,.invoice-filter-card{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:14px}
.filter-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.filter-field input,.filter-field select{min-width:0;width:100%}
.filter-field label{font-size:var(--font-xs);color:var(--muted)}
.filter-actions{display:flex;gap:10px;flex-direction:column;justify-content:flex-end}
.filter-reset{display:flex;align-items:center;justify-content:center;gap:6px;background:#e9edf3;color:var(--navy);text-decoration:none;font-size:var(--font-sm);font-weight:700;border-radius:11px;padding:12px 16px;min-height:46px;white-space:nowrap}
.filter-reset:hover{background:#dde3ec}
.invoice-list{display:grid;gap:10px}
.invoice-row{background:#fff;border:1px solid var(--border);padding:14px;border-radius:var(--radius);text-decoration:none;color:inherit;display:flex;justify-content:space-between;align-items:center;gap:10px}
.invoice-row strong,.invoice-row span,.amount span{display:block}
.invoice-row span,.amount span{font-size:11.5px;color:var(--muted);margin-top:4px}
.amount{text-align:left;font-weight:800}

.invoice-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;flex-wrap:wrap}
.supplier-toolbar{margin-bottom:14px}
.supplier-search{display:flex;gap:8px}
.supplier-search input{flex:1}

/* ---------------------------------- messages ---------------------------------- */
.msg{padding:12px 14px;border-radius:10px;margin-bottom:12px;background:#e9edf3;font-size:var(--font-sm)}
.msg.success{background:var(--green-bg)}
.msg.warning{background:var(--amber-bg)}
.msg.error{background:var(--red-bg)}

/* ---------------------------------- mobile bottom bar ---------------------------------- */
.mobilebar{
  position:fixed;display:flex;bottom:0;left:0;right:0;height:var(--mobilebar-h);
  background:#fff;border-top:1px solid var(--border);z-index:20;
  justify-content:space-around;align-items:center;padding-bottom:var(--safe-b)
}
.mobilebar a,.mobilebar .linkbtn{
  text-decoration:none;color:var(--navy);font-size:21px;text-align:center;min-width:56px;
  background:none;border:0;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px
}
.mobilebar span{display:block;font-size:10px}
.mobilebar .capture{background:var(--gold);border-radius:14px;padding:8px 16px;margin-top:-20px;color:#17130a}
.mobilebar .logout-icon{color:var(--red)}

/* ==========================================================================
   Desktop / tablet — additive, mobile styles above remain the base
   ========================================================================== */
@media(min-width:640px){
  .cards,.dashboard-grid{grid-template-columns:repeat(3,1fr)}
  .invoice-types,.upload-actions{grid-template-columns:1fr 1fr}
  .balance-strip{grid-template-columns:repeat(4,1fr)}
  .balance-strip.balance-strip-3{grid-template-columns:repeat(3,1fr)}
  .summary-highlight-grid{grid-template-columns:repeat(3,1fr)}
  .gold-line{grid-template-columns:2fr repeat(7,1fr) auto}
  .gold-line>div:first-child{grid-column:auto}
  .filters,.invoice-filter-card{grid-template-columns:2fr 1fr 1fr auto}
  .filter-actions{flex-direction:row}
  .detail-grid{grid-template-columns:1fr 1fr}
  .payment-row{grid-template-columns:1.2fr .8fr auto;align-items:center}
  .table-wrap{display:block}
}

@media(min-width:860px){
  .dashboard-grid{grid-template-columns:repeat(4,1fr)}
  .invoice-filter-card{grid-template-columns:minmax(200px,1.4fr) repeat(4,minmax(120px,.8fr)) auto}
  .payments-layout{grid-template-columns:1.15fr .85fr}
  .split,.review-split{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start}
  .review-split .doc-preview{max-height:76vh}
  .review-split .doc-preview iframe{min-height:74vh}
  .review-split .doc-panel{grid-row:1/-1;position:sticky;top:88px}
}

@media(min-width:960px){
  :root{--header-h:72px}
  .topbar{padding-inline:max(22px,calc((100vw - var(--content-max))/2))}
  .menu-toggle{display:none!important}
  .mobile-menu{display:none!important}
  .mobilebar{display:none}
  .container{padding-bottom:56px}
  .brand small{display:block}
  body{font-size:15.5px}
}

@media(max-width:959.98px){
  /* On mobile/tablet: collapse secondary links into the hamburger menu,
     keep only the brand + a compact menu button visible in the topbar,
     so the logout action is always one tap away instead of vanishing. */
  .topbar nav > a:not(.primary),
  .topbar nav > form{display:none}
  .menu-toggle{display:inline-flex;align-items:center;justify-content:center}
}

@media(min-width:1400px){
  /* Wide desktop monitors: use more of the available width instead of
     leaving a large blank margin while a data table has to scroll. */
  :root{--content-max:1500px}
}

/* ========================================================================== */
/* Invoice review wizard — v3 (matches approved navy/gold mockups)            */
/* ========================================================================== */
.review-page-v3{background:#f5f7fa}
.review-page-v3 .container{max-width:1660px;padding-top:22px;padding-inline:34px;padding-bottom:100px}
.review-v3{--rv-navy:#10284b;--rv-gold:#d0a33e;--rv-gold-soft:#fff7e3;--rv-border:#dbe3ed;--rv-muted:#7c8ba2;--rv-bg:#f5f7fa;--rv-shadow:0 1px 2px rgba(16,40,75,.02);font-size:14px}
.review-hidden-field{display:none}

.review-topline{display:grid;grid-template-columns:minmax(600px,1fr) minmax(420px,610px);grid-template-areas:"stepper title";align-items:center;gap:40px;margin:0 0 22px}
.review-title-block{grid-area:title;text-align:right}
.review-title-block .title-line{display:flex;align-items:center;gap:12px;justify-content:flex-start;flex-direction:row-reverse}
.review-title-block h1{font-size:30px;line-height:1.15;margin:0;color:var(--rv-navy)}
.review-title-block .eyebrow{margin:0;background:#fbf1d6;color:#946e16;padding:7px 14px;font-size:12px}
.review-title-block p{color:#8491a4;margin:10px 0 0;font-size:13px}

.review-stepper-v3{grid-area:stepper;display:flex;align-items:flex-start;justify-content:center;gap:10px;direction:rtl}
.wizard-step{border:0;background:transparent;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;color:#64738a;min-width:150px;font-family:inherit}
.wizard-step-number{width:38px;height:38px;border-radius:50%;border:1px solid #d4dde8;background:#edf1f6;color:#65758d;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;box-shadow:0 0 0 4px #f5f7fa;transition:.2s}
.wizard-step-copy b{font-size:13px;color:#64738a;display:block;white-space:nowrap}
.wizard-step-copy small{display:block;color:#94a0b1;font-size:10px;white-space:nowrap;margin-top:2px}
.wizard-step.active .wizard-step-number{background:var(--rv-gold);border-color:var(--rv-gold);color:#fff}
.wizard-step.active .wizard-step-copy b{color:var(--rv-navy)}
.wizard-step.done .wizard-step-number{background:#72859d;border-color:#72859d;color:#fff}
.wizard-step.done .wizard-step-copy b{color:#45566f}
.wizard-line{height:1px;background:#bcc8d7;flex:1;max-width:105px;min-width:50px;margin-top:19px}
.wizard-step.active + .wizard-line,.wizard-step.done + .wizard-line{background:#d6b361}

.wizard-page{display:none;animation:rvFade .14s ease}
.wizard-page.active{display:block}
@keyframes rvFade{from{opacity:.6;transform:translateY(3px)}to{opacity:1;transform:none}}
.rv-card{background:#fff;border:1px solid var(--rv-border);border-radius:10px;box-shadow:var(--rv-shadow)}
.rv-card-title{display:flex;align-items:center;gap:9px;margin:0 0 14px}
.rv-card-title h2{margin:0;font-size:16px;color:var(--rv-navy);font-weight:800}
.rv-title-icon{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;background:#eef5ff;color:#123f73;font-weight:900;font-size:14px;flex:none}

/* step 1 */
.step-one-grid{display:grid;grid-template-columns:minmax(0,1.17fr) minmax(460px,.93fr);grid-template-areas:"basic doc";gap:16px;align-items:stretch}
.basic-data-card{grid-area:basic;padding:18px 20px}
.invoice-document-card{grid-area:doc;padding:16px;display:flex;flex-direction:column;min-height:575px}
.review-fields-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.rv-field{display:flex;flex-direction:column;gap:5px;color:#728198;font-size:11.5px;font-weight:600;min-width:0}
.rv-field input,.rv-field select,.rv-field textarea{min-width:0}
.rv-field>span:first-child{line-height:1.15}
.rv-field input,.rv-field select,.rv-field textarea,.review-notes-card textarea{width:100%;height:39px;border:1px solid #cfd9e5;border-radius:7px;background:#fff;color:#142642;font:inherit;font-size:13px;padding:8px 11px;outline:none;box-shadow:0 1px 2px rgba(16,40,75,.02)}
.rv-field textarea{height:39px;min-height:39px;resize:vertical}
.rv-field input:focus,.rv-field select:focus,.rv-field textarea:focus,.review-notes-card textarea:focus{border-color:#9bb0ca;box-shadow:0 0 0 3px rgba(30,80,135,.07)}
.field-error{color:#b52d22;font-size:10px}
.amount-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.amount-card{border:1px solid #d8e1ec;border-radius:8px;background:#f8fafc;min-height:83px;padding:10px 13px;display:flex;align-items:center;gap:11px;cursor:text}
.amount-card.amount-total{background:linear-gradient(135deg,#fff9e9,#fff3d2);border-color:#d8ae50}
.amount-icon{font-size:24px;color:#153e71}
.amount-total .amount-icon{color:#bd8c22}
.amount-copy{display:grid;grid-template-columns:1fr auto;align-items:end;gap:1px 7px;flex:1;min-width:0}
.amount-copy small{grid-column:1/-1;color:#77869b;font-size:11px;font-style:normal}
.amount-copy input{border:0;background:transparent;padding:0!important;min-height:0!important;height:auto!important;font-size:19px!important;font-weight:800;color:#173052;text-align:start;width:100%}
.amount-copy em{font-style:normal;font-size:11px;color:#667791}
.amount-total .amount-copy small,.amount-total .amount-copy em{color:#a2771b}
.amount-total .amount-copy input{color:#a77915}
.ai-review-banner{margin-top:14px;background:linear-gradient(90deg,#fff8e7,#fffaf0);border:1px solid #f0dcae;border-radius:8px;min-height:83px;padding:13px 15px;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"head content pill";gap:8px 16px;align-items:center}
.ai-review-head{grid-area:head;display:flex;align-items:center;gap:7px;color:#153258;white-space:nowrap}.ai-title-icon{color:#c5962a;font-size:19px}.ai-review-content{grid-area:content;font-size:11px;color:#394d68;line-height:1.8;text-align:center}.ai-confidence-v3{grid-area:pill;background:#dff7e9;color:#11834f;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap}
.doc-title-row{justify-content:flex-start}.doc-toolbar-v3{background:#26333e;color:#fff;height:42px;border-radius:6px 6px 0 0;padding:0 12px;display:flex;align-items:center;justify-content:space-between;direction:ltr}.doc-tools{display:flex;align-items:center;gap:6px}.doc-icon-btn{width:29px;height:29px;border:0;background:transparent;color:#fff;border-radius:5px;font-size:15px;cursor:pointer}.doc-icon-btn:hover{background:rgba(255,255,255,.1)}.doc-zoom-label{font-size:11px;padding:0 5px}.doc-tool-divider{height:20px;width:1px;background:rgba(255,255,255,.2);margin:0 3px}.doc-open-link{color:#fff;text-decoration:none;font-size:11px}.doc-stage{flex:1;min-height:480px;max-height:520px;overflow:auto;background:#e9edf1;display:flex;align-items:flex-start;justify-content:center;border-radius:0 0 6px 6px}.doc-media{width:100%;height:100%;min-height:480px;border:0;object-fit:contain;transform-origin:center top;transition:transform .15s ease;display:block}

/* step 2 */
.gold-overview-strip{padding:12px 16px;display:grid;grid-template-columns:2.2fr 1.25fr 1.15fr .9fr 1.1fr;gap:12px;margin-bottom:14px}
.overview-item{min-height:82px;border:1px solid #dbe4ef;border-radius:8px;background:#fbfcfe;padding:12px 14px;display:flex;flex-direction:column;justify-content:center;gap:6px}.overview-item small{font-size:11px;color:#8190a5}.overview-item strong{font-size:14px;color:#142a49;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overview-total{background:linear-gradient(135deg,#fff9e8,#fff2cc);border-color:#d6aa47}.overview-total small,.overview-total strong,.overview-total em{color:#a37413}.overview-total strong{font-size:24px}.overview-total em{font-size:11px;font-style:normal}
.step-two-main-grid{display:grid;grid-template-columns:430px minmax(0,1fr);grid-template-areas:"doc gold";gap:14px;align-items:stretch}
.step-two-doc{grid-area:doc;padding:14px;display:flex;flex-direction:column;min-height:500px}.doc-toolbar-v3.compact{height:40px}.gold-doc-stage{min-height:420px;max-height:455px}.gold-doc-stage .doc-media{min-height:420px}
.gold-editor-card{grid-area:gold;padding:16px}.gold-editor-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}.gold-editor-head h2{font-size:16px;margin:0;color:#142a49}.gold-editor-head p{font-size:11px;color:#8592a5;margin:4px 0 0}.gold-table-shell{overflow:auto;border:1px solid #dbe3ee;border-radius:7px}.gold-lines-table-v3{min-width:940px;border-collapse:collapse;background:#fff}.gold-lines-table-v3 th{background:#f3f6fa;color:#77869d;font-size:10.5px;font-weight:700;padding:9px 7px;border:1px solid #dfe6ef;text-align:center}.gold-lines-table-v3 td{padding:6px;border:1px solid #e2e8f0;text-align:center}.gold-lines-table-v3 td input{width:100%;height:38px;border:1px solid #ccd7e3;border-radius:6px;padding:6px 8px;text-align:center;font-size:12px;color:#162b49}.gold-lines-table-v3 .gold-desc input{text-align:right;min-width:150px}.gold-action-cell{width:54px}.gold-delete-checkbox{display:none}.gold-row-delete{width:30px;height:30px;border:0;border-radius:6px;background:#fff0ee;color:#e33b2e;cursor:pointer;font-size:15px}.outline-gold-btn{margin-top:9px;border:1px solid #d2a33d;color:#a77b1b;background:#fff;border-radius:7px;height:36px;padding:0 14px;font:inherit;font-weight:700;font-size:11px;cursor:pointer}.gold-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}.gold-stat{background:#f8fafc;border:1px solid #e0e7ef;border-radius:8px;min-height:75px;padding:10px 12px;display:flex;align-items:center;gap:10px}.gold-stat>span{width:33px;height:33px;border-radius:7px;background:#eef5ff;color:#1e5795;display:flex;align-items:center;justify-content:center;font-size:17px}.gold-stat small{display:block;color:#7b8aa0;font-size:10.5px}.gold-stat strong{display:inline-block;color:#173052;font-size:18px;margin-top:2px}.gold-stat em{font-style:normal;color:#7e8ca0;font-size:10px;margin-inline-start:4px}
.step-two-lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.ai-result-card,.charges-card{padding:14px}.ai-result-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.ai-result-head strong{color:#173052}.match-status,.final-match-box{background:linear-gradient(90deg,#eefbf4,#e7f8ef);border:1px solid #c3ead5;border-radius:8px;padding:11px 13px;display:flex;align-items:center;gap:10px;color:#16744f}.match-status.warning,.final-match-box.warning{background:#fff7e3;border-color:#efd797;color:#9b6d12}.match-icon,.final-match-icon{width:23px;height:23px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:900}.match-status strong,.match-status small,.final-match-box strong,.final-match-box small{display:block}.match-status strong,.final-match-box strong{font-size:12px}.match-status small,.final-match-box small{font-size:10px;margin-top:2px;color:inherit;opacity:.85}.charges-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.charge-basis{grid-column:1/-1}

/* step 3 */
.step-three-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(460px,.95fr);grid-template-areas:"left summary";gap:18px;align-items:start}.final-left-stack{grid-area:left;display:grid;gap:14px}.invoice-summary-card{grid-area:summary;padding:18px;min-height:690px}.payment-card-v3,.final-charges,.review-notes-card{padding:18px}.payment-grid-v3{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}.input-with-unit{display:flex;border:1px solid #cfd9e5;border-radius:7px;overflow:hidden;background:#fff;height:39px}.input-with-unit input{border:0!important;border-radius:0!important;height:37px!important;box-shadow:none!important;flex:1}.input-with-unit>span{min-width:62px;background:#f8fafc;border-inline-start:1px solid #dce4ee;display:flex;align-items:center;justify-content:center;color:#596980;font-size:11px}.check-field{display:flex;align-items:center;justify-content:flex-start;gap:10px;font-size:13px;color:#263b59;font-weight:700}.check-field input{width:18px;height:18px}.full-row{grid-column:1/-1}.review-notes-card textarea{height:72px;resize:vertical}.review-notes-count{text-align:left;font-size:10px;color:#8290a3;margin-top:5px}.summary-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.summary-card-head .rv-card-title{margin:0}.ready-badge{display:inline-flex;align-items:center;gap:6px;background:#e6f7ef;color:#168158;border-radius:7px;padding:8px 10px;font-weight:700;font-size:11px}.ready-badge span:first-child{width:20px;height:20px;border-radius:50%;background:#17855b;color:white;display:flex;align-items:center;justify-content:center}.summary-list-v3{display:grid;grid-template-columns:145px 1fr;gap:10px 18px;margin:0;padding-bottom:16px;border-bottom:1px solid #dde4ed}.summary-list-v3 dt{font-size:11.5px;color:#74849b}.summary-list-v3 dd{font-size:12.5px;color:#142944;font-weight:700;text-align:left;direction:ltr;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-money-list{padding:12px 0;border-bottom:1px solid #dde4ed}.summary-money-list>div{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:7px 9px;color:#223854}.summary-money-list span{font-size:11px;color:#73839a}.summary-money-list strong{font-size:15px}.summary-money-list em{font-size:11px;font-style:normal}.summary-money-list .summary-grand-total{background:linear-gradient(90deg,#fff6da,#fff0bf);border-radius:7px;margin-top:5px;color:#9b6b08}.summary-grand-total span{color:#9b6b08;font-weight:800}.summary-grand-total strong{font-size:24px;color:#14233b}.summary-grand-total b{font-size:19px;color:#b68115}.summary-mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:13px 0}.summary-mini-stats>div{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:10px 12px;display:flex;align-items:center;gap:10px}.summary-mini-stats>div>span{width:36px;height:36px;border-radius:8px;background:#edf5ff;color:#2461a0;display:flex;align-items:center;justify-content:center}.summary-mini-stats small{display:block;color:#7a899f;font-size:10px}.summary-mini-stats strong{color:#142943;font-size:14px}.summary-mini-stats em{font-style:normal;font-size:9px;color:#78879c}

/* action bar */
.review-actionbar-v3{position:fixed;left:0;right:0;bottom:var(--mobilebar-h);z-index:25;background:rgba(255,255,255,.97);border-top:1px solid #dbe3ec;min-height:68px;padding:10px max(34px,calc((100vw - 1592px)/2));display:flex;align-items:center;gap:12px;box-shadow:0 -5px 18px rgba(25,47,76,.04);backdrop-filter:blur(6px)}
.actionbar-spacer{flex:1}.action-set{display:none;align-items:center;gap:9px}.action-set.active{display:flex}.rv-action,.delete-invoice-action{height:42px;border-radius:7px;padding:0 20px;border:1px solid #d6dfe9;background:#fff;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap}.rv-action.light{background:#f4f7fa;color:#1b3150}.rv-action.gold{background:#d1a33e;border-color:#d1a33e;color:#201806;min-width:210px}.delete-invoice-action{background:#fff1ef;border-color:#ffd4cf;color:#d52c21;min-width:210px}.rv-action:hover,.delete-invoice-action:hover{filter:brightness(.98)}

/* Above 960px the global bottom nav (.mobilebar) is hidden entirely, so the
   review action bar can safely sit flush with the bottom of the screen. */
@media(min-width:960px){
  .review-actionbar-v3{bottom:0}
}

@media(max-width:1250px){
  .review-page-v3 .container{padding-inline:18px}.review-topline{grid-template-columns:1fr;grid-template-areas:"title" "stepper";gap:18px}.review-title-block{text-align:center}.review-title-block .title-line{justify-content:center}.step-one-grid{grid-template-columns:1fr;grid-template-areas:"basic" "doc"}.invoice-document-card{min-height:520px}.step-two-main-grid{grid-template-columns:1fr;grid-template-areas:"gold" "doc"}.step-two-doc{min-height:480px}.step-three-grid{grid-template-columns:1fr;grid-template-areas:"summary" "left"}.invoice-summary-card{min-height:0}.review-actionbar-v3{padding-inline:18px}.delete-invoice-action{min-width:auto}}
@media(max-width:820px){
  .review-page-v3 .container{padding:14px 10px calc(132px + var(--mobilebar-h))}.review-title-block h1{font-size:24px}.review-stepper-v3{overflow:auto;justify-content:flex-start;padding-bottom:4px}.wizard-step{min-width:120px}.wizard-step-copy small{display:none}.wizard-line{min-width:34px}.review-fields-grid,.payment-grid-v3,.charges-grid,.step-two-lower-grid{grid-template-columns:1fr}.charge-basis,.full-row{grid-column:auto}.amount-cards,.gold-overview-strip,.gold-stats-grid,.summary-mini-stats{grid-template-columns:1fr 1fr}.overview-supplier{grid-column:1/-1}.gold-table-shell{margin-inline:-4px}.invoice-document-card{padding:10px}.doc-stage{min-height:380px}.doc-media{min-height:380px}.review-actionbar-v3{min-height:104px;align-items:flex-end;gap:7px;padding:8px 10px calc(8px + var(--safe-b))}.actionbar-spacer{display:none}.delete-invoice-action{display:none}.action-set{width:100%;overflow-x:auto}.action-set.active{display:flex}.rv-action{flex:1;min-width:130px;padding-inline:12px}.rv-action.gold{min-width:180px}.summary-list-v3{grid-template-columns:115px 1fr}.ai-review-banner{grid-template-columns:1fr auto;grid-template-areas:"head pill" "content content"}.ai-review-content{text-align:right}}
@media(max-width:540px){.amount-cards,.gold-overview-strip,.gold-stats-grid,.summary-mini-stats{grid-template-columns:1fr}.review-fields-grid{grid-template-columns:1fr}.overview-supplier{grid-column:auto}.invoice-summary-card{padding:14px}.summary-list-v3{grid-template-columns:1fr;gap:3px}.summary-list-v3 dd{text-align:right;margin-bottom:8px}.review-topline{margin-bottom:14px}.wizard-step{min-width:104px}.wizard-step-number{width:32px;height:32px}.wizard-line{margin-top:16px}}
.review-v3 [data-charge-mirror]{width:100%;height:39px;border:1px solid #cfd9e5;border-radius:7px;background:#fff;color:#142642;font:inherit;font-size:13px;padding:8px 11px;outline:none}
.review-v3 .input-with-unit [data-charge-mirror]{border:0;border-radius:0;height:37px;padding:8px 11px}
.review-v3 .payment-attachment-field input[type=file]{height:auto;min-height:39px;padding:7px;background:#fafbfc;border:1px dashed #cbd6e2;border-radius:7px}
.review-topline{position:relative}
.step-title,.step-subtitle{display:none}
.review-v3[data-current-step="1"] [data-title-step="1"],.review-v3[data-current-step="2"] [data-title-step="2"],.review-v3[data-current-step="3"] [data-title-step="3"]{display:inline}
.top-back-btn{display:none;position:absolute;left:0;top:16px;height:42px;border:1px solid #d6dfe9;border-radius:7px;background:#fff;color:#203754;padding:0 16px;align-items:center;gap:8px;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.review-v3[data-current-step="3"] .top-back-btn{display:inline-flex}
@media(max-width:1250px){.top-back-btn{position:static;grid-column:1/-1;justify-self:start;margin-top:-6px}.review-v3[data-current-step="3"] .review-topline{grid-template-areas:"title" "stepper" "back"}.top-back-btn{grid-area:back}}

/* ========================================================================== */
/* Header RTL correction + Reports dashboard v1                               */
/* ========================================================================== */
.topbar{direction:ltr;max-width:none}
.header-left{display:flex;align-items:center;gap:20px;min-width:0;direction:ltr}
.header-utilities{display:flex;align-items:center;gap:13px;padding-inline-start:18px;border-inline-start:1px solid rgba(255,255,255,.18)}
.header-utilities form{margin:0}
.logout-top{display:flex;align-items:center;gap:5px}
.topbar .nav-main{margin-inline-start:auto;direction:rtl;display:flex;align-items:center;gap:18px}
html[dir="ltr"] .topbar .nav-main{direction:ltr}
.topbar .nav-main a{padding:8px 4px;border-radius:8px;font-size:13px;font-weight:650}
.topbar .nav-main a.active:not(.primary){background:var(--gold);color:#17130a;padding-inline:14px;font-weight:800}
.topbar .nav-main .primary{padding:9px 15px}

.reports-page-v1{background:#f5f7fa}
.reports-page-v1 .container{max-width:1660px;padding:16px 34px 50px}
.reports-v1{--rp-navy:#10284b;--rp-gold:#d2a442;--rp-border:#dbe3ed;--rp-muted:#7f8da1;color:#162b49;font-size:13px}
.reports-titlebar{display:flex;justify-content:space-between;align-items:flex-start;margin:0 0 10px;min-height:54px}
.reports-titleline{display:flex;align-items:center;gap:14px;justify-content:flex-start;flex-direction:row}
.reports-titleline h1{margin:0;font-size:29px;line-height:1.1;color:var(--rp-navy)}
.reports-eyebrow{background:#fbf0d2;color:#a47517;border-radius:999px;padding:6px 15px;font-weight:700;font-size:11px}
.reports-titlebar p{margin:7px 0 0;color:#8190a5;font-size:11.5px}
.reports-filter-card,.report-card,.report-kpi{background:#fff;border:1px solid var(--rp-border);border-radius:8px;box-shadow:0 1px 2px rgba(16,40,75,.02)}
.reports-filter-card{padding:11px 13px 13px;margin-bottom:13px}
.reports-filter-title{display:flex;align-items:center;gap:7px;justify-content:flex-start;margin-bottom:7px;font-size:12px;color:#173153}.reports-filter-title span{font-size:17px}
.reports-filter-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr .8fr auto;gap:10px;align-items:end}
.reports-filter-grid label{display:flex;flex-direction:column;gap:4px;color:#8190a4;font-size:10px}
.reports-filter-grid select,.reports-filter-grid input{height:38px;border:1px solid #cfd9e5;border-radius:6px;background:#fbfcfe;color:#173052;padding:0 10px;font:inherit;font-size:11px;outline:none}
.reports-date-range{display:flex;align-items:center;height:38px;border:1px solid #cfd9e5;border-radius:6px;background:#fbfcfe;overflow:hidden}
.reports-date-range input{border:0;min-width:0;flex:1;background:transparent;height:36px}.reports-date-range em{font-style:normal;color:#8090a4}
.reports-filter-actions{display:flex;direction:ltr;gap:7px;align-items:center;white-space:nowrap}
.report-apply,.report-export{height:38px;border-radius:6px;padding:0 13px;border:1px solid #c8d4e2;background:#fff;color:#173052;text-decoration:none;font:inherit;font-weight:700;font-size:10.5px;display:inline-flex;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.report-apply{background:var(--rp-gold);border-color:var(--rp-gold);color:#fff;min-width:118px}
.report-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin-bottom:12px}
.report-kpi{min-height:86px;padding:12px 17px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.report-kpi>div{display:flex;flex-direction:column;gap:2px}.report-kpi small{color:#64758d;font-size:11px;font-weight:700}.report-kpi strong{font-size:22px;color:#193459;line-height:1.2}.report-kpi em{font-style:normal;color:#718198;font-size:10.5px}.rk-icon{font-size:25px;color:#173f70}.report-kpi-gold{background:linear-gradient(135deg,#fff9e8,#fff3d5);border-color:#d4a643}.report-kpi-gold small,.report-kpi-gold strong,.report-kpi-gold em,.report-kpi-gold .rk-icon{color:#a47618}
.report-card{padding:12px 14px;min-width:0}.report-card header{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-bottom:10px}.report-card header h2{margin:0;font-size:14px;color:#153154}.report-card header span{margin-inline-start:auto;color:#183f6d;font-size:18px}
.reports-grid-top{display:grid;grid-template-columns:.78fr 1.42fr .98fr;gap:11px;margin-bottom:11px;direction:rtl}.reports-grid-top>*{direction:rtl}
.tax-card{min-height:205px}.tax-chart{height:155px;display:flex;align-items:flex-end;justify-content:space-around;gap:16px;padding:5px 5px 0;border-bottom:1px solid #e7ecf2}.tax-col{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;text-align:center}.tax-col b{font-size:10px;color:#173253}.tax-col span{font-size:9.5px;color:#63758e;line-height:1.25}.tax-col em{font-style:normal}.tax-bar{width:54px;height:calc(var(--h) * .72);min-height:8px}.tax-bar.gold{background:#d0a13d}.tax-bar.blue{background:#3e82ba}.tax-bar.gray{background:#a9b8c9}
.monthly-card{min-height:205px}.monthly-chart{height:145px;display:grid;grid-template-columns:38px 1fr;gap:5px;direction:ltr}.monthly-y{display:flex;flex-direction:column;justify-content:space-between;color:#8190a3;font-size:8px;padding-bottom:23px}.monthly-bars{display:flex;align-items:flex-end;gap:13px;border-left:1px solid #dfe6ee;border-bottom:1px solid #dfe6ee;background:repeating-linear-gradient(to top,#fff 0,#fff 26px,#edf1f5 27px);padding:7px 9px 0;height:120px}.month-col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:22px}.month-bar{width:65%;max-width:35px;min-height:3px;background:linear-gradient(#dcb25a,#cfa13c);border-radius:2px 2px 0 0}.month-col span{font-size:8.5px;color:#667892;margin-top:5px;white-space:nowrap}.chart-legend{text-align:center;font-size:9px;color:#60738c;margin-top:3px}.chart-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#d0a13d;margin-inline-end:5px}
.category-card{min-height:205px}.category-body{height:158px;display:grid;grid-template-columns:145px 1fr;align-items:center;gap:10px;direction:ltr}.donut{width:125px;height:125px;border-radius:50%;display:grid;place-items:center;margin:auto;position:relative}.donut::after{content:"";position:absolute;width:72px;height:72px;border-radius:50%;background:white}.donut>div{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column}.donut strong{font-size:17px;color:#19375f}.donut span{font-size:9px;color:#718198}.category-legend{direction:rtl;display:flex;flex-direction:column;gap:9px}.category-legend>div{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:7px;border-bottom:1px solid #eef1f5;padding-bottom:4px}.category-legend i{width:10px;height:10px;border-radius:50%}.category-legend span{font-size:10px;color:#49617d}.category-legend b{font-size:10px;color:#183a67}
.reports-grid-mid{display:grid;grid-template-columns:.85fr 1.4fr .78fr;gap:11px;margin-bottom:11px;direction:rtl}.reports-grid-mid>*{direction:rtl;min-height:205px}
.performance-kpis{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:6px}.performance-kpis>div{border:1px solid #e0e7ef;border-radius:6px;background:#fbfcfe;text-align:center;padding:7px}.performance-kpis strong{display:block;font-size:17px;line-height:1.1}.performance-kpis strong.pos{color:#15935c}.performance-kpis strong.neg{color:#c43d31}.performance-kpis span{font-size:8.5px;color:#77879c;line-height:1.35}.line-chart-wrap{height:92px}.line-chart{width:100%;height:74px;overflow:visible}.grid-line{stroke:#e7ecf1;stroke-width:1}.purchase-line{fill:none;stroke:#d0a13d;stroke-width:3;vector-effect:non-scaling-stroke}.count-line{fill:none;stroke:#163c68;stroke-width:2.4;vector-effect:non-scaling-stroke}.line-months{display:flex;justify-content:space-between;gap:3px;font-size:7.5px;color:#7c8ba0;direction:rtl}.line-legend{display:flex;justify-content:center;gap:15px;font-size:8px;color:#64758d}.line-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-inline-end:4px}.lgold{background:#d0a13d}.lnavy{background:#163c68}
.report-table-wrap{overflow:auto}.report-table{min-width:620px;border-collapse:collapse;width:100%;font-size:9.5px}.report-table th{background:#f4f7fa;color:#6e7e93;font-weight:700;padding:6px;border:1px solid #e0e7ef;white-space:nowrap}.report-table td{padding:6px;border:1px solid #e5eaf0;color:#26425f;text-align:center;white-space:nowrap}.report-table a{color:#174b80;text-decoration:none}.status-pill{display:inline-flex;align-items:center;justify-content:center;min-width:54px;border-radius:999px;padding:3px 8px;font-size:8.5px;font-weight:700}.status-pill.ok{background:#ddf5e7;color:#177a50}.status-pill.wait{background:#fff1d5;color:#9b6810}
.supplier-ranking{display:flex;flex-direction:column}.supplier-ranking>div{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #edf1f5;direction:ltr}.supplier-ranking .rank{width:22px;height:22px;border-radius:50%;background:#e5ecf4;color:#183b67;display:grid;place-items:center;font-size:9px}.supplier-ranking .rank.first{background:#d2a442;color:#fff}.supplier-ranking b{font-size:9px;color:#1f456f;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.supplier-ranking strong{font-size:9px;color:#264761;white-space:nowrap}.supplier-ranking small{font-size:8px;color:#738299}
.report-log-card{padding-bottom:8px}.report-log-table{min-width:980px}.report-actions-cell{display:flex;align-items:center;justify-content:center;gap:9px}.report-actions-cell button,.report-actions-cell a{border:0;background:transparent;color:#174a7f;font:inherit;font-size:9px;cursor:pointer;text-decoration:none}
@media(max-width:1250px){.reports-page-v1 .container{padding-inline:18px}.reports-filter-grid{grid-template-columns:repeat(3,1fr)}.reports-filter-actions{grid-column:1/-1;justify-content:flex-start}.report-kpis{grid-template-columns:repeat(3,1fr)}.reports-grid-top,.reports-grid-mid{grid-template-columns:1fr 1fr}.monthly-card,.recent-card{grid-column:1/-1}}
@media(max-width:959.98px){.header-utilities{display:none}.topbar .nav-main>a{display:none}.topbar .nav-main .menu-toggle{display:inline-flex!important}.topbar{direction:ltr}.reports-grid-top,.reports-grid-mid{grid-template-columns:1fr}.reports-grid-top>*,.reports-grid-mid>*{grid-column:auto}.report-kpis{grid-template-columns:1fr 1fr}.reports-filter-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.reports-page-v1 .container{padding:12px 9px 85px}.reports-titleline h1{font-size:24px}.reports-filter-grid,.report-kpis{grid-template-columns:1fr}.reports-filter-actions{flex-wrap:wrap}.report-kpi{min-height:74px}.category-body{grid-template-columns:125px 1fr}.reports-grid-top,.reports-grid-mid{display:block}.report-card{margin-bottom:10px}}
@media print{.topbar,.reports-filter-card,.mobilebar,.mobile-menu{display:none!important}.reports-page-v1 .container{max-width:none;padding:0}.reports-v1{font-size:10px}.report-card,.report-kpi{break-inside:avoid;box-shadow:none}.report-log-card{page-break-before:always}}

/* ========================================================================== */
/* v5 language/layout hotfix                                                   */
/* - Mirror the COMPLETE header between Arabic and English, including brand.   */
/* - Let Reports dashboard follow the active document direction.                */
/* ========================================================================== */
html[dir="rtl"] .topbar{direction:rtl}
html[dir="ltr"] .topbar{direction:ltr}
.topbar .brand{direction:ltr;flex:0 0 auto}
.topbar .nav-main{direction:inherit;margin-inline-start:0;display:flex;align-items:center;gap:18px;min-width:0}
.header-utilities{direction:inherit;margin-inline-start:auto;display:flex;align-items:center;gap:13px;padding-inline-start:18px;border-inline-start:1px solid rgba(255,255,255,.18);flex:0 0 auto}

/* Reports page mirrors naturally with the selected language. */
.reports-v1,.reports-filter-grid,.report-kpis,.reports-grid-top,.reports-grid-mid,.reports-grid-top>*,.reports-grid-mid>*,.report-table,.report-log-table{direction:inherit}
html[dir="rtl"] .reports-v1{text-align:right}
html[dir="ltr"] .reports-v1{text-align:left}
html[dir="rtl"] .reports-filter-actions{direction:rtl}
html[dir="ltr"] .reports-filter-actions{direction:ltr}
html[dir="rtl"] .category-legend{direction:rtl}
html[dir="ltr"] .category-legend{direction:ltr}
html[dir="rtl"] .line-months{direction:rtl}
html[dir="ltr"] .line-months{direction:ltr}
html[dir="rtl"] .supplier-ranking>div{direction:rtl}
html[dir="ltr"] .supplier-ranking>div{direction:ltr}
html[dir="ltr"] .report-card header span{margin-inline-start:auto}
html[dir="rtl"] .report-card header span{margin-inline-start:auto}

@media(max-width:959.98px){
  html[dir="rtl"] .topbar{direction:rtl}
  html[dir="ltr"] .topbar{direction:ltr}
  .topbar .nav-main{margin-inline-start:auto}
}


/* ========================================================================== */
/* v6 mobile redesign / overlap fix                                           */
/* - Rebuild small-screen layouts so fields never stack on top of each other.  */
/* - Applies to header, dashboard, lists, review wizard, reports and forms.    */
/* ========================================================================== */

/* Generic safety: keep every form/grid child shrinkable inside CSS grids. */
.container *,
.review-v3 *,
.reports-v1 *{min-width:0}

/* Header: real mirrored layout on desktop, compact safe layout on mobile. */
html[dir="rtl"] .topbar{direction:rtl}
html[dir="ltr"] .topbar{direction:ltr}
html[dir="rtl"] .topbar .brand{order:1}
html[dir="rtl"] .topbar .nav-main{order:2}
html[dir="rtl"] .topbar .header-utilities{order:3;margin-inline-start:0;margin-inline-end:auto}
html[dir="ltr"] .topbar .brand{order:1}
html[dir="ltr"] .topbar .nav-main{order:2}
html[dir="ltr"] .topbar .header-utilities{order:3;margin-inline-start:auto;margin-inline-end:0}

@media(max-width:959.98px){
  .topbar{
    height:auto;
    min-height:var(--header-h);
    padding:10px 14px;
    gap:10px;
  }
  .brand{max-width:calc(100% - 52px)}
  .brand b{font-size:14px}
  .brand small{display:block;font-size:10.5px}
  .topbar .nav-main{
    margin-inline-start:0;
    gap:8px;
    flex:0 0 auto;
  }
  .topbar .nav-main > a,
  .topbar .nav-main > form{display:none!important}
  .header-utilities{display:none!important}
  .menu-toggle{
    display:inline-flex!important;
    align-items:center;justify-content:center;
    width:40px;height:40px;
  }
  .mobile-menu.open{
    top:auto;
    position:relative;
    padding:10px 14px calc(14px + var(--safe-b));
  }
}

/* Dashboard / top cards */
@media(max-width:820px){
  .dashboard-hero{padding:18px;border-radius:14px}
  .dashboard-hero h1{font-size:22px}
  .cards,.dashboard-grid{grid-template-columns:1fr;gap:10px}
  .invoice-actions{padding:12px;align-items:stretch}
  .invoice-actions .btn,.invoice-actions .secondary,.invoice-actions .filter-reset{width:100%}
  .supplier-search{flex-direction:column}
}

/* Filters and standard forms */
@media(max-width:820px){
  .filters,
  .invoice-filter-card,
  .form-grid,
  .supplier-grid{grid-template-columns:1fr!important;gap:10px}
  .filter-actions{flex-direction:column;align-items:stretch}
  .filter-actions .btn,
  .filter-actions .secondary,
  .filter-actions .filter-reset{width:100%}
  .doc-actions .btn,
  .doc-actions .secondary,
  .detail-actions .btn,
  .detail-actions .secondary,
  .section-head .btn,
  .section-head .secondary{width:100%}
}

/* Report page small-screen rebuild */
@media(max-width:959.98px){
  .reports-page-v1 .container{padding:14px 12px calc(88px + var(--safe-b))}
  .reports-titlebar,
  .reports-titleline{display:block}
  .reports-titleline h1{font-size:25px;margin-top:6px}
  .reports-filter-card{padding:12px}
  .reports-filter-grid{grid-template-columns:1fr 1fr!important;gap:10px}
  .reports-filter-grid > *{min-width:0}
  .reports-filter-actions{grid-column:1/-1;flex-wrap:wrap;justify-content:stretch}
  .report-apply,.report-export{flex:1;min-width:130px}
  .report-kpis{grid-template-columns:1fr 1fr;gap:10px}
  .report-kpi{min-height:88px;padding:12px 14px}
  .reports-grid-top,.reports-grid-mid{grid-template-columns:1fr!important;gap:10px}
  .report-card{padding:12px}
  .report-card header{align-items:flex-start}
  .report-table-wrap{overflow:auto}
  .report-log-card{overflow:hidden}
}
@media(max-width:620px){
  .reports-filter-grid,
  .report-kpis{grid-template-columns:1fr!important}
  .report-kpi strong{font-size:20px}
  .category-body{grid-template-columns:1fr!important;gap:12px}
  .category-body .donut{margin-inline:auto}
  .category-legend{padding-inline:4px}
  .reports-grid-top,.reports-grid-mid{display:grid}
  .report-card{margin-bottom:0}
  .report-actions-cell{flex-wrap:wrap;gap:6px}
}

/* Upload page */
@media(max-width:620px){
  .upload-card{padding:14px}
  .invoice-types,
  .upload-actions{grid-template-columns:1fr!important}
  .action-tile{min-height:92px;padding:16px 12px}
  .action-tile span{font-size:24px}
}

/* Tables everywhere: preserve readability without collisions */
@media(max-width:820px){
  .table-wrap,
  .invoice-table-shell,
  .report-table-wrap,
  .gold-table-shell{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .table-wrap table,
  .invoice-table-shell table,
  .report-table,
  .report-log-table,
  .gold-lines-table-v3{min-width:max-content}
}

/* Review wizard comprehensive mobile redesign */
@media(max-width:1250px){
  .review-page-v3 .container{padding-inline:18px}
  .review-topline{grid-template-columns:1fr;grid-template-areas:"title" "stepper";gap:16px;margin-bottom:16px}
  .review-title-block{text-align:center}
  .review-title-block .title-line{justify-content:center;flex-wrap:wrap;gap:8px}
  .top-back-btn{position:static;grid-column:1/-1;justify-self:start;margin-top:-4px}
  .review-v3[data-current-step="3"] .review-topline{grid-template-areas:"title" "stepper" "back"}
  .top-back-btn{grid-area:back}
  .step-one-grid,
  .step-two-main-grid,
  .step-three-grid,
  .step-two-lower-grid,
  .payments-layout{grid-template-columns:1fr!important;grid-template-areas:none;gap:12px}
  .basic-data-card,
  .invoice-document-card,
  .step-two-doc,
  .gold-editor-card,
  .final-left-stack,
  .invoice-summary-card{grid-area:auto!important}
  .invoice-document-card,
  .step-two-doc{min-height:unset}
}

@media(max-width:820px){
  .review-page-v3 .container{padding:14px 10px calc(148px + var(--mobilebar-h) + var(--safe-b))}
  .review-topline{margin-bottom:14px}
  .review-title-block h1{font-size:24px}
  .review-title-block p{font-size:12px;line-height:1.7}
  .review-stepper-v3{
    overflow:auto;
    justify-content:flex-start;
    padding:4px 0 8px;
    margin-inline:-2px;
    scroll-snap-type:x proximity;
  }
  .wizard-step{min-width:116px;scroll-snap-align:start}
  .wizard-step-copy small{display:none}
  .wizard-line{min-width:30px;margin-top:16px}

  .review-fields-grid,
  .payment-grid-v3,
  .charges-grid,
  .summary-highlight-grid,
  .amount-cards,
  .gold-overview-strip,
  .gold-stats-grid,
  .summary-mini-stats{grid-template-columns:1fr 1fr!important;gap:10px}
  .rv-field,
  .claimed-only,
  .charge-basis,
  .full-row,
  .overview-supplier{grid-column:auto!important}
  .review-fields-grid .rv-field:first-child,
  .review-fields-grid .rv-field:nth-child(5),
  .overview-supplier{grid-column:1/-1!important}

  .basic-data-card,
  .invoice-document-card,
  .gold-editor-card,
  .payment-card-v3,
  .final-charges,
  .review-notes-card,
  .invoice-summary-card{padding:14px}

  .amount-card,
  .overview-item,
  .gold-stat,
  .summary-mini-stats > div,
  .report-kpi{min-height:unset}

  .ai-review-banner,
  .match-status,
  .final-match-box{grid-template-columns:1fr auto;grid-template-areas:"head pill" "content content";align-items:start}
  .ai-review-content{text-align:start}

  .doc-toolbar-v3,
  .doc-toolbar{padding:8px 10px;gap:8px;min-height:42px;flex-wrap:wrap}
  .doc-open-link{font-size:10px}
  .doc-stage,
  .gold-doc-stage{min-height:300px;max-height:50vh}
  .doc-media,
  .gold-doc-stage .doc-media{min-height:300px}

  .gold-table-shell{margin-inline:-4px;border-radius:8px}
  .gold-lines-table-v3 th,
  .gold-lines-table-v3 td{padding:6px}
  .gold-lines-table-v3 td input{height:36px;font-size:12px;padding:6px}

  .summary-list-v3{grid-template-columns:120px 1fr;gap:10px 12px}
  .summary-list-v3 dd{white-space:normal;overflow:visible;text-overflow:clip;text-align:start}

  .review-actionbar-v3{
    min-height:100px;
    align-items:flex-end;
    gap:8px;
    padding:8px 10px calc(8px + var(--safe-b));
  }
  .actionbar-spacer{display:none}
  .delete-invoice-action{display:none}
  .action-set{width:100%;overflow-x:auto;gap:8px;padding-bottom:2px}
  .action-set.active{display:flex}
  .rv-action{flex:1;min-width:132px;padding-inline:12px}
  .rv-action.gold{min-width:170px}
}

@media(max-width:540px){
  .review-page-v3 .container{padding-bottom:calc(160px + var(--mobilebar-h) + var(--safe-b))}
  .review-title-block h1{font-size:22px}
  .wizard-step{min-width:102px}
  .wizard-step-number{width:32px;height:32px;font-size:13px}
  .wizard-line{min-width:24px}
  .review-fields-grid,
  .payment-grid-v3,
  .charges-grid,
  .amount-cards,
  .gold-overview-strip,
  .gold-stats-grid,
  .summary-mini-stats,
  .step-two-lower-grid{grid-template-columns:1fr!important}
  .review-fields-grid .rv-field:first-child,
  .review-fields-grid .rv-field:nth-child(5),
  .overview-supplier{grid-column:auto!important}
  .summary-list-v3{grid-template-columns:1fr;gap:4px}
  .summary-list-v3 dd{text-align:right;margin-bottom:6px}
  html[dir="ltr"] .summary-list-v3 dd{text-align:left}
  .input-with-unit{height:auto;flex-wrap:nowrap}
  .input-with-unit > span{min-width:56px}
  .doc-stage,
  .gold-doc-stage{min-height:260px;max-height:46vh}
  .doc-media,
  .gold-doc-stage .doc-media{min-height:260px}
  .review-actionbar-v3{padding-inline:8px}
  .rv-action{min-width:124px;font-size:11.5px}
}

@media(max-width:420px){
  .topbar{padding-inline:10px}
  .brand{gap:8px}
  .brand .mark{padding:6px 8px;font-size:12px}
  .brand b{font-size:13px}
  .brand small{font-size:10px}
  .page-title h1,.hero h1,.section-head h1,.dashboard-hero h1{font-size:20px}
  .card,.dash-card,.info-card,.upload-card,.login-card,.review-panel{padding:12px}
  .report-kpi strong{font-size:18px}
  .report-kpi small{font-size:10px}
}

/* ========================================================================== */
/* v7 — iPhone-style mobile web UI                                             */
/* Desktop remains table-based. Mobile converts rows into native-style cards.  */
/* ========================================================================== */
.mobile-only{display:none!important}
.desktop-only{display:block}

@media(max-width:820px){
  :root{--mobilebar-h:76px}
  body{background:#f6f8fb}
  .mobile-only{display:block!important}
  .desktop-only{display:none!important}
  .container{padding:18px 12px calc(var(--mobilebar-h) + var(--safe-b) + 26px)}

  /* stable app header: brand left, language/menu right in both languages */
  .topbar,html[dir="rtl"] .topbar,html[dir="ltr"] .topbar{direction:ltr!important;min-height:70px;padding:10px 14px}
  .topbar .brand{order:1!important;direction:ltr!important;max-width:calc(100% - 62px)}
  .topbar .nav-main{order:2!important;margin-left:auto!important;margin-right:0!important;direction:ltr!important}
  .brand .mark{width:42px;height:42px;padding:0;display:grid;place-items:center;border-radius:11px;font-size:14px}
  .brand b{font-size:16px}
  .brand small{display:block;font-size:10.5px;color:#c7d2e2}
  .menu-toggle{border:0!important;font-size:26px;width:42px;height:42px}

  .section-head,.page-title{margin:6px 2px 16px;align-items:flex-start}
  .section-head h1,.page-title h1{font-size:27px;letter-spacing:-.4px;color:var(--navy)}
  .section-head p,.page-title p{font-size:13px;line-height:1.7}
  .section-head>.btn{width:auto!important;min-height:42px;padding:10px 14px;border-radius:10px}

  /* bottom app navigation */
  .mobilebar.mobile-app-nav{height:76px;border-radius:22px 22px 0 0;box-shadow:0 -8px 28px rgba(16,40,75,.08);padding:6px 8px calc(6px + var(--safe-b));gap:2px;justify-content:space-around}
  .mobilebar.mobile-app-nav a{font-size:21px;min-width:54px;height:56px;justify-content:center;border-radius:13px;color:#18345e;padding:4px 7px;line-height:1}
  .mobilebar.mobile-app-nav a span{font-size:9.5px;margin-top:3px}
  .mobilebar.mobile-app-nav a.active:not(.capture){background:#fff7e7;color:#b27e13;font-weight:800}
  .mobilebar.mobile-app-nav .capture{width:54px;height:54px;min-width:54px;border-radius:50%;margin-top:-24px;padding:0;background:linear-gradient(145deg,#d8ab45,#c18d25);color:#fff;box-shadow:0 7px 20px rgba(190,139,33,.28);font-size:27px}
  .mobilebar.mobile-app-nav .capture span{display:none}

  /* mobile filters */
  .invoice-filter-card,.filters,.reports-filter-card{border-radius:14px;padding:13px;background:#fff;border:1px solid #dbe4ef;box-shadow:0 2px 8px rgba(16,40,75,.025)}
  .invoice-filter-card{grid-template-columns:1fr!important;gap:10px}
  .filter-field label{font-size:11px;font-weight:700;color:#71839d}
  .filter-field input,.filter-field select,.invoice-filter-card input,.invoice-filter-card select{min-height:48px;border-radius:10px;background:#fbfcfe;border-color:#d6e0ec;font-size:16px}
  .filter-actions{grid-column:auto!important}
  .filter-reset{width:100%;min-height:46px}

  /* collapsible search & filters panel — collapsed by default so the
     filter card doesn't take up the whole screen length on mobile */
  .filter-toggle-btn{display:flex!important;align-items:center;justify-content:space-between;width:100%;background:#fbfcfe;border:1px solid #d6e0ec;border-radius:10px;padding:12px 14px;font:inherit;font-size:14px;font-weight:700;color:var(--navy);cursor:pointer}
  .filter-toggle-chevron{transition:transform .15s ease}
  .invoice-filter-card.filters-open .filter-toggle-chevron,
  .reports-filter-card.filters-open .filter-toggle-chevron{transform:rotate(180deg)}
  .invoice-filter-card > .filter-field,
  .invoice-filter-card > .filter-actions,
  .reports-filter-card .reports-filter-grid{display:none}
  .invoice-filter-card.filters-open > .filter-field,
  .invoice-filter-card.filters-open > .filter-actions{display:flex}
  .invoice-filter-card.filters-open{grid-template-columns:1fr!important}
  .reports-filter-card.filters-open .reports-filter-grid{display:grid}
  #reportsFilterToggleBtn{display:flex!important;width:100%;border:0;background:none;font:inherit;cursor:pointer;justify-content:space-between}
  .invoice-actions{display:none}

  /* App-style data cards */
  .mobile-invoice-list,.mobile-record-list,.report-mobile-list{display:grid!important;gap:10px;margin-top:12px}
  .mobile-data-card,.mobile-record-card,.report-mobile-row{background:#fff;border:1px solid #dbe4ef;border-radius:14px;overflow:hidden;box-shadow:0 2px 7px rgba(16,40,75,.025)}
  .mobile-card-main{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:11px;align-items:center;padding:14px;text-decoration:none;color:inherit}
  html[dir="ltr"] .mobile-card-main{grid-template-columns:46px minmax(0,1fr) auto}
  .mobile-card-icon,.mobile-avatar,.report-mobile-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff4db;color:#c18b1d;font-weight:900;flex:none}
  .mobile-avatar{background:linear-gradient(145deg,#d8aa43,#bd861d);color:#fff}
  .mobile-card-copy{min-width:0}
  .mobile-card-title-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .mobile-card-title-row strong{font-size:14px;color:#142f55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-card-chevron{font-size:25px;line-height:1;color:#173b69}
  html[dir="ltr"] .mobile-card-chevron{transform:rotate(180deg)}
  .mobile-card-subline{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:4px;color:#6f82a0;font-size:11px}
  .mobile-card-subline b{color:#2b568e;font-weight:700}
  .mobile-card-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
  .mobile-card-badges .pill{font-size:10px;padding:5px 9px}
  .mobile-review-pill{background:#fff2d9;color:#9c6710}
  .mobile-card-amount{text-align:end;min-width:82px}
  .mobile-card-amount strong{display:block;font-size:17px;color:#102e56;white-space:nowrap}
  .mobile-card-amount span{font-size:10px;color:#7588a5}
  .mobile-card-actions{border-top:1px solid #edf1f6;display:flex;justify-content:flex-end;gap:4px;padding:6px 9px;background:#fbfcfe}
  .mobile-inline-action{border:0;background:transparent;color:#234b7e;padding:7px 10px;text-decoration:none;font:inherit;font-size:11px;font-weight:700;cursor:pointer}
  .mobile-inline-action.danger{color:#c5382e}
  .mobile-empty{margin-top:10px}

  /* generic vertical record cards: one desktop row -> one mobile card */
  .mobile-record-card{padding:13px}
  .mobile-record-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:11px}
  .mobile-record-head>div:first-child{display:flex;align-items:center;gap:8px;min-width:0}
  .mobile-record-head strong{font-size:14px;color:#132f55}
  .mobile-record-index{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#d3a13a;color:#fff;font-size:12px;font-weight:900;flex:none}
  .mobile-record-kicker{font-size:10px;color:#7b8ba1}
  .mobile-record-value{text-align:end!important;white-space:nowrap;font-size:16px!important;color:#173c6c!important}
  .mobile-record-value small{display:block;color:#8190a5;font-size:9px;font-weight:500}
  .mobile-record-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .mobile-record-grid>div{background:#f8fafc;border:1px solid #e5ebf2;border-radius:9px;padding:9px;min-width:0}
  .mobile-record-grid span{display:block;font-size:10px;color:#7d8da5;margin-bottom:3px}
  .mobile-record-grid b{display:block;font-size:12px;color:#173052;white-space:normal;word-break:break-word}
  .mobile-attachments{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
  .mobile-attachments a{background:#eef4fb;color:#205286;text-decoration:none;border-radius:8px;padding:6px 9px;font-size:10px}

  /* invoice detail feels like an app record */
  .balance-strip,.balance-strip.balance-strip-3{grid-template-columns:1fr 1fr!important;gap:9px}
  .balance-strip>div{padding:11px;min-height:86px}
  .balance-strip span{font-size:10px}
  .balance-strip strong{font-size:14px}
  .detail-grid,.payments-layout{grid-template-columns:1fr!important}
  .info-card{border-radius:14px;padding:14px}
  dl{grid-template-columns:1fr 1.2fr;gap:0;margin:0}
  dt,dd{padding:10px 0;border-bottom:1px solid #edf1f5}
  dt{font-size:11px}
  dd{text-align:end;font-size:12px;overflow-wrap:anywhere}
  .doc-actions{display:grid;grid-template-columns:1fr 1fr}
  .doc-actions .btn,.doc-actions .secondary{min-width:0;width:100%}

  /* report table rows become app cards */
  .report-mobile-list{margin:0}
  .report-mobile-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;text-decoration:none;color:inherit;margin-bottom:8px}
  .report-mobile-icon{width:36px;height:36px;font-size:12px}
  .report-mobile-copy strong{display:block;color:#15345d;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .report-mobile-copy span,.report-mobile-copy small{display:block;color:#7385a0;font-size:9.5px;margin-top:3px}
  .report-mobile-end{text-align:end;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
  .report-mobile-end b{font-size:13px;color:#173a68}
  .report-mobile-end small{font-size:9px;color:#7d8ba0}
  .report-mobile-end .status-pill{font-size:8.5px;padding:3px 7px}
  .report-log-row{grid-template-columns:36px minmax(0,1fr) auto}
  .report-download-mobile{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:#edf4fb;color:#174a7f;text-decoration:none;font-size:16px}

  /* upload/new invoice page follows iPhone form language */
  .upload-card{max-width:none;margin:0;padding:14px;border-radius:14px}
  .upload-step{margin-top:4px}
  .step-no{background:#d0a03a;color:#fff}
  .invoice-types{grid-template-columns:1fr 1fr!important;gap:9px}
  .type-card{min-height:62px;border-radius:11px;padding:11px}
  .type-card:has(input:checked){background:#fff7e7;border-color:#d5a23d}
  .upload-actions{grid-template-columns:1fr 1fr!important;gap:9px}
  .action-tile{min-height:108px;border-radius:12px}
  .submit-upload{min-height:50px;border-radius:11px}

  /* Editable gold table: mobile card per formset row instead of horizontal table */
  .gold-table-shell{overflow:visible;border:0;background:transparent;margin:0!important}
  .gold-lines-table-v3{display:block;min-width:0;width:100%;background:transparent}
  .gold-lines-table-v3 thead{display:none}
  .gold-lines-table-v3 tbody{display:grid;gap:10px}
  .gold-lines-table-v3 tr.gold-formset-row{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid #dbe4ef;border-radius:13px;padding:12px;gap:9px;position:relative}
  .gold-lines-table-v3 tr.gold-formset-row td{display:flex;flex-direction:column;gap:5px;border:0!important;padding:0!important;text-align:start!important;min-width:0}
  .gold-lines-table-v3 tr.gold-formset-row td::before{font-size:10px;color:#7b8ba1;font-weight:650}
  html[dir="rtl"] .gold-lines-table-v3 tr.gold-formset-row td:nth-child(1)::before{content:"الوصف"}
  html[dir="rtl"] .gold-lines-table-v3 tr.gold-formset-row td:nth-child(2)::before{content:"عدد القطع"}
  html[dir="rtl"] .gold-lines-table-v3 tr.gold-formset-row td:nth-child(3)::before{content:"الوزن الإجمالي"}
  html[dir="rtl"] .gold-lines-table-v3 tr.gold-formset-row td:nth-child(4)::before{content:"العيار"}
  html[dir="rtl"] .gold-lines-table-v3 tr.gold-formset-row td:nth-child(5)::before{content:"الوزن الصافي"}
  html[dir="rtl"] .gold-lines-table-v3 tr.gold-formset-row td:nth-child(6)::before{content:"الوزن البيور"}
  html[dir="rtl"] .gold-lines-table-v3 tr.gold-formset-row td:nth-child(7)::before{content:"سعر الجرام"}
  html[dir="rtl"] .gold-lines-table-v3 tr.gold-formset-row td:nth-child(8)::before{content:"القيمة"}
  html[dir="ltr"] .gold-lines-table-v3 tr.gold-formset-row td:nth-child(1)::before{content:"Description"}
  html[dir="ltr"] .gold-lines-table-v3 tr.gold-formset-row td:nth-child(2)::before{content:"Pieces"}
  html[dir="ltr"] .gold-lines-table-v3 tr.gold-formset-row td:nth-child(3)::before{content:"Gross Weight"}
  html[dir="ltr"] .gold-lines-table-v3 tr.gold-formset-row td:nth-child(4)::before{content:"Karat"}
  html[dir="ltr"] .gold-lines-table-v3 tr.gold-formset-row td:nth-child(5)::before{content:"Net Weight"}
  html[dir="ltr"] .gold-lines-table-v3 tr.gold-formset-row td:nth-child(6)::before{content:"Pure Weight"}
  html[dir="ltr"] .gold-lines-table-v3 tr.gold-formset-row td:nth-child(7)::before{content:"Gram Price"}
  html[dir="ltr"] .gold-lines-table-v3 tr.gold-formset-row td:nth-child(8)::before{content:"Value"}
  .gold-lines-table-v3 tr.gold-formset-row td.gold-desc{grid-column:1/-1}
  .gold-lines-table-v3 tr.gold-formset-row td.gold-action-cell{position:absolute;top:9px;inset-inline-end:9px;width:34px}
  .gold-lines-table-v3 tr.gold-formset-row td.gold-action-cell::before{display:none}
  .gold-lines-table-v3 td input,.gold-lines-table-v3 .gold-desc input{min-width:0!important;width:100%!important;height:42px!important;text-align:start!important;font-size:14px!important;background:#fbfcfe}
  .gold-row-delete{width:32px;height:32px}

  /* review wizard app-like flow */
  .review-page-v3 .container{padding-inline:10px}
  .review-title-block{text-align:start!important}
  .review-title-block .title-line{justify-content:flex-start!important}
  .review-stepper-v3{width:100%;justify-content:space-between!important;overflow:visible!important}
  .wizard-step{min-width:0!important;flex:0 1 auto}
  .wizard-step-copy b{font-size:11px;white-space:normal;text-align:center}
  .wizard-line{min-width:22px!important}
  .review-fields-grid{grid-template-columns:1fr!important}
  .review-fields-grid .rv-field{grid-column:auto!important}
  .rv-field input,.rv-field select,.rv-field textarea,.review-v3 [data-charge-mirror]{height:46px;font-size:16px}
  .amount-cards,.gold-overview-strip,.gold-stats-grid,.summary-mini-stats{grid-template-columns:1fr 1fr!important}
  .overview-supplier{grid-column:1/-1!important}
  .doc-stage,.gold-doc-stage{min-height:300px;max-height:48vh}
  .doc-media,.gold-doc-stage .doc-media{min-height:300px}
  .review-actionbar-v3{min-height:78px;padding:8px 10px calc(8px + var(--safe-b))}
  .action-set.active{display:grid!important;grid-template-columns:1fr 1fr;overflow:visible}
  .rv-action{min-width:0!important;width:100%;height:48px}
  .action-set .rv-action.gold{grid-column:1/-1;order:-1}
}

@media(max-width:430px){
  .mobile-record-grid{grid-template-columns:1fr 1fr}
  .balance-strip,.balance-strip.balance-strip-3{grid-template-columns:1fr 1fr!important}
  .amount-cards,.gold-overview-strip,.gold-stats-grid,.summary-mini-stats{grid-template-columns:1fr 1fr!important}
  .mobile-card-main{grid-template-columns:42px minmax(0,1fr)}
  .mobile-card-amount{grid-column:2;text-align:start;margin-top:-4px}
  .mobile-card-title-row{align-items:flex-start}
  .invoice-types,.upload-actions{grid-template-columns:1fr 1fr!important}
}

@media(max-width:820px){
  .topbar .brand{order:1!important}
  .topbar .header-utilities{display:flex!important;order:2!important;margin-left:auto!important;margin-right:0!important;padding:0!important;border:0!important;gap:8px}
  .topbar .header-utilities form{display:none!important}
  .topbar .nav-main{order:3!important;margin:0!important}
  #aajLangSwitch{height:40px;min-width:52px;border-radius:9px;font-size:12px;padding:0 9px}
}

/* ========================================================================== */
/* v8 — approved iPhone reference implemented as real mobile layouts           */
/* ========================================================================== */
@media(max-width:820px){
  body{background:#f6f9fc}
  .container{padding-top:16px}

  /* App-like shared mobile heading */
  .mobile-page-head-v8{display:flex!important;align-items:center;gap:13px;margin:2px 2px 14px;padding:2px 0}
  .mobile-page-head-v8>div:last-child{min-width:0;flex:1}
  .mobile-page-head-v8 h1{margin:0;color:#0f3260;font-size:29px;line-height:1.15;letter-spacing:-.5px}
  .mobile-page-head-v8 p{margin:6px 0 0;color:#7487a6;font-size:13px;line-height:1.65}
  .mobile-page-head-icon-v8{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;background:#f1f6fc;color:#123b70;font-size:26px;font-weight:800;flex:none}

  /* Mobile home: materially different composition from desktop */
  .mobile-home-v8{display:block!important}
  .mobile-home-hero-v8{background:#fff;border:1px solid #dbe5ef;border-radius:16px;padding:18px;display:grid;grid-template-columns:minmax(0,1fr) 118px;gap:10px;align-items:center;box-shadow:0 2px 10px rgba(16,40,75,.025);margin-bottom:12px}
  .mobile-home-hero-copy-v8 h1{margin:0;color:#0d2d57;font-size:26px;line-height:1.25}
  .mobile-home-hero-copy-v8 p{margin:7px 0 15px;color:#7186a8;font-size:12.5px;line-height:1.7}
  .mobile-home-primary-v8{display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#dda934,#c8901d);color:#fff;text-decoration:none;border-radius:10px;min-height:49px;padding:0 16px;font-weight:800;font-size:15px;box-shadow:0 6px 14px rgba(191,137,24,.18)}
  .mobile-home-primary-v8 b{font-size:24px;font-weight:400;line-height:1}
  .mobile-home-hero-art-v8{height:126px;position:relative;display:grid;place-items:center}
  .mobile-home-hero-art-v8::before{content:"";position:absolute;width:110px;height:110px;border-radius:50%;background:linear-gradient(135deg,#fff4d8,#eef4fb)}
  .paper-icon-v8{position:relative;z-index:1;width:70px;height:91px;border:5px solid #9db0cb;border-radius:9px;color:#a9b7cc;font-size:38px;display:grid;place-items:center;background:#fff}
  .gold-bars-v8{position:absolute;z-index:2;bottom:10px;left:3px;display:flex;align-items:flex-end;gap:3px}
  .gold-bars-v8 i{display:block;width:30px;height:18px;background:linear-gradient(160deg,#e3b54b,#bd8214);clip-path:polygon(15% 0,85% 0,100% 100%,0 100%)}
  .gold-bars-v8 i:nth-child(2){height:27px}.gold-bars-v8 i:nth-child(3){height:21px}

  .mobile-kpi-grid-v8{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
  .mobile-kpi-v8{min-height:112px;background:#fff;border:1px solid #dbe5ef;border-radius:14px;padding:13px;display:flex;align-items:flex-start;gap:10px;color:inherit;text-decoration:none;box-shadow:0 2px 8px rgba(16,40,75,.02)}
  .mobile-kpi-v8>div{min-width:0;flex:1;text-align:start}
  .mobile-kpi-icon-v8{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#eef4fb;color:#123b70;font-size:16px;font-weight:900;flex:none}
  .mobile-kpi-v8.danger .mobile-kpi-icon-v8{background:#fff0ef;color:#d62f2b}
  .mobile-kpi-v8.gold .mobile-kpi-icon-v8{background:#fff5df;color:#b87b08}
  .mobile-kpi-v8.good .mobile-kpi-icon-v8{background:#eaf9f1;color:#138557}
  .mobile-kpi-v8 small{display:block;color:#183b6a;font-size:11.5px;line-height:1.45;margin-bottom:5px}
  .mobile-kpi-v8 strong{display:block;color:#0f3260;font-size:22px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-kpi-v8 em{font-style:normal;color:#7890b2;font-size:10px}

  .mobile-home-card-v8{background:#fff;border:1px solid #dbe5ef;border-radius:14px;padding:13px;box-shadow:0 2px 8px rgba(16,40,75,.02);margin-bottom:12px}
  .mobile-home-card-v8>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
  .mobile-home-card-v8>header h2{margin:0;color:#11345f;font-size:15px}
  .mobile-home-card-v8>header a{color:#2d5d94;text-decoration:none;font-size:11px;white-space:nowrap}
  .mobile-bar-chart-v8{height:172px;border-bottom:1px solid #ced9e6;display:flex;gap:9px;align-items:flex-end;padding:16px 2px 0;position:relative;background:repeating-linear-gradient(to top,transparent 0,transparent 39px,#edf2f7 40px)}
  .mobile-bar-col-v8{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px}
  .mobile-bar-track-v8{height:132px;width:100%;display:flex;align-items:flex-end;justify-content:center}
  .mobile-bar-track-v8 i{display:block;width:min(28px,75%);min-height:3px;background:linear-gradient(180deg,#e5b750,#c88f20);border-radius:4px 4px 1px 1px}
  .month-label-v8{font-size:9px;color:#7188aa;white-space:nowrap}
  .mobile-chart-legend-v8{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px;color:#6680a5;font-size:10px}
  .mobile-chart-legend-v8 i{width:10px;height:10px;border-radius:50%;background:#d6a239}

  .mobile-recent-list-v8{display:grid}
  .mobile-recent-row-v8{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:9px;align-items:center;text-decoration:none;color:inherit;padding:10px 0;border-bottom:1px solid #edf1f6}
  .mobile-recent-row-v8:last-child{border-bottom:0}
  .mobile-recent-icon-v8{width:32px;height:32px;border-radius:9px;background:#fff4db;color:#b98110;display:grid;place-items:center;font-size:14px}
  .mobile-recent-copy-v8{min-width:0}
  .mobile-recent-copy-v8 strong{display:block;color:#17365e;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-recent-copy-v8 small{display:block;color:#7b8da8;font-size:9px;margin-top:2px}
  .mobile-recent-money-v8{text-align:end;min-width:78px}
  .mobile-recent-money-v8 strong{display:block;color:#0e315f;font-size:13px}.mobile-recent-money-v8 small{font-size:9px;color:#7b8da8}
  .mobile-recent-row-v8>.pill{grid-column:2/-1;justify-self:start;margin-top:-3px;font-size:9px;padding:4px 8px}

  /* Invoice list now follows the reference, not just a table-to-card conversion */
  .invoice-filter-card{padding:14px;border-radius:14px;gap:9px;margin-bottom:13px}
  .invoice-filter-card .filter-search{grid-column:1/-1}
  .invoice-filter-card .filter-search label{display:none}
  .invoice-filter-card .filter-search input{height:52px;border-radius:11px;padding-inline:15px;background:#fbfdff}
  .invoice-filter-card .filter-field:not(.filter-search){position:relative}
  .invoice-filter-card .filter-field:not(.filter-search) label{position:absolute;z-index:2;top:6px;inset-inline-start:12px;font-size:9px;color:#8a9ab0;pointer-events:none}
  .invoice-filter-card .filter-field:not(.filter-search) input,.invoice-filter-card .filter-field:not(.filter-search) select{height:54px;padding-top:18px;border-radius:10px;background:#fbfdff}
  .filter-reset{background:linear-gradient(135deg,#dda934,#c8901d);color:#fff;border:0}
  .mobile-results-head-v8{display:flex!important;align-items:center;justify-content:space-between;margin:15px 2px 8px}
  .mobile-results-head-v8 h2{margin:0;color:#11345f;font-size:18px}.mobile-results-head-v8 span{color:#788da9;font-size:11px}
  .mobile-results-icon-v8{font-size:24px!important;color:#163e71!important}
  .mobile-invoice-list{gap:10px!important}
  .mobile-data-card{border-radius:13px!important}
  .mobile-card-main{padding:13px!important}

  /* Invoice detail */
  .mobile-invoice-detail-v8{display:block!important;margin-bottom:12px}
  .mobile-detail-title-v8{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
  .mobile-detail-title-v8 h1{margin:3px 0;color:#0d2f5d;font-size:27px}.mobile-detail-title-v8 p{margin:0;color:#5d78a0;font-weight:700;font-size:12px}
  .mobile-detail-eyebrow-v8{display:inline-block;border-radius:999px;background:#fff1cf;color:#9d6d12;padding:5px 10px;font-size:10px;font-weight:700}
  .mobile-detail-summary-v8{display:grid;grid-template-columns:1fr 1fr;gap:9px;background:#fff;border:1px solid #dbe5ef;border-radius:14px;padding:10px;margin-bottom:10px}
  .mobile-detail-summary-v8>div{background:#f9fbfd;border:1px solid #e6ecf3;border-radius:10px;padding:10px;min-height:80px}
  .mobile-detail-summary-v8>div.highlight{background:linear-gradient(135deg,#fff9e8,#fff2cd);border-color:#e0bb68}
  .mobile-detail-summary-v8 small{display:block;color:#7b8da8;font-size:10px;margin-bottom:5px}.mobile-detail-summary-v8 strong{display:block;color:#12345f;font-size:13px;word-break:break-word}.mobile-detail-summary-v8 .highlight strong{font-size:20px;color:#a8750e}.mobile-detail-summary-v8 em{font-style:normal;font-size:9px;color:#a8750e}
  .mobile-detail-actions-v8{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mobile-detail-actions-v8 .btn,.mobile-detail-actions-v8 .secondary{width:100%;min-width:0;height:46px;padding:0 10px}
  .detail-grid{gap:10px}
  .info-card.section-card{margin-top:10px}
  .payments-layout{gap:10px}

  /* Upload page closer to reference */
  .mobile-upload-head-v8 .mobile-page-head-icon-v8{background:#fff4dc;color:#b97e0e}
  .upload-card{border:1px solid #dbe5ef;border-radius:14px;padding:14px;box-shadow:0 2px 8px rgba(16,40,75,.02)}
  .upload-step{background:#f7f9fc;border-radius:10px;padding:9px 10px;margin:0 0 9px}
  .upload-step+.invoice-types{margin-bottom:16px}
  .type-card{background:#fbfdff!important;border-color:#d7e1ec!important}
  .type-card:has(input:checked){background:#fff7e7!important;border-color:#d3a33d!important;box-shadow:inset 0 0 0 1px #d3a33d}
  .action-tile{background:#fbfdff;border-color:#d7e1ec}.action-tile.camera{background:#fff7e8;border-color:#e5c981}
  .submit-upload{background:linear-gradient(135deg,#dda934,#c8901d)}
  .hint{font-size:11px;line-height:1.6}
}

@media(max-width:520px){
  .mobile-home-hero-v8{grid-template-columns:1fr 98px;padding:15px}.mobile-home-hero-copy-v8 h1{font-size:23px}.mobile-home-hero-art-v8{height:110px}.mobile-home-hero-art-v8::before{width:96px;height:96px}.paper-icon-v8{width:58px;height:78px;font-size:32px;border-width:4px}.gold-bars-v8 i{width:25px}
  .mobile-kpi-v8{min-height:105px;padding:11px;gap:8px}.mobile-kpi-icon-v8{width:34px;height:34px}.mobile-kpi-v8 strong{font-size:19px}.mobile-kpi-v8 small{font-size:10.5px}
  .mobile-detail-summary-v8{grid-template-columns:1fr 1fr}
}