@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0,0');

/* invoices.css — AppSheet-like concise UI with glassy controls (no big/dark text) */

:root{
  --inv-ink: var(--ink-sub, #475569);
  --inv-muted: rgba(71,85,105,.68);
  --inv-border: rgba(148,163,184,.38);
  --inv-bg: #f6f7fb;
  --inv-card: #ffffff;
  --inv-glass: rgba(255,255,255,.72);
  --inv-glass-bd: rgba(209,213,219,.62);
  --inv-shadow: 0 1px 3px rgba(15,23,42,.06);
  --inv-radius: 14px;
  --ios-blue: #007AFF;
  --ios-gray-1: #f2f2f7;
  --ios-gray-2: #e5e5ea;
  --ios-gray-3: #d1d1d6;
  --ios-gray-4: #c7c7cc;
  --ios-gray-5: #8e8e93;
  --ios-gray-6: #1c1c1e;
}

body.app{
  background: var(--inv-bg);
  color: var(--inv-ink);
}

/* Glassy button utility (re-usable) */
.glass-btn{
  background: var(--inv-glass);
  border: 1px solid var(--inv-glass-bd);
  box-shadow: var(--inv-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.glass-btn:hover{
  background: rgba(255,255,255,.86);
  border-color: rgba(156,163,175,.75);
  transform: translateY(-1px);
}
.glass-btn:active{
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.glass-btn:disabled{
  opacity:.55;
  transform:none;
  cursor:not-allowed;
}

.glass-btn.danger{
  border-color: var(--inv-glass-bd);
}
.glass-btn.primary{
  border-color: rgba(37,99,235,.28);
}


button.icon.glass-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  width:34px;
  height:34px;
  border-radius:12px;
  line-height:1;
}
button.icon.glass-btn .material-icons{
  font-size:20px;
  line-height:1;
}
button.icon.mini{
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

/* Keep header light and readable */
header.appbar{
  /* iPhone notch / safe-area */
  padding-top: env(safe-area-inset-top, 0px);
}

header.appbar .toolbar{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.08);

  /* slightly tighter header */
  padding-top: 7px;
  padding-bottom: 7px;
}

#title{
  font-weight: 650;
  letter-spacing: .2px;
  font-size: 16.25px;
  color: rgba(15,23,42,.92);
}

/* slightly smaller header icons */
header.appbar .toolbar .material-icons{
  font-size: 19px;
}


/* Header ORG pill — match size of back pill */
/* Invoices header org pill — match Contacts sizing/shape.
   Visuals come from .hdr-acc-dot/.hdr-org-dot (shared base styles). */
#headerOrgPill .label,
#headerOrgPill .text{
  font-size: 11.5px;
  line-height: 1.1;
}

/* Top section */
.inv-top{
  padding: 5px 12px 8px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.inv-tabs{
  display:flex;
  gap:8px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.inv-tab{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--inv-glass-bd);
  background: rgba(255,255,255,.55);
  color: var(--inv-ink);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.inv-tab .material-icons{ font-size: 18px; opacity:.9; }
.inv-tab.active{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.30);
  box-shadow: 0 2px 10px rgba(37,99,235,.08);
}

.inv-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap: wrap;
}

/* Ensure the actions row aligns with the tabs row (ui.css also defines .inv-actions padding). */
.inv-top .inv-actions{
  padding: 0 !important;
}



/* Mobile: keep Search + Manage on one line (avoid iOS Safari flex wrap surprises)
   NOTE: use !important because base rules for .inv-search appear later in the file. */
@media (max-width: 720px){
  .inv-actions{
    flex-wrap: nowrap !important;
  }
  .inv-search{
    min-width: 0 !important;   /* allow shrink instead of forcing wrap */
    flex: 1 1 0% !important;   /* shrinkable */
  }
  .inv-search input{
    min-width: 0 !important;   /* critical for Safari inside flex */
    width: 100%;
  }
  #manageBtn{
    flex: 0 0 auto !important;
    white-space: nowrap;
    padding: 8px 10px;
  }
  /* If space is *very* tight, keep icon+text but allow slightly smaller label */
  #manageBtn{ font-size: 12px; }
}
.inv-search{
  flex: 1;
  min-width: 220px;
  display:flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(209,213,219,.65);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.inv-search .material-icons{ font-size: 18px; color: rgba(71,85,105,.75); }
.inv-search input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  font-size: 13px;
  color: var(--inv-ink);
}
.inv-search input::placeholder{ color: rgba(71,85,105,.55); }

/* Search: clear button */
#clearSearchBtn{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#clearSearchBtn .material-icons{
  font-size: 16px;
  opacity: .85;
}


.pill-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  color: var(--inv-ink);
  cursor:pointer;
}
.pill-btn .material-icons{ font-size: 18px; opacity:.9; }

/* KPI strip slightly tighter */
.inv-kpis .kpi-value{
  font-size: 14px; /* keep compact */
  color: rgba(71,85,105,.92);
}
.inv-kpis .kpi-label,
.inv-kpis .kpi-sub{
  color: rgba(71,85,105,.60);
}

/* Main grid tweaks */
.inv-grid{
  padding: 6px 4px 64px;
}

#mainCard .dash-card-title{ font-size: 14px; }
#mainCard .dash-card-subtitle{ font-size: 12px; }

/* Dashboard card header: reduce top space above title */
header.dash-card-header{
  padding-top: 0px !important;
  padding-bottom: 4px !important;
  margin-top: 0px !important;
}

header.dash-card-header *{
  margin-top: 0px !important;
}

header.dash-card-header h1,
header.dash-card-header h2,
header.dash-card-header h3,
header.dash-card-header .title{
  margin-top: 0px !important;
  margin-bottom: 4px !important;
  padding-top: 0px !important;
}

.main-card-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

/* Month groups (collapsible) */
.month-group{
  border-radius: 16px;
  overflow: hidden;
}

.month-group-header{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  text-align: left;
}

.month-group-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.month-group-ic{
  font-size: 18px;
  opacity: .85;
  flex: 0 0 auto;
}

