/* =======================================================
   🔹 1. CONFIGURAÇÃO GERAL DO LAYOUT
   ======================================================= */

:root[data-theme="green-dark"] {
    --bg-dark-2: #212529;
    --bg-dark-1: #2F343A;
    --bg-1: #bcea31;
    --bg-2: #222e00;
    --bg-3: #8bd416;
    --bg-3-rgba: rgba(157, 200, 37, 0.88);
    --bg-4: #f4ffd0;

    --text-1: #ffffff;
    --text-1-inverse: #000000;
    --text-2: #dddddd;
    --text-2-inverse: #222222;

    --bg-yellow: #d1a625;
    --bg-yellow-fade: rgba(209, 166, 37, 0.18);
    --bg-yellow-border: rgba(209, 166, 37, 0.22);
    --bg-red: #dc3545;
    --bg-red-fade: rgba(220, 53, 69, 0.18);
    --bg-red-border: rgba(220, 53, 69, 0.22);
    --bg-green: #14d641;
    --bg-green-fade: rgba(29, 202, 69, 0.18);
    --bg-green-border: rgba(27, 206, 69, 0.22);

    --page-bg-top: #10161c;
    --page-bg-mid: #141c24;
    --page-bg-bottom: #18212a;
    --page-panel-top: rgba(16, 23, 29, 0.94);
    --page-panel-bottom: rgba(25, 34, 43, 0.98);
    --page-text: #f3f7ed;
    --page-muted: #a7b2aa;
    --page-border: rgba(255, 255, 255, 0.1);
    --page-border-soft: rgba(255, 255, 255, 0.08);
    --page-surface: rgba(255, 255, 255, 0.04);
    --page-surface-strong: rgba(255, 255, 255, 0.08);
    --page-surface-deep: rgba(12, 16, 21, 0.9);
    --page-shadow: 0 24px 65px rgba(0, 0, 0, 0.3);
    --page-accent-dark: var(--bg-3);
    --page-glow-primary: rgba(188, 234, 49, 0.12);
    --page-glow-secondary: rgba(76, 118, 255, 0.1);
    --page-accent-outline: rgba(188, 234, 49, 0.16);
    --page-accent-orb: rgba(188, 234, 49, 0.18);

    /* Accent color variations */
    --accent-brightest: rgba(188, 234, 49, 0.5);
    --accent-bright: rgba(188, 234, 49, 0.48);
    --accent-medium-bright: rgba(188, 234, 49, 0.42);
    --accent-medium: rgba(188, 234, 49, 0.38);
    --accent-medium-light: rgba(188, 234, 49, 0.34);
    --accent-light: rgba(188, 234, 49, 0.26);
    --accent-lighter: rgba(188, 234, 49, 0.14);
    --accent-lightest: rgba(188, 234, 49, 0.1);
    --accent-fade-light: rgba(188, 234, 49, 0.08);
    --accent-fade: rgba(188, 234, 49, 0.06);

    /* White/Surface variations */
    --white-18: rgba(255, 255, 255, 0.18);
    --white-12: rgba(255, 255, 255, 0.12);
    --white-05: rgba(255, 255, 255, 0.05);
    --white-03: rgba(255, 255, 255, 0.03);
    --white-02: rgba(255, 255, 255, 0.02);

    /* Dark/Shadow variations */
    --black-22: rgba(0, 0, 0, 0.22);
    --black-14: rgba(0, 0, 0, 0.14);
    --dark-bg-92: rgba(16, 23, 29, 0.92);
    --dark-bg-68: rgba(16, 23, 29, 0.68);

    /* Text secondary variations */
    --text-secondary-55: rgba(243, 247, 237, 0.55);
    --text-secondary-50: rgba(243, 247, 237, 0.5);
    --text-secondary-44: rgba(243, 247, 237, 0.44);

}

