/* ─── BASE ─── */
* {
    font-family: 'Plus Jakarta Sans', sans-serif;
    box-sizing: border-box
}

body.dark .bg-white {
    background-color: var(--card-bg, #fff) !important;
}

body.dark input,
body.dark select,
body.dark textarea {
    background-color: var(--card-bg, #fff);
    color: var(--t-body, #374151);
    border-color: var(--border-default, #e2e8f0);
}

body.dark input::placeholder,
body.dark textarea::placeholder {
    color: var(--t-light, #94a3b8);
}

/* ─── DARK MODE: override Tailwind light backgrounds ─── */
body.dark .bg-gray-50,
body.dark .bg-gray-100,
body.dark .bg-slate-50,
body.dark .bg-slate-100,
body.dark .bg-blue-50,
body.dark .bg-green-50,
body.dark .bg-red-50,
body.dark .bg-amber-50,
body.dark .bg-yellow-50,
body.dark .bg-purple-50,
body.dark .bg-indigo-50,
body.dark .bg-emerald-50,
body.dark .bg-orange-50,
body.dark .bg-pink-50,
body.dark .bg-violet-50,
body.dark .bg-teal-50,
body.dark .bg-theme-light {
    background-color: var(--card-bg, revert) !important;
}

body.dark table,
body.dark thead,
body.dark tbody,
body.dark th,
body.dark td,
body.dark tr {
    background-color: inherit;
    color: inherit;
}

body.dark th {
    color: var(--t-muted, #64748b) !important;
}

body.dark tr {
    border-color: var(--border-default, #e2e8f0) !important;
}

body.dark .border,
body.dark .border-gray-100,
body.dark .border-gray-200,
body.dark .border-gray-300,
body.dark .border-slate-100,
body.dark .border-slate-200,
body.dark .border-slate-300 {
    border-color: var(--border-default, revert) !important;
}

body.dark .text-gray-400,
body.dark .text-gray-500,
body.dark .text-slate-400,
body.dark .text-slate-500 {
    color: var(--t-muted, revert) !important;
}

body.dark .text-gray-600,
body.dark .text-gray-700,
body.dark .text-slate-600,
body.dark .text-slate-700 {
    color: var(--t-body, revert) !important;
}

body.dark .text-gray-800,
body.dark .text-gray-900,
body.dark .text-slate-800,
body.dark .text-slate-900,
body.dark .text-black {
    color: var(--t-heading, revert) !important;
}

body.dark .text-gray-200,
body.dark .text-gray-300,
body.dark .text-slate-200,
body.dark .text-slate-300 {
    color: var(--t-light, revert) !important;
}

/* ─── DARK MODE: catch hardcoded inline style colors ─── */
/* Headings / very dark text → light */
body.dark [style*="color:#111827"],
body.dark [style*="color: #111827"],
body.dark [style*="color:#1e293b"],
body.dark [style*="color: #1e293b"],
body.dark [style*="color:#0f172a"],
body.dark [style*="color: #0f172a"] {
    color: var(--t-heading, #e8f1f8) !important;
}

/* Body text → light body */
body.dark [style*="color:#374151"],
body.dark [style*="color: #374151"],
body.dark [style*="color:#334155"],
body.dark [style*="color: #334155"],
body.dark [style*="color:#1f2937"],
body.dark [style*="color: #1f2937"] {
    color: var(--t-body, #b8cfe0) !important;
}

/* Secondary text */
body.dark [style*="color:#475569"],
body.dark [style*="color: #475569"],
body.dark [style*="color:#4b5563"],
body.dark [style*="color: #4b5563"],
body.dark [style*="color:#6b7280"],
body.dark [style*="color: #6b7280"] {
    color: var(--t-secondary, #8aafca) !important;
}

/* Muted text */
body.dark [style*="color:#9ca3af"],
body.dark [style*="color: #9ca3af"],
body.dark [style*="color:#94a3b8"],
body.dark [style*="color: #94a3b8"],
body.dark [style*="color:#64748b"],
body.dark [style*="color: #64748b"] {
    color: var(--t-muted, #5a7f9a) !important;
}

/* Hardcoded white/light backgrounds → card-bg */
body.dark [style*="background:white"],
body.dark [style*="background: white"],
body.dark [style*="background:#fff"],
body.dark [style*="background: #fff"],
body.dark [style*="background:#ffffff"],
body.dark [style*="background: #ffffff"] {
    background: var(--card-bg, #1a2d40) !important;
}

body.dark [style*="background:#f8fafc"],
body.dark [style*="background: #f8fafc"],
body.dark [style*="background:#f1f5f9"],
body.dark [style*="background: #f1f5f9"],
body.dark [style*="background:#f9fafb"],
body.dark [style*="background: #f9fafb"] {
    background: var(--body-bg, #0d1b2a) !important;
}

/* Hardcoded border colors */
body.dark [style*="border:1px solid #e2e8f0"],
body.dark [style*="border: 1px solid #e2e8f0"],
body.dark [style*="border:1.5px solid #e2e8f0"],
body.dark [style*="border: 1.5px solid #e2e8f0"],
body.dark [style*="border:2px solid #e2e8f0"],
body.dark [style*="border: 2px solid #e2e8f0"] {
    border-color: var(--border-default, #1e3448) !important;
}

body.dark [style*="border-bottom:1px solid #f1f5f9"],
body.dark [style*="border-bottom: 1px solid #f1f5f9"],
body.dark [style*="border-bottom:1px solid #e2e8f0"],
body.dark [style*="border-bottom: 1px solid #e2e8f0"] {
    border-bottom-color: var(--border-default, #1e3448) !important;
}

/* ─── DARK MODE: form inputs (date, text, select) ─── */
body.dark input[type="date"],
body.dark input[type="text"],
body.dark input[type="email"],
body.dark input[type="password"],
body.dark input[type="number"],
body.dark input[type="search"],
body.dark input[type="tel"],
body.dark input[type="url"],
body.dark textarea,
body.dark select,
body.dark .sge-input {
    background-color: var(--card-bg, #1a2d40) !important;
    color: var(--t-body, #b8cfe0) !important;
    border-color: var(--border-default, #1e3448) !important;
}

body.dark input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
}

body.dark .bg-white {
    background-color: var(--card-bg, #1a2d40) !important;
}

body.dark .bg-gray-50,
body.dark .bg-gray-100 {
    background-color: var(--body-bg, #0d1b2a) !important;
}

label {
    color: var(--t-body, #374151);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--t-heading, inherit);
}

.divide-gray-100>*+*,
.divide-gray-200>*+* {
    border-color: var(--border-default, revert) !important;
}

.ajh-card {
    background: var(--card-bg, revert) !important;
}

.ajh-row:hover {
    background: var(--p-50, #eff6ff) !important;
}

body {
    margin: 0;
    background: var(--body-bg, #f1f5f9);
    color: var(--t-body, #374151);
    scroll-behavior: smooth;
}

/* ─── SCROLLBAR GLOBAL ─── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--t-xlight, #cbd5e1);
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--t-light, #94a3b8);
}

body.dark ::-webkit-scrollbar-thumb {
    background: #334155;
}

body.dark ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

.fade-in {
    animation: fadeIn .4s cubic-bezier(.4, 0, .2, 1)
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.toast-in {
    animation: slideIn .3s ease-out
}

.toast-out {
    animation: slideOut .3s ease-in forwards
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0)
    }

    to {
        opacity: 0;
        transform: translateX(100%)
    }
}

.spinner {
    border: 3px solid rgba(46, 114, 168, .3);
    border-top: 3px solid var(--p-500);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    animation: spin .7s linear infinite;
    display: inline-block
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(46, 114, 168, .15)
}

/* ─── THEME UTILITY CLASSES ─── */
.sge-btn-theme {
    background: var(--p-500) !important;
    color: #fff !important;
}

.sge-btn-theme-h:hover {
    background: var(--p-700) !important;
}

.border-theme {
    border-color: var(--p-500) !important;
}

.border-theme-l {
    border-color: var(--p-300) !important;
}

.hover\:border-theme-l:hover {
    border-color: var(--p-300) !important;
}

.bg-theme-light {
    background: var(--p-50) !important;
}

.bg-theme-lighter {
    background: var(--p-100) !important;
}

.hover\:bg-theme-light:hover {
    background: var(--p-50) !important;
}

.hover\:bg-theme-lighter:hover {
    background: var(--p-100) !important;
}

.text-theme {
    color: var(--p-500) !important;
}

.text-theme-d {
    color: var(--p-700) !important;
}

.hover\:text-theme:hover {
    color: var(--p-500) !important;
}

.focus\:border-theme:focus {
    border-color: var(--p-500) !important;
}

.focus\:ring-theme:focus {
    --tw-ring-color: var(--p-500);
}

.focus\:ring-theme-l:focus {
    --tw-ring-color: var(--p-200);
}

.accent-theme {
    accent-color: var(--p-500);
}

.text-theme-l {
    color: var(--p-300) !important;
}

.to-theme {
    --tw-gradient-to: var(--p-600);
}

.border-t-theme {
    border-top-color: var(--p-500) !important;
}

.bar-chart .bar {
    transition: height .5s ease, background .3s
}

@media print {
    .no-print {
        display: none !important
    }

    .print-only {
        display: block !important
    }
}

.print-only {
    display: none
}

.tab-active {
    border-bottom: 2px solid var(--p-500);
    color: var(--p-500);
    font-weight: 600
}

/* ─── TOOLTIP SYSTEM (.nfs-tooltip) ─── */
.nfs-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: help;
}

.nfs-tooltip .nfs-tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: #1e293b;
    color: #f1f5f9;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 8px;
    width: max-content;
    max-width: 280px;
    white-space: normal;
    z-index: 1000;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.nfs-tooltip .nfs-tooltip-text::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #1e293b;
}

.nfs-tooltip:hover .nfs-tooltip-text,
.nfs-tooltip:focus .nfs-tooltip-text,
.nfs-tooltip:active .nfs-tooltip-text {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

body.dark .nfs-tooltip .nfs-tooltip-text {
    background: #e2e8f0;
    color: #1e293b;
}

body.dark .nfs-tooltip .nfs-tooltip-text::before {
    border-right-color: #e2e8f0;
}

/* ─── LAYOUT ─── */
#app-layout {
    display: flex;
    min-height: 100vh;
    background: var(--body-bg, #f1f5f9);
}

/* ─── SIDEBAR (coluna: top + search + body + card + widget) ─── */
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 256px;
    display: flex;
    flex-direction: column;
    z-index: 50;
    background: var(--body-bg, #f1f5f9);
    box-shadow: 2px 0 12px rgba(0, 0, 0, .06);
    transition: width .28s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
}

/* ═══ COLLAPSE / EXPAND (bidirectional transitions) ═══ */
#sidebar.side-hover {
    width: 56px;
}

#sidebar.side-hover.sidebar-expanded {
    width: 256px;
}

/* Search: collapses to icon */
#sidebar.side-hover:not(.sidebar-expanded) #sidebar-search-row {
    padding: 0 8px;
}

#sidebar.side-hover:not(.sidebar-expanded) .sidebar-search {
    width: 40px;
    padding: 0;
    justify-content: center;
    flex-shrink: 0;
}

#sidebar.side-hover:not(.sidebar-expanded) .sidebar-search input,
#sidebar.side-hover:not(.sidebar-expanded) .sidebar-search kbd {
    display: none !important;
}

/* Detail panel, logo text, pin button — fade + shrink */
#sidebar #sidebar-detail {
    transition: opacity .22s ease, max-width .3s cubic-bezier(.4, 0, .2, 1);
    max-width: 200px;
}

#sidebar .logo-brand {
    transition: opacity .2s ease, max-width .2s ease;
    max-width: 120px;
    overflow: hidden;
    white-space: nowrap;
}


#sidebar.side-hover:not(.sidebar-expanded) #sidebar-detail {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    pointer-events: none;
}

#sidebar.side-hover:not(.sidebar-expanded) .logo-brand {
    opacity: 0;
    max-width: 0;
    pointer-events: none;
}


/* Two-phase collapse: first fade content, then shrink width */
#sidebar.sidebar-hiding #sidebar-detail,
#sidebar.sidebar-hiding .logo-brand {
    opacity: 0;
    transition: opacity .12s ease;
}

#sidebar.sidebar-hiding .user-profile-info,
#sidebar.sidebar-hiding .sidebar-logout-btn,
#sidebar.sidebar-hiding .help-center-text,
#sidebar.sidebar-hiding .help-center-chevron {
    opacity: 0;
    transition: opacity .1s ease;
}

/* Sidebar hover/collapse JS class on body */
body.side-hover-mode #main-wrapper {
    margin-left: 56px;
}

body.side-hover-mode.sidebar-hovered #main-wrapper {
    margin-left: 256px;
}

/* Toggle sidebar button — same style as icon-strip-item */
.sidebar-toggle-btn {
    width: 40px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 10px;
    transition: all .15s ease;
    flex-shrink: 0;
    margin-left: auto;
}

.sidebar-toggle-btn:hover {
    background: #f1f5f9;
    color: #475569;
}

.sidebar-toggle-btn svg {
    width: 20px;
    height: 20px;
    transition: transform .2s ease;
}

.sidebar-toggle-btn.pinned svg {
    transform: none;
}

.sidebar-toggle-btn:not(.pinned) svg {
    transform: scaleX(-1);
}

#sidebar.side-hover:not(.sidebar-expanded) .sidebar-toggle-btn {
    opacity: 0;
    max-width: 0;
    pointer-events: none;
}

#sidebar.sidebar-hiding .sidebar-toggle-btn {
    opacity: 0;
    transition: opacity .12s ease;
}



/* Header (linha 1) */
#sidebar-top {
    height: 56px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px 0 8px;
    flex-shrink: 0;
    cursor: pointer;
}

#sidebar-top .logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    margin-left: -8px;
}

#sidebar-top .logo-icon svg {
    width: 36px;
    height: 36px;
}

.logo-brand {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: opacity .2s ease, max-width .2s ease;
    max-width: 170px;
}

.logo-brand-n {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
}

.logo-brand-n .l-aurora {
    font-size: 17px;
    font-weight: 200;
    letter-spacing: 0.22em;
    font-family: 'Raleway', 'Plus Jakarta Sans', sans-serif;
    background: linear-gradient(135deg, #a78bfa, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-brand-n .l-erp {
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.38em;
    margin-left: 0;
    margin-top: 2px;
    background: linear-gradient(135deg, #a78bfa, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.8;
}

/* Collapse transitions for new brand block */
#sidebar.side-hover:not(.sidebar-expanded) .logo-brand {
    opacity: 0;
    max-width: 0;
    pointer-events: none;
}

#sidebar.sidebar-hiding .logo-brand {
    opacity: 0;
    transition: opacity .12s ease;
}

/* Search row (linha 2) */
#sidebar-search-row {
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 6px 0 8px;
    flex-shrink: 0;
}

.sidebar-search {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 0 10px;
    height: 38px;
    width: 100%;
    cursor: text;
    transition: background .15s, box-shadow .15s, width .25s cubic-bezier(.4, 0, .2, 1), padding .25s cubic-bezier(.4, 0, .2, 1);
}

.sidebar-search:focus-within {
    background: #dce6f0;
    box-shadow: 0 0 0 2px rgba(var(--p-rgb), .2);
}

.sidebar-search svg {
    color: #94a3b8;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.sidebar-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--t-body, #374151);
    outline: none;
    font-family: inherit;
}

.sidebar-search input::placeholder {
    color: #94a3b8;
}

.sidebar-search kbd {
    font-size: 10px;
    font-family: inherit;
    font-weight: 600;
    color: #94a3b8;
    background: var(--card-bg, #fff);
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 1px 5px;
    flex-shrink: 0;
    box-shadow: 0 1px 0 #e2e8f0;
    transition: opacity .15s;
}

.sidebar-search:focus-within kbd {
    opacity: 0;
    width: 0;
    padding: 0;
    border: none;
    margin: 0;
}


/* Icon strip color variables — invertidas ao selecionar */
:root {
    /* ── Tema Portal NFS (Arctic Blue) ── */
    --p-50: #f0f4f9;
    --p-100: #dce6f0;
    --p-200: #bad0e6;
    --p-300: #8cb2d4;
    --p-400: #5990be;
    --p-500: #2e72a8;
    --p-600: #225a8a;
    --p-700: #194570;
    --p-800: #102f55;
    --p-rgb: 46, 114, 168;
    /* ── Ícones sidebar ── */
    --i-d: var(--p-500);
    --i-l: #8cb2d4;
    --i-w: #ffffff;
    --sidebar-w: 256px;
}

.icon-strip-item.active {
    --i-d: #ffffff;
    --i-l: var(--p-300);
    --i-w: rgba(var(--p-rgb), 0.3);
}

/* Body (linha 3): icon strip + detail */
#sidebar-body {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

#sidebar-icons {
    width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

#icon-strip-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0;
    gap: 2px;
    width: 100%;
}

.icon-strip-item {
    width: 40px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    color: #94a3b8;
    transition: all .15s ease;
    position: relative;
    flex-shrink: 0;
}

.icon-strip-item:hover {
    background: var(--body-bg, #f1f5f9);
    color: #475569;
}

.icon-strip-item.active {
    background: var(--p-500);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--p-rgb), .4);
}

.icon-strip-item svg {
    flex-shrink: 0;
}

.icon-strip-item::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 48px;
    background: var(--tooltip-bg, #0f172a);
    color: #f1f5f9;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
    transition: opacity .15s ease;
}

#sidebar.drilldown-mode .icon-strip-item:hover::after {
    opacity: 1;
}

/* Detail panel */
#sidebar-detail {
    flex: 1;
    background: var(--body-bg, #f1f5f9);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#sidebar-detail-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0;
}

#sidebar-detail-scroll::-webkit-scrollbar {
    width: 3px;
}