.month-group-title{
  font-weight: 700;
  font-size: 13px;
  color: rgba(15,23,42,.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Product price chips (Products view group titles) */
.month-group-title.with-chips{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  overflow: visible;
}
.month-group-title.with-chips .title-name{
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.15;
  word-break: break-word;
}
.month-group-title.with-chips .title-top{
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
}
.month-group-title.with-chips .title-meta{
  font-size: 12px;
  color: rgba(71,85,105,.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.month-group-title.with-chips .title-total{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.92);
  white-space: nowrap;
}

.month-group-title.with-chips .title-chips{
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.month-group-title.with-chips .title-chips::-webkit-scrollbar{
  display: none;
}

.price-chip{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 550;
  letter-spacing: .01em;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 1px 0 rgba(15,23,42,.03);
}

/* Pastel chips */
.price-chip.price-low{
  background: rgba(34,197,94,.16); /* green pastel */
  color: rgba(21,128,61,.92);
}
.price-chip.price-high{
  background: rgba(239,68,68,.14); /* red pastel */
  color: rgba(185,28,28,.92);
}
.price-chip.price-avg{
  background: rgba(59,130,246,.14); /* blue pastel */
  color: rgba(29,78,216,.92);
}

.month-group-sub{
  font-size: 12px;
  color: rgba(71,85,105,.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.month-group-right{
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.month-group-total{
  font-weight: 700;
  font-size: 13px;
  color: rgba(15,23,42,.86);
  white-space: nowrap;
}

.month-group-body{
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.month-group-body.is-collapsed{
  display: none;
}


/* Invoice list rows */
.inv-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.inv-row{
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.88);
  border-radius: 14px;
  padding: 10px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
  box-shadow: 0 1px 2px rgba(15,23,42,.03);
}
.inv-row:hover{
  border-color: rgba(37,99,235,.20);
}
.inv-row.active{
  border-color: rgba(37,99,235,.34);
  box-shadow: 0 2px 8px rgba(37,99,235,.08);
}

.inv-row-left{
  min-width:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
}

.inv-row-text{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.inv-thumb-wrap{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  overflow:hidden;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(255,255,255,.8);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  position:relative;
  cursor:pointer;
  padding:0;
}

.inv-thumb-wrap:focus{ outline: 2px solid rgba(37,99,235,.22); outline-offset:2px; }

.inv-thumb-wrap.is-empty{
  color: rgba(71,85,105,.55);
}

.inv-thumb{
  width:100%;
  height:100%;
  display:block;

  /* Main list thumb shows a pre-cropped (bottom-right 20%) image.
     JS will generate a crisp crop; CSS stays simple. */
  object-fit: cover;
  object-position: 100% 100%;
}


.inv-thumb-badge{
  position:absolute;
  right: -4px;
  top: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,.95);
  background: rgba(37,99,235,.92);
  border: 2px solid rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.inv-row-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 13px;
  color: rgba(71,85,105,.92);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.inv-row-title .material-icons{ font-size: 18px; opacity:.85; }
.inv-row-sub{
  font-size: 12px;
  color: rgba(71,85,105,.62);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* Products view: per-invoice unit price (inline, after qty) */
.inv-row-sub .uprice{
  font-weight: 800;
}
.inv-row-sub .uprice.price-low{  color: rgba(21,128,61,.92); }
.inv-row-sub .uprice.price-high{ color: rgba(185,28,28,.92); }
.inv-row-sub .uprice.price-avg{  color: rgba(29,78,216,.92); }

.inv-row-right{
  display:flex;
  align-items:flex-end;
  flex-direction:column;
  gap:2px;
  flex-shrink:0;
}

.inv-row-right-top{
  display:flex;
  align-items:center;
  gap:8px;
}

.inv-img-btn{
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 12px;
  position:relative;
}


/* When an invoice has an image, show only the bottom ~10% (bottom-right) as the button background */
.inv-img-btn.has-thumb{
  overflow: hidden;
  background: transparent; /* preview handled by inner <img> */
}


/* Hide the camera icon when a thumb background is present */
.inv-img-btn.has-thumb .material-icons{
  display: none;
}

.inv-img-btn .material-icons{ font-size: 18px; }

.inv-img-btn.is-empty{ opacity: .55; }

.inv-img-count{
  position:absolute;
  right: -4px;
  top: -4px;
  z-index: 2;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,.95);
  background: rgba(37,99,235,.92);
  border: 2px solid rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.inv-row-amt{
  font-size: 13px;
  font-weight: 600;
  color: rgba(71,85,105,.92);
}
.inv-row-meta{
  font-size: 11px;
  color: rgba(71,85,105,.58);
}

/* Empty state */
.inv-empty{
  padding: 26px 10px;
  text-align:center;
  color: rgba(71,85,105,.62);
}.inv-empty-title{
  font-size: 13px;
  font-weight: 600;
  margin-top: 6px;
  color: rgba(71,85,105,.82);
}
.inv-empty-sub{
  font-size: 12px;
  margin-top: 4px;
}

/* Detail card */
.inv-detail{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.inv-detail-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(148,163,184,.22);
}
.inv-detail-row:last-of-type{
  border-bottom:none;
}
.inv-detail-row .label{
  font-size: 12px;
  color: rgba(71,85,105,.62);
}
.inv-detail-row .value{
  font-size: 13px;
  color: rgba(71,85,105,.90);
  font-weight: 600;
  text-align:right;
  max-width: 62%;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Details: VAT + Total split layout --- */
.inv-detail-row .value.vat-value{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.inv-detail-row .vat-check-ic{
  font-size: 18px;
  opacity: .85;
}
.inv-detail-row .vat-amt{
  font-weight: 700;
}

.inv-detail-row .value.total-split{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:10px;
  max-width: none;
  overflow: visible;
}

/* Total row (details): keep "Subtotal" + "Grand" on ONE line */
.inv-detail-row .value.total-split{
  overflow: visible;       /* override base .inv-detail-row .value overflow:hidden */
  white-space: nowrap;
  max-width: none;
}
.total-split{
  flex-wrap: nowrap;
}
.total-part{
  display:inline-flex;
  align-items:baseline;
  gap:3px;
  white-space: nowrap;
}
.total-mini{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(71,85,105,.58);
}
.total-amt{
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
@media (max-width: 420px){
  .inv-detail-row .value.total-split{ gap:8px; }
  .total-mini{ font-size: 10px; }
  .total-net{ font-size: 12px; }
  .total-grand{ font-size: 12px; }
}
.inv-detail-row .total-net{
  font-size: 12px;
  font-weight: 700;
  color: rgba(71,85,105,.62);
}
.inv-detail-row .total-grand{
  font-size: 13px;
  font-weight: 800;
  color: rgba(71,85,105,.92);
}

.inv-lines-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-top: 4px;
}
.dash-card-title.small{
  font-size: 13px;
}

.inv-lines{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.line-row{
  border: 1px solid rgba(148,163,184,.26);
  background: rgba(255,255,255,.86);
  border-radius: 14px;
  padding: 10px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  cursor:pointer;
}
.line-row:hover{
  border-color: rgba(16,185,129,.22);
}
.line-left{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.line-title{
  font-size: 13px;
  color: rgba(71,85,105,.92);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.line-sub{
  font-size: 12px;
  color: rgba(71,85,105,.60);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.line-right{
  text-align:right;
  flex-shrink:0;
}
.line-amt{
  font-size: 13px;
  font-weight: 700;
  color: rgba(71,85,105,.92);
}
.line-meta{
  font-size: 11px;
  color: rgba(71,85,105,.58);
}

/* Line modal: currency toggle next to Product */
.field-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.mini-currency-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  user-select:none;
}
.mini-currency-toggle input{
  width:18px;
  height:18px;
  margin:0;
  opacity:1;
}
.mini-currency-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.72);
  font-weight: 800;
  font-size: 12px;
  color: rgba(71,85,105,.92);
}
.mini-currency-toggle input:not(:checked) + .mini-currency-pill{
  opacity: .65;
}

/* Line modal: segmented currency toggle (USD / LL) */
.mini-currency-seg{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding: 2px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.72);
  user-select:none;
}
.mini-currency-seg input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}
.mini-currency-seg .mini-seg-btn{
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font-weight: 800;
  font-size: 12px;
  color: rgba(71,85,105,.92);
  cursor: pointer;
}
.mini-currency-seg .mini-seg-btn:hover{
  background: rgba(255,255,255,.85);
}
.mini-currency-seg .mini-seg-btn.is-active{
  background: #dbeafe; /* light blue */
  border-color: rgba(96,165,250,.45);
  box-shadow: 0 8px 24px rgba(15,23,42,.10);
}


/* Modals */
.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.26);
  display:none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 60;
}
.modal-backdrop.open{ display:flex; }

/* Ensure nested pickers (Org picker) appear above the iOS invoice sheet
   (iOS Safari can be finicky with stacking contexts when transforms/backdrop-filter are involved).
   Use a very high z-index to guarantee the picker is on top. */
#invoiceModal.modal-backdrop{ z-index: 10000; }

/* Invoice editor should feel like a full-screen workspace */
#invoiceModal.modal-backdrop{
  padding: 0;
}
#invoiceModal .modal.wide{
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  border-radius: 0;
}
#invoiceModal .modal-hdr{ border-radius: 0; }

/* Footer icon-only actions */
#invoiceModal .inv-footer-actions .icon.glass-btn{
  min-width: 42px;
  width: 42px;
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
}

/* Currency toggle chip ($ / LL) */
#invoiceModal .inv-cur-btn{ width: 42px; }
#invoiceModal .inv-cur-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: 12px;
  width: 24px;
  height: 22px;
  border-radius: 10px;
  border: 1px solid rgba(209,213,219,.7);
  background: rgba(255,255,255,.55);
}
#lineModal.modal-backdrop{ z-index: 11000; }
#orgModal.modal-backdrop{ z-index: 12000; }
#lineModal .modal{ position: relative; z-index: 8001; }
#orgModal .modal{
  position: relative; /* ensure z-index is honored across browsers */
  z-index: 9001;
  width: min(440px, 100%); /* org picker can be narrower */
}


/* Period picker: show as contextual popover under the date button (not centered) */
#periodModal.as-popover{
  background: transparent;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
}
#periodModal.as-popover .modal{
  position: fixed;
  margin: 0;
  /* left/top are set by JS */
}

/* Sort dropdown (under the sort icon in the list header) */
.inv-sort-menu{
  position: fixed; /* positioned by JS under the icon */
  z-index: 9500;
  width: max-content;
  max-width: min(92vw, 320px);
  padding: 4px;
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 22px rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
}
.inv-sort-menu.is-open{ display:block; }

.inv-sort-item{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding: 7px 8px;
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  color: rgba(15,23,42,.84);
}
.inv-sort-item:hover{ background: rgba(255,255,255,.04); }
.inv-sort-item:active{ background: rgba(255,255,255,.03); }

.inv-sort-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width: 0;
}
.inv-sort-left .material-icons{
  font-size: 18px;
  opacity: .75;
}
.inv-sort-label{
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 210px;
}
.inv-sort-right{
  display:flex;
  align-items:center;
  gap:4px;
  opacity: .8;
  margin-left: 1px;
}
.inv-sort-chip{
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
}

.modal{
  width: min(560px, 100%);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(209,213,219,.75);
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(15,23,42,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow:hidden;
}
.modal.wide{
  width: min(820px, 100%);
}
.modal-hdr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(148,163,184,.22);
}
.modal-title{
  font-size: 14px;
  font-weight: 700;
  color: rgba(71,85,105,.90);
}
.modal-body{
  padding: 12px;
}

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Invoice modal: spacing between header rows (Invoice#/Date) and (Supplier/Member) */
#invoiceModal #invoiceFormTop{ margin-bottom: 12px; }

.field{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.field span{
  font-size: 12px;
  color: rgba(71,85,105,.62);
}
.field input, .field select{
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(209,213,219,.72);
  background: rgba(255,255,255,.78);
  padding: 0 12px;
  font-size: 13px;
  color: rgba(71,85,105,.92);
  outline:none;
}

/* --- New Invoice: normalize bordered control heights (Invoice #, Date, Supplier, Member) --- */
#invoiceModal .form-grid .field input,
#invoiceModal .form-grid .field select,
#invoiceModal .form-grid .field-row > input,
#invoiceModal .form-grid .field-row > button{
  height: 36px;
  min-height: 36px;
  box-sizing: border-box;
}
#invoiceModal .form-grid .field-row{
  align-items: stretch; /* make input + button equal height */
}
#invoiceModal .form-grid .field-row > button{
  width: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.field input::placeholder{ color: rgba(71,85,105,.50); }
.field.full{ grid-column: 1 / -1; }

/* ---- Invoice modal header grid (Invoice#/Rate/Date on one line; Supplier/Member on second line) ---- */
#invoiceModal .form-grid.invoice-head-grid{
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
#invoiceModal .form-grid.invoice-head-grid > .field{ min-width: 0; }
#invoiceModal .form-grid.invoice-head-grid .field-row{ min-width: 0; }
#invoiceModal .form-grid.invoice-head-grid input,
#invoiceModal .form-grid.invoice-head-grid select{
  width: 100%;
  min-width: 0;
}

/* Row 1: 3 equal columns (2/6 each) */
#invoiceModal .form-grid.invoice-head-grid > .invh-invno{ grid-column: 1 / span 2; }
#invoiceModal .form-grid.invoice-head-grid > .invh-rate{  grid-column: 3 / span 2; }
#invoiceModal .form-grid.invoice-head-grid > .invh-date{  grid-column: 5 / span 2; }

/* Row 2: 2 equal columns (3/6 each) */
#invoiceModal .form-grid.invoice-head-grid > .invh-supplier{ grid-column: 1 / span 3; }
#invoiceModal .form-grid.invoice-head-grid > .invh-member{   grid-column: 4 / span 3; }

/* Row 3+: full width */
#invoiceModal .form-grid.invoice-head-grid > .invh-vattotal{ grid-column: 1 / -1; }

.form-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 12px;
}
.form-actions .spacer{ flex: 1; }

.mini-error{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(220,38,38,.92);
  background: rgba(220,38,38,.08);
  border: 1px solid rgba(220,38,38,.20);
  padding: 10px;
  border-radius: 14px;
}

/* Period modal */
.seg-tabs{
  display:flex;
  gap:4px;
  padding: 4px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.70);
  margin-bottom: 12px;
}
.seg-tab{
  flex:1;
  height: 36px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  color: rgba(71,85,105,.92);
  cursor: pointer;
}
.seg-tab.active{
  background: rgba(255,255,255,.92);
  border-color: rgba(148,163,184,.35);
  box-shadow: 0 8px 24px rgba(15,23,42,.10);
}
.period-hint{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(71,85,105,.66);
}
.period-all{
  font-size: 13px;
  color: rgba(71,85,105,.85);
  padding: 10px 12px;
  border: 1px solid rgba(209,213,219,.65);
  border-radius: 14px;
  background: rgba(255,255,255,.78);
}

