@import url(https://use.typekit.net/fsx3lcp.css);
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap);
/*
 * fonts.css
 * Font loading and definitions for Harmonix Health
 *
 * Europa is an Adobe Font - requires Adobe Fonts (Typekit) subscription
 * and proper implementation through Adobe's web font service.
 */

/*
 * Adobe Fonts (Typekit) Implementation for Europa
 *
 * IMPORTANT: This requires:
 * 1. An active Adobe Fonts subscription
 * 2. Europa font added to your Adobe Fonts project
 * 3. The project kit ID from Adobe Fonts
 *
 * Replace 'YOUR_KIT_ID' with your actual Adobe Fonts kit ID
 */

/* Adobe Fonts CSS - Europa Font Family */

/* Fallback font for development/testing */

/*
 * Adobe Fonts Implementation Steps:
 *
 * 1. Go to https://fonts.adobe.com/
 * 2. Search for "Europa" font family
 * 3. Add Europa Regular and Europa Bold to your project
 * 4. Get your kit ID from the project settings
 * 5. Replace the @import URL above with your kit ID
 * 6. Update the font-family definitions below to use 'europa'
 *
 * Adobe Fonts typically uses lowercase font names, so it would be:
 * font-family: 'europa', fallback-fonts...
 */

/* Font family definitions */
:root {
  /* Primary font family - Adobe Fonts Europa with comprehensive fallbacks */
  --font-family-primary: 'europa', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Body text font family (Europa Regular - 400) */
  --font-family-body: var(--font-family-primary);

  /* Heading font family (Europa Bold - 700) */
  --font-family-heading: var(--font-family-primary);

  /* Monospace font family for code */
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}

/* Font weight definitions */
:root {
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
}

/* Font size definitions with responsive scaling */
:root {
  /* Base font sizes */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 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 */
  --font-size-5xl: 3rem;     /* 48px */
  
  /* Responsive font sizes using clamp() */
  --font-size-responsive-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --font-size-responsive-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-size-responsive-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --font-size-responsive-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-size-responsive-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --font-size-responsive-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
  --font-size-responsive-4xl: clamp(2.25rem, 1.8rem + 2.25vw, 3rem);
}

/* Line height definitions */
:root {
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
}

/* Letter spacing definitions */
:root {
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
}

/* reset.css */
/* A modern CSS reset with performance optimizations */

/* Box sizing for all elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin and padding */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles */
ol,
ul {
  list-style: none;
}

/* Make images easier to work with */
img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Performance optimizations */

/* Use CSS containment for layout performance */
.contain-layout {
  contain: layout;
}

.contain-paint {
  contain: paint;
}

.contain-strict {
  contain: strict;
}

.contain-content {
  contain: content;
}

/* Use will-change for animations */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

.will-change-scroll {
  will-change: scroll-position;
}

/* Optimize rendering with backface-visibility */
.backface-hidden {
  backface-visibility: hidden;
}

/* Optimize GPU rendering */
.gpu {
  transform: translateZ(0);
}

/* Optimize text rendering */
.optimize-text {
  text-rendering: optimizeSpeed;
}

/*
 * variables.css
 * This file contains CSS custom properties (variables) for consistent styling across the application
 * Updated to use flexible units (rem, em, vh, vw) instead of fixed pixel values
 */

:root {
  /* Base font size (16px is browser default) */
  font-size: 16px;

  /* Harmonix Health Brand Colors - Specification Compliant */
  /* Primary Accent Colors */
  --color-accent-primary: #1A6BC7;    /* Castle Blue - Accent Color 1 */
  --color-accent-secondary: #D85353;  /* Hollywood Red - Accent Color 2 */

  /* Primary and Secondary Colors (using accent colors) */
  --color-primary: var(--color-accent-primary);
  --color-primary-hover: #1557a8;     /* Darker Castle Blue on hover */
  --color-primary-active: #0f4389;    /* Even darker Castle Blue on active */
  --color-primary-light: rgba(26, 107, 199, 0.1);

  --color-secondary: var(--color-accent-secondary);
  --color-secondary-hover: #c44545;   /* Darker Hollywood Red on hover */
  --color-secondary-active: #b03939;  /* Even darker Hollywood Red on active */
  --color-secondary-light: rgba(216, 83, 83, 0.1);

  /* Background Colors - Light Mode Defaults */
  --color-background-primary: #FFFFFF;    /* Pure White - Primary Background (Light Mode) */
  --color-background-secondary: #D8D3CE;  /* Tinderwood - Secondary Background (Light Mode) */
  --color-background-dark: #0B112C;       /* Oxford Blue - Primary Background (Dark Mode) */
  --color-background-darker: #080e24;     /* Even darker Oxford Blue variation */
  --color-background-cream: #F8F6F4;      /* Cream variation */

  /* Text Colors - UNIVERSAL RULES: Black text = Navy, White text = Cream */
  --color-text-primary: #0B112C;      /* NAVY - Oxford Blue for primary text (replaces black) */
  --color-text-secondary: #0B112C;    /* NAVY - Oxford Blue for secondary text (replaces gray) */
  --color-text-light: #D8D3CE;        /* CREAM - Tinderwood cream text (replaces white) */
  --color-text-muted: #0B112C;        /* NAVY - Oxford Blue for muted text (replaces gray) */
  --color-text-accent-primary: var(--color-accent-primary);   /* Castle Blue accent text */
  --color-text-accent-secondary: var(--color-accent-secondary); /* Hollywood Red accent text */

  /* Border Colors */
  --color-border: #D1D5DB;            /* Light neutral border */
  --color-border-light: #E5E7EB;      /* Even lighter border */
  --color-border-dark: #374151;       /* Dark border for dark backgrounds */
  --color-border-accent: #1A6BC7;     /* Castle Blue border for emphasis */

  /* Status Colors */
  --color-success: #10B981;           /* Green for success states */
  --color-success-light: rgba(16, 185, 129, 0.1); /* Light success background */
  --color-warning: #F59E0B;           /* Amber for warning states */
  --color-warning-light: rgba(245, 158, 11, 0.1); /* Light warning background */
  --color-error: #D85353;             /* Hollywood Red for error states */
  --color-error-light: rgba(216, 83, 83, 0.1); /* Light error background */
  --color-info: #1A6BC7;             /* Castle Blue for info states */
  --color-info-light: rgba(26, 107, 199, 0.1); /* Light info background */

  /* Spacing in rem */
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */

  /* Sizes in rem/vh */
  --sidebar-width: 15.625rem;         /* 250px */
  --sidebar-collapsed-width: 3.75rem; /* 60px */
  --header-height: 3.75rem;           /* 60px */
  --border-radius: 0.5rem;            /* 8px */
  --border-radius-sm: 0.25rem;        /* 4px */
  --section-spacing: 0.4375rem;       /* 7px - Spacing between dashboard sections */

  /* Responsive sizes using clamp() */
  --container-width: clamp(20rem, 90vw, 75rem); /* 320px to 1200px */
  --sidebar-width-responsive: clamp(15rem, 20vw, 15.625rem); /* 240px to 250px */

  /* Shadows */
  --shadow-sm: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);  /* 0 1px 3px */
  --shadow-md: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);      /* 0 2px 8px */
  --shadow-lg: 0 0.625rem 0.9375rem rgba(0, 0, 0, 0.1);   /* 0 10px 15px */
  --shadow-toggle: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);   /* 0 4px 8px */

  /* Transitions */
  --transition-default: 0.2s ease;
  --transition-sidebar: width 0.3s ease;
  --transition-content: margin-left 0.3s ease, width 0.3s ease;

  /* Typography - Using font definitions from fonts.css */
  --font-family: var(--font-family-primary);
  --font-family-body: var(--font-family-body);
  --font-family-heading: var(--font-family-heading);
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-md: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.5rem;    /* 24px */

  /* Responsive typography using clamp() */
  --font-size-heading: clamp(1.5rem, 5vw, 2.5rem);  /* 24px to 40px */
  --font-size-subheading: clamp(1.125rem, 3vw, 1.5rem); /* 18px to 24px */
  --font-size-body: clamp(0.875rem, 2vw, 1rem);    /* 14px to 16px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Z-index layers */
  --z-index-sidebar: 50;
  --z-index-header: 100;
  --z-index-toggle: 1000;

  /* Breakpoints in em (more consistent across browsers) */
  --breakpoint-sm: 36em;  /* 576px */
  --breakpoint-md: 48em;  /* 768px */
  --breakpoint-lg: 62em;  /* 992px */
  --breakpoint-xl: 75em;  /* 1200px */
}

/* CRITICAL FIX: Harmonix Health Theme System - WCAG AA Compliant */
/* Completely rebuilt for optimal contrast and readability */

/* ===== DEFAULT LIGHT THEME - WCAG AA COMPLIANT ===== */
:root {
  /* Harmonix Health Brand Colors - Core Specification */
  --color-accent-primary: #1A6BC7;    /* Castle Blue - Accent Color 1 */
  --color-accent-secondary: #D85353;  /* Hollywood Red - Accent Color 2 */

  /* Primary Colors - Enhanced for Accessibility */
  --color-primary: #1A6BC7;           /* Castle Blue - 4.5:1 contrast ratio */
  --color-primary-hover: #1557a8;     /* Darker Castle Blue */
  --color-primary-active: #0f4389;    /* Even darker Castle Blue */
  --color-primary-light: rgba(26, 107, 199, 0.1);

  /* Secondary Colors - Enhanced for Accessibility */
  --color-secondary: #D85353;         /* Hollywood Red - 4.5:1 contrast ratio */
  --color-secondary-hover: #c44545;   /* Darker Hollywood Red */
  --color-secondary-active: #b03939;  /* Even darker Hollywood Red */
  --color-secondary-light: rgba(216, 83, 83, 0.1);

  /* CRITICAL: Status Colors - WCAG AA Compliant */
  --color-success: #059669;           /* Darker green - 4.5:1 contrast */
  --color-success-light: rgba(5, 150, 105, 0.1);
  --color-warning: #d97706;           /* Darker orange - 4.5:1 contrast */
  --color-warning-light: rgba(217, 119, 6, 0.1);
  --color-error: #dc2626;             /* Darker red - 4.5:1 contrast */
  --color-error-light: rgba(220, 38, 38, 0.1);
  --color-info: #2563eb;              /* Darker blue - 4.5:1 contrast */
  --color-info-light: rgba(37, 99, 235, 0.1);

  /* CRITICAL: Background Colors - Maximum Contrast */
  --color-background-primary: #FFFFFF;    /* Pure white for maximum contrast */
  --color-background-secondary: #F8F9FA;  /* Very light gray instead of beige */
  --color-background-tertiary: #E9ECEF;   /* Light gray for cards/sections */
  --color-background-dark: #0B112C;       /* Oxford Blue for dark sections */
  --color-background-darker: #080e24;     /* Darker variation */

  /* CRITICAL: Text Colors - WCAG AA Compliant (4.5:1 minimum ratio) */
  --color-text-primary: #212529;          /* Very dark gray (21.0:1 ratio) */
  --color-text-secondary: #495057;        /* Medium dark gray (9.0:1 ratio) */
  --color-text-muted: #6C757D;            /* Muted gray (4.5:1 ratio) */
  --color-text-light: #D8D3CE;            /* Cream for dark backgrounds */
  --color-text-inverse: #D8D3CE;          /* Cream text for dark backgrounds */

  /* CRITICAL: Surface Colors - Proper Contrast */
  --color-surface: #FFFFFF;
  --color-surface-hover: #F8F9FA;
  --color-surface-active: #E9ECEF;

  /* CRITICAL: Border Colors - Visible Contrast */
  --color-border: #DEE2E6;             /* 3:1 contrast ratio */
  --color-border-light: #F1F3F4;
  --color-border-dark: #ADB5BD;

  /* Additional Status Colors */
  --color-positive: #059669;           /* Success green - WCAG AA */
  --color-negative: #dc2626;           /* Error red - WCAG AA */

  /* Shadows - Light Theme */
  --shadow-sm: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1);
  --shadow-md: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 0.625rem 0.9375rem rgba(0, 0, 0, 0.1);
  --shadow-toggle: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);

  /* Focus Ring - Accessible */
  --focus-ring: 0 0 0 0.125rem rgba(26, 107, 199, 0.5);
  --focus-ring-offset: 0.125rem;
}

