/* ==========================================================================
   Nikhil Tracker - maroon & white theme
   ========================================================================== */

:root {
  --maroon-900: #3C060F;
  --maroon-800: #530A16;
  --maroon-700: #6E1022;
  --maroon-600: #85172C;
  --maroon-500: #9E2038;
  --maroon-300: #C97F8E;
  --maroon-100: #F6E7EA;
  --maroon-050: #FCF6F7;

  --white: #FFFFFF;
  --ink: #241318;
  --ink-soft: #6E5C61;
  --ink-faint: #9A8A8E;
  --line: #EBDEE1;
  --line-soft: #F4ECEE;

  --gain: #12794A;
  --gain-bg: #E9F6EF;
  --loss: #B3261E;
  --loss-bg: #FCEBEA;
  --warn: #96620B;
  --warn-bg: #FDF4E3;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(60, 6, 15, .06);
  --shadow-md: 0 6px 18px rgba(60, 6, 15, .09);
  --sidebar-w: 254px;

  --font: "Segoe UI", "Inter", system-ui, -apple-system, Arial, sans-serif;
  --mono: "Cascadia Mono", "Consolas", "SF Mono", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 650; }
p { margin: 0; }

button { font-family: inherit; font-size: inherit; cursor: pointer; }

::selection { background: var(--maroon-100); }

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 100%;
  height: 100vh;
  overflow: hidden;
}

/* ============================== SIDEBAR ================================== */

.sidebar {
  background: linear-gradient(178deg, var(--maroon-700) 0%, var(--maroon-800) 58%, var(--maroon-900) 100%);
  color: var(--white);
  display: flex;
  flex-direction: column;
  padding: 20px 0 14px;
  position: relative;
  z-index: 2;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.sidebar::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 1px;
  background: rgba(0, 0, 0, .25);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px 18px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 11px;
  background: var(--white);
  color: var(--maroon-700);
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
}

.brand-name {
  font-size: 16px;
  font-weight: 750;
  letter-spacing: 2.4px;
  line-height: 1.1;
}

.brand-sub {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 3.4px;
  color: var(--maroon-300);
  line-height: 1.4;
}

.sidebar-target {
  margin: 0 16px 20px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .13);
}

.sidebar-target-label {
  display: block;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--maroon-300);
  margin-bottom: 3px;
}

.sidebar-target strong {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.3px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(255, 255, 255, .8);
  text-align: left;
  font-size: 13.5px;
  font-weight: 550;
  transition: background .13s ease, color .13s ease;
}

.nav-item:hover { background: rgba(255, 255, 255, .1); color: var(--white); }

.nav-item.is-active {
  background: var(--white);
  color: var(--maroon-700);
  font-weight: 650;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}

.nav-item:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 1px;
}

.nav-ico { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px; }
.nav-ico svg { width: 18px; height: 18px; fill: currentColor; }
.nav-label { flex: 1; }

.nav-badge {
  min-width: 21px;
  padding: 1px 6px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .18);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.nav-item.is-active .nav-badge { background: var(--maroon-100); color: var(--maroon-700); }

.sidebar-foot {
  padding: 12px 20px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 10px;
}

.sidebar-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .82);
  margin-bottom: 4px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--maroon-300);
  flex: 0 0 7px;
}

.dot.is-ahead { background: #58D68D; }
.dot.is-behind { background: #F5B041; }

.sidebar-version { font-size: 10.5px; color: rgba(255, 255, 255, .45); }

/* ================================ MAIN =================================== */

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Without min-height:0 a flex item keeps its full content height and the
     scroll container below can never shrink, so nothing scrolls. */
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--maroon-050);
}

.topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 28px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.page-title { font-size: 21px; letter-spacing: -.3px; color: var(--maroon-800); }
.page-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }

.topbar-right { display: flex; align-items: center; gap: 12px; }

.today-chip {
  padding: 6px 13px;
  border-radius: 20px;
  background: var(--maroon-050);
  border: 1px solid var(--line);
  text-align: right;
}

.today-label {
  display: block;
  font-size: 9.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.today-chip strong { font-size: 12.5px; color: var(--maroon-800); }

.content {
  flex: 1 1 auto;
  min-height: 0;          /* the fix: lets this flex item shrink so it can scroll */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 22px 28px 40px;
}

.view { display: none; flex-direction: column; gap: 18px; }
.view.is-active { display: flex; }

/* ============================== SCROLLBARS =============================== */

.content::-webkit-scrollbar, .nav::-webkit-scrollbar, .table-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.content::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb {
  background: #DCC9CE; border-radius: 10px; border: 3px solid var(--maroon-050);
}
.nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); border-radius: 10px; }
.content::-webkit-scrollbar-track, .nav::-webkit-scrollbar-track { background: transparent; }

