/* Outer wrapper keeps the rounded corners & clipping for sticky elements */
.table-wrap{
  width:95%;
  margin:0 auto;
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  overflow:clip;
}:root{
--safe-top: env(safe-area-inset-top);
--safe-bottom: env(safe-area-inset-bottom);
--entry-h: 72px;
--bar-h: calc(100px + var(--safe-top));
--thead-h: 32px;
--bg: #f7f8fc;
--card: #ffffff;
--text: #0f172a;
--muted: #607087;
--bd: #e6e9ee;
--sep: #f1f5f9;
--accent: #3f5ba3;
--picker-btn-size: 40px;
/* button box */
--picker-icon-size: 38px;
}

body{ font-family:system-ui,sans-serif; margin:10px; font-size:13px; background:var(--bg); color:var(--text); }

.material-icons{
  font-family:'Material Icons' !important;
  font-weight:normal;
  font-style:normal;
  line-height:1;
  display:inline-block;
  -webkit-font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
}

#error{ color:#b42318; font-size:13px; margin-top:6px; }

/* ---- Header Bar ---- */
/* --- iOS Safari fix: allow grid children to shrink --- */
.bar .row.top > * { min-width: 0; }

/* --- Ensure edit actions align flush right in header grid (iOS safe) --- */
.bar .row.top .edit-actions {
  justify-self: end;
  display: flex;
  gap: 6px;
  align-items: center;
}

.bar{
  display:flex; flex-direction:column; gap:4px; margin-bottom:4px;
  background:#e0e0e0; padding: calc(10px + var(--safe-top)) 12px 10px; border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,.05);
  position: sticky; top: 0; z-index: 10;
}
/* === Auth-aware header visibility === */
body:not(.logged-in) .bar {
  display: none !important;
}
body.logged-in .bar {
  display: flex !important;
}

.bar .row.top{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }.bar h1{
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  color: #222;
  justify-self: center;
}


/* ---- Account selector ---- */
.account-title{
  background:transparent; border:none; cursor:pointer;
  font-size:16px; font-weight:600; color:var(--accent);
  display:inline-flex; align-items:center; gap:6px;
}
.account-title:hover{ text-decoration:underline; }
.account-menu .item{ padding:8px 10px; border-radius:6px; cursor:pointer; }
.account-menu .item:hover{ background:#f5f8fb; }
.account-menu .empty{ padding:8px 10px; color:var(--muted); }


/* --- Account menu pills (popup) --- */
.account-menu .item{
  display:flex;
  align-items:center;
  gap:8px;
}
.account-menu .am-check{
  font-size:20px !important;
  opacity:0.85 !important;
  margin-right:2px !important;
  flex:0 0 auto !important;
}
.account-menu .am-dot{
  width:28px !important;
  height:28px !important;
  font-size:12px !important;
  font-weight:650 !important;
  letter-spacing:.2px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  flex:0 0 auto !important;
  border:1px solid rgba(255,255,255,0.8) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.65),
    0 -1px 0 rgba(0,0,0,0.12) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.60),
    inset 0 -2px 5px rgba(0,0,0,0.18) !important;
}
.account-menu .am-name{
  font-weight:600;
  color:#0f172a;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  flex:1 1 auto;
}

/* ---- Datebar ---- */
.datebar{ width:100%; display:flex; justify-content:center; margin:10px 0 8px; }
.datebar .rect{
  display:inline-flex; align-items:center; gap:8px;
  background:#e0e0e0;
  border:none;
  border-radius:12px;
  padding:4px 6px;
  box-shadow:none;
}
/* ---- Date picker arrows ---- */
.db-btn {
  width: 32px;
  height: 32px;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  background: transparent;
  color: #064d99;
}
.db-btn:hover { background: rgba(0,0,0,0.05); }
.db-btn:active { transform: translateY(1px); }
.db-center{ min-width:220px; display:flex; align-items:center; justify-content:center; padding:4px 10px; border-radius:6px; }
.db-center .label{ font-size:14px; font-weight:600; color:#0b5ec0; }

.date-display{
  border:1px solid rgba(74, 77, 79, 0.35);
  background:
    linear-gradient(180deg, rgba(85,107,47,0.12), rgba(85,107,47,0.03));
  color:#596271;
  font-size:14px;
  font-weight:700;
  letter-spacing:.3px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  padding:7px 10px;
  border-radius:999px;
  box-shadow:
    0 2px 6px rgba(85,107,47,0.20),
    inset 0 1px 0 rgba(255,255,255,0.9);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.date-display:hover{
  border-color: rgba(85,107,47,0.60);
  background:
    linear-gradient(180deg, rgba(85,107,47,0.18), rgba(85,107,47,0.06));
  box-shadow:
    0 4px 10px rgba(85,107,47,0.28),
    inset 0 1px 0 rgba(255,255,255,0.95);
  transform: translateY(-1px);
  text-decoration:none;
}
.date-display:active{
  transform: translateY(0);
  box-shadow:
    0 1px 3px rgba(85,107,47,0.20),
    inset 0 2px 6px rgba(0,0,0,0.08);
}

#weekdayLabel{ opacity:.9; }
#dateLabel{ opacity:1; }
/* Date display text wrapper (used by auto-jump pill) */
#dateDisplayText{
  display:inline-flex;
  align-items:center;
  gap:1px;
}

/* Auto-jump pill (in date bar) */
.auto-jump-pill{
  margin-left:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:24px;
  min-width:24px;
  padding:0 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.18);
  font-size:12px;
  line-height:1;
  cursor:pointer;
  user-select:none;
  background:transparent;
  color:inherit;
}
.auto-jump-pill.is-on{ opacity:1; font-weight:600; }
.auto-jump-pill.is-off{ opacity:0.55; font-weight:400; }

#dateInput{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#dateInput::-webkit-calendar-picker-indicator{
  display: none;
}

#dateInput::-ms-clear{
  display: none;
}


