:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --border: #dde1e6;
  --text: #1f2430;
  --muted: #667085;
  --primary: #2f5fd8;
  --primary-hover: #24499f;
  --danger: #c0392b;
  --danger-bg: #fbeae8;
  --success-bg: #eafaf1;
  --success-text: #1e7e45;
  --radius: 8px;
}

* { box-sizing: border-box; }

/* The `hidden` attribute is how every screen/section toggle in app.js
   works (showScreen, logout, etc). By default that's safe, but ANY
   selector below that sets `display` on the same element (e.g.
   `.topbar-account { display: flex }`) silently wins over the browser's
   default `[hidden] { display: none }` UA rule, because author CSS
   always beats user-agent CSS regardless of selector specificity. This
   was bug #4 - the logged-in pseudonym stayed visible after logout even
   though `hidden` was correctly being set on its container. This one
   rule makes `hidden` always win, for every element, permanently. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.menu-wrapper {
  position: relative;
}

.menu-btn {
  font-size: 1.1rem;
  line-height: 1;
}

.menu-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.35rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
  min-width: 170px;
  z-index: 20;
  overflow: hidden;
}

.menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.9rem;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
}

.menu-item:hover {
  background: #f0f1f3;
}

.topbar-account {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.topbar-sep {
  color: var(--border);
}

.motto-banner {
  font-style: italic;
  color: var(--muted);
  padding: 0 0 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.success-box {
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  background: var(--success-bg);
  color: var(--success-text);
  font-size: 0.9rem;
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.screen h1 {
  margin-top: 0;
  font-size: 1.5rem;
}

/* Scoped to #screen-settings specifically (not a bare ".screen h2" rule)
   because the dashboard already uses an <h2> for the current category
   name (#currentTypeName) with its own different styling. */
#screen-settings h2 {
  font-size: 1.1rem;
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

#screen-settings h2:first-of-type {
  margin-top: 1.5rem;
}

.muted {
  color: var(--muted);
  font-size: 0.92rem;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
}

label .muted {
  font-weight: 400;
}

input[type="text"],
input[type="password"],
input[type="datetime-local"],
textarea {
  font: inherit;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
}

input:focus,
textarea:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

textarea { resize: vertical; font-family: inherit; }

.button-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

.btn {
  font: inherit;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.btn:hover { background: #f0f1f3; }

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.btn-primary:hover { background: var(--primary-hover); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

.btn-danger {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.btn-danger:hover { background: #962d22; }

.btn:disabled { opacity: 0.6; cursor: default; }

/* A disabled primary button is grey, not a faded blue - so "nothing to
   save yet" reads clearly differently from "click me" (e.g. the item
   Save button, which stays disabled until something actually changes). */
.btn-primary:disabled,
.btn-primary:disabled:hover {
  background: #c3c8d0;
  border-color: #c3c8d0;
  color: #fff;
  opacity: 1;
}

#screen-settings h2.danger-heading { color: var(--danger); }

.btn-small {
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
}

.btn-link {
  background: none;
  border: none;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  align-self: flex-start;
  font: inherit;
  font-size: 0.9rem;
}

.error-box {
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 0.9rem;
}

.credential-box {
  margin-top: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.credential-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.credential-value {
  font-family: "SF Mono", Consolas, monospace;
  font-size: 1.15rem;
  word-break: break-all;
  margin-bottom: 0.6rem;
}

.checkbox-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  font-weight: 400;
  font-size: 0.92rem;
}

.checkbox-row input { width: auto; }

.dashboard-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.type-nav {
  flex: 0 0 200px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem;
}

.type-nav-header {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

#typeList {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

#typeList li button {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  color: var(--text);
}

#typeList li button:hover { background: #f0f1f3; }

#typeList li.active button {
  background: var(--primary);
  color: #fff;
}

.add-type-form {
  display: flex;
  gap: 0.4rem;
  margin-top: 0;
}

.add-type-form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
}

.type-panel {
  flex: 1 1 360px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  min-height: 200px;
  /* Without this, a flex item can't shrink below its content's natural
     width, so one long (nowrap) headline in the catalog would push the
     whole panel wider than the page instead of being cut off with "...". */
  min-width: 0;
}

.type-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.type-panel-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

.object-form-row {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}

.inline-label {
  flex: 1 1 auto;
}

.object-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.object-item {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
}

.object-item textarea {
  width: 100%;
  margin-bottom: 0.5rem;
}

.object-item-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.object-item-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ---- Catalog (list view) ---- */

.object-list-toolbar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.object-list-toolbar input[type="search"] {
  flex: 1 1 200px;
  min-width: 0;
  font: inherit;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
}

.object-list-toolbar select {
  font: inherit;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
}

.object-count { font-size: 0.85rem; }

/* Rows are compact and share one border, like a table - the list only
   needs to answer "which one do I want?"; editing happens in the
   detail view. */
.object-list.catalog {
  gap: 0;
  margin-top: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.object-list.catalog > li + li { border-top: 1px solid var(--border); }

.object-list.catalog > li.muted { padding: 0.75rem; }

.object-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.55rem 0.75rem;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
  color: var(--text);
  cursor: pointer;
}

.object-row:hover,
.object-row:focus-visible { background: #f0f1f3; }

.object-row-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}

.object-row-meta {
  flex: 0 0 auto;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.8rem;
  color: var(--muted);
}

.object-row.is-inactive .object-row-title {
  color: var(--muted);
  font-weight: 400;
  text-decoration: line-through;
}

.badge {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: #eef0f3;
  font-size: 0.75rem;
  white-space: nowrap;
}

.badge-overdue {
  background: var(--danger-bg);
  color: var(--danger);
}

/* ---- Detail view ---- */

.detail-back {
  padding-left: 0;
  margin-bottom: 0.5rem;
}

.object-detail-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
}

.inline-check {
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--muted);
}

#detailText {
  width: 100%;
  margin-bottom: 0.6rem;
}