#sidebar-detail-scroll::-webkit-scrollbar-thumb {
    background: var(--t-xlight, #cbd5e1);
    border-radius: 2px;
}

#sidebar-main-menu {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-section-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 12px);
    height: 38px;
    padding: 0 14px;
    margin: 0 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--t-secondary, #475569);
    cursor: pointer;
    border: none;
    background: none;
    text-align: left;
    border-radius: 6px;
    transition: all .15s ease;
    flex-shrink: 0;
}

.detail-section-link:hover {
    background: var(--p-50);
    color: var(--p-800);
}

.detail-section-link svg {
    color: #94a3b8;
    flex-shrink: 0;
    transition: transform .15s;
}

.detail-section-link:hover svg {
    color: var(--p-500);
    transform: translateX(2px);
}

.detail-section-link.active {
    background: var(--p-50);
    color: var(--p-700);
    font-weight: 700;
    border-left: 3px solid var(--p-500);
}

.detail-section-link.active svg {
    color: var(--p-500);
}

.nav-section-body {
    display: none;
    animation: drillIn .15s ease-out;
}

.nav-section-body.drilldown-active {
    display: block;
}

@keyframes drillIn {
    from {
        opacity: 0;
        transform: translateX(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.nav-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 12px);
    height: 38px;
    padding: 0 14px;
    margin: 0 6px 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--t-heading, #1e293b);
    cursor: pointer;
    border: none;
    background: none;
    border-radius: 6px;
    text-align: left;
    transition: all .15s ease;
}

.nav-back-btn:hover {
    background: var(--p-50);
}

.nav-back-btn svg {
    color: var(--p-500);
    flex-shrink: 0;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 0 14px;
    margin: 0 6px 2px;
    height: 38px;
    font-size: 13px;
    font-weight: 500;
    color: var(--t-secondary, #475569);
    cursor: pointer;
    transition: all .15s ease;
    border: none;
    background: none;
    width: calc(100% - 12px);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 6px;
    flex-shrink: 0;
}

.nav-item .nav-item-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-item:hover {
    background: var(--p-50);
    color: var(--p-800);
}

.nav-item.active {
    background: var(--p-50);
    color: var(--p-700);
    font-weight: 700;
    border-left: 3px solid var(--p-500);
    box-shadow: none;
}

.nav-item.active .nav-item-text {
    color: var(--p-700);
}

.nav-item svg {
    display: none;
}

.nav-sep {
    border-top: 1px solid var(--border-default, #e2e8f0);
    margin: 4px 12px;
}

.nav-item .nav-tooltip {
    display: none;
}

/* ═══ USER PROFILE CARD — single element, transitions both ways ═══ */
.user-profile-card {
    margin: 0 10px 8px;
    background: var(--card-bg, #f8f9fc);
    border: 1px solid var(--border-default, #e8eaf0);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
    transition: margin .3s cubic-bezier(.4, 0, .2, 1),
        padding .3s cubic-bezier(.4, 0, .2, 1),
        background .3s, border-color .3s,
        box-shadow .18s;
}

.user-profile-card:hover {
    background: var(--p-50);
    box-shadow: 0 2px 10px rgba(var(--p-rgb), .12);
}

.user-profile-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--p-500), var(--p-600));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(var(--p-rgb), .25);
    transition: width .3s cubic-bezier(.4, 0, .2, 1),
        height .3s cubic-bezier(.4, 0, .2, 1),
        font-size .3s,
        box-shadow .3s;
}

.user-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.user-profile-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    transition: opacity .2s ease, max-width .3s cubic-bezier(.4, 0, .2, 1);
    max-width: 160px;
}

.user-profile-name {
    font-size: 14px;
    font-weight: 800;
    color: var(--t-heading, #1a1f2e);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-profile-role {
    font-size: 12px;
    font-weight: 400;
    color: var(--t-muted, #8b93a7);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-profile-chevron {
    color: var(--t-light, #b0b7c8);
    flex-shrink: 0;
}

/* Logout button */
.sidebar-logout-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    color: var(--t-light, #94a3b8);
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    transition: color .2s, background .2s, opacity .2s ease, max-width .3s cubic-bezier(.4, 0, .2, 1), padding .3s;
    max-width: 40px;
}

.sidebar-logout-btn:hover {
    color: #ef4444;
    background: #fef2f2;
}

.sidebar-logout-btn span {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .3px;
}

/* COLLAPSED: user card becomes clean centered avatar */
#sidebar.side-hover:not(.sidebar-expanded) .user-profile-card {
    margin: 0 4px 4px;
    padding: 0;
    background: transparent;
    border-color: transparent;
    justify-content: center;
    gap: 0;
    min-height: 40px;
}

#sidebar.side-hover:not(.sidebar-expanded) .user-profile-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 11px !important;
    box-shadow: 0 1px 4px rgba(var(--p-rgb), .2);
}

#sidebar.side-hover:not(.sidebar-expanded) .user-profile-info {
    opacity: 0;
    max-width: 0;
    pointer-events: none;
}

#sidebar.side-hover:not(.sidebar-expanded) .sidebar-logout-btn {
    opacity: 0;
    max-width: 0;
    padding: 0;
    pointer-events: none;
}

