@layer base, components, overrides;
@layer reset, base, theme, components, utilities, overrides;
/**
 * CSS LAYERS ARCHITECTURE
 *
 * Layers control specificity order without needing !important.
 * Later layers (rightmost) have higher priority.
 *
 * Order: reset → base → theme → components → utilities → overrides
 */
/* Import CSS Variables - must come first for all files to reference */
/**
 * CSS Variables System - Theme-aware design tokens
 *
 * This file defines all colors, spacing, and design tokens used throughout
 * the application. By using CSS custom properties with theme selectors,
 * we can switch themes without creating duplicate utility classes.
 */
/* ============================================================================
   THEME SWITCHING ARCHITECTURE
   ============================================================================ */
:root {
  /* The default theme is dark mode for this application */

  /* ========== Colors - Background ========== */
  --color-bg-primary: #0f0f0f;
  --color-bg-secondary: #1a1a1a;
  --color-bg-tertiary: #262626;
  --color-bg-elevated: #2d2d2d;
  --color-bg-overlay: rgba(0, 0, 0, 0.8);

  /* Card & Container Backgrounds */
  --color-bg-card: #1a1a1a;
  --color-bg-card-hover: #1f1f1f;
  --color-bg-input: rgba(0, 0, 0, 0.3);
  --color-bg-input-focus: rgba(0, 0, 0, 0.4);

  /* ========== Colors - Text ========== */
  --color-text-primary: #ffffff;
  --color-text-secondary: #d1d5db;
  --color-text-muted: #9ca3af;
  --color-text-subtle: #6b7280;
  --color-text-disabled: rgba(255, 255, 255, 0.6);
  --color-text-inverse: #111827;

  /* ========== Colors - Border ========== */
  --color-border-primary: #333333;
  --color-border-secondary: #4b5563;
  --color-border-tertiary: rgba(255, 255, 255, 0.1);
  --color-border-focus: #8b5cf6;
  --color-border-error: #ef4444;
  --color-border-success: #10b981;

  /* ========== Colors - Brand (Purple) ========== */
  --color-brand-50: #faf5ff;
  --color-brand-100: #f3e8ff;
  --color-brand-200: #e9d5ff;
  --color-brand-300: #d8b4fe;
  --color-brand-400: #c084fc;
  --color-brand-500: #a855f7;
  --color-brand-600: #9333ea;
  --color-brand-700: #7e22ce;
  --color-brand-800: #6b21a8;
  --color-brand-900: #581c87;

  --color-brand-primary: #8b5cf6;
  --color-brand-primary-hover: #9333ea;
  --color-brand-primary-active: #7c3aed;
  --color-brand-primary-light: #a78bfa;
  --color-brand-primary-lighter: #c4b5fd;
  --color-brand-primary-subtle: rgba(139, 92, 246, 0.1);
  --color-brand-primary-muted: rgba(139, 92, 246, 0.15);

  /* ========== Colors - Semantic ========== */
  /* Success */
  --color-success: #10b981;
  --color-success-light: #34d399;
  --color-success-dark: #059669;
  --color-success-bg: rgba(16, 185, 129, 0.1);
  --color-success-border: rgba(16, 185, 129, 0.3);

  /* Error/Danger */
  --color-error: #ef4444;
  --color-error-light: #f87171;
  --color-error-dark: #dc2626;
  --color-error-bg: rgba(239, 68, 68, 0.1);
  --color-error-border: rgba(239, 68, 68, 0.3);

  /* Warning */
  --color-warning: #f59e0b;
  --color-warning-light: #fbbf24;
  --color-warning-dark: #d97706;
  --color-warning-bg: rgba(245, 158, 11, 0.1);
  --color-warning-border: rgba(245, 158, 11, 0.3);

  /* Info */
  --color-info: #3b82f6;
  --color-info-light: #60a5fa;
  --color-info-dark: #2563eb;
  --color-info-bg: rgba(59, 130, 246, 0.1);
  --color-info-border: rgba(59, 130, 246, 0.3);

  /* Neutral (grays for status) */
  --color-neutral: #6b7280;
  --color-neutral-light: #9ca3af;
  --color-neutral-dark: #4b5563;
  --color-neutral-bg: rgba(107, 114, 128, 0.1);
  --color-neutral-border: rgba(107, 114, 128, 0.3);

  /* ========== Gradients ========== */
  --gradient-brand-primary: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  --gradient-brand-hover: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
  --gradient-brand-subtle: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(124, 58, 237, 0.1));

  /* ========== Shadows ========== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-brand: 0 10px 15px -3px rgba(139, 92, 246, 0.1);
  --shadow-brand-lg: 0 20px 25px -5px rgba(139, 92, 246, 0.2);

  /* Focus ring for accessibility */
  --shadow-focus: 0 0 0 3px rgba(139, 92, 246, 0.1);
  --shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.1);

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

  /* ========== Border Radius ========== */
  --radius-sm: 0.25rem;     /* 4px */
  --radius-md: 0.375rem;    /* 6px */
  --radius-lg: 0.5rem;      /* 8px */
  --radius-xl: 0.75rem;     /* 12px */
  --radius-2xl: 1rem;       /* 16px */
  --radius-full: 9999px;

  /* ========== Typography ========== */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */

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

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ========== Transitions ========== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;

  /* ========== Z-Index Scale ========== */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-notification: 10000;
  --z-notification-important: 10001;
}
/* ============================================================================
   LIGHT MODE OVERRIDES (if needed in the future)
   ============================================================================ */
[data-theme="light"] {
  /* Background colors for light mode */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f9fafb;
  --color-bg-tertiary: #f3f4f6;
  --color-bg-elevated: #ffffff;
  --color-bg-overlay: rgba(0, 0, 0, 0.5);

  --color-bg-card: #ffffff;
  --color-bg-card-hover: #f9fafb;
  --color-bg-input: #ffffff;
  --color-bg-input-focus: #ffffff;

  /* Text colors for light mode */
  --color-text-primary: #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted: #6b7280;
  --color-text-subtle: #9ca3af;
  --color-text-disabled: rgba(0, 0, 0, 0.4);
  --color-text-inverse: #ffffff;

  /* Borders for light mode */
  --color-border-primary: #e5e7eb;
  --color-border-secondary: #d1d5db;
  --color-border-tertiary: rgba(0, 0, 0, 0.1);

  /* Shadows are lighter in light mode */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
/* ============================================================================
   COMPONENT-SPECIFIC VARIABLES
   ============================================================================ */
:root {
  /* Button variables */
  --button-padding-sm: 0.5rem 1rem;
  --button-padding-md: 0.75rem 1.25rem;
  --button-padding-lg: 0.875rem 1.5rem;

  /* Input variables */
  --input-height-sm: 36px;
  --input-height-md: 44px;
  --input-height-lg: 48px;

  /* Card variables */
  --card-padding: var(--spacing-xl);
  --card-border-radius: var(--radius-xl);

  /* Modal variables */
  --modal-width-sm: 400px;
  --modal-width-md: 600px;
  --modal-width-lg: 800px;
  --modal-width-xl: 1024px;

  /* Table variables */
  --table-row-height: 48px;
  --table-header-height: 44px;
}
/* ============================================================================
   UTILITY CLASSES USING VARIABLES
   ============================================================================ */
/* These utility classes use the variables above, so they automatically
   adapt to theme changes without needing !important */
.text-primary {
  color: var(--color-text-primary);
}
.text-secondary {
  color: var(--color-text-secondary);
}
.text-muted {
  color: var(--color-text-muted);
}
.text-subtle {
  color: var(--color-text-subtle);
}
.text-brand {
  color: var(--color-brand-primary);
}
.bg-card {
  background-color: var(--color-bg-card);
}
.bg-primary {
  background-color: var(--color-bg-primary);
}
.border-primary {
  border-color: var(--color-border-primary);
}
/* Import element-specific CSS */
/* Import element-specific styles - ALL IMPORTS MUST BE FIRST */
/**
 * Button Component Styles
 * Uses CSS layers and variables to eliminate !important declarations
 */
@layer components {
  /* Tag styling for status, priority, etc. */
  .tag {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-xs);
  }

  /* Base button styling */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
    color: inherit;
  }

  /* Button sizes */
  .button-md {
    height: 2.5rem;
    padding: 0 1rem;
  }

  .button-lg {
    height: 2.75rem;
    padding: 0 2rem;
    font-size: var(--font-size-base);
  }

  /* Button variants */
  /* PRIMARY BUTTON - Main purple button style used throughout the app */
  .button-primary,
  .btn-primary,
  .button.btn-primary,
  button.btn-primary {
    background: var(--gradient-brand-primary);
    color: var(--color-text-primary);
    opacity: 1;
  }

  .button-primary:hover,
  .btn-primary:hover,
  .button.btn-primary:hover,
  button.btn-primary:hover {
    background: var(--gradient-brand-hover);
    color: var(--color-text-primary);
  }

  .button-primary:active,
  .btn-primary:active,
  .button.btn-primary:active,
  button.btn-primary:active {
    color: var(--color-text-primary);
  }

  .button-secondary {
    background-color: var(--color-neutral-dark);
    color: var(--color-text-secondary);
  }

  .button-secondary:hover {
    background-color: #2d3748;
  }

  .button-outline {
    background-color: transparent;
    border: 1px solid #9ca3af;
    color: #f3f4f6;
  }

  .button-outline:hover {
    background-color: #374151;
    border-color: #d1d5db;
    color: #ffffff;
  }

  /* Button states */
  .button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .button:focus-visible {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;
  }

  /* Action buttons (small inline buttons) */
  .action-button {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-base);
  }

  /* Table action buttons for view/edit/delete - matching dashboard style */
  .table-action-button-view {
    padding: 4px 8px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all var(--transition-base);
    height: 28px;
    line-height: 1;
    background-color: transparent;
    color: var(--color-text-primary);
  }

  .table-action-button-view:hover {
    background-color: #374151;
    border-color: #8de97ec9;
    color: #8de97ec9;
  }

  .table-action-button-edit {
    padding: 4px 8px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all var(--transition-base);
    height: 28px;
    line-height: 1;
    background-color: transparent;
    color: var(--color-text-primary);
  }

  .table-action-button-edit:hover {
    background-color: #374151;
    border-color: #4A90E2;
    color: #4A90E2;
  }

  .table-action-button-delete {
    padding: 4px 8px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all var(--transition-base);
    height: 28px;
    line-height: 1;
    background-color: #D9534F;
    color: var(--color-text-primary);
  }

  .table-action-button-delete:hover {
    background-color: #D9534F;
  }

  .action-button-edit {
    background-color: var(--color-info);
    color: var(--color-text-primary);
  }

  .action-button-edit:hover {
    background-color: var(--color-info-dark);
  }

  .action-button-delete {
    background-color: var(--color-error);
    color: var(--color-text-primary);
  }

  .action-button-delete:hover {
    background-color: var(--color-error-dark);
  }

  /* Professional nav tab styling */
  .nav-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 1rem var(--spacing-sm);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
  }

  .nav-tab.active {
    border-bottom-color: var(--color-brand-primary);
    background: linear-gradient(180deg, transparent, var(--color-brand-primary-subtle));
  }

  .nav-tab:not(.active):hover {
    color: var(--color-text-primary);
  }

  /* Landscape Orientation Optimizations */
  @media (max-height: 600px) and (orientation: landscape) {
    /* Compact button sizes */
    .button-md {
      height: 2rem;
      padding: 0 0.875rem;
      font-size: 0.8125rem;
    }

    .button-lg {
      height: 2.25rem;
      padding: 0 1.5rem;
      font-size: var(--font-size-sm);
    }

    /* Compact tags */
    .tag {
      padding: 1px 6px;
      font-size: 0.688rem;
    }

    /* Compact action buttons */
    .action-button {
      padding: 0.2rem 0.375rem;
      font-size: 0.688rem;
    }

    /* Compact table action buttons */
    .table-action-button-view,
    .table-action-button-edit,
    .table-action-button-delete {
      padding: 3px 6px;
      font-size: 0.688rem;
      height: 24px;
    }

    /* Compact nav tabs */
    .nav-tab {
      padding: 0.75rem 0.375rem;
      font-size: 0.8125rem;
    }
  }
}
/* Override layer for disabled states that need maximum specificity */
@layer overrides {
  /* Primary button disabled state - needs to override all hover/active states */
  .button-primary:disabled,
  .btn-primary:disabled,
  .button.btn-primary:disabled,
  button.btn-primary:disabled,
  .button.button-md.btn-primary:disabled,
  button.button-md.btn-primary:disabled {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.5) 0%, rgba(124, 58, 237, 0.5) 100%);
    color: var(--color-text-disabled);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 1;
    pointer-events: none;
  }

  /* Primary button disabled hover state - prevent any hover effects */
  .button-primary:disabled:hover,
  .btn-primary:disabled:hover,
  .button.btn-primary:disabled:hover,
  button.btn-primary:disabled:hover,
  .button.button-md.btn-primary:disabled:hover,
  button.button-md.btn-primary:disabled:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.5) 0%, rgba(124, 58, 237, 0.5) 100%);
    color: var(--color-text-disabled);
    transform: none;
    box-shadow: none;
  }
}
/* Form Element Styles - Mobile Responsive */
/* Form groups */
.form-group {
  margin-bottom: 1rem;
}
.form-group:last-child {
  margin-bottom: 0;
}
/* Form layout */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 640px) {
  .form-row {
    flex-direction: row;
  }
}
.form-row > * {
  flex: 1;
}
/* Checkbox inputs - larger touch target on mobile */
.checkbox {
  min-width: 20px;
  min-height: 20px;
  accent-color: #4299e1;
  cursor: pointer;
}
@media (min-width: 640px) {
  .checkbox {
    min-width: 1rem;
    min-height: 1rem;
  }
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: #e2e8f0;
  cursor: pointer;
  min-height: 44px;
}
@media (min-width: 640px) {
  .checkbox-label {
    min-height: auto;
    gap: 0.5rem;
  }
}
/* Radio inputs - larger touch target on mobile */
.radio {
  min-width: 20px;
  min-height: 20px;
  accent-color: #4299e1;
  cursor: pointer;
}
@media (min-width: 640px) {
  .radio {
    min-width: 1rem;
    min-height: 1rem;
  }
}
/* Input hints and help text */
.input-hint {
  font-size: 0.875rem;
  color: #9ca3af;
  margin-top: 0.5rem;
}
/* Form sections */
.form-section {
  padding: 1rem;
  background-color: #0f0f0f;
  border: 1px solid #333333;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
  .form-section {
    padding: 1.5rem;
  }
}
.form-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1rem;
}
@media (min-width: 640px) {
  .form-section-title {
    font-size: 1.125rem;
  }
}
/* Horizontal form fields (label beside input on desktop) */
.form-field-horizontal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  .form-field-horizontal {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  .form-field-horizontal .formLabel {
    min-width: 150px;
    margin-bottom: 0;
  }

  .form-field-horizontal .formInput,
  .form-field-horizontal .formSelect,
  .form-field-horizontal .formTextarea {
    flex: 1;
  }
}
/* Button group spacing */
.button-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .button-group {
    flex-direction: row;
    justify-content: flex-end;
  }
}
.button-group button {
  width: 100%;
  min-height: 48px;
}
@media (min-width: 640px) {
  .button-group button {
    width: auto;
    min-width: 120px;
    min-height: auto;
  }
}
/* ========================================
   LANDSCAPE ORIENTATION OPTIMIZATIONS
   ======================================== */
