/* Finance UI layer: keeps the application-specific surfaces aligned with Sneat. */
:root {
  --finance-primary: #696cff;
  --finance-primary-soft: #e7e7ff;
  --finance-border: #e7e7ef;
  --finance-muted: #6f6b7d;
  --finance-surface-muted: #f5f5f9;
  --finance-shadow: 0 0.125rem 0.25rem rgba(161, 172, 184, 0.15);

  /* Darker colors */
  --bs-green: #4fa01f;
  --bs-yellow: #cc7700;
  --bs-blue: #5a5ce6;
  --bs-cyan: #0296c0;
  --bs-red: #e63814;
  --bs-success: #4fa01f;
  --bs-warning: #cc7700;
  --bs-info: #0296c0;
  --bs-danger: #e63814;
  --bs-primary: #5a5ce6;
}

body {
  background: #f5f5f9;
}

.finance-login-page {
  min-height: 100vh;
  background: #f5f5f9 !important;
}

.finance-login-card {
  border: 0;
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1.25rem rgba(67, 89, 113, 0.14) !important;
}

.finance-login-card .form-control,
.finance-login-card .form-select {
  min-height: 2.75rem;
}

.finance-main {
  min-height: calc(100vh - 7rem);
}

/* Below xl the hamburger is fixed at the top-left corner; leave room for it
   so it does not sit on top of the page heading. */
@media (max-width: 1199.98px) {
  .finance-main {
    padding-top: 4.25rem !important;
  }
}

.finance-navbar {
  min-height: 4rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.finance-sidebar {
  background: #2f3349 !important;
  color: rgba(255, 255, 255, 0.82);
  display: flex;
  flex-direction: column;
}

.finance-sidebar .menu-inner {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0;
  overflow-y: auto;
}

.finance-sidebar-account {
  flex: 0 0 auto;
  margin: auto 0 0;
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.finance-sidebar-user {
  margin-left: 0.75rem;
}

.finance-sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
  margin-bottom: 0.75rem;
}

.finance-sidebar-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border-radius: 50%;
  background: #696cff;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
}

.finance-sidebar-username,
.finance-sidebar-role {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-sidebar-username {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
}

.finance-sidebar-role {
  margin-top: 0.125rem;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.75rem;
}

.finance-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin: 0 0 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.finance-sidebar-link .bx {
  flex: 0 0 auto;
  font-size: 1.25rem;
}

.finance-sidebar-link:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.finance-sidebar-logout {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0.625rem 1rem;
  border-radius: 0.375rem;
  background: rgba(255, 76, 81, 0.14);
  color: #ffb4b8;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.finance-sidebar-logout .bx {
  flex: 0 0 auto;
  font-size: 1.25rem;
}

.finance-sidebar-logout:hover {
  background: rgba(255, 76, 81, 0.24);
  color: #fff;
}

.finance-content-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.finance-report-heading-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  margin-left: auto;
}

.finance-report-heading-actions .finance-report-summary-compact {
  margin-left: 0;
  width: 100%;
  justify-content: flex-end;
}

.finance-report-summary-compact > span {
  padding: 0.375rem 0.625rem;
}

.finance-mobile-menu {
  flex: 0 0 auto;
}

.finance-mobile-menu-fixed {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1085;
  background: var(--finance-primary);
  color: #fff;
  box-shadow: var(--finance-shadow);
}

.finance-bulk-action-bar {
  width: fit-content;
  margin: 1rem auto 0;
}

.finance-sidebar .app-brand-text,
.finance-sidebar .app-brand-link,
.finance-sidebar .menu-header-text,
.finance-sidebar .menu-link,
.finance-sidebar .menu-icon,
.finance-sidebar .bx {
  color: rgba(255, 255, 255, 0.82) !important;
}

.finance-sidebar .menu-item:not(.active) .menu-link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

.finance-sidebar .menu-item.active .menu-link {
  background: #696cff !important;
  color: #fff !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
}

.finance-sidebar .menu-item.active .menu-icon,
.finance-sidebar .menu-item.active .bx {
  color: #fff !important;
}

.finance-page-title {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}

.finance-page-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  background: var(--finance-primary-soft);
  color: var(--finance-primary);
  font-size: 1.1rem;
}

