/* Ledger page styles — ported from party-ledger-main/app/globals.css.
   Every selector is scoped under .ledger-root so these rules only apply
   inside the /ledger pages and never collide with the app-wide style.css.

   Re-skinned onto vaakya's theme system: the local tokens below alias the
   global CSS custom properties from style.css (:root / [data-theme="dark"]),
   so the ledger follows the app's Poppins typography, indigo accent, and
   light/dark toggle automatically. NOTE: --accent, --accent-hover and
   --text-muted are deliberately NOT redefined here — the ledger uses the
   globals directly (a same-name alias like `--accent: var(--accent)` would
   be a var() self-reference cycle and resolve to nothing). */

.ledger-root {
  --bg: var(--bg-hover, #f7f7fa);        /* subtle fills: chips, hovers   */
  --surface: var(--bg-card, #ffffff);    /* cards, table, modals, inputs  */
  --border: var(--border-medium, #ddd);
  --text: var(--text-primary, #111);
  --green: #16803c;
  --green-bg: #e7f6ec;
  --red: #b42318;
  --red-bg: #fdecea;
  --amber: #92400e;
  --amber-bg: #fef3c7;
  --slate: #334155;             /* balance columns — neutral, not Dr/Cr   */
  --shadow: var(--shadow-card, 0 1px 3px rgba(16, 24, 40, .08));
  --radius: 10px;
}

/* Dr/Cr semantics stay red/green in both themes, but the light-theme
   pastels vanish on dark card backgrounds — swap to luminous tints. */
[data-theme="dark"] .ledger-root {
  --green: #4ade80;
  --green-bg: rgba(34, 197, 94, 0.14);
  --red: #f87171;
  --red-bg: rgba(239, 68, 68, 0.14);
  --amber: #fbbf24;
  --amber-bg: rgba(245, 158, 11, 0.14);
  --slate: #cbd5e1;
}

.ledger-root * { box-sizing: border-box; margin: 0; padding: 0; }

.ledger-root {
  font-family: 'Poppins', "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--bg-body, #f4f6fa);
  color: var(--text);
  min-height: 100vh;
}

/* Capped width so wide monitors get a composed column, not a full bleed. */
.ledger-root .lg-container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 28px 24px 64px; }

/* ---------- Header ---------- */
.ledger-root header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.ledger-root header h1 {
  font-size: 1.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ledger-root .header-actions { display: flex; gap: 10px; align-items: center; }
.ledger-root .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.ledger-root .btn-icon:hover { color: var(--red); border-color: var(--red); background: var(--red-bg); }

.ledger-root .alert-error {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: .92rem;
}

/* ---------- Summary cards ---------- */
.ledger-root .summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}
.ledger-root .card {
  background: var(--surface);
  border: 1px solid var(--border-light, #eee);
  border-radius: 12px;
  padding: 12px 20px;
}
.ledger-root .card .label { font-size: .72rem; color: var(--text-faint, #777); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
/* Kept below the party-card name (1.1rem) so the totals read as
   supporting detail, not the page's headline. */
.ledger-root .card .value { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.ledger-root .card .value.positive { color: var(--green); }
.ledger-root .card .value.negative { color: var(--red); }
.ledger-root .card .value.neutral { color: var(--slate); }

/* Summary cards on small screens: all in one row, compact type */
@media (max-width: 640px) {
  .ledger-root .summary {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
  }
  .ledger-root .card { padding: 4px 10px; }
  .ledger-root .card .label { font-size: .58rem; letter-spacing: .03em; margin-bottom: 4px; }
  /* Scale with the viewport so ₹-lakh amounts (+ the Dr/Cr suffix) stay on
     one line in the three-across cards on narrow phones (e.g. 393px-wide
     iPhone 14 Pro → ~11.8px). word-break stays as a safety net for very
     large (crore) amounts rather than letting them overflow the card. */
  .ledger-root .card .value { font-size: clamp(.68rem, 3vw, .92rem); word-break: break-word; }
}

/* ---------- Toolbar ---------- */
.ledger-root .toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.ledger-root .toolbar.toolbar-bare input[type="search"] { width: 280px; }
.ledger-root .toolbar.toolbar-bare .toolbar-new-btn { margin-left: auto; flex-shrink: 0; }
@media (max-width: 640px) {
  .ledger-root .toolbar.toolbar-bare { flex-wrap: nowrap; }
  .ledger-root .toolbar.toolbar-bare input[type="search"] {
    flex: 1;
    width: auto;
    min-width: 0;
  }
}
.ledger-root .toolbar input[type="search"] {
  width: 320px;
  max-width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--border-light, #eee);
  border-radius: 999px;
  font-size: .95rem;
  background: var(--surface);
  color: var(--text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px center;
  transition: border-color .15s, background-color .15s;
}
.ledger-root .toolbar input[type="search"]:hover { border-color: var(--border-strong, #bdbdbd); }
.ledger-root .toolbar input[type="search"]:focus { background-color: var(--surface); }
.ledger-root .toolbar select {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 34px 10px 14px;
  border: 1px solid var(--border-light, #eee);
  border-radius: 999px;
  background-color: var(--surface);
  color: var(--text-muted);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color .15s, background-color .15s;
}
.ledger-root .toolbar select:hover { border-color: var(--border-strong, #bdbdbd); }
.ledger-root .toolbar select.active {
  border-color: var(--accent);
  background-color: var(--accent-bg, #eef3fd);
  color: var(--accent);
  font-weight: 600;
}
.ledger-root .multi-select { position: relative; }
.ledger-root .multi-select-btn {
  appearance: none;
  padding: 10px 34px 10px 14px;
  border: 1px solid var(--border-light, #eee);
  border-radius: 999px;
  background-color: var(--surface);
  color: var(--text-muted);
  font-size: .9rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color .15s, background-color .15s;
}
.ledger-root .multi-select-btn:hover { border-color: var(--border-strong, #bdbdbd); }
.ledger-root .multi-select-btn.active {
  border-color: var(--accent);
  background-color: var(--accent-bg, #eef3fd);
  color: var(--accent);
  font-weight: 600;
}
.ledger-root .multi-select-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ledger-root .multi-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 210px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-modal, 0 8px 24px rgba(16, 24, 40, .14));
  padding: 6px;
}
.ledger-root .multi-select-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 7px;
  font-size: .92rem;
  cursor: pointer;
}
.ledger-root .multi-select-option:hover { background: var(--bg); }
.ledger-root .multi-select-option input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}
.ledger-root .multi-select-empty { padding: 12px 10px; font-size: .88rem; color: var(--text-muted); }
.ledger-root .multi-select-clear {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: none;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--accent);
  font-size: .86rem;
  font-weight: 600;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.ledger-root .multi-select-clear:hover { text-decoration: underline; }

.ledger-root .toolbar .btn-clear {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s, background-color .15s;
}
.ledger-root .toolbar .btn-clear:hover { color: var(--red); background: var(--red-bg); }
.ledger-root .toolbar input:focus, .ledger-root .toolbar select:focus, .ledger-root .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Phone: search fills the first row; categories, status and Clear share the
   second. Both filters get the same 40% flex basis (a plain 0 basis is uneven:
   border-box clamps the select's base to its padding) so they grow and shrink
   by the same amount and always end up equal width. */
@media (max-width: 640px) {
  .ledger-root .toolbar input[type="search"] { width: 100%; }
  .ledger-root .toolbar .multi-select, .ledger-root .toolbar select {
    flex: 1 1 40%;
    min-width: 0;
  }
  .ledger-root .toolbar .multi-select-btn {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ledger-root .toolbar .btn-clear { flex-shrink: 0; }
}

.ledger-root .btn {
  padding: 10px 18px;
  border: none;
  border-radius: var(--radius);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.ledger-root .btn-primary { background: var(--accent); color: #fff; }
.ledger-root .btn-primary:hover { background: var(--accent-hover); }
.ledger-root .btn:disabled { opacity: .7; cursor: not-allowed; }
.ledger-root .btn-loading { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ledger-root .spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ledger-spin .7s linear infinite;
}
@keyframes ledger-spin { to { transform: rotate(360deg); } }
.ledger-root .btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--text-muted); }
.ledger-root .btn-ghost:hover { background: var(--bg); }
.ledger-root .btn-danger { background: transparent; color: var(--red); border: 1px solid var(--red); }
.ledger-root .btn-danger:hover { background: var(--red); color: #fff; }

/* "+ New Entry" (party-page toolbar) — subtler than a filled primary
   button, but with an accent-tinted background so it still reads as the
   action on the row. Deepens slightly on hover. Overrides the
   .btn-primary fill it also carries. */
.ledger-root .toolbar .toolbar-new-btn {
  background: var(--accent-bg, #eef3fd);
  color: var(--accent, #343BE0);
  border: 1px solid rgba(var(--accent-rgb, 52, 59, 224), 0.25);
  font-size: 0.9rem;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.ledger-root .toolbar .toolbar-new-btn:hover {
  background: rgba(var(--accent-rgb, 52, 59, 224), 0.18);
  border-color: var(--accent);
  color: var(--accent-hover, var(--accent));
}

/* ---------- Table ---------- */
.ledger-root .table-wrap {
  background: var(--surface);
  border: 1px solid var(--border-light, #eee);
  border-radius: 12px;
  overflow-x: auto;
}
.ledger-root table { width: 100%; border-collapse: collapse; min-width: 720px; }
/* Quiet header: small muted caps over a hairline, with a whisper of accent
   tint to separate the heading row from the entries. Sorting shows through
   color alone. */
.ledger-root thead th {
  text-align: left;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted, #555);
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border-light, #eee);
  background: rgba(var(--accent-rgb, 52, 59, 224), 0.05);
  user-select: none;
  white-space: nowrap;
}
.ledger-root thead th:first-child { border-top-left-radius: 12px; }
.ledger-root thead th:last-child { border-top-right-radius: 12px; }
.ledger-root thead th.sortable { cursor: pointer; transition: color .15s; }
.ledger-root thead th.sortable:hover {
  color: var(--accent);
}
.ledger-root thead th.sorted {
  color: var(--accent);
}
.ledger-root thead th .sort-icon {
  margin-left: 7px;
  font-size: .68rem;
  opacity: .4;
  transition: opacity .15s;
}
.ledger-root thead th.sortable:hover .sort-icon { opacity: .75; }
.ledger-root thead th.sorted .sort-icon { opacity: 1; color: var(--accent); }
.ledger-root tbody td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-light, #eee);
  font-size: .92rem;
  vertical-align: middle;
}
.ledger-root tbody tr:last-child td { border-bottom: none; }
.ledger-root tbody tr:hover { background: var(--bg-hover, #f8fafc); }
.ledger-root .date-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(var(--accent-rgb, 37, 99, 235), .35);
  text-underline-offset: 3px;
  white-space: inherit;
  text-align: left;
}
.ledger-root .date-link:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
.ledger-root .date-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Dr/Cr read through colored numerals alone — no tinted column fills.
   Regular weight (overriding .balance's 600): bold digits are wider and
   push amounts onto two lines on small phone screens. */
.ledger-root td.cell-dr { font-weight: 400; }
.ledger-root td.cell-cr { font-weight: 400; }
/* Balance columns (dashboard + party detail) in strong neutral slate —
   the bank-statement pattern: Dr/Cr columns carry the red/green
   sentiment, the running balance is a plain fact. Direction comes from
   the Dr/Cr suffix (dashboard) and running context (detail). */
.ledger-root td.cell-balance { color: var(--slate); }

/* ---------- Week-wise collapsible groups (party detail table) ---------- */

/* Group header row: quiet full-width bar between the entry rows. The whole
   row is one button so the entire bar is tappable on phones. */
.ledger-root .week-row td {
  padding: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--border-light, #eee);
}
.ledger-root .week-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 18px;
  background: none;
  border: none;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.ledger-root .week-toggle:hover .week-label { color: var(--accent); }
.ledger-root .week-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ledger-root .week-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform .18s ease;
}
.ledger-root .week-row.open .week-chevron { transform: rotate(90deg); }
.ledger-root .week-label { font-size: .84rem; font-weight: 600; }
.ledger-root .week-count { font-size: .74rem; color: var(--text-faint, #777); font-weight: 500; }
/* No Dr/Cr/Balance in the collapsed row — the figures appear when the
   week is expanded. Keeps the bar to one clean line on narrow phones. */

/* Expand all / collapse all — quiet text control in the search row. */
.ledger-root .btn-expand-toggle {
  background: none;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.ledger-root .btn-expand-toggle:hover { color: var(--accent); background: var(--accent-bg, #eef3fd); }
.ledger-root .btn-expand-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (max-width: 640px) {
  /* Outranks the .entries-table tbody td mobile padding below — the
     toggle button carries the padding, the cell must stay flush. */
  .ledger-root .entries-table .week-row td { padding: 0; }
  .ledger-root .week-toggle { padding: 9px 8px; gap: 7px; }
  .ledger-root .week-label { font-size: .8rem; }
  .ledger-root .btn-expand-toggle { padding: 6px 7px; font-size: .76rem; }
}

/* Party names display in Title Case regardless of how they were typed —
   display-only (text-transform), the stored value is untouched. */
.ledger-root .party-name { font-weight: 600; text-transform: capitalize; }
.ledger-root .party-link { color: var(--accent); text-decoration: none; }
.ledger-root .party-link:hover { text-decoration: underline; }

.ledger-root header.header-end { justify-content: flex-end; }

.ledger-root .back-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-light, #eee);
  color: var(--text-muted);
  font-size: 1.15rem;
  text-decoration: none;
  flex-shrink: 0;
  transition: color .15s, border-color .15s;
}
.ledger-root .back-arrow:hover { color: var(--accent); border-color: var(--accent); }
.ledger-root .back-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ledger-root th.num, .ledger-root td.num { text-align: right; }
.ledger-root td.muted { color: var(--text-muted); }
.ledger-root td.nowrap { white-space: nowrap; }

.ledger-root header h1 .chip, .ledger-root header h1 .badge { margin-left: 4px; }

/* ---------- Party profile card ---------- */
.ledger-root .party-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  /* Status-tinted card: a whisper of amber while pending, green when done.
     Translucent tints so the same values read subtly on both themes. */
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid var(--border-light, #eee);
  border-left: 3px solid var(--amber);
  border-radius: 12px;
  padding: 14px 20px;
  margin-bottom: 24px;
}
.ledger-root .party-card.done {
  background: rgba(34, 197, 94, 0.07);
  border-left-color: var(--green);
}
.ledger-root .party-card-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.ledger-root .party-card-info {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ledger-root .party-card-name { font-size: 1.1rem; font-weight: 600; text-transform: capitalize; }
.ledger-root .party-card-name-button {
  display: block;
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.ledger-root .party-card-name-button:hover {
  color: var(--accent);
}
.ledger-root .party-card-name-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ledger-root .party-card-info .chip { flex-shrink: 0; }

/* Sub-entry table on small screens: keep the real table shape,
   but compact it so all columns fit without horizontal scrolling.
   Remarks fold under Particulars, and Dr/Cr headers use short labels. */
.ledger-root .short-label { display: none; }
.ledger-root .mobile-particulars { display: none; }
@media (max-width: 640px) {
  .ledger-root .entries-table { overflow-x: visible; }
  .ledger-root .entries-table table { min-width: 0; width: 100%; }
  .ledger-root .entries-table .full-label { display: none; }
  .ledger-root .entries-table .short-label { display: inline; }
  .ledger-root .entries-table .col-remarks { display: none; }
  .ledger-root .entries-table .col-particulars { display: none; }
  .ledger-root .entries-table .mobile-particulars {
    display: block;
    margin-top: 3px;
    font-weight: 600;
    word-break: break-word;
    cursor: pointer;
  }
  .ledger-root .entries-table thead th {
    white-space: normal;
    padding: 10px 7px;
    font-size: .66rem;
    letter-spacing: .03em;
  }
  .ledger-root .entries-table tbody td {
    padding: 10px 7px;
    font-size: .84rem;
    white-space: normal;
    word-break: break-word;
    vertical-align: top;
  }
}

/* Party card row: back arrow on the left, compact card beside it.
   The + New button lives in the search row. */
.ledger-root .party-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.ledger-root .party-card-row .party-card {
  width: fit-content;
  margin-bottom: 0;
}

/* Party card on small screens */
@media (max-width: 640px) {
  .ledger-root .header-end { display: none; }
  /* Phones don't have width to spare: tighter page gutters, and the back
     arrow drops to the same 34px as the mobile action icons. The freed
     space goes to the party name, which ellipsizes when it runs out. */
  .ledger-root .lg-container { padding: 20px 14px 56px; }
  .ledger-root .back-arrow { width: 34px; height: 34px; }
  .ledger-root .party-card-row { gap: 8px; }
  /* Hug the content (name + chip) instead of stretching across the row —
     flex: 0 1 auto still lets a long name shrink and wrap rather than
     pushing the action buttons off-screen. */
  .ledger-root .party-card-row .party-card {
    flex: 0 1 auto;
    width: fit-content;
    min-width: 0;
    padding: 7px 10px;
    gap: 8px;
  }
  /* Match the page's type scale (table .84rem, summary values .92rem) —
     the name stays the biggest text on screen without towering over it. */
  .ledger-root .party-card-name { font-size: .95rem; }
  .ledger-root .party-card-info { gap: 6px; }
  .ledger-root .party-card-info .chip { padding: 3px 8px; }
  /* Single line, ellipsized when space runs out — wrapping a medium-length
     name to two lines makes the hugging card look broken. The full name is
     always available in the edit modal (this button opens it). */
  .ledger-root .party-card-name-button {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 100%;
  }
}
.ledger-root .balance { font-variant-numeric: tabular-nums; font-weight: 600; }
.ledger-root .balance.positive { color: var(--green); }
.ledger-root .balance.negative { color: var(--red); }

.ledger-root .badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .02em;
}
.ledger-root .badge.pending { background: var(--amber-bg); color: var(--amber); }
.ledger-root .badge.done { background: var(--green-bg); color: var(--green); }

.ledger-root .chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border-light, #eee);
  font-size: .78rem;
  color: var(--text-muted);
}

/* Ghost text button — the row action shouldn't compete with the data. */
.ledger-root .btn-edit {
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font-size: .84rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}
.ledger-root .btn-edit:hover { background: var(--accent-bg, #eef3fd); }

.ledger-root .empty-state {
  text-align: center;
  padding: 56px 20px;
  color: var(--text-faint, #777);
  font-size: .92rem;
}
.ledger-root .empty-state .icon { font-size: 2rem; margin-bottom: 10px; opacity: .7; }

/* ---------- Modal ---------- */
.ledger-root .modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay, rgba(16, 24, 40, .45));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.ledger-root .modal {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow-modal, 0 20px 50px rgba(16, 24, 40, .25));
  width: 100%;
  max-width: 460px;
  padding: 28px;
  animation: ledger-pop .18s ease-out;
}
@keyframes ledger-pop {
  from { transform: translateY(12px) scale(.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ledger-root .modal { position: relative; }
.ledger-root .modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.ledger-root .modal-close:hover { background: var(--bg); color: var(--text); }
.ledger-root .modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ledger-root .modal h2 { font-size: 1.25rem; margin-bottom: 20px; }
.ledger-root .form-group { margin-bottom: 16px; }
.ledger-root .form-group label, .ledger-root .form-group .form-label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-muted);
}
.ledger-root .radio-group { display: flex; align-items: center; gap: 12px; }
.ledger-root .form-group .radio-option {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 8px;
  margin-bottom: 0;
  padding: 9px 14px;
  border: 2px solid var(--border);
  border-radius: 30px;
  font-size: .95rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.ledger-root .form-group .radio-option:hover { border-color: var(--text-muted); }
.ledger-root .form-group .radio-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-bg, #eef3fd);
  color: var(--accent);
  font-weight: 600;
}
.ledger-root .form-group .radio-option input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.ledger-root .form-group .radio-option input[type="radio"]:focus { outline: none; }
.ledger-root .form-group .radio-option input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 50%;
}
.ledger-root .form-group input, .ledger-root .form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .95rem;
  /* --bg-input (not --surface) so fields stay distinguishable from the
     modal card behind them, especially on the dark theme. */
  background: var(--bg-input, #fafafa);
  color: var(--text);
}
.ledger-root .form-group input:focus, .ledger-root .form-group select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: transparent;
}
.ledger-root .form-hint { font-size: .78rem; color: var(--text-muted); margin-top: 4px; }

/* Date input: dd/mm/yyyy text field with the native picker behind the icon */
.ledger-root .date-input { position: relative; }
.ledger-root .date-input input[type="text"] { padding-right: 40px; }
.ledger-root .date-input-picker {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.ledger-root .form-group .date-input-picker input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}

/* Category autocomplete: existing categories drop down while typing */
.ledger-root .autocomplete { position: relative; }
.ledger-root .autocomplete-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 200px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-modal, 0 8px 24px rgba(16, 24, 40, .14));
  padding: 6px;
}
.ledger-root .autocomplete-option {
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 7px;
  background: none;
  text-align: left;
  font-family: inherit;
  font-size: .92rem;
  color: var(--text);
  cursor: pointer;
}
.ledger-root .autocomplete-option:hover { background: var(--bg); }
.ledger-root .autocomplete-new { color: var(--accent); font-weight: 600; }
@media (max-width: 640px) {
  /* 16px stops iOS from auto-zooming the page when an input gains focus */
  .ledger-root .form-group input, .ledger-root .form-group select { font-size: 16px; }
}
.ledger-root .form-row { display: flex; gap: 12px; }
.ledger-root .form-row .form-group { flex: 1 1 0; min-width: 0; }

/* iOS: date inputs have an intrinsic width and refuse to shrink inside flex
   rows, overlapping their neighbors. Normalize them to behave like text inputs. */
.ledger-root .form-group input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 41px;
  background: var(--bg-input, #fafafa);
}

/* ---------- Toggle switch ---------- */
.ledger-root .switch-amount-row { align-items: center; }
.ledger-root .switch-amount-hint { margin: -8px 0 16px; }
.ledger-root .switch-row { display: flex; align-items: center; gap: 12px; }
.ledger-root .switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}
.ledger-root .switch input { opacity: 0; width: 0; height: 0; }
.ledger-root .slider {
  position: absolute;
  inset: 0;
  background: var(--green);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s;
}
.ledger-root .slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}
.ledger-root .switch input:checked + .slider { background: var(--red); }
.ledger-root .switch input:checked + .slider::before { transform: translateX(22px); }
.ledger-root .switch input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 2px; }
.ledger-root .switch-label { font-weight: 600; font-size: .95rem; }
.ledger-root .switch-label.paid { color: var(--red); }
.ledger-root .switch-label.received { color: var(--green); }
.ledger-root .modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}
.ledger-root .modal-actions .right { display: flex; gap: 10px; margin-left: auto; }

.ledger-root footer {
  margin-top: 24px;
  text-align: center;
  font-size: .82rem;
  color: var(--text-muted);
}

/* (The standalone app's login styles were dropped — vaakya owns auth.) */

/* ---------- Sharing + history ---------- */

/* "shared · 2" / "by Priya" badge next to names in the table + party card */
.ledger-root .shared-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb, 52, 59, 224), 0.07);
  border: 1px solid rgba(var(--accent-rgb, 52, 59, 224), 0.18);
  color: var(--accent, #343BE0);
  font-size: .7rem;
  font-weight: 500;
  white-space: nowrap;
  vertical-align: middle;
}

/* ⋮ actions button beside the party card (Share / History live in its
   dropdown). position: relative anchors the dropdown below the button. */
.ledger-root .party-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  position: relative;
}
.ledger-root .party-actions-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  background: var(--surface);
  border: 1px solid var(--border-light, #eee);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 4px;
  z-index: 50;
}
.ledger-root .party-actions-dropdown button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: .85rem;
  text-align: left;
  cursor: pointer;
}
.ledger-root .party-actions-dropdown button:hover {
  background: var(--bg);
  color: var(--accent);
}
.ledger-root .party-actions-dropdown button svg { flex-shrink: 0; color: var(--text-muted); }
.ledger-root .party-actions-dropdown button:hover svg { color: var(--accent); }
.ledger-root .party-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-light, #eee);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.ledger-root .party-icon-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-bg, #eef3fd);
}
.ledger-root .party-icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .ledger-root .party-icon-btn { width: 34px; height: 34px; }
}

/* Share modal — user checklist */
.ledger-root .share-modal-hint {
  font-size: .82rem;
  color: var(--text-muted);
  margin: -10px 0 14px;
}
.ledger-root .share-list {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border-light, #eee);
  border-radius: 10px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ledger-root .share-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}
.ledger-root .share-list-row:hover { background: var(--bg-hover, #f7f7fa); }
.ledger-root .share-list-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.ledger-root .share-list-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.ledger-root .share-list-name {
  font-size: .9rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ledger-root .share-list-email {
  font-size: .74rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ledger-root .share-list-flag {
  flex-shrink: 0;
  font-size: .68rem;
  color: var(--amber);
  background: var(--amber-bg);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.ledger-root .share-list-empty {
  padding: 24px 10px;
  text-align: center;
  font-size: .88rem;
  color: var(--text-faint, #777);
}

/* History modal — audit trail rows */
.ledger-root .modal-history { max-width: 540px; }
.ledger-root .history-list {
  max-height: 380px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.ledger-root .history-row {
  padding: 10px 2px;
  border-bottom: 1px solid var(--border-light, #eee);
}
.ledger-root .history-row:last-child { border-bottom: none; }
.ledger-root .history-row-main {
  font-size: .87rem;
  line-height: 1.45;
  word-break: break-word;
}
.ledger-root .history-actor { font-weight: 600; }
.ledger-root .history-when {
  margin-top: 2px;
  font-size: .72rem;
  color: var(--text-faint, #777);
}

/* One-time "shared with you" note below the header (dismissed via OK →
   POST /api/ledger/ack-shared, stored server-side per member). */
.ledger-root .ledger-note {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(var(--accent-rgb, 52, 59, 224), 0.06);
  border: 1px solid rgba(var(--accent-rgb, 52, 59, 224), 0.18);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.ledger-root .ledger-note-text {
  flex: 1 1 auto;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text);
}
.ledger-root .ledger-note-text strong { color: var(--accent); }
.ledger-root .ledger-note-ok {
  flex-shrink: 0;
  padding: 7px 18px;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.ledger-root .ledger-note-ok:hover { background: var(--accent-hover); }
.ledger-root .ledger-note-ok:disabled { opacity: .7; cursor: default; }