/* ==========================================================================
   Emby Support site theme
   Re-skins the docfx output to match the emby.media website redesign.
   Loaded after docfx.css/main.css/header.css so it can safely
   override their color, header and landing-page rules.
   ========================================================================== */

/* -------------------------------------------------------------------------
   FONTS
   Points at the main website's already-hosted copy (resources/fonts/,
   see modern-theme.css) via an absolute same-origin URL, rather than
   shipping our own duplicate. Both sites live under emby.media, so the
   browser fetches and caches the font file once and reuses it across
   both instead of downloading/caching it twice. font-display: block
   (not swap) since the file loads fast (same-origin, no cross-domain
   DNS/TLS delay) - this briefly holds text rendering instead of
   flashing the fallback font and then visibly swapping to Inter.
   ------------------------------------------------------------------------- */
/* ReSharper disable InvalidValue */
    /* ReSharper disable UnexpectedValue */

@font-face {
    font-family: "Inter";
    src: url("https://emby.media/resources/fonts/InterVariable.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: block;
}

@font-face {
    font-family: "Inter";
    src: url("https://emby.media/resources/fonts/InterVariable-Italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 100 900;
    font-display: block;
}

/* -------------------------------------------------------------------------
   COLOR VARIABLES
   `--modern-*` mirror the variables used on the main website
   (see resources/modern-theme.css) so the two can be kept in sync.
   The legacy `--header-*`/`--highlight-*`/etc. names are still used
   throughout main.css; aliasing them here re-themes those rules too.
   ------------------------------------------------------------------------- */
:root {
    --modern-bg: #090d0f;
    --modern-surface: #111719;
    --modern-surface-2: #172023;
    --modern-text: #f7f9f8;
    --modern-muted: #a7b2ae;
    --modern-line: rgba(255, 255, 255, .1);
    --modern-green: #75d66d;
    --modern-green-deep: #52b54b;
    --modern-button-green: #75d66d;

    --header-bg-color: var(--modern-surface);
    --header-ft-color: var(--modern-text);
    --highlight-light: var(--modern-green);
    --highlight-dark: var(--modern-green-deep);
    --accent-dim: var(--modern-line);
    --accent-super-dim: var(--modern-surface-2);
    --font-color: var(--modern-text);
    --toc-font-color: var(--modern-muted);
    --tab-hover-color: var(--modern-surface-2);
    --card-box-shadow: 0 10px 42px rgba(0, 0, 0, .12);
    --search-box-shadow: 0 18px 45px rgba(0, 0, 0, .14);

    --header-height: 76px;
    --header-height-mobile: 68px;
    --subnav-height: 62px;
    --subnav-height-mobile: 56px;
}

/* -------------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------------- */
html {
    background: var(--modern-bg);
    scroll-behavior: smooth;
}

body {
    background: var(--modern-bg);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--modern-text);
}

h1 {
    color: var(--modern-text);
    font-weight: 700;
    letter-spacing: -.02em;
}

strong, b, optgroup {
    color: var(--modern-text);
}

::selection {
    background: rgba(117, 214, 109, .35);
}

a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--modern-green);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}

/* -------------------------------------------------------------------------
   PAGE CHROME
   The .site-header and the breadcrumb/search subnav are both fixed and
   stacked (subnav sits right under the header). docfx's own CSS makes
   .sidefilter/.sidetoc/.sideaffix position:fixed too, so #wrapper's
   padding and those elements' `top` must both clear header + subnav,
   otherwise the fixed sidebar overlaps the subnav. Pages without a
   breadcrumb (landing/empty layouts) only need to clear the header.
   ------------------------------------------------------------------------- */
#wrapper {
    padding-top: calc(var(--header-height) + var(--subnav-height));
}

#wrapper.landingPage {
    padding-top: var(--header-height);
}

.article {
    margin-top: 28px;
}

.sidefilter,
.sideaffix {
    top: calc(var(--header-height) + var(--subnav-height) + 16px);
}

.sidetoc {
    top: calc(var(--header-height) + var(--subnav-height) + 56px);
}

@media only screen and (max-width: 900px) {
    #wrapper { padding-top: calc(var(--header-height-mobile) + var(--subnav-height-mobile)); }
    #wrapper.landingPage { padding-top: var(--header-height-mobile); }
    .sidefilter, .sideaffix { top: calc(var(--header-height-mobile) + var(--subnav-height-mobile) + 16px); }
    .sidetoc { top: calc(var(--header-height-mobile) + var(--subnav-height-mobile) + 56px); }
}

