/* UARK Schedule of Classes — style.css
   Built on Bootstrap 5.3 — custom overrides only */

/*
   OFFICIAL UARK BRAND COLORS (per University web color guidelines)
   Use these variables instead of raw hex so the palette stays
   consistent and brand-compliant across the whole site.

   WCAG text-overlay rules:
     On Razorback Red  to white text AAA at 12px+  (ratio 7.74)
     On Old Main Brick to white text AAA           (ratio 12.88)
     Body text on white to use Spoofers Stone / black (AAA)
*/
:root {
    --uark-razorback-red: #9D2235;
    --uark-old-main-brick: #611327;
    --uark-apple-blossom: #FFFFFF;
    --uark-quartz: #F2F2F4;
    --uark-gray-squirrel: #C7C8CA;
    --uark-spoofers-stone: #424242;
    --uark-black-whetstone: #000000;
    --uark-diana-butterfly: #2B5269;
    --uark-ozark-mountains: #3F7F7F;
    --uark-birdsfoot-violet: #2F1332;
    --uark-kings-river: #007698;
    --uark-founders-walk: #707A33;
    --uark-pale-dawn: #D5EAE9;
    --uark-spiderwort: #655765;
    --uark-fall-maple: #DBC759;
    --uark-white-river-sand: #DDDCC5;
    --uark-blue-winged-teal: #68C1BE;
    --uark-summer-sky: #9DC9D5;
    --uark-arkansas-marvel: #CA6A29;
    --uark-focus-ring: #9d2235;
}

.container-fluid.px-0 {
    background: linear-gradient( to right, #f8f9fa var(--soc-sidebar-width, 25%), #ffffff var(--soc-sidebar-width, 25%) );
    margin-top: -20px;
    margin-bottom: -20px;
}

body.soc-standalone .container-fluid.px-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.soc-page-header {
    background: var(--uark-razorback-red);
    border-bottom: 3px solid var(--uark-old-main-brick);
}

.soc-logo {
    height: 48px;
    width: auto;
    border-radius: 4px;
}

.soc-page-title {
    font-size: clamp(1rem, 2.5vw, 1.4rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: .06em;
}

.soc-page-sub {
    font-size: .78rem;
    color: rgba(255,255,255,.82);
}

/* Sidebar — fills available height and scrolls independently */
.soc-sidebar-col {
    height: auto;
    overflow-y: visible;
    overflow-x: hidden;
    background: #f8f9fa;
    border-right: 1px solid #dee2e6;
    scrollbar-width: thin;
    display: flex;
    flex-direction: column;
}

/* Desktop: drag-resizable width. Default 25%, min 200px, max 40vw. */
@media (min-width: 768px) {
    html.soc-standalone, body.soc-standalone {
        height: 100dvh;
        overflow: hidden;
    }

    .soc-sidebar-col {
        flex: 0 0 var(--soc-sidebar-width, 25%);
        width: var(--soc-sidebar-width, 25%);
        min-width: 200px;
        max-width: 40vw;
        min-height: 0;
        height: var(--soc-app-height, 100dvh);
        max-height: var(--soc-app-height, 100dvh);
        overflow-y: auto;
    }

    .soc-main-col {
        flex: 1 1 0;
        min-width: 0;
        height: var(--soc-app-height, 100dvh);
        max-height: var(--soc-app-height, 100dvh);
        overflow: hidden;
    }

    .row.g-0 {
        align-items: stretch;
        height: var(--soc-app-height, 100dvh);
    }
}

/* Mobile: natural page scroll — undoes viewport-lock for small screens */
@media (max-width: 767.98px) {
    .container-fluid.px-0, .row.g-0 {
        display: block;
    }

    .soc-main-col {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 0;
    }

    .soc-toolbar {
        position: static;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
    }

        .soc-toolbar > .ms-auto {
            min-width: 0 !important;
            max-width: 100% !important;
            width: 100%;
        }

    .soc-feed-wrap {
        overflow: visible;
        height: auto;
        background: #fff;
    }

    #soc-pager,
    #soc-info {
        position: static;
    }
}

.soc-sidebar-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.soc-sidebar-filters {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0.5rem;
}

    .soc-sidebar-filters > .soc-sidebar-header,
    .soc-sidebar-filters > .soc-sidebar-search {
        flex: 0 0 auto;
    }

    /* Each filter section grows equally to fill leftover space */
    .soc-sidebar-filters > .soc-filter-section {
        flex: 1 0 auto;
        min-height: max-content;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

.soc-sidebar-col::-webkit-scrollbar {
    width: 5px;
}

.soc-sidebar-col::-webkit-scrollbar-thumb {
    background: #ced4da;
    border-radius: 3px;
}

.soc-filter-label {
    font-size: .8rem;
    font-weight: 700;
    color: #495057;
    margin-bottom: .25rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.soc-filter-section .form-select,
.soc-filter-section .form-control {
    font-size: .95rem;
    min-height: 40px;
}

.soc-sidebar-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
}

.offcanvas-header {
    background: var(--uark-razorback-red);
}

.offcanvas-title {
    color: #fff;
}

/*
   MAIN COLUMN AS A FLEX SHELL
*/
.soc-main-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.soc-toolbar {
    flex: 0 0 auto;
    min-height: 48px;
    background: #fff !important;
    border-bottom: 1px solid #dee2e6;
    z-index: 30;
}

@media (min-width: 768px) {
    #soc-global-search {
        width: 220px;
    }
}

#activeFilterBar {
    flex: 0 0 auto;
    display: none;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
    padding: .25rem 1rem;
}

    #activeFilterBar.show {
        display: block;
    }