/* ═══ HELP CENTER WIDGET — single element, transitions both ways ═══ */
.help-center-widget {
    padding: 6px 10px 14px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: padding .3s cubic-bezier(.4, 0, .2, 1);
}

.help-center-card {
    background: #eef0f5;
    border-radius: 14px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    transition: padding .3s cubic-bezier(.4, 0, .2, 1),
        gap .3s, background .3s, border-radius .3s;
}

.help-center-card:hover {
    background: #e4e7ee;
}

.help-center-icon-wrap {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--card-bg, #fff);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .07);
    transition: width .3s cubic-bezier(.4, 0, .2, 1),
        height .3s cubic-bezier(.4, 0, .2, 1),
        box-shadow .3s, background .3s;
}

.help-center-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    transition: opacity .2s ease, max-width .3s cubic-bezier(.4, 0, .2, 1);
    max-width: 160px;
}

.help-center-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #1a1f2e;
    line-height: 1.2;
}

.help-center-sub {
    font-size: 11.5px;
    font-weight: 400;
    color: #8b93a7;
    margin-top: 1px;
}

.help-center-chevron {
    color: #b0b7c8;
    flex-shrink: 0;
    overflow: hidden;
    transition: opacity .2s ease, max-width .3s cubic-bezier(.4, 0, .2, 1);
    max-width: 20px;
}