/* ================================ CARDS ================================== */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.card-head h2 { font-size: 14.5px; color: var(--maroon-800); }
.card-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.card-danger { border-color: #EFC9C6; background: #FFFCFC; }

.hint { font-size: 11.5px; color: var(--ink-faint); }
.muted { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.mono { font-family: var(--mono); font-size: 11px; word-break: break-all; }

.explain {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: -4px 0 14px;
  padding: 10px 13px;
  background: var(--maroon-050);
  border-left: 3px solid var(--maroon-300);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.explain-list { margin: 0; padding-left: 20px; font-size: 13px; color: var(--ink-soft); line-height: 1.75; }
.explain-list strong { color: var(--ink); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 1120px) { .two-col { grid-template-columns: 1fr; } }

.stack { display: flex; flex-direction: column; gap: 4px; }

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.row-between:last-child { border-bottom: 0; }

/* =============================== BANNERS ================================= */

.banner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  border-radius: var(--radius);
  color: var(--white);
  background: linear-gradient(120deg, var(--maroon-700), var(--maroon-600) 62%, var(--maroon-500));
  box-shadow: var(--shadow-md);
  flex-wrap: wrap;
}

.banner-main { flex: 1; min-width: 260px; }
.banner-label {
  font-size: 10.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--maroon-300);
  margin-bottom: 5px;
}
.banner-value { font-size: 27px; font-weight: 700; letter-spacing: -.5px; line-height: 1.15; }
.banner-note { font-size: 12.5px; color: rgba(255, 255, 255, .82); margin-top: 6px; line-height: 1.5; }

.banner-side {
  text-align: right;
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, .2);
  min-width: 150px;
}
.banner-side .banner-label { color: rgba(255, 255, 255, .6); }
.banner-side-value { font-size: 19px; font-weight: 700; }

.banner-pill {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 650;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
}

.notice {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.55;
  border: 1px solid;
}
.notice-warn { background: var(--warn-bg); border-color: #EBD5AA; color: #6B4708; }
.notice-warn strong { display: block; margin-bottom: 4px; }
.notice ul { margin: 6px 0 0; padding-left: 18px; }

/* ================================= KPIs ================================== */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 14px;
}

.kpi {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 17px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.kpi::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--maroon-300);
}
.kpi.is-gain::before { background: var(--gain); }
.kpi.is-loss::before { background: var(--loss); }
.kpi.is-warn::before { background: var(--warn); }

.kpi-label {
  font-size: 10.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.kpi-value { font-size: 21px; font-weight: 700; letter-spacing: -.4px; color: var(--maroon-800); }
.kpi-value.is-gain { color: var(--gain); }
.kpi-value.is-loss { color: var(--loss); }
.kpi-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 4px; line-height: 1.45; }

/* ================================ FORMS ================================== */

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 16px;
  align-items: start;
}

.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-wide { grid-column: span 2; }
@media (max-width: 760px) { .field-wide { grid-column: span 1; } }

.field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--ink-soft);
  letter-spacing: .2px;
}

.opt { font-weight: 500; color: var(--ink-faint); font-size: 10.5px; }

.field input, .field select {
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.field input:hover, .field select:hover { border-color: var(--maroon-300); }

.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--maroon-600);
  box-shadow: 0 0 0 3px rgba(133, 23, 44, .12);
}

.field input::placeholder { color: #C4B4B8; }
.field-note { font-size: 10.5px; color: var(--ink-faint); min-height: 13px; }

.seg { display: inline-flex; background: var(--maroon-050); border: 1px solid var(--line); border-radius: 20px; padding: 1px; }
.seg-btn {
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 650;
  padding: 2px 9px;
  border-radius: 20px;
  letter-spacing: .2px;
}
.seg-btn.is-on { background: var(--maroon-700); color: var(--white); }

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid var(--line-soft);
  margin-top: 2px;
}

.form-summary { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; flex: 1; min-width: 200px; }
.form-buttons { display: flex; gap: 9px; }

.check { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-soft); cursor: pointer; }
.check input { accent-color: var(--maroon-700); width: 14px; height: 14px; }