/* -------------------------------------------------------------------------
   SITE HEADER / NAVIGATION
   Mirrors the main website's .site-header component.
   ------------------------------------------------------------------------- */
.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    height: var(--header-height);
    background: rgba(9, 13, 15, .82);
    border-bottom: 1px solid var(--modern-line);
    backdrop-filter: blur(18px);
}

.site-header .nav {
    display: flex;
    align-items: center;
    gap: 24px;
    height: var(--header-height);
}

/* Same phantom-flex-item issue as .subnav .container (see below) since
   this element also carries the .container class. */
.site-header .nav::before,
.site-header .nav::after {
    display: none;
    content: none;
}

.site-header .brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.site-header .brand img {
    display: block;
    width: 128px;
    height: auto;
    max-width: none;
}

.site-header .brand .logo-on-light {
    display: none;
}

.site-header .site-title-link {
    flex: 0 0 auto;
}

.site-header .site-title-link,
.site-header .site-title-link:hover,
.site-header .site-title-link:focus {
    color: var(--modern-text);
    text-decoration: none;
}

    .site-header .site-title {
        display: inline-block;
        border-left: 1px solid #c2c2c2;
        padding-left: 24px;
        font-size: 15px;
        white-space: nowrap;
        margin-bottom: 3px;
    }

.site-header .site-title strong {
    color: inherit;
    font-weight: 700;
}

.site-header .nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-left: auto;
}

/* The list keeps docfx.js's "already rendered" detection working
   (see renderNavbar() in docfx.js) without affecting the flex layout. */
.site-header .nav-links-list {
    display: contents;
}

.site-header .nav-links-list li {
    list-style: none;
}

.site-header .nav-links a,
.site-header .nav-dropdown-toggle {
    padding: 0;
    color: #d9e0dd;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.5;
    white-space: nowrap;
}

.site-header .nav-links a:hover,
.site-header .nav-links a.is-current,
.site-header .nav-links a.active,
.site-header .nav-dropdown-toggle:hover,
.site-header .nav-dropdown.active > .nav-dropdown-toggle,
.site-header .nav-dropdown.open > .nav-dropdown-toggle {
    color: var(--modern-green);
}

.site-header .nav-dropdown-toggle {
    background: none;
    border: 0;
    font-family: inherit;
    text-align: left;
}

.site-header .nav-dropdown > .dropdown-menu {
    right: 0;
    left: auto;
    min-width: 280px;
    margin-top: 12px;
    padding: 8px;
    background: var(--modern-surface);
    border: 1px solid var(--modern-line);
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .2);
}

.site-header .nav-dropdown .dropdown-menu a {
    padding: 10px 12px;
    border-radius: 6px;
    font-weight: 500;
    white-space: normal;
}

.site-header .nav-dropdown .dropdown-menu a:hover,
.site-header .nav-dropdown .dropdown-menu a:focus {
    color: var(--modern-green);
    background: var(--modern-surface-2);
}

.site-header .menu-button {
    display: none;
    margin-left: auto;
    padding: 8px;
    color: #fff;
    background: none;
    border: 0;
    font-size: 26px;
    line-height: 1;
}

@media only screen and (max-width: 900px) {
    .site-header { height: var(--header-height-mobile); }
    .site-header .nav { height: var(--header-height-mobile); gap: 16px; }
    .site-header .site-title-link { display: none; }
    .site-header .menu-button { display: block; }
    .site-header .nav-links {
        display: none;
        position: absolute;
        inset: var(--header-height-mobile) 14px auto;
        padding: 18px;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        max-height: calc(100vh - var(--header-height-mobile) - 28px);
        overflow-y: auto;
        background: var(--modern-surface);
        border: 1px solid var(--modern-line);
        border-radius: 16px;
        box-shadow: 0 24px 48px rgba(0, 0, 0, .4);
    }
    .site-header .nav-links.open { display: flex; }
    .site-header .nav-links a,
    .site-header .nav-dropdown-toggle { padding: 12px; }
    .site-header .nav-dropdown-toggle { width: 100%; }
    .site-header .nav-dropdown > .dropdown-menu {
        position: static;
        float: none;
        min-width: 0;
        margin-top: 0;
        border: 0;
        box-shadow: none;
    }
}

