/* ── Variables ───────────────────────────────────────────────── */
:root {
  --brand-red: #dc3545;
}

/* ── Layout ──────────────────────────────────────────────────── */
body {
  background-color: #f8f9fa;
}

.form-check .form-check-input {
    margin-left: -1.25em;
    margin-right: 0.5em;
}

.fs-7 {
    font-size: 0.75rem !important;
}

#filters-panel {
  width: 240px;
  min-width: 240px;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  position: sticky;
  top: 72px;
}

/* ── Navbar brand ─────────────────────────────────────────────── */
.navbar-brand span.brand-ram {
  color: var(--brand-red);
  font-weight: 800;
}
.navbar-brand span.brand-mageddon {
  color: #fff;
  font-weight: 600;
}


/* ── Filter card ─────────────────────────────────────────────── */
.filter-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6c757d;
}

.filter-scroll {
  max-height: 160px;
  overflow-y: auto;
}

/* ── Table ───────────────────────────────────────────────────── */
#products-table th,
#products-table td {
  padding: 0.5rem;
}

#products-table thead th {
  background-color: #212529;
  color: #f8f9fa;
  border-color: #343a40;
  user-select: none;
  vertical-align: middle;
}

#products-table thead th:hover {
  background-color: #343a40;
}

#products-table tbody tr:hover {
  background-color: rgba(13, 110, 253, 0.04);
}

/* ── Title column ────────────────────────────────────────────── */
#col-title {
  min-width: 400px;
}

/* ── Table area ─────────────────────────────────────────────── */
.table-area {
  min-width: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .table-area {
    width: 0;
    flex-grow: 1;
  }
}

/* ── Table wrapper ───────────────────────────────────────────── */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  border-radius: 0.5rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ── Mobile filter chevron ───────────────────────────────────── */
.filter-chevron {
  transition: transform 0.2s ease;
}

[aria-expanded="true"] .filter-chevron {
  transform: rotate(180deg);
}

/* ── Mobile filter accordion ─────────────────────────────────── */
@media (max-width: 768px) {
  #filters-panel {
    width: 100%;
    min-width: unset;
    max-height: unset;
    position: static;
  }
}