/*
    Emby brand accent — re-skins Bootstrap 4.6's default blue "primary"
    palette as the Emby green (#52b54b, matching the DevExtreme theme in
    dx-light-cloud-compact.css). Loaded from every project's _Layout right
    after vendor.css so the overrides win over Bootstrap's own styles
    without !important where possible. Where Bootstrap uses descendant
    selectors of similar specificity we fall back to !important to keep the
    CSS cascade predictable (same pattern as beta-admin.css).

    Scope: changes the "primary" accent only — .btn-success,
    .btn-warning, .btn-danger, .text-danger etc. are untouched. Matching
    shade palette:

        base    #52b54b   (main accent)
        hover   #44973e   (hover / focused)
        active  #326f2e   (pressed / active)
        border  #89d083   (focus ring border)
        subtle  #e2f0df / #b8dbb3 (alert-primary bg / border)
*/

:root {
    --emby-primary:               #52b54b;
    --emby-primary-hover:         #44973e;
    --emby-primary-active:        #326f2e;
    --emby-primary-border-focus:  #89d083;
    --emby-primary-focus-shadow:  rgba(82, 181, 75, 0.25);
    --emby-primary-subtle:        #e2f0df;
    --emby-primary-subtle-border: #b8dbb3;
}

/* ------------------------------------------------------------------
   Anchors / link-styled buttons
   ------------------------------------------------------------------ */
a {
    color: var(--emby-primary);
}
a:hover,
a:focus {
    color: var(--emby-primary-hover);
}
.btn-link {
    color: var(--emby-primary);
}
.btn-link:hover,
.btn-link:focus {
    color: var(--emby-primary-hover);
}

/* ------------------------------------------------------------------
   Filled primary button
   ------------------------------------------------------------------ */
.btn-primary {
    background-color: var(--emby-primary);
    border-color:     var(--emby-primary);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    background-color: var(--emby-primary-hover) !important;
    border-color:     var(--emby-primary-hover) !important;
    color: #fff;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--emby-primary-active) !important;
    border-color:     var(--emby-primary-active) !important;
    color: #fff;
}
.btn-primary.focus,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.2rem var(--emby-primary-focus-shadow) !important;
}

/* ------------------------------------------------------------------
   Outline primary button
   ------------------------------------------------------------------ */
.btn-outline-primary {
    color: var(--emby-primary);
    border-color: var(--emby-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff !important;
    background-color: var(--emby-primary) !important;
    border-color:     var(--emby-primary) !important;
}
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
    color: #fff !important;
    background-color: var(--emby-primary-active) !important;
    border-color:     var(--emby-primary-active) !important;
}
.btn-outline-primary.focus,
.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.2rem var(--emby-primary-focus-shadow) !important;
}

/* ------------------------------------------------------------------
   Utility classes that map onto the "primary" accent
   ------------------------------------------------------------------ */
.text-primary           { color:            var(--emby-primary) !important; }
.bg-primary             { background-color: var(--emby-primary) !important; }
.border-primary         { border-color:     var(--emby-primary) !important; }
.link-primary           { color:            var(--emby-primary) !important; }
.link-primary:hover,
.link-primary:focus     { color:            var(--emby-primary-hover) !important; }

/* Bootstrap 4 (.badge-primary) + Bootstrap 5 (.badge.bg-primary) shim in
   beta-admin.css. Both resolve to the same accent. */
.badge-primary,
.badge.bg-primary {
    background-color: var(--emby-primary) !important;
    color: #fff !important;
}

.alert-primary {
    color:            var(--emby-primary-active) !important;
    background-color: var(--emby-primary-subtle) !important;
    border-color:     var(--emby-primary-subtle-border) !important;
}
.alert-primary hr              { border-top-color: var(--emby-primary-subtle-border) !important; }
.alert-primary .alert-link     { color: var(--emby-primary-active) !important; }

.bg-primary-subtle {
    background-color: var(--emby-primary-subtle) !important;
}

.list-group-item-primary {
    color:            var(--emby-primary-active);
    background-color: var(--emby-primary-subtle);
}

/* ------------------------------------------------------------------
   Form controls / focus rings
   ------------------------------------------------------------------ */
.form-control:focus,
.form-select:focus,
.custom-select:focus {
    border-color: var(--emby-primary-border-focus);
    box-shadow:   0 0 0 0.2rem var(--emby-primary-focus-shadow);
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem var(--emby-primary-focus-shadow);
}
.custom-control-input:checked ~ .custom-control-label::before,
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--emby-primary);
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--emby-primary);
}

/* ------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------ */
.nav-link {
    color: var(--emby-primary);
}
.nav-link:hover,
.nav-link:focus {
    color: var(--emby-primary-hover);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--emby-primary);
    color: #fff;
}

/* Pagination — not used on admin grids (paging is disabled), kept for
   consistency on any other page that uses it. */
.page-link {
    color: var(--emby-primary);
}
.page-link:focus {
    box-shadow: 0 0 0 0.2rem var(--emby-primary-focus-shadow);
}
.page-item.active .page-link {
    background-color: var(--emby-primary);
    border-color:     var(--emby-primary);
}

/* ------------------------------------------------------------------
   DevExtreme — dx-light-cloud-compact already ships green, but its
   hyperlinked cell content (anchor tags in cellTemplate) inherits the
   global `a` rule above, so this is just a no-op reminder.
   ------------------------------------------------------------------ */