/**
 * Calculator tabs styling - NBVT Theme Integration
 * Uses NBVT color scheme and design system
 */

.calculator-tabs {
  display: flex;
  margin-bottom: var(--gin-spacing-l, 1.5rem);
  border-bottom: 2px solid var(--color-calculator-border, var(--color-border, #d4d4d8));
  background-color: var(--color-calculator-bg, var(--color-bg-alt, #f9fafb));
  border-radius: var(--gin-border-m, 6px) var(--gin-border-m, 6px) 0 0;
  box-shadow: 0 1px 3px var(--color-shadow-light, rgba(0, 0, 0, 0.05));
  width: 100%;
}

/* Full width calculator tabs for kozijnen en bewegende delen */
.calculator-tabs.full-width,
.calculator-links-block.full-width .calculator-tabs,
.calculator-links-block[data-calculator-type="kozijnen"] .calculator-tabs,
.calculator-links-block[data-calculator-type="bewegende-delen"] .calculator-tabs {
  width: 100%;
  border-radius: 0;
  margin-left: 0;
  margin-right: 0;
}

.calculator-tabs .tab-link {
  display: block;
  padding: var(--gin-spacing-m, 0.75rem) var(--gin-spacing-l, 1.5rem);
  text-decoration: none;
  color: var(--color-text-light, #545560);
  background-color: var(--color-calculator-bg, var(--color-bg-alt, #f9fafb));
  border: 1px solid var(--color-calculator-border, var(--color-border, #d4d4d8));
  border-bottom: none;
  margin-right: 2px;
  border-radius: var(--gin-border-m, 6px) var(--gin-border-m, 6px) 0 0;
  font-weight: var(--font-weight-medium, 500);
  font-family: var(--font-family-sans, system-ui);
  font-size: var(--font-size-sm, 0.875rem);
  transition: all 0.2s ease-in-out;
  position: relative;
}


.calculator-tabs .tab-link:hover {
  background-color: var(--color-bg-muted, #f3f4f6);
  color: var(--color-text, #222330);
  text-decoration: none;
  border-color: var(--color-primary-light, #3b82f6);
}

.calculator-tabs .tab-link.active {
  background-color: var(--color-calculator-header-bg, var(--color-primary, #1e3a8a));
  color: var(--color-calculator-header-text, var(--color-white, #ffffff));
  border-color: var(--color-primary, #1e3a8a);
  border-bottom: 2px solid var(--color-calculator-header-bg, var(--color-primary, #1e3a8a));
  margin-bottom: -2px;
  font-weight: var(--font-weight-semibold, 600);
  z-index: 1;
}

.calculator-tabs .tab-link:focus {
  outline: 2px solid var(--color-border-focus, var(--color-primary, #1e3a8a));
  outline-offset: 2px;
  border-radius: var(--gin-border-s, 3px);
}

.calculator-tabs .tab-link:first-child {
  margin-left: 0;
}

.calculator-tabs .tab-link:last-child {
  margin-right: 0;
}

/* Calculator step indicators */
.calculator-tabs .tab-link.completed {
  background-color: var(--color-calculator-step-completed, var(--color-success, #059669));
  color: var(--color-white, #ffffff);
  border-color: var(--color-success, #059669);
}

.calculator-tabs .tab-link.completed:hover {
  background-color: var(--color-success-dark, #047857);
  border-color: var(--color-success-dark, #047857);
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
  .calculator-tabs {
    flex-direction: column;
    border-radius: var(--gin-border-m, 6px);
    border-bottom: 1px solid var(--color-calculator-border, var(--color-border, #d4d4d8));
  }
  
  .calculator-tabs .tab-link {
    margin-right: 0;
    margin-bottom: 2px;
    border-radius: var(--gin-border-s, 3px);
    border: 1px solid var(--color-calculator-border, var(--color-border, #d4d4d8));
  }
  
  .calculator-tabs .tab-link.active {
    border: 2px solid var(--color-primary, #1e3a8a);
    margin-bottom: 2px;
  }
  
  .calculator-tabs .tab-link:last-child {
    margin-bottom: 0;
  }
}


/* Print styles */
@media print {
  .calculator-tabs {
    border-bottom: 1px solid #000;
    background: transparent;
    box-shadow: none;
  }
  
  .calculator-tabs .tab-link {
    border: 1px solid #000;
    background: transparent;
    color: #000;
  }
  
  .calculator-tabs .tab-link.active {
    background: #f0f0f0;
    font-weight: bold;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .calculator-tabs .tab-link {
    border-width: 2px;
  }
  
  .calculator-tabs .tab-link:hover {
    border-color: #000;
  }
  
  .calculator-tabs .tab-link.active {
    border-color: #000;
    background: #000;
    color: #fff;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .calculator-tabs .tab-link {
    transition: none;
  }
}