/* Manage modal */
.manage-tabs{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin-bottom: 10px;
  width: 100%;                 /* important */
}

.manage-tab{
  display: flex;               /* ← NOT inline-flex */
  flex: 1 1 0;                 /* equal-width pills */
  min-width: 0;
  align-items: center;
  justify-content: center;     /* center icon + text */
  gap: 8px;

  height: 46px;                /* match search / new button */
  padding: 0 14px;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.66);
  font-size: 13px;
  color: rgba(71,85,105,.92);
  cursor: pointer;
}

.manage-tab .material-icons{ font-size: 18px; opacity:.9; }
.manage-tab.active{
  border-color: rgba(16,185,129,.28);
  background: rgba(16,185,129,.10);
  box-shadow: 0 2px 10px rgba(16,185,129,.08);
}

/* Manage modal: center the title while keeping Close on the right */
#manageModal .modal-hdr{
  position: relative;
  justify-content: center;
}
#manageModal .modal-hdr .modal-title{
  flex: 1;
  text-align: center;
}
#manageModal #closeManageModalBtn{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
}

/* Manage Products: group products under collapsible category headers */
.manage-cat-group{
  border: 1px solid rgba(148,163,184,.26);
  background: rgba(255,255,255,.86);
  border-radius: 16px;
  overflow: hidden;
}
.manage-cat-group-hdr{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px;
  cursor:pointer;
  user-select:none;
  text-align:left;
  border: none;
  background: rgba(255,255,255,0);
}
.manage-cat-group-hdr:hover{
  background: rgba(37,99,235,0.06);
}
.manage-cat-group-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex: 1;
}
.manage-cat-ic{
  font-size: 18px;
  opacity: .85;
  flex: 0 0 auto;
}
.manage-cat-name{
  font-size: 13px;
  font-weight: 800;
  color: rgba(71,85,105,92);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.manage-cat-meta{
  font-size: 12px;
  color: rgba(71,85,105,60);
  white-space: nowrap;
  flex: 0 0 auto;
}
.manage-cat-group-body{
  padding: 0 10px 10px 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.manage-cat-group-body[hidden]{ display:none !important; }

.manage-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.mini-search{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(209,213,219,.65);
  min-width: 240px;
}
.mini-search .material-icons{ font-size: 18px; color: rgba(71,85,105,.70); }
.mini-search input{
  border:none;
  outline:none;
  background:transparent;
  font-size: 13px;
  color: rgba(71,85,105,.92);
  width: 100%;
}



/* Manage modal: products selection + bulk actions */
.manage-subtoolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin: -2px 0 10px 0;
  flex-wrap: wrap;
}
.manage-selectall{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,78);
  border: 1px solid rgba(209,213,219,65);
  font-size: 12px;
  color: rgba(71,85,105,.78);
  cursor:pointer;
  user-select:none;
}
.manage-selectall input{ width: 16px; height: 16px; }

.manage-filters{ display:flex; gap:8px; align-items:center; min-width: 220px; flex: 1; justify-content:flex-end; }
.manage-select{
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(209,213,219,.72);
  background: rgba(255,255,255,.78);
  padding: 0 12px;
  font-size: 13px;
  color: rgba(71,85,105,.92);
  outline:none;
  min-width: 220px;
}
@media (max-width: 720px){
  .manage-filters{ justify-content:flex-start; width: 100%; }
  .manage-select{ min-width: 0; width: 100%; }
}

.manage-bulkbar{
  border: 1px solid rgba(148,163,184,.26);
  background: rgba(255,255,255,.90);
  border-radius: 16px;
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom: 10px;
}
.manage-bulk-left,
.manage-bulk-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}

/* Bulk bar: keep "Set category" + "Apply" on the same row */
.manage-bulk-right{ flex-wrap: nowrap; }
.manage-bulk-right .manage-select{ flex: 1 1 auto; min-width: 0; }
.manage-bulk-right #manageApplyCategoryBtn{ flex: 0 0 auto; white-space: nowrap; }
.manage-bulk-count{
  font-size: 12px;
  font-weight: 700;
  color: rgba(71,85,105,.82);
}
.manage-bulk-right .manage-select{ min-width: 0; }
.manage-merge{
  border-top: 1px dashed rgba(148,163,184,.26);
  padding-top: 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.manage-merge-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}
.manage-merge-del{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  color: rgba(71,85,105,.72);
  user-select:none;
}
.manage-merge-del input{ width:16px; height:16px; }
.manage-row.selected{
  border-color: rgba(37,99,235,.34);
  box-shadow: 0 2px 8px rgba(37,99,235,.08);
}
.manage-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
  flex: 1;
}
.manage-check input[type="checkbox"]{
  margin-top: 2px;
  width: 16px;
  height: 16px;
}
.manage-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(148,163,184,.26);
  background: rgba(255,255,255,.70);
  color: rgba(71,85,105,.78);
}
.manage-badge.dup{
  border-color: rgba(249,115,22,.28);
  background: rgba(249,115,22,.10);
  color: rgba(124,45,18,.92);
}

/* Manage editor modal (create/edit products & categories) */
#manageEditCategoryRow select,
#manageEditNewCategoryRow input,
#manageEditName{
  width: 100%;
}


#manageEditProductFields input,
#manageEditProductFields select,
#manageEditProductFields textarea{
  width: 100%;
}
#manageEditAliases,
#manageEditNotes{ resize: vertical; }
#manageEditCategoryRow .pill-btn,
#manageEditNewCategoryRow .pill-btn{
  height: 36px;
  white-space: nowrap;
}

.manage-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height: min(62vh, 620px);
  overflow:auto;
  padding-right: 2px;
}

.manage-row{
  border: 1px solid rgba(148,163,184,.26);
  background: rgba(255,255,255,.86);
  border-radius: 14px;
  padding: 10px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.manage-row:hover{
  border-color: rgba(37,99,235,.16);
}
.manage-left{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.manage-title{
  font-size: 13px;
  font-weight: 700;
  color: rgba(71,85,105,.90);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.manage-sub{
  font-size: 12px;
  color: rgba(71,85,105,.60);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.manage-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-shrink:0;
}

@media (max-width: 720px){
  .form-grid{ grid-template-columns: 1fr; }
  /* In invoice editor, keep Invoice # + Date + Supplier + Member on two compact rows */
  #invoiceModal .form-grid:not(.invoice-head-grid){ grid-template-columns: minmax(0,1fr) minmax(0,clamp(140px, 34vw, 190px)); }

  /* Prevent overflow/overlap in tight two-column rows (mobile Safari/Chrome) */
  #invoiceModal .form-grid > .field{ min-width: 0; }
  #invoiceModal .form-grid > .field input,
  #invoiceModal .form-grid > .field select{
    width: 100%;
    min-width: 0;
  }
  #invoiceModal .field-row{ min-width: 0; }
  #invoiceModal .field-row > input{
    min-width: 0;
    width: 100%;
  }

  /* Make remaining fields full-width (VAT, Total, etc.) */
  #invoiceModal .form-grid:not(.invoice-head-grid) > :nth-child(n+5){ grid-column: 1 / -1; }

  .mini-search{ min-width: 0; flex:1; }
  .manage-toolbar{ flex-wrap: wrap; }
}

/* ---- Invoice modal: Supplier/Member "More" ---- */
.field-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.field-row > input{ flex:1; }

/* Make the Supplier/Member "..." icon live INSIDE the input cell */
#invoiceModal .field-row{
  position: relative;
}

#invoiceModal .field-row > input{
  padding-right: 46px; /* space for the embedded More button */
}

/* --- New invoice modal: keep Date column compact + keep Total input compact --- */
#invoiceModal #fDate{
  max-width: 100%;
  min-width: 0;
}

/* The totals row lives inside .form-grid > .field, so the generic 100% input width would stretch it.
   Force the visible Total input to stay compact. */
#invoiceModal .invoice-vat-total-inline #fTotalInput.invoice-total-input{
  width: clamp(84px, 22vw, 110px);
  min-width: 84px;
  flex: 0 0 auto;
}

/* Compact "manual total" toggle + input (keeps everything on one line) */
#invoiceModal .invoice-vat-total-inline .invoice-total-edit-btn{
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

#invoiceModal .invoice-vat-total-inline #fTotalInput.invoice-total-manual{
  width: clamp(84px, 22vw, 110px);
  min-width: 84px;
  flex: 0 0 auto;
}

.is-hidden{ display:none !important; }

/* Ensure the totals row items can shrink without forcing horizontal scroll */
#invoiceModal .invoice-vat-total-inline > *{
  min-width: 0;
}

/* Override glass-btn/icon button visuals so it feels embedded */
#invoiceModal #fSupplierMoreBtn,
#invoiceModal #fMemberMoreBtn{
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);

  width: 32px;
  height: 32px;
  padding: 0;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#invoiceModal #fSupplierMoreBtn .material-icons,
#invoiceModal #fMemberMoreBtn .material-icons{
  font-size: 17px;
  font-weight: 800; /* bolder look */
  opacity: .92;
  color: rgba(71,85,105,.92);
  line-height: 1;
}

#invoiceModal #fSupplierMoreBtn:hover .material-icons,
#invoiceModal #fMemberMoreBtn:hover .material-icons{
  color: var(--ios-blue);
}
.field-hint{
  margin-top: 6px;
  font-size: 11px;
  color: rgba(71,85,105,.65);
}

/* Contact picker list rows (reuse manage-row but ensure clickable) */
#contactPickerList .manage-row{
  cursor: pointer;
}
#contactPickerList .manage-row:hover{
  background: rgba(148,163,184,.18);
}

