/* 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;

  /* Colors */
  --color-primary: #f59e0b;
  --color-primary-hover: #f5a623;
  --color-secondary: #3b82f6;
  --color-secondary-hover: #2563eb;
  --color-background-dark: #0f172a;
  --color-background-darker: #0c111a;
  --color-background-light: #1e293b;
  --color-text-primary: #ffffff;
  --color-text-secondary: #94a3b8;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-dark: rgba(0, 0, 0, 0.1);
  --color-positive: #ffd700;
  --color-negative: #F44336;

  /* 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 in rem */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --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 */
}

/* themes.css */
/* Theme definitions for light, dark, and high contrast modes */

/* Default dark theme */
:root {
  /* Brand Colors */
  --color-primary: #f59e0b;
  --color-primary-hover: #f5a623;
  --color-primary-active: #d97706;
  --color-primary-light: rgba(245, 158, 11, 0.1);
  --color-secondary: #3b82f6;
  --color-secondary-hover: #2563eb;
  --color-secondary-active: #1d4ed8;
  --color-secondary-light: rgba(59, 130, 246, 0.1);

  /* Semantic Colors */
  --color-success: #10b981;
  --color-success-light: rgba(16, 185, 129, 0.1);
  --color-warning: #f59e0b;
  --color-warning-light: rgba(245, 158, 11, 0.1);
  --color-error: #ef4444;
  --color-error-light: rgba(239, 68, 68, 0.1);
  --color-info: #3b82f6;
  --color-info-light: rgba(59, 130, 246, 0.1);

  /* UI Colors */
  --color-background-dark: #0f172a;
  --color-background-darker: #0c111a;
  --color-background-light: #1e293b;
  --color-background-lighter: #334155;
  --color-surface: #1e293b;
  --color-surface-hover: #334155;
  --color-surface-active: #475569;

  /* Text Colors */
  --color-text-primary: #ffffff;
  --color-text-secondary: #94a3b8;
  --color-text-tertiary: #64748b;
  --color-text-disabled: rgba(255, 255, 255, 0.4);
  --color-text-inverse: #0f172a;

  /* Border Colors */
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-hover: rgba(255, 255, 255, 0.2);
  --color-border-active: rgba(255, 255, 255, 0.3);
  --color-border-dark: rgba(0, 0, 0, 0.1);

  /* Status Colors */
  --color-positive: #ffd700;
  --color-negative: #F44444;

  /* Shadows */
  --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.5);

  /* Focus */
  --focus-ring: 0 0 0 0.125rem rgba(245, 158, 11, 0.5);
  --focus-ring-offset: 0.125rem;
}

/* Light theme */
[data-theme="light"] {
  /* Brand Colors */
  --color-primary: #f59e0b;
  --color-primary-hover: #d97706;
  --color-primary-active: #b45309;
  --color-primary-light: rgba(245, 158, 11, 0.1);
  --color-secondary: #3b82f6;
  --color-secondary-hover: #2563eb;
  --color-secondary-active: #1d4ed8;
  --color-secondary-light: rgba(59, 130, 246, 0.1);

  /* Semantic Colors */
  --color-success: #10b981;
  --color-success-light: rgba(16, 185, 129, 0.1);
  --color-warning: #f59e0b;
  --color-warning-light: rgba(245, 158, 11, 0.1);
  --color-error: #ef4444;
  --color-error-light: rgba(239, 68, 68, 0.1);
  --color-info: #3b82f6;
  --color-info-light: rgba(59, 130, 246, 0.1);

  /* UI Colors */
  --color-background-dark: #ffffff;
  --color-background-darker: #f3f4f6;
  --color-background-light: #f9fafb;
  --color-background-lighter: #f1f5f9;
  --color-surface: #ffffff;
  --color-surface-hover: #f9fafb;
  --color-surface-active: #f3f4f6;

  /* Text Colors */
  --color-text-primary: #1f2937;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #9ca3af;
  --color-text-disabled: rgba(0, 0, 0, 0.4);
  --color-text-inverse: #ffffff;

  /* Border Colors */
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-hover: rgba(0, 0, 0, 0.2);
  --color-border-active: rgba(0, 0, 0, 0.3);
  --color-border-dark: rgba(0, 0, 0, 0.2);

  /* Status Colors */
  --color-positive: #10b981;
  --color-negative: #ef4444;

  /* Shadows */
  --shadow-sm: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05);
  --shadow-md: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
  --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 */
  --focus-ring: 0 0 0 0.125rem rgba(245, 158, 11, 0.5);
  --focus-ring-offset: 0.125rem;
}

