/* ui.css — shared UI base for dashboards, invoices, payroll */

/* accounts.css — reuse Contacts/Categories look */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@700;800&display=swap');

:root{
  --safe-top-raw: env(safe-area-inset-top);
  /* Reduce iOS PWA top inset a bit so the header doesn't feel too tall */
  --safe-top: max(0px, calc(var(--safe-top-raw) - 14px));
  --safe-bottom: env(safe-area-inset-bottom);
}

/* Base reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* iOS Safari / PWA: prevent automatic text inflation that can cause
   labels/values to wrap differently than desktop/devtools. */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.app{background:#fff;color:var(--ink);font:500 16px -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Roboto, Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.material-icons{font-size:18px}

/* Screens *//* Screens */
.screen{padding:0 10px}
.hidden{display:none}

/* List */
.list{list-style:none;margin:2px 0 64px;padding:0}
.li{
  display:grid;
  grid-template-columns:auto 1fr auto auto; /* avatar | info | star | chevron */
  gap:10px;align-items:center;padding: 20px 12px;border-bottom:1px solid var(--bd)
}
/* Archived accounts: blurred + faded (still clickable) */
.li.archived{
  filter: blur(1.2px);
  opacity: .55;
}
.li.archived:hover{
  filter: none;
  opacity: .85;
}

.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#f8fafc;color:var(--muted)}
.li .name{font-weight:500;font-size: 16px;color:var(--ink)}
.li .role{font-size: 15px;color:var(--ink-sub)}

.chev{color:var(--ink-sub)}
.chev .material-icons{font-size:16px}

/* Star (default account) */
.star-btn{
  border:0;
  background:transparent;
  color:var(--ink-sub);
  cursor:pointer;
  padding:2px;
  border-radius:8px;
  display:grid; place-items:center;
}
.star-btn .material-icons{ font-size:20px; line-height:1; }
.star-btn.on{ color:var(--star); }
.star-btn:hover{ background:#f3f4f6; }

/* Segmented filter */
.segmented{
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #f3f4f6;
  border-top: 1px solid var(--bd);
  margin: 0;
  padding: 0;
  gap: 0;
  scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented .seg{
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 14px;
  padding: 8px 14px;
  font-weight: 400;
  border: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  border-right: 1px solid var(--bd);
  border-radius: 0;
}
.segmented .seg.on{ background:#1d4ed8; color:#fff; }
.segmented .seg:last-child{ border-right:none }

/* Form *//* Form */
.form{padding:10px 10px 120px}
.chips-grid{background:#fff}
.chip.editable{
  display:grid;grid-template-columns:24px 1fr;align-items:center;gap:10px;
  border:none;border-bottom:1px solid var(--bd);background:#fff;border-radius:0;cursor:text
}
.chip.editable::before{
  content: attr(data-ic);
  font-family: 'Material Icons';font-weight: normal;font-style: normal;font-size:18px;line-height:1;color: var(--ink-sub)
}
.chip.editable .chip-label{ display:none }
.chip.editable .chip-field{ min-height:20px; outline:none }
.chip.editable .chip-field:empty:before{ content: attr(data-placeholder); color: var(--ink-sub); opacity:.25 }
.chip.editable.block .chip-field{ min-height:48px }

.chip.editable,
.chip.picker {
  padding: 10px 7px; /* unified padding, ~15% smaller */
}
.chip.picker{gap:6px;flex-wrap:wrap;padding:8px}
.chip.tiny.on{background:#2563eb;color:#fff}
.chip.picker .chip-label {
  display: block;
  margin-bottom: 6px; /* 👈 adds breathing space */
  font-weight: 500;
}

.preview-wrap{display:flex;gap:10px;align-items:center;padding:8px}
.avatar.big{width:56px;height:56px;aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;background:#f8fafc;color:#0b1220}
.icon-grid{display:grid;grid-template-columns:repeat(6, minmax(0,1fr));gap:6px;padding:8px}
.icon-btn{background:#fff;border-radius:8px;padding:8px;cursor:pointer}
.icon-btn.selected{gap:6px;padding:8px}
.color-row .swatch{width:24px;height:24px;border-radius:6px;border:1px solid var(--bd);cursor:pointer}
.color-row .swatch.selected{outline:2px solid rgba(59,130,246,.3)}

/* Randomize button styled like a swatch, with white icon */
.swatch.randomize{
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:6px;
  border:1px solid var(--bd);
  background:#2563eb;
  cursor:pointer;
}
.swatch.randomize .material-icons{
  font-size:18px;
  line-height:1;   /* tighter vertical alignment */
  color:#fff;
}

/* Actions row: compact + centered, not full width */
.actions-row {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 6px auto;          /* center horizontally */
  background: #f3f4f6;
  border-top: 1px solid #d1d5db;
  border-bottom: 1px solid #d1d5db;
  padding: 2px 6px;          /* shorter height, tighter spacing */
  width: fit-content;        /* shrink to fit buttons */
  border-radius: 4px;
}

.row-btn {
  border: none;
  background: transparent;
  text-align: center;
  padding: 2px 10px;         /* narrow */
  min-height: 10px;          /* shorter bar */
  font-size: 9px;
  line-height: 1.2;
  font-weight: 500;
  cursor: pointer;
}

/* vertical dividers between buttons */
.row-btn + .row-btn {
  border-left: 1px solid #d1d5db;
}

/* ensure only shows in edit screen */
#editScreen .actions-row {
  display: flex;
}
/* Fix spacing between shuffle button and first color swatch */
.preview-wrap {
  display: flex;
  align-items: center;
  gap: 3px;              /* small consistent spacing */
}

#randColors {
  margin-right: 4px;     /* small gap only */
}

.color-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;              /* swatches close to shuffle */
  margin-left: 0;        /* remove big default spacing */
}


/* === Text-based account icons (initials) === */
.avatar, .avatar.big {
  font-family: 'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .3px;
}

.avatar .txt-icon {
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.avatar.big .txt-icon {
  font-size: 20px;
  line-height: 1;
}

.avatar .material-icons { display: none !important; } /* hide glyph icons in list */
#preview .material-icons { display: none !important; } /* hide in editor preview */
#preview .txt-icon { display: inline-block !important; }

/* Hide icon grid entirely — we don't choose glyphs anymore */
.icon-grid { display: none !important; }


/* === Unified Header (Accounts) ========================================= *//* === Unified Header (Contacts) ========================================= */

/* Top App Bar */
.appbar{
  background:#F3F4F6;
  border-bottom:1px solid var(--bd);
  position:sticky;
  top:0;
  z-index:10;
}
.status{ display:none; }
.appbar .toolbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  padding:6px 12px;
}
.appbar .toolbar h1{
  margin:0;
  justify-self:center;
  font-size:17px;
  font-weight:600;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color:var(--ink-sub);
}
/* Header icons (top bar) */
.appbar .icon{
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  border-radius:10px;
  padding:4px;
  border:0;
}
.appbar .icon.round{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  background:#F3F4F6;
  border:1px solid var(--bd);
}
/* Keep "primary" button visually neutral in header */
.appbar .icon.primary{
  background:#F3F4F6;
  color:var(--ink);
  border:1px solid var(--bd);
}
.appbar .material-icons{ font-size:21px; }

/* === Unified Search Bar (Accounts) ====================================== */
/* Search — smaller, no border look */
.search-wrap{margin:8px 2px 6px;position:relative}

.search-wrap input{
  width:100%;border:none;background:var(--panel);
  color:var(--ink);border-radius:10px;
  padding:8px 10px 8px 32px;font-size: 16px;outline:none;
}

.search-wrap input:focus{box-shadow:0 0 0 3px var(--ring)}

.search-ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-sub);font-size: 19px}

/* === Typography normalization: single font family (sizes can vary) === */
body, .toolbar h1, .subbar .title-lg, .subbar .subtitle,
#search, .li .name, .li .type, .chip,
.flabel, .fitem input, .fitem textarea,
.section-title, .info-label,
.btn, .save-cta, .delete-link,
.segmented .seg {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* === Ensure search uses Categories light scheme === */
.search-wrap input{
  background:#fff !important;
  color:var(--ink) !important;
  border:1px solid var(--bd) !important;
}

.search-wrap input::placeholder{
  color:var(--ink-sub) !important;
}

.search-ic{ color: var(--ink-sub) !important; }

.search-wrap input:focus{
  border-color:#cbd5e1 !important;
  box-shadow:0 0 0 4px rgba(59,130,246,.12) !important;
}

/* Search — smaller, no border look */
.search-wrap{margin:8px 2px 6px;position:relative}
.search-wrap input{
  width:100%;border:none;background:var(--panel);
  color:var(--ink);border-radius:10px;
  padding:8px 10px 8px 32px;font-size: 16px;outline:none;
}
.search-wrap input:focus{box-shadow:0 0 0 3px var(--ring)}
.search-ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-sub);font-size: 19px}
/* === Typography normalization: single font family (sizes can vary) === */
body, .toolbar h1, .subbar .title-lg, .subbar .subtitle,
#search, .li .name, .li .type, .chip,
.flabel, .fitem input, .fitem textarea,
.section-title, .info-label,
.btn, .save-cta, .delete-link,
.segmented .seg {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
/* === Ensure search uses Categories light scheme === */
.search-wrap input{
  background:#fff !important;
  color:var(--ink) !important;
  border:1px solid var(--bd) !important;
}
.search-wrap input::placeholder{
  color:var(--ink-sub) !important;
}
.search-ic{ color: var(--ink-sub) !important; }
.search-wrap input:focus{
  border-color:#cbd5e1 !important;
  box-shadow:0 0 0 4px rgba(59,130,246,.12) !important;
}

/* Search */
.search-wrap{margin:8px 2px 6px;position:relative}
.search-wrap input{
  width:100%;background:#fff;color:var(--ink);border:1px solid var(--bd);
  border-radius:10px;padding:8px 10px 8px 32px;font-size: 16px;outline:none
}
.search-wrap input:focus{border-color:#cbd5e1;box-shadow:0 0 0 4px rgba(59,130,246,.12)}
.search-ic{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-sub);font-size:16px}

/* === Search: Show archived icon (same line) === */
/* Keep the toggle inside the same search field row as an icon on the right */
.search-wrap input{
  padding-right:44px; /* room for the archived toggle icon */
}
.arch-toggle{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  cursor:pointer;

  /* glass */
  background:rgba(255,255,255,.38);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 6px 18px rgba(15,23,42,.10);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  color:var(--ink-sub);
  opacity:.55;
  transition:opacity .15s ease, transform .15s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.arch-toggle:hover{
  opacity:.75;
  transform:translateY(-50%) scale(1.02);
  background:rgba(255,255,255,.52);
  border-color:rgba(15,23,42,.14);
  box-shadow:0 10px 26px rgba(15,23,42,.14);
}
.arch-toggle:active{
  transform:translateY(-50%) scale(.98);
}
.arch-toggle:focus-visible{
  outline:2px solid rgba(59,130,246,.55);
  outline-offset:2px;
}
.arch-toggle.on{
  opacity:1;
  color:var(--ink);
  background:rgba(255,255,255,.62);
  border-color:rgba(15,23,42,.16);
  box-shadow:0 10px 26px rgba(15,23,42,.16);
}

/* App bar (same as Contacts/Categories light scheme) */
.appbar{
  background:#f3f4f6;
  border-bottom:1px solid var(--bd);
  position:sticky;top:0;z-index:10
}
.status{display:none}
.toolbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:6px 12px}
.toolbar h1{margin:0;justify-self:center;font-size: 16px;font-weight:600;color:var(--ink-sub)}
.icon{border:0;background:#fff;color:var(--ink);cursor:pointer;border-radius:10px;padding:4px;border:1px solid var(--bd)}
.icon.round{width:36px;height:36px;display:grid;place-items:center}
.icon.primary{background:#3b82f6;color:#fff;border-color:#3b82f6}

/* Edit header */
.subbar{position:sticky;top:0;z-index:9;display:grid;grid-template-columns:auto 1fr auto;gap:6px;align-items:center;padding:6px;background:#fff;border-bottom:1px solid var(--bd)}
.subbar .title-lg{font-weight:600;font-size: 16px}
.subbar .subtitle{font-size: 14px;color:var(--ink-sub)}


/* === Edit Sub-Header Actions — match Contacts (Save | Archive | Delete) === */
.subbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
}
.subbar .subtitles { min-width: 0; }
.subbar .header-actions { justify-self: end; }
/* === Sub-header back arrow — identical to Contacts === */
.subbar .icon {
  background: #fff;
  border: 0px solid var(--bd);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}

.subbar .icon .material-icons {
  font-size: 20px;
  line-height: 1;
}

.subbar .icon:hover {
  background: #f3f4f6;
}

/* keep consistent spacing from title */
.subbar .icon#backBtn {
  margin-right: 4px;
}

.header-actions{
  display:inline-flex; align-items:center; gap:0;
  border:1px solid var(--bd); border-radius:6px; background:#f3f4f6; padding:1px;
}
.header-actions .hbtn{
  appearance:none; border:0; background:#f3f4f6; color:var(--ink);
  font:600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  height:22px; padding:2px 7px; border-radius:6px; cursor:pointer; position:relative;
}
.header-actions .hbtn:hover{ background:#e9ecef; }
.header-actions .hbtn + .hbtn::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:.9em; background:var(--bd);
}
/* Accent colors */
.header-actions .save-btn   { color:#040404; }
.header-actions .archive-btn{ color:#4b5563; }
.header-actions .delete-btn { color:#dc2626; }

/* Hide footer save row on edit screen */
#editScreen .save-cta-wrap, #editScreen .actions-row { display:none !important; }

/* === Accounts: Org Grouping (Org header + collapsible sections) === */
.org-group{
  border-radius:10px;
  border:1px solid var(--bd);
  background:#f9fafb;
  margin:4px 0 8px;
  overflow:hidden;
}

.org-header{
  width:100%;
  padding:12px 12px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  border:none;
  background:#f9fafb;
  cursor:pointer;
}

.org-header:active{
  background:#e5e7eb;
}

.org-avatar{
  width:32px;
  height:32px;
  border-radius:6px;
}

.org-header-text{
  min-width:0;
  text-align:left;
  justify-self:start;
}

.org-name{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size:16px;
  font-weight:550;
  color:var(--ink);
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

}

.org-meta{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:13px;
  color:var(--ink-sub);
  justify-content:flex-end;
}

.org-dot{
  font-size:10px;
  opacity:.6;
}

.org-totals{
  font-variant-numeric:tabular-nums;
}

.org-chevron{
  font-size:18px;
  color:var(--ink-sub);
  transition:transform .15s ease-out, opacity .15s ease-out;
}

.org-group.collapsed .org-chevron{
  transform:rotate(-90deg);
  opacity:.7;
}

.org-rows{
  border-top:1px solid var(--hairline);
  background:#fff;
}

.org-group.collapsed .org-rows{
  display:none;
}

/* Adjust list spacing when grouped */
#accountList.list{
  margin-top:2px;
}

.org-rows .li{
  border-bottom:1px solid var(--hairline);
}

.org-rows .li:last-child{
  border-bottom:none;
}

/* Indent accounts under org groups */
.org-group .li { margin-left: 20px; }

/* Unified pill styling for org & type pickers */
.chip.picker .chip {
  border: 1px solid var(--bd) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
  background: #fff !important;
  margin: 3px !important;
}

.chip.picker .chip.on {
  background: #2563eb !important;
  color: #fff !important;
  border-color: #1e40af !important;
}
/* === Organization row (read-only, styled like editable chips) === */
.chip.editable.readonly{
  cursor: default;
}
.chip.editable.readonly .chip-field{
  color: var(--ink);
  opacity: .8;
  pointer-events: none;
}
.chip.editable.readonly .chip-field:empty:before{
  content: attr(data-placeholder);
  color: var(--ink-sub);
  opacity: .25;
}

/* Account totals (per-account balance line) — match CR/DR sign & colors across app */
.li .bal{
  font-size:13px;
  color:var(--ink-sub);
  font-variant-numeric:tabular-nums;
  margin-top:2px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
}
.li .bal .bal-dot{
  opacity:.6;
}
/* DR = positive = red, CR = negative = blue */

/* CR/DR coloring and dot separator for totals across Accounts */
.dr{ color: var(--danger); }   /* DR = positive */
.cr{ color: var(--blue); }     /* CR = negative */
.bal-dot{ opacity: .6; font-size: 10px; }

/* Org totals styled like account totals (same typography & spacing) */
.org-totals{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-sub);
  font-variant-numeric: tabular-nums;
}


/* === iOS PWA Safe Area Fix ============================================ */
:root{
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

/* Top bars: keep out from under iPhone status bar in standalone PWA */
.appbar{
  padding-top: var(--safe-top);
}
.subbar{
  padding-top: calc(6px + var(--safe-top));
}

/* Bottom fixed segmented bar: avoid home-indicator overlap */
.segmented{
  padding-bottom: var(--safe-bottom);
}

/* ---- Shared UI primitives (used by invoices/payroll/dashboards) ---- */

/* Glass buttons (invoices-style) */
.glass-btn{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 8px 24px rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.icon.glass-btn{ padding: 8px; border-radius: 12px; }
.icon.round.glass-btn{ border-radius: 999px; }

/* Tabs (invoices-style, reused by payroll) */
.inv-top{ padding: 10px 12px 0; }
.inv-tabs{
  display:flex; gap:8px; align-items:center;
  overflow:auto; padding: 4px 0 10px;
}
.inv-tab{
  display:flex; gap:8px; align-items:center;
  padding: 10px 12px;
  border:1px solid var(--bd);
  background: #fff;
  border-radius: 14px;
  color: var(--ink);
  white-space: nowrap;
}
.inv-tab.active{
  border-color: rgba(59,130,246,.35);
  box-shadow: 0 8px 20px rgba(59,130,246,.10);
}

/* Search + action row */
.inv-actions{
  display:flex; gap:10px; align-items:center;
  padding: 10px 12px 0;
}
.inv-search{
  flex:1;
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--bd);
  border-radius: 14px; padding: 10px 12px;
}
.inv-search input{
  width:100%; border:0; outline:0;
  background:transparent; color:var(--ink);
  font: inherit;
}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border:1px solid var(--bd);
  background:#fff;
  color:var(--ink);
}
.pill.primary{
  border-color: rgba(59,130,246,.35);
  box-shadow: 0 10px 24px rgba(59,130,246,.10);
}

/* Shared card style (dashboards + invoices sections) */
.dash-card{
  background:#fff;
  border:1px solid var(--bd);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(15,23,42,.06);
}
.dash-card-header{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px;
  padding: 14px 14px 10px;
}
.dash-card-title{ font-weight: 800; letter-spacing: -.01em; }
.dash-card-subtitle{ color: var(--muted); font-size: 13px; margin-top: 2px; }

.main-card-actions{ display:flex; gap:8px; align-items:center; justify-content:flex-end; }
/* ===========================
   Unified App Header Layout
   (prevents ORG pill wrapping)
   =========================== */
.appbar .toolbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  padding:6px 12px;
  gap:10px;
}

.appbar .toolbar .left-section,
.appbar .toolbar .right-section{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
  min-width:0;
}

.appbar .toolbar .center-section{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.appbar .toolbar .center-section h1{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===========================
   Unified ORG/Account pill
   - fixed square
   - slight radius
   - never wraps to line 2
   =========================== */
#headerOrgPill,
.hdr-org-dot,
.hdr-acc-dot{
  box-sizing:border-box;
  width:34px;
  height:34px;
  padding:0;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  flex:0 0 auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  border-radius:12px; /* slight radius */
  line-height:1;
  font-size:16px;
  font-weight:600;
  letter-spacing:.03em;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(15,23,42,.16);
  box-shadow: 0 8px 24px rgba(15,23,42,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#headerOrgPill:focus-visible,
.hdr-org-dot:focus-visible,
.hdr-acc-dot:focus-visible{
  outline: 3px solid rgba(59,130,246,.35);
  outline-offset: 2px;
}



/* ---------------------------
   Shared page grid (Dashboards / Invoices / Payroll)
   --------------------------- */
.dashboard-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items:start;
}

/* Full-width cards inside a grid */
.dash-card.dash-wide{
  grid-column: 1 / -1;
  width: 100%;
}

/* Single-column on narrow screens */
@media (max-width: 900px){
  .dashboard-grid{
    grid-template-columns: 1fr;
  }
}

/* ------------------------------
   Custom Month Picker (grid)
   ------------------------------ */

/* Clickable month field wrapper (replaces native <input type="month">) */
.mp-input{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(0,0,0,.25);
  border-radius:12px;
  background:rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  cursor:pointer;
}
.mp-input input{
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  font-size:18px;
  padding:0;
  cursor:pointer;
}
.mp-input .material-icons{
  opacity:.75;
}
.mp-input:focus-within{
  border-color:rgba(0,0,0,.45);
}

.mp-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:6px 0 12px 0;
}
.mp-year{
  font-weight:900;
  font-size:18px;
  letter-spacing:.2px;
}
.mp-year-btn{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
}

.mp-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  padding:4px 0 8px 0;
}
.mp-m{
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  padding:12px 8px;
  text-align:center;
  font-weight:800;
  background:rgba(255,255,255,.75);
  cursor:pointer;
  user-select:none;
}
.mp-m:hover{
  border-color:rgba(0,0,0,.22);
}
.mp-m.is-selected{
  background:rgba(0,0,0,.86);
  color:#fff;
  border-color:rgba(0,0,0,.86);
}
.mp-m:focus{
  outline:2px solid rgba(0,0,0,.35);
  outline-offset:2px;
}

/* =========================================================
   Unified close "X" icon button (use for any close icon)
   Matches the Sort modal close button style
   ========================================================= */
button.icon.x-close-btn,
.icon.x-close-btn{
  width: 38px;
  height: 38px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 999px;

  background: rgba(255,255,255,.05);
  border: 1px solid rgba(148,163,184,.70);
  box-shadow: none;

  backdrop-filter: blur(10px) saturate(1.25);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);

  display: grid;
  place-items: center;
}

button.icon.x-close-btn .material-icons,
.icon.x-close-btn .material-icons{
  font-size: 18px;
  line-height: 1;
  transform: translateY(0.5px);
  color: rgba(15,23,42,.80);
}

button.icon.x-close-btn:hover,
.icon.x-close-btn:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(148,163,184,.85);
}

button.icon.x-close-btn:active,
.icon.x-close-btn:active{
  transform: scale(.96);
}

/* ======================================================================
   iOS PWA blur downgrade (big perf win)
   - iOS Safari/PWA can get very slow with lots of backdrop-filter layers.
   - When body has .ios (already set by JS), we disable blur.
   - IMPORTANT: we do NOT force a white background on the ORG/account pill,
     because its color is set dynamically (inline/JS). Keeping it free avoids
     the “white pill” issue on iOS.
   ====================================================================== */
body.ios button.icon.x-close-btn,
body.ios .icon.x-close-btn,
body.ios #headerOrgPill,
body.ios .hdr-org-dot,
body.ios .hdr-acc-dot,
body.ios .arch-toggle,
body.ios .glass-btn,
body.ios .pill-btn.glass-btn{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Keep a solid-ish background only where it's meant to be neutral glass.
   (ORG/account pill excluded on purpose.) */
body.ios button.icon.x-close-btn,
body.ios .icon.x-close-btn,
body.ios .arch-toggle,
body.ios .glass-btn,
body.ios .pill-btn.glass-btn{
  background: rgba(255,255,255,.92) !important;
}

/* Some elements use darker glass; keep contrast acceptable */
body.ios .icon.x-close-btn,
body.ios button.icon.x-close-btn{
  border-color: rgba(148,163,184,.65) !important;
}

/* ======================================================================
   Shared skeleton shimmer (transactions + invoices)
   ====================================================================== */
@keyframes cmShimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(100%); }
}
.cm-skel{
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(15,23,42,.06);
}
.cm-skel::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.45) 50%,
    rgba(255,255,255,0) 100%);
  transform: translateX(-100%);
  animation: cmShimmer 1.05s ease-in-out infinite;
}