:root[data-theme="blue-dark"] {
    --bg-dark-2: #212529;
    --bg-dark-1: #2F343A;
    --bg-1: #00dafc;
    --bg-2: #00142c;
    --bg-3: #1269d5;
    --bg-3-rgba: rgba(18, 105, 213, 0.88);
    --bg-4: #d7f8ff;

    --text-1: #ffffff;
    --text-1-inverse: #000000;
    --text-2: #dddddd;
    --text-2-inverse: #222222;

    --bg-yellow: #ffda6d;
    --bg-yellow-fade: rgba(255, 218, 109, 0.18);
    --bg-yellow-border: rgba(255, 218, 109, 0.22);
    --bg-red: #ff8f8f;
    --bg-red-fade: rgba(122, 34, 34, 0.18);
    --bg-red-border: rgba(255, 143, 143, 0.22);
    --bg-green: #7dffb6;
    --bg-green-fade: rgba(31, 116, 72, 0.18);
    --bg-green-border: rgba(125, 255, 182, 0.22);

    --page-bg-top: #10161c;
    --page-bg-mid: #141c24;
    --page-bg-bottom: #18212a;
    --page-panel-top: rgba(16, 23, 29, 0.94);
    --page-panel-bottom: rgba(25, 34, 43, 0.98);
    --page-text: #f3f7ed;
    --page-muted: #a7b2aa;
    --page-border: rgba(255, 255, 255, 0.1);
    --page-border-soft: rgba(255, 255, 255, 0.08);
    --page-surface: rgba(255, 255, 255, 0.04);
    --page-surface-strong: rgba(255, 255, 255, 0.08);
    --page-surface-deep: rgba(12, 16, 21, 0.9);
    --page-shadow: 0 24px 65px rgba(0, 0, 0, 0.3);
    --page-accent-dark: var(--bg-3);
    --page-glow-primary: rgba(0, 218, 252, 0.12);
    --page-glow-secondary: rgba(18, 105, 213, 0.1);
    --page-accent-outline: rgba(0, 218, 252, 0.16);
    --page-accent-orb: rgba(0, 218, 252, 0.18);

    /* Accent color variations */
    --accent-brightest: rgba(0, 218, 252, 0.5);
    --accent-bright: rgba(0, 218, 252, 0.48);
    --accent-medium-bright: rgba(0, 218, 252, 0.42);
    --accent-medium: rgba(0, 218, 252, 0.38);
    --accent-medium-light: rgba(0, 218, 252, 0.34);
    --accent-light: rgba(0, 218, 252, 0.26);
    --accent-lighter: rgba(0, 218, 252, 0.14);
    --accent-lightest: rgba(0, 218, 252, 0.1);
    --accent-fade-light: rgba(0, 218, 252, 0.08);
    --accent-fade: rgba(0, 218, 252, 0.06);

    /* White/Surface variations */
    --white-18: rgba(255, 255, 255, 0.18);
    --white-12: rgba(255, 255, 255, 0.12);
    --white-05: rgba(255, 255, 255, 0.05);
    --white-03: rgba(255, 255, 255, 0.03);
    --white-02: rgba(255, 255, 255, 0.02);

    /* Dark/Shadow variations */
    --black-22: rgba(0, 0, 0, 0.22);
    --black-14: rgba(0, 0, 0, 0.14);
    --dark-bg-92: rgba(16, 23, 29, 0.92);
    --dark-bg-68: rgba(16, 23, 29, 0.68);

    /* Text secondary variations */
    --text-secondary-55: rgba(243, 247, 237, 0.55);
    --text-secondary-50: rgba(243, 247, 237, 0.5);
    --text-secondary-44: rgba(243, 247, 237, 0.44);
}

body {
    font-family: "Poppins", sans-serif;
    font-size: 14px !important;
    background-color: var(--bg-dark-1);
}

::selection {
    background: var(--bg-1);
    color: var(--text-2-inverse);
    text-shadow: none;
}

::-moz-selection {
    background: var(--bg-1);
    color: var(--text-2-inverse);
    text-shadow: none;
}

html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Mantém o footer sempre no rodapé */
#sticky-footer {
    margin-top: auto;
}

/* Tamanho padrão de fontes para inputs gerais */
input, select, textarea, button {
    font-size: 14px !important;
}

select option {
    font-size: 14px !important;
}


/* =======================================================
   🔹 2. NAVBAR / LOGO
   ======================================================= */

.navbar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-maior {
    height: 45px;
    width: auto;
}

.logo-menor {
    height: 17px;
    width: auto;
}

/* Cor padrão dos textos de navegação */
.nav-link,
.form-label,
.page-list,
.pagination-info {
  color: var(--bg-1) !important;
}

