/*
 * App-wide visual direction (Phase 2 - rolled out from the cashbook screen
 * approved in Phase 1). Loaded once, by templates/base.html, so every page
 * shares it.
 */

.nv-app {
  --nv-navy: #0B1F3A;
  --nv-cyan: #06B6D4;
  --nv-bg: #FFFFFF;
  --nv-border: #E5E7EB;
  --nv-text: #1A1F2B;
  --nv-text-secondary: #64748B;
  --nv-text-secondary-dark: #475569;
  --nv-green-bg: #ECFDF5;
  --nv-green-text: #047857;
  --nv-cyan-bg: #ECFEFF;
  --nv-cyan-text: #0E7490;
  --nv-amber-bg: #FFFBEB;
  --nv-amber-text: #B45309;
  /* Not part of the original Phase 1 palette - added for error/danger states
     (form validation, danger alerts) using the same light-bg/dark-text
     pairing convention as the given status colors. */
  --nv-red-bg: #FEF2F2;
  --nv-red-text: #B91C1C;
  --nv-font-heading: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --nv-font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;

  background: var(--nv-bg);
  color: var(--nv-text);
  font-family: var(--nv-font-body);
  min-height: 100vh;
}

.nv-app h1, .nv-app h2, .nv-app h3, .nv-app h4, .nv-app h5, .nv-app h6,
.nv-app .nv-heading {
  font-family: var(--nv-font-heading);
  color: var(--nv-navy);
}

.nv-app a {
  color: var(--nv-cyan-text);
}
.nv-app a:hover {
  color: var(--nv-navy);
}

.nv-app :focus-visible {
  outline: 2px solid var(--nv-cyan);
  outline-offset: 2px;
}

/* --- header bar --------------------------------------------------------- */

.nv-header {
  background: var(--nv-navy);
  color: #FFFFFF;
  padding: 0.85rem 1.5rem;
}

/* Base wordmark shape/type - color comes from context below, since this is
   used both inside the navy header (light-on-dark) and standalone on pages
   with no header, e.g. login (dark-on-light via .nv-wordmark-standalone). */
