/* Root Variables */
/* 
  Root and Theme Variables
  - All dark themes share the same base palette for backgrounds, text, modal, etc.
  - Each dark theme gets its own accent color (blue, gold, brown, red, etc).
  - Light themes are visually clear, with strong contrast and visible modals.
*/

/* ===== Root Variables (shared, non-theme-specific) ===== */
/* Default to dark theme to prevent FOUC - will be overridden by theme script */
:root {
  /* ===== Foundation: Semantic Color Tokens ===== */
  --bg-main: #0a0a0a;
  --bg-elevated: #111111;
  --bg-card: #171717;
  --bg-muted: #202020;
  --border: #2f2f2f;
  --border-strong: #3f3f3f;
  --text-main: #d9e4ef;
  --text-muted: #9fb0c2;
  --text-faint: #76879a;
  --accent: #2ac98c;
  --accent-soft: rgba(42, 201, 140, 0.18);
  --accent-strong: #21a874;
  --accent-rgb: 42, 201, 140;

  /* ===== Compatibility Color Aliases ===== */
  --color-background: var(--bg-main);
  --color-background-light: var(--bg-elevated);
  --color-secondary: var(--bg-card);
  --color-tertiary: var(--bg-muted);
  --color-elevated: var(--bg-card);
  --color-text-light: var(--text-main);
  --color-text-secondary: var(--text-muted);
  --color-text-tertiary: var(--text-faint);
  --text-primary: var(--text-main);
  --text-secondary: var(--text-muted);
  --text-tertiary: var(--text-faint);
  --color-primary: var(--accent);
  --color-primary-fade: var(--accent-soft);
  --color-primary-dark: var(--accent-strong);
  --color-hover: var(--accent-strong);
  --border-color: var(--border);
  --border-color-hover: var(--border-strong);
  --primary-rgb: var(--accent-rgb);
  --color-primary-rgb: var(--accent-rgb);
  --color-text: var(--text-main);
  --color-light: #ffffff;
  --color-background-alt: var(--bg-elevated);
  --color-warning-dark: #d19a00;
  --surface: var(--color-secondary);
  --card-shadow: var(--shadow-soft);
  --primary: var(--color-primary);
  
  /* Will be overridden by specific theme classes */
  /* Status Colors */
  --color-success: #4CAF50;
  --color-error: #F44336;
  --color-warning: #FFC107;
  --color-danger: #FF0000;
  --color-danger-hover: #ff000082;

  /* ===== Typography ===== */
  --font-primary: 'Roboto', sans-serif;
  --font-secondary: 'Verdana', sans-serif;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-lg: 15px;
  --font-size-base: var(--text-md);
  --font-size-small: var(--text-xs);
  --font-size-large: var(--text-lg);
  --line-height: 1.4;

  /* ===== Spacing Scale ===== */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 6px;
  --space-md: 10px;
  --space-lg: 14px;
  --space-xl: 18px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --spacing-small: var(--space-sm);
  --spacing-medium: var(--space-md);
  --spacing-large: var(--space-xl);

  /* ===== Radius ===== */
  --radius-small: 5px;
  --radius-medium: 7px;
  --radius-large: 10px;
  --radius-pill: 999px;

  /* ===== Motion / Effects ===== */
  --transition-speed: 0.18s;
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-smooth: 0.3s ease;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-medium: 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-large: 0 6px 16px rgba(0, 0, 0, 0.3);
  --focus-ring: 0 0 0 2px rgba(var(--primary-rgb, 255, 215, 0), 0.22);

  /* ===== Density / Layout ===== */
  --max-width: 1200px;
  --sidebar-width: 176px;
  --sidebar-collapsed-width: 52px;
  --sidebar-content-gap: 8px;
  --control-height-sm: 28px;
  --control-height-md: 32px;
  --header-height: 50px;
  --footer-height: 40px;

  /* Z-Index */
  --z-index-header: 1000;
  --z-index-modal: 2000;
  --z-index-tooltip: 3000;

  /* Modal Variables (defaults, overridden in themes) */
  --modal-backdrop: rgba(0, 0, 0, 0.6);
  --modal-backdrop-blur: blur(8px);
  --modal-border-radius: 16px;
  --modal-content-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  --modal-header-height: 60px;
  --modal-animation-duration: 0.3s;
  --modal-max-width-sm: 400px;
  --modal-max-width-md: 600px;
  --modal-max-width-lg: 900px;
  --modal-max-width-xl: 1200px;
  --modal-bg: var(--bg-elevated);
  --modal-border: var(--border);
  --modal-padding: 20px;

  /* Document Modal Specific Variables */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --border-radius: 12px;
  --border-radius-sm: 8px;
  --border-radius-lg: 16px;
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-soft: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --gradient-primary: linear-gradient(135deg, var(--primary-accent) 0%, var(--primary-accent-hover) 100%);

  /* Modules */
  --module-card-padding: 0.75rem;
  --module-card-border-radius: 8px;

  /* Autofill fix */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  textarea:-webkit-autofill:active {
    background-color: var(--input-bg) !important;
    color: var(--color-text-light) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--input-bg) inset !important;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: var(--color-text-light) !important;
    -webkit-text-fill-color: var(--color-text-light) !important;
  }
}