.mini-select {
  font-family: inherit;
  font-size: 12px;
  color: var(--ink);
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.mini-select:focus { outline: none; border-color: var(--maroon-600); }

/* =============================== BUTTONS ================================= */

.btn {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 8px 15px;
  font-size: 12.5px;
  font-weight: 620;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
  white-space: nowrap;
}

.btn:focus-visible { outline: 2px solid var(--maroon-600); outline-offset: 1px; }

.btn-primary { background: var(--maroon-700); color: var(--white); }
.btn-primary:hover { background: var(--maroon-600); }
.btn-primary:active { background: var(--maroon-800); }

.btn-ghost { background: var(--white); color: var(--maroon-700); border-color: var(--line); }
.btn-ghost:hover { background: var(--maroon-050); border-color: var(--maroon-300); }

.btn-danger { background: var(--loss); color: var(--white); }
.btn-danger:hover { background: #97201A; }

.btn-link {
  background: transparent;
  border: 0;
  color: var(--maroon-600);
  font-size: 12px;
  font-weight: 620;
  padding: 2px 0;
}
.btn-link:hover { text-decoration: underline; }

.btn-icon {
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink-faint);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
}
.btn-icon:hover { color: var(--loss); border-color: #EFC9C6; background: var(--loss-bg); }

/* ================================ TABLES ================================= */

.table-scroll { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

table.data th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 12px 8px;
  border-bottom: 1.5px solid var(--line);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--white);
}

table.data td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}

table.data tbody tr:hover { background: var(--maroon-050); }
table.data tbody tr:last-child td { border-bottom: 0; }

.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sym { font-weight: 650; color: var(--maroon-800); }
.gain { color: var(--gain); font-weight: 650; }
.loss { color: var(--loss); font-weight: 650; }
.flat { color: var(--ink-soft); }
.nowrap { white-space: nowrap; }
.sub { font-size: 11px; color: var(--ink-faint); }

tr.is-weekend td { background: #FDFAFA; }
tr.is-weekend:hover td { background: var(--maroon-050); }
tr.is-today td { box-shadow: inset 3px 0 0 var(--maroon-600); }

/* ================================= TAGS ================================== */

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag-buy { background: var(--maroon-100); color: var(--maroon-700); }
.tag-sell { background: #E7EFF9; color: #1B4C86; }
.tag-covered { background: var(--gain-bg); color: var(--gain); }
.tag-partial { background: var(--warn-bg); color: var(--warn); }
.tag-pending { background: var(--loss-bg); color: var(--loss); }
.tag-future { background: #F0EBEC; color: var(--ink-faint); }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--maroon-050);
  border: 1px solid var(--line);
  font-size: 10.5px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.chip strong { color: var(--maroon-800); font-weight: 650; }
.chip.is-neg { background: var(--loss-bg); border-color: #EFC9C6; }
.chip.is-neg strong { color: var(--loss); }

/* ================================= BARS ================================== */

.bar {
  position: relative;
  height: 7px;
  border-radius: 20px;
  background: var(--line-soft);
  overflow: hidden;
  min-width: 68px;
}

.bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 20px; background: var(--maroon-600); width: 0; }
.bar-fill.is-full { background: var(--gain); }
.bar-fill.is-partial { background: var(--warn); }

.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-row .bar { flex: 1; }
.bar-pct { font-size: 10.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }

/* =============================== LISTS =================================== */

.slim-list { display: flex; flex-direction: column; }

.slim-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line-soft);
}
.slim-row:last-child { border-bottom: 0; }

.slim-date { min-width: 92px; }
.slim-date strong { display: block; font-size: 12.5px; color: var(--maroon-800); }
.slim-date .sub { font-size: 10.5px; }
.slim-mid { flex: 1; min-width: 0; }
.slim-right { text-align: right; white-space: nowrap; }

.empty {
  padding: 34px 20px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.6;
}
.empty strong { display: block; color: var(--maroon-800); font-size: 14px; margin-bottom: 4px; }

.lots { margin: 0; padding: 0; list-style: none; }
.lots li {
  display: flex;
  gap: 14px;
  font-size: 11.5px;
  color: var(--ink-soft);
  padding: 3px 0;
}
.lots .num { min-width: 74px; }

details.lot-details summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--maroon-600);
  font-weight: 620;
  padding: 2px 0;
}
details.lot-details summary::marker { color: var(--maroon-300); }
details.lot-details[open] summary { margin-bottom: 4px; }