.unsaved-hint { font-size: 0.85rem; }

@media (max-width: 560px) {
  .object-row { flex-wrap: wrap; }
  .object-row-title { flex-basis: 100%; }
}

.status-toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius);
  background: var(--success-bg);
  color: var(--success-text);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  font-size: 0.9rem;
}

.status-toast.is-error {
  background: var(--danger-bg);
  color: var(--danger);
}

@media (max-width: 560px) {
  .dashboard-layout { flex-direction: column; }
  .type-nav { flex: 1 1 auto; width: 100%; }
  /* Explicit width, or the stacked panel sizes itself to its content -
     i.e. to the longest (nowrap) catalog headline - and overflows. */
  .type-panel { flex: 1 1 auto; width: 100%; }
}

/* ---- v0.3.0: show/hide password ---- */

/* app.js wraps every password input in one of these at startup. */
.password-wrap {
  position: relative;
  display: flex;
}

.password-wrap input {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 2.6rem; /* room for the eye button */
}

.password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--muted);
  cursor: pointer;
}

.password-toggle:hover { color: var(--text); }
.password-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.password-toggle svg { width: 1.2rem; height: 1.2rem; }

/* ---- v0.3.0: language selector (logged out) ---- */

.topbar-language select {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- v0.3.0: inactivity logout ---- */

.info-box {
  padding: 0.6rem 0.8rem;
  margin-bottom: 1.25rem;
  border-radius: var(--radius);
  background: #eef3fd;
  color: #24499f;
  font-size: 0.9rem;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(31, 36, 48, 0.45);
}

.modal {
  max-width: 420px;
  width: 100%;
  padding: 1.25rem 1.4rem;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.modal h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.modal p { margin: 0 0 1rem; }

/* ---- v0.4.0: Apholrp name ---- */

.brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* Marks the pilot - remove the badge for the production version. */
.pilot-badge {
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: #fff4e0;
  color: #9a5b00;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.landing-fullname {
  margin: -0.4rem 0 1rem;
  font-style: italic;
  color: var(--muted);
}

/* Account ID line at the top of the ☰ menu */
.menu-info {
  padding: 0.55rem 0.9rem;
  font-size: 0.8rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

/* ---- v0.4.0: money values ---- */

.money-field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.92rem; font-weight: 600; }
.money-field label { flex-direction: row; gap: 0.3rem; }
.money-inputs { display: flex; gap: 0.4rem; }

.money-inputs input,
.money-detail input {
  width: 8.5rem;
  min-width: 0;
  font: inherit;
  font-weight: 400;
  text-align: right;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
}

.money-detail input { width: 7.5rem; padding: 0.35rem 0.5rem; }

.money-inputs select,
.money-detail select {
  max-width: 6.5rem;
  font: inherit;
  font-weight: 400;
  padding: 0.45rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
}

.money-detail select { padding: 0.3rem 0.25rem; }

.badge-value {
  background: #eaf5ee;
  color: var(--success-text);
  font-variant-numeric: tabular-nums;
}

/* ---- v0.4.0: reports ---- */

.reports-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.reports-header h1 { margin: 0; }

.report-section {
  margin-top: 1.5rem;
  padding: 1rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.report-section h2 { margin: 0 0 0.75rem; font-size: 1.05rem; }

.report-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
}

.report-stat { padding: 0.6rem 0.75rem; background: var(--bg); border-radius: var(--radius); }
.report-stat .num { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.report-stat .label { font-size: 0.8rem; color: var(--muted); }

.report-table-wrap { overflow-x: auto; }

.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.report-table th,
.report-table td {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.report-table th { font-size: 0.78rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
.report-table td.num, .report-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-table tfoot td { font-weight: 700; border-bottom: none; }

.report-list { list-style: none; margin: 0; padding: 0; }
.report-list li { display: flex; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.report-list li:last-child { border-bottom: none; }
.report-list .when { flex: 0 0 auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.report-list .what { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-list .cat { flex: 0 0 auto; color: var(--muted); }
.report-list .overdue { color: var(--danger); }

/* ---- v0.4.0: top bar on phones ---- */

@media (max-width: 560px) {
  .topbar { padding: 0.6rem 0.9rem; gap: 0.5rem; }
  .topbar-account { gap: 0.4rem; min-width: 0; }
  /* The Account ID is shown in the ☰ menu instead. */
  .topbar-account .topbar-sep,
  #topbarAccountId { display: none; }
  #logoutBtn { white-space: nowrap; padding-left: 0.5rem; padding-right: 0.5rem; }
  #topbarPseudonym {
    max-width: 6.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .money-inputs input { width: 100%; }
  .money-field { flex: 1 1 100%; }
}

.report-subheading { margin: 1rem 0 0.35rem; font-size: 0.92rem; }
.report-section h2 + .report-subheading { margin-top: 0; }
.report-list .btn-link.what { text-align: left; text-decoration: none; color: var(--text); }
.report-list .btn-link.what:hover { text-decoration: underline; color: var(--primary); }