/* Landscape mode for small screens (phones in landscape) */
@media (max-height: 600px) and (orientation: landscape) {
  /* Form groups - reduce spacing */
  .form-group {
    margin-bottom: 0.75rem;
  }

  /* Form row - use horizontal layout in landscape */
  .form-row {
    flex-direction: row;
    gap: 0.75rem;
  }

  /* Compact checkboxes */
  .checkbox {
    min-width: 1rem;
    min-height: 1rem;
  }

  /* Compact checkbox labels */
  .checkbox-label {
    min-height: auto;
    gap: 0.5rem;
    font-size: 0.8125rem;
  }

  /* Compact radios */
  .radio {
    min-width: 1rem;
    min-height: 1rem;
  }

  /* Smaller hint text */
  .input-hint {
    font-size: 0.8125rem;
    margin-top: 0.25rem;
  }

  /* Compact form sections */
  .form-section {
    padding: 0.75rem;
    margin-bottom: 1rem;
  }

  /* Smaller section titles */
  .form-section-title {
    font-size: 0.9375rem;
    margin-bottom: 0.75rem;
  }

  /* Horizontal form fields - use side-by-side layout in landscape */
  .form-field-horizontal {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .form-field-horizontal .formLabel {
    min-width: 120px;
    margin-bottom: 0;
    font-size: 0.875rem;
  }

  .form-field-horizontal .formInput,
  .form-field-horizontal .formSelect,
  .form-field-horizontal .formTextarea {
    flex: 1;
  }

  /* Button group - horizontal in landscape */
  .button-group {
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .button-group button {
    width: auto;
    min-width: 90px;
    min-height: 36px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}
/* Two-column form layout for landscape */
@media (max-height: 600px) and (orientation: landscape) {
  /* Grid layout for better space usage */
  .form-grid-landscape {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .form-grid-landscape .form-group {
    margin-bottom: 0;
  }

  /* Full width items */
  .form-grid-landscape .form-group-full {
    grid-column: 1 / -1;
  }
}
/* Table Element Styles */
/* Base table styles */
.table {
  width: 100%;
  background-color: #1a1a1a;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #333333;
}
/* Table header */
.table-header {
  background-color: #1a1a1a;
  border-bottom: 1px solid #333333;
}
.table-header-cell {
  padding: 0.75rem 0.5rem;
  text-align: left;
  font-weight: 500;
  color: #ffffff;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border-bottom: 1px solid #333333;
}
/* Table body */
.table-body {
  background-color: #1a1a1a;
}
.table-row {
  border-bottom: 1px solid #333333;
  transition: background-color 0.2s;
}
.table-row:last-child {
  border-bottom: none;
}
.table-row:hover {
  background-color: #374151;
}
.table-cell {
  padding: 0.75rem 0.5rem;
  color: #e2e8f0;
  font-size: 0.875rem;
  vertical-align: top;
}
.table-cell-center {
  text-align: center;
}
.table-cell-right {
  text-align: right;
}
/* Table responsive wrapper */
.table-wrapper {
  overflow-x: auto;
  background-color: #1a1a1a;
  border-radius: 0.75rem;
  border: 1px solid #333333;
}
/* Action buttons container in tables */
.table-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}
/* Table loading state */
.table-loading {
  text-align: center;
  padding: 3rem;
  color: #a0aec0;
  font-size: 0.875rem;
}
/* Table empty state */
.table-empty {
  text-align: center;
  padding: 3rem;
  color: #a0aec0;
  font-size: 0.875rem;
}
.table-empty-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: #d1d5db;
  margin-bottom: 0.5rem;
}
.table-empty-description {
  margin-bottom: 1.5rem;
}
/* Table with alternating row colors */
.table-striped .table-row:nth-child(even) {
  background-color: #262626;
}
.table-striped .table-row:nth-child(even):hover {
  background-color: #374151;
}
/* Compact table variant */
.table-compact .table-header-cell {
  padding: 0.5rem;
  font-size: 0.75rem;
}
.table-compact .table-cell {
  padding: 0.5rem;
  font-size: 0.75rem;
}
/* Table cell with truncated text */
.table-cell-truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Sortable table headers */
.table-header-sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
}
.table-header-sortable:hover {
  background-color: #2d3748;
}
.table-header-sortable::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
}
/* Mobile Responsive Table Styles */
@media (max-width: 1023px) {
  /* Table wrapper - critical for preventing overflow */
  .table-wrapper,
  .tableWrapper,
  div[class*="table-wrapper"],
  div[class*="tableWrapper"] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    box-sizing: border-box;
    position: relative;
  }

  /* Force table to display as block for proper scrolling */
  .table-wrapper .table,
  .tableWrapper .table,
  table {
    display: table;
    width: 100%;
    min-width: min-content;
    box-sizing: border-box;
  }

  /* Hide desktop table on mobile if mobile view available */
  .table-wrapper.hide-mobile-table .table {
    display: none;
  }

  /* Reduce padding on mobile */
  .table-cell,
  .table-header-cell,
  td,
  th {
    padding: 0.5rem 0.5rem;
    font-size: 0.75rem;
    box-sizing: border-box;
  }

  /* Sticky first column on horizontal scroll */
  .table-sticky-first th:first-child,
  .table-sticky-first td:first-child {
    position: sticky;
    left: 0;
    background-color: #1a1a1a;
    z-index: 1;
  }

  /* Ensure table cells don't break layout */
  .table-cell,
  .table-header-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .table-cell-truncate {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* Mobile Card View Container */
.mobile-card-view {
  display: none;
}
@media (max-width: 767px) {
  .mobile-card-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem;
  }
}
/* Mobile Card Styles */
.mobile-card {
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 0.5rem;
  padding: 1rem;
}
.mobile-card:active {
  background-color: #222;
}
.mobile-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  gap: 0.5rem;
}
.mobile-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  flex: 1;
  min-width: 0;
}
.mobile-card-badge {
  flex-shrink: 0;
}
.mobile-card-fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}
.mobile-card-field {
  display: flex;
  gap: 0.5rem;
}
.mobile-card-label {
  color: #9ca3af;
  min-width: 80px;
  font-weight: 500;
}
.mobile-card-value {
  color: #e5e7eb;
  flex: 1;
  word-break: break-word;
}
.mobile-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #333;
}
.mobile-card-actions button {
  flex: 1;
  min-height: 44px;
  justify-content: center;
}
/* Touch-friendly button sizing on mobile */
@media (max-width: 767px) {
  .table-actions button,
  .mobile-card-actions button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.75rem;
  }
}
/* Landscape Orientation Optimizations */
@media (max-height: 600px) and (orientation: landscape) {
  /* Reduce table padding for more vertical space */
  .table-header-cell {
    padding: 0.5rem 0.5rem;
    font-size: 0.75rem;
  }

  .table-cell {
    padding: 0.5rem 0.5rem;
    font-size: 0.8125rem;
  }

  /* Reduce table wrapper spacing */
  .table-wrapper {
    border-radius: 0.5rem;
  }

  /* Compact empty and loading states */
  .table-loading,
  .table-empty {
    padding: 1.5rem;
  }

  .table-empty-title {
    font-size: 1rem;
    margin-bottom: 0.375rem;
  }

  .table-empty-description {
    margin-bottom: 1rem;
  }

  /* More compact mobile card view */
  .mobile-card {
    padding: 0.75rem;
  }

  .mobile-card-header {
    margin-bottom: 0.5rem;
  }

  .mobile-card-title {
    font-size: 0.875rem;
  }

  .mobile-card-fields {
    gap: 0.375rem;
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
  }

  .mobile-card-label {
    min-width: 70px;
  }

  .mobile-card-actions {
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }

  .mobile-card-actions button {
    min-height: 36px;
    padding: 0.375rem 0.625rem;
  }

  /* Optimize table action buttons */
  .table-actions button {
    min-height: 36px;
    min-width: 36px;
    padding: 0.375rem 0.625rem;
  }
}
/* Badge Element Styles */
/* Base badge styles */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
  white-space: nowrap;
}
/* Status badges */
.badge-status-draft {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-status-waiting-review {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-status-started {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-status-done {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-status-rejected {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-status-active {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-status-inactive {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-status-archived {
  background-color: #4A90E2;
  color: #ffffff;
}
/* Project status badges */
.badge-status-planning {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-status-on-hold {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-status-completed {
  background-color: #4A90E2;
  color: #ffffff;
}
/* Effort level badges */
.badge-effort-small {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-effort-medium {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-effort-large {
  background-color: #4A90E2;
  color: #ffffff;
}
/* Category badges */
.badge-category-performance {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-category-user-experience {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-category-ux {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-category-security {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-category-analytics {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-category-integration {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-category-automation {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-category-infrastructure {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-category-compliance {
  background-color: #4A90E2;
  color: #ffffff;
}
/* Priority badges */
.badge-priority-low {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-priority-medium {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-priority-high {
  background-color: #4A90E2;
  color: #ffffff;
}
.badge-priority-critical {
  background-color: #4A90E2;
  color: #ffffff;
  animation: pulse 2s infinite;
}
/* Pulse animation for critical items */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}
/* Pulsating glow animation for highlighted buttons */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.2), 0 4px 6px -1px rgba(139, 92, 246, 0.2);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.5), 0 10px 15px -3px rgba(139, 92, 246, 0.4);
  }
}
/* Badge sizes */
.badge-sm {
  padding: 2px 6px;
  font-size: 10px;
}
.badge-lg {
  padding: 4px 12px;
  font-size: 14px;
}
/* Badge variants */
.badge-outline {
  background-color: transparent;
  border: 1px solid currentColor;
}
.badge-solid {
  border: none;
}
.badge-soft {
  opacity: 0.8;
}
/* Interactive badges (clickable) */
.badge-interactive {
  cursor: pointer;
  transition: all 0.2s;
}
.badge-interactive:hover {
}
/* Badge with icon */
.badge-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.badge-icon {
  width: 0.875rem;
  height: 0.875rem;
}
/* Count badges (for notifications) */
.badge-count {
  min-width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.625rem;
  background-color: #D9534F;
  color: #ffffff;
  font-size: 0.625rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Landscape Orientation Optimizations */
@media (max-height: 600px) and (orientation: landscape) {
  /* Compact base badge */
  .badge {
    padding: 1px 6px;
    font-size: 0.688rem;
  }

  /* Compact badge sizes */
  .badge-sm {
    padding: 1px 5px;
    font-size: 0.625rem;
  }

  .badge-lg {
    padding: 2px 10px;
    font-size: 0.8125rem;
  }

  /* Compact badge icon */
  .badge-icon {
    width: 0.75rem;
    height: 0.75rem;
  }

  /* Compact count badges */
  .badge-count {
    min-width: 1rem;
    height: 1rem;
    border-radius: 0.5rem;
    font-size: 0.563rem;
  }
}
/* Modal Element Styles - Mobile Responsive */
/* Modal overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 9999;
  transition: none;
  pointer-events: auto;
  overflow-y: auto;
}
@media (min-width: 640px) {
  .modal-overlay {
    align-items: center;
    padding: 2rem 1rem;
  }
}
/* Modal container */
.modal-container {
  background-color: #1a1a1a;
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
@media (min-width: 640px) {
  .modal-container {
    height: auto;
    max-height: 90vh;
    max-width: 32rem;
    border-radius: 0.5rem;
    border: 1px solid #333333;
  }
}
/* Large modal */
.modal-container-lg {
  background-color: #1a1a1a;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 640px) {
  .modal-container-lg {
    height: auto;
    max-height: 90vh;
    max-width: 48rem;
    border-radius: 0.5rem;
    border: 1px solid #333333;
  }
}
/* Wide modal for audit detail */
.modal-container-wide {
  background-color: #1a1a1a;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 768px) {
  .modal-container-wide {
    height: auto;
    max-height: 90vh;
    max-width: 56rem;
    border-radius: 0.5rem;
    border: 1px solid #333333;
  }
}
@media (min-width: 1024px) {
  .modal-container-wide {
    max-width: 900px;
  }
}
/* Extra large modal */
.modal-container-xl {
  background-color: #1a1a1a;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 768px) {
  .modal-container-xl {
    height: auto;
    max-height: 90vh;
    max-width: 64rem;
    border-radius: 0.5rem;
    border: 1px solid #333333;
  }
}
@media (min-width: 1024px) {
  .modal-container-xl {
    max-width: 80rem;
    height: 90vh;
  }
}
/* Modal header */
.modal-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #333333;
  background-color: #1a1a1a;
  z-index: 10;
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .modal-header {
    padding: 1.5rem;
  }
}
.modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}
@media (min-width: 640px) {
  .modal-title {
    font-size: 1.25rem;
  }
}
.modal-close {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  font-size: 1.5rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
@media (min-width: 640px) {
  .modal-close {
    min-width: 2rem;
    min-height: 2rem;
  }
}
.modal-close:hover {
  color: #1f2937;
  background-color: #e5e7eb;
}
/* Modal body */
.modal-body {
  flex: 1;
  padding: 1rem;
  background-color: #1a1a1a;
  color: #e2e8f0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 640px) {
  .modal-body {
    padding: 1.5rem;
  }
}
/* Modal body with scrollable content */
.modal-body-scrollable {
  max-height: none;
  overflow-y: auto;
}
@media (min-width: 640px) {
  .modal-body-scrollable {
    max-height: 70vh;
  }
}
/* Audit JSON viewer styling */
.audit-json-viewer {
  background-color: #0a0a0a;
  border: 1px solid #1f1f1f;
  border-radius: 8px;
  padding: 0.75rem;
  font-family: monospace;
  font-size: 0.75rem;
  color: #e5e7eb;
  white-space: pre-wrap;
  word-break: break-word;
}
@media (min-width: 640px) {
  .audit-json-viewer {
    padding: 1rem;
    font-size: 0.875rem;
  }
}
/* Modal footer */
.modal-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-top: 1px solid #333333;
  background-color: #1a1a1a;
  z-index: 10;
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .modal-footer {
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
  }
}
/* Mobile button ordering - primary action first (top) */
.modal-footer button {
  width: 100%;
  min-height: 48px;
}
@media (min-width: 640px) {
  .modal-footer button {
    width: auto;
    min-width: 120px;
    min-height: auto;
  }
}
/* Reverse order for mobile - primary button appears first */
.modal-footer button:first-child {
  order: 2;
}
.modal-footer button:last-child {
  order: 1;
}
@media (min-width: 640px) {
  .modal-footer button:first-child {
    order: 1;
  }

  .modal-footer button:last-child {
    order: 2;
  }
}
/* Modal animations - DISABLED to prevent flickering */
/* @keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-container {
  animation: modalFadeIn 0.2s ease-out;
} */
/* ========================================
   LANDSCAPE ORIENTATION OPTIMIZATIONS
   ======================================== */
/* Landscape mode for small screens (phones in landscape) */
@media (max-height: 600px) and (orientation: landscape) {
  /* Modal overlay - ensure proper centering */
  .modal-overlay {
    align-items: center;
    padding: 0.5rem;
  }

  /* Standard modal container */
  .modal-container {
    max-height: 95vh;
    max-width: 85vw;
    height: auto;
    border-radius: 0.5rem;
  }

  /* Large modal */
  .modal-container-lg {
    max-height: 95vh;
    max-width: 90vw;
    height: auto;
    border-radius: 0.5rem;
  }

  /* Wide modal */
  .modal-container-wide {
    max-height: 95vh;
    max-width: 90vw;
    height: auto;
    border-radius: 0.5rem;
  }

  /* Extra large modal */
  .modal-container-xl {
    max-height: 95vh;
    max-width: 95vw;
    height: auto;
    border-radius: 0.5rem;
  }

  /* Reduce modal header padding */
  .modal-header {
    padding: 0.75rem 1rem;
    min-height: auto;
  }

  /* Smaller modal title */
  .modal-title {
    font-size: 1rem;
  }

  /* Compact close button */
  .modal-close {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.25rem;
  }

  /* Reduce modal body padding */
  .modal-body {
    padding: 1rem;
    max-height: calc(95vh - 120px); /* Account for header and footer */
  }

  /* Scrollable body optimization */
  .modal-body-scrollable {
    max-height: calc(95vh - 120px);
  }

  /* Reduce modal footer padding */
  .modal-footer {
    padding: 0.75rem 1rem;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  /* Compact footer buttons */
  .modal-footer button {
    width: auto;
    min-width: 90px;
    min-height: 36px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }

  /* Restore normal button order in landscape */
  .modal-footer button:first-child {
    order: 1;
  }

  .modal-footer button:last-child {
    order: 2;
  }

  /* Compact audit JSON viewer */
  .audit-json-viewer {
    padding: 0.5rem;
    font-size: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
  }
}
/* Layout Element Styles */
/* Container styles */
.container {
  max-width: 80rem; /* 1280px */
  margin: 0 auto;
  padding: 0 1rem;
}
.container-sm {
  max-width: 40rem;
}
.container-md {
  max-width: 48rem;
}
.container-lg {
  max-width: 64rem;
}
.container-xl {
  max-width: 80rem;
}
.container-full {
  max-width: none;
  width: 100%;
}
/* Page containers */
.page-container {
  padding: 1.5rem;
  background-color: #0f0f0f;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  width: 100%;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #333333;
}
.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}
.page-subtitle {
  font-size: 1rem;
  color: #9ca3af;
  margin-top: 0.25rem;
  margin-bottom: 0;
}
.page-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
/* Card layouts */
.card {
  background-color: #1a1a1a;
  border-radius: 0.75rem;
  border: 1px solid #333333;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.card-header {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #333333;
}
.card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.25rem 0;
}
.card-description {
  font-size: 0.875rem;
  color: #9ca3af;
  margin: 0;
}
.card-body {
  color: #e2e8f0;
}
.card-footer {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid #333333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Grid layouts */
.grid {
  display: grid;
  gap: 1rem;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
/* Flex layouts */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-stretch {
  align-items: stretch;
}
/* Spacing utilities */
.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
/* Sections */
.section {
  margin-bottom: 2rem;
}
.section:last-child {
  margin-bottom: 0;
}
.section-header {
  margin-bottom: 1rem;
}
.section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
}
.section-description {
  font-size: 0.875rem;
  color: #9ca3af;
  margin: 0;
}
/* Dividers */
.divider {
  height: 1px;
  background-color: #333333;
  margin: 1.5rem 0;
}
.divider-vertical {
  width: 1px;
  height: 100%;
  background-color: #333333;
  margin: 0 1rem;
}
/* Loading states */
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  color: #9ca3af;
}
.loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid #374151;
  border-top: 3px solid #4299e1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 0.75rem;
}
/* Empty states */
.empty-state {
  text-align: center;
  padding: 3rem;
  color: #9ca3af;
}
.empty-state-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1rem;
  opacity: 0.5;
}
.empty-state-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: #d1d5db;
  margin-bottom: 0.5rem;
}
.empty-state-description {
  margin-bottom: 1.5rem;
  color: #9ca3af;
}
/* Error states */
.error-state {
  text-align: center;
  padding: 3rem;
  color: #fc8181;
  background-color: #2d1b1b;
  border: 1px solid #e53e3e;
  border-radius: 0.5rem;
}
.error-state-title {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
/* Responsive utilities */
@media (max-width: 640px) {
  .page-container {
    padding: 1rem;
  }

  .page-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }

  .page-actions {
    width: 100%;
  }

  .card {
    padding: 1rem;
  }

  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }
}
/* Dashboard Layout Styles */
/* CSS Layer Definition for proper cascade management */
/* Page layout with sidebar */
.dashboard-page-with-sidebar {
  display: flex;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  background-color: #0f0f0f;
  color: #ffffff;
  overflow-x: auto; /* <-- FIX */
  overflow-y: auto;
  width: 100%;
  max-width: 100%;
  position: relative;
  box-sizing: border-box;
}
/* Main wrapper - Mobile-first approach (default = mobile) */
.dashboard-main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  overflow-x: visible;
  overflow-y: auto;
  /* Mobile default: sidebar is overlay, so full width always */
  margin-left: 0;
  flex: 1; /* <-- FIX: Use flex: 1 instead of width: 100% */
  max-width: 100%;
  transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out;
  box-sizing: border-box;
  position: relative;
}
.dashboard-main-wrapper.sidebar-collapsed {
  /* Mobile: Same - sidebar overlays, doesn't push content */
  margin-left: 0;
  flex: 1; /* <-- FIX: Use flex: 1 instead of width: 100% */
  max-width: 100%;
}
/* Mobile: Ensure wrapper takes full width without causing overflow */
@media (max-width: 1023px) {
  .dashboard-main-wrapper,
  .dashboard-main-wrapper.sidebar-collapsed {
    flex: 1;
    min-width: 0;
    max-width: 100vw;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    overflow-x: visible;
    overflow-y: auto;
    position: relative;
  }
}
/* Desktop overrides (≥1024px) - sidebar pushes content */
@media (min-width: 1024px) {
  .dashboard-main-wrapper {
    /* Desktop: Full sidebar visible - content is pushed */
    margin-left: 260px;
    width: calc(100% - 260px);
    max-width: calc(100% - 260px);
    flex: none; /* Reset flex property for desktop */
  }

  .dashboard-main-wrapper.sidebar-collapsed {
    /* Desktop: Icon rail visible - content adjusts */
    margin-left: 70px;
    width: calc(100% - 70px);
    max-width: calc(100% - 70px);
    flex: none; /* Reset flex property for desktop */
  }
}
/* Page layout (legacy - keep for backwards compatibility) */
.dashboard-page {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  background-color: #0f0f0f;
  color: #ffffff;
  width: 100%;
}
/* Header - Compact Version (with sidebar) */
.dashboard-header-compact {
  background-color: #1a1a1a;
  border-bottom: 1px solid #333333;
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  box-sizing: border-box;
}
.dashboard-header-content-compact {
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
/* Mobile Logo - Hidden since we now have logo above hamburger button */
.dashboard-mobile-logo {
  display: none;
}
/* Mobile: Add top padding to avoid overlapping with logo and hamburger */
@media (max-width: 1023px) {
  .dashboard-header-compact {
    padding-top: 7rem; /* Space for logo + hamburger + safe spacing */
    margin-top: 0;
    width: 100%;
    max-width: 100vw;
    overflow: visible;
    position: relative;
    box-sizing: border-box;
  }

  .dashboard-header-content-compact {
    padding: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Force selectors to full width on mobile */
  .dashboard-selectors-horizontal {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 100%;
    order: 1;
  }

  /* Stack header right elements */
  .dashboard-header-right {
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
    order: 2;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Constrain selector containers */
  .dashboard-selector {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 100%;
  }
}
.dashboard-selectors-horizontal {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex: 1 1 auto;
  max-width: min(600px, 100%);
  min-width: 0;
  overflow: visible;
  position: relative;
}
/* Mobile: Adjust selector container */
@media (max-width: 1023px) {
  .dashboard-selectors-horizontal {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
  }
}
/* Header - Original Version (without sidebar) */
.dashboard-header {
  background-color: #1a1a1a;
  border-bottom: 1px solid #333333;
}
.dashboard-header-content {
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4.5rem;
}
.dashboard-logo {
  display: flex;
  align-items: center;
}
.dashboard-logo-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
}
.dashboard-logo-text {
  color: #ffffff;
  font-weight: bold;
  font-size: 1rem;
}
.dashboard-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.025em;
}
.dashboard-header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  max-width: 600px;
  margin: 0 2rem;
}
.dashboard-selectors {
  display: flex;
  gap: 1rem;
  align-items: center;
  width: 100%;
}
.dashboard-selector {
  flex: 1 1 180px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
}
/* Mobile: Full width selectors */
@media (max-width: 1023px) {
  .dashboard-selector {
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
    position: relative;
  }
}
.dashboard-header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-shrink: 0;
  min-width: 0;
}
.dashboard-user-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  min-width: 0;
  overflow: hidden;
}
.dashboard-user-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.dashboard-organization-info {
  font-size: 0.75rem;
  color: #8b5cf6;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
/* Professional logout button - positioned top right */
.dashboard-logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background-color: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 0.5rem;
  color: #fca5a5;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
  position: relative;
}
.dashboard-logout-btn:hover {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: #D9534F;
  color: #ffffff;
}
.dashboard-logout-btn:active {
}
.dashboard-logout-btn svg {
}
.dashboard-logout-btn:hover svg {
}
/* Stable logout button (no transform animations) */
.dashboard-logout-btn-stable {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border: 1px solid transparent;
  border-radius: 0.5rem;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease-in-out;
  white-space: nowrap;
  flex-shrink: 0;
}
.dashboard-logout-btn-stable:hover {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
}
.dashboard-logout-btn-text {
  color: #ffffff;
  font-weight: 400;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  font-size: 14px;
  letter-spacing: 0.5px;
}
/* Navigation Tabs */
.dashboard-nav {
  background-color: #1a1a1a;
  border-bottom: 1px solid #333333;
  padding: 0.5rem 0;
}
.dashboard-nav-content {
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.dashboard-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: relative;
  margin: 0.25rem;
  color: #ffffff;
}
.dashboard-nav-tab.active {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: #ffffff;
  border: 1px solid transparent;
}
.dashboard-nav-tab:not(.active) {
  color: #ffffff;
  border: 1px solid transparent;
}
.dashboard-nav-tab:not(.active):hover {
  color: #ffffff;
  background-color: rgba(139, 92, 246, 0.15);
  border: 1px solid rgba(139, 92, 246, 0.3);
}
/* Content area */
.dashboard-content {
  width: 100%;
  max-width: 100%;
  padding: 2.5rem 1.5rem;
  padding-top: 5rem; /* Push content down to make room for dropdown */
  flex: 1;
  overflow-x: auto; /* <-- FIX */
  box-sizing: border-box;
  min-width: 0; /* Critical for flex child to shrink properly */
}
/* Ensure all child elements respect container width */
.dashboard-content > * {
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0; /* Prevent flex children from overflowing */
}
/* Mobile: Adjust padding and ensure proper width constraints */
@media (max-width: 1023px) {
  .dashboard-content {
    padding: 1.5rem 1rem;
    padding-top: 3rem; /* Less padding on mobile for dropdown space */
    width: 100%;
    max-width: 100vw;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    overflow-y: auto;
    position: relative;
    box-sizing: border-box;
  }

  /* Ensure all cards and containers fit within mobile viewport */
  .dashboard-card,
  .card {
    max-width: 100%;
    width: 100%;
    overflow-x: auto; /* <-- FIX */
    box-sizing: border-box;
    min-width: 0;
  }

  /* Fix table overflow on mobile - make tables scrollable */
  .dashboard-content table,
  table {
    max-width: 100%;
    width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Wrap all table elements in scrollable container */
  .dashboard-content .table-wrapper,
  .dashboard-content .tableWrapper,
  .dashboard-content div[class*="table"] {
    max-width: 100%;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }

  /* Constrain all direct children - CRITICAL for preventing overflow */
  .dashboard-content > *,
  .dashboard-content > div,
  .dashboard-content > section,
  .dashboard-content > main,
  .dashboard-content > article {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    overflow-x: auto; /* <-- FIX */
  }

  /* Ensure nested containers also constrain */
  .dashboard-content * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Special handling for flex containers */
  .dashboard-content [class*="flex"],
  .dashboard-content [class*="grid"] {
    min-width: 0;
    max-width: 100%;
  }

  /* Ensure main container respects width */
  .dashboard-main-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto; /* <-- FIX */
    box-sizing: border-box;
  }
}
/* Form elements consistent with existing forms.css */
.dashboard-select {
  background-color: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 0.5rem;
  color: #ffffff;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  transition: all 0.2s ease-in-out;
}
.dashboard-select:focus {
  outline: 2px solid #8b5cf6;
  outline-offset: -2px;
  border-color: #8b5cf6;
}
.dashboard-select:hover {
  border-color: #4b5563;
}
.dashboard-select:disabled {
  background-color: #0f0f0f;
  color: #6b7280;
  cursor: not-allowed;
  opacity: 0.6;
}
/* Dashboard cards and sections (stable, no hover effects) */
.dashboard-card {
  background-color: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 0.75rem;
  padding: 1.5rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto; /* <-- FIX */
}
.dashboard-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.dashboard-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}
.dashboard-card-icon {
  color: #8b5cf6;
}
/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.status-badge-success {
  background-color: #065f46;
  color: #8de97ec9;
  border: 1px solid #8de97ec9;
}
.status-badge-warning {
  background-color: #451a03;
  color: #f59e0b;
  border: 1px solid #d97706;
}
.status-badge-info {
  background-color: #1e3a8a;
  color: #4A90E2;
  border: 1px solid #2563eb;
}
.status-badge-neutral {
  background-color: #374151;
  color: #9ca3af;
  border: 1px solid #4b5563;
}
/* Dashboard grid for projects */
.dashboard-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 1rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto; /* <-- FIX */
}
/* Welcome section */
.welcome-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
}
.welcome-content {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.user-details-card {
  flex: 1 1 300px;
  background-color: #0f0f0f;
  border-radius: 0.375rem;
  border: 1px solid #333333;
  padding: 1rem;
}
.user-details-item {
  font-size: 0.875rem;
  color: #9ca3af;
  margin: 0 0 0.5rem 0;
}
.user-details-item:last-child {
  margin-bottom: 0;
}
.user-details-label {
  color: #ffffff;
  font-weight: 500;
}
.organizations-preview-card {
  flex: 1 1 300px;
  background-color: #0f0f0f;
  border-radius: 0.375rem;
  border: 1px solid #333333;
  padding: 1rem;
}
.organizations-preview-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.organizations-count-text {
  font-size: 0.75rem;
  color: #9ca3af;
  margin: 0;
}
/* Link button for admin */
.admin-link-button {
  width: 100%;
  padding: 0.75rem;
  background-color: #1a1a1a;
  border: 1px solid #8b5cf6;
  border-radius: 0.375rem;
  color: #8b5cf6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s;
}
.admin-link-button:hover {
  background-color: #8b5cf6;
  color: #ffffff;
}
/* Organizations cards container */
.organizations-cards-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* Empty states */
.empty-state {
  padding: 2rem;
  text-align: center;
  color: #9ca3af;
  background-color: #0f0f0f;
  border-radius: 0.5rem;
  border: 1px dashed #333333;
}
.empty-state-icon {
  margin: 0 auto 1rem;
  opacity: 0.5;
}
.empty-state-text {
  margin: 0;
  font-size: 1rem;
}
.empty-state-subtext {
  margin: 0;
  font-size: 0.875rem;
}
/* Loading state */
.loading-state {
  padding: 2rem;
  text-align: center;
  color: #9ca3af;
}
/* Error state */
.error-state {
  padding: 2rem;
  text-align: center;
  color: #D9534F;
  background-color: #0f0f0f;
  border-radius: 0.5rem;
  border: 1px solid #D9534F;
}
/* Section subtitle */
.section-subtitle {
  font-size: 0.875rem;
  color: #9ca3af;
  font-weight: 400;
  margin-left: 0.5rem;
}
/* Features section header */
.features-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.features-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* AI Assistant - Compact */
.ai-assistant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.ai-assistant-title-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ai-assistant-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}
.ai-assistant-expand-btn {
  padding: 0.5rem;
  height: auto;
  min-height: auto;
}
.ai-assistant-container {
  display: flex;
  flex-direction: column;
  height: 300px;
  background-color: #0f0f0f;
  border-radius: 0.5rem;
  border: 1px solid #333333;
  overflow: hidden;
}
.ai-messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ai-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 0.5rem;
  color: #9ca3af;
  text-align: center;
  padding: 1rem;
}
.ai-empty-state-icon {
  opacity: 0.5;
}
.ai-empty-state-title {
  margin: 0 0 0.5rem 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
}
.ai-empty-state-subtitle {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
}
.ai-message {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.ai-message-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-message-avatar-user {
  background-color: #374151;
}
.ai-message-avatar-assistant {
  background-color: #8b5cf6;
}
.ai-message-content-wrapper {
  flex: 1;
  min-width: 0;
}
.ai-message-bubble {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  color: #ffffff;
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-message-bubble-user {
  background-color: #262626;
  border: 1px solid #404040;
}
.ai-message-bubble-assistant {
  background-color: #1e1b4b;
  border: 1px solid #8b5cf6;
}
.ai-loading-indicator {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.ai-loading-bubble {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  background-color: #1e1b4b;
  border: 1px solid #8b5cf6;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ai-loading-text {
  font-size: 0.8rem;
  color: #a78bfa;
}
.ai-input-container {
  padding: 0.75rem;
  border-top: 1px solid #333333;
  background-color: #1a1a1a;
}
.ai-input-wrapper {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}
/* AI Assistant - Expanded Modal */
.ai-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 2rem;
}
.ai-modal-container {
  width: 100%;
  max-width: 1200px;
  height: 90vh;
  background-color: #1a1a1a;
  border-radius: 0.75rem;
  border: 1px solid #333333;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ai-modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid #333333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #0f0f0f;
}
.ai-modal-header-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ai-modal-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}
.ai-modal-subtitle {
  font-size: 0.875rem;
  color: #9ca3af;
  margin: 0;
}
.ai-modal-close-btn {
  padding: 0.5rem 1rem;
}
.ai-modal-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ai-modal-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 0.75rem;
  color: #9ca3af;
  text-align: center;
  padding: 2rem;
}
.ai-modal-empty-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
}
.ai-modal-empty-subtitle {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
}
.ai-modal-message {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.ai-modal-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-modal-bubble {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-modal-loading {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.ai-modal-loading-bubble {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background-color: #1e1b4b;
  border: 1px solid #8b5cf6;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ai-modal-loading-text {
  font-size: 0.875rem;
  color: #a78bfa;
}
.ai-modal-input-container {
  padding: 1.5rem;
  border-top: 1px solid #333333;
  background-color: #0f0f0f;
}
.ai-modal-input-wrapper {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}
.ai-modal-textarea {
  flex: 1;
  min-height: 60px;
}
/* Next Steps section */
.next-steps-card {
  border: 1px solid #8b5cf6;
}
.next-steps-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #8b5cf6;
  margin: 0 0 0.5rem 0;
}
.next-steps-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #d1d5db;
}
.next-steps-item {
  margin: 0;
}
/* Footer section */
.dashboard-footer {
  padding: 1.5rem;
  text-align: center;
  border-top: 1px solid #333333;
  margin-top: 2rem;
}
.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.875rem;
  color: #9ca3af;
  flex-wrap: wrap;
}
.footer-link {
  color: #9ca3af;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.footer-link:hover {
  color: #8b5cf6;
}
.footer-separator {
  color: #4b5563;
}
/* Dashboard main container */
.dashboard-main-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
  overflow-x: auto; /* <-- FIX */
  box-sizing: border-box;
}
/* Project cards (stable, no transform animations) */
.dashboard-project-card {
  padding: 1rem;
  background-color: #262626;
  border: 1px solid #404040;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.dashboard-project-card:hover {
  background-color: #333333;
  border-color: #666666;
}
.dashboard-project-card-selected {
  padding: 1rem;
  background-color: #1e1b4b;
  border: 1px solid #8b5cf6;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
/* Card header with button */
.dashboard-card-header-with-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.dashboard-card-header-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}
/* Logo container */
.dashboard-logo-container {
  position: absolute;
  top: 0.5rem;
  left: 1.5rem;
  z-index: 10;
}
.dashboard-logo-image {
  width: 62.4px;
  height: 62.4px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dashboard-logo-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* AI Assistant textarea (stable, no dynamic style changes) */
.dashboard-ai-textarea {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background-color: #0f0f0f;
  border: 1px solid #404040;
  border-radius: 0.375rem;
  color: #ffffff;
  font-size: 0.8rem;
  resize: none;
  max-height: 80px;
  font-family: inherit;
  outline: none;
}
.dashboard-ai-textarea:disabled {
  opacity: 0.5;
}
.dashboard-ai-textarea:focus {
  border-color: #8b5cf6;
}
/* AI Assistant send button (stable, no transform animations) */
.dashboard-ai-send {
  padding: 0.5rem 1rem;
  background-color: #8b5cf6;
  color: #ffffff;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  white-space: nowrap;
}
.dashboard-ai-send:hover {
  background-color: #7c3aed;
}
.dashboard-ai-send-disabled {
  padding: 0.5rem 1rem;
  background-color: #374151;
  color: #9ca3af;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: not-allowed;
  white-space: nowrap;
  opacity: 0.6;
}
/* Responsive design */
@media (max-width: 768px) {
  /* Mobile - no sidebar margin */
  .dashboard-header-center {
    max-width: 500px;
    margin: 0 1rem;
  }

  .dashboard-selectors {
    gap: 0.75rem;
  }

  .dashboard-selector {
    flex: 1 1 160px;
  }

  .dashboard-selectors-horizontal {
    max-width: 500px;
  }

  .dashboard-projects-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }

  .dashboard-header-content-compact {
    padding: 0.875rem 1rem;
    flex-direction: column;
    gap: 1rem;
  }

  .dashboard-selectors-horizontal {
    width: 100%;
    max-width: none;
    flex-direction: column;
  }

  .dashboard-selector {
    width: 100%;
  }

  .dashboard-header-right {
    width: 100%;
    justify-content: space-between;
  }

  .dashboard-user-info {
    align-items: flex-start;
  }

  /* Legacy header styles */
  @layer overrides {
    .dashboard-header-content {
      flex-direction: column;
      height: auto;
      padding: 1rem;
      gap: 1rem;
      position: static;
    }
  }

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

  .dashboard-logo-container {
    position: static;
    margin-bottom: 0.5rem;
  }

  .dashboard-logo-image {
    width: 50px;
    height: 50px;
  }

  .dashboard-header-center {
    width: 100%;
    margin: 0;
    max-width: none;
  }

  .dashboard-selectors {
    flex-direction: column;
    gap: 0.75rem;
  }

  .dashboard-selector {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .dashboard-nav-content {
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
  }

  .dashboard-nav-tab {
    padding: 0.75rem 1rem;
  }

  .dashboard-content {
    padding: 1.5rem;
  }

  .dashboard-card {
    padding: 1.25rem;
  }

  .dashboard-projects-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-card-header-with-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-card-header-title {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .dashboard-header-content {
    padding: 0.75rem;
  }

  .dashboard-logo-icon {
    width: 2rem;
    height: 2rem;
  }

  .dashboard-logo-image {
    width: 40px;
    height: 40px;
  }

  .dashboard-title {
    font-size: 1.25rem;
  }

  .dashboard-nav-content {
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .dashboard-nav-tab {
    justify-content: flex-start;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #333333;
    border-radius: 0;
    width: 100%;
    margin: 0;
  }

  .dashboard-nav-tab.active::after {
    display: none;
  }

  .dashboard-nav-tab.active {
    background-color: rgba(139, 92, 246, 0.1);
  }

  .dashboard-nav-tab:last-child {
    border-bottom: none;
  }

  .dashboard-content {
    padding: 1rem;
  }

  .dashboard-card {
    padding: 1rem;
  }

  .dashboard-logout-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
  }

  .dashboard-user-name {
    font-size: 0.8125rem;
  }

  .dashboard-organization-info {
    font-size: 0.6875rem;
  }

  .dashboard-projects-grid {
    grid-template-columns: 1fr;
  }
}
/* Getting Started Section */
.getting-started-container {
  display: flex;
  gap: 1rem;
  width: 100%;
}
.getting-started-content {
  color: #9ca3af;
  line-height: 1.8;
  font-size: 0.9rem;
}
.getting-started-step {
  margin-bottom: 1rem;
}
.getting-started-step:last-child {
  margin-bottom: 0;
}
.getting-started-step-title {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.getting-started-step-text {
  margin: 0.25rem 0 0 0;
}
/* Getting Started Summary (Dashboard) */
.getting-started-summary {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.getting-started-summary-item {
  color: #9ca3af;
  font-size: 0.9rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #333333;
}
.getting-started-summary-item:last-child {
  border-bottom: none;
}
/* Getting Started Checkbox */
.getting-started-step-with-checkbox {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.getting-started-step-with-checkbox:last-child {
  margin-bottom: 0;
}
.getting-started-checkbox {
  margin-top: 0.25rem;
  min-width: 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  accent-color: #8b5cf6;
  border: 2px solid #8b5cf6;
  border-radius: 0.25rem;
}
.getting-started-checkbox:checked {
  background-color: #8b5cf6;
}
.getting-started-checkbox:hover {
  border-color: #9333ea;
}
/* Getting Started Link Button */
.getting-started-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  margin-left: 0.5rem;
  background-color: transparent;
  color: #8b5cf6;
  border: 1px solid #8b5cf6;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}
.getting-started-link-button:hover {
  background-color: #8b5cf6;
  color: #ffffff;
  transform: translateX(2px);
}
.getting-started-link-button:active {
  transform: translateX(0);
}
/* Subtle glow animation for Getting Started tab */
@keyframes subtle-glow {
  0%, 15%, 85%, 100% {
    background-color: transparent;
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.3);
  }
  50% {
    background-color: rgba(139, 92, 246, 0.25);
    box-shadow: 0 0 0 6px rgba(139, 92, 246, 0);
  }
}
.dashboard-nav-tab-subtle-glow {
  animation: subtle-glow 4s infinite;
}
@media (max-width: 768px) {
  .getting-started-container {
    flex-direction: column;
  }
}
/* Landscape Orientation Optimizations */
@media (max-height: 600px) and (orientation: landscape) {
  /* Compact dashboard header */
  .dashboard-header-content {
    height: 3.5rem;
    padding: 0 1rem;
  }

  .dashboard-logo-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    margin-right: 0.75rem;
  }

  .dashboard-logo-image {
    width: 48px;
    height: 48px;
  }

  .dashboard-title {
    font-size: 1.25rem;
  }

  .dashboard-header-center {
    margin: 0 1rem;
    gap: 0.375rem;
  }

  .dashboard-selectors {
    gap: 0.75rem;
  }

  .dashboard-user-name {
    font-size: 0.8125rem;
  }

  .dashboard-organization-info {
    font-size: 0.688rem;
  }

  .dashboard-logout-btn {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
  }

  /* Compact navigation */
  .dashboard-nav {
    padding: 0.25rem 0;
  }

  .dashboard-nav-tab {
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
    margin: 0.125rem;
  }

  /* Reduce content padding */
  .dashboard-content {
    padding: 1.5rem 1rem;
  }

  /* Compact cards */
  .dashboard-card {
    padding: 1rem;
    border-radius: 0.5rem;
  }

  .dashboard-card-header {
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .dashboard-card-title {
    font-size: 1rem;
  }

  .dashboard-project-card,
  .dashboard-project-card-selected {
    padding: 0.75rem;
  }

  /* Compact status badges */
  .status-badge {
    padding: 0.2rem 0.5rem;
    font-size: 0.688rem;
  }

  /* Reduce welcome section */
  .welcome-title {
    font-size: 1.25rem;
    margin-bottom: 0.375rem;
  }

  .user-details-card,
  .organizations-preview-card {
    padding: 0.75rem;
  }

  .user-details-item {
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
  }

  /* Compact empty states */
  .empty-state {
    padding: 1.5rem;
  }

  .empty-state-text {
    font-size: 0.875rem;
  }

  .empty-state-subtext {
    font-size: 0.8125rem;
  }

  /* Compact AI assistant */
  .ai-assistant-container {
    height: 220px;
  }

  .ai-messages-container {
    padding: 0.75rem;
    gap: 0.5rem;
  }

  .ai-message-avatar {
    width: 20px;
    height: 20px;
  }

  .ai-message-bubble {
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
  }

  .ai-input-container {
    padding: 0.625rem;
  }

  .dashboard-ai-textarea {
    max-height: 60px;
    font-size: 0.75rem;
    padding: 0.375rem 0.625rem;
  }

  .dashboard-ai-send,
  .dashboard-ai-send-disabled {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
  }

  .ai-empty-state-title {
    font-size: 0.8125rem;
  }

  .ai-empty-state-subtitle {
    font-size: 0.688rem;
  }

  /* Compact AI modal */
  .ai-modal-overlay {
    padding: 1rem;
  }

  .ai-modal-container {
    height: 85vh;
  }

  .ai-modal-header {
    padding: 1rem;
  }

  .ai-modal-title {
    font-size: 1.25rem;
  }

  .ai-modal-subtitle {
    font-size: 0.8125rem;
  }

  .ai-modal-messages {
    padding: 1rem;
    gap: 0.75rem;
  }

  .ai-modal-avatar {
    width: 28px;
    height: 28px;
  }

  .ai-modal-bubble {
    padding: 0.625rem 0.875rem;
    font-size: 0.8125rem;
  }

  .ai-modal-input-container {
    padding: 1rem;
  }

  .ai-modal-textarea {
    min-height: 48px;
  }

  /* Compact features header */
  .features-header {
    margin-bottom: 0.75rem;
  }

  .features-title {
    font-size: 1rem;
  }

  /* Compact getting started */
  .getting-started-content {
    font-size: 0.8125rem;
    line-height: 1.6;
  }

  .getting-started-step {
    margin-bottom: 0.75rem;
  }

  .getting-started-step-title {
    font-size: 0.875rem;
  }

  .getting-started-checkbox {
    min-width: 1rem;
    width: 1rem;
    height: 1rem;
  }

  /* Compact footer */
  .dashboard-footer {
    padding: 1rem;
    margin-top: 1.5rem;
  }

  .footer-links {
    gap: 1rem;
    font-size: 0.8125rem;
  }

  /* Reduce main container gap */
  .dashboard-main-container {
    gap: 1rem;
  }

  /* Compact projects grid */
  .dashboard-projects-grid {
    gap: 0.75rem;
  }
}
/* Alert Styles */
.alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
  border-width: 1px;
  border-style: solid;
}
.alert-success {
  background-color: #064e3b;
  border-color: #8de97ec9;
  color: #ffffff;
}
.alert-error {
  background-color: #D9534F;
  border-color: #D9534F;
  color: #ffffff;
}
.alert-warning {
  background-color: #78350f;
  border-color: #d97706;
  color: #ffffff;
}
.alert-info {
  background-color: #1e3a8a;
  border-color: #4A90E2;
  color: #ffffff;
}
/* Success Alert (matches errorAlert pattern) */
.successAlert {
  background-color: #1a1a1a;
  border: 1px solid #8de97ec9;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.successContent {
  display: flex;
  align-items: center;
}
.successIcon {
  color: #8de97ec9;
  margin-right: 12px;
  flex-shrink: 0;
}
.successTitle {
  font-size: 14px;
  font-weight: 500;
  color: #8de97ec9;
  margin: 0;
}
.successMessage {
  font-size: 14px;
  color: #8de97ec9;
  margin-top: 4px;
}
.successClose {
  background: none;
  border: none;
  color: #8de97ec9;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}
.successClose:hover {
  opacity: 0.7;
}
/* Error Alert (dark theme) */
.errorAlert {
  background-color: #1a1a1a;
  border: 1px solid #D9534F;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.errorContent {
  display: flex;
  align-items: flex-start;
}
.errorIcon {
  color: #D9534F;
  margin-right: 12px;
  margin-top: 2px;
  flex-shrink: 0;
}
.errorTitle {
  font-size: 14px;
  font-weight: 500;
  color: #D9534F;
  margin: 0 0 4px 0;
}
.errorMessage {
  font-size: 14px;
  color: #D9534F;
  margin: 0;
}
.errorClose {
  background: none;
  border: none;
  color: #D9534F;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  font-size: 18px;
  line-height: 1;
}
.errorClose:hover {
  opacity: 0.7;
}
/**
 * Context Component Styles
 * Using CSS Layers and Variables for proper specificity management
 */
@layer components {
  /* Main container */
  .context-container {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    background-color: var(--color-bg-primary);
    padding: var(--spacing-xl);
    color: var(--color-text-primary);
    width: 100%;
  }

  .context-wrapper {
    max-width: 1200px;
    margin: 0 auto;
  }

  .context-card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
  }

  /* Header Section */
  .context-header {
    margin-bottom: var(--spacing-2xl);
  }

  .context-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .context-header-info {
    /* No additional styles needed, uses default */
  }

  .context-title {
    font-size: 28px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-sm) 0;
  }

  .context-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin: 0;
  }

  /* Button Section */
  .context-header-buttons {
    display: flex;
    gap: var(--spacing-md);
  }

  .context-button {
    border: none;
    border-radius: var(--radius-md);
    padding: 10px var(--spacing-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: all var(--transition-base);
    text-decoration: none;
    outline: none;
  }

  .context-button-primary {
    background: var(--gradient-brand-primary);
    color: var(--color-text-primary);
  }

  .context-button-primary:hover {
    background: var(--gradient-brand-hover);
  }

  .context-button-secondary {
    background-color: transparent;
    color: var(--color-brand-primary);
    border: 1px solid var(--color-brand-primary);
  }

  .context-button-secondary:hover {
    background-color: var(--color-brand-primary);
    color: var(--color-text-primary);
  }

  .context-button-save {
    background: var(--gradient-brand-primary);
    color: var(--color-text-primary);
    opacity: 1;
  }

  .context-button-save:hover {
    background: var(--gradient-brand-hover);
    color: var(--color-text-primary);
  }

  .context-button-save:disabled {
    background: var(--color-neutral-dark);
    cursor: not-allowed;
  }

  .context-button-save:disabled:hover {
    background: var(--color-neutral-dark);
  }

  .context-button-cancel {
    background-color: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-secondary);
  }

  .context-button-cancel:hover {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-text-subtle);
  }

  /* Level Selector Section */
  .context-level-section {
    margin-bottom: var(--spacing-xl);
  }

  .context-level-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
  }

  .context-level-options {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }

  .context-level-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
  }

  .context-level-option.active {
    background-color: var(--color-brand-primary-subtle);
    border-color: var(--color-brand-primary);
  }

  .context-level-option input[type="radio"] {
    margin-right: var(--spacing-xs);
  }

  .context-level-option-label {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
  }

  /* Form Elements */
  .context-form-group {
    margin-bottom: var(--spacing-lg);
  }

  .context-form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
  }

  .context-form-input,
  .context-form-textarea,
  .context-form-select {
    width: 100%;
    padding: 10px var(--spacing-md);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    outline: none;
    transition: all var(--transition-base);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
  }

  .context-form-input:disabled,
  .context-form-textarea:disabled,
  .context-form-select:disabled {
    background-color: var(--color-bg-tertiary);
    opacity: 0.7;
  }

  .context-form-input:focus,
  .context-form-textarea:focus,
  .context-form-select:focus {
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
  }

  .context-form-textarea {
    resize: vertical;
    min-height: 100px;
  }

  /* Grid Layout */
  .context-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }

  .context-form-group-full {
    margin-bottom: var(--spacing-2xl);
  }

  /* Document Structure Overrides Section */
  .context-overrides-section {
    margin-top: var(--spacing-2xl);
  }

  .context-overrides-title {
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-weight-semibold);
  }

  .context-overrides-description {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xl);
    font-size: var(--font-size-sm);
  }

  .context-override-card {
    background: var(--gradient-brand-subtle);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--color-brand-primary-muted);
    transition: all var(--transition-base);
  }

  .context-override-card:hover {
    border-color: var(--color-brand-primary);
  }

  .context-override-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
  }

  .context-override-label {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
  }

  .context-override-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
  }

  .context-override-checkbox-wrapper.disabled {
    cursor: not-allowed;
    color: var(--color-text-subtle);
  }

  .context-override-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--color-brand-primary);
  }

  .context-override-textarea {
    width: 100%;
    padding: 10px var(--spacing-md);
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    outline: none;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    resize: vertical;
    min-height: 80px;
    transition: all var(--transition-base);
  }

  .context-override-textarea:disabled {
    background-color: var(--color-bg-tertiary);
    opacity: 0.7;
  }

  .context-override-textarea:focus {
    border-color: var(--color-border-focus);
    box-shadow: var(--shadow-focus);
  }

  /* Alert States */
  .context-alert {
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .context-alert-error {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
  }

  .context-alert-error .context-alert-icon {
    color: #D9534F;
    flex-shrink: 0;
    margin-top: 2px;
  }

  .context-alert-error .context-alert-text {
    color: #D9534F;
    font-size: var(--font-size-sm);
  }

  .context-alert-success {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
  }

  .context-alert-success .context-alert-icon {
    color: #16a34a;
    flex-shrink: 0;
    margin-top: 2px;
  }

  .context-alert-success .context-alert-text {
    color: #15803d;
    font-size: var(--font-size-sm);
  }

  /* Loading State */
  .context-loading {
    text-align: center;
    padding: var(--spacing-3xl);
  }

  .context-loading-icon {
    color: var(--color-brand-primary);
    margin: 0 auto var(--spacing-md);
    animation: spin 1s linear infinite;
  }

  .context-loading-text {
    color: var(--color-text-muted);
    margin: 0;
    font-size: var(--font-size-base);
  }

  /* No Organization State */
  .context-no-org {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
  }

  .context-no-org-card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-3xl) var(--spacing-xl);
    text-align: center;
  }

  .context-no-org-icon {
    width: 48px;
    height: 48px;
    background-color: var(--color-border-primary);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-lg);
    color: var(--color-warning-light);
  }

  .context-no-org-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-sm) 0;
  }

  .context-no-org-description {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .context-container {
      padding: var(--spacing-lg);
    }

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

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

    .context-header-content {
      flex-direction: column;
      gap: var(--spacing-lg);
    }

    .context-form-grid {
      grid-template-columns: 1fr;
    }

    .context-level-options {
      flex-direction: column;
      gap: var(--spacing-md);
    }

    .context-no-org-card {
      padding: var(--spacing-2xl) var(--spacing-lg);
    }
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}
/* Purple Theme - Consistent purple branding across the application */
/* Primary purple color palette */
:root {
  --purple-50: #faf5ff;
  --purple-100: #f3e8ff;
  --purple-200: #e9d5ff;
  --purple-300: #d8b4fe;
  --purple-400: #c084fc;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --purple-700: #7e22ce;
  --purple-800: #6b21a8;
  --purple-900: #581c87;

  /* Brand colors */
  --brand-primary: #8b5cf6;
  --brand-primary-dark: #7c3aed;
  --brand-primary-darker: #6d28d9;
  --brand-primary-light: #a78bfa;
  --brand-primary-lighter: #c4b5fd;

  /* Gradients */
  --gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  --gradient-purple-hover: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
  --gradient-purple-subtle: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(124, 58, 237, 0.1));
}
/* All primary buttons should use purple theme */
.btn-primary,
.button-primary,
button[type="submit"]:not(.button-secondary):not(.button-outline),
.submit-btn {
  background: var(--gradient-purple);
  color: #ffffff;
  border: none;
  transition: all 0.2s ease-in-out;
}
.btn-primary:hover,
.button-primary:hover,
button[type="submit"]:not(.button-secondary):not(.button-outline):hover,
.submit-btn:hover {
  background: var(--gradient-purple-hover);
}
.btn-primary:active,
.button-primary:active,
button[type="submit"]:not(.button-secondary):not(.button-outline):active,
.submit-btn:active {
}
/* Generate buttons - special purple styling with proper layer specificity */
@layer components {
  button:has(.lucide-sparkles),
  button:has(.lucide-wand-2),
  button:contains("Generate"),
  .generate-btn,
  .ai-btn {
    background: var(--gradient-purple);
    color: #ffffff;
    border: none;
    position: relative;
    overflow: hidden;
  }

  button:has(.lucide-sparkles):hover,
  button:has(.lucide-wand-2):hover,
  button:contains("Generate"):hover,
  .generate-btn:hover,
  .ai-btn:hover {
    background: var(--gradient-purple-hover);
  }
}
/* Purple accents for interactive elements */
a:not(.button):not(.btn) {
  color: var(--brand-primary-light);
  transition: color 0.2s ease-in-out;
}
a:not(.button):not(.btn):hover {
  color: var(--brand-primary);
}
/* Focus states with purple */
input:focus,
textarea:focus,
select:focus,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-color: var(--brand-primary);
}
input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
/* Purple badges and status indicators */
.badge-primary,
.status-active,
.tag-primary {
  background-color: rgba(139, 92, 246, 0.15);
  color: var(--brand-primary-light);
  border: 1px solid rgba(139, 92, 246, 0.3);
}
/* Purple selection */
::selection {
  background-color: rgba(139, 92, 246, 0.25);
  color: #ffffff;
}
/* Purple scrollbar (webkit browsers) */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6b7280, #4b5563);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--brand-primary), var(--brand-primary-dark));
}
/* Purple progress bars and loaders */
.progress-bar,
.loading-bar {
  background: var(--gradient-purple);
}
/* Spinner with purple */
.spinner,
.animate-spin {
  border-color: rgba(139, 92, 246, 0.2);
  border-top-color: var(--brand-primary);
}
/* Purple tooltips */
.tooltip {
  background-color: var(--brand-primary-dark);
  color: #ffffff;
}
.tooltip::before {
  border-color: var(--brand-primary-dark) transparent transparent transparent;
}
/* Purple switches and toggles */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
/* Purple sliders */
input[type="range"]::-webkit-slider-thumb {
  background: var(--gradient-purple);
  box-shadow: 0 2px 4px rgba(139, 92, 246, 0.2);
}
input[type="range"]::-moz-range-thumb {
  background: var(--gradient-purple);
  box-shadow: 0 2px 4px rgba(139, 92, 246, 0.2);
}
/* Purple cards on hover - removed .dashboard-card:hover to prevent repositioning */
.card:hover {
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.1);
}
/* Purple active states for navigation */
.nav-item.active,
.tab.active,
.menu-item.active {
  color: var(--brand-primary-light);
  background: var(--gradient-purple-subtle);
  border-color: rgba(139, 92, 246, 0.4);
}
/* Purple icons */
.icon-primary,
.lucide-primary,
svg.primary {
  color: var(--brand-primary);
}
/* Purple highlights for important text */
.highlight,
.important,
mark {
  background: linear-gradient(180deg, transparent 60%, rgba(139, 92, 246, 0.3) 60%);
  color: inherit;
}
/* Purple glow effects */
.glow-purple {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}
.glow-purple:hover {
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.4);
}
/* Purple notification dots */
.notification-dot,
.badge-dot {
  background: var(--gradient-purple);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}