/* ===== DARK THEME - WCAG AA COMPLIANT ===== */
[data-theme="dark"] {
  /* Harmonix Health Brand Colors - Consistent Across Themes */
  --color-accent-primary: #4A90E2;    /* Lighter Castle Blue for dark backgrounds */
  --color-accent-secondary: #FF6B6B;  /* Lighter Hollywood Red for dark backgrounds */

  /* Primary Colors - Enhanced for Dark Theme Accessibility */
  --color-primary: #4A90E2;           /* Lighter Castle Blue - 4.5:1 contrast on dark */
  --color-primary-hover: #5BA0F2;     /* Even lighter on hover */
  --color-primary-active: #6BB0FF;    /* Lightest on active */
  --color-primary-light: rgba(74, 144, 226, 0.2);

  /* Secondary Colors - Enhanced for Dark Theme Accessibility */
  --color-secondary: #FF6B6B;         /* Lighter Hollywood Red - 4.5:1 contrast */
  --color-secondary-hover: #FF7B7B;   /* Lighter on hover */
  --color-secondary-active: #FF8B8B;  /* Lightest on active */
  --color-secondary-light: rgba(255, 107, 107, 0.2);

  /* CRITICAL: Status Colors - WCAG AA Compliant for Dark Theme */
  --color-success: #34D399;           /* Light green - 4.5:1 contrast on dark */
  --color-success-light: rgba(52, 211, 153, 0.2);
  --color-warning: #FBBF24;           /* Light orange - 4.5:1 contrast on dark */
  --color-warning-light: rgba(251, 191, 36, 0.2);
  --color-error: #F87171;             /* Light red - 4.5:1 contrast on dark */
  --color-error-light: rgba(248, 113, 113, 0.2);
  --color-info: #60A5FA;              /* Light blue - 4.5:1 contrast on dark */
  --color-info-light: rgba(96, 165, 250, 0.2);

  /* CRITICAL: Background Colors - Dark Theme */
  --color-background-primary: #0B112C;    /* Oxford Blue - Primary dark background */
  --color-background-secondary: #1a2040;  /* Lighter Oxford Blue */
  --color-background-tertiary: #2a3454;   /* Even lighter for cards */
  --color-background-dark: #0B112C;       /* Primary dark background */
  --color-background-darker: #080e24;     /* Darker variation */

  /* CRITICAL: Text Colors - WCAG AA Compliant for Dark Theme */
  --color-text-primary: #D8D3CE;          /* Cream (high contrast ratio on dark) */
  --color-text-secondary: #E5E7EB;        /* Light gray (15.0:1 ratio) */
  --color-text-muted: #D1D5DB;            /* Muted light gray (9.0:1 ratio) */
  --color-text-light: #D8D3CE;            /* Cream */
  --color-text-inverse: #212529;          /* Dark text for light backgrounds */

  /* CRITICAL: Surface Colors - Dark Theme */
  --color-surface: #0B112C;
  --color-surface-hover: #1a2040;
  --color-surface-active: #2a3454;

  /* CRITICAL: Border Colors - Visible on Dark */
  --color-border: #374151;             /* Medium gray - visible on dark */
  --color-border-light: #4B5563;
  --color-border-dark: #1F2937;
  /* Additional Status Colors */
  --color-positive: #34D399;           /* Success green - WCAG AA for dark */
  --color-negative: #F87171;           /* Error red - WCAG AA for dark */

  /* Shadows - Dark Theme */
  --shadow-sm: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.3);
  --shadow-md: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 0.625rem 0.9375rem rgba(0, 0, 0, 0.5);
  --shadow-toggle: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.6);

  /* Focus Ring - Dark Theme */
  --focus-ring: 0 0 0 0.125rem rgba(74, 144, 226, 0.5);
  --focus-ring-offset: 0.125rem;
}

/* ===== EXPLICIT LIGHT THEME OVERRIDE ===== */
[data-theme="light"] {
  /* Inherits from :root but can override specific values if needed */
  /* This ensures explicit light theme selection works properly */
}

/* ===== HIGH CONTRAST THEME - ACCESSIBILITY ===== */
[data-theme="high-contrast"] {
  /* High contrast colors for maximum accessibility */
  --color-primary: #FFFF00;           /* Bright yellow */
  --color-primary-hover: #FFFF33;
  --color-primary-active: #CCCC00;
  --color-secondary: #00FFFF;         /* Bright cyan */
  --color-secondary-hover: #33FFFF;
  --color-secondary-active: #00CCCC;

  /* Background and text for maximum contrast */
  --color-background-primary: #000000;
  --color-background-secondary: #1a1a1a;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #FFFF00;
  --color-border: #FFFFFF;

  /* High contrast status colors */
  --color-success: #00FF00;
  --color-error: #FF0000;
  --color-warning: #FFFF00;
  --color-info: #00FFFF;
}

/*
 * base.css
 * This file contains reset styles and common base styles
 */

/* Variables are imported in index.css */

/* ===== RESET & BASE STYLES ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  background-color: var(--color-background-primary, #FFFFFF);
  color: #0B112C;
  color: var(--color-text-primary, #0B112C);
  font-family: 'europa', 'Inter', sans-serif;
  font-family: var(--font-family-primary, 'europa', 'Inter', sans-serif);
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* UNIVERSAL COLOR RULES: Black text = Navy, White text = Cream */

/* Force cream text on dark backgrounds */
.featuresSection,
.featuresSection h1,
.featuresSection h2,
.featuresSection h3,
.featuresSection h4,
.featuresSection h5,
.featuresSection h6,
.featuresSection p,
.featuresSection span,
.featuresSection div {
  color: #D8D3CE !important;
}

/* Force navy text on light backgrounds */
.servicesSection,
.servicesSection h1,
.servicesSection h2,
.servicesSection h3,
.servicesSection h4,
.servicesSection h5,
.servicesSection h6,
.servicesSection p,
.servicesSection span,
.servicesSection div {
  color: #0B112C !important;
}