.nv-wordmark {
  font-family: var(--nv-font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.nv-wordmark-tag {
  font-family: var(--nv-font-heading);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.nv-header .nv-wordmark {
  color: #FFFFFF;
}
.nv-header .nv-wordmark-tag {
  color: var(--nv-cyan);
}

.nv-wordmark-standalone {
  color: var(--nv-navy);
}
.nv-wordmark-standalone .nv-wordmark-tag {
  color: var(--nv-cyan-text);
}

.nv-header .nv-header-nav-link {
  font-family: var(--nv-font-body);
  font-weight: 500;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
.nv-header .nv-header-nav-link:hover {
  color: var(--nv-cyan);
}

.nv-header .nv-user-block {
  font-size: 0.85rem;
  color: #FFFFFF;
}

.nv-header .nv-user-role {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.72rem;
  text-transform: capitalize;
}

.nv-header .btn-nv-logout {
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  font-family: var(--nv-font-body);
}
.nv-header .btn-nv-logout:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

/* --- breadcrumb / context bar -------------------------------------------- */

.nv-breadcrumb-bar {
  background: #F8FAFC;
  border-bottom: 1px solid var(--nv-border);
  padding: 0.5rem 1.5rem;
  font-size: 0.85rem;
}

.nv-breadcrumb-bar a {
  color: var(--nv-text-secondary-dark);
  text-decoration: none;
}
.nv-breadcrumb-bar a:hover {
  color: var(--nv-cyan-text);
  text-decoration: underline;
}

.nv-breadcrumb-bar .nv-crumb-sep {
  color: var(--nv-text-secondary);
  margin: 0 0.4rem;
}

.nv-breadcrumb-bar .nv-crumb-current {
  color: var(--nv-navy);
  font-weight: 600;
}

/* --- buttons -------------------------------------------------------------- */

.nv-app .btn {
  font-family: var(--nv-font-body);
  font-weight: 500;
  border-radius: 0.375rem;
}

.btn-nv-primary {
  background: var(--nv-navy);
  border: 1px solid var(--nv-navy);
  color: #FFFFFF;
}
.btn-nv-primary:hover {
  background: #142b52;
  border-color: #142b52;
  color: #FFFFFF;
}

.btn-nv-cyan {
  background: var(--nv-cyan);
  border: 1px solid var(--nv-cyan);
  color: #04303B;
}
.btn-nv-cyan:hover {
  background: #0aa3c2;
  border-color: #0aa3c2;
  color: #04303B;
}

.btn-nv-outline {
  background: transparent;
  border: 1px solid var(--nv-navy);
  color: var(--nv-navy);
}
.btn-nv-outline:hover {
  background: var(--nv-navy);
  color: #FFFFFF;
}

.btn-nv-muted {
  background: transparent;
  border: 1px solid var(--nv-border);
  color: var(--nv-text-secondary-dark);
}
.btn-nv-muted:hover {
  background: #F8FAFC;
  border-color: var(--nv-text-secondary);
  color: var(--nv-text);
}

/* --- pills / badges --------------------------------------------------- */

.nv-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  line-height: 1.3;
  white-space: nowrap;
}

.nv-pill-green { background: var(--nv-green-bg); color: var(--nv-green-text); }
.nv-pill-cyan { background: var(--nv-cyan-bg); color: var(--nv-cyan-text); }
.nv-pill-amber { background: var(--nv-amber-bg); color: var(--nv-amber-text); }
.nv-pill-neutral { background: #F1F5F9; color: var(--nv-text-secondary-dark); }

/* --- cards ------------------------------------------------------------- */

.nv-card {
  background: var(--nv-bg);
  border: 1px solid var(--nv-border);
  border-radius: 0.5rem;
}

.nv-card-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--nv-border);
  font-weight: 600;
  color: var(--nv-navy);
  font-family: var(--nv-font-heading);
}

.nv-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
@media (max-width: 860px) {
  .nv-stat-row { grid-template-columns: repeat(2, 1fr); }
}

.nv-stat-card {
  background: var(--nv-bg);
  border: 1px solid var(--nv-border);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
}

.nv-stat-card .nv-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nv-text-secondary-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nv-stat-card .nv-stat-value {
  font-family: var(--nv-font-heading);
  font-size: 1.4rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--nv-navy);
  margin-top: 0.15rem;
}

.nv-stat-card .nv-stat-value.nv-amount-income { color: var(--nv-green-text); }
.nv-stat-card .nv-stat-value.nv-amount-expense { color: var(--nv-text); }
.nv-stat-card .nv-stat-value.nv-amount-negative { color: var(--nv-text); }
.nv-stat-card .nv-stat-value.nv-amount-positive { color: var(--nv-green-text); }
.nv-stat-card .nv-stat-value.nv-stat-attention { color: var(--nv-amber-text); }

/* --- action bar ---------------------------------------------------------- */

.nv-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.nv-search-input {
  font-family: var(--nv-font-body);
  border: 1px solid var(--nv-border);
  border-radius: 0.375rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.875rem;
  min-width: 220px;
}
.nv-search-input:focus {
  border-color: var(--nv-cyan);
}

.nv-filter-pill {
  font-family: var(--nv-font-body);
  font-size: 0.8rem;
  font-weight: 500;
  border: 1px solid var(--nv-border);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  color: var(--nv-text-secondary-dark);
  text-decoration: none;
  background: var(--nv-bg);
}
.nv-filter-pill:hover {
  border-color: var(--nv-navy);
  color: var(--nv-navy);
}
.nv-filter-pill.active {
  background: var(--nv-navy);
  border-color: var(--nv-navy);
  color: #FFFFFF;
}

/* --- table ------------------------------------------------------------- */

.nv-table-wrap {
  border: 1px solid var(--nv-border);
  border-radius: 0.5rem;
  overflow: hidden;
}

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

.nv-table thead th {
  background: #F8FAFC;
  color: var(--nv-text-secondary-dark);
  font-family: var(--nv-font-body);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--nv-border);
  text-align: left;
}

.nv-table thead th.text-end, .nv-table td.text-end { text-align: right; }

.nv-table tbody td {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--nv-border);
  vertical-align: middle;
}

.nv-table tbody tr:last-child td {
  border-bottom: none;
}

.nv-table tbody tr:hover {
  background: #F8FAFC;
}

.nv-table .nv-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.nv-table .nv-amount-income { color: var(--nv-green-text); }
.nv-table .nv-amount-expense { color: var(--nv-text); }

.nv-table tfoot td {
  padding: 0.6rem 0.85rem;
  border-top: 2px solid var(--nv-border);
  font-weight: 600;
  background: #F8FAFC;
}
.nv-table tfoot .nv-amount {
  font-family: var(--nv-font-heading);
}

