/**
 * TriCity Bearings - MRO Tools & Calculators Master Stylesheet
 * Path: assets/css/mro-calculators.css
 * Author: TriCity Bearings Development Team
 * Description: High-density B2B calculation controls, dynamic BOM result cards,
 *              mobile field group responsive fixes, and touch-friendly mobile horizontal badge sliders.
 */

/* =============================================================================
   1. GLOBAL CONTROL & TOOL WRAPPER STANDARDS
   ============================================================================= */
.tcb-static-page-wrapper {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 32px 24px 60px 24px !important;
  box-sizing: border-box !important;
}

.tcb-static-page-wrapper input[type="text"],
.tcb-static-page-wrapper input[type="number"],
.tcb-static-page-wrapper select {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 14px !important;
  color: #000000 !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.tcb-static-page-wrapper input[type="text"]:focus,
.tcb-static-page-wrapper input[type="number"]:focus,
.tcb-static-page-wrapper select:focus {
  border-color: #0066cc !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12) !important;
}

.tcb-static-page-wrapper label {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}

/* Radio Option Cards */
.tcb-radio-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.tcb-radio-card:hover {
  border-color: #0066cc !important;
  background-color: #f8fafc !important;
}

/* =============================================================================
   2. BUTTON & INTERACTIVE CTA STYLES
   ============================================================================= */
.tcb-unit-btn {
  height: 40px !important;
  padding: 0 18px !important;
  border-radius: 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.tcb-unit-btn.active {
  border: 1px solid #0066cc !important;
  background-color: #0066cc !important;
  color: #ffffff !important;
}

.tcb-btn-copy {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border: none !important;
  padding: 10px 16px !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: background-color 0.15s ease !important;
}

.tcb-btn-copy:hover {
  background: #cbd5e1 !important;
}

.tcb-btn-quote {
  background: #0066cc !important;
  color: #ffffff !important;
  text-decoration: none !important;
  padding: 10px 20px !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  display: inline-block !important;
  text-align: center !important;
  box-sizing: border-box !important;
  transition: background-color 0.15s ease !important;
}

.tcb-btn-quote:hover {
  background: #004488 !important;
  color: #ffffff !important;
}

/* =============================================================================
   3. TRICITY BEARINGS (TCB) MOBILE RESPONSIVE ENGINE & BOM SLIDER TRACKS
   ============================================================================= */
@media screen and (max-width: 768px) {
  
  /* TCB Touch-Friendly Horizontal Swipe Track for Spec Badges */
  .tcb-static-page-wrapper div[style*="border-left: 4px solid"] > div[style*="grid"] {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    padding-bottom: 6px !important;
  }

  .tcb-static-page-wrapper div[style*="border-left: 4px solid"] > div[style*="grid"] > div {
    flex: 0 0 75% !important;
    min-width: 220px !important;
    scroll-snap-align: start !important;
    background: #ffffff !important;
    padding: 10px 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
  }

  /* Hide scrollbars for clean touch drag interaction */
  .tcb-static-page-wrapper div[style*="border-left: 4px solid"] > div[style*="grid"]::-webkit-scrollbar,
  .tcb-bom-slider-wrap::-webkit-scrollbar,
  div[id*="ResultSKU"]::-webkit-scrollbar {
    display: none !important;
  }

  /* =============================================================================
     4. MOBILE BOM TABLE & HARDWARE PART NUMBER SWIPE SLIDER
     ============================================================================= */
  /* Wraps generated BOM outputs into a scrollable horizontal track */
  .tcb-bom-slider-wrap,
  div[id*="ResultSKU"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 8px 0 !important;
    box-sizing: border-box !important;
  }

  /* Syncs headers (Hardware, Qty, Part Number) with generated item rows */
  .tcb-bom-slider-wrap table,
  div[id*="ResultSKU"] table {
    min-width: 580px !important;
    width: 100% !important;
    border-collapse: collapse !important;
  }

  .tcb-bom-slider-wrap th,
  .tcb-bom-slider-wrap td,
  div[id*="ResultSKU"] th,
  div[id*="ResultSKU"] td {
    padding: 8px 10px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  /* Compact Input Spacing & Label Realignment */
  .tcb-static-page-wrapper label {
    min-height: 0 !important;
    font-size: 13px !important;
    margin-bottom: 4px !important;
    display: block !important;
  }

  .tcb-static-page-wrapper select,
  .tcb-static-page-wrapper input[type="text"],
  .tcb-static-page-wrapper input[type="number"] {
    height: 40px !important;
    font-size: 13.5px !important;
    padding: 6px 10px !important;
  }

  /* High-Density Radio Option Grid */
  .tcb-static-page-wrapper div[style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .tcb-radio-card {
    padding: 8px 10px !important;
  }

  /* Compact BOM Card Actions */
  .tcb-static-page-wrapper div[style*="border: 2px solid #0066cc"] {
    padding: 14px 12px !important;
  }

  .tcb-static-page-wrapper div[style*="justify-content: flex-end"] {
    justify-content: center !important;
    gap: 8px !important;
  }

  .tcb-btn-copy,
  .tcb-btn-quote {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 10px 12px !important;
  }

  /* Dynamic Field Group Mobile Responsive Overrides */
  #tcbLubeGroupBearing > div[style*="grid"],
  #tcbLubeGroupGearbox > div[style*="grid"],
  #tcbLubeGroupMotor > div[style*="grid"],
  #tcbLubeSecSelector div[style*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #tcbLubeSecSelector label {
    min-height: 0 !important;
    margin-bottom: 4px !important;
    display: block !important;
    font-size: 13px !important;
  }

  #tcbLubeSecSelector select,
  #tcbLubeSecSelector input[type="text"],
  #tcbLubeSecSelector input[type="number"] {
    width: 100% !important;
    height: 40px !important;
    font-size: 13.5px !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
  }

  #tcbLubeSecSelector > div {
    padding: 12px !important;
  }
}