/* High contrast theme */
[data-theme="high-contrast"] {
  /* Brand Colors */
  --color-primary: #ffdd00;
  --color-primary-hover: #ffd000;
  --color-primary-active: #e6c700;
  --color-primary-light: rgba(255, 221, 0, 0.2);
  --color-secondary: #00aaff;
  --color-secondary-hover: #0099ee;
  --color-secondary-active: #0088dd;
  --color-secondary-light: rgba(0, 170, 255, 0.2);

  /* Semantic Colors */
  --color-success: #00ff00;
  --color-success-light: rgba(0, 255, 0, 0.2);
  --color-warning: #ffdd00;
  --color-warning-light: rgba(255, 221, 0, 0.2);
  --color-error: #ff0000;
  --color-error-light: rgba(255, 0, 0, 0.2);
  --color-info: #00aaff;
  --color-info-light: rgba(0, 170, 255, 0.2);

  /* UI Colors */
  --color-background-dark: #000000;
  --color-background-darker: #000000;
  --color-background-light: #222222;
  --color-background-lighter: #333333;
  --color-surface: #222222;
  --color-surface-hover: #333333;
  --color-surface-active: #444444;

  /* Text Colors */
  --color-text-primary: #ffffff;
  --color-text-secondary: #cccccc;
  --color-text-tertiary: #999999;
  --color-text-disabled: rgba(255, 255, 255, 0.5);
  --color-text-inverse: #000000;

  /* Border Colors */
  --color-border: rgba(255, 255, 255, 0.3);
  --color-border-hover: rgba(255, 255, 255, 0.5);
  --color-border-active: rgba(255, 255, 255, 0.7);
  --color-border-dark: rgba(255, 255, 255, 0.5);

  /* Status Colors */
  --color-positive: #00ff00;
  --color-negative: #ff0000;

  /* Shadows */
  --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.7);

  /* Focus */
  --focus-ring: 0 0 0 0.25rem rgba(255, 221, 0, 0.8);
  --focus-ring-offset: 0.125rem;
}

/* System preference theme */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    /* Brand Colors */
    --color-primary: #f59e0b;
    --color-primary-hover: #d97706;
    --color-primary-active: #b45309;
    --color-primary-light: rgba(245, 158, 11, 0.1);
    --color-secondary: #3b82f6;
    --color-secondary-hover: #2563eb;
    --color-secondary-active: #1d4ed8;
    --color-secondary-light: rgba(59, 130, 246, 0.1);

    /* Semantic Colors */
    --color-success: #10b981;
    --color-success-light: rgba(16, 185, 129, 0.1);
    --color-warning: #f59e0b;
    --color-warning-light: rgba(245, 158, 11, 0.1);
    --color-error: #ef4444;
    --color-error-light: rgba(239, 68, 68, 0.1);
    --color-info: #3b82f6;
    --color-info-light: rgba(59, 130, 246, 0.1);

    /* UI Colors */
    --color-background-dark: #ffffff;
    --color-background-darker: #f3f4f6;
    --color-background-light: #f9fafb;
    --color-background-lighter: #f1f5f9;
    --color-surface: #ffffff;
    --color-surface-hover: #f9fafb;
    --color-surface-active: #f3f4f6;

    /* Text Colors */
    --color-text-primary: #1f2937;
    --color-text-secondary: #6b7280;
    --color-text-tertiary: #9ca3af;
    --color-text-disabled: rgba(0, 0, 0, 0.4);
    --color-text-inverse: #ffffff;

    /* Border Colors */
    --color-border: rgba(0, 0, 0, 0.1);
    --color-border-hover: rgba(0, 0, 0, 0.2);
    --color-border-active: rgba(0, 0, 0, 0.3);
    --color-border-dark: rgba(0, 0, 0, 0.2);

    /* Status Colors */
    --color-positive: #10b981;
    --color-negative: #ef4444;

    /* Shadows */
    --shadow-sm: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.05);
    --shadow-md: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
    --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 */
    --focus-ring: 0 0 0 0.125rem rgba(245, 158, 11, 0.5);
    --focus-ring-offset: 0.125rem;
  }
}

/* System preference dark theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Use the default dark theme variables from :root */
  }
}

/*
 * 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: var(--color-background-darker);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  overflow-y: auto;
}

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-darker);
  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);
  }
}

/* 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);
}

@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);
  }
}

/* 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-dark);
  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 */

/* Import reset first */

/* Import variables */

/* Import themes */

/* Import base styles */

/* Import layout styles */

/* Import responsive utilities */

/* Import PWA styles */

/* Import component styles */