/* Efeito hover + espaçamento do sublinhado */
.nav-link {
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 3px;
  transition: border-color 0.2s ease;
}

.nav-link:hover {
  border-bottom-color: currentColor;
}

.nav-link.active {
  border-bottom-color: currentColor;
}

.cmd-navbar {
    border-bottom: 1px solid color-mix(in srgb, var(--text-1) 8%, transparent);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--text-1-inverse) 18%, transparent);
}

.cmd-navbar-container {
    gap: 1rem;
    min-width: 0;
}

.cmd-navbar-brand {
    margin-right: 0;
}

.cmd-navbar-desktop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex: 1 1 auto;
    min-width: 0;
}

.cmd-navbar-links-shell {
    position: relative;
    flex: 0 1 auto;
    width: clamp(26rem, 66vw, 60rem);
    max-width: 100%;
    min-width: 0;
}

.cmd-navbar-links-shell.is-overflowing {
    padding-inline: 1.5rem;
}

.cmd-navbar-links-viewport {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

.cmd-navbar-links-viewport::-webkit-scrollbar {
    display: none;
}

.cmd-navbar-links-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 0.85rem;
    width: max-content;
    min-width: max-content;
}

.cmd-navbar-links-list .nav-item {
    flex: 0 0 auto;
}

.cmd-navbar-links-list .nav-link {
    white-space: nowrap;
}

.cmd-navbar-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95rem;
    height: 0.95rem;
    padding: 0;
    border: none;
    background: transparent;
    color: color-mix(in srgb, var(--text-1) 92%, transparent);
    transform: translateY(-50%);
    transition: color 0.18s ease, opacity 0.18s ease;
}

.cmd-navbar-arrow:hover,
.cmd-navbar-arrow:focus {
    color: var(--bg-1);
}

.cmd-navbar-arrow i {
    font-size: 1.2rem;
    line-height: 1;
}

.cmd-navbar-arrow:disabled {
    opacity: 0.28;
    pointer-events: none;
}

.cmd-navbar-arrow-prev {
    left: 0;
}

.cmd-navbar-arrow-next {
    right: 0;
}

.cmd-navbar-user {
    flex: 0 0 auto;
    min-width: 0;
}

.cmd-navbar-user-card {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.34rem 0.65rem 0.34rem 0.85rem;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--text-1-inverse) 25%, transparent);
    border: 1px solid color-mix(in srgb, var(--text-1) 10%, transparent);
}

.cmd-navbar-user-copy-wrap {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.cmd-navbar-user-name {
    display: inline-block;
    max-width: 152px;
}

.cmd-navbar-logout,
.cmd-mobile-nav-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    white-space: nowrap;
    min-height: 40px;
    padding: 0.5rem 0.9rem !important;
    border-radius: 14px !important;
    border: 1px solid color-mix(in srgb, var(--text-1) 12%, transparent) !important;
    background: color-mix(in srgb, var(--text-1) 4%, transparent);
    color: var(--text-1) !important;
    text-decoration: none;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--text-1-inverse) 14%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.cmd-navbar-logout i,
.cmd-mobile-nav-logout i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    color: inherit;
    font-size: 0.95rem;
    flex: 0 0 auto;
    line-height: 1;
    transition: color 0.2s ease;
}

.cmd-navbar-logout span,
.cmd-mobile-nav-logout span {
    line-height: 1;
    font-weight: 600;
}

.cmd-navbar-logout:hover,
.cmd-navbar-logout:focus,
.cmd-mobile-nav-logout:hover,
.cmd-mobile-nav-logout:focus {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--text-1) 18%, transparent) !important;
    background: color-mix(in srgb, var(--text-1) 8%, transparent);
    color: var(--text-1) !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--text-1-inverse) 14%, transparent);
}

.cmd-navbar-logout:hover i,
.cmd-navbar-logout:focus i,
.cmd-mobile-nav-logout:hover i,
.cmd-mobile-nav-logout:focus i {
    color: inherit;
}

.cmd-navbar-logout:focus-visible,
.cmd-mobile-nav-logout:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text-1) 12%, transparent);
}

.cmd-navbar-toggler {
    border-color: color-mix(in srgb, var(--text-1) 14%, transparent) !important;
    border-radius: 0.95rem;
    background: color-mix(in srgb, var(--text-1) 8%, transparent);
    box-shadow: none !important;
}

