/* ── Shared responsive & dark-mode readability ── */

/* Better base dark-mode contrast */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ── Table pages: mobile horizontal scroll ── */
@media (max-width: 768px) {
  /* Header: wrap nicely on mobile */
  header {
    padding: .5rem !important;
    gap: .4rem !important;
  }
  header h1 {
    font-size: .9rem !important;
    white-space: normal !important;
    width: 100%;
    margin-bottom: .2rem !important;
  }
  .btn {
    padding: .3rem .45rem !important;
    font-size: .78rem !important;
  }
  .search-box {
    width: 100% !important;
    max-width: none !important;
  }
  #date-select {
    max-width: 140px;
  }
  #count {
    width: 100%;
    text-align: center;
    padding-top: .3rem;
  }
  .filter-label {
    font-size: .8rem !important;
  }

  /* Main content padding */
  main {
    padding: .4rem .5rem 1.5rem !important;
  }

  /* Table: horizontal scroll wrapper */
  table {
    font-size: .78rem !important;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  thead, tbody, tr, th, td {
    /* Keep table layout working with block display */
  }
  th {
    padding: .4rem .35rem !important;
    font-size: .75rem !important;
  }
  td {
    padding: .35rem .35rem !important;
    font-size: .78rem !important;
  }

  /* Charts: single column */
  .charts {
    grid-template-columns: 1fr !important;
  }
  .chart-label {
    width: 90px !important;
    font-size: .72rem !important;
  }

  /* Summary text */
  .summary {
    font-size: .8rem !important;
  }

  /* Tags & badges: slightly smaller */
  .tag {
    font-size: .68rem !important;
    padding: .08rem .3rem !important;
  }
  .ipbadge {
    font-size: .7rem !important;
  }
  .cert-line {
    font-size: .74rem !important;
  }
}

/* ── Extra small screens (phones) ── */
@media (max-width: 480px) {
  header h1 {
    font-size: .85rem !important;
  }
  .btn {
    padding: .25rem .4rem !important;
    font-size: .72rem !important;
  }
  table {
    font-size: .72rem !important;
  }
  th, td {
    padding: .3rem .25rem !important;
  }
  .domain-sub {
    font-size: .68rem !important;
  }
  .ns-list {
    font-size: .7rem !important;
  }
  .msg {
    font-size: .7rem !important;
  }
  .contact-list {
    font-size: .72rem !important;
  }
}

/* ── Dark mode readability improvements ── */

/* Boost muted text contrast for readability */
.summary { color: #b0b0b0 !important; }
.domain-sub { color: #7a7a7a !important; }
.loading { color: #888 !important; }
th { color: #bbb !important; }
td { border-bottom-color: #1e1e22 !important; }
tr:hover td { background: #18181c !important; }

/* Slightly brighter status colors for dark backgrounds */
.ok, .name-green, .status-green, .cat-ok, .valid, .expires-ok, .cert-ok { color: #34d058 !important; }
.fail, .name-red, .status-red, .cat-bad, .missing, .expires-bad, .cert-crit { color: #f85149 !important; }
.name-orange, .status-orange, .found, .expires-warn, .cert-warn { color: #f0a020 !important; }
.na, .status-white { color: #777 !important; }
.note.warn, .msg.warn { color: #f0a020 !important; }
.note.bad, .msg.err { color: #f85149 !important; }

/* Better link/interactive colors */
.ns-list, .contact-list { color: #8db9ff !important; }
.raw-toggle, .msg-toggle { color: #8db9ff !important; }

/* Checkbox visibility */
input[type="checkbox"] {
  accent-color: #34d058;
  width: 16px;
  height: 16px;
}