/* ============================================================================
   LCD x DATATABLES — list page skin

   Loaded after the three CDN stylesheets in templates/table.html (bundled
   DataTables + FixedColumns + FixedHeader + Responsive + SearchBuilder, the
   Buttons sheet, and the jQuery UI "smoothness" theme that styles the range
   sliders).

   RULE (D10, see docs/redesign-lcd-plan.md 3.1): cell rules are drawn with
   inset box-shadow, never border, and never with padding that differs between
   head and body. Under scrollX, DataTables renders <thead> into a *separate*
   table from <tbody>; the body table is table-layout:fixed and the head table
   is not. Anything that changes a cell's box desynchronises them by up to
   38px, and columns.adjust() does not repair it. Measured, not assumed.
   ========================================================================= */

/* Head and body must resolve widths the same way, or uppercase/letter-spaced
   header labels widen the auto-layout head table and shift every column. */
.dataTables_scrollHead table.dataTable,
.dataTables_scrollBody table.dataTable {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 !important;
    background: var(--lcd-panel);
}

.dataTables_wrapper {
    color: var(--lcd-fg);
    font-family: var(--lcd-font-ui);
}

/* ---------------------------------------------------------------- frame */

#table_block .dataTables_scroll {
    border: 1px solid var(--lcd-border);
    background: var(--lcd-panel);
    margin-bottom: 22px;
}

.dataTables_scrollHead {
    background: var(--lcd-well);
}

/* ----------------------------------------------------------------- head */

.dataTables_scrollHead th,
table.dataTable thead th {
    background: var(--lcd-well) !important;
    color: var(--lcd-fg) !important;
    font-family: var(--lcd-font-ui) !important;
    font-size: var(--fs-key) !important;
    font-weight: 600 !important;
    letter-spacing: .07em;
    text-transform: uppercase;
    border: 0 !important;
    box-shadow: inset -1px 0 0 var(--lcd-hair), inset 0 -1px 0 var(--lcd-border);
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
}

/* The inner div is the filter affordance; the strip to its right is sort. */
.column-header-text,
.column-header-text-nofilter {
    background: transparent !important;
    line-height: 1.4 !important;
    padding: 7px 6px 7px 10px !important;
    margin-right: 12px !important;
    color: var(--lcd-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 0 !important;
}

.column-header-text:hover,
.column-header-text-nofilter:hover {
    background: var(--lcd-row) !important;
    color: var(--lcd-fg) !important;
}

.column-header-text::after {
    color: var(--lcd-fg-ghost) !important;
}

.column-header-text.filter_active::after {
    color: var(--lcd-link) !important;
}

.column-header-text-nofilter::after {
    content: none !important;
}

/* Sort indicators. The vendor sheet stacks two chevrons via ::before and
   ::after; the design uses a single glyph, so ::before is retired and ::after
   carries the state. The clickable strip is the 12px of <th> to the right of
   .column-header-text (its margin-right), which is where this sits. */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    cursor: pointer;
    position: relative;
}

table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before {
    content: none !important;
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    font-family: var(--lcd-font-data);
    font-size: 9px;
    line-height: 1;
    opacity: 1 !important;
    color: var(--lcd-fg-ghost);
}

table.dataTable thead .sorting::after      { content: "\2195" !important; }  /* up-down */
table.dataTable thead .sorting_asc::after  { content: "\25B2" !important; color: var(--lcd-link); }
table.dataTable thead .sorting_desc::after { content: "\25BC" !important; color: var(--lcd-link); }

table.dataTable thead .sorting_asc .column-header-text,
table.dataTable thead .sorting_desc .column-header-text,
table.dataTable thead .sorting_asc .column-header-text-nofilter,
table.dataTable thead .sorting_desc .column-header-text-nofilter {
    color: var(--lcd-link) !important;
}

/* ----------------------------------------------------------------- body */

