:root {
    --text-color-light: #ADB8CC;
    --template-border-color: #DFE4ED;
    --font-size: 15px;
    --text-color: #495160;
    --text-color-strong: #252d3c;
    --font-family: 'Manrope', sans-serif;
    --header-height: 60px;
    --header-logo-background: #081a42;
    --header-background-color: #fff;
    --menu-width: 280px;
    --menu-background-color: #fff;
    --menu-master-color-strong: #fff;
    --menu-check-color: #fff;
    --submenu-background-color: #081a42;
    --main-color: #5a77ff;
    --live-background-color: #fff;
    --live-background-color-light: #f9f9fd;
    --button-height: 35px;
    --button-text-color: #516283;
    --button-background: #fff;
    --button-border-radius: 8px;
    --button-padding: 13px;
    --field-height: 35px;
    --field-border-top: 1px;
    --field-border-bottom: 1px;
    --field-border-right: 1px;
    --field-border-left: 1px;
    --field-border-radius: 8px;
    --field-background: #fff;
    --field-border-color: #DFE4ED;
    --field-color: #516283;
    --field-focus-border-color: #bcc2d1;
    --field-placeholder-color: #DFE4ED;
    --content-border-radius: 10px;
    --content-background: #f8f9fb;
    --content-border-color: #DFE4ED;
    --panel-light-background: #f9f9f9;
    --panel-background: #fff;
    --panel-border-radius: 8px;
    --modal-background: #fff;
    --submenu-sub-text-color: #8694B0;
    --scrollbar-color: #DFE4ED;
    --color-overlay: #0000004d;
    --preloader-color: #5a77ff;
    --live-area-width: 100%;
    --header-border-bottom: #DFE4ED;
    --header-logo-font-size: 22px;
    --header-logo-border-right: #DFE4ED;
    --header-logo-border-bottom: #DFE4ED;
    --header-track-border-right: #DFE4ED;
    --header-box-display: none;
    --header-box-background: #5a77ff;
    --panel-header-background: #f8f9fb;
    --panel-body-padding: 15px;
    --panel-border-color: #DFE4ED;
    --button-border: #DFE4ED;
    --button-text-color-hover: #5a77ff;
    --menu-border-right: #DFE4ED;
    --menu-icon-font-size: 13px;
    --menu-background-check: #5a77ff;
    --menu-button-border-color: #DFE4ED;
    --submenu-border-right: #DFE4ED;
    --submenu-text-color: #fff;
    --submenu-text-hover: #5a77ff;
    --submenu-background-check: #fff;
    --submenu-check-color: linear-gradient(90deg,
            #081a42 0%,
            #2b4379 50%,
            #5060a5 100%);
    --submenu-icon-color: #0678e6;
    --top-menu-border: #fff;
    --top-menu-background-color: #fff;
    --top-menu-background-check: #5a77ff;
    --top-menu-check-color: #fff;
    --top-menu-hover-color: #5a77ff;
    --top-menu-color: #8694B0;
    --top-submenu-background-color: #fff;
    --top-submenu-text-color: #8694B0;
    --top-submenu-text-hover: #5a77ff;
    --top-submenu-background-check: #5a77ff;
    --top-submenu-check-color: #fff;
    --field-padding-horizontal: 8px;
    --tr-hover-background: #eceff4;
    --tr-hover-color: #000000;
    --tr-even-background: #fff;
    --tr-odd-background: #f8f9fb;
    --table-body-color: #8694B0;
    --table-header-color: #516283;
    --modal-footer-background: #f8f9fb;
    --modal-header-background: #5a77ff;
    --modal-header-color: #fff;
    --button-box-shadow: none;
    --panel-box-shadow: none;
    --panel-header-color: #516283;
    --panel-footer-background: transparent;
    --header-text-color: #8694B0;
    --header-box-shadow: none;
    --menu-box-shadow: none;
    --menu-user-splash-background: #081a42;
    --panel-header-font-size: 17px;
    --panel-header-font-weight: 500;
    --panel-header-padding-vertical: 8px;
    --panel-header-padding-horizontal: 18px;
    --panel-header-border-color: transparent;
    --header-logo-text-color: #8694B0;
    --menu-background-button-circle: #fff;
    --menu-color-button-circle: #516283;
    --top-menu-background-button-circle: #fff;
    --top-menu-color-button-circle: #516283;
    --submenu-font-size: 15px;
    --submenu-padding-horizontal: 0px;
    --submenu-item-padding-horizontal: 10px;
    --submenu-item-padding-vertical: 10px;
    --modules-button-radius: 100px;
    --name: adminok;
    --field-padding-vertical: 0px;
    --panel-padding: 0px;
    --header-box-padding-horizontal: 0px;
    --header-box-padding-vertical: 0px;
    --header-logo-padding-horizontal: 0px;
    --header-logo-padding-vertical: 0px;
    --login-background-color: #F4F6FF;
    --login-panel-header-background: #F4F6FF;
    --login-panel-left-background-color: #343A3F;
    --login-panel-right-background-color: #fff;
    --login-button-background: #5a77ff;
    --login-button-text-color: #F4F6FF;
    --login-panel-left-text-header-color: #F4F6FF;
    --login-panel-left-text-header-align: center;
    --login-panel-left-text-header-font-size: 40px;
    --login-panel-left-text-header-font-weight: 700px;
    --login-panel-left-text-footer-color: #CACACA;
    --login-panel-left-text-footer-align: left;
    --login-panel-left-text-footer-font-size: 30px;
    --login-panel-left-text-footer-font-weight: 700px;
    --login-panel-detail-display: flex;
    --login-link-color: #3C8DBC;
    --login-html: ;
    --login-panel-detail-display-image: flex;
    --login-panel-detail-display-details: flex;
    --login-panel-detail-image-size: contain;
    --login-panel-detail-image-position: center;
    --login-panel-detail-direction: row;
    --login-panel-max-width: 1250px;
    --login-panel-detail-force-full-image: force-full;
    --login-panel-border-radius: 10px;
    --login-panel-box-shadow: 0px 0px 10px 4px #0000004d;
    --login-title-font-size: 0px;
    --login-title-align: center;
    --login-title-font-weight: 700px;
    --login-title-color: #3C8DBC;
    --login-header-font-size: 25px;
    --login-header-align: center;
    --login-header-color: #5a77ff;
    --login-border-color: #ff;
    --login-panel-left-header-image-position: center;
    --login-text-center-align: center;
    --login-text-center-size: 18px;
    --login-text-center-weight: 600px;
    --login-text-center-color: #333333;
    --show-text-center: ;
    --panel-row-margin-bottom: 7px;
    --tab-active-border-color: #DFE4ED;
    --tab-active-background: #fff;
    --tab-active-color: #516283;
    --tab-border-color: transparent;
    --tab-background: #fff;
    --tab-color: #616776;
    --tab-border-radius: 8px;
    --tab-font-size: 15px;
    --tab-font-weight: normal;
    --table-header-font-size: 15px;
    --table-header-font-weight: normal;
    --table-header-background: transparent;
    --table-header-border-color: #DFE4ED;
    --table-header-padding-vertical: 12px;
    --field-check-color: #5a77ff;
    --field-disabled-background: #DFE4ED;
    --field-disabled-text-color: #616776;
    --field-disabled-border: #DFE4ED;
    --login-panel-max-height: 550px;
    --white-color: #D7E0EE;
    --dark-color: #495160;
    --submenu-check-background: linear-gradient(90deg,
            #081a42 0%,
            #2b4379 50%,
            #5060a5 100%);
    --widget-background-color: white;
    --widget-color: #5f5f5f;

    /* Linha com foco */
    --tr-selected-background: #d7e7fd;
    --tr-selected-color: black;

    /* Toasts (iziToast) no padrão de alertas do Bootstrap 5 */
    --toast-success-bg: #d1e7dd;
    --toast-success-color: #0f5132;
    --toast-success-border: #badbcc;
    --toast-error-bg: #f8d7da;
    --toast-error-color: #842029;
    --toast-error-border: #f5c2c7;
    --toast-warning-bg: #fff3cd;
    --toast-warning-color: #664d03;
    --toast-warning-border: #ffecb5;
    --toast-info-bg: #cff4fc;
    --toast-info-color: #055160;
    --toast-info-border: #b6effb;

    /* Widgets*/
    --file-widget-border-color: #F5F6FA;

    /* PIER*/
    --pier-badge-bg: #d1fae5;
    --pier-badge-color: #065f46;
    --sale-badge-bg: #dbeafe;
    --sale-badge-color: #1d4ed8;

    /* Semáforo de status (crítico/atenção/bom) — usado em scores e indicadores */
    --status-danger-bg: #fdecea;
    --status-danger-color: #c0392b;
    --status-warning-bg: #fef5e7;
    --status-warning-color: #b9770e;
    --status-success-bg: #eafaf1;
    --status-success-color: #1e8449;
    /* Badges de status (sucesso, aviso, perigo, neutro) */
    --status-success-bg: #dcfce7;
    --status-success-color: #166534;
    --status-warning-bg: #fef3c7;
    --status-warning-color: #92400e;
    --status-info-bg: #dbeafe;
    --status-info-color: #1d4ed8;
    --status-danger-bg: #fee2e2;
    --status-danger-color: #991b1b;
    --status-neutral-bg: #e5e7eb;
    --status-neutral-color: #374151;

    /* Gradiente de destaque (indicadores, projeções e recursos de IA) */
    --ai-gradient: linear-gradient(135deg, #5a77ff 0%, #8b5cf6 100%);

    /* Degradê da marca (verde → azul), usado nas iniciais da empresa no rodapé do menu */
    --brand-gradient: linear-gradient(90deg, #8ae48d 0%, #5b8cf2 100%);

    /* Texto secundário com contraste suficiente (contagens, legendas, placeholders) */
    --text-color-muted: #66728a;
    /* Fundo suave da cor principal (item selecionado, anel de foco) */
    --main-color-soft: #eef1ff;
    /* Favoritos (estrela) */
    --favorite-color: #b7791f;
    --favorite-background: #fbf1dc;
}

/* Animação suave de troca */
:root,
[data-theme="dark"] {
    color-scheme: light dark;
    /* melhora scrollbars/inputs nativos */
}

* {
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Tema DARK: coloque no html/body -> data-theme="dark" */
:root[data-theme="dark"] {
    /* Fundos principais */
    --content-background: #0f1117;
    /* canvas geral */
    --panel-background: #141a22;
    --panel-light-background: #141a22;

    /* cards/painéis */
    --live-background-color: #0f1117;
    --menu-background-color: #10151c;
    --submenu-background-color: #10151c;
    --top-menu-background-color: #10151c;
    --live-background-color-light: #0f1117;
    /* Bordas & divisores */
    --template-border-color: #2a3340;
    --content-border-color: #2a3340;
    --panel-border-color: #26303b;
    --menu-border-right: #26303b;
    --submenu-border-right: #26303b;
    --table-header-border-color: #26303b;
    --header-border-bottom: #26303b;
    --button-border: #2a3340;
    --field-border-color: #2a3340;
    --field-focus-border-color: #3a4657;
    --scrollbar-color: #2a3340;

    /* Tipografia */
    --text-color-light: #A9B6CB;
    --text-color: #B8C3D6;
    --text-color-strong: #D7E0EE;
    --header-text-color: #B8C3D6;
    --table-body-color: #B8C3D6;
    --table-header-color: #D7E0EE;
    --panel-header-color: #D7E0EE;
    --white-color: #D7E0EE;
    --dark-color: #0f1117;
    --submenu-icon-color: white;
    /* Header/Menu */
    --header-background-color: #0f1117;
    --header-logo-text-color: #B8C3D6;
    --menu-master-color-strong: #E6EEFA;
    --menu-user-splash-background: #10151c;
    --header-logo-border-right: #26303b;
    --header-logo-border-bottom: #26303b;
    --header-border-bottom: #26303b;
    --header-track-border-right: #26303b;
    --header-logo-background: var(--submenu-background-color); /* mesmo tom do menu lateral, como no modo claro */

    /* Acentos (pode manter sua cor principal) */
    --main-color: #5a77ff;
    /* se quiser, escureça um pouco no dark */
    --button-text-color-hover: #7f96ff;
    --top-menu-hover-color: #7f96ff;
    --field-check-color: #7f96ff;
    --preloader-color: #7f96ff;

    /* Botões / campos / painéis */
    --button-background: #121821;
    --button-text-color: #FFFFFF;
    --field-background: #0f1117;
    --field-color: #D7E0EE;
    --field-placeholder-color: #6b7890;
    --field-disabled-background: #2b2f3e;
    --field-disabled-text-color: white;
    --panel-header-background: #10151c;
    --panel-footer-background: transparent;
    --panel-box-shadow: none;
    --button-box-shadow: none;

    /* Tabelas / linhas */
    --tr-hover-background: #161d27;
    --tr-hover-color: white;
    --tr-even-background: #10151c;
    --tr-odd-background: #0f1117;

    /* Modais */
    --modal-background: #141a22;
    --modal-header-background: transparent;
    --modal-header-color: #E6EEFA;
    --modal-footer-background: transparent;

    /* Login */
    --login-background-color: #0f1117;
    --login-panel-header-background: #0f1117;
    --login-panel-left-background-color: #0d1116;
    --login-panel-right-background-color: #141a22;
    --login-button-background: #5a77ff;
    --login-button-text-color: #E6EEFA;
    --login-text-center-color: #D7E0EE;

    /* Itens de menu selecionados */
    --menu-background-check: #1a2230;
    --menu-check-color: #E6EEFA;

    /* Top menu */
    --top-menu-background-check: #1a2230;
    --top-menu-check-color: #E6EEFA;
    --top-menu-color: #A9B6CB;
    --top-menu-color-button-circle: #10151c;

    /* Outros */
    --color-overlay: #00000080;
    --header-box-background: #1a2230;
    --menu-background-button-circle: #141a22;
    --menu-color-button-circle: #D7E0EE;
    --top-menu-background-button-circle: #141a22;
    --top-menu-color-button-circle: #D7E0EE;

    /*Submenu*/
    --submenu-background-color: #10151C;
    --submenu-border-right: #26303B;
    --submenu-text-color: #B8C3D6;
    --submenu-text-hover: #7F96FF;
    --submenu-background-check: #221417;
    --submenu-check-color: #7F96FF;
    --submenu-check-background: #141A22;

    /*Tabs*/
    --tab-active-border-color: #26303B;
    --tab-active-background: #1A2230;
    --tab-active-color: white;
    --tab-border-color: #26303B;
    --tab-background: #141A22;
    --tab-color: white;

    /* Widgets */
    --widget-background-color: #141a22;
    --widget-color: white;

    /* Toasts (iziToast) no padrão de alertas escuros do Bootstrap 5.3 */
    --toast-success-bg: #051b11;
    --toast-success-color: #75b798;
    --toast-success-border: #0f5132;
    --toast-error-bg: #2c0b0e;
    --toast-error-color: #ea868f;
    --toast-error-border: #842029;
    --toast-warning-bg: #332701;
    --toast-warning-color: #ffda6a;
    --toast-warning-border: #997404;
    --toast-info-bg: #032830;
    --toast-info-color: #6edff6;
    --toast-info-border: #087990;

    /* Linha com foco */
    --tr-selected-background: #5480b4;
    --tr-selected-color: white;

    /* Widgets*/
    --file-widget-border-color: #26303B;

    /* Semáforo de status (crítico/atenção/bom) — usado em scores e indicadores */
    --status-danger-bg: rgba(207, 47, 47, 0.15);
    --status-danger-color: #e89090;
    --status-warning-bg: rgba(224, 181, 104, 0.15);
    --status-warning-color: #e0b568;
    --status-success-bg: rgba(76, 141, 106, 0.15);
    --status-success-color: #7dc99a;
    /* Badges de status (sucesso, aviso, perigo, neutro) */
    --status-success-bg: #14532d;
    --status-success-color: #bbf7d0;
    --status-warning-bg: #78350f;
    --status-warning-color: #fde68a;
    --status-info-bg: #1e3a5f;
    --status-info-color: #bfdbfe;
    --status-danger-bg: #7f1d1d;
    --status-danger-color: #fecaca;
    --status-neutral-bg: #2a3340;
    --status-neutral-color: #D7E0EE;

    /* Gradiente de destaque (indicadores, projeções e recursos de IA) */
    --ai-gradient: linear-gradient(135deg, #7f96ff 0%, #a78bfa 100%);

    /* Degradê da marca (verde → azul), usado nas iniciais da empresa no rodapé do menu */
    --brand-gradient: linear-gradient(90deg, #8ae48d 0%, #5b8cf2 100%);

    --text-color-muted: #8694B0;
    --main-color-soft: rgba(90, 119, 255, 0.16);
    --favorite-color: #f2b84b;
    --favorite-background: rgba(242, 184, 75, 0.14);
}