/* Org picker */
.org-picker-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}
.org-section{
  margin-top: 10px;
}
.org-section-title{
  font-size: 12px;
  color: rgba(71,85,105,.62);
  margin: 6px 2px;
}
.org-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.org-row{
  border: 1px solid rgba(148,163,184,.26);
  background: rgba(255,255,255,.86);
  border-radius: 14px;
  padding: 8px 10px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  cursor:pointer;
}
.org-row:hover{ border-color: rgba(16,185,129,22); }
.org-row.active{
  border-color: rgba(16,185,129,42);
  box-shadow: 0 0 0 2px rgba(16,185,129,.10) inset;
}
.org-row-left{
  min-width:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  flex: 1 1 auto;
}
.org-row-title{
  font-size: 13px;
  color: rgba(71,85,105,92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width: 0;
}
/* Keep code/id visible but compact (inline pill) so each org stays one line */
.org-row-sub{
  font-size: 11px;
  font-weight: 600;
  color: rgba(71,85,105,70);
  white-space:nowrap;
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.26);
  background: rgba(255,255,255,.60);
  line-height: 1;
  max-width: 46%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.org-swatch{
  height: 22px;
  min-width: 46px;
  max-width: 78px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex-shrink:0;
}

/* --- Details drawer (glassy bottom sheet) --- */
body.drawer-enabled #mainCard{
  grid-column: 1 / -1;
}

.drawer-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  z-index: 78;
}

.drawer-backdrop[hidden]{
  display:none !important;
}

body.drawer-enabled #detailsCard{
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  width: auto;
  max-height: min(47vh, 432px);
  z-index: 80;
  transform: translateY(110%);
  transition: transform 220ms ease;
  box-shadow: 0 18px 60px rgba(15,23,42,.20);
  background: rgba(255,255,255,.14); /* more transparent glass */
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.drawer-open #detailsCard{
  transform: translateY(0);
}

/* Make drawer content scroll within */
body.drawer-enabled #detailsCard .dash-card-body{
  overflow: auto;
  max-height: calc(min(47vh, 432px) - 56px);
}

/* Slightly larger rounded corners for drawer */
body.drawer-enabled #detailsCard{
  border-radius: 20px;
}

body.drawer-open .drawer-backdrop{
  opacity: 1;
}

/* Drawer: keep inner card surfaces transparent so the sheet itself is the glass */
body.drawer-enabled #detailsCard .dash-card-header,
body.drawer-enabled #detailsCard .dash-card-body{
  background: transparent;
}

/* Drawer: make inner controls + line items match the transparent glass sheet */
body.drawer-enabled #detailsCard .glass-btn{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.drawer-enabled #detailsCard .glass-btn:hover{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.30);
}

body.drawer-enabled #detailsCard .line-row{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

body.drawer-enabled #detailsCard .line-row:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(16,185,129,.22);
}

/* When drawer is open, let the list scroll above it (so last rows are tappable) */
body.drawer-open #mainCard .dash-card-body{
  padding-bottom: calc(35vh + 18px);
}

/* Extra safety if the list has its own padding */
body.drawer-open #invList{
  padding-bottom: calc(35vh + 18px);
  scroll-padding-bottom: calc(35vh + 18px);
}
.drawer-backdrop{
  pointer-events: none;
}

/* --- Drawer scroll fixes (override) ---
   Ensure the details drawer NEVER expands; its body scrolls.
   Also keep invoice list scrollable behind the drawer.
*/
body.drawer-enabled #detailsCard{
  /* Let the sheet shrink to its content (up to a cap) */
  height: auto;
  max-height: min(47vh, 432px);

  /* Allow a smaller collapsed look */
  min-height: 140px;

  /* Keep the internal layout + scrolling behavior */
  display: flex;
  flex-direction: column;

  /* Optional: allow manual resizing in supporting browsers */
  resize: vertical;
  overflow: hidden;
}

/* Critical: allow the card body to become the scroll container in flex layouts */
body.drawer-enabled #detailsCard .dash-card-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* don't rely on max-height; height is handled by the drawer itself */
  max-height: none !important;
}

/* Make sure inner content doesn't force the drawer body to grow */
body.drawer-enabled #detailsCard #invDetail,
body.drawer-enabled #detailsCard #invLines{
  min-height: 0;
}

/* Let the invoice list scroll normally even while drawer is open */
body.drawer-open #mainCard .dash-card-body{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: auto;
}

/* Invoice modal line items */
.inv-modal-lines{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(148,163,184,.18);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.inv-lines-meta{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 12px;
  color: rgba(71,85,105,.62);
}
.inv-lines-meta .spacer{ flex:1; }

/* Keep invoice modal usable on smaller screens */
#invoiceModal .modal{
  max-height: min(82vh, 760px);
  display:flex;
  flex-direction:column;
}
#invoiceModal .modal-body{
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}

/* KPI drawer handle — centered, invisible (tap target kept) */
.inv-kpis .dash-card-header{ position: relative; }
.inv-kpis .drawer-handle{
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  width: 44px;
  height: 0px;              /* no visible bar */
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  margin: 0;
  flex: 0 0 auto;
}
/* generous invisible tap target */
.inv-kpis .drawer-handle::after{
  content:'';
  position:absolute;
  left:-14px; right:-14px; top:-12px; bottom:-12px;
}

/* Invoice modal compact rows / one-line layout */
.invoice-form-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Row layouts */
.invoice-form-grid .inv-row{
  display:grid;
  gap:10px;
  width:100%;
  box-sizing:border-box;
}

/* Always use shrinkable tracks to prevent overflow */
.invoice-form-grid .inv-row-2{
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
}

.invoice-form-grid .inv-row-3{
  /* Restaurant | VAT | Total */
  grid-template-columns: minmax(0,1.15fr) 84px minmax(0,1fr);
  align-items:end;
}
/* Prevent grid children from forcing overflow on narrow screens */
.invoice-form-grid .inv-row > *{ min-width:0; }
.invoice-form-grid input,
.invoice-form-grid select{
  min-width:0;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

/* Keep the "…" inside the input cell */
.invoice-form-grid .compact-input{
  position:relative;
}
.invoice-form-grid .compact-input input{
  padding-right: 38px;
}
.invoice-form-grid .compact-input .cell-icon{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  background:transparent;
  border:none;
  box-shadow:none;
  color:#000;
  padding:0;
}

/* Make the icon itself black */
.invoice-form-grid .compact-input .cell-icon .material-icons{
  font-size:18px;
  color:#000;
}

/* Invoice-level VAT pill sizing */
.invoice-vat-field{
  min-width: 0;
}
.invoice-vat-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  user-select:none;
  position:relative;
}
.invoice-vat-toggle input{
  position:static;
  opacity:1;
  pointer-events:auto;
  width:18px;
  height:18px;
  margin:0;
}
.invoice-vat-toggle .vat-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:auto;
  padding:0;
  border-radius:0;
  border:none;
  background:transparent;
  font-weight:600;
  font-size:14px;
}
.invoice-vat-toggle .vat-amt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:14px;
  white-space:nowrap;
}
.invoice-vat-toggle input:not(:checked) + .vat-amt{
  opacity:.65;
}
.invoice-vat-toggle input:checked + .vat-amt{
  opacity: 1;
}

/* Invoice editor: single VAT + Total row
   [VAT] [✓] [$VAT] [Total] [$Total] [Total +] [$Total+VAT]
   (IDs must remain: fVat, fVatAmount, fSubtotalAmount, fGrandTotalAmount, fTotal) */
.invoice-vat-total-field{ min-width:0; margin-top: 12px; } /* extra gap under Supplier/Member */
.invoice-vat-total-inline{
  display:flex;
  align-items:center;
  gap: 6px;
  flex-wrap:nowrap;        /* ALWAYS keep on one line */
  overflow-x:hidden;       /* never scroll; keep row compact */
  min-width:0;
}


/* Turn the VAT/Total/Net/Total+ row into Apple/Notion-style chips + outputs */
.invoice-vat-total-inline .invoice-mini-label{ display:none; }

/* Base chip (Notion/Apple-ish: flat, subtle border, crisp type) */
.invoice-vat-total-inline .inv-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 1px 0 rgba(15,23,42,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(71,85,105,.92);
  user-select: none;
  white-space: nowrap;
}
.invoice-vat-total-inline .inv-chip:hover{
  background: rgba(255,255,255,.92);
  border-color: rgba(15,23,42,.14);
}
.invoice-vat-total-inline .inv-chip:active{
  transform: translateY(0.5px);
}
.invoice-vat-total-inline .inv-chip-ic{
  font-size: 18px;
  opacity: .92;
}
.invoice-vat-total-inline .inv-chip-label{
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .02em;
}
.invoice-vat-total-inline .inv-chip-amt{
  font-weight: 800;
  font-size: 13px;
}

/* Hide the raw checkbox but keep it accessible */
.invoice-vat-toggle input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}

/* VAT chip states */
.invoice-vat-toggle{ cursor:pointer; }
.invoice-vat-toggle:not(.is-on) .inv-chip-amt{ opacity:.70; }
.invoice-vat-toggle.is-on{
  border-color: rgba(34,197,94,.25);
  background: rgba(34,197,94,.10);
  color: rgba(21,128,61,.95);
}

/* Total (manual override) chip states */
.invoice-total-edit-btn{
  cursor:pointer;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
}
.invoice-total-edit-btn.is-on{
  border-color: rgba(59,130,246,.28);
  background: rgba(59,130,246,.10);
  color: rgba(30,64,175,.95);
}
.invoice-total-edit-btn.is-on .inv-chip-ic{ opacity: 1; }

/* Manual total input: match chip sizing */
.invoice-vat-total-inline #fTotalInput.invoice-total-input{
  height: 34px;
  border-radius: 999px;
  padding: 0 12px;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 1px 0 rgba(15,23,42,.06);
}

/* Computed outputs (Net / Total+) */
.invoice-vat-total-inline .inv-totals-out{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding-left: 4px; /* slight separation from VAT chip */
  white-space: nowrap;
}

/* Net pill: contains [pen] + [Total Net amount] OR [manual input] */
.invoice-vat-total-inline .inv-net-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.90);
  box-shadow: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  user-select: none;
  white-space: nowrap;
}
.invoice-vat-total-inline .inv-net-pill #fTotalEditBtn{
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  box-shadow:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* Move pen left without shifting the amount */
  width:18px;
  min-width:18px;
  transform: translateX(-4px);
  margin-right:-2px;
}

.invoice-vat-total-inline .inv-net-pill #fTotalEditBtn .inv-chip-label{ display:none; }

/* Manual input should look like the number, not a separate control */
.invoice-vat-total-inline .inv-net-pill #fTotalInput.invoice-total-input{
  width: 88px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  height: auto;
  text-align: left;
}
.invoice-vat-total-inline .inv-net-pill #fTotalInput.invoice-total-input:focus{
  outline:none;
  border:0;
  background:transparent;
  box-shadow:none;
}

