/* ==========================================================================
   SSLListan — Custom Styles
   Bootstrap 5.3.3 and Font Awesome 6.5.1 loaded via CDN
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. CSS custom properties
   -------------------------------------------------------------------------- */

:root {
  --color-primary: #3295b7;
  --color-primary-dark: #006c85;
  --color-primary-darker: #005a70;
  --color-text-muted: #aaa;
  --color-border-light: #f3f3f3;

  --color-cell-green: #15793a;
  --color-cell-red: #c62828;
  --color-cell-yellow: #f9a825;
  --color-cell-orange: #e65100;
  --color-cell-grey: #5f6d73;
  --color-cell-text: #fff;
}

/* --------------------------------------------------------------------------
   1. Theme colors and links
   -------------------------------------------------------------------------- */

a {
  color: var(--color-primary-dark);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

::selection {
  background-color: var(--color-primary);
  color: #fff;
}

/* --------------------------------------------------------------------------
   2. Navbar override — teal theme instead of default dark
   Uses Bootstrap 5 CSS custom properties so no !important needed.
   -------------------------------------------------------------------------- */

.navbar {
  --bs-navbar-color: #666;
  --bs-navbar-hover-color: #333;
  --bs-navbar-active-color: #333;
  background-color: #fff;
}

/* --------------------------------------------------------------------------
   3. Bootstrap button overrides — primary matches theme
   Uses Bootstrap 5 CSS custom properties so no !important needed.
   -------------------------------------------------------------------------- */

.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary-dark);
  --bs-btn-hover-bg: var(--color-primary-dark);
  --bs-btn-hover-border-color: var(--color-primary-dark);
  --bs-btn-active-bg: var(--color-primary-dark);
  --bs-btn-active-border-color: var(--color-primary-darker);
}

/* --------------------------------------------------------------------------
   4. Layout containers (slim theme)
   -------------------------------------------------------------------------- */

.slim-feature {
  padding: 40px 0;
  border-bottom: 1px solid var(--color-border-light);
}

.slim-heading {
  margin: 10px 0 30px;
  text-align: center;
}

.slim-heading h2 {
  font-weight: 400;
  font-size: 22px;
  line-height: 37px;
  margin-bottom: 10px;
}

.slim-heading p {
  color: var(--color-text-muted);
  max-width: 500px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   5. Status color cells (used on td and span by JS)
   Scoped to .ssl-table to beat Bootstrap's table-striped
   specificity (tbody > tr:nth-of-type(odd) > *).
   -------------------------------------------------------------------------- */

.ssl-table td.cell-green {
  --bs-table-bg-state: var(--color-cell-green);
  background-color: var(--color-cell-green);
  color: var(--color-cell-text);
}

.ssl-table td.cell-red {
  --bs-table-bg-state: var(--color-cell-red);
  background-color: var(--color-cell-red);
  color: var(--color-cell-text);
}

.ssl-table td.cell-yellow {
  --bs-table-bg-state: var(--color-cell-yellow);
  background-color: var(--color-cell-yellow);
  color: #333;
}

.ssl-table td.cell-orange {
  --bs-table-bg-state: var(--color-cell-orange);
  background-color: var(--color-cell-orange);
  color: var(--color-cell-text);
}

.ssl-table td.cell-grey {
  --bs-table-bg-state: var(--color-cell-grey);
  background-color: var(--color-cell-grey);
  color: var(--color-cell-text);
}

/* When color classes are used on inline spans (site detail
   page), set background color and add padding for visibility. */
span.cell-green {
  background-color: var(--color-cell-green);
  color: var(--color-cell-text);
  padding: 1px 6px;
  border-radius: 3px;
}
span.cell-red {
  background-color: var(--color-cell-red);
  color: var(--color-cell-text);
  padding: 1px 6px;
  border-radius: 3px;
}
span.cell-yellow {
  background-color: var(--color-cell-yellow);
  color: #333;
  padding: 1px 6px;
  border-radius: 3px;
}
span.cell-orange {
  background-color: var(--color-cell-orange);
  color: var(--color-cell-text);
  padding: 1px 6px;
  border-radius: 3px;
}
span.cell-grey {
  background-color: var(--color-cell-grey);
  color: var(--color-cell-text);
  padding: 1px 6px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   6. SSL table
   -------------------------------------------------------------------------- */

.ssl-table {
  border-collapse: collapse;
  font-size: 0.88rem;
}

.ssl-table thead {
  background: #fff;
}

.ssl-table thead th {
  border-bottom: 2px solid var(--color-primary);
}

.ssl-table td {
  text-align: center;
  vertical-align: middle;
  border: 1px solid #e8e8e8;
  padding: 0.35rem 0.25rem;
}

.ssl-table tbody tr:hover {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

td.servercolumn {
  text-align: left;
}

/* --------------------------------------------------------------------------
   7. Rotated table headers
   The header height must accommodate the longest label
   rotated at 45deg. With labels up to ~25 chars and
   ~7px per char, the diagonal is ~125px. Set height
   to fit within the .table-responsive overflow clip.
   -------------------------------------------------------------------------- */

th.norotate {
  height: 100px;
  white-space: nowrap;
  vertical-align: bottom;
  text-align: left;
}

th.norotate > div > span {
  padding: 5px 10px;
}

th.rotate {
  height: 210px;
  white-space: nowrap;
  vertical-align: bottom;
}

th.rotate > div {
  /* Translate right and rotate -45deg. The Y offset
     shifts the pivot down from the cell top so text
     stays within the cell height (210px). */
  transform: translate(15px, -8px) rotate(315deg);
  width: 30px;
}

th.rotate > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
  white-space: nowrap;
}

/* Clickable header cursor is set inline by JS;
   add a subtle hover effect. */
th.rotate:hover,
th.norotate:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/* --------------------------------------------------------------------------
   8. Explain table (column explanation page)
   -------------------------------------------------------------------------- */

.explaintable td:first-child {
  font-weight: 600;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   9. Loading and error states
   These ID selectors match JS-rendered container IDs.
   -------------------------------------------------------------------------- */

#halloffame-table,
#hallofshame-table,
#issuer-organizations-table,
#issuer-names-table,
#site-table,
#site-info,
#site-history-table {
  min-height: 60px;
}

.loading-spinner {
  padding: 2rem 0;
  color: var(--color-text-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   11. Category filter buttons
   -------------------------------------------------------------------------- */

#category-buttons {
  margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   12. Averages display
   -------------------------------------------------------------------------- */

#averages-display {
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   13. Responsive adjustments
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
  .slim-feature {
    padding: 24px 0;
  }

  .slim-heading h2 {
    font-size: 18px;
    line-height: 28px;
  }

  th.rotate {
    height: 140px;
  }

  th.rotate > div {
    transform: translate(10px, 2px) rotate(315deg);
    width: 24px;
  }

  th.rotate > div > span,
  th.norotate > div > span {
    font-size: 0.8rem;
    padding: 3px 6px;
  }
}