/* ===========================
   DESIGN TOKENS
   Centralized design system values
   =========================== */

/* ===========================
   SPACING SCALE
   =========================== */
:root {
  --spacing-xs: 4px;
  --spacing-s: 8px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 32px;
}

/* ===========================
   BORDER RADIUS
   =========================== */
:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
}

/* ===========================
   TRANSITIONS
   =========================== */
:root {
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
}

/* ===========================
   SHADOWS
   =========================== */
:root {
  /* Shadow presets - default values (will be overridden per theme) */
  --shadow-subtle: 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-card: 0 2px 6px rgba(15, 23, 42, 0.02), 0 20px 40px rgba(15, 23, 42, 0.06);
  --shadow-elevated: 0 4px 12px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-floating: 0 8px 24px rgba(15, 23, 42, 0.12), 0 16px 48px rgba(15, 23, 42, 0.08);
  --shadow-drawer: 0 24px 48px rgba(15, 23, 42, 0.14);
  --shadow-modal: 0 24px 48px rgba(15, 23, 42, 0.14);
  --shadow-sidebar: 0 1px 3px rgba(15, 23, 42, 0.05);
}

/* ===========================
   TYPOGRAPHY
   =========================== */
:root {
  /* Base font sizes (English, default) */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.8125rem;    /* 13px */
  --font-size-base: 0.9375rem;  /* 15px */
  --font-size-md: 1rem;         /* 16px */
  --font-size-lg: 1.125rem;      /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */

  /* Language-specific base font sizes */
  --font-size-base-en: 0.9375rem;  /* 15px - English default */
  --font-size-base-es: 0.875rem;   /* 14px - Spanish (slightly smaller to prevent overflow) */
  --font-size-base-rtl: 0.9375rem; /* 15px - RTL languages (can be adjusted per language) */

  /* Letter spacing */
  --letter-spacing-normal: 0;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-wide: 0.01em;
  
  /* Language-specific letter spacing */
  --letter-spacing-en: 0;
  --letter-spacing-es: 0.01em;      /* Slightly wider for Spanish readability */
  --letter-spacing-rtl: 0.005em;    /* Subtle spacing for RTL scripts */

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Font families - Base (English/LTR) */
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* Font families - Spanish (optimized for accents) */
  --font-family-es: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* Font families - RTL (optimized for Arabic/Hebrew) */
  --font-family-rtl: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", "Noto Sans Hebrew", sans-serif;
}

/* Language-specific typography adjustments */
html[lang="es"],
html[lang^="es-"] {
  --font-size-base: var(--font-size-base-es);
  --letter-spacing: var(--letter-spacing-es);
  font-family: var(--font-family-es);
}

html[lang="en"],
html[lang^="en-"],
html:not([lang]) {
  --font-size-base: var(--font-size-base-en);
  --letter-spacing: var(--letter-spacing-en);
  font-family: var(--font-family-base);
}

/* RTL typography adjustments */
html[dir="rtl"],
html.rtl-mode {
  --font-size-base: var(--font-size-base-rtl);
  --letter-spacing: var(--letter-spacing-rtl);
  font-family: var(--font-family-rtl);
}

/* Combined: Spanish + RTL (for future support) */
html[lang="es"][dir="rtl"],
html[lang^="es-"][dir="rtl"],
html[lang="es"].rtl-mode,
html[lang^="es-"].rtl-mode {
  --font-size-base: var(--font-size-base-es);
  --letter-spacing: var(--letter-spacing-rtl);
  font-family: var(--font-family-rtl);
}

/* ===========================
   COMPONENT SIZES
   =========================== */
:root {
  /* Touch target minimum for accessibility */
  --touch-target-min: 44px;
  
  /* Button sizes */
  --button-height-sm: 32px;
  --button-height-md: 38px;
  --button-height-lg: 44px;
  --button-padding-x: var(--spacing-l);  /* 24px */
  --button-padding-y: var(--spacing-s);  /* 8px */

  /* Input sizes */
  --input-height-sm: 32px;
  --input-height-md: 38px;
  --input-height-lg: 44px;
  --input-padding-x: var(--spacing-m);  /* 16px */
  --input-padding-y: var(--spacing-s);  /* 8px */

  /* Icon sizes */
  --icon-size-sm: 14px;
  --icon-size-md: 16px;
  --icon-size-lg: 20px;
  --icon-size-xl: 24px;
}

/* ===========================
   RESPONSIVE UTILITIES
   =========================== */

/* Breakpoint variables */
:root {
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
}

/* Responsive padding utility */
.responsive-padding {
  padding: var(--spacing-s);
}
@media (min-width: 576px) {
  .responsive-padding {
    padding: var(--spacing-m);
  }
}
@media (min-width: 992px) {
  .responsive-padding {
    padding: var(--spacing-l);
  }
}

/* Responsive margin utility */
.responsive-margin {
  margin: var(--spacing-s);
}
@media (min-width: 576px) {
  .responsive-margin {
    margin: var(--spacing-m);
  }
}
@media (min-width: 992px) {
  .responsive-margin {
    margin: var(--spacing-l);
  }
}

/* Responsive text sizes */
.responsive-text {
  font-size: var(--font-size-sm);
}
@media (min-width: 768px) {
  .responsive-text {
    font-size: var(--font-size-base);
  }
}
@media (min-width: 992px) {
  .responsive-text {
    font-size: var(--font-size-lg);
  }
}

/* ===========================
   CONTAINER/GRID TOKENS
   =========================== */
:root {
  --container-max-width: 1200px;
  --container-padding-mobile: var(--spacing-m);  /* 16px */
  --container-padding-tablet: var(--spacing-l);  /* 24px */
  --container-padding-desktop: var(--spacing-xl); /* 32px */
}

/* Responsive container max-width */
.responsive-container {
  max-width: 100%;
  padding: 0 var(--container-padding-mobile);
}
@media (min-width: 576px) {
  .responsive-container {
    padding: 0 var(--container-padding-tablet);
  }
}
@media (min-width: 992px) {
  .responsive-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding-desktop);
  }
}

/* ===========================
   SMOOTH THEME TRANSITIONS
   =========================== */
html {
  transition: background-color var(--transition-normal), 
              color var(--transition-normal);
  overflow-x: hidden;
  max-width: 100vw;
}

/* Global transition presets - apply to safe properties only */
body,
.card,
.sidebar,
.drawer-panel,
.modal-content,
.table,
.table thead,
.table tbody tr,
.btn,
.form-control,
.form-select,
.input-group,
.badge,
.alert {
  transition-property: background-color, color, border-color, box-shadow, opacity, transform;
  transition-duration: var(--transition-fast);
  transition-timing-function: ease;
}

/* ===========================
   COLOR TOKENS - Light Theme
   =========================== */
