/* Tema QS.SE — chrome do Portal (topbar navy + menu horizontal + sidebar 2 linhas + footer).
   Marca: navy #08143E / teal #17B9EB. Sobrepõe o Metronic apenas no chrome; cards/badges/
   botões/ícones ki-* continuam do bundle. */

:root {
    --qsse-navy: #0a1636;
    --qsse-navy-2: #08122b;
    --qsse-teal: #17b9eb;
    --qsse-topbar-h: 64px;
    --qsse-sidebar-w: 290px;
}

/* ===== Shell ===== */
.qsse-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.qsse-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.qsse-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background-color: #f5f8fa;
}

.qsse-content-inner {
    flex: 1 1 auto;
    padding: 1.75rem 2rem;
}

/* ===== Topbar ===== */
.qsse-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--qsse-topbar-h);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.25rem;
    background: linear-gradient(180deg, var(--qsse-navy) 0%, var(--qsse-navy-2) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 12px rgba(0, 0, 0, 0.25);
}

.qsse-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.qsse-brand img {
    height: 30px;
    width: auto;
    display: block;
}

.qsse-topnav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: 100%;
    flex: 1 1 auto;
}

.qsse-topnav .qsse-toplink {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 40px;
    padding: 0 0.95rem;
    border-radius: 8px;
    color: #cdd6e4;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.qsse-topnav .qsse-toplink i {
    font-size: 1.15rem;
    line-height: 1;
}

.qsse-topnav .qsse-toplink:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.qsse-topnav .qsse-toplink.active {
    background-color: rgba(23, 185, 235, 0.16);
    color: var(--qsse-teal);
    box-shadow: inset 0 0 0 1px rgba(23, 185, 235, 0.5);
}

.qsse-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.qsse-avatar {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.qsse-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Sidebar ===== */
.qsse-sidebar {
    width: var(--qsse-sidebar-w);
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid #eef1f5;
    padding: 1.25rem 0.75rem;
    overflow-y: auto;
}

.qsse-side-group { margin-bottom: 1rem; }

.qsse-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    color: #3f4254;
    font-weight: 700;
    font-size: 0.9rem;
}

.qsse-side-head .sep { flex: 1 1 auto; }

.qsse-side-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    color: #3f4254;
    transition: background-color .12s;
}

.qsse-side-item:hover { background-color: #f4f6fa; }

.qsse-side-item.active { background-color: rgba(23, 185, 235, 0.10); }
.qsse-side-item.active .qsse-side-title { color: var(--qsse-teal); }

.qsse-side-ico {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.05rem;
}

.qsse-side-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.qsse-side-title { font-weight: 700; font-size: 0.95rem; color: #181c32; }
.qsse-side-sub { font-size: 0.78rem; color: #a1a5b7; }

.ico-green { background: #e8fff3; color: #17c653; }
.ico-red { background: #ffeef1; color: #f8285a; }
.ico-blue { background: #e9f3ff; color: #17b9eb; }
.ico-purple { background: #f3eefe; color: #7239ea; }
.ico-orange { background: #fff4e5; color: #ff8f2c; }
.ico-gray { background: #eef1f6; color: #78829d; }

.qsse-side-sep { border: none; border-top: 1px dashed #e6e9ef; margin: 0.75rem 0.5rem; }

/* ===== Footer ===== */
.qsse-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 2rem;
    color: #a1a5b7;
    font-size: 0.85rem;
    border-top: 1px solid #eef1f5;
    background: #fff;
}

.qsse-footer a { color: #78829d; text-decoration: none; }
.qsse-footer a:hover { color: var(--qsse-teal); }

/* ===== Campos de formulário — contraste garantido =====
   Metronic resolve cor/fundo via CSS custom properties (--bs-gray-*) herdadas
   de [data-bs-theme]. Se esse atributo não estiver setado a tempo (FOUC, nav
   Blazor sem full reload) as vars ficam inválidas e o campo fica sem cor/fundo
   — aqui fixamos valores concretos, sem depender da cascata de tema. */
.form-control,
.form-select,
textarea.form-control {
    color: #181c32;
}

.form-control.form-control-solid,
.form-select.form-select-solid {
    background-color: #f5f8fa;
    border-color: #f5f8fa;
    color: #181c32;
}

.form-control.form-control-solid:focus,
.form-select.form-select-solid:focus,
.form-control.form-control-solid:active,
.form-select.form-select-solid:active {
    background-color: #eef1f6;
    border-color: #eef1f6;
    color: #181c32;
}

.form-control::placeholder {
    color: #a1a5b7;
    opacity: 1;
}

.form-label {
    color: #3f4254;
}

/* ===== Responsivo simples ===== */
.qsse-burger { display: none; }

@media (max-width: 991px) {
    .qsse-topnav { display: none; }
    .qsse-sidebar {
        position: fixed;
        top: var(--qsse-topbar-h);
        left: 0;
        bottom: 0;
        z-index: 90;
        transform: translateX(-100%);
        transition: transform .2s;
        box-shadow: 0 0 30px rgba(0, 0, 0, .15);
    }
    .qsse-shell.sidebar-open .qsse-sidebar { transform: translateX(0); }
    .qsse-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px; height: 38px;
        border-radius: 8px;
        background: rgba(255,255,255,.1);
        color: #fff; border: none;
    }
}