@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;600;700;900&display=swap');
/* Contacts UI – compact + toned down */
:root{
  /* Categories palette */
  --bd:#e5e7eb;
  --sep:#f2f4f7;
  --ink:#0f172a;
  --ink-sub:#334155;
  --hairline: rgba(15,23,42,.08);
  --bg:#0b0c10;
  --panel:#13161d;
  --panel2:#171b23;
  --muted:#9aa1ad;
  --text:#e9edf5;
  --blue:#3a78e0;
  --green:#27b36a;
  --danger:#e25050;
  --outline:#202636;
  --ring:rgba(58,120,224,.25);
  --radius:12px;
  --shadow:0 6px 18px rgba(0,0,0,.35);

  /* iOS PWA safe area */
  --safe-top-raw: env(safe-area-inset-top);
  --safe-top: clamp(12px, calc(var(--safe-top-raw) - 10px), 40px);
  --safe-bottom: env(safe-area-inset-bottom);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.app.dark{
  background:var(--bg);
  color:var(--ink);
  font:500 16px -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.35;
}

/* Top bar smaller */







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

/* 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}

/* List tighter */
.list{list-style:none;margin:2px 0 64px;padding:0}
.li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 6px;border-bottom:1px solid var(--outline);position:relative}
.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f8fafc;color:var(--muted);position:relative;font-weight:700;font-size:13px;line-height:1;overflow:hidden}
.li .name{font-weight:600;font-size: 15px}
.li .type{font-size: 14px;color:var(--muted)}
.chev{color:var(--muted)}
.chev .material-icons{font-size: 19px}
/* Material Symbols (Rounded) helper */
.material-symbols-rounded{
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  display: inline-block;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}


/* Segmented control – smaller, no borders */
.segmented{
  position:fixed;left:0;right:0;bottom:0;
  display:flex;gap:0;justify-content:stretch;z-index:15;
  background:#fff;border-top:1px solid var(--bd);

  padding-bottom: var(--safe-bottom);
}
.segmented .seg{
  flex:1 1 0;
  background:#fff;color:#0f172a;
  border:none;border-right:1px solid var(--bd);
  border-radius:0;
  padding:10px 8px;font-weight:700;font-size: 15px;
}
.segmented .seg.on{
  background:#f3f4f6;color:#0f172a;
  box-shadow:none;border-right:1px solid var(--bd);
}

/* Edit screen header smaller */




/* Form compact */
.form{padding:10px 10px 64px}
.avatar-row{display:flex;gap:10px;align-items:center;margin:4px 2px 8px}
.avatar.big{
  width:56px;height:56px;border-radius:50%; /* ensure perfect circle */
  display:grid;place-items:center;background:#f8fafc;color:var(--muted)
}
.avatar.big .material-icons{font-size: 29px}