/* ===== Light Themes ===== */

/* Light Blue (default) */
:root.light-mode {
  /* Background Colors - Cleaner, more modern */
  --color-background: #dbdbdb;
  --color-background-light: #ffffff;
  --color-secondary: #ffffff;
  --color-tertiary: #f1f5f9;
  --color-elevated: #ffffff;
  
  /* Primary Colors - More vibrant */
  --color-primary: #2563eb;
  --color-primary-light: #3b82f6;
  --color-primary-dark: #1d4ed8;
  --color-primary-fade: rgba(37, 99, 235, 0.1);
  --color-hover: #1d4ed8;
  
  /* Text Colors - Better contrast */
  --color-text-light: #0f172a;
  --color-text-dark: #1e293b;
  --color-text-secondary: #475569;
  --color-text-tertiary: #64748b;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  
  /* UI Elements - Enhanced */
  --color-h2: #1e293b;
  --color-chart-bg: #f8fafc;
  --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --input-bg: #ffffff;
  --input-label-color: #374151;
  --border-color: #d1d5db;
  --border-color-hover: #2563eb;
  --btn-bg: #2563eb;
  --btn-hover-bg: #1d4ed8;
  
  /* Shadows - Softer, more modern */
  --shadow-light: rgba(0, 0, 0, 0.05);
  --shadow-medium: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(0, 0, 0, 0.15);

  /* Modal - Better contrast and shadows */
  --modal-bg: #ffffff;
  --modal-border: #e5e7eb;
  --modal-backdrop: rgba(0, 0, 0, 0.25);
  --modal-content-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Chart/Status - Better colors */
  --chart-bar-paid: #059669;
  --chart-bar-overdue: #dc2626;
  --chart-grid-color: rgba(0, 0, 0, 0.05);
  --chart-text-color: #111827;

  /* Document Modal - Consistent with main theme */
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --bg-elevated: #ffffff;
  --primary-accent: #2563eb;
  --primary-accent-hover: #1d4ed8;
  --primary-text: #ffffff;
  --success-color: #059669;
  --warning-color: #d97706;
  --error-color: #dc2626;
}

/* Light Brown */
:root.light-mode-brown {
  /* Background Colors - Cleaner, more modern */
  --color-background: #fefcf9;
  --color-background-light: #ffffff;
  --color-secondary: #ffffff;
  --color-tertiary: #faf7f3;
  --color-elevated: #ffffff;
  
  /* Primary Colors - More refined */
  --color-primary: #92400e;
  --color-primary-light: #b45309;
  --color-primary-dark: #78350f;
  --color-primary-fade: rgba(146, 64, 14, 0.1);
  --color-hover: #78350f;
  
  /* Text Colors - Better contrast */
  --color-text-light: #1c1917;
  --color-text-dark: #292524;
  --color-text-secondary: #57534e;
  --color-text-tertiary: #78716c;
  --text-primary: #1c1917;
  --text-secondary: #57534e;
  --text-tertiary: #78716c;
  
  /* UI Elements - Enhanced */
  --color-h2: #292524;
  --color-chart-bg: #fefcf9;
  --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --input-bg: #ffffff;
  --input-label-color: #374151;
  --border-color: #d6d3d1;
  --border-color-hover: #92400e;
  --btn-bg: #92400e;
  --btn-hover-bg: #78350f;
  
  /* Shadows - Softer, more modern */
  --shadow-light: rgba(0, 0, 0, 0.05);
  --shadow-medium: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(0, 0, 0, 0.15);

  /* Modal - Better contrast and shadows */
  --modal-bg: #ffffff;
  --modal-border: #e7e5e4;
  --modal-backdrop: rgba(0, 0, 0, 0.25);
  --modal-content-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Chart/Status - Better colors */
  --chart-bar-paid: #059669;
  --chart-bar-overdue: #dc2626;
  --chart-grid-color: rgba(0, 0, 0, 0.05);
  --chart-text-color: #111827;

  /* Document Modal - Consistent with main theme */
  --bg-primary: #ffffff;
  --bg-secondary: #fefcf9;
  --bg-tertiary: #faf7f3;
  --bg-elevated: #ffffff;
  --primary-accent: #92400e;
  --primary-accent-hover: #78350f;
  --primary-text: #ffffff;
  --success-color: #059669;
  --warning-color: #d97706;
  --error-color: #dc2626;
}

