/* ==========================================================================
   DRDiM — Design System / Design Tokens
   Fonte única de cores e estilo do sistema.
   Identidade baseada em drdim.com.br e drdimdigital.com.br
   (verde neon + ciano, navy petróleo, gradiente da marca, tipografia Inter).

   Carregado por <link> em TODOS os layouts, sempre disponível
   (independe do build do Vite). Camada de utilitárias fica no Tailwind.
   ========================================================================== */

/* ---------- Tipografia da marca ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   1. TOKENS — Tema claro (padrão)
   ========================================================================== */
:root {
    /* Marca — verde */
    --ds-brand-400: #00ff88;   /* verde identidade: gradiente, realces, dark mode */
    --ds-brand-500: #00e676;   /* verde base */
    --ds-brand-600: #00c853;   /* AÇÃO em fundo claro (botões) */
    --ds-brand-700: #00a844;   /* hover / active / texto verde sobre branco (AA) */
    --ds-brand-600-rgb: 0, 200, 83;

    /* Acento — ciano */
    --ds-cyan: #00d4ff;
    --ds-cyan-600: #00a9cc;
    --ds-cyan-rgb: 0, 212, 255;

    /* Gradiente da marca */
    --ds-gradient: linear-gradient(135deg, #00ff88 0%, #00d4ff 100%);
    --ds-gradient-navy: linear-gradient(45deg, #132243 0%, #2f4a85 100%);

    /* Navy institucional */
    --ds-secondary: #0d1929;   /* navy petróleo — sidebar / header / títulos */
    --ds-secondary-rgb: 13, 25, 41;
    --ds-navy-2: #132243;
    --ds-navy-3: #2f4a85;

    /* Superfícies e texto */
    --ds-bg: #f4f7f9;
    --ds-surface: #ffffff;
    --ds-surface-2: #eef2f5;
    --ds-border: #e2e8f0;
    --ds-text: #0f1b2d;
    --ds-text-rgb: 15, 27, 45;
    --ds-text-muted: #5b6b7f;

    /* Semânticos */
    --ds-success: #00c853;
    --ds-success-rgb: 0, 200, 83;
    --ds-warning: #ff9f1c;
    --ds-warning-rgb: 255, 159, 28;
    --ds-danger: #ff4d5e;
    --ds-danger-rgb: 255, 77, 94;
    --ds-info: #00d4ff;
    --ds-info-rgb: 0, 212, 255;

    /* Chrome — sidebar / header */
    --ds-sidebar-bg: #0d1929;
    --ds-sidebar-text: rgba(255, 255, 255, 0.82);
    --ds-sidebar-muted: rgba(255, 255, 255, 0.55);
    --ds-sidebar-active-bg: rgba(0, 255, 136, 0.14);
    --ds-sidebar-active-text: #00ff88;
    --ds-header-bg: #0d1929;
    --ds-header-text: #ffffff;

    /* Forma */
    --ds-radius: 8px;
    --ds-radius-lg: 14px;
    --ds-radius-pill: 999px;
    --ds-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.06);
    --ds-shadow: 0 8px 30px rgba(2, 6, 23, 0.08);

    /* Tipografia */
    --ds-font: 'Inter', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ---- Ponte com o Bootstrap 5 (sobrescreve os tokens nativos) ---- */
    --bs-primary: var(--ds-brand-600);
    --bs-primary-rgb: var(--ds-brand-600-rgb);
    --bs-success: var(--ds-success);
    --bs-success-rgb: var(--ds-success-rgb);
    --bs-info: var(--ds-info);
    --bs-info-rgb: var(--ds-info-rgb);
    --bs-warning: var(--ds-warning);
    --bs-warning-rgb: var(--ds-warning-rgb);
    --bs-danger: var(--ds-danger);
    --bs-danger-rgb: var(--ds-danger-rgb);
    --bs-secondary: var(--ds-secondary);
    --bs-secondary-rgb: var(--ds-secondary-rgb);
    --bs-body-color: var(--ds-text);
    --bs-body-bg: var(--ds-bg);
    --bs-border-color: var(--ds-border);
    --bs-link-color: var(--ds-brand-700);
    --bs-link-hover-color: var(--ds-brand-600);
    --bs-font-sans-serif: var(--ds-font);

    /* ---- Compatibilidade com o legado (extend.css usava --color-default) ---- */
    --color-default: var(--ds-brand-600);
}

/* ==========================================================================
   2. TOKENS — Tema escuro (html.dark-theme / html.semi-dark)
   ========================================================================== */
html.dark-theme,
html.semi-dark {
    --ds-bg: #0d0d17;
    --ds-surface: #12121e;
    --ds-surface-2: #1a1a1a;
    --ds-border: rgba(255, 255, 255, 0.09);
    --ds-text: #f4f6fb;
    --ds-text-rgb: 244, 246, 251;
    --ds-text-muted: rgba(255, 255, 255, 0.62);

    --ds-sidebar-bg: #0a0f1a;
    --ds-header-bg: #0d0d17;

    /* Ação em fundo escuro: usar o verde mais vivo */
    --ds-brand-600: #00e676;
    --ds-brand-600-rgb: 0, 230, 118;

    --bs-body-color: var(--ds-text);
    --bs-body-bg: var(--ds-bg);
    --bs-border-color: var(--ds-border);
}

/* semi-dark mantém o conteúdo claro; só o chrome é escuro */
html.semi-dark {
    --ds-bg: #f4f7f9;
    --ds-surface: #ffffff;
    --ds-surface-2: #eef2f5;
    --ds-border: #e2e8f0;
    --ds-text: #0f1b2d;
    --ds-text-rgb: 15, 27, 45;
    --ds-text-muted: #5b6b7f;
    --ds-brand-600: #00c853;
    --ds-brand-600-rgb: 0, 200, 83;
}

/* ==========================================================================
   3. NORMALIZAÇÃO — Base
   ========================================================================== */
body {
    font-family: var(--ds-font) !important;
    color: var(--ds-text);
    background-color: var(--ds-bg) !important;
    letter-spacing: 0.1px;
}

a {
    color: var(--ds-brand-700);
}
a:hover {
    color: var(--ds-brand-600);
}

.page-wrapper {
    background-color: var(--ds-bg);
}

/* ==========================================================================
   4. NORMALIZAÇÃO — Botões
   ========================================================================== */
.btn {
    border-radius: var(--ds-radius);
    font-weight: 500;
}

.btn-primary,
.btn-success {
    background: var(--ds-brand-600) !important;
    border-color: var(--ds-brand-600) !important;
    color: #04231a !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background: var(--ds-brand-700) !important;
    border-color: var(--ds-brand-700) !important;
    color: #04231a !important;
    box-shadow: 0 0 0 .2rem rgba(var(--ds-brand-600-rgb), 0.35) !important;
}

/* Botão de destaque com o gradiente da marca (opt-in) */
.btn-brand,
.btn-gradient {
    background: var(--ds-gradient) !important;
    border: none !important;
    color: #04231a !important;
    font-weight: 600;
}
.btn-brand:hover,
.btn-gradient:hover {
    filter: brightness(1.05);
    color: #04231a !important;
}

.btn-info {
    background: var(--ds-info) !important;
    border-color: var(--ds-info) !important;
    color: #04121a !important;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background: var(--ds-cyan-600) !important;
    border-color: var(--ds-cyan-600) !important;
    color: #04121a !important;
}

.btn-secondary,
.btn-dark {
    background: var(--ds-secondary) !important;
    border-color: var(--ds-secondary) !important;
    color: #fff !important;
}
.btn-secondary:hover,
.btn-dark:hover {
    background: #0a1420 !important;
    border-color: #0a1420 !important;
}

.btn-danger {
    background: var(--ds-danger) !important;
    border-color: var(--ds-danger) !important;
}
.btn-warning {
    background: var(--ds-warning) !important;
    border-color: var(--ds-warning) !important;
    color: #3a2400 !important;
}

.btn-outline-primary,
.btn-outline-success {
    border: 1px solid var(--ds-brand-600) !important;
    color: var(--ds-brand-700) !important;
    background: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-success:hover {
    background: var(--ds-brand-600) !important;
    color: #04231a !important;
}

/* ==========================================================================
   5. NORMALIZAÇÃO — Utilitárias de cor (Bootstrap + legado extend.css)
   ========================================================================== */
.bg-primary {
    background: var(--ds-brand-600) !important;
    color: #04231a !important;
}
.bg-gradient-brand {
    background: var(--ds-gradient) !important;
}
.text-primary {
    color: var(--ds-brand-700) !important;
}
.text-success {
    color: var(--ds-brand-700) !important;
}
.text-info {
    color: var(--ds-cyan-600) !important;
}
.border-primary {
    border-color: var(--ds-brand-600) !important;
}

/* legado extend.css — escopado para não pintar .active de nav/tabs/paginação */
.link-active {
    background: var(--ds-brand-600) !important;
    color: #04231a !important;
}
.pagination .page-item.active .page-link {
    background: var(--ds-brand-600) !important;
    border-color: var(--ds-brand-600) !important;
    color: #04231a !important;
}
.switcher-btn {
    background: var(--ds-gradient) !important;
}

/* ==========================================================================
   6. NORMALIZAÇÃO — Cards, tabelas, forms, badges, alerts, tabs
   ========================================================================== */
.card {
    background-color: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-sm);
    color: var(--ds-text);
}
.card .card-header {
    background-color: var(--ds-surface);
    border-bottom: 1px solid var(--ds-border);
}

.border-primary {
    border-top: 3px solid var(--ds-brand-600) !important;
}

.table {
    --bs-table-color: var(--ds-text);
    --bs-table-border-color: var(--ds-border);
    color: var(--ds-text);
}
.table > thead,
.table thead th,
.table .thead-light th {
    background-color: var(--ds-surface-2);
    color: var(--ds-text);
    border-color: var(--ds-border);
}
.table-hover > tbody > tr:hover > * {
    background-color: rgba(var(--ds-brand-600-rgb), 0.06);
}

.form-control,
.custom-select,
.form-select {
    border-radius: var(--ds-radius);
    border-color: var(--ds-border);
    color: var(--ds-text);
    background-color: var(--ds-surface);
}
.form-control:focus,
.custom-select:focus,
.form-select:focus {
    border-color: var(--ds-brand-600);
    box-shadow: 0 0 0 .2rem rgba(var(--ds-brand-600-rgb), 0.20);
}

.badge.bg-primary,
.badge-primary {
    background: var(--ds-brand-600) !important;
    color: #04231a !important;
}
.badge.bg-success,
.badge-success {
    background: var(--ds-brand-600) !important;
    color: #04231a !important;
}
.badge.bg-info,
.badge-info {
    background: var(--ds-info) !important;
    color: #04121a !important;
}
.badge.bg-secondary,
.badge-secondary {
    background: var(--ds-secondary) !important;
}

.alert-primary {
    background-color: rgba(var(--ds-brand-600-rgb), 0.10);
    border-color: rgba(var(--ds-brand-600-rgb), 0.30);
    color: var(--ds-brand-700);
}
.alert-info {
    background-color: rgba(var(--ds-cyan-rgb), 0.10);
    border-color: rgba(var(--ds-cyan-rgb), 0.30);
    color: var(--ds-cyan-600);
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    color: var(--ds-brand-700);
    border-bottom-color: var(--ds-brand-600);
}
.nav-pills .nav-link.active {
    background: var(--ds-brand-600);
    color: #04231a;
}

/* Switches do template (switch-info / switch-success) */
.switch-input:checked ~ .switch-label,
.switch.switch-info .switch-input:checked ~ .switch-label,
.switch.switch-success .switch-input:checked ~ .switch-label {
    background: var(--ds-brand-600) !important;
    border-color: var(--ds-brand-600) !important;
}

/* ==========================================================================
   7. NORMALIZAÇÃO — Sidebar / Header
   Sobrepõe o roxo #8833ff do template E os arquivos de correção
   (sidebar-fixes.css / menu-hierarchy.css) — este CSS é carregado por último.
   Selectors replicam a especificidade das regras do menu-hierarchy
   (html.color-sidebar / html.dark-theme / html.semi-dark) para vencê-las.
   ========================================================================== */
.sidebar-wrapper,
html.color-sidebar .sidebar-wrapper,
html.dark-theme .sidebar-wrapper,
html.semi-dark .sidebar-wrapper {
    background-color: var(--ds-sidebar-bg) !important;
    background-image: none !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}
.sidebar-wrapper .sidebar-header {
    background-color: var(--ds-sidebar-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}
.sidebar-wrapper .sidebar-header .logo-text,
.sidebar-wrapper .sidebar-header .toggle-icon {
    color: #fff !important;
}

/* --- Itens de menu (nível raiz e submenus) --- */
.sidebar-wrapper .metismenu a,
.sidebar-wrapper .metismenu ul a,
html.dark-theme .sidebar-wrapper .metismenu a,
html.semi-dark .sidebar-wrapper .metismenu a {
    color: var(--ds-sidebar-text) !important;
}
.sidebar-wrapper .metismenu ul a {
    color: rgba(255, 255, 255, 0.66) !important;
}

/* Hover / foco */
.sidebar-wrapper .metismenu a:hover,
.sidebar-wrapper .metismenu a:focus,
.sidebar-wrapper .metismenu ul a:hover,
.sidebar-wrapper .metismenu ul a:focus,
html.dark-theme .sidebar-wrapper .metismenu a:hover,
html.semi-dark .sidebar-wrapper .metismenu a:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Item ativo (raiz e submenu) — verde da marca, discreto */
.sidebar-wrapper .metismenu .mm-active > a,
.sidebar-wrapper .metismenu a.mm-active,
.sidebar-wrapper .metismenu ul a.mm-active,
.sidebar-wrapper .metismenu > li > a.has-arrow[aria-expanded="true"],
html.dark-theme .sidebar-wrapper .metismenu ul a.mm-active,
html.semi-dark .sidebar-wrapper .metismenu ul a.mm-active,
html.color-sidebar .sidebar-wrapper .metismenu > li > a.has-arrow[aria-expanded="true"] {
    color: var(--ds-sidebar-active-text) !important;
    background: var(--ds-sidebar-active-bg) !important;
    border-left: 3px solid var(--ds-brand-400) !important;
    font-weight: 500 !important;
}

/* Container dos submenus — sempre escuro, vencendo menu-hierarchy (#f8f9fa) */
.sidebar-wrapper .metismenu ul,
html.color-sidebar .sidebar-wrapper .metismenu ul,
html.dark-theme .sidebar-wrapper .metismenu ul,
html.semi-dark .sidebar-wrapper .metismenu ul {
    background: rgba(0, 0, 0, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--ds-radius) !important;
}

/* Marcadores (::before) dos submenus — verde translúcido */
.sidebar-wrapper .metismenu ul a::before,
html.color-sidebar .sidebar-wrapper .metismenu ul a::before,
html.dark-theme .sidebar-wrapper .metismenu ul a::before,
html.semi-dark .sidebar-wrapper .metismenu ul a::before {
    background-color: rgba(0, 255, 136, 0.35) !important;
}
.sidebar-wrapper .metismenu ul a:hover::before {
    background-color: var(--ds-brand-400) !important;
}
.sidebar-wrapper .metismenu ul a.mm-active::before {
    background-color: var(--ds-brand-400) !important;
}

/* Ícones do menu */
.sidebar-wrapper .metismenu a .parent-icon,
.sidebar-wrapper .metismenu ul a i {
    color: inherit !important;
}

.sidebar-wrapper .menu-label {
    color: var(--ds-sidebar-muted) !important;
}
.sidebar-wrapper .simplebar-scrollbar:before {
    background: rgba(255, 255, 255, 0.4);
}
html.color-sidebar .logo-icon,
.sidebar-wrapper .logo-icon {
    filter: none;
}

/* Topbar */
.topbar {
    background: var(--ds-header-bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html.headerbrand .topbar {
    background: var(--ds-secondary) !important;
}
html.headernavy .topbar {
    background: var(--ds-navy-2) !important;
}
.topbar .navbar-nav .nav-link,
.topbar .mobile-toggle-menu,
.topbar .search-bar-box .bx-search,
.topbar .user-info .user-name,
.topbar .user-info .designattion {
    color: #fff !important;
}
.topbar .search-control {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border-radius: var(--ds-radius);
}
.topbar .search-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* back-to-top e loaders */
.back-to-top {
    background: var(--ds-gradient) !important;
    color: #04231a !important;
    border-radius: var(--ds-radius);
}

/* ==========================================================================
   8. Scrollbar sutil (coerência visual)
   ========================================================================== */
* {
    scrollbar-color: var(--ds-border) transparent;
}