.cmd-mobile-nav-sheet {
    border-top-left-radius: 1.35rem;
    border-top-right-radius: 1.35rem;
    border: 1px solid color-mix(in srgb, var(--bg-1) 18%, transparent);
    border-bottom: 0;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-dark-1) 96%, var(--text-1-inverse)), color-mix(in srgb, var(--bg-dark-1) 55%, var(--text-1-inverse)));
    box-shadow: 0 -24px 48px color-mix(in srgb, var(--text-1-inverse) 34%, transparent);
}

.cmd-mobile-nav-sheet-header {
    padding: 1rem 1rem 0.9rem;
    border-bottom: 1px solid color-mix(in srgb, var(--text-1) 8%, transparent);
}

.cmd-mobile-nav-sheet-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
}

.cmd-mobile-nav-kicker {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text-2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cmd-mobile-nav-user-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--bg-1) 16%, transparent);
    border-radius: 1rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-1) 8%, transparent), color-mix(in srgb, var(--text-1) 3%, transparent));
}

.cmd-mobile-nav-user-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 0.95rem;
    background: color-mix(in srgb, var(--bg-1) 14%, transparent);
    color: var(--bg-1);
    flex: 0 0 auto;
}

.cmd-mobile-nav-user-icon i {
    font-size: 1.2rem;
}

.cmd-mobile-nav-user-copy {
    min-width: 0;
}

.cmd-mobile-nav-user-name {
    display: block;
    color: var(--text-1);
    font-size: 1rem;
    line-height: 1.2;
}

.cmd-mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cmd-mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
    border: 1px solid color-mix(in srgb, var(--text-1) 8%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--text-1) 3%, transparent);
    color: var(--text-1);
    text-decoration: none;
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.cmd-mobile-nav-link:hover,
.cmd-mobile-nav-link:focus {
    border-color: color-mix(in srgb, var(--bg-1) 26%, transparent);
    background: color-mix(in srgb, var(--bg-1) 8%, transparent);
    color: var(--text-1);
    transform: translateY(-1px);
}

.cmd-mobile-nav-link.active {
    border-color: color-mix(in srgb, var(--bg-1) 34%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-1) 18%, transparent), color-mix(in srgb, var(--bg-1) 6%, transparent));
    color: var(--bg-4);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg-1) 14%, transparent);
}

.cmd-mobile-nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 0.95rem;
    background: color-mix(in srgb, var(--bg-1) 12%, transparent);
    color: var(--bg-1);
    flex: 0 0 auto;
}

.cmd-mobile-nav-link-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.cmd-mobile-nav-link-title {
    display: block;
    font-weight: 700;
    line-height: 1.2;
}

.cmd-mobile-nav-link-chevron {
    color: color-mix(in srgb, var(--text-1) 45%, transparent);
    flex: 0 0 auto;
}

.cmd-mobile-nav-logout {
    border-radius: 0.95rem;
    font-weight: 600;
    width: 100%;
}

@media (min-width: 992px) {
    .cmd-mobile-nav-sheet {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .cmd-mobile-nav-sheet {
        height: auto !important;
        max-height: min(82vh, 40rem);
    }

    .cmd-mobile-nav-sheet-body {
        gap: 0.85rem;
        padding: 0.9rem 0.9rem calc(0.9rem + env(safe-area-inset-bottom));
    }

    .cmd-mobile-nav-user-card {
        gap: 0.7rem;
        padding: 0.78rem 0.85rem;
        border-radius: 0.9rem;
        background: linear-gradient(180deg, color-mix(in srgb, var(--bg-1) 5%, transparent), color-mix(in srgb, var(--text-1) 2%, transparent));
    }

    .cmd-mobile-nav-user-icon {
        width: 2.35rem;
        height: 2.35rem;
        border-radius: 0.8rem;
    }

    .cmd-mobile-nav-user-icon i {
        font-size: 1rem;
    }

    .cmd-mobile-nav-user-name {
        font-size: 0.92rem;
    }

    .cmd-mobile-nav-links {
        gap: 0.6rem;
    }

    .cmd-mobile-nav-link {
        gap: 0.7rem;
        padding: 0.72rem 0.85rem;
        border-radius: 0.9rem;
    }

    .cmd-mobile-nav-link-icon {
        width: 2.35rem;
        height: 2.35rem;
        border-radius: 0.8rem;
    }

    .cmd-mobile-nav-link-icon i {
        font-size: 0.95rem;
    }

    .cmd-mobile-nav-link-title {
        font-size: 0.94rem;
    }

    .cmd-mobile-nav-logout {
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }
}

.nav-tabs .nav-link.active {
    background-color: var(--bg-dark-1) !important;
}

/* Badge discreto para pendências no menu */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    color: var(--text-1);
    background: var(--bg-red);
    border: none;
    transform: translateY(-6px);
}