/* Feed container — flex:1 fills remaining height; min-height:0 required */
.soc-feed-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

/* flex-grow + min-height:0 required together so the table fills soc-feed-wrap */
.soc-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    background: #fff;
}

/* Sticky thead — JS sets --soc-labelrow-height for filter row offset */
.soc-thead {
    position: relative;
    z-index: 15;
}

.soc-thead-labels .soc-th {
    position: sticky;
    top: 0;
    z-index: 16;
}

.soc-thead-filters .soc-th {
    position: sticky;
    top: var(--soc-labelrow-height, 38px);
    z-index: 15;
}

/* border-top removed in favor of box-shadow — a real border interacts with
   the flex height math above and reintroduces the 3px seam gap */
#soc-pager {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border-top: none;
    box-shadow: 0 -1px 0 #dee2e6;
    background: #f8f9fa;
    margin: 0;
    min-height: 48px;
}

#soc-info {
    flex: 0 0 auto;
    font-size: .8125rem;
    color: #555;
    padding: .25rem 1rem .5rem;
    margin: 0;
    background: #f8f9fa;
    min-height: 28px;
}

/* Primary button — UARK Razorback Red */
.btn-primary {
    --bs-btn-bg: var(--uark-razorback-red);
    --bs-btn-border-color: var(--uark-razorback-red);
    --bs-btn-hover-bg: var(--uark-old-main-brick);
    --bs-btn-hover-border-color: var(--uark-old-main-brick);
    --bs-btn-active-bg: var(--uark-old-main-brick);
    --bs-btn-focus-shadow-rgb: 157,34,53;
}

/* Export button — UARK Founders Walk green. White on #707A33 = 4.65 (AA). */
.btn-success {
    --bs-btn-bg: var(--uark-founders-walk);
    --bs-btn-border-color: var(--uark-founders-walk);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #5F672B;
    --bs-btn-hover-border-color: #5F672B;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #5F672B;
    --bs-btn-active-border-color: #5F672B;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 112,122,51;
}

/* CSV export button — UARK Founders Walk green, mirrors .btn-success pattern */
.btn-csv {
    --bs-btn-bg: var(--uark-founders-walk);
    --bs-btn-border-color: var(--uark-founders-walk);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #5F672B;
    --bs-btn-hover-border-color: #5F672B;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #5F672B;
    --bs-btn-active-border-color: #5F672B;
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: 112,122,51;
}

/* Select2 */
.select2-container--bootstrap-5 .select2-selection {
    min-height: 40px !important;
    font-size: .95rem !important;
    border-color: #dee2e6 !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--uark-razorback-red) !important;
    box-shadow: 0 0 0 .25rem rgba(157,34,53,.25) !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
    border-color: var(--uark-razorback-red) !important;
    z-index: 9050 !important;
}

