/* ==========================================
   Calculator Component
   ========================================== */

/* ==========================================
   Base Layout
   ========================================== */

   .calculator-section {
    padding: var(--spacing-16) 0;
    background: transparent;
  }
  
  .calculator-card {
    margin-bottom: var(--spacing-4);
    padding: var(--spacing-3);
    container-type: inline-size;
    contain: layout style paint;
  }
  
  .calculator-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
  }
  
  /* ==========================================
     Input & Results Panels
     ========================================== */
  
  .input-panel,
  .results-panel {
    padding: var(--spacing-4);
    border-radius: var(--radius-lg);
    background: var(--background);
    box-shadow: var(--shadow-inset);
  }
  
  .results-panel {
    text-align: center;
  }
  
  .panel-title {
    margin-bottom: var(--spacing-10);
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    opacity: 0.9;
  }

  .calculator-card h2 {
    margin-top: 0;
    font-family: var(--font-accent);
    text-align: left;
    font-variant: all-small-caps;
    border-bottom: none;
  }
  
  /* ==========================================
     Form Elements
     ========================================== */
  
  .input-group {
    margin-bottom: var(--spacing-6);
  }
  
  .input-group:last-child {
    margin-bottom: var(--spacing-4);
  }
  
  .input-label {
    display: block;
    margin-bottom: var(--spacing-3);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    color: var(--text-primary);
  }
  
  .input-description {
    display: block;
    max-width: 50ch;
    margin: var(--spacing-1) 0 var(--spacing-3);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    line-height: var(--leading-snug);
    color: var(--text-muted);
    opacity: 0.7;
  }
  
  .input-with-unit {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-3);
  }
  
  /* Form Controls */
  .input-field,
  .unit-selector {
    min-height: 3rem;
    padding: var(--spacing-3);
    border: var(--border-width) solid var(--white-05);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--background);
    box-shadow: var(--shadow-inset);
    appearance: none;
    transition: all var(--transition-fast);
  }
  
  .input-field {
    flex: 1;
  }
  
  .unit-selector {
    padding-right: var(--spacing-10);
    font-size: var(--text-sm);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--spacing-3) center;
    background-size: 1.2em;
    cursor: pointer;
  }
  
  .unit-display {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    padding: var(--spacing-3) var(--spacing-4);
    border: var(--border-width) solid var(--overlay-light);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    white-space: nowrap;
    color: var(--text-muted);
    background: transparent;
  }
  
  /* Input States */
  .input-field:focus,
  .unit-selector:focus {
    border-color: var(--primary);
    box-shadow: var(--shadow-focus);
    outline: none;
  }
  
  .input-field.error,
  .input-field:invalid {
    border-color: var(--danger);
    background: rgba(245, 96, 43, 0.05);
    box-shadow: var(--shadow-error);
  }
  
  .error-message {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    margin-top: var(--spacing-1);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--danger);
  }
  
  .error-message::before {
    content: "!";
    flex-shrink: 0;
    font-size: var(--text-base);
  }
  
  /* ==========================================
     OEE Score Display
     ========================================== */
  
  .oee-score-container {
    margin-bottom: var(--spacing-10);
  }
  
  .oee-score,
  #oee-score {
    margin-bottom: var(--spacing-3);
    font-family: var(--font-accent);
    font-size: var(--text-5xl);
    font-weight: var(--font-bold);
    font-feature-settings: 'tnum' 1;
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
    color: var(--text-primary);
    transition: color var(--transition-base);
  }
  
  /* Score Status Colors */
  .oee-score.excellent,
  #oee-score.excellent { color: var(--success); }
  
  .oee-score.good,
  #oee-score.good { color: var(--primary); }
  
  .oee-score.fair,
  #oee-score.fair { color: var(--warning); }
  
  .oee-score.needs-improvement,
  #oee-score.needs-improvement { color: var(--danger); }
  
  #oee-status {
    margin-bottom: var(--spacing-6);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-muted);
  }
  
  /* ==========================================
     Component Cards
     ========================================== */
  
  .components-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-3);
    margin: var(--spacing-6) 0;
  }
  
  .component-card {
    padding: var(--spacing-4);
    border: var(--border-width) solid var(--white-03);
    border-radius: var(--radius-lg);
    text-align: center;
    background: var(--background);
    box-shadow: var(--shadow-raised);
    contain: layout style;
    transition: all var(--transition-fast);
  }
  
  .component-value {
    margin-bottom: var(--spacing-2);
    font-family: var(--font-accent);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    transition: color var(--transition-base);
  }
  
  .component-label {
    margin-bottom: var(--spacing-6);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-muted);
  }
  
  .progress-bar {
    width: 100%;
    height: var(--spacing-2);
    border-radius: var(--radius-sm);
    background: var(--black-3);
    box-shadow: var(--shadow-inset);
    overflow: hidden;
  }
  
  .progress-fill,
  .metric-progress-bar {
    height: 100%;
    border-radius: var(--radius-sm);
    background: var(--gradient-primary);
    box-shadow: var(--shadow-glow);
    transition: width var(--transition-slow);
  }
  
  /* Card Variants */
  .apq-card {
    cursor: default;
  }
  
  .oee-main-card {
    box-shadow: var(--shadow-raised);
    cursor: pointer;
  }
  
  .oee-main-card:focus {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
  }
  
  /* ==========================================
     Formula Components
     ========================================== */
  
  .core-formula-showcase {
    margin: var(--spacing-8) 0;
    padding: 0;
  }
  
  .core-formula-showcase h4 {
    margin-bottom: var(--spacing-6);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    text-align: center;
    color: var(--text-primary);
  }
  
  .formula-breakdown {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
  }
  
  .formula-main-card {
    padding: var(--spacing-4);
    border: var(--border-width) solid rgba(179, 230, 225, 0.15);
    border-radius: var(--radius-xl);
    text-align: center;
    background: var(--background);
    box-shadow: var(--shadow-raised);
    transition: all var(--transition-base);
  }
  
  .formula-title {
    margin-bottom: var(--spacing-4);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-shadow: 0 1px 2px var(--black-2);
  }
  
  .formula-equation {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
  }
  
  .formula-component {
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-lg);
    font-weight: var(--font-semibold);
    color: var(--text-inverse);
    box-shadow: var(--shadow-sm);
    text-shadow: 0 1px 2px var(--white-3);
    transition: all var(--transition-fast);
  }
  
  /* Formula Component Colors */
  .formula-equation .availability-component {
    color: var(--text-inverse);
    background: linear-gradient(135deg, var(--danger), rgba(245, 96, 43, 0.9));
  }
  
  .formula-equation .performance-component {
    color: var(--text-inverse);
    background: linear-gradient(135deg, var(--warning), rgba(255, 250, 169, 0.9));
  }
  
  .formula-equation .quality-component {
    color: var(--text-inverse);
    background: linear-gradient(135deg, var(--success), rgba(212, 253, 177, 0.9));
  }
  
  /* Text-only APQ in Lists */
  li .availability-component,
  li .performance-component,
  li .quality-component {
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-shadow: none;
  }
  
  li .availability-component { color: var(--danger); }
  li .performance-component { color: var(--warning); }
  li .quality-component { color: var(--success); }
  
  .formula-operator,
  .formula-equals {
    margin: 0 var(--spacing-2);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--primary);
    text-shadow: 0 2px 4px var(--black-3);
  }
  
  .formula-result {
    padding: var(--spacing-3) var(--spacing-4);
    border: var(--border-width-2) solid var(--primary);
    border-radius: var(--radius-xl);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--primary);
    background: var(--background);
    box-shadow: var(--shadow-raised);
    text-shadow: 0 1px 2px var(--black-50);
  }
  
  /* ==========================================
     Benchmark Section
     ========================================== */
  
  .performance-comparison-card {
    margin: var(--spacing-4) 0;
    padding: var(--spacing-4);
    border-radius: var(--radius-xl);
    background: var(--background);
    box-shadow: var(--shadow-inset);
  }
  
  .section-title {
    margin-bottom: var(--spacing-8);
    font-size: var(--text-2xl);
    font-weight: var(--font-semibold);
    text-align: center;
    color: var(--text-primary);
  }
  
  .benchmark-bars {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
  }
  
  .benchmark-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-2);
    text-align: center;
  }
  
  .bar-label {
    padding: var(--spacing-2) 0;
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
  }
  
  .bar-container {
    height: var(--spacing-8);
    border-radius: var(--radius-md);
    background: var(--background);
    box-shadow: var(--shadow-inset);
    overflow: hidden;
  }
  
  .bar-fill {
    width: var(--bar-width, 0%);
    height: 100%;
    border-radius: var(--radius-md);
    transition: width var(--transition-slow);
  }
  
  /* Bar Colors & Values */
  .benchmark-bar:nth-child(1) .bar-fill { background: var(--primary); }
  .benchmark-bar:nth-child(2) .bar-fill { background: var(--warning); }
  .benchmark-bar:nth-child(3) .bar-fill { background: var(--success); }
  
  .bar-value {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    text-align: center;
  }
  
  .benchmark-bar:nth-child(1) .bar-value { color: var(--primary); }
  .benchmark-bar:nth-child(2) .bar-value { color: var(--warning); }
  .benchmark-bar:nth-child(3) .bar-value { color: var(--success); }
  
  .insights-text {
    margin-top: var(--spacing-4);
    padding: var(--spacing-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-style: italic;
    line-height: var(--leading-normal);
    text-align: center;
    color: var(--text-primary);
    background: var(--background);
    box-shadow: var(--shadow-inset);
  }
  
  /* ==========================================
     Action Buttons
     ========================================== */
  
  .action-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-6) 0;
  }
  
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    min-height: 2.75rem;
    padding: var(--spacing-2) var(--spacing-3);
    border: var(--border-width) solid var(--white-05);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    color: var(--text-primary);
    background: var(--background);
    box-shadow: var(--shadow-raised);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: all var(--transition-fast);
  }
  
  .btn:active {
    box-shadow: var(--shadow-pressed);
    transform: scale(0.98);
  }
  
  .btn:focus {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
  }
  
  /* ==========================================
     Interactive States
     ========================================== */
  
  @media (hover: hover) {
    .input-field:hover,
    .unit-selector:hover {
      border-color: var(--primary);
      background: var(--white-03);
    }
    
    .oee-main-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
    }
    
    .formula-main-card:hover {
      border-color: rgba(179, 230, 225, 0.25);
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
    }
    
    .btn:hover {
      border-color: var(--primary);
      background: var(--white-03);
      box-shadow: var(--shadow-lg);
      transform: translateY(-1px);
    }
  }
  
  /* ==========================================
     Mobile Responsive (max-width: 480px)
     ========================================== */
  
  @media (max-width: 480px) {
    .calculator-section {
      padding: var(--spacing-4) 0;
    }
    
    .calculator-card {
      margin-bottom: var(--spacing-3);
      padding: var(--spacing-2);
      border-radius: var(--radius-lg);
    }
    
    /* Stack input and unit */
    .input-with-unit {
      flex-direction: column;
      gap: var(--spacing-2);
    }
    
    .input-with-unit .input-field,
    .input-with-unit .unit-selector,
    .input-with-unit .unit-display {
      width: 100%;
      min-height: 2.5rem;
      font-size: var(--text-sm);
    }
  
    .component-value {
      margin-bottom: var(--spacing-3);
      font-size: var(--text-lg);
    }
  
    /* Text-only formula components on mobile */
    .formula-equation .formula-component {
      padding: 0;
      background: none;
      box-shadow: none;
      text-shadow: 0 1px 2px var(--black-50);
    }
    
    .formula-equation .availability-component { color: var(--danger); }
    .formula-equation .performance-component { color: var(--warning); }
    .formula-equation .quality-component { color: var(--success); }
  }
  
  /* ==========================================
     Tablet Responsive (768px+)
     ========================================== */
  
  @media (min-width: 768px) {
    .calculator-card {
      margin-bottom: var(--spacing-6);
      padding: var(--spacing-6);
    }
    
    .calculator-grid {
      gap: var(--spacing-6);
      margin-bottom: var(--spacing-6);
    }
  
    .input-panel,
    .results-panel {
      padding: var(--spacing-6);
    }
  
    .components-grid {
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: var(--spacing-4);
    }
  
    .formula-main-card {
      padding: var(--spacing-6);
    }
    
    .formula-component {
      padding: var(--spacing-3) var(--spacing-5);
    }
    
    .formula-result {
      padding: var(--spacing-4) var(--spacing-6);
    }
  
    .benchmark-bar {
      grid-template-columns: 120px 1fr 80px;
      gap: var(--spacing-6);
      align-items: center;
      text-align: left;
    }
    
    .bar-value {
      text-align: right;
    }
  
    .bar-container {
      height: var(--spacing-4);
    }
  
    
  
    .btn {
      min-height: 3rem;
      padding: var(--spacing-3) var(--spacing-6);
    }
  }
  
  /* ==========================================
     Desktop Responsive (1024px+)
     ========================================== */
  
  @media (min-width: 1024px) {
    .calculator-card {
      background: rgba(37, 37, 37, 0.95);
      backdrop-filter: blur(10px);
    }
    
    .calculator-grid {
      grid-template-columns: 1fr 1fr;
      gap: var(--spacing-8);
      margin-bottom: var(--spacing-8);
    }
  
    .input-panel,
    .results-panel {
      padding: var(--spacing-8);
    }
  
    .components-grid {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: var(--spacing-6);
    }
  
    .formula-main-card {
      padding: var(--spacing-8);
    }
  }
  
  /* ==========================================
     Container Queries
     ========================================== */
  
  @container (max-width: 400px) {
    .components-grid {
      grid-template-columns: 1fr;
      gap: var(--spacing-4);
    }
  }