/* Additional 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-error);
  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-dark);
  border-right: 1px solid var(--color-border);
  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: var(--shadow-sm);
  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-dark);
  cursor: pointer;
  z-index: var(--z-index-toggle);
  box-shadow: var(--shadow-toggle);
  transition: background-color var(--transition-default);
  overflow: hidden; /* Change from visible to hidden to maintain circle shape */
  border: 2px solid var(--color-background-dark);
}

.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: var(--color-background-dark);
  color: var(--color-text-light);
  padding: 3rem 2rem 1.5rem;
}

.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_companyName__QzJUa {
  color: var(--color-primary);
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.Footer_companyTagline__6Cnag {
  color: var(--color-primary);
  margin: 0.25rem 0 1.5rem;
  font-size: 1rem;
}

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

.Footer_socialIcon__j0f-t {
  color: var(--color-text-light);
  font-size: 1.25rem;
  transition: color 0.2s ease;
}

.Footer_socialIcon__j0f-t:hover {
  color: var(--color-primary);
}

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

.Footer_sectionTitle__VK\+i7 {
  color: var(--color-primary);
  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: var(--color-primary);
}

/* 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: var(--color-text-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

/* 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: var(--color-primary);
}

.Footer_contactItem__b0hYA a {
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

/* 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;
}

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

.Footer_legalLinks__FclgV a {
  color: var(--color-text-light);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease;
}

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

.Footer_divider__PAION {
  margin: 0 0.5rem;
  color: var(--color-text-light);
}

/* 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;
  }
}

/* Header.module.css */
/* Styles for the site header */

.Header_siteHeader__QPJ\+D {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--color-background-dark);
  height: 60px;
  display: flex;
  align-items: center;
}

.Header_headerContainer__tdYC7 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 var(--spacing-md);
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
}

.Header_logo__04L6z {
  position: absolute;
  left: var(--spacing-md);
}

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

.Header_menuToggle__Jpn\+U {
  display: none;
  background: none;
  border: none;
  color: var(--color-text-primary);
  font-size: var(--font-size-xl);
  cursor: pointer;
}

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

.Header_navList__YJTGG {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
}

.Header_navItem__fyfgu {
  margin: 0;
  padding: 0;
}

.Header_navItem__fyfgu a {
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  padding: var(--spacing-md) var(--spacing-sm);
  display: block;
}

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

.Header_navItem__fyfgu a.Header_active__GTZM0 {
  color: var(--color-primary);
}

.Header_headerButtons__\+8uMx {
  display: flex;
  align-items: center;
  position: absolute;
  right: var(--spacing-md);
}

.Header_clientLoginBtn__y\+XPM, .Header_consultationBtn__6H9f7 {
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: all var(--transition-default);
}

.Header_clientLoginBtn__y\+XPM {
  background-color: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  margin-right: var(--spacing-sm);
}

.Header_clientLoginBtn__y\+XPM:hover {
  background-color: var(--color-primary-light);
}

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

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

/* Responsive styles */
@media (max-width: 48rem) { /* 768px */
  .Header_menuToggle__Jpn\+U {
    display: block;
  }

  .Header_mainNav__I9IDv {
    position: fixed;
    top: 60px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 60px);
    background-color: var(--color-background-dark);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-md);
    transition: left 0.3s ease;
    z-index: 999;
  }

  .Header_mainNav__I9IDv.Header_open__TH6Yd {
    left: 0;
  }

  .Header_navList__YJTGG {
    flex-direction: column;
    width: 100%;
  }

  .Header_navItem__fyfgu {
    width: 100%;
  }

  .Header_navItem__fyfgu a {
    padding: var(--spacing-sm) 0;
    width: 100%;
  }

  .Header_headerButtons__\+8uMx {
    display: none;
  }
}

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

.Layout_layout__nyxwR {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.Layout_mainContent__6OoEY {
  flex: 1 1;
}

/* 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: #f59e0b;
  color: var(--color-primary, #f59e0b);
}

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

.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;
  border-radius: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.05);
  color: white;
  font-size: 0.875rem;
}

.Modals_input__zgzWH:focus, .Modals_select__bqgBl:focus, .Modals_textarea__Ic8vz:focus {
  outline: none;
  border-color: #f59e0b;
  border-color: var(--color-primary, #f59e0b);
}

.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.5rem 1rem;
  border-radius: 0.25rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.Modals_cancelButton__M3IGY {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.Modals_cancelButton__M3IGY:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.Modals_submitButton__CPpe6 {
  background-color: #f59e0b;
  background-color: var(--color-primary, #f59e0b);
  border: none;
  color: black;
}

.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;
}