.type-chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  border:none;background:#f8fafc;color:var(--ink-sub);
  padding:6px 10px;border-radius:8px;cursor:pointer;font-size: 14px
}
.chip.on{background:var(--blue);color:#fff}

.fitem{display:block;margin:8px 2px}
.fitem.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.flabel{display:block;color:var(--ink-sub);font-size: 13px;margin-bottom:4px}
.fitem input,.fitem textarea{
  width:100%;border:none;background:var(--panel);color:var(--ink);
  border-radius:10px;padding:8px 10px;font-size: 15px;outline:none
}
.fitem input:focus,.fitem textarea:focus{box-shadow:0 0 0 3px var(--ring)}

/* Buttons smaller + toned colors */
.form-actions{display:flex;gap:8px;justify-content:flex-start;margin-top:10px}
.btn{
  border:none;background:#f8fafc;color:var(--ink);
  padding:8px 10px;border-radius:10px;font-weight:700;font-size: 15px;cursor:pointer
}
.btn.primary{background:var(--green);color:#04170d}
.btn.danger{background:var(--danger);color:#240000}
.btn.ghost{opacity:.9}

.spacer-bottom{height:90px}

/* Scroll behavior for edit screen */
#formScroll.scrolled .title-lg{font-size: 17px;opacity:.9}
#formScroll.scrolled .subtitle{opacity:.85}

/* --- Contact Information list (matches screenshot vibe) --- */
.section-title{
  font-weight:800;
  font-size: 14px;
  letter-spacing:.4px;
  color:#e9edf5;
  background:#0a0b0e;
  padding:10px 8px;
  text-transform:uppercase;
}
.contact-info{margin:10px -10px 0}
.info-list{background:var(--panel2)}
.info-row{
  width:100%;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;
  padding:12px 12px;background:transparent;border:none;color:#cfd3da;text-align:left;cursor:pointer
}
.info-ic{font-size: 21px;color:#9aa1ad}
.info-label{font-size: 16px}
.divider{height:1px;background:var(--outline);margin:0 12px}

/* Save CTA pill and minimal delete link */
.save-cta-wrap{position:static;display:block;padding:12px 0 24px}
.save-cta{
  width:100%;
  background:#2a2f3b;color:#e9edf5;border:none;border-radius:10px;
  padding:12px 14px;font-weight:800;font-size: 16px;letter-spacing:.2px;cursor:pointer
}
.save-cta:active{opacity:.96}
.delete-link{
  background:none;border:none;color:#9aa1ad;font-size: 14px;text-decoration:underline;cursor:pointer;margin-top:8px
}


/* === 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;
}


/* === No square containers: list rows become flat with separators === */
.list { margin: 0 0 64px; padding: 0; }
.li{
  border:none !important;
  background:transparent !important;
  padding:14px 8px !important;
  border-bottom:1px solid var(--outline) !important;
}
.list .li:first-child{ border-top:1px solid var(--bd); }

/* Edit screen: group list with only top/bottom lines, no row boxes */
.contact-info{ margin: 0 -10px; }
.info-list{
  background:transparent !important;
  border-top:1px solid var(--bd);
  border-bottom:1px solid var(--bd);
}
.info-row{
  background:transparent !important;
  padding:14px 16px !important;
}
.divider{ background:var(--outline); height:1px; margin:0 16px; }

/* Editable placeholder already serves as the 'title'; keep icons only */
.info-label .chip-label{ display:none !important; } /* safeguard if any labels remain */

.segmented .seg:last-child{ border-right:none; }


/* === Softer separators (hairline) === */
.list .li{ border-bottom:1px solid var(--hairline) !important; }
.list .li:first-child{ border-top:1px solid var(--hairline) !important; }
.info-list{ border-top:1px solid var(--hairline) !important; border-bottom:1px solid var(--hairline) !important; }
.divider{ background:var(--hairline) !important; }
.segmented{ border-top:1px solid var(--hairline) !important; 
  padding-bottom: var(--safe-bottom);
}
.segmented .seg{ border-right:1px solid var(--hairline) !important; }


/* === Force white backgrounds on main surfaces === */
html, body, body.app.dark, .screen, #listScreen {
  background: #ffffff !important;
}



/* === Categories color scheme alignment === */
html, body, body.app.dark, .screen, #listScreen { background:#fff !important; color:var(--ink); }
.toolbar h1, .li .name, 
.li .type, .subbar .subtitle, .info-ic, .delete-link { color:var(--ink-sub); }

.list .li:first-child{ border-top:1px solid var(--bd) !important; }
.list .li{ border-bottom:1px solid var(--bd) !important; }
.info-list{ border-top:1px solid var(--bd) !important; border-bottom:1px solid var(--bd) !important; }
.divider{ background:var(--bd) !important; }
.segmented{ border-top:1px solid var(--bd) !important; 
  padding-bottom: var(--safe-bottom);
}
.segmented .seg{ border-right:1px solid var(--bd) !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;
}


/* === Force light backgrounds on Detail/Edit screen === */
#editScreen, #formScroll, .contact-info, .info-list, .info-row, .subbar, .save-cta-wrap {
  background:#fff !important;
}
/* Editable spans transparent so they sit on white */
.editable, .editable.multiline { background: transparent !important; color: var(--ink); }
/* Icons and muted copy use ink-sub to match Categories */
.info-ic { color: var(--ink-sub) !important; }

/* Dividers use bd */
.divider { background: var(--bd) !important; }
/* Ensure group top/bottom borders use bd and not darker tones */
.info-list { border-top:1px solid var(--bd) !important; border-bottom:1px solid var(--bd) !important; }
/* App bar stays light */

/* Save button section: light fade overlay */
.save-cta-wrap { background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1) 40%) !important; }
/* === Softer weights for contact name & type === */
/* List-style cards (if used anywhere) */
.li .name{ font-weight:500 !important; }
.li .type{ font-weight:400 !important; color: var(--ink-sub) !important; }

/* Transactions-style grid */
#grid td.contact-cell{ font-weight:500 !important; color: var(--ink) !important; }
#grid td.role-cell{ font-weight:400 !important; color: var(--ink-sub) !important; }