/* ---- Totals ---- */
.totals-bar { width: 95%; margin: 6px auto 10px; display: block; }
.totals-row { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; box-sizing: border-box; }
.totals-box {
  background:#e0e0e0;
  border:none;
  border-radius:12px;
  padding:1px 3px;
  min-height:34px;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
}.totals-box .t-num{
font-size: 20px;
font-weight: 600;
line-height: 1.2;
letter-spacing: .2px;
}
/* Totals coloring (single source of truth) */
.totals-box .t-num.pos { color: #b42318 !important; } /* positive = red */
.totals-box .t-num.neg { color: var(--accent) !important; } /* negative = blue */

/* Totals coloring */
/* positive (red) */
/* negative (blue) */

@media (max-width: 900px) { .totals-row { grid-template-columns: repeat(2, 1fr); }}

/* ---- Table ---- */
#grid{
  width:100%;
  margin:0;
  background:transparent;
  border:0;
  border-radius:0;
  overflow:visible;
}
#grid:not(.no-select){ width:calc(100% - 28px); }
table{ border-collapse:separate; border-spacing:0; width:100%; table-layout:fixed; }thead th{
  position: sticky;
  top: var(--bar-h);
  background: #f8fafc;
  z-index: 5;
  border-bottom: 1px solid var(--bd);
  text-align: left;
  font-weight: 700;
  font-size: 16px;
  color: #4a4a4a;
  padding: 6px 6px;
}
thead th, tbody td{ padding:6px 6px; border-right:1px solid var(--sep); }
thead th:last-child, tbody td:last-child{ border-right:none; }
tbody tr:nth-child(odd) td{ background:#fcfdff; }
tbody tr:hover td{ background:#f5f8fb; }tbody td{
  border-top: 1px solid var(--sep);
  font-size: 14px;
  vertical-align: middle;
}

/* Entry inputs */
input{ padding:4px; width:100%; font-size:13px; border:1px solid #eef1f4; border-radius:6px; }
input:focus{ outline:none; border-color:#cbd5e1; }
#entryRow input[type="text"], #entryRow input[type="number"]{
  padding:4px 6px; font-size:13px; border-radius:6px;
}
#entryRow input[type="number"]{ text-align:right; }

/* Column widths (kept for layout consistency) */
colgroup col.sel{ width:28px; }
colgroup col.contact{ width:20%; }
colgroup col.category{ width:20%; }
colgroup col.memo{ width:36%; }
colgroup col.usd{ width:9%; }
colgroup col.lbp{ width:15%; }
table.no-select col.sel{ width:0 !important; display:none; }
table.no-select thead th.sel, table.no-select tbody td.sel{ display:none; }

/* Row selection */
.no-select{ user-select:none; }
.row-check{ cursor:pointer; color:#666; }
.row-check:hover{ color:#1463ff; }

/* Deep-link highlight (very light blue) */
#rows tr.is-selected,
#rows tr.is-selected .two-line {
  background-color: #e6f3ff !important;
}
/* ---- Two-line transaction rows ---- */
.two-line { padding: 8px 10px; font-size:14px; line-height: 1.3; }

.two-line .line1 {
  display: flex;
  align-items: center;
  /* remove space-between so contact can ellipsize and amounts can hug the right */
  justify-content: flex-start;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 2px;
  /* keep everything on one line */
  white-space: nowrap;
}

/* contact truncates gracefully instead of pushing amounts to a new line */
.two-line .line1 .contact {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 16ch;                 /* critical for ellipsis inside flex */
  flex: 1;                      /* take remaining space */
}

/* make digits align and prevent wrapping */
.two-line .line1 .amount {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: inline-block;
  text-align: right;
}

/* column widths: tune as needed; assumes $ then LL order */
.two-line .line1 .amounts .amount:nth-child(1) { min-width: var(--usd-col, 9ch); }
.two-line .line1 .amounts .amount:nth-child(2) { min-width: var(--ll-col, 16ch); }.two-line .line2{
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 15px;
}
.two-line .line2 .memo {
  flex: 1; text-align: left; margin-left: 10px; color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Entry-specific tweaks */
.entry-two-line .line1 .contact-input { flex: 1; margin-right: 10px; }

.entry-two-line .line2 .category-input { width: 35%; }
.entry-two-line .line2 .memo-input { flex: 1; }

/* ---- Responsive ---- */
@media (max-width: 580px){
  .datebar{ margin:0px 0 0px; }
  #grid{ width:100%; }
}
.totals-box .t-num .after-mil { font-size:15px; }
/* --- Force fixed widths for USD and LL in entry row --- */
.entry-two-line .line1 .amounts input#usd{ width:100% !important; margin:0 !important; }

.entry-two-line .line1 .amounts input#lbp{ width:100% !important; margin:0 !important; }

/* === Prevent blue flash on tap (Chrome) & lock colors during press === */
label.dr-check,
label.dr-check * {
  -webkit-tap-highlight-color: transparent;  /* remove blue tap highlight */
  -webkit-user-select: none;
  user-select: none;
}

label.dr-check > input:focus { outline: none; }
label.dr-check:focus { outline: none; }
label.dr-check::selection,
label.dr-check > input::selection { background: transparent; }

/* Keep color stable while pressing */
label.dr-check:active > input {
  background: #fff5f5;            /* credit press state */
  border-color: #f3d2d2;
}
label.dr-check:active > input::after {
  color: #b42318;                  /* CR text stays red while pressed */
}
label.dr-check:active > input:checked {
  background: var(--accent);       /* debit press state */
  border-color: var(--accent);
}
label.dr-check:active > input:checked::after {
  color: #fff;                     /* DR text stays white while pressed */
}

/* === Entry row: percentage-based layout === */
/* Line 1: Contact | CR/DR | USD | LBP */
.entry-two-line .line1 {
  display: grid !important;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 0.7fr) minmax(0, 1.45fr) minmax(0, 1.75fr);
  align-items: center;
  gap: 4px;
}

/* Place each control into its grid column */
.entry-two-line .line1 .contact-input{
  grid-column: 1;
  width: 100% !important;
  flex: none !important;
  margin: 0 !important;
}
.entry-two-line .line1 #crdrToggle{
  grid-column: 2;
  justify-self: start;
  margin: 0 !important;
}


/* Flatten amounts wrapper so #usd and #lbp occupy columns 3 & 4 of the parent grid */
.entry-two-line .line1 .amounts{ display: contents; }

.entry-two-line .line1 #usd{ grid-column: 3; width:100% !important; margin:0 !important; }

.entry-two-line .line1 #lbp{ grid-column: 4; width:100% !important; margin:0 !important; }

/* Line 2: Category 30% | Memo 70% (tweakable via CSS vars) */

.entry-two-line .line2 #category{
  grid-column: 1;
  width: 100% !important;
  margin: 0 !important;
}

.entry-two-line .line2 #memo{
  grid-column: 3;
  width: 100% !important;
  margin: 0 !important;
}

.two-line .line1 .amount:not(.neg) { color: #b42318 !important; }        /* positives = DR → red */
.two-line .line1 .amount.neg { color: var(--accent) !important; }        /* negatives = CR → blue */

/* Ensure dblclick + text selection always work inside history rows,
even if the table has .no-select for layout reasons */
#grid.no-select #rows,
#grid.no-select #rows .two-line,
#grid.no-select #rows .two-line * {
  -webkit-user-select: text !important;
  user-select: text !important;
}
.entry-two-line .line2 #account {
  -webkit-appearance: none;  /* Chrome, Safari, Edge */
  -moz-appearance: none;     /* Firefox */
  appearance: none;          /* Standard */
  grid-column: 2;
  width: 100% !important;    /* now it’s inside a smaller column */
  font-size:11px;
  font-weight: 600;
  line-height: 1.1;
  padding: 1px 3px;
  height: 19px;
  border: 1px solid #79acdc79;
  border-radius: 5px;
  background: #f5faff;
  color: #185cb4;
  margin: 0 !important;
  font-size:10px !important;

}

.entry-two-line .line2 .account-input {
  -webkit-appearance: none;  /* Chrome, Safari, Edge */
  -moz-appearance: none;     /* Firefox */
  appearance: none;          /* Standard */
  grid-column: 2;
  width: 100% !important;    /* now it’s inside a smaller column */
  font-size:11px;
  font-weight: 600;
  line-height: 1.1;
  padding: 1px 3px;
  height: 19px;
  border: 1px solid #79acdc79;
  border-radius: 5px;
  background: #f5faff;
  color: #185cb4;
  margin: 0 !important;
  font-size:10px !important;

}

