html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* ==== RFS-adjacent theme tokens (replace with your final hex picks) ==== */
:root {
    --brand-primary: #225eac; /* deep navy/blue */
    --brand-accent: #808080; /* gray accent */
    --brand-light: #e8f0fa; /* very light blue tint for row backgrounds */
    --brand-dark: #0b1e33; /* darker blue for titles if needed */
    --brand-hover: #337ce2; /* lighter blue for button hovering */
}

/* Title in the navbar/header */
.app-title {
    color: var(--brand-primary);
    letter-spacing: .25px;
}

/* Summary labels (top card) */
.summary-label {
    font-weight: 700;
    color: var(--brand-dark);
    font-size: 0.9rem; /* slightly larger */
    letter-spacing: 0.5px; /* optional emphasis */
    text-transform: uppercase;
    text-decoration: underline;
}

.summary-label-text {
    font-weight: 400;
}

/* Table theming */
.table-rfs > thead > tr > th {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
    white-space: nowrap;
    padding: 0.75rem 0.5rem;
    font-size: 0.85rem;

    /* Ensure visible borders between header cells */
    border: 1px solid rgba(0,0,0,.08);
    border-bottom-width: 2px;
    box-shadow: inset -1px 0 rgba(255,255,255,0.06);
}

/* Keep existing td styling */
.table-rfs > tbody > tr > td {
    background: #fff;
    border-top: 0;
    padding: 0.75rem 0.5rem;
    font-size: 0.85rem;
    word-break: break-word;
}

/* Light alternate tint to soften the white grid when many columns */
.table-rfs.table-striped-columns tbody td:nth-child(even) {
    background: var(--brand-light);
}

/* Optional: subtle cell borders */
.table-rfs td, .table-rfs th {
    border: 1px solid rgba(0,0,0,.075);
}

/* PIM table accent variant */
.table-rfs-pim > thead > tr > th {
    background: var(--brand-primary);
}

/* ====== MOBILE-RESPONSIVE TABLE STYLES ====== */

/* Desktop: keep horizontal scroll as fallback */
.table-wrapper {
    overflow-x: auto;
    margin-bottom: 1rem;
}

/* Mobile: stack rows vertically as cards */
@media (max-width: 767px) {
    .table-wrapper {
        overflow-x: visible;
        padding: 0;
    }

    /* Hide table headers on mobile and use data attributes */
    .table-rfs,
    .table-rfs tbody,
    .table-rfs tr,
    .table-rfs td {
        display: block;
        width: 100%;
    }

    .table-rfs {
        border-collapse: collapse;
    }

    /* Hide <thead> completely on mobile */
    .table-rfs thead {
        display: none;
    }

    /* Each row becomes a card on mobile */
    .table-rfs tbody tr {
        display: block;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        margin-bottom: 1rem;
        padding: 1rem;
        background: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    }

    /* Each cell becomes a row with label + value */
    .table-rfs tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border: none;
        background: transparent;
        position: relative;
    }

    /* Add label before each value (using CSS content from data attributes) */
    .table-rfs tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--brand-dark);
        margin-right: 1rem;
        text-align: left;
    }

    /* Alternating row backgrounds */
    .table-rfs tbody tr:nth-child(odd) {
        background: #fff;
    }

    .table-rfs tbody tr:nth-child(even) {
        background: var(--brand-light);
    }

    /* Remove padding from cards if striped */
    .table-rfs.table-striped-columns tbody td:nth-child(even) {
        background: transparent;
    }
}

/* Tablet: medium-sized tables with some responsiveness */
@media (min-width: 768px) and (max-width: 1024px) {
    .table-rfs > thead > tr > th {
        padding: 0.5rem 0.35rem;
        font-size: 0.8rem;
    }

    .table-rfs > tbody > tr > td {
        padding: 0.5rem 0.35rem;
        font-size: 0.8rem;
    }
}

.search-button {
    background-color: var(--brand-primary);
    color: white;
    border: none;
    border-radius: 7px;
    height: 35px;
    padding: 0 1.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.search-button:hover {
    background-color: var(--brand-hover);
}

.search-button:active {
    transform: scale(0.98);
}

/* ====== SPECIAL MODEL RL TABLE ROW LABELS ====== */

/* Shared style for both row-label cells */
.rl-row-label {
    font-weight: 700;
    white-space: nowrap;
    background: var(--brand-light);
    color: var(--brand-dark);
    padding: 0.75rem 0.75rem;
}

/* Frequency row label — tweak independently as needed */
.rl-freq-label {
}

/* Result row label — tweak independently as needed */
.rl-result-label {
    /* e.g. text-decoration: underline; */
}

/* ====== SPECIAL MODEL TABLE — MOBILE OVERRIDE ====== */
/* This table has only 2 data rows; card-stacking makes no sense.
   Keep it as a horizontally scrollable table on all screen sizes. */
@media (max-width: 767px) {
    .table-rfs-special,
    .table-rfs-special thead,
    .table-rfs-special tbody,
    .table-rfs-special tr,
    .table-rfs-special th,
    .table-rfs-special td {
      display: revert;
    }

    .table-rfs-special thead {
 display: revert;
    }

    .table-rfs-special tbody tr {
        display: revert;
border: revert;
      border-radius: revert;
 margin-bottom: revert;
 padding: revert;
        box-shadow: revert;
    }

.table-rfs-special tbody td {
      display: revert;
   justify-content: revert;
     padding: 0.5rem 0.35rem;
   font-size: 0.8rem;
    }

    .table-rfs-special tbody td::before {
  content: none;
  }

  .table-wrapper:has(.table-rfs-special) {
      overflow-x: auto;
    }
}

/* ====== SPECIAL MODEL MOBILE CARDS ====== */

.rl-special-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Card title bar — styled like the table header */
.rl-special-card-header {
    background: var(--brand-primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
    letter-spacing: 0.3px;
}

/* Each label+value row inside the card */
.rl-special-card-row {
 display: flex;
    justify-content: space-between;
    align-items: center;
padding: 0.5rem 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: #fff;
}

.rl-special-card-row:nth-child(even) {
    background: var(--brand-light);
}

.rl-special-card-label {
    font-weight: 700;
    color: var(--brand-dark);
    font-size: 0.85rem;
}

.rl-special-card-value {
    font-size: 0.85rem;
    color: #333;
}