/**
 * GuestWatt - Main CSS Entry Point
 * 
 * Import order matters:
 * 1. tokens - Variables first (used by everything else)
 * 2. reset - Normalize browser defaults
 * 3. base - Typography and element defaults
 * 4. components - UI components
 * 5. utilities - Utility classes last (highest specificity)
 * 
 * CSS Layers: Define layer order for cascade management
 */

@layer base, components, utilities;

/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS - Foundation first
   ═══════════════════════════════════════════════════════════ */
@import 'tokens.css';

/* ═══════════════════════════════════════════════════════════
   BASE STYLES
   ═══════════════════════════════════════════════════════════ */
@import 'reset.css';
@import 'base.css';

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS - Before components (used by them)
   ═══════════════════════════════════════════════════════════ */
@import 'animations.css';

/* ═══════════════════════════════════════════════════════════
   COMPONENTS - Design system components
   ═══════════════════════════════════════════════════════════ */
@import 'components-header.css';
@import 'components-buttons.css';
@import 'components-tabs.css';
@import 'components-input-views.css';
@import 'components-highlights.css';
@import 'components-results.css';
@import 'components-layout.css';
@import 'components-about.css';


/* ═══════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════ */
@import 'utilities.css';

/**
 * App-specific styles
 * These are custom styles for the GuestWatt app layout
 * that don't fit neatly into components or utilities
 */

@layer components {
  /* ═══════════════════════════════════════════════════════════
     APP-SPECIFIC STYLES
     Only keep styles that don't duplicate component files
     ═══════════════════════════════════════════════════════════ */

  /* App shell */
  .app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* Body state classes for JS */
  body.is-initial .app-header,
  body.is-initial .app-footer {
    display: none;
  }

  /* Offers list (if not in components-results.css) */
  .offers-list {
    list-style: none;
    padding: 0;
  }

  .offer-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--border);
    transition: var(--transition-colors);
    cursor: pointer;
  }

  .offer-row:hover {
    background-color: var(--bg-high);
  }

  .offer-row.is-best {
    background-color: var(--color-accent-soft);
  }

  .offer-rank {
    width: 24px;
    font-size: var(--text-sm-size);
    font-weight: var(--font-medium);
    color: var(--foreground-tertiary);
    text-align: center;
  }

  .offer-row.is-best .offer-rank {
    color: var(--foreground-accent);
  }

  .offer-row-provider {
    flex: 1;
    font-weight: var(--font-medium);
    color: var(--foreground);
  }

  .offer-row-price {
    font-weight: var(--font-semibold);
    color: var(--foreground);
  }

  .offer-row-diff {
    font-size: var(--text-sm-size);
    color: var(--foreground-tertiary);
    min-width: 60px;
    text-align: right;
  }

  .offer-row.is-best .offer-row-diff {
    color: var(--foreground-accent);
    font-weight: var(--font-medium);
  }

  /* Print styles */
  @media print {
    .no-print {
      display: none !important;
    }
    
    body {
      background: white;
      color: black;
    }
    
    .card {
      box-shadow: none;
      border: 1px solid var(--border);
    }
  }
}