/* ============================================
            FONT FACE DECLARATIONS
   ============================================ */

@font-face {
  font-family: 'Poppins';
  src: url("../fonts/Poppins/Poppins-Light.fcc40ae9a542.ttf") format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url("../fonts/Poppins/Poppins-Regular.093ee89be9ed.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url("../fonts/Poppins/Poppins-Medium.bf59c687bc6d.ttf") format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url("../fonts/Poppins/Poppins-SemiBold.6f1520d10720.ttf") format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url("../fonts/Roboto-Light.12c992e82598.ttf") format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url("../fonts/Roboto-Regular.678ba85b4704.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url("../fonts/Roboto-Medium.21030564b3bb.ttf") format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url("../fonts/RobotoSlab-Regular.89e49648816e.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url("../fonts/RobotoSlab-Medium.79a03d9b6390.ttf") format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url("../fonts/RobotoSlab-SemiBold.829fac60022d.ttf") format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* ============================================
            CSS Custom Properties
   ============================================ */

:root {
  /* === FARGER === */
  --color-primary: #0064b1;
  --color-primary-hover: #004d8a;
  --color-secondary: #9ADBE8;
  --color-secondary-hover: #7BCADB;
  --color-green-dark: #198754;
  --color-text: #24272B;
  --color-text-light: #707070;
  --color-background: #f3f3f4;
  --color-white: #ffffff;
  --color-red: #dc3545;
  --color-search-result-bg: #f7f2ed;
  
  /* Gråtoner */
  --color-gray-light: #dee2e6;
  --color-gray-medium: #e9ecef;
  --color-gray-dark: #6c757d;
  
  /* Dashboard farger */
  --color-sidebar-bg: #f8f9fa;
  --color-sidebar-text: var(--color-text);
  --color-sidebar-hover: var(--color-gray-medium);
  --color-sidebar-active: var(--color-primary);
  --color-sidebar-border: var(--color-gray-light);
  
  /* === AVSTANDER === */
  --spacing-xs: 0.25rem;   /* 4px */ 
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 4rem;     /* 64px */
  
  /* === BORDER RADIUS === */
  --border-radius-sm: 6px;
  --border-radius: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 50px;
  
  /* === SKYGGER === */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.1);
  
  /* === TYPOGRAFI === */
  --font-family: 'Roboto', sans-serif;
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-family-heading: 'Roboto Slab', serif;
  --font-weight-heading: 300;
  --font-family-dashboard: 'Poppins', sans-serif;

  
  /* === OVERGANGER === */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* === LAYOUT === */
  --sidebar-width: 280px;
  --container-max-width: 900px;
  --search-box-height: 76px;

  /* === BADGE FARGER === */
  --color-badge-success: #81c784;
  --color-badge-success-bg: #e8f5e9;
  --color-badge-success-icon: #10b981;

  --color-badge-warning: #f59e0b;
  --color-badge-warning-bg: #fffae4;
  --color-badge-warning-icon: #e65100;

  --color-badge-error: #e57373;
  --color-badge-error-bg: #ffebee;
  --color-badge-error-icon: #ef4444;

  --color-badge-primary: #0064b1;
  --color-badge-primary-bg: #e3f2fd;
  --color-badge-primary-icon: #0064b1;
}

/* ============================================
   DARK MODE - KUN FOR DASHBOARD (.dashboard-container)
   ============================================ */

.dashboard-container[data-theme="dark"] {
  /* === FARGER === */
  --color-primary: #4a9eff;
  --color-primary-hover: #2d7fd6;
  --color-secondary: #78C8D8;
  --color-secondary-hover: #9ADBE8;
  --color-green-dark: #2dcc70;
  --color-text: #e0e0e0;
  --color-text-light: #a0a0a0;
  --color-background: #1a1a1a;
  --color-white: #2d2d2d;
  --color-red: #ff6b6b;
  --color-search-result-bg: #2a2a2a;
  
  /* Gråtoner */
  --color-gray-light: #404040;
  --color-gray-medium: #333333;
  --color-gray-dark: #555555;
  
  /* Dashboard farger */
  --color-sidebar-bg: #252525;
  --color-sidebar-text: #e0e0e0;
  --color-sidebar-hover: #333333;
  --color-sidebar-active: var(--color-primary);
  --color-sidebar-border: #404040;
  
  /* === SKYGGER === */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.5);
  
  /* === BADGE FARGER === */
  --color-badge-success: #66bb6a;
  --color-badge-success-bg: rgba(102, 187, 106, 0.15);
  --color-badge-success-icon: #4caf50;

  --color-badge-warning: #ffa726;
  --color-badge-warning-bg: rgba(255, 167, 38, 0.15);
  --color-badge-warning-icon: #ff9800;

  --color-badge-error: #ef5350;
  --color-badge-error-bg: rgba(239, 83, 80, 0.15);
  --color-badge-error-icon: #f44336;

  --color-badge-primary: #4a9eff;
  --color-badge-primary-bg: rgba(74, 158, 255, 0.15);
  --color-badge-primary-icon: #2196f3;
}

/* Dark mode bakgrunnsfarger for dashboard */
.dashboard-container[data-theme="dark"] {
  background-color: var(--color-background);
  color: var(--color-text);
}

.dashboard-container[data-theme="dark"] .sidebar {
  background-color: var(--color-sidebar-bg);
  border-color: var(--color-sidebar-border);
}

.dashboard-container[data-theme="dark"] .main-content {
  background-color: var(--color-background);
}

.dashboard-container[data-theme="dark"] .card {
  background-color: var(--color-white);
  border-color: var(--color-gray-light);
}

.dashboard-container[data-theme="dark"] .form-control,
.dashboard-container[data-theme="dark"] .form-select {
  background-color: var(--color-gray-medium);
  border-color: var(--color-gray-light);
  color: var(--color-text);
}

.dashboard-container[data-theme="dark"] .form-control:focus,
.dashboard-container[data-theme="dark"] .form-select:focus {
  background-color: var(--color-gray-medium);
  border-color: var(--color-primary);
  color: var(--color-text);
}

.dashboard-container[data-theme="dark"] .table {
  --bs-table-bg: var(--color-white);
  --bs-table-color: var(--color-text);
  --bs-table-border-color: var(--color-gray-light);
  --bs-table-striped-bg: var(--color-gray-medium);
  --bs-table-hover-bg: var(--color-gray-medium);
}

.dashboard-container[data-theme="dark"] .btn-outline-primary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.dashboard-container[data-theme="dark"] .btn-outline-primary:hover {
  background-color: var(--color-primary);
  color: var(--color-background);
}

.dashboard-container[data-theme="dark"] .text-muted {
  color: var(--color-text-light) !important;
}

.dashboard-container[data-theme="dark"] .breadcrumb-bar {
  background-color: var(--color-sidebar-bg);
  border-color: var(--color-sidebar-border);
}

.dashboard-container[data-theme="dark"] .alert {
  background-color: var(--color-gray-medium);
  border-color: var(--color-gray-light);
  color: var(--color-text);
}
.dashboard-container[data-theme="dark"] .form-check-label {
  color: var(--color-text);
}

.dashboard-container[data-theme="dark"] .info-box {
  color: var(--color-text);
}

.dashboard-container[data-theme="dark"] .form-label {
  color: var(--color-text);
}