/**
 * ITQ Metis brand application layer
 * Maps design tokens onto Metronic / Bootstrap 3 legacy markup.
 * Button rules change colours only — existing border-radius and layout preserved.
 *
 * NOTE: All selectors are wrapped in :where() giving them 0 specificity (0, 0, 0).
 * This guarantees that client-specific overwrite.css ALWAYS has first priority,
 * while itq-metis-brand.css serves as the fallback/default brand theme layer.
 */

/* ── Base typography ── */
:where(body) {
    color: var(--metis-text-body);
    font-weight: var(--metis-font-body-weight);
    line-height: var(--metis-leading-body);
}

:where(h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6) {
    color: var(--metis-text-heading);
    font-weight: var(--metis-font-heading-weight);
    letter-spacing: var(--metis-tracking-heading);
}

:where(h1, .h1) { font-size: var(--metis-text-2xl); line-height: var(--metis-leading-tight); }
:where(h2, .h2) { font-size: var(--metis-text-xl); line-height: var(--metis-leading-tight); }
:where(h3, .h3) { font-size: var(--metis-text-lg); line-height: var(--metis-leading-tight); }

:where(a) {
    color: var(--metis-text-link);
    text-decoration: none;
}

:where(a:hover,
a:focus) {
    color: var(--metis-text-link-hover);
}

:where(a.link) {
    color: var(--metis-text-strong) !important;
    font-weight: var(--metis-font-label-weight);
}

/* ── Page chrome (legacy admin / parent, non config-theme-scope) ── */
:where(body:not(.config-theme-scope), body) {
    background: var(--metis-bg-sidebar) !important;
}

:where(body:not(.config-theme-scope) .page-header.navbar, .page-header.navbar) {
    background: var(--metis-bg-header) !important;
}

:where(body:not(.config-theme-scope) .page-sidebar,
.page-sidebar) {
    background-color: var(--metis-bg-sidebar);
}

:where(body.page-content-white .page-content-wrapper .page-content,
.page-container-bg-solid .page-bar,
.page-content-white .page-bar,
.page-content-white .page-content) {
    background: var(--metis-bg-page-alt);
}

:where(.page-header.navbar .top-menu .navbar-nav > li > a) {
    color: var(--metis-text-on-dark);
}

:where(.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle:hover > i,
.page-header.navbar .top-menu .navbar-nav > li.dropdown .dropdown-toggle > i) {
    color: var(--metis-text-on-dark) !important;
}

:where(.page-footer-inner a) {
    color: var(--metis-text-on-dark) !important;
}

/* ── Sidebar navigation (legacy dark sidebar) ── */
:where(body:not(.config-theme-scope) .page-sidebar-menu > .nav-item a,
body:not(.config-theme-scope) .page-sidebar-menu > .nav-item > .nav-link > i,
.page-sidebar-menu > .nav-item a,
.page-sidebar-menu > .nav-item > .nav-link > i) {
    color: var(--metis-text-on-dark) !important;
}

:where(body:not(.config-theme-scope) .page-sidebar .page-sidebar-menu > li.active.open > a,
body:not(.config-theme-scope) .page-sidebar .page-sidebar-menu > li.active > a,
body:not(.config-theme-scope) .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active.open > a,
body:not(.config-theme-scope) .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.active > a,
.page-sidebar .page-sidebar-menu > li.active.open > a,
.page-sidebar .page-sidebar-menu > li.active > a) {
    background-color: var(--metis-blue-600) !important;
    color: var(--metis-text-on-dark) !important;
}

:where(body:not(.config-theme-scope) .page-sidebar .page-sidebar-menu > li.open > a,
body:not(.config-theme-scope) .page-sidebar .page-sidebar-menu > li:hover > a,
body:not(.config-theme-scope) .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li.open > a,
body:not(.config-theme-scope) .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li:hover > a,
.page-sidebar .page-sidebar-menu > li.open > a,
.page-sidebar .page-sidebar-menu > li:hover > a) {
    background: var(--metis-blue-700);
}

:where(body:not(.config-theme-scope) .page-sidebar .page-sidebar-menu .sub-menu > li.active > a,
body:not(.config-theme-scope) .page-sidebar .page-sidebar-menu .sub-menu > li.open > a,
body:not(.config-theme-scope) .page-sidebar .page-sidebar-menu .sub-menu > li:hover > a,
body:not(.config-theme-scope) .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.active > a,
body:not(.config-theme-scope) .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li.open > a,
body:not(.config-theme-scope) .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu > li:hover > a,
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a,
.page-sidebar .page-sidebar-menu .sub-menu > li.open > a,
.page-sidebar .page-sidebar-menu .sub-menu > li:hover > a) {
    background-color: var(--metis-slate-600) !important;
}