:root[data-theme="light"] {
  /* Background Colors */
  --color-bg: #f6f7fb;
  --color-bg-alt: #f0f1f5;
  --color-bg-soft: #f9fafb;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-drawer-surface: #ffffff;
  --color-modal-surface: #ffffff;
  --color-sidebar-surface: #ffffff;

  /* Text Colors */
  --color-text: #111827;
  --color-text-primary: #111827;
  --color-text-secondary: #374151;
  --color-text-muted: #6b7280;
  --color-text-disabled: #9ca3af;
  --color-text-inverse: #ffffff;

  /* Border Colors */
  --color-border: rgba(15, 23, 42, 0.08);
  --color-border-light: rgba(15, 23, 42, 0.06);
  --color-border-subtle: rgba(15, 23, 42, 0.08);
  --color-border-strong: rgba(15, 23, 42, 0.15);

  /* Primary Colors - Use accent color variables */
  --color-primary: var(--accent-primary, #ff4f5e);
  --color-primary-hover: var(--accent-primary-hover, #ff3d4e);
  --color-primary-active: var(--accent-primary-active, #ff2b3e);
  --color-primary-soft: var(--accent-primary-soft, #ffe6ea);
  --color-primary-text: #ffffff;

  /* Secondary/Accent Colors */
  --color-secondary: #6366f1;
  --color-secondary-hover: #4f46e5;
  --color-secondary-active: #4338ca;
  --color-secondary-soft: #e0e7ff;
  --color-secondary-text: #ffffff;

  /* Success Colors */
  --color-success: #16a34a;
  --color-success-hover: #15803d;
  --color-success-active: #166534;
  --color-success-soft: #dcfce7;
  --color-success-bg: #dcfce7;
  --color-success-text: #ffffff;

  /* Warning Colors */
  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-warning-active: #b45309;
  --color-warning-soft: #fef3c7;
  --color-warning-bg: #fef3c7;
  --color-warning-text: #92400e;

  /* Error/Danger Colors */
  --color-error: #ef4444;
  --color-error-hover: #dc2626;
  --color-error-active: #b91c1c;
  --color-error-soft: #fee2e2;
  --color-error-bg: #fee2e2;
  --color-error-text: #ffffff;

  /* Info Colors */
  --color-info: #3b82f6;
  --color-info-hover: #2563eb;
  --color-info-active: #1d4ed8;
  --color-info-soft: #dbeafe;
  --color-info-bg: #dbeafe;
  --color-info-text: #ffffff;

  /* Navigation Colors */
  --nav-bg: #ffffff;
  --nav-border: rgba(15, 23, 42, 0.06);
  --nav-link-active: #111827;
  --nav-link-muted: #6b7280;

  /* Table Colors */
  --table-header-bg: #f3f4ff;
  --table-header-text: #111827;
  --table-row-hover: #f8fafc;
  --table-border-color: rgba(15, 23, 42, 0.08);

  /* Card Colors */
  --card-bg: #ffffff;
  --card-border: rgba(15, 23, 42, 0.08);

  /* Shadows - Light Theme */
  --shadow-subtle: 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-card: 0 2px 6px rgba(15, 23, 42, 0.02), 0 20px 40px rgba(15, 23, 42, 0.06);
  --shadow-elevated: 0 4px 12px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-floating: 0 8px 24px rgba(15, 23, 42, 0.12), 0 16px 48px rgba(15, 23, 42, 0.08);
  --shadow-drawer: 0 24px 48px rgba(15, 23, 42, 0.14);
  --shadow-modal: 0 24px 48px rgba(15, 23, 42, 0.14);
  --shadow-sidebar: 0 1px 3px rgba(15, 23, 42, 0.05);
  --nav-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

/* ===========================
   ACCENT COLOR SCHEMES
   =========================== */

/* Pink Accent (Default) */
:root[data-accent-color="pink"],
:root:not([data-accent-color]) {
  --accent-primary: #ff4f5e;
  --accent-primary-hover: #ff3d4e;
  --accent-primary-active: #ff2b3e;
  --accent-primary-soft: #ffe6ea;
  --accent-gradient-start: #ff4f5e;
  --accent-gradient-end: #ff6b7a;
}



/* Purple Accent */
:root[data-accent-color="purple"] {
  --accent-primary: #667eea;
  --accent-primary-hover: #5568d3;
  --accent-primary-active: #4452bc;
  --accent-primary-soft: #e8eaf6;
  --accent-gradient-start: #667eea;
  --accent-gradient-end: #764ba2;
}



/* ===========================
   LEGACY ALIASES (for backward compatibility)
   =========================== */
:root[data-theme="light"] {
  /* Map old variable names to new tokens */
  --color-accent: var(--color-secondary);
  --color-accent-soft: var(--color-secondary-soft);
  --color-danger: var(--color-error);
  --color-danger-soft: var(--color-error-soft);
  --card-shadow: var(--shadow-card);
  --card-radius: var(--radius-xl);
  --card-padding: var(--spacing-l);
  --drawer-shadow: var(--shadow-drawer);
  --transition-fast: 150ms ease;
}

/* Spacing utility classes */
.spacing-xs { margin: var(--spacing-xs); }
.spacing-s { margin: var(--spacing-s); }
.spacing-m { margin: var(--spacing-m); }
.spacing-l { margin: var(--spacing-l); }
.spacing-xl { margin: var(--spacing-xl); }

.mt-xs { margin-top: var(--spacing-xs); }
.mt-s { margin-top: var(--spacing-s); }
.mt-m { margin-top: var(--spacing-m); }
.mt-l { margin-top: var(--spacing-l); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-s { margin-bottom: var(--spacing-s); }
.mb-m { margin-bottom: var(--spacing-m); }
.mb-l { margin-bottom: var(--spacing-l); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.pt-xs { padding-top: var(--spacing-xs); }
.pt-s { padding-top: var(--spacing-s); }
.pt-m { padding-top: var(--spacing-m); }
.pt-l { padding-top: var(--spacing-l); }
.pt-xl { padding-top: var(--spacing-xl); }

.pb-xs { padding-bottom: var(--spacing-xs); }
.pb-s { padding-bottom: var(--spacing-s); }
.pb-m { padding-bottom: var(--spacing-m); }
.pb-l { padding-bottom: var(--spacing-l); }
.pb-xl { padding-bottom: var(--spacing-xl); }

.px-xs { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.px-s { padding-left: var(--spacing-s); padding-right: var(--spacing-s); }
.px-m { padding-left: var(--spacing-m); padding-right: var(--spacing-m); }
.px-l { padding-left: var(--spacing-l); padding-right: var(--spacing-l); }
.px-xl { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); }

.py-xs { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.py-s { padding-top: var(--spacing-s); padding-bottom: var(--spacing-s); }
.py-m { padding-top: var(--spacing-m); padding-bottom: var(--spacing-m); }
.py-l { padding-top: var(--spacing-l); padding-bottom: var(--spacing-l); }
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }

.gap-xs { gap: var(--spacing-xs); }
.gap-s { gap: var(--spacing-s); }
.gap-m { gap: var(--spacing-m); }
.gap-l { gap: var(--spacing-l); }
.gap-xl { gap: var(--spacing-xl); }

/* ===========================
   TYPOGRAPHY SYSTEM
   =========================== */
:root {
  --font-size-title: 1.5rem;      /* 24px - Page titles (H1) */
  --font-size-section: 1.125rem;   /* 18px - Section headers (H2) */
  --font-size-label: 0.875rem;     /* 14px - Field labels */
  --font-size-body: 0.9375rem;     /* 15px - Body text */
  --font-size-small: 0.8125rem;    /* 13px - Small text */
  
  --font-weight-title: 600;        /* Semibold */
  --font-weight-section: 600;      /* Semibold */
  --font-weight-label: 500;       /* Medium */
  --font-weight-body: 400;         /* Regular */
  --font-weight-table-header: 600; /* Semibold */
}

/* Typography classes */
.text-title {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-title);
  line-height: 1.3;
  letter-spacing: -0.02em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.text-section {
  font-size: var(--font-size-section);
  font-weight: var(--font-weight-section);
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.text-label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.text-body {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.text-small {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-body);
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Text truncation utility for mobile */
@media (max-width: 575.98px) {
  .text-truncate-mobile {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
}

/* Responsive text sizes */
@media (max-width: 575.98px) {
  .text-title {
    font-size: var(--font-size-2xl);
  }

  .text-section {
    font-size: var(--font-size-lg);
  }
}

/* Table header typography */
.table thead th {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-table-header);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Responsive table header typography */
@media (max-width: 575.98px) {
  .table thead th {
    font-size: var(--font-size-xs);
    letter-spacing: 0.03em;
  }

  .table td {
    font-size: var(--font-size-sm);
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

/* ===========================
   GLOBAL
   =========================== */

/* Prevent horizontal scroll globally */
* {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: var(--color-bg) !important;
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  letter-spacing: var(--letter-spacing, 0);
  line-height: var(--line-height-normal);
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

/* Prevent horizontal scroll on common elements */
.container,
.container-fluid,
.row,
.col,
[class*="col-"],
.card,
.card-body,
.card-header,
.card-footer {
  max-width: 100%;
  box-sizing: border-box;
}

/* Responsive typography improvements */
@media (max-width: 575.98px) {
  body {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
  }

  h1, .h1 {
    font-size: var(--font-size-2xl);
    line-height: 1.3;
  }

  h2, .h2 {
    font-size: var(--font-size-xl);
    line-height: 1.4;
  }

  h3, .h3 {
    font-size: var(--font-size-lg);
    line-height: 1.4;
  }

  /* Ensure text doesn't overflow */
  p, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Truncate long text in headings on mobile */
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}

:root[data-theme="light"] body {
  background: radial-gradient(circle at top left, #fdf2ff 0, #f6f7fb 40%, #f9fafb 100%) !important;
  transition: background var(--transition-normal);
}



main,
.container,
.container-fluid {
  color: inherit;
}

/* Page transition animation - subtle fade-in */
.main-content-body {
  animation: pageFadeIn var(--transition-normal) ease-out;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Settings form save feedback animation - subtle highlight/glow effect */
@keyframes settingsFormSaved {
  0% {
    border-color: var(--color-border-light);
    box-shadow: 0 0 0 0 var(--color-primary-soft);
  }
  50% {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
  }
  100% {
    border-color: var(--color-border-light);
    box-shadow: 0 0 0 0 var(--color-primary-soft);
  }
}

/* Dark mode keyframe - use slightly different colors for better visibility */
@keyframes settingsFormSavedDark {
  0% {
    border-color: var(--color-border);
    box-shadow: 0 0 0 0 rgba(255, 79, 94, 0.2);
  }
  50% {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 79, 94, 0.25);
  }
  100% {
    border-color: var(--color-border);
    box-shadow: 0 0 0 0 rgba(255, 79, 94, 0.2);
  }
}

/* Settings form save feedback - apply to settings-card */
.settings-card.settings-form-saved {
  animation: settingsFormSaved 1.5s ease-out;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Settings form save feedback - apply to form elements within settings-card */
.settings-card-body form.settings-form-saved {
  animation: settingsFormSaved 1.5s ease-out;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Dark mode adjustments for form save feedback */




.form-label.required::after {
  content: " *";
  color: var(--color-error);
}

/* ===========================
   APP LAYOUT
   =========================== */

.app-layout {
  display: flex;
  min-height: 100vh;
  background-color: var(--color-bg);
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

/* Login layout - full width, centered content */
.app-layout.login-layout {
  justify-content: center;
  align-items: center;
}

.app-layout.login-layout .main-content.login-content {
  width: 100%;
  max-width: 100%;
  margin-left: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-layout.login-layout .main-content-body {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Login form: checkbox "Recordar sesión" visible */
.app-layout.login-layout .form-check-input {
  flex-shrink: 0;
  opacity: 1;
}
.app-layout.login-layout .form-check-label {
  color: var(--color-text);
  opacity: 1;
}

/* ===========================
   SIDEBAR
   =========================== */

.sidebar {
  width: 240px;
  background: var(--color-sidebar-surface);
  border-right: 1px solid var(--nav-border);
  box-shadow: var(--shadow-sidebar);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 1050;
  z-index: 1000;
  overflow-y: auto;
  transition: transform var(--transition-fast);
}

.sidebar-header {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  border-bottom: 1px solid var(--nav-border);
}

.sidebar-brand {
  color: var(--nav-link-active);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 700;
}

.sidebar-toggle {
  color: var(--nav-link-muted);
  padding: var(--spacing-xs);
  font-size: 1.2rem;
}

.sidebar-content {
  flex: 1;
  padding: var(--spacing-m);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

.sidebar-section {
  margin-bottom: 1rem;
}

.tenant-selector-sidebar {
  width: 100%;
  border: 1px solid var(--nav-border);
  background: var(--color-bg-soft);
  color: var(--nav-link-active);
  border-radius: var(--radius-md);
  padding: var(--spacing-s) var(--spacing-m);
  font-size: 0.875rem;
  text-align: left;
  justify-content: flex-start;
}

.tenant-selector-sidebar:hover,
.tenant-selector-sidebar:focus {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

.sidebar-nav-section {
  margin-bottom: var(--spacing-l);
}

.sidebar-nav-section:first-child {
  margin-top: 0;
}

.sidebar-nav-section:last-child {
  margin-bottom: 0;
}

.sidebar-nav-section-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
  font-weight: var(--font-weight-semibold);
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  padding: var(--spacing-s) var(--spacing-m);
  margin-bottom: var(--spacing-xs);
  color: var(--nav-link-muted);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  transition: background-color var(--transition-fast), 
              color var(--transition-fast),
              transform var(--transition-fast);
  position: relative;
  transform: translateX(0);
  min-height: 40px;
}

.sidebar-nav-item .badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
}

.sidebar-nav-item:last-child {
  margin-bottom: 0;
}

.sidebar-nav-item i {
  font-size: var(--font-size-lg);
  width: var(--icon-size-lg);
  min-width: var(--icon-size-lg);
  text-align: center;
  flex-shrink: 0;
  transition: color var(--transition-fast), opacity var(--transition-fast);
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-nav-item:hover {
  color: var(--nav-link-active);
  background: var(--color-bg-soft);
  transform: translateX(2px);
}

.sidebar-nav-item:hover i {
  color: var(--color-primary);
  opacity: 1;
}

.sidebar-nav-item.active {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  font-weight: var(--font-weight-semibold);
  transform: translateX(0);
}

.sidebar-nav-item.active i {
  color: var(--color-primary);
  opacity: 1;
}

.sidebar-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: calc(100% - var(--spacing-xs));
  background: var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.sidebar-nav-item-dropdown {
  border: none;
  background: transparent;
  color: var(--nav-link-muted);
  padding: var(--spacing-s) var(--spacing-m);
  margin-bottom: var(--spacing-xs);
  text-align: left;
  width: 100%;
  min-height: 40px;
  justify-content: flex-start;
}

.sidebar-nav-item-dropdown:hover,
.sidebar-nav-item-dropdown:focus {
  color: var(--nav-link-active);
  background: var(--color-bg-soft);
}

.sidebar-nav-item-dropdown i:first-child {
  font-size: var(--font-size-lg);
  width: var(--icon-size-lg);
  min-width: var(--icon-size-lg);
  text-align: center;
  flex-shrink: 0;
  opacity: 0.8;
}

.sidebar-footer {
  margin-top: auto;
  padding: var(--spacing-m);
  padding-top: var(--spacing-l);
  border-top: 1px solid var(--nav-border);
  background: var(--color-sidebar-surface);
}

.sidebar-version {
  text-align: center;
  padding: var(--spacing-xs);
}

.sidebar-version .version-number {
  font-family: monospace;
  font-weight: 600;
  color: var(--color-primary);
}
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-nav-item-dropdown:hover i:first-child,
.sidebar-nav-item-dropdown:focus i:first-child {
  color: var(--color-primary);
  opacity: 1;
}

/* ===========================
   MAIN CONTENT AREA
   =========================== */

.main-content {
  flex: 1;
  margin-left: 280px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

.top-bar {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--container-padding-tablet);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-card);
}

.top-bar-spacer {
  flex: 1;
}

.top-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
}

/* Top bar responsive adjustments */
@media (max-width: 575.98px) {
  .top-bar {
    padding: 0 var(--container-padding-mobile);
    height: 52px;
  }

  .top-bar-actions {
    gap: 0.375rem;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .top-bar {
    padding: 0 1rem;
  }
}

.sidebar-toggle-mobile {
  color: var(--nav-link-muted);
  padding: var(--spacing-xs);
  font-size: 1.2rem;
  display: none;
}

.main-content-body {
  flex: 1;
  padding: var(--spacing-l) 0;
  overflow-y: auto;
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

.main-content-body .container-fluid {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--container-padding-mobile);
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* Responsive container padding using tokens */
@media (min-width: 576px) {
  .main-content-body .container-fluid {
    padding: 0 var(--container-padding-tablet);
  }
}

@media (min-width: 992px) {
  .main-content-body .container-fluid {
    /* max-width removed to allow full-width usage across the application */
    padding: 0 var(--container-padding-desktop);
  }
}

/* Reduce excessive spacing on mobile */
@media (max-width: 575.98px) {
  .main-content-body {
    padding: var(--spacing-m) 0;
  }

  /* Reduce card padding on mobile */
  .card-body {
    padding: var(--spacing-m) !important;
  }

  .card-header {
    padding: var(--spacing-m) !important;
  }

  .card-footer {
    padding: var(--spacing-m) !important;
  }

  /* Reduce margin-bottom on sections */
  .mb-4, .mb-5 {
    margin-bottom: var(--spacing-l) !important;
  }

  .mb-3 {
    margin-bottom: var(--spacing-m) !important;
  }
}

/* Tablet spacing adjustments */
@media (min-width: 576px) and (max-width: 991.98px) {
  .main-content-body {
    padding: var(--spacing-l) 0;
  }
}

/* ===========================
   RESPONSIVE SIDEBAR
   =========================== */

@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%) !important;
    transition: transform var(--transition-normal), visibility var(--transition-normal);
    z-index: 1050;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile browsers */
    visibility: hidden;
  }

  .sidebar.sidebar-collapsed {
    transform: translateX(-100%) !important;
    visibility: hidden !important;
  }

  .sidebar:not(.sidebar-collapsed) {
    transform: translateX(0) !important;
    visibility: visible !important;
    box-shadow: var(--shadow-sidebar);
  }

  /* Sidebar backdrop on mobile */
  .sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1049;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
    pointer-events: none;
  }

  .sidebar-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Respect reduced motion preference */
  @media (prefers-reduced-motion: reduce) {
    .sidebar {
      transition: none;
    }
    
    .sidebar-backdrop {
      transition: none;
    }
  }

  .main-content {
    margin-left: 0;
  }

  .sidebar-toggle-mobile {
    display: block;
  }

  .sidebar-toggle {
    display: block;
  }

  /* Ensure text doesn't overflow on small screens */
  .sidebar-nav-item span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-nav-item-dropdown span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (min-width: 992px) {
  .sidebar-toggle-mobile,
  .sidebar-toggle {
    display: none;
  }
}

/* ===========================
   LEGACY NAVBAR (deprecated, kept for compatibility)
   =========================== */

.top-navbar {
  display: none; /* Hide old navbar */
}

.top-nav-link {
  color: var(--nav-link-muted);
  text-decoration: none;
  padding: var(--spacing-xs) var(--spacing-m);
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-semibold);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.tenant-selector {
  min-width: 160px;
  border-radius: var(--radius-pill);
  padding: var(--spacing-xs) var(--spacing-m);
  border: 1px solid var(--nav-border);
  background: var(--color-bg-soft);
  color: var(--nav-link-active);
  box-shadow: none;
}

.top-bar .btn-outline-secondary {
  border-radius: var(--radius-pill);
  padding: var(--spacing-xs) var(--spacing-s);
  font-size: var(--font-size-sm);
  border-color: var(--color-border-subtle);
  background-color: var(--color-bg-soft);
  color: var(--nav-link-active);
}

.top-bar .dropdown-menu {
  box-shadow: var(--shadow-card);
  border: 1px solid var(--nav-border);
}

/* Responsive dropdowns */
@media (max-width: 575.98px) {
  .dropdown-menu {
    min-width: 200px;
    max-width: calc(100vw - var(--spacing-xl));
    font-size: var(--font-size-sm);
  }

  .dropdown-item {
    padding: var(--spacing-s) var(--spacing-m);
    min-height: 44px; /* Touch target size */
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
  }

  .dropdown-header {
    padding: var(--spacing-s) var(--spacing-m);
    font-size: var(--font-size-xs);
  }
}

/* Theme toggle button */
.btn-icon {
  border-radius: var(--radius-pill);
  padding: var(--spacing-xs) var(--spacing-s);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.btn-icon i {
  font-size: var(--icon-size-lg);
}

/* Buttons: Full width on very small screens */
@media (max-width: 575.98px) {
  .btn-group,
  .btn-toolbar {
    flex-direction: column;
    width: 100%;
  }
  
  .btn-group .btn,
  .btn-toolbar .btn {
    width: 100%;
    margin-bottom: var(--spacing-xs);
    border-radius: var(--radius-md) !important;
  }
  
  .btn-group .btn:last-child,
  .btn-toolbar .btn:last-child {
    margin-bottom: 0;
  }
  
  /* Action bars: Stack buttons */
  .action-bar .btn,
  .action-bar .btn-group {
    width: 100%;
    margin-bottom: var(--spacing-xs);
  }
  
  .action-bar .btn:last-child,
  .action-bar .btn-group:last-child {
    margin-bottom: 0;
  }
}

/* Responsive button adjustments for mobile */
@media (max-width: 575.98px) {
  .btn-icon {
    min-width: 40px;
    min-height: 40px;
    padding: var(--spacing-xs);
  }

  .top-bar .btn-outline-secondary {
    min-width: 40px;
    min-height: 40px;
    padding: var(--spacing-xs);
  }

  .top-bar .btn-sm {
    min-width: 40px;
    min-height: 40px;
    padding: var(--spacing-xs);
  }
}

/* Chips and soft badges */
.chip {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-s);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  background: var(--chip-bg, var(--color-bg-soft));
  color: var(--chip-text, var(--color-text));
  border: 1px solid var(--color-border-subtle);
}

.chip-light {
  background: var(--color-bg-soft);
  color: var(--color-text);
}

.badge.bg-success-soft {
  background-color: var(--color-success-soft);
  color: var(--color-success);
}

.badge.bg-warning-soft {
  background-color: var(--color-warning-soft);
  color: var(--color-warning-text);
}

.badge.bg-info-soft {
  background-color: var(--color-accent-soft);
  color: var(--color-info);
}

.badge.bg-secondary-soft {
  background-color: var(--color-bg-soft);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-subtle);
}

/* Standardized alert status badges */
.badge.bg-success-soft,
.badge.bg-warning-soft,
.badge.bg-info-soft,
.badge.bg-secondary-soft,
.badge.bg-danger-soft {
  padding: var(--spacing-xs) var(--spacing-s);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* ===========================
   TEXT CLAMPING UTILITIES
   For gracefully truncating long text
   =========================== */
.text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.text-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Fallback for browsers that don't support line-clamp */
@supports not (-webkit-line-clamp: 2) {
  .text-clamp-2,
  .text-clamp-3 {
    max-height: 3em; /* Approximate 2 lines */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .text-clamp-3 {
    max-height: 4.5em; /* Approximate 3 lines */
  }
}

.unreconciled-row {
  border-left: 3px solid var(--color-accent);
}

.filter-bar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

/* ===========================
   ICON SYSTEM
   =========================== */

/* Base icon sizing - Bootstrap Icons */
i[class^="bi-"],
.bi {
  font-size: 1rem; /* 16px base */
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* Icon size variants */
.icon-sm {
  font-size: 0.875rem; /* 14px */
}

.icon-md {
  font-size: 1rem; /* 16px - default */
}

.icon-lg {
  font-size: 1.25rem; /* 20px */
}

.icon-xl {
  font-size: 1.5rem; /* 24px */
}

/* Icon in buttons */
.btn i,
.btn .bi {
  font-size: 1em;
  width: 1em;
  height: 1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* Standardized icon sizes for Settings pages */
/* Settings card title icons */
.settings-card-title .bi {
  font-size: var(--icon-size-lg);
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-right: var(--spacing-s);
}

/* Settings button icons - standard size */
.settings-card-body .btn .bi,
.settings-card .btn .bi {
  font-size: var(--icon-size-md);
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* Settings small button icons */
.settings-card-body .btn-sm .bi,
.settings-card .btn-sm .bi {
  font-size: var(--icon-size-sm);
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* Settings table action button icons */
.settings-card .table .btn .bi,
.settings-card .table .btn-sm .bi {
  font-size: var(--icon-size-sm);
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* Settings navigation icons - standardized to match main sidebar */
.settings-nav-item .bi,
.settings-nav-item i {
  font-size: var(--font-size-lg); /* Match main sidebar: 1.125rem (18px) */
  width: var(--icon-size-lg); /* Match main sidebar: 20px */
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  text-align: center;
  transition: color var(--transition-fast), opacity var(--transition-fast);
  opacity: 0.8; /* Match main sidebar opacity */
  flex-shrink: 0;
}

/* Settings index page icons */
.settings-card .settings-card-title .bi {
  font-size: var(--icon-size-lg);
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-right: var(--spacing-s);
}

/* Settings list item icons */
.settings-card-body .list-unstyled .bi,
.settings-card-body a .bi {
  font-size: var(--icon-size-md);
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* Icon in empty states */
.empty-state-icon {
  font-size: 3rem; /* 48px */
  width: 3rem;
  height: 3rem;
}


/* Icon in table actions */
.table .btn i {
  font-size: 0.875rem; /* 14px */
}

/* ===========================
   CARDS - NORMALIZED
   =========================== */

.card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
  color: var(--color-text);
  overflow: hidden;
  margin-bottom: var(--spacing-m);
  max-width: 100%;
  box-sizing: border-box;
}

/* Card hover animation removed - cards remain static on hover */

.card-header {
  padding: var(--spacing-m) var(--spacing-l);
  border-bottom: 1px solid var(--color-border-subtle);
  background-color: var(--color-surface);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.card-body {
  padding: var(--spacing-l);
}

.card-footer {
  padding: var(--spacing-m) var(--spacing-l);
  border-top: 1px solid var(--color-border-subtle);
  background-color: var(--color-surface);
  border-radius: 0 0 var(--card-radius) var(--card-radius);
}

/* Dashboard KPI cards */
.dashboard-card,
.card.dashboard-card {
  padding: var(--spacing-l);
  border-radius: var(--card-radius);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-card);
}

/* Elevated cards for emphasis */
.card-elevated {
  box-shadow: var(--shadow-elevated);
}

/* ===========================
   TABLES
   =========================== */

.table {
  color: var(--color-text);
}

/* ===========================
   STANDARDIZED TABLE STYLES
   =========================== */

/* Standard table base */
.table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
}

/* Standardized table header */
.table thead {
  background-color: var(--table-header-bg);
  border-bottom: 2px solid var(--color-border-subtle);
}

.table thead th {
  padding: var(--spacing-m) var(--spacing-l);
  border-bottom: none;
  background-color: var(--table-header-bg);
  color: var(--table-header-text);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

/* Standardized table body */
.table tbody td {
  padding: var(--spacing-m) var(--spacing-l);
  border-color: var(--color-border-subtle);
  vertical-align: middle;
}

.table tbody tr {
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background-color var(--transition-fast);
  cursor: default;
}

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

/* Standardized hover state - only change background, not cursor */
.table-hover tbody tr:hover,
.table tbody tr:hover {
  background-color: var(--table-row-hover);
  /* [BANK-ACCOUNT-PAGE-FIX-POINTER-CURSOR-OVERLAY-01] Removed cursor: pointer - only apply to truly clickable rows */
}

/* Zebra striping (if table-striped class is used) */
.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--color-bg-soft);
}



/* Actions column standardization */
.table-actions {
  text-align: right;
  white-space: nowrap;
  width: 1%;
  min-width: 180px; /* Increased from 120px to fit 5 action buttons */
}

.table-actions-cell {
  text-align: right;
  white-space: nowrap;
  padding: var(--spacing-xs) var(--spacing-s) !important; /* Consistent padding */
}

.table-actions-group {
  display: inline-flex;
  gap: var(--spacing-xs);
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap; /* Prevent wrapping on desktop - use scrolling instead */
}

/* Ensure action buttons have consistent sizing */
.table-actions-group .btn {
  flex-shrink: 0; /* Prevent buttons from shrinking */
  min-width: 32px; /* Minimum touch target */
  height: 32px;
  padding: 0 var(--spacing-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Action buttons in tables */
.table tbody tr .btn {
  opacity: 0.85;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.table tbody tr:hover .btn {
  opacity: 1;
}

/* Responsive table actions - mobile optimization */
@media (max-width: 767.98px) {
  .table-actions {
    min-width: auto; /* Allow column to shrink on mobile */
  }
  
  .table-actions-cell {
    min-width: auto;
    padding: var(--spacing-xs) !important;
  }
  
  .table-actions-group {
    gap: 2px; /* Tighter gap on mobile */
    flex-wrap: wrap; /* Allow wrapping on mobile */
  }
  
  .table-actions-group .btn {
    padding: 4px 6px; /* Compact padding on mobile */
    font-size: var(--font-size-xs);
    min-width: 28px;
    height: 28px;
  }
  
  /* Hide text labels on mobile, show only icons */
  .table-actions-group .btn span.d-none.d-md-inline {
    display: none !important;
  }
}

/* Stack actions vertically on very small screens */
@media (max-width: 575.98px) {
  .table-actions-group {
    flex-direction: row; /* Keep horizontal but allow wrap */
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
  }
  
  .table-actions-group .btn {
    min-width: 28px;
  }
}

/* ===========================
   TRANSACTION EDIT PANEL
   Panel expandible para edición inline de transacciones
   =========================== */

/* Fila del panel expandible */
.transaction-edit-panel-row {
  background-color: var(--color-bg-soft);
  transition: all var(--transition-normal);
}

/* Panel de edición */
.transaction-edit-panel {
  padding: var(--spacing-l);
  background-color: var(--color-bg);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  margin: var(--spacing-s);
  box-shadow: var(--shadow-elevated);
}

.transaction-edit-panel .form-label {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-xs);
}

/* Indicador visual en fila siendo editada */
tr.transaction-editing {
  background-color: var(--color-primary-soft);
}

/* Responsive: ajustar padding en móvil */
@media (max-width: 767.98px) {
  .transaction-edit-panel {
    padding: var(--spacing-m);
    margin: var(--spacing-xs);
  }
  
  .transaction-edit-panel .row {
    margin-left: calc(var(--spacing-xs) * -1);
    margin-right: calc(var(--spacing-xs) * -1);
  }
  
  .transaction-edit-panel .row > * {
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
  }
}

/* ===========================
   END TRANSACTION EDIT PANEL
   =========================== */

  .table-actions-group .btn {
    min-width: 28px;
    height: 28px;
    padding: 4px;
  }
}

/* ===========================
   TRANSACTION EDIT PANEL
   Panel expandible para edición inline de transacciones
   =========================== */

/* Fila del panel expandible */
.transaction-edit-panel-row {
  background-color: var(--color-bg-soft);
  transition: all var(--transition-normal);
}

/* Panel de edición */
.transaction-edit-panel {
  padding: var(--spacing-l);
  background-color: var(--color-bg);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  margin: var(--spacing-s);
  box-shadow: var(--shadow-elevated);
}

.transaction-edit-panel .form-label {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-xs);
}

/* Indicador visual en fila siendo editada */
tr.transaction-editing {
  background-color: var(--color-primary-soft);
}

/* Responsive: ajustar padding en móvil */
@media (max-width: 767.98px) {
  .transaction-edit-panel {
    padding: var(--spacing-m);
    margin: var(--spacing-xs);
  }
  
  .transaction-edit-panel .row {
    margin-left: calc(var(--spacing-xs) * -1);
    margin-right: calc(var(--spacing-xs) * -1);
  }
  
  .transaction-edit-panel .row > * {
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
  }
}

/* Table responsive wrapper */
/* [BANK-ACCOUNT-TRANSACTIONS-UNRECONCILED-TABLE-RESPONSIVE-01] */
.table-responsive {
  border-radius: var(--radius-md);
  overflow-x: auto; /* Allow horizontal scroll when table is wider than container */
  overflow-y: visible;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Ensure minimum table width for readability on narrow viewports */
.table-responsive .table {
  min-width: 600px; /* Minimum table width before scroll kicks in */
}

/* Optional: smaller min-width for tables with fewer columns */
.table-responsive.table-responsive-compact .table {
  min-width: 400px;
}

/* Ensure table headers are sticky in responsive containers */
.table-responsive .table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--table-header-bg, var(--color-surface));
}

/* Responsive table improvements for mobile */
@media (max-width: 767.98px) {
  .table-responsive {
    margin-left: calc(var(--spacing-m) * -1);
    margin-right: calc(var(--spacing-m) * -1);
    border-radius: 0;
    padding: 0;
  }

  .table-responsive .table {
    min-width: 500px; /* Reduced min-width for better mobile experience */
    font-size: var(--font-size-sm);
  }

  .table-responsive.table-responsive-compact .table {
    min-width: 350px;
  }

  /* Improve table cell padding on mobile */
  .table-responsive .table td,
  .table-responsive .table th {
    padding: var(--spacing-s) var(--spacing-xs);
    white-space: nowrap;
  }

  /* Better spacing for table actions on mobile */
  .table-responsive .table .btn {
    min-width: 36px;
    min-height: 36px;
    padding: var(--spacing-xs);
  }
}

@media (max-width: 575.98px) {
  .table-responsive .table {
    min-width: 450px;
    font-size: var(--font-size-xs);
  }

  .table-responsive.table-responsive-compact .table {
    min-width: 320px;
  }

  /* Reduce padding further on very small screens */
  .table-responsive .table td,
  .table-responsive .table th {
    padding: var(--spacing-xs);
  }

  /* Hide less important columns on very small screens using utility classes */
  .table-responsive .table .d-sm-none {
    display: none !important;
  }
}

/* Dark mode table adjustments */










/* Settings and card tables inherit standard table styles */
.settings-card .table,
.card .table {
  /* Inherits from .table base styles */
}

/* Settings categories table - consistent icon sizes */
.settings-card .table tbody tr .btn i,
.card .table tbody tr .btn i {
  font-size: 0.875rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Settings categories table - consistent button alignment */
.settings-card .table tbody tr .btn,
.card .table tbody tr .btn {
  min-width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Dark mode for settings categories table */




/* Zebra striping for tables */
.table tbody tr:nth-child(even) {
  background-color: var(--table-row-stripe, transparent);
}

.table tbody tr[onclick],
.table tbody tr[data-href],
.table tbody tr.clickable {
  cursor: pointer;
}

.table tbody tr[onclick]:hover,
.table tbody tr[data-href]:hover,
.table tbody tr.clickable:hover {
  background-color: var(--table-row-hover);
  transform: translateX(2px);
}

/* Zebra striping */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: transparent;
}

.table-striped tbody tr:nth-of-type(even) {
  background-color: var(--color-bg-soft);
}

.table-striped tbody tr:nth-of-type(even):hover {
  background-color: var(--table-row-hover);
}

/* ===========================
   TABLE MOBILE CARDS
   Responsive table conversion to cards on mobile
   =========================== */
.table-mobile-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

.table-mobile-cards .card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
}

.table-mobile-cards .card-body {
  padding: var(--spacing-m);
}

.table-mobile-cards .card-body > div {
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
}

/* Simulator result cards: compact rows on mobile */
.table-mobile-cards .simulator-mobile-row {
  padding: var(--spacing-xs) 0;
  min-height: 0;
}
.table-mobile-cards .simulator-mobile-notes {
  font-size: var(--font-size-xs);
}

@media (min-width: 768px) {
  .table-mobile-cards {
    display: none;
  }
}

/* Table cell alignment */
.table td,
.table th {
  vertical-align: middle;
  padding: var(--spacing-m) var(--spacing-m);
}

.table thead th {
  padding: var(--spacing-m) var(--spacing-m);
  border-bottom: 2px solid var(--color-border-subtle);
}

/* Table action column */
.table .text-end,
.table .actions-column {
  white-space: nowrap;
  text-align: right;
}

.table .actions-column .btn {
  margin-left: var(--spacing-xs);
}

.table .actions-column .btn:first-child {
  margin-left: 0;
}

/* Table scrollable container */
.table-scrollable {
  max-height: 70vh;
  overflow-y: auto;
}

/* Sticky table header */
.table-sticky-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--table-header-bg);
}

/* Override Bootstrap table-light for dark mode */




/* List group dark mode styling */




/* Chart container */
.chart-container {
  height: 320px;
  position: relative;
}

.chart-container-large {
  height: 360px;
}

/* Progress bar */
.progress-sm {
  height: 0.65rem;
}

.card .table thead tr:first-child th:first-child,
.table-responsive .table thead tr:first-child th:first-child {
  border-top-left-radius: 1rem;
}

.card .table thead tr:first-child th:last-child,
.table-responsive .table thead tr:first-child th:last-child {
  border-top-right-radius: 1rem;
}

/* ===========================
   FORMS & INPUTS
   =========================== */

.form-control,
.form-select {
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text);
  font-size: var(--font-size-base);
  padding: var(--spacing-s) var(--spacing-m);
  min-height: var(--input-height-md);
  height: var(--input-height-md);
  line-height: var(--line-height-normal);
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast),
              box-shadow var(--transition-fast);
  box-sizing: border-box;
}

/* Responsive form controls for mobile */
@media (max-width: 575.98px) {
  .form-control,
  .form-select {
    font-size: 16px; /* Prevents zoom on iOS when focusing */
    min-height: 44px;
    padding: var(--spacing-s) var(--spacing-m);
  }

  .form-control-sm,
  .form-select-sm {
    min-height: 40px;
    font-size: var(--font-size-sm);
  }

  .form-label {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-xs);
  }

  /* Ensure form groups stack properly on mobile */
  .form-group {
    margin-bottom: var(--spacing-m);
  }

  /* Reduce padding in form rows on mobile */
  .row.g-3 > [class*="col-"] {
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    padding-right: calc(var(--bs-gutter-x) * 0.5);
  }
}

/* Standardize small form controls in Settings */
.settings-card-body .form-control-sm,
.settings-card-body .form-select-sm {
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) var(--spacing-s);
  min-height: var(--input-height-sm);
  height: var(--input-height-sm);
  line-height: var(--line-height-normal);
}

/* Ensure textareas maintain proper height */
.settings-card-body textarea.form-control {
  min-height: calc(var(--input-height-md) * 2);
  height: auto;
  resize: vertical;
  padding: var(--spacing-s) var(--spacing-m);
}

.settings-card-body textarea.form-control[rows="2"] {
  min-height: calc(var(--input-height-md) * 2);
}

.settings-card-body textarea.form-control[rows="3"] {
  min-height: calc(var(--input-height-md) * 3);
}

.settings-card-body textarea.form-control[rows="4"] {
  min-height: calc(var(--input-height-md) * 4);
}

/* Standardize input widths and alignment across all Settings forms */
.settings-card-body .form-control,
.settings-card-body .form-select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Standardize select/dropdown styling across all Settings pages */
.settings-card-body .form-select {
  height: var(--input-height-md);
  min-height: var(--input-height-md);
  padding: var(--spacing-s) var(--spacing-m);
  padding-right: calc(var(--spacing-m) + 20px); /* Space for dropdown arrow */
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--transition-fast),
              background-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

/* Standardized focus state for all Settings inputs - consistent across all input types */
.settings-card-body .form-control:focus,
.settings-card-body .form-select:focus,
.settings-card-body textarea.form-control:focus,
.settings-card-body input[type="text"]:focus,
.settings-card-body input[type="number"]:focus,
.settings-card-body input[type="email"]:focus,
.settings-card-body input[type="password"]:focus,
.settings-card-body input[type="date"]:focus,
.settings-card-body input[type="datetime-local"]:focus {
  border-color: var(--color-primary);
  border-width: 1px;
  background-color: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
  outline: none;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.settings-card-body .form-select:hover:not(:disabled):not(:focus) {
  border-color: var(--color-text-muted);
  background-color: var(--color-surface);
}

.settings-card-body .form-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-bg-soft);
}

/* Ensure labels align vertically consistently */
.settings-card-body .form-label {
  display: flex;
  align-items: center;
  line-height: var(--line-height-normal);
  min-height: calc(var(--font-size-label) * var(--line-height-normal));
  margin-bottom: var(--spacing-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

/* Consistent spacing between form sections */
.settings-card-body .vstack {
  gap: var(--spacing-m);
}

.settings-card-body .vstack.gap-3 {
  gap: var(--spacing-m);
}

.settings-card-body .vstack.gap-4 {
  gap: var(--spacing-l);
}

/* Ensure form groups have consistent spacing */
.settings-card-body form > div {
  margin-bottom: 0;
}

.settings-card-body form > div:not(:last-child) {
  margin-bottom: 0;
}

/* Dark mode improvements for form inputs in Settings */


/* Dark mode focus state - identical behavior to light mode */




/* Dark mode select hover state - duplicate removed, handled above */



/* Dark mode icon consistency - icons inherit colors from parent, sizes remain consistent */


/* Hide native select arrow to prevent double-arrow issue */
.form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--spacing-m) center;
  background-size: 16px 12px;
  padding-right: calc(var(--spacing-m) + 20px);
}



/* Ensure input text is visible in dark mode */
.form-control {
  color: var(--color-text);
}

.form-control::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.form-control::-webkit-input-placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.form-control::-moz-placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--spacing-xs) var(--color-primary-soft);
  outline: none;
  background-color: var(--color-surface);
  color: var(--color-text);
}

.form-control:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
  border-color: var(--color-text-muted);
  transition: border-color var(--transition-fast);
}

.form-control:disabled,
.form-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: var(--color-bg-soft);
}

/* Input error states */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--color-error);
  background-color: var(--color-error-soft);
  padding-right: calc(var(--spacing-m) + 1.5rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6 .4.4.4-.4m0 4.8h-.8'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--spacing-m) center;
  background-size: 1rem;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 var(--spacing-xs) var(--color-error-soft);
  background-color: var(--color-error-soft);
}

.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--color-success);
  background-color: var(--color-success-soft);
  padding-right: calc(var(--spacing-m) + 1.5rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--spacing-m) center;
  background-size: 1rem;
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 var(--spacing-xs) var(--color-success-soft);
  background-color: var(--color-success-soft);
}

/* Invalid feedback styling */
.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-error);
}

.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback {
  display: block;
}

.valid-feedback {
  display: none;
  width: 100%;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-success);
}

.was-validated .form-control:valid ~ .valid-feedback,
.was-validated .form-select:valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-feedback,
.form-select.is-valid ~ .valid-feedback {
  display: block;
}

/* Dark mode improvements for input error states */










/* Dark mode input improvements */






/* Ensure consistent heights in dark mode */




.form-label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
  display: block;
  line-height: var(--line-height-normal);
}

/* Ensure consistent label alignment in Settings */
.settings-card-body .form-label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
  display: block;
  line-height: var(--line-height-normal);
  min-height: calc(var(--font-size-label) * var(--line-height-normal));
  display: flex;
  align-items: center;
}

.settings-card-body .form-label.fw-semibold {
  font-weight: var(--font-weight-semibold);
}

/* Ensure form groups have consistent spacing */
.settings-card-body .form-group,
.settings-card-body > div {
  margin-bottom: 0;
}

.settings-card-body .vstack > div {
  margin-bottom: 0;
}

/* Standardize button styles in Settings */
.settings-card-body .btn {
  min-height: var(--button-height-md);
  height: auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.settings-card-body .btn-primary {
  min-height: var(--button-height-md);
  padding: var(--spacing-s) var(--spacing-m);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.settings-card-body .btn-secondary {
  min-height: var(--button-height-md);
  padding: var(--spacing-s) var(--spacing-m);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.settings-card-body .btn-outline-primary,
.settings-card-body .btn-outline-secondary {
  min-height: var(--button-height-md);
  padding: var(--spacing-s) var(--spacing-m);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

/* Standardize small buttons in Settings */
.settings-card-body .btn-sm {
  min-height: var(--button-height-sm);
  padding: var(--spacing-xs) var(--spacing-s);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* Ensure buttons align with input fields */
.settings-card-body .btn-primary,
.settings-card-body .btn-secondary,
.settings-card-body .btn-outline-primary,
.settings-card-body .btn-outline-secondary {
  height: var(--input-height-md);
}

/* Standardize form button placement - right-align primary action buttons */
.settings-card-body form > div:last-child,
.settings-card-body .vstack > div:last-child {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spacing-xs);
}

/* Ensure button containers have consistent spacing */
.settings-card-body form > div:last-child:has(button[type="submit"]),
.settings-card-body .vstack > div:last-child:has(button[type="submit"]) {
  padding-top: var(--spacing-xs);
}

.settings-card-body .btn-sm {
  height: var(--input-height-sm);
}

/* Button alignment in forms */
.settings-card-body form .btn {
  margin-top: 0;
}

.settings-card-body .vstack .btn {
  align-self: flex-start;
}

.form-check-input {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  width: 1.125rem;
  height: 1.125rem;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.875rem;
}

.form-check-input:focus {
  box-shadow: 0 0 0 var(--spacing-xs) var(--color-primary-soft);
  outline: none;
  border-color: var(--color-primary);
}

.form-check-input:hover:not(:disabled) {
  border-color: var(--color-primary);
}

.form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--color-bg-soft);
}

.form-check-label {
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin-left: var(--spacing-xs);
  cursor: pointer;
  user-select: none;
}

/* Toggle Switch Styles (form-switch) */
.form-switch .form-check-input {
  width: 2.5rem;
  height: 1.375rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-soft);
  border: 1px solid var(--color-border-subtle);
  background-image: none;
  position: relative;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}

.form-switch .form-check-input::before {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #ffffff;
  top: 50%;
  left: 0.125rem;
  transform: translateY(-50%);
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.form-switch .form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  background-image: none;
}

.form-switch .form-check-input:checked::before {
  transform: translate(1.125rem, -50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.form-switch .form-check-input:focus {
  box-shadow: 0 0 0 var(--spacing-xs) var(--color-primary-soft);
  outline: none;
}

.form-switch .form-check-input:hover:not(:disabled):not(:checked) {
  border-color: var(--color-text-muted);
  background-color: var(--color-surface);
}

.form-switch .form-check-input:hover:not(:disabled):checked {
  border-color: var(--color-primary-hover);
  background-color: var(--color-primary-hover);
}

.form-switch .form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-switch .form-check-label {
  margin-left: var(--spacing-s);
  line-height: 1.375rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* Ensure proper vertical alignment of switch with label text */
.form-switch {
  display: flex;
  align-items: center;
  min-height: 1.375rem;
}

/* Settings-specific switch alignment */
.settings-card-body .form-switch {
  display: flex;
  align-items: center;
  min-height: 1.375rem;
}

.settings-card-body .form-switch .form-check-input {
  flex-shrink: 0;
  margin-top: 0;
}

.settings-card-body .form-switch .form-check-label {
  display: flex;
  align-items: center;
  margin-left: var(--spacing-s);
  line-height: 1.375rem;
  cursor: pointer;
}

/* Dark mode improvements for toggle switches */














/* Dark mode for Settings switches - ensure consistent alignment */






/* Form group spacing */
.form-group,
.mb-3 {
  margin-bottom: var(--spacing-m);
}

.form-group:last-child,
.mb-3:last-child {
  margin-bottom: 0;
}

/* Forms: Stack columns on mobile */
@media (max-width: 767.98px) {
  /* Force columns to stack on mobile */
  .row .col-md-6,
  .row .col-md-4,
  .row .col-md-3,
  .row .col-lg-6,
  .row .col-lg-4,
  .row .col-lg-3 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  /* Full width inputs on mobile */
  .form-control,
  .form-select {
    width: 100%;
    max-width: 100%;
  }
  
  /* Stack form groups */
  .row.g-3,
  .row.g-4 {
    --bs-gutter-y: 1rem;
  }
}

/* Responsive form improvements */
@media (max-width: 767.98px) {
  /* Improve form layout on tablets and mobile */
  .card-body .row.g-3 {
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    margin-right: calc(var(--bs-gutter-x) * -0.5);
  }

  /* Ensure proper spacing in form containers */
  form .row {
    margin-bottom: 0;
  }

  /* Better button spacing on mobile */
  form .btn,
  form .btn-group {
    width: 100%;
    margin-top: var(--spacing-s);
  }

  form .btn-group {
    display: flex;
    flex-direction: column;
  }

  form .btn-group .btn {
    border-radius: var(--radius-md);
    margin-top: var(--spacing-xs);
  }

  form .btn-group .btn:first-child {
    margin-top: 0;
  }
}

@media (max-width: 575.98px) {
  /* Full width buttons on small mobile */
  form .btn-group {
    gap: var(--spacing-xs);
  }

  /* Improve textarea on mobile */
  textarea.form-control {
    min-height: 100px;
  }
}

/* ===========================
   BUTTON SYSTEM
   =========================== */

/* Base button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-s) var(--spacing-m);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  transform: scale(1);
  min-height: var(--button-height-md);
  box-sizing: border-box;
}

/* Button press animation */
.btn:active {
  transform: scale(0.98);
}

/* Button focus - subtle shadow inset for accessibility */
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px var(--color-primary-soft);
}

.btn i {
  font-size: 1em;
  line-height: 1;
}

.btn-sm {
  padding: var(--spacing-xs) var(--spacing-s);
  font-size: var(--font-size-sm);
  gap: var(--spacing-xs);
  min-height: var(--button-height-sm);
  line-height: var(--line-height-normal);
}

.btn-lg {
  padding: var(--spacing-m) var(--spacing-l);
  font-size: var(--font-size-lg);
  min-height: var(--button-height-lg);
  gap: var(--spacing-s);
}

/* Ensure minimum touch target size on mobile for accessibility */
@media (max-width: 767.98px) {
  .btn:not(.btn-sm):not(.btn-icon) {
    min-height: var(--touch-target-min);
    padding: var(--spacing-s) var(--spacing-m);
  }
  
  .btn-sm {
    min-height: 40px; /* Slightly smaller but still accessible */
  }
  
  .sidebar-nav-item {
    min-height: var(--touch-target-min);
  }
}

/* PRIMARY BUTTON (Solid) */
.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.btn-primary:hover:not(:disabled),
.btn-primary:focus:not(:disabled) {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-1px) scale(1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-primary:active:not(:disabled) {
  transform: scale(0.98) translateY(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* SECONDARY BUTTON (Outline) */
.btn-outline-primary,
.btn-outline-secondary {
  background-color: transparent;
  border-color: var(--color-border-subtle);
  color: var(--color-text);
}

.btn-outline-primary {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outline-primary:hover:not(:disabled),
.btn-outline-primary:focus:not(:disabled),
.btn-outline-secondary:hover:not(:disabled),
.btn-outline-secondary:focus:not(:disabled) {
  background-color: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px) scale(1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.btn-outline-primary:active:not(:disabled),
.btn-outline-secondary:active:not(:disabled) {
  transform: scale(0.98) translateY(0);
  box-shadow: none;
}

/* TERTIARY BUTTON (Ghost/Text-only) */
.btn-link,
.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-text);
  padding: var(--spacing-xs) var(--spacing-s);
}

.btn-link:hover:not(:disabled),
.btn-link:focus:not(:disabled),
.btn-ghost:hover:not(:disabled),
.btn-ghost:focus:not(:disabled) {
  background-color: var(--color-bg-soft);
  color: var(--color-primary);
  text-decoration: none;
  transform: translateY(-1px) scale(1);
}

.btn-link:active:not(:disabled),
.btn-ghost:active:not(:disabled) {
  background-color: var(--color-primary-soft);
  transform: scale(0.98);
}

/* DANGER BUTTON */
.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: #ffffff;
}

.btn-danger:hover:not(:disabled),
.btn-danger:focus:not(:disabled) {
  background-color: var(--color-error-hover);
  border-color: var(--color-error-hover);
  transform: translateY(-1px) scale(1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-danger:active:not(:disabled) {
  transform: scale(0.98) translateY(0);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* Focus outline already defined in base .btn styles above */

/* Icon-only buttons */
.btn-icon {
  padding: var(--spacing-xs);
  width: auto;
  height: auto;
  min-width: 32px;
  min-height: 32px;
}

/* ===========================
   BADGES & TAGS
   =========================== */

.badge {
  animation: badgeFadeIn var(--transition-fast) ease-out,
             badgePop 0.2s ease-out 0.05s;
  animation-fill-mode: both;
}

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

@keyframes badgePop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

.badge.bg-success {
  background-color: var(--color-success-soft) !important;
  color: var(--color-success) !important;
  border-radius: var(--radius-pill);
}

.badge.bg-danger {
  background-color: var(--color-danger-soft) !important;
  color: var(--color-danger) !important;
  border-radius: var(--radius-pill);
}

/* Badge outline variants - minimal premium style */
.badge-outline {
  background-color: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.25rem 0.5rem;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.badge-outline-primary {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.badge-outline-secondary {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.badge-outline-success {
  border-color: var(--color-success);
  color: var(--color-success);
}

.badge-outline-warning {
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.badge-outline-danger {
  border-color: var(--color-error);
  color: var(--color-error);
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-m);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  background-color: var(--color-bg-soft);
  color: var(--color-text-muted);
  animation: badgeFadeIn var(--transition-fast) ease-out;
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
}

/* ===========================
   ALERTS
   =========================== */

.alert {
  border-radius: var(--radius-md);
  word-wrap: break-word;
  overflow-wrap: break-word;
  border: none;
  border-left: 4px solid;
  background-color: var(--color-bg-soft);
  padding: var(--spacing-m) var(--spacing-l);
}

/* Responsive alerts */
@media (max-width: 575.98px) {
  .alert {
    padding: var(--spacing-m) var(--spacing-s);
    font-size: var(--font-size-sm);
  }

  .alert .btn {
    margin-top: var(--spacing-xs);
    width: 100%;
  }

  .alert .d-flex {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }
}

.alert-success {
  background-color: var(--color-success-soft);
  border-left-color: var(--color-success);
  color: var(--color-success);
}

.alert-danger {
  background-color: var(--color-error-soft);
  border-left-color: var(--color-error);
  color: var(--color-error);
}

.alert-warning {
  background-color: var(--color-warning-soft);
  border-left-color: var(--color-warning);
  color: var(--color-warning);
}

.alert-info {
  background-color: var(--color-info-soft);
  border-left-color: var(--color-info);
  color: var(--color-info);
}

/* Dark mode improvements for alerts */








/* ===========================
   OFFCANVAS DRAWERS
   =========================== */

.offcanvas {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-right: 1px solid var(--color-border-subtle);
}

.offcanvas-header {
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

/* ===========================
   MISC
   =========================== */

.text-muted {
  color: var(--color-text-muted) !important;
}

hr {
  border-color: var(--color-border-subtle);
}

/* Delete drawer styles */
.drawer-panel .btn-danger {
  border-radius: var(--radius-lg);
}
.drawer-panel .drawer-body p {
  color: var(--color-text);
}

/* Page header styles */
/* Page Header - Standardized spacing for all Settings pages */
.page-header {
  margin-top: 0; /* Consistent top margin - no top spacing needed (handled by main-content-body padding) */
  margin-bottom: var(--spacing-l); /* Consistent bottom spacing: 24px */
  padding-top: 0; /* No additional top padding */
  padding-bottom: 0; /* No additional bottom padding */
}

.page-title {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-title);
  letter-spacing: -0.02em;
  margin-top: 0; /* Consistent top margin */
  margin-bottom: var(--spacing-xs); /* Consistent spacing between title and subtitle: 4px */
}

.page-subtitle {
  font-size: var(--font-size-body);
  color: var(--color-text-muted);
  margin-top: 0; /* Consistent top margin */
  margin-bottom: 0; /* No bottom margin */
}

/* Responsive adjustments for page header spacing */
@media (max-width: 991.98px) {
  .page-header {
    margin-top: 0; /* Maintain consistent top margin on mobile */
    margin-bottom: var(--spacing-m); /* Slightly reduced bottom spacing on mobile: 16px */
  }
  
  .page-title {
    margin-bottom: var(--spacing-xs); /* Maintain consistent spacing on mobile */
  }
}

/* Dark mode - ensure spacing remains consistent */






@media (max-width: 991.98px) {
  
}

/* ===========================
   UNIFIED SECTION HEADER
   =========================== */

.section-header-wrapper {
  margin-top: 0;
  margin-bottom: var(--spacing-xl);
  padding-top: 0;
  padding-bottom: 0;
}

/* Breadcrumb styles */
.section-breadcrumb {
  margin-bottom: var(--spacing-m);
}

.section-breadcrumb .breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: var(--font-size-sm);
  flex-wrap: wrap;
}

.section-breadcrumb .breadcrumb-item {
  color: var(--color-text-muted);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.section-breadcrumb .breadcrumb-item a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.section-breadcrumb .breadcrumb-item a:hover {
  color: var(--color-primary);
}

.section-breadcrumb .breadcrumb-item.active {
  color: var(--color-text);
}

.section-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: var(--color-text-muted);
  padding: 0 var(--spacing-xs);
}

/* Mobile back link */
.section-breadcrumb-mobile {
  margin-bottom: var(--spacing-s);
}

.section-back-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
  gap: var(--spacing-xs);
}

.section-back-link:hover {
  color: var(--color-primary);
}

.section-back-link i {
  font-size: var(--font-size-base);
}

/* Responsive breadcrumbs */
@media (max-width: 575.98px) {
  .section-breadcrumb {
    margin-bottom: var(--spacing-s);
  }

  .section-breadcrumb .breadcrumb {
    font-size: var(--font-size-xs);
  }

  .section-breadcrumb .breadcrumb-item {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Section header content */
.section-header-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

@media (min-width: 768px) {
  .section-header-content {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.section-header-main {
  flex: 1;
  min-width: 0;
}

.section-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-xs) 0;
  line-height: var(--line-height-tight);
  letter-spacing: -0.02em;
}

.section-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing, 0);
  font-family: inherit;
  margin: 0;
  line-height: var(--line-height-normal);
}

.section-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-s);
  align-items: flex-start;
}

@media (min-width: 768px) {
  .section-header-actions {
    flex-shrink: 0;
    justify-content: flex-end;
  }
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
  .section-header-wrapper {
    margin-bottom: var(--spacing-l);
  }
  
  .section-title {
    font-size: var(--font-size-xl);
  }
  
  .section-subtitle {
    font-size: var(--font-size-sm);
  }
  
  .section-header-actions {
    width: 100%;
    justify-content: flex-start;
  }
  
  .section-header-actions .btn {
    flex: 0 1 auto;
    white-space: nowrap;
  }
}

/* Dark mode support */


















/* Drawer component variables */
:root[data-theme="light"] {
  --drawer-bg: var(--color-surface);
  --drawer-width: 640px;
  --drawer-shadow: var(--shadow-drawer);
  --transition-fast: var(--transition-fast);
}

/* Drawer styles */
.drawer-backdrop {
  position: fixed !important;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal) ease;
  z-index: 99999 !important; /* Extremely high z-index to ensure it's above all table containers and cards */
  backdrop-filter: blur(2px);
  transform: translateZ(0); /* Force new stacking context */
}

/* Better backdrop on mobile */
@media (max-width: 767.98px) {
  .drawer-backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
  }

  
}



.drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.drawer-panel {
  position: fixed !important;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile browsers */
  max-height: 100vh;
  max-height: 100dvh;
  width: var(--drawer-width);
  max-width: calc(100vw - 48px); /* Leave small gap for backdrop click on desktop */
  background: var(--drawer-bg);
  box-shadow: var(--shadow-drawer);
  transform: translateX(100%) translateZ(0); /* Force new stacking context */
  opacity: 0;
  transition: transform var(--transition-normal) cubic-bezier(0.4, 0, 0.2, 1),
              opacity var(--transition-fast) ease,
              box-shadow var(--transition-normal);
  z-index: 100000 !important; /* Extremely high z-index to ensure it's above all table containers, cards, and backdrop */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (max-width: 991.98px) {
  .drawer-panel {
    max-width: 90vw;
    width: 90vw;
  }
}

@media (max-width: 575.98px) {
  .drawer-panel {
    max-width: 90vw;
    width: 90vw;
    margin: 0 auto;
  }

  .drawer-header {
    padding: var(--spacing-m);
  }

  .drawer-body {
    padding: var(--spacing-m);
  }

  .drawer-footer {
    padding: var(--spacing-m);
  }

  /* Better button spacing in drawer footer on mobile */
  .drawer-footer .btn-group {
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-xs);
  }

  .drawer-footer .btn-group .btn {
    width: 100%;
    margin: 0;
  }
}

/* Tablet adjustments for drawers */
@media (min-width: 576px) and (max-width: 767.98px) {
  .drawer-panel {
    max-width: 85vw;
    width: 85vw;
  }

  .drawer-header {
    padding: var(--spacing-m) var(--spacing-l);
  }

  .drawer-body {
    padding: var(--spacing-m) var(--spacing-l);
  }

  .drawer-footer {
    padding: var(--spacing-m) var(--spacing-l);
  }
}

.drawer-panel.is-open {
  transform: translateX(0) translateZ(0); /* Maintain stacking context when open */
  opacity: 1;
  box-shadow: var(--shadow-drawer);
}

/* Ensure drawers are always above tables and their containers */
.drawer-backdrop,
.drawer-panel {
  isolation: isolate; /* Create new stacking context */
  will-change: transform, opacity; /* Optimize for animations */
}

/* Override any potential z-index from table containers - ensure drawers are always on top */
.settings-card .drawer-backdrop,
.table-responsive .drawer-backdrop,
.table-container .drawer-backdrop,
.card .drawer-backdrop {
  z-index: 99999 !important;
  position: fixed !important;
}

.settings-card .drawer-panel,
.table-responsive .drawer-panel,
.table-container .drawer-panel,
.card .drawer-panel {
  z-index: 100000 !important;
  position: fixed !important;
}

.drawer-header {
  padding: var(--spacing-l);
  border-bottom: 1px solid var(--color-border-subtle);
  background-color: var(--drawer-bg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-header h2,
.drawer-header h3,
.drawer-header h4,
.drawer-header h5,
.drawer-header h6 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.drawer-body {
  padding: var(--spacing-l);
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  /* Ensure content is scrollable and doesn't overflow */
  overscroll-behavior: contain;
}

/* Prevent body scroll when drawer is open */
body.drawer-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* Drawer form field spacing */
.drawer-body .form-group,
.drawer-body .mb-3 {
  margin-bottom: var(--spacing-m);
}

.drawer-body .form-label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-xs);
  color: var(--color-text);
  display: flex;
  align-items: center;
  line-height: var(--line-height-normal);
}

/* Standardize drawer form spacing to match Settings */
.drawer-body .vstack {
  gap: var(--spacing-m);
}

.drawer-body .vstack.gap-3 {
  gap: var(--spacing-m);
}

.drawer-body .vstack.gap-4 {
  gap: var(--spacing-l);
}

/* Ensure drawer form inputs have consistent width */
.drawer-body .form-control,
.drawer-body .form-select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Consistent spacing for drawer form sections */
.drawer-body form > div {
  margin-bottom: 0;
}

.drawer-body .row.g-3 {
  margin-bottom: 0;
}

.drawer-body .row.g-3 > div {
  margin-bottom: 0;
}

/* Drawer form text spacing */
.drawer-body .form-text {
  margin-top: var(--spacing-xs);
  margin-bottom: 0;
  color: var(--color-text-muted);
}

/* Drawer form check spacing */
.drawer-body .form-check {
  margin-top: 0;
  margin-bottom: 0;
}

.drawer-footer {
  padding: var(--spacing-l);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--drawer-bg);
  flex-shrink: 0;
  margin-top: auto;
}

/* Dark mode improvements for drawer forms */














/* ===========================
   STANDARDIZED MODAL STYLES
   =========================== */

/* Modal dialog sizing and positioning */
.modal-dialog {
  max-width: 95%;
  margin: var(--spacing-l) auto;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
  }
}

@media (min-width: 768px) {
  .modal-dialog {
    max-width: 600px;
  }
}

.modal-dialog.modal-lg {
  max-width: 95%;
}

@media (min-width: 768px) {
  .modal-dialog.modal-lg {
    max-width: 800px;
  }
}

.modal-dialog.modal-xl {
  max-width: 95%;
}

@media (min-width: 992px) {
  .modal-dialog.modal-xl {
    max-width: 1000px;
  }
}

.modal-dialog.modal-sm {
  max-width: 400px;
}

/* Modal content structure */
.modal-content {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2 * var(--spacing-l));
  background-color: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

/* Modal header */
.modal-header {
  padding: var(--spacing-l);
  border-bottom: 1px solid var(--color-border-subtle);
  background-color: var(--color-bg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header .modal-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

/* Modal body - scrollable content */
.modal-body {
  padding: var(--spacing-l);
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

/* Modal footer */
.modal-footer {
  padding: var(--spacing-l);
  border-top: 1px solid var(--color-border-subtle);
  background-color: var(--color-bg);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-s);
}

/* Responsive modal adjustments */
@media (max-width: 767.98px) {
  .modal-dialog {
    margin: var(--spacing-s);
    max-width: calc(100vw - 2 * var(--spacing-s));
  }
  
  .modal-content {
    max-height: calc(100vh - 2 * var(--spacing-s));
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--spacing-m);
  }
  
  .modal-footer {
    flex-direction: column;
    align-items: stretch;
  }
  
  .modal-footer .btn {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 0;
    max-width: 100vw;
    max-height: 100vh;
  }
  
  .modal-content {
    max-height: 100vh;
    border-radius: 0;
  }
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
  padding-right: 0 !important;
}

/* Dark mode modal styles */










/* ===========================
   FILTER BARS
   =========================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-s);
  padding: var(--spacing-m);
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--card-radius);
  margin-bottom: var(--spacing-m);
}

.filter-bar .form-label {
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-muted);
}

.filter-bar .form-select,
.filter-bar .form-control {
  font-size: var(--font-size-body);
  min-height: 38px; /* Consistent height */
}

.filter-bar .btn {
  min-height: 38px; /* Match input height */
  white-space: nowrap;
}

.filter-bar > * {
  flex: 0 1 auto;
}

.filter-bar .filter-field {
  min-width: 150px;
  flex: 0 1 auto;
}

.filter-bar .filter-apply {
  margin-left: auto; /* Push to right */
}

.filter-label-hidden {
  visibility: hidden;
  display: block;
  height: var(--font-size-label);
  margin-bottom: var(--spacing-xs);
}

/* ===========================
   ACTION BAR COMPONENT
   =========================== */
.action-bar {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--spacing-m);
  margin-bottom: var(--spacing-m);
}



.action-bar-form {
  margin: 0;
}

.action-bar-content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-m);
  align-items: flex-end;
}

/* Filters Section */
.action-bar-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-m);
  align-items: flex-end;
  flex: 1 1 auto;
  min-width: 200px;
}