/* History row account display to visually inherit entry UI */
.two-line .line2 .account{
  margin-left:10px;
  padding: 0px 2px;
  border:1px solid #eaeef3;
  border-radius:3px;
  background:#fdfefe;
  color:#185cb4;
  font-weight:600;
  line-height:1.2;
}

/* CR default */

.two-line .line2 .crdr.neg{ color:#b42318; } /* DR coloring */

/* quick pulse feedback when entry is populated */
@keyframes entryPulse { from { box-shadow:0 0 0 rgba(63,91,163,0); } to { box-shadow:0 0 0 4px rgba(63,91,163,.15); } }
#entryRow.pulse{ animation: entryPulse .4s ease; }

/* Single cycling pill styles and placement */
.entry-two-line .line1 #crdrToggle{
  grid-column: 2;
  justify-self: start;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 2px 8px;
  font-size:12px;
  font-weight: 700;
  letter-spacing: .2px;
  border-radius: 8px;
  border: 1px solid #f3d2d2;
  background: #fff5f5;
  color: #b42318; /* CR baseline */
  cursor: pointer;
  line-height: 1;
}.entry-two-line .line1 #crdrToggle:focus{
outline: 2px solid #3f5ba3;
outline-offset: 1px;
}

/* Debit (DR) → Red */
#crdrToggle[data-mode="DR"],
#crdrToggle[data-mode="DR$"] {
  background: #fff5f5 !important;
  border-color: #f3d2d2 !important;
  color: #b42318 !important;
}

/* Credit (CR) → Blue */
#crdrToggle[data-mode="CR"],
#crdrToggle[data-mode="CR$"] {
  background: #e6f0ff !important;
  border-color: #c2dbff !important;
  color: #185cb4 !important;
}

/* Clean amounts wrapper so $ and LL are separate grid items with only 2px gap */

/* --- Prevent overlap in the entry row --- */


.entry-two-line .line1 input[type="text"],
.entry-two-line .line1 input[type="number"],
.entry-two-line .line1 select,

/* Ensure $ and LL are in their tracks */
#usd{ width:100% !important; margin:0 !important; }
#lbp{ width:100% !important; margin:0 !important; }

/* Simplified no-overlap rules */


.entry-two-line .line1 input[type="text"],
.entry-two-line .line1 input[type="number"],
.entry-two-line .line1 select,

/* Ensure wrapper doesn't interfere */

/* === Final normalize: simple, even spacing, no overlaps === */
.entry-two-line .line1 { gap: 4px !important; }
.entry-two-line .line1 > * { min-width: 0 !important; margin: 0 !important; }
.entry-two-line .line1 input,
.entry-two-line .line1 select,
.entry-two-line .line1 button {
  width: 100% !important; box-sizing: border-box !important;
}.entry-two-line .line1 #crdrToggle{
justify-self: stretch !important;
padding: 4px 10px !important;
}

/* Sticky entry row cell under header */
#entryRow td{ background:#fff; }
#entryRow .two-line{ background:#fff;  min-height: var(--entry-h);
}

/* Sticky two-line entry just below the header */
#entryRow .entry-two-line{ position: sticky; top: calc(var(--bar-h) + var(--thead-h)); z-index: 4; background:#fff; box-shadow:0 1px 0 var(--bd); }
#entryRow .entry-two-line .line1, #entryRow

/* ==== Actions menu (select mode) ==== */
.edit-actions{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; position:relative; }
.actions-btn{
  font-size:14px; font-weight:600; color:#064d99; cursor:pointer;
  background:transparent; border:none; padding:0; line-height:1;
}
.actions-btn:hover{ text-decoration:underline; }