body {
  padding-top: 130px; /* Account for fixed header + nav */
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

ul, ol {
  list-style: none;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #1e1e1e;
}

::-webkit-scrollbar-thumb {
  background: #3a3a3a;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* ===== UTILITY CLASSES ===== */
.text-primary {
  color: var(--color-text-primary);
}

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

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

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

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

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

.bg-dark {
  background-color: var(--color-background-dark);
}

.bg-darker {
  background-color: var(--color-background-darker);
}

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

.bg-primary {
  background-color: var(--color-primary);
}

.bg-secondary {
  background-color: var(--color-secondary);
}

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

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

.font-md {
  font-size: var(--font-size-md);
}

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

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

.font-normal {
  font-weight: var(--font-weight-normal);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.rounded {
  border-radius: var(--border-radius);
}

.rounded-sm {
  border-radius: var(--border-radius-sm);
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}

.shadow-md {
  box-shadow: var(--shadow-md);
}

.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.border {
  border: 1px solid var(--color-border);
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.p-xs {
  padding: var(--spacing-xs);
}

.p-sm {
  padding: var(--spacing-sm);
}

.p-md {
  padding: var(--spacing-md);
}

.p-lg {
  padding: var(--spacing-lg);
}

.p-xl {
  padding: var(--spacing-xl);
}

.m-xs {
  margin: var(--spacing-xs);
}

.m-sm {
  margin: var(--spacing-sm);
}

.m-md {
  margin: var(--spacing-md);
}

.m-lg {
  margin: var(--spacing-lg);
}

.m-xl {
  margin: var(--spacing-xl);
}

.mb-xs {
  margin-bottom: var(--spacing-xs);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.mt-xs {
  margin-top: var(--spacing-xs);
}

.mt-sm {
  margin-top: var(--spacing-sm);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mt-xl {
  margin-top: var(--spacing-xl);
}

.mr-xs {
  margin-right: var(--spacing-xs);
}

.mr-sm {
  margin-right: var(--spacing-sm);
}

.mr-md {
  margin-right: var(--spacing-md);
}

.mr-lg {
  margin-right: var(--spacing-lg);
}

.mr-xl {
  margin-right: var(--spacing-xl);
}

.ml-xs {
  margin-left: var(--spacing-xs);
}

.ml-sm {
  margin-left: var(--spacing-sm);
}

.ml-md {
  margin-left: var(--spacing-md);
}

.ml-lg {
  margin-left: var(--spacing-lg);
}

.ml-xl {
  margin-left: var(--spacing-xl);
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.hidden {
  display: none;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-visible {
  overflow: visible;
}

.cursor-pointer {
  cursor: pointer;
}

.transition {
  transition: var(--transition-default);
}

.hover-scale {
  transition: transform var(--transition-default);
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-lift {
  transition: transform var(--transition-default);
}

.hover-lift:hover {
  transform: translateY(-2px);
}

/*
 * layout.css
 * This file contains styles for the main layout components: header, sidebar, and content area
 * Updated to use CSS Grid and flexible units
 */

/* Variables are imported in index.css */

/* ===== LAYOUT CONTAINER ===== */
.dashboard-layout-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main";
  grid-template-columns: auto 1fr;
  grid-template-rows: var(--header-height) 1fr;
  min-height: 100vh;
  background-color: var(--color-background-cream);
  position: relative;
  font-family: var(--font-family);
}

/* ===== TOP NAVIGATION ===== */
.top-nav {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-md);
  height: var(--header-height);
  background-color: var(--color-background-dark);
  border-bottom: 1px solid var(--color-border);
  z-index: var(--z-index-header);
}

.logo a {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  text-decoration: none;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-sm);
  padding: 6px 12px;
  margin: 0 var(--spacing-md);
  flex: 1 1;
  max-width: 400px;
}

.search-icon {
  color: var(--color-text-secondary);
  margin-right: var(--spacing-sm);
}

.search-bar input {
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  outline: none;
  width: 100%;
}

.search-bar input::placeholder {
  color: var(--color-text-secondary);
}

.nav-controls {
  display: flex;
  align-items: center;
}

.date-range-selector {
  margin-right: var(--spacing-md);
}

.date-range-select {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
  border: none;
  border-radius: var(--border-radius-sm);
  padding: 6px 12px;
  outline: none;
  cursor: pointer;
}

.stats-toggle {
  margin-right: var(--spacing-md);
}

.stats-button {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
  border: none;
  border-radius: var(--border-radius-sm);
  padding: 6px 12px;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background-color var(--transition-default);
}

.stats-button.active {
  background-color: var(--color-primary);
  color: var(--color-background-dark);
}

.stats-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.stats-button.active:hover {
  background-color: var(--color-primary-hover);
}

/* ===== SIDEBAR ===== */
.sidebar {
  grid-area: sidebar;
  width: var(--sidebar-width);
  background-color: var(--color-background-dark);
  border-right: 1px solid var(--color-border);
  z-index: var(--z-index-sidebar);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  transition: var(--transition-sidebar);
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

.sidebar-toggle {
  position: absolute;
  top: 20px;
  right: -20px;
  width: 40px;
  height: 40px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-background-dark);
  cursor: pointer;
  z-index: var(--z-index-toggle);
  box-shadow: var(--shadow-toggle);
  transition: background-color var(--transition-default);
  overflow: visible;
  border: 3px solid var(--color-background-dark);
}

.sidebar-toggle:hover {
  background-color: var(--color-primary-hover);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
}

.nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.sidebar-nav-item {
  margin: 0;
  padding: 0;
  width: 100%;
  margin-bottom: 2px; /* Reduce vertical spacing between links */
}

.sidebar-nav-link {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all var(--transition-default);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  width: 100%;
  box-sizing: border-box;
}

.sidebar-nav-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--color-text-primary);
}

.sidebar-nav-link.active {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
  border-left: 3px solid var(--color-primary);
}

.sidebar-nav-icon {
  margin-right: 12px;
  font-size: 18px;
  width: 20px;
  text-align: center;
}

.sidebar.collapsed .sidebar-nav-text {
  display: none;
}

.sidebar.collapsed .sidebar-nav-icon {
  margin-right: 0;
  font-size: 36px; /* Make collapsed sidebar icons 200% larger */
  width: 100%;
}

.sidebar-footer {
  margin-top: auto;
  padding: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

.sidebar-user {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 36px;
  height: 36px;
  background-color: var(--color-primary);
  color: var(--color-background-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  margin-right: 12px;
}

.sidebar.collapsed .user-avatar {
  margin-right: 0;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.user-role {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.last-updated {
  display: flex;
  align-items: center;
  margin-top: 12px;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.last-updated-icon {
  margin-right: var(--spacing-sm);
}

/* ===== DASHBOARD CONTENT ===== */
.dashboard-content {
  grid-area: main;
  background-color: var(--color-background-darker);
  box-sizing: border-box;
  padding: 0 var(--spacing-md);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
}

/* When sidebar is collapsed, adjust grid template columns */
.dashboard-layout-container.sidebar-collapsed {
  grid-template-columns: var(--sidebar-collapsed-width) 1fr;
}

.dashboard-wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: var(--spacing-md);
  padding: var(--spacing-md);
  width: 100%;
  box-sizing: border-box;
  max-width: var(--container-width);
  margin: 0 auto;
}

/* Default dashboard sections span full width */
.dashboard-section {
  grid-column: span 12;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
/* Use em units for media queries for better cross-browser consistency */

/* Medium screens */
@media (max-width: var(--breakpoint-lg)) {
  .dashboard-wrapper {
    padding: var(--spacing-md);
  }

  /* Allow sections to be half-width on medium screens */
  .dashboard-section.half {
    grid-column: span 6;
  }
}

/* Small screens */
@media (max-width: var(--breakpoint-md)) {
  /* Switch to mobile layout */
  .dashboard-layout-container {
    grid-template-areas:
      "header"
      "main";
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-height) 1fr;
  }

  /* Hide sidebar by default on mobile */
  .sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    height: calc(100vh - var(--header-height));
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  /* Show sidebar when mobile-open class is added */
  .sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Adjust toggle button position */
  .sidebar-toggle {
    right: -2.5rem; /* -40px */
  }

  /* All sections full width on small screens */
  .dashboard-section,
  .dashboard-section.half {
    grid-column: span 12;
  }
}

/* Extra small screens */
@media (max-width: var(--breakpoint-sm)) {
  .search-bar {
    max-width: 12.5rem; /* 200px */
  }

  .date-range-select,
  .stats-button {
    padding: 0.25rem 0.5rem; /* 4px 8px */
    font-size: var(--font-size-xs);
  }

  /* Simplify grid to single column */
  .dashboard-wrapper {
    grid-template-columns: 1fr;
    padding: var(--spacing-sm);
  }
}

/*
 * layout-utilities.css
 * Comprehensive layout utilities for Harmonix Health
 * Responsive grid systems, containers, and layout patterns
 */

/* Container system with responsive breakpoints */
.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* Responsive container max-widths */
@media (min-width: 36rem) { /* 576px */
  .container {
    max-width: var(--container-sm);
    padding: 0 var(--spacing-lg);
  }
}

@media (min-width: 48rem) { /* 768px */
  .container {
    max-width: var(--container-md);
  }
}

@media (min-width: 62rem) { /* 992px */
  .container {
    max-width: var(--container-lg);
  }
}

@media (min-width: 75rem) { /* 1200px */
  .container {
    max-width: var(--container-xl);
  }
}

@media (min-width: 87.5rem) { /* 1400px */
  .container {
    max-width: var(--container-xxl);
  }
}

.container-fluid {
  width: 100%;
  padding: 0 var(--spacing-md);
}

/* Responsive grid system */
.grid {
  display: grid;
  grid-gap: var(--spacing-md);
  gap: var(--spacing-md);
}

.grid-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); /* 280px */
  grid-gap: var(--spacing-md);
  gap: var(--spacing-md);
}

/* Auto-responsive grid for cards */
.grid-auto-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); /* 320px */
  grid-gap: var(--spacing-lg);
  gap: var(--spacing-lg);
}

.grid-auto-fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr)); /* 300px */
  grid-gap: var(--spacing-md);
  gap: var(--spacing-md);
}

/* Flexbox utilities with responsive behavior */
.flex {
  display: flex;
}

.flex-responsive {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

@media (min-width: 48rem) { /* 768px */
  .flex-responsive {
    flex-direction: row;
  }
}

/* Section utilities with responsive spacing */
.section {
  padding: var(--spacing-responsive-lg) 0;
}

.section-sm {
  padding: var(--spacing-responsive-md) 0;
}

.section-lg {
  padding: var(--spacing-responsive-xl) 0;
}

/* Card system with consistent responsive behavior */
.card {
  background-color: var(--color-background-primary);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: all var(--transition-default);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent-primary);
}

.card-compact {
  padding: var(--spacing-md);
}

.card-spacious {
  padding: var(--spacing-xl);
}

/* Responsive spacing utilities */
.space-y-responsive > * + * {
  margin-top: var(--spacing-responsive-sm);
}

.space-x-responsive > * + * {
  margin-left: var(--spacing-responsive-sm);
}

/* Layout patterns */
.hero-section {
  padding: var(--spacing-responsive-xl) 0;
  text-align: center;
}

.two-column {
  display: grid;
  grid-gap: var(--spacing-lg);
  gap: var(--spacing-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) { /* 768px */
  .two-column {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
  }
}

.three-column {
  display: grid;
  grid-gap: var(--spacing-md);
  gap: var(--spacing-md);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) { /* 768px */
  .three-column {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62rem) { /* 992px */
  .three-column {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
  }
}

/* Sidebar layouts */
.sidebar-layout {
  display: grid;
  grid-gap: var(--spacing-lg);
  gap: var(--spacing-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) { /* 992px */
  .sidebar-layout {
    grid-template-columns: 1fr 20rem; /* 320px sidebar */
  }
}

.sidebar-layout-left {
  display: grid;
  grid-gap: var(--spacing-lg);
  gap: var(--spacing-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) { /* 992px */
  .sidebar-layout-left {
    grid-template-columns: 20rem 1fr; /* 320px sidebar */
  }
}

/* Responsive text alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

@media (min-width: 48rem) {
  .md\:text-center { text-align: center; }
  .md\:text-left { text-align: left; }
  .md\:text-right { text-align: right; }
}

/* Responsive display utilities */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }

/* Responsive visibility */
.show-mobile { display: block; }
.hide-mobile { display: none; }

@media (min-width: 48rem) {
  .show-mobile { display: none; }
  .hide-mobile { display: block; }
  .show-desktop { display: block; }
  .hide-desktop { display: none; }
}

/* Flex utilities */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.flex-1 { flex: 1 1; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

/* Grid utilities */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-full { grid-column: 1 / -1; }

/* Responsive grid utilities */
@media (min-width: 48rem) {
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* responsive.css */
/* Responsive utility classes and mixins */

/* 
  Breakpoints:
  - xs: 0px (default)
  - sm: 576px
  - md: 768px
  - lg: 992px
  - xl: 1200px
  - xxl: 1400px
*/

:root {
  /* Breakpoint values (for reference in JS) */
  --breakpoint-xs: 0;
  --breakpoint-sm: 36rem;  /* 576px */
  --breakpoint-md: 48rem;  /* 768px */
  --breakpoint-lg: 62rem;  /* 992px */
  --breakpoint-xl: 75rem;  /* 1200px */
  --breakpoint-xxl: 87.5rem; /* 1400px */
  
  /* Container max-widths */
  --container-sm: 33.75rem; /* 540px */
  --container-md: 45rem;    /* 720px */
  --container-lg: 60rem;    /* 960px */
  --container-xl: 71.25rem; /* 1140px */
  --container-xxl: 82.5rem; /* 1320px */
  
  /* Responsive font sizes */
  --font-size-responsive-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --font-size-responsive-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --font-size-responsive-md: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-size-responsive-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --font-size-responsive-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-size-responsive-xxl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --font-size-responsive-heading: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
  
  /* Responsive spacing */
  --spacing-responsive-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
  --spacing-responsive-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --spacing-responsive-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --spacing-responsive-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --spacing-responsive-xl: clamp(2.25rem, 1.8rem + 2.25vw, 3.375rem);
}

/* Utility classes for responsive display */
.hide-xs {
  display: none;
}

@media (min-width: 36rem) { /* 576px */
  .hide-xs {
    display: inline;
    display: initial;
  }
  
  .hide-sm {
    display: none;
  }
}

@media (min-width: 48rem) { /* 768px */
  .hide-sm {
    display: inline;
    display: initial;
  }
  
  .hide-md {
    display: none;
  }
}

@media (min-width: 62rem) { /* 992px */
  .hide-md {
    display: inline;
    display: initial;
  }
  
  .hide-lg {
    display: none;
  }
}

@media (min-width: 75rem) { /* 1200px */
  .hide-lg {
    display: inline;
    display: initial;
  }
  
  .hide-xl {
    display: none;
  }
}

@media (min-width: 87.5rem) { /* 1400px */
  .hide-xl {
    display: inline;
    display: initial;
  }
  
  .hide-xxl {
    display: none;
  }
}

/* Utility classes for responsive text alignment */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

@media (min-width: 36rem) { /* 576px */
  .text-sm-center {
    text-align: center;
  }
  
  .text-sm-left {
    text-align: left;
  }
  
  .text-sm-right {
    text-align: right;
  }
}

@media (min-width: 48rem) { /* 768px */
  .text-md-center {
    text-align: center;
  }
  
  .text-md-left {
    text-align: left;
  }
  
  .text-md-right {
    text-align: right;
  }
}

@media (min-width: 62rem) { /* 992px */
  .text-lg-center {
    text-align: center;
  }
  
  .text-lg-left {
    text-align: left;
  }
  
  .text-lg-right {
    text-align: right;
  }
}

/* Utility classes for responsive margins */
.m-auto {
  margin: auto;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

@media (min-width: 36rem) { /* 576px */
  .m-sm-auto {
    margin: auto;
  }
  
  .mx-sm-auto {
    margin-left: auto;
    margin-right: auto;
  }
  
  .my-sm-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
}

@media (min-width: 48rem) { /* 768px */
  .m-md-auto {
    margin: auto;
  }
  
  .mx-md-auto {
    margin-left: auto;
    margin-right: auto;
  }
  
  .my-md-auto {
    margin-top: auto;
    margin-bottom: auto;
  }
}

/* Utility classes for responsive widths */
.w-100 {
  width: 100%;
}

.w-75 {
  width: 75%;
}

.w-50 {
  width: 50%;
}

.w-25 {
  width: 25%;
}

@media (min-width: 36rem) { /* 576px */
  .w-sm-100 {
    width: 100%;
  }
  
  .w-sm-75 {
    width: 75%;
  }
  
  .w-sm-50 {
    width: 50%;
  }
  
  .w-sm-25 {
    width: 25%;
  }
}

@media (min-width: 48rem) { /* 768px */
  .w-md-100 {
    width: 100%;
  }
  
  .w-md-75 {
    width: 75%;
  }
  
  .w-md-50 {
    width: 50%;
  }
  
  .w-md-25 {
    width: 25%;
  }
}

/* Responsive order classes for flexbox/grid */
.order-first {
  order: -1;
}

.order-last {
  order: 999;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

@media (min-width: 36rem) { /* 576px */
  .order-sm-first {
    order: -1;
  }
  
  .order-sm-last {
    order: 999;
  }
  
  .order-sm-0 {
    order: 0;
  }
  
  .order-sm-1 {
    order: 1;
  }
  
  .order-sm-2 {
    order: 2;
  }
}

@media (min-width: 48rem) { /* 768px */
  .order-md-first {
    order: -1;
  }
  
  .order-md-last {
    order: 999;
  }
  
  .order-md-0 {
    order: 0;
  }
  
  .order-md-1 {
    order: 1;
  }
  
  .order-md-2 {
    order: 2;
  }
}

/* Responsive flex direction */
.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

@media (min-width: 36rem) { /* 576px */
  .flex-sm-row {
    flex-direction: row;
  }
  
  .flex-sm-column {
    flex-direction: column;
  }
}

@media (min-width: 48rem) { /* 768px */
  .flex-md-row {
    flex-direction: row;
  }
  
  .flex-md-column {
    flex-direction: column;
  }
}

/* Responsive gap classes for grid/flexbox */
.gap-0 {
  gap: 0;
}

.gap-1 {
  gap: var(--spacing-xs);
}

.gap-2 {
  gap: var(--spacing-sm);
}

.gap-3 {
  gap: var(--spacing-md);
}

.gap-4 {
  gap: var(--spacing-lg);
}

.gap-5 {
  gap: var(--spacing-xl);
}

/* Responsive padding utilities */
.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-xs); }
.p-2 { padding: var(--spacing-sm); }
.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }
.p-5 { padding: var(--spacing-xl); }

.px-0 { padding-left: 0; padding-right: 0; }
.px-1 { padding-left: var(--spacing-xs); padding-right: var(--spacing-xs); }
.px-2 { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-3 { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-4 { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-1 { padding-top: var(--spacing-xs); padding-bottom: var(--spacing-xs); }
.py-2 { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-3 { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-4 { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }

/* Responsive margin utilities */
.m-0 { margin: 0; }
.m-1 { margin: var(--spacing-xs); }
.m-2 { margin: var(--spacing-sm); }
.m-3 { margin: var(--spacing-md); }
.m-4 { margin: var(--spacing-lg); }
.m-5 { margin: var(--spacing-xl); }

.mx-0 { margin-left: 0; margin-right: 0; }
.mx-1 { margin-left: var(--spacing-xs); margin-right: var(--spacing-xs); }
.mx-2 { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
.mx-3 { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
.mx-4 { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); }

.my-0 { margin-top: 0; margin-bottom: 0; }
.my-1 { margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); }
.my-2 { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.my-3 { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
.my-4 { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }

@media (min-width: 36rem) { /* 576px */
  .gap-sm-0 {
    gap: 0;
  }
  
  .gap-sm-1 {
    gap: var(--spacing-xs);
  }
  
  .gap-sm-2 {
    gap: var(--spacing-sm);
  }
  
  .gap-sm-3 {
    gap: var(--spacing-md);
  }
  
  .gap-sm-4 {
    gap: var(--spacing-lg);
  }
}

@media (min-width: 48rem) { /* 768px */
  .gap-md-0 {
    gap: 0;
  }
  
  .gap-md-1 {
    gap: var(--spacing-xs);
  }
  
  .gap-md-2 {
    gap: var(--spacing-sm);
  }
  
  .gap-md-3 {
    gap: var(--spacing-md);
  }
  
  .gap-md-4 {
    gap: var(--spacing-lg);
  }
}

/* Responsive typography utilities */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* Responsive display utilities */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }

/* Flex utilities */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

.flex-1 { flex: 1 1; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-none { flex: none; }

/* Grid utilities */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-full { grid-column: 1 / -1; }

/* PWA Install Prompt Styles */

.pwa-install-prompt {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 400px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  overflow: hidden;
  animation: slideUp 0.3s ease-out;
}

.pwa-install-prompt-content {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.pwa-install-prompt-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.pwa-install-prompt-icon img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
}

.pwa-install-prompt-text {
  text-align: center;
  margin-bottom: 16px;
}

.pwa-install-prompt-text h3 {
  font-size: 18px;
  font-weight: 600;
  color: #0a1950;
  margin: 0 0 8px 0;
}

.pwa-install-prompt-text p {
  font-size: 14px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

.pwa-install-prompt-buttons {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.pwa-install-prompt-dismiss,
.pwa-install-prompt-install {
  flex: 1 1;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.pwa-install-prompt-dismiss {
  background-color: #f1f5f9;
  color: #64748b;
  border: none;
}

.pwa-install-prompt-dismiss:hover {
  background-color: #e2e8f0;
}

.pwa-install-prompt-install {
  background-color: #ffd700;
  color: #0a1950;
  border: none;
}

.pwa-install-prompt-install:hover {
  background-color: #e6c200;
}

@keyframes slideUp {
  from {
    transform: translate(-50%, 100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

/* Media Queries */
@media (max-width: 480px) {
  .pwa-install-prompt {
    width: 95%;
    bottom: 10px;
  }

  .pwa-install-prompt-content {
    padding: 12px;
  }

  .pwa-install-prompt-icon img {
    width: 48px;
    height: 48px;
  }

  .pwa-install-prompt-text h3 {
    font-size: 16px;
  }

  .pwa-install-prompt-text p {
    font-size: 13px;
  }
}

/*
 * dashboard-sections.css
 * This file contains styles for dashboard sections and components
 */

/* Variables are imported in index.css */

/* ===== DASHBOARD PAGES ===== */
.dashboard-page,
.marketing-dashboard,
.leads-dashboard,
.clients-dashboard,
.investor-dashboard,
.partner-dashboard {
  width: 100%;
  padding: 0;
  word-wrap: break-word;
  overflow-y: visible;
  box-sizing: border-box;
  margin: 0;
  transition: width var(--transition-default);
  font-family: var(--font-family);
  background-color: var(--color-background-white);
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}

/* ===== DASHBOARD SECTIONS ===== */
.dashboard-section,
.summary-section,
.ai-summary,
.goal-progress,
.stats-section,
.table-section,
.shortcuts-section {
  background-color: var(--color-background-dark);
  border-radius: var(--border-radius);
  margin-bottom: var(--section-spacing);
  box-shadow: var(--shadow-md);
  color: var(--color-text-primary);
  overflow: visible;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  border: 1px solid var(--color-border);
  box-sizing: border-box;
  padding: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  position: relative;
  transition: all var(--transition-default);
}

/* ===== SECTION HEADERS ===== */
.section-title,
.dashboard-section-header,
.stats-header,
.table-header {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0;
  color: var(--color-text-primary);
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dashboard-section-header h2,
.stats-header h2,
.table-header h2,
.ai-summary h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
  padding: 0;
}

/* ===== SECTION CONTENT ===== */
.dashboard-section-content,
.stats-section > div:not(.stats-header),
.table-section > div:not(.table-header),
.ai-summary > p,
.goal-progress > div,
.metrics-grid,
.sales-goal-container,
.lead-analytics-container,
.shortcuts-grid,
.meetings-container,
.ai-summary-wrapper {
  padding: var(--spacing-md) var(--spacing-lg);
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* Fix for nested content in dashboard sections */
.dashboard-section-content .goal-progress-container,
.dashboard-section-content .stats-grid,
.dashboard-section-content .shortcuts-grid,
.dashboard-section-content .summary-text {
  padding: 0;
}

/* ===== METRICS GRID ===== */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr)); /* 150px */
  grid-gap: var(--spacing-md);
  gap: var(--spacing-md);
  width: 100%;
  box-sizing: border-box;
}

.metric-card {
  background-color: var(--color-background-light);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  text-align: center;
  display: grid;
  grid-template-rows: auto auto auto;
  align-items: center;
  transition: transform var(--transition-default);
}

.metric-card:hover {
  transform: translateY(-0.25rem);
}

.metric-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
}

.metric-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 5px;
  color: var(--color-text-primary);
}

.metric-change {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.positive {
  color: var(--color-positive);
}

.negative {
  color: var(--color-negative);
}

/* ===== STATS GRID ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); /* 200px */
  grid-gap: var(--spacing-md);
  gap: var(--spacing-md);
  width: 100%;
}

.stat-card {
  background-color: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-rows: auto 1fr;
  transition: transform var(--transition-default), box-shadow var(--transition-default);
}

.stat-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: var(--shadow-md);
}

.stat-card h3 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
}

.stat-card .value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

/* ===== SHORTCUTS GRID ===== */
.shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr)); /* 150px */
  grid-gap: var(--spacing-md);
  gap: var(--spacing-md);
  width: 100%;
}

.shortcut-card {
  background-color: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-items: center;
  cursor: pointer;
  transition: all var(--transition-default);
  aspect-ratio: 1 / 1;
}

.shortcut-card:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.shortcut-icon {
  font-size: var(--font-size-xl);
  color: var(--color-secondary);
  margin-bottom: var(--spacing-md);
}

.shortcut-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  text-align: center;
}

/* ===== MEETINGS SECTION ===== */
.meetings-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr)); /* 300px */
  grid-gap: var(--spacing-sm);
  gap: var(--spacing-sm);
  width: 100%;
  box-sizing: border-box;
}

.meeting-card {
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  transition: all var(--transition-default);
}

.meeting-link {
  text-decoration: none;
  color: inherit;
}

.meeting-card:hover {
  background-color: var(--color-background-light);
  transform: translateY(-2px);
}

.meeting-info h3 {
  font-size: var(--font-size-md);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-primary);
}

.meeting-time, .meeting-type {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  margin-top: 5px;
}

/* ===== GOAL PROGRESS ===== */
.goal-progress-container {
  width: 100%;
}

.goal-details {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
}

.goal-amount {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.goal-current {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}

.goal-progress-bar {
  width: 100%;
  height: 8px;
  background-color: var(--color-background-light);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.goal-progress-fill {
  height: 100%;
  background-color: var(--color-secondary);
  border-radius: var(--border-radius-sm);
}

/* ===== SALES GOAL ===== */
.sales-goal-container {
  width: 100%;
  box-sizing: border-box;
}

.sales-goal-amount {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-md);
  color: var(--color-text-primary);
}

.progress-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
}

.progress-bar-container {
  height: 10px;
  background-color: var(--color-background-light);
  border-radius: 5px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-positive) 0%, #ffec80 100%);
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* ===== LEAD ANALYTICS ===== */
.lead-analytics-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--spacing-md);
  gap: var(--spacing-md);
  width: 100%;
  box-sizing: border-box;
}

.lead-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: var(--spacing-md);
  gap: var(--spacing-md);
  width: 100%;
}

.lead-stat {
  text-align: center;
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
}

.lead-stat-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-primary);
}