.finance-main > .max-w-7xl,
.finance-main > .max-w-5xl {
  width: 100%;
}

.content-wrapper .card {
  border: 0;
  border-radius: 0.5rem;
  box-shadow: var(--finance-shadow);
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.content-wrapper .card:hover {
  box-shadow: 0 0.25rem 0.75rem rgba(161, 172, 184, 0.2);
}

.content-wrapper .finance-metric-card {
  align-self: start;
  height: auto !important;
  min-height: 0 !important;
}

.content-wrapper .finance-metric-body {
  flex: 0 0 auto;
  padding: 1rem !important;
}

.finance-amount {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.3rem;
  white-space: nowrap;
  overflow: visible;
}

.finance-amount-value {
  display: inline-block;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  white-space: nowrap;
}

.finance-amount-currency {
  flex: 0 0 auto;
  color: #4d6075;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.content-wrapper .finance-toolbar-card {
  align-items: center;
  height: auto !important;
  min-height: 0 !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.finance-report-toolbar {
  justify-content: flex-start;
  gap: 0.75rem !important;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
  flex-wrap: nowrap !important;
}

.finance-report-date-form {
  flex: 0 1 auto;
}

.finance-report-date-input {
  width: 11.5rem;
  padding-right: 2.5rem !important;
}

.finance-report-summary {
  margin-left: auto;
}

.finance-filter-form .filter-submit {
  display: flex;
  align-items: flex-end;
}

.finance-filter-form .filter-submit .btn {
  width: 100%;
  justify-content: center;
}

.finance-metric-body > .flex {
  margin-bottom: 0.75rem !important;
}

.finance-metric-body > .flex:first-child {
  min-height: 2.5rem;
}

.finance-metric-grid > div {
  min-height: 3.375rem;
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem !important;
  border: 1px solid rgba(67, 89, 113, 0.04);
  font-size: 1.15rem;
}

.finance-channel-card .finance-metric-body {
  display: block;
}

.finance-channel-card .finance-metric-header {
  align-items: center;
  flex-direction: row;
  gap: 0.75rem;
  margin-bottom: 0.75rem !important;
}

.finance-channel-card .finance-metric-header p {
  margin: 0;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 700;
}

.finance-channel-card .finance-amount {
  justify-content: flex-start;
  flex-direction: row;
  gap: 0.35rem;
}

.finance-channel-card .finance-metric-grid {
  grid-template-columns: 1fr;
  gap: 0;
}

.finance-channel-card .finance-metric-grid > div {
  min-width: 0;
  min-height: 2.125rem;
  padding: 0.35rem 0 !important;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent !important;
  font-size: 1rem;
}

.finance-channel-card .finance-metric-grid > div:last-child {
  border-bottom: 0;
}

.finance-channel-card .finance-amount-value {
  font-size: 1.1rem;
  font-weight: 700;
}

.finance-channel-card .finance-amount-currency {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 600;
}

.finance-stat-grid > .finance-amount {
  justify-content: flex-start;
  flex-direction: row;
  gap: 0.35rem;
  min-width: 0;
  min-height: 2.125rem;
  padding: 0.35rem 0 !important;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent !important;
}

.finance-stat-grid {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

.finance-stat-grid > .finance-amount:last-child {
  border-bottom: 0;
}

.finance-stat-grid .finance-amount-value {
  font-size: 1.15rem;
  font-weight: 700;
}

.finance-stat-grid .finance-amount-currency {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 600;
}

.finance-stat-card .card-body > .flex:first-child p {
  font-size: 1rem !important;
  font-weight: 700 !important;
}

.finance-stat-card .card-body {
  padding: 1rem !important;
}

.finance-stat-card .finance-stat-grid > .finance-amount {
  min-height: 2.125rem;
}

.finance-stat-card .mt-3.pt-3 {
  margin-top: 0.75rem !important;
  padding-top: 0.75rem !important;
}

.content-wrapper .card-header {
  min-height: 4.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: transparent;
}

.content-wrapper .card-header h2,
.content-wrapper .card-header h3,
.content-wrapper .card-header .text-lg {
  margin-bottom: 0;
  color: #384551;
  font-weight: 600;
}

.content-wrapper .card-header p {
  margin-bottom: 0;
}

.content-wrapper .card-body {
  color: #384551;
}

.content-wrapper .table-responsive {
  border-radius: 0.375rem;
}

.content-wrapper .table {
  margin-bottom: 0;
  color: #384551;
  font-size: 0.875rem;
}

.content-wrapper .table thead th {
  padding: 0.875rem 1rem;
  border-bottom-width: 1px;
  color: #6f6b7d;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.content-wrapper .table tbody td {
  padding: 0.875rem 1rem;
}

.content-wrapper .table tbody tr:last-child td {
  border-bottom: 0;
}

.finance-income-table {
  min-width: 58rem;
}

.finance-income-total {
  font-weight: 700;
  line-height: 1.45;
}

.finance-income-create {
  min-width: 8.75rem;
  white-space: nowrap;
}

.finance-total-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.finance-total-strip > div {
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  background: var(--color-surface-muted);
}

.finance-transaction-toolbar {
  min-height: 5rem;
}

.finance-transaction-filter-form .form-control,
.finance-transaction-filter-form .form-select,
.finance-transaction-filter-submit .btn {
  min-height: 2.5rem;
}

.finance-transaction-table-body {
  padding-top: 1rem !important;
}

.finance-boss-reports-table {
  min-width: 62rem;
}

.finance-boss-reports-table th {
  white-space: nowrap;
}

.content-wrapper .table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: #f8f8fc;
  color: inherit;
}

.content-wrapper .form-label,
.content-wrapper label {
  color: #384551;
  font-size: 0.8125rem;
  font-weight: 500;
}

.content-wrapper .form-control,
.content-wrapper .form-select {
  min-height: 2.375rem;
  border-color: var(--finance-border);
  border-radius: 0.375rem;
  color: #27272a;
  font-size: 0.9375rem;
}

.content-wrapper .form-control::placeholder {
  color: #97979a;
}

.content-wrapper .form-control:focus,
.content-wrapper .form-select:focus {
  border-color: var(--finance-primary);
  box-shadow: 0 0 0.25rem 0.05rem rgba(105, 108, 255, 0.25);
}

.btn,
.menu-link,
a,
button,
input,
select,
label {
  touch-action: manipulation;
}

.content-wrapper .btn {
  min-height: 2.375rem;
  border-radius: 0.375rem;
  font-weight: 500;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}

.content-wrapper .btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.content-wrapper .btn-primary {
  background: var(--finance-primary);
  border-color: var(--finance-primary);
}

.content-wrapper .btn-label-primary {
  background: var(--finance-primary-soft);
  border-color: transparent;
  color: var(--finance-primary);
}

.content-wrapper .btn-label-secondary {
  background: var(--finance-surface-muted);
  border-color: transparent;
  color: #6f6b7d;
}

.content-wrapper .btn-label-danger {
  background: #ffe0e1;
  border-color: transparent;
  color: #ff4c51;
}

.content-wrapper .btn-label-success {
  background: #e8fbdd;
  border-color: transparent;
  color: #3d8000;
}

.content-wrapper .btn-icon {
  width: 2.375rem;
  min-width: 2.375rem;
  padding: 0;
}

.content-wrapper .alert {
  border: 0;
  border-radius: 0.5rem;
  box-shadow: var(--finance-shadow);
}

.content-wrapper .badge,
.content-wrapper [class*="rounded-full"] {
  white-space: nowrap;
}

.content-wrapper .empty-state {
  min-height: 13rem;
  color: var(--finance-muted);
}

.content-wrapper .empty-state .empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.75rem;
  border-radius: 0.5rem;
  background: var(--finance-surface-muted);
  color: var(--finance-muted);
  font-size: 1.5rem;
}

.layout-menu .menu-link {
  margin-inline: 0.75rem;
  border-radius: 0.375rem;
}

.layout-menu .menu-item:not(.active) .menu-link:hover {
  background: #f5f5f9;
  color: var(--finance-primary);
}

.layout-menu .menu-item.active .menu-link {
  box-shadow: 0 0.125rem 0.25rem rgba(105, 108, 255, 0.16);
}

.modal-panel {
  width: min(100%, 40rem);
  border-radius: 0.5rem;
  background: var(--bs-white, #fff);
  box-shadow: 0 1rem 3rem rgba(67, 89, 113, 0.22);
}

.finance-modal-overlay {
  overscroll-behavior: contain;
}

.finance-modal-panel {
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.finance-modal-body {
  padding-top: 0.875rem !important;
}

.finance-modal-body form {
  margin-top: 0 !important;
}

.finance-stat-edit-modal {
  max-width: 46rem !important;
}

.finance-stat-edit-modal .finance-modal-body {
  padding: 1.5rem 1.75rem 1.75rem !important;
}

.finance-stat-edit-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--color-border);
}

.finance-stat-edit-kicker {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.finance-stat-edit-heading strong {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 700;
}

.finance-stat-edit-field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 600;
}

.finance-stat-edit-field label span {
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.finance-stat-edit-input {
  position: relative;
}

.finance-stat-edit-input input {
  padding-right: 3.75rem !important;
  font-size: 1rem !important;
  font-weight: 600;
}

.finance-stat-edit-input > span {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 700;
  pointer-events: none;
}

.finance-stat-edit-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid color-mix(in srgb, var(--color-pending) 28%, transparent);
  border-radius: 0.5rem;
  background: var(--color-pending-bg);
  color: var(--color-pending);
}

.finance-stat-edit-notice i {
  flex: 0 0 auto;
  margin-top: 0.05rem;
  font-size: 1.1rem;
}

.finance-stat-edit-notice p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.finance-stat-edit-modal form > .flex button {
  justify-content: center;
  gap: 0.4rem;
}

@media (max-width: 767.98px) {
  .finance-main {
    padding: 1rem !important;
  }

  .content-wrapper .card-header {
    align-items: flex-start !important;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .content-wrapper .card-header > div:last-child {
    width: 100%;
  }

  .content-wrapper .card-header > div:last-child .btn,
  .content-wrapper .card-header > div:last-child a {
    flex: 1 1 auto;
    justify-content: center;
  }

  .content-wrapper .table {
    min-width: 42rem;
  }

  .content-wrapper .card-body {
    padding: 1rem !important;
  }

  .finance-report-toolbar {
    align-items: flex-start;
    flex-wrap: wrap !important;
  }

  .finance-report-heading-actions {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
  }

  .finance-report-heading-actions .finance-report-date-form {
    width: 100%;
  }

  .finance-report-label {
    width: 100%;
  }

  .finance-report-date-form {
    width: 100%;
    flex-wrap: wrap;
  }

  .finance-report-date-form .relative {
    flex: 1 1 10rem;
  }

  .finance-report-date-input {
    width: 100%;
  }

  .finance-report-summary {
    width: 100%;
    margin-left: 0;
  }

  .finance-filter-form .filter-submit {
    grid-column: 1 / -1;
  }

  .finance-modal-panel {
    max-height: calc(100vh - 1rem);
  }

  .finance-stat-edit-modal .finance-modal-body {
    padding: 1.25rem !important;
  }

  .finance-stat-edit-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .finance-total-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-channel-card .finance-metric-body {
    display: block;
  }

  .finance-channel-card .finance-metric-header {
    align-items: center;
    flex-direction: row;
    margin-bottom: 0.75rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   Page headers
   Sneat gives every page a heading; ours had none, so pages started abruptly
   at the first card. `.finance-content-heading` is the flex row, the actions
   block pushes right.
   --------------------------------------------------------------------------- */
.finance-page-heading {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  position: relative;
}

.finance-page-heading-main {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
}

.finance-page-heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  border-radius: 0.5rem;
  background: var(--finance-primary-soft, rgba(105, 108, 255, 0.16));
  color: var(--finance-primary, #696cff);
  font-size: 1.375rem;
}

.finance-page-heading-text {
  min-width: 0;
}

.finance-page-heading-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
  color: #384551;
}

.finance-page-heading-subtitle {
  margin: 0.125rem 0 0;
  font-size: 0.9375rem;
  color: #6f6b7d;
}

.finance-page-heading-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Finance page CTA buttons — match the incomes page action buttons */
.finance-fab {
  min-width: 8.75rem;
  white-space: nowrap;
}

/* Header control strip: date picker + the two CTAs read as one aligned group.
   CTAs stay slightly taller/heavier so they dominate the quiet month input. */
.finance-heading-cta-group {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.finance-heading-cta-group .finance-fab {
  min-height: 2.625rem;
  padding-block: 0.5rem;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(67, 89, 113, 0.18);
}
.finance-heading-cta-group .finance-fab i {
  font-size: 1.05rem;
}

/* Secondary action: soft danger (negative-bg + negative text), used for the
   expense CTA so the income CTA keeps visual priority. */
.finance-btn-soft-danger {
  background: var(--color-negative-bg) !important;
  color: var(--color-negative) !important;
  border: 1px solid transparent;
}
.finance-btn-soft-danger:hover:not(:disabled) {
  filter: brightness(0.96);
}

/* Month input: a quiet sibling of the buttons, not a violet billboard.
   Same height as the CTAs so the header row reads as one control strip. */
.finance-month-picker {
  max-width: 12rem;
  min-height: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--color-surface);
}

/* Amount inputs: currency unit sits inside the field as a small pill so the
   number and its unit read as one control (label above already names it,
   so the pill uses the compact symbol: so'm/$/₽/€). */
.finance-amount-wrap {
  position: relative;
}
.finance-amount-suffix {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.3rem 0.5rem;
  border-radius: 0.375rem;
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  user-select: none;
}
.finance-amount-wrap .form-control {
  padding-right: 3.25rem;
}

/* Subtle press feedback on every button */
.content-wrapper .btn:active:not(:disabled) {
  transform: scale(0.98);
}

/* Grouped fieldset inside modal forms */
.finance-form-group-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
  display: block;
}

/* The dark sidebar already marks the active item with a solid violet fill, so
   Sneat's right-edge indicator bar is redundant here — and it renders outside
   the sidebar's dark area, reading as a stray violet sliver. */
.finance-sidebar .menu-inner > .menu-item.active:before {
  display: none !important;
}

/* Sneat's demo styling lowercases the wordmark for their own "sneat" logotype.
   SFBMSSB is an acronym and is always written in capitals, so force uppercase
   rather than merely unsetting the transform — that way it stays correct even
   if the source text is ever typed in lower case. */
.app-brand-text,
.app-brand-text.demo,
.app-brand-link .app-brand-text {
  text-transform: uppercase !important;
}

/* ---------------------------------------------------------------------------
   Typography contrast
   Sneat v1.0.0 ships an older, washed-out palette (#566a7f headings,
   #697a8d body). Newer Sneat darkened these, which is what the app is being
   matched against — so lift contrast once, here, instead of per-page.
   --------------------------------------------------------------------------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  color: #384551;
}

body {
  color: #5f5b6b;
}

.text-heading {
  color: #384551 !important;
}

.form-label,
.col-form-label {
  color: #384551;
}

.table > :not(caption) > * > * {
  color: #4a4658;
}

/* ---------------------------------------------------------------------------
   KPI cards (small icon + label + count)
   Bootstrap's .card is `display:flex; flex-direction:column`, so putting
   Tailwind's `flex` on the card itself stacked and centred these instead of
   laying them out in a row. Layout now lives on .card-body.
   --------------------------------------------------------------------------- */
.finance-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  border-radius: 0.5rem;
  font-size: 1.375rem;
}

.finance-kpi-icon-brand   { background: rgba(105, 108, 255, 0.16); color: #696cff; }
.finance-kpi-icon-info    { background: rgba(3, 195, 236, 0.16);   color: #03c3ec; }
.finance-kpi-icon-warning { background: rgba(204, 119, 0, 0.16);   color: #cc7700; }

.finance-kpi-label {
  display: block;
  font-size: 0.8125rem;
  color: #6f6b7d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.finance-kpi-value {
  display: block;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  color: #384551;
  font-variant-numeric: tabular-nums;
}

/* Count badges shown beside a page title. */
.finance-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  padding: 0.4375rem 0.75rem;
  border-radius: 50rem;
}

/* Sneat uppercases badges; count badges beside a title read as shouting. */
.finance-count-badge {
  text-transform: none;
  letter-spacing: 0;
}

/* Compact report list (operator dashboard). Was a stack of tall grey boxes
   that were mostly empty whitespace when a report had no totals yet. */
.finance-report-list > .finance-report-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border, #e7e7ef);
}

.finance-report-list > .finance-report-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.finance-report-list > .finance-report-row:first-child {
  padding-top: 0;
}

.finance-report-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: 0.5rem;
  background: rgba(105, 108, 255, 0.12);
  color: #696cff;
  font-size: 1.125rem;
}

.finance-report-row-date {
  font-weight: 600;
  color: #384551;
}

.finance-report-row-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-left: auto;
  font-weight: 600;
  color: #4fa01f;
  text-align: right;
}