:where(body:not(.config-theme-scope) .nav > li > a:focus,
body:not(.config-theme-scope) .nav > li > a:hover,
.nav > li > a:focus,
.nav > li > a:hover) {
    background-color: var(--metis-slate-600);
    color: var(--metis-orange-400) !important;
}

/* ── Portlets & pagination ── */
:where(.portlet.blue,
.portlet.box.blue > .portlet-title,
.portlet > .portlet-body.blue) {
    background-color: var(--metis-navy-900);
}

:where(.page-wrapper .page-container .page-content-wrapper .page-content .portlet .portlet-title,
.portlet > .portlet-title) {
    background: var(--metis-orange-500);
    border-color: var(--metis-orange-500);
}

:where(.page-wrapper .page-container .page-content-wrapper .page-content .portlet,
.portlet) {
    border-color: var(--metis-orange-500);
}

:where(.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover) {
    background-color: var(--metis-navy-900) !important;
    border-color: var(--metis-navy-900);
    color: var(--metis-text-on-dark) !important;
}

:where(.progress-bar-info,
.progress-bar) {
    background-color: var(--metis-blue-600);
}

/* ── Dropdowns ── */
:where(.dropdown-menu > li.active:hover > a,
.dropdown-menu > li.active > a,
.dropdown-menu > li:hover > a) {
    background: var(--metis-navy-900) !important;
}

:where(.dropdown-menu > li a) {
    color: var(--metis-text-body) !important;
    border-bottom: 1px solid var(--metis-border-subtle) !important;
}

:where(.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"]) {
    color: var(--metis-text-strong) !important;
}

/* ── Buttons — colours only ── */
:where(.btn) {
    background: var(--metis-btn-default-bg) !important;
    border-color: var(--metis-btn-default-border) !important;
    color: var(--metis-btn-default-text) !important;
}

:where(.btn:hover,
.btn:focus) {
    background: var(--metis-btn-default-hover-bg) !important;
    border-color: var(--metis-btn-default-hover-border) !important;
    color: var(--metis-btn-default-hover-text) !important;
}

:where(.btn:active,
.btn.active) {
    background: var(--metis-navy-800) !important;
    border-color: var(--metis-navy-800) !important;
    color: var(--metis-text-on-dark) !important;
}

:where(.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn) {
    background: rgba(82, 86, 109, 0.45) !important;
    border-color: rgba(82, 86, 109, 0.45) !important;
    color: rgba(255, 255, 255, 0.65) !important;
}

:where(.btn-primary,
.btn.blue) {
    background: var(--metis-btn-primary-bg) !important;
    border-color: var(--metis-btn-primary-border) !important;
    color: var(--metis-btn-primary-text) !important;
}

:where(.btn-primary:hover,
.btn-primary:focus,
.btn.blue:hover,
.btn.blue:focus) {
    background: var(--metis-btn-primary-hover-bg) !important;
    border-color: var(--metis-btn-primary-hover-border) !important;
    color: var(--metis-btn-primary-hover-text) !important;
}

:where(.btn-primary:active,
.btn-primary.active,
.btn.blue:active,
.btn.blue.active) {
    background: var(--metis-btn-primary-active-bg) !important;
    border-color: var(--metis-btn-primary-active-border) !important;
    color: var(--metis-btn-primary-text) !important;
}

:where(.btn-primary.disabled,
.btn-primary[disabled],
.btn.blue.disabled,
.btn.blue[disabled]) {
    background: var(--metis-btn-primary-disabled-bg) !important;
    border-color: var(--metis-btn-primary-disabled-border) !important;
    color: var(--metis-btn-primary-disabled-text) !important;
}

:where(.btn-outline,
.btn-outline-primary) {
    background: var(--metis-btn-secondary-bg) !important;
    border-color: var(--metis-btn-secondary-border) !important;
    color: var(--metis-btn-secondary-text) !important;
}

:where(.btn-outline:hover,
.btn-outline:focus,
.btn-outline-primary:hover,
.btn-outline-primary:focus) {
    background: var(--metis-btn-secondary-hover-bg) !important;
    border-color: var(--metis-btn-secondary-hover-border) !important;
    color: var(--metis-btn-secondary-hover-text) !important;
}