.actions-menu{

/* === Row/Actions menu icon images === */
.actions-menu .item img,
.row-menu .item img {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  opacity: 0.88;
  transition: opacity 0.15s ease;
}
.actions-menu .item:hover img,
.row-menu .item:hover img {
  opacity: 1;
}

  position:absolute; top: 36px; right:0; z-index:40;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:8px; box-shadow:0 8px 20px rgba(0,0,0,.08);
  padding:6px; min-width:220px;
}
.actions-menu .item{ padding:8px 10px; border-radius:6px; cursor:pointer; }
.actions-menu .item:hover{ background:#f5f8fb; }
.actions-menu .item.row{ display:flex; align-items:center; gap:8px; cursor:default; }
.actions-menu .item.row .label{ font-size:13px; color:#334155; white-space:nowrap; }
.actions-menu .item.row select{
  font-size:13px; padding:2px 6px; border:1px solid #cbd5e1; border-radius:6px;
  background:#f5faff; color:#18b435; min-width:120px;
}

/* Disable long-press callouts outside form fields */
*:not(input):not(textarea):not(select) {
  -webkit-touch-callout: none;
}

/* iOS-only: stop text selection outside editable fields */
body.ios *:not(input):not(textarea):not(select):not([contenteditable="true"]) {
  -webkit-user-select: none;
  user-select: none;
}
/* Keep selection enabled where editing makes sense */
body.ios input,
body.ios textarea,
body.ios select,
body.ios [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* ==== iOS: absolutely disable selection in history table (#rows) ==== */
body.ios #rows,
body.ios #rows * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* Keep entry row (inputs) selectable/editable */
body.ios #entryRow,
body.ios #entryRow * {
  -webkit-user-select: text !important;
  user-select: text !important;
}

/* iOS override with higher specificity to beat #grid.no-select #rows enabling rule */
body.ios #grid.no-select #rows,
body.ios #grid.no-select #rows * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* Clean amounts wrapper so $ and LL are separate grid items with only 2px gap */
.entry-two-line .line1 .amounts{
  display: contents !important;
  gap: 0 !important;
  min-width: 0 !important;
}
/* Global amounts normalization (safe defaults) */
.amounts{
  display: contents !important;
  gap: 0 !important;
  min-width: 0 !important;
}
/* Entry line 2 uses the same method as line 1: fr-based columns */
.entry-two-line .line2{
  display: grid !important;
  grid-template-columns: minmax(0, 1.5fr) minmax(33px, max-content) minmax(0, 1.5fr); /* Category | Account(auto) | Notes */
  align-items: center;
  column-gap: 6px;
}

/* Ensure borders are included in width to avoid crowding the gap */
.entry-two-line .line2 input,
.entry-two-line .line2 select{
  box-sizing: border-box;
}
.entry-two-line {
  background: #fdfdfd;            /* lighter than table body */
  border-top: 1px solid #c2dbff;  /* only top border */
  border-bottom: 1px solid #c2dbff; /* only bottom border */
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* --- Enlarge DR/CR picker for better tap/focus area --- */
.entry-two-line .line1 #crdrToggle {
  font-size:12px !important;   /* bigger text */
  padding: 4px 10px !important; /* more touchable area */
  min-width: 36px;
  min-height: 26px;
}

/* === Mobile/iOS font stabilization & boost (added 2025-10-01T14:22:33.440201Z) === */
/* Ensure iOS doesn't auto-inflate or clamp small font sizes */
body.ios {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* On narrow screens, add an extra +1px across key UI so the change is visible */
@media (max-width: 580px) {
  body { font-size:15px; }
  input,
  #entryRow input[type="text"],
  #entryRow input[type="number"] { font-size:15px; }
  .two-line { font-size:16px; }
  .back-btn, .edit-btn { font-size:16px; }
  .account-title { font-size:18px; }
  .date-display, .db-center .label { font-size:16px; }
  #crdrToggle { font-size:14px; }
}

/* === Strong Mobile Font Override (added 2025-10-01T14:30:45.313360Z) === */
/* Enforce clearly larger typography on small screens and prevent iOS input zoom */
@media (max-width: 580px) {
  html, body { font-size: 16px !important; }
  .bar h1,
  .back-btn, .edit-btn,
  .account-title,
  .date-display, .db-center .label,
  thead th,
  tbody td,
  .two-line,
  .two-line .line2,
  .totals-box .t-num,
  #error,
  .material-icons {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  /* Inputs/selects must be >=16px to avoid iOS auto-zoom and ensure readability */
  input,
  #entryRow input[type="text"],
  #entryRow input[type="number"],
  select,
  button,
  #crdrToggle {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
}

/* Unified totals label size */
.totals-box .t-label { font-size: 10px !important; }
/* iOS Safari memo input ellipsis */
body.ios #memo {
  min-width: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
  line-height: 1;
}.back-btn,
.edit-btn{
  font-weight: 550;
  /* denser than 400 */
  letter-spacing: 0.2px;
  color: #185cb4;
  cursor: pointer;
  font-size: 15px;
}
.back-btn:hover,
.edit-btn:hover {
  text-decoration: underline;
}

/* === Slightly denser adjustment for header/date === */
.bar h1,
.account-title {
  font-weight: 550;  /* more presence */
  font-size: 15px;
}

.date-display,
.db-center .label,
#weekdayLabel,
#dateLabel {
  font-weight: 550;
  font-size: 15px;
}
.material-icons,
.material-symbols-rounded {
  font-size: var(--picker-icon-size) !important;
}
/* smaller selection circles in history */
tbody td.sel { width: 28px; }                /* narrow, consistent column */
#rows .row-check {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}
#rows .row-check.material-icons {
  font-size: 18px !important;               /* override global picker icon size */
}
#rows tr.is-selected .row-check { color: #185cb4; }

#rows .amount.lbp .after-mil { font-size: 12px !important; opacity: 0.95; }

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .scroll-guard { height: calc(28px + env(safe-area-inset-bottom)) !important; }
}

/* === Account Menu Refinements (2025-10-04) === */
.account-menu button:hover,
.account-menu .item:hover,
.account-menu .menu-item:hover{
  background: rgba(0, 0, 0, 0.03) !important;
  color: #000 !important;
}.account-menu svg,
.account-menu .icon{
  width: 11px !important;
  height: 11px !important;
  opacity: 0.5 !important;
  flex: 0 0 auto !important;
  filter: grayscale(60%) brightness(0.8);
}
/* === End Account Menu Refinements === */

/* === Account Menu Spacing Refinement (Compact) === */

/* === End Spacing Refinement === */

/* === Account Menu Ultra-Compact Refinement === */
.account-menu button,
.account-menu .item,
.account-menu .menu-item {
  display: flex !important;
  align-items: center !important;
  padding: 6px 10px !important;
  gap: 8px !important;
  line-height: 1.2 !important;
  border-radius: 6px !important;
}
.account-menu .am-dot{
  width:30px !important;
  height:30px !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:.3px !important;
  flex:0 0 auto !important;
  position:relative !important;
  overflow:hidden !important;
  border-radius:999px !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.10),
    inset 0 1px 0 rgba(255,255,255,0.75),
    inset 0 -3px 6px rgba(0,0,0,0.22),
    0 3px 6px rgba(0,0,0,0.10) !important;
}
.account-menu .am-dot::after{
  content:"" !important;
  position:absolute !important;
  top:-2px !important;
  left:-2px !important;
  width:70% !important;
  height:70% !important;
  border-radius:50% !important;
  background:rgba(255,255,255,0.40) !important;
  filter:blur(2px) !important;
  pointer-events:none !important;
}
.account-menu .am-name{
  font-weight:600 !important;
  color:#0f172a !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}
/* === End Ultra-Compact Refinement === */

/* === Account Menu Ultra-Tight Transparent Style === */
.account-menu {
  position: fixed !important;
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
  padding: 1px 0 !important;
  min-width: 160px !important;
  z-index: 3001 !important;
}
/* === End Account Menu Ultra-Tight Transparent Style === */
/* --- ENTRY ROW: BOLDER + LARGER --- */
.entry-two-line .line1,
.entry-two-line .line2 {
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.entry-two-line .line1 input,
.entry-two-line .line2 input,
.entry-two-line .line2 select,
.entry-two-line #crdrToggle {
  font-size: 15px !important;
  font-weight: 600 !important;
}
.entry-two-line input,
.entry-two-line select,
.entry-two-line button {
  border-radius: 10px !important;
}
.entry-two-line input,
.entry-two-line select,
.entry-two-line button,
#crdrToggle {
  height: 36px !important;       /* Match input height */
  line-height: 1.2 !important;
  padding: 4px 10px !important;  /* Uniform spacing */
  box-sizing: border-box !important;
}

.avatar{display:grid;place-items:center;border-radius:50%;background:#f8fafc;color:var(--muted)}

#accountChip.avatar{
  width:32px !important;
  height:32px !important;
  border:none !important;
  border-radius:50% !important;
  padding:0 !important;
  display:inline-grid !important;
  place-items:center !important;
  box-shadow:none !important;
  outline:none !important;
  flex:0 0 auto !important;
}
#accountChip.avatar .txt-icon{
  font-size:13px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.3px !important;
}

#account.account-input{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

.two-line .line2 .account-input{border:none!important;background:transparent!important;padding:0!important}

/* Back button: circular grey with Material left arrow */
.bar .row.top .back-btn{
  justify-self: start;
}
.back-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#e0e0e0;         /* grey circle */
  color:#374151;               /* icon color */
  cursor:pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.back-btn:hover{ background:#cfd4dc; }
.back-btn:active{ transform: translateY(1px); }
.back-btn .material-icons{ font-size:26px !important; line-height:1; }

/* Edit button: circular grey with Material edit icon (inherits back-btn look) */
.bar .row.top .edit-btn{
  justify-self: end;
}
.edit-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#e0e0e0;
  color:#374151;
  cursor:pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}
.edit-btn:hover{ background:#cfd4dc; }
.edit-btn:active{ transform: translateY(1px); }
.edit-btn .material-icons{ font-size:22px !important; line-height:1; }

/* === Entry Account Picker (2nd-line chip) === */
#entryAccMenu {
  position: fixed;
  z-index: 3000;
  background: #ffffff00;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  padding: 8px;
  width: min(60vw, 600px);
  left: 50%;                         /* center horizontally */
  transform: translateX(-50%);       /* shift to middle of screen */
  max-height: min(60vh, 520px);
  overflow: auto;
  font-size: 15px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

#entryAccMenu .ea-head {
  font-weight: 600;
  font-size: 13px;
  color: #334155;
  padding: 2px 6px 8px;
}

#entryAccMenu .ea-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 10px;
  cursor: pointer;
}

#entryAccMenu .ea-item:hover { background: #f5f8fb; }

#entryAccMenu .ea-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 675;
  letter-spacing: .3px;
  user-select: none;
}

