/**
 * Asset Extractor - Main Stylesheet
 *
 * Entry point that imports all modular CSS files.
 * CSS architecture following "The Airbnb Way" design system principles.
 *
 * Structure:
 * - base/       : Design tokens, reset, typography foundation
 * - components/ : Reusable UI components (buttons, inputs, cards, etc.)
 * - modules/    : Feature-specific styles (calculator, scoring, graph)
 * - utilities/  : Layout helpers and animation utilities
 *
 * Naming Convention: BEM-like with `ae-` namespace prefix
 * All styles scoped under `#ae-app` to avoid theme conflicts.
 *
 * @package AssetExtractor
 * @version 1.0.0
 */

/* =========================================================================
   BASE
   Variables must come first as they define design tokens used everywhere.
   ========================================================================= */

@import url('base/_variables.css');
@import url('base/_reset.css');
@import url('base/_typography.css');

/* =========================================================================
   COMPONENTS
   Reusable UI building blocks.
   ========================================================================= */

@import url('components/_buttons.css');
@import url('components/_inputs.css');
@import url('components/_table.css');
@import url('components/_card.css');
@import url('components/_slider.css');
@import url('components/_tooltip.css');
@import url('components/_welcome.css');
@import url('components/_modal.css');
@import url('components/_dashboard-header.css');

/* =========================================================================
   MODULES
   Feature-specific composite styles.
   ========================================================================= */

@import url('modules/_calculator.css');
@import url('modules/_folder-card.css');
@import url('modules/_folder-table-view.css');
@import url('modules/_scoring.css');
@import url('modules/_question-flow.css');
@import url('modules/_unified-flow.css');
@import url('modules/_graph.css');
@import url('modules/_diagnostic.css');

/* =========================================================================
   UTILITIES
   Layout helpers and animations (loaded last for higher specificity).
   ========================================================================= */

@import url('utilities/_layout.css');
@import url('utilities/_animations.css');

/* =========================================================================
   LEGACY / TRANSITION STYLES
   Preserved styles from old implementation for backwards compatibility.
   These should be migrated to component files over time.
   ========================================================================= */

/* Container wrapper (legacy, use .ae-calculator instead) */
#ae-app .ae-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--ae-space-5);
}

/* =========================================================================
   GLOBAL SCROLLBAR STYLING
   Premium, minimal scrollbar design for all scrollable containers.
   ========================================================================= */

/* Firefox */
#ae-app {
  scrollbar-width: thin;
  scrollbar-color: var(--ae-color-gray-300) transparent;
}

#ae-app * {
  scrollbar-width: thin;
  scrollbar-color: var(--ae-color-gray-300) transparent;
}

/* Webkit (Chrome, Safari, Edge) - Global */
#ae-app ::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}

#ae-app ::-webkit-scrollbar-track {
  background: transparent;
  border-radius: var(--ae-radius-full);
}

#ae-app ::-webkit-scrollbar-thumb {
  background: var(--ae-color-gray-300);
  border-radius: var(--ae-radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}

#ae-app ::-webkit-scrollbar-thumb:hover {
  background: var(--ae-color-gray-400);
  border: 2px solid transparent;
  background-clip: padding-box;
}

#ae-app ::-webkit-scrollbar-corner {
  background: transparent;
}

/* Loading state (legacy) */
#ae-app .ae-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ae-space-10);
}

#ae-app .ae-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--ae-color-gray-200);
  border-top-color: var(--ae-color-primary);
  border-radius: var(--ae-radius-full);
  animation: ae-spin 1s linear infinite;
}

/* Message components (legacy) */
#ae-app .ae-messages {
  margin-bottom: var(--ae-space-4);
}

#ae-app .ae-message {
  padding: var(--ae-space-3) var(--ae-space-4);
  margin-bottom: var(--ae-space-4);
  border-radius: var(--ae-radius-md);
  border-left: 4px solid;
  font-size: var(--ae-text-sm);
}

#ae-app .ae-message--success {
  background-color: var(--ae-color-success-light);
  border-color: var(--ae-color-success);
  color: var(--ae-color-success-dark);
}

#ae-app .ae-message--error {
  background-color: var(--ae-color-danger-light);
  border-color: var(--ae-color-danger);
  color: var(--ae-color-danger);
}

#ae-app .ae-message--info {
  background-color: var(--ae-color-info-light);
  border-color: var(--ae-color-info);
  color: var(--ae-color-info-dark);
}

#ae-app .ae-message--warning {
  background-color: var(--ae-color-warning-light);
  border-color: var(--ae-color-warning);
  color: var(--ae-color-warning-dark);
}

/* =========================================================================
   ADMIN VIEW MODE
   Banner and read-only styling for admin viewing client audits.
   ========================================================================= */

#ae-app.ae-admin-view .ae-admin-view-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ae-space-3);
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #fff;
  padding: var(--ae-space-3) var(--ae-space-5);
  margin-bottom: 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

#ae-app.ae-admin-view .ae-admin-view-banner__content {
  display: flex;
  align-items: center;
  gap: var(--ae-space-3);
}

#ae-app.ae-admin-view .ae-admin-view-banner__icon {
  font-size: 1.5rem;
  line-height: 1;
}

#ae-app.ae-admin-view .ae-admin-view-banner__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#ae-app.ae-admin-view .ae-admin-view-banner__text strong {
  font-size: var(--ae-text-sm);
  font-weight: 600;
}

#ae-app.ae-admin-view .ae-admin-view-banner__text span {
  font-size: var(--ae-text-xs);
  opacity: 0.9;
}

#ae-app.ae-admin-view .ae-admin-view-banner__back {
  display: inline-flex;
  align-items: center;
  padding: var(--ae-space-2) var(--ae-space-3);
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: var(--ae-text-sm);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--ae-radius-md);
  transition: background 0.2s;
}

#ae-app.ae-admin-view .ae-admin-view-banner__back:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* Hide save buttons in admin view mode */
#ae-app.ae-admin-view .ae-diagnostic__save-btn,
#ae-app.ae-admin-view .ae-btn--save,
#ae-app.ae-admin-view [data-action="save"] {
  display: none !important;
}

/* Subtle read-only indicators */
#ae-app.ae-admin-view .ae-folder-table input,
#ae-app.ae-admin-view .ae-folder-table select {
  background-color: var(--ae-color-gray-50);
  cursor: default;
}

/* Mobile responsive */
@media (max-width: 640px) {
  #ae-app.ae-admin-view .ae-admin-view-banner {
    padding: var(--ae-space-2) var(--ae-space-3);
  }

  #ae-app.ae-admin-view .ae-admin-view-banner__icon {
    font-size: 1.2rem;
  }

  #ae-app.ae-admin-view .ae-admin-view-banner__back {
    font-size: var(--ae-text-xs);
    padding: var(--ae-space-1) var(--ae-space-2);
  }
}

/* =========================================================================
   PRINT STYLES
   ========================================================================= */

@media print {
  #ae-app {
    background: none;
    color: #000;
  }

  #ae-app .ae-btn,
  #ae-app .ae-no-print {
    display: none !important;
  }

  #ae-app .ae-card,
  #ae-app .ae-module,
  #ae-app .ae-typology-card {
    box-shadow: none;
    border: 1px solid #ddd;
    break-inside: avoid;
  }

  #ae-app .ae-table {
    font-size: 10pt;
  }

  #ae-app .ae-quadrant-container {
    max-width: 400px;
  }
}