/* State Course Code Reference table — shared between:
     /audit/info.html  (used inside the CCI Data Audit Tool)
     /state-course-codes/index.html  (standalone reference page)

   Companion files:
     /js/code-reference.js          — fetches JSON, enriches rows, search filter
     /audit/data/state_course_codes.json — data, generated from CALPADS CSV

   Column order on rendered rows:
     1: Code (.code-cell)   2: Name   3: Description (.code-ref-def)   4: Also Accepted */

/* ---------- Group containers (the collapsible <details> per content area) ---------- */

.code-ref-group {
    border: 1px solid #e8ecf0;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fafbfc;
}

.code-ref-group > summary {
    cursor: pointer;
    padding: 10px 14px;
    font-size: 0.95rem;
    color: #026AB0;
    list-style: none;
    user-select: none;
}

.code-ref-group > summary::-webkit-details-marker { display: none; }

.code-ref-group > summary::before {
    content: '\25B6';
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.15s;
    font-size: 0.7rem;
}

.code-ref-group[open] > summary::before { transform: rotate(90deg); }

.code-ref-group > summary:hover { background: #f0f5fa; }

.code-ref-count {
    color: #888;
    font-weight: 400;
    font-size: 0.85rem;
}

/* ---------- The actual table inside each group ---------- */

.code-ref-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    background: white;
}

.code-ref-table thead th {
    text-align: left;
    padding: 8px 12px;
    background: #f0f5fa;
    color: #555;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #e8ecf0;
}

.code-ref-table tbody td {
    padding: 6px 12px;
    border-bottom: 1px solid #f0f3f5;
    vertical-align: top;
}

.code-ref-table tbody tr:last-child td {
    border-bottom: none;
}

.code-ref-table .code-cell {
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-weight: 600;
    color: #026AB0;
}

.code-ref-empty {
    color: #888;
    font-style: italic;
    padding: 12px 14px;
}

/* ---------- Per-row enrichment injected by /js/code-reference.js ---------- */

/* Bold the Name column (cell #2) so it stands out next to the muted
   description column to its right. */
.code-ref-table tbody td:nth-child(2) {
    font-weight: 600;
    color: #1a2733;
}

/* Give the Name column a stable, wide-enough share of the row so it
   isn't squeezed by long descriptions in the column to its right.
   Code stays 90px and Also Accepted stays 160px (set inline on each
   <th>); Name is fixed at 320px and Description absorbs the rest. */
.code-ref-table th:nth-child(2),
.code-ref-table tbody td:nth-child(2) {
    width: 320px;
}

/* Description column: smaller, muted, normal weight. */
.code-ref-table .code-ref-def {
    font-size: 0.82rem;
    font-weight: 400;
    color: #666;
    line-height: 1.45;
}

/* Red "Expired YYYY-MM-DD" pill appended to the code cell when a code's
   end date has passed. Today no rows in the curated list trigger this;
   it lights up automatically if a code ages out in a future CSV update. */
.code-ref-expired {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    background: #b03030;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 3px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ---------- Search input above the list ---------- */

.code-ref-search {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
    margin-bottom: 14px;
    box-sizing: border-box;
}

/* ---------- Standalone page chrome (only used on /state-course-codes/) ---------- */

/* Wrapper for the page's main content. Wider than the homepage hero-card
   and left-aligned so the table reads naturally. */
.ref-card {
    background: var(--white, #fff);
    border-radius: 12px;
    padding: 24px 28px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.ref-card h1 {
    color: var(--blue, #026AB0);
    font-size: 1.4rem;
    margin: 0 0 12px;
}

.ref-card p {
    color: var(--muted, #555);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0 0 12px;
}

.ref-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--blue, #026AB0);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    margin-bottom: 14px;
}

.ref-back:hover {
    text-decoration: underline;
}