/* COLLAPSED: suporte becomes clean centered icon */
#sidebar.side-hover:not(.sidebar-expanded) .help-center-widget {
    padding: 0 4px 10px;
}

#sidebar.side-hover:not(.sidebar-expanded) .help-center-card {
    padding: 0;
    justify-content: center;
    gap: 0;
    background: transparent;
    border-radius: 10px;
    min-height: 40px;
}

#sidebar.side-hover:not(.sidebar-expanded) .help-center-icon-wrap {
    width: 32px;
    height: 32px;
    box-shadow: none;
    background: #f1f5f9;
}

#sidebar.side-hover:not(.sidebar-expanded) .help-center-text {
    opacity: 0;
    max-width: 0;
    pointer-events: none;
}

#sidebar.side-hover:not(.sidebar-expanded) .help-center-chevron {
    opacity: 0;
    max-width: 0;
}

/* Sidebar footer legacy (kept for compat) */
#sidebar-footer-icons {
    display: none;
}

#sidebar-footer {
    display: none;
}


/* Main wrapper */
#main-wrapper {
    margin-left: 256px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.28s cubic-bezier(.4, 0, .2, 1);
}

/* ─── APP TOPBAR ─── */
#app-topbar {
    height: 56px;
    background: var(--card-bg, #fff);
    border-bottom: 1px solid var(--border-default, #e2e8f0);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 40;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    flex-shrink: 0;
    transition: background 0.25s, border-color 0.25s;
}

#topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

#topbar-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

#topbar-page-icon {
    font-size: 17px;
    line-height: 1;
    flex-shrink: 0;
}

#topbar-page-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--t-heading, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

#topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
}

.topbar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--p-500), var(--p-600));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(var(--p-rgb), .25);
    transition: box-shadow 0.15s;
}

.topbar-avatar:hover {
    box-shadow: 0 2px 8px rgba(var(--p-rgb), .35);
}

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

.topbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border-default, #e2e8f0);
    flex-shrink: 0;
}

/* Dark mode topbar */
body.dark #app-topbar {
    background: var(--card-bg);
    border-bottom-color: var(--border-default);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

body.dark #topbar-page-title {
    color: var(--t-heading);
}

body.dark .topbar-divider {
    background: var(--border-default);
}



body.dark #topbar-search-wrap {
    background: var(--body-bg);
    border-color: transparent;
}

body.dark #topbar-search-wrap kbd {
    background: transparent;
    border-color: transparent;
    color: var(--t-muted);
    box-shadow: none;
}

body.dark #topbar-search-input {
    background: transparent !important;
    color-scheme: dark;
}

/* Hide topbar on auth / onboarding screens (no sidebar) */
body.auth-mode #app-topbar {
    display: none;
}

/* ─── TOPBAR: BUSCA GLOBAL ─── */
#topbar-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--body-bg, #f1f5f9);
    border-radius: 10px;
    padding: 0 12px;
    height: 36px;
    width: 520px;
    flex-shrink: 0;
    border: 1px solid transparent;
    transition: background .15s, border-color .15s, box-shadow .15s;
    cursor: text;
}

#topbar-search-wrap:focus-within {
    background: var(--card-bg, #fff);
    border-color: rgba(46, 114, 168, .3);
    box-shadow: 0 0 0 3px rgba(46, 114, 168, .08);
}

#topbar-search-ico {
    color: #94a3b8;
    flex-shrink: 0;
}

#topbar-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #374151;
    outline: 0 !important;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
}

#topbar-search-input::placeholder {
    color: #94a3b8;
}

#topbar-search-wrap kbd {
    font-size: 10px;
    font-family: inherit;
    font-weight: 600;
    color: #94a3b8;
    background: var(--card-bg, #fff);
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 1px 5px;
    flex-shrink: 0;
    box-shadow: 0 1px 0 #e2e8f0;
    transition: opacity .15s, max-width .15s, padding .15s;
    max-width: 40px;
    overflow: hidden;
}

#topbar-search-wrap:focus-within kbd {
    opacity: 0;
    max-width: 0;
    padding: 0 0;
    border: none;
}

/* Dropdown de resultados da busca */
#topbar-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 520px;
    background: var(--card-bg, #fff);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    overflow: hidden;
    animation: fadeIn .1s ease;
    display: none;
}

#topbar-search-results .sr-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 13px;
    color: #374151;
    transition: background .1s;
    border-bottom: 1px solid #f8fafc;
}

#topbar-search-results .sr-item:last-child {
    border-bottom: none;
}

#topbar-search-results .sr-item:hover {
    background: #f8fafc;
}

#topbar-search-results .sr-item.active {
    background: #eff6ff;
    color: var(--p-600, #2563eb);
}

#topbar-search-results .sr-section {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 4px 12px 2px;
    background: #fafafa;
}

#topbar-search-results .sr-empty {
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: #94a3b8;
}

/* ─── TOPBAR: USER DROPDOWN ─── */
.topbar-user-trigger {
    position: relative;
    cursor: pointer;
}

.topbar-user-trigger-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: 20px;
    transition: background .15s;
}

.topbar-user-trigger:hover .topbar-user-trigger-inner {
    background: var(--p-50, #f1f5f9);
}

.topbar-user-firstname {
    font-size: 13px;
    font-weight: 600;
    color: var(--t-heading, #1e293b);
    white-space: nowrap;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 300px;
    background: var(--card-bg, #fff);
    border-radius: 18px;
    border: 1px solid var(--border-default, #e2e8f0);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .06);
    overflow: hidden;
    z-index: 999;
    /* animação APENAS na classe .tud-open */
}

.topbar-user-dropdown.tud-open {
    animation: tudIn .2s cubic-bezier(.4, 0, .2, 1) both;
}

.topbar-user-dropdown.tud-closing {
    animation: tudOut .15s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes tudIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes tudOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(-6px) scale(.97);
    }
}

.tud-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-default, #f1f5f9);
    transition: background .15s, transform .12s;
}

.tud-card:last-child {
    border-bottom: none;
}

.tud-card:hover {
    background: var(--p-50);
}

.tud-card:active {
    transform: scale(.98);
}

/* Avatar card (Meu Perfil) */
.tud-avatar-wrap {
    flex-shrink: 0;
}

.tud-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--p-500), var(--p-600));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
    box-shadow: 0 2px 8px rgba(var(--p-rgb), .25);
    overflow: hidden;
    flex-shrink: 0;
}

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