#entryAccMenu .ea-name {
  font-weight: 650;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#entryAccBackdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 2999;
}

/* === Header account icons stack === */
.hdr-acc-stack{
  display:inline-flex;
  align-items:center;
  gap:0;
  margin-left:0px !important;
  vertical-align:middle;
  /* Limit visible account pills to 6 to avoid lag */
  .hdr-acc-stack .hdr-acc-dot:nth-child(n+7) {
    display: none;
  }

}
.hdr-acc-dot, #accountChip{
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:600;
  font-size:16px;
  letter-spacing:.2px;
  border:none;
  user-select:none;
  position: relative;
  border: 1px solid rgba(255,255,255,0.7);
  text-shadow: 0 1px 0 rgba(255,255,255,0.65), 0 -1px 0 rgba(0,0,0,0.15);

  box-shadow:
  0 1px 2px rgba(0,0,0,0.08),
  inset 0 1px 0 rgba(255,255,255,0.55),
  inset 0 -3px 6px rgba(0,0,0,0.20),
  0 2px 4px rgba(0,0,0,0.10),
  0 8px 18px rgba(0,0,0,0.08);
}

.hdr-acc-stack .hdr-acc-dot + .hdr-acc-dot, #accountChip, .ea-dot {
  margin-left: 0; /* ~20% overlap of 28px */
}
/* --- Center header account pills --- */
.bar h1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hdr-acc-stack {
  display: inline-flex;
  width: max-content;
  margin: 0 auto;
}

/* Optional: fine optical nudge if still off-center */
:root { --hdr-acc-nudge: -7px; }
.hdr-acc-stack { transform: translateX(var(--hdr-acc-nudge)); }


/* Account menu fade-in */
.account-menu.fade-in { animation: amFade .18s ease; }
@keyframes amFade { from { opacity:0; transform: translateY(-2px); } to { opacity:1; transform: translateY(0); } }


/* Optional tactile feedback on tap */
.hdr-acc-dot:active, #accountChip:active { transform: scale(0.96); }
/* Dim all header account pills by default; restore for selected ones */
.hdr-acc-stack .hdr-acc-dot {
  will-change: opacity, filter;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  opacity: 0.45;
  filter: grayscale(55%);
  transition: opacity 100ms ease, filter 160ms ease;
}

.hdr-acc-stack .hdr-acc-dot.is-selected {
  opacity: 1;
  filter: none;
}

/* Optional: brighten feedback on hover/focus */
@media (hover: hover) and (pointer: fine) {
  .hdr-acc-stack .hdr-acc-dot:hover,
  .hdr-acc-stack .hdr-acc-dot:focus-visible {
    opacity: 0.9;
    filter: none;
  }
}

@media (max-width: 600px) {
  :root{ --hdr-acc-olap: 0;  /* 0% overlap */ }
}

/* === 3D effects for header account dots === */
.hdr-acc-dot::before,
.hdr-acc-dot::after, #accountChip::after, .ea-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.hdr-acc-dot::after{
  /* inner shading / bevel */
  box-shadow:
  inset 0 10px 18px rgba(255,255,255,0.45),
  inset 0 -16px 22px rgba(0,0,0,0.22);
  opacity: .9;
}

/* Depth on interaction */
.hdr-acc-dot:hover{
  transform: translateY(-1px);
  box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.55),
  inset 0 -2px 5px rgba(0,0,0,0.22),
  0 4px 10px rgba(0,0,0,0.12),
  0 10px 24px rgba(0,0,0,0.10);
}

.hdr-acc-dot:active, #accountChip:active{
  transform: translateY(0);
  box-shadow:
  inset 0 0 0 rgba(255,255,255,0.0),
  inset 0 -1px 3px rgba(0,0,0,0.20),
  0 2px 6px rgba(0,0,0,0.12);
}

@media (hover: none) {
  .hdr-acc-stack .hdr-acc-dot:hover,
  .hdr-acc-stack .hdr-acc-dot:focus-visible { opacity: inherit; filter: inherit; }
}

.hdr-acc-stack .hdr-acc-dot:nth-child(n+7) { display: none; }

/* Category | CHIP | FROM | TO | Notes */ /* keep your 4-col TX grid */
body.tx-mode .entry-two-line .line2 {
  display: grid !important;
  grid-template-columns: 0.6fr auto 0.6fr 1.6fr; /* Category | CHIP | TO | Notes */
  align-items: center;
  gap: 4px;
  justify-content: initial;              /* neutralize any inherited spacing */
}

/* your placements */
body.tx-mode .entry-two-line .line2 #category    { grid-column: 1; }
body.tx-mode .entry-two-line .line2 #accountChip { grid-column: 2; }
body.tx-mode .entry-two-line .line2 #toAccount   { grid-column: 3; display: block !important; }
body.tx-mode .entry-two-line .line2 #memo        { grid-column: 4; width: 100% !important; }

/* make grid children shrink so nothing wraps to a new line */
body.tx-mode .entry-two-line .line2 > * { min-width: 0 !important; }

/* hide the FROM select in TX (since you’re using Category | CHIP | TO | Notes only) */
body.tx-mode .entry-two-line .line2 #account { display: none !important; }

/* if the TO select still has the HTML 'hidden' attribute, force it visible in TX */
body.tx-mode .entry-two-line .line2 #toAccount[hidden] { display: block !important; }

/* keep the chip text perfectly centered (avoids baseline drift) */
body.tx-mode #accountChip.avatar{
  width:32px; height:32px; display:grid; place-items:center; line-height:1;
}
body.tx-mode #accountChip.avatar .txt-icon{
  display:flex; align-items:center; justify-content:center; width:100%; height:100%; line-height:1;
}

/* === Clean two-line layout & TO control (from-scratch) ===================== */
.entry-two-line .line2 {
  display: grid;
  grid-template-columns: 35% minmax(120px, auto) 1fr;
  align-items: center;
  gap: 6px;
}
.entry-two-line .line2 .to-ctl {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Round pill style */
.entry-two-line .line2 #toAccountChip.avatar {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}
.entry-two-line .line2 #toAccountChip .txt-icon {
  font-weight: 700; font-size: 13px; line-height: 1;
}

/* TX-only visibility for the whole TO control */
body:not(.tx-mode) .entry-two-line .line2 #toCtl { display: none !important; }
body.tx-mode      .entry-two-line .line2 #toCtl { display: inline-flex !important; }

/* Overlay the real <select> above the pill in TX so tapping the pill opens native UI */
body.tx-mode .entry-two-line .line2 #toCtl select#toAccount.account-input {
  position: absolute;
  left: 0; top: 0;
  width: 32px; height: 32px;
  opacity: 0.001;           /* keep focusable */
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border: 0; padding: 0; margin: 0;
  cursor: pointer;
  z-index: 2;
}

/* While focused, expand to allow dropdown rendering (desktop) */
body.tx-mode .entry-two-line .line2 #toCtl select#toAccount.account-input:focus {
  position: relative;
  left: auto; top: auto;
  width: auto; min-width: 180px; height: auto;
  opacity: 1;
  background: #fff;
  border: 1px solid rgba(0,0,0,.2);
  padding: 2px 6px;
  z-index: 3;
}

