/**
 * VVP Vaktplan - Main CSS Bundle
 * Import order matters - tokens first, then reset, base, layout, components
 *
 * Version: 2.0.0
 * Mobile-first, no !important needed
 */

/* ============================================
   CORE LAYER - Foundation
   ============================================ */

/* Design tokens (CSS Custom Properties) */
@import url('./core/tokens.css');

/* CSS Reset */
@import url('./core/reset.css');

/* Base typography and form styles */
@import url('./core/base.css');

/* Layout system (grid, flex, spacing) */
@import url('./core/layout.css');

/* ============================================
   COMPONENT LAYER - Reusable UI
   ============================================ */

/* Cards and containers */
@import url('./components/cards.css');

/* Modal dialogs and overlays */
@import url('./components/modals.css');

/* Navigation (topbar, sidebar, mobile nav) */
@import url('./components/navigation.css');

/* Dashboard widgets (drag-drop, customization) */
@import url('./components/dashboard-widgets.css');

/*
 * Additional component imports can be added here:
 * @import url('./components/forms.css');
 * @import url('./components/tables.css');
 * @import url('./components/calendar.css');
 * @import url('./components/buttons.css');
 */

/* ============================================
   PAGE LAYER - Page-specific styles
   ============================================ */

/*
 * Page-specific imports:
 * @import url('./pages/dashboard.css');
 * @import url('./pages/manager.css');
 * @import url('./pages/employee.css');
 * @import url('./pages/settings.css');
 */

/* ============================================
   UTILITY LAYER - Helper classes
   ============================================ */

/* Text utilities */
.text-xs { font-size: var(--vvp-text-xs); }
.text-sm { font-size: var(--vvp-text-sm); }
.text-base { font-size: var(--vvp-text-base); }
.text-lg { font-size: var(--vvp-text-lg); }
.text-xl { font-size: var(--vvp-text-xl); }
.text-2xl { font-size: var(--vvp-text-2xl); }
.text-3xl { font-size: var(--vvp-text-3xl); }

.font-normal { font-weight: var(--vvp-font-normal); }
.font-medium { font-weight: var(--vvp-font-medium); }
.font-semibold { font-weight: var(--vvp-font-semibold); }
.font-bold { font-weight: var(--vvp-font-bold); }

/* Color utilities */
.text-primary { color: var(--vvp-text-primary); }
.text-secondary { color: var(--vvp-text-secondary); }
.text-tertiary { color: var(--vvp-text-tertiary); }
.text-success { color: var(--vvp-success); }
.text-warning { color: var(--vvp-warning); }
.text-error { color: var(--vvp-error); }
.text-info { color: var(--vvp-info); }

.bg-primary { background-color: var(--vvp-bg-primary); }
.bg-secondary { background-color: var(--vvp-bg-secondary); }
.bg-info { background-color: var(--vvp-info); color: white; }
.bg-success { background-color: var(--vvp-success); color: white; }
.bg-warning { background-color: var(--vvp-warning); color: white; }
.bg-error { background-color: var(--vvp-error); color: white; }
.bg-tertiary { background-color: var(--vvp-bg-tertiary); }

/* Border utilities */
.border { border: 1px solid var(--vvp-border-light); }
.border-0 { border: none; }
.border-t { border-top: 1px solid var(--vvp-border-light); }
.border-b { border-bottom: 1px solid var(--vvp-border-light); }
.border-l { border-left: 1px solid var(--vvp-border-light); }
.border-r { border-right: 1px solid var(--vvp-border-light); }

/* Cursor utilities */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }

/* Truncate text */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Opacity utilities */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Transition utilities */
.transition-none { transition: none; }
.transition-all { transition: all var(--vvp-transition-base); }
.transition-colors { transition: color var(--vvp-transition-fast), background-color var(--vvp-transition-fast), border-color var(--vvp-transition-fast); }
.transition-transform { transition: transform var(--vvp-transition-base); }
.transition-opacity { transition: opacity var(--vvp-transition-base); }

/* Pointer events */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* User select */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

/* ============================================
   ANIMATION UTILITIES
   ============================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideDown {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideLeft {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideRight {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

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

.animate-fadeIn { animation: fadeIn var(--vvp-transition-base) ease-out; }
.animate-slideUp { animation: slideUp var(--vvp-transition-base) ease-out; }
.animate-slideDown { animation: slideDown var(--vvp-transition-base) ease-out; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-bounce { animation: bounce 1s ease-in-out infinite; }
.animate-spin { animation: spin 1s linear infinite; }

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

@media print {
  .no-print,
  .vvp-topbar,
  .vvp-mobile-nav,
  .vvp-hamburger,
  .btn,
  button {
    display: none;
  }

  body {
    background: white;
    color: black;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ddd;
    break-inside: avoid;
  }

  a {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}