.select2-container--open .select2-dropdown .select2-search--dropdown {
    display: block !important;
    width: 100% !important;
    padding: 6px !important;
    box-sizing: border-box !important;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline {
    flex-basis: 100% !important;
}

    .select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline .select2-search__field {
        width: 100% !important;
        min-width: 120px !important;
        height: 28px !important;
        padding: 4px 6px !important;
        font-size: .85rem !important;
        box-sizing: border-box !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

.select2-container--open .select2-dropdown .select2-search--dropdown .select2-search__field {
    display: block !important;
    width: 100% !important;
    height: 36px !important;
    padding: 6px 10px !important;
    font-size: .9rem !important;
    border: 1px solid #dee2e6 !important;
    border-radius: .25rem !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: #fff !important;
    color: #212529 !important;
    box-sizing: border-box !important;
}

    .select2-container--open .select2-dropdown .select2-search--dropdown .select2-search__field:focus {
        border-color: var(--uark-razorback-red) !important;
        outline: none !important;
        box-shadow: none !important;
    }

.offcanvas .select2-container--bootstrap-5 .select2-dropdown {
    z-index: 1060 !important;
}

.offcanvas .select2-search__field {
    pointer-events: auto !important;
    -webkit-user-select: text !important;
    user-select: text !important;
}

.select2-container--open {
    z-index: 1060 !important;
}

.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: var(--uark-razorback-red) !important;
    color: #fff !important;
}

.select2-container--bootstrap-5 .select2-selection__choice {
    background-color: var(--uark-razorback-red) !important;
    border: none !important;
    color: #fff !important;
    font-size: .72rem !important;
}

.select2-container--bootstrap-5 .select2-selection__choice__remove {
    filter: brightness(0) invert(1);
    opacity: .9;
}

    .select2-container--bootstrap-5 .select2-selection__choice__remove:hover {
        opacity: 1;
    }

.select2-results__option[data-select2-hidden="true"] {
    display: none !important;
}

/* jQuery UI Autocomplete */
.ui-autocomplete {
    z-index: 100002 !important;
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 1.5px solid var(--uark-razorback-red);
    border-radius: .375rem;
    font-size: .82rem;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.15);
}

    .ui-autocomplete .ui-menu-item-wrapper {
        padding: .35rem .75rem;
        white-space: normal;
        word-break: break-word;
        line-height: 1.4;
        border-left: 3px solid transparent;
    }

.ui-autocomplete-input:focus {
    border-color: #dee2e6 !important;
    box-shadow: none !important;
}

.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-focus,
.ui-autocomplete .ui-menu-item.ui-state-active,
.ui-autocomplete .ui-menu-item.ui-state-focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: var(--uark-razorback-red) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-left: 3px solid var(--uark-razorback-red) !important;
}

/* Loading / empty / error states */
.soc-feed-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 3rem 1rem;
    color: #6c757d;
}

.soc-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #dee2e6;
    border-top-color: var(--uark-razorback-red);
    border-radius: 50%;
    animation: soc-spin .7s linear infinite;
}

@keyframes soc-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Empty and error alerts — tinted bg, colored left border */
.soc-feed-empty,
.soc-feed-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    margin: 1rem;
    border-radius: .375rem;
    border-left: 4px solid;
    font-size: .875rem;
    gap: .5rem;
}

.soc-feed-empty {
    color: var(--uark-spoofers-stone);
    background: var(--uark-quartz);
    border-left-color: var(--uark-diana-butterfly);
}

/* #842029 on #f8d7da = 7.08 contrast ratio (AAA) */
.soc-feed-error {
    color: #842029;
    background: #f8d7da;
    border-left-color: var(--uark-razorback-red);
}

/* border-collapse:separate required for sticky thead */
.soc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .8125rem;
    table-layout: auto;
    background: #fff;
}

.soc-th-toggle,
.soc-td-toggle {
    width: 36px;
    text-align: center;
    padding: 0 6px;
}

.soc-th:nth-child(2) {
    min-width: 260px;
}

.soc-th:nth-child(3) {
    min-width: 100px;
}

.soc-th:nth-child(4) {
    min-width: 150px;
}

.soc-th:nth-child(5) {
    min-width: 95px;
}

.soc-th:nth-child(6) {
    min-width: 95px;
}

.soc-th:nth-child(7) {
    min-width: 260px;
}

.soc-th:nth-child(8) {
    min-width: 75px;
}

.soc-th-enr {
    min-width: 95px;
}

.soc-thead-labels .soc-th {
    border-bottom: none;
}

.soc-th {
    background: var(--uark-razorback-red);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 0;
    border-right: 1px solid rgba(255,255,255,.15);
    white-space: nowrap;
    user-select: none;
}

    .soc-th:last-child {
        border-right: none;
    }

.soc-th-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 9px 10px;
}