.action-bar-filter-field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 150px;
  flex: 0 1 auto;
}

.action-bar-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  margin-bottom: 0;
  line-height: 1.4;
  letter-spacing: var(--letter-spacing, 0);
  font-family: inherit;
}

.action-bar-filter-field .form-select,
.action-bar-filter-field .form-control {
  font-size: var(--font-size-sm);
  min-height: 36px;
}

.action-bar-filter-field .form-check {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 36px;
  padding-top: var(--spacing-xs);
}

/* Search Section */
.action-bar-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 200px;
  flex: 1 1 auto;
  max-width: 400px;
}

.action-bar-search .action-bar-label {
  position: absolute;
  left: var(--spacing-m);
  z-index: 1;
  color: var(--color-text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.action-bar-search .action-bar-label i {
  font-size: var(--font-size-base);
}

.action-bar-search input {
  padding-left: calc(var(--spacing-m) + var(--spacing-m) + 0.5rem);
  padding-right: calc(var(--spacing-m) + var(--spacing-m) + 0.5rem);
  min-height: 36px;
  font-size: var(--font-size-sm);
}

/* Responsive action bar */
@media (max-width: 767.98px) {
  .action-bar {
    padding: var(--spacing-m);
  }

  .action-bar-content {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-s);
  }

  .action-bar-filters {
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: var(--spacing-s);
  }

  .action-bar-filter-field {
    width: 100%;
    min-width: 0;
  }

  .action-bar-search {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .action-bar-actions {
    flex-direction: column;
    width: 100%;
    gap: var(--spacing-xs);
  }

  .action-bar-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  .action-bar {
    padding: var(--spacing-s);
    margin-bottom: var(--spacing-m);
  }

  .action-bar-content {
    gap: var(--spacing-xs);
  }
}

.action-bar-search-clear {
  position: absolute;
  right: var(--spacing-m);
  z-index: 1;
  color: var(--color-text-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.action-bar-search-clear:hover {
  color: var(--color-text);
  background-color: var(--color-bg-soft);
}

.action-bar-search-clear i {
  font-size: var(--font-size-base);
}

/* Bulk Actions Section */
.action-bar-bulk {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-s);
  align-items: center;
  flex: 0 0 auto;
}

.action-bar-bulk .btn {
  min-height: 36px;
  white-space: nowrap;
}

/* Primary Action Section */
.action-bar-primary {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.action-bar-primary .btn {
  min-height: 36px;
  white-space: nowrap;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
  .action-bar-content {
    flex-direction: column;
    align-items: stretch;
  }

  .action-bar-filters {
    flex-direction: column;
    width: 100%;
  }

  .action-bar-filter-field {
    width: 100%;
    min-width: 100%;
  }

  .action-bar-search {
    width: 100%;
    max-width: 100%;
  }

  .action-bar-bulk {
    width: 100%;
    justify-content: flex-start;
  }

  .action-bar-bulk .btn {
    flex: 1 1 auto;
    min-width: 0;
  }

  .action-bar-primary {
    width: 100%;
  }

  .action-bar-primary .btn {
    width: 100%;
  }
}

/* Dark mode adjustments */


/* ===========================
   EMPTY STATES
   =========================== */
/* ===========================
   EMPTY STATE PATTERN
   =========================== */

.empty-state {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-l);
  max-width: 480px;
  margin: var(--spacing-xl) auto;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
}



.empty-state-icon {
  font-size: 3.5rem; /* 56px */
  width: 3.5rem;
  height: 3.5rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-l);
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--transition-fast);
}



.empty-state-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-s);
  line-height: var(--line-height-tight);
}

