/* Global Font Import - Unified Source */



body {
  /* Main body font - DM Sans */
  font-family:
    "DM Sans",
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  background-color: #faf8f5; /* Light Cream/Beige Background */
  color: #1a1a18;
  line-height: 1.5;
  font-synthesis: none; /* Disable browser's faux bold/italic synthesis to prevent top/bottom font clipping */
}

/* --- Premium Form & Input Refinements --- */
.input-group {
  transition: all 0.2s ease;
}

.form-control, .form-select, .input-group-text {
  border-color: var(--bs-border-color);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  transition: all 0.2s ease;
}

[data-bs-theme="dark"] .form-control, 
[data-bs-theme="dark"] .form-select, 
[data-bs-theme="dark"] .input-group-text {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .bg-light {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .input-group.border {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.form-control:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 0.25rem rgba(29, 158, 117, 0.15);
}

/* Search bar specific integration */
.search-input-group {
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-tertiary-bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}

[data-bs-theme="dark"] .search-input-group {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.search-input-group:focus-within {
  border-color: var(--color-success) !important;
  box-shadow: 0 0 0 0.25rem rgba(29, 158, 117, 0.15) !important;
}

/* Global Card Refinements */
.card {
  box-shadow: none !important;
  /* box-shadow: 0 0 0 0.03rem rgba(29, 158, 117, 0.15) !important; */
  border: 0.1px solid var(--bs-border-color-translucent) !important;
  border-radius: 18px !important;
  --bs-card-border-radius: 18px;
}

.glass-card {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(10px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
  border: 1px solid rgba(209, 213, 219, 0.3) !important;
}

[data-bs-theme="dark"] .glass-card {
  background: rgba(30, 30, 30, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.card > .card-header:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.fs-blog-content {
  font-size: 1.125rem !important; /* Middle ground between fs-5 (1.25rem) and fs-6 (1rem) */
}

/* --- Premium Table Refinements --- */
.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(29, 158, 117, 0.02);
  --bs-table-hover-bg: rgba(29, 158, 117, 0.05);
  border-color: var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .table {
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-hover-bg: rgba(93, 202, 165, 0.06);
}

/* --- Authenticated Sidebar Page Table Container Refinements --- */
body.has-sidebar .table-responsive {
  background-color: #fcfbfa !important;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  overflow-x: auto;
}

body.has-sidebar .table-responsive .table,
body.has-sidebar table.table {
  --bs-table-bg: #fcfbfa;
  --bs-table-striped-bg: rgba(0, 0, 0, 0.012);
  --bs-table-hover-bg: rgba(29, 158, 117, 0.04);
  --bs-table-border-color: rgba(0, 0, 0, 0.04);
  background-color: #fcfbfa !important;
}

body.has-sidebar .table-responsive .table > :not(caption) > * > * {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-top: none !important;
  background-color: transparent !important;
}

body.has-sidebar .table-responsive .table tbody tr:last-child > * {
  border-bottom: none !important;
}

body.has-sidebar .card:has(> .card-body > .table-responsive),
body.has-sidebar .card:has(> .table-responsive) {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] body.has-sidebar .table-responsive {
  background-color: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}

[data-bs-theme="dark"] body.has-sidebar .table-responsive .table,
[data-bs-theme="dark"] body.has-sidebar table.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-hover-bg: rgba(93, 202, 165, 0.06);
  --bs-table-border-color: rgba(255, 255, 255, 0.05);
  background-color: transparent !important;
}

[data-bs-theme="dark"] body.has-sidebar .table-responsive .table > :not(caption) > * > * {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] body.has-sidebar .card:has(> .card-body > .table-responsive),
[data-bs-theme="dark"] body.has-sidebar .card:has(> .table-responsive) {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* One table type scale across the app (matches All Transactions) */
body.has-sidebar .table-responsive .table th,
body.has-sidebar .table-responsive .table td,
body.has-sidebar table.table th,
body.has-sidebar table.table td {
  font-size: 0.95rem !important;
}

/* --- Filter Pills & Nav Pills Standardization --- */
.filter-pills-container,
.nav-pills-standard {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.35rem 0;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.filter-pills-container::-webkit-scrollbar,
.nav-pills-standard::-webkit-scrollbar {
  display: none;
}

.filter-pill,
.nav-pills-standard .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem !important;
  border-radius: 50px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1.5px solid var(--bs-border-color-translucent) !important;
  background-color: transparent !important;
  color: var(--bs-body-color) !important;
  white-space: nowrap;
}

.filter-pill-inactive,
.nav-pills-standard .nav-link:not(.active) {
  background-color: transparent !important;
  color: var(--bs-body-color) !important;
  border-color: var(--bs-border-color-translucent) !important;
}

.filter-pill-inactive:hover,
.nav-pills-standard .nav-link:not(.active):hover {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}

.filter-pill.active,
.filter-pill-all.active,
.filter-pill-income.active,
.nav-pills-standard .nav-link.active {
  border-color: var(--color-success-text, #0F7657) !important;
  color: var(--color-success-text, #0F7657) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.filter-pill-expense.active {
  border-color: var(--color-danger-text, #B93822) !important;
  color: var(--color-danger-text, #B93822) !important;
  background-color: transparent !important;
}

.filter-pill-transfer.active {
  border-color: var(--color-info-text, #1E65B5) !important;
  color: var(--color-info-text, #1E65B5) !important;
  background-color: transparent !important;
}

.filter-pill-loan.active {
  border-color: var(--color-warning-text, #9C5400) !important;
  color: var(--color-warning-text, #9C5400) !important;
  background-color: transparent !important;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fab-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(29, 158, 117, 0.4);
  }
  70% {
    transform: scale(1.04);
    box-shadow: 0 0 0 12px rgba(29, 158, 117, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(29, 158, 117, 0);
  }
}

.fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

/* Utility Classes */
.hover-lift {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Icon refinement */
.bi {
  vertical-align: -0.125em;
}

/* Icon Shapes for dashboard/analytics */
.icon-shape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.icon-shape-sm {
  width: 48px;
  height: 48px;
}

.icon-shape-md {
  width: 64px;
  height: 64px;
}

.icon-shape-lg {
  width: 80px;
  height: 80px;
}

/* --- Global Dashboard Theme Overrides --- */

:root {
  --color-primary: #1a1a18; /* Warm Ink Black */
  --color-secondary: #0F7657; /* Forest Green (Accessible Text Contrast >= 4.5:1) */
  --color-success: #1D9E75; /* Forest Green (Buttons/Fill UI >= 3.0:1) */
  --color-success-text: #0F7657; /* Deep Forest Green (Text Contrast >= 4.5:1 on Light BGs & Option C) */
  --color-danger: #E05C45; /* Warm Danger Red (Buttons/UI) */
  --color-danger-text: #B93822; /* Accessible Warm Red (Text Contrast >= 4.5:1 on Light BGs & Option C) */
  --color-warning: #D4831A; /* Warm Amber (UI) */
  --color-warning-text: #9C5400; /* Accessible Amber (Text Contrast >= 4.5:1 on Light BGs) */
  --color-info-text: #165A9E; /* Accessible Transfer Blue (Text Contrast >= 4.5:1) */
  --color-muted-text: #595855; /* Accessible Muted Transfer Grey (Text Contrast >= 4.5:1) */
  --color-dark-panel: #15241d;
  --color-dark-panel-text: #d6efe3;
  --bg-color: #faf8f5; /* Light Cream/Beige */

  --surface-color: #ffffff;
  --text-main: #1a1a18; /* Warm Ink Black */
  --color-accent: #1D9E75;
  --color-accent2: #D4831A;
  --border-color: rgba(26,26,24,0.1);
  --paper: #faf8f5;
  --paper2: #f2f0eb;
  --paper3: #e8e5de;
  --ink: #1a1a18;
  --ink2: #4a4a46;
  --ink3: #8a8a84;

  /* Override Bootstrap info color (default cyan is too bright) */
  --bs-info: #3d7a8a;
  --bs-info-rgb: 61, 122, 138;

  /* Override Bootstrap primary (default blue → Forest Green, accessible text contrast >= 4.5:1) */
  --bs-primary: #0F7657;
  --bs-primary-rgb: 15, 118, 87;
  --bs-primary-bg-subtle: rgba(15, 118, 87, 0.1);
  --bs-primary-border-subtle: rgba(15, 118, 87, 0.2);
  --bs-primary-text-emphasis: #085041;

  /* Override Bootstrap danger (default red → Warm Red) */
  --bs-danger: #E05C45;
  --bs-danger-rgb: 192, 57, 43;

  /* Override Bootstrap success */
  --bs-success: #1D9E75;
  --bs-success-rgb: 29, 158, 117;

  /* Toast Notification Standardized Colors */
  /* Success toasts use the primary green (same as the primary buttons) in light and dark themes. */
  .toast.text-bg-success,
  .toast.bg-success,
  [data-bs-theme="dark"] .toast.text-bg-success,
  [data-bs-theme="dark"] .toast.bg-success {
    background-color: var(--color-secondary, #0F7657) !important;
    color: #ffffff !important;
    border: 0 !important;
  }

  /* Override Bootstrap warning */
  --bs-warning: #D4831A;
  --bs-warning-rgb: 224, 123, 57;

  /* Sidebar Variables */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 85px;
  --sidebar-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --sidebar-bg: var(--bs-body-bg);
  --sidebar-border: var(--bs-border-color);
}

/* --- Sidebar Styles --- */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  background: #faf8f5 !important;
  border-right: none !important;
  transition: var(--sidebar-transition);
  overflow: visible;
  box-shadow: none !important;
}

body.demo-mode .sidebar {
  top: 40px;
  height: calc(100vh - 40px);
}

[data-bs-theme="dark"] .sidebar {
  background: #0b0f17 !important;
  box-shadow: none !important;
}

/* Sidebar Brand Area */
.sidebar-brand {
  letter-spacing: -0.02em;
  transition: all 0.2s ease;
}

.sidebar-brand:hover {
  opacity: 0.8;
}

/* Sidebar Greeting Box */
.sidebar-greeting-container {
  padding: 0.5rem 1.25rem 1.5rem 1.25rem;
  transition: opacity 0.3s ease;
}

.sidebar-greeting-box {
  background: rgba(29, 158, 117, 0.05);
  border: 1px solid rgba(29, 158, 117, 0.1);
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.3s ease;
}

[data-bs-theme="dark"] .sidebar-greeting-box {
  background: rgba(93, 202, 165, 0.05);
  border: 1px solid rgba(93, 202, 165, 0.1);
}

.greeting-text {
  font-size: 0.825rem;
  color: var(--bs-secondary-color);
  margin-bottom: 0px;
  line-height: 1.2;
}

.user-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--bs-primary-text-emphasis);
  margin-bottom: 0.2rem;
  line-height: 1.2;
}

[data-bs-theme="dark"] .user-name {
  color: var(--color-success); /* Brighter green in dark mode */
}

.encouragement-text {
  font-size: 0.725rem;
  color: var(--bs-success-text-emphasis);
  font-weight: 500;
  line-height: 1.3;
  opacity: 0.9;
}

.sidebar.collapsed .sidebar-greeting-container {
  display: none !important;
}

/* Collapsed State */
.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-text,
.sidebar.collapsed .sidebar-section,
.sidebar.collapsed .sidebar-footer .nav-text,
.sidebar.collapsed .sidebar-brand span,
.sidebar.collapsed hr {
  display: none !important;
}

.sidebar.collapsed .sidebar-header {
  justify-content: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: -4px; /* Slight adjustment for the logo when collapsed */
}

.sidebar.collapsed .sidebar-brand {
  justify-content: center;
  width: 100%;
  padding: 0 !important;
}

.sidebar.collapsed .nav-link {
  justify-content: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Account type status dots */
.account-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #6c757d; /* Default Other */
  transition: all 0.2s ease;
}

.type-bank .account-dot, 
.type-cash .account-dot { background-color: #1D9E75; }
.type-investment .account-dot, 
.type-fixed_deposit .account-dot { background-color: #6610f2; }
.type-credit_card .account-dot { background-color: #fd7e14; }

.sidebar.collapsed .account-item .account-dot {
  margin-right: 0 !important;
  width: 10px;
  height: 10px;
}

.sidebar.collapsed .nav-link i {
  margin: 0 !important;
  font-size: 1.3rem;
}

.sidebar-toggle {
  background: rgba(var(--bs-primary-rgb), 0.05);
  border: 1px solid rgba(var(--bs-primary-rgb), 0.1);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  cursor: pointer;
  color: var(--bs-primary) !important;
}

.sidebar-toggle:hover {
  background: rgba(var(--bs-primary-rgb), 0.15);
  transform: scale(1.1);
}

.sidebar.collapsed .sidebar-toggle {
  position: absolute;
  right: -14px;
  top: 28px;
  background: var(--bs-body-bg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  border: 1px solid var(--sidebar-border);
  z-index: 1060; /* Higher than sidebar and navbar */
  width: 28px;
  height: 28px;
}

.sidebar.collapsed .sidebar-toggle i {
  display: inline-block;
}

.sidebar.collapsed .sidebar-header {
  justify-content: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.sidebar.collapsed .nav-link {
  justify-content: center;
  padding: 0.8rem 0 !important;
  margin: 0.2rem 0.6rem !important;
}

.sidebar.collapsed .sidebar-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.sidebar.collapsed .collapse {
  display: none !important;
}

/* Quick Search Trigger */
.btn-search-trigger {
  height: 38px;
  background-color: var(--bs-body-bg) !important;
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 8px !important;
  color: var(--bs-secondary-color) !important;
  transition: all 0.15s ease-in-out;
}

.btn-search-trigger:hover {
  background-color: rgba(29, 158, 117, 0.04) !important;
  border-color: rgba(29, 158, 117, 0.3) !important;
  color: var(--bs-body-color) !important;
}

.btn-search-trigger:focus {
  box-shadow: 0 0 0 0.2rem rgba(29, 158, 117, 0.15) !important;
}

/* Collapsed sidebar trigger behavior */
.sidebar.collapsed .sidebar-search-container {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.sidebar.collapsed .btn-search-trigger {
  justify-content: center !important;
  padding: 0 !important;
  width: 100% !important;
}

.sidebar.collapsed .btn-search-trigger .command-kbd {
  display: none !important;
}

/* Navigation Links */
.sidebar .nav {
  padding: 0 0.6rem;
}

.sidebar .nav-link {
  position: relative;
  color: #54647c;
  padding: 0.45rem 0.85rem;
  margin: 0.15rem 0;
  transition: all 0.15s ease-in-out;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.25;
  opacity: 1;
}

.sidebar .nav-link i {
  font-size: 1.15rem;
  transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #54647c;
}

.sidebar .nav-link:hover {
  background-color: rgba(0, 0, 0, 0.035);
  color: #1e293b;
}

.sidebar .nav-link:hover i {
  color: #0f172a;
}

/* Active Item State with Soft Green Wash */
.sidebar .nav-link.active {
  background-color: rgba(29, 158, 117, 0.1) !important;
  color: var(--color-success-text, #0F7657) !important;
  font-weight: 600;
  border: none !important;
}

.sidebar .nav-link.active i {
  color: var(--color-success-text, #0F7657) !important;
}

.sidebar .nav-link.active .badge-soft-success {
  color: #064e3b !important;
  background-color: rgba(16, 185, 129, 0.15) !important;
}

/* Dark sidebar: the light-mode dark-green text above is unreadable on the dark active row */
[data-bs-theme="dark"] .sidebar .nav-link.active .badge-soft-success {
  color: var(--color-success-text, #5DCAA5) !important;
  background-color: rgba(93, 202, 165, 0.18) !important;
  border-color: rgba(93, 202, 165, 0.35) !important;
}

/* Collapsed Sidebar Item Styles */
.sidebar.collapsed .nav-link {
  justify-content: center;
  padding: 0.65rem 0 !important;
  margin: 0.2rem 0.2rem !important;
}

.btn-sidebar-add {
  position: absolute;
  right: 1.2rem;
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--bs-primary) !important;
  text-decoration: none !important;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
  background: rgba(var(--bs-primary-rgb), 0.1);
  padding: 2px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sidebar:not(.collapsed) .nav-link:hover + .btn-sidebar-add,
.sidebar:not(.collapsed) .btn-sidebar-add:hover {
  opacity: 1;
  right: 0.8rem;
}

.sidebar.collapsed .btn-sidebar-add {
  display: none !important;
}

/* Prevent sidebar badges from overlapping with the "+ ADD" hover button */
.sidebar .nav-link .badge {
  transition: opacity 0.2s ease;
}

.sidebar:not(.collapsed) .position-relative:hover .nav-link .badge {
  opacity: 0;
}

/* Sidebar Divider */
.sidebar hr {
  margin: 1.5rem 0 1rem 0 !important;
  opacity: 0.5;
  border-top: 1px solid var(--sidebar-border);
}

/* Sidebar Sections (Accounts) */
.sidebar-section {
  transition: opacity 0.2s ease;
}

.sidebar.collapsed .sidebar-section {
  opacity: 0;
  pointer-events: none;
  height: 0;
  margin: 0 !important;
  overflow: hidden;
}

.sidebar-section {
  margin-top: 0.5rem;
}

.sidebar-section-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #475569;
  opacity: 1;
  margin-top: 0.85rem !important;
  margin-bottom: 0.3rem !important;
  padding-top: 0.75rem !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.sidebar-section-title:first-of-type {
  border-top: none !important;
  margin-top: 0.2rem !important;
  padding-top: 0 !important;
}

[data-bs-theme="dark"] .sidebar-section-title {
  color: #94a3b8;
  border-top-color: rgba(255, 255, 255, 0.08);
}

.account-item {
  color: var(--bs-body-color);
  transition: all 0.2s ease;
}

.account-item:hover {
  background: rgba(var(--bs-primary-rgb), 0.05) !important;
  color: var(--bs-primary) !important;
}

.account-name {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

.account-balance {
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--bs-font-monospace);
  font-weight: 600;
}

.sidebar-section .nav-link.small .text-primary {
  border-top: 1px solid rgba(var(--bs-primary-rgb), 0.1);
  padding-top: 0.5rem;
  margin-top: 0.25rem;
  width: 100%;
}
.sidebar-footer {
  padding: 1rem 0;
  border-top: 1px solid rgba(var(--bs-border-color-rgb), 0.05);
}

/* Dark Mode Sidebar Enhancements */
[data-bs-theme="dark"] .sidebar .nav-link {
  color: #94a3b8;
}

[data-bs-theme="dark"] .sidebar .nav-link i {
  color: #94a3b8;
}

[data-bs-theme="dark"] .sidebar .nav-link:hover {
  color: #f8fafc !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .sidebar .nav-link:hover i {
  color: #f8fafc !important;
}

[data-bs-theme="dark"] .sidebar .nav-link.active {
  color: #5DCAA5 !important;
  background: rgba(93, 202, 165, 0.12) !important;
}

[data-bs-theme="dark"] .sidebar .nav-link.active i {
  color: #5DCAA5 !important;
}

[data-bs-theme="dark"] .sidebar .nav-link .active-indicator {
  background-color: #5DCAA5;
}

[data-bs-theme="dark"] .sidebar .account-item:hover,
[data-bs-theme="dark"] .sidebar #sidebarUserDropdown:hover,
[data-bs-theme="dark"] .sidebar .dropdown-item:hover {
  color: #5DCAA5 !important;
  background: rgba(93, 202, 165, 0.08) !important;
  opacity: 1;
}

[data-bs-theme="dark"] .sidebar-section-title,
[data-bs-theme="dark"] .mobile-menu-header {
  color: rgba(255, 255, 255, 0.55) !important;
  opacity: 1 !important;
}

.mobile-menu-header {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding-left: 1.75rem !important;
  color: var(--bs-secondary-color, #6c757d) !important;
  opacity: 0.85;
}

/* Top Navbar Adjustments */
.navbar.sticky-top {
  background: rgba(var(--bs-body-bg-rgb), 0.8) !important;
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  border-bottom: 1px solid rgba(var(--bs-border-color-rgb), 0.05) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
  height: 64px;
  display: flex;
  align-items: center;
}

html,
body.has-sidebar {
  background-color: #faf8f5 !important;
}

[data-bs-theme="dark"] html,
[data-bs-theme="dark"] body.has-sidebar {
  background-color: #0b0f17 !important;
}

/* Layout Adjustments for Desktop */
@media (min-width: 992px) {
  body.has-sidebar {
    background-color: #faf8f5 !important;
    height: 100vh;
    overflow: hidden;
    padding-left: var(--sidebar-width);
    padding-top: 64px;
    transition: padding-left var(--sidebar-transition), padding-top var(--sidebar-transition);
  }

  [data-bs-theme="dark"] body.has-sidebar {
    background-color: #0b0f17 !important;
  }

  body.has-sidebar.demo-mode {
    padding-top: 104px; /* 64px navbar + 40px demo banner */
  }

  body.has-sidebar main {
    background-color: #ffffff !important;
    border-top-left-radius: 1.5rem !important;
    border-top: 1px solid var(--bs-border-color) !important;
    border-left: 1px solid var(--bs-border-color) !important;
    box-shadow: none !important;
    height: calc(100vh - 64px);
    overflow-y: auto;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1.75rem 2rem !important;
  }

  [data-bs-theme="dark"] body.has-sidebar main {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-top: 0.5px solid rgba(255, 255, 255, 0.08) !important;
    border-left: 0.5px solid rgba(255, 255, 255, 0.08) !important;
  }

  body.has-sidebar.demo-mode main {
    height: calc(100vh - 104px);
  }

  @media (min-width: 1400px) {
    body.has-sidebar main {
      padding-left: 2.5rem !important;
      padding-right: 2.5rem !important;
    }

    body.has-sidebar main .main-content-container {
      max-width: 1400px;
      margin-left: auto;
      margin-right: auto;
      width: 100%;
    }
  }

  @media (min-width: 1800px) {
    body.has-sidebar main .main-content-container {
      max-width: 1560px;
      margin-left: auto;
      margin-right: auto;
      width: 100%;
    }
  }

  body.has-sidebar.sidebar-collapsed {
    padding-left: var(--sidebar-collapsed-width);
  }

  body.has-sidebar .navbar.sticky-top {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--sidebar-width);
    width: auto;
    transition: all var(--sidebar-transition);
    z-index: 1020;
    background: #faf8f5 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
  }

  /* Offset navbar in demo mode when banner is present */
  body.demo-mode.has-sidebar .navbar.sticky-top {
    top: 40px;
  }

  [data-bs-theme="dark"] body.has-sidebar .navbar.sticky-top {
    background: #0b0f17 !important;
    border-bottom: none !important;
  }

  body.has-sidebar.sidebar-collapsed .navbar.sticky-top {
    left: var(--sidebar-collapsed-width);
  }

  /* Settings Navigation */
  .settings-horizontal-nav .nav-link {
    transition: all 0.2s ease;
    white-space: nowrap;
    border: none !important;
    color: var(--bs-secondary-color, #6c757d);
  }

  .settings-horizontal-nav .nav-link:hover:not(.active) {
    background: rgba(var(--bs-primary-rgb), 0.05);
    color: var(--bs-body-color);
  }

  .settings-horizontal-nav .nav-link.active {
    background: rgba(var(--bs-primary-rgb), 0.1) !important;
    color: var(--bs-primary) !important;
  }

  .settings-card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .settings-card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
    background: rgba(var(--bs-primary-rgb), 0.02);
  }

  .no-scrollbar::-webkit-scrollbar,
  .scrollable-tabs::-webkit-scrollbar,
  .hide-scrollbar::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  .no-scrollbar,
  .scrollable-tabs,
  .hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollable-tabs,
  .hide-scrollbar {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    min-height: 48px;
    align-items: center !important;
  }
  .scrollable-tabs .btn,
  .hide-scrollbar .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
  }

  /* When demo banner is present */
  body.has-sidebar.demo-mode .navbar.sticky-top {
    top: 40px !important;
  }
}

/* Override Bootstrap form check/switch colors */
.form-check-input:checked {
  background-color: var(--color-secondary, #0F7657);
  border-color: var(--color-secondary, #0F7657);
}

.text-teal {
  color: var(--color-success-text, #0F7657) !important;
}

.text-coral {
  color: var(--color-danger-text, #B93822) !important;
}

.text-amber {
  color: var(--color-warning-text, #9C5400) !important;
}

/* Payment Method Badges */
.payment-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: capitalize;
}

.pay-cash { background-color: #E6F4EF; color: var(--color-success-text, #0F7657); }
.pay-credit-card { background-color: #EBF3FC; color: var(--color-info-text, #1E65B5); }
.pay-debit-card { background-color: #EBF3FC; color: var(--color-info-text, #1E65B5); }
.pay-upi { background-color: #FDF4E7; color: var(--color-warning-text, #9C5400); }
.pay-netbanking { background-color: #E6F4EF; color: var(--color-success-text, #0F7657); }

[data-bs-theme="dark"] .pay-cash { background-color: rgba(var(--bs-success-rgb), 0.15); color: var(--color-success-text); }
[data-bs-theme="dark"] .pay-credit-card { background-color: rgba(133, 183, 235, 0.15); color: var(--color-info-text); }
[data-bs-theme="dark"] .pay-debit-card { background-color: rgba(133, 183, 235, 0.15); color: var(--color-info-text); }
[data-bs-theme="dark"] .pay-upi { background-color: rgba(var(--bs-warning-rgb), 0.15); color: var(--color-warning-text); }
[data-bs-theme="dark"] .pay-netbanking { background-color: rgba(var(--bs-success-rgb), 0.15); color: var(--color-success-text); }

/* Dashboard Soft Badges */
.badge-soft {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 50rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: none;
  transition: all 0.2s ease;
}

.badge-soft-primary {
  background-color: rgba(29, 158, 117, 0.08);
  color: var(--color-success-text, #0F7657);
  border: 1px solid rgba(29, 158, 117, 0.18);
}

[data-bs-theme="dark"] .badge-soft-primary {
  background-color: rgba(29, 158, 117, 0.15);
  color: #9FE1CB;
  border: 1px solid rgba(29, 158, 117, 0.25);
}

.badge-soft-secondary {
  background-color: rgba(100, 116, 139, 0.1);
  color: #334155;
  border: 1px solid rgba(100, 116, 139, 0.18);
}

.badge-soft-success {
  background-color: rgba(16, 185, 129, 0.1);
  color: #065f46;
  border: 1px solid rgba(16, 185, 129, 0.18);
}

.badge-soft-danger {
  background-color: rgba(225, 29, 72, 0.1);
  color: #BE123C;
  border: 1px solid rgba(225, 29, 72, 0.18);
}

.badge-soft-info {
  background-color: rgba(14, 165, 233, 0.1);
  color: #0369A1;
  border: 1px solid rgba(14, 165, 233, 0.18);
}

.badge-soft-warning {
  background-color: rgba(245, 158, 11, 0.1);
  color: #B45309;
  border: 1px solid rgba(245, 158, 11, 0.18);
}

[data-bs-theme="dark"] .badge-soft-secondary {
  background-color: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

[data-bs-theme="dark"] .badge-soft-success {
  background-color: rgba(52, 211, 153, 0.18);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.25);
}

[data-bs-theme="dark"] .badge-soft-danger {
  background-color: rgba(248, 113, 113, 0.18);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.25);
}

[data-bs-theme="dark"] .badge-soft-info {
  background-color: rgba(56, 189, 248, 0.18);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

[data-bs-theme="dark"] .badge-soft-warning {
  background-color: rgba(251, 191, 36, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.25);
}

/* Amount sign/color utilities — used consistently across all list views.
   Outflow = expenses, loan repayments, capital events, transfer-out.
   Inflow  = income, transfer-in. */
.amount-outflow { color: var(--color-danger-text) !important; }
.amount-inflow,
.amount-income  { color: var(--color-success-text) !important; }

[data-bs-theme="dark"] .amount-outflow { color: var(--color-danger-text) !important; }
[data-bs-theme="dark"] .amount-inflow,
[data-bs-theme="dark"] .amount-income  { color: var(--color-success-text) !important; }

.form-check-input:focus {
  border-color: var(--color-secondary, #0F7657);
  box-shadow: 0 0 0 0.25rem rgba(15, 118, 87, 0.25);
}

/* Override Bootstrap button component colors globally */
.btn-primary {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--color-secondary, #0F7657);
  --bs-btn-border-color: var(--color-secondary, #0F7657);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #085041;
  --bs-btn-hover-border-color: #085041;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #04342C;
  --bs-btn-active-border-color: #04342C;
  --bs-btn-disabled-color: #ffffff;
  --bs-btn-disabled-bg: #0F7657;
  --bs-btn-disabled-border-color: #0F7657;
  color: #ffffff !important;
}
.btn-outline-primary {
  --bs-btn-color: var(--color-secondary, #0F7657);
  --bs-btn-border-color: var(--color-secondary, #0F7657);
  --bs-btn-hover-bg: var(--color-secondary, #0F7657);
  --bs-btn-hover-border-color: var(--color-secondary, #0F7657);
  --bs-btn-active-bg: #085041;
  --bs-btn-active-border-color: #085041;
  --bs-btn-disabled-color: #0F7657;
  --bs-btn-disabled-border-color: #0F7657;
}
.btn-outline-danger {
  --bs-btn-color: var(--color-danger-text, #B93822);
  --bs-btn-border-color: var(--color-danger-text, #B93822);
  --bs-btn-hover-bg: var(--color-danger-text, #B93822);
  --bs-btn-hover-border-color: var(--color-danger-text, #B93822);
  --bs-btn-active-bg: #A63C28;
  --bs-btn-active-border-color: #A63C28;
  --bs-btn-disabled-color: #B93822;
  --bs-btn-disabled-border-color: #B93822;
}
.btn-outline-success {
  --bs-btn-color: var(--color-secondary, #0F7657);
  --bs-btn-border-color: var(--color-secondary, #0F7657);
  --bs-btn-hover-bg: var(--color-secondary, #0F7657);
  --bs-btn-hover-border-color: var(--color-secondary, #0F7657);
  --bs-btn-active-bg: #085041;
  --bs-btn-active-border-color: #085041;
}

[data-bs-theme="dark"] {
  --color-primary: #5DCAA5; /* Accessible Light Forest Green for Dark Mode (Contrast >= 7.5:1) */
  --color-background: #111315; /* Landing Page BG */
  --color-surface: #1a1d21; /* Landing Page Surface */
  --color-text: #faf9f6;
  --bg-color: #111315;
  --surface-color: #1a1d21;
  
  /* Semantic Colors for Dark Mode Contrast */
  --color-success: #5DCAA5;
  --color-success-text: #5DCAA5;
  --color-danger: #F49C8C;
  --color-danger-text: #F49C8C;
  --color-warning: #F4B44E;
  --color-warning-text: #F4B44E;
  --color-info-text: #85B7EB;
  --color-muted-text: #B0B5BD;
  --color-secondary-text: #B0B5BD;
  --bs-success-rgb: 93, 202, 165;
  --bs-danger-rgb: 244, 156, 140;
  --bs-warning-rgb: 244, 180, 78;
}

[data-bs-theme="dark"] a {
  color: var(--color-success-text, #5DCAA5);
}

[data-bs-theme="dark"] a:hover {
  color: #8CE2C2;
}

[data-bs-theme="dark"] .btn-outline-primary,
[data-bs-theme="dark"] .btn-outline-success {
  --bs-btn-color: var(--color-success-text, #5DCAA5);
  --bs-btn-border-color: var(--color-success-text, #5DCAA5);
  --bs-btn-hover-bg: var(--color-success-text, #5DCAA5);
  --bs-btn-hover-border-color: var(--color-success-text, #5DCAA5);
  --bs-btn-hover-color: #111315;
}

[data-bs-theme="dark"] .btn-outline-secondary {
  color: var(--color-muted-text, #B0B5BD);
  border-color: var(--color-muted-text, #B0B5BD);
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--color-muted-text, #B0B5BD) !important;
  color: #111315 !important;
}

[data-bs-theme="dark"] .btn-link {
  color: var(--color-success-text, #5DCAA5);
}

[data-bs-theme="dark"] .nav-link {
  color: var(--color-muted-text, #B0B5BD);
}

[data-bs-theme="dark"] .nav-link:hover,
[data-bs-theme="dark"] .nav-link.active {
  color: var(--color-success-text, #5DCAA5) !important;
}

[data-bs-theme="dark"] .page-link {
  color: var(--color-muted-text, #B0B5BD);
  background-color: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .page-link:hover {
  color: #5DCAA5;
  background-color: rgba(93, 202, 165, 0.15);
  border-color: rgba(93, 202, 165, 0.3);
}

[data-bs-theme="dark"] .page-item.active .page-link,
[data-bs-theme="dark"] .page-link.active {
  background-color: var(--color-secondary, #0F7657) !important;
  border-color: var(--color-secondary, #0F7657) !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .command-kbd {
  color: var(--color-muted-text, #B0B5BD) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .pricing-card-light {
  background: var(--surface-color) !important;
  border-color: var(--border-color) !important;
  color: var(--color-text) !important;
}

[data-bs-theme="dark"] .pricing-card-light .feature-item {
  color: var(--color-text) !important;
}

[data-bs-theme="dark"] .pricing-card-light .plan-badge-label,
[data-bs-theme="dark"] .pricing-card-light .text-muted {
  color: var(--color-muted-text) !important;
}

[data-bs-theme="dark"] .pricing-card-light .price-display {
  color: var(--color-text) !important;
}

body {
  font-family:
    "DM Sans",
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

[data-bs-theme="dark"] body {
  background-color: var(--color-background) !important;
  color: var(--color-text) !important;
}

/* Navbar Unification */
/* Navbar & Footer Unification */
[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] footer {
  background-color: rgba(17, 19, 21, 0.9) !important;
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .navbar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  background-color: rgba(17, 19, 21, 0.8) !important;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

[data-bs-theme="dark"] footer {
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Ensure Main Content stays above Footer stacking context */
main {
  position: relative;
  z-index: 5;
}

footer {
  position: relative;
  z-index: 1;
}


[data-bs-theme="dark"] .card {
  background-color: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* PWA Install Banner Dark Mode */
[data-bs-theme="dark"] #installAppContainer {
  background-color: var(--color-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Navbar */
.bg-custom-dark {
  background-color: var(--color-primary) !important;
}

/* Primary Button */
.btn-primary {
  background-color: var(--color-secondary, #0F7657);
  border: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  color: #fff;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
  background-color: #085041;
  box-shadow: 0 4px 12px rgba(15, 118, 87, 0.25);
}

/* Success Button (Forest Green) */
.btn-success {
  background-color: var(--color-secondary, #0F7657);
  border: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  color: #fff;
}
.btn-success:hover,
.btn-success:active,
.btn-success:focus {
  background-color: #085041;
  box-shadow: 0 4px 12px rgba(15, 118, 87, 0.25);
}

/* Danger Button (Warm Red) */
.btn-danger {
  background-color: var(--color-danger-text, #B93822);
  border: 1px solid var(--color-danger-text, #B93822);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus {
  background-color: #A63C28;
  border-color: #962c1b;
  color: #fff;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--color-secondary, #0F7657);
}

/* Keep anchor buttons readable: global link colors should not override button text. */
a.btn-success,
a.btn-primary,
a.btn-danger,
a.btn-outline-primary,
a.btn-outline-secondary,
a.btn-outline-success,
a.btn-outline-danger {
  color: inherit;
}

a.btn-success,
a.btn-primary,
a.btn-danger {
  color: #fff;
}

a.btn-success:hover,
a.btn-success:focus,
a.btn-success:active,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active,
a.btn-danger:hover,
a.btn-danger:focus,
a.btn-danger:active {
  color: #fff;
}

/* Outline Buttons (for secondary actions) */
.btn-outline-primary {
  color: var(--color-secondary, #0F7657);
  border-color: var(--color-secondary, #0F7657);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
  background-color: var(--color-secondary, #0F7657) !important;
  border: 1px solid var(--color-secondary, #0F7657) !important;
  color: #fff !important;
}

.btn-outline-secondary {
  color: var(--color-primary);
  border-color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:active {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}

/* Specific Link Overrides */
.btn-link {
  color: var(--color-secondary, #0F7657); /* Forest Green for actions */
  text-decoration: none;
}
.btn-link:hover {
  color: #04342C;
}

/* Navbar Links */
.nav-link {
  color: var(--color-primary);
  height: 38px !important; /* Force standard height */
  font-weight: 400; /* Regular weight */
  font-size: 1rem; /* Consistent size */
}
.nav-link:hover,
.nav-link.active {
  color: var(--color-success) !important;
}

.nav-link.active {
  font-weight: 500; /* Heavier only for active state */
}

/* Pagination */
.page-link {
  color: var(--color-success-text, #0F7657);
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}
.page-link:hover {
  color: var(--color-secondary-dark, #0A5C42);
  background-color: rgba(15, 118, 87, 0.08);
  border-color: rgba(15, 118, 87, 0.2);
}
.page-item.active .page-link,
.page-link.active {
  background-color: var(--color-secondary, #0F7657) !important;
  border-color: var(--color-secondary, #0F7657) !important;
  color: #ffffff !important;
}

/* Sidebar / List Group Active State */
.list-group-item.active {
  background-color: var(--color-success); /* Forest Green */
  border-color: var(--color-success);
}

/* Text Colors */
.text-primary {
  color: var(--color-success-text, #0F7657) !important; /* Forest Green Accessible Text */
}
.text-secondary {
  color: var(--color-primary) !important; /* Warm Ink Black for secondary text in light mode */
}
[data-bs-theme="dark"] .text-secondary {
  color: var(--color-muted-text, #B0B5BD) !important; /* Accessible silver-grey for secondary text in dark mode */
}
.text-success {
  color: var(--color-success-text, #0F7657) !important;
}
.text-danger {
  color: var(--color-danger-text, #B93822) !important;
}
.text-warning {
  color: var(--color-warning-text, #9C5400) !important;
}
.text-info {
  color: var(--color-info-text, #165A9E) !important;
}
 
/* Override Bootstrap Dropdown Active State */
.dropdown-item.active, 
.dropdown-item:active {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

.dropdown-item:focus {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis) !important;
}

.dropdown-item:hover {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    color: #fff !important;
}

/* Accent Text Utility */
.text-gradient-primary {
  color: #1D9E75 !important;
  -webkit-text-fill-color: #1D9E75 !important;
  display: inline-block;
}

/* Dark Mode Overrides */
[data-bs-theme="dark"] .nav-link {
  color: #ffffff; /* White for dark mode */
}
[data-bs-theme="dark"] .nav-link:hover,
[data-bs-theme="dark"] .nav-link.active {
  color: var(--color-success) !important; /* Forest Green for hover/active */
}

/* Small Buttons height override */
.btn-sm {
  height: 31px !important;
  padding-top: 0;
  padding-bottom: 0;
}

/* Donation Button Styling */
.donation-btn {
  background-color: rgba(224, 123, 57, 0.1);
  border: 1px solid rgba(224, 123, 57, 0.3);
  color: var(--color-warning-text) !important;
  font-weight: 600 !important;
  transition: all 0.3s ease;
}

.donation-btn:hover {
  background-color: rgba(224, 123, 57, 0.18);
  border-color: var(--color-warning);
  color: var(--color-warning-text) !important;
  transform: scale(1.05);
}

[data-bs-theme="dark"] .donation-btn {
  background-color: rgba(224, 123, 57, 0.18);
  color: var(--color-warning-text) !important;
}

/* Fix for gray background behind inputs in Expense Form (Dark Mode) */
[data-bs-theme="dark"] #formset-table,
[data-bs-theme="dark"] #formset-table th,
[data-bs-theme="dark"] #formset-table td {
  background-color: transparent !important;
  --bs-table-bg: transparent !important;
  color: var(--color-text); /* Ensure text remains visible */
}

/* Ensure table borders don't look weird if they exist (though it is table-borderless) */
[data-bs-theme="dark"] #formset-table th {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle separator for header */
}

/* --- Mobile Responsive Formset Table --- */
@media (max-width: 768px) {
  #formset-table thead {
    display: none;
  }

  #formset-table tbody,
  #formset-table tr,
  #formset-table td {
    display: block;
    width: 100%;
  }

  #formset-table tr {
    margin-bottom: 1.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    padding: 1.25rem;
    background-color: rgba(var(--bs-body-bg-rgb), 0.5); /* Slight separation */
    position: relative;
  }

  #formset-table td {
    padding: 0.5rem 0;
    border: none;
  }

  /* Add labels visually for context if needed, but placeholders help. 
       Let's ensure the delete button is well positioned. */
  #formset-table td:last-child {
    text-align: right;
    margin-top: 0.5rem;
    border-top: 1px dashed var(--bs-border-color);
    padding-top: 0.75rem;
  }

  /* Make the remove button look more like a distinct action on mobile */
  .remove-row,
  .delete-row {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
  }
}
/* --- Driver.js Tutorial Theme Customization --- */

/* Default (Light Mode) */
.driver-popover {
  background-color: var(--surface-color) !important;
  color: var(--text-main) !important;
  border-radius: 12px !important;
  padding: 15px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.driver-popover-title {
  font-family: "DM Sans", sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  margin-bottom: 8px !important;
  color: var(--color-primary) !important;
}

.driver-popover-description {
  font-family: "Inter", sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  color: #495057 !important;
  margin-bottom: 0 !important;
}

/* Tutorial Buttons */
.driver-popover-footer button {
  border-radius: 6px !important;
  text-shadow: none !important;
  font-size: 0.85rem !important;
  padding: 6px 14px !important;
  font-weight: 500 !important;
}

.driver-popover-next-btn {
  background-color: var(--color-success) !important; /* Forest Green */
  color: white !important;
  border: none !important;
}

.driver-popover-prev-btn {
  background-color: transparent !important;
  color: var(--text-main) !important;
  border: 1px solid #dee2e6 !important;
}

.driver-popover-close-btn {
  color: var(--text-main) !important;
}

/* Dark Mode Overrides */
[data-bs-theme="dark"] .driver-popover {
  background-color: #1e2126 !important; /* Slightly lighter than surface for popover */
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
}

[data-bs-theme="dark"] .driver-popover-title {
  color: white !important;
}

[data-bs-theme="dark"] .driver-popover-description {
  color: #adb5bd !important;
}

[data-bs-theme="dark"] .driver-popover-prev-btn {
  color: #e9ecef !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .driver-popover-close-btn {
  color: #adb5bd !important;
}

[data-bs-theme="dark"] .driver-popover-close-btn:hover {
  color: white !important;
}

/* Speed up Driver.js animations */
.driver-active-element,
.driver-popover {
  transition-duration: 0.1s !important;
}

/* Theme-aware Image Utility Classes */
[data-bs-theme="dark"] .img-light {
  display: none !important;
}

[data-bs-theme="light"] .img-dark {
  display: none !important;
}

.navbar .dropdown-menu {
  z-index: 1050 !important; /* Ensure it sits above navbar */
}

/* Global dropdown fix for mobile & desktop overlay */
.dropdown-menu {
  z-index: 3000 !important; /* Above everything including footer (0) and mobile UI (1030-1080) */
}

/* Ensure transaction list items don't clip dropdowns */
.list-group-item, .list-group {
    overflow: visible !important;
}

/* Elevate modals to sit above mobile bottom navigation (1090) and demo banner (1060) */
.modal {
  z-index: 1150 !important;
}
.modal-backdrop {
  z-index: 1140 !important;
}
.popover {
  z-index: 1170 !important;
}
.tooltip {
  z-index: 1180 !important;
}

/* Ensure Navbar sits above filters (which have z-index: 1040) but below modals (1055) */
/* Essential because backdrop-filter in dark mode creates a new stacking context */
/* Sticky Navbar Glassmorphism and Z-index */
.navbar.sticky-top {
  background-color: rgba(var(--bs-tertiary-bg-rgb), 0.8) !important;
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  z-index: 1050;
  transition: all 0.3s ease;
}

[data-bs-theme="dark"] .navbar.sticky-top {
  background-color: rgba(var(--color-surface-rgb, 26, 29, 33), 0.8) !important;
}

/* Social Share Buttons */
.btn-social {
  color: white !important;
  border: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.btn-social:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  opacity: 0.9;
}

.btn-twitter {
  background-color: #000000;
} /* X / Twitter */
.btn-linkedin {
  background-color: #0077b5;
}
.btn-facebook {
  background-color: #1877f2;
}
.btn-whatsapp {
  background-color: #128c7e;
}
.btn-reddit {
  background-color: #ff4500;
}

/* Blog Content Typography */
.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Fix for first element */
.blog-content > *:first-child {
  margin-top: 0;
}

/* Dashboard Category List Redesign */
.category-list-item {
  transition: background-color 0.2s;
  border-radius: 8px;
}
.category-list-item:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.category-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
}

/* Progress Bars */
.progress-bar {
  --bs-progress-bar-bg: #1D9E75;
}
.progress-thin {
  height: 6px;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme="light"] .progress-thin {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Category Colors (cycling) - Flat solid colors */
.cat-color-0 {
  background-color: #1D9E75;
} /* Forest Green */
.cat-color-1 {
  background-color: #D4831A;
} /* Warm Amber */
.cat-color-2 {
  background-color: #E05C45;
} /* Warm Red */
.cat-color-3 {
  background-color: #8b6f47;
} /* Warm Brown */
.cat-color-4 {
  background-color: #6b8f71;
} /* Sage Green */

/* Progress Bar Animation */
@keyframes progress-fill {
  from {
    width: 0;
  }
  to {
    width: var(--progress-width, 100%);
  }
}

.progress-animate .progress-bar {
  animation: progress-fill 1s ease-out forwards;
}

.progress {
  overflow: hidden;
}

/* Semantic Progress Bar Colors - Premium Palette */
.progress-gradient-success {
  background-color: #1D9E75;
}
.progress-gradient-warning {
  background-color: #D4831A;
}
.progress-gradient-danger {
  background-color: #E05C45;
}
.progress-gradient-teal {
  background-color: #1D9E75;
}

/* Fix for Multiselect Dropdown Visibility */
.multiselect-container.dropdown-menu {
  z-index: 2000 !important;
}

/* Fix: Remove chevron/caret from dropdown option items */
.multiselect-container .multiselect-option::after,
.multiselect-container .multiselect-all::after,
.multiselect-container .dropdown-item::after {
  display: none !important;
  content: none !important;
}

/* Fix: Ensure radio inputs in single-select dropdown look correct */
.multiselect-container .form-check-input[type="radio"] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  background-image: none !important;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
  cursor: pointer;
}

/* Fix for Mobile Dropdown Clipping */
@media (max-width: 768px) {
  /* Removed overflow: visible override for general .table-responsive to allow scrolling */

  #formset-table tr {
    position: static !important; /* Allow absolute dropdowns to escape the row/card */
    overflow: visible !important;
  }
}

/* Ensure multiselect dropdown is always above other elements */
.multiselect-native-select .btn-group {
  position: relative;
}

.multiselect-native-select .btn-group:hover,
.multiselect-native-select .btn-group:focus-within,
.multiselect-native-select .btn-group.show {
  z-index: 1055 !important; /* Elevate only the active dropdown to escape sibling stacking overlap */
}

/* Fix for overlapping rows in formsets on mobile */
.form-row {
  z-index: 1;
}

.form-row:focus-within {
  z-index: 1050; /* Bring current row to front when focused */
}




/* --- Mobile App Specific Styles --- */
/* These classes are toggled via JavaScript when running inside Capacitor */
.is-mobile-app .non-mobile-app {
  display: none !important;
}

.mobile-app-only {
  display: none;
}

.is-mobile-app .mobile-app-only {
  display: block;
}

/* Safe area padding for the navbar with a 44px fallback for iOS notches */
.is-mobile-app .navbar {
  padding-top: calc(env(safe-area-inset-top, 44px) + 0.5rem) !important;
}

.is-mobile-app .navbar-brand {
    padding-top: 0.5rem;
}

/* Ensure the body and main content respect safe areas */
.is-mobile-app body,
html.is-mobile-app body {
  padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px) + 1rem) !important;
}

.is-mobile-app main,
html.is-mobile-app main {
  padding-top: calc(env(safe-area-inset-top, 44px) + 0.5rem) !important; /* The navbar already has safe-area-inset-top */
}

/* Specific fix for authenticated users where the top navbar is hidden on mobile */
.is-mobile-app.is-authenticated main,
.is-mobile-app .is-authenticated main,
html.is-mobile-app body.is-authenticated main,
body.has-sidebar.is-mobile-app main,
html.is-mobile-app body.has-sidebar main {
    padding-top: calc(env(safe-area-inset-top, 44px) + 0.75rem) !important;
}

/* Adjust sticky top position if needed and remove notch blur in PWA / mobile app mode */
.is-mobile-app .navbar.sticky-top,
html.is-mobile-app .navbar.sticky-top {
  top: 0;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

@media (display-mode: standalone) {
  .navbar,
  .navbar.sticky-top,
  .mobile-bottom-nav {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

html.is-mobile-app .navbar,
html.is-mobile-app .navbar.sticky-top,
.is-mobile-app .navbar,
.is-mobile-app .navbar.sticky-top {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* --- iOS PWA / mobile app: nothing may show (or blur) under the notch ---------------------------
   The status bar is "black-translucent", so page content extends underneath it. A solid strip the
   height of the safe area, painted with the page background, sits above everything that scrolls, so
   the notch area is always clean regardless of which element is behind it. Elements pinned to the top
   also lose backdrop blur, which is what rendered as a blur below the notch. */
html.is-mobile-app::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top, 0px);
  background-color: var(--bg-color, #faf8f5);
  z-index: 1060;
  pointer-events: none;
}
@media (display-mode: standalone) {
  html::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    background-color: var(--bg-color, #faf8f5);
    z-index: 1060;
    pointer-events: none;
  }
  .sticky-top,
  .fixed-top,
  [class*="sticky-"],
  .navbar,
  .mobile-bottom-nav,
  .sticky-action-bar .action-bar-content {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
html.is-mobile-app .sticky-top,
html.is-mobile-app .fixed-top,
html.is-mobile-app [class*="sticky-"],
html.is-mobile-app .sticky-action-bar .action-bar-content {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* --- Visual Payment Method Selector --- */
.payment-method-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.payment-method-item {
  flex: 0 0 calc(20% - 12px);
  min-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  background: transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.payment-method-item:hover {
  background: rgba(0,0,0,0.02);
  transform: translateY(-2px);
}

.payment-method-item .icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.payment-method-item .label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-color);
  text-align: center;
}

/* Selected State */
.payment-method-item.active {
  background: transparent;
}

.payment-method-item.active .icon-wrapper {
  background-color: var(--color-secondary, #0F7657); /* same green as the primary buttons */
  color: white;
  transform: scale(1.1);
}

.payment-method-item.active .label {
  color: var(--color-primary);
  font-weight: 600;
}

[data-bs-theme="dark"] .payment-method-item {
  border-color: rgba(255,255,255,0.1);
  background: transparent;
}

[data-bs-theme="dark"] .payment-method-item .icon-wrapper {
  background: rgba(255,255,255,0.1);
}

[data-bs-theme="dark"] .payment-method-item:hover {
  background: rgba(255,255,255,0.04);
}

[data-bs-theme="dark"] .payment-method-item.active {
  background: transparent;
}

/* Responsive adjustment for small screens */
@media (max-width: 576px) {
  .payment-method-item {
    flex: 1 1 calc(33.333% - 12px);
  }
}

/* --- Compact Version for Formsets --- */
.payment-method-selector.compact {
  gap: 4px;
  justify-content: flex-start;
}

/* One-line layout inside modals */
.modal .payment-method-selector {
  flex-wrap: nowrap;
  gap: 6px;
}

.modal .payment-method-item {
  min-width: 0;
  flex: 1 1 0;
  padding: 10px 4px;
}

.modal .payment-method-item .icon-wrapper {
  width: 38px;
  height: 38px;
  font-size: 1.1rem;
}

.modal .payment-method-item .label {
  font-size: 0.7rem;
}

.payment-method-selector.compact .payment-method-item {
  flex: 0 0 auto;
  min-width: 40px;
  padding: 6px;
  border-radius: 8px;
}

.payment-method-selector.compact .icon-wrapper {
  width: 28px;
  height: 28px;
  font-size: 1rem;
  margin-bottom: 2px;
}

.payment-method-selector.compact .label {
  display: none; /* Hide label in compact mode to save space */
}

/* Tooltip for compact mode */
.payment-method-selector.compact .payment-method-item:hover::after {
  content: attr(data-value);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.65rem;
  white-space: nowrap;
  z-index: 10;
}

/* --- Card-based Bulk Add Layout --- */
#formset-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.form-card {
  background: var(--surface-color);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  transition: all 0.3s ease;
  position: relative;
}

.form-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  border-color: rgba(29, 158, 117, 0.2);
}

.form-card .form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.form-card .form-control, 
.form-card .form-select {
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
  border: 1.5px solid rgba(0,0,0,0.05);
  background-color: #fcfdfe;
}

.form-card .form-control:focus,
.form-card .form-select:focus {
  border-color: #1D9E75;
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(29, 158, 117, 0.1);
}

.remove-item-container {
  border-top: 1px dashed rgba(0,0,0,0.1);
  margin-top: 1rem;
  padding-top: 1rem;
  text-align: center;
}

.remove-item-btn {
  color: var(--color-danger-text, #B93822);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.remove-item-btn:hover {
  color: #962c1b;
  transform: scale(1.05);
}

[data-bs-theme="dark"] .remove-item-btn {
  color: var(--color-danger-text, #F49C8C);
}

[data-bs-theme="dark"] .remove-item-btn:hover {
  color: #ffa594;
}

[data-bs-theme="dark"] .form-card {
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
}

[data-bs-theme="dark"] .form-card .form-control,
[data-bs-theme="dark"] .form-card .form-select {
  background-color: rgba(255,255,255,0.05); /* not the shorthand: it wiped the select's dropdown arrow */
  border-color: rgba(255,255,255,0.1);
}

/* --- Mobile Optimizations for Bulk Add --- */
@media (max-width: 576px) {
  #formset-container {
    gap: 1rem;
  }

  .form-card {
    padding: 1rem;
    border-radius: 16px;
  }

  .form-card .form-label {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
  }

  .form-card .form-control, 
  .form-card .form-select {
    padding: 0.5rem 0.75rem;
    font-size: 16px; /* Prevents iOS/Mobile zoom on focus */
    border-radius: 10px;
  }

  .remove-item-btn {
    font-size: 0.8rem;
  }
}

/* --- Compact Payment Selector for Cards (Desktop & Mobile Sync) --- */
.form-card .payment-method-selector,
.payment-method-selector.horizontal {
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: hidden;
  padding-bottom: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.form-card .payment-method-selector::-webkit-scrollbar,
.payment-method-selector.horizontal::-webkit-scrollbar {
  display: none;
}

.form-card .payment-method-item,
.payment-method-selector.horizontal .payment-method-item {
  flex: 1;
  min-width: 0;
  padding: 10px 2px;
  border-radius: 12px;
  box-shadow: none;
  border: none;
}

.form-card .payment-method-item .icon-wrapper,
.payment-method-selector.horizontal .payment-method-item .icon-wrapper {
  width: 40px;
  height: 40px;
  font-size: 1.2rem;
  border-radius: 10px;
  margin-bottom: 8px;
}

.form-card .payment-method-item .label,
.payment-method-selector.horizontal .payment-method-item .label {
  font-size: 0.7rem;
  white-space: normal;
  word-break: break-word;
  line-height: 1.1;
  text-align: center;
}

@media (max-width: 576px) {
  .form-card .payment-method-selector {
    overflow-x: hidden;
  }

  .form-card .payment-method-item {
    min-width: 0;
    flex: 1;
    padding: 6px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: transparent !important;
    box-shadow: none !important;
  }
  
  .form-card .payment-method-item:hover {
    background: transparent !important;
    transform: none;
  }
  
  .form-card .payment-method-item.active {
    background: transparent !important;
  }
  
  .form-card .payment-method-item .icon-wrapper {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    border-radius: 12px;
    margin-bottom: 6px;
  }
  
  .form-card .payment-method-item .label {
    font-size: 0.7rem;
    margin-top: 0;
    font-weight: 700;
    white-space: normal;
    line-height: 1.1;
    word-break: break-word;
  }
}

/* --- Sticky Action Bar --- */
.sticky-action-bar {
  position: sticky;
  bottom: 1.5rem;
  margin: 2rem 0 1rem;
  z-index: 1020;
  display: flex;
  justify-content: center;
}

.sticky-action-bar .action-bar-content {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 0.75rem 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

[data-bs-theme="dark"] .sticky-action-bar .action-bar-content {
  background: rgba(18, 18, 18, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

@media (max-width: 576px) {
  .sticky-action-bar {
    bottom: 0;
    margin: 2rem calc(var(--bs-gutter-x) * -0.5) 0;
    justify-content: stretch;
  }
  
  .sticky-action-bar .action-bar-content {
    width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 1rem;
    justify-content: center;
  }
  
  .sticky-action-bar .btn {
    flex: 1;
    padding: 0.75rem 0.5rem;
    font-size: 0.9rem;
  }
}

/* --- Global Mobile Input Zoom Prevention --- */
@media screen and (max-width: 991.98px) {
  input,
  select,
  textarea,
  .form-control,
  .form-select,
  .form-control-sm,
  .form-select-sm,
  .form-control-lg,
  .form-control-xl,
  .form-select-lg,
  .input-group-sm > .form-control,
  .input-group-sm > .form-select,
  .input-group-sm > .input-group-text,
  .multiselect-search,
  .multiselect-filter input,
  .multiselect-container .multiselect-filter input,
  .searchable-select-search,
  .multiselect-btn,
  .filter-date-input-group input {
    font-size: 16px !important; /* Force >= 16px to prevent auto-zoom on mobile focus */
    touch-action: manipulation;
  }
  
  body {
    padding-bottom: 75px; /* Space for bottom nav */
  }
}

/* --- Mobile Bottom Navigation --- */
.mobile-bottom-nav {
  position: fixed;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 420px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1090 !important;
  pointer-events: none;
}

.mobile-nav-capsule {
  pointer-events: auto;
  flex: 1;
  height: 100%;
  /* Glass: translucent fill, blur and saturate what scrolls underneath, light edge highlight */
  background: rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  backdrop-filter: blur(24px) saturate(200%);
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.55);
  transition: all 0.3s ease;
}

[data-bs-theme="dark"] .mobile-nav-capsule {
  background: rgba(30, 35, 40, 0.42);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Browsers without backdrop-filter keep a solid, readable bar */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-nav-capsule { background: #ffffff; }
  [data-bs-theme="dark"] .mobile-nav-capsule { background: #1e2328; }
}

.mobile-nav-item {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #718096;
  text-decoration: none;
  flex: 1;
  height: 100%;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: none;
  border-radius: 20px;
}

[data-bs-theme="dark"] .mobile-nav-item {
  color: #a0aec0;
}

.mobile-nav-item > i:not(.position-absolute) {
  font-size: 1.45rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, color 0.2s ease;
}

/* The sheet hands focus back to this button when it closes, which drew the global focus ring as a green
   box around "More". The active colour already shows where you are. */
.mobile-bottom-nav .mobile-nav-item:focus,
.mobile-bottom-nav .mobile-nav-item:focus-visible,
[data-bs-theme="dark"] .mobile-bottom-nav .mobile-nav-item:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.mobile-nav-item.active {
  color: var(--color-success-text, #0F7657) !important;
  background-color: transparent !important;
  font-weight: 600;
}

[data-bs-theme="dark"] .mobile-nav-item.active {
  color: #5DCAA5 !important;
  background-color: transparent !important;
}

.mobile-nav-item.active > i:not(.position-absolute) {
  transform: scale(1.15);
  color: inherit;
}

.mobile-nav-item:active {
  transform: scale(0.92);
}

/* --- Floating Action Button (FAB) --- */
.mobile-fab-btn {
  pointer-events: auto;
  width: 60px;
  min-width: 60px;
  height: 60px;
  background-color: #0F7657;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff !important;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(15, 118, 87, 0.18);
  border: none;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-bs-theme="dark"] .mobile-fab-btn {
  /* Same deep green and white plus as the light theme; only the shadow is deeper */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(15, 118, 87, 0.25);
}

.mobile-fab-btn i {
  font-size: 1.65rem;
  transition: transform 0.25s ease;
}

.mobile-fab-btn:hover {
  background-color: #157F5D;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22), 0 3px 8px rgba(29, 158, 117, 0.18);
}

.mobile-fab-btn:active {
  transform: scale(0.94);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* --- Mobile Bottom Sheet (Offcanvas Drawer) --- */
.mobile-bottom-sheet {
  position: fixed !important;
  left: 12px !important;
  right: 12px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: auto !important;
  max-width: 440px !important;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  height: auto !important;
  max-height: calc(82vh - (76px + env(safe-area-inset-bottom, 0px)));
  margin-bottom: 0 !important;
  padding: 0 0 0.5rem 0 !important;
  border-radius: 28px !important;
  background: rgba(var(--bs-body-bg-rgb), 0.98) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--bs-border-color-translucent) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.18), 0 4px 15px rgba(0, 0, 0, 0.08) !important;
  z-index: 1080 !important;
  overflow: hidden !important;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1) !important;
  will-change: transform;
}

[data-bs-theme="dark"] .mobile-bottom-sheet {
  background: rgba(30, 35, 40, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5), 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}
.offcanvas-bottom.mobile-bottom-sheet:not(.show),
.offcanvas-bottom.mobile-bottom-sheet.hiding {
  transform: translateY(calc(100% + 150px)) !important;
}

.offcanvas-bottom.mobile-bottom-sheet.show:not(.hiding),
.offcanvas-bottom.mobile-bottom-sheet.showing {
  transform: translateY(0) !important;
}

.offcanvas-backdrop {
  transition: opacity 0.25s linear !important;
}

/* Drag Handle Pill */
.drawer-handle-pill {
  width: 38px;
  height: 4px;
  background: rgba(128, 128, 128, 0.25);
  border-radius: 4px;
  margin: 10px auto 2px auto;
}

/* Circular Close Button */
.btn-close-drawer {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bs-tertiary-bg);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-secondary);
  font-size: 0.85rem;
  transition: all 0.2s ease;
  outline: none;
}

.btn-close-drawer:hover, .btn-close-drawer:active {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

/* Drawer Rich Action Items */
.drawer-action-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  text-decoration: none;
  color: var(--bs-body-color);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
}

.drawer-action-item:hover, .drawer-action-item:active {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  transform: scale(0.99);
}

.drawer-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.drawer-action-item:hover .drawer-icon-badge {
  transform: scale(1.06);
}

.profile-avatar {
  background-color: rgba(29, 158, 117, 0.08);
  transition: all 0.3s ease;
}

[data-bs-theme="dark"] .profile-avatar {
  background-color: rgba(29, 158, 117, 0.15);
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.mobile-bottom-sheet .offcanvas-header {
  padding: 1.5rem 1.75rem 1rem;
}

/* Utilities */
.min-width-0 {
  min-width: 0 !important;
}
.overflow-hidden {
  overflow: hidden !important;
}

.mobile-bottom-sheet .list-group-item {
  background: transparent;
  padding: 0.6rem 1.75rem;
  border: none !important; /* Remove loud horizontal lines */
  transition: all 0.2s ease;
  font-weight: 500;
  font-size: 1rem;
  display: flex !important;
  align-items: center;
  gap: 1rem;
}

.mobile-bottom-sheet .list-group-item:active {
  background-color: rgba(var(--bs-primary-rgb), 0.05);
  transform: scale(0.98);
}

.mobile-bottom-sheet .list-group-item i {
  font-size: 1.4rem;
  width: 28px;
  text-align: center;
}

[data-bs-theme="dark"] .mobile-bottom-sheet {
  background: rgba(30, 34, 38, 0.98) !important;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.5);
}

.no-caret::after {
    display: none !important;
}

/* --- Premium Net Worth Card --- */
.nw-accent-line {
  height: 4px;
  width: 100%;
  background: var(--bs-primary);
  border-radius: 10px;
  margin: 1.5rem 0;
  opacity: 0.8;
}

.account-item-premium {
  display: flex;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: all 0.2s ease;
  position: relative;
}

.account-item-premium:last-child {
  border-bottom: none;
}

.account-item-premium:hover {
  background: rgba(0,0,0,0.02);
  transform: translateX(4px);
}

.account-status-bar {
  width: 3px;
  height: 32px;
  border-radius: 4px;
  margin-right: 1.25rem;
  flex-shrink: 0;
}

.account-info {
  flex-grow: 1;
  min-width: 0;
}

.account-name-bold {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--bs-body-color);
  margin-bottom: 2px;
  display: block;
}

.account-type-subtext {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #6c757d;
  letter-spacing: 0.05em;
}

.account-amount-bold {
  font-weight: 700;
  font-size: 1rem;
  margin-left: 1rem;
  flex-shrink: 0;
}

.signed-amount {
  white-space: nowrap;
}

.amount-expense,
.amount-income,
.amount-transfer,
.amount-loan {
  white-space: nowrap;
}

.text-negative {
  color: #ae2012 !important;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .account-item-premium {
  border-bottom-color: rgba(255,255,255,0.05);
}

[data-bs-theme="dark"] .account-item-premium:hover {
  background: rgba(255,255,255,0.03);
}

[data-bs-theme="dark"] .account-type-subtext {
  color: #adb5bd;
}

/* Insights Carousel */
.insights-carousel-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  min-height: 250px; /* Accommodate 3 vertical items comfortably */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.insights-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  width: 100%;
}

.insights-carousel::-webkit-scrollbar {
  display: none;
}

.insight-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 0.5rem 0.25rem;
  transition: opacity 0.3s ease;
}

.insights-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.indicator-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bs-border-color);
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  padding: 0;
}

/* 24px minimum touch target size for WCAG 2.5.8 */
.indicator-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
}

.indicator-dot.active {
  width: 20px;
  border-radius: 10px;
  background: var(--bs-primary);
}

/* Custom Indigo Utilities */
.text-indigo {
    color: #6610f2 !important;
}

.bg-indigo {
    background-color: rgba(102, 16, 242, var(--bs-bg-opacity, 1)) !important;
}

/* --- Public / Landing Navbar & Footer Unified Styles --- */
.landing-nav {
  position: sticky;
  top: 0;
  z-index: 102;
  background: rgba(250, 249, 246, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border, var(--bs-border-color, #e0edea));
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 65px;
}
[data-bs-theme="dark"] .landing-nav {
  background: rgba(26, 26, 24, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.nav-logo {
  font-family: var(--sans, "DM Sans", sans-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink, var(--tmr-ink-900, #1a1a18));
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
[data-bs-theme="dark"] .nav-logo {
  color: #ffffff;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink2, var(--tmr-ink-600, #4a4a46));
  text-decoration: none;
  transition: color 0.2s;
}
[data-bs-theme="dark"] .nav-links a {
  color: rgba(255, 255, 255, 0.7);
}
.nav-links a:hover {
  color: var(--ink, var(--tmr-ink-900, #1a1a18));
}
[data-bs-theme="dark"] .nav-links a:hover {
  color: #ffffff;
}
.nav-cta {
  background: var(--ink, #1a1a18);
  color: var(--paper, #ffffff) !important;
  padding: 10px 24px;
  border-radius: 99px;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s, transform 0.15s;
}
[data-bs-theme="dark"] .nav-cta {
  background: var(--tmr-teal-400, #1d9e75);
  color: #ffffff !important;
}
.nav-cta:hover {
  background: var(--tmr-teal-400, #1d9e75) !important;
  transform: translateY(-1px);
}
.mobile-nav-actions {
  display: none;
  align-items: center;
  gap: 16px;
}
.hamburger {
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 4px;
  z-index: 101;
  margin-right: -4px;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink, var(--tmr-ink-900, #1a1a18));
  border-radius: 2px;
  transition: all 0.3s ease;
}
[data-bs-theme="dark"] .hamburger span {
  background: #ffffff;
}
.hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--paper, #faf9f6);
  z-index: 1000;
  padding: 100px 32px;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
[data-bs-theme="dark"] .mobile-menu {
  background: #1a1a18;
}
.mobile-menu.active {
  transform: translateX(0);
}
.mobile-menu a {
  font-size: 20px;
  font-weight: 500;
  color: var(--ink, var(--tmr-ink-900, #1a1a18));
  text-decoration: none;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.1));
}
[data-bs-theme="dark"] .mobile-menu a {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.mobile-menu .nav-cta {
  text-align: center;
  margin-top: 10px;
  border-bottom: none;
}

@media (max-width: 991px) {
  .landing-nav .nav-links {
    display: none !important;
  }
  .landing-nav .mobile-nav-actions {
    display: flex !important;
  }
}

.landing-footer {
  background: var(--tmr-surface-1, #faf9f6);
  border-top: 1px solid var(--tmr-surface-3, #e0edea);
  padding: var(--space-10, 40px) 0 var(--space-6, 24px);
}
[data-bs-theme="dark"] .landing-footer {
  background: rgba(255, 255, 255, 0.02);
  border-top-color: rgba(255, 255, 255, 0.1);
}
.footer-brand p {
  font-size: 13px;
  color: var(--color-muted-text, #595855);
  margin-top: 10px;
  line-height: 1.6;
  max-width: 240px;
}


/* =============================================
   Mobile Filter Bottom-Sheet Drawer
   Only active on screens ≤ 768px
   ============================================= */

/* Backdrop overlay */
.mobile-filter-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.28s ease;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.mobile-filter-backdrop.is-visible {
  display: block;
  opacity: 1;
}

/* The bottom-sheet drawer */
.mobile-filter-drawer {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--bs-body-bg);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18);
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  min-height: 50vh;
  min-height: 50dvh;
  max-height: 90dvh;
  overflow: hidden;
  will-change: transform;
  outline: none !important;
  border: none !important;
}

.mobile-filter-drawer:focus,
.mobile-filter-drawer:focus-visible,
.mobile-filter-drawer:focus-within {
  outline: none !important;
  border: none !important;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18) !important;
}

.mobile-filter-drawer.is-open {
  display: flex;
  flex-direction: column;
}

.mobile-filter-drawer.is-animating-in {
  transform: translateY(0);
}

/* Drag handle */
.mobile-filter-drawer__handle {
  width: 40px;
  height: 4px;
  background: var(--bs-border-color);
  border-radius: 2px;
  margin: 12px auto 0;
  flex-shrink: 0;
}

/* Drawer header */
.mobile-filter-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 10px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--bs-border-color-translucent);
}

.mobile-filter-drawer__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bs-body-color);
  margin: 0;
}

.mobile-filter-drawer__close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bs-tertiary-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-secondary-color);
  cursor: pointer;
  font-size: 1rem;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.mobile-filter-drawer__close:hover {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

/* Drawer body — scrollable */
.mobile-filter-drawer__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px;
  flex: 1 1 auto;
}

/* Footer with action buttons */
.mobile-filter-drawer__footer {
  padding: 12px 20px 20px;
  flex-shrink: 0;
  border-top: 1px solid var(--bs-border-color-translucent);
  display: flex;
  gap: 10px;
}

.mobile-filter-drawer__footer .btn {
  flex: 1;
  border-radius: 12px !important;
  font-weight: 600;
  padding: 0.6rem 1rem;
}

/* Ensure the drawer's form inputs look great on mobile */
@media (max-width: 768px) {
  /* Remove container cards/borders inside mobile filter drawer for clean look */
  .mobile-filter-drawer__body form,
  .mobile-filter-drawer__body .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .mobile-filter-drawer__body .form-control,
  .mobile-filter-drawer__body .form-select {
    font-size: 1rem; /* Prevents iOS zoom on focus */
    min-height: 44px;
  }

  .mobile-filter-drawer__body .input-group-text {
    min-height: 44px;
  }

  /* Enhanced Dropdown & Multiselect UX inside mobile filter drawer */
  .mobile-filter-drawer__body .dropdown-menu,
  .mobile-filter-drawer__body .multiselect-container {
    max-height: 220px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 10050 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    border-radius: 12px !important;
    border: 1px solid var(--bs-border-color) !important;
    background-color: var(--bs-body-bg) !important;
    width: 100% !important;
    min-width: 100% !important;
  }

  .mobile-filter-drawer__body .multiselect-container .multiselect-option,
  .mobile-filter-drawer__body .dropdown-item {
    padding: 0.65rem 0.85rem !important;
    font-size: 0.95rem !important;
  }

  /* Spacer for safe-area on notch devices */
  .mobile-filter-drawer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* Active filter pill color with accessible forest green >= 4.5:1 */
.time-period-pill.active,
.time-period-pill.btn-primary,
label.time-period-pill.active {
  background-color: var(--color-secondary, #0F7657) !important;
  border-color: var(--color-secondary, #0F7657) !important;
  color: #ffffff !important;
}

/* Inactive filter pill & chip text brightness */
.time-period-pill:not(.active),
.type-chip:not(.active) {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .time-period-pill:not(.active),
[data-bs-theme="dark"] .type-chip:not(.active),
[data-bs-theme="dark"] label.time-period-pill:not(.active) {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* =============================================
   WCAG 2.2 AA Compliance Enhancements
   - SC 2.4.11 / 2.4.13: Visible High-Contrast Focus Rings (>= 3:1)
   - SC 1.4.1: Non-color link cues in prose
   ============================================= */

/* High-contrast focus indicators for interactive elements */
a:focus-visible,
button:focus-visible,
input:not(.border-0):focus-visible,
select:not(.border-0):focus-visible,
textarea:not(.border-0):focus-visible,
.btn:focus-visible,
.form-control:not(.border-0):focus-visible,
.form-select:not(.border-0):focus-visible,
.form-check-input:focus-visible {
  outline: 2px solid var(--color-secondary, #0F7657) !important;
  outline-offset: 2px !important;
}

[data-bs-theme="dark"] a:focus-visible,
[data-bs-theme="dark"] button:focus-visible,
[data-bs-theme="dark"] input:not(.border-0):focus-visible,
[data-bs-theme="dark"] select:not(.border-0):focus-visible,
[data-bs-theme="dark"] textarea:not(.border-0):focus-visible,
[data-bs-theme="dark"] .btn:focus-visible,
[data-bs-theme="dark"] .form-control:not(.border-0):focus-visible,
[data-bs-theme="dark"] .form-select:not(.border-0):focus-visible,
[data-bs-theme="dark"] .form-check-input:focus-visible {
  outline: 2px solid var(--color-success, #5DCAA5) !important;
  outline-offset: 2px !important;
}

/* Borderless inputs should not show an awkward boxed outline */
.border-0:focus,
.border-0:focus-visible,
.form-control.border-0:focus,
.form-control.border-0:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Ensure links within running text/prose have visible underline decoration */
.blog-content a,
.legal-content a,
.announcement-markdown-content a,
main p a:not(.btn):not(.nav-link):not(.badge):not(.category-title-link) {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* === TMR Flows ============================================================= */
.tmr-cat-row {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.25rem;
}
.tmr-cat-row::-webkit-scrollbar { display: none; }
.tmr-pill-row { display: flex; gap: 0.4rem; overflow-x: auto; flex-wrap: nowrap; }
[x-cloak] { display: none !important; }
[style*="display: none"] { display: none !important; }
.tmr-cat,
.tmr-pill,
.tmr-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 1rem;
  border-radius: 50rem;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1.5px solid var(--bs-border-color-translucent);
  background: transparent;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.tmr-pill { padding: 0.3rem 0.85rem; font-size: 0.8rem; }
.tmr-cat.active,
.tmr-pill.active,
.tmr-chip.active {
  border-color: var(--color-success) !important;
  background: rgba(29, 158, 117, 0.08);
  color: var(--color-success-text);
}
.tmr-stage { border-radius: 18px !important; }
.tmr-addon-fields {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 220ms ease-in-out;
  overflow: hidden;
}
.tmr-addon-fields.open { grid-template-rows: 1fr; }
.tmr-addon-fields > div { min-height: 0; }
.tmr-review-headline {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--color-success-text);
}
.tmr-review-confirm-btn {
  white-space: nowrap;
}
.tmr-review-bullet { font-size: 0.875rem; }
.tmr-limit-warning { border-radius: 8px; font-size: 0.875rem; }
@media (max-width: 576px) {
  .tmr-review-header {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }

  .tmr-review-confirm-btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes tmrPop {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
  }
  @keyframes tmrRise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes tmrWarnSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .tmr-pill { animation: tmrPop 220ms ease-out both; }
  .tmr-stage { animation: tmrRise 280ms ease-out both; }
  .tmr-limit-warning { animation: tmrWarnSlide 220ms ease-out both; }
}
[data-bs-theme="dark"] .tmr-cat.active,
[data-bs-theme="dark"] .tmr-pill.active,
[data-bs-theme="dark"] .tmr-chip.active {
  background: rgba(93, 202, 165, 0.12);
  color: #5DCAA5;
  border-color: #5DCAA5 !important;
}
[data-bs-theme="dark"] .tmr-review-headline { color: #5DCAA5; }

[data-bs-theme="dark"] {
  --color-dark-panel: #0c1510;
  --color-dark-panel-text: #a9e6cb;
}

/* === TMR Flows Landing & Card Components =================================== */
.tmr-flow-wrap {
  width: 100%;
}
.tmr-flow-sub {
  color: var(--bs-secondary-color, var(--color-muted-text, #595855));
  font-size: 0.95rem;
  margin: 0 0 20px;
}
.tmr-flow-cats {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  margin-bottom: 24px;
  padding: 0.35rem 0;
  -webkit-overflow-scrolling: touch;
}
.tmr-flow-cats::-webkit-scrollbar {
  display: none;
}
.tmr-flow-cat,
.cat {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 1.1rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
  white-space: nowrap;
}
.tmr-flow-cat:hover,
.cat:hover {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}
.tmr-flow-cat.active,
.cat.active {
  background-color: var(--color-secondary, #0F7657) !important;
  border-color: var(--color-secondary, #0F7657) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(15, 118, 87, 0.25);
}
[data-bs-theme="dark"] .tmr-flow-cat,
[data-bs-theme="dark"] .cat {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .tmr-flow-cat:hover,
[data-bs-theme="dark"] .cat:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .tmr-flow-cat.active,
[data-bs-theme="dark"] .cat.active {
  background-color: var(--color-secondary, #0F7657) !important;
  border-color: var(--color-secondary, #0F7657) !important;
  color: #ffffff !important;
}
.tmr-flow-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 992px) {
  .tmr-flow-layout {
    grid-template-columns: 2.3fr 1fr;
    align-items: start;
  }
}
.tmr-flow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 620px) {
  .tmr-flow-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.gcard {
  background: var(--bs-card-bg, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  cursor: pointer;
  outline: none;
}
.gcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border-color: var(--color-secondary, #0F7657) !important;
}
.gcard:focus-visible,
.gcard.selected {
  border-color: var(--color-secondary, #0F7657) !important;
  box-shadow: 0 0 0 2px rgba(15, 118, 87, 0.25);
}
[data-bs-theme="dark"] .gcard {
  background: var(--bs-card-bg);
  border-color: rgba(255, 255, 255, 0.08) !important;
}
[data-bs-theme="dark"] .gcard:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.gicon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(15, 118, 87, 0.1);
  color: var(--color-secondary, #0F7657);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 12px;
}
.gcard h3 {
  font-size: 15.5px;
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .gcard h3 {
  color: var(--bs-body-color);
}
.gcard p {
  font-size: 13px;
  color: var(--bs-secondary-color, #595855);
  margin: 0 0 14px;
  line-height: 1.5;
  flex: 1;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--bs-secondary-color, #595855);
  background: var(--bs-tertiary-bg, #faf8f5);
  border: 1px solid var(--bs-border-color, rgba(0,0,0,0.1));
  border-radius: 999px;
  padding: 3px 9px;
}
[data-bs-theme="dark"] .tag {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-secondary-color);
}
.gfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sectionhead {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-muted-text, #595855);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 4px 0 12px;
}
.sectionhead.second {
  margin-top: 28px;
}
.time {
  font-size: 12px;
  color: var(--color-muted-text, #595855);
}
.gbtn {
  border: 1px solid var(--color-secondary, #0F7657);
  border-radius: 8px;
  padding: 0 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  background-color: var(--color-secondary, #0F7657);
  color: #ffffff !important;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  box-shadow: 0 2px 6px rgba(15, 118, 87, 0.25);
}
.gbtn:hover,
.gbtn:focus {
  background-color: var(--color-secondary-dark, #0A5C42);
  border-color: var(--color-secondary-dark, #0A5C42);
  box-shadow: 0 4px 10px rgba(15, 118, 87, 0.35);
  color: #ffffff !important;
}
.gbtn:active {
  transform: scale(0.97);
}
.gbtn.secondary {
  background-color: transparent;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-body-color) !important;
  box-shadow: none;
  height: 36px;
}
.gbtn.secondary:hover,
.gbtn.secondary:focus {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color) !important;
  box-shadow: none;
}
[data-bs-theme="dark"] .gbtn.secondary {
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .gbtn.secondary:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
.reqcard {
  background: var(--bs-tertiary-bg, #faf8f5);
  border: 1.5px dashed var(--bs-border-color, rgba(0,0,0,0.2));
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
[data-bs-theme="dark"] .reqcard {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}
.reqcard h3 {
  font-size: 15.5px;
  margin: 0 0 6px;
  font-weight: 700;
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .reqcard h3 {
  color: var(--bs-body-color);
}
.reqcard p {
  font-size: 13px;
  color: var(--bs-secondary-color, #595855);
  margin: 0 0 14px;
  line-height: 1.5;
}
.side > * + * {
  margin-top: 16px;
}
.panel {
  background: var(--bs-card-bg, #ffffff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 20px;
}
[data-bs-theme="dark"] .panel {
  background: var(--bs-card-bg);
  border-color: rgba(255, 255, 255, 0.08);
}
.panel h4 {
  font-size: 14.5px;
  margin: 0 0 3px;
  font-weight: 700;
  color: var(--color-text, var(--ink, #1a1a18));
}
[data-bs-theme="dark"] .panel h4 {
  color: #f2f1ee;
}
.panel .hint {
  font-size: 12px;
  color: var(--color-muted-text, #595855);
  margin: 0 0 14px;
  line-height: 1.5;
}
.prow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid var(--border-color, rgba(26,26,24,0.08));
  font-size: 13px;
}
.prow:first-of-type {
  border-top: none;
}
.pdone {
  color: var(--color-secondary, #0F7657);
  font-weight: 600;
  font-size: 12px;
}
.psetup {
  color: var(--color-secondary, #0F7657);
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.psetup:hover {
  text-decoration: underline;
  color: #085041;
}
.ring {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: conic-gradient(var(--color-secondary, #0F7657) var(--pct, 0%), var(--border-color, rgba(26,26,24,0.12)) 0);
  margin-bottom: 10px;
}
.ring span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-color, var(--bs-card-bg, #ffffff));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--color-text, var(--ink, #1a1a18));
}
[data-bs-theme="dark"] .ring span {
  background: #1c1c1a;
  color: #f2f1ee;
}
.dark-panel {
  background: var(--color-dark-panel, #15241d);
  color: var(--color-dark-panel-text, #d6efe3);
  border-radius: 16px;
  padding: 18px;
}
.dark-panel .eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .7;
  margin-bottom: 8px;
}
.dark-panel h4 {
  font-size: 16px;
  margin: 0 0 10px;
  color: #ffffff;
  font-weight: 700;
}
.dark-panel ul {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.9;
}
.dark-panel .note {
  font-size: 11px;
  opacity: .65;
  line-height: 1.5;
}



/* ==========================================================================
   Data tables (every list in the app): column widths + typography only.
   Opt in with <table class="table tmr-table"> and a <colgroup>. Fixed layout means long text is
   trimmed with an ellipsis (full text in the title attribute, shown on hover) instead of widening
   the table and pushing the Actions column off-screen. No colours, badges or behaviour change here.
   ========================================================================== */
.tmr-table {
  table-layout: fixed;
  width: 100%;
  min-width: 680px;
}

.tmr-table td,
.tmr-table th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cells that hold rich, multi-line content (or a whole empty-state block) may wrap instead of truncating */
.tmr-table td.tmr-wrap,
.tmr-table td[colspan] {
  white-space: normal;
}

/* The actions column holds a dropdown menu: do not clip it */
.tmr-table td:last-child,
.tmr-table th:last-child {
  overflow: visible;
}

/* Headers: 14px / 700 / dark ink on a light tint / sentence case. Body: 15px / 400. Secondary text: 13px. */
:root { --tmr-th-color: #3a3a37; --tmr-th-bg: rgba(26, 26, 24, 0.045); }
[data-bs-theme="dark"] { --tmr-th-color: #dfe3e8; --tmr-th-bg: rgba(255, 255, 255, 0.07); }

html body.has-sidebar .table-responsive .tmr-table.table > thead > tr > th {
  font-size: 14px !important;
  font-weight: 700;
  color: var(--tmr-th-color) !important;
  background-color: var(--tmr-th-bg) !important;
  text-transform: none;
  letter-spacing: 0;
}

html body.has-sidebar .table-responsive .tmr-table.table > tbody > tr > td {
  font-size: 15px !important;
  font-weight: 400;
}

html body.has-sidebar .table-responsive .tmr-table.table > tbody > tr > td .small,
html body.has-sidebar .table-responsive .tmr-table.table > tbody > tr > td small {
  font-size: 13px !important;
}

/* Amounts: tabular figures so digits line up down the column */
html body.has-sidebar .table-responsive .tmr-table.table > tbody > tr > td.tmr-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* One truncation rule for text inside a cell (pair with a title attribute carrying the full text) */
.tmr-truncate {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chips/badges inside table cells never exceed their column: they end with an ellipsis (full text is in
   the title attribute) rather than being clipped abruptly by the cell. */
.tmr-table td .badge-soft {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.tmr-table td .badge-soft > i:not([class*="me-"]) {
  margin-right: 0.3rem;
}

/* Shared transaction-table vocabulary: type pill + signed amount colours, used by All Transactions
   and the account ledger so both read the same. */
.amount-sort-link {
  color: inherit;
  gap: 0.35rem;
}
.amount-sort-link:hover {
  color: var(--bs-primary);
}

.type-badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.type-expense { background-color: #FDE8ED; color: var(--color-danger-text, #B93822); }
.type-income { background-color: #E6F4EF; color: var(--color-success-text, #0F7657); }
.type-transfer { background-color: #EBF3FC; color: var(--color-info-text, #1E65B5); }
.type-loan { background-color: #FDF4E7; color: var(--color-warning-text, #9C5400); }
.type-savings { background-color: #FDF4E7; color: var(--color-warning-text, #9C5400); }
.type-capital_event { background-color: #FDE8ED; color: var(--color-danger-text, #B93822); }

[data-bs-theme="dark"] .type-expense { background-color: rgba(248, 113, 113, 0.18); color: #F49C8C; }
[data-bs-theme="dark"] .type-income { background-color: rgba(93, 202, 165, 0.18); color: #5DCAA5; }
[data-bs-theme="dark"] .type-transfer { background-color: rgba(133, 183, 235, 0.18); color: #85B7EB; }
[data-bs-theme="dark"] .type-loan { background-color: rgba(244, 180, 78, 0.18); color: #F4B44E; }
[data-bs-theme="dark"] .type-savings { background-color: rgba(244, 180, 78, 0.18); color: #F4B44E; }
[data-bs-theme="dark"] .type-capital_event { background-color: rgba(248, 113, 113, 0.18); color: #F49C8C; }

.amount-expense { color: var(--color-danger-text, #B93822) !important; }
.amount-income { color: var(--color-success-text, #0F7657) !important; }
.amount-transfer { color: var(--color-info-text, #1E65B5) !important; }
.amount-loan { color: var(--color-warning-text, #9C5400) !important; }
.amount-savings { color: var(--color-warning-text, #9C5400) !important; }
.amount-capital_event { color: var(--color-danger-text, #B93822) !important; }
.amount-neutral { color: var(--color-muted-text, var(--bs-secondary-color)) !important; }

[data-bs-theme="dark"] .amount-expense { color: var(--color-danger-text, #F49C8C) !important; }
[data-bs-theme="dark"] .amount-income { color: var(--color-success-text, #5DCAA5) !important; }
[data-bs-theme="dark"] .amount-transfer { color: var(--color-info-text, #85B7EB) !important; }
[data-bs-theme="dark"] .amount-loan { color: var(--color-warning-text, #F4B44E) !important; }
[data-bs-theme="dark"] .amount-savings { color: var(--color-warning-text, #F4B44E) !important; }
[data-bs-theme="dark"] .amount-capital_event { color: var(--color-danger-text, #F49C8C) !important; }

/* "How it works" / info hint beside a page title: just a quiet outline glyph, no ring or button chrome. */
.info-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  margin-left: 0.25rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--bs-secondary-color);
  opacity: 0.55;
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.info-hint:hover,
.info-hint:focus-visible,
.info-hint[aria-expanded="true"] {
  opacity: 1;
  color: var(--bs-primary);
  background-color: var(--bs-tertiary-bg);
}
.info-hint:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 1px;
}

/* --- Daily reminder opt-in (components/reminder_optin.html) ---
   The card variant uses the same Bootstrap classes as the install banner on the dashboard
   (card, shadow-sm, rounded-4, icon circle); this only adds that banner's green wash. */
.tmr-reminder--card {
  background: linear-gradient(135deg, rgba(29, 158, 117, 0.1), rgba(29, 158, 117, 0.05));
  border: 1px solid rgba(29, 158, 117, 0.2) !important;
  margin-top: 1rem;   /* only takes space while the card is shown ([hidden] removes it) */
}
.tmr-reminder--plain { margin-top: 0.75rem; }
.tmr-reminder[hidden],
.tmr-reminder [hidden] { display: none !important; }
.tmr-reminder-icon { width: 48px; height: 48px; }

/* --- Toggle chip: a labelled pill with a small switch inside (Analytics: Include capital events) --- */
.tmr-toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: 31px;
  margin: 0;
  padding: 0 0.85rem 0 0.4rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tmr-toggle-chip:hover { border-color: rgba(var(--bs-primary-rgb), 0.5); }
.tmr-toggle-chip.is-on {
  background: rgba(var(--bs-primary-rgb), 0.1);
  border-color: rgba(var(--bs-primary-rgb), 0.45);
  color: var(--color-success-text, #0F7657);
}
[data-bs-theme="dark"] .tmr-toggle-chip.is-on { color: #5DCAA5; }
.tmr-toggle-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.tmr-toggle-track {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 18px;
  border-radius: 999px;
  background: var(--bs-secondary-bg, #dee2e6);
  transition: background-color 0.2s ease;
}
.tmr-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.tmr-toggle-chip.is-on .tmr-toggle-track { background: var(--color-secondary, #0F7657); }
.tmr-toggle-chip.is-on .tmr-toggle-thumb { transform: translateX(12px); }
.tmr-toggle-input:focus-visible + .tmr-toggle-track {
  outline: 2px solid var(--color-secondary, #0F7657);
  outline-offset: 2px;
}

/* --- Year pill: calendar icon + the app's standard searchable dropdown, same height as .tmr-toggle-chip --- */
.tmr-year-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 31px;
  min-width: 7.5rem;
  padding: 0 0.3rem 0 0.8rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: var(--bs-body-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s ease;
}
.tmr-year-pill:hover,
.tmr-year-pill:focus-within { border-color: rgba(var(--bs-primary-rgb), 0.5); }
.tmr-year-pill > .bi { color: var(--color-success-text, #0F7657); font-size: 0.85rem; }
[data-bs-theme="dark"] .tmr-year-pill > .bi { color: #5DCAA5; }
.tmr-year-pill .searchable-select-wrapper { flex: 1 1 auto; min-width: 0; }
.tmr-year-pill .searchable-select-btn {
  height: 29px;
  min-height: 0;
  padding: 0 1.6rem 0 0;
  border: 0;
  background-color: transparent;
  box-shadow: none;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 29px;
}
.tmr-year-pill .searchable-select-dropdown {
  left: auto;
  right: -0.3rem;
  min-width: 9rem;
  margin-top: 0.6rem;
}

/* Add menu (desktop navbar): plain coloured icons, fixed width so the labels line up */
.add-menu-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; font-size: 1.15rem; flex-shrink: 0;
}