/* commons-web — generic components: controls, segmented, tables, feedback, dialog. Extracted verbatim from finance-app web/styles.css
   (restructuring Phase 3). Loads BEFORE the app stylesheet, so an app rule of
   equal specificity always wins a tie against anything here. */

/* --- controls ------------------------------------------------------------- */
button, select, input {
  font: inherit; padding: .4rem .7rem; border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--ink), .14); background: transparent; color: inherit;
}
button { cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.link { border: 0; padding: .3rem .4rem; opacity: .75; text-decoration: underline; }
label.inline { display: inline-flex; align-items: center; gap: .4rem; }
.control-label { font-size: .78rem; opacity: .65; white-space: nowrap; }

/* Segmented control. Introduced here rather than in Phase 1 because the theme
   switch is the first instance of it, and every filter row in the redesign
   reuses the same shape: a track at 7% ink, the selected key filled with
   --seg at weight 600. */
.segmented { display: inline-flex; padding: 3px; border-radius: 9px; background: rgba(var(--ink), .07); }
.segmented button {
  height: 28px; padding: 0 12px; border: 0; border-radius: 7px;
  background: transparent; color: rgba(var(--ink), .6); font-size: 13px;
}
.segmented button[aria-pressed="true"] { background: var(--seg); color: var(--text); font-weight: 600; }

/* A control that has no bearing on the current view — the month picker on a
   tab that is not period-scoped. Dimmed rather than disabled, because setting
   a month here and then switching to a period-scoped tab is a normal thing to
   do and still works. */
.inactive { opacity: .45; }
.field { display: grid; gap: .2rem; margin-bottom: .7rem; }
.field > span { font-size: .82rem; opacity: .7; }
/* --- tables --------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid rgba(var(--ink), .07); white-space: nowrap; }
th {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; opacity: .6;
  border-bottom-color: rgba(var(--ink), .1);
}
tbody tr:hover { background: rgba(var(--ink), .06); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* --- feedback ------------------------------------------------------------- */
.muted { opacity: .6; }
.error { color: var(--danger); }

/* Signed money. Expenses are stored negative and income positive, so the sign
   alone carries the classification — nothing needs to consult `type`. */
.pos { color: var(--pos); }
.neg { color: var(--neg); }

/* Status pill. The fill is the role colour mixed down to a wash rather than a
   fixed pale hex, so a single declaration reads correctly on both themes —
   the light hexes the Apps Script app used would be near-white on the dark one. */
.badge {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
  background: rgba(var(--ink), .09); color: inherit;
}

.toast {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  padding: .6rem 1rem; border-radius: 10px; border: 1px solid rgba(var(--ink), .14);
  /* Was `Canvas`, which resolved from the UA's colour scheme and would now
     disagree with an explicitly chosen theme. */
  background: var(--menu); color: var(--text);
  box-shadow: 0 6px 24px rgb(0 0 0 / .18); z-index: 5; max-width: 90vw;
}
.toast.error { border-color: var(--danger); color: var(--danger); }
/* --- modal ---------------------------------------------------------------- */
dialog {
  border: 1px solid rgba(var(--ink), .14); border-radius: var(--radius-lg); padding: 1.2rem;
  min-width: min(26rem, 92vw); color: var(--text); background: var(--menu);
}
dialog::backdrop { background: rgb(0 0 0 / .45); }
dialog h2 { margin: 0 0 .8rem; font-size: 1.1rem; }
dialog menu { display: flex; justify-content: flex-end; gap: .5rem; padding: 0; margin: 1rem 0 0; }