/* Animated purple pulse */
@keyframes purple-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(139, 92, 246, 0);
  }
}
.pulse-purple {
  animation: purple-pulse 2s infinite;
}
/* Purple gradient text */
.text-gradient-purple {
  background: var(--gradient-purple);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
/* Purple table row hover */
tbody tr:hover {
  background-color: rgba(139, 92, 246, 0.05);
}
/* Purple dividers */
.divider-purple,
hr.purple {
  border-color: rgba(139, 92, 246, 0.2);
  background: var(--gradient-purple);
  height: 2px;
  border: none;
}
/* Purple info boxes */
.info-box.purple,
.alert.purple {
  background-color: rgba(139, 92, 246, 0.1);
  border-left: 4px solid var(--brand-primary);
  color: var(--brand-primary-lighter);
}
/* Dark mode purple adjustments */
@media (prefers-color-scheme: dark) {
  :root {
    --brand-primary: #a78bfa;
    --brand-primary-dark: #8b5cf6;
    --brand-primary-darker: #7c3aed;
    --brand-primary-light: #c4b5fd;
    --brand-primary-lighter: #ddd6fe;
  }
}
/**
 * Theme Overrides - Using CSS layers and variables
 *
 * All overrides now use CSS custom properties and the "overrides" layer
 * for proper specificity without !important.
 */
@layer overrides {
  /* Ensure all text in dark containers uses theme-aware colors */
  .dashboard-page .text-gray-900,
  .card .text-gray-900,
  .page-container .text-gray-900 {
    color: var(--color-text-primary);
  }

  .dashboard-page .text-gray-700,
  .card .text-gray-700,
  .page-container .text-gray-700 {
    color: var(--color-text-secondary);
  }

  .dashboard-page .text-gray-500,
  .card .text-gray-500,
  .page-container .text-gray-500 {
    color: var(--color-text-muted);
  }

  .dashboard-page .text-gray-400,
  .card .text-gray-400,
  .page-container .text-gray-400 {
    color: var(--color-text-subtle);
  }

  /* Primary color overrides */
  .dashboard-page .text-primary,
  .card .text-primary,
  .page-container .text-primary {
    color: var(--color-brand-primary);
  }

  /* Focus areas and features section headers */
  .dashboard-content h2,
  .dashboard-content h3,
  .card h2,
  .card h3 {
    color: var(--color-text-primary);
  }

  /* Ensure proper contrast for icons */
  .dashboard-content .w-5.h-5,
  .card .w-5.h-5 {
    color: var(--color-brand-primary);
  }

  /* Loading and empty states */
  .dashboard-content .text-lg,
  .card .text-lg {
    color: var(--color-text-secondary);
  }

  /* Button text in dark theme */
  .dashboard-page button,
  .card button {
    color: inherit;
  }

  /* Table and content text */
  body .dashboard-page .text-sm,
  body .card .text-sm,
  .dashboard-page .text-sm.text-sm,
  .card .text-sm.text-sm {
    color: var(--color-text-primary);
  }

  /* Ensure spans inherit proper colors */
  .dashboard-page span,
  .card span {
    color: inherit;
  }

  /* Modal text color overrides */
  .modal-container .text-gray-900 {
    color: var(--color-text-primary);
  }

  .modal-container .text-gray-700 {
    color: var(--color-text-secondary);
  }

  .modal-container .text-gray-500 {
    color: var(--color-text-muted);
  }

  .modal-container .text-gray-400 {
    color: var(--color-text-subtle);
  }

  /* Ensure modal headers and content are visible */
  .modal-container h2,
  .modal-container h3,
  .modal-container .modal-title {
    color: var(--color-text-primary);
  }

  .modal-container .modal-body,
  .modal-container .form {
    color: var(--color-text-secondary);
  }

  /* Modal button consistency */
  .modal-container button {
    color: inherit;
  }
}
/**
 * Auth Pages Utility Classes
 *
 * Utility classes to replace inline styles in authentication pages
 * (LoginPage, SignupPage, ResetPasswordPage)
 */
@layer components {
  /* Main container with enhanced gradient background */
  .auth-page-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0a0f 0%, #1a0a1f 50%, #0f0a1a 100%);
    position: relative;
  }

  .auth-page-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
    pointer-events: none;
  }

  /* Navigation bar */
  .auth-nav {
    border-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    background: rgba(0, 0, 0, 0.2);
  }

  /* Logo background */
  .auth-logo-bg {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2));
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
    transition: all 0.3s ease;
  }

  .auth-logo-container:hover .auth-logo-bg {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(236, 72, 153, 0.3));
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3);
  }

  /* Hero section background */
  .auth-hero-section {
    background: linear-gradient(135deg, rgba(10, 10, 15, 0.8) 0%, rgba(20, 10, 31, 0.9) 100%);
    position: relative;
  }

  /* Form section background */
  .auth-form-section {
    background: linear-gradient(135deg, rgba(15, 10, 26, 0.7) 0%, rgba(26, 15, 40, 0.8) 100%);
    position: relative;
  }

  /* Hero title */
  .auth-hero-title {
    font-weight: 300;
    line-height: 1.1;
    background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Hero image constraint - prevents logo from being too large */
  .auth-hero-title img,
  .auth-hero-content img {
    max-width: 300px;
    height: auto;
    margin: 0 auto;
  }

  /* Enhanced feature cards with sophisticated styling - compact */
  .auth-feature-card {
    border: 1.5px solid rgba(139, 92, 246, 0.4);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(236, 72, 153, 0.08) 100%);
    backdrop-filter: blur(16px);
    box-shadow:
      0 8px 24px rgba(139, 92, 246, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.25rem 1.5rem !important;
    position: relative;
    overflow: hidden;
  }

  .auth-feature-card p {
    line-height: 1.5 !important;
    letter-spacing: 0.01em;
    font-size: 1.125rem !important; /* 18px */
    margin: 0 !important;
  }

  /* Enhanced form card with glassmorphism - compact */
  .auth-form-card {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    padding: 2rem 2rem;
    transition: all 0.3s ease;
  }

  .auth-form-card:hover {
    box-shadow:
      0 25px 70px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-color: rgba(139, 92, 246, 0.2);
  }

  /* Form labels */
  .auth-label {
    color: var(--color-text-secondary);
  }

  /* Form inputs - compact */
  .auth-input {
    min-height: 44px;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
  }

  .auth-input:focus {
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
  }

  /* Error message box */
  .auth-error {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
  }

  .auth-error-text {
    color: var(--color-error);
  }

  /* Submit button - compact */
  .auth-submit-button {
    min-height: 44px;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    transition: all 0.3s ease;
    font-weight: 600;
  }

  .auth-submit-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
    transform: translateY(-1px);
  }

  .auth-submit-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
  }

  /* Divider */
  .auth-divider-line {
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
  }

  .auth-divider-text {
    color: var(--color-text-muted);
  }

  /* Google loading overlay */
  .auth-google-loading {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 10;
  }

  /* Loading spinner */
  .auth-spinner {
    border: 3px solid rgba(139, 92, 246, 0.3);
    border-top: 3px solid #8b5cf6;
  }

  .auth-spinner-text {
    color: #a78bfa;
    font-weight: 500;
  }

  /* Links */
  .auth-link {
    color: #a78bfa;
    min-height: 44px;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .auth-link:hover {
    color: #c4b5fd;
    text-decoration: underline;
  }

  .auth-link-purple {
    color: #a78bfa;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .auth-link-purple:hover {
    color: #c4b5fd;
    text-decoration: underline;
  }

  /* Secondary text */
  .auth-secondary-text {
    color: var(--color-text-muted);
  }

  /* Success icon background */
  .auth-success-icon-bg {
    background-color: var(--color-success);
  }

  /* Success/info icon colors */
  .auth-icon-white {
    color: var(--color-text-primary);
  }

  .auth-icon-purple {
    color: var(--color-brand-primary);
    margin-top: 0.125rem;
  }

  .auth-icon-error {
    color: var(--color-error);
    margin-top: 0.125rem;
  }

  /* Role/source input spacing */
  .auth-other-input {
    margin-top: 0.5rem;
  }

  /* Centered text sections */
  .auth-text-center {
    text-align: center;
  }

  .auth-title-section {
    text-align: center;
    margin-bottom: 2rem;
  }

  .auth-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
  }

  .auth-subtitle {
    color: var(--color-text-muted);
    font-size: 14px;
  }

  /* Logo clickable container */
  .auth-logo-container {
    cursor: pointer;
  }

  /* Main content layout adjustments */
  .auth-main-content {
    justify-content: center;
  }
}
/* Mobile-First Responsive Updates for layout.css */
/* Page containers - Mobile-first responsive */
.page-container {
  padding: clamp(1rem, 3vw, 2rem);
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}
/* Mobile: Ensure page containers take full width without overflow */
@media (max-width: 1023px) {
  .page-container {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    overflow-x: auto;
  }

  .page-container > * {
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }
}
.page-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: clamp(1rem, 3vw, 2rem);
}
@media (min-width: 768px) {
  .page-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.page-title {
  font-size: clamp(1.25rem, 4vw, 1.5rem);
}
.page-subtitle {
  font-size: clamp(0.875rem, 2vw, 1rem);
}
.page-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
@media (min-width: 640px) {
  .page-actions {
    flex-direction: row;
    width: auto;
    gap: 0.75rem;
  }
}
/* Card layouts - Responsive padding */
.card {
  padding: clamp(1rem, 2vw, 1.5rem);
  max-width: 100%;
  box-sizing: border-box;
}
/* Mobile: Ensure cards fit within viewport */
@media (max-width: 1023px) {
  .card {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
  }

  .dashboard-card {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
    min-width: 0;
  }
}
.card-title {
  font-size: clamp(1rem, 2vw, 1.125rem);
}
/* Grid layouts - Progressive enhancement */
.grid {
  gap: clamp(0.75rem, 2vw, 1rem);
}
.grid-cols-2 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.grid-cols-3 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.grid-cols-4 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.grid-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
/* Section titles */
.section-title {
  font-size: clamp(1rem, 2vw, 1.125rem);
}
/* Empty and error states */
.empty-state {
  padding: clamp(2rem, 4vw, 3rem);
}
.empty-state-title {
  font-size: clamp(1rem, 2vw, 1.125rem);
}
.empty-state-description {
  font-size: clamp(0.875rem, 1.5vw, 1rem);
}
.error-state {
  padding: clamp(2rem, 4vw, 3rem);
}
.error-state-title {
  font-size: clamp(1rem, 2vw, 1.125rem);
}
/* ============================================= */
/* LANDSCAPE ORIENTATION OPTIMIZATIONS */
/* ============================================= */
/* Landscape mode - Compact page containers */
@media (max-height: 600px) and (orientation: landscape) {
  .page-container {
    padding: 0.75rem clamp(1rem, 3vw, 1.5rem);
  }

  .page-header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    gap: 0.5rem;
  }

  .page-title {
    font-size: clamp(1.125rem, 3vw, 1.375rem);
  }

  .page-subtitle {
    font-size: clamp(0.8125rem, 1.8vw, 0.9375rem);
  }

  /* Compact cards */
  .card {
    padding: 0.875rem clamp(1rem, 2vw, 1.25rem);
  }

  .card-title {
    font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
  }

  .card-header {
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .card-footer {
    padding-top: 0.5rem;
    margin-top: 0.75rem;
  }

  /* Reduce grid gaps */
  .grid {
    gap: 0.625rem;
  }

  /* Section spacing */
  .section {
    margin-bottom: 1rem;
  }

  .section-header {
    margin-bottom: 0.625rem;
  }

  .section-title {
    font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
  }

  /* Empty states */
  .empty-state {
    padding: 1.5rem clamp(1rem, 2vw, 1.5rem);
  }

  .empty-state-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.75rem;
  }

  .empty-state-title {
    font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
    margin-bottom: 0.375rem;
  }

  .empty-state-description {
    font-size: clamp(0.8125rem, 1.5vw, 0.9375rem);
    margin-bottom: 1rem;
  }

  /* Error states */
  .error-state {
    padding: 1.5rem clamp(1rem, 2vw, 1.5rem);
  }

  .error-state-title {
    font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
    margin-bottom: 0.375rem;
  }
}
/* Landscape mode - Optimize grid columns for horizontal space */
@media (max-height: 600px) and (orientation: landscape) and (min-width: 640px) {
  /* Use more columns in landscape */
  .grid-cols-2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-cols-3 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid-cols-4 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .grid-auto-fit,
  .grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  }
}
/* Landscape mode - Extra compact for very short screens */
@media (max-height: 480px) and (orientation: landscape) {
  .page-container {
    padding: 0.5rem clamp(0.75rem, 2vw, 1rem);
  }

  .page-header {
    margin-bottom: 0.5rem;
    padding-bottom: 0.375rem;
  }

  .card {
    padding: 0.625rem clamp(0.75rem, 1.5vw, 1rem);
  }

  .empty-state,
  .error-state {
    padding: 1rem clamp(0.75rem, 1.5vw, 1rem);
  }
}
/* Mobile-First Responsive Updates for dashboard.css */
/* Dashboard header - Mobile responsive */
.dashboard-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}
.dashboard-header-content {
  padding: clamp(0.75rem, 2vw, 1.5rem);
  min-height: 60px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Mobile: Add top padding to avoid overlapping with fixed logo/hamburger */
@media (max-width: 1023px) {
  @layer overrides {
    .dashboard-header-compact {
      padding-top: 6.5rem; /* Space for logo + hamburger */
      margin-top: 0;
      width: 100%;
      max-width: 100%;
    }

    .dashboard-header-content-compact {
      width: 100%;
      max-width: 100%;
      padding-left: 1rem;
      padding-right: 1rem;
      flex-wrap: wrap;
      gap: 0.75rem;
    }
  }
}
/* Dashboard navigation - Horizontal scrollable on mobile */
.dashboard-nav {
  position: sticky;
  top: 60px;
  z-index: 40;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
}
.dashboard-nav::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
.dashboard-nav-content {
  padding: 0.5rem clamp(0.75rem, 2vw, 1.5rem);
  overflow-x: auto;
  min-width: min-content;
}
.dashboard-nav-tab {
  min-height: var(--input-height-md); /* Touch target */
  min-width: var(--input-height-md);
  white-space: nowrap;
  padding: 0.875rem 1.25rem;
}
/* Dashboard content - Responsive padding and width constraints */
.dashboard-content {
  padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 3vw, 1.5rem);
  width: 100%;
  max-width: 100%;
  min-width: 0; /* Critical for flex child to shrink properly */
  overflow-x: auto;
  box-sizing: border-box;
}
/* Mobile: Ensure dashboard content takes full width without overflow */
@media (max-width: 1023px) {
  @layer overrides {
    .dashboard-content {
      width: 100%;
      max-width: 100vw;
      margin-left: 0;
      margin-right: 0;
      padding: 1.5rem 1rem;
      overflow-x: auto;
      overflow-y: auto;
      position: relative;
      box-sizing: border-box;
    }

    /* Constrain all direct children to prevent overflow */
    .dashboard-content > * {
      max-width: 100%;
      box-sizing: border-box;
      min-width: 0;
      width: 100%;
    }

    .dashboard-content > div,
    .dashboard-content > section,
    .dashboard-content > main,
    .dashboard-content > article {
      max-width: 100%;
      width: 100%;
      box-sizing: border-box;
      min-width: 0;
      overflow-x: auto;
    }

    /* Ensure all nested elements respect width */
    .dashboard-content * {
      max-width: 100%;
      box-sizing: border-box;
    }

    /* Force tables to scroll horizontally */
    .dashboard-content table,
    .dashboard-content .table-wrapper,
    .dashboard-content .tableWrapper {
      display: block;
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
}
/* Dashboard selectors - Stack on mobile */
.dashboard-header-center {
  width: 100%;
  max-width: none;
  margin: var(--spacing-sm) 0;
}
@media (min-width: 768px) {
  @layer overrides {
    .dashboard-header-center {
      max-width: 600px;
      margin: 0 var(--spacing-2xl);
    }
  }
}
.dashboard-selectors {
  flex-direction: column;
  width: 100%;
}
@media (min-width: 640px) {
  @layer overrides {
    .dashboard-selectors {
      flex-direction: row;
    }
  }
}
.dashboard-selector {
  width: 100%;
  min-width: unset;
}
@media (min-width: 640px) {
  @layer overrides {
    .dashboard-selector {
      width: auto;
      min-width: 180px;
    }
  }
}
/* User info - Responsive layout */
.dashboard-user-info {
  display: none;
}
@media (min-width: 640px) {
  @layer overrides {
    .dashboard-user-info {
      display: flex;
    }
  }
}
/* Logout button - Responsive sizing */
.dashboard-logout-btn-stable {
  min-height: var(--input-height-md); /* Touch target */
  padding: 0.625rem 1rem;
  font-size: clamp(0.8125rem, 1.5vw, 0.875rem);
}
/* Logo - Responsive sizing */
.dashboard-logo-image {
  width: clamp(40px, 10vw, 62.4px);
  height: clamp(40px, 10vw, 62.4px);
}
/* Dashboard cards - Touch-friendly spacing */
.dashboard-card {
  padding: clamp(1rem, 2vw, 1.5rem);
}
/* Projects grid - Responsive columns */
.dashboard-projects-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px) {
  @layer overrides {
    .dashboard-projects-grid {
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
  }
}
/* Mobile menu toggle button */
.dashboard-mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--input-height-md);
  min-width: var(--input-height-md);
  padding: var(--spacing-sm);
  background-color: transparent;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.dashboard-mobile-menu-toggle:hover {
  background-color: var(--color-brand-primary-subtle);
  border-color: var(--color-brand-primary);
}
@media (min-width: 768px) {
  @layer overrides {
    .dashboard-mobile-menu-toggle {
      display: none;
    }
  }
}
/* Mobile user menu drawer */
.dashboard-mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 100;
  display: none;
}
.dashboard-mobile-drawer-overlay.active {
  display: block;
}
.dashboard-mobile-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  max-width: 80vw;
  height: 100vh;
  background-color: var(--color-bg-secondary);
  border-left: 1px solid var(--color-border-primary);
  padding: var(--spacing-xl);
  transition: right var(--transition-slow);
  z-index: 101;
  overflow-y: auto;
}
.dashboard-mobile-drawer.active {
  right: 0;
}
.dashboard-mobile-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border-primary);
}
.dashboard-mobile-drawer-close {
  min-height: var(--input-height-md);
  min-width: var(--input-height-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  color: var(--color-text-primary);
  cursor: pointer;
}
.dashboard-mobile-user-section {
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--color-border-primary);
}
.dashboard-mobile-user-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}
.dashboard-mobile-user-org {
  font-size: var(--font-size-sm);
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-medium);
}
@media (min-width: 768px) {
  @layer overrides {
    .dashboard-mobile-drawer-overlay,
    .dashboard-mobile-drawer {
      display: none;
    }
  }
}
/* Footer - Mobile responsive */
.dashboard-footer {
  padding: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
.footer-links {
  flex-direction: column;
  gap: var(--spacing-md);
  text-align: center;
}
@media (min-width: 640px) {
  @layer overrides {
    .footer-links {
      flex-direction: row;
      gap: var(--spacing-xl);
    }
  }
}
.footer-separator {
  display: none;
}
@media (min-width: 640px) {
  @layer overrides {
    .footer-separator {
      display: inline;
    }
  }
}
.footer-link {
  display: block;
  padding: var(--spacing-sm) 0;
  min-height: var(--input-height-md); /* Touch target */
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 640px) {
  @layer overrides {
    .footer-link {
      display: inline;
      padding: 0;
      min-height: auto;
    }
  }
}
/* ============================================= */
/* LANDSCAPE ORIENTATION OPTIMIZATIONS */
/* ============================================= */
/* Landscape mode - Compact header for maximum vertical space */
@media (max-height: 600px) and (orientation: landscape) {
  @layer overrides {
    .dashboard-header-content {
      min-height: 50px;
      padding: var(--spacing-sm) clamp(0.75rem, 2vw, 1.5rem);
    }

    .dashboard-nav {
      top: 50px;
    }

    .dashboard-nav-content {
      padding: 0.375rem clamp(0.75rem, 2vw, 1.5rem);
    }

    .dashboard-nav-tab {
      padding: 0.625rem 1rem;
      min-height: 40px;
      font-size: var(--font-size-sm);
    }

    .dashboard-logo-image {
      width: clamp(36px, 8vw, 50px);
      height: clamp(36px, 8vw, 50px);
    }

    .dashboard-logout-btn-stable {
      min-height: 40px;
      padding: var(--spacing-sm) 0.875rem;
      font-size: var(--font-size-xs);
    }

    /* Compact content padding */
    .dashboard-content {
      padding: 0.75rem clamp(1rem, 3vw, 1.5rem);
    }

    /* Reduce vertical spacing between cards */
    .dashboard-main-container {
      gap: var(--spacing-md);
    }

    .dashboard-main-container .space-y-4,
    .dashboard-main-container .space-y-6 {
      gap: var(--spacing-md);
    }

    /* Compact cards */
    .dashboard-card {
      padding: 0.875rem clamp(1rem, 2vw, 1.25rem);
    }

    /* Optimize selectors for landscape */
    .dashboard-header-center {
      margin: 0 var(--spacing-lg);
    }

    .dashboard-selectors {
      gap: var(--spacing-sm);
    }
  }
}
/* Landscape mode - Optimize grid layouts for horizontal space */
@media (max-height: 600px) and (orientation: landscape) and (min-width: 640px) {
  @layer overrides {
    /* More columns for project cards */
    .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* Optimize organizations cards to use horizontal space */
    .organizations-cards-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: var(--spacing-md);
    }
  }
}
/* Landscape mode - Reduce vertical spacing in welcome section */
@media (max-height: 600px) and (orientation: landscape) {
  @layer overrides {
    .dashboard-card h2 {
      margin-bottom: var(--spacing-md);
      font-size: var(--font-size-xl);
    }

    .user-details-card,
    .organizations-preview-card {
      padding: var(--spacing-md);
    }

    .user-details-item {
      margin-bottom: 0.375rem;
    }

    .organizations-preview-title {
      margin-bottom: var(--spacing-sm);
    }

    /* Compact AI assistant in landscape */
    .ai-assistant-container {
      max-height: 150px;
    }

    .ai-messages-container {
      max-height: 80px;
    }

    .ai-empty-state-title {
      font-size: var(--font-size-xs);
    }

    /* Compact getting started summary */
    .getting-started-summary-item {
      padding: var(--spacing-sm);
      font-size: var(--font-size-sm);
    }
  }
}
/* Landscape mode - Footer optimization */
@media (max-height: 600px) and (orientation: landscape) {
  @layer overrides {
    .dashboard-footer {
      padding: var(--spacing-md) clamp(1rem, 2vw, 1.5rem);
      margin-top: var(--spacing-lg);
    }

    .footer-link {
      min-height: 40px;
    }
  }
}
/* Legal Pages (Terms of Service & Privacy Policy) Styles */
.legalPage {
  min-height: 100vh;
  background-color: #0f0f0f;
  color: #ffffff;
  padding: 2rem;
  padding-top: 6rem;
  position: relative;
}
.legalPageContainer {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.legalPageLogo {
  position: absolute;
  top: 0.5rem;
  left: 1.5rem;
  z-index: 10;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.legalPageLogo:hover {
  opacity: 0.8;
}
.legalPageLogo img {
  width: 62.4px;
  height: 62.4px;
  object-fit: contain;
}
.legalPageBackLink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #8b5cf6;
  text-decoration: none;
  margin-bottom: 2rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.legalPageBackLink:hover {
  color: #7c3aed;
}
.legalPageTitle {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #ffffff;
}
.legalPageLastUpdated {
  color: #9ca3af;
  margin-bottom: 2rem;
  font-size: 0.875rem;
}
.legalPageContent {
  background-color: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 0.75rem;
  padding: 2rem;
  line-height: 1.8;
}
.legalPageContent section {
  margin-bottom: 2rem;
}
.legalPageContent section:last-child {
  margin-bottom: 0;
}
.legalPageContent h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #ffffff;
}
.legalPageContent h3 {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #ffffff;
}
.legalPageContent p {
  color: #d1d5db;
  margin-bottom: 1rem;
}
.legalPageContent p:last-child {
  margin-bottom: 0;
}
.legalPageContent ul {
  color: #d1d5db;
  margin-left: 2rem;
  margin-bottom: 1rem;
}
.legalPageContent ul:last-child {
  margin-bottom: 0;
}
.legalContactEmail {
  color: #8b5cf6;
  margin-top: 0.5rem;
}
.legalContactGeneral {
  color: #d1d5db;
  margin-top: 1rem;
}
/* Responsive design */
@media (max-width: 640px) {
  .legalPage {
    padding: 1rem;
    padding-top: 5rem;
  }

  .legalPageTitle {
    font-size: 2rem;
  }

  .legalPageContent {
    padding: 1.5rem;
  }

  .legalPageLogo img {
    width: 50px;
    height: 50px;
  }
}
/* Global Element Type CSS */
/* Global element styles that don't fit into specific categories */
/* Typography elements */
h1, h2, h3, h4, h5, h6 {
  color: #ffffff;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}
h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.25rem;
}
h4 {
  font-size: 1.125rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.875rem;
}
p {
  color: #e2e8f0;
  margin: 0 0 1rem 0;
  line-height: 1.6;
}
p:last-child {
  margin-bottom: 0;
}
/* Link elements */
a {
  color: #4299e1;
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: #63b3ed;
  text-decoration: underline;
}
a:focus {
  outline: 2px solid #4299e1;
  outline-offset: 2px;
}
/* List elements */
ul, ol {
  color: #e2e8f0;
  margin: 0 0 1rem 0;
  padding-left: 1.5rem;
}
li {
  margin-bottom: 0.25rem;
}
li:last-child {
  margin-bottom: 0;
}
/* Code elements */
code {
  background-color: #374151;
  color: #f3f4f6;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
  font-family: 'Courier New', Courier, monospace;
}
pre {
  background-color: #1f2937;
  color: #f3f4f6;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 0 0 1rem 0;
}
pre code {
  background-color: transparent;
  padding: 0;
}
/* Image elements */
img {
  max-width: 100%;
  height: auto;
  border-radius: 0.375rem;
}
/* HR elements */
hr {
  border: none;
  height: 1px;
  background-color: #333333;
  margin: 1.5rem 0;
}
/* Blockquote elements */
blockquote {
  border-left: 4px solid #4299e1;
  padding-left: 1rem;
  margin: 0 0 1rem 0;
  color: #d1d5db;
  font-style: italic;
}
/* Details/Summary elements */
details {
  background-color: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 0.375rem;
  padding: 0.5rem;
  margin: 0 0 1rem 0;
}
summary {
  cursor: pointer;
  font-weight: 500;
  color: #ffffff;
  padding: 0.25rem;
}
summary:hover {
  color: #4299e1;
}
/* Mark element */
mark {
  background-color: #fbbf24;
  color: #1f2937;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
}
/* Utility classes for element modifications */
.text-xs {
  font-size: 0.75rem;
}
.text-sm {
  font-size: 0.875rem;
}
.text-base {
  font-size: 1rem;
}
.text-lg {
  font-size: 1.125rem;
}
.text-xl {
  font-size: 1.25rem;
}
.text-2xl {
  font-size: 1.5rem;
}
.text-3xl {
  font-size: 1.875rem;
}
.font-normal {
  font-weight: 400;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
/* Color utilities for text */
.text-white {
  color: #ffffff;
}
.text-gray-300 {
  color: #d1d5db;
}
.text-gray-400 {
  color: #9ca3af;
}
.text-gray-500 {
  color: #6b7280;
}
.text-blue-400 {
  color: #60a5fa;
}
.text-blue-500 {
  color: #4A90E2;
}
.text-green-400 {
  color: #4ade80;
}
.text-green-500 {
  color: #22c55e;
}
.text-red-400 {
  color: #D9534F;
}
.text-red-500 {
  color: #D9534F;
}
.text-yellow-400 {
  color: #facc15;
}
.text-yellow-500 {
  color: #eab308;
}
.text-purple-400 {
  color: #c084fc;
}
.text-purple-500 {
  color: #a855f7;
}
/* Layer declaration AFTER imports */
/* Tailwind in layers for proper cascade control */
@layer reset {
  @tailwind base;
}
@layer utilities {
  @tailwind components;
  @tailwind utilities;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
/* ShadCN UI theme variables - kept for compatibility */
@layer theme {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 84% 4.9%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 94.1%;
  }
}
/* Base styles using CSS variables */
@layer base {
  * {
    border-color: hsl(var(--border));
    box-sizing: border-box;
  }

  html {
    background-color: var(--color-bg-primary);
    min-height: 100vh;
    min-height: -webkit-fill-available;
    width: 100%;
    max-width: 100vw;
    overflow-x: auto; /* <-- FIX #1 */
  }

  body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    min-height: 100vh;
    min-height: -webkit-fill-available;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100vw;
    overflow-x: auto; /* <-- FIX #2 */
  }

  #root {
    width: 100%;
    max-width: 100vw;
    overflow-x: auto; /* <-- FIX #3 */
  }
}
/**
 * THEME OVERRIDES - Using CSS layers instead of !important
 *
 * These overrides are in the "overrides" layer, which has the highest
 * priority. This means they will override Tailwind utilities without
 * needing !important declarations.
 */
@layer overrides {
  /* Dashboard text color fixes - using CSS variables */
  .dashboard-page .text-gray-900,
  .card .text-gray-900,
  .page-container .text-gray-900 {
    color: var(--color-text-primary);
  }

  .dashboard-page .text-gray-700,
  .card .text-gray-700,
  .page-container .text-gray-700 {
    color: var(--color-text-secondary);
  }

  .dashboard-page .text-gray-500,
  .card .text-gray-500,
  .page-container .text-gray-500 {
    color: var(--color-text-muted);
  }

  .dashboard-page .text-gray-400,
  .card .text-gray-400,
  .page-container .text-gray-400 {
    color: var(--color-text-subtle);
  }

  /* Focus areas and features section headers */
  .dashboard-content h2,
  .dashboard-content h3,
  .card h2,
  .card h3 {
    color: var(--color-text-primary);
  }

  /* Modal text color overrides - using CSS variables */
  .modal-container .text-gray-900 {
    color: var(--color-text-primary);
  }

  .modal-container .text-gray-700 {
    color: var(--color-text-secondary);
  }

  .modal-container .text-gray-500 {
    color: var(--color-text-muted);
  }

  .modal-container .text-gray-400 {
    color: var(--color-text-subtle);
  }
}
/**
 * GLOBAL RESPONSIVE LAYOUT RULES
 *
 * Ensures all elements adapt properly on smaller screens.
 * Prevents overflow, collapsed content, and layout breaks below 1024px.
 */
@layer base {
  @media (max-width: 1023px) {
    /* Force viewport constraints at root level */
    html, body {
      width: 100%;
      max-width: 100vw;
      overflow-x: auto; /* <-- FIX #4 */
      position: relative;
    }

    #root {
      width: 100%;
      max-width: 100vw;
      overflow-x: auto; /* <-- FIX #5 */
      position: relative;
    }

    /* Ensure all main containers adapt to mobile */
    * {
      box-sizing: border-box;
    }

    .container,
    main,
    section,
    article,
    div[class*="container"],
    div[class*="wrapper"] {
      max-width: 100%;
      width: 100%;
      overflow-x: auto; /* <-- FIX #6 */
      box-sizing: border-box;
      min-width: 0;
    }

    /* Critical: Prevent flex children from overflowing */
    .container > *,
    main > *,
    section > *,
    article > * {
      min-width: 0;
      max-width: 100%;
    }

    /* Ensure media elements scale properly */
    img,
    video,
    canvas,
    svg {
      max-width: 100%;
      height: auto;
    }

    /* Make navigation, header, footer wrap and center */
    nav,
    header,
    footer {
      flex-wrap: wrap;
      justify-content: center;
      max-width: 100%;
      overflow-x: auto; /* <-- FIX #7 */
      width: 100%;
    }

    /* Ensure all tables are scrollable on mobile */
    table {
      display: block;
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      width: 100%;
    }

    /* Table wrappers must constrain properly */
    .table-wrapper,
    div[class*="table-wrapper"],
    div[class*="tableWrapper"] {
      max-width: 100%;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
    }

    /* Ensure all cards and panels fit properly */
    .card,
    .panel,
    .modal,
    .dashboard-card,
    div[class*="card"],
    div[class*="panel"] {
      max-width: 100%;
      width: 100%;
      overflow-x: auto; /* <-- FIX #8 */
      box-sizing: border-box;
      min-width: 0;
    }

    /* Ensure all grids adapt to single column */
    .grid,
    div[class*="grid"] {
      grid-template-columns: 1fr !important;
      max-width: 100%;
      width: 100%;
      gap: 1rem;
    }

    /* Prevent text overflow */
    p, span, div, h1, h2, h3, h4, h5, h6 {
      word-wrap: break-word;
      overflow-wrap: break-word;
      max-width: 100%;
      min-width: 0;
    }

    /* Ensure buttons and inputs fit properly */
    button,
    input,
    select,
    textarea {
      max-width: 100%;
      box-sizing: border-box;
      min-width: 0;
    }

    /* Ensure flex containers don't overflow */
    [class*="flex"] {
      min-width: 0;
      max-width: 100%;
    }

    /* Ensure all form elements are constrained */
    form,
    .form-group,
    .formGroup {
      max-width: 100%;
      width: 100%;
      box-sizing: border-box;
    }
  }
}/**
 * Auth Pages Utility Classes
 *
 * Utility classes to replace inline styles in authentication pages
 * (LoginPage, SignupPage, ResetPasswordPage)
 */

@layer components {
  /* Main container with enhanced gradient background */
  .auth-page-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0a0f 0%, #1a0a1f 50%, #0f0a1a 100%);
    position: relative;
  }

  .auth-page-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
    pointer-events: none;
  }

  /* Navigation bar */
  .auth-nav {
    border-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    background: rgba(0, 0, 0, 0.2);
  }

  /* Logo background */
  .auth-logo-bg {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2));
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
    transition: all 0.3s ease;
  }

  .auth-logo-container:hover .auth-logo-bg {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(236, 72, 153, 0.3));
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.3);
  }

  /* Hero section background */
  .auth-hero-section {
    background: linear-gradient(135deg, rgba(10, 10, 15, 0.8) 0%, rgba(20, 10, 31, 0.9) 100%);
    position: relative;
  }

  /* Form section background */
  .auth-form-section {
    background: linear-gradient(135deg, rgba(15, 10, 26, 0.7) 0%, rgba(26, 15, 40, 0.8) 100%);
    position: relative;
  }

  /* Hero title */
  .auth-hero-title {
    font-weight: 300;
    line-height: 1.1;
    background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Hero image constraint - prevents logo from being too large */
  .auth-hero-title img,
  .auth-hero-content img {
    max-width: 300px;
    height: auto;
    margin: 0 auto;
  }

  /* Enhanced feature cards with sophisticated styling - compact */
  .auth-feature-card {
    border: 1.5px solid rgba(139, 92, 246, 0.4);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(236, 72, 153, 0.08) 100%);
    backdrop-filter: blur(16px);
    box-shadow:
      0 8px 24px rgba(139, 92, 246, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.25rem 1.5rem !important;
    position: relative;
    overflow: hidden;
  }

  .auth-feature-card p {
    line-height: 1.5 !important;
    letter-spacing: 0.01em;
    font-size: 1.125rem !important; /* 18px */
    margin: 0 !important;
  }

  /* Enhanced form card with glassmorphism - compact */
  .auth-form-card {
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    padding: 2rem 2rem;
    transition: all 0.3s ease;
  }

  .auth-form-card:hover {
    box-shadow:
      0 25px 70px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border-color: rgba(139, 92, 246, 0.2);
  }

  /* Form labels */
  .auth-label {
    color: var(--color-text-secondary);
  }

  /* Form inputs - compact */
  .auth-input {
    min-height: 44px;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
  }

  .auth-input:focus {
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
  }

  /* Error message box */
  .auth-error {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
  }

  .auth-error-text {
    color: var(--color-error);
  }

  /* Submit button - compact */
  .auth-submit-button {
    min-height: 44px;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    transition: all 0.3s ease;
    font-weight: 600;
  }

  .auth-submit-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #7c3aed 0%, #db2777 100%);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
    transform: translateY(-1px);
  }

  .auth-submit-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
  }

  /* Divider */
  .auth-divider-line {
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
  }

  .auth-divider-text {
    color: var(--color-text-muted);
  }

  /* Google loading overlay */
  .auth-google-loading {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 10;
  }

  /* Loading spinner */
  .auth-spinner {
    border: 3px solid rgba(139, 92, 246, 0.3);
    border-top: 3px solid #8b5cf6;
  }

  .auth-spinner-text {
    color: #a78bfa;
    font-weight: 500;
  }

  /* Links */
  .auth-link {
    color: #a78bfa;
    min-height: 44px;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .auth-link:hover {
    color: #c4b5fd;
    text-decoration: underline;
  }

  .auth-link-purple {
    color: #a78bfa;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .auth-link-purple:hover {
    color: #c4b5fd;
    text-decoration: underline;
  }

  /* Secondary text */
  .auth-secondary-text {
    color: var(--color-text-muted);
  }

  /* Success icon background */
  .auth-success-icon-bg {
    background-color: var(--color-success);
  }

  /* Success/info icon colors */
  .auth-icon-white {
    color: var(--color-text-primary);
  }

  .auth-icon-purple {
    color: var(--color-brand-primary);
    margin-top: 0.125rem;
  }

  .auth-icon-error {
    color: var(--color-error);
    margin-top: 0.125rem;
  }

  /* Role/source input spacing */
  .auth-other-input {
    margin-top: 0.5rem;
  }

  /* Centered text sections */
  .auth-text-center {
    text-align: center;
  }

  .auth-title-section {
    text-align: center;
    margin-bottom: 2rem;
  }

  .auth-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
  }

  .auth-subtitle {
    color: var(--color-text-muted);
    font-size: 14px;
  }

  /* Logo clickable container */
  .auth-logo-container {
    cursor: pointer;
  }

  /* Main content layout adjustments */
  .auth-main-content {
    justify-content: center;
  }
}
/* ============================================
   LANDSCAPE ORIENTATION SUPPORT FOR AUTH PAGES
   Mobile devices in landscape mode optimization
   ============================================ */

/* Mobile Landscape Mode (max-height: 600px) */
@media (max-height: 600px) and (orientation: landscape) {
  @layer overrides {
    /* LoginPage specific adjustments */
    .min-h-screen {
      min-height: 100vh;
    }

    /* Navigation adjustments */
    .py-3,
    .py-4 {
      padding-top: var(--spacing-sm);
      padding-bottom: var(--spacing-sm);
    }

    /* Main content area padding reduction */
    .py-8 {
      padding-top: var(--spacing-lg);
      padding-bottom: var(--spacing-lg);
    }

    /* Logo size reduction */
    .w-12,
    .h-12,
    .w-16,
    .h-16,
    .w-20,
    .h-20 {
      width: var(--spacing-3xl);
      height: var(--spacing-3xl);
    }

    /* Hero text adjustments for LoginPage */
    .text-3xl,
    .text-4xl,
    .text-5xl {
      font-size: var(--font-size-2xl);
      line-height: var(--line-height-tight);
    }

    /* Form container adjustments */
    .p-6,
    .p-8 {
      padding: var(--spacing-lg);
    }

    /* Form field spacing */
    .mb-4,
    .mb-6 {
      margin-bottom: var(--spacing-md);
    }

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

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

    /* Mobile hero title for LoginPage */
    .text-2xl {
      font-size: var(--font-size-xl);
    }

    /* Input fields - ensure they're not too tall */
    input[type="email"],
    input[type="password"],
    input[type="text"] {
      min-height: 40px;
      padding: var(--spacing-sm) var(--spacing-md);
    }

    /* Button size adjustments */
    button {
      min-height: 40px;
      padding: var(--spacing-sm) var(--spacing-lg);
    }

    /* Gap adjustments between sections */
    .gap-8 {
      gap: var(--spacing-lg);
    }

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

    /* Divider margins */
    .gap-3,
    .gap-4 {
      gap: var(--spacing-sm);
    }

    /* Form containers - ensure scrolling works */
    .rounded-2xl,
    .rounded-xl {
      max-height: calc(100vh - 80px);
      overflow-y: auto;
    }

    /* Hero content padding adjustments */
    .lg\:p-6 {
      padding: var(--spacing-md);
    }

    /* Text size adjustments */
    .text-lg,
    .text-xl {
      font-size: var(--font-size-base);
    }
  }
}

