/* Main CSS - Import all modular CSS files */

/* Import order is important for CSS cascade */
@import 'base.css';
@import 'layout.css';
@import 'utilities.css';
@import 'components.css';
@import 'table.css';
@import 'modal.css';
@import 'toast.css';
@import 'tunnel.css';

/* Custom styles for the main page header */
h1 {
  color: var(--color-white);
  text-align: center;
  margin: 0;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 576px) {
  h1 {
    font-size: var(--font-size-4xl);
    padding: var(--space-2) var(--space-6);
  }
}

@media (min-width: 768px) {
  h1 {
    font-size: var(--font-size-5xl);
    padding: var(--space-2) var(--space-8);
  }
}

@media (min-width: 992px) {
  h1 {
    font-size: var(--font-size-6xl);
    padding: var(--space-3) var(--space-10);
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: var(--font-size-7xl);
    padding: var(--space-4) var(--space-12);
  }
}

/* Preserve Font Awesome icon display */
.fas, .fa, .far, .fab, .fal {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
}

/* Preserve icon display for action buttons */
.action-btn i {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome" !important;
}