/* Icon cards — círculo igual ao avatar */
.tud-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(var(--p-rgb), .25);
}

/* Legacy: .tud-icon-wrap (fallback) */
.tud-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tud-info {
    flex: 1;
    min-width: 0;
}

.tud-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--t-heading, #1a1f2e);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tud-sub {
    font-size: 12px;
    color: var(--t-muted, #8b93a7);
    margin-top: 1px;
}

.tud-logout-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--t-light, #94a3b8);
    transition: color .15s, background .15s;
    flex-shrink: 0;
}

.tud-logout-btn span {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .3px;
}

.tud-logout-btn:hover {
    color: #ef4444;
    background: #fef2f2;
}

.tud-chevron {
    color: var(--t-light, #b0b7c8);
    flex-shrink: 0;
}

.tud-card-link:hover .tud-chevron {
    color: var(--p-500);
}


#main-content {
    padding: 0.5rem 1.5rem 1.5rem;
    flex: 1;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto
}

/* ─── BOTÃO PRIMÁRIO AURORA ─── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(105deg, #194570 0%, #2e72a8 55%, #5990be 100%);
    box-shadow: 0 4px 14px rgba(46, 114, 168, .32);
    transition: all .2s ease;
    letter-spacing: -.01em;
    font-family: inherit;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(46, 114, 168, .42);
    background: linear-gradient(105deg, #102f55 0%, #225a8a 55%, #5990be 100%);
}

.btn-primary:active {
    transform: none;
    box-shadow: 0 2px 8px rgba(46, 114, 168, .3);
}



/* ─── MOBILE ─── */
#mobile-topbar {
    display: none;
    height: 52px;
    background: var(--card-bg, #fff);
    align-items: center;
    padding: 0 1rem;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05)
}

#mobile-topbar button {
    color: #1e293b
}

#mobile-topbar span {
    color: #1e293b
}

#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 49;
    backdrop-filter: blur(2px)
}

#sidebar-overlay.open {
    display: block
}

@media(max-width:768px) {
    :root {
        --sidebar-w: 0px;
    }

    #sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease
    }

    #sidebar.mobile-open {
        transform: translateX(0)
    }

    #main-wrapper {
        margin-left: 0
    }

    #mobile-topbar {
        display: flex
    }
}

/* ─── NOTIFICATION BELL ─── */
#notif-bell-container {
    position: relative;
}

#dark-mode-toggle-btn {
    margin-left: auto;
}

#sidebar-detail-header {
    display: flex;
    align-items: center;
}

.notif-bell-btn {
    position: relative;
    background: rgba(var(--p-rgb), 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--p-rgb), 0.2);
    border-radius: 10px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s
}

.notif-bell-btn:hover {
    background: rgba(var(--p-rgb), 0.2);
    border-color: rgba(var(--p-rgb), 0.4);
    box-shadow: 0 4px 12px rgba(var(--p-rgb), 0.2);
}

.notif-bell-btn svg {
    color: var(--p-500)
}

.notif-bell-btn:hover svg {
    color: var(--p-600)
}

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    animation: notifPulse 2s infinite
}

@keyframes notifPulse {

    0%,
    100% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }
}

.notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 420px;
    max-height: min(560px, calc(100vh - 80px));
    background: var(--card-bg, #fff);
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.14);
    border: 1px solid var(--border-default, #e2e8f0);
    overflow-y: auto;
    z-index: 999;
    animation: fadeIn 0.15s ease;
}

#notif-bell-container {
    position: relative;
    display: flex;
    align-items: center;
}

.notif-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-default, #f1f5f9);
    font-weight: 600;
    font-size: 14px;
    color: var(--t-heading, #1e293b)
}

.notif-mark-all {
    font-size: 11px;
    color: var(--p-500);
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 500
}

.notif-mark-all:hover {
    text-decoration: underline
}

.notif-list {
    max-height: 400px;
    overflow-y: auto
}

.notif-empty {
    padding: 32px;
    text-align: center;
    color: var(--t-light, #94a3b8)
}

.notif-empty p {
    margin-top: 8px;
    font-size: 13px
}

.notif-item {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid var(--border-default, #f8fafc)
}

.notif-item:hover {
    background: var(--p-50)
}

.notif-item.notif-unread {
    background: var(--p-50)
}

.notif-item.notif-unread:hover {
    background: var(--p-100)
}

.notif-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px
}

.notif-content {
    flex: 1;
    min-width: 0
}

.notif-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--t-heading, #1e293b);
    line-height: 1.3
}

.notif-msg {
    font-size: 12px;
    color: var(--t-secondary, #64748b);
    margin-top: 2px;
    line-height: 1.4;
    word-break: break-word;
}

.notif-time {
    font-size: 11px;
    color: var(--t-muted, #94a3b8);
    margin-top: 3px
}

/* ─── CRM KANBAN ─── */
.crm-pipeline {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 16px;
    min-height: 400px
}

.crm-column {
    min-width: 260px;
    width: 260px;
    flex-shrink: 0;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s;
    max-height: 75vh
}

.crm-column.crm-col-dragover {
    border-color: var(--p-500);
    background: var(--p-50);
    box-shadow: 0 0 0 2px rgba(var(--p-rgb), 0.2)
}

.crm-col-header {
    padding: 14px 14px 10px;
    border-radius: 12px 12px 0 0;
    flex-shrink: 0
}

.crm-col-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b
}

.crm-col-stats {
    display: flex;
    gap: 8px;
    margin-top: 4px;
    font-size: 11px;
    color: #64748b
}

.crm-col-count {
    background: #e2e8f0;
    padding: 1px 8px;
    border-radius: 99px;
    font-weight: 600
}

.crm-col-total {
    font-weight: 500
}

.crm-col-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    min-height: 60px
}

.crm-deal-card {
    background: var(--card-bg, #fff);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 8px;
    cursor: grab;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04)
}

.crm-deal-card:hover {
    border-color: var(--p-500);
    box-shadow: 0 4px 12px rgba(var(--p-rgb), 0.1);
    transform: translateY(-1px)
}

.crm-deal-card:active {
    cursor: grabbing
}

.crm-deal-title {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px
}

.crm-deal-cliente {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px
}

.crm-deal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.crm-deal-valor {
    font-size: 13px;
    font-weight: 700;
    color: #10b981
}

.crm-deal-date {
    font-size: 11px;
    color: #94a3b8
}

/* ─── CRM ACTIVITIES ─── */
.crm-activity {
    display: flex;
    gap: 8px;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 4px;
    transition: background 0.1s
}

.crm-activity:hover {
    background: #f8fafc
}

.crm-activity.crm-act-done {
    opacity: 0.5
}

.crm-activity.crm-act-done .crm-act-desc {
    text-decoration: line-through
}

.crm-act-check {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    flex-shrink: 0;
    padding: 0;
    margin-top: 2px
}

.crm-act-content {
    flex: 1
}

.crm-act-tipo {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 2px
}

.crm-act-desc {
    font-size: 13px;
    color: #1e293b;
    line-height: 1.4
}

.crm-act-date {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px
}

/* ─── MODAL OVERLAY (escuro) ─── */
.modal-overlay {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px)
}

/* ─── WORKFLOW RULE CARDS ─── */
.wf-rule-card {
    background: var(--card-bg, #fff);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    transition: all 0.15s
}

.wf-rule-card:hover {
    border-color: var(--p-500);
    box-shadow: 0 2px 12px rgba(var(--p-rgb), 0.08)
}

.wf-rule-card.wf-rule-disabled {
    opacity: 0.5;
    background: #fafafa
}

.wf-rule-main {
    flex: 1;
    min-width: 0
}

.wf-rule-flow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px
}