.empty-state-text {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-l);
  line-height: var(--line-height-normal);
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.empty-state-actions {
  margin-top: var(--spacing-l);
  display: flex;
  justify-content: center;
  gap: var(--spacing-s);
  flex-wrap: wrap;
}

.empty-state-actions .btn {
  min-width: 140px;
}

/* Responsive adjustments */
@media (max-width: 575.98px) {
  .empty-state {
    padding: var(--spacing-l) var(--spacing-m);
    margin: var(--spacing-l) auto;
  }
  
  .empty-state-icon {
    font-size: 2.5rem; /* 40px */
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--spacing-m);
  }
  
  .empty-state-title {
    font-size: var(--font-size-base);
  }
  
  .empty-state-text {
    font-size: var(--font-size-sm);
  }
  
  .empty-state-actions .btn {
    min-width: 100%;
  }
}

/* ===========================
   SECTION HEADERS
   =========================== */
.section-header {
  font-size: var(--font-size-section);
  font-weight: var(--font-weight-section);
  color: var(--color-text);
  margin-bottom: var(--spacing-m);
  margin-top: var(--spacing-l);
}

.section-header:first-child {
  margin-top: 0;
}

.section-header-small {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-m);
  margin-top: 0;
  line-height: 1.4;
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border-light);
}