/* === iOS-style entry rows for editable chips === */
.chips-grid { background:#fff; }
.chip.editable{
  display:grid;
  grid-template-columns:24px 1fr;
  align-items:center;
  gap:8px;
  padding:8px 8px;
  border:none;
  border-bottom:1px solid var(--bd);
  background:#fff !important;
  border-radius:0 !important;
  cursor:text;
}
.chip.editable::before{
  content: attr(data-ic);
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 19px;
  line-height:1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  color: var(--ink-sub);
  opacity:.9;
}
.chip.editable .chip-label{ 
  display:none !important; }
.chip.editable .chip-field{ min-height:18px;
  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:42px; }



/* === White background Save button === */
.save-cta{
  background:#fff !important;
  color:var(--ink) !important;
  border:1px solid var(--bd) !important;
}
.save-cta:active{
  opacity:.96;
}



/* === Grey background Save button === */
.save-cta{
  background:#f3f4f6 !important;
  color:var(--ink) !important;
  border:1px solid var(--bd) !important;
}
.save-cta:active{
  opacity:.96;
}

/* === Flat row-style Save button (only top/bottom borders, light-blue text) === */
.save-cta {
  background: #fff !important;
  color: #3b82f6 !important; /* light blue */
  border-left: none !important;
  border-right: none !important;
  border-top: 1px solid #d1d5db !important;
  border-bottom: 1px solid #d1d5db !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  font-size: 17px !important;
  padding: 14px !important;
  box-shadow: none !important;
  text-align: left !important;
}


/* === Row-style action buttons: Save / Archive / Delete === */
.row-btn {
  display:block;
  width:100%;
  background:#fff !important;
  border:none;
  border-top:1px solid #d1d5db;
  border-bottom:1px solid #d1d5db;
  border-radius:0 !important;
  padding:14px;
  font-size: 17px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
}
.save-btn   { color:#3b82f6 !important; }   /* light blue */
.archive-btn{ color:#6b7280 !important; }   /* neutral grey */
.delete-btn { color:#ef4444 !important; }   /* red */

/* === Horizontal action bar: Delete | Archive | Save (softer colors) === */
.actions-row {
  display:flex;
  gap:8px;
  margin-top:12px;
}

.actions-row .row-btn {
  flex:1;
  border-radius:8px !important;
  border:1px solid #d1d5db !important;
  text-align:center !important;
  padding:10px 0 !important;
  font-size: 17px;
  font-weight:500;
  background:#f9fafb !important;
}

/* === Compact horizontal action row in grey container === */
.actions-row {
  display:flex;
  gap:0;
  margin-top:12px;
  background:#f3f4f6;
  border-top:1px solid #d1d5db;
  border-bottom:1px solid #d1d5db;
  padding:4px;
  border-radius:6px;
}

.actions-row .row-btn {
  flex:1;
  border:none !important;
  background:transparent !important;
  text-align:center !important;
  padding:6px 0 !important;
  font-size: 16px;
  font-weight:500;
  cursor:pointer;
}

/* Softer text colors */
.actions-row .save-btn   { color:#2563eb !important; }
.actions-row .archive-btn{ color:#4b5563 !important; }
.actions-row .delete-btn { color:#dc2626 !important; }



/* === Add subtle separators between row buttons === */
.actions-row .row-btn:not(:last-child) {
  border-right:1px solid #d1d5db !important;
}

/* === Straight container for action row === */
.actions-row {
  border-radius:0 !important;
}

.actions-row .row-btn {
  border-radius:0 !important;
}

.actions-row .row-btn:not(:last-child) {
  border-right:1px solid #d1d5db !important;
}


/* === Compact action row tweaks === */
.actions-row {
  padding:2px 0 !important;
}

.actions-row .row-btn {
  font-size: 14px !important; /* smaller font */
  padding:4px 0 !important;  /* tighter vertical padding */
}

/* === Extra compact action row === */
.actions-row {
  padding:0 !important;
  margin-top:8px !important;
}

.actions-row .row-btn {
  font-size: 13px !important;
  padding:3px 0 !important;
}

/* === Slightly larger container and fonts for action row === */
.actions-row {
  padding:4px 0 !important;
  margin-top:10px !important;
}

.actions-row .row-btn {
  font-size: 15px !important;
  padding:5px 0 !important;
}


#addTypeBtn:hover {
  border-color: #2563eb;
  color: #2563eb;
}


/* Dynamic segmented control — slim, multi-line, smaller font */
.segmented {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;          /* scroll if too many */
  -webkit-overflow-scrolling: touch;
  background: #f3f4f6;
  border: none;              /* no border box */
  border-radius: 0;          /* no rounded corners */
  margin: 0;                 /* flush with screen edges */
  padding: 0;                /* no inner padding */
  gap: 0;
  scrollbar-width: none;

  padding-bottom: var(--safe-bottom);
}
.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;          /* square edges */
}

.segmented .seg:last-child {
  border-right: none;
}

.segmented .seg.on {
  background: #1d4ed8;
  color: #fff;
}
/* Tiny titles for both "Transactions" and "Entries" */
.page-title-sm { font-size: .98rem; font-weight: 600; letter-spacing: .02em; }

/* Contact transactions panel */
#contactTxns { margin-top: .25rem; }
#contactTxns 
#contactTxns .txn-head .title { font-size: .78rem; font-weight: 600; color:#444; }

/* --- Two-line transactions list (replaces table rules) --- */
#contactTxns .txn-list { list-style:none; margin:0; padding:0; }
#contactTxns .two-line { padding:6px 8px; border-bottom:1px solid #f2f2f2; }

/* Line 1: Category (left, bold) + amounts (right) */
#contactTxns .two-line .line1{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:.72rem; line-height:1.2; white-space:nowrap;
}
#contactTxns .two-line .line1 .category{
  font-weight:600; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1;
}
#contactTxns .two-line .line1 .amounts{ display:flex; gap:10px; }
#contactTxns .two-line .line1 .amount{
  font-variant-numeric: tabular-nums; white-space:nowrap; text-align:right; display:inline-block;
}

/* Line 1 layout when we have category + account grouped together */
#contactTxns .two-line .line1 .left-block{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width:0;
  flex:1;
}
#contactTxns .two-line .line1 .left-block .category{
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
#contactTxns .two-line .line1 .left-block .account{
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Multi‑edit checkbox positioning */
#contactTxns .two-line.editing{
  position:relative;
  padding-left:30px; /* room for checkbox */
}
#contactTxns .txn-chk-wrap{
  position:absolute;
  left:6px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:center;
}
#contactTxns .txn-chk{
  width:16px;
  height:16px;
  accent-color:#2563eb;
}