/* =======================================================
   🔹 3. FORMULÁRIOS E INPUTS – TEMA ESCURO
   ======================================================= */

.form-select, .form-control {
    background-color: var(--bg-dark-1);
    color: var(--bg-1);
    border-color: var(--text-2);
}

.input-group-text {
    background-color: var(--bg-dark-1);
    color:var(--text-2);
    border-color: var(--text-2);
}

.form-select:focus,
.form-control:focus {
    background-color: var(--bg-dark-1);
    color: var(--bg-1);
    border-color: var(--bg-1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg-1) 25%, transparent);
}

/* Remove setas de number */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* ===== INPUT FILE - ESCURO (normal) ===== */
input[type="file"] {
    background-color: var(--bg-dark-1) !important;
    color: var(--bg-1) !important;
    border: 1px solid var(--text-2) !important;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    background-color: var(--bg-1);
    border: 1px solid var(--text-1);
    color: var(--text-1-inverse);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}

input[type="file"]:hover::file-selector-button,
input[type="file"]:hover::-webkit-file-upload-button {
    background-color: var(--bg-dark-1);
    border-color: var(--bg-1);
}

/* ===== INPUT FILE DESABILITADO ===== */
input[type="file"]:disabled {
    background-color: var(--bg-dark-1) !important;
    border-color: var(--text-2) !important;
    color: var(--text-2) !important;
}

input[type="file"]:disabled::file-selector-button,
input[type="file"]:disabled::-webkit-file-upload-button {
    background-color: var(--bg-dark-1) !important;
    border-color: var(--text-2-inverse) !important;
    color: var(--text-2) !important;
}

/* ===== INPUT/SELECT/TEXTAREA DESABILITADO ===== */
input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--bg-dark-1) !important;
    color: var(--text-2) !important;
    border-color: var(--text-2) !important;
    opacity: 1 !important;
}

/* Placeholder VISÍVEL no tema escuro */
.form-control::placeholder,
.form-select::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--bg-1) !important;
    opacity: 0.6 !important;
}


/* =======================================================
   🔹 4. SELECT2 – TEMA ESCURO IGUAL AOS INPUTS
   ======================================================= */

/* Caixa principal do Select2 */
.select2-container .select2-selection--multiple,
.select2-container .select2-selection--single {
    background-color: var(--bg-dark-1) !important;
    border: 1px solid var(--text-2) !important;
    min-height: 38px !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    color: var(--bg-1) !important;
}

/* Texto selecionado */
.select2-container .select2-selection__rendered {
    color: var(--bg-1) !important;
    line-height: 28px !important;
}

/* Placeholder */
.select2-container .select2-selection__placeholder {
    color: var(--bg-1) !important;
    opacity: 0.6 !important;
}

/* Setinha do dropdown */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 6px !important;
    right: 8px !important;
}

/* TAGS do Select2 (múltiplo) */
.select2-container .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bg-dark-1) !important; /* cor primária do seu sistema */
    border: none !important;
    color: var(--text-1) !important;
    padding: 2px 8px !important;
    margin-top: 4px !important;
    border-radius: 4px !important;
    font-size: 0.85rem !important;
}

/* Botão de remover tag */
.select2-container .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--text-1) !important;
    margin-right: 4px;
    font-weight: bold;
}

/* Caixa de digitação interna */
.select2-container .select2-search--inline .select2-search__field {
    color: var(--bg-1) !important;
}

/* Dropdown */
.select2-container .select2-dropdown {
    background-color: var(--bg-dark-1) !important;
    border: 1px solid var(--text-2) !important;
    border-radius: 6px !important;
}

/* Opções */
.select2-container .select2-results__option {
    padding: 8px 10px !important;
    font-size: 0.95rem !important;
    color: var(--bg-1) !important;
}