.lead-stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.subsection-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-md);
  color: var(--color-text-primary);
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
/* Use em units for media queries for better cross-browser consistency */

/* Medium screens */
@media (max-width: var(--breakpoint-lg)) {
  /* Adjust grid layouts for medium screens */
  .metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); /* 128px */
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); /* 160px */
  }
}

/* Small screens */
@media (max-width: var(--breakpoint-md)) {
  /* Reduce padding on section headers */
  .dashboard-section-header,
  .stats-header,
  .table-header,
  .section-title {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  /* Consistent padding for all section content */
  .dashboard-section-content,
  .stats-section > div:not(.stats-header),
  .table-section > div:not(.table-header),
  .ai-summary > p,
  .goal-progress > div,
  .metrics-grid,
  .sales-goal-container,
  .lead-analytics-container,
  .shortcuts-grid,
  .meetings-container,
  .ai-summary-wrapper {
    padding: var(--spacing-md);
  }

  /* Adjust grid layouts for small screens */
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr)); /* 140px */
    gap: var(--spacing-sm);
  }

  .shortcuts-grid {
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); /* 120px */
    gap: var(--spacing-sm);
  }

  /* Reduce font sizes */
  .stat-card .value {
    font-size: var(--font-size-lg);
  }

  /* Single column layouts for certain components */
  .meetings-container,
  .lead-stats {
    grid-template-columns: 1fr;
  }
}