/* DR/CR coloring (force override global .amount rules) */
#contactTxns .two-line .line1 .amount:not(.neg){ color:#b42318 !important; }
#contactTxns .two-line .line1 .amount.neg{ color:#3f5ba3 !important; }

/* Line 2: Date (left, DMY) + memo (right, truncated) */
#contactTxns .two-line .line2{
  display:flex; align-items:center; gap:8px;
  font-size:.66rem; line-height:1.2; color:#666;
}
#contactTxns .two-line .line2 .date{ opacity:.95; }
#contactTxns .two-line .line2 .memo{
  margin-left:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  min-width:0; flex:1; text-align:right; color:#0f172a;
}

/* Totals footer (small) */
.txn-foot { display:flex; gap:.6rem; justify-content:flex-end; margin-top:.2rem; }
.txn-foot .total { font-size:.68rem; color:#444; }


/* === Header actions (Delete | Archive | Save) next to name === */

.subbar .subtitles { min-width: 0; }

.hbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  min-width: 32px;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid var(--bd);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.hbtn .material-icons { font-size: 21px; line-height: 1; }
.hbtn-primary { border-color: #2563eb; color: #2563eb; background: #f5f8ff; }
.hbtn-danger  { border-color: #ef4444; color: #b91c1c; background: #fff5f5; }

/* Hide any leftover save-cta-wrap spacing if present */
.save-cta-wrap { display: none !important; }

/* Ensure variant classes don't recolor text */
.header-actions .hbtn-primary,

/* neutralize variant colors in header group */
.header-actions .hbtn-primary,


/* ==== Consolidated minimal UI tweaks ==== */

/* Header actions (Delete | Archive | Save) – compact text buttons */
.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);
}

/* Type chips – exactly 4 per row, compact squares */
#typePicker{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:5px; align-items:stretch;
}
#typePicker .chip{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:24px; padding:3px 6px;
  font-size: 13px !important; border-radius:6px; 
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:#f3f4f6; border:1px solid #d1d5db;
}
#typePicker .chip.on{ background:#2563eb; color:#fff; border-color:#2563eb; }


/* Label spacing above type chips */
.chip.picker > .chip-label{ display:block; margin-bottom:12px; line-height:1.1; }

/* Transactions header underline */
.txn-head{ border-bottom:1px solid var(--bd); padding-bottom:6px; margin-bottom:10px; }

