/* =============================================================================
   CSU Sustainability Courses — Frontend Table Styles
   DataTables-enhanced table with CSU green color scheme.
   ============================================================================= */

/* ── CSS variables ─────────────────────────────────────────────────────────── */
.csu-sc-wrapper {
    --csu-green:        #1E4D2B;
    --csu-green-mid:    #2D7A45;
    --csu-green-light:  #e8f4ec;
    --csu-green-pale:   #f4fbf6;
    --csu-gold:         #C8A84B;
    --csu-blue:         #0069AA;
    --csu-border:       #d4e8da;
    --csu-text:         #1a1a1a;
    --csu-text-muted:   #5a6872;
    --csu-radius:       6px;
    --csu-shadow:       0 1px 4px rgba(0,0,0,.08);
    font-family: inherit;
    color: var(--csu-text);
    margin: 0 0 32px;
}

/* ── Filter bar ────────────────────────────────────────────────────────────── */
.csu-sc-filters {
    background: var(--csu-green-pale);
    border: 1px solid var(--csu-border);
    border-radius: var(--csu-radius);
    padding: 16px 18px 14px;
    margin-bottom: 12px;
}

.csu-sc-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}

.csu-sc-filter-row--search { margin-bottom: 12px; }

/* Search input */
.csu-sc-search-wrap {
    position: relative;
    flex: 1 1 260px;
}

.csu-sc-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--csu-text-muted);
    pointer-events: none;
    display: flex;
    align-items: center;
}

.csu-sc-search-input {
    width: 100%;
    padding: 9px 12px 9px 34px !important;
    border: 1px solid #bcd0c4;
    border-radius: var(--csu-radius);
    font-size: 14px;
    line-height: 1.4;
    background: #fff;
    color: var(--csu-text);
    box-shadow: var(--csu-shadow);
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}

.csu-sc-search-input:focus {
    outline: none;
    border-color: var(--csu-green-mid);
    box-shadow: 0 0 0 3px rgba(45,122,69,.18);
}

/* Per-page length selector */
.csu-sc-length-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.csu-sc-length-suffix {
    font-size: 13px;
    color: var(--csu-text-muted);
}

.csu-sc-length-select { width: auto; min-width: 68px; }

/* Dropdown filter groups */
.csu-sc-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 150px;
    min-width: 140px;
}

.csu-sc-filter-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--csu-green);
}

.csu-sc-filter,
.csu-sc-length-select {
    padding: 8px 28px 8px 10px;
    border: 1px solid #bcd0c4;
    border-radius: var(--csu-radius);
    font-size: 13px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231E4D2B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 9px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--csu-text);
    cursor: pointer;
    box-shadow: var(--csu-shadow);
    transition: border-color .15s, box-shadow .15s;
    width: 100%;
    box-sizing: border-box;
}

.csu-sc-filter:focus,
.csu-sc-length-select:focus {
    outline: none;
    border-color: var(--csu-green-mid);
    box-shadow: 0 0 0 3px rgba(45,122,69,.18);
}

/* Reset button */
.csu-sc-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    border: 1px solid var(--csu-green);
    border-radius: var(--csu-radius);
    background: transparent;
    color: var(--csu-green);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
    align-self: flex-end;
    flex-shrink: 0;
}

.csu-sc-reset-btn:hover { background: var(--csu-green); color: #fff; }
.csu-sc-reset-btn svg   { flex-shrink: 0; }

/* ── Toolbar ────────────────────────────────────────────────────────────────── */
.csu-sc-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    min-height: 24px;
}

.csu-sc-info {
    margin: 0;
    font-size: 13px;
    color: var(--csu-text-muted);
}

.csu-sc-active-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.csu-sc-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 10px;
    background: var(--csu-green-light);
    border: 1px solid var(--csu-border);
    border-radius: 99px;
    font-size: 12px;
    color: var(--csu-green);
    font-weight: 500;
}

.csu-sc-tag-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--csu-green);
    padding: 0 0 0 2px;
    font-size: 15px;
    line-height: 1;
    display: flex;
    align-items: center;
    opacity: .7;
}

.csu-sc-tag-remove:hover { opacity: 1; }

/* ── Table wrapper ──────────────────────────────────────────────────────────── */
.csu-sc-table-wrap {
    overflow-x: auto;
    border-radius: var(--csu-radius);
    box-shadow: var(--csu-shadow);
    border: 1px solid var(--csu-border);
}

/* ── DataTables base table ──────────────────────────────────────────────────── */
table.csu-sc-table.dataTable {
    width: 100% !important;
    border-collapse: collapse;
    font-size: 14px;
    margin: 0 !important;
}

/* Header */
table.csu-sc-table thead th {
    background: var(--csu-green);
    color: #fff;
    padding: 11px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    border-bottom: none;
    white-space: nowrap;
    position: relative;
    user-select: none;
}

/* Sort indicators — override DataTables' default sprite */
table.csu-sc-table.dataTable thead th.sorting,
table.csu-sc-table.dataTable thead th.sorting_asc,
table.csu-sc-table.dataTable thead th.sorting_desc {
    padding-right: 28px;
    cursor: pointer;
    background-image: none !important;
}

table.csu-sc-table.dataTable thead th.sorting::after,
table.csu-sc-table.dataTable thead th.sorting_asc::after,
table.csu-sc-table.dataTable thead th.sorting_desc::after {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
}

table.csu-sc-table.dataTable thead th.sorting::after       { content: '⇅'; opacity: .45; }
table.csu-sc-table.dataTable thead th.sorting_asc::after   { content: '↑'; opacity: 1; }
table.csu-sc-table.dataTable thead th.sorting_desc::after  { content: '↓'; opacity: 1; }