:where(.btn-outline:active,
.btn-outline.active,
.btn-outline-primary:active,
.btn-outline-primary.active) {
    background: var(--metis-btn-secondary-active-bg) !important;
    border-color: var(--metis-btn-secondary-active-border) !important;
    color: var(--metis-btn-secondary-hover-text) !important;
}

:where(.btn-outline.disabled,
.btn-outline[disabled],
.btn-outline-primary.disabled,
.btn-outline-primary[disabled]) {
    background: transparent !important;
    border-color: var(--metis-btn-secondary-disabled-border) !important;
    color: var(--metis-btn-secondary-disabled-text) !important;
}

:where(.content .btn,
.content .btn-outline:hover) {
    background: var(--metis-btn-ghost-bg) !important;
    border-color: var(--metis-btn-ghost-border) !important;
    color: var(--metis-btn-ghost-text) !important;
}

:where(.content .btn:hover,
.content .btn-outline:hover) {
    background: var(--metis-btn-ghost-hover-bg) !important;
    border-color: var(--metis-btn-ghost-hover-border) !important;
    color: var(--metis-btn-ghost-hover-text) !important;
}

:where(.btn-danger) {
    background: var(--metis-btn-danger-bg) !important;
    border-color: var(--metis-btn-danger-bg) !important;
    color: var(--metis-text-on-dark) !important;
}

:where(.btn-danger:hover,
.btn-danger:focus) {
    background: var(--metis-btn-danger-hover-bg) !important;
    border-color: var(--metis-btn-danger-hover-bg) !important;
}

:where(.btn-success) {
    background: var(--metis-btn-success-bg) !important;
    border-color: var(--metis-btn-success-bg) !important;
    color: var(--metis-text-on-dark) !important;
}

:where(.btn-success:hover,
.btn-success:focus) {
    background: var(--metis-btn-success-hover-bg) !important;
    border-color: var(--metis-btn-success-hover-bg) !important;
}

:where(.btn-warning) {
    background: var(--metis-btn-warning-bg) !important;
    border-color: var(--metis-btn-warning-bg) !important;
    color: var(--metis-text-on-dark) !important;
}

:where(.btn-warning:hover,
.btn-warning:focus) {
    background: var(--metis-btn-warning-hover-bg) !important;
    border-color: var(--metis-btn-warning-hover-bg) !important;
}

:where(.btn-group a) {
    color: var(--metis-text-on-dark) !important;
}

:where(.btn a) {
    color: inherit !important;
}

:where(.btn-circle i,
.btn-circle) {
    background-color: transparent;
    color: var(--metis-text-on-dark) !important;
    border-color: var(--metis-text-on-dark) !important;
}

:where(.btn-circle:hover i) {
    background-color: var(--metis-navy-900);
    color: var(--metis-text-on-dark) !important;
    border-color: var(--metis-navy-900);
}

/* ── Login pages ── */
:where(body.login:not(.admin-login), body.login) {
    background-color: var(--metis-bg-surface) !important;
}

:where(body.login:not(.admin-login) .login .content,
body.login:not(.admin-login) .content,
body.login .content,
.login .content) {
    background: var(--metis-navy-900) !important;
}

:where(body.login:not(.admin-login) .login .content .form-title,
body.login:not(.admin-login) .login .content .login-form p,
body.login:not(.admin-login) .login .content .login-form a:not(.btn),
body.login:not(.admin-login) .content .form-title,
body.login:not(.admin-login) .content .login-form p,
body.login:not(.admin-login) .content .login-form a:not(.btn),
.login .content .form-title,
.login .content .login-form p,
.login .content .login-form a:not(.btn)) {
    color: var(--metis-text-on-dark) !important;
}

:where(body.login:not(.admin-login) .login .input-icon .fa,
body.login:not(.admin-login) .input-icon .input-group-addon .fa,
body.login .input-icon .fa,
.login .input-icon .fa) {
    color: var(--metis-navy-900) !important;
}

/* ── Tabs ── */
:where(.tabbable-line > .nav-tabs > li.open,
.tabbable-line > .nav-tabs > li:hover,
.tabbable-line > .nav-tabs > li.active) {
    border-bottom-color: var(--metis-orange-500);
}

:where(.form-control:focus) {
    border-color: var(--metis-blue-600);
}