/* Show only one number at a time */
.invoice-vat-total-inline .inv-net-pill.is-editing #fSubtotalAmount{ display:none; }
.invoice-vat-total-inline .inv-net-pill:not(.is-editing) #fTotalInput{ display:none; }
.invoice-vat-total-inline .inv-totals-out .invoice-total-amt{
  display:inline-flex;
  align-items:baseline;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  color: rgba(71,85,105,.92);
  font-weight: 800;
  font-size: 13px;
}
.invoice-vat-total-inline .inv-totals-out #fSubtotalAmount::before{
  content: 'Total Net';
  font-weight: 800;
  font-size: 12px;
  opacity: .65;
  margin-right: 4px;
}
.invoice-vat-total-inline .inv-totals-out #fGrandTotalAmount::before{
  content: '•  Total+';
  font-weight: 800;
  font-size: 12px;
  opacity: .65;
  margin-right: 2px;
}
.invoice-vat-total-inline .inv-totals-out #fGrandTotalAmount{
  font-weight: 900;
}
/* Legacy label/amount styles (kept elsewhere), but hidden in the chip row above. */


/* Invoice modal: editable Total override input (still uses hidden #fTotal as source of truth) */
.invoice-total-input{
  width: 92px;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(255,255,255,.90);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.1;
  text-align: right;
  color: rgba(71,85,105,.92);
}
.invoice-total-input::placeholder{ opacity: .6; }
.invoice-total-input:focus{
  outline: none;
  border-color: rgba(96,165,250,.70);
  background: rgba(219,234,254,.80);
  box-shadow: 0 0 0 3px rgba(147,197,253,.55);
}
@media (max-width: 420px){
  .invoice-total-input{ width: 100px; }
}


@media (max-width: 420px){
  .invoice-vat-total-inline{ gap:8px; }
}

/* Invoice-level Total — one-line: [Total] [Subtotal] [Grand Total] */
.invoice-total-field{ min-width: 0; }
.invoice-total-split{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  min-width:0;
  white-space:nowrap;
}
.invoice-total-split .sub{
  font-weight:600;
  font-size:14px;
  opacity:.65;
}
.invoice-total-split .grand{
  font-weight:800;
  font-size:14px;
}

/* Inline label + control row (used for VAT so it doesn't eat vertical space) */
.field-head-inline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:6px;
}
.field-label-inline{
  font-weight:600;
  font-size:12px;
  opacity:.8;
}

/* Mobile: make it truly match the mock */
@media (max-width: 720px){
  .invoice-form-grid .inv-row{ gap:10px; }
  .invoice-form-grid .inv-row-2{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .invoice-form-grid .inv-row-3{ grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); }
  .invoice-vat-field{ min-width: 0; }
  .invoice-vat-toggle .vat-pill{ height:auto; padding:0; }
  /* Hide hints on mobile for compactness */
  .invoice-form-grid .compact-field .field-hint{ display:none; }
}

/* Very small phones: allow stacking */
@media (max-width: 380px){
  .invoice-form-grid .inv-row-2{ grid-template-columns: 1fr; }
  .invoice-form-grid .inv-row-3{ grid-template-columns: 1fr; }
  .invoice-vat-field{ min-width: unset; }
}

/* Borderless black "cell" icon button */
button.cell-icon{
  background:transparent;
  border:none;
  box-shadow:none;
  color:#000;
  padding:0;
  border-radius:999px;
}
button.cell-icon .material-icons{
  color:#000;
}

/* --- Invoice modal: mobile overflow fixes --- */
@media (max-width: 560px){
  .invoice-form-grid .inv-row{ gap:8px; }
  .invoice-form-grid .inv-row-3{ grid-template-columns: minmax(0,1fr) 76px minmax(0,1fr); }
  .invoice-form-grid .inv-row > label{ min-width:0; }
  .invoice-form-grid .field input, .invoice-form-grid .field select{ width:100%; max-width:100%; }
  .invoice-form-grid .compact-input input{ padding-right: 34px; }
  .invoice-form-grid .compact-input .cell-icon{ right:6px; }
}
@media (max-width: 380px){
  /* If the screen is extremely narrow, allow the 3-up row to wrap */
  .invoice-form-grid .inv-row-3{ grid-template-columns: 1fr; }
  .invoice-form-grid .inv-row-3 .invoice-vat-field{ order:2; }
}

/* Screen-reader only (accessible text when using icon-only labels) */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Invoice Add/Edit Modal — match the transparent "invoice details" glass sheet
   (avoid iOS-native look; keep the existing .ios-* markup but style it like the drawer). */
#invoiceModal .ios-modal-container{
  width: min(900px, 100%);
  max-height: min(92vh, 920px);
  display:flex;
  flex-direction:column;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(209,213,219,.62);
  border-radius: 20px;
  box-shadow: 0 18px 60px rgba(15,23,42,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow:hidden;
}
#invoiceModal .ios-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px 10px;
  background: rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(148,163,184,.22);
}
#invoiceModal .ios-header-title{
  font-weight: 800;
  font-size: 15px;
  color: rgba(71,85,105,.92);
  text-align:center;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#invoiceModal .ios-header-btn{
  appearance:none;
  border: none;
  background: transparent;
  padding: 6px 8px;
  font-weight: 800;
  font-size: 14px;
  color: rgba(37,99,235,.92);
  cursor:pointer;
  flex-shrink: 0;
}
#invoiceModal .ios-header-btn:active{
  opacity:.65;
}

#invoiceModal .ios-modal-body{
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  background: transparent;
}

/* Form sections */
#invoiceModal .ios-form-section{
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(209,213,219,.55);
  border-radius: 16px;
  box-shadow: var(--inv-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 10px 6px;
}
#invoiceModal .ios-form-group{ margin-bottom: 10px; }
#invoiceModal .ios-form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 520px){
  #invoiceModal .ios-form-row{ grid-template-columns: 1fr; }
}

#invoiceModal .ios-field{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
#invoiceModal .ios-field-label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(71,85,105,.74);
}
#invoiceModal .ios-input,
#invoiceModal select.ios-input,
#invoiceModal textarea.ios-input{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.72);
  color: rgba(71,85,105,.92);
  outline: none;
}
#invoiceModal .ios-input:focus{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 3px rgba(59,130,246,.16);
}

/* Field with action button (supplier more, etc.) */
#invoiceModal .ios-field-with-action{
  display:flex;
  align-items:center;
  gap: 8px;
}
#invoiceModal .ios-field-with-action .ios-input{ flex: 1; }
#invoiceModal .ios-field-action{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(255,255,255,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
#invoiceModal .ios-field-action:active{ opacity:.7; }

/* Lines block inside invoice modal */
#invoiceModal #invoiceModalLinesBlock{
  margin-top: 12px;
}

/* Make sure the backdrop actually dims behind the iOS sheet */
#invoiceModal.modal-backdrop{
  /* A stronger dim so the glass sheet reads clearly above the invoices list */
  background: rgba(15,23,42,.44);
}
/* Supplier/Member picker must sit ABOVE the invoice sheet */
#contactPickerModal.modal-backdrop{ z-index: 13000; }
#contactPickerModal .modal{ position: relative; z-index: 13001; }
/* --- Simple Contact Picker --- */

.modal--compact{
  width: min(275px, 100%);
  border-radius: 16px;
}

.contact-picker-body{
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-search{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(209,213,219,.6);
}

.contact-search .material-icons{
  font-size: 18px;
  color: rgba(71,85,105,.6);
}

.contact-search input{
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
}

.contact-list{
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: min(55vh, 420px);
  overflow-y: auto;
}

.contact-row{
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
  color: rgba(71,85,105,.9);
}

.contact-row:hover{
  background: rgba(37,99,235,.08);
}

.contact-row .sub{
  font-size: 11px;
  color: rgba(71,85,105,.55);
}

/* ================================
   Line Item Modal – Mobile Fix
   ================================ */
/* Target ONLY the line item modal grids */
#lineModal .form-grid{
  grid-template-columns: 1fr;
}

/* Inner 2-col and 3-col grids inside line modal */
#lineModal .form-grid > .form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Mobile: stack everything */
@media (max-width: 720px){
  #lineModal .form-grid > .form-grid{ grid-template-columns: 1fr; }
  #lineModal .field input,
  #lineModal .field select{ width: 100%; }
  #lineModal .field span{ font-size: 12px; }
}

/* Very small phones: extra breathing room */
@media (max-width: 380px){
  #lineModal .modal-body{ padding: 10px; }
  #lineModal .field input,
  #lineModal .field select{
    height: 44px; /* better tap target */
    font-size: 14px;
  }
}

/* Line Item Modal – Typography +1px */
#lineModal .modal-title{ font-size: 15px; } /* was 14px globally */
#lineModal .field span{ font-size: 13px; } /* was 12px */
#lineModal .field input,
#lineModal .field select{ font-size: 14px; } /* was 13px */

/* Line modal helper text (errors / hints) */
#lineModal .mini-error{ font-size: 13px; } /* was 12px */






/* ------------------------------
   Invoice lines: Touch Grid mode
   ------------------------------ */

.inv-lines-meta{
  display:flex;
  align-items:center;
  gap:10px;
}