.nv-row-warning td {
  background: var(--nv-amber-bg);
}
.nv-row-danger td {
  background: var(--nv-red-bg);
}

.nv-muted {
  color: var(--nv-text-secondary);
}
.nv-muted-dark {
  color: var(--nv-text-secondary-dark);
}

.nv-lock-banner {
  background: var(--nv-cyan-bg);
  color: var(--nv-cyan-text);
  border: 1px solid #A5E9F2;
  border-radius: 0.5rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
}

/* --- additional pill/button variant (error/archived states) ------------ */

.nv-pill-red { background: var(--nv-red-bg); color: var(--nv-red-text); }

.btn-nv-danger-outline {
  background: transparent;
  border: 1px solid var(--nv-red-text);
  color: var(--nv-red-text);
}
.btn-nv-danger-outline:hover {
  background: var(--nv-red-bg);
  color: var(--nv-red-text);
}

/* --- generic page header (non-cashbook screens) ------------------------- */

.nv-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.nv-page-header h1 {
  font-size: 1.35rem;
  margin-bottom: 0.15rem;
}

/* --- cards used as simple list rows (client list, categories, etc.) ----- */

.nv-list-card .nv-list-row {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--nv-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.nv-list-card .nv-list-row:last-child {
  border-bottom: none;
}
.nv-list-card .nv-list-row:hover {
  background: #F8FAFC;
}
.nv-list-card .nv-list-empty {
  padding: 1rem;
  color: var(--nv-text-secondary);
}

/* --- forms --------------------------------------------------------------- */

.nv-app label, .nv-app .form-label {
  font-family: var(--nv-font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--nv-text-secondary-dark);
  margin-bottom: 0.3rem;
}

.nv-app .form-control, .nv-app .form-select {
  font-family: var(--nv-font-body);
  border: 1px solid var(--nv-border);
  border-radius: 0.375rem;
  color: var(--nv-text);
}
.nv-app .form-control:focus, .nv-app .form-select:focus {
  border-color: var(--nv-cyan);
  box-shadow: 0 0 0 0.2rem rgba(6, 182, 212, 0.2);
}

.nv-app .form-text {
  color: var(--nv-text-secondary);
}

.nv-app .form-check-input:checked {
  background-color: var(--nv-navy);
  border-color: var(--nv-navy);
}
.nv-app .form-check-input:focus {
  border-color: var(--nv-cyan);
  box-shadow: 0 0 0 0.2rem rgba(6, 182, 212, 0.2);
}

.nv-form-card {
  background: var(--nv-bg);
  border: 1px solid var(--nv-border);
  border-radius: 0.5rem;
  padding: 1.25rem;
  max-width: 640px;
}

/* --- alerts / flash messages -------------------------------------------- */

.nv-app .alert {
  font-family: var(--nv-font-body);
  border-radius: 0.5rem;
  border: 1px solid transparent;
}
.nv-app .alert-success { background: var(--nv-green-bg); color: var(--nv-green-text); border-color: #A7F3D0; }
.nv-app .alert-danger { background: var(--nv-red-bg); color: var(--nv-red-text); border-color: #FECACA; }
.nv-app .alert-warning { background: var(--nv-amber-bg); color: var(--nv-amber-text); border-color: #FDE68A; }
.nv-app .alert-info, .nv-app .alert-secondary { background: var(--nv-cyan-bg); color: var(--nv-cyan-text); border-color: #A5E9F2; }
.nv-app .alert-heading {
  font-family: var(--nv-font-heading);
  color: inherit;
}

/* --- breadcrumb used standalone on non-cashbook pages -------------------- */

.nv-crumb-current { color: var(--nv-navy); font-weight: 600; }

/* --- misc utility --------------------------------------------------------- */

.nv-empty-state {
  padding: 1.25rem;
  color: var(--nv-text-secondary);
  text-align: center;
}

/* --- leftover raw Bootstrap list-group usage (one page: statement notes,
   left as plain <li class="list-group-item"> so an existing test's regex
   keeps matching) - styled to match nv-list-row without touching that
   markup. --------------------------------------------------------------- */

.nv-app .list-group-item {
  border-color: var(--nv-border);
  padding: 0.75rem 1rem;
}
.nv-app .list-group-item:hover {
  background: #F8FAFC;
}

/* --- section-header row inside an nv-table (financial statement tables) - */

.nv-table tbody tr.nv-section-row td {
  background: #F8FAFC;
  font-family: var(--nv-font-heading);
  font-weight: 600;
  color: var(--nv-navy);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}