/* Extra small screens */
@media (max-width: var(--breakpoint-sm)) {
  /* Further reduce padding */
  .dashboard-section-content,
  .stats-section > div:not(.stats-header),
  .table-section > div:not(.table-header),
  .metrics-grid,
  .shortcuts-grid {
    padding: var(--spacing-sm);
    gap: var(--spacing-sm);
  }

  /* Single column for all grids */
  .metrics-grid,
  .stats-grid,
  .shortcuts-grid {
    grid-template-columns: 1fr;
  }

  /* Use clamp for responsive text */
  .section-title,
  .dashboard-section-header h2 {
    font-size: clamp(1rem, 5vw, 1.125rem);
  }
}

/* Main CSS entry point for Harmonix Health */

/* Font loading - Custom Euopa font family */

/* Import reset first */

/* Import variables (single source of truth) */

/* Import themes */

/* Import base styles */

/* Import layout styles */

/* Import responsive utilities */

/* Import PWA styles */

/* Import component styles */

/* Additional global styles */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* Toast.module.css */
/* Styles for the Toast component */

.Toast_toastContainer__Bki6C {
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  z-index: var(--z-index-toast);
  pointer-events: none;
}

.Toast_toast__n63es {
  display: flex;
  align-items: flex-start;
  background-color: var(--color-background-dark);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-md);
  min-width: 18rem;
  max-width: 24rem;
  pointer-events: auto;
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  border-left: 4px solid var(--color-primary);
}

.Toast_toast__n63es.Toast_visible__2lakE {
  transform: translateX(0);
  opacity: 1;
}

.Toast_toast__n63es.Toast_exiting__ySPwA {
  transform: translateX(100%);
  opacity: 0;
}

/* Toast variants */
.Toast_info__yzwwK {
  border-left-color: var(--color-info);
}

.Toast_success__\+YGhu {
  border-left-color: var(--color-success);
}

.Toast_warning__t7rao {
  border-left-color: var(--color-warning);
}

.Toast_error__x9\+KZ {
  border-left-color: var(--color-error);
}

/* Toast content */
.Toast_icon__h6VHn {
  margin-right: var(--spacing-sm);
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.Toast_info__yzwwK .Toast_icon__h6VHn {
  color: var(--color-info);
}

.Toast_success__\+YGhu .Toast_icon__h6VHn {
  color: var(--color-success);
}

.Toast_warning__t7rao .Toast_icon__h6VHn {
  color: var(--color-warning);
}

.Toast_error__x9\+KZ .Toast_icon__h6VHn {
  color: var(--color-error);
}

.Toast_content__M1Jvx {
  flex: 1 1;
}

.Toast_title__tr3jf {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-xs) 0;
}

.Toast_message__GQr2S {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin: 0;
}

.Toast_closeButton__zfjde {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-default);
  margin-left: var(--spacing-sm);
}

.Toast_closeButton__zfjde:hover {
  color: var(--color-text-primary);
}

/* Progress bar */
.Toast_progressBar__ma2lu {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.2);
}

.Toast_info__yzwwK .Toast_progressBar__ma2lu {
  background-color: var(--color-info);
}

.Toast_success__\+YGhu .Toast_progressBar__ma2lu {
  background-color: var(--color-success);
}

.Toast_warning__t7rao .Toast_progressBar__ma2lu {
  background-color: var(--color-warning);
}

.Toast_error__x9\+KZ .Toast_progressBar__ma2lu {
  background-color: var(--color-error);
}

/* Toast positions */
.Toast_topRight__C6Yzh {
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  bottom: auto;
  left: auto;
}

.Toast_topLeft__PZ0Ik {
  top: var(--spacing-lg);
  left: var(--spacing-lg);
  bottom: auto;
  right: auto;
}

.Toast_bottomLeft__cQbVn {
  bottom: var(--spacing-lg);
  left: var(--spacing-lg);
  top: auto;
  right: auto;
}

.Toast_bottomRight__SoDRo {
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  top: auto;
  left: auto;
}

.Toast_topCenter__jpR\+s {
  top: var(--spacing-lg);
  left: 50%;
  transform: translateX(-50%);
  bottom: auto;
  right: auto;
}

.Toast_bottomCenter__7TGsv {
  bottom: var(--spacing-lg);
  left: 50%;
  transform: translateX(-50%);
  top: auto;
  right: auto;
}

/* Responsive adjustments */
@media (max-width: 48rem) { /* 768px */
  .Toast_toastContainer__Bki6C {
    bottom: 0;
    right: 0;
    left: 0;
    padding: var(--spacing-sm);
  }
  
  .Toast_toast__n63es {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
  
  .Toast_topRight__C6Yzh,
  .Toast_topLeft__PZ0Ik,
  .Toast_bottomLeft__cQbVn,
  .Toast_bottomRight__SoDRo,
  .Toast_topCenter__jpR\+s,
  .Toast_bottomCenter__7TGsv {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    transform: none;
  }
}

/* DashboardWrapper.module.css */
/* Styles for the dashboard wrapper component */

.DashboardWrapper_dashboardLayoutContainer__UE6Lq {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  position: relative;
}

.DashboardWrapper_dashboardLayoutContainer__UE6Lq.DashboardWrapper_sidebarCollapsed__rh78B {
  --sidebar-width: 60px;
}

.DashboardWrapper_sidebar__ENwLL {
  position: fixed;
  top: 60px;
  left: 0;
  width: 240px;
  width: var(--sidebar-width, 240px);
  height: calc(100vh - 60px);
  background-color: var(--color-background-dark);
  border-right: 1px solid var(--color-border);
  z-index: 100;
  transition: width var(--transition-default), transform var(--transition-default);
  overflow-y: auto;
  overflow-x: hidden;
}

.DashboardWrapper_sidebar__ENwLL.DashboardWrapper_collapsed__TU7lw {
  width: 60px;
  width: var(--sidebar-width, 60px);
}

.DashboardWrapper_mobileMenuOverlay__KXuMP {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-default), visibility var(--transition-default);
}

.DashboardWrapper_mobileMenuOverlay__KXuMP.DashboardWrapper_active__OSLIC {
  opacity: 1;
  visibility: visible;
}

.DashboardWrapper_dashboardContent__c9WKo {
  margin-left: 240px;
  margin-left: var(--sidebar-width, 240px);
  margin-top: 60px;
  width: calc(100% - 240px);
  width: calc(100% - var(--sidebar-width, 240px));
  min-height: calc(100vh - 60px);
  transition: margin-left var(--transition-default), width var(--transition-default);
  background-color: var(--color-background);
  padding: var(--spacing-md);
  box-sizing: border-box;
}

.DashboardWrapper_dashboardWrapper__yCfOn {
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

/* When sidebar is collapsed */
.DashboardWrapper_sidebarCollapsed__rh78B .DashboardWrapper_dashboardContent__c9WKo {
  margin-left: 60px;
  margin-left: var(--sidebar-width, 60px);
  width: calc(100% - 60px);
  width: calc(100% - var(--sidebar-width, 60px));
}

/* Mobile styles */
@media (max-width: 768px) {
  .DashboardWrapper_sidebar__ENwLL {
    transform: translateX(-100%);
  }
  
  .DashboardWrapper_sidebar__ENwLL.DashboardWrapper_mobileOpen__AJoBr {
    transform: translateX(0);
  }
  
  .DashboardWrapper_dashboardContent__c9WKo,
  .DashboardWrapper_sidebarCollapsed__rh78B .DashboardWrapper_dashboardContent__c9WKo {
    margin-left: 0;
    width: 100%;
  }
}

/* Form.module.css */
/* Styles for form components */

/* Form container */
.Form_formContainer__fZuYi {
  width: 100%;
  max-width: 100%;
}

/* Form group */
.Form_formGroup__vz43k {
  margin-bottom: var(--spacing-md);
  position: relative;
}

/* Form label */
.Form_formLabel__hl4mQ {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.Form_required__m7Ka0::after {
  content: '*';
  color: var(--color-secondary);
  margin-left: var(--spacing-xs);
}

/* Form input */
.Form_formInput__Jw-lq {
  display: block;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-background-light);
  background-clip: padding-box;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  transition: border-color var(--transition-default), box-shadow var(--transition-default);
}

.Form_formInput__Jw-lq:focus {
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.25);
}

.Form_formInput__Jw-lq::placeholder {
  color: var(--color-text-tertiary);
  opacity: 0.7;
}

.Form_formInput__Jw-lq:disabled,
.Form_formInput__Jw-lq[readonly] {
  background-color: var(--color-background-darker);
  opacity: 0.7;
  cursor: not-allowed;
}

/* Form select */
.Form_formSelect__0KqiX {
  display: block;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-background-light);
  background-clip: padding-box;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  transition: border-color var(--transition-default), box-shadow var(--transition-default);
  -webkit-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 24 24%27 stroke=%27%23ffffff%27%3E%3Cpath stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27M19 9l-7 7-7-7%27%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

.Form_formSelect__0KqiX:focus {
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.25);
}

.Form_formSelect__0KqiX:disabled {
  background-color: var(--color-background-darker);
  opacity: 0.7;
  cursor: not-allowed;
}

/* Form textarea */
.Form_formTextarea__2VEUf {
  display: block;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-background-light);
  background-clip: padding-box;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  transition: border-color var(--transition-default), box-shadow var(--transition-default);
  resize: vertical;
  min-height: 100px;
}

.Form_formTextarea__2VEUf:focus {
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.25);
}

.Form_formTextarea__2VEUf::placeholder {
  color: var(--color-text-tertiary);
  opacity: 0.7;
}

.Form_formTextarea__2VEUf:disabled,
.Form_formTextarea__2VEUf[readonly] {
  background-color: var(--color-background-darker);
  opacity: 0.7;
  cursor: not-allowed;
}

/* Form checkbox and radio */
.Form_formCheck__INEA5 {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.Form_formCheckInput__VLPQ\+ {
  width: 1rem;
  height: 1rem;
  margin-right: var(--spacing-sm);
  cursor: pointer;
}

.Form_formCheckLabel__z\+nck {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
}

/* Form help text */
.Form_formHelpText__rzovB {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Form error */
.Form_formError__ZT2n\+ {
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--color-error);
}

.Form_inputError__R1vpL {
  border-color: var(--color-error);
}

.Form_inputError__R1vpL:focus {
  box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25);
}

/* Form success */
.Form_inputSuccess__96D5w {
  border-color: var(--color-success);
}

.Form_inputSuccess__96D5w:focus {
  box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.25);
}

/* Form warning */
.Form_inputWarning__5bXon {
  border-color: var(--color-warning);
}

.Form_inputWarning__5bXon:focus {
  box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.25);
}

/* Form grid */
.Form_formGrid__8ovaq {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: var(--spacing-md);
  gap: var(--spacing-md);
}

.Form_col1__S1eSK { grid-column: span 1; }
.Form_col2__2ZuN3 { grid-column: span 2; }
.Form_col3__\+QVP7 { grid-column: span 3; }
.Form_col4__Mwm-4 { grid-column: span 4; }
.Form_col5__4zq\+f { grid-column: span 5; }
.Form_col6__gVTxO { grid-column: span 6; }
.Form_col7__J5edz { grid-column: span 7; }
.Form_col8__GaQuE { grid-column: span 8; }
.Form_col9__HNwhB { grid-column: span 9; }
.Form_col10__9fcK7 { grid-column: span 10; }
.Form_col11__PrixQ { grid-column: span 11; }
.Form_col12__JhCwJ { grid-column: span 12; }

/* Form actions */
.Form_formActions__7H--5 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

/* Form buttons */
.Form_formButton__nEU74 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  border: 1px solid transparent;
  border-radius: var(--border-radius-sm);
  transition: color var(--transition-default), background-color var(--transition-default), border-color var(--transition-default), box-shadow var(--transition-default);
}

.Form_formButton__nEU74:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.25);
}