/* Hover */
.select2-container .select2-results__option--highlighted {
    background-color: var(--bg-1) !important;
    color: var(--text-1-inverse) !important;
}

/* Selecionado */
.select2-container .select2-results__option[aria-selected="true"] {
    background-color: var(--bg-dark-1) !important;
    color: var(--bg-1) !important;
}

/* Foco igual aos inputs */
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--bg-1) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg-1) 25%, transparent) !important;
}

/* ============================
   CORREÇÃO DO "X" DO SELECT2
   ============================ */

/* Ajusta o botão de remover */
.select2-container .select2-selection__choice__remove {
    color: var(--text-1) !important;
    margin-right: 6px !important;
    margin-left: 2px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    line-height: 1 !important;
    padding: 0 !important;
}

/* Ajusta a TAG azul */
.select2-container .select2-selection--multiple .select2-selection__choice {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;

    /* fundo da tag */
    background-color: var(--bg-dark-1) !important;
    color: var(--text-1) !important;
    border-radius: 4px !important;

    border: none !important;
    padding: 4px 8px !important;
    margin-top: 4px !important;

    /* força o alinhamento do X e do texto */
    white-space: nowrap !important;
}


.offcanvas-cmd {
    width: 700px !important; 
}

/* =======================================================
   🔹 4. CARDS
   ======================================================= */

.card-body, .card {
    background: var(--bg-dark-2);
    color: var(--bg-1);
    border-radius: 0.5rem;
    border-color: var(--text-2);
}

.card-header {
    font-weight: bolder;
    background: var(--bg-dark-1);
}

.text-muted{
    color: var(--text-2) !important;
}

h1,h2,h3,h4,h5,h6 {
    color: var(--bg-1) !important;
}

.value {
    color: var(--text-2);
}

#preloader {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--text-1-inverse) 80%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity .3s ease;
}

/* =======================================================
   🔹 5. TABELAS
   ======================================================= */

.table-dark {
  border-collapse: collapse;
  border-radius: 6px;
  overflow: hidden;
}

.table-dark th,
.table-dark td {
  border: none !important;
}

.text-cmd {
    color: var(--bg-1);
}

.table-dark thead th {
    color: var(--bg-1) !important;
}


/* =======================================================
   🔹 6. CORES OFICIAIS "COMANDO"
   ======================================================= */
/*
Verde Aquiraz: var(--bg-1)
Cinza Escuro: var(--bg-dark-1)
Roxo Comando: var(--bg-dark-1)
*/

/* Verde Aquiraz */
.bg-cmd,
.btn-cmd {
    background-color: var(--bg-dark-2);
    color: var(--bg-1);
    border-color: var(--bg-1);
}

.btn-cmd:hover {
    background-color: var(--bg-1);
    color: var(--bg-dark-1);
    border-color: var(--bg-dark-1);
}

/* Cinza Escuro */
.bg2-cmd,
.btn2-cmd {
    background-color: var(--bg-dark-1);
    color: var(--bg-1);
    border-color: var(--bg-1);
}

.btn2-cmd:hover {
    background-color: var(--bg-1);
    color: var(--bg-dark-1);
    border-color: var(--bg-dark-1);
}

/* Roxo Comando */
.bg3-cmd,
.btn3-cmd {
    background-color: var(--text-2);
    color: var(--bg-dark-1);
    border-color: var(--bg-dark-1);
}

.btn3-cmd:hover {
    background-color: var(--text-2);
    border-color: var(--bg-dark-1);
}


/* =======================================================
   🔹 7. PAGINAÇÃO (Bootstrap Table)
   ======================================================= */

.pagination .page-item .page-link {
    background-color: var(--bg-dark-1);
    color: var(--bg-1);
    border-color: var(--text-2);
}

.pagination:hover .page-item:hover .page-link:hover {
    background-color: var(--text-2);
    color: var(--text-1-inverse);
    border-color: var(--text-2);
}

/* Estado ativo */
.pagination .page-item.active .page-link {
    background-color: var(--bg-1);
    color: var(--bg-dark-1);
    border-color: var(--text-2);
}


/* =======================================================
   🔹 8. GRID DE APLICAÇÕES (Cards do menu principal)
   ======================================================= */