/* Tablet Landscape Mode (height 601px-768px) */
@media (min-height: 601px) and (max-height: 768px) and (orientation: landscape) {
  @layer overrides {
    /* Moderate size reductions for tablets */
    .py-8 {
      padding-top: var(--spacing-xl);
      padding-bottom: var(--spacing-xl);
    }

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

    .w-16,
    .h-16,
    .w-20,
    .h-20 {
      width: 4rem;
      height: 4rem;
    }

    .text-3xl,
    .text-4xl,
    .text-5xl {
      font-size: var(--font-size-3xl);
    }

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

    .mb-12 {
      margin-bottom: var(--spacing-2xl);
    }
  }
}
/* Form Element Styles - Mobile Responsive */

/* Form groups */
.form-group {
  margin-bottom: 1rem;
}

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

/* Form layout */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 640px) {
  .form-row {
    flex-direction: row;
  }
}

.form-row > * {
  flex: 1;
}

/* Checkbox inputs - larger touch target on mobile */
.checkbox {
  min-width: 20px;
  min-height: 20px;
  accent-color: #4299e1;
  cursor: pointer;
}

@media (min-width: 640px) {
  .checkbox {
    min-width: 1rem;
    min-height: 1rem;
  }
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: #e2e8f0;
  cursor: pointer;
  min-height: 44px;
}

@media (min-width: 640px) {
  .checkbox-label {
    min-height: auto;
    gap: 0.5rem;
  }
}

/* Radio inputs - larger touch target on mobile */
.radio {
  min-width: 20px;
  min-height: 20px;
  accent-color: #4299e1;
  cursor: pointer;
}

@media (min-width: 640px) {
  .radio {
    min-width: 1rem;
    min-height: 1rem;
  }
}

/* Input hints and help text */
.input-hint {
  font-size: 0.875rem;
  color: #9ca3af;
  margin-top: 0.5rem;
}

/* Form sections */
.form-section {
  padding: 1rem;
  background-color: #0f0f0f;
  border: 1px solid #333333;
  border-radius: 0.5rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .form-section {
    padding: 1.5rem;
  }
}

.form-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .form-section-title {
    font-size: 1.125rem;
  }
}

/* Horizontal form fields (label beside input on desktop) */
.form-field-horizontal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .form-field-horizontal {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  .form-field-horizontal .formLabel {
    min-width: 150px;
    margin-bottom: 0;
  }

  .form-field-horizontal .formInput,
  .form-field-horizontal .formSelect,
  .form-field-horizontal .formTextarea {
    flex: 1;
  }
}

/* Button group spacing */
.button-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .button-group {
    flex-direction: row;
    justify-content: flex-end;
  }
}

.button-group button {
  width: 100%;
  min-height: 48px;
}

@media (min-width: 640px) {
  .button-group button {
    width: auto;
    min-width: 120px;
    min-height: auto;
  }
}

/* ========================================
   LANDSCAPE ORIENTATION OPTIMIZATIONS
   ======================================== */

/* Landscape mode for small screens (phones in landscape) */
@media (max-height: 600px) and (orientation: landscape) {
  /* Form groups - reduce spacing */
  .form-group {
    margin-bottom: 0.75rem;
  }

  /* Form row - use horizontal layout in landscape */
  .form-row {
    flex-direction: row;
    gap: 0.75rem;
  }

  /* Compact checkboxes */
  .checkbox {
    min-width: 1rem;
    min-height: 1rem;
  }

  /* Compact checkbox labels */
  .checkbox-label {
    min-height: auto;
    gap: 0.5rem;
    font-size: 0.8125rem;
  }

  /* Compact radios */
  .radio {
    min-width: 1rem;
    min-height: 1rem;
  }

  /* Smaller hint text */
  .input-hint {
    font-size: 0.8125rem;
    margin-top: 0.25rem;
  }

  /* Compact form sections */
  .form-section {
    padding: 0.75rem;
    margin-bottom: 1rem;
  }

  /* Smaller section titles */
  .form-section-title {
    font-size: 0.9375rem;
    margin-bottom: 0.75rem;
  }

  /* Horizontal form fields - use side-by-side layout in landscape */
  .form-field-horizontal {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .form-field-horizontal .formLabel {
    min-width: 120px;
    margin-bottom: 0;
    font-size: 0.875rem;
  }

  .form-field-horizontal .formInput,
  .form-field-horizontal .formSelect,
  .form-field-horizontal .formTextarea {
    flex: 1;
  }

  /* Button group - horizontal in landscape */
  .button-group {
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .button-group button {
    width: auto;
    min-width: 90px;
    min-height: 36px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}

/* Two-column form layout for landscape */
@media (max-height: 600px) and (orientation: landscape) {
  /* Grid layout for better space usage */
  .form-grid-landscape {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .form-grid-landscape .form-group {
    margin-bottom: 0;
  }

  /* Full width items */
  .form-grid-landscape .form-group-full {
    grid-column: 1 / -1;
  }
}
/* Shared Component CSS - Common patterns across all management components *//* ===== FORM ELEMENTS ===== *//* Form helpers */._required_1bt79_6 {
  color: #D9534F;
}._helpText_1bt79_10 {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
}/* Form groups and containers */._formGroup_1bt79_17 {
  margin-bottom: 16px;
}._formGroupLast_1bt79_21 {
  margin-bottom: 24px;
}/* Form labels */._formLabel_1bt79_26 {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 6px;
}/* Mandatory field label - adds red asterisk */._mandatory-field_1bt79_35::after {
  content: ' *';
  color: #D9534F;
  font-weight: 500;
}/* Form inputs - Perfect input style used throughout the application */._formInput_1bt79_42 {
  width: 100%;
  padding: 10px 12px;
  background-color: #0f0f0f;
  border: 1px solid #4b5563;
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}._formInput_1bt79_42:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}._formInput_1bt79_42:disabled {
  background-color: #262626;
  opacity: 0.7;
  cursor: not-allowed;
}._formInput_1bt79_42::placeholder {
  color: #9ca3af;
}/* Override browser autofill styling for formInput *//* Using @layer overrides for highest specificity without !important */@layer overrides {
  ._formInput_1bt79_42:-webkit-autofill,
  ._formInput_1bt79_42:-webkit-autofill:hover,
  ._formInput_1bt79_42:-webkit-autofill:focus,
  ._formInput_1bt79_42:-webkit-autofill:active {
    /* WebKit requires !important for -webkit-box-shadow and -webkit-text-fill-color
       due to UA stylesheet specificity that cannot be overridden by layers alone */
    -webkit-box-shadow: 0 0 0 30px var(--color-bg-primary) inset !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
    caret-color: var(--color-text-primary);
    border: 1px solid var(--color-border-secondary);
    transition: background-color 5000s ease-in-out 0s;
  }

  /* Firefox autofill for formInput */
  ._formInput_1bt79_42:-moz-autofill,
  ._formInput_1bt79_42:-moz-autofill-preview {
    filter: none;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
  }
}/* Form textarea - Matches formInput style */._formTextarea_1bt79_95 {
  width: 100%;
  padding: 10px 12px;
  background-color: #0f0f0f;
  border: 1px solid #4b5563;
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  outline: none;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}._formTextarea_1bt79_95:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}._formTextarea_1bt79_95:disabled {
  background-color: #262626;
  opacity: 0.7;
  cursor: not-allowed;
}._formTextarea_1bt79_95::placeholder {
  color: #9ca3af;
}/* Override browser autofill styling for formTextarea *//* Using @layer overrides for highest specificity without !important */@layer overrides {
  ._formTextarea_1bt79_95:-webkit-autofill,
  ._formTextarea_1bt79_95:-webkit-autofill:hover,
  ._formTextarea_1bt79_95:-webkit-autofill:focus,
  ._formTextarea_1bt79_95:-webkit-autofill:active {
    /* WebKit requires !important for -webkit-box-shadow and -webkit-text-fill-color
       due to UA stylesheet specificity that cannot be overridden by layers alone */
    -webkit-box-shadow: 0 0 0 30px var(--color-bg-primary) inset !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
    caret-color: var(--color-text-primary);
    border: 1px solid var(--color-border-secondary);
    transition: background-color 5000s ease-in-out 0s;
  }

  /* Firefox autofill for formTextarea */
  ._formTextarea_1bt79_95:-moz-autofill,
  ._formTextarea_1bt79_95:-moz-autofill-preview {
    filter: none;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
  }
}/* Form select - Matches formInput style */._formSelect_1bt79_150 {
  width: 100%;
  padding: 10px 12px;
  background-color: #0f0f0f;
  border: 1px solid #4b5563;
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}._formSelect_1bt79_150:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}._formSelect_1bt79_150:disabled {
  background-color: #262626;
  opacity: 0.7;
  cursor: not-allowed;
}._formSelect_1bt79_150 option {
  background-color: #1a1a1a;
  color: #ffffff;
}/* Override browser autofill styling for formSelect *//* Using @layer overrides for highest specificity without !important */@layer overrides {
  ._formSelect_1bt79_150:-webkit-autofill,
  ._formSelect_1bt79_150:-webkit-autofill:hover,
  ._formSelect_1bt79_150:-webkit-autofill:focus,
  ._formSelect_1bt79_150:-webkit-autofill:active {
    /* WebKit requires !important for -webkit-box-shadow and -webkit-text-fill-color
       due to UA stylesheet specificity that cannot be overridden by layers alone */
    -webkit-box-shadow: 0 0 0 30px var(--color-bg-primary) inset !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
    caret-color: var(--color-text-primary);
    border: 1px solid var(--color-border-secondary);
    transition: background-color 5000s ease-in-out 0s;
  }

  /* Firefox autofill for formSelect */
  ._formSelect_1bt79_150:-moz-autofill,
  ._formSelect_1bt79_150:-moz-autofill-preview {
    filter: none;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
  }
}/* Enhanced selector styles for ProjectSelector and OrganizationSelector */._selectorBase_1bt79_205 {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background-color: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 0.5rem;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}._selectorBase_1bt79_205:hover:not(:disabled) {
  border-color: #4b5563;
}._selectorBase_1bt79_205:focus:not(:disabled) {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}._selectorBase_1bt79_205:disabled {
  background-color: #0f0f0f;
  border-color: #4b5563;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
}._selectorError_1bt79_237 {
  background-color: #0f0f0f;
  border-color: #D9534F;
  color: #D9534F;
  cursor: not-allowed;
  opacity: 0.8;
}/* View field styles */._viewLabel_1bt79_246 {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 6px;
}._viewField_1bt79_254 {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #4b5563;
  border-radius: 6px;
  font-size: 14px;
  background-color: #0f0f0f;
  color: #9ca3af;
}._viewFieldMultiline_1bt79_264 {
  min-height: 80px;
  white-space: pre-wrap;
}._viewFieldCapitalize_1bt79_269 {
  text-transform: capitalize;
}/* Loading spinner */._spinner_1bt79_274 {
  width: 32px;
  height: 32px;
  border: 3px solid #333333;
  border-top-color: #8b5cf6;
  border-radius: 50%;
  animation: _spin_1bt79_274 1s linear infinite;
}._spinnerSmall_1bt79_283 {
  width: 14px;
  height: 14px;
  border: 2px solid white;
  border-top-color: transparent;
  border-radius: 50%;
  animation: _spin_1bt79_274 1s linear infinite;
}@keyframes _spin_1bt79_274 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}/* Main container */._container_1bt79_298 {
  min-height: 100vh;
  background-color: #0f0f0f;
  padding: 24px;
  color: #ffffff;
}._content_1bt79_305 {
  max-width: 90rem;
  margin: 0 auto;
}/* Header */._header_1bt79_311 {
  margin-bottom: 32px;
}._headerContent_1bt79_315 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}._title_1bt79_321 {
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  margin-bottom: 8px;
}._subtitle_1bt79_329 {
  font-size: 16px;
  color: #9ca3af;
  margin: 0;
}/* Loading state */._loadingContainer_1bt79_336 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50vh;
}._loadingText_1bt79_343 {
  font-size: 16px;
  color: #9ca3af;
  margin-left: 12px;
}/* Error alert */._errorAlert_1bt79_350 {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}._errorContent_1bt79_361 {
  display: flex;
  align-items: flex-start;
}._errorIcon_1bt79_366 {
  margin-right: 12px;
  margin-top: 2px;
  flex-shrink: 0;
}._errorTitle_1bt79_372 {
  font-weight: 500;
  color: #D9534F;
  font-size: 14px;
  margin-bottom: 4px;
}._errorMessage_1bt79_379 {
  color: #D9534F;
  font-size: 14px;
}._errorClose_1bt79_384 {
  background: none;
  border: none;
  color: #D9534F;
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
  line-height: 1;
  transition: color 0.15s;
}._errorClose_1bt79_384:hover {
  color: #D9534F;
}/* Empty state */._emptyState_1bt79_400 {
  background-color: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 8px;
  padding: 48px 24px;
  text-align: center;
}._emptyIcon_1bt79_408 {
  width: 48px;
  height: 48px;
  background-color: #333333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: #6b7280;
}._emptyTitle_1bt79_420 {
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  margin: 0 0 8px 0;
}._emptyMessage_1bt79_427 {
  font-size: 16px;
  color: #9ca3af;
  margin: 0 0 24px 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}/* Table */._tableWrapper_1bt79_437 {
  background-color: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 8px;
  overflow: hidden;
}._tableScroll_1bt79_444 {
  overflow-x: auto;
}._table_1bt79_437 {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}._tableHeaderRow_1bt79_454 {
  background-color: #262626;
  border-bottom: 1px solid #333333;
}._tableHeader_1bt79_454 {
  padding: 12px 16px;
  text-align: left;
  font-weight: 500;
  color: #ffffff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}._tableHeaderRight_1bt79_469 {
  text-align: right;
}._tableRow_1bt79_473 {
  border-bottom: 1px solid #333333;
  transition: background-color 0.15s ease;
}._tableRow_1bt79_473:last-child {
  border-bottom: none;
}._tableRow_1bt79_473:hover {
  background-color: rgba(139, 92, 246, 0.05);
}._tableCell_1bt79_486 {
  padding: 16px;
  color: #ffffff;
  font-weight: 500;
}._tableCellSecondary_1bt79_492 {
  padding: 16px;
  color: #d1d5db;
}._tableCellTruncate_1bt79_497 {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}._tableCellActions_1bt79_504 {
  padding: 16px;
  text-align: right;
}._actionButtons_1bt79_509 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}/* Form grids */._formGrid_1bt79_516 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}._formGrid2_1bt79_523 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}._formGrid3_1bt79_529 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}/* ===== BUTTONS ===== *//* Close button (modal X button) */._closeButton_1bt79_538 {
  padding: 8px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #d1d5db;
  border-radius: 4px;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}._closeButton_1bt79_538:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}/* Cancel button (secondary action) */._cancelButton_1bt79_557 {
  padding: 10px 16px;
  background-color: transparent;
  color: #d1d5db;
  border: 1px solid #4b5563;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}._cancelButton_1bt79_557:hover:not(:disabled) {
  background-color: #374151;
  border-color: #6b7280;
}._cancelButton_1bt79_557:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}/* Primary button (main action) */._primaryButton_1bt79_580 {
  padding: 10px 16px;
  background-color: #8b5cf6;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}._primaryButton_1bt79_580:hover:not(:disabled) {
  background-color: #7c3aed;
}._primaryButton_1bt79_580:disabled {
  background-color: #6b7280;
  cursor: not-allowed;
  opacity: 0.5;
}/* Icon button (transparent with icon) */._iconButton_1bt79_607 {
  padding: 8px;
  background-color: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}._iconButton_1bt79_607:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}/* Table action buttons (View/Edit/Delete) */._tableActionButton_1bt79_626 {
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid #4b5563;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
  height: 28px;
  line-height: 1;
}._tableActionView_1bt79_641 {
  background-color: transparent;
  color: #ffffff;
}._tableActionView_1bt79_641:hover {
  background-color: #374151;
  border-color: #8de97ec9;
  color: #8de97ec9;
}._tableActionEdit_1bt79_652 {
  background-color: transparent;
  color: #ffffff;
}._tableActionEdit_1bt79_652:hover {
  background-color: #374151;
  border-color: #4A90E2;
  color: #4A90E2;
}._tableActionDelete_1bt79_663 {
  background-color: #D9534F;
  color: white;
  border: none;
}._tableActionDelete_1bt79_663:hover {
  background-color: #D9534F;
}/* ===== STATUS BADGES ===== */._statusBadge_1bt79_675 {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}._statusActive_1bt79_683 {
  background-color: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}._statusInactive_1bt79_688 {
  background-color: rgba(156, 163, 175, 0.1);
  color: #9ca3af;
}._statusArchived_1bt79_693 {
  background-color: rgba(202, 138, 4, 0.1);
  color: #fef08a;
}/* Responsive design */@media (max-width: 640px) {
  ._formGrid_1bt79_516,
  ._formGrid2_1bt79_523,
  ._formGrid3_1bt79_529 {
    grid-template-columns: 1fr;
  }

  ._headerContent_1bt79_315 {
    flex-direction: column;
    gap: 16px;
  }
}/* Mobile Responsive Form Enhancements */@media (max-width: 640px) {
  ._formInput_1bt79_42,
  ._formTextarea_1bt79_95,
  ._formSelect_1bt79_150 {
    min-height: 48px;
    padding: 12px 14px;
    font-size: clamp(0.875rem, 2vw, 1rem);
  }

  ._formTextarea_1bt79_95 {
    min-height: 120px;
  }

  ._formLabel_1bt79_26 {
    font-size: clamp(0.875rem, 2vw, 0.938rem);
  }

  ._formGroup_1bt79_17 {
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
  }
}@media (min-width: 641px) and (max-width: 1024px) {
  ._formInput_1bt79_42,
  ._formTextarea_1bt79_95,
  ._formSelect_1bt79_150 {
    min-height: 44px;
    font-size: 0.938rem;
  }
}/* Landscape Orientation Optimizations */@media (max-height: 600px) and (orientation: landscape) {
  /* Compact container and header spacing */
  ._container_1bt79_298 {
    padding: 1rem;
  }

  ._header_1bt79_311 {
    margin-bottom: 1rem;
  }

  ._title_1bt79_321 {
    font-size: 1.5rem;
    margin-bottom: 0.375rem;
  }

  ._subtitle_1bt79_329 {
    font-size: 0.875rem;
  }

  /* Reduce form spacing */
  ._formGroup_1bt79_17 {
    margin-bottom: 0.75rem;
  }

  ._formGroupLast_1bt79_21 {
    margin-bottom: 1rem;
  }

  ._formLabel_1bt79_26 {
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
  }

  ._formInput_1bt79_42,
  ._formTextarea_1bt79_95,
  ._formSelect_1bt79_150 {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  ._formTextarea_1bt79_95 {
    min-height: 60px;
  }

  /* Compact form grids */
  ._formGrid_1bt79_516,
  ._formGrid2_1bt79_523,
  ._formGrid3_1bt79_529 {
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  /* Reduce table spacing */
  ._tableWrapper_1bt79_437 {
    border-radius: 0.5rem;
  }

  ._tableHeader_1bt79_454 {
    padding: 0.5rem 0.75rem;
    font-size: 0.688rem;
  }

  ._tableCell_1bt79_486,
  ._tableCellSecondary_1bt79_492 {
    padding: 0.75rem;
  }

  ._tableCellActions_1bt79_504 {
    padding: 0.75rem;
  }

  /* Compact buttons */
  ._primaryButton_1bt79_580,
  ._cancelButton_1bt79_557 {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
  }

  ._tableActionButton_1bt79_626 {
    padding: 0.25rem 0.5rem;
    font-size: 0.688rem;
    height: 24px;
  }

  /* Compact status badges */
  ._statusBadge_1bt79_675 {
    padding: 0.25rem 0.5rem;
    font-size: 0.688rem;
  }

  /* Reduce empty state padding */
  ._emptyState_1bt79_400 {
    padding: 2rem 1rem;
  }

  ._emptyIcon_1bt79_408 {
    width: 36px;
    height: 36px;
    margin-bottom: 0.75rem;
  }

  ._emptyTitle_1bt79_420 {
    font-size: 1rem;
    margin-bottom: 0.375rem;
  }

  ._emptyMessage_1bt79_427 {
    font-size: 0.875rem;
    margin-bottom: 1rem;
  }

  /* Compact loading state */
  ._loadingContainer_1bt79_336 {
    height: 30vh;
  }

  ._loadingText_1bt79_343 {
    font-size: 0.875rem;
    margin-left: 0.75rem;
  }

  ._spinner_1bt79_274 {
    width: 24px;
    height: 24px;
    border-width: 2px;
  }

  /* Compact error alert */
  ._errorAlert_1bt79_350 {
    padding: 0.75rem;
    margin-bottom: 1rem;
  }

  ._errorTitle_1bt79_372,
  ._errorMessage_1bt79_379 {
    font-size: 0.8125rem;
  }

  /* Optimize selector for horizontal space */
  ._selectorBase_1bt79_205 {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  /* Compact view fields */
  ._viewLabel_1bt79_246 {
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
  }

  ._viewField_1bt79_254 {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  ._viewFieldMultiline_1bt79_264 {
    min-height: 60px;
  }

  ._helpText_1bt79_10 {
    font-size: 0.688rem;
    margin-top: 0.25rem;
  }
}/* ===== RESPONSIVE LAYOUT - MOBILE (≤1023px) ===== */@media (max-width: 1023px) {
  /* Form containers - full width on mobile */
  ._formGroup_1bt79_17,
  ._formGroupLast_1bt79_21,
  ._formRow_1bt79_915 {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
  }

  /* Form inputs - full width on mobile */
  ._formInput_1bt79_42,
  ._formTextarea_1bt79_95,
  ._formSelect_1bt79_150,
  ._selectorBase_1bt79_205 {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }

  /* Buttons - stack vertically on mobile */
  ._buttonGroup_1bt79_935,
  ._modalActions_1bt79_936,
  ._actionButtons_1bt79_509,
  div[class*="button-group"],
  div[class*="actions"] {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
    min-width: 0;
  }

  ._button_1bt79_935,
  ._primaryButton_1bt79_580,
  ._secondaryButton_1bt79_948,
  ._dangerButton_1bt79_949,
  button[class*="btn"],
  button[class*="button"] {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
  }

  /* Tables - ensure horizontal scroll */
  ._dataTable_1bt79_960,
  table[class*="table"],
  ._table_1bt79_437,
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: 100%;
  }

  /* Table wrappers must constrain */
  ._table-wrapper_1bt79_972,
  ._tableWrapper_1bt79_437,
  div[class*="table-wrapper"],
  div[class*="tableWrapper"] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    display: block;
  }

  /* Cards and panels - full width */
  ._card_1bt79_985,
  ._modal_1bt79_936,
  ._panel_1bt79_987,
  ._dashboard-card_1bt79_988,
  div[class*="card"],
  div[class*="modal"],
  div[class*="panel"] {
    width: 100%;
    max-width: 100%;
    margin: 0.5rem 0;
    padding: 1rem;
    box-sizing: border-box;
    min-width: 0;
    overflow-x: auto;
  }

  /* Modal containers - reduce padding */
  ._modalContainer_1bt79_1002,
  ._modalContent_1bt79_1003,
  div[class*="modal-container"],
  div[class*="modal-content"] {
    width: 95%;
    max-width: 95vw;
    padding: 1rem;
    margin: 1rem auto;
    box-sizing: border-box;
    overflow-x: auto;
  }

  /* Grid layouts - single column */
  ._grid_1bt79_1015,
  ._cardGrid_1bt79_1016,
  div[class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Headers and titles - smaller on mobile */
  ._pageTitle_1bt79_1026,
  ._cardTitle_1bt79_1027,
  ._sectionTitle_1bt79_1028,
  h1, h2, h3 {
    font-size: 1.25rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    min-width: 0;
  }

  /* Badges and status indicators - ensure they fit */
  ._badge_1bt79_1038,
  ._statusBadge_1bt79_675,
  ._tag_1bt79_1040,
  span[class*="badge"],
  span[class*="status"] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Ensure all containers respect mobile width */
  ._container_1bt79_298,
  ._wrapper_1bt79_1053,
  ._content_1bt79_305,
  div[class*="container"],
  div[class*="wrapper"] {
    width: 100%;
    max-width: 100vw;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
    min-width: 0;
    overflow-x: auto;
  }

  /* Text overflow handling */
  ._viewField_1bt79_254,
  ._formInput_1bt79_42,
  ._formTextarea_1bt79_95,
  p, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    min-width: 0;
  }

  /* Ensure flex containers don't overflow */
  [class*="flex"],
  ._flex_1bt79_1079,
  ._flex-row_1bt79_1080,
  ._flex-col_1bt79_1081 {
    min-width: 0;
    max-width: 100%;
  }
}
/* Modal customizations */
._modalExtraWide_1c4q5_2 {
  max-width: 900px;
  width: 100%;
}

._modalBodyScrollable_1c4q5_7 {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

._headerSubtitle_1c4q5_13 {
  font-size: 14px;
  color: #9ca3af;
  margin: 4px 0 0 0;
}

/* Form styling */
._formContainer_1c4q5_20 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Required field indicator */
._required_1c4q5_27 {
  color: #D9534F;
}


._codeTextarea_1c4q5_32 {
  font-family: Monaco, "Cascadia Code", "Roboto Mono", monospace;
}

._codeField_1c4q5_36 {
  font-family: Monaco, "Cascadia Code", "Roboto Mono", monospace;
}

._readonlyField_1c4q5_40 {
  padding: 10px 12px;
  border: 1px solid #4b5563;
  border-radius: 6px;
  font-size: 14px;
  background-color: #1a1a1a;
  color: #9ca3af;
}

/* Checkbox grid */
._checkboxGrid_1c4q5_50 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
}

._checkboxItem_1c4q5_56 {
  display: flex;
  align-items: center;
  padding: 6px;
}

._checkboxContainer_1c4q5_62 {
  display: flex;
  align-items: end;
}

._viewFieldMultiline_1c4q5_67 {
  min-height: 80px;
  white-space: pre-wrap;
}

._mandatoryField_1c4q5_72 {
  color: #D9534F;
  font-weight: 500;
}

/* Document badge grid */
._documentGrid_1c4q5_79 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
}

._documentBadgeActive_1c4q5_85 {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: #8de97ec9;
  border: 1px solid #16a34a;
  border-radius: 6px;
}

._documentBadgeInactive_1c4q5_94 {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: #1a1a1a;
  border: 1px solid #4b5563;
  border-radius: 6px;
}

._checkboxActive_1c4q5_103 {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background-color: #22c55e;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
}

._checkboxInactive_1c4q5_117 {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background-color: #374151;
  margin-right: 8px;
}

._labelActive_1c4q5_125 {
  font-size: 14px;
  color: #bbf7d0;
}

._labelInactive_1c4q5_130 {
  font-size: 14px;
  color: #9ca3af;
}

/* Footer styles */
._footerInfo_1c4q5_136 {
  font-size: 12px;
  color: #9ca3af;
}

._footerActions_1c4q5_141 {
  display: flex;
  gap: 12px;
}

/* Modal-specific error alert styling */
._errorAlert_1c4q5_147 {
  background-color: #1a1a1a;
  border: 1px solid #D9534F;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  color: #D9534F;
  font-size: 14px;
}

._errorIcon_1c4q5_159 {
  margin-right: 8px;
  flex-shrink: 0;
}


/* Error banner */
._errorBanner_1c4q5_166 {
  background-color: #1a1a1a;
  border: 1px solid #D9534F;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
}

._errorIconBanner_1c4q5_176 {
  margin-right: 12px;
  flex-shrink: 0;
}

._errorBannerTitle_1c4q5_181 {
  font-size: 14px;
  font-weight: 500;
  color: #D9534F;
  margin: 0;
}

._errorBannerMessage_1c4q5_188 {
  font-size: 14px;
  color: #D9534F;
  margin-top: 4px;
}

/* Filters card */
._filtersCard_1c4q5_195 {
  background-color: #1a1a1a;
  border-radius: 12px;
  border: 1px solid #333333;
  margin-bottom: 24px;
}

._filterHeader_1c4q5_202 {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

._filterHeader_1c4q5_202:hover {
  background-color: rgba(139, 92, 246, 0.05);
}

._filterHeaderLeft_1c4q5_214 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._filterIcon_1c4q5_220 {
  color: #8b5cf6;
}

._filterTitle_1c4q5_224 {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}

._filterBadge_1c4q5_230 {
  background-color: #8b5cf6;
  color: #ffffff;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
}

._chevronDown_1c4q5_240 {
  color: #9ca3af;
  transition: transform 0.2s;
}

._chevronUp_1c4q5_245 {
  color: #9ca3af;
  transform: rotate(180deg);
  transition: transform 0.2s;
}

._filterBody_1c4q5_251 {
  padding: 20px 24px;
  border-top: 1px solid #333333;
}

._filterLabel_1c4q5_256 {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Autocomplete */
._autocompleteContainer_1c4q5_267 {
  position: relative;
  margin-top: 16px;
}

._searchWrapper_1c4q5_272 {
  position: relative;
}

._searchIcon_1c4q5_276 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #9ca3af;
}

._searchInput_1c4q5_285 {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid #4b5563;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  background-color: #0f0f0f;
  color: #ffffff;
  transition: border-color 0.2s;
}

._searchInput_1c4q5_285:focus {
  border-color: #8b5cf6;
}

._suggestionsList_1c4q5_301 {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #1a1a1a;
  border: 1px solid #4b5563;
  border-top: none;
  border-radius: 0 0 6px 6px;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
}

._suggestionItem_1c4q5_315 {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  color: #ffffff;
  border-bottom: 1px solid #333333;
  transition: background-color 0.15s;
}

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

._suggestionItem_1c4q5_315:hover {
  background-color: #374151;
}

._filterFooter_1c4q5_332 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #333333;
}

._filterCount_1c4q5_341 {
  font-size: 12px;
  color: #9ca3af;
}

._clearButton_1c4q5_346 {
  background-color: transparent;
  border: 1px solid #4b5563;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s;
}

._clearButton_1c4q5_346:hover {
  background-color: #374151;
  color: #ffffff;
}

/* Rules card */
._rulesCard_1c4q5_363 {
  background-color: #1a1a1a;
  border-radius: 12px;
  border: 1px solid #333333;
}


/* Rule items */
._ruleItem_1c4q5_371 {
  padding: 20px 24px;
  border-bottom: 1px solid #333333;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._ruleItemLast_1c4q5_379 {
  border-bottom: none;
}

._ruleContent_1c4q5_384 {
  flex: 1;
}

._ruleTitleRow_1c4q5_388 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

._ruleTitle_1c4q5_388 {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  margin: 0;
}

._ruleDescription_1c4q5_402 {
  font-size: 14px;
  color: #9ca3af;
  margin: 4px 0 8px 0;
  line-height: 1.4;
}

._ruleInfo_1c4q5_409 {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: #6b7280;
}

._mandatoryBadge_1c4q5_417 {
  color: #D9534F;
  font-weight: 500;
}

._ruleActions_1c4q5_422 {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Scope level display */
._scopeContainer_1c4q5_429 {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

._scopeBox_1c4q5_435 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 6px;
  flex: 1;
}

._scopeBoxActive_1c4q5_444 {
  background-color: rgba(139, 92, 246, 0.1);
  border: 1px solid #8b5cf6;
  opacity: 1;
}

._scopeBoxInactive_1c4q5_451 {
  background-color: transparent;
  border: 1px solid #4b5563;
  opacity: 0.5;
}

._scopeLabel_1c4q5_458 {
  color: #ffffff;
  font-weight: 500;
}

/* Scope filter radio labels */
._scopeRadioLabel_1c4q5_464 {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 6px;
  transition: all 0.15s ease;
  flex: 1;
}

._scopeRadioLabelActive_1c4q5_475 {
  background-color: rgba(139, 92, 246, 0.1);
  border: 1px solid #8b5cf6;
}

._scopeRadioLabelInactive_1c4q5_481 {
  background-color: transparent;
  border: 1px solid #4b5563;
}

._scopeRadioInput_1c4q5_487 {
  margin-right: 4px;
}

._scopeRadioText_1c4q5_491 {
  color: #ffffff;
  font-weight: 500;
}

/* Document types grid for readonly */
._documentTypesGrid_1c4q5_497 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

._documentTypeBadge_1c4q5_504 {
  padding: 8px 12px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

._documentTypeBadgeActive_1c4q5_512 {
  background-color: #8de97ec9;
  border: 1px solid #16a34a;
}

._documentTypeBadgeInactive_1c4q5_518 {
  background-color: #1a1a1a;
  border: 1px solid #4b5563;
}

._documentTypeCheckbox_1c4q5_524 {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 10px;
  font-weight: bold;
}

._documentTypeCheckboxActive_1c4q5_536 {
  background-color: #22c55e;
  border: none;
}

._documentTypeCheckboxInactive_1c4q5_542 {
  background-color: #374151;
  border: none;
}

._documentTypeLabel_1c4q5_548 {
  font-size: 14px;
}

._documentTypeLabelActive_1c4q5_552 {
  color: #bbf7d0;
  font-weight: 500;
}

._documentTypeLabelInactive_1c4q5_558 {
  color: #9ca3af;
  font-weight: 400;
}

/* Responsive */
@media (max-width: 768px) {

  ._ruleItem_1c4q5_371,
  ._ruleItemLast_1c4q5_379 {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  ._ruleActions_1c4q5_422 {
    width: 100%;
    justify-content: flex-start;
  }

  ._scopeContainer_1c4q5_429 {
    flex-direction: column;
  }
}

/* Landscape orientation support */
@media (max-height: 600px) and (orientation: landscape) {
  /* Compact header */
  ._headerSubtitle_1c4q5_13 {
    font-size: 12px;
    margin-top: 2px;
  }

  /* Compact filters */
  ._filterHeader_1c4q5_202 {
    padding: 12px 20px;
  }

  ._filterBody_1c4q5_251 {
    padding: 16px 20px;
  }

  ._filterLabel_1c4q5_256 {
    font-size: 11px;
    margin-bottom: 4px;
  }

  ._searchInput_1c4q5_285 {
    padding: 6px 10px 6px 32px;
    font-size: 13px;
  }

  ._scopeRadioLabelActive_1c4q5_475,
  ._scopeRadioLabelInactive_1c4q5_481 {
    padding: 8px 12px;
  }

  /* Compact rule items */
  ._ruleItem_1c4q5_371,
  ._ruleItemLast_1c4q5_379 {
    padding: 14px 20px;
  }

  ._ruleTitle_1c4q5_388 {
    font-size: 15px;
  }

  ._ruleDescription_1c4q5_402 {
    font-size: 13px;
    margin: 2px 0 6px 0;
  }

  ._ruleInfo_1c4q5_409 {
    font-size: 11px;
  }

  ._ruleActions_1c4q5_422 {
    gap: 6px;
  }

  /* Compact form groups */
  ._formGroup_1c4q5_640 {
    margin-bottom: 12px;
  }
}
/* Modal Element Styles - Mobile Responsive */

/* Modal overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 9999;
  transition: none;
  pointer-events: auto;
  overflow-y: auto;
}

@media (min-width: 640px) {
  .modal-overlay {
    align-items: center;
    padding: 2rem 1rem;
  }
}

/* Modal container */
.modal-container {
  background-color: #1a1a1a;
  width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@media (min-width: 640px) {
  .modal-container {
    height: auto;
    max-height: 90vh;
    max-width: 32rem;
    border-radius: 0.5rem;
    border: 1px solid #333333;
  }
}

/* Large modal */
.modal-container-lg {
  background-color: #1a1a1a;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 640px) {
  .modal-container-lg {
    height: auto;
    max-height: 90vh;
    max-width: 48rem;
    border-radius: 0.5rem;
    border: 1px solid #333333;
  }
}

/* Wide modal for audit detail */
.modal-container-wide {
  background-color: #1a1a1a;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 768px) {
  .modal-container-wide {
    height: auto;
    max-height: 90vh;
    max-width: 56rem;
    border-radius: 0.5rem;
    border: 1px solid #333333;
  }
}

@media (min-width: 1024px) {
  .modal-container-wide {
    max-width: 900px;
  }
}

/* Extra large modal */
.modal-container-xl {
  background-color: #1a1a1a;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 768px) {
  .modal-container-xl {
    height: auto;
    max-height: 90vh;
    max-width: 64rem;
    border-radius: 0.5rem;
    border: 1px solid #333333;
  }
}

@media (min-width: 1024px) {
  .modal-container-xl {
    max-width: 80rem;
    height: 90vh;
  }
}

/* Modal header */
.modal-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #333333;
  background-color: #1a1a1a;
  z-index: 10;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .modal-header {
    padding: 1.5rem;
  }
}

.modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

@media (min-width: 640px) {
  .modal-title {
    font-size: 1.25rem;
  }
}

.modal-close {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  font-size: 1.5rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

@media (min-width: 640px) {
  .modal-close {
    min-width: 2rem;
    min-height: 2rem;
  }
}

.modal-close:hover {
  color: #1f2937;
  background-color: #e5e7eb;
}

/* Modal body */
.modal-body {
  flex: 1;
  padding: 1rem;
  background-color: #1a1a1a;
  color: #e2e8f0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 640px) {
  .modal-body {
    padding: 1.5rem;
  }
}

/* Modal body with scrollable content */
.modal-body-scrollable {
  max-height: none;
  overflow-y: auto;
}

@media (min-width: 640px) {
  .modal-body-scrollable {
    max-height: 70vh;
  }
}

/* Audit JSON viewer styling */
.audit-json-viewer {
  background-color: #0a0a0a;
  border: 1px solid #1f1f1f;
  border-radius: 8px;
  padding: 0.75rem;
  font-family: monospace;
  font-size: 0.75rem;
  color: #e5e7eb;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (min-width: 640px) {
  .audit-json-viewer {
    padding: 1rem;
    font-size: 0.875rem;
  }
}

/* Modal footer */
.modal-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-top: 1px solid #333333;
  background-color: #1a1a1a;
  z-index: 10;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .modal-footer {
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
  }
}

/* Mobile button ordering - primary action first (top) */
.modal-footer button {
  width: 100%;
  min-height: 48px;
}

@media (min-width: 640px) {
  .modal-footer button {
    width: auto;
    min-width: 120px;
    min-height: auto;
  }
}

/* Reverse order for mobile - primary button appears first */
.modal-footer button:first-child {
  order: 2;
}

.modal-footer button:last-child {
  order: 1;
}

@media (min-width: 640px) {
  .modal-footer button:first-child {
    order: 1;
  }

  .modal-footer button:last-child {
    order: 2;
  }
}

/* Modal animations - DISABLED to prevent flickering */
/* @keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-container {
  animation: modalFadeIn 0.2s ease-out;
} */

/* ========================================
   LANDSCAPE ORIENTATION OPTIMIZATIONS
   ======================================== */

/* Landscape mode for small screens (phones in landscape) */
@media (max-height: 600px) and (orientation: landscape) {
  /* Modal overlay - ensure proper centering */
  .modal-overlay {
    align-items: center;
    padding: 0.5rem;
  }

  /* Standard modal container */
  .modal-container {
    max-height: 95vh;
    max-width: 85vw;
    height: auto;
    border-radius: 0.5rem;
  }

  /* Large modal */
  .modal-container-lg {
    max-height: 95vh;
    max-width: 90vw;
    height: auto;
    border-radius: 0.5rem;
  }

  /* Wide modal */
  .modal-container-wide {
    max-height: 95vh;
    max-width: 90vw;
    height: auto;
    border-radius: 0.5rem;
  }

  /* Extra large modal */
  .modal-container-xl {
    max-height: 95vh;
    max-width: 95vw;
    height: auto;
    border-radius: 0.5rem;
  }

  /* Reduce modal header padding */
  .modal-header {
    padding: 0.75rem 1rem;
    min-height: auto;
  }

  /* Smaller modal title */
  .modal-title {
    font-size: 1rem;
  }

  /* Compact close button */
  .modal-close {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.25rem;
  }

  /* Reduce modal body padding */
  .modal-body {
    padding: 1rem;
    max-height: calc(95vh - 120px); /* Account for header and footer */
  }

  /* Scrollable body optimization */
  .modal-body-scrollable {
    max-height: calc(95vh - 120px);
  }

  /* Reduce modal footer padding */
  .modal-footer {
    padding: 0.75rem 1rem;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  /* Compact footer buttons */
  .modal-footer button {
    width: auto;
    min-width: 90px;
    min-height: 36px;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }

  /* Restore normal button order in landscape */
  .modal-footer button:first-child {
    order: 1;
  }

  .modal-footer button:last-child {
    order: 2;
  }

  /* Compact audit JSON viewer */
  .audit-json-viewer {
    padding: 0.5rem;
    font-size: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
  }
}
/**
 * Button Component Styles
 * Uses CSS layers and variables to eliminate !important declarations
 */

@layer components {
  /* Tag styling for status, priority, etc. */
  .tag {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-xs);
  }

  /* Base button styling */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
    color: inherit;
  }

  /* Button sizes */
  .button-md {
    height: 2.5rem;
    padding: 0 1rem;
  }

  .button-lg {
    height: 2.75rem;
    padding: 0 2rem;
    font-size: var(--font-size-base);
  }

  /* Button variants */
  /* PRIMARY BUTTON - Main purple button style used throughout the app */
  .button-primary,
  .btn-primary,
  .button.btn-primary,
  button.btn-primary {
    background: var(--gradient-brand-primary);
    color: var(--color-text-primary);
    opacity: 1;
  }

  .button-primary:hover,
  .btn-primary:hover,
  .button.btn-primary:hover,
  button.btn-primary:hover {
    background: var(--gradient-brand-hover);
    color: var(--color-text-primary);
  }

  .button-primary:active,
  .btn-primary:active,
  .button.btn-primary:active,
  button.btn-primary:active {
    color: var(--color-text-primary);
  }

  .button-secondary {
    background-color: var(--color-neutral-dark);
    color: var(--color-text-secondary);
  }

  .button-secondary:hover {
    background-color: #2d3748;
  }

  .button-outline {
    background-color: transparent;
    border: 1px solid #9ca3af;
    color: #f3f4f6;
  }

  .button-outline:hover {
    background-color: #374151;
    border-color: #d1d5db;
    color: #ffffff;
  }

  /* Button states */
  .button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .button:focus-visible {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;
  }

  /* Action buttons (small inline buttons) */
  .action-button {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-base);
  }

  /* Table action buttons for view/edit/delete - matching dashboard style */
  .table-action-button-view {
    padding: 4px 8px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all var(--transition-base);
    height: 28px;
    line-height: 1;
    background-color: transparent;
    color: var(--color-text-primary);
  }

  .table-action-button-view:hover {
    background-color: #374151;
    border-color: #8de97ec9;
    color: #8de97ec9;
  }

  .table-action-button-edit {
    padding: 4px 8px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all var(--transition-base);
    height: 28px;
    line-height: 1;
    background-color: transparent;
    color: var(--color-text-primary);
  }

  .table-action-button-edit:hover {
    background-color: #374151;
    border-color: #4A90E2;
    color: #4A90E2;
  }

  .table-action-button-delete {
    padding: 4px 8px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all var(--transition-base);
    height: 28px;
    line-height: 1;
    background-color: #D9534F;
    color: var(--color-text-primary);
  }

  .table-action-button-delete:hover {
    background-color: #D9534F;
  }

  .action-button-edit {
    background-color: var(--color-info);
    color: var(--color-text-primary);
  }

  .action-button-edit:hover {
    background-color: var(--color-info-dark);
  }

  .action-button-delete {
    background-color: var(--color-error);
    color: var(--color-text-primary);
  }

  .action-button-delete:hover {
    background-color: var(--color-error-dark);
  }

  /* Professional nav tab styling */
  .nav-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 1rem var(--spacing-sm);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
  }

  .nav-tab.active {
    border-bottom-color: var(--color-brand-primary);
    background: linear-gradient(180deg, transparent, var(--color-brand-primary-subtle));
  }

  .nav-tab:not(.active):hover {
    color: var(--color-text-primary);
  }

  /* Landscape Orientation Optimizations */
  @media (max-height: 600px) and (orientation: landscape) {
    /* Compact button sizes */
    .button-md {
      height: 2rem;
      padding: 0 0.875rem;
      font-size: 0.8125rem;
    }

    .button-lg {
      height: 2.25rem;
      padding: 0 1.5rem;
      font-size: var(--font-size-sm);
    }

    /* Compact tags */
    .tag {
      padding: 1px 6px;
      font-size: 0.688rem;
    }

    /* Compact action buttons */
    .action-button {
      padding: 0.2rem 0.375rem;
      font-size: 0.688rem;
    }

    /* Compact table action buttons */
    .table-action-button-view,
    .table-action-button-edit,
    .table-action-button-delete {
      padding: 3px 6px;
      font-size: 0.688rem;
      height: 24px;
    }

    /* Compact nav tabs */
    .nav-tab {
      padding: 0.75rem 0.375rem;
      font-size: 0.8125rem;
    }
  }
}

/* Override layer for disabled states that need maximum specificity */
@layer overrides {
  /* Primary button disabled state - needs to override all hover/active states */
  .button-primary:disabled,
  .btn-primary:disabled,
  .button.btn-primary:disabled,
  button.btn-primary:disabled,
  .button.button-md.btn-primary:disabled,
  button.button-md.btn-primary:disabled {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.5) 0%, rgba(124, 58, 237, 0.5) 100%);
    color: var(--color-text-disabled);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 1;
    pointer-events: none;
  }

  /* Primary button disabled hover state - prevent any hover effects */
  .button-primary:disabled:hover,
  .btn-primary:disabled:hover,
  .button.btn-primary:disabled:hover,
  button.btn-primary:disabled:hover,
  .button.button-md.btn-primary:disabled:hover,
  button.button-md.btn-primary:disabled:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.5) 0%, rgba(124, 58, 237, 0.5) 100%);
    color: var(--color-text-disabled);
    transform: none;
    box-shadow: none;
  }
}
/* Alert Styles */

.alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.375rem;
  border-width: 1px;
  border-style: solid;
}

.alert-success {
  background-color: #064e3b;
  border-color: #8de97ec9;
  color: #ffffff;
}

.alert-error {
  background-color: #D9534F;
  border-color: #D9534F;
  color: #ffffff;
}

.alert-warning {
  background-color: #78350f;
  border-color: #d97706;
  color: #ffffff;
}

.alert-info {
  background-color: #1e3a8a;
  border-color: #4A90E2;
  color: #ffffff;
}

/* Success Alert (matches errorAlert pattern) */
.successAlert {
  background-color: #1a1a1a;
  border: 1px solid #8de97ec9;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.successIcon {
  color: #8de97ec9;
  margin-right: 12px;
  flex-shrink: 0;
}

.successTitle {
  font-size: 14px;
  font-weight: 500;
  color: #8de97ec9;
  margin: 0;
}

.successMessage {
  font-size: 14px;
  color: #8de97ec9;
  margin-top: 4px;
}

.successClose {
  background: none;
  border: none;
  color: #8de97ec9;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.successClose:hover {
  opacity: 0.7;
}

/* Error Alert (dark theme) */
.errorAlert {
  background-color: #1a1a1a;
  border: 1px solid #D9534F;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.errorContent {
  display: flex;
  align-items: flex-start;
}

.errorIcon {
  color: #D9534F;
  margin-right: 12px;
  margin-top: 2px;
  flex-shrink: 0;
}

.errorTitle {
  font-size: 14px;
  font-weight: 500;
  color: #D9534F;
  margin: 0 0 4px 0;
}

.errorMessage {
  font-size: 14px;
  color: #D9534F;
  margin: 0;
}

.errorClose {
  background: none;
  border: none;
  color: #D9534F;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
  font-size: 18px;
  line-height: 1;
}

.errorClose:hover {
  opacity: 0.7;
}/* Shared Component CSS - Common patterns across all management components */

/* ===== FORM ELEMENTS ===== */

/* Form helpers */
.required {
  color: #D9534F;
}

.helpText {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
}

/* Form groups and containers */
.formGroup {
  margin-bottom: 16px;
}

.formGroupLast {
  margin-bottom: 24px;
}

/* Form labels */
.formLabel {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 6px;
}

/* Mandatory field label - adds red asterisk */
.mandatory-field::after {
  content: ' *';
  color: #D9534F;
  font-weight: 500;
}