/* ===========================
   FLOATING ELEMENTS / ACTION BUTTONS
   =========================== */
.action-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-s);
  margin-top: var(--spacing-m);
  margin-bottom: var(--spacing-m);
}

.action-button-group:first-child {
  margin-top: 0;
}

.action-button-group:last-child {
  margin-bottom: 0;
}

/* Table header spacing */
.table-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-s);
  align-items: center;
}

/* Card styles are defined in the CARDS section above */

/* Consistent spacing between cards */
.card + .card {
  margin-top: var(--spacing-m);
}

/* ===========================
   TOAST NOTIFICATIONS
   =========================== */
.toast-container {
  position: fixed;
  top: var(--spacing-l);
  right: var(--spacing-l);
  z-index: 1100; /* Above modals (1050) */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  max-width: 400px;
  width: 100%;
  pointer-events: none;
}

.toast {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-floating);
  padding: 0;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity var(--transition-normal) ease, transform var(--transition-normal) ease;
  pointer-events: auto;
  min-width: 300px;
  max-width: 100%;
}

.toast-showing {
  opacity: 1;
  transform: translateX(0);
}

.toast-hiding {
  opacity: 0;
  transform: translateX(100%);
}

.toast-content {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-m);
  padding: var(--spacing-m);
}

.toast-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: var(--font-size-lg);
}

.toast-body {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing, 0);
  font-family: inherit;
}

.toast-message {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: var(--spacing-xs);
  margin: calc(var(--spacing-xs) * -1);
  margin-left: auto;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.toast-close:hover {
  color: var(--color-text);
  background-color: var(--color-bg-soft);
}

.toast-close:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.toast-close i {
  font-size: var(--font-size-base);
}

/* Toast variants */
.toast-success {
  border-left: 4px solid var(--color-success);
}

.toast-success .toast-icon {
  color: var(--color-success);
}

.toast-error {
  border-left: 4px solid var(--color-error);
}

.toast-error .toast-icon {
  color: var(--color-error);
}

.toast-warning {
  border-left: 4px solid var(--color-warning);
}

.toast-warning .toast-icon {
  color: var(--color-warning);
}

.toast-info {
  border-left: 4px solid var(--color-info);
}

.toast-info .toast-icon {
  color: var(--color-info);
}

/* Dark mode adjustments */




/* Responsive adjustments */
@media (max-width: 575.98px) {
  .toast-container {
    top: var(--spacing-m);
    right: var(--spacing-m);
    left: var(--spacing-m);
    max-width: none;
  }

  .toast {
    min-width: 0;
    width: 100%;
  }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: opacity var(--transition-fast) ease;
    transform: none;
  }

  .toast-showing {
    transform: none;
  }

  .toast-hiding {
    transform: none;
  }
}

/* ===========================
   CONFIRMATION DIALOG
   =========================== */
.confirm-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100001; /* Above drawer-panel (100000) so confirm shows on top when opened from drawer */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal) ease;
}

.confirm-dialog-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.confirm-dialog-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}



.confirm-dialog-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  padding: var(--spacing-l);
  transform: scale(0.95) translateY(-10px);
  transition: transform var(--transition-normal) ease;
}

.confirm-dialog-overlay.is-open .confirm-dialog-container {
  transform: scale(1) translateY(0);
}

.confirm-dialog {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-floating);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}



.confirm-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-l);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}



.confirm-dialog-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing, 0);
  font-family: inherit;
}

.confirm-dialog-close {
  background: none;
  border: none;
  padding: var(--spacing-xs);
  margin: calc(var(--spacing-xs) * -1);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.confirm-dialog-close:hover {
  color: var(--color-text);
  background-color: var(--color-bg-soft);
}

.confirm-dialog-close:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.confirm-dialog-close i {
  font-size: var(--font-size-lg);
}

.confirm-dialog-body {
  padding: var(--spacing-l);
  flex: 1;
  overflow-y: auto;
  min-height: 60px;
}

.confirm-dialog-message {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  letter-spacing: var(--letter-spacing, 0);
  font-family: inherit;
}

.confirm-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-s);
  padding: var(--spacing-l);
  border-top: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}



.confirm-dialog-footer .btn {
  min-width: 100px;
}

/* Prevent body scroll when dialog is open */
body.confirm-dialog-open {
  overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 575.98px) {
  .confirm-dialog-container {
    max-width: 100%;
    padding: var(--spacing-m);
  }

  .confirm-dialog {
    max-height: 95vh;
  }

  .confirm-dialog-header,
  .confirm-dialog-body,
  .confirm-dialog-footer {
    padding: var(--spacing-m);
  }

  .confirm-dialog-footer {
    flex-direction: column-reverse;
  }

  .confirm-dialog-footer .btn {
    width: 100%;
  }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .confirm-dialog-overlay {
    transition: opacity var(--transition-fast) ease;
  }

  .confirm-dialog-container {
    transition: none;
    transform: none;
  }

  .confirm-dialog-overlay.is-open .confirm-dialog-container {
    transform: none;
  }
}

/* ===========================
   ALERT DIALOG
   =========================== */
.alert-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100001; /* Above drawer-panel (100000) so alert shows on top when opened from drawer */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal) ease;
}

.alert-dialog-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.alert-dialog-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}



.alert-dialog-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  padding: var(--spacing-l);
  transform: scale(0.95) translateY(-10px);
  transition: transform var(--transition-normal) ease;
}

.alert-dialog-overlay.is-open .alert-dialog-container {
  transform: scale(1) translateY(0);
}

.alert-dialog {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-floating);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}



.alert-dialog-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  padding: var(--spacing-l);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}



.alert-dialog-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: var(--font-size-xl);
}

.alert-dialog-title {
  flex: 1;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing, 0);
  font-family: inherit;
}

.alert-dialog-close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: var(--spacing-xs);
  margin: calc(var(--spacing-xs) * -1);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.alert-dialog-close:hover {
  color: var(--color-text);
  background-color: var(--color-bg-soft);
}

.alert-dialog-close:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.alert-dialog-close i {
  font-size: var(--font-size-lg);
}

.alert-dialog-body {
  padding: var(--spacing-l);
  flex: 1;
  overflow-y: auto;
  min-height: 60px;
}

.alert-dialog-message {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.alert-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--spacing-l);
  border-top: 1px solid var(--color-border-subtle);
  flex-shrink: 0;
}



.alert-dialog-footer .btn {
  min-width: 100px;
}

/* Alert dialog variants */
.alert-dialog-error {
  border-left: 4px solid var(--color-error);
}

.alert-dialog-error .alert-dialog-icon {
  color: var(--color-error);
}

.alert-dialog-warning {
  border-left: 4px solid var(--color-warning);
}

.alert-dialog-warning .alert-dialog-icon {
  color: var(--color-warning);
}

.alert-dialog-info {
  border-left: 4px solid var(--color-info);
}

.alert-dialog-info .alert-dialog-icon {
  color: var(--color-info);
}

.alert-dialog-success {
  border-left: 4px solid var(--color-success);
}

.alert-dialog-success .alert-dialog-icon {
  color: var(--color-success);
}

/* Prevent body scroll when dialog is open */
body.alert-dialog-open {
  overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 575.98px) {
  .alert-dialog-container {
    max-width: 100%;
    padding: var(--spacing-m);
  }

  .alert-dialog {
    max-height: 95vh;
  }

  .alert-dialog-header,
  .alert-dialog-body,
  .alert-dialog-footer {
    padding: var(--spacing-m);
  }

  .alert-dialog-footer .btn {
    width: 100%;
  }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .alert-dialog-overlay {
    transition: opacity var(--transition-fast) ease;
  }

  .alert-dialog-container {
    transition: none;
    transform: none;
  }

  .alert-dialog-overlay.is-open .alert-dialog-container {
    transform: none;
  }
}

/* ===========================
   SETTINGS NAVIGATION & TABS
   =========================== */

/* Settings Layout Container */
.settings-layout {
  display: flex;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-l);
  align-items: flex-start;
}

.settings-sidebar {
  flex: 0 0 240px;
  min-width: 240px;
  position: sticky;
  top: var(--spacing-l);
  align-self: flex-start;
  max-height: calc(100vh - var(--spacing-xl));
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-subtle) transparent;
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--spacing-s);
}

/* Dark mode adjustments for settings sidebar */


.settings-sidebar::-webkit-scrollbar {
  width: 6px;
}

.settings-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.settings-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--color-border-subtle);
  border-radius: var(--radius-pill);
}

.settings-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-border);
}

.settings-content {
  flex: 1;
  min-width: 0;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 992px) {
  .settings-content {
    max-width: 1200px;
  }
}

/* Settings Category Navigation */
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) 0;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  padding: var(--spacing-s) var(--spacing-m);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  transition: background-color var(--transition-fast), 
              color var(--transition-fast),
              box-shadow var(--transition-fast);
  position: relative;
  border: 1px solid transparent;
}

/* Settings navigation icons - standardized to match main sidebar (duplicate rule removed, handled above) */

.settings-nav-item span {
  flex: 1;
}

.settings-nav-item:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-soft);
  border-color: var(--color-border-subtle);
  box-shadow: var(--shadow-subtle);
}

.settings-nav-item:hover i,
.settings-nav-item:hover .bi {
  color: var(--color-primary);
  opacity: 1;
}

.settings-nav-item.active {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  font-weight: var(--font-weight-semibold);
  border-color: var(--color-primary-soft);
  box-shadow: var(--shadow-subtle);
}

.settings-nav-item.active i,
.settings-nav-item.active .bi {
  color: var(--color-primary);
  opacity: 1;
}

.settings-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Ensure active state takes precedence over hover */
.settings-nav-item.active:hover {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-color: var(--color-primary-soft);
}

.settings-nav-item.active:hover i,
.settings-nav-item.active:hover .bi {
  color: var(--color-primary);
  opacity: 1;
}

/* Dark mode improvements for settings navigation */
















/* Settings Tabs */
.settings-tabs {
  display: flex;
  gap: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: var(--spacing-l);
  padding-bottom: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.settings-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-s);
  padding: var(--spacing-s) var(--spacing-m);
  color: var(--color-text-muted);
  text-decoration: none;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition-fast),
              border-color var(--transition-fast),
              background-color var(--transition-fast);
  margin-bottom: -1px;
  position: relative;
}

.settings-tab:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-soft);
}

.settings-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.settings-tab i {
  font-size: var(--font-size-sm);
  opacity: 0.8;
}

.settings-tab.active i {
  opacity: 1;
}

/* Settings Breadcrumbs */
.settings-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted); /* Unified muted text color token */
  margin-bottom: var(--spacing-m);
}

.settings-breadcrumb a {
  color: var(--color-text-muted); /* Unified muted text color token */
  text-decoration: none;
  transition: color var(--transition-fast);
}

.settings-breadcrumb a:hover {
  color: var(--color-primary);
}

/* Dark mode for settings breadcrumb - ensure consistent muted text tone */






.settings-breadcrumb-separator {
  color: var(--color-text-disabled);
}



/* Settings Page Header */
.settings-page-header {
  margin-bottom: var(--spacing-l);
}

.settings-page-title {
  font-size: var(--font-size-title); /* Match Budget/Dashboard: 1.5rem (24px) */
  font-weight: var(--font-weight-title); /* Match Budget/Dashboard: 600 (semibold) */
  letter-spacing: -0.02em; /* Match Budget/Dashboard letter-spacing */
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.settings-page-description {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin: 0;
}

/* Settings Cards - Standardized */
.settings-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 0;
  margin-bottom: var(--spacing-l);
  box-shadow: var(--shadow-subtle);
  contain: layout;
  will-change: auto;
  overflow: hidden;
}

/* Dark mode adjustments for settings cards */


.settings-card-body {
  padding: var(--spacing-l);
  contain: layout style;
}

.settings-card-header {
  padding: var(--spacing-l) var(--spacing-l) var(--spacing-m);
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-border-light);
}

/* Dark mode adjustments for settings card header */


.settings-card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
  line-height: 1.4;
  display: flex;
  align-items: center;
  letter-spacing: var(--letter-spacing, 0);
  font-family: inherit;
}

.settings-card-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing, 0);
  font-family: inherit;
}

/* Dark mode for settings card title and description */




.settings-card-body {
  /* Content spacing handled by form spacing */
}

/* Settings Section Dividers - Consistent visual separation */
.settings-section-divider {
  margin: var(--spacing-l) 0;
  border: 0;
  border-top: 1px solid var(--color-border-light);
  opacity: 0.5;
}



/* Ensure consistent spacing between settings cards */
.settings-content > .settings-card + .settings-card {
  margin-top: 0;
}

/* Ensure consistent spacing in settings card body */
.settings-card-body > *:last-child {
  margin-bottom: 0;
}

/* Standardize form field spacing within settings */
.settings-card-body .vstack {
  gap: var(--spacing-m);
}

/* Ensure consistent input alignment in settings */
.settings-card-body .form-control,
.settings-card-body .form-select {
  width: 100%;
}

/* Ensure form labels have consistent spacing */
.settings-card-body .form-label {
  display: block;
  margin-bottom: var(--spacing-xs);
}

/* Ensure form text has consistent spacing */
.settings-card-body .form-text {
  margin-top: var(--spacing-xs);
  margin-bottom: 0;
}

/* Subsection headers in settings (h3.fw-semibold.fs-6) */
.settings-card-body h3.fw-semibold.fs-6,
.settings-card-body h3.fw-semibold,
.card-body h3.fw-semibold.fs-6,
.card-body h3.fw-semibold {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-top: var(--spacing-l);
  margin-bottom: var(--spacing-m);
  line-height: 1.4;
}

.settings-card-body h3.fw-semibold.fs-6:first-child,
.settings-card-body h3.fw-semibold:first-child,
.card-body h3.fw-semibold.fs-6:first-child,
.card-body h3.fw-semibold:first-child {
  margin-top: 0;
}

/* Subsection headers - Standardized across all Settings pages */
.settings-card-body h6.text-uppercase.text-muted,
.card-body h6.text-uppercase.text-muted {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-top: 0;
  margin-bottom: var(--spacing-m);
  line-height: 1.4;
}

/* Support for legacy h2/h3 with h6 class (for backward compatibility) */
.settings-card-body h2.h6.text-uppercase.text-muted,
.card-body h2.h6.text-uppercase.text-muted,
.settings-card-body h3.h6.text-uppercase.text-muted,
.card-body h3.h6.text-uppercase.text-muted {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-top: 0;
  margin-bottom: var(--spacing-m);
  line-height: 1.4;
}

/* Subtle dividers in settings */
.settings-card-body hr,
.card-body hr {
  border: 0;
  border-top: 1px solid var(--color-border-light);
  margin: var(--spacing-l) 0;
  opacity: 0.5;
}

.settings-card-body hr:first-child,
.card-body hr:first-child {
  margin-top: 0;
}

.settings-card-body hr:last-child,
.card-body hr:last-child {
  margin-bottom: 0;
}

/* Settings card links - ensure proper colors in dark mode */
.settings-card-body a:not(.btn) {
  color: var(--color-text);
  transition: color var(--transition-fast);
}

.settings-card-body a:not(.btn):hover {
  color: var(--color-primary);
}

.settings-card-body a:not(.btn) .text-muted {
  color: var(--color-text-muted);
}

.settings-card-body a:not(.btn):hover .text-muted {
  color: var(--color-primary);
}

/* Dark mode for settings links */








/* Dark mode fixes for settings */




/* Form text contrast in dark mode */
.form-text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}



/* Settings form text in dark mode - ensure good contrast */


/* Table light header in dark mode */




/* Card shadow-sm in dark mode */




/* Section headers in dark mode */






/* Dark mode for subsection headers */






/* Badge text-bg-light dark mode fix - ensure good contrast */




/* Bootstrap text-bg-* badge classes dark mode overrides */










/* Card dark mode for Settings pages */






/* Responsive Settings Layout */
@media (max-width: 991.98px) {
  .settings-layout {
    flex-direction: column;
    gap: var(--spacing-l);
  }

  .settings-sidebar {
    flex: 1;
    width: 100%;
    position: relative;
    top: auto;
    max-height: none;
    overflow-y: visible;
    overflow-x: auto;
  }

  .settings-nav {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: var(--spacing-xs);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .settings-nav-item {
    white-space: nowrap;
  }

  .settings-content {
    width: 100%;
    overflow-x: hidden;
    max-width: 100%;
    margin: 0;
  }

  /* Settings form responsive adjustments */
  .settings-card {
    margin-bottom: var(--spacing-m);
  }

  .settings-card-header {
    padding: var(--spacing-m) var(--spacing-m) var(--spacing-s);
  }

  .settings-card-body {
    padding: var(--spacing-m);
  }

  /* Ensure labels don't wrap poorly on mobile */
  .settings-card-body .form-label {
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    line-height: 1.5;
  }

  /* Prevent inputs from touching edges */
  .settings-card-body .form-control,
  .settings-card-body .form-select,
  .settings-card-body textarea.form-control {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Ensure form groups have proper spacing on mobile */
  .settings-card-body .vstack > div,
  .settings-card-body form > div {
    margin-bottom: var(--spacing-s);
  }

  /* Button alignment adjustments for mobile */
  .settings-card-body form > div:last-child,
  .settings-card-body .vstack > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-s);
  }

  .settings-card-body form > div:last-child .btn,
  .settings-card-body .vstack > div:last-child .btn {
    width: 100%;
    justify-content: center;
  }

  /* Ensure button groups stack properly */
  .settings-card-body .d-flex.justify-content-end {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-xs);
  }

  .settings-card-body .d-flex.justify-content-end .btn {
    width: 100%;
  }

  /* Form text spacing on mobile */
  .settings-card-body .form-text {
    margin-top: var(--spacing-xs);
    margin-bottom: 0;
    font-size: var(--font-size-sm);
  }

  /* Toggle switches - ensure proper spacing on mobile */
  .settings-card-body .form-switch {
    padding: var(--spacing-xs) 0;
  }

  /* Section dividers - reduce spacing on mobile */
  .settings-section-divider {
    margin: var(--spacing-m) 0;
  }
}