.app-link {
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
    display: block;
}

.app-link:hover {
    transform: scale(1.02);
}

.app-card {
    background-color: var(--bg-dark-1);
    border: 1px solid var(--bg-dark-1);
    border-radius: 12px;
    padding: 20px;
    transition: box-shadow 0.2s ease;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.app-card:hover {
    box-shadow: 0 8px 24px color-mix(in srgb, var(--text-1-inverse) 15%, transparent);
    border: 1px solid var(--bg-1);
}

.app-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.app-icon {
    font-size: 32px;
    color: var(--bg-1);
}

.app-icon img {
    width: 48px;
    height: 48px;
    display: block;
}

.app-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--bg-1);
    margin-bottom: 5px;
}

.app-url {
    font-size: 13px;
    color: var(--text-2);
}


/* =======================================================
   🔹 9. DASHBOARD MENU LATERAL (ARVORE DE APLICACOES)
   ======================================================= */

.dashboard-layout {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 24px;
    align-items: start;
    --app-tree-row-height: 40px;
}

.dashboard-topbar {
    min-height: 44px;
}

.dashboard-topbar-copy {
    display: flex;
    align-items: center;
    min-height: 100%;
}

.app-sidebar {
    background-color: var(--bg-dark-1);
    border: 1px solid var(--bg-dark-1);
    border-radius: 12px;
    padding: 16px;
}

.app-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.app-sidebar-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--bg-1);
}

.app-sidebar-subtitle {
    color: var(--text-2);
    font-size: 0.75rem;
}

.app-view-toggle {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 12px;
}

.app-view-label {
    display: block;
    color: var(--text-2);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.app-view-buttons {
    display: flex;
    width: 100%;
}

.app-view-buttons .btn {
    flex: 1 1 0;
    font-size: 0.72rem;
    padding: 4px 10px;
}

.app-view-buttons .btn.is-active {
    background-color: var(--bg-1);
    color: var(--bg-dark-1);
    border-color: var(--bg-1);
}

.app-view-buttons .btn.is-active:hover {
    background-color: var(--bg-1);
    color: var(--bg-dark-1);
    border-color: var(--bg-1);
}

.app-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-dark-1);
    border: 1px solid var(--bg-dark-1);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 12px;
}

.app-search .bi {
    color: var(--text-2);
}

.app-search input {
    background: transparent;
    border: none;
    color: var(--bg-1);
    outline: none;
    width: 100%;
}

.app-search input::placeholder {
    color: var(--bg-1);
    opacity: 0.6;
}

.app-tree {
    height: calc(10 * var(--app-tree-row-height));
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--bg-1) transparent;
}

.app-tree::-webkit-scrollbar {
    width: 6px;
}

.app-tree::-webkit-scrollbar-track {
    background: transparent;
}

.app-tree::-webkit-scrollbar-thumb {
    background-color: var(--bg-1);
    border-radius: 999px;
}

.app-view {
    margin-top: 4px;
}

.app-view.is-hidden {
    display: none;
}

.app-tree-section + .app-tree-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--bg-dark-1);
}

.app-tree-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-2);
    margin-bottom: 8px;
}

.app-tree-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.app-tree-group {
    margin-bottom: 6px;
}

.app-tree-group.is-hidden {
    display: none;
}

.app-tree-toggle {
    border: none;
    background: transparent;
    color: var(--bg-1);
    padding: 2px 4px;
    margin-right: 4px;
}

.app-tree-toggle .bi {
    transition: transform 0.2s ease;
}

.app-tree-group.is-open > .app-tree-toggle .bi {
    transform: rotate(90deg);
}

.app-tree-label {
    color: var(--bg-1);
    cursor: pointer;
    font-weight: 600;
}

.app-tree-branch {
    margin-left: 16px;
    display: none;
}

.app-tree-group.is-open > .app-tree-branch {
    display: block;
}

.app-tree-leaf {
    margin: 4px 0;
}

.app-tree-leaf.is-hidden {
    display: none;
}

.app-tree-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    min-height: var(--app-tree-row-height);
    border-radius: 8px;
    text-decoration: none;
    color: var(--bg-1);
    transition: background 0.2s ease;
}

.app-tree-link:hover {
    background: var(--bg-dark-1);
    color: var(--bg-1);
}