.dataTables_scrollBody td,
table.dataTable tbody td {
    border: 0 !important;
    box-shadow: inset -1px 0 0 var(--lcd-hair), inset 0 -1px 0 var(--lcd-hair);
    font-family: var(--lcd-font-data);
    font-size: var(--fs-data-lg);
    color: var(--lcd-fg);
    background-color: transparent;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

table.dataTable tbody tr {
    background-color: var(--lcd-panel);
}

table.dataTable.table-striped tbody tr:nth-of-type(2n + 1),
table.dataTable.table-striped > tbody > tr:nth-of-type(2n + 1) {
    background-color: var(--lcd-row) !important;
}

table.dataTable tbody tr:hover,
table.dataTable tbody tr:hover > td {
    background-color: var(--lcd-row) !important;
}

.dataTables_scrollBody td a {
    font-weight: 500;
    color: var(--lcd-link);
}

.dataTables_scrollBody td a:hover {
    color: var(--lcd-link-bright);
    text-decoration: underline;
}

/* ----------------------------------------------- sticky first column */
/* FixedColumns 4.x uses position:sticky and clones no DOM, which is the same
   mechanism the design mockup uses. The 2px inked separator is an inset
   shadow so it costs no layout. */

th.dtfc-fixed-left,
td.dtfc-fixed-left {
    background: var(--lcd-panel) !important;
    z-index: 2 !important;
    border-right: 0 !important;
    box-shadow: inset -1px 0 0 var(--lcd-border), inset 0 -1px 0 var(--lcd-hair) !important;
}

th.dtfc-fixed-left {
    background: var(--lcd-well) !important;
    z-index: 3 !important;
    box-shadow: inset -1px 0 0 var(--lcd-border), inset 0 -1px 0 var(--lcd-border) !important;
}

tr:nth-of-type(2n + 1) td.dtfc-fixed-left {
    background: #d0d5cf !important;
}

[data-theme="dark"] tr:nth-of-type(2n + 1) td.dtfc-fixed-left {
    background: #262a22 !important;
}

/* --------------------------------------------------------- control bar */

.dt-buttons {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    /* Air between the control keys and the table frame below them. */
    margin-bottom: 18px;
}

.dataTables_wrapper .dt-buttons .dt-button:first-child {
    margin-right: 0 !important;
}

.dt-button-down-arrow {
    opacity: .6 !important;
    margin-left: 6px !important;
}

.dataTables_filter {
    font-family: var(--lcd-font-data);
    font-size: var(--fs-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lcd-fg-faint);
    margin-bottom: 18px;
}

.dataTables_filter input[type="search"] {
    background: var(--lcd-well) !important;
    color: var(--lcd-fg) !important;
    border: 1px solid var(--lcd-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--lcd-inset) !important;
    font-family: var(--lcd-font-data);
    font-size: var(--fs-data) !important;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: none;
    padding: 6px 11px !important;
    filter: none;
}

.dataTables_info,
.dataTables_processing,
.dataTables_length,
.dataTables_paginate {
    font-family: var(--lcd-font-data);
    font-size: var(--fs-micro);
    letter-spacing: .1em;
    color: var(--lcd-fg-faint);
}

.dataTables_processing {
    background: var(--lcd-panel) !important;
    border: 1.5px solid var(--lcd-line) !important;
    box-shadow: var(--lcd-key-shadow);
    border-radius: 0 !important;
    color: var(--lcd-fg) !important;
}

/* ------------------------------------------------- filter / colvis menus */

.column-menu,
.dt-button-collection,
.two-column {
    background: var(--lcd-panel) !important;
    border: 1.5px solid var(--lcd-line) !important;
    border-radius: 0 !important;
    box-shadow: var(--lcd-key-shadow) !important;
    color: var(--lcd-fg) !important;
    font-family: var(--lcd-font-data);
    font-size: var(--fs-data);
}

.column-menu div:hover {
    background-color: var(--lcd-row) !important;
}

.cb_wrap label {
    font-size: var(--fs-data);
}

/* -------------------------------------------------- jQuery UI range sliders */
/* The "smoothness" theme is loaded from a CDN and styles these; the LCD look
   is a square thumb on a sunken track. Sliders are retained rather than being
   swapped for the mockup's dropdown keys — that would be a behaviour change
   and would strand deep links (D9). */

.sliders_range {
    max-width: 340px;
    filter: none;
}

.msize-custom-range,
.vram-custom-range {
    height: 6px;
    background: var(--lcd-deep);
    border: 1px solid var(--lcd-line);
    border-radius: 0;
}

.msize-custom-range::-webkit-slider-thumb,
.vram-custom-range::-webkit-slider-thumb {
    width: 12px;
    height: 20px;
    background: var(--lcd-sel-bg);
    border: 1.5px solid var(--lcd-line);
    border-radius: 0;
    cursor: pointer;
}

.msize-custom-range::-moz-range-thumb,
.vram-custom-range::-moz-range-thumb {
    width: 12px;
    height: 20px;
    background: var(--lcd-sel-bg);
    border: 1.5px solid var(--lcd-line);
    border-radius: 0;
    cursor: pointer;
}

.msize-input,
.vram-input {
    width: 76px;
    font-family: var(--lcd-font-data);
    font-size: var(--fs-data) !important;
    text-align: right;
}

.rotate-text {
    color: var(--lcd-fg-faint);
    font-family: var(--lcd-font-data);
    font-size: var(--fs-micro);
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------- VRAM chips */

td .lcd-vram {
    font-size: var(--fs-key);
}

/* ------------------------------------------------------ list page layout */

/* Air between the title/search/banner row and the table control strip. */
.custom-row {
    margin-bottom: 22px;
}

.lcd-crumbs {
    font-family: var(--lcd-font-data);
    font-size: var(--fs-micro);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lcd-fg-faint);
    margin-bottom: 14px;
}

.lcd-crumbs a {
    color: var(--lcd-fg-dim);
}

.lcd-crumbs__current {
    color: var(--lcd-link);
}

.lcd-list-title,
h1#list_page_title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: var(--fs-h1) !important;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 16px;
}