/* Transactions list – alternate rows, no separators */
.txn-list > li.two-line{ border-bottom:0; padding:8px 10px; }
.txn-list > li.two-line:nth-child(odd){  background:#fff; }
.txn-list > li.two-line:nth-child(even){ background:#f7f8fa; }

/* ==== End minimal UI tweaks ==== */


/* === Stage 1: Default dropdown chips (match editable chip look) === */
.chip.select{
  display:grid;
  grid-template-columns:24px 1fr;
  align-items:center;
  gap:10px;
  padding:12px 8px;
  border-bottom:1px solid var(--bd);
  background:#fff !important;
  border-radius:0 !important;
}
.chip.select::before{
  content: attr(data-ic);
  font-family: 'Material Icons';
  font-size: 19px;
  color: var(--ink-sub);
  opacity:.9;
}
.chip.select .chip-label{ display:none !important; }
.chip.select select{
  width:100%;
  font-size: 15px;
  padding:6px 8px;
  border:1px solid var(--bd);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  outline:none;
}
.chip.select select:focus{
  border-color:#cbd5e1;
  box-shadow:0 0 0 4px rgba(59,130,246,.12);
}

/* Style for placeholder options */
.chip.select select option[value=""] {
  color: #9ca3af; /* gray-400 */
}


/* === Selected value styling: turn text black when not placeholder === */
.chips-grid .chip.select > select:not(:has(option[value=""]:checked)) {
  font-size: 15px !important;
  color: #000 !important;
}

/* JS fallback when :has() not supported */
.chips-grid .chip.select > select.has-value {
  font-size: 15px !important;
  color: #000 !important;
}


/* === Make select chips visually match editable chips === */
.chips-grid .chip.select{
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 8px;
  border: none;
  border-bottom: 1px solid var(--bd);
  background: #fff !important;
  border-radius: 0 !important;
}
.chips-grid .chip.select::before{
  content: attr(data-ic);
  font-family: 'Material Icons';
  font-size: 21px;
  color: var(--ink-sub);
  opacity: .9;
  line-height: 1;
}
/* Hide the external label; we use in-field placeholder like editable chips */
.chips-grid .chip.select > .chip-label{ display:none !important; }
/* Make the select itself look like plain text (no boxed input) */
.chips-grid .chip.select > select{ line-height:1.1;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--ink);
  outline: none;
  line-height: 1.2;
  /* Keep native arrow */
}

/* Placeholder (empty) state — match .chip.editable .chip-field:empty::before */
.chips-grid .chip.select > select.is-placeholder{
  color: var(--ink-sub) !important;
  opacity: .25 !important;
  font-weight: 400 !important;
}

/* Filled state — normal dark ink */
.chips-grid .chip.select > select.has-value{
  color: var(--ink) !important;
  opacity: 1 !important;
}


/* === Uniform look: .chip.select matches .chip.editable === */
.chips-grid .chip.select{
  display:grid;
  grid-template-columns:24px 1fr;
  align-items:center;
  gap:8px;
  padding:8px 8px;
  border:none;
  border-bottom:1px solid var(--bd);
  background:#fff !important;
  border-radius:0 !important;
  font-size: 14px; /* match .chip base */
}
.chips-grid .chip.select::before{
  content: attr(data-ic);
  font-family:'Material Icons';
  font-size: 19px;
  color:var(--ink-sub);
  opacity:.9;
  line-height:1;
}
.chips-grid .chip.select > .chip-label{ display:none !important; }
.chips-grid .chip.select > select{ line-height:1.1;
  width:100%;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  font:inherit; /* 11px like .chip */
  color:var(--ink);
  outline:none;
  line-height:1.2;
  appearance:auto;
}
/* Placeholder state = same intensity as editable chip placeholder */
.chips-grid .chip.select > select.is-placeholder{
  color:var(--ink-sub) !important;
  opacity:.25 !important;
  font-weight:400 !important;
}
/* Filled state */
.chips-grid .chip.select > select.has-value{
  color:var(--ink) !important;
  opacity:1 !important;
}


/* === COMPACT ROW OVERRIDES (strong specificity) === */
.chips-grid .chip.editable,
.chips-grid .chip.select{
  padding: 6px 8px !important;   /* was 12px then 8px */
  gap: 6px !important;            /* was 10px then 8px */
}

.chips-grid .chip.editable::before,
.chips-grid .chip.select::before{
  font-size: 17px !important;     /* was 18px -> 16px -> now 14px */
}

.chips-grid .chip.editable .chip-field{
  min-height: 16px !important;    /* was 20 -> 18 -> now 16 */
  line-height: 1.15 !important;
}

.chips-grid .chip.editable.block .chip-field{
  min-height: 36px !important;    /* Notes block shorter (was 48 -> 42) */
}

.chips-grid .chip.select > select{
  line-height: 1.15 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Trim any vertical margins if present */
.chips-grid .chip{
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}
/* === Contacts list row: 4-column grid (avatar | text | meta | chevron) === */
.list .li {
  display: grid !important;
  grid-template-columns: 28px 1fr auto 18px !important; /* avatar / text / meta / chevron */
  align-items: center !important;
  gap: 10px !important;
}

.list .li > div:nth-child(2) { /* text block (name + type) */
  min-width: 0; /* allow ellipsis instead of pushing chevron */
}

.list .li .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list .li .meta {
  text-align: right;
  justify-self: end;
}

.list .li .chev {
  justify-self: end;
  align-self: center;
}
/* === Ensure meta (date + txn) matches the style of .type === */
.list .li .meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  font-size: 14px;          /* same as .type */
  color: var(--ink-sub);    /* same muted color */
  line-height: 1.2;
}
.list .li .meta .last-date,
.list .li .meta .txn-count {
  font-size: 14px;          /* enforce same as .type */
  color: var(--ink-sub);
  line-height: 1.2;
  font-weight: 400;         /* same weight as .type */
}
/* === Normalize Transactions header layout & button styling === */
#contactTxns .txn-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  flex-wrap:nowrap;                 /* keep on one line */
}

/* === Contact list month totals: style exactly like transaction span.amount === */
.list .li .meta .txn-totals{
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  display: inline-block;
}

/* Match transaction amount colors for contact list totals */
.list .li .meta .txn-totals .amount:not(.neg){ color:#b42318 !important; }
.list .li .meta .txn-totals .amount.neg{ color:#3f5ba3 !important; }


#contactTxns .txn-head .title{
  flex:1 1 auto;                    /* title takes available space */
  min-width:0;
}
#contactTxns .txn-head-actions{
  flex:0 0 auto;                    /* don't stretch */
  display:flex;
  align-items:center;
  gap:.4rem;
  white-space:nowrap;               /* prevent wrapping */
}

/* === Ensure transactions button groups IDENTICAL to top header-actions === */
#contactTxns .header-actions{
  display:inline-flex;
  align-items:center;
  gap:0;
  border:1px solid var(--bd);
  border-radius:6px;
  background:#f3f4f6;
  padding:1px;
}
#contactTxns .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;
  box-shadow:none;
}
#contactTxns .header-actions .hbtn:hover{ background:#e9ecef; }
#contactTxns .header-actions .hbtn + .hbtn::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  width:1px; height:.9em;
  background:var(--bd);
}

/* Align toolbar items to one line and compact select to match height */
#contactTxns .txn-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 0;
}
#contactTxns .txn-select{
  height:22px;
  font:600 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding:0 8px;
  border:1px solid var(--bd);
  border-radius:6px;
  color:var(--ink);
  background:#fff;
}