/* Additional mobile adjustments (smaller screens) */
@media (max-width: 575.98px) {
  .settings-card-header {
    padding: var(--spacing-s) var(--spacing-s) var(--spacing-xs);
  }

  .settings-card-body {
    padding: var(--spacing-s);
  }

  .settings-card-title {
    font-size: var(--font-size-lg);
  }

  .settings-card-description {
    font-size: var(--font-size-sm);
  }

  /* Ensure inputs have proper touch targets */
  .settings-card-body .form-control,
  .settings-card-body .form-select {
    min-height: 44px; /* Minimum touch target size */
    font-size: 16px; /* Prevent zoom on iOS */
  }

  /* Button touch targets */
  .settings-card-body .btn {
    min-height: 44px; /* Minimum touch target size */
    padding: var(--spacing-s) var(--spacing-m);
  }
}

/* ===========================
   DASHBOARD COMPONENTS
   =========================== */

/* Dashboard Header */
.dashboard-header {
  margin-bottom: var(--spacing-xl);
}

.dashboard-header-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.dashboard-header-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  flex-wrap: wrap;
}

.dashboard-header-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Welcome Section */
.dashboard-welcome {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  box-shadow: var(--shadow-card);
}

.dashboard-welcome-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.dashboard-welcome-description {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-l);
}

.dashboard-welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-m);
}

/* KPI Cards - Standardized */
.kpi-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--spacing-l);
  box-shadow: var(--shadow-subtle);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
  transform: translateY(0);
}

/* Subtle hover lift effect for KPI cards */
@media (prefers-reduced-motion: no-preference) {
  .kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  
  
}

/* Respect reduced motion preference for KPI cards */
@media (prefers-reduced-motion: reduce) {
  .kpi-card {
    transition: border-color var(--transition-fast);
  }
  
  .kpi-card:hover {
    transform: none;
  }
}



/* KPI card hover animation removed - cards remain static on hover */

.kpi-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  margin-bottom: var(--spacing-m);
}

.kpi-card-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

.kpi-card-icon {
  font-size: var(--font-size-lg);
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  opacity: 0.8;
}

.kpi-card-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-xs);
}

.kpi-card-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.kpi-card-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--spacing-xs) var(--spacing-s);
  border-radius: var(--radius-sm);
  margin-top: var(--spacing-s);
}

.kpi-card-delta.positive {
  color: var(--color-success);
  background: var(--color-success-soft);
}

.kpi-card-delta.negative {
  color: var(--color-error);
  background: var(--color-error-soft);
}

.kpi-card-delta.neutral {
  color: var(--color-text-muted);
  background: var(--color-bg-soft);
}

.kpi-card-delta.warning {
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

/* Dashboard Privacy Blur */
.blurred-amount {
  filter: blur(8px);
  user-select: none;
  -webkit-user-select: none;
  transition: filter var(--transition-fast);
}

.blurred-amount:hover {
  filter: blur(4px);
}

/* Ensure blur works on all child text elements */
.blurred-amount * {
  filter: blur(8px);
  user-select: none;
  -webkit-user-select: none;
}

.blurred-amount:hover * {
  filter: blur(4px);
}

/* Quick Actions */
.dashboard-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-s);
  padding: var(--spacing-l);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-xl);
}

.dashboard-quick-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-s);
  white-space: nowrap;
}

/* Welcome section responsive */
.dashboard-welcome {
  padding: var(--spacing-l);
  margin-bottom: var(--spacing-xl);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
}

.dashboard-welcome-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-m);
}

.dashboard-welcome-description {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-l);
}

.dashboard-welcome-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-s);
}

@media (max-width: 575.98px) {
  .dashboard-welcome {
    padding: var(--spacing-m);
    margin-bottom: var(--spacing-l);
  }

  .dashboard-welcome-title {
    font-size: var(--font-size-xl);
  }

  .dashboard-welcome-actions {
    flex-direction: column;
  }

  .dashboard-welcome-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Dashboard Section Headers */
.dashboard-section {
  margin-bottom: var(--spacing-xl);
}

.dashboard-section:last-child {
  margin-bottom: 0;
}

.dashboard-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-l);
  padding-bottom: var(--spacing-m);
  border-bottom: 1px solid var(--color-border-subtle);
  flex-wrap: wrap;
  gap: var(--spacing-s);
}

.dashboard-section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  line-height: var(--line-height-tight);
  flex: 1;
  min-width: 0; /* Allow title to shrink if needed */
}

.dashboard-section-title i {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  opacity: 0.8;
  flex-shrink: 0;
}

.dashboard-section-title span {
  flex: 1;
}

.dashboard-section-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

/* Card headers within dashboard sections - unified styling */
.dashboard-section .card .card-body h3,
.dashboard-section .card .card-body h4,
.dashboard-section .card .card-body h5,
.dashboard-section .card .card-body h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-m) 0;
  line-height: var(--line-height-tight);
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
}

/* Chart containers - prevent overflow on narrow screens */
.chart-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 300px;
  max-width: 100%;
}

.chart-container canvas {
  max-width: 100% !important;
  height: auto !important;
}

/* Responsive chart container improvements */
@media (max-width: 767.98px) {
  .chart-container {
    min-height: 250px;
    padding: var(--spacing-s);
  }

  .chart-container-large {
    min-height: 280px;
  }
}

@media (max-width: 575.98px) {
  .chart-container {
    min-height: 220px;
    padding: var(--spacing-xs);
  }

  .chart-container-large {
    min-height: 250px;
  }
}

/* Scale-in animation for charts when they first render */
@keyframes chartScaleIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Apply scale-in animation to chart containers when they become visible */
@media (prefers-reduced-motion: no-preference) {
  .chart-container.chart-rendered {
    animation: chartScaleIn 0.3s ease-out;
  }
  
  .chart-container.chart-rendered canvas {
    animation: chartScaleIn 0.4s ease-out;
  }
}

/* Respect reduced motion preference for charts */
@media (prefers-reduced-motion: reduce) {
  .chart-container.chart-rendered,
  .chart-container.chart-rendered canvas {
    animation: none;
  }
}

/* Ensure responsive chart containers */
.chart-container-large {
  min-height: 350px;
}

/* Table responsive wrapper for charts */
.dashboard-section .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Responsive chart adjustments */
@media (max-width: 575.98px) {
  .chart-container {
    min-height: 250px;
  }
  
  .chart-container-large {
    min-height: 280px;
  }
  
  /* Ensure charts don't overflow on very small screens */
  .dashboard-section .card {
    overflow: hidden;
  }
  
  .dashboard-section .card .card-body {
    padding: var(--spacing-m);
  }
}

@media (max-width: 991.98px) {
  /* Adjust chart container on medium screens */
  .chart-container {
    min-height: 280px;
  }
}

/* Card spacing standardization - ensure consistent gaps using Bootstrap g-3 (1rem = --spacing-m) */
/* Bootstrap g-3 already provides consistent spacing, but we ensure alignment */
.dashboard-section .row {
  --bs-gutter-x: var(--spacing-m);
  --bs-gutter-y: var(--spacing-m);
}

/* Standardize card body padding */
.dashboard-section .card .card-body {
  padding: var(--spacing-l);
}

/* Ensure consistent card styling in dashboard */
.dashboard-section .card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-subtle);
  overflow: hidden;
  transition: border-color var(--transition-fast), 
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
  transform: translateY(0);
}

/* Subtle hover lift effect for dashboard cards */
@media (prefers-reduced-motion: no-preference) {
  .dashboard-section .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  
  
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .dashboard-section .card {
    transition: none;
  }
  
  .dashboard-section .card:hover {
    transform: none;
  }
}









/* ===========================
   TOOLTIP ANIMATIONS
   =========================== */

/* Fade-in/fade-out transitions for Bootstrap tooltips */
@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tooltipFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* Apply fade animations to Bootstrap tooltips */
@media (prefers-reduced-motion: no-preference) {
  .tooltip {
    animation: tooltipFadeIn 0.2s ease-out;
  }
  
  .tooltip.fade {
    transition: opacity 0.15s linear;
  }
  
  .tooltip.show {
    animation: tooltipFadeIn 0.2s ease-out;
  }
  
  .tooltip.hide {
    animation: tooltipFadeOut 0.15s ease-out;
  }
}

/* Respect reduced motion preference for tooltips */
@media (prefers-reduced-motion: reduce) {
  .tooltip,
  .tooltip.fade,
  .tooltip.show,
  .tooltip.hide {
    animation: none;
    transition: opacity 0.01s;
  }
}

/* Card header alignment */
.dashboard-section .card .card-header {
  padding: var(--spacing-m) var(--spacing-l);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border-subtle);
  background-color: var(--color-surface);
}

/* Card footer alignment */
.dashboard-section .card .card-footer {
  padding: var(--spacing-m) var(--spacing-l);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-s);
  border-top: 1px solid var(--color-border-subtle);
  background-color: var(--color-surface);
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
  .dashboard-header-title {
    font-size: var(--font-size-2xl);
  }

  .dashboard-welcome {
    padding: var(--spacing-l);
  }

  .kpi-card-value {
    font-size: var(--font-size-2xl);
  }

  .dashboard-quick-actions {
    gap: var(--spacing-xs);
    padding: var(--spacing-m);
  }

  .dashboard-quick-actions .btn {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-s);
  }
  
  /* Reduce section spacing on mobile */
  .dashboard-section {
    margin-bottom: var(--spacing-l);
  }
  
  .dashboard-section-header {
    margin-bottom: var(--spacing-m);
    padding-bottom: var(--spacing-s);
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-section-title {
    font-size: var(--font-size-lg);
    width: 100%;
  }

  /* Ensure proper card padding on mobile */
  .dashboard-section .card .card-body {
    padding: var(--spacing-m);
  }
  
  .dashboard-section .card .card-header,
  .dashboard-section .card .card-footer {
    padding: var(--spacing-s) var(--spacing-m);
  }

  /* KPI card adjustments for mobile */
  .kpi-card {
    padding: var(--spacing-m);
  }

  .kpi-card-value {
    font-size: var(--font-size-2xl);
  }

  .kpi-card-label {
    font-size: var(--font-size-xs);
  }

  /* Dashboard quick actions on mobile */
  .dashboard-quick-actions {
    padding: var(--spacing-m);
    flex-direction: column;
  }

  .dashboard-quick-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Responsive improvements for tablets */
@media (min-width: 576px) and (max-width: 991.98px) {
  .dashboard-section-title {
    font-size: var(--font-size-lg);
  }

  .kpi-card-value {
    font-size: var(--font-size-2xl);
  }

  .dashboard-quick-actions {
    gap: var(--spacing-s);
  }

  .dashboard-quick-actions .btn {
    flex: 1;
    min-width: 0;
  }
}

/* ===========================
   ACCESSIBILITY (A11Y) IMPROVEMENTS
   =========================== */

/* Universal focus indicator */
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Remove default focus for mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Input focus states */
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

/* Link focus states */
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Alert links - consistent hover/focus states */
.alert-link {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast), text-decoration var(--transition-fast);
}

.alert-link:hover {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.alert-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Pagination links - consistent hover/focus/active states */
.pagination .page-link {
  color: var(--color-text);
  background-color: var(--color-surface);
  border-color: var(--color-border-subtle);
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast);
}

.pagination .page-link:hover:not(.disabled) {
  background-color: var(--color-bg-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-1px);
}

.pagination .page-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.pagination .page-link:active:not(.disabled) {
  background-color: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: scale(0.98);
}

.pagination .page-item.disabled .page-link {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Card header collapsible links - consistent hover/focus states */
.card-header a[data-bs-toggle="collapse"] {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast),
              background-color var(--transition-fast);
  display: block;
  padding: var(--spacing-xs);
  margin: calc(var(--spacing-xs) * -1);
  border-radius: var(--radius-md);
}

.card-header a[data-bs-toggle="collapse"]:hover {
  color: var(--color-primary);
  background-color: var(--color-bg-soft);
}

.card-header a[data-bs-toggle="collapse"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-soft);
}

/* Sidebar navigation focus */
.sidebar-nav-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.settings-nav-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.settings-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Table row focus (for keyboard navigation) */
.table tbody tr:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  background-color: var(--table-row-hover);
}

/* Drawer/Modal focus */
.drawer:focus-visible,
.modal:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Skip to main content link */
.skip-to-main {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 9999;
  padding: var(--spacing-s) var(--spacing-m);
  background: var(--color-primary);
  color: var(--color-primary-text);
  text-decoration: none;
  border-radius: 0 0 var(--radius-md) 0;
}

.skip-to-main:focus {
  top: 0;
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Ensure all interactive elements are keyboard accessible */
button:not(:disabled),
a:not([aria-disabled="true"]),
input:not(:disabled),
select:not(:disabled),
textarea:not(:disabled),
[tabindex]:not([tabindex="-1"]) {
  cursor: pointer;
}

/* Improve contrast for disabled elements */
:disabled,
[aria-disabled="true"] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===========================
   SKELETON LOADERS
   =========================== */

.skeleton {
  background: var(--color-bg-soft);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

.skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Dark mode skeleton animation */


/* Skeleton card */
.skeleton-card {
  height: 100%;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-l);
  box-shadow: var(--shadow-subtle);
}

.skeleton-card-header {
  margin-bottom: var(--spacing-m);
}

.skeleton-title {
  height: 20px;
  width: 60%;
  margin-bottom: var(--spacing-s);
  border-radius: var(--radius-sm);
}

.skeleton-subtitle {
  height: 16px;
  width: 40%;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 16px;
  width: 100%;
  margin-bottom: var(--spacing-xs);
  border-radius: var(--radius-sm);
}

.skeleton-text.short {
  width: 70%;
}

.skeleton-text.medium {
  width: 85%;
}

.skeleton-number {
  height: 32px;
  width: 120px;
  margin-bottom: var(--spacing-xs);
  border-radius: var(--radius-sm);
}

.skeleton-button {
  height: 38px;
  width: 100px;
  border-radius: var(--radius-md);
}

/* Skeleton chart */
.skeleton-chart {
  height: 300px;
  width: 100%;
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-light);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: var(--spacing-m);
  gap: var(--spacing-xs);
}

.skeleton-chart-bar {
  width: 100%;
  background: var(--color-bg-soft);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  min-height: 20px;
  flex: 1;
  max-width: 60px;
}

/* Skeleton table */
.skeleton-table {
  width: 100%;
}

.skeleton-table-row {
  display: flex;
  gap: var(--spacing-m);
  padding: var(--spacing-m) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.skeleton-table-cell {
  flex: 1;
  height: 16px;
  border-radius: var(--radius-sm);
}

.skeleton-table-cell.short {
  flex: 0.5;
}

.skeleton-table-cell.medium {
  flex: 1.5;
}

/* Skeleton KPI card */
.skeleton-kpi-card {
  height: 140px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--spacing-l);
}

.skeleton-kpi-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-bottom: var(--spacing-s);
}

.skeleton-kpi-value {
  height: 36px;
  width: 80%;
  margin-bottom: var(--spacing-xs);
  border-radius: var(--radius-sm);
}

.skeleton-kpi-label {
  height: 14px;
  width: 60%;
  border-radius: var(--radius-sm);
}

/* ===========================
   BRANDING & MICRO-INTERACTIONS
   =========================== */

/* Brand logo in sidebar */
.sidebar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-s);
  text-decoration: none;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  padding: var(--spacing-xs);
  border-radius: var(--radius-md);
}

.sidebar-brand:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

.sidebar-brand:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.sidebar-brand-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-lg);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.sidebar-brand:hover .sidebar-brand-icon {
  transform: rotate(5deg) scale(1.1);
  background: var(--color-primary);
  color: var(--color-primary-text);
}

/* ===========================
   SCROLL BEHAVIOR & MICRO-OPTIMIZATIONS
   =========================== */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Prevent scrollbars from overlapping drawers */
body.drawer-open {
  overflow: hidden;
}

.drawer {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Ensure modals appear above drawer panels (drawer z-index: 99999) */
.modal {
  z-index: 100100 !important;
}
.modal-backdrop {
  z-index: 100099 !important;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity var(--transition-normal);
}



.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 1;
}

/* Prevent layout shift with min-heights */
.chart-container {
  min-height: 300px;
}

.chart-container-large {
  min-height: 400px;
}

/* Card min-heights to prevent jumping */
.card[data-loading="true"] {
  min-height: 200px;
}

/* Improve drawer scroll behavior */
.drawer-content {
  overscroll-behavior-y: contain;
}

/* ===========================
   SETUP WIZARD STEP BANNER
   =========================== */

.setup-wizard-step-banner {
  border-left: 4px solid var(--color-primary);
  padding-left: calc(var(--spacing-l) - 4px);
}

.setup-wizard-step-banner .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--color-info);
  background-color: rgba(255, 255, 255, 0.1);
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.setup-wizard-step-banner .btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-info);
}





.setup-wizard-step-link {
  color: inherit;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
  border-radius: var(--radius-md);
  padding: var(--spacing-s);
  margin: calc(var(--spacing-s) * -1);
}

.setup-wizard-step-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
  transform: translateX(2px);
  color: inherit;
  text-decoration: none;
}

.setup-wizard-step-link:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  background-color: rgba(0, 0, 0, 0.05);
  color: inherit;
  text-decoration: none;
}