/* Form inputs - Perfect input style used throughout the application */
.formInput {
  width: 100%;
  padding: 10px 12px;
  background-color: #0f0f0f;
  border: 1px solid #4b5563;
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.formInput:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.formInput:disabled {
  background-color: #262626;
  opacity: 0.7;
  cursor: not-allowed;
}

.formInput::placeholder {
  color: #9ca3af;
}

/* Override browser autofill styling for formInput */
/* Using @layer overrides for highest specificity without !important */
@layer overrides {
  .formInput:-webkit-autofill,
  .formInput:-webkit-autofill:hover,
  .formInput:-webkit-autofill:focus,
  .formInput:-webkit-autofill:active {
    /* WebKit requires !important for -webkit-box-shadow and -webkit-text-fill-color
       due to UA stylesheet specificity that cannot be overridden by layers alone */
    -webkit-box-shadow: 0 0 0 30px var(--color-bg-primary) inset !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
    caret-color: var(--color-text-primary);
    border: 1px solid var(--color-border-secondary);
    transition: background-color 5000s ease-in-out 0s;
  }

  /* Firefox autofill for formInput */
  .formInput:-moz-autofill,
  .formInput:-moz-autofill-preview {
    filter: none;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
  }
}

/* Form textarea - Matches formInput style */
.formTextarea {
  width: 100%;
  padding: 10px 12px;
  background-color: #0f0f0f;
  border: 1px solid #4b5563;
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  outline: none;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.formTextarea:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.formTextarea:disabled {
  background-color: #262626;
  opacity: 0.7;
  cursor: not-allowed;
}

.formTextarea::placeholder {
  color: #9ca3af;
}

/* Override browser autofill styling for formTextarea */
/* Using @layer overrides for highest specificity without !important */
@layer overrides {
  .formTextarea:-webkit-autofill,
  .formTextarea:-webkit-autofill:hover,
  .formTextarea:-webkit-autofill:focus,
  .formTextarea:-webkit-autofill:active {
    /* WebKit requires !important for -webkit-box-shadow and -webkit-text-fill-color
       due to UA stylesheet specificity that cannot be overridden by layers alone */
    -webkit-box-shadow: 0 0 0 30px var(--color-bg-primary) inset !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
    caret-color: var(--color-text-primary);
    border: 1px solid var(--color-border-secondary);
    transition: background-color 5000s ease-in-out 0s;
  }

  /* Firefox autofill for formTextarea */
  .formTextarea:-moz-autofill,
  .formTextarea:-moz-autofill-preview {
    filter: none;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
  }
}

/* Form select - Matches formInput style */
.formSelect {
  width: 100%;
  padding: 10px 12px;
  background-color: #0f0f0f;
  border: 1px solid #4b5563;
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.formSelect:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.formSelect:disabled {
  background-color: #262626;
  opacity: 0.7;
  cursor: not-allowed;
}

.formSelect option {
  background-color: #1a1a1a;
  color: #ffffff;
}

/* Override browser autofill styling for formSelect */
/* Using @layer overrides for highest specificity without !important */
@layer overrides {
  .formSelect:-webkit-autofill,
  .formSelect:-webkit-autofill:hover,
  .formSelect:-webkit-autofill:focus,
  .formSelect:-webkit-autofill:active {
    /* WebKit requires !important for -webkit-box-shadow and -webkit-text-fill-color
       due to UA stylesheet specificity that cannot be overridden by layers alone */
    -webkit-box-shadow: 0 0 0 30px var(--color-bg-primary) inset !important;
    -webkit-text-fill-color: var(--color-text-primary) !important;
    caret-color: var(--color-text-primary);
    border: 1px solid var(--color-border-secondary);
    transition: background-color 5000s ease-in-out 0s;
  }

  /* Firefox autofill for formSelect */
  .formSelect:-moz-autofill,
  .formSelect:-moz-autofill-preview {
    filter: none;
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
  }
}

/* Enhanced selector styles for ProjectSelector and OrganizationSelector */
.selectorBase {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background-color: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 0.5rem;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.selectorBase:hover:not(:disabled) {
  border-color: #4b5563;
}

.selectorBase:focus:not(:disabled) {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.selectorBase:disabled {
  background-color: #0f0f0f;
  border-color: #4b5563;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
}

.selectorError {
  background-color: #0f0f0f;
  border-color: #D9534F;
  color: #D9534F;
  cursor: not-allowed;
  opacity: 0.8;
}

/* View field styles */
.viewLabel {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 6px;
}

.viewField {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #4b5563;
  border-radius: 6px;
  font-size: 14px;
  background-color: #0f0f0f;
  color: #9ca3af;
}

.viewFieldMultiline {
  min-height: 80px;
  white-space: pre-wrap;
}

.viewFieldCapitalize {
  text-transform: capitalize;
}

/* Loading spinner */
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #333333;
  border-top-color: #8b5cf6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinnerSmall {
  width: 14px;
  height: 14px;
  border: 2px solid white;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Main container */
.container {
  min-height: 100vh;
  background-color: #0f0f0f;
  padding: 24px;
  color: #ffffff;
}

.content {
  max-width: 90rem;
  margin: 0 auto;
}

/* Header */
.header {
  margin-bottom: 32px;
}

.headerContent {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.title {
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  margin-bottom: 8px;
}

.subtitle {
  font-size: 16px;
  color: #9ca3af;
  margin: 0;
}

/* Loading state */
.loadingContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50vh;
}

.loadingText {
  font-size: 16px;
  color: #9ca3af;
  margin-left: 12px;
}

/* Error alert */
.errorAlert {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

.errorContent {
  display: flex;
  align-items: flex-start;
}

.errorIcon {
  margin-right: 12px;
  margin-top: 2px;
  flex-shrink: 0;
}

.errorTitle {
  font-weight: 500;
  color: #D9534F;
  font-size: 14px;
  margin-bottom: 4px;
}

.errorMessage {
  color: #D9534F;
  font-size: 14px;
}

.errorClose {
  background: none;
  border: none;
  color: #D9534F;
  cursor: pointer;
  font-size: 18px;
  padding: 4px;
  line-height: 1;
  transition: color 0.15s;
}

.errorClose:hover {
  color: #D9534F;
}

/* Empty state */
.emptyState {
  background-color: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 8px;
  padding: 48px 24px;
  text-align: center;
}

.emptyIcon {
  width: 48px;
  height: 48px;
  background-color: #333333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: #6b7280;
}

.emptyTitle {
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.emptyMessage {
  font-size: 16px;
  color: #9ca3af;
  margin: 0 0 24px 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Table */
.tableWrapper {
  background-color: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 8px;
  overflow: hidden;
}

.tableScroll {
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tableHeaderRow {
  background-color: #262626;
  border-bottom: 1px solid #333333;
}

.tableHeader {
  padding: 12px 16px;
  text-align: left;
  font-weight: 500;
  color: #ffffff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tableHeaderRight {
  text-align: right;
}

.tableRow {
  border-bottom: 1px solid #333333;
  transition: background-color 0.15s ease;
}

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

.tableRow:hover {
  background-color: rgba(139, 92, 246, 0.05);
}

.tableCell {
  padding: 16px;
  color: #ffffff;
  font-weight: 500;
}

.tableCellSecondary {
  padding: 16px;
  color: #d1d5db;
}

.tableCellTruncate {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tableCellActions {
  padding: 16px;
  text-align: right;
}

.actionButtons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Form grids */
.formGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.formGrid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.formGrid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

/* ===== BUTTONS ===== */

/* Close button (modal X button) */
.closeButton {
  padding: 8px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #d1d5db;
  border-radius: 4px;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.closeButton:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Cancel button (secondary action) */
.cancelButton {
  padding: 10px 16px;
  background-color: transparent;
  color: #d1d5db;
  border: 1px solid #4b5563;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cancelButton:hover:not(:disabled) {
  background-color: #374151;
  border-color: #6b7280;
}

.cancelButton:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Primary button (main action) */
.primaryButton {
  padding: 10px 16px;
  background-color: #8b5cf6;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.primaryButton:hover:not(:disabled) {
  background-color: #7c3aed;
}

.primaryButton:disabled {
  background-color: #6b7280;
  cursor: not-allowed;
  opacity: 0.5;
}

/* Icon button (transparent with icon) */
.iconButton {
  padding: 8px;
  background-color: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.iconButton:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Table action buttons (View/Edit/Delete) */
.tableActionButton {
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid #4b5563;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
  height: 28px;
  line-height: 1;
}

.tableActionView {
  background-color: transparent;
  color: #ffffff;
}

.tableActionView:hover {
  background-color: #374151;
  border-color: #8de97ec9;
  color: #8de97ec9;
}

.tableActionEdit {
  background-color: transparent;
  color: #ffffff;
}

.tableActionEdit:hover {
  background-color: #374151;
  border-color: #4A90E2;
  color: #4A90E2;
}

.tableActionDelete {
  background-color: #D9534F;
  color: white;
  border: none;
}

.tableActionDelete:hover {
  background-color: #D9534F;
}

/* ===== STATUS BADGES ===== */

.statusBadge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-transform: capitalize;
}

.statusActive {
  background-color: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.statusInactive {
  background-color: rgba(156, 163, 175, 0.1);
  color: #9ca3af;
}

.statusArchived {
  background-color: rgba(202, 138, 4, 0.1);
  color: #fef08a;
}

/* Responsive design */
@media (max-width: 640px) {
  .formGrid,
  .formGrid2,
  .formGrid3 {
    grid-template-columns: 1fr;
  }

  .headerContent {
    flex-direction: column;
    gap: 16px;
  }
}

/* Mobile Responsive Form Enhancements */
@media (max-width: 640px) {
  .formInput,
  .formTextarea,
  .formSelect {
    min-height: 48px;
    padding: 12px 14px;
    font-size: clamp(0.875rem, 2vw, 1rem);
  }

  .formTextarea {
    min-height: 120px;
  }

  .formLabel {
    font-size: clamp(0.875rem, 2vw, 0.938rem);
  }

  .formGroup {
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .formInput,
  .formTextarea,
  .formSelect {
    min-height: 44px;
    font-size: 0.938rem;
  }
}

/* Landscape Orientation Optimizations */
@media (max-height: 600px) and (orientation: landscape) {
  /* Compact container and header spacing */
  .container {
    padding: 1rem;
  }

  .header {
    margin-bottom: 1rem;
  }

  .title {
    font-size: 1.5rem;
    margin-bottom: 0.375rem;
  }

  .subtitle {
    font-size: 0.875rem;
  }

  /* Reduce form spacing */
  .formGroup {
    margin-bottom: 0.75rem;
  }

  .formGroupLast {
    margin-bottom: 1rem;
  }

  .formLabel {
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
  }

  .formInput,
  .formTextarea,
  .formSelect {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  .formTextarea {
    min-height: 60px;
  }

  /* Compact form grids */
  .formGrid,
  .formGrid2,
  .formGrid3 {
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  /* Reduce table spacing */
  .tableWrapper {
    border-radius: 0.5rem;
  }

  .tableHeader {
    padding: 0.5rem 0.75rem;
    font-size: 0.688rem;
  }

  .tableCell,
  .tableCellSecondary {
    padding: 0.75rem;
  }

  .tableCellActions {
    padding: 0.75rem;
  }

  /* Compact buttons */
  .primaryButton,
  .cancelButton {
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
  }

  .tableActionButton {
    padding: 0.25rem 0.5rem;
    font-size: 0.688rem;
    height: 24px;
  }

  /* Compact status badges */
  .statusBadge {
    padding: 0.25rem 0.5rem;
    font-size: 0.688rem;
  }

  /* Reduce empty state padding */
  .emptyState {
    padding: 2rem 1rem;
  }

  .emptyIcon {
    width: 36px;
    height: 36px;
    margin-bottom: 0.75rem;
  }

  .emptyTitle {
    font-size: 1rem;
    margin-bottom: 0.375rem;
  }

  .emptyMessage {
    font-size: 0.875rem;
    margin-bottom: 1rem;
  }

  /* Compact loading state */
  .loadingContainer {
    height: 30vh;
  }

  .loadingText {
    font-size: 0.875rem;
    margin-left: 0.75rem;
  }

  .spinner {
    width: 24px;
    height: 24px;
    border-width: 2px;
  }

  /* Compact error alert */
  .errorAlert {
    padding: 0.75rem;
    margin-bottom: 1rem;
  }

  .errorTitle,
  .errorMessage {
    font-size: 0.8125rem;
  }

  /* Optimize selector for horizontal space */
  .selectorBase {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  /* Compact view fields */
  .viewLabel {
    font-size: 0.8125rem;
    margin-bottom: 0.375rem;
  }

  .viewField {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  .viewFieldMultiline {
    min-height: 60px;
  }

  .helpText {
    font-size: 0.688rem;
    margin-top: 0.25rem;
  }
}

/* ===== RESPONSIVE LAYOUT - MOBILE (≤1023px) ===== */
@media (max-width: 1023px) {
  /* Form containers - full width on mobile */
  .formGroup,
  .formGroupLast,
  .formRow {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
  }

  /* Form inputs - full width on mobile */
  .formInput,
  .formTextarea,
  .formSelect,
  .selectorBase {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }

  /* Buttons - stack vertically on mobile */
  .buttonGroup,
  .modalActions,
  .actionButtons,
  div[class*="button-group"],
  div[class*="actions"] {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
    min-width: 0;
  }

  .button,
  .primaryButton,
  .secondaryButton,
  .dangerButton,
  button[class*="btn"],
  button[class*="button"] {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
  }

  /* Tables - ensure horizontal scroll */
  .dataTable,
  table[class*="table"],
  .table,
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: 100%;
  }

  /* Table wrappers must constrain */
  .table-wrapper,
  .tableWrapper,
  div[class*="table-wrapper"],
  div[class*="tableWrapper"] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    display: block;
  }

  /* Cards and panels - full width */
  .card,
  .modal,
  .panel,
  .dashboard-card,
  div[class*="card"],
  div[class*="modal"],
  div[class*="panel"] {
    width: 100%;
    max-width: 100%;
    margin: 0.5rem 0;
    padding: 1rem;
    box-sizing: border-box;
    min-width: 0;
    overflow-x: auto;
  }

  /* Modal containers - reduce padding */
  .modalContainer,
  .modalContent,
  div[class*="modal-container"],
  div[class*="modal-content"] {
    width: 95%;
    max-width: 95vw;
    padding: 1rem;
    margin: 1rem auto;
    box-sizing: border-box;
    overflow-x: auto;
  }

  /* Grid layouts - single column */
  .grid,
  .cardGrid,
  div[class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Headers and titles - smaller on mobile */
  .pageTitle,
  .cardTitle,
  .sectionTitle,
  h1, h2, h3 {
    font-size: 1.25rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    min-width: 0;
  }

  /* Badges and status indicators - ensure they fit */
  .badge,
  .statusBadge,
  .tag,
  span[class*="badge"],
  span[class*="status"] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Ensure all containers respect mobile width */
  .container,
  .wrapper,
  .content,
  div[class*="container"],
  div[class*="wrapper"] {
    width: 100%;
    max-width: 100vw;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
    min-width: 0;
    overflow-x: auto;
  }

  /* Text overflow handling */
  .viewField,
  .formInput,
  .formTextarea,
  p, span, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    min-width: 0;
  }

  /* Ensure flex containers don't overflow */
  [class*="flex"],
  .flex,
  .flex-row,
  .flex-col {
    min-width: 0;
    max-width: 100%;
  }
}
/* Modal Header */
._modalHeader_1e7te_2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid #333333;
}

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

._titleText_1e7te_16 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #ffffff;
}

/* Modal Content */
._modalContent_1e7te_24 {
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding: 24px;
}

._contentWrapper_1e7te_31 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Info Section */
._infoSection_1e7te_38 {
  padding: 1rem;
  background-color: #0f0f0f;
  border: 1px solid #333333;
  border-radius: 8px;
  display: flex;
  gap: 0.75rem;
}

._infoIcon_1e7te_47 {
  margin-top: 0.125rem;
}

._infoTitle_1e7te_51 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.5rem 0;
}

._infoText_1e7te_58 {
  font-size: 0.875rem;
  color: #d1d5db;
  margin: 0 0 0.75rem 0;
  line-height: 1.5;
}

._infoList_1e7te_65 {
  font-size: 0.875rem;
  color: #9ca3af;
  margin: 0;
  padding-left: 1.25rem;
  line-height: 1.5;
}

._infoListItem_1e7te_73 {
  margin-bottom: 0.25rem;
}

/* Prompt Section */
._promptHeader_1e7te_78 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

._promptLabel_1e7te_85 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
}

._copyButton_1e7te_91 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #8b5cf6;
  border: none;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: all 0.2s;
}

._copyButton_1e7te_91:hover {
  background-color: #7c3aed;
}

._copyButton_1e7te_91._copied_1e7te_111 {
  background-color: #8de97ec9;
}

._copyButton_1e7te_91._copied_1e7te_111:hover {
  background-color: #8de97ec9;
}

._promptContainer_1e7te_119 {
  background-color: #0f0f0f;
  border: 1px solid #333333;
  border-radius: 8px;
  padding: 1rem;
  max-height: 300px;
  overflow: auto;
  font-size: 0.75rem;
  color: #d1d5db;
  line-height: 1.5;
  font-family: monospace;
  white-space: pre-wrap;
}

/* Tools Section */
._toolsSection_1e7te_134 {
  padding: 1rem;
  background-color: #0f0f0f;
  border: 1px solid #333333;
  border-radius: 8px;
}

._toolsTitle_1e7te_141 {
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 0.75rem 0;
}

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

._toolLink_1e7te_154 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #8b5cf6;
  text-decoration: none;
  transition: color 0.2s;
}

._toolLink_1e7te_154:hover {
  color: #a855f7;
}

/* Modal Footer */
._modalFooter_1e7te_169 {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 24px;
  border-top: 1px solid #333333;
}

._submitButton_1e7te_177 {
  padding: 0.5rem 1rem;
  background-color: #8de97ec9;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: all 0.2s;
}

._submitButton_1e7te_177:hover {
  background-color: #8de97ec9;
}

._submitButton_1e7te_177:disabled {
  background-color: #374151;
  cursor: not-allowed;
}

._submitButton_1e7te_177:disabled:hover {
  background-color: #374151;
}
/**
 * ContextFormFields CSS Module
 * Extracted inline styles converted to reusable CSS classes using CSS variables
 */

/* Header row with label and button */
._headerRow_12qcu_13 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

._headerLabel_12qcu_27 {
  margin-bottom: 0;
}

/* Get from Repo button */
._getFromRepoButton_12qcu_37 {
  background-color: var(--color-info);
  color: var(--color-text-primary);
  border: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: var(--button-padding-sm);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: background-color var(--transition-base);
}

._getFromRepoButton_12qcu_37:hover:not(:disabled) {
  background-color: var(--color-info-dark);
}

._getFromRepoButton_12qcu_37:disabled {
  background-color: var(--color-text-subtle);
  opacity: 0.7;
  cursor: not-allowed;
}

/* Repository URL input row */
._repositoryRow_12qcu_87 {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

._repositoryInput_12qcu_99 {
  flex: 1;
}

._repositoryViewField_12qcu_107 {
  flex: 1;
}

/* Clone button group */
._cloneButtonGroup_12qcu_117 {
  display: flex;
  align-items: center;
}

/* Clone button */
._cloneButton_12qcu_117 {
  background-color: var(--color-success);
  color: var(--color-text-primary);
  border: none;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: var(--button-padding-sm);
  cursor: pointer;
  transition: background-color var(--transition-base);
}

._cloneButton_12qcu_117:hover:not(:disabled) {
  background-color: var(--color-success-dark);
}

._cloneButton_12qcu_117:disabled {
  background-color: var(--color-text-subtle);
  opacity: 0.7;
  cursor: not-allowed;
}

/* Clone button when repository is already cloned */
._cloneButtonCloned_12qcu_179 {
  background-color: var(--color-neutral-dark);
  color: var(--color-text-primary);
  border: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: var(--button-padding-sm);
  opacity: 0.7;
  cursor: not-allowed;
}

._cloneButtonChecking_12qcu_207 {
  background-color: var(--color-text-subtle);
  color: var(--color-text-primary);
  border: none;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: var(--button-padding-sm);
  opacity: 0.7;
  cursor: not-allowed;
}

/* Re-clone button */
._reCloneButton_12qcu_237 {
  background-color: rgba(141, 233, 126, 0.79);
  border: 1px solid var(--color-border-secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 6px 4px;
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-base), border-color var(--transition-base);
  height: 28px;
  line-height: 1;
}

._reCloneButton_12qcu_237:hover:not(:disabled) {
  background-color: var(--color-warning-light);
  border-color: var(--color-warning-light);
}

._reCloneButton_12qcu_237:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Document overrides section */
._overridesSection_12qcu_291 {
  margin-top: var(--spacing-2xl);
}

._overridesTitle_12qcu_299 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

._overridesDescription_12qcu_313 {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-lg);
}

/* Document override card */
._overrideCard_12qcu_327 {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-lg);
  background-color: var(--color-bg-primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-primary);
}

._overrideCardHeader_12qcu_343 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

._overrideCardLabel_12qcu_357 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* Override status label (readonly mode) */
._overrideStatusOverridden_12qcu_371 {
  font-size: var(--font-size-sm);
  color: var(--color-success);
}

._overrideStatusDefault_12qcu_381 {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Override checkbox label */
._overrideCheckboxLabel_12qcu_393 {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}

/* Custom structure textarea wrapper */
._customStructureWrapper_12qcu_413 {
  margin-top: var(--spacing-sm);
}
/* Context Component Specific Styles */

/* Container */
._contextContainer_1rxxo_4 {
  min-height: 100vh;
  background-color: #0f0f0f;
  padding: 24px;
  color: #ffffff;
}

._contextContent_1rxxo_11 {
  max-width: 90rem;
  margin: 0 auto;
}

._contextCard_1rxxo_16 {
  background-color: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 8px;
  padding: 24px;
}

/* Header */
._contextHeader_1rxxo_24 {
  margin-bottom: 32px;
}

._contextHeaderContent_1rxxo_28 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

._contextTitle_1rxxo_34 {
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  margin-bottom: 8px;
}

._contextSubtitle_1rxxo_42 {
  font-size: 16px;
  color: #9ca3af;
  margin: 0;
}

._contextActions_1rxxo_48 {
  display: flex;
  gap: 12px;
}

/* No Organization State */
._contextNoOrg_1rxxo_54 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
}

._contextNoOrgCard_1rxxo_61 {
  background-color: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 8px;
  padding: 48px 24px;
  text-align: center;
  max-width: 400px;
}

._contextNoOrgIcon_1rxxo_70 {
  width: 48px;
  height: 48px;
  background-color: #333333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: #6b7280;
}

._contextNoOrgTitle_1rxxo_82 {
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  margin: 0 0 8px 0;
}

._contextNoOrgDescription_1rxxo_89 {
  font-size: 16px;
  color: #9ca3af;
  margin: 0;
}

/* Level Selector */
._levelSelector_1rxxo_96 {
  margin-bottom: 24px;
}

._levelLabel_1rxxo_100 {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 12px;
}

._levelOptions_1rxxo_108 {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

._levelOption_1rxxo_108 {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 12px 16px;
  background-color: transparent;
  border: 1px solid #4b5563;
  border-radius: 6px;
  transition: all 0.15s ease;
}

._levelOption_1rxxo_108:hover {
  border-color: #6b7280;
  background-color: rgba(75, 85, 99, 0.1);
}

._levelOptionActive_1rxxo_131 {
  background-color: rgba(139, 92, 246, 0.1);
  border-color: #8b5cf6;
}

._levelOptionActive_1rxxo_131:hover {
  background-color: rgba(139, 92, 246, 0.15);
  border-color: #9333ea;
}

._levelOptionRadio_1rxxo_141 {
  margin-right: 4px;
}

._levelOptionText_1rxxo_145 {
  color: #ffffff;
  font-weight: 500;
}

/* Project Selector */
._projectSelector_1rxxo_151 {
  margin-bottom: 16px;
}

._projectLabel_1rxxo_155 {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 6px;
}

._projectSelect_1rxxo_151 {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #4b5563;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  background-color: #0f0f0f;
  color: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

._projectSelect_1rxxo_151:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* Alerts */
/* Note: .errorAlert moved to shared-components.css */

._errorIcon_1rxxo_183 {
  color: #D9534F;
  flex-shrink: 0;
  margin-top: 2px;
}

._errorText_1rxxo_189 {
  color: #D9534F;
  font-size: 14px;
}

._successAlert_1rxxo_194 {
  background-color: #1b4922;
  border: 1px solid #2d7a3a;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

._successIcon_1rxxo_205 {
  color: #4ade80;
  flex-shrink: 0;
  margin-top: 2px;
}

._successText_1rxxo_211 {
  color: #bbf7d0;
  font-size: 14px;
}

/* Loading State */
/* Note: .loadingContainer and .loadingText moved to shared-components.css */

._loadingSpinner_1rxxo_219 {
  width: 32px;
  height: 32px;
  border: 3px solid #333333;
  border-top-color: #8b5cf6;
  border-radius: 50%;
  animation: _spin_1rxxo_1 1s linear infinite;
  margin: 0 auto 12px;
}

/* Form Fields */
._formField_1rxxo_230 {
  margin-bottom: 16px;
}

/* Note: .formLabel, .formInput, .formTextarea, .formGrid moved to shared-components.css */

/* Document Structure Overrides */
._documentOverrides_1rxxo_237 {
  margin-top: 32px;
}

._documentOverridesTitle_1rxxo_241 {
  color: #ffffff;
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: 600;
}

._documentOverridesDescription_1rxxo_248 {
  color: #9ca3af;
  margin-bottom: 24px;
  font-size: 14px;
}

._documentTypeCard_1rxxo_254 {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(124, 58, 237, 0.02));
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid rgba(139, 92, 246, 0.2);
  transition: all 0.2s ease-in-out;
}

._documentTypeCard_1rxxo_254:hover {
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 4px 8px rgba(139, 92, 246, 0.1);
}

._documentTypeHeader_1rxxo_268 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

._documentTypeLabel_1rxxo_275 {
  color: #ffffff;
  font-weight: 500;
  font-size: 14px;
}

._documentTypeCheckbox_1rxxo_281 {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #d1d5db;
  font-size: 14px;
}

._documentTypeCheckbox_1rxxo_281 input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #8b5cf6;
  cursor: pointer;
}

._documentTypeCheckbox_1rxxo_281._disabled_1rxxo_297 {
  cursor: not-allowed;
  color: #6b7280;
}

._documentTypeCheckbox_1rxxo_281._disabled_1rxxo_297 input[type="checkbox"] {
  cursor: not-allowed;
}

/* Note: .documentTypeTextarea is the same as .formTextarea in shared-components.css */

/* Button Styles */
._contextButton_1rxxo_309 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
}

._contextButtonSave_1rxxo_322 {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(139, 92, 246, 0.2);
}

._contextButtonSave_1rxxo_322:hover:not(:disabled) {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
  box-shadow: 0 4px 6px rgba(139, 92, 246, 0.3);
  transform: translateY(-1px);
}

._contextButtonSave_1rxxo_322:disabled {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.5) 0%, rgba(124, 58, 237, 0.5) 100%);
  cursor: not-allowed;
  opacity: 0.6;
}

._contextButtonCancel_1rxxo_340 {
  background-color: transparent;
  color: #9ca3af;
  border: 1px solid #4b5563;
}

._contextButtonCancel_1rxxo_340:hover {
  background-color: #262626;
  color: #ffffff;
  border-color: #6b7280;
}

/* Footer */
._contextFooter_1rxxo_353 {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #333333;
}

/* Animations */
@keyframes _spin_1rxxo_1 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
  /* Note: .formGrid responsive handled in shared-components.css */

  ._contextHeaderContent_1rxxo_28 {
    flex-direction: column;
    gap: 16px;
  }

  ._levelOptions_1rxxo_108 {
    flex-direction: column;
  }
}

/* Landscape orientation support */
@media (max-height: 600px) and (orientation: landscape) {
  /* Compact container */
  ._contextContainer_1rxxo_4 {
    padding: 16px;
  }

  ._contextCard_1rxxo_16 {
    padding: 16px;
  }

  /* Compact header */
  ._contextHeader_1rxxo_24 {
    margin-bottom: 20px;
  }

  ._contextTitle_1rxxo_34 {
    font-size: 22px;
    margin-bottom: 4px;
  }

  ._contextSubtitle_1rxxo_42 {
    font-size: 14px;
  }

  /* Compact level selector */
  ._levelSelector_1rxxo_96 {
    margin-bottom: 16px;
  }

  ._levelLabel_1rxxo_100 {
    font-size: 13px;
    margin-bottom: 8px;
  }

  ._levelOptions_1rxxo_108 {
    gap: 12px;
    margin-bottom: 12px;
  }

  ._levelOption_1rxxo_108 {
    padding: 8px 12px;
  }

  ._levelOptionText_1rxxo_145 {
    font-size: 13px;
  }

  /* Compact project selector */
  ._projectSelector_1rxxo_151 {
    margin-bottom: 12px;
  }

  ._projectSelect_1rxxo_151 {
    padding: 8px 10px;
    font-size: 13px;
  }

  /* Compact alerts */
  ._successAlert_1rxxo_194 {
    padding: 12px;
    margin-bottom: 16px;
  }

  ._successText_1rxxo_211,
  ._errorText_1rxxo_189 {
    font-size: 13px;
  }

  /* Compact document overrides */
  ._documentOverrides_1rxxo_237 {
    margin-top: 20px;
  }

  ._documentOverridesTitle_1rxxo_241 {
    font-size: 16px;
    margin-bottom: 6px;
  }

  ._documentOverridesDescription_1rxxo_248 {
    font-size: 13px;
    margin-bottom: 16px;
  }

  ._documentTypeCard_1rxxo_254 {
    padding: 12px;
    margin-bottom: 12px;
  }

  ._documentTypeLabel_1rxxo_275 {
    font-size: 13px;
  }

  /* Compact footer */
  ._contextFooter_1rxxo_353 {
    margin-top: 20px;
    padding-top: 16px;
  }

  /* Compact form fields */
  ._formField_1rxxo_230 {
    margin-bottom: 12px;
  }
}
/* Base Skeleton Styles */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Skeleton Variants */
.skeleton-text {
  height: 16px;
  width: 100%;
  border-radius: 4px;
  margin-bottom: 8px;
}

.skeleton-rectangular {
  width: 100%;
  border-radius: 8px;
}

.skeleton-circular {
  border-radius: 50%;
}

/* Card Skeleton */
.skeleton-card {
  background-color: rgba(26, 26, 26, 0.8);
  border: 1px solid #333;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
}

.skeleton-card-header {
  width: 100%;
  border-radius: 0;
  margin-bottom: 0;
}

.skeleton-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

/* Dashboard Card Skeleton */
.skeleton-dashboard-card {
  background-color: rgba(26, 26, 26, 0.8);
  border: 1px solid #333;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.skeleton-dashboard-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.skeleton-dashboard-card-value {
  margin: 8px 0;
}

/* Table Skeleton */
.skeleton-table-wrapper {
  background-color: rgba(26, 26, 26, 0.8);
  border: 1px solid #333;
  border-radius: 12px;
  overflow: hidden;
  padding: 1rem;
}

.skeleton-table {
  width: 100%;
  border-collapse: collapse;
}

.skeleton-table-header {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #333;
}

.skeleton-table-row {
  border-bottom: 1px solid rgba(51, 51, 51, 0.5);
}

.skeleton-table-cell {
  padding: 16px 12px;
}

/* List Skeleton */
.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-list-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background-color: rgba(26, 26, 26, 0.8);
  border: 1px solid #333;
  border-radius: 8px;
}

.skeleton-list-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Form Skeleton */
.skeleton-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.skeleton-form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton-form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 8px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .skeleton-card-body {
    padding: 1rem;
  }

  .skeleton-dashboard-card {
    padding: 1rem;
  }

  .skeleton-table-wrapper {
    padding: 0.5rem;
  }

  .skeleton-table-header,
  .skeleton-table-cell {
    padding: 8px;
  }
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
  .skeleton {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 0%,
      rgba(255, 255, 255, 0.08) 50%,
      rgba(255, 255, 255, 0.03) 100%
    );
    background-size: 200% 100%;
  }
}

/* Landscape Orientation Optimizations */
@media (max-height: 600px) and (orientation: landscape) {
  /* Reduce skeleton text height */
  .skeleton-text {
    height: 12px;
    margin-bottom: 6px;
  }

  /* Compact card skeleton */
  .skeleton-card {
    border-radius: 8px;
  }

  .skeleton-card-body {
    padding: 1rem;
    gap: 8px;
  }

  .skeleton-card-footer {
    margin-top: 10px;
  }

  /* Compact dashboard card skeleton */
  .skeleton-dashboard-card {
    padding: 1rem;
    gap: 10px;
    border-radius: 8px;
  }

  .skeleton-dashboard-card-value {
    margin: 6px 0;
  }

  /* Compact table skeleton */
  .skeleton-table-wrapper {
    padding: 0.625rem;
    border-radius: 8px;
  }

  .skeleton-table-header {
    padding: 8px;
  }

  .skeleton-table-cell {
    padding: 10px 8px;
  }

  /* Compact list skeleton */
  .skeleton-list {
    gap: 8px;
  }

  .skeleton-list-item {
    padding: 8px;
    gap: 12px;
    border-radius: 6px;
  }

  .skeleton-list-content {
    gap: 6px;
  }

  /* Compact form skeleton */
  .skeleton-form {
    gap: 16px;
  }

  .skeleton-form-field {
    gap: 6px;
  }

  .skeleton-form-actions {
    gap: 8px;
    margin-top: 6px;
  }
}
/* Form helpers */
._required_klreo_2 {
  color: #D9534F;
}

._helpText_klreo_6 {
  fontSize: 12px;
  color: #9ca3af;
  marginTop: 4px;
}

/* Members list */
._membersList_klreo_13 {
  backgroundColor: #0f0f0f;
  border: 1px solid #333333;
  borderRadius: 6px;
  maxHeight: 200px;
  overflowY: auto;
}

._memberItem_klreo_21 {
  padding: 10px 12px;
  borderBottom: 1px solid #1f1f1f;
  display: flex;
  justifyContent: space-between;
  alignItems: center;
}

._memberItem_klreo_21:last-child {
  borderBottom: none;
}

._memberEmail_klreo_33 {
  color: #ffffff;
  fontSize: 14px;
}

._memberEmailView_klreo_38 {
  color: #9ca3af;
  fontSize: 14px;
}

._memberRoleAdmin_klreo_43 {
  marginLeft: 8px;
  padding: 2px 6px;
  backgroundColor: #7c3aed22;
  color: #a78bfa;
  borderRadius: 4px;
  fontSize: 12px;
}

._memberRoleContributor_klreo_52 {
  marginLeft: 8px;
  padding: 2px 6px;
  backgroundColor: #333333;
  color: #9ca3af;
  borderRadius: 4px;
  fontSize: 12px;
}

/* Contributors button */
._contributorsButton_klreo_62 {
  padding: 8px 16px;
  background-color: #14b8a6;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

._contributorsButton_klreo_62:hover {
  background-color: #0d9488;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(20, 184, 166, 0.2);
}

._contributorsButton_klreo_62:active {
  transform: translateY(0);
}

/* Organization-specific field styles */
._viewFieldCapitalize_klreo_88 {
  textTransform: capitalize;
}

/* Table scroll wrapper (organization-specific) */
._tableScroll_klreo_93 {
  overflowX: auto;
}

/* Action tags */
._blueTag_klreo_98 {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s;
}

._blueTag_klreo_98:hover {
  background-color: #3a7bc8;
  transform: translateY(-1px);
}

/* Status badges */
._statusActive_klreo_118 {
  padding: 4px 8px;
  borderRadius: 4px;
  fontSize: 12px;
  fontWeight: 500;
  textTransform: capitalize;
  backgroundColor: #8de97ec9;
  color: #bbf7d0;
}

._statusInactive_klreo_128 {
  padding: 4px 8px;
  borderRadius: 4px;
  fontSize: 12px;
  fontWeight: 500;
  textTransform: capitalize;
  backgroundColor: #4b5563;
  color: #d1d5db;
}

._statusArchived_klreo_138 {
  padding: 4px 8px;
  borderRadius: 4px;
  fontSize: 12px;
  fontWeight: 500;
  textTransform: capitalize;
  backgroundColor: #ca8a04;
  color: #fef08a;
}

/* Landscape orientation support */
@media (max-height: 600px) and (orientation: landscape) {
  /* Compact search section */
  ._searchWrapper_klreo_151 {
    margin-bottom: 8px;
  }

  ._searchInput_klreo_155 {
    padding: 6px 10px 6px 32px;
    font-size: 13px;
  }

  /* Compact table */
  ._tableRow_klreo_161 {
    font-size: 13px;
  }

  ._tableCell_klreo_165,
  ._tableCellSecondary_klreo_166 {
    padding: 10px 12px;
  }

  ._tableCellActions_klreo_170 {
    padding: 10px 12px;
  }

  /* Action buttons smaller */
  ._actionButtons_klreo_175 {
    gap: 6px;
  }
}
/* Waitlist Management Page Styles */

._page_14nfi_5 {
  min-height: 100vh;
  background-color: #0f0f0f;
  padding: 24px;
  color: #ffffff;
}

._pageContent_14nfi_19 {
  max-width: 90rem;
  margin: 0 auto;
}

/* Loading State */
._loadingContainer_14nfi_31 {
  max-width: 90rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50vh;
}

._loadingText_14nfi_49 {
  margin-left: 12px;
  color: #a1a1aa;
  font-size: 16px;
}

/* Header */
._header_14nfi_63 {
  margin-bottom: 32px;
}

._headerTop_14nfi_71 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

._headerTitle_14nfi_83 {
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

._headerSubtitle_14nfi_103 {
  font-size: 15px;
  color: #9ca3af;
  margin: 0;
  line-height: 1.5;
}

._headerActions_14nfi_117 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._bulkActions_14nfi_129 {
  display: flex;
  gap: 8px;
}

/* Filter Card */
._filtersCard_14nfi_141 {
  background-color: #1a1a1a;
  border-radius: 12px;
  border: 1px solid #333333;
  padding: 20px 24px;
  margin-bottom: 24px;
}

._filtersContainer_14nfi_157 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._searchWrapper_14nfi_169 {
  flex: 1;
  position: relative;
}

._searchIcon_14nfi_179 {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

._searchInput_14nfi_195 {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid #4b5563;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  background-color: #0f0f0f;
  color: #ffffff;
}

._searchInput_14nfi_195:focus {
  border-color: #8b5cf6;
}

._filterButtons_14nfi_225 {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

._filterButton_14nfi_225 {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  background-color: #374151;
  color: #9ca3af;
}

._filterButton_14nfi_225:hover {
  background-color: #4b5563;
}

._filterButtonActive_14nfi_269 {
  background-color: #8b5cf6;
  color: #ffffff;
}

._filterButtonActive_14nfi_269:hover {
  background-color: #8b5cf6;
}

/* Users Card */
._usersCard_14nfi_289 {
  background-color: #1a1a1a;
  border-radius: 12px;
  border: 1px solid #333333;
}

._tableContainer_14nfi_301 {
  overflow-x: auto;
}

._table_14nfi_301 {
  width: 100%;
}

._tableHead_14nfi_317 {
  border-bottom: 1px solid #374151;
}

._tableHeaderCell_14nfi_325 {
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._tableRow_14nfi_345 {
  border-bottom: 1px solid #374151;
}

._tableRowLast_14nfi_353 {
  border-bottom: none;
}

._tableCell_14nfi_361 {
  padding: 12px 16px;
}

._tableCellContent_14nfi_369 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._userEmail_14nfi_381 {
  color: #ffffff;
  font-weight: 500;
}

._cellText_14nfi_391 {
  color: #d1d5db;
}

._cellPlaceholder_14nfi_399 {
  color: #6b7280;
}

._dateText_14nfi_407 {
  color: #9ca3af;
  font-size: 14px;
}

/* Blue Tags */
._blueTag_14nfi_419 {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s;
}

._blueTag_14nfi_419:hover {
  background-color: #3a7bc8;
  transform: translateY(-1px);
}

._tagsContainer_14nfi_457 {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* Action Buttons */
._actionButtons_14nfi_473 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._actionButtonActivate_14nfi_485 {
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid #4b5563;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
  height: 28px;
  line-height: 1;
  background-color: transparent;
  color: #ffffff;
}

._actionButtonActivate_14nfi_485:hover {
  background-color: #374151;
  border-color: #8de97ec9;
  color: #8de97ec9;
}

._actionButtonActivate_14nfi_485:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

._actionButtonImpersonate_14nfi_541 {
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid #4b5563;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
  height: 28px;
  line-height: 1;
  background-color: transparent;
  color: #ffffff;
}

._actionButtonImpersonate_14nfi_541:hover {
  background-color: #374151;
  border-color: #8b5cf6;
  color: #8b5cf6;
}

._actionButtonImpersonate_14nfi_541:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Empty State */
._emptyState_14nfi_599 {
  padding: 48px 24px;
  text-align: center;
}

._emptyStateContent_14nfi_609 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

._emptyTitle_14nfi_623 {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  margin: 0;
}

._emptyMessage_14nfi_637 {
  font-size: 14px;
  color: #9ca3af;
  margin: 8px 0 0 0;
}

/* Summary Stats */
._statsGrid_14nfi_651 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

._statCard_14nfi_665 {
  background-color: #1a1a1a;
  border-radius: 12px;
  border: 1px solid #333333;
  padding: 16px;
}

._statValue_14nfi_679 {
  font-size: 24px;
  font-weight: 700;
}

._statValueWhite_14nfi_689 {
  color: #ffffff;
}

._statValueYellow_14nfi_697 {
  color: #fbbf24;
}

._statValueGreen_14nfi_705 {
  color: #8de97ec9;
}

._statValuePurple_14nfi_713 {
  color: #8b5cf6;
}

._statLabel_14nfi_721 {
  font-size: 14px;
  color: #9ca3af;
  margin-top: 4px;
}

/* View Modal Content */
._modalContent_14nfi_735 {
  padding: 24px;
}

._modalFieldsGrid_14nfi_743 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

._modalField_14nfi_743 {
  display: block;
}

._modalFieldRow_14nfi_763 {
  display: flex;
  gap: 20px;
}

._modalFieldHalf_14nfi_773 {
  flex: 1;
}

._modalFieldDoubleRow_14nfi_781 {
  display: flex;
  gap: 32px;
}

._modalLabel_14nfi_791 {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #9ca3af;
  margin-bottom: 4px;
}

._modalValue_14nfi_807 {
  color: #ffffff;
  margin: 0;
  font-size: 16px;
}

._modalValueMultiline_14nfi_819 {
  line-height: 1.5;
}

/* Edit Modal Forms */
._checkboxLabel_14nfi_829 {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

._checkboxLabelText_14nfi_843 {
  font-size: 14px;
  color: #d1d5db;
}

._passwordGroup_14nfi_853 {
  display: flex;
  gap: 8px;
}

._passwordInput_14nfi_863 {
  flex: 1;
  font-family: monospace;
}

/* Audit Management Styles */
._eventIdCell_14nfi_875 {
  font-family: monospace;
  font-size: 0.875rem;
}

._resultBadgeSuccess_14nfi_885 {
  background-color: #10b981;
  color: #ffffff;
}

._resultBadgeFailure_14nfi_895 {
  background-color: #ef4444;
  color: #ffffff;
}

._loadMoreSection_14nfi_905 {
  padding: 1rem;
  border-top: 1px solid #1f1f1f;
  text-align: center;
}

._loadingSection_14nfi_917 {
  padding: 1rem;
  border-top: 1px solid #1f1f1f;
  text-align: center;
}
/* Table Element Styles */

/* Base table styles */
.table {
  width: 100%;
  background-color: #1a1a1a;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #333333;
}

/* Table header */
.table-header {
  background-color: #1a1a1a;
  border-bottom: 1px solid #333333;
}

.table-header-cell {
  padding: 0.75rem 0.5rem;
  text-align: left;
  font-weight: 500;
  color: #ffffff;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  border-bottom: 1px solid #333333;
}

/* Table body */
.table-body {
  background-color: #1a1a1a;
}

.table-row {
  border-bottom: 1px solid #333333;
  transition: background-color 0.2s;
}

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

.table-row:hover {
  background-color: #374151;
}

.table-cell {
  padding: 0.75rem 0.5rem;
  color: #e2e8f0;
  font-size: 0.875rem;
  vertical-align: top;
}

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

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

/* Table responsive wrapper */
.table-wrapper {
  overflow-x: auto;
  background-color: #1a1a1a;
  border-radius: 0.75rem;
  border: 1px solid #333333;
}

/* Action buttons container in tables */
.table-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: flex-end;
}

/* Table loading state */
.table-loading {
  text-align: center;
  padding: 3rem;
  color: #a0aec0;
  font-size: 0.875rem;
}

/* Table empty state */
.table-empty {
  text-align: center;
  padding: 3rem;
  color: #a0aec0;
  font-size: 0.875rem;
}

.table-empty-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: #d1d5db;
  margin-bottom: 0.5rem;
}

.table-empty-description {
  margin-bottom: 1.5rem;
}

/* Table with alternating row colors */
.table-striped .table-row:nth-child(even) {
  background-color: #262626;
}

.table-striped .table-row:nth-child(even):hover {
  background-color: #374151;
}

/* Compact table variant */
.table-compact .table-header-cell {
  padding: 0.5rem;
  font-size: 0.75rem;
}

.table-compact .table-cell {
  padding: 0.5rem;
  font-size: 0.75rem;
}

/* Table cell with truncated text */
.table-cell-truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sortable table headers */
.table-header-sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.table-header-sortable:hover {
  background-color: #2d3748;
}

.table-header-sortable::after {
  content: '';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.5;
}
/* Mobile Responsive Table Styles */
@media (max-width: 1023px) {
  /* Table wrapper - critical for preventing overflow */
  .table-wrapper,
  .tableWrapper,
  div[class*="table-wrapper"],
  div[class*="tableWrapper"] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
    box-sizing: border-box;
    position: relative;
  }

  /* Force table to display as block for proper scrolling */
  .table-wrapper .table,
  .tableWrapper .table,
  table {
    display: table;
    width: 100%;
    min-width: min-content;
    box-sizing: border-box;
  }

  /* Hide desktop table on mobile if mobile view available */
  .table-wrapper.hide-mobile-table .table {
    display: none;
  }

  /* Reduce padding on mobile */
  .table-cell,
  .table-header-cell,
  td,
  th {
    padding: 0.5rem 0.5rem;
    font-size: 0.75rem;
    box-sizing: border-box;
  }

  /* Sticky first column on horizontal scroll */
  .table-sticky-first th:first-child,
  .table-sticky-first td:first-child {
    position: sticky;
    left: 0;
    background-color: #1a1a1a;
    z-index: 1;
  }

  /* Ensure table cells don't break layout */
  .table-cell,
  .table-header-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .table-cell-truncate {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Mobile Card View Container */
.mobile-card-view {
  display: none;
}

@media (max-width: 767px) {
  .mobile-card-view {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem;
  }
}

/* Mobile Card Styles */
.mobile-card {
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 0.5rem;
  padding: 1rem;
}

.mobile-card:active {
  background-color: #222;
}

.mobile-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  gap: 0.5rem;
}

.mobile-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  flex: 1;
  min-width: 0;
}

.mobile-card-badge {
  flex-shrink: 0;
}

.mobile-card-fields {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.mobile-card-field {
  display: flex;
  gap: 0.5rem;
}

.mobile-card-label {
  color: #9ca3af;
  min-width: 80px;
  font-weight: 500;
}

.mobile-card-value {
  color: #e5e7eb;
  flex: 1;
  word-break: break-word;
}

.mobile-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #333;
}

.mobile-card-actions button {
  flex: 1;
  min-height: 44px;
  justify-content: center;
}

/* Touch-friendly button sizing on mobile */
@media (max-width: 767px) {
  .table-actions button,
  .mobile-card-actions button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.75rem;
  }
}

/* Landscape Orientation Optimizations */
@media (max-height: 600px) and (orientation: landscape) {
  /* Reduce table padding for more vertical space */
  .table-header-cell {
    padding: 0.5rem 0.5rem;
    font-size: 0.75rem;
  }

  .table-cell {
    padding: 0.5rem 0.5rem;
    font-size: 0.8125rem;
  }

  /* Reduce table wrapper spacing */
  .table-wrapper {
    border-radius: 0.5rem;
  }

  /* Compact empty and loading states */
  .table-loading,
  .table-empty {
    padding: 1.5rem;
  }

  .table-empty-title {
    font-size: 1rem;
    margin-bottom: 0.375rem;
  }

  .table-empty-description {
    margin-bottom: 1rem;
  }

  /* More compact mobile card view */
  .mobile-card {
    padding: 0.75rem;
  }

  .mobile-card-header {
    margin-bottom: 0.5rem;
  }

  .mobile-card-title {
    font-size: 0.875rem;
  }

  .mobile-card-fields {
    gap: 0.375rem;
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
  }

  .mobile-card-label {
    min-width: 70px;
  }

  .mobile-card-actions {
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
  }

  .mobile-card-actions button {
    min-height: 36px;
    padding: 0.375rem 0.625rem;
  }

  /* Optimize table action buttons */
  .table-actions button {
    min-height: 36px;
    min-width: 36px;
    padding: 0.375rem 0.625rem;
  }
}
/* Modal customizations */
._modalWide_16hnm_2 {
  max-width: 600px;
  width: 100%;
}

/* Form layout */
._formGrid_16hnm_8 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

._required_16hnm_15 {
  color: #D9534F;
}

/* Main container */
._container_16hnm_20 {
  min-height: 100vh;
  background-color: #0f0f0f;
  padding: 24px;
  color: #ffffff;
}

._content_16hnm_27 {
  max-width: 90rem;
  margin: 0 auto;
}

/* Header */
._header_16hnm_33 {
  margin-bottom: 32px;
}

._headerContent_16hnm_37 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

._title_16hnm_43 {
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  margin-bottom: 8px;
}

._subtitle_16hnm_51 {
  font-size: 16px;
  color: #9ca3af;
  margin: 0;
}

/* Loading state */
._loadingContainer_16hnm_58 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50vh;
}

._spinner_16hnm_65 {
  width: 32px;
  height: 32px;
  border: 3px solid #333333;
  border-top-color: #8b5cf6;
  border-radius: 50%;
  animation: _spin_16hnm_65 1s linear infinite;
  margin-right: 12px;
}

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

._loadingText_16hnm_80 {
  font-size: 16px;
  color: #9ca3af;
}

/* Empty state */
._emptyState_16hnm_86 {
  background-color: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 8px;
  padding: 48px 24px;
  text-align: center;
}

._emptyIcon_16hnm_94 {
  width: 48px;
  height: 48px;
  background-color: #333333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: #6b7280;
}

._emptyTitle_16hnm_106 {
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  margin: 0 0 8px 0;
}

._emptyMessage_16hnm_113 {
  font-size: 16px;
  color: #9ca3af;
  margin: 0 0 24px 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Table */
._tableWrapper_16hnm_123 {
  background-color: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 8px;
  overflow: hidden;
}

._tableScroll_16hnm_130 {
  overflow-x: auto;
}

._table_16hnm_123 {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

._tableHeaderRow_16hnm_140 {
  background-color: #262626;
  border-bottom: 1px solid #333333;
}

._tableHeader_16hnm_140 {
  padding: 12px 16px;
  text-align: left;
  font-weight: 500;
  color: #ffffff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._tableHeaderRight_16hnm_155 {
  text-align: right;
}

._tableRow_16hnm_159 {
  border-bottom: 1px solid #333333;
  transition: background-color 0.15s ease;
}

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

._tableRow_16hnm_159:hover {
  background-color: rgba(139, 92, 246, 0.05);
}

._tableCell_16hnm_172 {
  padding: 16px;
  color: #ffffff;
  font-weight: 500;
}

._tableCellSecondary_16hnm_178 {
  padding: 16px;
  color: #d1d5db;
}

._tableCellTruncate_16hnm_183 {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._tableCellActions_16hnm_190 {
  padding: 16px;
  text-align: right;
}

._actionButtons_16hnm_195 {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Action tags */
._blueTag_16hnm_202 {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s;
}

._blueTag_16hnm_202:hover {
  background-color: #3a7bc8;
  transform: translateY(-1px);
}

/* Responsive design */
@media (max-width: 640px) {
  ._formGrid_16hnm_8 {
    grid-template-columns: 1fr;
  }

  ._headerContent_16hnm_37 {
    flex-direction: column;
    gap: 16px;
  }
}

/* Landscape orientation support */
@media (max-height: 600px) and (orientation: landscape) {
  ._header_16hnm_33 {
    margin-bottom: 16px;
  }

  ._title_16hnm_43 {
    font-size: 20px;
    margin-bottom: 4px;
  }

  ._subtitle_16hnm_51 {
    font-size: 13px;
  }

  ._tableHeader_16hnm_140 {
    padding: 8px 12px;
  }

  ._tableCell_16hnm_172,
  ._tableCellSecondary_16hnm_178,
  ._tableCellActions_16hnm_190 {
    padding: 10px 12px;
  }

  ._tableRow_16hnm_159 {
    font-size: 13px;
  }

  ._emptyState_16hnm_86 {
    padding: 24px 16px;
  }

  ._emptyTitle_16hnm_106 {
    font-size: 16px;
  }

  ._emptyMessage_16hnm_113 {
    font-size: 14px;
  }
}
/* OrganizationSelector.module.css */

._selectContainer_ibzia_3 {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 1023px) {
  ._selectContainer_ibzia_3 {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

._selectTrigger_ibzia_19 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.625rem, 2vw, 0.875rem);
  min-height: 2.75rem;
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 0.375rem;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

._selectTrigger_ibzia_19:hover {
  border-color: #8b5cf6;
  background-color: #0f0f0f;
}

._selectTriggerReadonly_ibzia_41 {
  cursor: default;
  opacity: 0.7;
  background-color: #0f0f0f;
}

._selectTriggerReadonly_ibzia_41:hover {
  border-color: #333;
  background-color: #0f0f0f;
}

._selectValue_ibzia_52 {
  flex: 1;
  font-size: clamp(0.813rem, 2vw, 0.875rem);
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 0.5rem;
}

._chevronClosed_ibzia_62 {
  transition: transform 0.2s;
  color: #9ca3af;
  flex-shrink: 0;
}

._chevronOpen_ibzia_68 {
  transition: transform 0.2s;
  transform: rotate(180deg);
  color: #8b5cf6;
  flex-shrink: 0;
}

._dropdown_ibzia_75 {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  max-height: clamp(18.75rem, 50vh, 25rem);
  display: flex;
  flex-direction: column;
}

._searchContainer_ibzia_90 {
  position: relative;
  padding: clamp(0.625rem, 2vw, 0.75rem);
  border-bottom: 1px solid #333;
}

._searchIcon_ibzia_96 {
  position: absolute;
  left: clamp(1rem, 3vw, 1.25rem);
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}

._searchInput_ibzia_105 {
  width: 100%;
  padding: clamp(0.5rem, 1.5vw, 0.625rem) clamp(0.625rem, 2vw, 0.75rem) clamp(0.5rem, 1.5vw, 0.625rem) clamp(2rem, 5vw, 2.25rem);
  min-height: 2.5rem;
  background-color: #0f0f0f;
  border: 1px solid #333;
  border-radius: 0.25rem;
  color: #ffffff;
  font-size: clamp(0.813rem, 2vw, 0.875rem);
  outline: none;
  transition: border-color 0.2s;
}

._searchInput_ibzia_105:focus {
  border-color: #8b5cf6;
}

._searchInput_ibzia_105::placeholder {
  color: #6b7280;
}

._optionsList_ibzia_126 {
  overflow-y: auto;
  max-height: clamp(15rem, 40vh, 20rem);
}

._option_ibzia_126 {
  padding: clamp(0.625rem, 2vw, 0.875rem);
  min-height: 2.75rem;
  cursor: pointer;
  transition: background-color 0.15s;
  border-bottom: 1px solid #2a2a2a;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

._option_ibzia_126:hover {
  background-color: #2a2a2a;
}

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

._optionSelected_ibzia_151 {
  background-color: #8b5cf6;
  color: #ffffff;
}

._optionSelected_ibzia_151:hover {
  background-color: #7c3aed;
}

._optionName_ibzia_160 {
  width: 100%;
  font-size: clamp(0.813rem, 2vw, 0.875rem);
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._optionDescription_ibzia_171 {
  width: 100%;
  font-size: clamp(0.688rem, 1.5vw, 0.75rem);
  color: #9ca3af;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

._optionSelected_ibzia_151 ._optionDescription_ibzia_171 {
  color: rgba(255, 255, 255, 0.8);
}

._noResults_ibzia_187 {
  padding: clamp(1rem, 3vw, 1.5rem);
  text-align: center;
  color: #6b7280;
  font-size: clamp(0.813rem, 2vw, 0.875rem);
}

._selectLoading_ibzia_194,
._selectError_ibzia_195,
._selectEmpty_ibzia_196 {
  padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.625rem, 2vw, 0.875rem);
  min-height: 2.75rem;
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 0.375rem;
  color: #9ca3af;
  font-size: clamp(0.813rem, 2vw, 0.875rem);
  display: flex;
  align-items: center;
}

._selectError_ibzia_195 {
  border-color: #dc2626;
  color: #dc2626;
}
/* Create Feature Modal Styles */

/* Required field indicator */
._required_4xe3t_4 {
  color: #D9534F;
}

._tagInputContainer_4xe3t_8 {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}


._addTagButton_4xe3t_15 {
  padding: 12px 16px;
  background-color: #8b5cf6;
  border: none;
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  cursor: pointer;
}

._addTagButton_4xe3t_15:hover {
  background-color: #7c3aed;
}

._tagsList_4xe3t_31 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

._tag_4xe3t_8 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background-color: #374151;
  border-radius: 4px;
  font-size: 12px;
  color: #d1d5db;
}

._tagRemoveButton_4xe3t_48 {
  background-color: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

/* DocumentViewer Component Styles */

/* Modal Overlay */
._overlay_1t1n5_4 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  isolation: isolate;
}

/* Modal Content */
._modalContent_1t1n5_20 {
  background-color: white;
  color: #111827;
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100001;
  max-width: 95vw;
  max-height: 95vh;
  pointer-events: auto;
  position: relative;
  will-change: auto;
}

/* Override global h2 styles within modal - higher specificity */
._modalContent_1t1n5_20 h2 {
  color: #111827;
}

._modalContent_1t1n5_20._normal_1t1n5_41 {
  width: 1200px;
  height: 720px;
}

._modalContent_1t1n5_20._maximized_1t1n5_46 {
  width: 98vw;
  height: 98vh;
}

/* Header */
._header_1t1n5_52 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid #e5e7eb;
}

._headerInfo_1t1n5_60 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._headerTop_1t1n5_66 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._icon_1t1n5_72 {
  width: 20px;
  height: 20px;
  color: #2563eb;
}

._docType_1t1n5_78 {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._title_1t1n5_86 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

._metadata_1t1n5_92 {
  font-size: 14px;
  color: #6b7280;
}

._headerActions_1t1n5_97 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._headerActions_1t1n5_97 button {
  color: #374151;
}

._headerActions_1t1n5_97 button:hover {
  color: #111827;
  background-color: #e5e7eb;
  border-radius: 4px;
}

._headerActions_1t1n5_97 ._icon_1t1n5_72 {
  color: #374151;
}

._headerActions_1t1n5_97 button:hover ._icon_1t1n5_72 {
  color: #111827;
}

/* Content Area */
._contentArea_1t1n5_122 {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

/* View Content (Read-only preview) */
._viewContent_1t1n5_132 {
  flex: 1;
  padding: 24px;
  overflow: auto;
  min-height: 0;
  background-color: #ffffff;
  color: #1f2937;
}

/* Edit Content (Textarea editor) */
._editContent_1t1n5_142 {
  flex: 1;
  padding: 16px;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Loading/Error States */
._centerContent_1t1n5_152 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #ffffff;
}

._loadingText_1t1n5_160 {
  color: #6b7280;
  font-size: 16px;
}

._errorText_1t1n5_165 {
  color: #D9534F;
  font-size: 16px;
}

/* Textarea */
._textarea_1t1n5_171 {
  width: 100%;
  height: 100%;
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  resize: none;
  font-family: monospace;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

._textarea_1t1n5_171:focus {
  border-color: #4A90E2;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

/* Preview Markdown Styles (used in view mode) */
._previewMarkdown_1t1n5_191 {
  max-width: none;
  color: #1f2937;
  line-height: 1.6;
}

/* Preview Markdown Styles */
._previewMarkdown_1t1n5_191 h1 {
  font-size: 1.4em;
  font-weight: bold;
  margin: 20px 0 10px 0;
  color: #1f2937;
}

._previewMarkdown_1t1n5_191 h2 {
  font-size: 1.2em;
  font-weight: bold;
  margin: 15px 0 10px 0;
  color: #1f2937;
}

._previewMarkdown_1t1n5_191 strong {
  color: #1f2937;
}

._previewMarkdown_1t1n5_191 em {
  color: #1f2937;
}

._previewMarkdown_1t1n5_191 pre {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
  margin: 10px 0;
  color: #1f2937;
}

/* Footer */
._footer_1t1n5_229 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-top: 1px solid #e5e7eb;
  background-color: #f9fafb;
}

._footerInfo_1t1n5_238 {
  font-size: 14px;
  color: #6b7280;
}

._footerActions_1t1n5_243 {
  display: flex;
  gap: 12px;
}

/* Override button styles for light background */
._footerActions_1t1n5_243 .button-outline {
  border-color: #374151;
  color: #374151;
}

._footerActions_1t1n5_243 .button-outline:hover {
  background-color: #f3f4f6;
  border-color: #1f2937;
  color: #111827;
}

._closeButton_1t1n5_260 {
  padding: 0.5rem 1rem;
  background-color: transparent;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

._closeButton_1t1n5_260:hover {
  background-color: #f3f4f6;
  border-color: #9ca3af;
}

/* Notification Styles */
._successNotification_1t1n5_278 {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #10b981;
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  z-index: 10001;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: _slideIn_1t1n5_1 0.3s ease-out;
}

._errorNotification_1t1n5_292 {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #ef4444;
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  z-index: 10001;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: _slideIn_1t1n5_1 0.3s ease-out;
}

@keyframes _slideIn_1t1n5_1 {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

._saveButtonContent_1t1n5_317 {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Spinner styles using shared animation */
._spinner_1t1n5_324 {
  width: 16px;
  height: 16px;
  border: 2px solid white;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: _spin_1t1n5_324 1s linear infinite;
}

/* ========================================
   LANDSCAPE ORIENTATION OPTIMIZATIONS
   ======================================== */

/* Landscape mode for small screens (phones in landscape) */
@media (max-height: 600px) and (orientation: landscape) {
  /* Modal content - maximize horizontal space */
  ._modalContent_1t1n5_20._normal_1t1n5_41 {
    width: 95vw;
    height: 95vh;
  }

  /* Compact header */
  ._header_1t1n5_52 {
    padding: 12px 16px;
  }

  ._headerTop_1t1n5_66 {
    gap: 6px;
  }

  ._icon_1t1n5_72 {
    width: 16px;
    height: 16px;
  }

  ._docType_1t1n5_78 {
    font-size: 12px;
  }

  ._title_1t1n5_86 {
    font-size: 16px;
  }

  ._metadata_1t1n5_92 {
    font-size: 12px;
  }

  /* Compact content padding */
  ._viewContent_1t1n5_132,
  ._editContent_1t1n5_142 {
    padding: 12px;
  }

  /* Smaller textarea font */
  ._textarea_1t1n5_171 {
    font-size: 13px;
    padding: 10px;
  }

  /* Preview markdown optimization */
  ._previewMarkdown_1t1n5_191 {
    font-size: 13px;
    line-height: 1.5;
  }

  ._previewMarkdown_1t1n5_191 h1 {
    font-size: 1.2em;
    margin: 12px 0 8px 0;
  }

  ._previewMarkdown_1t1n5_191 h2 {
    font-size: 1.1em;
    margin: 10px 0 6px 0;
  }

  ._previewMarkdown_1t1n5_191 pre {
    padding: 8px;
    margin: 8px 0;
    font-size: 12px;
  }

  /* Compact footer */
  ._footer_1t1n5_229 {
    padding: 10px 12px;
  }

  ._footerInfo_1t1n5_238 {
    font-size: 12px;
  }

  ._footerActions_1t1n5_243 {
    gap: 8px;
  }

  ._closeButton_1t1n5_260 {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
  }
}
/* Feature360View component styles */

/* Purple scrollbars - stable size to prevent layout shifts */
._modalContent_kh485_4::-webkit-scrollbar,
._previewContent_kh485_5::-webkit-scrollbar,
._textEditor_kh485_6::-webkit-scrollbar,
._textarea_kh485_7::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

._modalContent_kh485_4::-webkit-scrollbar-track,
._previewContent_kh485_5::-webkit-scrollbar-track,
._textEditor_kh485_6::-webkit-scrollbar-track,
._textarea_kh485_7::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 6px;
}

._modalContent_kh485_4::-webkit-scrollbar-thumb,
._previewContent_kh485_5::-webkit-scrollbar-thumb,
._textEditor_kh485_6::-webkit-scrollbar-thumb,
._textarea_kh485_7::-webkit-scrollbar-thumb {
  background: #8b5cf6;
  border-radius: 6px;
}

._modalContent_kh485_4::-webkit-scrollbar-thumb:hover,
._previewContent_kh485_5::-webkit-scrollbar-thumb:hover,
._textEditor_kh485_6::-webkit-scrollbar-thumb:hover,
._textarea_kh485_7::-webkit-scrollbar-thumb:hover {
  background: #7c3aed;
}

/* Firefox scrollbar */
._modalContent_kh485_4,
._previewContent_kh485_5,
._textEditor_kh485_6,
._textarea_kh485_7 {
  scrollbar-width: thin;
  scrollbar-color: #8b5cf6 #f3f4f6;
}

/* Modal overlay */
._modalOverlay_kh485_45 {
  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: 100000;
  transition: none;
  pointer-events: auto;
  isolation: isolate;
}

._modalOverlay_kh485_45._maximized_kh485_61 {
  padding: 1vh 1vw;
}

/* Modal container */
._modalContainer_kh485_66 {
  background-color: white;
  color: #111827;
  border-radius: 8px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  width: 1280px;
  height: 90vh;
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  flex-direction: column;
  transition: none;
  position: relative;
  pointer-events: auto;
  will-change: auto;
}

/* Override global heading and text styles within modal */
._modalContainer_kh485_66 h1,
._modalContainer_kh485_66 h2,
._modalContainer_kh485_66 h3 {
  color: #111827;
}

/* Target only the header title span specifically */
._headerTitle_kh485_91 span {
  color: #111827;
}

/* Ensure frame titles are dark */
._frameHeader_kh485_96 h3,
._frameTitle_kh485_97 {
  color: #111827;
}

._modalContainer_kh485_66._maximized_kh485_61 {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
}

/* Modal header */
._modalHeader_kh485_110 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid #e5e7eb;
  background-color: #ffffff;
}

._headerLeft_kh485_119 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Use element+class selector for higher specificity to override global h2 styles */
h2._headerTitle_kh485_91 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 8px;
}

._badge360_kh485_136 {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._badge360Text_kh485_147 {
  color: #ffffff;
  font-weight: 700;
  font-size: 12px;
}

._headerMetadata_kh485_153 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._metadataText_kh485_159 {
  font-size: 14px;
  color: #6b7280;
}

._headerActions_kh485_164 {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Override global iconButton color for visibility on white background */
._headerActions_kh485_164 .iconButton {
  color: #6b7280;
}

._headerActions_kh485_164 .iconButton:hover {
  color: #1f2937;
  background-color: #e5e7eb;
}

._closeIcon_kh485_180 {
  width: 20px;
  height: 20px;
}

._featureTitle_kh485_185 {
  color: #111827;
}

._featureBadge_kh485_189 {
  background-color: #f3f4f6;
  color: #374151;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
}

._documentsBadge_kh485_198 {
  background-color: #dbeafe;
  color: #1e40af;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
}

/* Content area */
._modalContent_kh485_4 {
  flex: 1;
  overflow-y: scroll;
  overflow-x: hidden;
}

/* Document frame */
._documentFrame_kh485_215 {
  border-bottom: 1px solid #e5e7eb;
}

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

._frameHeader_kh485_96 {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 16px;
  background-color: #f9fafb;
}

._frameHeaderRow_kh485_232 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._frameHeaderActions_kh485_238 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._expandButton_kh485_244 {
  padding: 8px 12px;
  background-color: transparent;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
}

._expandButton_kh485_244:hover {
  background-color: #f3f4f6;
  border-color: #9ca3af;
}

._expandButton_kh485_244._expanded_kh485_263 {
  background-color: transparent;
  color: inherit;
  border-color: #9ca3af;
}

._expandButton_kh485_244._expanded_kh485_263:hover {
  background-color: #f3f4f6;
  border-color: #9ca3af;
}

._frameHeaderLeft_kh485_274 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._frameIcon_kh485_280 {
  width: 20px;
  height: 20px;
  color: #8b5cf6;
  flex-shrink: 0;
}

._frameHeaderLeft_kh485_274 ._frameTitle_kh485_97,
h3._frameTitle_kh485_97 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: #111827;
  white-space: nowrap;
}

._frameMetadataGroup_kh485_296 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

._frameMetadata_kh485_296 {
  color: #6b7280;
  font-size: 14px;
}

._unsavedBadge_kh485_308 {
  font-size: 12px;
  background-color: #fed7aa;
  color: #c2410c;
  padding: 4px 8px;
  border-radius: 9999px;
  font-weight: 500;
}

._frameContainer_kh485_317 {
  height: 384px;
}

/* When modal is maximized and frame is expanded, fill all available space */
._modalContainer_kh485_66._maximized_kh485_61 ._documentFrame_kh485_215 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

._modalContainer_kh485_66._maximized_kh485_61 ._frameContainer_kh485_317 {
  flex: 1;
  height: auto;
  min-height: 0;
}

/* Loading states */
._loadingContainer_kh485_336 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #ffffff;
}

._loadingContent_kh485_344 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
}

._loadingSpinner_kh485_351 {
  width: 16px;
  height: 16px;
  border: 2px solid #e5e7eb;
  border-top: 2px solid #8b5cf6;
  border-radius: 50%;
  animation: _spin_kh485_1 1s linear infinite;
}

/* Error states */
._errorContainer_kh485_361 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #ffffff;
}

._errorContent_kh485_369 {
  color: #D9534F;
  background-color: #fef2f2;
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid #fecaca;
}

/* Pane layout */
._paneContainer_kh485_378 {
  display: flex;
  height: 100%;
  overflow: hidden;
  min-height: 0;
  position: relative;
}

._editorPane_kh485_386 {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

._previewPane_kh485_392 {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Pane headers */
._paneHeader_kh485_399 {
  padding: 12px 16px;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._paneTitle_kh485_408 {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

/* Save button */
._saveButton_kh485_415 {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  color: white;
  display: flex;
  align-items: center;
  gap: 6px;
}

._saveButton_kh485_415:enabled {
  background-color: #4A90E2;
  cursor: pointer;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

._saveButton_kh485_415:enabled:hover {
  background-color: #2563eb;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

._saveButton_kh485_415:disabled {
  background-color: #d1d5db;
  cursor: not-allowed;
  opacity: 0.6;
}

._saveButtonSpinner_kh485_444 {
  width: 12px;
  height: 12px;
  border: 1px solid white;
  border-top: 1px solid transparent;
  border-radius: 50%;
  animation: _spin_kh485_1 1s linear infinite;
}

/* Text editor */
._textEditor_kh485_6 {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}

._textarea_kh485_7 {
  width: 100%;
  height: 100%;
  padding: 16px;
  border: none;
  resize: none;
  font-family: monospace;
  font-size: 14px;
  outline: none;
  background-color: white;
  box-sizing: border-box;
  line-height: 1.6;
  overflow-y: auto;
  overflow-x: auto;
}

._textarea_kh485_7:focus {
  outline: none;
}

/* Resizable divider */
._resizer_kh485_482 {
  width: 6px;
  background-color: #e5e7eb;
  cursor: col-resize;
  position: relative;
  flex-shrink: 0;
  border-left: 1px solid #d1d5db;
  border-right: 1px solid #d1d5db;
}

._resizer_kh485_482:hover {
  background-color: #4A90E2;
}

._resizerIndicator_kh485_496 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 20px;
  background-color: white;
  border-radius: 1px;
}

/* Preview content */
._previewContent_kh485_5 {
  flex: 1;
  padding: 16px;
  overflow: auto;
  min-height: 0;
  height: 100%;
  background-color: #ffffff;
  color: #1f2937;
}

._previewText_kh485_518 {
  max-width: none;
  line-height: 1.6;
  color: #1f2937;
}

/* Markdown formatting */
._previewText_kh485_518 h1 {
  font-size: 1.4em;
  font-weight: bold;
  margin: 20px 0 10px 0;
  color: #111827;
}

._previewText_kh485_518 h2 {
  font-size: 1.2em;
  font-weight: bold;
  margin: 15px 0 10px 0;
  color: #1f2937;
}

._previewText_kh485_518 h3 {
  font-size: 1.1em;
  font-weight: bold;
  margin: 12px 0 8px 0;
  color: #374151;
}

._previewText_kh485_518 strong {
  color: #1f2937;
}

._previewText_kh485_518 em {
  color: #1f2937;
}

._previewText_kh485_518 pre {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
  margin: 10px 0;
  color: #1f2937;
}

._previewText_kh485_518 ._mermaidDiagram_kh485_562 {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
  margin: 10px 0;
  color: #1f2937;
}

._previewText_kh485_518 ._mermaidDiagram_kh485_562 strong {
  color: #1f2937;
}

/* Section divider */
._sectionDivider_kh485_575 {
  height: 24px;
  background-color: #f9fafb;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
}

._sectionDividerLine_kh485_585 {
  width: 100px;
  height: 1px;
  background-color: #d1d5db;
}

/* Initial loading state */
._initialLoadingContainer_kh485_592 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

._initialLoadingContent_kh485_599 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
}

._initialLoadingSpinner_kh485_606 {
  width: 24px;
  height: 24px;
  border: 2px solid #d1d5db;
  border-top-color: #4A90E2;
  border-radius: 50%;
  animation: _spin_kh485_1 1s linear infinite;
}

/* Empty state */
._emptyStateContainer_kh485_616 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

._emptyStateContent_kh485_623 {
  text-align: center;
}

._emptyStateIcon_kh485_627 {
  width: 64px;
  height: 64px;
  background-color: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

._emptyStateIconSvg_kh485_638 {
  width: 32px;
  height: 32px;
  color: #9ca3af;
}

._emptyStateTitle_kh485_644 {
  font-size: 18px;
  font-weight: 500;
  color: #111827;
  margin-bottom: 8px;
}

._emptyStateDescription_kh485_651 {
  font-size: 14px;
  color: #6b7280;
}

/* Footer */
._modalFooter_kh485_657 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  background-color: #f9fafb;
}

._footerText_kh485_666 {
  font-size: 14px;
  color: #6b7280;
}

._footerActions_kh485_671 {
  display: flex;
  gap: 12px;
}

._closeButton_kh485_676 {
  padding: 0.5rem 1rem;
  background-color: transparent;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}

._closeButton_kh485_676:hover {
  background-color: #f3f4f6;
  border-color: #9ca3af;
}

/* Mobile responsive design */
@media (max-width: 1024px) {
  ._modalOverlay_kh485_45 {
    padding: 1%;
  }

  ._modalContainer_kh485_66 {
    max-width: 95%;
  }

  ._frameHeaderRow_kh485_232 {
    flex-wrap: wrap;
    gap: 12px;
  }

  ._frameHeaderLeft_kh485_274 {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }

  ._frameHeaderActions_kh485_238 {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  ._modalOverlay_kh485_45 {
    padding: 0;
    align-items: stretch;
  }

  ._modalOverlay_kh485_45._maximized_kh485_61 {
    padding: 0;
  }

  ._modalContainer_kh485_66 {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
  }

  ._modalHeader_kh485_110 {
    padding: 16px;
    flex-wrap: wrap;
  }

  ._headerTitle_kh485_91 {
    font-size: 16px;
  }

  ._headerMetadata_kh485_153 {
    flex-wrap: wrap;
    font-size: 12px;
  }

  ._frameHeaderRow_kh485_232 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  ._frameHeaderLeft_kh485_274 {
    width: 100%;
    flex-wrap: wrap;
  }

  ._frameHeaderActions_kh485_238 {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
  }

  ._frameContainer_kh485_317 {
    height: 300px;
  }

  ._paneContainer_kh485_378 {
    flex-direction: column;
  }

  ._editorPane_kh485_386 {
    width: 100%;
    height: 50%;
    border-bottom: 1px solid #e5e7eb;
  }

  ._previewPane_kh485_392 {
    width: 100%;
    height: 50%;
  }

  ._resizer_kh485_482 {
    width: 100%;
    height: 6px;
    cursor: row-resize;
    border-left: none;
    border-right: none;
    border-top: 1px solid #d1d5db;
    border-bottom: 1px solid #d1d5db;
  }

  ._resizerIndicator_kh485_496 {
    width: 20px;
    height: 2px;
  }

  ._modalFooter_kh485_657 {
    padding: 12px 16px;
    flex-wrap: wrap;
    gap: 12px;
  }

  ._footerText_kh485_666 {
    font-size: 12px;
    width: 100%;
  }

  ._footerActions_kh485_671 {
    width: 100%;
    justify-content: stretch;
  }

  ._closeButton_kh485_676 {
    flex: 1;
  }
}

@media (max-width: 640px) {
  ._modalHeader_kh485_110 {
    padding: 12px;
  }

  ._headerTitle_kh485_91 {
    font-size: 14px;
  }

  ._badge360_kh485_136 {
    width: 20px;
    height: 20px;
  }

  ._badge360Text_kh485_147 {
    font-size: 10px;
  }

  ._metadataText_kh485_159 {
    font-size: 11px;
  }

  ._frameContainer_kh485_317 {
    height: 250px;
  }

  ._textarea_kh485_7 {
    font-size: 12px;
    padding: 12px;
  }

  ._previewText_kh485_518 {
    font-size: 13px;
  }

  ._frameHeaderLeft_kh485_274 ._frameTitle_kh485_97,
  h3._frameTitle_kh485_97 {
    font-size: 14px;
    white-space: normal;
  }

  ._frameMetadata_kh485_296 {
    font-size: 12px;
  }

  ._unsavedBadge_kh485_308 {
    font-size: 10px;
    padding: 2px 6px;
  }

  ._expandButton_kh485_244 {
    padding: 6px 10px;
    font-size: 12px;
  }
}
/* ========================================
   LANDSCAPE ORIENTATION OPTIMIZATIONS
   ======================================== */

/* Landscape mode for small screens (phones in landscape) */
@media (max-height: 600px) and (orientation: landscape) {
  /* Modal container - maximize horizontal space */
  ._modalContainer_kh485_66 {
    width: 98vw;
    height: 98vh;
    max-width: 98vw;
    max-height: 98vh;
  }

  /* Compact header */
  ._modalHeader_kh485_110 {
    padding: 12px 16px;
  }

  h2._headerTitle_kh485_91 {
    font-size: 16px;
  }

  ._badge360_kh485_136 {
    width: 20px;
    height: 20px;
  }

  ._badge360Text_kh485_147 {
    font-size: 10px;
  }

  ._headerMetadata_kh485_153 {
    gap: 8px;
  }

  ._metadataText_kh485_159 {
    font-size: 12px;
  }

  /* Compact frame header */
  ._frameHeader_kh485_96 {
    padding: 8px 12px;
  }

  ._frameHeaderLeft_kh485_274 ._frameTitle_kh485_97,
  h3._frameTitle_kh485_97 {
    font-size: 15px;
  }

  ._frameIcon_kh485_280 {
    width: 16px;
    height: 16px;
  }

  ._frameMetadataGroup_kh485_296 {
    font-size: 12px;
  }

  ._frameMetadata_kh485_296 {
    font-size: 12px;
  }

  ._unsavedBadge_kh485_308 {
    font-size: 11px;
    padding: 3px 6px;
  }

  /* Compact expand button */
  ._expandButton_kh485_244 {
    padding: 6px 10px;
    font-size: 13px;
  }

  /* Reduce frame container height */
  ._frameContainer_kh485_317 {
    height: 320px;
  }

  /* When maximized, use more space */
  ._modalContainer_kh485_66._maximized_kh485_61 ._frameContainer_kh485_317 {
    height: auto;
  }

  /* Compact pane headers */
  ._paneHeader_kh485_399 {
    padding: 8px 12px;
  }

  ._paneTitle_kh485_408 {
    font-size: 13px;
  }

  /* Smaller textarea font */
  ._textarea_kh485_7 {
    font-size: 13px;
    padding: 12px;
    line-height: 1.5;
  }

  /* Preview content optimization */
  ._previewContent_kh485_5 {
    padding: 12px;
  }

  ._previewText_kh485_518 {
    font-size: 13px;
    line-height: 1.5;
  }

  ._previewText_kh485_518 h1 {
    font-size: 1.2em;
    margin: 12px 0 8px 0;
  }

  ._previewText_kh485_518 h2 {
    font-size: 1.1em;
    margin: 10px 0 6px 0;
  }

  ._previewText_kh485_518 h3 {
    font-size: 1.05em;
    margin: 8px 0 6px 0;
  }

  ._previewText_kh485_518 pre {
    padding: 8px;
    margin: 8px 0;
    font-size: 12px;
  }

  /* Compact section divider */
  ._sectionDivider_kh485_575 {
    height: 16px;
  }

  ._sectionDividerLine_kh485_585 {
    width: 80px;
  }

  /* Compact footer */
  ._modalFooter_kh485_657 {
    padding: 10px 16px;
  }

  ._footerText_kh485_666 {
    font-size: 12px;
  }

  ._footerActions_kh485_671 {
    gap: 8px;
  }

  ._closeButton_kh485_676 {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
  }

  /* Loading and empty states */
  ._initialLoadingSpinner_kh485_606,
  ._loadingSpinner_kh485_351 {
    width: 18px;
    height: 18px;
  }

  ._emptyStateIcon_kh485_627 {
    width: 48px;
    height: 48px;
  }

  ._emptyStateIconSvg_kh485_638 {
    width: 24px;
    height: 24px;
  }

  ._emptyStateTitle_kh485_644 {
    font-size: 16px;
  }

  ._emptyStateDescription_kh485_651 {
    font-size: 13px;
  }

  /* Save button */
  ._saveButton_kh485_415 {
    padding: 6px 12px;
    font-size: 13px;
  }
}
/* FeaturesTable component styles */

/* Badge styles for effort levels */
._effortBadgeLarge_2mvbk_4 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

._effortBadgeMedium_2mvbk_15 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

._effortBadgeSmall_2mvbk_26 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

._effortBadgeDefault_2mvbk_37 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

/* Badge styles for categories */
._categoryPerformance_2mvbk_49 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

._categoryUserExperience_2mvbk_60 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

._categoryAnalytics_2mvbk_71 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

._categorySecurity_2mvbk_82 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

._categoryIntegration_2mvbk_93 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

._categoryAutomation_2mvbk_104 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

._categoryCollaboration_2mvbk_115 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

._categoryPlatform_2mvbk_126 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

._categoryDataManagement_2mvbk_137 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

._categoryCustomerSuccess_2mvbk_148 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

._categoryDefault_2mvbk_159 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

/* Badge styles for status */
._statusDraft_2mvbk_171 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

._statusMoreInfo_2mvbk_182 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

._statusWaitingReview_2mvbk_193 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

._statusStarted_2mvbk_204 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

._statusRejected_2mvbk_215 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

._statusDone_2mvbk_226 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

._statusDefault_2mvbk_237 {
  background-color: #4A90E2;
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

/* Higher specificity to override .dashboard-page .text-sm for status badges */
._featureTagsRow_2mvbk_249 ._statusDraft_2mvbk_171,
._featureTagsRow_2mvbk_249 ._statusDraft_2mvbk_171 *,
._featureTagsRow_2mvbk_249 ._statusMoreInfo_2mvbk_182,
._featureTagsRow_2mvbk_249 ._statusMoreInfo_2mvbk_182 *,
._featureTagsRow_2mvbk_249 ._statusWaitingReview_2mvbk_193,
._featureTagsRow_2mvbk_249 ._statusWaitingReview_2mvbk_193 *,
._featureTagsRow_2mvbk_249 ._statusStarted_2mvbk_204,
._featureTagsRow_2mvbk_249 ._statusStarted_2mvbk_204 *,
._featureTagsRow_2mvbk_249 ._statusRejected_2mvbk_215,
._featureTagsRow_2mvbk_249 ._statusRejected_2mvbk_215 *,
._featureTagsRow_2mvbk_249 ._statusDone_2mvbk_226,
._featureTagsRow_2mvbk_249 ._statusDone_2mvbk_226 *,
._featureTagsRow_2mvbk_249 ._statusDefault_2mvbk_237,
._featureTagsRow_2mvbk_249 ._statusDefault_2mvbk_237 * {
  color: #ffffff;
}

/* Button styles */
._generateButton_2mvbk_267 {
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  border: none;
  background-color: #8b5cf6;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background-color 0.2s;
}

._generateButton_2mvbk_267:hover {
  background-color: #7c3aed;
}

._generateButton_2mvbk_267:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}

._viewButton_2mvbk_291 {
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  border: none;
  background-color: #8de97ec9;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background-color 0.2s;
}

._viewButton_2mvbk_291:hover {
  background-color: #8de97ec9;
}

/* Spinner animation */
@keyframes _spin_2mvbk_326 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Subtle pulse animation for next available document - dimmed purple background */
@keyframes _subtlePulse_2mvbk_1 {
  0%, 100% {
    background-color: #8b5cf6;
  }
  50% {
    background-color: #a78bfa;
  }
}

._spinner_2mvbk_326 {
  width: 12px;
  height: 12px;
  border: 1px solid white;
  border-top: 1px solid transparent;
  border-radius: 50%;
  animation: _spin_2mvbk_326 1s linear infinite;
}

/* Loading states */
._loadingRow_2mvbk_336 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

._loadingContent_2mvbk_343 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b7280;
}

._loadingSpinner_2mvbk_350 {
  width: 16px;
  height: 16px;
  border: 2px solid #d1d5db;
  border-top: 2px solid #8b5cf6;
  border-radius: 50%;
  animation: _spin_2mvbk_326 1s linear infinite;
}

/* Empty state */
._emptyRow_2mvbk_360 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

._emptyContent_2mvbk_367 {
  text-align: center;
  color: #6b7280;
}

/* Action buttons container */
._actionButtons_2mvbk_373 {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}

/* Priority indicators */
._priorityHigh_2mvbk_381 {
  color: #D9534F;
  font-weight: 600;
}

._priorityMedium_2mvbk_386 {
  color: #f59e0b;
  font-weight: 600;
}

._priorityLow_2mvbk_391 {
  color: #8de97ec9;
  font-weight: 600;
}

/* Feature title */
._featureTitle_2mvbk_397 {
  font-weight: 500;
  color: #111827;
}

._featureDescription_2mvbk_402 {
  color: #6b7280;
  font-size: 14px;
  margin-top: 4px;
}

/* Table container */
._tableContainer_2mvbk_409 {
  background-color: #1a1a1a;
  border-radius: 12px;
  border: 1px solid #333333;
}

._tableHeader_2mvbk_415 {
  padding: 12px 16px;
  background-color: #1a1a1a;
  border-bottom: 1px solid #333333;
}

._tableHeaderRow_2mvbk_421 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

._tableHeaderLeft_2mvbk_428 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._featureCount_2mvbk_434 {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}

._filterRow_2mvbk_440 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

/* Override width for filter inputs and selects to prevent full-width */
._filterRow_2mvbk_440 ._formInput_2mvbk_449,
._filterRow_2mvbk_440 .formInput {
  width: auto;
  min-width: 400px;
}

._filterRow_2mvbk_440 ._formSelect_2mvbk_455,
._filterRow_2mvbk_440 .formSelect {
  width: auto;
  min-width: 150px;
}

._filterInput_2mvbk_461 {
  padding: 6px 12px;
  background-color: #374151;
  border: 1px solid #4b5563;
  border-radius: 6px;
  color: #ffffff;
  font-size: 12px;
}

._filterSelect_2mvbk_470 {
  padding: 6px 12px;
  background-color: #374151;
  border: 1px solid #4b5563;
  border-radius: 6px;
  color: #ffffff;
  font-size: 12px;
}

._clearFiltersButton_2mvbk_479 {
  padding: 6px 12px;
  background-color: transparent;
  border: 1px solid #4b5563;
  border-radius: 6px;
  color: #D9534F;
  font-size: 12px;
  cursor: pointer;
}

._tableFooterRow_2mvbk_489 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._tableFooterLeft_2mvbk_495 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._noMatchesWarning_2mvbk_501 {
  font-size: 12px;
  color: #f59e0b;
}

._errorText_2mvbk_506 {
  font-size: 12px;
  color: #D9534F;
}

._tableContent_2mvbk_511 {
  flex: 1;
  overflow: auto;
  max-height: 700px;
}

/* Table styles */
._tableHeaderStyle_2mvbk_518 {
  border: none;
}

._tableRowStyle_2mvbk_522 {
  background-color: #1a1a1a;
  border: none;
}

._tableRowData_2mvbk_527 {
  background-color: #1a1a1a;
  border: none;
  border-bottom: 1px solid #333333;
}

/* Ensure table takes full width */
._tableContent_2mvbk_511._tableContent_2mvbk_511 table {
  width: 100%;
  table-layout: fixed;
}

._tableCellHeader_2mvbk_539 {
  width: 90px;
  background-color: #1a1a1a;
  font-weight: 500;
  color: #ffffff;
  font-size: 12px;
  text-align: left;
  border: none;
  padding: 8px;
}

._tableCellHeaderMain_2mvbk_550 {
  background-color: #1a1a1a;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  border: none;
  padding: 8px;
  width: 100%;
}

._headerLabels_2mvbk_560 {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #9ca3af;
  font-size: 11px;
  font-weight: 400;
}

._headerLabels_2mvbk_560 span {
  white-space: nowrap;
}

._tableCell_2mvbk_539 {
  border: none;
  padding: 12px 8px;
  width: 100%;
}

/* Feature cell content */
._featureCellContent_2mvbk_580 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._featureNameRow_2mvbk_586 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
}

._featureNameRow_2mvbk_586 span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

._featureNameRow_2mvbk_586 ._actionButtons_2mvbk_373 {
  flex-shrink: 0;
  flex-wrap: nowrap;
}

._featureDescRow_2mvbk_609 {
  font-size: 14px;
  color: #d1d5db;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

._featureTagsRow_2mvbk_249 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

._focusAreaBadge_2mvbk_626 {
  font-size: 12px;
  color: #ffffff;
  font-weight: 500;
  white-space: nowrap;
  background-color: #4A90E2;
  border: none;
  padding: 2px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
}

._statusSelect_2mvbk_639 {
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 400;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

._featureActionsRow_2mvbk_648 {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* 360 View button */
._view360Button_2mvbk_657 {
  background-color: transparent;
  border: 1px solid #4b5563;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  color: #d1d5db;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s;
  height: 28px;
  line-height: 1;
}

._view360Button_2mvbk_657:hover {
  background-color: #374151;
}

._view360ButtonDisabled_2mvbk_677 {
  background-color: transparent;
  border: 1px solid #4b5563;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  color: #6b7280;
  cursor: not-allowed;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  line-height: 1;
}

._documentCount_2mvbk_692 {
  font-size: 10px;
  color: #9ca3af;
  margin-left: 4px;
}

/* Mobile responsive design */
@media (max-width: 1024px) {
  /* Fix filter inputs to prevent overflow on screens < 1024px */
  ._filterInput_2mvbk_461,
  ._filterSelect_2mvbk_470 {
    width: 100%;
    min-width: 0;
  }

  ._featureNameRow_2mvbk_586 span {
    max-width: 250px;
  }

  ._featureDescRow_2mvbk_609 {
    max-width: 250px;
  }
}

@media (max-width: 768px) {
  ._tableHeaderRow_2mvbk_421 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  ._tableHeaderLeft_2mvbk_428 {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  ._filterRow_2mvbk_440 {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  ._filterInput_2mvbk_461,
  ._filterSelect_2mvbk_470 {
    width: 100%;
  }

  ._tableFooterRow_2mvbk_489 {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  ._tableFooterLeft_2mvbk_495 {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  ._featureNameRow_2mvbk_586 {
    font-size: 14px;
    flex-wrap: wrap;
  }

  ._featureNameRow_2mvbk_586 span {
    max-width: 200px;
  }

  ._featureDescRow_2mvbk_609 {
    max-width: 200px;
    font-size: 12px;
  }

  ._tableCellHeader_2mvbk_539 {
    font-size: 11px;
    padding: 6px;
  }

  ._tableCellHeaderMain_2mvbk_550 {
    font-size: 11px;
    padding: 6px;
  }

  ._headerLabels_2mvbk_560 {
    gap: 12px;
    font-size: 10px;
  }

  ._tableCell_2mvbk_539 {
    padding: 10px 6px;
  }

  ._actionButtons_2mvbk_373 {
    gap: 3px;
  }

  ._generateButton_2mvbk_267,
  ._viewButton_2mvbk_291,
  ._view360Button_2mvbk_657 {
    font-size: 11px;
    padding: 3px 6px;
  }
}

@media (max-width: 640px) {
  ._tableContainer_2mvbk_409 {
    border-radius: 8px;
  }

  ._tableHeader_2mvbk_415 {
    padding: 10px 12px;
  }

  ._featureCount_2mvbk_434 {
    font-size: 12px;
  }

  ._tableContent_2mvbk_511 {
    max-height: 500px;
  }

  ._featureNameRow_2mvbk_586 {
    font-size: 13px;
    flex-wrap: wrap;
  }

  ._featureNameRow_2mvbk_586 span {
    max-width: 150px;
    white-space: normal;
    word-wrap: break-word;
  }

  ._featureDescRow_2mvbk_609 {
    max-width: 150px;
    font-size: 11px;
    white-space: normal;
    word-wrap: break-word;
  }

  ._featureTagsRow_2mvbk_249 {
    gap: 4px;
  }

  ._effortBadgeLarge_2mvbk_4,
  ._effortBadgeMedium_2mvbk_15,
  ._effortBadgeSmall_2mvbk_26,
  ._effortBadgeDefault_2mvbk_37,
  ._statusDraft_2mvbk_171,
  ._statusMoreInfo_2mvbk_182,
  ._statusWaitingReview_2mvbk_193,
  ._statusStarted_2mvbk_204,
  ._statusRejected_2mvbk_215,
  ._statusDone_2mvbk_226,
  ._statusDefault_2mvbk_237 {
    font-size: 10px;
    padding: 1px 6px;
  }

  ._categoryPerformance_2mvbk_49,
  ._categoryUserExperience_2mvbk_60,
  ._categoryAnalytics_2mvbk_71,
  ._categorySecurity_2mvbk_82,
  ._categoryIntegration_2mvbk_93,
  ._categoryAutomation_2mvbk_104,
  ._categoryCollaboration_2mvbk_115,
  ._categoryPlatform_2mvbk_126,
  ._categoryDataManagement_2mvbk_137,
  ._categoryCustomerSuccess_2mvbk_148,
  ._categoryDefault_2mvbk_159 {
    font-size: 10px;
    padding: 1px 6px;
  }

  ._focusAreaBadge_2mvbk_626 {
    font-size: 9px;
    padding: 1px 4px;
  }

  ._tableCellHeader_2mvbk_539 {
    width: 70px;
    font-size: 10px;
    padding: 4px;
  }

  ._tableCellHeaderMain_2mvbk_550 {
    font-size: 10px;
    padding: 4px;
  }

  ._headerLabels_2mvbk_560 {
    gap: 8px;
    font-size: 9px;
  }

  ._tableCell_2mvbk_539 {
    padding: 8px 4px;
  }

  ._generateButton_2mvbk_267,
  ._viewButton_2mvbk_291,
  ._view360Button_2mvbk_657 {
    font-size: 10px;
    padding: 2px 5px;
  }

  ._documentCount_2mvbk_692 {
    font-size: 9px;
  }

  ._filterInput_2mvbk_461,
  ._filterSelect_2mvbk_470 {
    font-size: 11px;
    padding: 5px 10px;
  }

  ._createButton_2mvbk_908,
  ._clearFiltersButton_2mvbk_479 {
    font-size: 11px;
    padding: 5px 10px;
  }
}

/* Button hover styles - CSS only, no DOM manipulation */
._docButton_2mvbk_916 {
  background-color: transparent;
  border: 1px solid #4b5563;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: #d1d5db;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
  transition: none;
}

._docButton_2mvbk_916:hover {
  background-color: #374151;
  border-color: #8b5cf6;
  color: #ffffff;
}

._docButtonLeft_2mvbk_936 {
  background-color: transparent;
  border: 1px solid #4b5563;
  border-radius: 6px 0 0 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: #d1d5db;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
  transition: none;
  border-right: none;
  height: 28px;
  line-height: 1;
}

._docButtonLeft_2mvbk_936:hover {
  background-color: #374151;
  border-color: #8b5cf6;
  color: #ffffff;
}

/* Darker green background for generated documents */
._docButtonLeftGenerated_2mvbk_960 {
  background-color: #8de97ec9;
  border: 1px solid #4b5563;
  border-radius: 6px 0 0 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
  transition: none;
  border-right: none;
  height: 28px;
  line-height: 1;
  font-weight: 500;
}

._docButtonLeftGenerated_2mvbk_960:hover {
  background-color: #8de97ec9;
  border-color: #8de97ec9;
  color: #ffffff;
}

._docButtonRight_2mvbk_984 {
  background-color: transparent;
  border: 1px solid #4b5563;
  border-radius: 0 6px 6px 0;
  padding: 6px 4px;
  font-size: 12px;
  color: #d1d5db;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: none;
  height: 28px;
  line-height: 1;
}

._docButtonRight_2mvbk_984:hover {
  background-color: #F0AD4E;
  border-color: #F0AD4E;
  color: #ffffff;
}

/* Darker green background for generated documents dropdown */
._docButtonRightGenerated_2mvbk_1007 {
  background-color: #8de97ec9;
  border: 1px solid #4b5563;
  border-radius: 0 6px 6px 0;
  padding: 6px 4px;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: none;
  height: 28px;
  line-height: 1;
}

._docButtonRightGenerated_2mvbk_1007:hover {
  background-color: #F0AD4E;
  border-color: #F0AD4E;
  color: #ffffff;
}

._purpleButton_2mvbk_1029 {
  background-color: #8b5cf6;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: none;
  font-weight: 600;
  gap: 4px;
  height: 28px;
  line-height: 1;
}

/* Higher specificity to override .dashboard-page .text-sm */
button._purpleButton_2mvbk_1029,
button._purpleButton_2mvbk_1029 * {
  color: #ffffff;
}

._purpleButton_2mvbk_1029 svg {
  stroke: currentColor;
}

._purpleButton_2mvbk_1029:hover:not(:disabled) {
  background-color: #7c3aed;
}

._purpleButton_2mvbk_1029:disabled {
  background-color: #8b5cf6;
  color: #ffffff;
  opacity: 0.5;
  cursor: not-allowed;
}

._purpleButton_2mvbk_1029:disabled,
._purpleButton_2mvbk_1029:disabled * {
  color: #ffffff;
}

/* Send for Remote Development Button */
._remoteDevButton_2mvbk_1074 {
  background-color: #f59e0b;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s;
  color: #ffffff;
}

button._remoteDevButton_2mvbk_1074,
button._remoteDevButton_2mvbk_1074 * {
  color: #ffffff;
}

._remoteDevButton_2mvbk_1074 svg {
  stroke: currentColor;
}

._remoteDevButton_2mvbk_1074:hover:not(:disabled) {
  background-color: #d97706;
}

._remoteDevButton_2mvbk_1074:disabled {
  background-color: #f59e0b;
  color: #ffffff;
  opacity: 0.5;
  cursor: not-allowed;
}

._remoteDevButton_2mvbk_1074:disabled,
._remoteDevButton_2mvbk_1074:disabled * {
  color: #ffffff;
}

/* Patch Button */
._patchButton_2mvbk_1115 {
  background-color: #8b5cf6;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s;
  color: #ffffff;
}

button._patchButton_2mvbk_1115,
button._patchButton_2mvbk_1115 * {
  color: #ffffff;
}

._patchButton_2mvbk_1115 svg {
  stroke: currentColor;
}

._patchButton_2mvbk_1115:hover:not(:disabled) {
  background-color: #7c3aed;
}

._patchButton_2mvbk_1115:disabled {
  background-color: #8b5cf6;
  color: #ffffff;
  opacity: 0.5;
  cursor: not-allowed;
}

._patchButton_2mvbk_1115:disabled,
._patchButton_2mvbk_1115:disabled * {
  color: #ffffff;
}

/* Success Alert */
._successAlert_2mvbk_1156 {
  background-color: #1b4922;
  border: 1px solid #2d7a3a;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

._successIcon_2mvbk_1167 {
  color: #4ade80;
  flex-shrink: 0;
  margin-top: 2px;
}

._successText_2mvbk_1173 {
  color: #bbf7d0;
  font-size: 14px;
}

._greenButton_2mvbk_1178 {
  background-color: #8de97ec9;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: none;
  font-weight: 600;
  gap: 4px;
  height: 28px;
  line-height: 1;
}

/* Higher specificity to override .dashboard-page .text-sm */
button._greenButton_2mvbk_1178,
button._greenButton_2mvbk_1178 * {
  color: #ffffff;
}

._greenButton_2mvbk_1178 svg {
  stroke: currentColor;
}

._greenButton_2mvbk_1178:hover:not(:disabled) {
  background-color: #8de97ec9;
}

._greenButton_2mvbk_1178:disabled {
  background-color: #374151;
  color: #6b7280;
  cursor: not-allowed;
}

._greenButton_2mvbk_1178:disabled,
._greenButton_2mvbk_1178:disabled * {
  color: #6b7280;
}

._selectInput_2mvbk_1221 {
  background-color: transparent;
  border: 1px solid #4b5563;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: #d1d5db;
  cursor: pointer;
  transition: none;
}

._selectInput_2mvbk_1221:hover {
  border-color: #8b5cf6;
}

._selectInput_2mvbk_1221:focus {
  outline: none;
  border-color: #8b5cf6;
}

._dropdownMenu_2mvbk_1241 {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background-color: #1a1a1a;
  border: 1px solid #4b5563;
  border-radius: 6px;
  padding: 4px;
  min-width: 140px;
  z-index: 1000;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

._dropdownItem_2mvbk_1255 {
  background-color: transparent;
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  width: 100%;
  text-align: left;
  color: #d1d5db;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: none;
}

._dropdownItem_2mvbk_1255:hover {
  background-color: #374151;
  color: #ffffff;
}

/* Layout & Container Styles */
._mainContainer_2mvbk_1277 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._sectionHeader_2mvbk_1283 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._sectionTitle_2mvbk_1289 {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
}

._headerActions_2mvbk_1298 {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-left: auto;
}

._emptyStateContainer_2mvbk_1306 {
  text-align: center;
  padding: 32px 0;
}

._emptyStateTitle_2mvbk_1311 {
  font-size: 18px;
  font-weight: 500;
  color: #d1d5db;
  margin: 0 0 8px 0;
}

._emptyStateDescription_2mvbk_1318 {
  font-size: 14px;
  color: #9ca3af;
  margin: 0;
}

._noOrgContainer_2mvbk_1324 {
  background-color: #1a1a1a;
  border: 1px solid #3b82f6;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
}

._noOrgTitle_2mvbk_1332 {
  color: #3b82f6;
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: 600;
}

._noOrgDescription_2mvbk_1339 {
  color: #d1d5db;
  margin: 0;
  font-size: 14px;
}

/* Form Input Styles */
._formInput_2mvbk_449 {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #4b5563;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  background-color: #0f0f0f;
  color: #ffffff;
}

._formInput_2mvbk_449:focus {
  border-color: #8b5cf6;
}

._formLabel_2mvbk_1361 {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #d1d5db;
  margin-bottom: 6px;
}

._formTextarea_2mvbk_1369 {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #4b5563;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  background-color: #0f0f0f;
  color: #ffffff;
  resize: vertical;
  min-height: 80px;
}

._formTextarea_2mvbk_1369:focus {
  border-color: #8b5cf6;
}

/* Badge Styles */
._badgeOrganization_2mvbk_1387 {
  font-size: 10px;
  color: #9ca3af;
  font-weight: 500;
  white-space: nowrap;
  background-color: transparent;
  border: 1px solid #4b5563;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 4px;
}

._badgeProject_2mvbk_1399 {
  font-size: 10px;
  color: #9ca3af;
  font-weight: 500;
  white-space: nowrap;
  background-color: transparent;
  border: 1px solid #4b5563;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Button Row Container */
._buttonRow_2mvbk_1411 {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Table Action Buttons (View/Edit/Delete) - now using shared-components.css */
/* See: frontend/src/css/shared-components.css for .tableActionButton, .tableActionView, .tableActionEdit, .tableActionDelete */

/* Modal Overlay */
._modalOverlay_2mvbk_1423 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
  overflow-y: auto;
}

._modalContent_2mvbk_1438 {
  background-color: #1a1a1a;
  border-radius: 12px;
  max-width: 800px;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  position: relative;
  margin: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

._modalHeader_2mvbk_1450 {
  position: sticky;
  top: 0;
  background-color: #1a1a1a;
  border-bottom: 1px solid #333333;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}

._modalTitle_2mvbk_1462 {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

._modalCloseButton_2mvbk_1469 {
  background-color: transparent;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: all 0.2s;
}

._modalCloseButton_2mvbk_1469:hover {
  color: #1f2937;
  background-color: #e5e7eb;
  border-radius: 4px;
}

._modalBody_2mvbk_1486 {
  padding: 24px;
}

._modalFooter_2mvbk_1490 {
  position: sticky;
  bottom: 0;
  background-color: #1a1a1a;
  border-top: 1px solid #333333;
  padding: 16px 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Primary/Secondary Buttons */
._primaryButton_2mvbk_1502 {
  background-color: #8b5cf6;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s;
}

._primaryButton_2mvbk_1502:hover:not(:disabled) {
  background-color: #7c3aed;
}

._primaryButton_2mvbk_1502:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._secondaryButton_2mvbk_1526 {
  background-color: transparent;
  color: #d1d5db;
  border: 1px solid #4b5563;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

._secondaryButton_2mvbk_1526:hover {
  background-color: #374151;
  border-color: #8b5cf6;
}

/* Document Button Dropdown Container */
._docDropdownContainer_2mvbk_1544 {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Document button states */
._docButtonDisabled_2mvbk_1551 {
  background-color: transparent;
  border: 1px solid #4b5563;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: #ffffff;
  cursor: not-allowed;
  display: flex;
  align-items: center;
  gap: 2px;
}

._docButtonGenerating_2mvbk_1564 {
  background-color: transparent;
  border: 1px solid #4b5563;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: #ffffff;
  cursor: not-allowed;
  display: flex;
  align-items: center;
  gap: 2px;
}

._docButtonGenerate_2mvbk_1577 {
  background-color: #8b5cf6;
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  transition: background-color 0.2s;
}

._docButtonGenerate_2mvbk_1577:hover:not(:disabled) {
  background-color: #7c3aed;
}

._docButtonFailed_2mvbk_1597 {
  background-color: transparent;
  border: 1px solid #D9534F;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: #d1d5db;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  transition: all 0.2s;
}

._docButtonFailed_2mvbk_1597:hover {
  background-color: #D9534F;
  border-color: #D9534F;
  color: #ffffff;
}

._docButtonPulse_2mvbk_1619 {
  animation: _subtlePulse_2mvbk_1 3s ease-in-out infinite;
}

/* Icon styles */
._iconSparkles_2mvbk_1624 {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  color: #c084fc;
}

._iconLoader_2mvbk_1631 {
  color: #8b5cf6;
}

/* Form field container */
._formFieldContainer_2mvbk_1636 {
  margin-bottom: 16px;
}

/* Modal text styles */
._modalTextPrimary_2mvbk_1641 {
  color: #d1d5db;
  margin-bottom: 16px;
}

._modalTextWarning_2mvbk_1646 {
  color: #f59e0b;
  font-size: 14px;
}
/* Mobile Card View Styles for Features */
@media (max-width: 767px) {
  /* Hide desktop table on mobile */
  ._tableContainer_2mvbk_409 {
    padding: 0;
  }

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

  ._filterRow_2mvbk_440 ._formInput_2mvbk_449,
  ._filterRow_2mvbk_440 .formInput,
  ._filterRow_2mvbk_440 ._formSelect_2mvbk_455,
  ._filterRow_2mvbk_440 .formSelect {
    width: 100%;
    min-width: auto;
    min-height: 44px;
  }

  ._clearFiltersButton_2mvbk_479 {
    width: 100%;
    min-height: 44px;
  }

  /* Adjust header for mobile */
  ._sectionHeader_2mvbk_1283 {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  ._headerActions_2mvbk_1298 {
    width: 100%;
  }

  ._headerActions_2mvbk_1298 button {
    width: 100%;
    min-height: 44px;
  }
}

/* Landscape orientation support */
@media (max-height: 600px) and (orientation: landscape) {
  /* Compact header */
  ._sectionHeader_2mvbk_1283 {
    margin-bottom: 12px;
  }

  ._sectionTitle_2mvbk_1289 {
    font-size: 18px;
  }

  /* Compact table header */
  ._tableHeader_2mvbk_415 {
    padding: 8px 12px;
  }

  ._filterRow_2mvbk_440 {
    margin-bottom: 6px;
  }

  ._filterInput_2mvbk_461,
  ._filterSelect_2mvbk_470 {
    padding: 4px 10px;
    font-size: 12px;
  }

  /* Compact table content */
  ._tableContent_2mvbk_511 {
    max-height: 400px;
  }

  ._tableCell_2mvbk_539 {
    padding: 8px;
  }

  ._featureNameRow_2mvbk_586 {
    font-size: 14px;
    gap: 12px;
  }

  ._featureDescRow_2mvbk_609 {
    font-size: 12px;
    line-height: 1.3;
  }

  ._featureTagsRow_2mvbk_249 {
    gap: 4px;
    margin-top: 4px;
  }

  ._buttonRow_2mvbk_1411 {
    gap: 3px;
    margin-top: 6px;
  }

  /* Smaller badges and buttons */
  ._effortBadgeLarge_2mvbk_4,
  ._effortBadgeMedium_2mvbk_15,
  ._effortBadgeSmall_2mvbk_26,
  ._statusDraft_2mvbk_171,
  ._statusMoreInfo_2mvbk_182,
  ._statusWaitingReview_2mvbk_193,
  ._statusStarted_2mvbk_204,
  ._statusRejected_2mvbk_215,
  ._statusDone_2mvbk_226 {
    font-size: 10px;
    padding: 1px 6px;
  }

  ._docButtonGenerate_2mvbk_1577,
  ._docButtonLeftGenerated_2mvbk_960,
  ._docButtonRightGenerated_2mvbk_1007,
  ._view360Button_2mvbk_657 {
    padding: 4px 8px;
    font-size: 11px;
    height: 24px;
  }

  ._remoteDevButton_2mvbk_1074,
  ._patchButton_2mvbk_1115 {
    padding: 3px 8px;
    font-size: 11px;
  }
}
/* Project Card Styles */

._metadataContainer_1nteh_3 {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 0.75rem);
  font-size: clamp(0.688rem, 1.5vw, 0.75rem);
  color: #9ca3af;
  flex-wrap: wrap;
}

._metadataItem_1nteh_12 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

._tagsContainer_1nteh_19 {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 0.75rem);
  margin-top: clamp(0.375rem, 1.5vw, 0.5rem);
  flex-wrap: wrap;
}

._blueTag_1nteh_27 {
  padding: clamp(2px, 0.5vw, 4px) clamp(6px, 2vw, 8px);
  background-color: #4A90E2;
  border-radius: 9999px;
  font-size: clamp(0.688rem, 1.5vw, 0.75rem);
  font-weight: 500;
  text-transform: capitalize;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Landscape Orientation Optimizations */
@media (max-height: 600px) and (orientation: landscape) {
  ._metadataContainer_1nteh_3 {
    gap: 0.5rem;
    font-size: 0.688rem;
  }

  ._metadataItem_1nteh_12 {
    gap: 0.2rem;
  }

  ._tagsContainer_1nteh_19 {
    gap: 0.5rem;
    margin-top: 0.375rem;
  }

  ._blueTag_1nteh_27 {
    padding: 2px 6px;
    font-size: 0.688rem;
  }
}
/* AI Assistant Chat Container */
._chatContainer_i7nkb_2 {
  display: flex;
  flex-direction: column;
  height: 600px;
  background-color: #1a1a1a;
  border-radius: 0.75rem;
  border: 1px solid #333333;
  overflow: hidden;
}

/* Header */
._chatHeader_i7nkb_13 {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #333333;
  background-color: #0f0f0f;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

._headerIcon_i7nkb_22 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(139, 92, 246, 0.3);
}

._headerText_i7nkb_33 h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
}

._headerText_i7nkb_33 p {
  margin: 0;
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Messages Area */
._messagesContainer_i7nkb_47 {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Empty State */
._emptyStateChat_i7nkb_57 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 1rem;
  color: #9ca3af;
  text-align: center;
}

._emptyStateChat_i7nkb_57 p {
  margin: 0;
  font-size: 0.875rem;
}

._emptyStateChat_i7nkb_57 p:first-of-type {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: #ffffff;
}

/* Message */
._message_i7nkb_47 {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

._messageAvatar_i7nkb_86 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

._messageAvatar_i7nkb_86._user_i7nkb_96 {
  background-color: #374151;
}

._messageAvatar_i7nkb_86._assistant_i7nkb_100 {
  background-color: #8b5cf6;
}

._messageContent_i7nkb_104 {
  flex: 1;
  min-width: 0;
  max-width: 85%;
}

._messageBubble_i7nkb_110 {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  width: 100%;
}

._messageBubble_i7nkb_110._user_i7nkb_96 {
  background-color: #262626;
  border: 1px solid #404040;
}

._messageBubble_i7nkb_110._assistant_i7nkb_100 {
  background-color: #1e1b4b;
  border: 1px solid #8b5cf6;
}

._toolResults_i7nkb_131 {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(139, 92, 246, 0.3);
}

._toolResult_i7nkb_131 {
  font-size: 0.75rem;
  color: #a78bfa;
}

._toolResult_i7nkb_131:not(:first-child) {
  margin-top: 0.5rem;
}

._messageTimestamp_i7nkb_146 {
  font-size: 0.625rem;
  color: #6b7280;
  margin-top: 0.25rem;
  padding-left: 0.25rem;
}

/* Loading Message */
._loadingMessage_i7nkb_154 {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

._loadingBubble_i7nkb_160 {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background-color: #1e1b4b;
  border: 1px solid #8b5cf6;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

._loadingBubble_i7nkb_160 span {
  font-size: 0.875rem;
  color: #a78bfa;
}

/* Input Area */
._inputContainer_i7nkb_176 {
  padding: 1rem 1.5rem;
  border-top: 1px solid #333333;
  background-color: #0f0f0f;
}

._inputWrapper_i7nkb_182 {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
}

._chatTextarea_i7nkb_188 {
  flex: 1;
  resize: none;
  max-height: 120px;
}

._sendButton_i7nkb_194 {
  padding: 0.75rem 1.25rem;
  background-color: #8b5cf6;
  border: none;
  border-radius: 0.5rem;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background-color 0.2s;
}

._sendButton_i7nkb_194:hover:not(:disabled) {
  background-color: #7c3aed;
}

._sendButton_i7nkb_194:disabled {
  background-color: #374151;
  cursor: not-allowed;
  opacity: 0.5;
}

/* Empty State Icon */
._emptyStateIcon_i7nkb_220 {
  opacity: 0.5;
}

/* Empty State Paragraph Spacing */
._emptyStateParagraphSpaced_i7nkb_225 {
  margin-bottom: 1rem;
}

/* Empty State List */
._emptyStateList_i7nkb_230 {
  text-align: left;
  line-height: 1.8;
  margin: 0 auto;
  max-width: 500px;
}

/* Empty State Footer Text */
._emptyStateFooterText_i7nkb_238 {
  margin-top: 1rem;
  font-size: 0.9em;
}

/* Thinking Container */
._thinkingContainer_i7nkb_244 {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background-color: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 0.375rem;
}

/* Thinking Toggle */
._thinkingToggle_i7nkb_253 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: #8b5cf6;
  font-size: 0.875rem;
  font-weight: 600;
  user-select: none;
}

/* Thinking Content */
._thinkingContent_i7nkb_265 {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(139, 92, 246, 0.2);
  font-size: 0.875rem;
  color: #9ca3af;
  white-space: pre-wrap;
  line-height: 1.5;
}

/* Animations */
._spinning_i7nkb_276 {
  animation: _spin_i7nkb_276 1s linear infinite;
}
/* Sidebar Styles - Mobile-first */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 260px;
  background-color: #1a1a1a;
  border-right: 1px solid #333333;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden; /* Prevent horizontal scroll when expanded */
  z-index: 100;
  transition: width 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Collapsed Sidebar - Mobile (Completely hidden off-screen) */
.sidebar-collapsed {
  width: 0px;
  flex-shrink: 0;
}

/* Collapsed Sidebar - Desktop (Icon-only rail) */
@media (min-width: 1024px) {
  .sidebar-collapsed {
    transform: translateX(0);
    width: 70px;
    overflow-x: visible; /* Ensure tooltips can overflow when collapsed */
  }
}

/* Mobile Overlay - Dark backdrop when sidebar is open */
.sidebar-overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 99; /* Below sidebar (100) but above content */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Hide overlay on desktop */
@media (min-width: 1024px) {
  .sidebar-overlay {
    display: none;
  }
}

/* Mobile Logo - Always visible above hamburger on mobile */
.sidebar-mobile-logo {
  position: fixed;
  top: 0.5rem;
  left: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101; /* Above sidebar */
  background-color: transparent;
  border-radius: 0.375rem;
  overflow: hidden;
}

.sidebar-mobile-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Hide mobile logo on desktop */
@media (min-width: 1024px) {
  .sidebar-mobile-logo {
    display: none;
  }
}

/* Mobile Hamburger Button - Below logo on mobile */
.sidebar-hamburger-mobile {
  position: fixed;
  top: 3.5rem; /* Positioned below the logo */
  left: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #8b5cf6;
  border: 1px solid #7c3aed;
  border-radius: 0.375rem;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  z-index: 101; /* Above sidebar */
}

.sidebar-hamburger-mobile:hover {
  background-color: #7c3aed;
}

.sidebar-hamburger-mobile:active {
  transform: scale(0.95);
}

/* Hide mobile button on desktop */
@media (min-width: 1024px) {
  .sidebar-hamburger-mobile {
    display: none;
  }
}

/* Desktop Hamburger Button - Inside sidebar, below logo */
.sidebar-hamburger-inside {
  width: calc(100% - 2rem);
  height: 2.5rem;
  margin: 0 1rem 1rem 1rem;
  background-color: #8b5cf6;
  border: 1px solid #7c3aed;
  border-radius: 0.375rem;
  color: #ffffff;
  display: none; /* Hidden on mobile */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  z-index: 1;
}

.sidebar-hamburger-inside:hover {
  background-color: #7c3aed;
}

.sidebar-hamburger-inside:active {
  transform: scale(0.98);
}

/* Show inside button on desktop only */
@media (min-width: 1024px) {
  .sidebar-hamburger-inside {
    display: flex;
  }

  .sidebar-collapsed .sidebar-hamburger-inside {
    width: calc(100% - 1.5rem);
    margin: 0 0.75rem 1rem 0.75rem;
  }
}

/* Logo */
.sidebar-logo {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #333333;
  transition: padding 0.3s ease-in-out;
  cursor: pointer;
}

.sidebar-collapsed .sidebar-logo {
  padding: 1rem 0.5rem;
}

.sidebar-logo img {
  width: 62.4px;
  height: 62.4px;
  object-fit: contain;
  border-radius: 8px;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
}

.sidebar-collapsed .sidebar-logo img {
  width: 40px;
  height: 40px;
}

/* Navigation */
.sidebar-nav {
  flex: 1;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  background-color: transparent;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  color: #9ca3af;
  text-align: left;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-nav-item svg {
  flex-shrink: 0;
  min-width: 18px;
}

/* Icon-only mode for desktop collapsed state */
.sidebar-collapsed .sidebar-nav-item {
  padding: 0.875rem 0.75rem;
  justify-content: center;
  position: relative; /* Required for absolute positioning of tooltip */
}

.sidebar-collapsed .sidebar-nav-item > span {
  display: none;  /* Only hide direct children (button text), not submenu content */
}

/* Tooltip for icon-only mode on desktop */
@media (min-width: 1024px) {
  .sidebar-collapsed .sidebar-nav-item::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(-5px);
    margin-left: 1rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 0.5rem;
    border: 1px solid #444444;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out;
  }

  .sidebar-collapsed .sidebar-nav-item:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
  }

  /* Tooltip arrow */
  .sidebar-collapsed .sidebar-nav-item::before {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0.5rem;
    border: 7px solid transparent;
    border-right-color: #2a2a2a;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  }

  .sidebar-collapsed .sidebar-nav-item:hover::before {
    opacity: 1;
    visibility: visible;
  }
}

/* Mobile: Show full nav when expanded, hide completely when collapsed */
@media (max-width: 1023px) {
  .sidebar-collapsed .sidebar-nav-item > span {
    display: inline;  /* Show direct children on mobile */
  }

  /* Disable tooltips on mobile */
  .sidebar-collapsed .sidebar-nav-item:hover::after,
  .sidebar-collapsed .sidebar-nav-item:hover::before {
    display: none;
  }
}

.sidebar-nav-item:hover {
  background-color: rgba(139, 92, 246, 0.1);
  color: #ffffff;
}

.sidebar-nav-item.active {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.15) 0%, rgba(124, 58, 237, 0.05) 100%);
  color: #ffffff;
  border-left-color: #8b5cf6;
}

/* Glow animation for Getting Started */
@keyframes sidebar-glow {
  0%, 15%, 85%, 100% {
    background-color: transparent;
    box-shadow: inset 0 0 0 0 rgba(139, 92, 246, 0.3);
  }
  50% {
    background-color: rgba(139, 92, 246, 0.15);
    box-shadow: inset 0 0 0 3px rgba(139, 92, 246, 0);
  }
}

.sidebar-nav-item-glow {
  animation: sidebar-glow 4s infinite;
}

/* Feedback & Assistance Menu with Hover Submenu */
.sidebar-feedback-menu {
  position: relative; /* Required for positioning reference */
  border-top: 1px solid #333333;
  margin-top: auto; /* Push to bottom */
}

.sidebar-nav-item-with-submenu {
  position: relative;
}

/* Submenu - Hidden by default, uses fixed positioning to escape overflow */
.sidebar-submenu {
  position: fixed;
  width: 280px;
  background-color: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 0.5rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s;
  transition-delay: 0.7s;
  z-index: 9999;
  pointer-events: none;
  left: calc(260px + 0.5rem);
  bottom: 0.5rem;
}

/* Show submenu on hover - works at all screen sizes */
.sidebar-feedback-menu:hover .sidebar-submenu,
.sidebar-feedback-menu .sidebar-submenu:hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0.1s;
}

/* Create a hover bridge to prevent submenu from disappearing */
.sidebar-feedback-menu::before {
  content: '';
  position: fixed;
  left: 260px;
  bottom: 0;
  width: 3rem;      /* Wider bridge for easier mouse passage (48px) */
  height: 8rem;     /* Taller for more coverage (128px) */
  z-index: 9998;
  pointer-events: none;
}

.sidebar-feedback-menu:hover::before {
  pointer-events: auto;
}

/* Desktop: Positioning and collapsed mode */
@media (min-width: 1024px) {
  /* Expanded sidebar positioning */
  .sidebar:not(.sidebar-collapsed) .sidebar-submenu {
    left: calc(260px + 0.5rem);
    bottom: 0.5rem;
    max-height: calc(100vh - 1rem);
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Collapsed sidebar positioning - COPY from expanded */
  .sidebar.sidebar-collapsed .sidebar-submenu {
    left: calc(70px + 0.75rem);
    bottom: 0.5rem;
    max-height: calc(100vh - 1rem);
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Prevent tooltip in collapsed mode */
  .sidebar.sidebar-collapsed .sidebar-feedback-menu .sidebar-nav-item-with-submenu:hover::after,
  .sidebar.sidebar-collapsed .sidebar-feedback-menu .sidebar-nav-item-with-submenu:hover::before {
    display: none;
  }

  /* Highlight icon in collapsed mode */
  .sidebar.sidebar-collapsed .sidebar-feedback-menu:hover .sidebar-nav-item-with-submenu {
    background-color: rgba(139, 92, 246, 0.15);
    border-radius: 0.375rem;
  }

  /* Create hover bridge in collapsed mode - expanded area */
  .sidebar.sidebar-collapsed .sidebar-feedback-menu::before {
    left: 70px;
    width: 3rem;      /* Wider bridge for easier mouse passage (48px) */
    height: 8rem;     /* Taller for more coverage (128px) */
  }

  /* Ensure submenu text is visible in collapsed mode */
  .sidebar.sidebar-collapsed .sidebar-submenu span {
    display: block !important;  /* Override the general span hiding rule */
  }

  .sidebar.sidebar-collapsed .sidebar-submenu-item-content {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* Add visual indicator when hovering over menu item */
.sidebar-feedback-menu:hover .sidebar-nav-item-with-submenu::after {
  content: '';
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #8b5cf6;
}

/* Hide arrow in collapsed mode */
.sidebar.sidebar-collapsed .sidebar-feedback-menu:hover .sidebar-nav-item-with-submenu::after {
  display: none;
}

/* Submenu items */
.sidebar-submenu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #2a2a2a;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  text-align: left;
  width: 100%;
}

.sidebar-submenu-item:last-child {
  border-bottom: none;
}

.sidebar-submenu-item:hover {
  background-color: #262626;
}

.sidebar-submenu-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 0.5rem;
  flex-shrink: 0;
}

.sidebar-submenu-item-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.sidebar-submenu-item-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.2;
}

.sidebar-submenu-item-description {
  font-size: 0.75rem;
  color: #9ca3af;
  line-height: 1.3;
}

/* Color variations for feedback types */
.sidebar-submenu-item-online-assistance .sidebar-submenu-item-icon {
  background-color: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.sidebar-submenu-item-online-assistance:hover {
  background-color: rgba(139, 92, 246, 0.05);
}

.sidebar-submenu-item-issue .sidebar-submenu-item-icon {
  background-color: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.sidebar-submenu-item-issue:hover {
  background-color: rgba(220, 38, 38, 0.05);
}

.sidebar-submenu-item-general .sidebar-submenu-item-icon {
  background-color: rgba(74, 144, 226, 0.1);
  color: #4A90E2;
}

.sidebar-submenu-item-general:hover {
  background-color: rgba(74, 144, 226, 0.05);
}

.sidebar-submenu-item-feature-request .sidebar-submenu-item-icon {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.sidebar-submenu-item-feature-request:hover {
  background-color: rgba(16, 185, 129, 0.05);
}

.sidebar-submenu-item-email .sidebar-submenu-item-icon {
  background-color: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.sidebar-submenu-item-email:hover {
  background-color: rgba(245, 158, 11, 0.05);
}

/* Mobile: Show submenu below the button */
@media (max-width: 1023px) {
  .sidebar-submenu {
    position: absolute; /* Use absolute on mobile since sidebar is overlay */
    left: 0;
    top: 100%;
    bottom: auto;
    width: 100%;
    margin-top: 0.5rem;
  }
}

/* Feedback Modal Styles */
.feedback-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 2rem;
}

.feedback-modal-content {
  width: 100%;
  max-width: 600px;
  background-color: #1a1a1a;
  border-radius: 0.75rem;
  border: 1px solid #333333;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}

.feedback-modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid #333333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #0f0f0f;
}

.feedback-modal-header-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.feedback-modal-icon {
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feedback-modal-icon-online-assistance {
  background-color: rgba(139, 92, 246, 0.1);
  color: #8b5cf6;
}

.feedback-modal-icon-issue {
  background-color: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.feedback-modal-icon-general {
  background-color: rgba(74, 144, 226, 0.1);
  color: #4A90E2;
}

.feedback-modal-icon-feature-request {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.feedback-modal-icon-email {
  background-color: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.feedback-modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.feedback-modal-close {
  padding: 0.5rem;
  background-color: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  border-radius: 0.375rem;
  transition: all 0.2s;
}

.feedback-modal-close:hover {
  background-color: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.feedback-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.feedback-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  gap: 1rem;
}

.feedback-success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.feedback-success-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.feedback-success-message {
  font-size: 0.875rem;
  color: #9ca3af;
  text-align: center;
  margin: 0;
}

.feedback-error {
  padding: 1rem;
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.feedback-error-text {
  font-size: 0.875rem;
  color: #ef4444;
  margin: 0;
}

.feedback-info {
  padding: 1rem;
  background-color: rgba(74, 144, 226, 0.05);
  border: 1px solid rgba(74, 144, 226, 0.2);
  border-radius: 0.5rem;
  margin-top: 1rem;
}

.feedback-info-centered {
  text-align: center;
  padding: 2rem;
}

.feedback-info-icon {
  margin: 0 auto 1rem;
}

.feedback-info-heading {
  font-size: 1.125rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.feedback-info-text {
  font-size: 0.75rem;
  color: #9ca3af;
  margin: 0;
  line-height: 1.5;
}

.feedback-modal-footer {
  padding: 1.5rem;
  border-top: 1px solid #333333;
  background-color: #0f0f0f;
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.feedback-modal-footer-centered {
  justify-content: center;
}

/* Form Styles */
.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem;
  background-color: #0f0f0f;
  border: 1px solid #333333;
  border-radius: 0.5rem;
  color: #ffffff;
  font-size: 0.875rem;
  transition: all 0.2s ease-in-out;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--focus-color, #8b5cf6);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
  font-family: inherit;
}

.spin-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Button utility classes */
.button-text-white {
  color: #ffffff;
}

/* Responsive - Smaller mobile adjustments (don't override width/transform) */
@media (max-width: 768px) {
  .sidebar-nav-item {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
  }

  .sidebar-submenu-item {
    padding: 0.75rem 0.875rem;
  }

  .sidebar-submenu-item-icon {
    width: 32px;
    height: 32px;
  }

  .sidebar-submenu-item-title {
    font-size: 0.8125rem;
  }

  .sidebar-submenu-item-description {
    font-size: 0.6875rem;
  }
}

@media (max-width: 640px) {
  .sidebar-logo {
    padding: 1rem;
  }

  .sidebar-logo img {
    width: 48px;
    height: 48px;
  }

  .sidebar-nav-item {
    padding: 0.625rem 0.875rem;
    font-size: 0.75rem;
    gap: 0.5rem;
  }

  .sidebar-nav-item svg {
    width: 16px;
    height: 16px;
  }

  .sidebar-submenu-item {
    padding: 0.625rem 0.75rem;
  }

  .sidebar-submenu-item-icon {
    width: 28px;
    height: 28px;
  }

  .sidebar-submenu-item-title {
    font-size: 0.75rem;
  }

  .sidebar-submenu-item-description {
    font-size: 0.625rem;
  }
}
/* Auth Pages (Login & Signup) Shared Styles */

.auth-page {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.1) 0%, transparent 50%);
  position: relative;
  display: flex;
  flex-direction: column;
}

.auth-nav {
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.auth-logo-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.auth-logo-image {
  width: 124.8px;
  height: 124.8px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}

.auth-logo-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.auth-logo-text {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
}

.auth-main-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.auth-hero {
  flex: 1;
  max-width: 500px;
}

.auth-hero-title {
  font-size: 3.5rem;
  font-weight: 300;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: 2rem;
}

.auth-info-box {
  border: 1px solid #8b5cf6;
  border-radius: 8px;
  padding: 1.5rem;
  background: rgba(139, 92, 246, 0.1);
  backdrop-filter: blur(10px);
  margin-bottom: 2rem;
}

.auth-info-box-content {
  display: flex;
  align-items: start;
  gap: 0.75rem;
}

.auth-info-box-title {
  color: #8b5cf6;
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0 0 0.5rem 0;
}

.auth-info-box-text {
  color: #d8b4fe;
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}

.auth-form-container {
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 2rem;
  width: 500px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  max-height: 80vh;
  overflow-y: auto;
}

.auth-form-container-narrow {
  width: 400px;
  max-height: none;
}

.auth-alert-error {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.3);
  border-radius: 8px;
  display: flex;
  align-items: start;
  gap: 0.75rem;
}

.auth-alert-error-text {
  color: #fca5a5;
  font-size: 14px;
}

.auth-section {
  margin-bottom: 2rem;
}

.auth-section-title {
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.auth-form-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-form-row {
  display: flex;
  gap: 1rem;
}

.auth-form-field {
  flex: 1;
}

.auth-label {
  display: block;
  color: #d1d5db;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.auth-input {
  width: 100%;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.auth-input:focus {
  outline: none;
  border-color: #8b5cf6;
}

.auth-input-error {
  border-color: #D9534F;
}

.auth-input::placeholder {
  color: #9ca3af;
}

/* Override browser autofill styling */
@layer overrides {
  .auth-input:-webkit-autofill,
  .auth-input:-webkit-autofill:hover,
  .auth-input:-webkit-autofill:focus,
  .auth-input:-webkit-autofill:active {
    /* WebKit requires !important for box-shadow override */
    -webkit-box-shadow: 0 0 0 30px var(--color-bg-input) inset !important;
    /* WebKit requires !important for text-fill-color override */
    -webkit-text-fill-color: var(--color-text-primary) !important;
    caret-color: var(--color-text-primary);
    border: 1px solid var(--color-border-tertiary);
    transition: background-color 5000s ease-in-out 0s;
  }
}

/* Firefox autofill */
.auth-input:-moz-autofill,
.auth-input:-moz-autofill-preview {
  filter: none;
}

.auth-select {
  width: 100%;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.auth-select:focus {
  outline: none;
  border-color: #8b5cf6;
}

.auth-select option {
  background: #1a1a1a;
  color: #ffffff;
}

.auth-textarea {
  width: 100%;
  padding: 0.75rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
  resize: vertical;
  min-height: 72px;
  font-family: inherit;
  transition: border-color 0.2s;
}

.auth-textarea:focus {
  outline: none;
  border-color: #8b5cf6;
}

.auth-textarea::placeholder {
  color: #9ca3af;
}

.auth-error-text {
  color: #D9534F;
  font-size: 12px;
  margin-top: 0.25rem;
}

.auth-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.auth-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #8b5cf6;
  cursor: pointer;
}

.auth-checkbox-text {
  color: #d1d5db;
  font-size: 14px;
}

.auth-submit-button {
  width: 100%;
  padding: 0.75rem;
  background: #06b6d4;
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background 0.2s;
}

.auth-submit-button:hover:not(:disabled) {
  background: #0891b2;
}

.auth-submit-button:disabled {
  background: #6b7280;
  cursor: not-allowed;
  opacity: 0.7;
}

.auth-footer-text {
  text-align: center;
  color: #9ca3af;
  font-size: 14px;
  margin-top: 1.5rem;
}

.auth-link {
  color: #8b5cf6;
  text-decoration: none;
  transition: text-decoration 0.2s;
}

.auth-link:hover {
  text-decoration: underline;
}

.auth-success-page {
  min-height: 100vh;
  background-color: #0a0a0a;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.1) 0%, transparent 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.auth-success-container {
  max-width: 28rem;
  width: 100%;
}

.auth-success-card {
  background: rgba(15, 23, 42, 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.auth-success-icon {
  width: 64px;
  height: 64px;
  background: #8de97ec9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem auto;
}

.auth-success-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 1rem;
}

.auth-success-text {
  color: #d1d5db;
  margin-bottom: 1.5rem;
}

.auth-success-subtext {
  color: #9ca3af;
  margin-bottom: 2rem;
  font-size: 14px;
}

.auth-success-button {
  width: 100%;
  padding: 0.75rem;
  background: #ffffff;
  border: none;
  border-radius: 8px;
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  transition: all 0.2s;
}

.auth-success-button:hover {
  background: #f1f5f9;
}

/* Spinner animation for loading states */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.auth-spinner {
  animation: spin 1s linear infinite;
}

/* ============================================
   MOBILE RESPONSIVE SUPPORT
   ============================================ */

/* Tablet and below */
@media (max-width: 1024px) {
  .auth-main-content {
    padding: 0 2rem;
    flex-direction: column;
    gap: 2rem;
  }

  .auth-hero {
    max-width: 100%;
    text-align: center;
  }

  .auth-hero-title {
    font-size: 2.5rem;
  }

  .auth-form-container {
    width: 100%;
    max-width: 500px;
  }

  .auth-form-container-narrow {
    width: 100%;
    max-width: 400px;
  }
}

/* Mobile Portrait */
@media (max-width: 640px) {
  .auth-nav {
    padding: 1rem;
  }

  .auth-logo-image {
    width: 60px;
    height: 60px;
  }

  .auth-logo-text {
    font-size: 16px;
  }

  .auth-main-content {
    padding: 1rem;
    gap: 1.5rem;
  }

  .auth-hero-title {
    font-size: 1.875rem;
    margin-bottom: 1rem;
  }

  .auth-info-box {
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .auth-info-box-title {
    font-size: 1rem;
  }

  .auth-info-box-text {
    font-size: 13px;
  }

  .auth-form-container {
    padding: 1.5rem;
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
  }

  .auth-form-container-narrow {
    width: 100%;
    max-width: 100%;
  }

  .auth-section {
    margin-bottom: 1.5rem;
  }

  .auth-section-title {
    font-size: 0.95rem;
  }

  .auth-form-row {
    flex-direction: column;
    gap: 1rem;
  }

  .auth-input,
  .auth-select,
  .auth-textarea {
    font-size: 16px; /* Prevent zoom on iOS */
  }

  .auth-footer-text {
    font-size: 13px;
  }

  .auth-success-page {
    padding: 1rem;
  }

  .auth-success-card {
    padding: 1.5rem;
  }
}

/* Extra small mobile devices */
@media (max-width: 375px) {
  .auth-logo-image {
    width: 48px;
    height: 48px;
  }

  .auth-logo-text {
    font-size: 14px;
  }

  .auth-hero-title {
    font-size: 1.5rem;
  }

  .auth-form-container {
    padding: 1rem;
  }

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

/* ============================================
   LANDSCAPE ORIENTATION SUPPORT
   ============================================ */

/* Mobile Landscape Mode - Optimizations for horizontal viewing */
@media (max-height: 600px) and (orientation: landscape) {
  .auth-page {
    min-height: 100vh;
  }

  .auth-nav {
    padding: 0.5rem 1rem;
  }

  .auth-logo-image {
    width: 48px;
    height: 48px;
  }

  .auth-logo-text {
    font-size: 16px;
  }

  .auth-main-content {
    padding: 1rem 2rem;
    gap: 2rem;
  }

  .auth-hero {
    max-width: 400px;
  }

  .auth-hero-title {
    font-size: 2rem;
    margin-bottom: 1rem;
  }

  .auth-info-box {
    padding: 0.75rem;
    margin-bottom: 1rem;
  }

  .auth-info-box-title {
    font-size: 1rem;
    margin-bottom: 0.25rem;
  }

  .auth-info-box-text {
    font-size: 13px;
  }

  .auth-form-container {
    padding: 1rem;
    width: 400px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }

  .auth-form-container-narrow {
    width: 350px;
  }

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

  .auth-section-title {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
  }

  .auth-alert-error {
    padding: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .auth-input,
  .auth-select,
  .auth-textarea {
    padding: 0.5rem;
    font-size: 13px;
  }

  .auth-submit-button {
    padding: 0.5rem;
    font-size: 13px;
  }

  .auth-footer-text {
    margin-top: 0.75rem;
    font-size: 13px;
  }

  /* Success page landscape adjustments */
  .auth-success-page {
    padding: 0.5rem;
  }

  .auth-success-card {
    padding: 1rem;
  }

  .auth-success-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 0.5rem;
  }

  .auth-success-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .auth-success-text {
    margin-bottom: 0.75rem;
    font-size: 14px;
  }

  .auth-success-subtext {
    margin-bottom: 1rem;
    font-size: 13px;
  }

  .auth-success-button {
    padding: 0.5rem;
    font-size: 13px;
  }
}

/* Tablet and larger landscape mode */
@media (min-height: 601px) and (max-height: 768px) and (orientation: landscape) {
  .auth-nav {
    padding: 0.75rem 1.5rem;
  }

  .auth-logo-image {
    width: 80px;
    height: 80px;
  }

  .auth-main-content {
    padding: 1.5rem 3rem;
  }

  .auth-hero-title {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
  }

  .auth-info-box {
    padding: 1rem;
  }

  .auth-form-container {
    padding: 1.5rem;
    max-height: calc(100vh - 120px);
  }

  .auth-section {
    margin-bottom: 1.5rem;
  }
}