/* Light Green */
:root.light-mode-green {
  /* Background Colors - Cleaner, more modern */
  --color-background: #f0fdf4;
  --color-background-light: #ffffff;
  --color-secondary: #ffffff;
  --color-tertiary: #f0f9f4;
  --color-elevated: #ffffff;
  
  /* Primary Colors - More refined */
  --color-primary: #16a34a;
  --color-primary-light: #22c55e;
  --color-primary-dark: #15803d;
  --color-primary-fade: rgba(22, 163, 74, 0.1);
  --color-hover: #15803d;
  
  /* Text Colors - Better contrast */
  --color-text-light: #14532d;
  --color-text-dark: #166534;
  --color-text-secondary: #15803d;
  --color-text-tertiary: #16a34a;
  --text-primary: #14532d;
  --text-secondary: #15803d;
  --text-tertiary: #16a34a;
  
  /* UI Elements - Enhanced */
  --color-h2: #166534;
  --color-chart-bg: #f0fdf4;
  --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --input-bg: #ffffff;
  --input-label-color: #374151;
  --border-color: #d1fae5;
  --border-color-hover: #16a34a;
  --btn-bg: #16a34a;
  --btn-hover-bg: #15803d;
  
  /* Shadows - Softer, more modern */
  --shadow-light: rgba(0, 0, 0, 0.05);
  --shadow-medium: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(0, 0, 0, 0.15);

  /* Modal - Better contrast and shadows */
  --modal-bg: #ffffff;
  --modal-border: #d1fae5;
  --modal-backdrop: rgba(0, 0, 0, 0.25);
  --modal-content-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Chart/Status - Better colors */
  --chart-bar-paid: #059669;
  --chart-bar-overdue: #dc2626;
  --chart-grid-color: rgba(0, 0, 0, 0.05);
  --chart-text-color: #111827;

  /* Document Modal - Consistent with main theme */
  --bg-primary: #ffffff;
  --bg-secondary: #f0fdf4;
  --bg-tertiary: #f0f9f4;
  --bg-elevated: #ffffff;
  --primary-accent: #16a34a;
  --primary-accent-hover: #15803d;
  --primary-text: #ffffff;
  --success-color: #059669;
  --warning-color: #d97706;
  --error-color: #dc2626;
}

/* ===== Unified Dark Theme Palette ===== */
/* ===== Unified Dark Theme Palette (Original) ===== */
:root.dark-mode,
:root.dark-mode-blue,
:root.dark-mode-gold,
:root.dark-mode-brown,
:root.dark-mode-red,
:root.dark-mode-aqua,
:root.dark-mode-nexacore {
  /* Shared dark palette */
  /* --color-background: #0f172a;
  --color-background-light: #1e293b;
  --color-secondary: #1e293b;
  --color-tertiary: #334155;
  --color-elevated: #1e293b;
  --color-text-light: #f8fafc;
  --color-text-dark: #000000;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #94a3b8;
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-tertiary: #94a3b8;
  --input-label-color: #f8fafc;
  --input-bg: #2C2C2E;
  --border-color: #475569;
  --border-color-hover: #475569;
  --fieldset-border: #444444;
  --shadow-light: rgba(255, 255, 255, 0.08);
  --shadow-medium: rgba(0, 0, 0, 0.3);
  --shadow-dark: rgba(0, 0, 0, 0.5); */

  /* Modal/Overlay */
  /* --modal-bg: #1c1c1c;
  --modal-border: #444444;
  --modal-padding: 20px;
  --modal-shadow: rgba(0, 0, 0, 0.7);
  --modal-backdrop: rgba(0, 0, 0, 0.8);
  --modal-content-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); */

  /* Chart/Status */
  /* --chart-bar-paid: #10b981;
  --chart-bar-overdue: #ef4444;
  --chart-grid-color: rgba(255, 255, 255, 0.2);
  --chart-text-color: #f8fafc; */

  /* Document Modal */
  /* --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --bg-tertiary: #334155;
  --bg-elevated: #1e293b;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --error-color: #ef4444; */
}

