/* =========================================================
   QUALITY PLATFORM - GLOBAL THEME V7
   ========================================================= */


/* CLARO */

html[data-theme="light"] {
    --q-bg: #f5f7fb;
    --q-surface: #ffffff;
    --q-surface-2: #f8fafc;
    --q-border: #e5e9f0;

    --q-text: #152033;
    --q-muted: #697386;

    --q-input: #ffffff;
    --q-table-head: #fbfcfe;

    --q-sidebar: #101827;
    --q-sidebar-active: #192235;

    color-scheme: light;
}


/* SUAVE */

html[data-theme="soft"] {
    --q-bg: #e7edf3;
    --q-surface: #f3f6f8;
    --q-surface-2: #eaf0f4;
    --q-border: #d2dbe4;

    --q-text: #263449;
    --q-muted: #67768a;

    --q-input: #f8fafb;
    --q-table-head: #e8edf2;

    --q-sidebar: #172235;
    --q-sidebar-active: #223049;

    color-scheme: light;
}


/* ESCURO */

html[data-theme="dark"] {
    --q-bg: #0a101b;
    --q-surface: #111827;
    --q-surface-2: #172132;
    --q-border: #293548;

    --q-text: #e8edf5;
    --q-muted: #9aa8bb;

    --q-input: #151e2c;
    --q-table-head: #0d1523;

    --q-sidebar: #070d16;
    --q-sidebar-active: #172235;

    color-scheme: dark;
}


/* BASE */

html[data-theme] body,
html[data-theme] #app,
html[data-theme] .dashboard,
html[data-theme] .main-content,
html[data-theme] .content {

    background:
        var(--q-bg) !important;

    color:
        var(--q-text) !important;
}


/* TOPO */

html[data-theme] .topbar {

    background:
        var(--q-surface) !important;

    color:
        var(--q-text) !important;

    border-color:
        var(--q-border) !important;
}


/* SIDEBAR */

html[data-theme] .sidebar {

    background:
        var(--q-sidebar) !important;
}


html[data-theme] .nav-item.active,
html[data-theme] .nav-item:hover {

    background:
        var(--q-sidebar-active) !important;
}


/* CARDS E PAINEIS */

html[data-theme] .metric-card,
html[data-theme] .panel,
html[data-theme] .login-card,
html[data-theme] .tenant-card,
html[data-theme] .empty-state,
html[data-theme] .admin-form,
html[data-theme] .table-wrapper {

    background:
        var(--q-surface) !important;

    color:
        var(--q-text) !important;

    border-color:
        var(--q-border) !important;
}


html[data-theme] .panel-header {

    background:
        var(--q-surface) !important;

    border-color:
        var(--q-border) !important;
}


/* TEXTOS */

html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3,
html[data-theme] h4,
html[data-theme] label,
html[data-theme] strong,
html[data-theme] .metric-value,
html[data-theme] .metric-text {

    color:
        var(--q-text) !important;
}


html[data-theme] p,
html[data-theme] .metric-label,
html[data-theme] .metric-footer,
html[data-theme] .brand-subtitle,
html[data-theme] .eyebrow {

    color:
        var(--q-muted) !important;
}


/* FORMULARIOS */

html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea {

    background:
        var(--q-input) !important;

    color:
        var(--q-text) !important;

    border-color:
        var(--q-border) !important;
}


html[data-theme] input::placeholder,
html[data-theme] textarea::placeholder {

    color:
        var(--q-muted) !important;
}


/* TABELA */

html[data-theme] table,
html[data-theme] tbody,
html[data-theme] tr,
html[data-theme] td {

    background:
        var(--q-surface) !important;

    color:
        var(--q-text) !important;

    border-color:
        var(--q-border) !important;
}


html[data-theme] th {

    background:
        var(--q-table-head) !important;

    color:
        var(--q-muted) !important;

    border-color:
        var(--q-border) !important;
}


/* BOTOES */

html[data-theme] .btn-secondary {

    background:
        var(--q-surface) !important;

    color:
        var(--q-text) !important;

    border-color:
        var(--q-border) !important;
}


/* COMPONENTES SECUNDARIOS */

html[data-theme] .tenant-option,
html[data-theme] .activation-result {

    background:
        var(--q-surface-2) !important;

    color:
        var(--q-text) !important;

    border-color:
        var(--q-border) !important;
}


/* LOGIN */

html[data-theme="light"]
.login-screen {
    background: #f4f7fb !important;
}


html[data-theme="soft"]
.login-screen {
    background: #e5ebf1 !important;
}


html[data-theme="dark"]
.login-screen {
    background: #080d16 !important;
}


/* ROLE */

html[data-theme="dark"]
.role-badge {

    background:
        #17264b !important;

    color:
        #9bb7ff !important;
}


/* =========================================================
   THEME CONTROL
   ========================================================= */

.topbar-right {

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}


.theme-control {

    position: relative;
    z-index: 999;
}


.theme-toggle {

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    background:
        var(--q-surface) !important;

    color:
        var(--q-text) !important;

    border:
        1px solid
        var(--q-border);

    border-radius: 10px;

    cursor: pointer;

    font-size: 17px;
}


.theme-menu {

    position: absolute;

    top: calc(100% + 8px);
    right: 0;

    width: 170px;

    padding: 6px;

    background:
        var(--q-surface) !important;

    border:
        1px solid
        var(--q-border);

    border-radius: 11px;

    box-shadow:
        0 14px 38px
        rgba(0,0,0,.25);
}


.theme-menu.hidden {

    display: none !important;
}


.theme-option {

    width: 100%;

    display: grid;

    grid-template-columns:
        24px 1fr 20px;

    align-items: center;

    gap: 6px;

    padding: 10px;

    background:
        transparent;

    color:
        var(--q-text);

    border: 0;
    border-radius: 7px;

    cursor: pointer;

    text-align: left;
}


.theme-option:hover {

    background:
        var(--q-surface-2);
}


.theme-option.active {

    background:
        rgba(33,87,242,.12);

    color:
        #4f7cff;

    font-weight: 700;
}


.theme-check {

    visibility: hidden;
}


.theme-option.active
.theme-check {

    visibility: visible;
}


.theme-floating {

    position: fixed;

    top: 18px;
    right: 20px;

    z-index: 9999;
}