/* ── Base ──────────────────────────────────────────────────────────────────── */
body { background-color: #f5f6fa; }

.navbar-brand { letter-spacing: .02em; }

.card { border-radius: .75rem; }
.card-header {
  border-radius: .75rem .75rem 0 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.display-6 { font-size: 2.2rem; }

.table th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6c757d;
  font-weight: 600;
}
.table td { font-size: .85rem; vertical-align: middle; }

/* Prevent long filenames from blowing table layout */
td code {
  display: inline-block;
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

code {
  font-size: .8rem;
  color: #495057;
  background: #e9ecef;
  padding: .1em .35em;
  border-radius: .25rem;
}

footer { background-color: #f5f6fa; }

canvas { max-height: 340px; }

/* Reserve space so page content is never hidden behind the fixed bottom bar */
body {
  padding-bottom: calc(3.25rem + env(safe-area-inset-bottom));
}

/* ── Preset button groups — allow wrapping on small screens ────────────────── */
.preset-group {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .75rem;
}
.preset-group .btn {
  border-radius: .375rem !important;  /* override btn-group square corners */
  flex: 1 0 auto;
}

/* ── Touch-friendly icon buttons ───────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .btn-icon { padding: .4rem .5rem !important; }

  /* Smaller stat counters on phones */
  .display-6 { font-size: 1.75rem; }

  /* Slightly smaller chart canvas height so it fits without scrolling */
  canvas { max-height: 240px; }

  /* Tighten card padding */
  .card-body { padding: .85rem; }

  /* Prevent iOS Safari from zooming when tapping any input or select.
     iOS zooms when focused font-size < 16px; override Bootstrap's -sm sizes. */
  input, select, textarea,
  .form-control, .form-control-sm,
  .form-select, .form-select-sm {
    font-size: 1rem !important;
  }

  /* Shorter filename codes in table cells */
  td code { max-width: 12ch; }
}

/* ── Sortable column headers ────────────────────────────────────────────────── */
th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
th.sortable:hover { background-color: rgba(0,0,0,.04); }
th.sortable .sort-icon { opacity: .45; font-size: .8em; }
th.sortable.text-primary .sort-icon { opacity: 1; }

/* ── Responsive border-end for md+ (used in global stats row) ──────────────── */
@media (min-width: 768px) {
  .border-end-md { border-right: 1px solid rgba(0,0,0,.1) !important; }
}

/* ── Hide low-priority table columns on small screens ──────────────────────── */
@media (max-width: 575.98px) {
  .col-xs-hide { display: none !important; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .col-sm-hide { display: none !important; }
}