.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.about-item .kpi-label { margin-bottom: 3px; }
.about-item div:last-child { font-size: 12.5px; color: var(--ink); }

/* ================================ TOASTS ================================= */

.toast-wrap {
  position: fixed;
  bottom: 20px;
  right: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 50;
  pointer-events: none;
}

.toast {
  min-width: 250px;
  max-width: 400px;
  padding: 12px 15px;
  border-radius: var(--radius-sm);
  background: var(--maroon-800);
  color: var(--white);
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: 0 8px 24px rgba(60, 6, 15, .3);
  border-left: 3px solid var(--maroon-300);
  animation: toast-in .18s ease-out;
}

.toast.is-error { background: #7E1C17; border-left-color: #F0A9A4; }
.toast.is-success { background: #0E5F3A; border-left-color: #7BD9AC; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* small utilities */
.sub-spaced { margin-top: 4px; }

/* ============================= F&O BOOK ================================== */

/* Auto-calculated amount fields - visibly not editable. */
.field input[readonly] {
  background: var(--maroon-050);
  border-style: dashed;
  color: var(--maroon-800);
  font-weight: 650;
  cursor: default;
}
.field input[readonly]:hover { border-color: var(--line); }

/* Per-date subtotal inside the F&O table. */
tr.subtotal td {
  background: var(--maroon-050);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--ink-soft);
  padding-top: 7px;
  padding-bottom: 7px;
}
tr.subtotal:hover td { background: var(--maroon-100); }

tr.grand-total td {
  background: var(--maroon-700);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 650;
  border: 0;
  padding-top: 11px;
  padding-bottom: 11px;
}
tr.grand-total td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
tr.grand-total td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
tr.grand-total .gain { color: #7BD9AC; }
tr.grand-total .loss { color: #F5A9A4; }
tr.grand-total .flat { color: rgba(255, 255, 255, .8); }

table.data tfoot tr td { border-bottom: 0; }

/* F&O contributions in the target ledger read differently from equity. */
.chip.is-fno { background: #EEE9F7; border-color: #D6CCEA; }
.chip.is-fno strong { color: #4A2E8C; }

/* ======================= TARGET MODE / MULTI-LEDGER ====================== */

.is-hidden { display: none !important; }

/* ---- mode picker in Settings ---- */

.mode-picker {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 900px) { .mode-picker { grid-template-columns: 1fr; } }

.mode-picker-label {
  grid-column: 1 / -1;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--ink-soft);
  letter-spacing: .2px;
  margin-bottom: 2px;
}

/* The settings form is not a grid, so give the action bar its own spacing. */
#settingsForm .form-actions { margin-top: 18px; }

.mode-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.mode-option:hover { border-color: var(--maroon-300); background: var(--maroon-050); }

.mode-option.is-on {
  border-color: var(--maroon-700);
  background: var(--maroon-050);
  box-shadow: 0 0 0 3px rgba(133, 23, 44, .1);
}

.mode-option input {
  accent-color: var(--maroon-700);
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  flex: 0 0 15px;
}

.mode-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mode-body strong { font-size: 13px; color: var(--maroon-800); }
.mode-desc { font-size: 11.5px; color: var(--ink-soft); line-height: 1.5; }

/* ---- grouped settings ---- */

.settings-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  align-items: start;
}

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--maroon-050);
}

.settings-group-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--maroon-700);
  margin: 0;
}

.settings-group .field input { background: var(--white); }

/* ---- ledger tabs ---- */

.track-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.track-tab {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 12px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: border-color .12s ease, background .12s ease;
}
.track-tab:hover { border-color: var(--maroon-300); }

.track-tab.is-on {
  border-color: var(--maroon-700);
  background: linear-gradient(120deg, var(--maroon-700), var(--maroon-600));
  color: var(--white);
}

.track-tab-label { font-size: 14px; font-weight: 700; color: var(--maroon-800); }
.track-tab.is-on .track-tab-label { color: var(--white); }

.track-tab-meta { font-size: 11px; color: var(--ink-faint); }
.track-tab.is-on .track-tab-meta { color: rgba(255, 255, 255, .8); }

/* ---- stacked / split banners ---- */

.banner-stack { display: grid; gap: 14px; }
.banner-stack.is-split { grid-template-columns: 1fr 1fr; }
@media (max-width: 1240px) { .banner-stack.is-split { grid-template-columns: 1fr; } }