table.csu-sc-table.dataTable thead th:hover { background-color: var(--csu-green-mid); }

/* Body rows */
table.csu-sc-table tbody tr { background: #fff; transition: background .1s; }
table.csu-sc-table tbody tr:nth-child(even) { background: var(--csu-green-pale); }

table.csu-sc-table tbody tr:hover,
table.csu-sc-table tbody tr:hover td { background: var(--csu-green-light) !important; }

table.csu-sc-table tbody tr.csu-sc-expanded,
table.csu-sc-table tbody tr.csu-sc-expanded td { background: var(--csu-green-light) !important; }

table.csu-sc-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid #edf4ef;
    vertical-align: middle;
    line-height: 1.45;
}

table.csu-sc-table tbody td.dataTables_empty {
    text-align: center;
    padding: 36px 20px;
    color: var(--csu-text-muted);
    font-style: italic;
}

/* ── Column styles ──────────────────────────────────────────────────────────── */
.csu-sc-code {
    font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace;
    font-size: 13px;
    white-space: nowrap;
    color: var(--csu-green);
    font-weight: 600;
    min-width: 80px;
}

.csu-sc-title   { min-width: 200px; }
.csu-sc-dept    { font-size: 13px; min-width: 160px; }
.csu-sc-level   { white-space: nowrap; font-size: 13px; }

/* SDG Goals (col 5) is a hidden data-only column now — it just powers the
   "SDG Goal" dropdown filter and has no visible styling. */

/* Keyword or Sustainable Development Goal — free-text, last visible column */
.csu-sc-keyword {
    min-width: 220px;
    max-width: 340px;
    font-size: 13px;
    color: var(--csu-text-muted, #555);
    white-space: normal;
    word-break: break-word;
}

.csu-sc-title a {
    color: var(--csu-blue);
    text-decoration: none;
    font-weight: 500;
}

.csu-sc-title a:hover { text-decoration: underline; }

/* ── Classification badges ──────────────────────────────────────────────────── */
.csu-sc-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.csu-sc-badge--focused   { background: var(--csu-green); color: #fff; }
.csu-sc-badge--inclusive { background: var(--csu-blue);  color: #fff; }

/* ── Expand button ──────────────────────────────────────────────────────────── */
.csu-sc-expand {
    background: none;
    border: 1px solid var(--csu-border);
    border-radius: 4px;
    cursor: pointer;
    padding: 2px 4px;
    margin-left: 6px;
    color: var(--csu-green);
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    opacity: .75;
    transition: opacity .15s, background .15s;
}

.csu-sc-expand:hover { opacity: 1; background: var(--csu-green-light); }

.csu-sc-expand .csu-expand-icon {
    transition: transform .2s ease;
    display: block;
}

.csu-sc-expanded .csu-sc-expand .csu-expand-icon { transform: rotate(180deg); }

/* ── Child / detail row ─────────────────────────────────────────────────────── */
table.csu-sc-table tbody tr.child td.child {
    padding: 0 !important;
    border-bottom: 2px solid var(--csu-green-light) !important;
    background: #fff !important;
}

.csu-sc-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 14px 18px 14px 28px;
    background: #fff;
    border-top: 2px solid var(--csu-green-light);
    gap: 0;
}

.csu-sc-detail-section { padding: 6px 16px 6px 0; }

.csu-sc-detail-section + .csu-sc-detail-section {
    border-left: 1px solid var(--csu-border);
    padding-left: 16px;
    padding-right: 0;
}

.csu-sc-detail-section strong {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--csu-green);
    margin-bottom: 5px;
}

.csu-sc-detail-section p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--csu-text-muted);
}

/* ── DataTables footer ──────────────────────────────────────────────────────── */
.csu-dt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 2px 0;
}

/* Pagination */
.dataTables_paginate {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
}

.dataTables_paginate .paginate_button {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid var(--csu-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: var(--csu-green) !important;
    text-decoration: none !important;
    background: #fff;
    transition: background .12s, color .12s;
    line-height: 1.4;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: #fff !important;
}

.dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background: var(--csu-green-light);
    border-color: var(--csu-green);
}

.dataTables_paginate .paginate_button.current {
    background: var(--csu-green) !important;
    color: #fff !important;
    border-color: var(--csu-green);
    font-weight: 700;
}

.dataTables_paginate .paginate_button.disabled { opacity: .35; cursor: not-allowed; }

.dataTables_info {
    font-size: 13px;
    color: var(--csu-text-muted);
}

/* Processing overlay */
.dataTables_processing {
    background: rgba(255,255,255,.9);
    font-size: 13px;
    color: var(--csu-green);
    font-weight: 600;
    padding: 10px 20px;
    border: 1px solid var(--csu-border);
    border-radius: var(--csu-radius);
    box-shadow: var(--csu-shadow);
}

/* Empty state */
.csu-sc-empty {
    padding: 24px;
    text-align: center;
    color: var(--csu-text-muted);
    border: 1px dashed var(--csu-border);
    border-radius: var(--csu-radius);
}

/* SDG dropdown — allow more room for the long goal names */
.csu-sc-filter-group--sdg { flex: 2 1 220px; min-width: 200px; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .csu-sc-filter-group { flex: 1 1 calc(50% - 6px); min-width: 120px; }

    .csu-sc-detail { grid-template-columns: 1fr; }

    .csu-sc-detail-section + .csu-sc-detail-section {
        border-left: none;
        border-top: 1px solid var(--csu-border);
        padding-left: 0;
        padding-top: 12px;
        margin-top: 8px;
    }

    .csu-dt-footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
    .csu-sc-filter-group,
    .csu-sc-length-wrap { flex: 1 1 100%; }
}