/* === Unify transaction buttons with header save group — 2025-09-27 === */
#contactTxns .txn-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

#contactTxns .txn-head-actions,
#contactTxns .txn-toolbar {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 2px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  background: #e5e7eb !important;
}

#contactTxns #txnEditBtn:hover,
#contactTxns .txn-toolbar .hbtn:hover {
  background: #d1d5db !important;
}

/* rounded ends */
#contactTxns .txn-head-actions #txnEditBtn {
  border-radius: 3px !important;
}
#contactTxns .txn-toolbar .hbtn:first-of-type {
  border-radius: 3px 0 0 3px !important;
}
#contactTxns .txn-toolbar .hbtn:last-of-type {
  border-radius: 0 3px 3px 0 !important;
}

/* compact select so the group stays tidy */
#contactTxns .txn-select {
  margin-right: 6px !important;
  height: 22px !important;
  padding: 0 6px !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  color: #1f2937 !important;
}


/* === Collapsible "More details" block (robust) === */
#extraFields.collapsed-fields{ display:none; }
#extraFields.collapsed-fields.open{ display:block; }


/* === Inline arrow toggle next to Name === */
.chip.editable{ position: relative; }
#detailsChevron.chip-arrow{
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#detailsChevron .material-icons{ font-size: 21px; line-height: 1; }
#detailsChevron[aria-expanded="true"] .material-icons{ transform: rotate(180deg); }
 /* avoid the arrow overlapping the editable text */
[data-ic="person"] .chip-field{ padding-right: 26px !important; }

/* Tighten the select control box so its visual height matches Name line */
.chip.select[data-ic="category"] select,
.chip.select[data-ic="sync_alt"] select,
.chip.select[data-ic="account_balance_wallet"] select {
  padding: 2px 6px !important;
  height: auto !important;
  min-height: 20px !important;
}


/* === Force Default Category, CR/DR, Account chips to match Name chip === */

.chip.select[data-ic="category"] select,
.chip.select[data-ic="sync_alt"] select,
.chip.select[data-ic="account_balance_wallet"] select {
  font: inherit !important;     /* same as container */
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 20px !important;      /* align with Name chip field */
  line-height: 1.2 !important;
  appearance: none !important;
}


#cDefaultCategory, #cDefaultCrDr, #cDefaultAccount {
  font-size: 18px !important;
  line-height: 20px !important;
  height: 20px !important;
  font-weight: 400 !important;
}
/* Labels */
.chips-grid .chip.select[data-ic="category"] > .chip-label,
.chips-grid .chip.select[data-ic="sync_alt"] > .chip-label,
.chips-grid .chip.select[data-ic="account_balance_wallet"] > .chip-label {
  font: var(--_name-font) !important;
}


/* Options menu font (when opened) */
#cDefaultCategory option, #cDefaultCrDr option, #cDefaultAccount option {
  font: 400 14px/20px system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* ===== CONTACT EDIT — MINIMAL, SCOPED OVERRIDES ===== */

/* Collapse block (Company → Notes) */
#editScreen #extraFields.collapsed-fields{display:none}
#editScreen #extraFields.collapsed-fields.open{display:block}

/* Chevron next to Name */
#editScreen .chips-grid [data-ic="person"]{position:relative}
#editScreen #detailsChevron{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;padding:2px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
#editScreen #detailsChevron .material-icons{font-size: 21px;line-height:1}
#editScreen #detailsChevron[aria-expanded="true"] .material-icons{transform:rotate(180deg)}
#editScreen .chips-grid [data-ic="person"] .chip-field{padding-right:26px!important}
.avatar {
  width: 30px;
  height: 30px;
  background: #f8fafc;
  border: 1px solid var(--bd);
  border-radius: 50%;
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;   /* smaller so it doesn’t touch border */
  line-height: 1;    /* tighten line height */
  display: grid;
  place-items: center;
}

/* === Types grid unified — keep Add Type inside grid === */
#typePicker{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 6px;
}
#typePicker .chip{ 
  display:flex; align-items:center; justify-content:center;
  width:100%; height:24px; padding:3px 6px;
  border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#typePicker #addTypeBtn{
  font-size: 14px;
  font-weight:500;
  color: var(--ink-sub);
  border-style: dashed;
  margin-top:0;
  justify-self:start;
}

/* Baseline for non-dark mode (mirror dark metrics) */
body.app {
  font:500 16px -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.35;
}