.wf-rule-entity {
    font-size: 12px;
    font-weight: 600;
    color: var(--p-500);
    background: var(--p-50);
    padding: 2px 8px;
    border-radius: 6px
}

.wf-rule-arrow {
    font-size: 13px;
    color: #475569
}

.wf-rule-action {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b
}

.wf-rule-action-icon {
    font-size: 14px
}

.wf-rule-detail {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.wf-rule-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0
}

/* ─── DASHBOARD KPI CARDS ─── */
.dash-kpi-card {
    background: var(--card-bg, #fff);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.dash-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}


.dash-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.dash-kpi-body {
    flex: 1;
    min-width: 0;
}

.dash-kpi-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.dash-kpi-value {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.dash-kpi-delta {
    font-size: 11px;
    font-weight: 600;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.dash-kpi-delta.up {
    color: #10b981;
}

.dash-kpi-delta.down {
    color: #ef4444;
}

.dash-kpi-delta.flat {
    color: #94a3b8;
}

/* ─── KPI CARD HIERARCHY (Correção 1) ─── */
.kpi-card-primary {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-default, #e8edf5);
    border-radius: 14px;
    padding: 24px 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    transition: box-shadow .18s, transform .18s;
}

.kpi-card-primary:hover {
    box-shadow: 0 4px 16px rgba(46, 114, 168, .10);
    transform: translateY(-1px);
}

.kpi-card-secondary {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-default, #e8edf5);
    border-radius: 14px;
    padding: 24px 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    transition: box-shadow .18s;
}

.kpi-card-secondary:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.kpi-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--t-muted, #94a3b8);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

.kpi-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.kpi-value-primary {
    font-size: 26px;
    font-weight: 800;
    color: var(--t-heading, #1e293b);
    letter-spacing: -0.02em;
    line-height: 1;
}

.kpi-value-secondary {
    font-size: 20px;
    font-weight: 700;
    color: var(--t-body, #374151);
    letter-spacing: -0.01em;
    line-height: 1;
}

/* ─── SIMPLES NACIONAL BAR (Correção 2) ─── */
.simples-bar-track {
    background: #e8edf5;
    border-radius: 99px;
    height: 10px;
    width: 100%;
    overflow: hidden;
}

.simples-bar-fill {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #5990be, #225a8a);
    transition: width .6s cubic-bezier(.4, 0, .2, 1);
    min-width: 4px;
}

/* ─── CHART EMPTY STATE (Correção 4) ─── */
.chart-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 220px;
    color: #cbd5e1;
    text-align: center;
}

body.dark .dash-kpi-card {
    background: #1e293b;
    border-color: #334155;
    border-left-color: #475569;
}

body.dark .dash-kpi-card[data-type="receita"] {
    border-left-color: #10b981;
}

body.dark .dash-kpi-card[data-type="despesa"] {
    border-left-color: #ef4444;
}

body.dark .dash-kpi-card[data-type="vendas"] {
    border-left-color: var(--p-400);
}

body.dark .dash-kpi-card[data-type="fiscal"] {
    border-left-color: #f59e0b;
}

body.dark .dash-kpi-card[data-type="estoque"] {
    border-left-color: #5990be;
}

body.dark .dash-kpi-card[data-type="clientes"] {
    border-left-color: #06b6d4;
}

body.dark .dash-kpi-value {
    color: #f1f5f9;
}

/* ─── TRANSITIONS GLOBAIS (dark mode theme transitions) ─── */
/* NOTE: #sidebar and #main-wrapper excluded — they have their own width/margin transitions */
body,
.bg-white,
.nav-item,
.nav-section-header,
#sidebar-footer,
#sidebar-logo,
.dash-kpi-card,
.crm-deal-card,
.crm-column,
.wf-rule-card,
.notif-dropdown,
.notif-bell-btn,
input,
select,
textarea {
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* ─── DARK MODE REFINADO ─── */
body.dark {
    background: #0f172a;
    color: #e2e8f0;
}

body.dark .bg-white,
body.dark [class*="bg-white"] {
    background: #1e293b !important;
}

body.dark .border,
body.dark [class*="border-gray"] {
    border-color: #334155 !important;
}

body.dark input,
body.dark select,
body.dark textarea {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

body.dark .rounded-xl.border.shadow-sm,
body.dark .rounded-xl.border {
    background: #1e293b;
    border-color: #334155;
}

/* ─── FADE-IN DE PÁGINAS ─── */
#main-content>* {
    animation: fadeIn .3s cubic-bezier(.4, 0, .2, 1);
}

/* ─── BOTÕES PRIMÁRIOS COM GRADIENTE AURORA ─── */
.btn-aurora-primary,
btn.bg-purple-600,
button.bg-purple-600 {
    background: linear-gradient(105deg, #194570 0%, var(--p-500) 60%, #00bfa5 100%);
    border: none;
    color: #fff;
    box-shadow: 0 4px 14px rgba(var(--p-rgb), .3);
    transition: all 0.2s;
}

.btn-aurora-primary:hover,
btn.bg-purple-600:hover,
button.bg-purple-600:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--p-rgb), .4);
}

/* ─── SKELETON LOADER ─── */
.skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px
}

body.dark .skeleton {
    background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%);
    background-size: 200% 100%
}

@keyframes shimmer {
    0% {
        background-position: 200% 0
    }

    100% {
        background-position: -200% 0
    }
}

/* ─── MICRO-ANIMATIONS ─── */
.hover-lift {
    transition: transform 0.15s ease, box-shadow 0.15s ease
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08)
}

.hover-glow:hover {
    box-shadow: 0 0 0 3px rgba(var(--p-rgb), 0.15)
}

.scale-click:active {
    transform: scale(0.97)
}

/* ─── WORKFLOW AUTOMATION CARDS ─── */
.wf-toggle-wrap {
    cursor: pointer;
    display: inline-flex;
    user-select: none
}

.wf-toggle-wrap input {
    display: none
}

.wf-toggle-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 16px;
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    transition: all 0.15s ease;
    opacity: 0.4;
    filter: grayscale(1);
}

.wf-toggle-wrap input:checked+.wf-toggle-box {
    background: var(--p-50);
    border-color: var(--p-500);
    opacity: 1;
    filter: none;
    box-shadow: 0 2px 8px rgba(var(--p-rgb), 0.2);
}

.wf-toggle-wrap:hover .wf-toggle-box {
    border-color: var(--p-300);
    transform: scale(1.08);
}

.wf-status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.02em;
}

.wf-status-on {
    background: #dcfce7;
    color: #16a34a
}

.wf-status-off {
    background: #f3f4f6;
    color: #9ca3af
}

.wf-save-btn {
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    background: var(--p-500);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wf-save-btn:hover {
    background: var(--p-600);
    box-shadow: 0 4px 12px rgba(var(--p-rgb), 0.3)
}

@keyframes wfPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(var(--p-rgb), 0.4)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(var(--p-rgb), 0)
    }
}

.wf-save-pulse {
    animation: wfPulse 1.5s infinite
}

/* ─── BANK SPLIT-SCREEN CONCILIAÇÃO ─── */
.bank-split {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    gap: 8px;
    min-height: 400px
}

.bank-split-col {
    background: var(--card-bg, #fff);
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.bank-split-header {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc
}

.bank-split-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    max-height: 500px
}

.bank-split-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px 4px
}

.bank-tx-card {
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.15s
}

.bank-tx-card:hover {
    border-color: var(--p-300);
    background: var(--p-50)
}