/* Hide the pill outside TX */
body:not(.tx-mode) #toAccountChip { display: none !important; }
/* Non-TX: bring Notes next to Account and make it wide */
body:not(.tx-mode) .entry-two-line .line2{
  grid-template-columns: 35% 1fr !important; /* Category | Notes */
  column-gap: 6px;
}

/* --- ACC button perfectly circular only in TX mode --- */
body.tx-mode #toAccountChip.avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #cdd2da;
  border: 1px solid #898989;
  color: #000000;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  padding: 0 !important;

}

/* shift Notes field 19px left only in TX mode */
body.tx-mode #entryRow .line2 #memo {
  margin-left: -29px !important;
  width: calc(91% + 38px) !important;  /* ≈ +1 cm wider */

}
.actions-menu .item + .item {
  border-top: 1px solid rgba(0,0,0,0.08);
  margin-top: 2px;
  padding-top: 4px;
}
/* Txn number header in the row-menu */
#rowMenuHeader {
  font-weight: 600;
  font-size: 13px;
  padding: 6px 12px;
  text-align: left;              /* 👈 left-aligned */
  color: #0066cc;                /* blue text */
  border-bottom: 1px solid rgba(0,0,0,0.08);
  background: #ffffff75;;
}

/* === Spreadsheet-style 3-column layout for history rows (permanent) === */
:root{
  --usd-col: auto;   /* width for $ column; JS will set actual px */
  --ll-col:  auto;   /* width for LL column; JS will set actual px */
  --amt-gap: 5px;    /* gap between $ and LL */
}

/* History rows only (entry row remains unchanged) */
#rows .two-line .line1{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--usd-col) var(--ll-col) !important;
  align-items: baseline !important;
  column-gap: var(--amt-gap) !important;
  white-space: nowrap !important;
}

/* Let .amount children occupy grid columns */


/* Right-align like a spreadsheet */
#rows .two-line .line1 .amount.usd{
  grid-column: 2 !important;
  justify-self: end !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}
#rows .two-line .line1 .amount.lbp{
  grid-column: 3 !important;
  justify-self: end !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}

/* Ensure 'LL' text has breathing room */
#rows .two-line .line1 .amount .after-mil{
  display: inline !important;
  visibility: visible !important;
  margin-left: 0px;
}
/* Make $ symbol smaller, similar to LL */
#rows .two-line .line1 .amount.usd .cur-symbol {
  font-size: 12px !important;   /* same scale as LL */
  opacity: 0.85;                /* lighter tone */
  vertical-align: baseline;
  margin-right: 0px;            /* tiny gap between $ and number */
}

/* === Glossy CR/DR/FX pill (baked-in) ====================================== */
:root {
  --cr-blue-1: #234d91d2;
  --cr-blue-2: #234d91d2;
  --dr-red-1:  #923c3cd5;
  --dr-red-2:  #912525d1;
  --tx-green-1:#4d6e3ad9;
  --tx-green-2:#487642d5;
}

/* Unified glossy pill */
.entry-two-line .line1 #crdrToggle,
#crdrToggle {
  position: relative;
  overflow: hidden;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  color: #fff !important;
  -webkit-text-fill-color:#fff !important;
  border-radius: 8px;
  height: 34px !important;                 /* lock to entry-row height */
  padding: 2px 8px !important;
  transition: background .3s ease, box-shadow .3s ease, transform .15s ease;
  box-shadow:
  0 2px 5px rgba(0,0,0,.25),
  inset 0 1px 1px rgba(255,255,255,.25);
}

#crdrToggle::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 45%);
  border-radius: inherit;
  pointer-events: none;
}

#crdrToggle:active { filter: brightness(1.1); transform: translateY(1px); }
#crdrToggle:focus { outline: none !important; box-shadow: none !important; }

/* Solid modes */
#crdrToggle[data-mode="CR"]{
  background: linear-gradient(180deg,var(--cr-blue-1) 0%,var(--cr-blue-2) 100%) !important;
}
#crdrToggle[data-mode="DR"]{
  background: linear-gradient(180deg,var(--dr-red-1) 0%,var(--dr-red-2) 100%) !important;
}
#crdrToggle[data-mode="TX"]{
  background: linear-gradient(180deg,var(--tx-green-1) 0%,var(--tx-green-2) 100%) !important;
}

/* Split FX (CR$ and DR$) */
#crdrToggle[data-mode="CR$"]{
  background: linear-gradient(90deg,
  var(--dr-red-2) 0%, var(--dr-red-1) 48%,
  var(--cr-blue-1) 52%, var(--cr-blue-2) 100%) !important;
}

#crdrToggle[data-mode="DR$"]{
  /* now blue → red */
  background: linear-gradient(90deg,
  var(--cr-blue-2) 0%, var(--cr-blue-1) 48%,
  var(--dr-red-1) 52%, var(--dr-red-2) 100%) !important;
}

/* Split divider gloss */
#crdrToggle[data-mode="CR$"]::before,
#crdrToggle[data-mode="DR$"]::before{
  content:""; position:absolute;
  top:2px; bottom:2px; left:50%;
  width:1px; transform:translateX(-.5px);
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.1));
  pointer-events:none;
}

/* Text always white */
#crdrToggle, #crdrToggle *{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

#crdrToggle span { padding: 0 4px; }

/* Subtle 1px nudge for LL in split modes */
#crdrToggle[data-mode="CR$"] span:last-child,
#crdrToggle[data-mode="DR$"] span:last-child { position: relative; left: 1px; }