.soc-th-sortable {
    cursor: pointer;
}

    .soc-th-sortable:hover,
    .soc-th-sortable:focus {
        background: var(--uark-old-main-brick);
        outline: none;
    }

    .soc-th-sortable:focus-visible {
        outline: 3px solid #fff !important;
        outline-offset: -3px !important;
    }

.soc-sort-icon {
    font-size: .6875rem;
    color: rgba(255,255,255,.5);
    flex-shrink: 0;
}

.soc-th[aria-sort="ascending"] .soc-sort-icon::after {
    content: ' ↑';
    color: #fff;
}

.soc-th[aria-sort="descending"] .soc-sort-icon::after {
    content: ' ↓';
    color: #fff;
}

.soc-th:not([aria-sort="ascending"]):not([aria-sort="descending"]) .soc-sort-icon::after {
    content: ' ↕';
}

/* Filter row */
.soc-thead-filters .soc-th {
    background: #f5f6f7;
    border-top: 1px solid #dee2e6;
    border-bottom: 2px solid #dee2e6;
    padding: 3px 4px;
}

.soc-filter-cell {
    display: flex;
    align-items: center;
    gap: 2px;
}

.soc-filter-input {
    flex: 1;
    min-width: 0;
    height: 24px;
    font-size: .75rem;
    padding: 0 5px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    background: #fff;
    color: #212529;
    outline: none;
}

    .soc-filter-input:focus {
        border-color: var(--uark-razorback-red);
        box-shadow: 0 0 0 .15rem rgba(157,34,53,.2);
    }

.soc-filter-funnel,
.soc-filter-clear {
    background: none;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    width: 22px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .6875rem;
    color: #555;
    padding: 0;
    flex-shrink: 0;
    transition: background .1s, color .1s;
}

    .soc-filter-funnel:hover,
    .soc-filter-funnel.soc-filter-active {
        background: var(--uark-razorback-red);
        color: #fff;
        border-color: var(--uark-razorback-red);
    }

    .soc-filter-clear:hover:not(:disabled) {
        background: #6c757d;
        color: #fff;
        border-color: #6c757d;
    }

    .soc-filter-clear:disabled {
        opacity: .3;
        cursor: default;
    }

/* Operator popup */
#soc-op-popup {
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    min-width: 140px;
    padding: .25rem 0;
    z-index: 9055;
}

    #soc-op-popup ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #soc-op-popup li {
        padding: .4rem .9rem;
        font-size: .8125rem;
        cursor: pointer;
        white-space: nowrap;
    }

        #soc-op-popup li:hover {
            background: #f8f9fa;
        }

        #soc-op-popup li.active {
            background: var(--uark-razorback-red);
            color: #fff;
            font-weight: 600;
        }

/* Body rows */
.soc-tr {
    background: #fff;
    border-bottom: 1px solid #e9ecef;
}

.soc-tr-odd {
    background: #f8f9fa;
}

.soc-tr:hover td {
    background: #edf2f7 !important;
    cursor: pointer;
}

.soc-tr-open td {
    background: #fdf5f6 !important;
}

.soc-td {
    padding: 8px 10px;
    vertical-align: middle;
    border-right: 1px solid #e9ecef;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
}

    .soc-td:last-child {
        border-right: none;
    }

.soc-expand-btn {
    background: none;
    border: none;
    border-radius: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--uark-razorback-red);
    font-size: 1.1rem;
    padding: 0;
    transition: color .15s, transform .15s;
}

    .soc-expand-btn:hover,
    .soc-expand-btn:focus-visible {
        color: var(--uark-old-main-brick);
        transform: scale(1.2);
        outline: 2px solid var(--uark-focus-ring);
        outline-offset: 2px;
    }

.soc-td-section {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--uark-spoofers-stone);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.soc-td-subtitle {
    display: block;
    font-size: .6875rem;
    color: #495057;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.soc-td-val {
    font-size: .8125rem;
    color: #212529;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.soc-td-enr {
    text-align: right;
}

.soc-enr-num {
    font-size: .8125rem;
    font-weight: 600;
}

.soc-td-days {
    white-space: nowrap;
    overflow: hidden;
}

    .soc-td-days::before {
        display: none !important;
        content: none !important;
    }

    .soc-td-days .soc-day-badge {
        margin-right: 2px;
    }

.soc-day-badge {
    display: inline-block;
    font-size: .6875rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: .2rem;
    background: var(--uark-pale-dawn);
    color: var(--uark-spoofers-stone);
}

