:root {
  --brand-950: #0b3d24;
  --brand-800: #166534;
  --brand-700: #17803d;
  --brand-100: #dcfce7;
  --surface: #f4f7f4;
  --ink: #17231b;
  --muted: #657269;
  --danger: #c2413a;
  --income: #18864b;
  --shadow: 0 12px 32px rgba(19, 51, 31, 0.08);
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-bottom: var(
    --android-safe-area-inset-bottom,
    env(safe-area-inset-bottom, 0px)
  );
  --desktop-sidebar-width: 264px;
}

html {
  min-height: 100%;
  background: var(--surface);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  color: var(--ink);
  background: var(--surface);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-700); }
.btn { min-height: 44px; border-radius: 0.8rem; font-weight: 650; }
.btn-primary {
  --bs-btn-bg: var(--brand-800);
  --bs-btn-border-color: var(--brand-800);
  --bs-btn-hover-bg: var(--brand-950);
  --bs-btn-hover-border-color: var(--brand-950);
  --bs-btn-active-bg: var(--brand-950);
  --bs-btn-active-border-color: var(--brand-950);
}
.form-control, .form-select, .input-group-text {
  border-radius: 0.8rem;
  border-color: #ced8d0;
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-700);
  box-shadow: 0 0 0 0.25rem rgba(23, 128, 61, 0.14);
}
.form-label { font-weight: 650; }
.min-width-0 { min-width: 0; }

