/* mvexpense — the app's own controls: overlay, select, date picker, icons.
   These replace window.confirm, the native <select> menu and the native date
   picker, none of which can be made to match the rest of the app. */

/* ── icons ──────────────────────────────────────────────────────────────── */
/* Sized in em so an icon scales with the text it sits beside, and inherits
   currentColor so it needs no separate dark-mode treatment. */
.ic{
  width:1.15em; height:1.15em;
  flex:0 0 auto;
  display:inline-block;
  vertical-align:-0.18em;
  color:inherit;
}

/* ── overlay (confirm) ──────────────────────────────────────────────────── */
body.is-locked{overflow:hidden}
.ovl{position:fixed; inset:0; z-index:200; display:flex;
  align-items:flex-end; justify-content:center}
.ovl__back{position:absolute; inset:0; background:rgba(8,12,9,.5)}
.ovl__panel{
  position:relative; width:100%; max-width:440px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r) var(--r) 0 0;
  padding:22px var(--page) calc(20px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:12px;
  box-shadow:var(--shadow);
}
@media (min-width:600px){
  .ovl{align-items:center}
  .ovl__panel{border-radius:var(--r)}
}
.ovl__title{font-size:17px; font-weight:700; letter-spacing:-.01em}
.ovl__body{font-size:14px; color:var(--ink-2); line-height:1.55; white-space:pre-line}
.ovl__actions{display:flex; gap:10px; justify-content:flex-end; margin-top:6px; flex-wrap:wrap}
.ovl__actions .btn{flex:1 1 auto; min-width:120px}
@media (min-width:520px){ .ovl__actions .btn{flex:0 0 auto} }

.btn--danger{background:var(--alarm); color:#fff}
.btn--danger:hover{filter:brightness(1.08)}

/* ── select ─────────────────────────────────────────────────────────────── */
.sel{position:relative; display:block}
.sel__native{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.sel__btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; min-height:var(--tap); padding:12px 13px;
  font:inherit; font-size:16px; text-align:left;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r); cursor:pointer;
}
.sel__btn:hover{border-color:var(--line-2); background:var(--surface-2)}
.sel.is-open .sel__btn{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-2)}
.sel__val{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sel__chev{transform:rotate(90deg); color:var(--ink-3); transition:transform .12s}
.sel.is-open .sel__chev{transform:rotate(-90deg)}

.sel__menu{
  position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:120;
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r); box-shadow:var(--shadow);
  max-height:260px; overflow-y:auto; padding:4px;
}
.sel.is-up .sel__menu{top:auto; bottom:calc(100% + 4px)}
/* The menu matches the control's width, so it cannot overflow sideways the way
   the date popover can — but clamp it anyway for a very long option label. */
.sel__menu{max-width:calc(100vw - 24px)}
.sel__menu[hidden]{display:none}
.sel__opt{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; min-height:42px; padding:9px 11px;
  font:inherit; font-size:15px; text-align:left;
  color:var(--ink); background:transparent; border:0;
  border-radius:2px; cursor:pointer;
}
.sel__opt:hover,.sel__opt:focus-visible{background:var(--surface-2); outline:none}
.sel__opt.is-on{color:var(--accent); font-weight:600}
.sel__tick{color:var(--accent)}

/* ── date picker ────────────────────────────────────────────────────────── */
.dp{position:relative; display:block}
.dp__input{cursor:pointer; padding-right:46px !important}
.dp__open{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; display:grid; place-items:center;
  background:transparent; border:0; border-radius:var(--r);
  color:var(--ink-3); cursor:pointer;
}
.dp__open:hover{background:var(--surface-2); color:var(--ink)}
.dp__pop{
  position:absolute; left:0; z-index:130; top:calc(100% + 4px);
  width:min(300px, calc(100vw - 32px));
  background:var(--surface); border:1px solid var(--line-2);
  border-radius:var(--r); box-shadow:var(--shadow); padding:12px;
}
.dp.is-up .dp__pop{top:auto; bottom:calc(100% + 4px)}
/* Pinned to the field's right edge when the left-aligned popover would hang
   off the side of the screen. */
.dp__pop.is-right{left:auto; right:0}
/* Last resort on a very narrow screen: centred against the viewport rather
   than the field, so it can never be clipped by either edge. */