/* === Row menu (per-transaction) === */
.actions-menu.row-menu {
  position: fixed;                 /* positioning is handled in JS; this just sets type */
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  font-size: 16px;                 /* ↑ bigger font for readability */
  color: #222;
  overflow: auto;
  z-index: 2147483647;             /* sit above the grid */
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  -webkit-overflow-scrolling: touch;
}
/* Header line "Txn #—" */
.actions-menu.row-menu .item.header {
  font-weight: 600;
  padding: 10px 14px;
  opacity: 0.9;
}
/* Items */
.actions-menu.row-menu .item {
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Short, subtle separators */
.actions-menu.row-menu .item + .item {
  border-top: 1px solid rgba(0,0,0,0.06);
}
/* Hover feedback */
.actions-menu.row-menu .item:hover {
  background: rgba(0,0,0,0.05);
}
/* Disabled items (e.g., Move up/down at edges) */
.actions-menu.row-menu .item[disabled],
.actions-menu.row-menu .item[disabled]:hover {
  opacity: 0.4;
  cursor: default;
  background: transparent;
  pointer-events: none;
}

/* === Camera fallback modal === */
#cameraModal { position: fixed; inset: 0; display: none; z-index: 10000; }
#cameraModal.show { display: block; }
#cameraModal .cam-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.5); }
#cameraModal .cam-sheet { position:absolute; inset:auto 0 0 0; background:#111; padding:12px; display:flex; flex-direction:column; gap:8px; }
#cameraModal video { width:100%; height:auto; background:#000; }
#cameraModal .cam-controls { display:flex; justify-content:space-between; gap:8px; }
#cameraModal .cam-controls button { flex:1; padding:10px 14px; border:none; border-radius:10px; }

/* === Attachments thumbnails in rows === */
#rows .thumbs { display:inline-flex; gap:4px; margin-left:6px; vertical-align:middle; }
#rows .thumbs img { width:22px; height:22px; object-fit:cover; border-radius:4px; border:1px solid rgba(0,0,0,.08); }

/* === Thumbs inline with notes ============================================ */
.two-line .line2,
.line2 {
  display: flex;
  flex-wrap: wrap;            /* allow wrapping to next line when no space */
  align-items: center;
  column-gap: 6px;
  row-gap: 2px;
  min-width: 0;               /* enables flex children to shrink properly */
}

.two-line .line2 .notes,
.line2 .notes {
  flex: 1 1 auto;
  min-width: 0;               /* allow long notes to ellipsize/wrap */
}

.two-line .line2 .thumbs,
.line2 .thumbs {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
  flex-wrap: wrap;            /* thumbs themselves can wrap to the next row */
}

.two-line .line2 .thumbs img,
.line2 .thumbs img {
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 4px;
  vertical-align: middle;
}

/* =====================================================================
   xxxx MANUAL BUILD BADGE (tiny number, top-left)
   - Change the digits inside --txn-badge below each time you save.
   - No JS, reads ONLY from this CSS file.
   ===================================================================== */
/*:root { --txn-badge: "1.6.8"; }  /* <<-- BUMP THIS NUMBER MANUALLY (e.g., "02", "03", "10") */

html body::before {
  content: var(--txn-badge);
  position: fixed;
  top: 4px;
  left: 6px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(0,0,0,0.65);
  background: rgba(255,255,255,0.75);
  border-radius: 3px;
  padding: 1px 3px;
  z-index: 99999;
  pointer-events: none;
}

/* === Row menu two-column layout === */
.actions-menu.row-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 8px;
  padding: 6px 8px;
  width: max-content;
  min-width: 200px;
}
.actions-menu.row-menu .item.header {
  grid-column: 1 / -1; /* header spans both columns */
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  margin-bottom: 4px;
}
.actions-menu.row-menu .item {
  text-align: center;
  border-radius: 6px;
  transition: background 0.15s;
}
.actions-menu.row-menu .item:hover {
  background: rgba(0,0,0,0.08);
}
.actions-menu .item img,
.row-menu .item img {
  pointer-events: none;
}

/* Safety: force hidden menus to stay invisible no matter layout rules */
#rowMenu[hidden],
.actions-menu[hidden],
.actions-menu.row-menu[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* === Active row (simple & persistent) === */
#rows tr.active-row,
#rows tr.active-row td,
#rows tr.active-row .two-line {
  background: #e8e9f2 !important;
}



/* === Deep-linked transaction highlight (from Contacts / Categories / anywhere) === */
#rows tr.txn-highlight,
#rows tr.txn-highlight td,
#rows tr.txn-highlight .two-line {
  background: #e9f4ff !important;   /* very light blue */
}

/* === Row Menu Target background (persists while menu is open) === */

#rows tr.menu-target,
#rows tr.menu-target td,
#rows tr.menu-target .two-line {
  background: #e9f4ff !important;
  transition: none !important;
  animation: none !important;
}

/* Entry row: ensure grid tweaks don't force wrap */
.entry-two-line .line2 {
  flex-wrap: nowrap;
}


/* === Fix: ensure thumb placeholders aren't hidden behind two-line rows === */
/* Create a sane stacking context on table cells & two-line blocks */
tbody td { position: relative; z-index: 0; }
.two-line { position: relative; z-index: 0; }

/* Bring any thumbnail elements (images or placeholders) to the top */
#rows .thumbs { position: relative; z-index: 2; }
#rows .thumbs > * { position: relative; z-index: 3; }

/* Extra safety for common placeholder classes */
#rows .thumbs .placeholder,
#rows .thumbs .skeleton,
#rows .thumbs .ph,
#rows .thumbs img { position: relative; z-index: 3; }

/* styles for thumbnails and basic image page */
.thumbs{ display:inline-flex; gap:4px; margin-left:6px; vertical-align:middle; }
.thumbs img{ width:22px; height:22px; border-radius:3px; object-fit:cover; display:inline-block; }
.thumbs a{ display:inline-block; line-height:0; }
.img-page{ min-height:100vh; display:grid; place-items:center; background:#111; }
.img-page img{ max-width:100%; max-height:100vh; height:auto; width:auto; display:block; }
/* === History line 2 layout: Category | Account | Notes | Thumbs =====================
   Single source of truth for #rows history rows
   - Category: fixed, left
   - Account: fixed, next
   - Notes: flex, ellipsis, on the same line
   - Thumbs: inline after notes, never on top of text
=============================================================================== */
#rows .two-line .line2 {
  display: block;           /* simple inline flow: category, account, notes, thumbs */
}

#rows .two-line .line2 .category {
  flex: 0 0 auto;
}

#rows .two-line .line2 .account {
  flex: 0 0 auto;
  margin-left: 8px;
}

#rows .two-line .line2 .memo {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 8px;
  white-space: normal;      /* allow wrapping to multiple visual lines */
  overflow: visible;        /* don't clip notes text */
  text-overflow: clip;      /* no ellipsis; show full content */
}

#rows .two-line .line2 .thumbs {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
}

#rows .two-line .line2 .thumbs img {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
}


#rows .two-line .line2 .category,
#rows .two-line .line2 .account,
#rows .two-line .line2 .memo,
#rows .two-line .line2 .thumbs {
  display: inline;
}

#rows .two-line .line2 .thumbs {
  margin-left: 10px;
}
/* Org pill: plain square */
.hdr-org-dot{
  border-radius: 10px;
}
/* Org pill should be a true square, no inner circular gloss */
.hdr-org-dot,
.hdr-org-dot::before,
.hdr-org-dot::after{
}

/* If the inner circle still shows, remove the gloss layers entirely */
.hdr-org-dot::before,
.hdr-org-dot::after{
  content: none !important;
}

/* Tiny infinite badge on account header pill when account + all children are selected */
.hdr-acc-dot {
  position: relative;
}

.hdr-acc-badge-infinite {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2.5px;
  font-size: 12px;
  font-weight: 350;
  line-height: 1;
  pointer-events: none;
}



/* --- Account menu final overrides (2025-12-10) --- */
.account-menu .item{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:8px 10px !important;
}
.account-menu .am-name{
  font-weight:600 !important;
  color:#0f172a !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  min-width:0 !important;
  flex:1 1 auto !important;
}
.account-menu .am-done{
  font-size:18px !important;
  color:#9aa3af !important; /* grey check */
  margin-left:4px !important;
  flex:0 0 auto !important;
}


/* Dim unselected account icons in popup */
.account-menu .am-dot.is-off{
  opacity:0.55 !important;
  filter:saturate(0.8) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -2px 4px rgba(0,0,0,0.16),
    0 2px 4px rgba(0,0,0,0.06) !important;
}
/* --- Datebar nav buttons: tiny circle, bg #E0E0E0, smaller font --- */
.datebar .db-btn{
  height: 32px;
  width: 32px;
  min-width: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #E0E0E0;
  border: 1px solid rgba(0,0,0,0.14);
  color: inherit;

  font: inherit;
  font-size: 0.75em;   /* smaller text */
  line-height: 1;

  cursor: pointer;
  user-select: none;

  box-shadow:
    0 2px 0 rgba(0,0,0,0.08),
    0 4px 8px rgba(0,0,0,0.12);

  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease,
    border-color 120ms ease;
}