/* ===== Unified Dark Theme Palette (Darker Variant) ===== */
 
:root.dark-mode,
:root.dark-mode-blue,
:root.dark-mode-gold,
:root.dark-mode-brown,
:root.dark-mode-red,
:root.dark-mode-aqua,
:root.dark-mode-nexacore {
  --color-background: #242424;
  --color-background-light: #242424;
  --color-secondary: #171717;
  --color-tertiary: #242424;
  --color-elevated: #242424;
  --color-text-light: #d9e4ef;
  --color-text-dark: #000000;
  --color-text-secondary: #9fb0c2;
  --color-text-tertiary: #76879a;
  --text-primary: #e0eafc;
  --text-secondary: #b3bdd3;
  --text-tertiary: #7a8699;
  --input-label-color: #e0eafc;
  --input-bg: #121212;
  --border-color: #2f2f2f;
  --border-color-hover: #3f3f3f;
  --fieldset-border: #2a2a2a;
  --shadow-light: rgba(255, 255, 255, 0.07);
  --shadow-medium: rgba(0, 0, 0, 0.44);
  --shadow-dark: rgba(0,0,0,0.64);

  /* Modal/Overlay */
  --modal-bg: #141414;
  --modal-border: #303030;
  --modal-padding: 20px;
  --modal-shadow: rgba(0, 0, 0, 0.82);
  --modal-backdrop: rgba(0, 0, 0, 0.93);
  --modal-content-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);

  /* Chart/Status */
  --chart-bar-paid: #10b981;
  --chart-bar-overdue: #ef4444;
  --chart-grid-color: rgba(255, 255, 255, 0.07);
  --chart-text-color: #e0eafc;

  /* Document Modal */
  --bg-primary: #0a0a0a;
  --bg-secondary: #171717;
  --bg-tertiary: #202020;
  --bg-elevated: #111111;
  --success-color: #11c885;
  --warning-color: #f8c53a;
  --error-color: #f45d61;
}


/* ===== Dark Theme Variants (Accent Colors) ===== */

/* Gold Accent */
:root.dark-mode,
:root.dark-mode-gold {
  --accent: #2ac98c;
  --accent-light: #48d69f;
  --accent-dark: #21a874;
  --accent-fade: rgba(42, 201, 140, 0.18);
  --color-primary: var(--accent);
  --color-primary-light: var(--accent-light);
  --color-primary-dark: var(--accent-dark);
  --color-primary-fade: var(--accent-fade);
  --color-hover: var(--accent-dark);
  --color-h2: var(--accent);
  --color-chart-bg: var(--accent-fade);
  --btn-bg: var(--accent-dark);
  --btn-hover-bg: var(--accent);
  --primary-accent: var(--accent);
  --primary-accent-hover: var(--accent-dark);
  --primary-text: #f8fafc;
  --primary-rgb: 42, 201, 140;
}

/* Blue Accent */
:root.dark-mode-blue {
  --accent: #4f8ec8;
  --accent-light: #6aa3d6;
  --accent-dark: #3d73a4;
  --accent-fade: rgba(79, 142, 200, 0.16);
  --color-primary: var(--accent);
  --color-primary-light: var(--accent-light);
  --color-primary-dark: var(--accent-dark);
  --color-primary-fade: var(--accent-fade);
  --color-hover: var(--accent-dark);
  --color-h2: var(--accent);
  --color-chart-bg: var(--accent-fade);
  --btn-bg: var(--accent-dark);
  --btn-hover-bg: var(--accent);
  --primary-accent: var(--accent);
  --primary-accent-hover: var(--accent-dark);
  --primary-text: #f8fafc;
  --primary-rgb: 79, 142, 200;
}