.setup-wizard-step-icon {
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.setup-wizard-step-link:hover .setup-wizard-step-icon,
.setup-wizard-step-link:focus .setup-wizard-step-icon {
  transform: translateX(4px);
}

.setup-wizard-step-title {
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  transition: color var(--transition-fast);
}

.setup-wizard-step-link:hover .setup-wizard-step-title,
.setup-wizard-step-link:focus .setup-wizard-step-title {
  color: var(--color-primary);
}

.setup-wizard-step-description {
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}

.setup-wizard-step-link:hover .setup-wizard-step-description,
.setup-wizard-step-link:focus .setup-wizard-step-description {
  color: var(--color-text);
}

.setup-wizard-step-badge {
  font-size: var(--font-size-sm);
  padding: var(--spacing-xs) var(--spacing-s);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.setup-wizard-step-link:hover .setup-wizard-step-badge,
.setup-wizard-step-link:focus .setup-wizard-step-badge {
  transform: scale(1.05);
  background-color: var(--color-primary-hover) !important;
}

.setup-wizard-step-arrow {
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.setup-wizard-step-link:hover .setup-wizard-step-arrow,
.setup-wizard-step-link:focus .setup-wizard-step-arrow {
  transform: translateX(4px);
  color: var(--color-primary-hover);
}

/* Responsive adjustments for setup wizard step banner */
@media (max-width: 767.98px) {
  .setup-wizard-step-link {
    padding: var(--spacing-xs);
    margin: calc(var(--spacing-xs) * -1);
  }

  .setup-wizard-step-title {
    font-size: var(--font-size-base);
  }

  .setup-wizard-step-badge {
    font-size: var(--font-size-xs);
    padding: 2px var(--spacing-xs);
  }
}

/* ===========================
   WIZARD HOME PAGE
   =========================== */

.wizard-home-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 var(--spacing-m);
}

@media (min-width: 992px) {
  .wizard-home-container {
    max-width: 1200px;
    padding: 0;
  }
}

.wizard-step-card {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  border: 2px solid var(--color-border-subtle);
}

.wizard-step-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
  border-color: var(--color-primary);
}

.wizard-step-card.wizard-step-active {
  border-color: var(--color-primary);
  background: linear-gradient(to right, rgba(255, 79, 94, 0.05), transparent);
}



.wizard-step-card.wizard-step-completed {
  border-color: var(--color-success);
  background: linear-gradient(to right, rgba(34, 197, 94, 0.05), transparent);
}



.wizard-step-card.wizard-step-blocked {
  opacity: 0.7;
  cursor: not-allowed;
}

.wizard-step-icon-wrapper {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--color-primary-soft);
  flex-shrink: 0;
}

.wizard-step-card.wizard-step-completed .wizard-step-icon-wrapper {
  background-color: var(--color-success-soft);
}

.wizard-step-card.wizard-step-blocked .wizard-step-icon-wrapper {
  background-color: var(--color-bg-soft);
}

.wizard-step-icon {
  font-size: var(--font-size-2xl);
  color: var(--color-primary);
}

.wizard-step-card.wizard-step-completed .wizard-step-icon {
  color: var(--color-success);
}

.wizard-step-card.wizard-step-blocked .wizard-step-icon {
  color: var(--color-text-muted);
}

.wizard-step-title {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.wizard-step-description {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.wizard-step-status-badge {
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs) var(--spacing-s);
  white-space: nowrap;
}

.wizard-step-cta {
  transition: transform var(--transition-fast), background-color var(--transition-fast);
  font-weight: var(--font-weight-medium);
}

.wizard-step-cta:hover:not(:disabled) {
  transform: translateX(2px);
}

.wizard-step-cta:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ===========================
   STANDARDIZED FORM LAYOUT
   =========================== */

/* Standard form group spacing */
.form-group {
  margin-bottom: var(--spacing-l);
}

.form-group:last-child {
  margin-bottom: 0;
}

/* Standard form field spacing within rows */
.form-row .form-group {
  margin-bottom: 0;
}

.form-row {
  margin-bottom: var(--spacing-l);
}

/* Consistent label styling */
.form-label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-s);
  display: block;
}

.form-label.required::after {
  content: ' *';
  color: var(--color-error);
}

/* Form text (help/error) spacing */
.form-text {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Error text styling */
.form-error,
.text-danger.small {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-error);
  display: block;
}

/* Standardized form button group */
.form-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  align-items: stretch;
}

@media (min-width: 576px) {
  .form-actions {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }
}

/* Button order: secondary (Cancel) first, primary (Save) second */
.form-actions .btn-outline-secondary,
.form-actions .btn-secondary {
  order: 1;
}

.form-actions .btn-primary {
  order: 2;
}

/* Card footer form actions */
.card-footer.form-actions {
  background-color: transparent;
  border-top: 1px solid var(--color-border-subtle);
  padding: var(--spacing-l);
}

/* Modal footer form actions */
.modal-footer.form-actions {
  border-top: 1px solid var(--color-border-subtle);
  padding: var(--spacing-l);
}

/* Drawer footer form actions */
.drawer-footer.form-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  align-items: stretch;
  padding: var(--spacing-l);
  border-top: 1px solid var(--color-border-subtle);
}

@media (min-width: 576px) {
  .drawer-footer.form-actions {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }
}

/* Dark mode adjustments for forms */






/* Responsive form adjustments */
@media (max-width: 575.98px) {
  .form-actions .btn {
    width: 100%;
  }
}

/* Responsive adjustments for wizard home */
@media (max-width: 767.98px) {
  .wizard-step-card {
    margin-bottom: var(--spacing-m);
  }

  .wizard-step-icon-wrapper {
    width: 40px;
    height: 40px;
  }

  .wizard-step-icon {
    font-size: var(--font-size-xl);
  }

  .wizard-step-title {
    font-size: var(--font-size-base);
  }

  .wizard-step-status-badge {
    font-size: 0.7rem;
    padding: 2px var(--spacing-xs);
  }
}

/* Loading states */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--color-border-light);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

/* ===========================
   SKELETON LOADING STATES
   =========================== */

/* Skeleton animation */
@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes skeleton-shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

/* Base skeleton styles */
.skeleton {
  background: var(--color-bg-soft);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}



.skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}



/* Skeleton card - for card-like containers */
.skeleton-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--spacing-l);
  min-height: 200px;
}



/* Skeleton chart - for chart containers */
.skeleton-chart {
  width: 100%;
  height: 300px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}



/* Skeleton text line - for text placeholders */
.skeleton-text-line {
  height: 1em;
  margin-bottom: var(--spacing-xs);
  border-radius: var(--radius-sm);
}

.skeleton-text-line:last-child {
  margin-bottom: 0;
}

/* Skeleton text variants */
.skeleton-text-line.skeleton-text-sm {
  height: 0.875em;
}

.skeleton-text-line.skeleton-text-lg {
  height: 1.25em;
}

.skeleton-text-line.skeleton-text-xl {
  height: 1.5em;
}

/* Skeleton KPI card */
.skeleton-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}

.skeleton-kpi-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  margin-bottom: var(--spacing-s);
}

.skeleton-kpi-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
}

.skeleton-kpi-label {
  width: 120px;
  height: 1em;
}

.skeleton-kpi-value {
  width: 80px;
  height: 1.5em;
  margin-bottom: var(--spacing-xs);
}

.skeleton-kpi-description {
  width: 100px;
  height: 0.875em;
}

/* Hide skeleton when content is loaded */
.skeleton-hidden {
  display: none !important;
}

/* ===========================
   INTERACTIVE HELP OVERLAY
   =========================== */

/* Help icon button */
.help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  flex-shrink: 0;
  margin-left: var(--spacing-xs);
}

.help-icon:hover {
  color: var(--color-primary);
  background-color: var(--color-primary-soft);
}

.help-icon:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}





/* Help overlay backdrop */
.help-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: 1040;
  backdrop-filter: blur(2px);
}

.help-overlay-backdrop.help-overlay-backdrop-visible {
  opacity: 1;
  pointer-events: all;
}



/* Help overlay */
.help-overlay {
  position: fixed;
  z-index: 1050;
  max-width: 400px;
  min-width: 280px;
  opacity: 0;
  transform: translateY(-8px) scale(0.95);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  pointer-events: none;
  outline: none;
}

.help-overlay.help-overlay-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.help-overlay-content {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}



.help-overlay-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--spacing-m) var(--spacing-l);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface-raised);
}



.help-overlay-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  flex: 1;
  padding-right: var(--spacing-s);
}

.help-overlay-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  flex-shrink: 0;
}

.help-overlay-close:hover {
  color: var(--color-text);
  background-color: var(--color-bg-soft);
}

.help-overlay-close:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.help-overlay-body {
  padding: var(--spacing-l);
  color: var(--color-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.help-overlay-body p {
  margin: 0 0 var(--spacing-s) 0;
}

.help-overlay-body p:last-child {
  margin-bottom: 0;
}

.help-overlay-body ul,
.help-overlay-body ol {
  margin: var(--spacing-s) 0;
  padding-left: var(--spacing-l);
}

.help-overlay-body li {
  margin-bottom: var(--spacing-xs);
}

.help-overlay-body code {
  background: var(--color-bg-soft);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-family: monospace;
}



/* Responsive adjustments */
@media (max-width: 575.98px) {
  .help-overlay {
    max-width: calc(100vw - var(--spacing-l) * 2);
    left: var(--spacing-l) !important;
    right: var(--spacing-l);
  }
  
  .help-overlay-content {
    max-height: calc(100vh - var(--spacing-xl) * 2);
    overflow-y: auto;
  }
  
  .help-overlay-header {
    padding: var(--spacing-s) var(--spacing-m);
  }
  
  .help-overlay-body {
    padding: var(--spacing-m);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .help-overlay,
  .help-overlay-backdrop {
    transition: opacity 0.01s;
  }
  
  .help-overlay {
    transform: none;
  }
  
  .help-overlay.help-overlay-visible {
    transform: none;
  }
}

/* Help documentation navigation */
.help-nav {
  position: sticky;
  top: 1rem;
}

.help-nav .card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
}



.help-nav .list-group-item {
  border-left: none;
  border-right: none;
  border-color: var(--color-border-subtle);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.help-nav .list-group-item:first-child {
  border-top: none;
}

.help-nav .list-group-item:last-child {
  border-bottom: none;
}

.help-nav .list-group-item:hover {
  background-color: var(--color-bg-soft);
  color: var(--color-text-primary);
}

.help-nav .list-group-item.active {
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}



/* Help table of contents */
.help-toc {
  background: var(--color-surface);
  border: 1px solid var(--color-border-subtle);
}



.help-toc-nav ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.help-toc-link {
  display: block;
  padding: var(--spacing-xs) 0;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.help-toc-link:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.help-toc-level-1 {
  padding-left: 0;
  font-weight: var(--font-weight-semibold);
}

.help-toc-level-2 {
  padding-left: var(--spacing-m);
}

.help-toc-level-3 {
  padding-left: var(--spacing-l);
  font-size: var(--font-size-sm);
}

/* Help search */
.help-search-container {
  position: relative;
}

.help-search-results .list-group-item {
  border-left: none;
  border-right: none;
}

.help-search-results .list-group-item:first-child {
  border-top: none;
}

.help-search-results .list-group-item:last-child {
  border-bottom: none;
}

.help-search-results mark {
  background-color: var(--color-warning-soft);
  color: var(--color-text-primary);
  padding: 0 2px;
  border-radius: var(--radius-sm);
}



/* Help content */
.help-content {
  line-height: 1.7;
}

.help-content h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-m);
  color: var(--color-text-primary);
}

.help-content h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-top: var(--spacing-l);
  margin-bottom: var(--spacing-m);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--spacing-xs);
}

.help-content h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-top: var(--spacing-m);
  margin-bottom: var(--spacing-s);
  color: var(--color-text-primary);
}

.help-content h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin-top: var(--spacing-s);
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-primary);
}

.help-content p {
  margin-bottom: var(--spacing-m);
  color: var(--color-text-secondary);
}

.help-content ul,
.help-content ol {
  margin-bottom: var(--spacing-m);
  padding-left: var(--spacing-l);
}

.help-content li {
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-secondary);
}

.help-content code {
  background-color: var(--color-bg-soft);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: 0.9em;
  color: var(--color-text-primary);
}



.help-content pre {
  background-color: var(--color-bg-soft);
  padding: var(--spacing-m);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--spacing-m);
}



.help-content pre code {
  background: none;
  padding: 0;
}

.help-content blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: var(--spacing-m);
  margin-left: 0;
  margin-bottom: var(--spacing-m);
  color: var(--color-text-muted);
  font-style: italic;
}

.help-content a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.help-content a:hover {
  color: var(--color-primary-dark);
  text-decoration: none;
}

.help-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: var(--spacing-m) 0;
}

/* ===========================
   PERFORMANCE & ACCESSIBILITY
   =========================== */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .main-content-body {
    animation: none !important;
  }
  
  .badge {
    animation: none !important;
  }
  
  .card:hover {
    transform: none !important;
  }
  
  .sidebar-nav-item:hover {
    transform: none !important;
  }
  
  .table tbody tr:hover {
    transform: none !important;
  }
  
  .btn:hover {
    transform: none !important;
  }
}

/* ===========================
   RTL (RIGHT-TO-LEFT) SUPPORT
   =========================== */

/* Base RTL direction support */
[dir="rtl"],
.rtl-mode {
  direction: rtl;
  text-align: right;
}

/* RTL-aware spacing utilities */
[dir="rtl"] .me-1,
.rtl-mode .me-1 {
  margin-left: 0.25rem !important;
  margin-right: 0 !important;
}

[dir="rtl"] .me-2,
.rtl-mode .me-2 {
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}

[dir="rtl"] .ms-1,
.rtl-mode .ms-1 {
  margin-right: 0.25rem !important;
  margin-left: 0 !important;
}

[dir="rtl"] .ms-2,
.rtl-mode .ms-2 {
  margin-right: 0.5rem !important;
  margin-left: 0 !important;
}

[dir="rtl"] .pe-1,
.rtl-mode .pe-1 {
  padding-left: 0.25rem !important;
  padding-right: 0 !important;
}

[dir="rtl"] .ps-1,
.rtl-mode .ps-1 {
  padding-right: 0.25rem !important;
  padding-left: 0 !important;
}

/* RTL-aware text alignment */
[dir="rtl"] .text-start,
.rtl-mode .text-start {
  text-align: right !important;
}

[dir="rtl"] .text-end,
.rtl-mode .text-end {
  text-align: left !important;
}

/* ===========================
   ACTION BAR - RTL SUPPORT
   =========================== */

[dir="rtl"] .action-bar-search .action-bar-label,
.rtl-mode .action-bar-search .action-bar-label {
  left: auto;
  right: var(--spacing-m);
}

[dir="rtl"] .action-bar-search input,
.rtl-mode .action-bar-search input {
  padding-left: calc(var(--spacing-m) + var(--spacing-m) + 0.5rem);
  padding-right: calc(var(--spacing-m) + var(--spacing-m) + 0.5rem);
  text-align: right;
}

[dir="rtl"] .action-bar-search-clear,
.rtl-mode .action-bar-search-clear {
  right: auto;
  left: var(--spacing-m);
}

[dir="rtl"] .action-bar-content,
.rtl-mode .action-bar-content {
  flex-direction: row-reverse;
}

/* ===========================
   SECTION HEADER - RTL SUPPORT
   =========================== */

[dir="rtl"] .section-header-content,
.rtl-mode .section-header-content {
  flex-direction: row-reverse;
}

[dir="rtl"] .section-header-actions,
.rtl-mode .section-header-actions {
  flex-direction: row-reverse;
}

[dir="rtl"] .section-back-link i,
.rtl-mode .section-back-link i {
  transform: scaleX(-1); /* Flip arrow icon */
}

[dir="rtl"] .section-breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.rtl-mode .section-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "\\"; /* Use backslash for RTL breadcrumb separator */
}

/* ===========================
   SETTINGS CARD - RTL SUPPORT
   =========================== */

[dir="rtl"] .settings-card-title .bi,
.rtl-mode .settings-card-title .bi {
  margin-right: 0;
  margin-left: var(--spacing-s);
}

[dir="rtl"] .settings-card-body form > div:last-child,
[dir="rtl"] .settings-card-body .vstack > div:last-child,
.rtl-mode .settings-card-body form > div:last-child,
.rtl-mode .settings-card-body .vstack > div:last-child {
  justify-content: flex-start;
}