.banner-stack.is-split .banner { padding: 17px 19px; }
.banner-stack.is-split .banner-value { font-size: 21px; }
.banner-stack.is-split .banner-main { min-width: 180px; }
.banner-stack.is-split .banner-side { min-width: 110px; padding-left: 14px; }
.banner-stack.is-split .banner-side-value { font-size: 16px; }

.banner-scope {
  display: inline-block;
  margin-right: 7px;
  padding: 1px 7px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .2);
  color: var(--white);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* ---- small list heading, used when two ledgers share a panel ---- */

.slim-head {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--maroon-700);
  padding: 10px 0 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}
.slim-head:first-child { padding-top: 0; }

/* Data-integrity warning: louder than a normal notice, because ignoring it
   means totals are being computed from incomplete history. */
.notice-error {
  background: var(--loss-bg);
  border-color: #EFC9C6;
  color: #7E1C17;
}
.notice-error strong { display: block; margin-bottom: 4px; }
.notice-error .sub { color: #9A5450; }
.notice-error .muted { color: #9A5450; }

/* ==========================================================================
   RESPONSIVE / MOBILE
   The same markup serves desktop and phone. The sidebar becomes a bottom tab
   bar rather than a second layout, so a new page never has to be built twice.
   ========================================================================== */

/* ---- narrow desktop / tablet: tighten the sidebar ---- */
@media (max-width: 1000px) {
  :root { --sidebar-w: 76px; }

  .brand { justify-content: center; padding: 0 0 16px; }
  .brand-text,
  .sidebar-target,
  .nav-label,
  .nav-badge,
  .sidebar-status,
  .sidebar-version { display: none; }

  .nav { padding: 0 8px; }
  .nav-item { justify-content: center; padding: 12px 0; }
  .sidebar-foot { display: none; }

  .topbar { padding: 14px 18px; }
  .content { padding: 16px 18px 32px; }
}

/* ---- phone: bottom tab bar ---- */
@media (max-width: 720px) {
  :root { --sidebar-w: 0; }

  .app {
    grid-template-columns: 1fr;
    /* content first, nav pinned underneath */
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .main { grid-row: 1; }

  .sidebar {
    grid-row: 2;
    height: auto;
    min-height: 0;
    padding: 0;
    flex-direction: row;
    /* clears the iPhone home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 14px rgba(60, 6, 15, .28);
  }

  /* the vertical divider becomes a top edge */
  .sidebar::after { inset: 0 0 auto 0; width: auto; height: 1px; }

  .brand { display: none; }

  .nav {
    flex-direction: row;
    gap: 0;
    padding: 0;
    width: 100%;
    overflow: visible;
  }

  .nav-item {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    padding: 9px 2px 7px;
    border-radius: 0;
    justify-content: center;
  }

  .nav-item.is-active {
    background: transparent;
    color: var(--white);
    box-shadow: inset 0 3px 0 var(--white);
  }

  .nav-item.is-active .nav-ico { transform: translateY(-1px); }

  /* labels come back, small, under the icon */
  .nav-label {
    display: block;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .1px;
    text-align: center;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  .nav-ico svg { width: 20px; height: 20px; }

  /* the count would not fit; the page itself shows it */
  .nav-badge { display: none; }

  /* ---- topbar ---- */
  .topbar { padding: 12px 14px; gap: 10px; }
  .page-title { font-size: 17px; }
  .page-sub { display: none; }
  .today-chip { padding: 4px 10px; }
  .today-label { display: none; }
  #btnRefresh { display: none; }

  /* ---- content ---- */
  .content { padding: 14px 14px 26px; }
  .view { gap: 14px; }

  .card { padding: 14px; border-radius: 10px; }
  .card-head { margin-bottom: 11px; gap: 8px; }
  .card-head h2 { font-size: 13.5px; }

  /* single column everywhere - two columns on a phone is unreadable */
  .form-grid,
  .two-col,
  .settings-columns,
  .mode-picker { grid-template-columns: 1fr; }

  .field-wide { grid-column: span 1; }

  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: 12px 13px; }
  .kpi-value { font-size: 17px; }
  .kpi-label { font-size: 9.5px; letter-spacing: .8px; }

  .banner { padding: 15px 16px; gap: 12px; }
  .banner-value { font-size: 19px; }
  .banner-side {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .2);
    padding-top: 10px;
    min-width: 0;
    flex: 1 1 44%;
    text-align: left;
  }

  .track-tabs { gap: 8px; }
  .track-tab { flex: 1 1 100%; padding: 10px 12px; }

  /* tables stay usable by scrolling sideways inside their card */
  .table-scroll { margin: 0 -14px; padding: 0 14px; }
  table.data { font-size: 11.5px; }
  table.data th { font-size: 9px; letter-spacing: .6px; padding: 0 8px 7px; }
  table.data td { padding: 8px; }

  /* touch targets */
  .btn { padding: 10px 15px; }
  .btn-icon { padding: 6px 10px; }
  .field input, .field select { padding: 11px 11px; font-size: 15px; }
  .mini-select { padding: 8px 9px; font-size: 13px; }

  .form-actions { flex-direction: column; align-items: stretch; }
  .form-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .form-buttons .btn { width: 100%; }

  .row-between { flex-direction: column; align-items: flex-start; gap: 8px; }

  .toast-wrap { left: 12px; right: 12px; bottom: 12px; }
  .toast { min-width: 0; max-width: none; }
}

/* ---- very narrow: six tabs need to shrink further ---- */
@media (max-width: 400px) {
  .nav-label { font-size: 8px; }
  .nav-ico svg { width: 18px; height: 18px; }
  .nav-item { padding: 8px 1px 6px; }
  .kpi-grid { grid-template-columns: 1fr; }
}

/* ================================= SYNC ================================== */

.sidebar-sync {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin: 4px 0 6px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  font-size: 11.5px;
  font-weight: 550;
  text-align: left;
  border-radius: 5px;
}
.sidebar-sync:hover { color: var(--white); }
.sidebar-sync:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

.sync-grid { margin-bottom: 12px; }
.sync-detail { margin: 0 0 14px; font-size: 12px; }

/* On a phone the sidebar is a tab bar, so the badge moves to the topbar chip. */
@media (max-width: 1000px) {
  .sidebar-sync { display: none; }
}

/* ==========================================================================
   MOBILE SAFE AREAS
   The build sets viewport-fit=cover so the maroon bar reaches the very bottom
   of the screen. The cost is that the page also extends UNDER the status bar
   and the gesture bar, so every edge has to inset itself back out again.
   `max(env(...), fallback)` because some browsers report 0 for these.
   ========================================================================== */

@media (max-width: 720px) {

  /* ---- top: clear the clock and signal icons ---- */
  .topbar {
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }

  .content {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }

  /* ---- bottom tab bar ---- */
  .sidebar {
    /* The base rule hides overflow for the desktop column layout; as a
       horizontal bar that clipped the icons. */
    overflow: visible;
    padding: 0 0 max(env(safe-area-inset-bottom, 0px), 6px);
  }

  .nav {
    align-items: stretch;
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
  }

  /* A real touch target, and tall enough that the label is never cut off. */
  .nav-item {
    min-height: 50px;
    padding: 7px 2px 6px;
    gap: 4px;
  }

  /*
   * In a column flex container `flex-basis` applies to HEIGHT, so the desktop
   * `flex: 0 0 18px` was pinning the icon box to 18px while the mobile rule
   * asked for a 20px SVG inside it. That mismatch is what clipped the icons.
   */
  .nav-ico {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
  }
  .nav-ico svg { width: 22px; height: 22px; }

  .nav-label {
    display: block;
    font-size: 9.5px;
    line-height: 1.15;
  }

  /* Toasts must clear the tab bar rather than sit behind it. */
  .toast-wrap {
    bottom: calc(64px + max(env(safe-area-inset-bottom, 0px), 6px));
  }
}

/* Very narrow screens: six tabs still have to fit without clipping. */
@media (max-width: 400px) {
  .nav-item { min-height: 48px; padding: 6px 1px 5px; }
  .nav-ico, .nav-ico svg { width: 20px; height: 20px; }
  .nav-label { font-size: 8.5px; }
}

/* Short screens in landscape: drop the labels rather than eat the content. */
@media (max-width: 720px) and (max-height: 460px) {
  .nav-label { display: none; }
  .nav-item { min-height: 40px; }
}

/* ==========================================================================
   BOTTOM TAB BAR - GUARANTEED VISIBLE ON EVERY PHONE
   --------------------------------------------------------------------------
   Two independent problems were cutting the bar off, so both are fixed here.

   1. `height: 100vh` on mobile means the viewport at its TALLEST - as if the
      browser toolbars were hidden. Whenever they are actually shown, the real
      area is shorter, so the bottom of a 100vh box lands below the fold. This
      is why the bar looked cropped on iPhone and on OnePlus/Samsung Chrome.
      `dvh` tracks the genuinely visible area instead.

   2. Even with correct sizing, a bar in normal flow can still be pushed out by
      a keyboard, a URL bar animation, or a rounding error. Taking it out of
      flow with `position: fixed` means it physically cannot be displaced, and
      the scroll area simply reserves room for it.

   Tested-by-construction against: iPhone with notch or Dynamic Island (top and
   bottom insets), OnePlus and Samsung with gesture bars, and older Androids
   with on-screen buttons - all handled by env(safe-area-inset-*) with a
   guaranteed minimum, since several of those report 0.
   ========================================================================== */

:root {
  /* Height of the tab bar itself, excluding the device's bottom inset. */
  --nav-h: 58px;
  --nav-inset: max(env(safe-area-inset-bottom, 0px), 8px);
}

.app {
  height: 100vh;   /* fallback for browsers without dvh */
  height: 100dvh;
}

@media (max-width: 720px) {

  /* The bar is fixed, so the grid no longer needs a row for it. */
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: 100%;
  }

  .main {
    grid-row: 1;
    grid-column: 1;
    min-height: 0;
  }

  .sidebar {
    position: fixed;
    inset: auto 0 0 0;          /* pinned to the bottom edge */
    z-index: 40;
    height: auto;
    min-height: var(--nav-h);
    flex-direction: row;
    align-items: stretch;
    overflow: visible;
    padding: 0 0 var(--nav-inset);
  }

  .nav {
    flex-direction: row;
    align-items: stretch;
    min-height: var(--nav-h);
    width: 100%;
    padding: 0 max(0px, env(safe-area-inset-right, 0px)) 0 max(0px, env(safe-area-inset-left, 0px));
    overflow: visible;
  }

  .nav-item {
    min-height: var(--nav-h);
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
  }

  .nav-ico,
  .nav-ico svg { width: 22px; height: 22px; flex: 0 0 auto; }

  .nav-label { display: block; font-size: 9.5px; line-height: 1.1; }

  /*
   * Reserve room at the end of the scroll area, otherwise the last table row or
   * the Save button on a form would sit permanently behind the bar.
   */
  .content {
    padding-bottom: calc(var(--nav-h) + var(--nav-inset) + 18px);
    /* Stops a rubber-band scroll from dragging the whole page and revealing a
       gap underneath the fixed bar. */
    overscroll-behavior-y: contain;
  }

  .toast-wrap {
    bottom: calc(var(--nav-h) + var(--nav-inset) + 12px);
  }
}

/* Small phones: shrink the bar rather than let the labels wrap or clip. */
@media (max-width: 380px) {
  :root { --nav-h: 52px; }
  .nav-ico, .nav-ico svg { width: 20px; height: 20px; }
  .nav-label { font-size: 8.5px; }
  .nav-item { padding: 5px 1px; }
}

/*
 * Landscape, or a phone with the keyboard open: vertical space is scarce, so
 * drop the labels and keep the icons rather than eat into the content.
 */
@media (max-width: 900px) and (max-height: 480px) {
  :root { --nav-h: 44px; }
  .nav-label { display: none; }
  .nav-item { padding: 4px 1px; }
}

/* ---- market ticker link ---- */

.ticker-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--line-soft);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .2px;
}

/* A user-confirmed link reads differently from a lucky guess. */
.ticker-tag.is-linked {
  background: var(--maroon-100);
  color: var(--maroon-700);
}

.btn-link-ticker { margin-left: 6px; }
.btn-link-ticker:hover { color: var(--maroon-700); border-color: var(--maroon-300); background: var(--maroon-050); }

/* ---- edit affordances ---- */

/* Delete is destructive and already reads red on hover; edit must not. */
.btn-icon.btn-edit:hover {
  color: var(--maroon-700);
  border-color: var(--maroon-300);
  background: var(--maroon-050);
}

/* Make it obvious the form has switched from "add" to "edit an existing row". */
.card.is-editing {
  border-color: var(--maroon-600);
  box-shadow: 0 0 0 3px rgba(133, 23, 44, .1);
}
.card.is-editing .card-head h2 { color: var(--maroon-700); }