/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Tire Pairing Visual Indicators */
.pair-color-1 {
  border-left: 6px solid #2196F3 !important; /* Blue */
  background-color: rgba(33, 150, 243, 0.1) !important;
}

.pair-color-2 {
  border-left: 6px solid #9C27B0 !important; /* Purple */  
  background-color: rgba(156, 39, 176, 0.1) !important;
}

.pair-color-3 {
  border-left: 6px solid #4CAF50 !important; /* Green */
  background-color: rgba(76, 175, 80, 0.1) !important;
}

.pair-color-4 {
  border-left: 6px solid #FF9800 !important; /* Orange */
  background-color: rgba(255, 152, 0, 0.1) !important;
}

/* Orange badge color for 2-week old data */
.bg-orange {
  background-color: #fd7e14 !important;
}

/* Progressive Disclosure Styles */
details summary {
  cursor: pointer;
  user-select: none;
  outline: none;
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::-moz-list-bullet {
  list-style-type: none;
}

details summary .bi-chevron-down {
  transition: transform 0.2s ease;
}

details[open] summary .bi-chevron-down {
  transform: rotate(180deg);
}

details summary:hover {
  background-color: rgba(0,0,0,0.05);
}

details summary:focus {
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

/* Print Styles for Quote Public View */
@media print {
  /* Remove browser page headers and footers */
  @page {
    margin: 0.5in;
    size: A4;
    
    /* Remove default headers and footers */
    @top-left { content: ""; }
    @top-center { content: ""; }
    @top-right { content: ""; }
    @bottom-left { content: ""; }
    @bottom-center { content: ""; }
    @bottom-right { content: ""; }
    
    /* Alternative method - set margins to remove space for headers/footers */
    margin-top: 0.5in;
    margin-bottom: 0.5in;
    margin-left: 0.5in;
    margin-right: 0.5in;
  }
  /* Remove Bootstrap shadows and rounded corners that don't print well */
  .shadow-lg, .shadow-sm, .shadow {
    box-shadow: none !important;
  }
  
  .rounded-4, .rounded-3 {
    border-radius: 0.25rem !important;
  }
  
  /* Hide non-essential elements for print */
  .skip-links,
  .btn,
  button,
  .d-print-none,
  nav,
  .navbar,
  header,
  .sticky-top {
    display: none !important;
  }
  
  /* Completely hide testimonials section "Dicono di Noi" */
  .mt-5.text-center:has(h3:contains("Dicono di Noi")),
  .mt-5.text-center h3:contains("Dicono di Noi"),
  .mt-5.text-center .row.g-4 {
    display: none !important;
  }
  
  /* Alternative fallback methods to hide testimonials */
  .col-md-4 .card.h-100.shadow-sm,
  .col-md-4:has(.fst-italic) {
    display: none !important;
  }
  
  /* Hide entire testimonials container */
  .mt-5.text-center {
    display: none !important;
  }
  
  /* Optimize page layout for print */
  body {
    font-size: 12pt !important;
    line-height: 1.4 !important;
    color: #000 !important;
    background: white !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Remove main content padding that compensates for navbar */
  main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  .container {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Header optimization for print */
  .card-header {
    background: white !important;
    border: 1px solid #000 !important;
    page-break-after: avoid;
  }
  
  .card-header img {
    max-height: 60px !important;
  }
  
  .card-header h1 {
    font-size: 18pt !important;
    font-weight: bold !important;
  }
  
  .bg-primary {
    background-color: #f8f9fa !important;
    color: #000 !important;
    border: 1px solid #000 !important;
  }
  
  /* Quote content optimization */
  .card-body {
    padding: 15pt !important;
    background: white !important;
  }
  
  /* Typography adjustments for print */
  h2 {
    font-size: 16pt !important;
    color: #000 !important;
    margin-bottom: 10pt !important;
  }
  
  h3 {
    font-size: 14pt !important;
    color: #000 !important;
  }
  
  h4 {
    font-size: 13pt !important;
    color: #000 !important;
  }
  
  p, .fs-5 {
    font-size: 11pt !important;
    color: #333 !important;
  }
  
  /* Contact information styling */
  .text-dark {
    color: #000 !important;
  }
  
  .text-muted {
    color: #666 !important;
  }
  
  /* Notes section styling */
  .bg-light {
    background-color: #f5f5f5 !important;
    border: 1px solid #ddd !important;
  }
  
  /* Remove Bootstrap responsive classes effects for print */
  .col-12, .col-md-3, .col-md-6, .col-lg-10, .col-xl-10 {
    width: 100% !important;
    max-width: none !important;
  }
  
  /* Ensure proper spacing for print */
  .mb-5 {
    margin-bottom: 20pt !important;
  }
  
  .mt-5 {
    margin-top: 20pt !important;
  }
  
  .p-4, .p-md-5 {
    padding: 15pt !important;
  }
  
  .py-4 {
    padding-top: 10pt !important;
    padding-bottom: 10pt !important;
  }
  
  /* Page break controls - One quote per page */
  .card {
    border: 1px solid #000 !important;
    margin-bottom: 15pt !important;
  }
  
  /* Force page break before each quote item (except first) */
  .quote-item {
    page-break-before: always !important;
    page-break-inside: avoid !important;
  }
  
  /* Don't page break before first quote */
  .quote-item:first-of-type {
    page-break-before: auto !important;
  }
  
  /* Comments/Notes section on separate page */
  .mt-5:has(.bg-light .fw-bold:contains("Note Aggiuntive")),
  .mt-5 .bg-light:has(.fw-bold:contains("Note Aggiuntive")) {
    page-break-before: always !important;
    page-break-inside: avoid !important;
  }
  
  /* Alternative selector for comments section */
  .bg-light.p-4.rounded-3:has(h4:contains("Note Aggiuntive")) {
    page-break-before: always !important;
    page-break-inside: avoid !important;
  }
  
  /* Fallback: Any .mt-5 div that contains .bg-light after quotes */
  .card-body .mt-5 {
    page-break-before: always !important;
    page-break-inside: avoid !important;
  }
  
  /* Ensure comments section has proper spacing when on separate page */
  .mt-5 .bg-light h4.fw-bold.text-primary.mb-3 {
    margin-top: 0 !important;
    padding-top: 20pt !important;
  }
  
  /* Style comments page header */
  .bg-light.p-4.rounded-3 {
    border: 1px solid #000 !important;
    background-color: #f8f9fa !important;
  }
  
  /* Header should only appear on first page */
  .card-header {
    page-break-after: avoid !important;
    page-break-inside: avoid !important;
    position: relative !important;
  }
  
  /* Ensure main content section starts properly after header */
  .text-center.mb-5 {
    page-break-after: avoid !important;
    margin-bottom: 30pt !important;
  }
  
  /* Create clear separation between header and quotes for print */
  .card-body:first-of-type {
    padding-top: 20pt !important;
  }
  
  /* Hide HR separators between quotes since each is on its own page */
  hr {
    display: none !important;
  }
  
  /* Ensure quote content doesn't break across pages */
  .quote-item .row,
  .quote-item .bg-light {
    page-break-inside: avoid !important;
  }
  
  /* Keep contact buttons with their quote */
  .quote-item .text-center.mt-4 {
    page-break-inside: avoid !important;
    page-break-before: avoid !important;
  }
  
  /* Force links to show URLs for print */
  a[href^="mailto:"]:after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666;
  }
  
  a[href^="tel:"]:after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666;
  }
  
  /* Override Bootstrap Icons for print */
  .bi::before {
    font-size: 10pt !important;
  }
  
  /* Fixed image dimensions for consistent print layout */
  
  /* Brand logos in header */
  .card-header img {
    width: auto !important;
    height: 40pt !important;
    max-width: 80pt !important;
    object-fit: contain !important;
  }
  
  /* Tire model images - single tire display */
  .quote-item .col-lg-5 img.img-fluid {
    width: 120pt !important;
    height: 120pt !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  
  /* Tire model images in accoppiata pairs */
  .quote-item .col-6 img.img-fluid {
    width: 80pt !important;
    height: 80pt !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  
  /* Brand logos in quote items */
  .quote-item img[style*="max-height: 60px"] {
    width: auto !important;
    height: 30pt !important;
    max-width: 60pt !important;
    object-fit: contain !important;
  }
  
  /* Tire image placeholders */
  .tire-image-placeholder {
    width: 120pt !important;
    height: 120pt !important;
    min-height: 120pt !important;
  }
  
  /* Accoppiata tire image placeholders */
  .col-6 .tire-image-placeholder {
    width: 80pt !important;
    height: 80pt !important;
    min-height: 80pt !important;
  }
  
  /* Ensure consistent spacing around images */
  .text-center.mb-3 {
    margin-bottom: 15pt !important;
  }
  
  /* Fix image container dimensions */
  .col-lg-5 .d-flex.flex-column {
    min-height: auto !important;
  }
}

/* Infinite Scroll Styles */
[data-infinite-scroll-target="loadMore"] {
  /* This is now invisible - just an intersection target */
  pointer-events: none;
}

[data-infinite-scroll-target="loading"] {
  transition: opacity 0.3s ease;
}

/* Smooth transitions for infinite scroll content */
.infinite-scroll-container {
  transition: min-height 0.3s ease;
}

/* Hide load more triggers when JavaScript is disabled */
@media screen {
  noscript + [data-infinite-scroll-target="loadMore"] {
    display: none !important;
  }
}