.soc-dim {
    color: #555555;
    font-size: .8125rem;
}

/* Expand row */
.soc-tr-expand {
    display: none;
}

    .soc-tr-expand.open {
        display: table-row;
    }

.soc-td-expand {
    padding: 0;
    background: #fff;
    border-bottom: 2px solid var(--uark-razorback-red);
    border-left: 4px solid var(--uark-razorback-red);
}

.soc-exp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
}

.soc-exp-row {
    border-bottom: 1px solid #e9ecef;
}

    .soc-exp-row:last-child {
        border-bottom: none;
    }

    .soc-exp-row:hover {
        background: #f8f9fa;
    }

.soc-exp-row--match {
    background: #fff3f3;
}

    .soc-exp-row--match .soc-exp-lbl {
        color: var(--uark-razorback-red) !important;
        font-weight: 700;
    }

.soc-exp-lbl {
    width: 200px;
    min-width: 140px;
    padding: 6px 12px 6px 48px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--uark-spoofers-stone);
    background: #f8f9fa;
    border-right: 1px solid #e9ecef;
    white-space: nowrap;
    vertical-align: top;
}

.soc-exp-val {
    padding: 6px 16px;
    font-size: .8125rem;
    color: #212529;
    background: #fff;
    vertical-align: top;
    word-break: break-word;
}

.soc-exp-divider-row td {
    padding: 0;
    height: 2px;
    background: #dee2e6;
}

.soc-flag-badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 500;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: var(--uark-pale-dawn);
    color: var(--uark-spoofers-stone);
}

.soc-expand-empty {
    font-size: .8125rem;
    color: #555555;
    margin: 0;
    padding: .75rem 3rem;
}

.soc-toggle {
    font-size: .75rem;
    color: var(--uark-razorback-red);
    text-decoration: none;
    margin-left: .4rem;
    font-weight: 600;
}

    .soc-toggle:hover {
        text-decoration: underline;
    }

/* Pagination */
.pagination .page-item.active .page-link {
    background-color: var(--uark-razorback-red);
    border-color: var(--uark-razorback-red);
    color: #fff;
}

.pagination .page-link {
    color: var(--uark-razorback-red);
}

    .pagination .page-link:hover {
        color: var(--uark-old-main-brick);
        border-color: var(--uark-razorback-red);
    }

    .pagination .page-link:focus {
        box-shadow: 0 0 0 .25rem rgba(157,34,53,.25);
    }

.soc-pg-jump {
    display: inline-flex;
}

/* Sidebar resize handle */
.soc-resize-handle {
    width: 10px;
    cursor: col-resize;
    background: #dee2e6;
    flex: 0 0 auto;
    position: relative;
    z-index: 10;
    transition: background .15s;
    align-self: stretch;
    touch-action: none;
}

    .soc-resize-handle:focus-visible {
        outline: 3px solid var(--uark-focus-ring);
        outline-offset: -3px;
    }

    .soc-resize-handle:hover,
    .soc-resize-handle.dragging {
        background: #adb5bd;
    }

    .soc-resize-handle::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 2px;
        height: 40px;
        background: #dee2e6;
        border-radius: 2px;
    }

    .soc-resize-handle:hover::after {
        background: #fff;
    }

/* Active filter tags */
#activeFilterBar .col-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--uark-razorback-red);
    color: #fff;
    border-radius: .25rem;
    padding: .15rem .5rem;
    font-size: .75rem;
    margin-right: .35rem;
}

#activeFilterBar .remove-tag {
    cursor: pointer;
    opacity: .8;
}

    #activeFilterBar .remove-tag:hover {
        opacity: 1;
    }

.skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 99999;
    background: var(--uark-razorback-red);
    color: #fff;
    padding: .5rem 1rem;
    border-radius: .25rem;
    font-weight: 600;
    text-decoration: none;
}

/* WCAG focus ring */
:focus-visible {
    outline: 3px solid var(--uark-focus-ring) !important;
    outline-offset: 2px !important;
}

:focus:not(:focus-visible) {
    outline: none;
}

#sidebar-content-mobile .soc-sidebar-header {
    display: flex !important;
    justify-content: flex-end !important;
    border-bottom: 1px solid #dee2e6;
    background: #fff;
    padding: .5rem .75rem;
}

    #sidebar-content-mobile .soc-sidebar-header h2 {
        display: none !important;
    }

