/**
 * TABS Courses Component CSS - Simplified
 * Kun klasser som faktisk brukes
 */

/* =================================================================== */
/* Component Isolation */
/* =================================================================== */

.tabs-component-wrapper {
  /* font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important; */
  font-size: 16px !important;
  color: #333 !important;
  box-sizing: border-box !important;
}

.tabs-component-wrapper *,
.tabs-component-wrapper *::before,
.tabs-component-wrapper *::after {
  box-sizing: border-box !important;
  font-family: inherit !important;
}

/* =================================================================== */
/* Container */
/* =================================================================== */

.tabs-component-wrapper .tabs-table-wrap {
  max-width: 100% !important;
  margin: 24px auto !important;
  padding: 0 16px !important;
}

/* =================================================================== */
/* Filtering */
/* =================================================================== */

.tabs-component-wrapper .course-filtering {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin: 0 0 20px 0 !important;
}

.tabs-component-wrapper .course-filtering-title {
  margin: 0 16px 0 0 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #333 !important;
}

.tabs-component-wrapper .course-filtering-buttons {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* =================================================================== */
/* Filter Dropdown */
/* =================================================================== */

.tabs-component-wrapper .course-filter-dropdown {
  display: inline-block !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #333 !important;
  border: 1px solid #ddd !important;
  background: #fff !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  min-width: 200px !important;
  border-radius: 4px !important;
}

.tabs-component-wrapper .course-filter-dropdown:hover {
  border-color: #007bff !important;
}

.tabs-component-wrapper .course-filter-dropdown:focus {
  outline: none !important;
  border-color: #007bff !important;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.2) !important;
}

/* =================================================================== */
/* Filter Buttons (Legacy - kan fjernes) */
/* =================================================================== */

.tabs-component-wrapper .course-filter {
  display: inline-block !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #333 !important;
  text-align: center !important;
  text-decoration: none !important;
  border: 1px solid #ddd !important;
  background: #fafafa !important;
  padding: 8px 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
}

.tabs-component-wrapper .course-filter:hover {
  background: #e8e8e8 !important;
  border-color: #bbb !important;
  text-decoration: none !important;
}

.tabs-component-wrapper .course-filter-active,
.tabs-component-wrapper .course-filter.course-filter-active {
  background: #28a745 !important;
  color: #fff !important;
  border-color: #28a745 !important;
}

.tabs-component-wrapper .course-filter-active:hover,
.tabs-component-wrapper .course-filter.course-filter-active:hover {
  background: #1e7f34 !important;
  border-color: #1e7f34 !important;
}

/* =================================================================== */
/* Table */
/* =================================================================== */

.tabs-component-wrapper .tabs-courses {
  display: table !important;
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 16px 0 0 0 !important;
  background: #fff !important;
  font-size: 15px !important;
  border: 1px solid #dee2e6 !important;
  overflow: hidden !important;
}

.tabs-component-wrapper .tabs-courses th,
.tabs-component-wrapper .tabs-courses td {
  padding: 12px !important;
  text-align: left !important;
  vertical-align: top !important;
  border-bottom: 1px solid #eee !important;
}

.tabs-component-wrapper .tabs-courses th {
  font-weight: 600 !important;
  color: #495057 !important;
  background: #f8f9fa !important;
  border-bottom: 2px solid #dee2e6 !important;
}

/* Column Widths */
.tabs-component-wrapper .col-vehicle-class { width: 90px !important; }
.tabs-component-wrapper .col-start-date { width: 160px !important; }
.tabs-component-wrapper .col-course { min-width: 200px !important; }
.tabs-component-wrapper .col-price { 
  width: 120px !important; 
  text-align: right !important;
}
.tabs-component-wrapper .col-enroll { 
  width: 140px !important;
  text-align: center !important;
}

/* =================================================================== */
/* Table Content */
/* =================================================================== */

.tabs-component-wrapper .course-date { 
  font-weight: 600 !important;
  font-size: 15px !important;
  margin: 0 !important;
}

.tabs-component-wrapper .course-time { 
  color: #6c757d !important; 
  font-size: 15px !important;
  margin: 2px 0 0 0 !important;
}

.tabs-component-wrapper .course-name { 
  margin: 0 0 4px 0 !important; 
  font-size: 15px !important;
  font-weight: 500 !important;
}

.tabs-component-wrapper .course-location { 
  color: #6c757d !important; 
  font-size: 15px !important;
  margin: 0 !important;
}

.tabs-component-wrapper .price { 
  font-weight: 700 !important;
  color: #000 !important;
  font-size: 15px !important;
}

/* =================================================================== */
/* Buttons */
/* =================================================================== */

.tabs-component-wrapper .btn {
  display: inline-block !important;
  font-size: 15px !important;
  line-height: 23px !important;
  font-weight: 500 !important;
  text-align: center !important;
  text-decoration: none !important;
  color: #fff !important;
  background: #555 !important;
  border: none !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
}

.tabs-component-wrapper .btn:hover {    
  background: #111 !important;
  border-color: #111 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.tabs-component-wrapper .btn[disabled] { 
  opacity: 0.5 !important; 
  cursor: not-allowed !important;
  background: #555 !important;
  border-color: #555 !important;
}

.tabs-component-wrapper .course-full {
  color: #dc3545 !important;
  font-weight: 500 !important;
  font-size: 15px !important;
}

/* =================================================================== */
/* Row States */
/* =================================================================== */

.tabs-component-wrapper .course-row-hidden { 
  display: none !important; 
}

.tabs-component-wrapper .tabs-courses tr:nth-child(even) {
  background-color: #f8f9fa !important;
}

.tabs-component-wrapper .tabs-courses tr:hover {
  background-color: #e9ecef !important;
}

/* =================================================================== */
/* Empty State */
/* =================================================================== */

.tabs-component-wrapper .empty {
  padding: 32px 24px !important;
  border: 2px dashed #dee2e6 !important;
  color: #555 !important;
  margin-top: 16px !important;
  text-align: center !important;
  background: #f8f9fa !important;
  font-style: italic !important;
}

/* =================================================================== */
/* Responsive Design */
/* =================================================================== */

@media (max-width: 768px) {
  .tabs-component-wrapper .tabs-table-wrap {
    padding: 0 8px !important;
    margin: 16px auto !important;
  }
  
  .tabs-component-wrapper .course-filtering-title {
    font-size: 15px !important;
    margin: 0 0 8px 0 !important;
    width: 100% !important;
  }
  
  /* Hide entire table header on mobile */
  .tabs-component-wrapper .tabs-courses thead {
    display: none !important;
  }
  
  /* Make table behave more like a container on mobile */
  .tabs-component-wrapper .tabs-courses {
    border: none !important;
    background: transparent !important;
  }
  
  /* Adjust remaining column widths for mobile */
  .tabs-component-wrapper .col-vehicle-class { 
    width: 60px !important; 
    padding: 8px 4px !important;
  }
  .tabs-component-wrapper .col-start-date { 
    width: 100px !important; 
    padding: 8px 4px !important;
  }
  .tabs-component-wrapper .col-course { 
    padding: 8px 4px !important;
  }
  
  /* Style for mobile course rows */
  .tabs-component-wrapper .course-row-mobile {
    display: block !important;
    width: 100% !important;
    background: #fff !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 8px !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
  }
  
  .tabs-component-wrapper .course-row-mobile td {
    display: block !important;
    border: none !important;
    padding: 12px !important;
    width: 100% !important;
  }
  
  .tabs-component-wrapper .course-row-mobile .mobile-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 8px !important;
  }
  
  .tabs-component-wrapper .course-row-mobile .mobile-class {
    background: #007bff !important;
    color: #fff !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
  }
  
  .tabs-component-wrapper .course-row-mobile .mobile-date {
    text-align: right !important;
    font-size: 13px !important;
  }
  
  .tabs-component-wrapper .course-row-mobile .mobile-course {
    margin: 8px 0 !important;
  }
  
  .tabs-component-wrapper .course-row-mobile .mobile-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 12px !important;
    padding-top: 8px !important;
    border-top: 1px solid #dee2e6 !important;
  }
  
  .tabs-component-wrapper .course-row-mobile .mobile-price {
    font-weight: 700 !important;
    color: #28a745 !important;
    font-size: 15px !important;
  }
  
  .tabs-component-wrapper .course-row-mobile .mobile-price .price::before {
    content: "Pris: " !important;
    font-weight: 400 !important;
    color: #333 !important;
  }
  
  /* Reduce spacing */
  [class*="col-"] {
    margin-top: 0 !important; margin-bottom: 0 !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
  }

  .tabs-component-wrapper .course-row-mobile .mobile-enroll .btn {
    font-size: 15px !important;
    line-height: 23px !important;
    padding: 6px 12px !important;
  }
  
  .tabs-component-wrapper .course-row-mobile .mobile-enroll .course-full {
    font-size: 13px !important;
  }
  
}