.inv-lines-mode{
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

.inv-seg-btn{
  appearance:none;
  border:0;
  cursor:pointer;
  padding:8px 12px;
  border-radius:999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight:600;
  opacity:0.78;
  transition: transform 120ms ease, opacity 120ms ease, background 120ms ease, border-color 120ms ease;
}

.inv-seg-btn:active{
  transform: scale(0.98);
}

.inv-seg-btn.active{
  opacity:1;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
}

.inv-grid{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.inv-grid-group{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.inv-grid-group-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  opacity:0.9;
  padding:6px 4px 0 4px;
}

.inv-grid-row{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.inv-grid-row.unchecked{
  opacity:0.62;
}

.inv-grid-top{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:44px;
}

.inv-grid-check{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
}

.inv-grid-check .material-icons{
  font-size:22px;
  opacity:0.9;
}

.inv-grid-name{
  flex:1 1 auto;
  font-weight:700;
  line-height:1.2;
  word-break: break-word;
}

.inv-grid-badges{
  display:flex;
  gap:4px;
  align-items:center;
  flex:0 0 auto;
  flex-wrap:wrap;
}

.inv-grid-badges.is-empty{
  display:none;
}

.inv-grid-badge{
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  font-size:12px;
  font-weight:800;
  opacity:0.9;
  white-space:nowrap;
}

.inv-grid-pill{
  flex:0 0 auto;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  font-weight:800;
}

.inv-grid-pin{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
  cursor:pointer;
}

.inv-grid-pin .material-icons{
  font-size:20px;
  opacity:0.9;
}

.inv-grid-fields{
  display:grid;
  grid-template-columns: 1.2fr 0.9fr 1.1fr;
  gap:10px;
}

@media (max-width: 420px){
  .inv-grid-fields{
    grid-template-columns: 1fr 1fr;
  }
  .inv-grid-field.price{
    grid-column: span 2;
  }
}

.inv-grid-field{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.inv-grid-label{
  font-size:12px;
  opacity:0.75;
  padding:0 2px;
}

.inv-grid-input,
.inv-grid-select{
  width:100%;
  height:48px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
  color: inherit;
  padding: 10px 12px;
  font: inherit;
  outline: none;
}

.inv-grid-input:focus,
.inv-grid-select:focus{
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.08);
}

.inv-grid-input[disabled],
.inv-grid-select[disabled]{
  opacity:0.55;
}

.inv-grid-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.inv-grid-action-pill{
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight:700;
  opacity:0.9;
}


/* Product picker must sit ABOVE the line modal */
#productPickerModal.modal-backdrop{ z-index: 11500; }
#productPickerModal .modal{ position: relative; z-index: 11501; }

/* Line modal: make Product "..." icon live INSIDE the input cell */
#lineModal .line-product-input{ position: relative; min-width: 0; }
#lineModal .line-product-input > input{ width: 100%; min-width: 0; padding-right: 46px; }
#lineModal #lProductMoreBtn{
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);

  width: 32px;
  height: 32px;
  padding: 0;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#lineModal #lProductMoreBtn .material-icons{
  font-size: 17px;
  font-weight: 800;
  opacity: .92;
  color: rgba(71,85,105,.92);
  line-height: 1;
}
#lineModal #lProductMoreBtn:hover .material-icons{ color: var(--ios-blue); }


/* Related invoices modal */
.rel-inv-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.rel-inv-list{ display:flex; flex-direction:column; gap:8px; }
.rel-inv-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:14px; cursor:pointer; }
.rel-inv-row:focus{ outline: 2px solid rgba(255,255,255,.18); outline-offset:2px; }
.rel-inv-left{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.rel-inv-top{ font-weight:700; }
.rel-inv-meta{ opacity:.8; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 52vw; }
#dupProductsBtn.active{ box-shadow: 0 0 0 2px rgba(255,255,255,.18) inset; }


/* Invoice modal: avoid forced horizontal width from inline totals row */
#invoiceModal .invoice-vat-total-inline .invoice-mini-label:not(:first-child){
  margin-left: 0 !important;
}


/* Invoice modal: prevent the lines header row from causing horizontal scrolling */
#invoiceModal .inv-lines-meta{
  flex-wrap: wrap;
}
#invoiceModal .inv-lines-meta .spacer{
  flex: 1 1 auto;
}
@media (max-width: 520px){
  #invoiceModal .inv-lines-meta .spacer{ flex-basis: 100%; height: 0; }
}


/* Global safety: if any child still overflows, clip horizontal overflow inside the invoice modal only */
#invoiceModal .modal, #invoiceModal .modal-body{ max-width: 100%; }
#invoiceModal .modal-body > *{ max-width: 100%; }


/* ---- Manage: Duplicates (grouped) ---- */
.manage-dup-tools{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin: -2px 0 10px 0;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px dashed rgba(148,163,184,32);
  background: rgba(255,255,255,84);
}
.manage-dup-hint{
  font-size: 12px;
  color: rgba(71,85,105,.78);
  line-height: 1.35;
  flex: 1;
  min-width: 180px;
}
.manage-dup-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap: wrap;
  justify-content:flex-end;
}
@media (max-width: 720px){
  .manage-dup-tools{ flex-direction:column; }
  .manage-dup-actions{ justify-content:flex-start; width:100%; }
}

.manage-dup-group{
  border: 1px solid rgba(148,163,184,.26);
  background: rgba(255,255,255,.86);
  border-radius: 16px;
  overflow:hidden;
}
.manage-dup-group-hdr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px;
  cursor:pointer;
  user-select:none;
}
.manage-dup-group-hdr:hover{
  border-color: rgba(37,99,235,.16);
}
.manage-dup-group-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
}
.manage-dup-group-title{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1;
}
.manage-dup-group-name{
  font-size: 13px;
  font-weight: 800;
  color: rgba(71,85,105,.92);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.manage-dup-group-meta{
  font-size: 12px;
  color: rgba(71,85,105,.60);
  white-space: nowrap;
}
.manage-dup-group-chevron{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 30px;
  height: 30px;
  border-radius: 12px;
}
.manage-dup-group-body{
  padding: 0 10px 10px 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.manage-dup-group-body[hidden]{ display:none !important; }

.manage-dup-group-select{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  color: rgba(71,85,105,.78);
  user-select:none;
}
.manage-dup-group-select input{ width:16px; height:16px; }



/* Load more invoices (List view) */
.inv-load-more{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 0 2px;
}
.inv-load-more-hint{
  font-size: 12px;
  color: rgba(71,85,105,.62);
  text-align:center;
  padding: 0 10px;
}
.inv-load-more #loadMoreInvoicesBtn{
  display:flex;
  align-items:center;
  gap:4px;
  border-radius: 999px;
  padding: 10px 14px;
}
.inv-load-more #loadMoreInvoicesBtn .material-icons{
  font-size: 18px;
  opacity: .8;
}


/* KPI-selected product group (Products view) */
.month-group.kpi-selected .month-group-header{
  border-color: rgba(34,197,94,.35);
  box-shadow: 0 0 0 3px rgba(34,197,94,.10);
}


/* KPI strip: 4-up grid on desktop, 2x2 on mobile (avoid giant single-column tiles) */
.inv-kpis .kpi-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 980px){
  .inv-kpis .kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .inv-kpis .kpi-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px){
  .inv-kpis .kpi-grid{ grid-template-columns: 1fr; }
}


/* Cost/Income ratio thresholds */
.inv-kpis .kpi-value.ratio-ok{ color: rgba(16,185,129,.92); }
.inv-kpis .kpi-value.ratio-warn{ color: rgba(245,158,11,.92); }
.inv-kpis .kpi-value.ratio-bad{ color: rgba(239,68,68,.92); }



/* Manage edit modal: product image row */
.manage-image-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.manage-image-box{
  width:72px;
  height:72px;
  border-radius:16px;
  border:1px dashed rgba(148,163,184,0.45);
  background: rgba(255,255,255,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  flex:0 0 72px;
}
.manage-image-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:none;
}
.manage-image-box.has-image img{ display:block; }
.manage-image-ic{
  font-size:24px;
  opacity:0.7;
}
.manage-image-box.has-image .manage-image-ic{ display:none; }

@media (max-width: 520px){
  .manage-image-row{ flex-direction:column; align-items:stretch; }
  .manage-image-box{ width:100%; height:120px; flex: 0 0 auto; }
}



/* --- Polish: Manage Edit modal --- */
#manageEditModal .modal{
  width: min(660px, calc(100vw - 24px));
}
#manageEditModal .modal-body{
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Compact layout for Manage Edit (keep it short) */
#manageEditModal .form-grid{ gap: 8px; }
#manageEditModal .field{ gap: 4px; }
#manageEditModal .field input,
#manageEditModal .field select{
  height: 34px;
}
#manageEditModal textarea{
  padding: 8px 10px;
}
#manageEditModal .form-actions{
  margin-top: 10px;
}
#manageEditModal #manageEditProductFields textarea{
  min-height: 54px;
}
#manageEditModal #manageEditModalError{
  margin-top: 10px;
}


/* ---------- Manage Edit toggle switch (Enabled) ---------- */
.switch-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding-top:2px;
}

#manageEditEnabledWrap{ padding-top:0; }

.switch-row input[type="checkbox"]{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}

.switch-ui{
  position:relative;
  flex:0 0 auto;
  width:42px;
  height:24px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  cursor:pointer;
}

.switch-ui::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:999px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  transition: transform .18s ease, background .18s ease;
}

.switch-row input[type="checkbox"]:checked + .switch-ui{
  background: rgba(46, 204, 113, .28);
  border-color: rgba(46, 204, 113, .35);
}

.switch-row input[type="checkbox"]:checked + .switch-ui::after{
  transform: translateX(18px);
}

.switch-row input[type="checkbox"]:focus-visible + .switch-ui{
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 2px;
}


.inv-thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  /* Show ONLY the bottom-right portion (≈ bottom 10% area) */
  object-position: 100% 100% !important; /* bottom-right */
  transform-origin: 100% 100% !important;
  transform: scale(3) !important; /* ~11% of original area visible */
  display:block;
}



/* If canvas crop fails (CORS, etc.), fall back to a CSS zoom that shows ~bottom-right 20% */
.inv-thumb.crop-zoom-br20,
.inv-img-thumb.crop-zoom-br20{
  object-fit: cover;
  object-position: 100% 100% !important;
  transform-origin: 100% 100% !important;
  transform: scale(2.236) !important; /* ~20% of original area visible */
}

/* Icon thumb inside the images button (created in JS) */
.inv-img-thumb{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  object-position: 100% 100%;
  border-radius: 12px;
}


.inv-img-btn.has-thumb{ position: relative; overflow:hidden; }
.inv-img-btn.has-thumb .inv-img-thumb{
  position:absolute;
  inset:0;
  z-index:0;
}
.inv-img-btn.has-thumb .material-icons{ position:relative; z-index:1; }
.inv-img-btn.has-thumb .inv-img-count{ position:relative; z-index:2; }

/* ================================
   Invoice thumbs: smart center + top bias (crisp crop)
   - Crop is handled by object-fit/object-position (no transform zoom).
   - We also prefer full-size URLs for thumbs in JS (invoiceThumbUrl) to avoid blur.
   ================================ */
.inv-thumb,
.inv-img-thumb{
  object-fit: cover !important;
  object-position: 50% 30% !important; /* center with slight top bias */
  transform: none !important;
  transform-origin: 50% 30% !important;
}

/* Invoice modal header: camera button next to Close (X) */
#invoiceModal .modal-hdr-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Currency toggle ($ / LL) */
#invoiceModal .inv-cur-btn{
  width: 40px;
  height: 40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0;
}
#invoiceModal .inv-cur-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(209,213,219,.65);
}
#invoiceModal #invoiceModalImagesBtn[disabled]{
  opacity:.55;
  cursor:not-allowed;
}