/* ===========================================================================
   Money cards (headline totals + payment channels)
   Replaces the old four-row divided list. That layout gave a zero the same
   visual weight as a real amount, so a card holding one number looked like a
   card holding four. Here the four currencies share a 2x2 block and empty
   ones recede, which makes the money that actually exists read at a glance.
   =========================================================================== */
.finance-money-card {
  height: 100%;
}

.finance-money-card > .card-body {
  padding: 1.25rem;
}

.finance-money-card-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
  padding-right: 2.5rem; /* keeps the overlaid edit button clear */
}

.finance-money-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  border-radius: 0.5rem;
  font-size: 1.25rem;
  background: rgba(105, 108, 255, 0.16);
  color: #696cff;
}

.finance-money-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #384551;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-money-card-status {
  margin-left: auto;
}

.finance-money-card-positive .finance-money-card-icon { background: rgba(79, 160, 31, 0.16); color: #4fa01f; }
.finance-money-card-negative .finance-money-card-icon { background: rgba(230, 56, 20, 0.16);  color: #e63814; }
.finance-money-card-neutral  .finance-money-card-icon { background: #f1f0f2;                  color: #6f6b7d; }

/* --- the 2x2 currency block ------------------------------------------------ */
.finance-money-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.finance-money-cell {
  display: flex;
  flex-wrap: wrap;            /* if the number and its unit do not fit side by side, the unit drops below */
  align-items: baseline;
  column-gap: 0.3125rem;
  min-width: 0;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background: #f7f7f9;
}

/* Amount cells in tables: right-aligned, digit-aligned. */
.finance-amount-col {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.finance-money-value {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: #384551;
  white-space: nowrap;        /* never split an amount; never clip digits with an ellipsis */
}

.finance-money-unit {
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 500;
  color: #4a4658;
}

/* A zero is still shown — every currency keeps its slot — but it steps back so
   the populated cells carry the eye. */
.finance-money-cell.is-empty {
  background: transparent;
  box-shadow: inset 0 0 0 1px #f1f0f2;
}

.finance-money-cell.is-empty .finance-money-value,
.finance-money-cell.is-empty .finance-money-unit {
  color: #777570;
  font-weight: 500;
}

.finance-money-positive .finance-money-cell:not(.is-empty) .finance-money-value { color: #5cb800; }
.finance-money-negative .finance-money-cell:not(.is-empty) .finance-money-value { color: #e63814; }

/* --- pending footer -------------------------------------------------------- */
.finance-money-card-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid #ebeaee;
  font-size: 0.8125rem;
  color: #6f6b7d;             /* 5.2:1 on white (was 2.5:1) */
}

.finance-money-card-foot > .bx {
  font-size: 1rem;
  color: #cc7700;
}

.finance-money-card-foot-value {
  font-weight: 600;
  color: #a35a00;             /* 5.2:1 on white (was 3.4:1) */
  font-variant-numeric: tabular-nums;
}

@media (max-width: 400px) {
  .finance-money-grid { grid-template-columns: minmax(0, 1fr); }
}

/* A negative balance is a signal, not just another number — show it as one
   whatever the card's own tone is. */
.finance-money-cell.is-negative {
  background: rgba(230, 56, 20, 0.08);
}

.finance-money-grid .finance-money-cell.is-negative .finance-money-value,
.finance-money-grid .finance-money-cell.is-negative .finance-money-unit {
  color: #e63814;
}

/* Transaction amounts: keep each figure unbreakable so a number never wraps
   mid-digits, and let the currencies sit on one line when the row has room. */
.finance-amount-cell {
  white-space: nowrap;
}

.finance-amount-cell > span {
  display: inline-block;
  white-space: nowrap;
}

.finance-amount-cell > span + span {
  margin-left: 0.75rem;
}