/* Aqua Blue Accent */
:root.dark-mode-aqua {
  --accent: #48a9a5;
  --accent-light: #66bbb8;
  --accent-dark: #3b8b88;
  --accent-fade: rgba(72, 169, 165, 0.16);
  --color-primary: var(--accent);
  --color-primary-light: var(--accent-light);
  --color-primary-dark: var(--accent-dark);
  --color-primary-fade: var(--accent-fade);
  --color-hover: var(--accent-dark);
  --color-h2: var(--accent);
  --color-chart-bg: var(--accent-fade);
  --btn-bg: var(--accent-dark);
  --btn-hover-bg: var(--accent);
  --primary-accent: var(--accent);
  --primary-accent-hover: var(--accent-dark);
  --primary-text: #f8fafc;
  --primary-rgb: 72, 169, 165;
}

/* Brown Accent */
:root.dark-mode-brown {
  --accent: #8b6b52;
  --accent-light: #9d7d63;
  --accent-dark: #735740;
  --accent-fade: rgba(139, 107, 82, 0.16);
  --color-primary: var(--accent);
  --color-primary-light: var(--accent-light);
  --color-primary-dark: var(--accent-dark);
  --color-primary-fade: var(--accent-fade);
  --color-hover: var(--accent-dark);
  --color-h2: var(--accent);
  --color-chart-bg: var(--accent-fade);
  --btn-bg: var(--accent-dark);
  --btn-hover-bg: var(--accent);
  --primary-accent: var(--accent);
  --primary-accent-hover: var(--accent-dark);
  --primary-text: #f8fafc;
  --primary-rgb: 139, 107, 82;
}

/* Red Accent */
:root.dark-mode-red {
  --accent: #c56565;
  --accent-light: #d07d7d;
  --accent-dark: #a65252;
  --accent-fade: rgba(197, 101, 101, 0.16);
  --color-primary: var(--accent);
  --color-primary-light: var(--accent-light);
  --color-primary-dark: var(--accent-dark);
  --color-primary-fade: var(--accent-fade);
  --color-hover: var(--accent-dark);
  --color-h2: var(--accent);
  --color-chart-bg: var(--accent-fade);
  --btn-bg: var(--accent-dark);
  --btn-hover-bg: var(--accent);
  --primary-accent: var(--accent);
  --primary-accent-hover: var(--accent-dark);
  --primary-text: #f8fafc;
  --primary-rgb: 197, 101, 101;
}

/* NexaCore (Default): minimalist dark with tech-green accent */
:root.dark-mode-nexacore {
  --accent: #0c86e8;
  --accent-light: #2a9bf0;
  --accent-dark: #1f344d;
  --accent-fade: rgba(12, 134, 232, 0.2);
  --color-primary: var(--accent);
  --color-primary-light: var(--accent-light);
  --color-primary-dark: var(--accent-dark);
  --color-primary-fade: var(--accent-fade);
  --color-hover: var(--accent-dark);
  --color-h2: var(--accent);
  --color-chart-bg: var(--accent-fade);
  --btn-bg: var(--accent-dark);
  --btn-hover-bg: var(--accent);
  --primary-accent: var(--accent);
  --primary-accent-hover: var(--accent-dark);
  --primary-text: #eaf3ef;
  --primary-rgb: 12, 134, 232;
}

/* Global layout spacing from sidebar */
body:not(.sidebar-collapsed) :is(
  .schedule-container,
  .ta-main-content,
  .reports-container,
  .payroll-exports-container,
  .invoices-screen,
  .settings-container
) {
  margin-left: calc(var(--sidebar-width) + var(--sidebar-content-gap)) !important;
  width: calc(100% - var(--sidebar-width) - var(--sidebar-content-gap)) !important;
}

/* Global layout expansion for collapsed sidebar */
body.sidebar-collapsed :is(
  .schedule-container,
  .ta-main-content,
  .reports-container,
  .payroll-exports-container,
  .invoices-screen,
  .settings-container
) {
  margin-left: calc(var(--sidebar-collapsed-width) + var(--sidebar-content-gap)) !important;
  width: calc(100% - var(--sidebar-collapsed-width) - var(--sidebar-content-gap)) !important;
}