/* Mobile: keep Search + Manage on one line (hard iOS fix) */
@media (max-width: 600px){
  .inv-actions{
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
  }

  /* Force search to actually shrink on iOS Safari */
  .inv-search{
    flex: 1 1 0%;
    max-width: calc(100% - 84px); /* leave room for Manage */
    min-width: 0;
  }
  .inv-search input{
    width: 100%;
    min-width: 0;
  }

  /* Lock Manage button width */
  #manageBtn{
    flex: 0 0 72px;
    max-width: 72px;
    white-space: nowrap;
  }
}


/* iOS SAFARI FIX: search must not exceed container
   Root cause:
   - input { width:100% } + padding inside a flex item
   - Safari ignores flex-shrink unless box-sizing/min-width are explicit
*/
@media (max-width: 720px){
  .inv-actions{
    flex-wrap: nowrap !important;
    align-items: center;
  }

  .inv-search{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
  }

  .inv-search input{
    width: 0 !important;        /* Safari: allow flex to shrink below intrinsic size */
    flex: 1 1 0%;
    min-width: 0 !important;
    box-sizing: border-box;
  }



/* iOS: ultra-narrow widths -> icon-only Manage (prevents line wrap) */
@media (max-width: 430px){
  body.ios #manageBtn{
    font-size: 0;     /* hide text */
    gap: 0;
    padding: 10px 10px;
    min-width: 44px;  /* comfortable tap target */
  }
  body.ios #manageBtn .material-icons{
    font-size: 20px;  /* keep icon visible */
  }
}


  .inv-search{ max-width: none !important; }
  #manageBtn{ flex: 0 0 auto !important; max-width: none !important; }
}

/* =========================================================
   KPI strip (Invoices) — split cells (Payroll-style)
   - Adds 2-column KPI tiles (A/B) and keeps sub-lines aligned
   ========================================================= */

/* Split layout inside a KPI tile (two compact columns, like the original) */
#kpiStrip .kpi-split{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 0;
  align-items: start;
}

@media (max-width: 420px){
  /* On very small screens, allow stacking to prevent truncation */
  #kpiStrip .kpi-split{ grid-template-columns: 1fr; gap: 10px; }
  #kpiStrip .kpi-split-col + .kpi-split-col{
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(148,163,184,.22);
    padding-top: 8px;
    margin-top: 6px;
  }
}


#kpiStrip .kpi-split-col{
  min-width: 0;
}

/* Soft divider between halves */
#kpiStrip .kpi-split-col + .kpi-split-col{
  border-left: 1px solid rgba(148,163,184,.22);
  padding-left: 10px;
}


/* Labels should never wrap (keeps the top line aligned) */
#kpiStrip .kpi-label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Subtext: allow up to 2 lines but keep a consistent height */
#kpiStrip .kpi-sub{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.15;
  min-height: calc(2 * 1.15em);
}

/* =========================================================
   iOS Safari: KPI text clipping fix
   - iOS can clip glyph ascenders/descenders when line-height is tight
     and the parent has a fixed height + overflow:hidden.
   - We slightly increase line-height and add tiny vertical padding on text lines,
     and disable translateZ which can worsen subpixel clipping.
   ========================================================= */
body.ios #kpiStrip .kpi-item{
  transform: none; /* avoid iOS glyph clipping in composited layers */
}

body.ios #kpiStrip .kpi-item .kpi-label,
body.ios #kpiStrip .kpi-item .kpi-value{
  line-height: 1.25;
  padding-top: 1px;
  padding-bottom: 1px;
}

body.ios #kpiStrip .kpi-sub{
  line-height: 1.25;
  min-height: calc(2 * 1.25em);
}

/* iOS: don't cap these to 1.15em (can clip) */
body.ios #kpiC1_value,
body.ios #kpiC2_value{
  line-height: 1.25;
  max-height: none;
}


@media (max-width: 420px){
  #kpiStrip .kpi-split{ gap: 8px; }
  #kpiStrip .kpi-split-col + .kpi-split-col{ padding-left: 8px; }
}



/* ================================
   Invoice modal: vertical split (form + image viewer)
   ================================ */
#invoiceModal .modal.wide{
  display:flex;
  flex-direction:column;
  max-height: 92vh;
}

#invoiceModal .modal-body.inv-split-body{
  flex: 1 1 auto;
  overflow:hidden;
  overscroll-behavior: contain;
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

/* Footer: icon-only actions */
#invoiceModal .inv-footer-actions{
  align-items: center;
}
#invoiceModal .inv-footer-actions .icon.glass-btn{
  width: 44px;
  height: 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

/* Split container (top form, bottom viewer) */
#invoiceSplit{
  flex: 1 1 auto;
  min-height: 420px;
  display:grid;
  grid-template-rows: 50% 10px 50%;
  gap: 0;
}

#invoiceSplitTop,
#invoiceSplitBottom{
  position: relative;
  z-index: 1;
  min-height: 0; /* allow internal scrollers to actually scroll */
  min-width: 0;
  overflow:hidden;
  border-radius: 16px;
  border: 1px solid rgba(209,213,219,.55);
  background: rgba(255,255,255,.42);
  box-shadow: var(--inv-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Bottom pane should be independently scrollable (mouse wheel / trackpad stays inside the modal) */
#invoiceSplitBottom{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
#invoiceSplitBottom::-webkit-scrollbar{ width: 8px; height: 8px; }
#invoiceSplitBottom::-webkit-scrollbar-thumb{ background: rgba(148,163,184,.35); border-radius: 999px; }
#invoiceSplitBottom::-webkit-scrollbar-track{ background: transparent; }

#invoiceImageViewer{
  overflow: auto;
  overscroll-behavior: contain;
}
#invoiceViewerStage{
  position:absolute;
  left:0;
  top:0;
  width: 1px;   /* sized by JS to natural image size */
  height: 1px;  /* sized by JS to natural image size */
  transform-origin: 0 0;
  will-change: transform;
}

/* Top pane */
#invoiceSplitTop{
  display:flex;
  flex-direction:column;
}

#invoiceTopScroll{
  flex: 1 1 auto;
  min-height: 0; /* critical for scroll in flex */
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 10px 6px;
}

/* Make the form-grid look consistent inside the scroll */
#invoiceTopScroll .form-grid{ margin: 0; }

#invoiceTopSticky{
  flex: 0 0 auto;
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(148,163,184,.22);
  background: rgba(255,255,255,.58);
}

/* Ensure Add Line controls stay visible in the top pane */
#invoiceTopSticky .inv-lines-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
#invoiceTopSticky .inv-lines-mode{
  margin-left:auto;
}
#invoiceTopSticky .inv-addline-actions{
  margin-top: 8px;
  display:flex;
}

/* Divider */
#invoiceSplitDivider{
  cursor: row-resize;
  position: relative;
  z-index: 20;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
  touch-action:none;
  background: transparent;
}

/* While dragging the divider, prevent the modal/page from scrolling */
body.is-resizing{
  overscroll-behavior: none;
}
body.is-resizing #invoiceTopScroll{
  overflow: hidden !important;
  -webkit-overflow-scrolling: auto;
}
#invoiceSplitDivider:active{ opacity:.85; }
#invoiceSplitDivider .inv-split-grip{
  width: 68px;
  height: 6px;
  border-radius: 999px;
  background: rgba(148,163,184,.55);
}

/* Bottom viewer */
#invoiceImageViewer{
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
  touch-action:none; /* allow custom pinch/drag */
}

#invoiceViewerStage{
  /*
    IMPORTANT:
    Keep the stage sized to the image's *natural* pixel size.
    The pan/zoom JS sets width/height + transform on #invoiceViewerStage.
    So we must NOT pin it with `inset:0` (which would force it to the
    viewer size and break the fit-to-container behavior).
  */
  overflow: visible;
}

#invoiceViewerImg{
  width:auto;
  height:auto;
  max-width:none;
  max-height:none;
  display:block;
  transform-origin: 0 0;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none; /* gestures handled by container */
}

#invoiceViewerEmpty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(71,85,105,.62);
  font-size: 13px;
  font-weight: 700;
  background: rgba(255,255,255,.12);
}

#invoiceViewerHint{
  position:absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(71,85,105,.74);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(148,163,184,.22);
}

/* ================================
   Invoice modal: Grid view must be 2 items per row
   ================================ */
#invoiceLinesGrid .inv-grid-group{
  margin-bottom: 10px;
}
#invoiceLinesGrid .inv-grid-group-title{
  font-size: 12px;
  font-weight: 900;
  color: rgba(71,85,105,.74);
  margin: 6px 2px 8px;
}
#invoiceLinesGrid .inv-grid-cards{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
#invoiceLinesGrid .inv-grid-row{
  width: auto;
}

/* Slightly denser inside split */
@media (max-width: 600px){
  #invoiceModal .modal-body.inv-split-body{ padding: 10px; gap:10px; }
  #invoiceSplit{ min-height: 420px; }
  #invoiceViewerHint{ display:none; }
}


/* FIX: Prevent vertical / letter-stacked product names in Grid mode */
#invoiceLinesGrid .inv-grid-name{
  writing-mode: horizontal-tb;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}


/* === Grid usability refinement (1-row layout) === */

/* 1) Single soft container for Qty / Unit / Price */
#invoiceLinesGrid .inv-grid-fields{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.65);
}

/* Labels smaller & consistent */
#invoiceLinesGrid .inv-grid-label{
  font-size: 11px;
  opacity: .75;
}

/* Inputs full-width + touch friendly */
#invoiceLinesGrid .inv-grid-input,
#invoiceLinesGrid .inv-grid-select{
  width: 100%;
  height: 44px;
  font-size: 14px;
}

/* 2) Qty stepper layout */
#invoiceLinesGrid .inv-grid-field.qty{
  display: grid;
  grid-template-rows: auto 1fr;
}
#invoiceLinesGrid .inv-grid-field.qty input{
  text-align: center;
}

/* 3) Explicit unit selector */
#invoiceLinesGrid .inv-grid-field.unit select{
  font-weight: 600;
}

/* 4) Price right-aligned */
#invoiceLinesGrid .inv-grid-field.price input{
  text-align: right;
  font-weight: 600;
}