.auth-background {
  background:
    radial-gradient(circle at 20% 10%, rgba(117, 193, 135, 0.28), transparent 35%),
    linear-gradient(145deg, #eef7ef 0%, #f8faf8 55%, #e7f1e8 100%);
}
.auth-shell {
  width: min(100% - 2rem, 480px);
  min-height: 100vh;
  min-height: 100dvh;
  margin-inline: auto;
  display: grid;
  place-items: center;
}
.auth-card { width: 100%; border-radius: 1.5rem; }
.auth-logo {
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(145deg, var(--brand-700), var(--brand-950));
}
.auth-logo {
  width: 68px;
  height: 68px;
  border-radius: 1.25rem;
  font-size: 2rem;
  box-shadow: 0 12px 28px rgba(22, 101, 52, 0.24);
}
.auth-organization-logo {
  width: 96px;
  height: 96px;
  display: block;
  object-fit: contain;
}
.line-logo { background: #06c755; }
.auth-divider {
  margin: 1.25rem 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--muted);
  font-size: 0.8rem;
}
.auth-divider::before, .auth-divider::after {
  height: 1px;
  flex: 1;
  content: "";
  background: #dfe7e1;
}

.app-header {
  padding-top: var(--app-safe-top);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid #e2e8e3;
  backdrop-filter: blur(14px);
}
.desktop-sidebar {
  display: none;
}
.desktop-sidebar-brand-row {
  min-height: 86px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e2e8e3;
}
.desktop-sidebar-brand {
  min-width: 0;
  padding: 1rem 0.7rem 1rem 1.1rem;
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0.8rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 750;
  line-height: 1.2;
}
.desktop-sidebar-brand:hover { color: var(--ink); }
.desktop-sidebar-brand > span:last-child {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.desktop-sidebar-brand-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: white;
  border-radius: 0.85rem;
  background: linear-gradient(145deg, var(--brand-700), var(--brand-950));
  box-shadow: 0 8px 20px rgba(22, 101, 52, 0.2);
}
.desktop-sidebar-brand-icon.has-organization-logo {
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.organization-brand-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.desktop-task-center-toggle {
  margin-right: 0.7rem;
}
.desktop-sidebar-scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem 0.85rem;
  scrollbar-width: thin;
}
.desktop-sidebar-section + .desktop-sidebar-section {
  margin-top: 1.15rem;
}
.desktop-sidebar-section h2 {
  margin: 0 0 0.4rem;
  padding-inline: 0.75rem;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.desktop-sidebar-link {
  min-height: 46px;
  padding: 0.7rem 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #536057;
  border-radius: 0.75rem;
  text-decoration: none;
  font-weight: 650;
}
.desktop-sidebar-link:hover {
  color: var(--brand-800);
  background: #f1f6f2;
}
.desktop-sidebar-link.active {
  color: var(--brand-800);
  background: var(--brand-100);
}
.desktop-sidebar-link i {
  width: 1.3rem;
  flex: 0 0 auto;
  color: #68756c;
  text-align: center;
  font-size: 1.05rem;
}
.desktop-sidebar-link.active i { color: var(--brand-700); }
.desktop-sidebar-link span:not(.badge) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desktop-sidebar-badge {
  margin-left: auto;
  font-size: 0.68rem;
}
.desktop-sidebar-footer {
  padding: 0.75rem 0.8rem calc(0.75rem + var(--app-safe-bottom));
  border-top: 1px solid #e2e8e3;
  background: rgba(248, 250, 248, 0.92);
}
.desktop-sidebar-account {
  width: 100%;
}
.desktop-sidebar-user-toggle {
  width: 100%;
  min-width: 0;
  min-height: 58px;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  text-align: left;
}
.desktop-sidebar-user-toggle:hover,
.desktop-sidebar-user-toggle.show {
  color: var(--ink);
  background: #eef4ef;
}
.desktop-sidebar-user-copy {
  min-width: 0;
  flex: 1;
}
.desktop-sidebar-user-copy strong,
.desktop-sidebar-user-copy small,
.sidebar-user-menu-header strong,
.sidebar-user-menu-header small {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desktop-sidebar-user-copy small,
.sidebar-user-menu-header small {
  color: var(--muted);
  font-size: 0.72rem;
}
.desktop-sidebar-user-chevron {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.85rem;
  transition: transform 0.18s ease;
}
.desktop-sidebar-user-toggle.show .desktop-sidebar-user-chevron {
  transform: rotate(180deg);
}
.desktop-sidebar-user-menu {
  width: calc(var(--desktop-sidebar-width) - 1.6rem);
  max-height: min(520px, calc(100vh - 6.5rem));
  margin-bottom: 0.6rem !important;
  padding: 0.45rem;
  overflow-y: auto;
  border: 1px solid #dce5de;
  border-radius: 0.9rem;
  box-shadow: 0 16px 40px rgba(20, 48, 29, 0.2);
}
.sidebar-user-menu-header {
  min-width: 0;
  padding: 0.45rem 0.5rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.sidebar-user-menu-header > span:last-child {
  min-width: 0;
}
.sidebar-user-menu-item {
  min-height: 42px;
  padding: 0.55rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.65rem;
  color: #425047;
  font-weight: 600;
}
.sidebar-user-menu-item i {
  width: 1.2rem;
  color: #68756c;
  text-align: center;
}
.sidebar-user-menu-item:hover {
  color: var(--brand-800);
  background: #f1f6f2;
}
.sidebar-user-menu-item.active,
.sidebar-user-menu-item:active {
  color: var(--brand-800);
  background: var(--brand-100);
}
.sidebar-language-switch {
  padding: 0 0.35rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sidebar-language-switch .btn {
  min-height: 38px;
}
.sidebar-user-logout .sidebar-user-menu-item {
  width: 100%;
  color: var(--bs-danger);
  border: 0;
  background: transparent;
  text-align: left;
}
.sidebar-user-logout .sidebar-user-menu-item:hover {
  background: #fff0ef;
}
.navbar { min-height: 68px; }
.app-header .app-header-layout {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
}
.app-sidebar-toggle {
  width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 1.35rem;
}
.navbar-brand {
  min-width: 0;
  max-width: none;
  overflow: hidden;
  display: block;
  color: var(--ink);
  line-height: 1.05;
  text-decoration: none;
}
.navbar-brand strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navbar-brand:hover { color: var(--ink); }
.navbar-brand small { color: var(--muted); font-size: 0.68rem; margin-top: 0.2rem; }
.app-header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.responsive-account-shortcut {
  min-width: 0;
  max-width: 210px;
  min-height: 42px;
  padding: 0.5rem 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #536057;
  border-radius: 0.75rem;
  background: #f3f6f4;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 650;
}
.responsive-account-shortcut i {
  flex: 0 0 auto;
  font-size: 1.15rem;
}
.responsive-account-shortcut span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.responsive-account-shortcut.active {
  color: var(--brand-800);
  background: var(--brand-100);
}
.task-center-toggle {
  position: relative;
  width: 44px;
  min-height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  color: #536057;
  border: 0;
  border-radius: 0.75rem;
  background: #f3f6f4;
  font-size: 1.12rem;
}
.task-center-toggle:hover,
.task-center-toggle.show {
  color: var(--brand-800);
  background: var(--brand-100);
}
.task-center-badge {
  position: absolute;
  top: -0.3rem;
  right: -0.35rem;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0.16rem 0.32rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  box-shadow: 0 2px 7px rgba(20, 48, 29, 0.2);
  font-size: 0.6rem;
  line-height: 1;
}
.task-center-menu {
  width: min(370px, calc(100vw - 1rem));
  max-height: min(620px, calc(100vh - 5.5rem));
  padding: 0;
  overflow-y: auto;
  border: 1px solid #dce5de;
  border-radius: 1rem;
  box-shadow: 0 18px 48px rgba(20, 48, 29, 0.22);
}
.desktop-task-center-menu {
  margin-left: 0.5rem !important;
}
.header-task-center-menu {
  margin-top: 0.55rem !important;
}
.task-center-header {
  position: sticky;
  z-index: 1;
  top: 0;
  padding: 0.9rem 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  border-bottom: 1px solid #e4eae5;
  background: rgba(255, 255, 255, 0.97);
}
.task-center-header strong,
.task-center-header small {
  display: block;
}
.task-center-header small {
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.72rem;
}
.task-center-empty {
  min-height: 150px;
  padding: 1.5rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.6rem;
  color: var(--muted);
  text-align: center;
}
.task-center-empty i {
  color: var(--brand-600);
  font-size: 1.8rem;
}
.task-center-group + .task-center-group {
  border-top: 1px solid #e4eae5;
}
.task-center-group-heading {
  padding: 0.65rem 0.85rem 0.45rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  color: #526057;
  font-size: 0.75rem;
  font-weight: 750;
}
.task-center-group-heading i {
  margin-right: 0.35rem;
  color: var(--brand-700);
}
.task-center-item {
  padding: 0.65rem 0.85rem;
  display: block;
  color: var(--ink);
  text-decoration: none;
}
.task-center-item:hover {
  color: var(--ink);
  background: #f2f7f3;
}
.task-center-item strong {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.86rem;
}
.task-center-item small {
  margin-top: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.65rem;
  color: var(--muted);
  font-size: 0.7rem;
}
.task-center-view-all {
  padding: 0.55rem 0.85rem 0.7rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  color: var(--brand-700);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 700;
}
.language-switch {
  display: flex;
  gap: 0.35rem;
}
.language-switch .btn {
  min-height: 34px;
  padding: 0.25rem 0.6rem;
}
.app-header .nav-link {
  color: #536057;
  border-radius: 0.7rem;
  padding: 0.65rem 0.8rem;
  font-weight: 600;
}
.app-header .nav-link.active {
  color: var(--brand-800);
  background: var(--brand-100);
}
.user-menu { min-height: 40px; }

.app-main {
  padding-top: 1.25rem;
  padding-bottom: calc(6.25rem + var(--app-safe-bottom));
}
.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.page-heading h1 { font-size: clamp(1.55rem, 5vw, 2.25rem); font-weight: 750; margin: 0.15rem 0; }
.page-heading p { color: var(--muted); margin: 0; }
.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}
.page-action-group {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
}
.page-actions .btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.65rem 1rem;
  font-size: 1rem;
  font-weight: 650;
}
.app-dialog-message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.dashboard-heading-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.dashboard-organization-logo {
  width: 72px;
  height: 72px;
  flex: 0 0 auto;
  object-fit: contain;
}
.eyebrow {
  color: var(--brand-700);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 800;
}
.back-link { display: inline-block; text-decoration: none; font-weight: 650; margin-bottom: 0.65rem; }

.dashboard-balance-grid {
  display: grid;
  gap: 1rem;
}
.dashboard-bank-summary,
.dashboard-bank-summary .card-body { height: 100%; }
.dashboard-bank-summary-info {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.dashboard-bank-logo {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  object-fit: contain;
}
.dashboard-bank-account-number {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.dashboard-bank-last-updated {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
}
.balance-hero {
  position: relative;
  min-height: 178px;
  border-radius: 1.4rem;
  padding: 1.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  color: #26332d;
  background:
    radial-gradient(circle at 90% 20%, rgba(87, 165, 206, 0.1), transparent 32%),
    linear-gradient(135deg, #f4faff, #e7f4fb);
  border: 1px solid #91c6e1;
  box-shadow: 0 16px 38px rgba(69, 132, 166, 0.12);
}
.balance-hero .balance-current { color: #2d83ad; }
.balance-hero .hero-icon { color: #73b4d6; }
.bank-book-balance-hero {
  background:
    radial-gradient(circle at 90% 20%, rgba(74, 157, 98, 0.1), transparent 32%),
    linear-gradient(135deg, #f4fbf6, #e5f4e9);
  border-color: #9bcaaa;
  box-shadow: 0 16px 38px rgba(31, 105, 58, 0.12);
}
.bank-book-balance-hero .balance-current { color: var(--brand-700); }
.bank-book-balance-hero .hero-icon { color: #6aad7d; }
.bank-book-hero-logo {
  width: 112px;
  height: 112px;
  flex: 0 0 112px;
  margin-left: 1rem;
  object-fit: contain;
}
@media (max-width: 767.98px) {
  .bank-book-hero-logo {
    position: absolute;
    z-index: 2;
    top: 1.2rem;
    right: 1rem;
    width: 76px;
    height: 76px;
    margin: 0;
    opacity: 1;
    transform: none;
  }
}
.balance-hero.is-negative {
  color: #654646;
  background:
    radial-gradient(circle at 90% 20%, rgba(190, 92, 92, 0.1), transparent 32%),
    linear-gradient(135deg, #fffafa, #fceded);
  border: 1px solid #e4abab;
  box-shadow: 0 16px 38px rgba(145, 75, 75, 0.12);
}
.balance-hero.is-negative .balance-current { color: #b65353; }
.balance-hero.is-negative .hero-icon { color: #c76f6f; }
.balance-label, .balance-account { display: block; opacity: 0.84; }
.balance-hero-content { position: relative; z-index: 1; min-width: 0; flex: 1; }
.balance-current { display: block; margin: 0.35rem 0 0.9rem; font-size: clamp(2rem, 9vw, 3.5rem); letter-spacing: -0.04em; }
.balance-formula {
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.balance-formula span { min-width: 0; }
.balance-formula small, .balance-formula b { display: block; }
.balance-formula small { opacity: 0.72; font-size: 0.72rem; }
.balance-formula b { font-size: 0.9rem; overflow-wrap: anywhere; }
.balance-formula i { opacity: 0.65; font-style: normal; }
.balance-opening-date {
  display: block;
  margin-top: 0.25rem;
  opacity: 0.68;
  font-size: 0.75rem;
}
.hero-icon { font-size: 5rem; opacity: 0.12; transform: rotate(-8deg); }
.stat-card {
  min-height: 122px;
  padding: 1rem;
  border-radius: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: white;
  box-shadow: var(--shadow);
}
.stat-icon, .transaction-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
}
.stat-icon { width: 38px; height: 38px; }
.stat-card.income .stat-icon, .transaction-icon.income { background: #dcfce7; color: var(--income); }
.stat-card.expense .stat-icon, .transaction-icon.expense { background: #fee2e2; color: var(--danger); }
.stat-card small { color: var(--muted); }
.stat-card strong { display: block; font-size: clamp(1rem, 4vw, 1.45rem); overflow-wrap: anywhere; }
.opening-balance-note {
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border: 1px solid #cfe2d4;
  border-radius: 1rem;
  background: #f3faf5;
}
.opening-balance-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--brand-800);
  background: var(--brand-100);
  font-size: 1.25rem;
}
.opening-balance-note small,
.opening-balance-note strong { display: block; }
.opening-balance-note strong { color: var(--brand-800); font-size: 1.3rem; }
.opening-balance-note p { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.82rem; }

.content-card, .house-card, .user-card, .transaction-card {
  border: 1px solid #e3e9e4;
  border-radius: 1.15rem;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.record-list-section { margin-top: 1.25rem; }
.record-list-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
  padding-inline: 0.15rem;
}
.record-list-header h2 {
  margin: 0;
  color: var(--brand-950);
  font-size: 1.15rem;
  font-weight: 750;
}
.record-list-header p {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.record-list-total {
  flex: 0 0 auto;
  padding: 0.4rem 0.7rem;
  border: 1px solid #d9e6dc;
  border-radius: 999px;
  color: var(--muted);
  background: #f8fbf9;
  font-size: 0.8rem;
}
.record-list-total strong { color: var(--brand-800); }
.record-list-card { border-radius: 1rem; }
.record-list-table > :not(caption) > * > * { padding-block: 0.85rem; }
.record-list-mobile {
  display: grid;
  gap: 0.7rem;
}
.record-entry-card {
  border: 1px solid #e1e9e3;
  border-radius: 1rem;
  background: white;
  box-shadow: 0 5px 16px rgba(19, 51, 31, 0.06);
}
.bank-book-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem;
  color: inherit;
  text-decoration: none;
}
.record-entry-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.1rem;
}
.record-entry-icon.deposit { color: var(--income); background: #dcfce7; }
.record-entry-icon.withdrawal { color: var(--danger); background: #fee2e2; }
.record-entry-main,
.record-entry-topline,
.record-entry-meta,
.record-entry-balance { display: block; }
.record-entry-main { min-width: 0; }
.record-entry-topline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.record-entry-topline > strong:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.record-entry-amount { flex: 0 0 auto; white-space: nowrap; }
.record-entry-amount.deposit { color: var(--income); }
.record-entry-amount.withdrawal { color: var(--danger); }
.record-entry-meta {
  margin-top: 0.12rem;
  color: var(--muted);
  font-size: 0.8rem;
}
.record-entry-balance {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid #edf1ee;
  color: var(--muted);
  font-size: 0.78rem;
}
.record-entry-balance strong {
  float: right;
  color: var(--text);
  font-size: 0.92rem;
}
.record-entry-chevron { color: #91a097; }
.record-list-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}
.record-list-range {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}
.record-list-range strong { color: var(--text); }
.list-table { min-width: 760px; }
.list-table > :not(caption) > * > * { padding: 0.9rem 1rem; }
.list-table thead th {
  color: var(--muted);
  background: #f7faf8;
  border-bottom-width: 1px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.list-table > tbody > tr:not(.user-review-row) > * {
  transition: background-color 0.15s ease;
}
.list-table tbody tr:last-child > * { border-bottom: 0; }
.list-table a:not(.btn) { font-weight: 700; }
.user-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}
.user-row-actions form { margin: 0; }
.user-review-row > td {
  padding-top: 0 !important;
  background: #fbfcfb;
}
.user-review-panel {
  max-width: 900px;
  padding: 0 0.25rem 0.75rem;
}
@media (hover: hover) {
  .list-table > tbody > tr:not(.user-review-row):hover > * {
    background-color: #f0faf3;
  }
}
@media (max-width: 767.98px) {
  .responsive-list-card {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .responsive-list-card .table-responsive { overflow: visible; }
  .responsive-list-table {
    display: block;
    min-width: 0;
    background: transparent;
  }
  .responsive-list-table thead { display: none; }
  .responsive-list-table tbody {
    display: grid;
    gap: 0.85rem;
  }
  .responsive-list-table tbody tr:not(.user-review-row) {
    display: grid;
    overflow: hidden;
    border: 1px solid #e3e9e4;
    border-radius: 1rem;
    background: white;
    box-shadow: var(--shadow);
  }
  .responsive-list-table tbody tr:not(.user-review-row) > td {
    display: grid;
    grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid #edf1ee;
    text-align: left !important;
  }
  .responsive-list-table tbody tr:not(.user-review-row) > td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 650;
  }
  .responsive-list-table tbody tr:not(.user-review-row) > td[data-card-primary] {
    display: block;
    padding-block: 0.9rem;
    background: #f8fbf9;
    font-size: 1.05rem;
  }
  .responsive-list-table tbody tr:not(.user-review-row) > td[data-card-primary]::before,
  .responsive-list-table tbody tr:not(.user-review-row) > td[data-card-actions]::before {
    display: none;
  }
  .responsive-list-table tbody tr:not(.user-review-row) > td[data-card-actions] {
    display: block;
    border-bottom: 0;
  }
  .responsive-list-table .user-row-actions { justify-content: flex-start; }
  .responsive-list-table .user-review-row {
    display: block;
    margin-top: -0.45rem;
    border: 1px solid #e3e9e4;
    border-radius: 1rem;
    background: #fbfcfb;
    box-shadow: var(--shadow);
  }
  .responsive-list-table .user-review-row > td {
    display: block;
    border: 0;
  }
  .user-responsive-list tbody tr[data-user-card] > td:not([data-card-primary]) {
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
    opacity: 0;
    transform: translateY(-0.25rem);
    transition:
      max-height 0.25s ease,
      padding 0.25s ease,
      border-color 0.25s ease,
      opacity 0.18s ease,
      transform 0.25s ease;
  }
  .user-responsive-list tbody tr[data-user-card].is-expanded > td:not([data-card-primary]) {
    max-height: 320px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #edf1ee;
    opacity: 1;
    transform: translateY(0);
  }
  .user-responsive-list tbody tr[data-user-card].is-expanded > td[data-card-actions] {
    border-bottom: 0;
  }
  .user-responsive-list .user-review-row {
    max-height: 0;
    overflow: hidden;
    margin-top: -0.85rem;
    border-color: transparent;
    opacity: 0;
    box-shadow: none;
    transition:
      max-height 0.3s ease,
      margin 0.3s ease,
      border-color 0.3s ease,
      opacity 0.2s ease;
  }
  .user-responsive-list .user-review-row.is-expanded {
    max-height: 1200px;
    margin-top: -0.45rem;
    border-color: #e3e9e4;
    opacity: 1;
    box-shadow: var(--shadow);
  }
}
.content-card .card-header {
  padding: 1rem 1.1rem;
  background: white;
  border-bottom-color: #e7ece8;
}
.announcement-excerpt {
  display: -webkit-box;
  overflow: hidden;
  white-space: pre-line;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.announcement-body {
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.announcement-body > :last-child { margin-bottom: 0; }
.announcement-body img,
.rich-text-editor img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem auto;
  border-radius: 0.8rem;
}
.announcement-body img[data-image-gallery-item] { cursor: zoom-in; }
.announcement-body pre,
.rich-text-editor pre {
  padding: 1rem;
  overflow-x: auto;
  border-radius: 0.8rem;
  color: #e5e7eb;
  background: #17211b;
  white-space: pre-wrap;
}
.announcement-body blockquote,
.rich-text-editor blockquote {
  padding: 0.6rem 1rem;
  border-left: 4px solid var(--brand-400);
  color: var(--muted);
  background: #f5f8f5;
}
.youtube-embed {
  position: relative;
  width: 100%;
  margin: 1rem 0;
  overflow: hidden;
  border-radius: 0.9rem;
  background: #111;
  aspect-ratio: 16 / 9;
}
.youtube-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.rich-text-toolbar {
  padding: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid #ced8d0;
  border-bottom: 0;
  border-radius: 0.75rem 0.75rem 0 0;
  background: #f7faf8;
}
.rich-text-toolbar select { width: auto; min-width: 7rem; }
.rich-text-toolbar .btn {
  width: 36px;
  min-height: 34px;
  padding: 0;
}
.rich-color-control {
  width: 38px;
  height: 34px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #dfe5e0;
  border-radius: 0.45rem;
  background: white;
  cursor: pointer;
}
.rich-color-control input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.rich-text-editor {
  min-height: 280px;
  max-height: 70vh;
  padding: 1rem;
  overflow-y: auto;
  border: 1px solid #ced8d0;
  border-radius: 0 0 0.75rem 0.75rem;
  background: white;
  line-height: 1.65;
}
.rich-text-editor:focus {
  border-color: var(--brand-500);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(22, 101, 52, 0.12);
}
.rich-text-editor:empty::before {
  color: var(--muted);
  content: attr(aria-label);
  pointer-events: none;
}
.transaction-list-item {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  color: inherit;
  text-decoration: none;
}
.transaction-icon { width: 42px; height: 42px; font-size: 1.15rem; }
.transaction-copy { flex: 1; min-width: 0; }
.transaction-copy strong, .transaction-copy small { display: block; }
.transaction-copy strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.transaction-copy small { color: var(--muted); margin-top: 0.15rem; }
.transaction-amount { font-size: 0.92rem; white-space: nowrap; }
.transaction-amount.income { color: var(--income); }
.transaction-amount.expense { color: var(--danger); }
.app-pagination {
  gap: 0.4rem;
  --bs-pagination-border-width: 1px;
}
.app-pagination .page-link {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding-inline: 0.9rem;
  border-color: #cfe0d3;
  border-radius: 0.75rem !important;
  color: var(--brand-800);
  background: #fff;
  box-shadow: 0 4px 12px rgba(19, 51, 31, 0.05);
  font-weight: 650;
}
.app-pagination a.page-link:hover,
.app-pagination a.page-link:focus,
.app-pagination button.page-link:hover,
.app-pagination button.page-link:focus {
  border-color: #9bcaaa;
  color: var(--brand-950);
  background: var(--brand-100);
  box-shadow: 0 0 0 0.2rem rgba(23, 128, 61, 0.12);
}
.app-pagination .pagination-status .page-link {
  border-color: #b7ddc1;
  color: var(--brand-950);
  background: var(--brand-100);
  box-shadow: none;
}
.app-pagination .page-item.active .page-link {
  border-color: var(--brand-700);
  color: white;
  background: var(--brand-700);
  box-shadow: none;
}
.app-pagination .page-item.disabled .page-link {
  border-color: #e1e9e3;
  color: #839087;
  background: #f2f5f3;
  box-shadow: none;
}
.transaction-card.cancelled,
.transaction-list-item.cancelled,
.transaction-cancelled {
  opacity: 0.72;
  background: #f3f4f3;
}
.transaction-amount.cancelled,
.detail-amount.cancelled strong {
  color: var(--muted);
  text-decoration: line-through;
}

.mobile-bottom-nav {
  position: fixed;
  z-index: 1030;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: calc(66px + var(--app-safe-bottom));
  padding: 0.4rem 0.5rem var(--app-safe-bottom);
  display: flex;
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid #dfe7e1;
  box-shadow: 0 -8px 28px rgba(20, 48, 29, 0.08);
  backdrop-filter: blur(16px);
}
.mobile-bottom-nav .mobile-nav-item {
  min-width: 0;
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  color: #6c756f;
  border: 0;
  background: transparent;
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 650;
}
.mobile-bottom-nav i { font-size: 1.25rem; }
.mobile-bottom-nav .mobile-nav-item span {
  line-height: 1.05;
  text-align: center;
  overflow-wrap: anywhere;
}
.mobile-bottom-nav .mobile-nav-item.active { color: var(--brand-700); }
.mobile-menu-sidebar {
  --bs-offcanvas-width: min(85vw, 360px);
  height: 100vh;
  height: 100dvh;
  border-right: 0;
  box-shadow: 14px 0 36px rgba(20, 48, 29, 0.16);
}
.mobile-menu-header {
  padding: calc(1rem + var(--app-safe-top)) 1.25rem 1rem;
  border-bottom: 1px solid #e3e9e4;
}
.mobile-menu-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  text-decoration: none;
}
.mobile-menu-brand strong {
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.mobile-menu-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: white;
  border-radius: 50%;
  background: linear-gradient(145deg, #65a675, var(--brand-800));
  font-size: 1.15rem;
}
.mobile-menu-body {
  display: flex;
  flex-direction: column;
  padding: 1rem 1.25rem calc(1rem + var(--app-safe-bottom));
}
.mobile-sidebar-account {
  width: 100%;
  margin-top: auto;
  padding-top: 1rem;
}
.mobile-sidebar-user-menu {
  width: 100%;
  max-height: min(500px, calc(100vh - 8rem));
}
.mobile-menu-section + .mobile-menu-section { margin-top: 1.25rem; }
.mobile-menu-section h3 {
  margin: 0 0 0.45rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mobile-menu-link {
  min-height: 48px;
  padding: 0.7rem 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--ink);
  border-radius: 0.75rem;
  text-decoration: none;
  font-weight: 650;
}
.mobile-menu-link i {
  width: 1.35rem;
  color: #657169;
  text-align: center;
  font-size: 1.05rem;
}
.mobile-menu-link .mobile-menu-badge {
  margin-left: auto;
  font-size: 0.72rem;
}
.mobile-menu-link.active {
  color: var(--brand-800);
  background: var(--brand-100);
}
.mobile-menu-link.active i { color: var(--brand-700); }
.mobile-fab {
  position: fixed;
  right: 1rem;
  bottom: calc(82px + var(--app-safe-bottom));
  z-index: 1020;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  color: white;
  background: var(--brand-800);
  border-radius: 50%;
  font-size: 1.4rem;
  box-shadow: 0 12px 28px rgba(22, 101, 52, 0.34);
}

.filter-bar { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; }
.transaction-filter-panel {
  background: white;
  border: 1px solid #dfe7e1;
  border-radius: 1.2rem;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.transaction-filter-toggle {
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.transaction-filter-toggle::-webkit-details-marker { display: none; }
.transaction-filter-toggle strong,
.transaction-filter-toggle small {
  display: block;
}
.transaction-filter-toggle small {
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.78rem;
}
.transaction-filter-toggle:hover { background: #f7faf8; }
.transaction-filter-panel[open] .transaction-filter-toggle {
  border-bottom: 1px solid #e4ebe6;
}
.transaction-filter-chevron {
  color: var(--muted);
  transition: transform 0.18s ease;
}
.transaction-filter-panel[open] .transaction-filter-chevron {
  transform: rotate(180deg);
}
.transaction-filters {
  padding: 1rem;
  display: grid;
  gap: 1rem;
}
.transaction-filter-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--brand-800);
  background: var(--brand-100);
  border-radius: 0.8rem;
  font-size: 1.1rem;
}
.transaction-filters .form-label {
  margin-bottom: 0.35rem;
  color: #4e5c52;
  font-size: 0.78rem;
}
.filter-search .input-group-text {
  color: var(--muted);
  background: #f8faf8;
  border-right: 0;
}
.filter-search .input-group .form-control {
  border-left: 0;
}
.filter-search .input-group .form-control:focus {
  border-left: 1px solid var(--brand-700);
}
.transaction-filter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.transaction-filter-grid .filter-category {
  grid-column: 1 / -1;
}
.transaction-filter-actions {
  display: grid;
}
.transaction-filter-actions.has-clear-action {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.mini-summary {
  padding: 0.9rem 1rem;
  border-radius: 1rem;
  background: white;
  border: 1px solid #e2e9e4;
}
.mini-summary small, .mini-summary strong { display: block; }
.mini-summary small { color: var(--muted); }
.mini-summary.income strong { color: var(--income); }
.mini-summary.expense strong { color: var(--danger); }
.transaction-card .card-body { padding: 1rem; }

@media (max-width: 767.98px) {
  .record-list-header { align-items: center; }
  .record-list-header p { display: none; }
  .record-list-footer {
    flex-direction: column;
    justify-content: center;
  }
  .app-pagination { gap: 0.25rem; }
  .app-pagination .page-link {
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
    padding-inline: 0.65rem;
  }
}

.empty-state {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  border: 1px dashed #cad5cc;
  border-radius: 1.2rem;
}
.empty-state > i { font-size: 3rem; color: var(--brand-700); margin-bottom: 1rem; }
.empty-state p { color: var(--muted); }
.form-card { max-width: 760px; }
.image-upload {
  padding: 1rem;
  background: #f8faf8;
  border: 1px dashed #b8c8bb;
  border-radius: 1rem;
}
.transaction-type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.transaction-type-toggle .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.attachment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.attachment-item {
  min-width: 0;
  overflow: hidden;
  background: white;
  border: 1px solid #dfe7e1;
  border-radius: 0.9rem;
}
.attachment-item > a {
  display: block;
  aspect-ratio: 1;
  background: #edf2ee;
}
.attachment-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.attachment-item-footer {
  min-width: 0;
  padding: 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.attachment-item-footer > span {
  min-width: 0;
  flex: 1;
  font-size: 0.76rem;
}
.attachment-preview {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  background: #edf2ee;
  border-radius: 0.9rem;
}
.attachment-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.image-gallery-modal .modal-header > div {
  min-width: 0;
}
.image-gallery-modal .modal-content {
  overflow: hidden;
  background: #101512;
  color: white;
}
.image-gallery-modal .modal-header,
.image-gallery-modal .modal-footer {
  border-color: rgb(255 255 255 / 14%);
}
.image-gallery-modal .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}
.image-gallery-stage {
  position: relative;
  min-height: min(68vh, 680px);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #080b09;
  touch-action: none;
}
.image-gallery-stage > img {
  width: 100%;
  height: min(72vh, 760px);
  display: block;
  object-fit: contain;
  cursor: zoom-in;
  transform-origin: center;
  transition: transform 120ms ease-out;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}
.image-gallery-stage > img.is-zoomed {
  cursor: grab;
}
.image-gallery-stage.is-panning > img {
  cursor: grabbing;
  transition: none;
}
.image-original-loading {
  position: absolute;
  z-index: 2;
  right: 1rem;
  bottom: 1rem;
  padding: 0.45rem 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px;
  color: white;
  background: rgb(0 0 0 / 70%);
  font-size: 0.8rem;
}
.image-gallery-control {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0;
  border-radius: 50%;
  color: white;
  background: rgb(0 0 0 / 55%);
  transform: translateY(-50%);
}
.image-gallery-control:hover,
.image-gallery-control:focus-visible {
  color: white;
  background: rgb(0 0 0 / 78%);
}
.image-gallery-previous { left: 0.75rem; }
.image-gallery-next { right: 0.75rem; }
.image-zoom-level {
  min-width: 4.4rem;
}
.pdf-preview-modal .modal-content {
  height: min(92vh, 900px);
  overflow: hidden;
}
.pdf-preview-stage {
  position: relative;
  min-height: min(72vh, 760px);
  padding: 1rem;
  overflow: auto;
  background: #edf2ee;
}
.pdf-preview-status {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem;
  color: var(--muted);
  text-align: center;
}
.pdf-preview-status.text-danger .spinner-border {
  display: none;
}
.pdf-preview-document {
  min-height: 100%;
  text-align: center;
}
.pdf-preview-document > canvas {
  max-width: none;
  background: white;
  box-shadow: 0 0.25rem 1.25rem rgb(22 39 29 / 14%);
}
.pdf-preview-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pdf-page-counter {
  min-width: 8rem;
  opacity: 1 !important;
  cursor: default;
}
.pdf-zoom-level {
  min-width: 4.4rem;
}
@media (max-width: 575.98px) {
  .image-gallery-stage { min-height: 0; flex: 1; }
  .image-gallery-stage > img { height: 100%; }
  .image-gallery-modal .modal-content,
  .pdf-preview-modal .modal-content { height: 100%; }
  .image-gallery-modal .modal-footer,
  .pdf-preview-modal .modal-footer {
    flex-wrap: wrap;
  }
  .pdf-preview-modal .modal-footer > a {
    flex: 1;
  }
  .pdf-preview-controls {
    width: 100%;
    justify-content: space-between;
  }
  .pdf-preview-stage { min-height: 0; flex: 1; }
}
.detail-amount small, .detail-amount strong { display: block; }
.detail-amount small { color: var(--muted); }
.detail-amount strong { font-size: clamp(2rem, 9vw, 3.2rem); }
.detail-amount.income strong { color: var(--income); }
.detail-amount.expense strong { color: var(--danger); }
.transaction-detail-list > div {
  padding: 0.8rem 0;
  border-top: 1px solid #e7ece8;
}
.transaction-detail-list dt { color: var(--muted); font-size: 0.8rem; }
.transaction-detail-list dd { margin: 0.2rem 0 0; }
.common-fee-bank-account {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.common-fee-bank-logo {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  padding: 0;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.common-fee-bank-account-number {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.common-fee-bank-account-value {
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.common-fee-copy-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.common-fee-payment-bank-account {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: #f8faf8;
  border: 1px solid #dfe7e1;
  border-radius: 0.9rem;
}
.common-fee-payment-bank-account .common-fee-bank-logo {
  width: 80px;
  height: 80px;
  flex-basis: 80px;
}
.common-fee-payment-bank-details { min-width: 0; }
.common-fee-payment-bank-list > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}
.common-fee-payment-bank-list > div + div { margin-top: 0.25rem; }
.common-fee-payment-bank-list dt {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
}
.common-fee-payment-bank-list dd { margin: 0; }
.common-fee-house-link {
  color: inherit;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.common-fee-house-link:hover {
  color: inherit;
  transform: translateY(-2px);
  border-color: #9bcaaa;
  box-shadow: 0 14px 30px rgba(19, 51, 31, 0.12);
}
.common-fee-house-link:focus-visible {
  outline: 3px solid rgba(29, 123, 69, 0.24);
  outline-offset: 3px;
}
.common-fee-house-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.common-fee-house-action {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  color: var(--brand-700);
  font-weight: 650;
}
.common-fee-house-action i {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #edf7ef;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.common-fee-house-link:hover .common-fee-house-action i {
  background: #dff1e4;
  transform: translateX(2px);
}
@media (max-width: 575.98px) {
  .common-fee-payment-bank-account {
    align-items: flex-start;
    padding: 0.9rem;
  }
  .common-fee-payment-bank-account .common-fee-bank-logo {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }
}
.transaction-image-indicator {
  display: inline-flex;
  margin-left: 0.25rem;
  color: var(--brand-700);
  font-size: 0.9rem;
  vertical-align: middle;
}
.revision-list { display: grid; gap: 0.75rem; }
.revision-item {
  padding: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #f8faf8;
  border: 1px solid #e3e9e4;
  border-radius: 0.9rem;
}
.revision-item small { display: block; color: var(--muted); }
.revision-amount {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.revision-amount span { color: var(--muted); text-decoration: line-through; }
.revision-amount strong { color: var(--brand-800); }
.category-chart { display: grid; gap: 0.9rem; }
.category-chart-title { margin-bottom: 0.8rem; }
.category-chart-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.category-chart-heading > span:first-child { min-width: 0; }
.category-chart-amount {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.category-chart-amount small { color: var(--muted); font-size: 0.72rem; }
.category-other-item {
  padding-top: 0.75rem;
  border-top: 1px dashed #dfe7e1;
}
.category-chart-toggle {
  justify-self: start;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
#category-chart,
#annual-summary { scroll-margin-top: 5.5rem; }
.category-chart-row progress {
  width: 100%;
  height: 0.7rem;
  display: block;
  margin-top: 0.35rem;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #e8eee9;
}
.category-chart-row progress::-webkit-progress-bar { background: #e8eee9; }
.category-chart-row progress.income::-webkit-progress-value { background: var(--income); }
.category-chart-row progress.expense::-webkit-progress-value { background: var(--danger); }
.category-chart-row progress.income::-moz-progress-bar { background: var(--income); }
.category-chart-row progress.expense::-moz-progress-bar { background: var(--danger); }
.annual-chart-legend {
  margin: 0.85rem 0 0.6rem;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.85rem;
}
.annual-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.annual-chart-legend i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.2rem;
}
.annual-chart-legend i.income { background: var(--income); }
.annual-chart-legend i.expense { background: var(--danger); }
.annual-chart-legend .annual-chart-unit {
  padding-left: 0.25rem;
  border-left: 1px solid #d9e2da;
}
.annual-chart {
  width: 100%;
  overflow: hidden;
  transition: opacity 0.15s ease;
}
.annual-chart.is-loading,
[data-category-chart-content].is-loading { opacity: 0.55; }
[data-category-chart-content] { transition: opacity 0.15s ease; }
.annual-summary-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #e2e9e4;
  border-radius: 0.9rem;
  background: #fbfcfb;
}
.annual-summary-metric {
  min-width: 0;
  padding: 0.75rem 1rem;
}
.annual-summary-metric + .annual-summary-metric {
  border-left: 1px solid #e2e9e4;
}
.annual-summary-metric span,
.annual-summary-metric strong { display: block; }
.annual-summary-metric span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.annual-summary-metric span i {
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.35rem;
  display: inline-block;
  border-radius: 0.18rem;
}
.annual-summary-metric.income span i { background: var(--income); }
.annual-summary-metric.expense span i { background: var(--danger); }
.annual-summary-metric strong {
  margin-top: 0.15rem;
  overflow-wrap: anywhere;
  font-size: 1.05rem;
}
.annual-summary-metric.income strong { color: var(--income); }
.annual-summary-metric.expense strong,
.annual-summary-metric.net.is-negative strong { color: var(--danger); }
.annual-summary-metric.net:not(.is-negative) strong { color: var(--brand-800); }
.annual-chart-body {
  min-width: 0;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.5rem;
}
.annual-y-axis {
  height: 250px;
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.annual-chart-viewport {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.annual-chart-viewport:focus-visible {
  border-radius: 0.4rem;
  outline: 3px solid rgba(23, 128, 61, 0.2);
  outline-offset: 2px;
}
.annual-vertical-grid {
  position: relative;
  height: 250px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.35rem;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(25% - 1px),
    #e2e9e4 25%
  );
}
.annual-month-column {
  position: relative;
  min-width: 0;
  height: 100%;
  padding: 0 0.25rem;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 2rem;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0.55rem;
}
.annual-month-column:hover,
.annual-month-column.is-selected { background: rgba(23, 128, 61, 0.07); }
.annual-month-column:focus-visible {
  outline: 3px solid rgba(23, 128, 61, 0.25);
  outline-offset: -3px;
}
.annual-bars {
  min-height: 0;
  height: 100%;
  display: block;
  border-bottom: 1.5px solid #b8c8bc;
}
.annual-bars svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.annual-bar {
  transition: opacity 0.15s ease;
}
.annual-bar.income { fill: var(--income); }
.annual-bar.expense { fill: var(--danger); }
.annual-month-column:hover .annual-bar { opacity: 0.78; }
.annual-month-label {
  align-self: center;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}
.annual-chart-swipe-hint {
  margin: 0.55rem 0 0;
  display: none;
  color: var(--muted);
  text-align: center;
  font-size: 0.75rem;
}
.annual-selected-detail {
  margin-top: 0.8rem;
  padding: 0.8rem 1rem;
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) repeat(3, minmax(110px, 1fr));
  gap: 1rem;
  align-items: center;
  border: 1px solid #dfe7e1;
  border-radius: 0.85rem;
  background: #f8faf8;
}
.annual-selected-detail > div small,
.annual-selected-detail > div strong,
.annual-selected-detail span small,
.annual-selected-detail span strong { display: block; }
.annual-selected-detail small { color: var(--muted); font-size: 0.72rem; }
.annual-selected-detail strong { font-size: 0.9rem; }
.annual-selected-detail .income { color: var(--income); }
.annual-selected-detail .expense,
.annual-selected-detail.is-negative [data-annual-selected-net] { color: var(--danger); }
.annual-selected-detail:not(.is-negative) [data-annual-selected-net] { color: var(--brand-800); }
.annual-month-categories {
  margin-top: 0.8rem;
  padding: 1rem;
  border: 1px solid #dfe7e1;
  border-radius: 0.85rem;
}
.annual-month-categories > h3 { margin-bottom: 1rem; }
.annual-month-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.annual-month-category-title {
  margin-bottom: 0.75rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}
.dashboard-chart-status { min-height: 1.25rem; }
.comment-form textarea { resize: vertical; }
.comment-list { display: grid; gap: 1rem; }
.comment-item {
  padding-top: 1rem;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0.75rem;
  border-top: 1px solid #e5ebe6;
}
.comment-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: linear-gradient(145deg, var(--brand-700), var(--brand-950));
  font-weight: 800;
}
.comment-item p {
  margin: 0.35rem 0 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.line-connection {
  padding: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: #f8faf8;
  border: 1px solid #dfe7e1;
  border-radius: 1rem;
}
.line-connection img, .line-avatar {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 50%;
}
.line-avatar {
  display: grid;
  place-items: center;
  color: white;
  background: #06c755;
  font-size: 1.5rem;
}
.organization-logo-preview,
.organization-logo {
  padding: 0.5rem;
  display: grid;
  place-items: center;
  background: white;
  border: 1px solid #dfe7e1;
  border-radius: 1rem;
}
.organization-logo-preview { width: 120px; height: 120px; }
.organization-logo { width: 140px; height: 140px; margin: 0 auto 1rem; }
.organization-logo-preview img,
.organization-logo {
  object-fit: contain;
}
.organization-logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.organization-form-section {
  padding: 1rem;
  background: #fbfdfb;
  border: 1px solid #dfe7e1;
  border-radius: 1rem;
}
.organization-form-section legend {
  float: none;
  width: auto;
  margin: 0 0 0.5rem;
  padding: 0 0.35rem;
  color: var(--brand-800);
}
.organization-profile { text-align: center; }
.organization-profile .transaction-detail-list { text-align: left; }
.btn-line {
  color: white;
  background: #06c755;
  border-color: #06c755;
}
.btn-line:hover, .btn-line:focus {
  color: white;
  background: #05ad4a;
  border-color: #05ad4a;
}
.house-card { color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.house-card:hover { color: inherit; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(19, 51, 31, 0.13); }
.house-compact-card {
  overflow: hidden;
  border: 1px solid #e3e9e4;
  border-radius: 1rem;
  background: white;
  box-shadow: var(--shadow);
}
.house-compact-header {
  min-height: 64px;
  padding: 0.65rem 0.75rem 0.65rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.house-compact-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.house-compact-title {
  min-width: 0;
  font-weight: 750;
  overflow-wrap: anywhere;
}
.house-compact-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.house-status-dot,
.record-status-dot {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  display: inline-block;
  border-radius: 50%;
}
.house-status-dot.is-active,
.record-status-dot.is-active {
  background: var(--bs-success);
  box-shadow: 0 0 0 3px rgba(var(--bs-success-rgb), 0.14);
}
.house-status-dot.is-inactive,
.record-status-dot.is-inactive {
  border: 2px solid #9aa3aa;
  background: transparent;
}
.record-status-dot.is-pending {
  background: #f4b400;
  box-shadow: 0 0 0 3px rgba(244, 180, 0, 0.14);
}
.storage-stat-icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 0.8rem;
  background: rgba(var(--bs-success-rgb), 0.1);
  font-size: 1.25rem;
}
.usage-statistics-card { max-width: 760px; }
.usage-statistics-row {
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.usage-statistics-label {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.usage-statistics-label > i {
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 0.65rem;
  color: var(--brand-800);
  background: rgba(23, 128, 61, 0.1);
}
.usage-statistics-row > strong {
  flex: 0 0 auto;
  color: var(--brand-800);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.usage-statistics-total {
  background: rgba(23, 128, 61, 0.07);
  font-size: 1.05rem;
}
.storage-stat-icon {
  margin-bottom: 0.75rem;
}
.storage-module-card {
  height: 100%;
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.9rem;
  background: var(--bs-body-bg);
}
.storage-module-details {
  display: grid;
  gap: 0.5rem;
  margin: 1rem 0 0;
}
.storage-module-details > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.storage-module-details dt {
  color: var(--bs-secondary-color);
  font-weight: 500;
}
.storage-module-details dd {
  margin: 0;
  text-align: right;
}
.house-card-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0.8rem;
  color: var(--danger);
  background: #fff1f2;
  font-size: 1.1rem;
}
.house-card-toggle:hover,
.house-card-toggle:focus-visible {
  color: #9f2d28;
  background: #ffe4e6;
}
.house-card-toggle:focus-visible {
  outline: 3px solid rgba(194, 65, 58, 0.2);
  outline-offset: 2px;
}
.house-card-toggle i { transition: transform 0.2s ease; }
.house-card-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.house-card-details {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.25s ease,
    opacity 0.2s ease;
}
.house-compact-card.is-expanded .house-card-details {
  grid-template-rows: 1fr;
  opacity: 1;
}
.house-card-details-inner {
  min-height: 0;
  overflow: hidden;
}
.house-compact-details {
  margin: 0;
  border-top: 1px solid #edf1ee;
}
.house-compact-details > div {
  padding: 0.75rem 1rem;
  display: grid;
  grid-template-columns: minmax(100px, 38%) minmax(0, 1fr);
  gap: 0.75rem;
  border-bottom: 1px solid #edf1ee;
}
.house-compact-details dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}
.house-compact-details dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.house-compact-actions { padding: 0.75rem 1rem; }
.user-card-mobile-header {
  align-items: center;
  gap: 0.65rem;
}
.user-card-mobile-title {
  min-width: 0;
  flex: 1 1 auto;
}
.user-card-mobile-header .house-card-toggle { flex: 0 0 auto; }
.house-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--brand-800);
  background: var(--brand-100);
  border-radius: 1rem;
  font-size: 1.3rem;
}
.house-meta { display: flex; gap: 1rem; color: var(--muted); font-size: 0.85rem; }
.import-step { display: flex; align-items: flex-start; gap: 0.9rem; }
.import-step-number {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--brand-800);
  background: var(--brand-100);
  border-radius: 50%;
  font-weight: 800;
}
.excel-upload {
  padding: 1rem;
  background: #f8faf8;
  border: 1px dashed #b8c8bb;
  border-radius: 1rem;
}
.import-rules { padding-left: 1.2rem; color: var(--muted); }
.import-rules li + li { margin-top: 0.5rem; }
.info-tile {
  min-height: 132px;
  padding: 1rem;
  border-radius: 1rem;
  background: white;
  border: 1px solid #e3e9e4;
  box-shadow: var(--shadow);
}
.info-tile i { display: block; color: var(--brand-700); font-size: 1.4rem; margin-bottom: 0.8rem; }
.info-tile small, .info-tile strong { display: block; }
.info-tile small { color: var(--muted); }
.membership-item { display: flex; align-items: center; gap: 0.8rem; min-height: 74px; }
.membership-item small { display: block; color: var(--muted); }
.avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: linear-gradient(145deg, #65a675, var(--brand-800));
  font-weight: 800;
}
.approval-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}
.approval-form .btn { width: 100%; }
.user-search {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.user-search .input-group { grid-column: 1 / -1; }
.user-search:not(.has-clear-action) .btn { grid-column: 1 / -1; }

@media (max-width: 575.98px) {
  .app-header-layout {
    gap: 0.35rem;
    padding-inline: 0.55rem;
  }
  .header-task-center-menu {
    position: fixed !important;
    top: calc(var(--app-safe-top) + 68px) !important;
    right: 0.5rem !important;
    bottom: auto !important;
    left: 0.5rem !important;
    width: auto;
    max-height: calc(100dvh - var(--app-safe-top) - 76px);
    margin: 0 !important;
    transform: none !important;
  }
  .responsive-account-shortcut {
    width: 42px;
    padding-inline: 0;
    justify-content: center;
  }
  .responsive-account-shortcut span { display: none; }
  .app-header-actions { gap: 0.25rem; }
  .balance-hero { align-items: flex-start; }
  .balance-formula { gap: 0.4rem; }
  .balance-formula small { font-size: 0.65rem; }
  .balance-formula b { font-size: 0.78rem; }
  .hero-icon { position: absolute; right: 1rem; }
  .page-heading { align-items: stretch; flex-direction: column; }
  .page-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .page-action-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .page-actions .btn { width: 100%; }
  .revision-item { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 767.98px) {
  .annual-summary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .annual-summary-metric { padding: 0.65rem 0.75rem; }
  .annual-summary-metric.net {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid #e2e9e4;
    border-left: 0;
  }
  .annual-summary-metric.net strong { margin-top: 0; }
  .annual-chart-legend {
    justify-content: flex-start;
    gap: 0.75rem;
    font-size: 0.76rem;
  }
  .annual-chart-legend .annual-chart-unit { margin-left: auto; }
  .annual-chart-body {
    grid-template-columns: 2.35rem minmax(0, 1fr);
    gap: 0.3rem;
  }
  .annual-y-axis,
  .annual-vertical-grid { height: 230px; }
  .annual-vertical-grid {
    width: 900px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.3rem;
  }
  .annual-chart-swipe-hint { display: block; }
  .annual-selected-detail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 1rem;
  }
  .annual-selected-detail > div {
    grid-column: 1 / -1;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid #dfe7e1;
  }
  .annual-month-category-grid { grid-template-columns: minmax(0, 1fr); }
  .category-chart-amount {
    display: block;
    line-height: 1.2;
  }
  .category-chart-amount small { display: block; margin-top: 0.15rem; }
}

@media (min-width: 576px) {
  .stat-card { min-height: 112px; flex-direction: row; align-items: center; }
  .attachment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .user-search {
    grid-template-columns: minmax(260px, 1fr) auto auto;
  }
  .user-search .input-group { grid-column: auto; }
  .user-search:not(.has-clear-action) .btn { grid-column: auto; }
  .transaction-filters { padding: 1.25rem; }
  .transaction-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .transaction-filter-grid .filter-category { grid-column: auto; }
  .transaction-filter-actions {
    display: flex;
    justify-content: flex-end;
  }
  .transaction-filter-actions .btn { min-width: 150px; }
}

@media (min-width: 576px) and (max-width: 1199.98px) {
  .page-heading.has-page-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .page-actions { justify-content: flex-start; }
}

@media (min-width: 768px) {
  .approval-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .approval-form .btn { grid-column: 1 / -1; }
  .app-main { padding-top: 2rem; padding-bottom: 3rem; }
  .balance-hero { padding: 2rem; }
  .stat-card { padding: 1.25rem; }
  .form-card { margin-inline: auto; }
  .user-card { max-width: 900px; }
  .annual-vertical-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.35rem;
  }
}

@media (min-width: 992px) {
  .dashboard-balance-grid.has-bank-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .has-app-nav {
    padding-left: var(--desktop-sidebar-width);
  }
  .has-app-nav .app-header {
    display: none;
  }
  .desktop-sidebar {
    position: fixed;
    z-index: 1040;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--desktop-sidebar-width);
    padding-top: var(--app-safe-top);
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.97);
    border-right: 1px solid #dfe7e1;
    box-shadow: 10px 0 32px rgba(20, 48, 29, 0.06);
    backdrop-filter: blur(18px);
  }
  .mobile-menu-sidebar { display: none !important; }
  .approval-form {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  }
  .approval-form .btn {
    grid-column: auto;
    width: auto;
  }
}

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

.bank-voucher-print-page {
  width: min(100% - 2rem, 210mm);
  margin: 2rem auto;
}

.bank-voucher-print-actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.bank-voucher-print-sheet {
  position: relative;
  overflow: hidden;
  min-height: 270mm;
  padding: 16mm;
  background: #fff;
  border: 1px solid #dfe7e1;
  border-radius: 1rem;
  box-shadow: 0 18px 50px rgba(20, 48, 29, 0.1);
}

.bank-voucher-print-sheet > :not(.bank-voucher-draft-watermark) {
  position: relative;
  z-index: 1;
}

.bank-voucher-draft-watermark {
  position: absolute;
  z-index: 0;
  inset: 42% auto auto 50%;
  color: rgba(180, 83, 9, 0.08);
  font-size: clamp(4rem, 15vw, 9rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(-28deg);
  white-space: nowrap;
}

.bank-voucher-print-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #166534;
}

.bank-voucher-print-header h1 {
  margin: 0;
  font-size: 1.75rem;
}

.bank-voucher-print-organization {
  margin-bottom: 0.35rem;
  color: #4b6353;
}

.bank-voucher-print-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 2rem;
  margin: 1.5rem 0;
}

.bank-voucher-print-meta div {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr;
  gap: 0.75rem;
}

.bank-voucher-print-meta dt {
  color: #5f6f64;
  font-weight: 500;
}

.bank-voucher-print-meta dd {
  margin: 0;
  font-weight: 600;
}

.bank-voucher-print-table th,
.bank-voucher-print-table td {
  border-color: #cfdad2;
}

.bank-voucher-print-note {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid #dfe7e1;
  border-radius: 0.75rem;
}

.bank-voucher-print-note p {
  margin: 0.5rem 0 0;
  white-space: pre-wrap;
}

.bank-voucher-print-footer {
  margin-top: 2.5rem;
}

.bank-voucher-print-footer > p {
  color: #9a3412;
  font-weight: 600;
}

.bank-voucher-print-footer > div {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 3rem;
}

@media (max-width: 575.98px) {
  .bank-voucher-print-page {
    width: min(100% - 1rem, 210mm);
    margin: 0.5rem auto;
  }

  .bank-voucher-print-sheet {
    min-height: 0;
    padding: 1rem;
  }

  .bank-voucher-print-meta {
    grid-template-columns: 1fr;
  }

  .bank-voucher-print-footer > div {
    flex-direction: column;
  }
}

@page {
  size: A4;
  margin: 12mm;
}

@media print {
  html,
  body {
    background: #fff !important;
  }

  body.has-app-nav {
    padding: 0 !important;
  }

  .no-print {
    display: none !important;
  }

  .bank-voucher-print-page {
    width: auto;
    margin: 0;
  }

  .bank-voucher-print-sheet {
    min-height: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .bank-voucher-print-table tr,
  .bank-voucher-print-note,
  .bank-voucher-print-footer {
    break-inside: avoid;
  }
}

/* กล่อง preview ไฟล์ที่ผู้ใช้เลือกไว้ก่อนกดส่ง */
.evidence-preview-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #edf2ee;
}

/* กล่องแทนหลักฐานสำหรับผู้ที่ไม่มีสิทธิ์ดู ไม่มีข้อมูลจริงอยู่ในนั้น */
.evidence-locked {
  position: relative;
  min-height: 170px;
  display: grid;
  place-items: center;
  border-radius: 1rem;
  overflow: hidden;
}
.evidence-locked-blur {
  position: absolute;
  inset: -24px;
  filter: blur(16px);
  opacity: 0.6;
  background:
    radial-gradient(circle at 25% 30%, #cfe0d4, transparent 55%),
    radial-gradient(circle at 75% 65%, #dbe6f2, transparent 55%),
    repeating-linear-gradient(
      115deg, #eef3ee 0 22px, #e2eae4 22px 44px
    );
}
.evidence-locked-message {
  position: relative;
  max-width: 30rem;
  padding: 1.25rem;
  text-align: center;
  color: #46554a;
}