.hidden {
    display: none;
}
  
/* Ensure the page takes the full viewport size */
html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    background-color: var(--color-background); 
    font-family: 'Inter', Arial, sans-serif;
    font-size: var(--text-md);
    line-height: 1.45;
  }
  
  .material-icons{
    text-shadow: none;
   }



   /* Container for the pagination controls */
.pagination-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: var(--spacing-medium);
  margin-bottom: var(--spacing-medium);
}

/* Row per page dropdown */
.rows-per-page {
  padding: var(--spacing-small) var(--spacing-medium);
  margin-right: var(--spacing-medium);
  font-size: var(--font-size-small);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-small);
  background-color: var(--color-secondary);
  color: var(--color-text-dark);
  cursor: pointer;
}

.rows-per-page:hover {
  border-color: var(--color-primary);
}

/* Pagination button styling */
.pagination-button {
  padding: var(--spacing-small) var(--spacing-medium);
  margin: 0 var(--spacing-small);
  font-size: var(--font-size-small);
  cursor: pointer;
  background-color: var(--color-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-small);
  transition: background-color var(--transition-speed), border-color var(--transition-speed);
  color: var(--color-text-dark);
}

/* Hover effect for pagination buttons */
.pagination-button:hover {
  background-color: var(--color-primary);
  color: var(--color-text-light);
  border-color: var(--color-primary);
}

/* Active page button */
.pagination-button.active {
  background-color: var(--color-primary);
  color: var(--color-text-light);
  border-color: var(--color-primary);
  font-weight: bold;
}

/* Disabled pagination button */
.pagination-button:disabled {
  background-color: var(--color-secondary);
  cursor: not-allowed;
  color: var(--color-text-dark);
  border-color: var(--color-secondary);
}

/* Styling for the pagination container */
.pagination-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-small);
}

/* Page Info (Showing "Page X of Y") */
.page-info {
  font-size: var(--font-size-small);
  color: var(--color-text-dark);
  margin-left: var(--spacing-medium);
}

/* Responsive adjustment for smaller screens */
@media (max-width: 600px) {
  .pagination-container {
      flex-direction: column;
      align-items: flex-start;
  }

  .rows-per-page {
      margin-bottom: var(--spacing-small);
  }

  .pagination-button {
      padding: var(--spacing-small) var(--spacing-medium);
  }

  .page-info {
      margin-left: 0;
      margin-top: var(--spacing-small);
  }
}



/* Webkit Browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 12px; /* Vertical scrollbar width */
  height: 12px; /* Horizontal scrollbar height */
}

/* Style the scrollbar track */
::-webkit-scrollbar-track {
  background-color: var(--color-background); /* Track background color */
  border-radius: var(--radius-small); /* Rounded corners for the track */
}

/* Style the scrollbar thumb */
::-webkit-scrollbar-thumb {
  background-color: var(--color-primary); /* Thumb color */
  border-radius: var(--radius-small); /* Rounded corners for the thumb */
  border: 2px solid var(--color-background); /* Optional: adds spacing between thumb and track */
}

/* Style the scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-hover); /* Hover thumb color */
}

/* ============================================================================
   FLATPICKR CUSTOM THEME
   ============================================================================ */

/* Override Flatpickr calendar to match our theme */
.flatpickr-calendar {
    background: var(--modal-bg, var(--color-secondary)) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-large) !important;
    box-shadow: var(--shadow-large) !important;
    opacity: 1 !important;
}

.flatpickr-months {
    background: var(--color-primary) !important;
    border-radius: var(--radius-large) var(--radius-large) 0 0 !important;
    padding: 8px 0 !important;
}

.flatpickr-current-month {
    color: white !important;
}

.flatpickr-monthDropdown-months,
.numInputWrapper input {
    background: var(--input-bg) !important;
    color: var(--color-text-light) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-small) !important;
}

.flatpickr-monthDropdown-months:hover,
.numInputWrapper input:hover {
    background: var(--color-tertiary) !important;
    border-color: var(--border-color-hover) !important;
}

/* Month dropdown menu items */
.flatpickr-monthDropdown-months option {
    background: var(--color-secondary) !important;
    color: var(--color-text-light) !important;
    padding: 8px 12px !important;
}