.lcd-list-title__count #llm_num {
    background: none !important;
    color: var(--lcd-accent) !important;
    padding: 0;
    font-family: var(--lcd-font-lcd);
    font-size: var(--fs-num-sm);
    text-shadow: var(--lcd-glow);
}

.lcd-searchrow {
    margin-bottom: 18px;
}

.lcd-ranges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    margin-bottom: 22px;
}

.lcd-range {
    flex: 1 1 260px;
    min-width: 0;
    background: var(--lcd-well);
    border: 1px solid var(--lcd-border);
    box-shadow: var(--lcd-inset);
    padding: 10px 14px;
}

/* The old layout rotated these labels -90deg into the margin, which broke on
   narrow viewports. A plain label reads better and costs nothing. */
.lcd-range__label {
    display: block;
    font-family: var(--lcd-font-data);
    font-size: var(--fs-micro);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lcd-fg-faint);
    margin-bottom: 9px;
}

.lcd-range__track {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.lcd-range__track:last-child {
    margin-bottom: 0;
}

.lcd-range__track input[type="range"] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.lcd-range__track input[type="text"] {
    flex: 0 0 76px;
    margin: 0;
}

/* The rotated-label rules are superseded by .lcd-range__label. */
#inputStart, #vramInputStart, #inputEnd, #vramInputEnd {
    margin-top: 0;
}

.lcd-cardslot {
    border: 1px solid var(--lcd-border);
    background: var(--lcd-panel);
    padding: 0;
    line-height: 0;
    overflow: hidden;
}

.lcd-cardslot img {
    width: 100%;
    height: auto;
    margin: 0 !important;
}

/* --------------------------------------------------------------- loader */
/* Boot-screen loader built by startLcdLoader() in llm_table.js. */

.lcd-loader__row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lcd-loader__bar {
    display: inline-flex;
    gap: 3px;
    padding: 5px 6px;
    background: var(--lcd-well);
    border: 1px solid var(--lcd-border);
    box-shadow: var(--lcd-inset);
}

.lcd-loader__cell {
    width: 9px;
    height: 14px;
    background: var(--lcd-deep);
    transition: background .12s steps(2);
}

.lcd-loader__cell.is-lit {
    background: var(--lcd-accent);
}

.lcd-loader__pct {
    font-size: var(--fs-num-sm);
    min-width: 3.5ch;
    text-align: right;
}

.lcd-loader__msg {
    margin-top: 8px;
    font-family: var(--lcd-font-data);
    font-size: var(--fs-key);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lcd-fg-dim);
}

/* Blinking terminal cursor after the status line. */
.lcd-loader__msg::after {
    content: "\25AE";
    margin-left: 7px;
    color: var(--lcd-accent);
    animation: lcdblink 1.1s steps(1) infinite;
}

/* --------------------------------------------------------------- hints */

#hints {
    margin: 34px 0 40px;
    font-size: var(--fs-ui);
    color: var(--lcd-fg-dim);
}

#llm_table_info,
#top_maintainers_info {
    margin-top: 0 !important;
}