/* Optional: fade-in when real data replaces skeleton */
.cm-fade-in{
  opacity: 0;
  transform: translateY(2px);
}
.cm-fade-in.cm-in{
  opacity: 1;
  transform: none;
  transition: opacity .18s ease, transform .18s ease;
}

/* Transactions skeleton rows (tbody#rows injects <tr>) */
tr.txn-skel-row td{
  padding: 14px 12px;
  border-bottom: 1px solid var(--bd);
}
.txn-skel-stack{
  display: grid;
  gap: 10px;
}
.txn-skel-line1{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.txn-skel-pill{
  height: 14px;
  width: 44%;
}
.txn-skel-amt{
  height: 14px;
  width: 28%;
}
.txn-skel-line2{
  display:flex;
  align-items:center;
  gap: 10px;
}
.txn-skel-date{ height: 12px; width: 22%; }
.txn-skel-memo{ height: 12px; width: 62%; }

/* Invoices skeleton rows (invList injects <div>) */
.inv-skel-row{
  padding: 14px 12px;
  border-bottom: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 24px rgba(15,23,42,.05);
  margin: 10px 0;
}
.inv-skel-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.inv-skel-left{ height: 14px; width: 62%; }
.inv-skel-right{ height: 14px; width: 26%; }
.inv-skel-sub{ margin-top: 10px; height: 12px; width: 48%; }