/* Lens List Page Styling */

/* hide left menu on our lenses section */
.post-list-container { 
  display: none; 
}

/* shift the content over to fill the gap */
#main, .main-container { 
  margin-left: 0; 
}

/* Shared lens table styling for both main table and individual lens specs */
#lens-table,
.lens-specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875em; /* 2pt smaller */
  border: 1px dotted #5A5248; /* muted graphite brown */
  box-shadow: 0 2px 5px rgba(31,28,24,0.1); /* subtle shadow using text color */
  background-color: #EDE7DE; /* surface color for table background */
}

#lens-table th,
#lens-table td,
.lens-specs th,
.lens-specs td {
  padding: 4px 8px; /* more compact, matching lens-table.html */
  border: 1px dotted #5A5248; /* muted graphite brown */
  white-space: nowrap;
}

#lens-table thead th,
.lens-specs th {
  font-weight: bold;
  text-align: left;
  border: 1px dotted #5A5248; /* only thin dotted borders, no thick ones */
  background-color: #EDE7DE; /* same as surface color - no green tint */
  color: #1F1C18; /* warm ink black */
  text-shadow: 0 1px 0 rgba(255,255,255,0.3); /* subtle text shadow for depth */
}

/* Banded rows for both main table and specs table - apply to entire rows */
#lens-table tbody tr:nth-child(even),
#lens-table tbody tr:nth-child(even) th,
#lens-table tbody tr:nth-child(even) td,
.lens-specs tr:nth-child(even),
.lens-specs tr:nth-child(even) th,
.lens-specs tr:nth-child(even) td {
  background-color: #E5DED2; /* surface alt - zebra striping */
}

#lens-table tbody tr:nth-child(odd),
#lens-table tbody tr:nth-child(odd) th,
#lens-table tbody tr:nth-child(odd) td,
.lens-specs tr:nth-child(odd),
.lens-specs tr:nth-child(odd) th,
.lens-specs tr:nth-child(odd) td {
  background-color: #EDE7DE; /* surface color */
}

/* Special styling for price rows in specs table - override zebra striping */
.lens-specs tr.price-row,
.lens-specs tr.price-row th,
.lens-specs tr.price-row td {
  background-color: #D5E2D3 !important; /* sage-green tint for entire price row */
  color: #1F1C18; /* ensure text remains readable */
}

/* Filter panel styling */
#lens-filters {
  margin: 1em 0 0 0;
  display: flex;
  flex-wrap: wrap; /* Allow wrapping to multiple rows */
  gap: 0.3em;
  max-width: 100%;
}

#lens-filters fieldset {
  flex: 0 0 auto;
  min-width: 110px;
  border: 1px dotted #5A5248; /* muted graphite brown */
  padding: 0.3em;
  margin: 0;
  font-size: 0.875em;
  background-color: #EDE7DE; /* surface color - light background */
}

#lens-filters legend {
  padding: 0 0.3em;
}

#lens-filters fieldset label {
  display: block;
  padding: 0.1em 0;
  white-space: nowrap;
}

/* Sort dropdown styling */
#sort-select {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #5A5248; /* muted graphite brown */
  border-radius: 4px;
  background-color: #EDE7DE; /* surface color */
  color: #1F1C18; /* warm ink black */
  font-size: 0.9rem;
}

#sort-select:focus {
  outline: none;
  border-color: #C95E55; /* tomato-clay accent */
  box-shadow: 0 0 0 2px rgba(201, 94, 85, 0.2);
}

/* Sort Panel - Separate row styling */
#sort-panel {
  margin: 0.3em 0 1em 0;
  display: block;
}

#sort-panel fieldset {
  flex: 0 0 auto;
  min-width: 200px;
  border: 1px dotted #5A5248; /* muted graphite brown */
  padding: 0.3em;
  margin: 0;
  font-size: 0.875em;
  display: inline-block;
  background-color: #EDE7DE; /* surface color */
}

#sort-panel legend {
  padding: 0 0.3em;
}

/* Mobile responsive overrides */
@media (max-width: 768px) {
  /* Override nowrap for mobile */
  #lens-table th,
  #lens-table td {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
  
  /* Ensure full width usage - aggressive overrides for mobile */
  html, body {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  body #main,
  body .main-container,
  body main,
  body .content,
  body .container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.5rem !important;
    box-sizing: border-box !important;
  }
  
  /* Make table scrollable horizontally if needed */
  .table-container {
    overflow-x: auto;
    width: 100%;
  }
  
  /* Filter panel - force grid layout on mobile */
  #lens-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 0.5rem 0;
    width: 100%;
    flex-wrap: none;
    justify-content: stretch;
  }
  
  /* Fieldsets in grid layout */
  #lens-filters fieldset {
    margin: 0;
    padding: 0.5rem;
    min-width: auto;
    width: 100%;
    box-sizing: border-box;
    flex: none;
    max-width: none;
  }
  
  /* Labels stacked vertically within each fieldset */
  #lens-filters fieldset label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
    white-space: normal;
  }
  
  /* Sort panel mobile styling */
  #sort-panel {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin: 0.5rem 0;
  }
  
  #sort-panel fieldset {
    min-width: auto;
    width: 100%;
  }
}

/* Checkbox styling to match theme green accent color */
#lens-filters input[type="checkbox"] {
  accent-color: #D5E2D3; /* sage-green accent color from blockquotes */
}

/* For older browser support - custom checkbox styling */
#lens-filters input[type="checkbox"]:checked {
  background-color: #D5E2D3;
  border-color: #D5E2D3;
}