.flatpickr-monthDropdown-months option:hover,
.flatpickr-monthDropdown-months option:checked {
    background: var(--color-primary) !important;
    color: white !important;
}

.flatpickr-prev-month,
.flatpickr-next-month {
    fill: white !important;
    transition: all 0.2s ease !important;
}

.flatpickr-prev-month:hover,
.flatpickr-next-month:hover {
    fill: white !important;
    transform: scale(1.2) !important;
}

.flatpickr-weekdays {
    background: var(--color-tertiary) !important;
}

.flatpickr-weekday {
    color: var(--color-text-light) !important;
    font-weight: 600 !important;
}

.flatpickr-day {
    color: var(--color-text-light) !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

.flatpickr-day:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
}

.flatpickr-day.today {
    border-color: var(--color-primary) !important;
    font-weight: 700 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
}

.flatpickr-day.selected:hover {
    background: var(--color-primary-dark) !important;
}

.flatpickr-day.inRange {
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.2) !important;
    border-color: transparent !important;
}

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
    color: var(--color-text-secondary) !important;
    opacity: 0.3 !important;
}

.flatpickr-time {
    background: var(--color-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
}

.flatpickr-time input {
    background: var(--input-bg) !important;
    color: var(--color-text-light) !important;
    border: 1px solid var(--border-color) !important;
}

.flatpickr-time .flatpickr-am-pm {
    background: var(--color-primary) !important;
    color: white !important;
}

/* Flatpickr input styling */
.flatpickr-input {
    padding: 8px 10px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-medium) !important;
    background-color: var(--input-bg) !important;
    color: var(--color-text-light) !important;
    font-family: var(--font-primary) !important;
    font-size: var(--text-sm) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.flatpickr-input:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 37, 99, 235), 0.1) !important;
}

.flatpickr-input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 37, 99, 235), 0.2) !important;
    outline: none !important;
}

/* ============================================================================
   Native form controls (all modules / themes)
   Solid surfaces, theme tokens — avoids OS “neon blue” and glassy inputs.
   ============================================================================ */

select,
textarea,
input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1.35;
  min-height: var(--control-height-sm);
  padding: 4px 10px;
  color: var(--color-text-light);
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-small);
  box-sizing: border-box;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='M1 2 6 6 11 2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px auto;
}

select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="month"]:focus,
input[type="week"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

/* Native calendar popovers follow page theme */
:root.light-mode input[type="date"],
:root.light-mode input[type="datetime-local"],
:root.light-mode input[type="time"],
:root.light-mode input[type="month"],
:root.light-mode-green input[type="date"],
:root.light-mode-green input[type="datetime-local"],
:root.light-mode-green input[type="time"],
:root.light-mode-green input[type="month"],
:root.light-mode-brown input[type="date"],
:root.light-mode-brown input[type="datetime-local"],
:root.light-mode-brown input[type="time"],
:root.light-mode-brown input[type="month"] {
  color-scheme: light;
}

:root.dark-mode input[type="date"],
:root.dark-mode input[type="datetime-local"],
:root.dark-mode input[type="time"],
:root.dark-mode input[type="month"],
:root.dark-mode-blue input[type="date"],
:root.dark-mode-blue input[type="datetime-local"],
:root.dark-mode-blue input[type="time"],
:root.dark-mode-blue input[type="month"],
:root.dark-mode-gold input[type="date"],
:root.dark-mode-gold input[type="datetime-local"],
:root.dark-mode-gold input[type="time"],
:root.dark-mode-gold input[type="month"],
:root.dark-mode-brown input[type="date"],
:root.dark-mode-brown input[type="datetime-local"],
:root.dark-mode-brown input[type="time"],
:root.dark-mode-brown input[type="month"],
:root.dark-mode-red input[type="date"],
:root.dark-mode-red input[type="datetime-local"],
:root.dark-mode-red input[type="time"],
:root.dark-mode-red input[type="month"],
:root.dark-mode-aqua input[type="date"],
:root.dark-mode-aqua input[type="datetime-local"],
:root.dark-mode-aqua input[type="time"],
:root.dark-mode-aqua input[type="month"],
:root.dark-mode-nexacore input[type="date"],
:root.dark-mode-nexacore input[type="datetime-local"],
:root.dark-mode-nexacore input[type="time"],
:root.dark-mode-nexacore input[type="month"] {
  color-scheme: dark;
}