[dir="rtl"] .settings-nav-item.active::before,
.rtl-mode .settings-nav-item.active::before {
  left: auto;
  right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

[dir="rtl"] .settings-breadcrumb,
.rtl-mode .settings-breadcrumb {
  flex-direction: row-reverse;
}

[dir="rtl"] .form-check-label,
.rtl-mode .form-check-label {
  margin-left: 0;
  margin-right: var(--spacing-xs);
}

[dir="rtl"] .form-switch .form-check-label,
.rtl-mode .form-switch .form-check-label {
  margin-left: 0;
  margin-right: var(--spacing-s);
}

/* Form validation icons - RTL */
[dir="rtl"] .form-control.is-invalid,
[dir="rtl"] .form-select.is-invalid,
.rtl-mode .form-control.is-invalid,
.rtl-mode .form-select.is-invalid {
  padding-right: var(--spacing-m);
  padding-left: calc(var(--spacing-m) + 1.5rem);
  background-position: left var(--spacing-m) center;
}

[dir="rtl"] .form-control.is-valid,
[dir="rtl"] .form-select.is-valid,
.rtl-mode .form-control.is-valid,
.rtl-mode .form-select.is-valid {
  padding-right: var(--spacing-m);
  padding-left: calc(var(--spacing-m) + 1.5rem);
  background-position: left var(--spacing-m) center;
}

/* ===========================
   TOAST NOTIFICATIONS - RTL SUPPORT
   =========================== */

[dir="rtl"] .toast-container,
.rtl-mode .toast-container {
  right: auto;
  left: var(--spacing-l);
}

[dir="rtl"] .toast,
.rtl-mode .toast {
  transform: translateX(-100%);
}

[dir="rtl"] .toast-showing,
.rtl-mode .toast-showing {
  transform: translateX(0);
}

[dir="rtl"] .toast-hiding,
.rtl-mode .toast-hiding {
  transform: translateX(-100%);
}

[dir="rtl"] .toast-content,
.rtl-mode .toast-content {
  flex-direction: row-reverse;
}

[dir="rtl"] .toast-close,
.rtl-mode .toast-close {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .toast-success,
[dir="rtl"] .toast-error,
[dir="rtl"] .toast-warning,
[dir="rtl"] .toast-info,
.rtl-mode .toast-success,
.rtl-mode .toast-error,
.rtl-mode .toast-warning,
.rtl-mode .toast-info {
  border-left: none;
  border-right: 4px solid;
}

[dir="rtl"] .toast-success,
.rtl-mode .toast-success {
  border-right-color: var(--color-success);
}

[dir="rtl"] .toast-error,
.rtl-mode .toast-error {
  border-right-color: var(--color-error);
}

[dir="rtl"] .toast-warning,
.rtl-mode .toast-warning {
  border-right-color: var(--color-warning);
}

[dir="rtl"] .toast-info,
.rtl-mode .toast-info {
  border-right-color: var(--color-info);
}

@media (max-width: 575.98px) {
  [dir="rtl"] .toast-container,
  .rtl-mode .toast-container {
    left: var(--spacing-m);
    right: var(--spacing-m);
  }
}

/* ===========================
   ALERT DIALOG - RTL SUPPORT
   =========================== */

[dir="rtl"] .alert-dialog-header,
.rtl-mode .alert-dialog-header {
  flex-direction: row-reverse;
}

[dir="rtl"] .alert-dialog-footer,
.rtl-mode .alert-dialog-footer {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

[dir="rtl"] .alert-dialog-error,
[dir="rtl"] .alert-dialog-warning,
[dir="rtl"] .alert-dialog-info,
[dir="rtl"] .alert-dialog-success,
.rtl-mode .alert-dialog-error,
.rtl-mode .alert-dialog-warning,
.rtl-mode .alert-dialog-info,
.rtl-mode .alert-dialog-success {
  border-left: none;
  border-right: 4px solid;
}

[dir="rtl"] .alert-dialog-error,
.rtl-mode .alert-dialog-error {
  border-right-color: var(--color-error);
}

[dir="rtl"] .alert-dialog-warning,
.rtl-mode .alert-dialog-warning {
  border-right-color: var(--color-warning);
}

[dir="rtl"] .alert-dialog-info,
.rtl-mode .alert-dialog-info {
  border-right-color: var(--color-info);
}

[dir="rtl"] .alert-dialog-success,
.rtl-mode .alert-dialog-success {
  border-right-color: var(--color-success);
}

/* ===========================
   CONFIRM DIALOG - RTL SUPPORT
   =========================== */

[dir="rtl"] .confirm-dialog-header,
.rtl-mode .confirm-dialog-header {
  flex-direction: row-reverse;
}

[dir="rtl"] .confirm-dialog-footer,
.rtl-mode .confirm-dialog-footer {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

@media (max-width: 575.98px) {
  [dir="rtl"] .confirm-dialog-footer,
  .rtl-mode .confirm-dialog-footer {
    flex-direction: column;
  }
}

/* ===========================
   GENERAL RTL FIXES
   =========================== */

/* Flip directional icons */
[dir="rtl"] .bi-arrow-left,
.rtl-mode .bi-arrow-left {
  transform: scaleX(-1);
}

[dir="rtl"] .bi-arrow-right,
.rtl-mode .bi-arrow-right {
  transform: scaleX(-1);
}

[dir="rtl"] .bi-chevron-left,
.rtl-mode .bi-chevron-left {
  transform: scaleX(-1);
}

[dir="rtl"] .bi-chevron-right,
.rtl-mode .bi-chevron-right {
  transform: scaleX(-1);
}

/* Button icon spacing */
[dir="rtl"] .btn i.me-1,
[dir="rtl"] .btn .bi.me-1,
.rtl-mode .btn i.me-1,
.rtl-mode .btn .bi.me-1 {
  margin-left: 0.25rem;
  margin-right: 0;
}

[dir="rtl"] .btn i.ms-1,
[dir="rtl"] .btn .bi.ms-1,
.rtl-mode .btn i.ms-1,
.rtl-mode .btn .bi.ms-1 {
  margin-right: 0.25rem;
  margin-left: 0;
}

/* Flexbox direction fixes */
[dir="rtl"] .d-flex,
.rtl-mode .d-flex {
  /* Flex direction is handled by individual components */
}

/* Text alignment */
[dir="rtl"] .text-left,
.rtl-mode .text-left {
  text-align: right !important;
}

[dir="rtl"] .text-right,
.rtl-mode .text-right {
  text-align: left !important;
}

/* Float utilities */
[dir="rtl"] .float-start,
.rtl-mode .float-start {
  float: right !important;
}

[dir="rtl"] .float-end,
.rtl-mode .float-end {
  float: left !important;
}

/* Border radius adjustments for RTL */
[dir="rtl"] .rounded-start,
.rtl-mode .rounded-start {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: var(--radius-md) !important;
  border-bottom-right-radius: var(--radius-md) !important;
}

[dir="rtl"] .rounded-end,
.rtl-mode .rounded-end {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: var(--radius-md) !important;
  border-bottom-left-radius: var(--radius-md) !important;
}

/* ===========================
   STRESS TESTING MODE
   =========================== */

/* Visual overflow indicators */
.stress-mode * {
  /* Add subtle border to detect overflow */
  box-shadow: inset 0 0 0 1px rgba(255, 0, 0, 0.1);
}

/* Highlight elements that might overflow */
.stress-mode .btn,
.stress-mode button,
.stress-mode .badge,
.stress-mode .form-label,
.stress-mode th,
.stress-mode .section-title,
.stress-mode .settings-card-title {
  box-shadow: inset 0 0 0 1px rgba(255, 165, 0, 0.3);
}

/* Highlight containers that should contain overflow */
.stress-mode .action-bar,
.stress-mode .section-header-wrapper,
.stress-mode .settings-card,
.stress-mode .toast,
.stress-mode .alert-dialog,
.stress-mode .confirm-dialog,
.stress-mode table,
.stress-mode .table-responsive {
  box-shadow: inset 0 0 0 2px rgba(0, 0, 255, 0.2);
}

/* Debug borders for common overflow areas */
.stress-mode .sidebar-nav-item,
.stress-mode .settings-nav-item {
  border: 1px dashed rgba(255, 0, 0, 0.3);
}

.stress-mode .action-bar-search input,
.stress-mode .form-control,
.stress-mode .form-select {
  border: 1px dashed rgba(0, 128, 0, 0.3);
}

.stress-mode .btn {
  border: 1px dashed rgba(255, 165, 0, 0.3);
  min-width: fit-content;
}

/* Highlight text overflow */
.stress-mode * {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Prevent horizontal scroll (should be handled by components) */
.stress-mode body {
  overflow-x: hidden;
}

/* Highlight elements that cause horizontal scroll */
.stress-mode *[style*="overflow-x: visible"],
.stress-mode *[style*="overflow: visible"] {
  outline: 2px solid rgba(255, 0, 0, 0.5);
}

/* Table cell overflow indicators */
.stress-mode td,
.stress-mode th {
  max-width: 100%;
  word-break: break-word;
}

.stress-mode td[style*="white-space: nowrap"],
.stress-mode th[style*="white-space: nowrap"] {
  outline: 2px dashed rgba(255, 0, 0, 0.5);
}

/* Form field overflow */
.stress-mode input[type="text"],
.stress-mode input[type="search"],
.stress-mode textarea {
  min-width: 0;
  width: 100%;
}

/* Button text overflow */
.stress-mode .btn {
  white-space: normal;
  word-wrap: break-word;
}

/* Navigation item overflow */
.stress-mode .sidebar-nav-item span,
.stress-mode .settings-nav-item span {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Section header overflow */
.stress-mode .section-title {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Settings card title overflow */
.stress-mode .settings-card-title {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Toast message overflow */
.stress-mode .toast-message,
.stress-mode .toast-body {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Dialog message overflow */
.stress-mode .alert-dialog-message,
.stress-mode .confirm-dialog-message {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Badge overflow */
.stress-mode .badge {
  white-space: normal;
  word-wrap: break-word;
  max-width: 100%;
}

/* Empty state overflow */
.stress-mode .empty-state-title,
.stress-mode .empty-state-text {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Breadcrumb overflow */
.stress-mode .breadcrumb-item {
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Action bar overflow */
.stress-mode .action-bar-content {
  flex-wrap: wrap;
}

.stress-mode .action-bar-filter-field {
  min-width: 0;
  flex: 1 1 auto;
}

/* RTL + Stress mode compatibility */
[dir="rtl"].stress-mode *,
.rtl-mode.stress-mode * {
  /* RTL stress testing uses same indicators */
}

/* Console warning for developers */
.stress-mode::before {
  content: 'STRESS TEST MODE ACTIVE';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 165, 0, 0.9);
  color: #000;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  z-index: 9999;
  pointer-events: none;
}

/* Hide stress mode indicator in print */
@media print {
  .stress-mode::before {
    display: none;
  }
  
  .stress-mode * {
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
  }
}

/* ===========================
   ENTRANCE ANIMATION
   Futuristic splash screen animation for login/dashboard
   =========================== */

.entrance-splash {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--accent-gradient-start) 0%, var(--accent-gradient-end) 100%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  overflow: hidden;
}

.entrance-splash::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: entranceRotate 20s linear infinite;
  pointer-events: none;
}

.entrance-splash::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.3) 0%, transparent 50%);
  animation: entrancePulse 4s ease-in-out infinite;
  pointer-events: none;
}

.entrance-splash.hiding {
  opacity: 0;
}

.entrance-splash.hidden {
  display: none;
}

/* Hide page content during entrance animation */
html.entrance-will-animate .app-layout,
body.entrance-animating .app-layout {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in, visibility 0.3s ease-in;
}

body.entrance-animating .entrance-splash {
  opacity: 1;
  visibility: visible;
}

/* Dark mode support */




.entrance-splash-content {
  text-align: center;
  position: relative;
  z-index: 1;
  transform: scale(0.5) translateY(20px);
  opacity: 0;
  animation: entranceFuturisticIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.entrance-splash-logo-wrapper {
  position: relative;
  display: inline-block;
  margin-bottom: 2rem;
}

.entrance-splash-logo {
  font-size: 5rem;
  color: #ffffff;
  display: inline-block;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
  animation: entranceLogoGlow 2s ease-in-out infinite alternate;
  transform-origin: center;
}

.entrance-splash-logo::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: entranceLogoPulse 2s ease-in-out infinite;
  z-index: -1;
}

.entrance-splash-logo::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: rgba(255, 255, 255, 0.8);
  animation: entranceLogoRotate 3s linear infinite;
  z-index: -1;
}

.entrance-splash-title {
  font-size: 2rem;
  font-weight: var(--font-weight-bold, 700);
  color: #ffffff;
  margin: 0;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
  letter-spacing: 0.1em;
  animation: entranceTitleFade 1s ease-out 0.3s both;
  text-transform: uppercase;
}

.entrance-splash-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}

.entrance-splash-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: entranceParticleFloat 8s ease-in-out infinite;
}

/* Animations */
@keyframes entranceFuturisticIn {
  0% {
    transform: scale(0.5) translateY(20px) rotate(-10deg);
    opacity: 0;
    filter: blur(10px);
  }
  60% {
    transform: scale(1.1) translateY(-5px) rotate(2deg);
    opacity: 0.9;
    filter: blur(2px);
  }
  100% {
    transform: scale(1) translateY(0) rotate(0deg);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes entranceLogoGlow {
  0% {
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 30px var(--accent-primary-soft));
    transform: scale(1);
  }
  100% {
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 50px var(--accent-primary));
    transform: scale(1.05);
  }
}

@keyframes entranceLogoPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.2;
  }
}

@keyframes entranceLogoRotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes entranceTitleFade {
  0% {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes entranceRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes entrancePulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes entranceParticleFloat {
  0% {
    transform: translateY(100vh) translateX(0) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) translateX(100px) scale(1);
    opacity: 0;
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .entrance-splash-logo {
    font-size: 3.5rem;
  }
  
  .entrance-splash-title {
    font-size: 1.5rem;
  }
}

/* ===========================
   GLOBAL LOADING INDICATOR
   Spinner overlay for background requests
   =========================== */

.global-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease-in;
  pointer-events: none;
}

.global-loading-overlay.show {
  display: flex;
  pointer-events: auto;
}

.global-loading-overlay.visible {
  opacity: 1;
}

.global-loading-spinner {
  background: var(--bg-primary, #ffffff);
  border-radius: var(--radius-lg, 12px);
  padding: 2rem;
  box-shadow: var(--shadow-modal, 0 4px 6px rgba(0, 0, 0, 0.1));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-width: 200px;
}

.global-loading-spinner-icon {
  width: 3rem;
  height: 3rem;
  border: 4px solid var(--border-subtle, #e9ecef);
  border-top-color: var(--primary, #0d6efd);
  border-radius: 50%;
  animation: spinnerRotate 0.8s linear infinite;
}

.global-loading-spinner-text {
  font-size: var(--font-size-base, 0.9375rem);
  color: var(--text-secondary, #6c757d);
  margin: 0;
}

/* Dark mode support */






@keyframes spinnerRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .entrance-splash-logo {
    font-size: 3rem;
  }
  
  .entrance-splash-title {
    font-size: 1.25rem;
  }
  
  .global-loading-spinner {
    padding: 1.5rem;
    min-width: 160px;
  }
  
  .global-loading-spinner-icon {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* Chart.js Tooltip Styles - Ensure tooltips are visible */
.chartjs-tooltip {
  opacity: 1 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: 10000 !important;
  background: var(--color-surface-raised, #ffffff) !important;
  border: 1px solid var(--color-border, rgba(15, 23, 42, 0.08)) !important;
  border-radius: var(--radius-md, 8px) !important;
  padding: 12px 16px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  min-width: 80px !important;
  max-width: 300px !important;
}



.chartjs-tooltip-title {
  color: var(--color-text-primary, #111827) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
  padding: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}



.chartjs-tooltip-body {
  color: var(--color-text-primary, #111827) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

/* ===========================
   DASHBOARD SHORTCUTS
   Grid responsive de accesos directos
   =========================== */

.dashboard-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--spacing-m, 16px);
  margin-top: var(--spacing-m, 16px);
}

@media (min-width: 576px) {
  .dashboard-shortcuts-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

@media (min-width: 768px) {
  .dashboard-shortcuts-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

.dashboard-shortcut-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-l, 24px) var(--spacing-m, 16px);
  background: var(--color-surface-raised, #ffffff);
  border: 1px solid var(--color-border, rgba(15, 23, 42, 0.08));
  border-radius: var(--radius-lg, 12px);
  text-decoration: none;
  color: var(--color-text-primary, #111827);
  transition: all var(--transition-normal, 250ms ease);
  cursor: pointer;
  min-height: 120px;
}

.dashboard-shortcut-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card, 0 2px 8px rgba(0, 0, 0, 0.1));
  border-color: var(--primary, #0d6efd);
  color: var(--primary, #0d6efd);
  text-decoration: none;
}

.dashboard-shortcut-card:active {
  transform: translateY(0);
}

.dashboard-shortcut-icon {
  font-size: 2rem;
  margin-bottom: var(--spacing-s, 8px);
  color: var(--color-text-secondary, #6c757d);
  transition: color var(--transition-normal, 250ms ease);
}

.dashboard-shortcut-card:hover .dashboard-shortcut-icon {
  color: var(--primary, #0d6efd);
  transform: scale(1.1);
  transition: all var(--transition-normal, 250ms ease);
}

.dashboard-shortcut-label {
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
  word-break: break-word;
  color: var(--color-text-primary, #111827);
  transition: color var(--transition-normal, 250ms ease);
}

.dashboard-shortcut-card:hover .dashboard-shortcut-label {
  color: var(--primary, #0d6efd);
}

/* Dark mode support */








/* Mobile optimizations */
@media (max-width: 575px) {
  .dashboard-shortcuts-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--spacing-s, 8px);
  }
  
  .dashboard-shortcut-card {
    padding: var(--spacing-m, 16px) var(--spacing-s, 8px);
    min-height: 100px;
  }
  
  .dashboard-shortcut-icon {
    font-size: 1.5rem;
  }
  
  .dashboard-shortcut-label {
    font-size: 0.75rem;
  }
}

  

.chartjs-tooltip-body-item {
  color: var(--color-text-primary, #111827) !important;
  font-size: 13px !important;
  margin: 2px 0 !important;
  padding: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}



/* Ensure all text inside tooltip is visible */
.chartjs-tooltip * {
  color: inherit !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===========================
   FULL DOCUMENTATION PRINT STYLES
   Optimized styles for printing/downloading complete documentation
   =========================== */

/* Print-specific styles */
@media print {
  /* Hide navigation and non-essential elements */
  .navbar,
  .sidebar,
  .breadcrumb,
  .no-print,
  .btn,
  .card-header .btn,
  .help-nav,
  .help-search-container,
  footer {
    display: none !important;
  }

  /* Full documentation container */
  .full-documentation-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Page breaks */
  .page-break-before {
    page-break-before: always;
  }

  .page-break-after {
    page-break-after: always;
  }

  .page-break-inside-avoid {
    page-break-inside: avoid;
  }

  /* Cover page */
  .document-cover {
    page-break-after: always;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Table of contents */
  .document-toc {
    page-break-after: always;
  }

  .toc-list {
    list-style: decimal;
    padding-left: 2rem;
  }

  .toc-list a {
    color: #000;
    text-decoration: none;
  }

  .toc-list a:hover {
    text-decoration: underline;
  }

  /* Document sections */
  .document-section {
    page-break-inside: avoid;
  }

  .document-section h1 {
    page-break-after: avoid;
    border-bottom: 2px solid #000;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
  }

  .document-section h2 {
    page-break-after: avoid;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
  }

  .document-section h3 {
    page-break-after: avoid;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
  }

  /* Optimize colors for black and white printing */
  .alert {
    border: 1px solid #000;
    background: #f9f9f9 !important;
    color: #000 !important;
  }

  .alert-info {
    border-left: 4px solid #000;
  }

  .card {
    border: 1px solid #000;
    page-break-inside: avoid;
    background: #fff !important;
    box-shadow: none !important;
  }

  .card-header {
    background: #f0f0f0 !important;
    color: #000 !important;
    border-bottom: 1px solid #000;
  }

  .card-body {
    background: #fff !important;
    color: #000 !important;
  }

  /* Links */
  a {
    color: #000 !important;
    text-decoration: none;
  }

  a[href^="#"] {
    color: #000 !important;
  }

  /* Lists */
  ul, ol {
    page-break-inside: avoid;
  }

  li {
    page-break-inside: avoid;
  }

  /* Tables */
  table {
    page-break-inside: avoid;
    border-collapse: collapse;
    width: 100%;
  }

  table th,
  table td {
    border: 1px solid #000;
    padding: 0.5rem;
  }

  table th {
    background: #f0f0f0 !important;
    color: #000 !important;
  }

  /* Code blocks */
  code,
  pre {
    background: #f5f5f5 !important;
    color: #000 !important;
    border: 1px solid #ccc;
    page-break-inside: avoid;
  }

  /* Typography optimization */
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000 !important;
    background: #fff !important;
  }

  h1 {
    font-size: 24pt;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
  }

  h2 {
    font-size: 18pt;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
  }

  h3 {
    font-size: 14pt;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  h4 {
    font-size: 12pt;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
  }

  p {
    margin-bottom: 0.75rem;
  }

  /* Remove backgrounds and shadows */
  * {
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Keep essential backgrounds */
  .document-cover,
  .card,
  .card-header,
  .card-body,
  .alert,
  code,
  pre,
  table th {
    background: #fff !important;
  }

  .card-header,
  table th {
    background: #f0f0f0 !important;
  }

  /* Print headers and footers */
  @page {
    size: A4;
    margin: 2cm;
    @top-center {
      content: "FinanceApp Documentation";
      font-size: 10pt;
      color: #666;
    }
    @bottom-center {
      content: "Page " counter(page);
      font-size: 10pt;
      color: #666;
    }
  }

  /* First page (cover) - no header/footer */
  .document-cover {
    @page {
      margin: 0;
      @top-center {
        content: "";
      }
      @bottom-center {
        content: "";
      }
    }
  }
}

/* Screen styles for full documentation (non-print) */
.full-documentation-container {
  max-width: 100%;
  margin: 0 auto;
  padding: var(--spacing-m);
}

@media (min-width: 992px) {
  .full-documentation-container {
    max-width: 1200px;
    padding: 2rem;
}

.document-cover {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-gradient-start, #667eea) 0%, var(--accent-gradient-end, #764ba2) 100%);
  color: white;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.document-toc {
  background: #f8f9fa;
  padding: 2rem;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.toc-list {
  list-style: decimal;
  padding-left: 2rem;
}

.toc-list ol {
  list-style: lower-alpha;
  margin-top: 0.5rem;
}

.toc-list a {
  color: var(--accent-color, #667eea);
  text-decoration: none;
}

.toc-list a:hover {
  text-decoration: none;
}

.document-section {
  margin-bottom: 3rem;
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.document-section h1 {
  border-bottom: 3px solid var(--accent-color, #667eea);
  padding-bottom: 0.75rem;
  margin-bottom: 2rem;
  color: var(--accent-color, #667eea);
}

.no-print {
  display: block;
}

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