/* -------------------------------------------------------------------------
   BREADCRUMB / SEARCH SUBNAV
   Fixed right under the .site-header (see PAGE CHROME for the matching
   #wrapper padding and sidebar offsets).
   ------------------------------------------------------------------------- */
.subnav.navbar {
    position: fixed;
    inset: var(--header-height) 0 auto;
    z-index: 999;
    height: var(--subnav-height);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    background: var(--modern-bg);
    border-bottom: 1px solid var(--modern-line);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    box-shadow: none;
}

@media only screen and (max-width: 900px) {
    .subnav.navbar {
        inset: var(--header-height-mobile) 0 auto;
        height: var(--subnav-height-mobile);
    }
}

.subnav .container {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* Bootstrap's .container::before/::after clearfix become phantom flex
   items once .container is flexed, offsetting the real content by
   however much space they (and their surrounding `gap`) take up. */
.subnav .container::before,
.subnav .container::after {
    display: none;
    content: none;
}

.subnav #breadcrumb {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 50px;
    max-height: 20px;
    white-space: normal;
    margin: 0;
    padding: 0;
    background: none;
}

.breadcrumb li {
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--modern-muted);
    font-weight: 650;
}

.breadcrumb > li + li:before {
    content: "\00a0>" !important;
    color: var(--modern-muted) !important;
    font-weight: 700;
    opacity: 0.7;
}

.breadcrumpsearch {
    flex: 0 0 auto;
    margin-right: 0;
}

.breadcrumpsearch .navbar-form {
    margin: 0;
    padding: 0;
}

.breadcrumpsearch .form-group {
    margin: 0;
    position: relative;
}

.breadcrumpsearch .form-group .fa-search {
    position: absolute;
    top: 50%;
    left: 14px;
    color: var(--modern-green);
    font-size: 13px;
    transform: translateY(-50%);
    pointer-events: none;
}

#search .form-control,
#toc_filter_input {
    height: 40px;
    padding: 0 14px;
    color: var(--modern-text);
    background: var(--modern-surface);
    border: 1px solid var(--modern-line);
    border-radius: 10px;
    box-shadow: none;
}

#search .form-control {
    width: 220px;
    padding-left: 34px;
}

#search .form-control::placeholder,
#toc_filter_input::placeholder {
    color: var(--modern-muted);
}

#search .form-control:focus,
#toc_filter_input:focus {
    border-color: var(--modern-green);
    outline: 2px solid rgba(117, 214, 109, .24);
    outline-offset: 1px;
}

/* -------------------------------------------------------------------------
   SIDEBAR / TABLE OF CONTENTS
   ------------------------------------------------------------------------- */
.sidefilter,
.sidetoc,
.sidetoc > .toc {
    background-color: var(--modern-bg);
}

.toc-filter {
    box-shadow: none;
}

.toc .nav > li.active > a,
.toc .nav > li.active > a:hover,
.toc .nav > li.active > a:focus {
    color: var(--modern-green);
}

.affix ul > li.active > a,
.affix ul > li.active > a:before {
    color: var(--modern-green);
}

.expand-stub {
    color: var(--modern-muted);
}

/* -------------------------------------------------------------------------
   CONTENT: links, alerts, code, tables, images
   ------------------------------------------------------------------------- */
article > .article-description {
    max-width: 70ch;
    margin: -8px 20px 28px 0;
    color: var(--modern-muted);
    font-size: 17px;
    line-height: 1.3;
    font-weight: 500;
}

.learn-index-children {
    margin-top: 20px;
}

article h4 {
    border-bottom-color: var(--modern-line);
}

.alert-info > h5 {
    color: #8ecbf5;
    background-color: rgba(25, 118, 210, .16);
    border-bottom-color: #3f9fe0;
}

.alert-warning > h5 {
    color: #f5c26b;
    background-color: rgba(245, 127, 23, .16);
    border-bottom-color: #f5a623;
}

.alert-danger > h5 {
    color: #f28b8b;
    background-color: rgba(211, 47, 47, .18);
    border-bottom-color: #e35b5b;
}

pre {
    color: var(--modern-text);
    background-color: var(--modern-surface-2);
    border: solid 1px var(--modern-line);
}

code {
    color: var(--modern-green);
    background-color: var(--modern-surface-2);
}