/* === Tiny chip menu === */
.chip-menu{
  position:absolute;
  z-index:9999;
  background:#fff;
  border:1px solid var(--bd);
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  padding:4px;
  min-width:120px;
}
.chip-menu .chip-menu-item{
  display:block;
  width:100%;
  border:0;
  background:transparent;
  padding:8px 10px;
  text-align:left;
  font-size: 14px;
  cursor:pointer;
}
.chip-menu .chip-menu-item:hover{ background:#f3f4f6; }
.chip-menu .chip-menu-item.delete{ color:#b91c1c; }


/* === Mini Month Picker (long-press Month) === */
.mini-month-picker{ position:absolute; z-index:9999; }
.mmp-card{
  width:260px; background:#fff; border:1px solid #d1d5db; border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.12); overflow:hidden;
  font:500 14px system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
.mmp-head{ display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px; background:#f8fafc; border-bottom:1px solid #e5e7eb; }
.mmp-head .mmp-close{ border:none; background:transparent; font-size:18px; line-height:1; cursor:pointer; padding:2px 6px; }
.mmp-body{ padding:10px; display:grid; gap:10px; }
.mmp-body input[type="month"]{ width:100%; padding:8px 10px; border:1px solid #d1d5db; border-radius:8px; outline:none; }
.mmp-body input[type="month"]:focus{ box-shadow:0 0 0 3px rgba(37,99,235,.15); border-color:#93c5fd; }
.mmp-actions{ display:flex; gap:8px; justify-content:flex-end; }
.mmp-actions button{ border:1px solid #d1d5db; background:#fff; border-radius:8px; padding:6px 10px; cursor:pointer; }
.mmp-actions .primary{ border-color:#2563eb; color:#2563eb; background:#f5f8ff; }

.txn-list .line1 {
  display: flex;
  align-items: baseline; /* critical: align all text along their baselines */
}

.txn-list .line1 .amounts {
  margin-left: auto;
}

/* Category */
.txn-list .line1 .category {
  font-weight: 600;
  color: #0b1a2b;
  white-space: nowrap;
}

/* Account with built-in divider */
.txn-list .line1 .account {
  position: relative;
  margin-left: 14px;     /* gap after category */
  padding-left: 10px;    /* space after divider */
  font-size: 0.92em;
  color: #333;
  opacity: 0.9;
  white-space: nowrap;
  line-height: 1.1em;    /* ensures divider centers visually */
}

/* Divider perfectly centered with text baseline */
.txn-list .line1 .account::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: rgba(0,0,0,0.35);
  transform: translateY(0); /* remove vertical shift */
}

/* === Perf: contain and faster first render on edit screen === */
#editScreen .chips-grid { 
  content-visibility: auto;
  contain-intrinsic-size: 800px 600px;
}
#editScreen .chip { contain: layout style; }
#editScreen.perf-no-shadows * { box-shadow: none !important; }

/* Prevent heavy focus shadows during mount */
#editScreen.mounting *:focus { box-shadow: none !important; }

/* Keep transactions panel lightweight initially */
#contactTxns { min-height: 48px; }


/* === Corner floating action buttons (Undo/Redo) ============================ */
:root{
  --fab-dim: 30px;
  --fab-icon: 14px;
  --fab-border: rgba(0,0,0,0.35);
  --fab-bg: rgba(255,255,255,0.96);
  --fab-icon-color: #111;
}

.corner-fab[hidden]{ display:none !important; }

.corner-fab{
  position: fixed;
  bottom: calc(10px + var(--safe-bottom));
  width: var(--fab-dim) !important;
  height: var(--fab-dim) !important;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--fab-border) !important;
  background: var(--fab-bg) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 5px 14px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5000;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.corner-fab:active{ transform: translateY(1px); }

.corner-fab > *{
  position: static !important;
  margin: 0 !important;
  display: block;
  line-height: 1 !important;
}

.corner-fab .material-icons{
  font-size: var(--fab-icon) !important;
  color: var(--fab-icon-color) !important;
}

.corner-fab .fab-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.96);
  color: #111;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  display: inline-block;
  pointer-events: none;
}

/* Placement */
.undo-fab{ left: 10px; }
.redo-fab{ left: 10px; bottom: calc(10px + var(--safe-bottom)); }

@media print{ .corner-fab{ display:none !important; } }


/* === New-type editor visuals inside #typePicker === */
#typePicker .chip.editing {
  display: flex !important;
  align-items: center !important;
  justify-content: stretch !important;
  height: 28px !important;
  padding: 0 8px !important;
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  overflow: visible !important;
}
#typePicker .chip.editing input {
  width: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font: inherit !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
}
#typePicker .chip.editing input::placeholder {
  color: var(--ink-sub) !important;
  opacity: .45 !important;
}


/* === Larger font for transaction history without layout shift === */
#contactTxns .two-line {
  font-size: 0.88rem !important;   /* slightly bigger than .72/.78rem */
  line-height: 1.25 !important;
}

#contactTxns .two-line .line1,
#contactTxns .two-line .line2 {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* Prevent text wrapping changes */
#contactTxns .two-line .category,
#contactTxns .two-line .amounts,
#contactTxns .two-line .memo {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* === 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{
  /* Use flex + absolute-centered title so it stays centered even when the org pill mounts */
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + var(--safe-top)) 12px 6px 12px;
}

/* Title centered on the screen, independent of left/right content widths */
.appbar .toolbar h1,
.appbar .toolbar #title{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-sub);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 210px); /* avoid overlapping icons/pill */
  pointer-events: none; /* let clicks go to buttons */
}

/* Keep right button pinned to the far right */
.appbar .toolbar #multiSelectBtn{ margin-left: auto; }
.appbar .toolbar #addBtn{ margin-left: 0; }

/* Select mode header actions */
.appbar .toolbar #exitSelectBtn{ margin-left: 0; }