.Form_formButton__nEU74:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.Form_formButtonPrimary__ZgT6X {
  color: var(--color-background-dark);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.Form_formButtonPrimary__ZgT6X:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.Form_formButtonSecondary__CRGCV {
  color: var(--color-text-primary);
  background-color: var(--color-background-light);
  border-color: var(--color-border);
}

.Form_formButtonSecondary__CRGCV:hover {
  background-color: var(--color-surface-hover);
}

.Form_formButtonDanger__NFQFs {
  color: white;
  background-color: var(--color-error);
  border-color: var(--color-error);
}

.Form_formButtonDanger__NFQFs:hover {
  background-color: #dc2626;
  border-color: #dc2626;
}

.Form_formButtonIcon__7vilS {
  margin-right: var(--spacing-sm);
}

/* Form input with icon */
.Form_inputWithIcon__c9\+Up {
  position: relative;
}

.Form_inputIcon__dwc13 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  pointer-events: none;
}

.Form_iconLeft__NmkHr {
  left: var(--spacing-md);
}

.Form_iconRight__NedcB {
  right: var(--spacing-md);
}

.Form_inputWithIconLeft__RS3Lu {
  padding-left: calc(var(--spacing-md) * 2 + 1rem);
}

.Form_inputWithIconRight__oq8bt {
  padding-right: calc(var(--spacing-md) * 2 + 1rem);
}

/* Form input sizes */
.Form_inputSm__cB2tZ {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
}

.Form_inputLg__0770P {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-md);
}

/* Form group inline */
.Form_formGroupInline__0OhdQ {
  display: flex;
  align-items: center;
}

.Form_formGroupInline__0OhdQ .Form_formLabel__hl4mQ {
  margin-bottom: 0;
  margin-right: var(--spacing-md);
  min-width: 100px;
}

/* Search Bar */
.Form_searchContainer__Mj78G {
  position: relative;
  width: 100%;
  max-width: 300px;
}

.Form_searchIconWrapper__Qxcl0 {
  position: absolute;
  left: var(--spacing-sm);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.Form_searchIcon__2oBEa {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.Form_searchInput__PmKsP {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) calc(var(--spacing-sm) * 3);
  background-color: var(--color-background-light);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  transition: all var(--transition-default);
}

.Form_searchInput__PmKsP:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.25);
}

/* Responsive adjustments */
@media (max-width: 48rem) { /* 768px */
  .Form_formGrid__8ovaq {
    grid-template-columns: repeat(6, 1fr);
  }

  .Form_col1__S1eSK, .Form_col2__2ZuN3, .Form_col3__\+QVP7, .Form_col4__Mwm-4, .Form_col5__4zq\+f, .Form_col6__gVTxO {
    grid-column: span 6;
  }

  .Form_col7__J5edz, .Form_col8__GaQuE, .Form_col9__HNwhB, .Form_col10__9fcK7, .Form_col11__PrixQ, .Form_col12__JhCwJ {
    grid-column: span 6;
  }

  .Form_formActions__7H--5 {
    flex-direction: column;
    align-items: stretch;
  }

  .Form_formButton__nEU74 {
    width: 100%;
  }

  .Form_formGroupInline__0OhdQ {
    flex-direction: column;
    align-items: flex-start;
  }

  .Form_formGroupInline__0OhdQ .Form_formLabel__hl4mQ {
    margin-bottom: var(--spacing-xs);
    margin-right: 0;
  }
}

@media (max-width: 36rem) { /* 576px */
  .Form_formGrid__8ovaq {
    grid-template-columns: 1fr;
  }

  .Form_col1__S1eSK, .Form_col2__2ZuN3, .Form_col3__\+QVP7, .Form_col4__Mwm-4, .Form_col5__4zq\+f, .Form_col6__gVTxO,
  .Form_col7__J5edz, .Form_col8__GaQuE, .Form_col9__HNwhB, .Form_col10__9fcK7, .Form_col11__PrixQ, .Form_col12__JhCwJ {
    grid-column: 1 / -1;
  }
}

/* PrivateTopNav.module.css */
/* CSS Module for the PrivateTopNav component */

.PrivateTopNav_topNav__oEN0b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-md);
  height: var(--header-height);
  background-color: var(--color-background-dark);
  border-bottom: 1px solid var(--color-border);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-index-header);
}

.PrivateTopNav_logo__BDmNc a {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  text-decoration: none;
}

.PrivateTopNav_searchBar__-zEib {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  margin: 0 var(--spacing-md);
  flex: 1 1;
  max-width: 400px;
}

.PrivateTopNav_searchIcon__dx2CM {
  color: var(--color-text-secondary);
  margin-right: var(--spacing-xs);
}

.PrivateTopNav_searchBar__-zEib input {
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  outline: none;
  width: 100%;
}

.PrivateTopNav_searchBar__-zEib input::placeholder {
  color: var(--color-text-secondary);
}

.PrivateTopNav_navControls__Plfxz {
  display: flex;
  align-items: center;
}

.PrivateTopNav_dateRangeSelector__WzOzR {
  margin-right: var(--spacing-md);
}

.PrivateTopNav_dateRangeSelect__w-7hk {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
  border: none;
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  outline: none;
  cursor: pointer;
}

.PrivateTopNav_statsToggle__zgc\+3 {
  margin-right: var(--spacing-md);
}

.PrivateTopNav_toggleButtons__KmISb {
  display: flex;
  border-radius: var(--border-radius-sm);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.PrivateTopNav_statsButton__0ziFi {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
  border: none;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-default);
  border-radius: 0;
  min-width: 80px;
  text-align: center;
}

.PrivateTopNav_statsButton__0ziFi.PrivateTopNav_active__PjuLo {
  background-color: var(--color-primary);
  color: var(--color-background-dark);
  font-weight: var(--font-weight-bold);
}

.PrivateTopNav_statsButton__0ziFi:hover:not(.PrivateTopNav_active__PjuLo) {
  background-color: rgba(255, 255, 255, 0.2);
}

.PrivateTopNav_statsButton__0ziFi.PrivateTopNav_active__PjuLo:hover {
  background-color: var(--color-primary-hover);
}

.PrivateTopNav_mobileMenuButton__i6FUu {
  display: none;
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  cursor: pointer;
  padding: var(--spacing-xs);
}

/* Responsive styles */
@media (max-width: 768px) {
  .PrivateTopNav_searchBar__-zEib {
    display: none;
  }

  .PrivateTopNav_navControls__Plfxz {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .PrivateTopNav_dateRangeSelector__WzOzR,
  .PrivateTopNav_statsToggle__zgc\+3 {
    margin: 0 var(--spacing-xs);
  }

  .PrivateTopNav_mobileMenuButton__i6FUu {
    display: block;
    margin-right: var(--spacing-sm);
  }
}

@media (max-width: 576px) {
  .PrivateTopNav_topNav__oEN0b {
    padding: 0 var(--spacing-sm);
  }

  .PrivateTopNav_logo__BDmNc a {
    font-size: var(--font-size-lg);
  }

  .PrivateTopNav_dateRangeSelect__w-7hk {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  .PrivateTopNav_statsButton__0ziFi {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-xs);
    min-width: 60px;
  }
}

/* SidebarNav.module.css */
/* CSS Module for the SidebarNav component */

.SidebarNav_sidebar__VuDUE {
  width: var(--sidebar-width);
  background-color: var(--color-background-white);
  border-right: 1px solid var(--color-border-light);
  position: fixed;
  top: var(--header-height);
  bottom: 0;
  left: 0;
  z-index: var(--z-index-sidebar);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - var(--header-height));
  box-shadow: 2px 0 8px rgba(11, 17, 44, 0.08);
  box-sizing: border-box;
  transition: var(--transition-sidebar);
}

.SidebarNav_collapsed__gEIdR {
  width: var(--sidebar-collapsed-width);
}

.SidebarNav_toggle__WeF87 {
  position: absolute;
  top: 20px;
  right: -20px;
  width: 40px;
  height: 40px;
  background-color: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-background-white);
  cursor: pointer;
  z-index: var(--z-index-toggle);
  box-shadow: 0 4px 12px rgba(26, 107, 199, 0.3);
  transition: all var(--transition-default);
  overflow: hidden;
  border: 2px solid var(--color-background-white);
}

.SidebarNav_toggle__WeF87:hover {
  background-color: var(--color-primary-hover);
}

.SidebarNav_nav__eMAvV {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
}

.SidebarNav_navList__cmaom {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.SidebarNav_navItem__utBSX {
  margin: 0;
  padding: 0;
  width: 100%;
  margin-bottom: 2px; /* Reduce vertical spacing between links */
}

.SidebarNav_navLink__pZdVr {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all var(--transition-default);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  width: 100%;
  box-sizing: border-box;
}

.SidebarNav_navLink__pZdVr:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--color-text-primary);
}

.SidebarNav_active__1cWjk {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
  border-left: 3px solid var(--color-primary);
}

.SidebarNav_icon__yO5GN {
  margin-right: 12px;
  font-size: 18px;
  width: 20px;
  text-align: center;
}

.SidebarNav_collapsed__gEIdR .SidebarNav_text__UegAx {
  display: none;
}

.SidebarNav_collapsed__gEIdR .SidebarNav_icon__yO5GN {
  margin-right: 0;
  font-size: 36px; /* Make collapsed sidebar icons 200% larger */
  width: 100%;
}

