/* 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}
body.app{background:#fff;color:var(--ink);font:500 16px -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Roboto, Arial}
.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:15px;color:var(--ink)}
.li .role{font-size:14px;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;
  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: 15px;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:15px;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:15px;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:14px;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:15px}
.subbar .subtitle{font-size:13px;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);
}