/* Main CSS - Import Order */
/* Skupina Hexagon SVR Application */

/* === 1. Variables (must be first) === */
@import 'variables.css';

/* === 2. Base Styles === */
@import 'base.css';

/* === 3. Components === */
@import 'components/buttons.css';
@import 'components/forms.css';
@import 'components/cards.css';
@import 'components/tables.css';
@import 'components/stepper.css';
@import 'components/modals.css';
@import 'components/notifications.css';

/* === 4. Utilities === */
@import 'utilities/animations.css';
@import 'utilities/helpers.css';

/* === 5. Responsive (must be last) === */
@import 'responsive.css';

/* === Additional Global Styles === */

/* Navbar customization */
.navbar {
  background-color: var(--color-bg-primary) !important;
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-base);
}

.navbar-brand {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: 1.5rem;
  color: var(--color-primary) !important;
  transition: var(--transition-fast);
}

.navbar-brand:hover {
  color: var(--color-accent) !important;
}

.nav-link {
  color: var(--color-primary) !important;
  transition: var(--transition-fast);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-md);
}

.nav-link:hover {
  color: var(--color-accent) !important;
  background-color: rgba(26, 188, 156, 0.1);
}

.nav-link.active {
  color: var(--color-accent) !important;
  font-weight: var(--font-medium);
}

/* Dropdown menu */
.dropdown-menu {
  border: none;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm);
}

.dropdown-item {
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
  padding: var(--spacing-sm) var(--spacing-md);
}

.dropdown-item:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-accent);
}

/* Page content wrapper */
.page-wrapper {
  min-height: calc(100vh - 80px);
  padding: var(--spacing-xl) 0;
}

/* Alert compatibility with Bootstrap */
.alert {
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.alert-success {
  background-color: rgba(39, 174, 96, 0.1);
  color: var(--color-success);
  border-left: 4px solid var(--color-success);
}

.alert-error,
.alert-danger {
  background-color: rgba(231, 76, 60, 0.1);
  color: var(--color-error);
  border-left: 4px solid var(--color-error);
}

.alert-warning {
  background-color: rgba(243, 156, 18, 0.1);
  color: var(--color-warning);
  border-left: 4px solid var(--color-warning);
}

.alert-info {
  background-color: rgba(52, 152, 219, 0.1);
  color: var(--color-info);
  border-left: 4px solid var(--color-info);
}

/* Badge styling */
.badge {
  border-radius: var(--radius-full);
  padding: var(--spacing-xs) var(--spacing-sm);
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.badge-primary {
  background-color: var(--color-primary);
  color: white;
}

.badge-success {
  background-color: var(--color-success);
  color: white;
}

.badge-warning {
  background-color: var(--color-warning);
  color: white;
}

.badge-danger {
  background-color: var(--color-error);
  color: white;
}

.badge-info {
  background-color: var(--color-info);
  color: white;
}

/* Smooth page transitions */
.page-content {
  animation: fadeInUp 0.4s ease;
}

/* Loading overlay */
.loading-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  backdrop-filter: blur(4px);
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--spacing-3xl) var(--spacing-lg);
}

.empty-state-icon {
  font-size: 4rem;
  color: var(--color-secondary);
  margin-bottom: var(--spacing-lg);
  opacity: 0.5;
}

.empty-state-title {
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.empty-state-description {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-lg);
}