.SidebarNav_footer__Pl5b\+ {
  margin-top: auto;
  padding: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

.SidebarNav_collapsed__gEIdR .SidebarNav_footer__Pl5b\+ {
  padding: 0;
}

.SidebarNav_user__alQWz {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding: 8px;
  border-radius: 4px;
  transition: background-color var(--transition-default);
}

.SidebarNav_collapsed__gEIdR .SidebarNav_user__alQWz {
  padding: 0;
  border-radius: 0;
  width: 100%;
}

.SidebarNav_user__alQWz:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.SidebarNav_avatar__RBF2T {
  width: 36px;
  height: 36px;
  background-color: var(--color-primary);
  color: var(--color-background-dark);
  border-radius: 4px; /* Square with slightly rounded corners */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  margin-right: 12px;
  overflow: hidden; /* For the profile image */
}

.SidebarNav_profileImage__5vACW {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.SidebarNav_initials__jO-bd {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
}

.SidebarNav_collapsed__gEIdR .SidebarNav_initials__jO-bd {
  font-size: 20px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.SidebarNav_collapsed__gEIdR .SidebarNav_avatar__RBF2T {
  margin-right: 0;
  width: 100%;
  height: 48px;
  border-radius: 0;
}

.SidebarNav_userInfo__MPD4T {
  display: flex;
  flex-direction: column;
}

.SidebarNav_userName__zAGWY {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.SidebarNav_userRole__xcaRq {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.SidebarNav_lastUpdated__iMNVd {
  display: flex;
  align-items: center;
  margin-top: 12px;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.SidebarNav_lastUpdatedIcon__0jtyw {
  margin-right: var(--spacing-sm);
}

/* Responsive adjustments */
@media (max-width: var(--breakpoint-md)) {
  .SidebarNav_sidebar__VuDUE {
    transform: translateX(-100%);
  }

  .SidebarNav_sidebar__VuDUE.SidebarNav_mobileOpen__jfcnp {
    transform: translateX(0);
  }

  .SidebarNav_toggle__WeF87 {
    right: -20px;
  }
}

/* Footer.module.css */
.Footer_footer__AcWGP {
  background-color: #0B112C; /* Oxford Blue - dark background */
  color: var(--color-text-light); /* Light cream text */
  padding: 4rem 2rem 2rem;
  margin-top: 0; /* Remove gap between sections and footer */
}

.Footer_footerContent__Rji73 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2rem;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 2rem;
}

/* Company Info Section */
.Footer_companyInfo__XOfTp {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.Footer_footerLogo__nLAvE {
  margin-bottom: 1rem;
}

.Footer_footerLogoImage__nw2oB {
  height: 30px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.Footer_footerLogoImage__nw2oB:hover {
  opacity: 0.8;
}

.Footer_companyName__QzJUa {
  color: #FFFFFF; /* White text */
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.Footer_companyTagline__6Cnag {
  color: #D8D3CE; /* Tinderwood - light gray text */
  margin: 0.5rem 0 2rem;
  font-size: 1.1rem;
  line-height: 1.5;
}

.Footer_socialIcons__S1MSe {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

.Footer_socialIcon__j0f-t {
  color: #D8D3CE; /* Tinderwood - light gray */
  font-size: 1.5rem;
  transition: all 0.3s ease;
  padding: 0.5rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
}

.Footer_socialIcon__j0f-t:hover {
  color: #1A6BC7; /* Castle Blue */
  background-color: #FFFFFF; /* White background on hover */
  transform: translateY(-2px);
}

/* Footer Sections */
.Footer_footerSection__1Lxyb {
  display: flex;
  flex-direction: column;
}

.Footer_sectionTitle__VK\+i7 {
  color: #1A6BC7; /* Castle Blue */
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 1rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.Footer_sectionTitle__VK\+i7::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2rem;
  height: 2px;
  background-color: #1A6BC7; /* Castle Blue */
}

/* Footer Links */
.Footer_footerLinks__UykQE {
  list-style: none;
  padding: 0;
  margin: 0;
}

.Footer_footerLinks__UykQE li {
  margin-bottom: 0.75rem;
}

.Footer_footerLinks__UykQE a {
  color: #FFFFFF; /* White text */
  text-decoration: none;
  transition: color 0.2s ease;
}

.Footer_footerLinks__UykQE a:hover {
  color: #1A6BC7; /* Castle Blue */
}

/* Contact List */
.Footer_contactList__ywUE2 {
  list-style: none;
  padding: 0;
  margin: 0;
}

.Footer_contactItem__b0hYA {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.Footer_contactIcon__KQjEE {
  margin-right: 0.5rem;
  color: #1A6BC7; /* Castle Blue */
}

.Footer_contactItem__b0hYA a {
  color: #FFFFFF; /* White text */
  text-decoration: none;
  transition: color 0.2s ease;
}

.Footer_contactItem__b0hYA a:hover {
  color: #1A6BC7; /* Castle Blue */
}

/* Footer Bottom */
.Footer_footerBottom__m6e3x {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 1200px;
  margin: 0 auto;
}

.Footer_copyright__lghYs {
  margin: 0;
  font-size: 0.875rem;
  color: #FFFFFF; /* White text */
}

.Footer_legalLinks__FclgV {
  display: flex;
  align-items: center;
}

.Footer_legalLinks__FclgV a {
  color: #FFFFFF; /* White text */
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease;
}

.Footer_legalLinks__FclgV a:hover {
  color: #1A6BC7; /* Castle Blue */
}

.Footer_divider__PAION {
  margin: 0 0.5rem;
  color: #FFFFFF; /* White text */
}

/* HH Logo at Bottom Center */
.Footer_footerBottomLogo__393oF {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0 1rem;
  border-top: 1px solid rgba(216, 211, 206, 0.2);
  margin-top: 2rem;
  gap: 0.25rem;
}

.Footer_bottomLogoImage__wjgIp {
  height: 85px; /* Increased by 70% from 50px (50 * 1.7 = 85) */
  width: auto;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.Footer_bottomLogoImage__wjgIp:hover {
  opacity: 1;
}

.Footer_trademarkSymbol__\+TVjr {
  color: #D8D3CE;
  font-size: 1rem;
  font-weight: 400;
  vertical-align: top;
  margin-left: 0.125rem;
}

/* Responsive Styles */
@media (max-width: 992px) {
  .Footer_footerContent__Rji73 {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 3rem;
  }
}

@media (max-width: 576px) {
  .Footer_footerContent__Rji73 {
    grid-template-columns: 1fr;
  }
  
  .Footer_footerBottom__m6e3x {
    flex-direction: column;
    text-align: center;
  }
  
  .Footer_copyright__lghYs {
    margin-bottom: 1rem;
  }

  .Footer_footerBottomLogo__393oF {
    padding: 1.5rem 0 0.5rem;
    margin-top: 1.5rem;
  }

  .Footer_bottomLogoImage__wjgIp {
    height: 40px;
  }
}

/* Header.module.css */
/* Styles for the site header with new layout */

/* CRITICAL FIX: Header with perfect alignment and design */
.Header_siteHeader__QPJ\+D {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* CRITICAL: Use light grey cream background color */
  background-color: #d8d3ce;
  height: 80px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.Header_siteHeader__QPJ\+D.Header_scrolled__1HfOc {
  height: 75px;
}

.Header_headerContainer__tdYC7 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  padding: 0 2rem;
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  grid-gap: 2rem;
  gap: 2rem;
  height: 100%;
}

/* CRITICAL FIX: Perfect Logo Alignment and Styling */
.Header_leftLogo__DE4lv {
  justify-self: start;
  display: flex;
  align-items: center;
  height: 100%;
}

.Header_leftLogoLink__vW9Pk {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.3s ease;
  height: 100%;
  padding: 0.5rem;
}

.Header_fallbackLeftLogo__3DtHD {
  /* CRITICAL: Use theme-aware primary text color for dark background */
  color: var(--color-text-primary);
  font-size: 2rem;
  font-weight: 900;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
}

.Header_centerLogo__TPUvo {
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  /* Use grid positioning instead of absolute for proper layout */
  position: relative;
}

.Header_centerLogoLink__0OTMD {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
  height: 100%;
}

.Header_textLogoImage__4uRSR {
  height: 39px; /* Increased by 30% from 30px */
  width: auto;
  transition: transform 0.3s ease;
}

.Header_textLogoImage__4uRSR:hover {
  transform: scale(1.02);
}

.Header_centerLogoImage__qFiDy {
  transition: transform 0.3s ease;
  /* CRITICAL: Ensure logo is visible and properly sized */
  display: block;
  max-width: 100%;
  height: auto;
}

.Header_centerLogoImage__qFiDy:hover {
  transform: scale(1.1);
}

.Header_logoSmall__LG96z {
  height: 40px;
  width: auto;
}

.Header_logoMedium__OK7PJ {
  height: 90px; /* Increased by 25% from 72px (72 * 1.25 = 90) */
  width: auto;
}

.Header_logoLarge__V72ht {
  height: 70px;
  width: auto;
}

.Header_fallbackCenterLogo__v073o {
  /* CRITICAL: Use theme-aware primary text color for cream background */
  color: var(--color-text-primary);
  font-size: 1.25rem;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
  display: none;
}

/* CRITICAL FIX: Mobile Menu Toggle */
.Header_menuToggle__Jpn\+U {
  display: none;
  background: none;
  border: none;
  color: var(--color-text-light);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.75rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  grid-column: 3;
  justify-self: end;
  /* CRITICAL: Ensure minimum touch target size */
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
}

.Header_menuToggle__Jpn\+U:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
}

/* CRITICAL FIX: Perfect Sub-header Navigation */
.Header_subHeader__RvvPR {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 999;
  /* CRITICAL: Use same cream background as main header */
  background-color: #d8d3ce;
  height: 60px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.Header_subHeader__RvvPR.Header_scrolled__1HfOc {
  top: 75px;
}

.Header_navContainer__PdRPc {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
}

.Header_navList__YJTGG {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
  justify-content: center;
  width: 100%;
  height: 100%;
  align-items: center;
}

.Header_navItem__fyfgu {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.Header_navItem__fyfgu a {
  /* CRITICAL: Use navy text for cream background */
  color: #0B112C;
  text-decoration: none;
  font-weight: 600;
  padding: 1rem 1.5rem;
  border-radius: 6px;
  transition: all 0.3s ease;
  position: relative;
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.025em;
  height: 100%;
  display: flex;
  align-items: center;
}

.Header_navItem__fyfgu a:hover,
.Header_navItem__fyfgu a.Header_active__GTZM0 {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
  transform: translateY(-1px);
}

.Header_navItem__fyfgu a.Header_active__GTZM0::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

/* CRITICAL FIX: Perfect Header Buttons */
.Header_headerButtons__\+8uMx {
  justify-self: end;
  display: flex;
  gap: 1rem;
  align-items: center;
  height: 100%;
}

.Header_clientLoginBtn__y\+XPM,
.Header_consultationBtn__6H9f7 {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.3s ease;
  white-space: nowrap;
  /* CRITICAL: Ensure minimum touch target size */
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.025em;
}

.Header_clientLoginBtn__y\+XPM {
  background-color: transparent;
  /* CRITICAL: Use navy text for better contrast on cream background */
  color: #0B112C;
  border: 2px solid var(--color-primary);
}

.Header_clientLoginBtn__y\+XPM:hover {
  background-color: var(--color-primary);
  /* CRITICAL: Use cream text on blue background */
  color: #d8d3ce;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.Header_consultationBtn__6H9f7 {
  background-color: var(--color-secondary);
  /* CRITICAL: Use cream text on red background */
  color: #d8d3ce;
  border: 2px solid var(--color-secondary);
}

.Header_consultationBtn__6H9f7:hover {
  background-color: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
  /* CRITICAL: Keep cream text on hover */
  color: #d8d3ce;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Responsive styles */
@media (max-width: 48rem) { /* 768px */
  .Header_siteHeader__QPJ\+D {
    height: 60px; /* MUCH more compact mobile header */
  }

  .Header_headerContainer__tdYC7 {
    /* CLEAN: Flexbox layout to prevent overlap */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    height: 100%;
    position: relative;
  }

  .Header_leftLogo__DE4lv {
    /* Left HH logo - fixed size, no overlap */
    flex: 0 0 auto;
    z-index: 10;
  }

  .Header_leftLogo__DE4lv .Header_centerLogoImage__qFiDy {
    height: 40px; /* Compact HH logo for mobile */
    width: auto;
  }

  .Header_centerLogo__TPUvo {
    /* Center text logo - absolutely positioned for perfect centering */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    white-space: nowrap;
  }

  .Header_centerLogoImage__qFiDy {
    height: 45px; /* Compact center logo */
    width: auto;
    object-fit: contain;
  }

  .Header_textLogoImage__4uRSR {
    height: 50px; /* Compact but readable text logo */
    width: auto;
    object-fit: contain;
    max-width: 240px; /* Prevent text from being too wide */
  }

  .Header_headerButtons__\+8uMx {
    display: none; /* Hide header buttons on mobile, show in nav */
  }

  .Header_menuToggle__Jpn\+U {
    /* FIXED: Menu toggle positioned on right, no overlap */
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1000;
    padding: 8px;
    flex: 0 0 auto; /* Fixed size, no overlap */
  }

  .Header_menuToggle__Jpn\+U svg {
    width: 28px;
    height: 28px;
    color: #0B112C; /* Navy color for visibility */
  }

  /* FIXED: Ensure proper spacing for logos */
  .Header_leftLogoLink__vW9Pk {
    padding: 0.5rem;
    display: flex;
    align-items: center;
  }

  .Header_centerLogoLink__0OTMD {
    padding: 0.5rem;
    display: flex;
    align-items: center;
  }

  .Header_subHeader__RvvPR {
    top: 60px; /* Positioned below compact 60px header */
    height: 0px; /* HIDE subheader on mobile to eliminate spacing */
    min-height: 0px;
    overflow: hidden; /* Hide any content that might show */
    /* FIXED: Remove any gaps */
    margin: 0;
    padding: 0;
  }

  .Header_subHeader__RvvPR.Header_scrolled__1HfOc {
    top: 60px; /* Positioned below compact 60px header */
  }

  .Header_navContainer__PdRPc {
    padding: 0 1rem;
  }

  .Header_navList__YJTGG {
    position: fixed;
    top: 60px; /* Updated for compact header (60px only, no subheader) */
    left: -100%;
    width: 100%;
    height: auto; /* COMPACT: Auto height instead of full screen */
    max-height: calc(100vh - 60px);
    /* CRITICAL: Use cream background for mobile menu */
    background-color: #d8d3ce;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    transition: left 0.3s ease;
    z-index: 998;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    gap: 0;
    justify-content: flex-start;
  }

  .Header_navList__YJTGG.Header_open__TH6Yd {
    left: 0;
  }

  .Header_navItem__fyfgu {
    width: 100%;
    border-bottom: 1px solid rgba(11, 17, 44, 0.1);
  }

  .Header_navItem__fyfgu:last-child {
    border-bottom: none;
  }

  .Header_navItem__fyfgu a {
    padding: 1rem 1.5rem;
    width: 100%;
    display: block;
    /* CRITICAL: Use navy text for cream mobile menu */
    color: #0B112C;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
    text-decoration: none;
  }

  /* SIMPLE CONTRAST HOVER - NO OVERCOMPLICATED STYLING */
  .Header_navItem__fyfgu a:hover,
  .Header_navItem__fyfgu a:focus {
    background-color: rgba(11, 17, 44, 0.1); /* Simple contrast highlight */
    color: #0B112C;
  }

  .Header_navItem__fyfgu a.Header_active__GTZM0 {
    background-color: rgba(11, 17, 44, 0.15); /* Slightly stronger for active */
    color: #0B112C;
    font-weight: 600;
  }
}

/* FIXED: Extra small mobile devices (phones in portrait) */
@media (max-width: 30rem) { /* 480px */
  .Header_headerContainer__tdYC7 {
    padding: 0 0.75rem;
  }

  .Header_centerLogo__TPUvo {
    max-width: 120px;
  }

  .Header_centerLogoImage__qFiDy {
    max-height: 28px;
  }

  .Header_textLogoImage__4uRSR {
    max-height: 28px;
  }

  .Header_leftLogo__DE4lv {
    max-width: 45px;
  }

  .Header_leftLogo__DE4lv .Header_centerLogoImage__qFiDy {
    max-height: 32px;
  }

  .Header_navItem__fyfgu a:hover,
  .Header_navItem__fyfgu a.Header_active__GTZM0 {
    background-color: var(--color-surface-hover);
    color: var(--color-primary);
  }


}

/* Layout.module.css */
/* Styles for the main layout component */

.Layout_layout__nyxwR {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--color-background-white);
}

.Layout_mainContent__6OoEY {
  flex: 1 1;
  padding-top: 0; /* Remove padding since body already has it */
  background-color: var(--color-background-white);
}

/* Loading Screen Styles */

.LoadingScreen_container__4chq5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  min-height: 200px;
}

.LoadingScreen_fullScreenContainer__HP31S {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 1000;
}

.LoadingScreen_message__ERFRz {
  margin-top: 1rem;
  color: var(--color-text-secondary);
  font-size: 1rem;
  text-align: center;
}

/* Spinner */
.LoadingScreen_spinner__l7eSZ {
  display: inline-block;
  position: relative;
}

.LoadingScreen_spinner__l7eSZ.LoadingScreen_small__Ozy8\+ {
  width: 40px;
  height: 40px;
}

.LoadingScreen_spinner__l7eSZ.LoadingScreen_medium__PksEl {
  width: 64px;
  height: 64px;
}

.LoadingScreen_spinner__l7eSZ.LoadingScreen_large__eS36r {
  width: 80px;
  height: 80px;
}

.LoadingScreen_spinner__l7eSZ div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 80%;
  height: 80%;
  margin: 10%;
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  animation: LoadingScreen_spinner__l7eSZ 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--color-primary) transparent transparent transparent;
}

.LoadingScreen_spinner__l7eSZ div:nth-child(1) {
  animation-delay: -0.45s;
}

.LoadingScreen_spinner__l7eSZ div:nth-child(2) {
  animation-delay: -0.3s;
}

.LoadingScreen_spinner__l7eSZ div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes LoadingScreen_spinner__l7eSZ {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Responsive styles */
@media (max-width: 768px) {
  .LoadingScreen_container__4chq5 {
    padding: 1.5rem;
    min-height: 150px;
  }
  
  .LoadingScreen_message__ERFRz {
    font-size: 0.875rem;
  }
  
  .LoadingScreen_spinner__l7eSZ.LoadingScreen_medium__PksEl {
    width: 48px;
    height: 48px;
  }
  
  .LoadingScreen_spinner__l7eSZ.LoadingScreen_large__eS36r {
    width: 64px;
    height: 64px;
  }
}

/* Modal.module.css */
/* Styles for the Modal component */

.Modal_modalOverlay__5nsN7 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-index-modal);
  padding: var(--spacing-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-default), visibility var(--transition-default);
}

.Modal_modalOverlay__5nsN7.Modal_open__jkjVX {
  opacity: 1;
  visibility: visible;
}

.Modal_modalContainer__1yEs8 {
  background-color: var(--color-background-dark);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 30rem;
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  transform: translateY(20px);
  opacity: 0;
  transition: transform var(--transition-default), opacity var(--transition-default);
  overflow: hidden;
}

.Modal_modalOverlay__5nsN7.Modal_open__jkjVX .Modal_modalContainer__1yEs8 {
  transform: translateY(0);
  opacity: 1;
}

/* Modal sizes */
.Modal_sm__kEJ8V {
  max-width: 20rem;
}

.Modal_md__LeGNz {
  max-width: 30rem;
}

.Modal_lg__7OIEi {
  max-width: 50rem;
}

.Modal_xl__NmWux {
  max-width: 70rem;
}

.Modal_full__PVqN- {
  max-width: 95vw;
  max-height: 95vh;
}

/* Modal header */
.Modal_modalHeader__5sC2e {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

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

.Modal_closeButton__ph3Fp {
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-default);
}

.Modal_closeButton__ph3Fp:hover {
  color: var(--color-text-primary);
}

/* Modal body */
.Modal_modalBody__0qQ2h {
  padding: var(--spacing-lg);
  overflow-y: auto;
  flex: 1 1;
}

/* Modal footer */
.Modal_modalFooter__yesLY {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

/* Modal buttons */
.Modal_modalButton__P8W4i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all var(--transition-default);
}

.Modal_primaryButton__TUDPq {
  background-color: var(--color-primary);
  color: var(--color-background-dark);
  border: 1px solid var(--color-primary);
}

.Modal_primaryButton__TUDPq:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.Modal_secondaryButton__w6P7c {
  background-color: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}

.Modal_secondaryButton__w6P7c:hover {
  background-color: var(--color-surface-hover);
}

.Modal_dangerButton__pT3Zs {
  background-color: var(--color-error);
  color: white;
  border: 1px solid var(--color-error);
}

.Modal_dangerButton__pT3Zs:hover {
  background-color: #dc2626;
  border-color: #dc2626;
}

/* Responsive adjustments */
@media (max-width: 48rem) { /* 768px */
  .Modal_modalContainer__1yEs8 {
    max-width: 100%;
    max-height: calc(100vh - 1rem);
  }
  
  .Modal_modalHeader__5sC2e {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .Modal_modalBody__0qQ2h {
    padding: var(--spacing-md);
  }
  
  .Modal_modalFooter__yesLY {
    padding: var(--spacing-sm) var(--spacing-md);
    flex-direction: column;
    gap: var(--spacing-xs);
  }
  
  .Modal_modalButton__P8W4i {
    width: 100%;
  }
  
  .Modal_sm__kEJ8V, .Modal_md__LeGNz, .Modal_lg__7OIEi, .Modal_xl__NmWux {
    max-width: 100%;
  }
}

/* Modals.module.css */
/* Shared styles for all modal components */

/* Modal Title with Icon */
.Modals_modalTitleWithIcon__6TQzE {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.Modals_modalTitleIcon__zs1iF {
  font-size: 1.25rem;
  color: var(--color-primary);
}

/* Form Styles */
.Modals_form__zTboN {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.Modals_formGroup__oYdHt {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.Modals_formRow__yw7hz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  gap: 1rem;
}

.Modals_input__zgzWH, .Modals_select__bqgBl, .Modals_textarea__Ic8vz {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border: 2px solid var(--color-border-light);
  background-color: var(--color-background-white);
  color: var(--color-text-primary);
  font-size: 0.95rem;
  font-family: inherit;
  transition: all 0.3s ease;
}

.Modals_input__zgzWH:focus, .Modals_select__bqgBl:focus, .Modals_textarea__Ic8vz:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 107, 199, 0.1);
}

.Modals_input__zgzWH:hover, .Modals_select__bqgBl:hover, .Modals_textarea__Ic8vz:hover {
  border-color: var(--color-primary);
}

.Modals_textarea__Ic8vz {
  resize: vertical;
  min-height: 100px;
}

/* Form Actions */
.Modals_formActions__NHuf9 {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
}

.Modals_cancelButton__M3IGY, .Modals_submitButton__CPpe6, .Modals_addButton__Mq3jZ, .Modals_removeButton__6dgfw {
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.Modals_cancelButton__M3IGY {
  background-color: transparent;
  border: 2px solid var(--color-border-light);
  color: var(--color-text-primary);
}

.Modals_cancelButton__M3IGY:hover {
  background-color: var(--color-background-cream);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.Modals_submitButton__CPpe6 {
  background-color: var(--color-primary);
  border: 2px solid var(--color-primary);
  color: var(--color-background-white);
}

.Modals_submitButton__CPpe6:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 107, 199, 0.3);
}

.Modals_submitButton__CPpe6:hover {
  background-color: #d97706;
  background-color: var(--color-primary-hover, #d97706);
}

.Modals_submitButton__CPpe6:disabled, .Modals_cancelButton__M3IGY:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.Modals_addButton__Mq3jZ {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  align-self: flex-start;
}

.Modals_addButton__Mq3jZ:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.Modals_removeButton__6dgfw {
  background-color: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

.Modals_removeButton__6dgfw:hover {
  color: white;
  text-decoration: underline;
}

/* Attendee Row */
.Modals_attendeeRow__hWca5 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.Modals_attendeeRow__hWca5 .Modals_input__zgzWH {
  flex: 1 1;
}

/* Success Message */
.Modals_successMessage__V8nf0 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.Modals_successIcon__QSXAA {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: #10B981;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.Modals_successMessage__V8nf0 h3 {
  margin: 0 0 0.5rem 0;
  color: white;
}

.Modals_successMessage__V8nf0 p {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
}

/* Error Message */
.Modals_errorMessage__ux2iG {
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #EF4444;
  padding: 0.75rem;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

/* File Upload */
.Modals_dropZone__\+7OLr {
  border: 2px dashed rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.Modals_dropZone__\+7OLr:hover, .Modals_dropZone__\+7OLr.Modals_dragging__Flm\+L {
  border-color: #f59e0b;
  border-color: var(--color-primary, #f59e0b);
  background-color: rgba(255, 255, 255, 0.05);
}

.Modals_dropZoneIcon__toS4Z {
  font-size: 2.5rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1rem;
}

.Modals_dropZoneText__dWZBX {
  margin: 0 0 0.5rem 0;
  font-weight: 500;
}

.Modals_dropZoneHint__siv5L {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.Modals_fileInput__VPXAb {
  display: none;
}

/* File List */
.Modals_fileList__LvQW8 {
  margin-top: 1.5rem;
}

.Modals_fileListTitle__oRVNH {
  margin: 0 0 0.75rem 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

.Modals_fileItem__49jpt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

.Modals_fileInfo__EY2jp {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.Modals_fileIcon__Z6tbb {
  color: #f59e0b;
  color: var(--color-primary, #f59e0b);
  font-size: 1.25rem;
}

.Modals_fileDetails__8BH\+Q {
  display: flex;
  flex-direction: column;
}

.Modals_fileName__AMOMw {
  margin: 0;
  font-weight: 500;
}

.Modals_fileSize__6\+VUS {
  margin: 0;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

.Modals_removeFileButton__2oPVO {
  background-color: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

.Modals_removeFileButton__2oPVO:hover {
  color: white;
  text-decoration: underline;
}


/*# sourceMappingURL=main.46393b7c.css.map*/