/* 5) Reduce action button dominance after selection */
#invoiceLinesGrid .inv-grid-row:not(.unchecked) .inv-grid-check{
  opacity: .45;
}
#invoiceLinesGrid .inv-grid-row:not(.unchecked) .inv-grid-check:hover{
  opacity: .75;
}

/* --- Compact line-items top sticky (inv-top-sticky / #invoiceTopSticky) ---
   Goal: keep this section to ~1 line (2 max) and reduce vertical height on mobile,
   without affecting other pill buttons or segmented controls elsewhere.
*/
#invoiceTopSticky{
  padding: 6px 10px 8px;
}
#invoiceTopSticky .inv-lines-meta{
  gap: 8px;
}
#invoiceTopSticky .inv-addline-actions{
  margin-top: 6px;
}

@media (max-width: 560px){
  #invoiceTopSticky{
    padding: 6px 8px;
  }
  /* Prefer a single-line meta row; allow wrap only if absolutely needed */
  #invoiceTopSticky .inv-lines-meta{
    flex-wrap: nowrap;
    row-gap: 6px;
    column-gap: 8px;
  }
  /* Keep mode toggle compact */
  #invoiceTopSticky .inv-lines-mode{
    margin-left: 8px; /* instead of pushing to a new line */
  }
  #invoiceTopSticky .inv-lines-mode .inv-seg-btn{
    padding: 6px 10px;
    font-size: 12px;
  }
  /* Make Add line button shorter */
  #invoiceTopSticky .inv-addline-actions{
    margin-top: 6px;
  }
  #invoiceTopSticky .inv-addline-actions .pill-btn{
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 12.5px;
  }
  #invoiceTopSticky .inv-addline-actions .pill-btn svg{
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 420px){
  /* If the meta row must wrap, keep it to 2 rows max with tighter spacing */
  #invoiceTopSticky .inv-lines-meta{
    flex-wrap: wrap;
    gap: 6px;
  }
  #invoiceTopSticky .inv-lines-mode{
    margin-left: auto;
  }
}/* Row 1 layout: 3 cols (Invoice # / Rate / Date). If Rate is hidden, collapse to 2 cols (Invoice # / Date). */
#invoiceModal.no-rate .form-grid-top{
  grid-template-columns: 1fr 1fr;
}
/* Prefer the actual visibility of the Rate field (more robust than relying on .no-rate class). */
@supports(selector(:has(*))){
  #invoiceModal:has(#fRateField[hidden]) .form-grid-top{
    grid-template-columns: 1fr 1fr;
  }
  #invoiceModal:has(#fRateField:not([hidden])) .form-grid-top{
    grid-template-columns: 1fr 1fr 1fr;
  }
}
/* ================================
   Invoice footer bar fixes (spacing + iOS safe-area)
   ================================ */
#invoiceModal .inv-footer-actions{
  /* Remove generic form-actions spacing that makes the footer look "floating" */
  margin-top: 0;

  /* Make it feel like a real bottom bar inside the modal */
  position: sticky;
  bottom: 0;
  z-index: 5;

  /* Span full width inside the modal-body padding */
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: -12px;

  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));

  background: rgba(255,255,255,.82);
  border-top: 1px solid rgba(148,163,184,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  gap: 12px;
}

#invoiceModal .inv-footer-actions .icon.glass-btn{
  /* Match Google Material icon button proportions */
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 12px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Footer icon colors + force Material Icons font (fix blank glyph on some base styles) */
#invoiceModal .inv-footer-actions .icon.glass-btn{ color: rgba(71,85,105,.92); }
#invoiceModal .inv-footer-actions .icon.glass-btn.primary{ color: rgba(37,99,235,.95); }
#invoiceModal .inv-footer-actions .icon.glass-btn.danger{ color: rgba(220,38,38,.92); }
#invoiceModal .inv-footer-actions .material-icons{ font-family: 'Material Icons' !important; }


/* Material Icons: consistent sizing + vertical centering */
#invoiceModal .inv-footer-actions .icon.glass-btn .material-icons{
  display: block;
  font-size: 20px;
  line-height: 1;
}

/* Keep the primary action readable even when focus/outline changes */
#invoiceModal .inv-footer-actions #invoiceSaveBtn{
  border-color: rgba(37,99,235,.32);
}

/* Keep the right-side buttons snug and centered */
#invoiceModal .inv-footer-actions .spacer{
  flex: 1 1 auto;
}

/* Prevent the footer bar from being visually clipped by ancestor overflow rules */
#invoiceModal .modal-body.inv-split-body{
  padding-bottom: 12px; /* keep internal rhythm; footer extends via negative margin */
}


.invoice-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.invoice-footer .icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.material-symbols-rounded {
  font-size: 22px;
  line-height: 1;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}


/* Invoice viewer: cursor feedback */
#invoiceImageViewer{ cursor: grab; }
#invoiceImageViewer.is-panning{ cursor: grabbing; }


/* Invoice modal (split): keep top pane unified; make line items area independently scrollable */
#invoiceModalLinesBlock{
  min-height: 0;
  max-height: 45vh; /* adjust if needed */
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#invoiceLinesList,
#invoiceLinesGrid{
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* =========================================================
   KPI marquee (Invoices)
   - Horizontal auto-scroll left→right with seamless loop
   - Subtle 3D + corner-faded border
   - Compact vertical spacing
   ========================================================= */

/* Container spans full width */
#kpiStrip .kpi-marquee{
  position: relative; /* needed for iOS-safe edge fades */
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 0 2px;
  margin: 0;
  grid-column: 1 / -1;
  justify-self: stretch;
  align-self: stretch;
  box-sizing: border-box;
}

#kpiStrip .kpi-marquee::before,
#kpiStrip .kpi-marquee::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  z-index: 2;
  pointer-events: none;
}

#kpiStrip .kpi-marquee::before{
  left: 0;
  background: linear-gradient(to right, var(--inv-bg, #f6f7fb), rgba(246,247,251,0));
}

#kpiStrip .kpi-marquee::after{
  right: 0;
  background: linear-gradient(to left, var(--inv-bg, #f6f7fb), rgba(246,247,251,0));
}

#kpiStrip .kpi-marquee-track{
  display: flex;
  gap: 14px;
  width: max-content;
  min-width: 100%;
  will-change: transform;

  /* IMPORTANT (iOS Safari):
     - Don't animate until JS has duplicated the KPI items (seamless loop).
     - Avoid starting at a negative translate (can render blank before layout/clone).
  */
  animation: none;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  padding: 2px;
  margin: 0;
  box-sizing: border-box;
}

/* Start marquee ONLY once JS marks it ready (after cloning). */
#kpiStrip .kpi-marquee-track[data-kpi-marquee-ready="1"]{
  animation: kpiScrollLR 55s linear infinite;
}

#kpiStrip .kpi-marquee:hover .kpi-marquee-track{
  animation-play-state: paused;
}

@keyframes kpiScrollLR{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

/* KPI cards: smaller width + subtle 3D + corner-faded border */
#kpiStrip .kpi-item{
  flex: 0 0 auto;
  min-width: 200px;
  max-width: 240px;
  padding: 8px 16px;
  margin: 0;
  border-radius: 18px;

  border: 1.25px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    radial-gradient(140% 140% at 50% 50%,
      rgba(0,0,0,0.07) 0%,
      rgba(0,0,0,0.05) 35%,
      rgba(0,0,0,0.025) 62%,
      rgba(0,0,0,0.0015) 100%
    ) border-box;

  box-shadow: 0 10px 22px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  position: relative;
  transform: translateZ(0);
  box-sizing: border-box;
}

/* KPI height stabilization: keep cards from growing taller due to wrapping/margins */
#kpiStrip .kpi-item{
  height: 92px;
  max-height: 92px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

/* remove unexpected vertical margins inside KPI cards */
#kpiStrip .kpi-item *{
  margin-top: 0;
  margin-bottom: 0;
}

/* ensure common KPI text lines never wrap (prevents tall cards) */
#kpiStrip .kpi-item .kpi-title,
#kpiStrip .kpi-item .kpi-label,
#kpiStrip .kpi-item .kpi-name,
#kpiStrip .kpi-item .kpi-value{
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
}

#kpiStrip .kpi-item::before{
  content: "";
  position: absolute;
  inset: 1.25px;
  border-radius: 14px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.78) 0%,
    rgba(255,255,255,0.18) 18%,
    rgba(255,255,255,0.00) 45%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.75),
    inset 0 -10px 18px rgba(0,0,0,0.04);
}

/* =========================================================
   Mobile KPI layout fix (iPhone + small devices)
   - Split KPIs are baked in via JS (one KPI per card)
   - Compact sizing + reduced vertical whitespace
   ========================================================= */
@media (max-width: 520px){
  /* Ensure strip doesn't clip */
  #kpiStrip.dash-card .dash-card-body,
  #kpiStrip .dash-card-body,
  #kpiStrip .kpi-marquee{
    overflow: hidden !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Compact card size + reduced whitespace (bottom more than top) */
  #kpiStrip .kpi-item{
    padding-top: 6px !important;
    padding-bottom: 2px !important;
    height: 86px !important;
    min-height: 86px !important;
    max-height: 86px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  /* Keep text tidy */
  #kpiStrip .kpi-item .kpi-title,
  #kpiStrip .kpi-item .kpi-label,
  #kpiStrip .kpi-item .kpi-name,
  #kpiStrip .kpi-item .kpi-value{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }

  #kpiStrip .kpi-title{ margin: 0 0 2px 0 !important; }

  /* Defensive: remove extra bottom spacing from inner wrappers */
  #kpiStrip .kpi-item > *{ margin-bottom: 0 !important; }
  #kpiStrip .kpi-item *:last-child{ margin-bottom: 0 !important; }
}

/* Prevent tall KPIs when product names are long */
#kpiC1_value,
#kpiC2_value{
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
  max-height: 1.15em;
}




/* === iOS Safari KPI marquee stability fix === */

/* Container handles fade, NOT the animated element */
.kpi-marquee {
  position: relative;
  overflow: hidden;
}

/* Edge fades */
.kpi-marquee::before,
.kpi-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  z-index: 2;
  pointer-events: none;
}

.kpi-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--page-bg, #fff), transparent);
}

.kpi-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--page-bg, #fff), transparent);
}

/* Animated track must stay GPU-bound */
.kpi-marquee-track {
  will-change: transform;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Pause animations when tab is hidden (iOS Safari memory stability) */
.tab-hidden .kpi-marquee-track {
  animation-play-state: paused;
}