.datebar .db-btn .material-icons{
/* ensure the icon actually shrinks */
font-size: 28px !important;  /* force smaller chevrons */
line-height: 1;
opacity: 0.95;
}

.datebar .db-btn:hover{
  background: #D5D5D5;
  border-color: rgba(0,0,0,0.20);
  box-shadow:
    0 3px 0 rgba(0,0,0,0.10),
    0 6px 12px rgba(0,0,0,0.14);
  transform: translateY(-1px);
}

.datebar .db-btn:active{
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.08),
    0 2px 4px rgba(0,0,0,0.12);
}

/* === Date picker: keep long date on ONE line (no wrapping) === */
.date-display,
#dateDisplayText,
#weekdayLabel,
#dateLabel{
  white-space: nowrap !important;
}

.date-display{
  flex-wrap: nowrap !important;
  max-width: min(520px, 78vw);
}

#dateDisplayText{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* === Corner floating action buttons (Share / Undo) === */
: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; /* unified icon color (black) */
}

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

/* Apply the same styling even if share.js uses an id instead of the class */
.corner-fab,
#shareFab,
#shareBtn,
#shareButton,
button[aria-label="Share"],
button[title="Share"]{
  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;                 /* keep icon inside the circle */
  -webkit-tap-highlight-color: transparent;
}
.corner-fab:active{ transform: translateY(1px); }

/* Force any child (span/img/svg) to be centered and not escape the button */
.corner-fab > *,
#shareFab > *,
#shareBtn > *,
#shareButton > *,
button[aria-label="Share"] > *,
button[title="Share"] > *{
  position: static !important;
  margin: 0 !important;
  display: block;
  line-height: 1 !important;
}

/* Unified icon sizing + color */
.corner-fab .material-icons,
#shareFab .material-icons,
#shareBtn .material-icons,
#shareButton .material-icons,
button[aria-label="Share"] .material-icons,
button[title="Share"] .material-icons{
  font-size: var(--fab-icon) !important;
  color: var(--fab-icon-color) !important;
}
.corner-fab img,
.corner-fab svg,
#shareFab img,
#shareFab svg,
#shareBtn img,
#shareBtn svg,
#shareButton img,
#shareButton svg,
button[aria-label="Share"] img,
button[aria-label="Share"] svg,
button[title="Share"] img,
button[title="Share"] svg{
  width: var(--fab-icon) !important;
  height: var(--fab-icon) !important;
}

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

.corner-fab{ position: fixed; }
.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;
}
.share-fab{ right: 10px; }

/* Fallback placement for share buttons created with ids instead of .share-fab */
#shareFab,
#shareBtn,
#shareButton,
button[aria-label="Share"],
button[title="Share"]{ right: 10px; }

/* If share button doesn't have explicit class, keep it on the right */
.corner-fab:not(.undo-fab):not(.redo-fab){ right: 10px; }

/* Optional: hide when printing */
@media print{ .corner-fab{ display:none !important; } }

/* === Employee-kind popup (Advance / Loan / Payroll) ======================= */
#empKindMenu.emp-kind-menu{
  min-width: 320px;
  max-width: calc(100vw - 16px);
}
#empKindMenu .emp-kind-search{
  grid-column: 1 / -1;
  padding: 8px 2px 6px;
}
#empKindMenu .emp-kind-search input{
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.9);
  font-size: 14px;
}
#empKindMenu .emp-kind-pills{
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  padding: 4px 2px 6px;
}

/* subtle divider between payroll pills and backward-compat category search */
#empKindMenu .emp-kind-divider{
  grid-column: 1 / -1;
  height: 1px;
  margin: 4px 2px;
  background: rgba(0,0,0,0.10);
}
#empKindMenu .emp-kind-pills .pill{
  flex: 1;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.85);
  font-weight: 600;
  cursor: pointer;
}
#empKindMenu .emp-kind-pills .pill:hover{ background: rgba(0,0,0,0.06); }
#empKindMenu .emp-kind-loan{
  grid-column: 1 / -1;
  padding: 6px 2px 2px;
  display: grid;
  gap: 6px;
}
#empKindMenu .emp-kind-loan .loan-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 8px;
}
#empKindMenu .emp-kind-loan label{
  font-size: 12px;
  opacity: 0.75;
}
#empKindMenu .emp-kind-loan input{
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.9);
  font-size: 14px;
}




/* === Employee-kind popup (current DOM ids/classes) ======================= */
#employeeKindBackdrop.ekm-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.08);
  /* Keep under the menu but above the app, regardless of other z-index rules */
  z-index: 2147483646;
}

/* Let .actions-menu / .row-menu control positioning + surface styling.
   We only define sizing + inner controls so it matches the old empKindMenu look. */
#employeeKindMenu.employee-kind-menu{
  /* Override .actions-menu.row-menu layout rules (4-column grid / max-content width) */
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;

  width: 320px;
  min-width: 320px;
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
  padding: 10px 12px;
}

#employeeKindMenu .ekm-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 2px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  margin-bottom: 8px;
}
#employeeKindMenu .ekm-title{ font-weight: 700; font-size: 14px; color:#334155; }
#employeeKindMenu .ekm-close{ border: 0; background: transparent; font-size: 18px; cursor: pointer; padding: 2px 6px; }

#employeeKindMenu .ekm-body{ display: grid; gap: 10px; }

#employeeKindMenu .ekm-pills{
  display: flex;
  gap: 8px;
  padding: 4px 2px 6px;
}
#employeeKindMenu .ekm-pill{
  flex: 1;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.85);
  font-weight: 600;
  cursor: pointer;
}
#employeeKindMenu .ekm-pill:hover{ background: rgba(0,0,0,0.06); }
#employeeKindMenu .ekm-pill[aria-selected="true"]{ background: rgba(0,0,0,0.06); }

#employeeKindMenu .ekm-search{
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.9);
  font-size: 14px;
}

#employeeKindMenu .ekm-loan{
  padding: 6px 2px 2px;
  display: grid;
  gap: 6px;
}
#employeeKindMenu .ekm-field{ display: grid; gap: 4px; }
#employeeKindMenu .ekm-field label{ font-size: 12px; opacity: 0.75; }
#employeeKindMenu .ekm-field input{
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.9);
  font-size: 14px;
}

#employeeKindMenu .ekm-actions{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}
#employeeKindMenu .ekm-btn{
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.85);
  font-weight: 600;
  cursor: pointer;
}
#employeeKindMenu .ekm-btn:hover{ background: rgba(0,0,0,0.06); }
#employeeKindMenu .ekm-btn.primary{ background: rgba(0,0,0,0.06); }

/* Locked fields (special employee kinds) */
.is-locked{ opacity: 0.75; }
#memo.is-locked{ background: rgba(0,0,0,0.04); }

/* === Employee kind menu: match legacy empKindMenu look === */
#employeeKindMenu .ekm-header{
  display:none !important;
}
#employeeKindMenu .ekm-body{
  gap: 8px;
}
/* Legacy menu had no active pill highlight beyond hover */
#employeeKindMenu .ekm-pill[aria-selected="true"]{
  background: rgba(255,255,255,0.85);
}