pre code {
    color: inherit;
    background: none;
}

blockquote {
    color: var(--modern-muted);
    background: var(--modern-surface);
    border-left: 4px solid var(--modern-line);
    font-size: inherit;
}

table {
    color: var(--modern-muted);
    background: var(--modern-surface);
    border: 1px solid var(--modern-line);
}

th {
    color: var(--modern-text);
    background: var(--modern-surface-2);
}

td, th {
    border-color: var(--modern-line) !important;
}

hr {
    border-color: var(--modern-line);
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="number"],
select,
textarea {
    color: var(--modern-text);
    background: var(--modern-surface);
    border: 1px solid var(--modern-line);
}

.article img {
    border-radius: 10px;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .14);
}

/* -------------------------------------------------------------------------
   KNOWLEDGE-BASE CARDS (article listing pages)
   ------------------------------------------------------------------------- */
.card {
    background: linear-gradient(145deg, var(--modern-surface-2), var(--modern-surface));
    box-shadow: 0 18px 42px rgba(0, 0, 0, .3);
}

.category-icon,
.fw-category-icon {
    color: var(--modern-muted);
}

.fw-category-icon::before,
.category-icon::before {
    text-shadow: none;
}

a:hover .fw-category-icon::before,
a:hover .category-icon::before {
    text-shadow: none;
    transform: translate(-1px, -1px);
}

a.card .card-title,
H4.card-title,
H2.card-title {
    color: var(--modern-text);
}

a.card:hover .card-title {
    color: var(--modern-green);
}

.card-text {
    color: var(--modern-muted);
}

/* -------------------------------------------------------------------------
   SUPPORT LANDING PAGE (support/index.md)
   ------------------------------------------------------------------------- */
.support-hero {
    position: relative;
    overflow: hidden;
    padding: 56px 0;
    background:
        radial-gradient(circle at 78% 25%, rgba(82, 181, 75, .2), transparent 32%),
        linear-gradient(145deg, var(--modern-surface-2), var(--modern-bg));
    border-bottom: 1px solid var(--modern-line);
}

.support-hero .eyebrow,
.support-section-head .eyebrow {
    margin: 0 0 12px;
    color: var(--modern-green);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.support-hero h1 {
    max-width: 760px;
    margin: 0 0 16px;
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.05;
}

.support-hero p {
    max-width: 650px;
    margin: 0;
    color: var(--modern-muted);
    font-size: 18px;
}

.support-search {
    position: relative;
    max-width: 620px;
    margin-top: 28px;
}

.support-search i {
    position: absolute;
    top: 50%;
    left: 16px;
    color: var(--modern-green);
    font-size: 15px;
    transform: translateY(-50%);
    pointer-events: none;
}

.support-search input {
    width: 100%;
    height: 52px;
    padding: 0 16px 0 44px;
    font-size: 16px;
    border-radius: 12px;
}

.support-content {
    padding: 56px 0 40px;
}

.support-content > .support-section {
    margin-left: 0;
}

.support-section + .support-section {
    margin-top: 56px;
}

.support-section-head {
    margin-bottom: 24px;
}

.support-section-head h2 {
    margin: 0;
    font-size: clamp(26px, 3.4vw, 36px);
}

.support-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.support-card {
    min-height: 190px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    color: var(--modern-text);
    background: linear-gradient(145deg, var(--modern-surface-2), var(--modern-surface));
    border: 1px solid var(--modern-line);
    border-radius: 18px;
    box-shadow: none;
    transition: transform .18s ease, border-color .18s ease;
}

.support-card:hover {
    color: var(--modern-text);
    border-color: rgba(117, 214, 109, .45);
    transform: translateY(-3px);
    text-decoration: none;
}

.support-card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    display: grid;
    place-items: center;
    color: var(--modern-green);
    background: rgba(117, 214, 109, .1);
    border: 1px solid rgba(117, 214, 109, .22);
    border-radius: 13px;
    font-size: 20px;
}

.support-card h3 {
    margin: 0 0 8px;
    font-size: 21px;
}

.support-card p {
    margin: 0;
    color: var(--modern-muted);
}

@media only screen and (max-width: 900px) {
    .support-grid { grid-template-columns: 1fr; }
    .support-hero { padding: 56px 0 44px; }
}