.dp__pop.is-fixed{
  position:fixed; left:50%; right:auto; top:auto;
  transform:translateX(-50%);
  bottom:max(12px, env(safe-area-inset-bottom));
  width:min(320px, calc(100vw - 24px));
}
.dp__pop[hidden]{display:none}
.dp__head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px}
.dp__title{font-size:14px; font-weight:600}
.dp__nav{
  width:32px; height:32px; display:grid; place-items:center;
  background:transparent; color:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r); cursor:pointer;
}
.dp__nav:hover{background:var(--surface-2); color:var(--ink)}
.dp__grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.dp__dow{
  display:grid; place-items:center; height:26px;
  font-size:10.5px; font-weight:600; color:var(--ink-3);
  text-transform:uppercase; letter-spacing:.04em;
}
.dp__pad{height:34px}
.dp__day{
  height:34px; display:grid; place-items:center;
  font-family:var(--mono); font-size:13px;
  color:var(--ink); background:transparent;
  border:0; border-radius:2px; cursor:pointer;
}
.dp__day:hover{background:var(--surface-2)}
.dp__day.is-today{box-shadow:inset 0 0 0 1px var(--line-2)}
.dp__day.is-on{background:var(--accent); color:var(--accent-ink); font-weight:600}
.dp__foot{display:flex; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}
.dp__foot .btn{flex:1}

/* ── tabs ───────────────────────────────────────────────────────────────── */
/* Scrolls sideways rather than wrapping to two rows: a wrapped tab strip
   changes height as you move between views, and the page jumps under you. */
.tabs{
  display:flex; gap:4px; overflow-x:auto; scrollbar-width:none;
  background:var(--surface-2); border-radius:var(--r); padding:4px;
}
.tabs::-webkit-scrollbar{display:none}
.tabs__btn{
  flex:1 0 auto; min-height:38px; padding:8px 14px;
  font:inherit; font-size:13.5px; font-weight:600; white-space:nowrap;
  color:var(--ink-3); background:transparent;
  border:0; border-radius:2px; cursor:pointer;
}
.tabs__btn:hover{color:var(--ink-2)}
.tabs__btn.is-on{background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}

[data-panel][hidden]{display:none}

/* ── "show more" on a truncated list ────────────────────────────────────── */
.more-row{
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; min-height:40px; margin-top:6px;
  font:inherit; font-size:13px; font-weight:600;
  color:var(--accent); background:transparent;
  border:0; border-top:1px solid var(--line); border-radius:0; cursor:pointer;
}
.more-row:hover{background:var(--surface-2)}
.more-row .ic{width:1em; height:1em; transition:transform .15s}
.more-row.is-open .ic{transform:rotate(90deg)}


/* ── bottom tab bar ─────────────────────────────────────────────────────────
   Lives here, not in a page stylesheet. It was in style/expenses.css, so the
   household page — which did not load that file — rendered the markup with no
   styling at all and the nav simply vanished. Global chrome belongs in the
   stylesheet every page already has.

   The active tab is marked by weight, colour AND a rule above it: colour alone
   is not enough to read at a glance, or at all for some people. */
/* ── bottom tab bar ─────────────────────────────────────────────────────── */
/* On every signed-in screen, and sized to be hit with a thumb without looking.
   The active tab is marked by weight, colour AND a rule above it — colour
   alone is not enough to read at a glance, or at all for some people. */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; background:var(--surface);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -1px 12px -6px rgba(16,22,26,.25);
}
.tabbar__item{
  position:relative;
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:11px 2px 12px; min-height:66px;
  font-size:12px; font-weight:600; letter-spacing:-.005em;
  color:var(--ink-3); text-decoration:none;
}
.tabbar__item:hover{text-decoration:none; color:var(--ink-2)}
.tabbar__item .ic{width:23px; height:23px; stroke-width:1.9}
.tabbar__item.is-on{color:var(--accent); font-weight:700}
.tabbar__item.is-on::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:34px; height:2.5px; background:var(--accent); border-radius:0 0 2px 2px;
}
.tabbar__item.is-soon{opacity:.4; cursor:default}

/* The bar is fixed, so every screen needs room under its content for it. */
.app{padding-bottom:110px}

/* Every screen needs room under its content for the fixed bar. */
.app, .home, .hh{padding-bottom:110px}

/* ── detail panel ───────────────────────────────────────────────────────── */
.ovl__panel--tall{max-width:520px; max-height:86dvh; padding-top:16px}
.ovl__head{display:flex; align-items:flex-start; gap:12px}
.ovl__head .ovl__title{flex:1 1 auto}
.ovl__sub{margin-top:2px}
.ovl__x{
  flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center;
  background:transparent; color:var(--ink-3);
  border:1px solid var(--line); border-radius:var(--r); cursor:pointer;
}
.ovl__x:hover{background:var(--surface-2); color:var(--ink)}
.ovl__content{overflow-y:auto; -webkit-overflow-scrolling:touch; margin-top:4px}

/* Rows inside the panel reuse the ledger's entry styling. */
.ovl__content .entry:first-child{border-top:0}