html, body {
    /* overflow-x: hidden here (instead of overflow-x: clip) would force overflow-y's
       computed value to 'auto' per the CSS overflow spec's visible/non-visible pairing
       rule, turning body into its own scroll container distinct from the viewport -
       which silently breaks position: sticky for every descendant (e.g.
       #advancedSearchSidebar below), since the sticky containing block is no longer
       the viewport. overflow-x: clip suppresses the same horizontal overflow without
       triggering that pairing rule, so overflow-y stays visible and sticky works. */
    overflow-x: clip;
}

/* ---------------------------------------------------------------------------
   Brand theme, sampled from server/static/images/safetensors-og-card.png: dark
   navy background, amber/orange primary accent, cyan secondary accent. Every
   template sets data-bs-theme="dark" on <html> to activate Bootstrap's native
   dark-mode component styling (cards, tables, forms, modals, offcanvas all
   follow automatically), and this block re-themes the root color variables to
   match the card instead of Bootstrap's default blue/gray dark palette.

   Bootstrap 5.3 bakes several component colors (btn-primary, form-switch
   checked state, list-group active state, plain .badge text) as literal
   values scoped to their own selector at build time rather than reading
   --bs-primary at runtime - overriding the root variables below doesn't reach
   those, so the "component overrides" further down handle them individually.

   Scoped to html[data-bs-theme=dark] (not :root/[data-bs-theme=dark] alone)
   so these always win on specificity regardless of whether this stylesheet
   happens to load before or after bootstrap.min.css - that order differs
   between templates (compare page.j2 vs admin_jobs.j2's <link> order). */
html[data-bs-theme="dark"] {
    --bs-body-bg: #0f111a;
    --bs-body-bg-rgb: 15, 17, 26;
    --bs-body-color: #e8eaf0;
    --bs-body-color-rgb: 232, 234, 240;
    --bs-secondary-bg: #171a24;
    --bs-secondary-bg-rgb: 23, 26, 36;
    --bs-tertiary-bg: #1b1e2a;
    --bs-tertiary-bg-rgb: 27, 30, 42;
    --bs-border-color: #2a2d3a;

    --bs-primary: #fea40a;
    --bs-primary-rgb: 254, 164, 10;
    --bs-primary-text-emphasis: #ffc670;
    --bs-primary-bg-subtle: #3a2a05;
    --bs-primary-border-subtle: #7a5809;

    --bs-info: #28c8ff;
    --bs-info-rgb: 40, 200, 255;
    --bs-info-text-emphasis: #9fe3ff;
    --bs-info-bg-subtle: #052635;
    --bs-info-border-subtle: #0a4d68;

    --bs-link-color: #28c8ff;
    --bs-link-color-rgb: 40, 200, 255;
    --bs-link-hover-color: #6fdcff;
    --bs-link-hover-color-rgb: 111, 220, 255;
}

/* component overrides - see the big comment above for why these can't just
   be root variables. White text on this orange (~2:1 contrast) fails WCAG, so
   these also switch btn-primary/badge text to a dark color instead of #fff. */
html[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: #14161f;
    --bs-btn-bg: #fea40a;
    --bs-btn-border-color: #fea40a;
    --bs-btn-hover-color: #14161f;
    --bs-btn-hover-bg: #e69200;
    --bs-btn-hover-border-color: #e69200;
    --bs-btn-active-color: #14161f;
    --bs-btn-active-bg: #cc8200;
    --bs-btn-active-border-color: #cc8200;
    --bs-btn-disabled-color: #14161f;
    --bs-btn-disabled-bg: #fea40a;
    --bs-btn-disabled-border-color: #fea40a;
}
html[data-bs-theme="dark"] .badge.bg-primary {
    color: #14161f;
}
html[data-bs-theme="dark"] .form-check-input:checked {
    background-color: #fea40a;
    border-color: #fea40a;
}
html[data-bs-theme="dark"] .list-group {
    --bs-list-group-active-bg: #fea40a;
    --bs-list-group-active-border-color: #fea40a;
    --bs-list-group-active-color: #14161f;
}

/* navbar "HF Search" tag - a small bordered pill in the accent cyan, echoing
   the "HF SEARCH" tag in safetensors-og-card.png */
.hf-search-tag {
    align-self: flex-start;
    margin-top: 2px;
    padding: 0 6px;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .02em;
    color: var(--bs-info);
    border: 1px solid var(--bs-info);
    border-radius: 999px;
}

.thmain {
    min-width: 0;
}

.repo-card {
    width: 100%;
    max-width: 428px;
    margin-bottom: 10px;
}

@media (max-width: 767.98px) {
    #advancedSearchSidebar.offcanvas-md {
        top: 60px;
    }

    #navbarCollapse .navbar-menu-item {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }
}

@media (min-width: 768px) {
    #advancedSearchSidebar.offcanvas-md {
        position: sticky;
        top: 60px;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
    }
}

.modal.fade {
  z-index: 999 !important;
}

.rank {
/* color/background-color deliberately not set here - the badge already has
   bg-primary (+ the .badge.bg-primary text-color override above), and this
   rule's own hardcoded blue was only ever silently shadowed by that anyway
   (same specificity, bootstrap.min.css just happened to load after this file
   on this page) */
position: absolute;
top:15px;
right: -10px;
border-radius: 5px;
padding:2px
}

.flex-input{
    max-width: 276px;
}

.pagelog{
    position:fixed;
    top:55px;
    right:-2px;
    z-index:2000;
    max-height:300px;
    min-width:376px;
    overflow:auto;
}

.video {
    flex-grow: 1; 
    border: none; 
    margin: 0; 
    padding: 0;
}

video {
    object-fit: contain;
    overflow-clip-margin: content-box;
    overflow: clip;
    overflow-x: ;
    overflow-y: ;
}

.imglink {
    /* background-color deliberately not set here - the element already carries
       bg-body-tertiary in the markup (_modal.j2's thumbTemplate) for that; this
       rule's own hardcoded light gray was a pre-dark-theme leftover that only
       actually showed up wherever th.css happened to load after bootstrap.min.css
       (admin_repositories.j2), since same-specificity rules go by source order -
       on page.j2 (opposite load order) bg-body-tertiary already won regardless */
    padding: 5px;
    margin: 2px;
}

/* the scrollable "stage" inside the repo detail modal (images/safetensors/
   archives/tags lists) - a distinct recessed panel so it reads as its own
   region instead of blending into the modal's own background */
.modal-stage {
    background-color: var(--bs-secondary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    padding: .75rem;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, .25);
}