body:not(.selecting) #exitSelectBtn{ display:none; }
body.selecting #addBtn{ display:none; }

/* While selecting, show "Change" + "X" with same header styling */
body.selecting #multiSelectBtn.primary{
  background:#F3F4F6;
  color:var(--ink);
  border:1px solid var(--bd);
}


/* Keep left items on the left */
.appbar .toolbar #homeBtn{ flex: 0 0 auto; }
.appbar .toolbar #contactsOrgPill{ flex: 0 0 auto; }
/* Header icons (top bar) */
.appbar .icon{
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  border-radius:10px;
  padding:4px;
  border:0;
}
.appbar .icon.round{
  width:36px;
  height:36px;
  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; }

/* Edit Sub-Header */
.subbar{
  position:sticky;
  top:0;
  z-index:9;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:6px;
  padding: calc(10px + var(--safe-top)) 6px 6px 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); }

/* Sub-header icons (back arrow etc.) */
.subbar .icon{
  background:transparent;
  color:var(--ink-sub);
  border:0;
  border-radius:10px;
  padding:4px;
}
.subbar .material-icons{ font-size:21px; }

/* Contacts main org pill — keep only sizing + shape.
   Visuals come from .hdr-acc-dot/.hdr-org-dot (Tx style). */
#contactsOrgPill{
  width:26px;
  height:26px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
#contactsOrgPill{
  margin-left: 8px;   /* spacing from home */
  border-radius: 6px;
}
/* Make edit org pills clearly toggle selected vs enabled/disabled */
#editOrgPillRow .hdr-acc-dot{
  opacity: 1;
  border-radius: 6px;
}
#editOrgPillRow .hdr-acc-dot{
  opacity: 1;
  border-radius: 6px;
}
#editOrgPillRow .hdr-acc-dot.is-selected{
  /* tight selected ring with no white gap */
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.18) inset,
              0 0 0 2px rgba(0,0,0,0.18);
}


#contactsOrgPill .label,
#contactsOrgPill .text{
  font-size: 8px;
  line-height: 1.1;
}







/* === Edit-only toolbar layout (contactsOrgPill hidden) === */
body.editing-contact .appbar .toolbar{
  grid-template-columns: auto 1fr auto !important; /* back | title | actions */
  align-items: center !important;
}

/* Center title in edit mode */
body.editing-contact .appbar .toolbar .title,
body.editing-contact .appbar .toolbar .title-lg,
body.editing-contact .appbar .toolbar .subtitles{
  grid-column: 2 !important;
  justify-self: center !important;
  text-align: center !important;
  margin-inline: auto !important;
}

/* Left control stays left */
body.editing-contact .appbar .toolbar > :first-child{
  grid-column: 1 !important;
  justify-self: start !important;
}

/* Right actions stay right */
body.editing-contact .appbar .toolbar > :last-child{
  grid-column: 3 !important;
  justify-self: end !important;
}


/* =========================
   Multi-select + Bulk Type
   ========================= */

/* In select mode, tapping a row toggles selection (no edit open) */
body.selecting #contactList .li{ cursor: pointer; }

/* Keep rows calm: no heavy outlines/shadows */
#contactList .li.selected{
  outline:none;
  background: rgba(58,120,224,.06);
}
.li.selected::before{
  content:'';
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:3px;
  background: rgba(58,120,224,.55);
}


/* While selecting, hide the row chevron to reduce noise */
body.selecting #contactList .li .chev{ opacity: 0; }

/* Bulk type overlay */
/* Bulk type overlay */
.overlay{
  position: fixed;
  inset: 0;
  z-index: 2000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
.overlay.hidden{ display:none; }
.glass-card{
  width: min(560px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  padding: 14px;
}
.glass-head{ display:flex; align-items:center; justify-content: space-between; gap: 10px; }
.glass-title{ font-weight: 800; letter-spacing: .2px; }
.glass-sub{ margin-top: 6px; color: rgba(233,237,245,.72); font-size: 13px; }
.glass-grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 420px){ .glass-grid{ grid-template-columns: 1fr; } }
.glass-type-btn{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(19,22,29,.55);
  color: var(--text);
  padding: 12px 12px;
  text-align: left;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.glass-type-btn:hover{
  border-color: rgba(58,120,224,.35);
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
}


/* In multi-select mode, remove the chevron affordance to reduce clutter */
body.selecting #contactList .li .chev{ display:none; }


.avatar .avatar-initials{display:block;}
#multiSelectBtn.active{background: rgba(58,120,224,.10);}
/* === iOS fix: bulk Change Type popup should NOT be full-screen === */
#bulkTypeOverlay {
  align-items: center;
  justify-content: center;
}

/* Card sizing */
#bulkTypeOverlay .glass-card {
  width: min(92vw, 420px);
  max-height: min(70vh, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  overflow: hidden; /* important */
  border-radius: 14px;
}

/* Header stays fixed */
#bulkTypeOverlay .glass-head {
  flex: 0 0 auto;
}

/* Content scrolls instead of card growing */
#bulkTypeOverlay .glass-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom);
}
#bulkTypeOverlay {
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}