.app-tree-link img {
    width: 18px;
    height: 18px;
    display: block;
}

.dashboard-main {
    background-color: var(--bg-dark-1);
    border: 1px solid var(--bg-dark-1);
    border-radius: 12px;
    padding: 20px;
    min-height: 220px;
}

.dashboard-favorites {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dashboard-favorites-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.favorites-add-btn {
    white-space: nowrap;
}

.favorites-drop {
    border: 1px dashed var(--bg-dark-1);
    border-radius: 12px;
    padding: 12px;
    background: var(--bg-dark-1);
    height: calc(10 * var(--app-tree-row-height));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    scrollbar-width: thin;
    scrollbar-color: var(--bg-1) transparent;
}

.favorites-drop.has-items {
    overflow-y: auto;
}

.favorites-drop::-webkit-scrollbar {
    width: 6px;
}

.favorites-drop::-webkit-scrollbar-track {
    background: transparent;
}

.favorites-drop::-webkit-scrollbar-thumb {
    background-color: var(--bg-1);
    border-radius: 999px;
}

.favorites-drop.is-dragover {
    border-color: var(--bg-1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg-1) 25%, transparent);
}

.favorites-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-content: start;
    width: 100%;
    box-sizing: border-box;
}

.favorites-empty.is-hidden {
    display: none;
}

.favorites-drop.has-items .favorites-empty,
.favorites-list:not(:empty) + .favorites-empty {
    display: none;
}

.favorites-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
    border: 1px dashed var(--bg-dark-1);
    border-radius: 10px;
    background: var(--bg-dark-1);
    color: var(--text-2);
}

.favorites-empty i {
    font-size: 22px;
    color: var(--bg-1);
}

.favorites-empty strong {
    display: block;
    font-weight: 600;
    color: var(--bg-1);
}

.favorites-empty span {
    display: block;
    font-size: 0.85rem;
    color: var(--text-2);
}

.favorite-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--bg-dark-1);
    border: 1px solid var(--bg-dark-1);
    border-radius: 10px;
    padding: 10px 12px;
    min-height: 52px;
    min-width: 0;
    box-sizing: border-box;
}

.favorite-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--bg-1);
    text-decoration: none;
    flex: 1;
    min-width: 0;
}

.favorite-link img {
    width: 18px;
    height: 18px;
    display: block;
}

.favorite-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorite-remove {
    border: none;
    background: transparent;
    color: var(--text-2);
    border-radius: 6px;
    padding: 2px 6px;
}

.favorite-remove:hover {
    color: var(--bg-1);
    border-color: var(--bg-1);
}

@media (max-width: 768px) {
    .favorites-list {
        grid-template-columns: 1fr;
    }

    .dashboard-favorites-header {
        flex-direction: column;
        align-items: stretch;
    }

    .favorites-add-btn {
        width: 100%;
    }
}

@media (max-width: 992px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
    }

    .app-tree {
        height: calc(10 * var(--app-tree-row-height));
    }
}


/* =======================================================
   🔹 10. MODAL (CORRIGIDO PARA O TEMA ESCURO)
   ======================================================= */

.modal-content {
    background-color: var(--bg-dark-1) !important;
    color: var(--bg-1) !important;
    border: 1px solid var(--text-2) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--text-2) !important;
}

.modal-title {
    color: var(--bg-1) !important;
}

/* deixa o botão de fechar visível no fundo escuro */
.btn-close {
    filter: invert(85%);
}


#sticky-footer .footer-static{display:block !important;}
#sticky-footer .footer-rotator{display:none !important;}
@media (max-width: 576px){
    #sticky-footer .footer-static{display:none !important;}
    #sticky-footer .footer-rotator{
        display:block !important;
        position:relative;
        overflow:hidden;
        height:2.6em;
        font-size:0.72rem;
        line-height:1.3;
    }
    #sticky-footer .footer-rotator-track{
        display:flex;
        flex-direction:column;
        height:200%;
        animation:footer-rotate 8s infinite;
    }
    #sticky-footer .footer-rotator-slide{
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:2px;
        height:50%;
    }
    #sticky-footer .footer-rotator-line{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
}
@keyframes footer-rotate{
    0%,45%{transform:translateY(0);}
    50%,95%{transform:translateY(-50%);}
    100%{transform:translateY(0);}
}