@media (max-width: 480px) {
  .tabs-component-wrapper .course-filtering {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  
  .tabs-component-wrapper .course-filter {
    text-align: center !important;
    font-size: 15px !important;
  }
  
  .tabs-component-wrapper .course-row-mobile {
    margin: 6px 0 !important;
    padding: 10px !important;
  }
  
  .tabs-component-wrapper .course-row-mobile .mobile-footer {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  
  .tabs-component-wrapper .course-row-mobile .mobile-price {
    text-align: center !important;
  }
}

/* =================================================================== */
/* TABS Booking Calendar Styles */
/* =================================================================== */

.tabs-cal-booking-info {
  margin-top: 30px !important;
  padding: 20px !important;
  background: #f8f9fa !important;
  border-radius: 8px !important;
  border-left: 4px solid #007bff !important;
}

.tabs-cal-booking-info h3 {
  margin-top: 0 !important;
  color: #333 !important;
  font-size: 15px !important;
}

.tabs-cal-booking-info ul {
  list-style-type: none !important;
  padding-left: 0 !important;
}

.tabs-cal-booking-info li {
  padding: 8px 0 !important;
  border-bottom: 1px solid #e0e0e0 !important;
  font-size: 15px !important;
}

.tabs-cal-booking-info li:last-child {
  border-bottom: none !important;
}

.tabs-cal-quick-links {
  margin-top: 30px !important;
}

.tabs-cal-quick-links h3 {
  color: #333 !important;
  margin-bottom: 15px !important;
  font-size: 15px !important;
}

.tabs-cal-buttons-wrapper {
  display: flex !important;
  gap: 15px !important;
  flex-wrap: wrap !important;
  margin-top: 15px !important;
}

.tabs-cal-btn {
  display: inline-block !important;
  padding: 10px 15px !important;
  background: #007bff !important;
  color: white !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  transition: all 0.2s ease !important;
}

.tabs-cal-btn:hover {
  background: #0056b3 !important;
  text-decoration: none !important;
  color: white !important;
}

/* Responsive design for booking calendar */
@media (max-width: 768px) {
  .tabs-cal-buttons-wrapper {
    flex-direction: column !important;
  }
  
  .tabs-cal-btn {
    text-align: center !important;
    margin-bottom: 10px !important;
  }
}

@media (max-width: 480px) {
  .tabs-cal-booking-info {
    padding: 15px !important;
    margin-top: 20px !important;
  }
  
  .tabs-cal-quick-links {
    margin-top: 20px !important;
  }
}

/* Prevent layout shift - reserve space for calendar */
#api-calendar {
  min-height: 600px !important;
}