.bank-tx-card.bank-tx-selected {
    border-color: var(--p-500);
    background: var(--p-100);
    box-shadow: 0 0 0 3px rgba(var(--p-rgb), 0.15)
}

/* Dark mode bank */
body.dark .bank-split-col {
    background: #1e293b;
    border-color: #334155
}

body.dark .bank-split-header {
    background: #0f172a;
    border-color: #334155
}

body.dark .bank-tx-card {
    border-color: #334155
}

body.dark .bank-tx-card:hover {
    border-color: var(--p-400);
    background: #1e3a5f
}

body.dark .bank-tx-card.bank-tx-selected {
    border-color: var(--p-500);
    background: #1e3a5f
}

@media (max-width: 768px) {
    .bank-split {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto
    }

    .bank-split-center {
        flex-direction: row;
        padding: 8px
    }
}

/* ═══════════════════════════════════════════════════════════════════
   SGE TABLE — Excel-like filter/sort engine
   ═══════════════════════════════════════════════════════════════════ */

/* Filter bar */
.sge-tbl-bar {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    padding: 12px 16px;
    margin-bottom: 12px;
}

.sge-tbl-bar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.sge-tbl-bar-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sge-tbl-search-wrap {
    flex: 1;
    min-width: 160px;
}

.sge-tbl-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.sge-tbl-input {
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #1e293b;
    background: var(--card-bg, #fff);
    transition: border-color .15s, box-shadow .15s;
}

.sge-tbl-input:focus {
    outline: none;
    border-color: var(--p-500);
    box-shadow: 0 0 0 3px rgba(var(--p-rgb), .1);
}

.sge-tbl-search {
    width: 100%;
}

.sge-tbl-date {
    width: 130px;
}

.sge-tbl-pp {
    width: 90px;
    cursor: pointer;
}

.sge-tbl-clear-btn {
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
    background: var(--card-bg, #fff);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.sge-tbl-clear-btn:hover {
    color: #ef4444;
    border-color: #fca5a5;
    background: #fef2f2;
}

/* Table wrapper */
.sge-tbl-wrap {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    overflow: hidden;
}

.sge-tbl-scroll {
    overflow-x: auto;
}

.sge-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/* Header cells */
.sge-th {
    padding: 10px 12px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 2px solid #e2e8f0;
    background: #f8fafc;
    white-space: nowrap;
    user-select: none;
}

.sge-th-sortable {
    cursor: pointer;
}

.sge-th-sortable:hover {
    background: var(--p-50);
    color: var(--p-800);
}

.sge-th-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.sge-th-label {
    flex: 1;
    text-align: center;
}

/* Filter button in header */
.sge-th-filter-btn {
    width: 18px;
    height: 18px;
    border: none;
    background: none;
    color: #94a3b8;
    font-size: 11px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    flex-shrink: 0;
    padding: 0;
}

.sge-th-filter-btn:hover {
    background: var(--p-100);
    color: var(--p-500);
}

.sge-th-filter-active {
    color: var(--p-500);
    background: var(--p-100);
    font-weight: 900;
}

/* Body cells — CENTERED */
.sge-tbl td {
    padding: 8px 12px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    color: #374151;
    transition: background .1s;
}

.sge-tbl tbody tr {
    cursor: pointer;
    transition: background .1s;
}

.sge-tbl tbody tr:hover {
    background: #f8fafc;
}

.sge-tbl tbody tr:last-child td {
    border-bottom: none;
}

/* Pagination */
.sge-tbl-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid #f1f5f9;
    background: #fafbfc;
}

.sge-tbl-pag-info {
    font-size: 12px;
    color: #64748b;
}

.sge-tbl-pag-btns {
    display: flex;
    gap: 6px;
}

.sge-tbl-pag-btn {
    padding: 5px 12px;
    font-size: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: var(--card-bg, #fff);
    color: #475569;
    cursor: pointer;
    transition: all .15s;
}

.sge-tbl-pag-btn:hover {
    border-color: var(--p-500);
    color: var(--p-500);
    background: var(--p-50);
}

/* Empty state */
.sge-tbl-empty {
    padding: 48px 24px;
    text-align: center;
    background: var(--card-bg, #fff);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.sge-tbl-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: #64748b;
}

.sge-tbl-empty-desc {
    font-size: 13px;
    color: #94a3b8;
    margin-top: 6px;
}

/* ── Excel Filter Dropdown ────────────────────────────────────── */
.sge-filter-dropdown {
    position: fixed;
    z-index: 9999;
    width: 240px;
    max-height: 360px;
    background: var(--card-bg, #fff);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .15);
    display: flex;
    flex-direction: column;
    animation: sge-fd-in .12s ease-out;
}

@keyframes sge-fd-in {
    from {
        opacity: 0;
        transform: translateY(-4px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.sge-fd-header {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
}

.sge-fd-search-wrap {
    padding: 8px 12px;
}

.sge-fd-search {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 12px;
    outline: none;
}

.sge-fd-search:focus {
    border-color: var(--p-500);
}

.sge-fd-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 12px;
    max-height: 200px;
}

.sge-fd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
    font-size: 12px;
    color: #374151;
}

.sge-fd-item:hover {
    color: var(--p-800);
}

.sge-fd-item-hidden {
    display: none !important;
}

.sge-fd-cb {
    width: 14px;
    height: 14px;
    accent-color: var(--p-500);
    cursor: pointer;
}

.sge-fd-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sge-fd-footer {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #f1f5f9;
}

.sge-fd-btn {
    flex: 1;
    padding: 6px 0;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}

.sge-fd-apply {
    background: var(--p-500);
    color: #fff;
}

.sge-fd-apply:hover {
    background: var(--p-600);
}

.sge-fd-remove {
    background: #f1f5f9;
    color: #64748b;
}

.sge-fd-remove:hover {
    background: #fef2f2;
    color: #ef4444;
}

/* Dark mode SgeTable */
body.dark .sge-tbl-bar,
body.dark .sge-tbl-wrap {
    background: #1e293b;
    border-color: #334155;
}

body.dark .sge-tbl-input {
    background: #0f172a;
    border-color: #334155;
    color: #e2e8f0;
}

body.dark .sge-th {
    background: #0f172a;
    color: #94a3b8;
    border-color: #334155;
}

body.dark .sge-th-sortable:hover {
    background: #1e3a5f;
    color: var(--p-300);
}

body.dark .sge-tbl td {
    border-color: #334155;
    color: #e2e8f0;
}

body.dark .sge-tbl tbody tr:hover {
    background: #1e3a5f;
}

body.dark .sge-tbl-pagination {
    background: #0f172a;
    border-color: #334155;
}

body.dark .sge-filter-dropdown {
    background: #1e293b;
    border-color: #334155;
}

body.dark .sge-fd-body {
    color: #e2e8f0;
}

body.dark .sge-fd-item {
    color: #e2e8f0;
}

body.dark .sge-tbl-clear-btn {
    background: #1e293b;
    border-color: #334155;
    color: #94a3b8;
}

@media (max-width: 768px) {
    .sge-tbl-bar-row {
        flex-direction: column;
    }

    .sge-tbl-date {
        width: 100%;
    }

    .sge-tbl-pp {
        width: 100%;
    }
}

/* ─── DYNAMIC THEME: Tailwind utility → CSS variable overrides ─── */
/* These map all Tailwind blue/purple classes to --p-* CSS variables
   so _applyTheme() controls everything dynamically. */

/* backgrounds */
.bg-purple-50,
.bg-blue-50 {
    background-color: var(--p-50) !important;
}

.bg-purple-100,
.bg-blue-100 {
    background-color: var(--p-100) !important;
}

.bg-purple-200,
.bg-blue-200 {
    background-color: var(--p-200) !important;
}

.bg-purple-500,
.bg-blue-500 {
    background-color: var(--p-500) !important;
}

.bg-purple-600,
.bg-blue-600 {
    background-color: var(--p-600) !important;
}

/* text */
.text-purple-200,
.text-blue-200 {
    color: var(--p-200) !important;
}

.text-purple-300,
.text-blue-300 {
    color: var(--p-300) !important;
}

.text-purple-400,
.text-blue-400 {
    color: var(--p-400) !important;
}

.text-purple-500,
.text-blue-500 {
    color: var(--p-500) !important;
}

.text-purple-600,
.text-blue-600 {
    color: var(--p-600) !important;
}

.text-purple-700,
.text-blue-700 {
    color: var(--p-700) !important;
}

.text-purple-800,
.text-blue-800 {
    color: var(--p-800) !important;
}

.text-purple-900,
.text-blue-900 {
    color: var(--p-800) !important;
}

/* borders */
.border-purple-100,
.border-blue-100 {
    border-color: var(--p-100) !important;
}

.border-purple-200,
.border-blue-200 {
    border-color: var(--p-200) !important;
}

.border-purple-300,
.border-blue-300 {
    border-color: var(--p-300) !important;
}

.border-purple-400,
.border-blue-400 {
    border-color: var(--p-400) !important;
}

.border-purple-600,
.border-blue-600 {
    border-color: var(--p-600) !important;
}

/* hover backgrounds */
.hover\:bg-purple-50:hover,
.hover\:bg-blue-50:hover {
    background-color: var(--p-50) !important;
}

.hover\:bg-purple-100:hover,
.hover\:bg-blue-100:hover {
    background-color: var(--p-100) !important;
}

.hover\:bg-purple-700:hover,
.hover\:bg-blue-700:hover {
    background-color: var(--p-700) !important;
}

/* hover text */
.hover\:text-purple-500:hover,
.hover\:text-blue-500:hover {
    color: var(--p-500) !important;
}

.hover\:text-purple-600:hover,
.hover\:text-blue-600:hover {
    color: var(--p-600) !important;
}

.hover\:text-purple-700:hover,
.hover\:text-blue-700:hover {
    color: var(--p-700) !important;
}

.hover\:text-purple-800:hover,
.hover\:text-blue-800:hover {
    color: var(--p-800) !important;
}

/* hover borders */
.hover\:border-purple-300:hover,
.hover\:border-blue-300:hover {
    border-color: var(--p-300) !important;
}

.hover\:border-purple-400:hover,
.hover\:border-blue-400:hover {
    border-color: var(--p-400) !important;
}

/* focus */
.focus\:border-purple-400:focus,
.focus\:border-blue-400:focus {
    border-color: var(--p-400) !important;
}

.focus\:border-purple-500:focus,
.focus\:border-blue-500:focus {
    border-color: var(--p-500) !important;
}

.focus\:ring-purple-100:focus,
.focus\:ring-blue-100:focus {
    --tw-ring-color: var(--p-100) !important;
}

.focus\:ring-purple-200:focus,
.focus\:ring-blue-200:focus {
    --tw-ring-color: var(--p-200) !important;
}

.focus\:ring-purple-400:focus,
.focus\:ring-blue-400:focus {
    --tw-ring-color: var(--p-400) !important;
}

.focus\:ring-purple-500:focus,
.focus\:ring-blue-500:focus {
    --tw-ring-color: var(--p-500) !important;
}

/* accent */
.accent-purple-500,
.accent-blue-500 {
    accent-color: var(--p-500) !important;
}

.accent-purple-600,
.accent-blue-600 {
    accent-color: var(--p-600) !important;
}

/* ═══════════════════════════════════════════════════════
   NUCLEAR DARK MODE — catches EVERYTHING remaining
   ═══════════════════════════════════════════════════════ */
body.dark .bg-white,
body.dark .bg-gray-50,
body.dark .bg-gray-100,
body.dark .bg-slate-50,
body.dark .bg-slate-100,
body.dark [class*="bg-white"],
body.dark [class*="bg-gray-50"],
body.dark [class*="bg-gray-100"] {
    background-color: var(--card-bg) !important;
}

/* Catch ALL inline background:white / #fff / #ffffff */
body.dark [style*="background: white"],
body.dark [style*="background:white"],
body.dark [style*="background: #fff"],
body.dark [style*="background:#fff"],
body.dark [style*="background: #ffffff"],
body.dark [style*="background:#ffffff"],
body.dark [style*="background-color: white"],
body.dark [style*="background-color:#fff"],
body.dark [style*="background-color: #fff"] {
    background: var(--card-bg) !important;
}

/* Catch card-like patterns: rounded + border + shadow */
body.dark .rounded-xl[class*="border"],
body.dark .rounded-2xl[class*="border"],
body.dark .rounded-lg[class*="border"],
body.dark .shadow-sm {
    background-color: var(--card-bg) !important;
    border-color: var(--border-default) !important;
}

/* Inline gradient headers in cards */
body.dark [style*="linear-gradient(135deg, #eff6ff"],
body.dark [style*="linear-gradient(135deg, #ede9fe"],
body.dark [style*="linear-gradient(to bottom right, var(--p-50)"] {
    background: var(--card-bg) !important;
}

/* Topbar icon color */
body.dark #topbar-page-icon svg {
    color: var(--t-muted) !important;
}

body.dark #topbar-page-icon {
    color: var(--t-muted) !important;
}

/* Sidebar search area */
body.dark .sidebar-search {
    background: var(--card-bg) !important;
}

body.dark .sidebar-search:focus-within {
    background: var(--p-50) !important;
}

body.dark .sidebar-search svg {
    color: var(--t-muted) !important;
}

body.dark .sidebar-search kbd {
    background: var(--card-bg) !important;
    border-color: var(--border-default) !important;
}

/* Notification bell */
body.dark .notif-bell-btn {
    background: var(--card-bg) !important;
}

/* Any remaining hover states */
body.dark .hover\:bg-gray-50:hover,
body.dark .hover\:bg-gray-100:hover,
body.dark .hover\:bg-slate-50:hover {
    background: var(--p-50) !important;
}

/* Force all borders */
body.dark [class*="border-gray"],
body.dark [class*="border-slate"] {
    border-color: var(--border-default) !important;
}

/* Force code/mono blocks */
body.dark code,
body.dark pre {
    background: var(--body-bg) !important;
    color: var(--t-body) !important;
}

/* Preserve tab bar buttons in dark mode */
body.dark .sge-tab-bar {
    background: #fff !important;
    border-color: #e2e8f0 !important;
}

body.dark .sge-tab-bar button {
    background: transparent !important;
}

body.dark .sge-tab-bar button.bg-blue-600 {
    background: #2563eb !important;
    color: #fff !important;
}

body.dark .sge-tab-bar button.bg-emerald-600 {
    background: #059669 !important;
    color: #fff !important;
}

body.dark .sge-tab-bar button.bg-violet-600 {
    background: #7c3aed !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE: adapt content for lower resolutions (1366×768 etc)
   ═══════════════════════════════════════════════════════════════ */
/* Prevent any horizontal overflow */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

#main-wrapper {
    overflow-x: hidden;
}

/* Adapt topbar search width so it never pushes content off-screen */
@media (max-width: 1440px) {
    #topbar-search-wrap {
        width: 360px;
    }

    #topbar-search-results {
        width: 360px;
    }

    #main-content {
        padding: 0.5rem 1.25rem 1.25rem;
    }
}

@media (max-width: 1280px) {
    #topbar-search-wrap {
        width: 280px;
    }

    #topbar-search-results {
        width: 280px;
    }

    #main-content {
        padding: 0.5rem 1rem 1rem;
    }
}