@media (max-width: 767.98px) {
    .soc-pg-jump input {
        width: 48px !important;
    }

    .soc-table-wrap {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .soc-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

        .soc-table > tbody {
            display: block !important;
            width: 100% !important;
        }

    .soc-thead {
        display: none !important;
    }

    .soc-table > tbody > .soc-tr {
        display: block !important;
        border: 1px solid #dee2e6 !important;
        border-radius: .375rem !important;
        margin: 0 .75rem .5rem !important;
        overflow: hidden !important;
        background: #fff !important;
        box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
    }

        .soc-table > tbody > .soc-tr.soc-tr-odd {
            background: #fff !important;
        }

        .soc-table > tbody > .soc-tr > td {
            display: block !important;
            width: 100% !important;
            border-right: none !important;
            max-width: 100% !important;
        }

            .soc-table > tbody > .soc-tr > td.soc-td-toggle {
                display: none !important;
            }

            .soc-table > tbody > .soc-tr > td[data-label="Section"] {
                background: var(--uark-razorback-red) !important;
                padding: .5rem .75rem !important;
                cursor: pointer !important;
                border-bottom: 1px solid rgba(255,255,255,.15) !important;
                -webkit-tap-highlight-color: rgba(255,255,255,.1);
            }

                .soc-table > tbody > .soc-tr > td[data-label="Section"] .soc-td-section {
                    color: #fff !important;
                    font-size: .8125rem !important;
                    font-weight: 700 !important;
                    white-space: normal !important;
                }

                .soc-table > tbody > .soc-tr > td[data-label="Section"] .soc-td-subtitle {
                    color: rgba(255,255,255,.8) !important;
                    font-size: .75rem !important;
                    white-space: normal !important;
                }

            .soc-table > tbody > .soc-tr > td.soc-td:not(.soc-td-toggle):not([data-label="Section"]) {
                display: flex !important;
                align-items: center !important;
                gap: .5rem !important;
                padding: .3rem .75rem !important;
                border-bottom: 1px solid #f0f0f0 !important;
                white-space: normal !important;
                overflow: visible !important;
                min-height: 2rem !important;
            }

                .soc-table > tbody > .soc-tr > td.soc-td:not(.soc-td-toggle):not([data-label="Section"])::before {
                    content: attr(data-label) !important;
                    font-size: .6875rem !important;
                    text-transform: uppercase !important;
                    letter-spacing: .05em !important;
                    color: #555555 !important;
                    font-weight: 600 !important;
                    min-width: 68px !important;
                    flex-shrink: 0 !important;
                }

    .soc-td-val {
        font-size: .8125rem;
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .soc-td-enr {
        text-align: left !important;
    }

    .soc-td-days {
        flex-wrap: wrap !important;
        white-space: normal !important;
    }

    .soc-day-badge {
        font-size: .6875rem;
        padding: 1px 4px;
    }

    .soc-table > tbody > .soc-tr-expand {
        display: none !important;
    }

        .soc-table > tbody > .soc-tr-expand.open {
            display: block !important;
            border-left: 4px solid var(--uark-razorback-red) !important;
            border-radius: 0 0 .375rem .375rem !important;
            margin: -.5rem .75rem .5rem !important;
            background: #fff !important;
            overflow: hidden !important;
        }

        .soc-table > tbody > .soc-tr-expand > td {
            display: block !important;
            padding: 0 !important;
            border: none !important;
        }

    .soc-exp-table {
        display: table !important;
    }

        .soc-exp-table tr {
            display: table-row !important;
        }

        .soc-exp-table td {
            display: table-cell !important;
        }

    .soc-exp-lbl {
        padding: 5px 8px 5px 12px !important;
        width: 110px !important;
        min-width: 100px !important;
        font-size: .75rem !important;
    }

    .soc-exp-val {
        padding: 5px 10px !important;
        font-size: .75rem !important;
    }

    .soc-table > tbody > .soc-tr.soc-tr-open > td[data-label="Section"] {
        background: var(--uark-razorback-red) !important;
    }

    .soc-pg-jump {
        display: inline-flex;
    }

        .soc-pg-jump input {
            width: 40px;
            height: 28px;
            font-size: .75rem;
        }

    #soc-pager {
        padding: .4rem .75rem !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .soc-td {
        padding: 7px 8px;
        font-size: .75rem;
    }

    .soc-th-inner {
        padding: 7px 8px;
    }

    .soc-exp-lbl {
        padding: 6px 10px 6px 20px !important;
        width: 160px !important;
    }
}