/* -------------------------------------------------------------------------
   SEARCH RESULTS
   ------------------------------------------------------------------------- */
#search-results {
    color: var(--modern-text);
}

#search-results .search-list {
    color: var(--modern-muted);
}

#search-results mark {
    color: inherit;
    background: rgba(117, 214, 109, .35);
}

.pagination > li > a,
.pagination > li > span {
    color: var(--modern-text);
    background-color: var(--modern-surface);
    border-color: var(--modern-line);
}

.pagination > .active > a,
.pagination > .active > span {
    color: #0d1210;
    background-color: var(--modern-green);
    border-color: var(--modern-green);
}

/* -------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------- */
footer .footer {
    padding: 26px 0;
    color: var(--modern-muted);
    background-color: var(--modern-bg);
    border-top: 1px solid var(--modern-line);
}

.footer-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-inner::before,
.footer-inner::after {
    display: none;
    content: none;
}

.footer-copy {
    flex: 1 1 auto;
    font-size: 13px;
}

.footer-copy p {
    margin: 0 0 4px;
}

.footer-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
}

.footer-actions .contribution {
    margin: 0;
}

.footer-actions .contribution-link {
    opacity: .7;
}

.footer-actions .contribution-link:hover {
    opacity: 1;
}

.footer-actions .back-to-top {
    color: var(--modern-muted);
    font-size: 13px;
    font-weight: 650;
}

.footer-actions .back-to-top:hover {
    color: var(--modern-green);
}

footer .footer a.lnk {
    color: var(--modern-green);
}

footer .footer a.lnk:hover {
    color: var(--modern-text);
}

@media only screen and (max-width: 700px) {
    .footer-inner { flex-direction: column; align-items: flex-start; }
    .footer-actions { margin-left: 0; }
}

/* -------------------------------------------------------------------------
   LIGHT THEME
   Matches the main website's light palette (currently its live default).
   ------------------------------------------------------------------------- */
html[data-theme="light"] {
    --modern-bg: #f7f8f9;
    --modern-surface: #ffffff;
    --modern-surface-2: #f1f3f5;
    --modern-text: #18201d;
    --modern-muted: #5f6f65;
    --modern-line: rgba(24, 32, 29, .12);
    --modern-green: #418f3c;
    --modern-green-deep: #367b32;
    --modern-button-green: #52b54b;
}

html[data-theme="light"] .site-header {
    background: rgba(255, 255, 255, .95);
    border-bottom-color: rgba(24, 32, 29, .12);
    box-shadow: 0 8px 24px rgba(25, 31, 28, .06);
}

html[data-theme="light"] .site-header .brand .logo-on-dark {
    display: none;
}

html[data-theme="light"] .site-header .brand .logo-on-light {
    display: block;
}

html[data-theme="light"] .site-header .nav-links a,
html[data-theme="light"] .site-header .nav-dropdown-toggle {
    color: #2d3b33;
}

html[data-theme="light"] .site-header .nav-links a:hover,
html[data-theme="light"] .site-header .nav-links a.is-current,
html[data-theme="light"] .site-header .nav-links a.active,
html[data-theme="light"] .site-header .nav-dropdown-toggle:hover,
html[data-theme="light"] .site-header .nav-dropdown.active > .nav-dropdown-toggle,
html[data-theme="light"] .site-header .nav-dropdown.open > .nav-dropdown-toggle {
    color: var(--modern-green);
}

html[data-theme="light"] .site-header .menu-button {
    color: #142019;
}

html[data-theme="light"] .site-header .nav-links {
    background: #ffffff;
}

html[data-theme="light"] .card,
html[data-theme="light"] .support-card {
    box-shadow: 0 18px 42px rgba(31, 38, 35, .08);
}

html[data-theme="light"] .support-hero {
    background:
        radial-gradient(circle at 78% 25%, rgba(82, 181, 75, .16), transparent 32%),
        linear-gradient(145deg, #ffffff, #edf2ee);
}

html[data-theme="light"] .alert-info > h5 { color: #1976d2; }
html[data-theme="light"] .alert-warning > h5 { color: #b96a00; }
html[data-theme="light"] .alert-danger > h5 { color: #d32f2f; }

html[data-theme="light"] code { color: var(--modern-green-deep); }

html[data-theme="light"] .pagination > .active > a,
html[data-theme="light"] .pagination > .active > span {
    color: #ffffff;
}