/* Main CSS Entry Point - ROA2WEB */

/* Import order is critical for proper CSS cascade */

/* 0. Shared Layout Styles (imported via App.vue, commented out here to avoid duplicates) */
/* @import '../../../../../shared/frontend/styles/layout/header.css'; */
/* @import '../../../../../shared/frontend/styles/layout/navigation.css'; */

/* 1. Core Foundation */
@import "./core/variables.css";
@import "./core/tokens.css"; /* NEW - Extended design tokens */
@import "./core/md3-tokens.css"; /* Material Design 3 color tokens */
@import "./core/reset.css";
@import "./core/typography.css";

/* 2. Layout System */
@import "./layout/grid.css";
@import "./layout/containers.css";
@import "./layout/navigation.css";

/* 3. Component Library */
@import "./components/cards.css";
@import "./components/buttons.css";
@import "./components/tables.css";
@import "./components/forms.css";
@import "./components/stats.css";

/* 4. Patterns - NEW */
@import "./patterns/interactive.css"; /* Loading spinners, trends, collapse */
@import "./patterns/dashboard.css"; /* Page headers, metrics, breakdowns */
@import "./patterns/animations.css"; /* Transitions and animations */

/* 5. Utilities */
@import "./utilities/spacing.css";
@import "./utilities/display.css";
@import "./utilities/text.css";
@import "./utilities/flex.css";
@import "./utilities/colors.css";

/* 6. Vendor Overrides - NEW */
@import "./vendor/primevue-overrides.css"; /* Centralized PrimeVue customization */

/* 7. Mobile Optimizations */
@import "./mobile.css";

/* Global Application Styles */
html {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Vue App Wrapper */
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Remove default router-link styles */
.router-link-active,
.router-link-exact-active {
  text-decoration: none;
}

/* Smooth scrolling behavior */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Focus management */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Loading states */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Error states */
.error {
  color: var(--color-error);
  border-color: var(--color-error);
}

.success {
  color: var(--color-success);
  border-color: var(--color-success);
}

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

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }

  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }

  .card,
  .stats-card,
  .kpi-card {
    border: 1px solid #ccc !important;
    break-inside: avoid;
    margin-bottom: 1rem;
  }
}
