/* ============================================================
   PAYEMPRESA CAMPAIGNS – PREMIUM THEME v5.0 🚀
   ============================================================
   SPECTACULAR Edition
   – Sidebar: Flush, clean white (light) / deep dark (dark)
   – Floating sidebar REMOVED (override top/bottom/left/radius)
   – All icons visible with explicit color rules
   – Premium glass header, vibrant accent colors
   – Smooth micro-animations everywhere
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* -----------------------------------------------
   CSS VARIABLES
   ----------------------------------------------- */
:root {
    /* Brand – Vibrant Sky Blue */
    --pe-primary: #0ea5e9;
    --pe-primary-light: #38bdf8;
    --pe-primary-dark: #0284c7;
    --pe-primary-rgb: 14, 165, 233;
    --pe-primary-soft: rgba(14, 165, 233, 0.08);

    /* Secondary – Violet for extra flair */
    --pe-secondary: #8b5cf6;
    --pe-secondary-rgb: 139, 92, 246;

    /* Accent gradient */
    --pe-gradient: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
    --pe-gradient-soft: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);

    /* Status */
    --pe-success: #10b981;
    --pe-warning: #f59e0b;
    --pe-danger: #ef4444;
    --pe-info: #6366f1;

    /* Typography */
    --pe-font: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;

    /* Radius */
    --pe-radius-xs: 6px;
    --pe-radius-sm: 8px;
    --pe-radius: 12px;
    --pe-radius-lg: 16px;
    --pe-radius-xl: 20px;
    --pe-radius-2xl: 24px;

    /* Transitions */
    --pe-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --pe-transition-fast: all 0.15s ease;
    --pe-transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Light Mode Colors */
    --pe-page-bg: #f5f7fa;
    --pe-card-bg: #ffffff;
    --pe-card-border: rgba(0, 0, 0, 0.04);
    --pe-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --pe-card-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.08);
    --pe-text-primary: #0f172a;
    --pe-text-secondary: #64748b;
    --pe-text-muted: #94a3b8;
    --pe-border-color: #e8ecf1;

    /* Sidebar (Light) – Clean white */
    --pe-sidebar-bg: #ffffff;
    --pe-sidebar-border: #e8ecf1;
    --pe-sidebar-text: #64748b;
    --pe-sidebar-text-hover: #0f172a;
    --pe-sidebar-text-active: #0ea5e9;
    --pe-sidebar-icon: #94a3b8;
    --pe-sidebar-icon-hover: #64748b;
    --pe-sidebar-icon-active: #0ea5e9;
    --pe-sidebar-active-bg: rgba(14, 165, 233, 0.06);
    --pe-sidebar-hover-bg: rgba(0, 0, 0, 0.02);
    --pe-sidebar-divider: #f1f5f9;
    --pe-sidebar-footer-text: #334155;
    --pe-sidebar-footer-muted: #94a3b8;
}

/* -----------------------------------------------
   GLOBAL TYPOGRAPHY
   ----------------------------------------------- */
body,
.page {
    font-family: var(--pe-font) !important;
    background-color: var(--pe-page-bg) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--pe-text-primary);
}

h1,
h2,
h3,
h4,
h5,
h6,
.fw-bolder,
.fw-bold,
.card-title,
.card-label,
.menu-title,
.modal-title,
.fs-2hx,
.fs-2x {
    font-family: var(--pe-font) !important;
}

/* CRITICAL: Never override font-family on icon elements – let FA handle it */
/* .fs-1 was removed from the typography selector above because it conflicts
   with Font Awesome icons that use fs-1 as a size class */

.text-gray-900 {
    color: var(--pe-text-primary) !important;
}

.text-gray-800 {
    color: #1e293b !important;
}

.text-gray-700 {
    color: #334155 !important;
}

.text-gray-600 {
    color: var(--pe-text-secondary) !important;
}

.text-gray-500 {
    color: #94a3b8 !important;
}

.text-gray-400 {
    color: #cbd5e1 !important;
}

/* -----------------------------------------------
   SIDEBAR – Flush, NOT floating, clean design
   Override Metronic Demo3's floating sidebar
   ----------------------------------------------- */

/* Kill the floating effect completely */
@media (min-width: 992px) {
    .aside {
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
    }
}

.aside {
    background: var(--pe-sidebar-bg) !important;
    border: none !important;
    border-right: 1px solid var(--pe-sidebar-border) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}

/* Remove pseudo-element glows – clean flat sidebar */
.aside::before,
.aside::after {
    display: none !important;
}

/* Logo */
.aside-logo {
    padding: 20px 20px 16px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--pe-sidebar-divider) !important;
}

.aside-logo img.logo {
    max-height: 42px !important;
    transition: var(--pe-transition);
}

/* ---- Menu Items ---- */
.aside .menu>.menu-item>.menu-link {
    margin: 2px 12px !important;
    padding: 10px 14px !important;
    border-radius: var(--pe-radius-sm) !important;
    transition: var(--pe-transition) !important;
    position: relative;
}

.aside .menu>.menu-item>.menu-link .menu-icon,
.aside .menu>.menu-item>.menu-link .menu-icon i,
.aside .menu>.menu-item>.menu-link .menu-icon .svg-icon {
    color: var(--pe-sidebar-icon) !important;
    transition: var(--pe-transition) !important;
}

.aside .menu>.menu-item>.menu-link .menu-title {
    color: var(--pe-sidebar-text) !important;
    font-weight: 500 !important;
    font-size: 0.925rem !important;
    transition: var(--pe-transition) !important;
}

/* Hover */
.aside .menu>.menu-item>.menu-link:hover {
    background: var(--pe-sidebar-hover-bg) !important;
}

.aside .menu>.menu-item>.menu-link:hover .menu-title {
    color: var(--pe-sidebar-text-hover) !important;
}

.aside .menu>.menu-item>.menu-link:hover .menu-icon i,
.aside .menu>.menu-item>.menu-link:hover .menu-icon .svg-icon {
    color: var(--pe-sidebar-icon-hover) !important;
}

/* Active state – with vibrant left accent bar */
.aside .menu>.menu-item>.menu-link.active {
    background: var(--pe-sidebar-active-bg) !important;
    box-shadow: none !important;
    position: relative;
}

.aside .menu>.menu-item>.menu-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    bottom: 15%;
    width: 3px;
    background: var(--pe-gradient);
    border-radius: 0 4px 4px 0;
}

.aside .menu>.menu-item>.menu-link.active .menu-title {
    color: var(--pe-sidebar-text-active) !important;
    font-weight: 600 !important;
}

.aside .menu>.menu-item>.menu-link.active .menu-icon i,
.aside .menu>.menu-item>.menu-link.active .menu-icon .svg-icon {
    color: var(--pe-sidebar-icon-active) !important;
}

/* Sub menu */
.aside .menu .menu-sub .menu-item .menu-link {
    padding: 7px 14px 7px 26px !important;
    margin: 1px 12px !important;
    border-radius: var(--pe-radius-xs) !important;
}

.aside .menu .menu-sub .menu-item .menu-link .menu-title {
    color: var(--pe-sidebar-text) !important;
    font-size: 0.875rem !important;
}

.aside .menu .menu-sub .menu-item .menu-link:hover .menu-title,
.aside .menu .menu-sub .menu-item .menu-link.active .menu-title {
    color: var(--pe-sidebar-text-active) !important;
}

.aside .menu .menu-sub .menu-item .menu-link .menu-bullet .bullet {
    background-color: var(--pe-sidebar-icon) !important;
}

.aside .menu .menu-sub .menu-item .menu-link.active .menu-bullet .bullet,
.aside .menu .menu-sub .menu-item .menu-link:hover .menu-bullet .bullet {
    background-color: var(--pe-sidebar-icon-active) !important;
}

.aside .menu .menu-item .menu-link .menu-arrow {
    color: var(--pe-sidebar-icon) !important;
}

/* ---- Sidebar Footer ---- */
.aside-footer {
    border-top: 1px solid var(--pe-sidebar-divider) !important;
    padding: 12px 16px 8px !important;
}

.aside-footer .text-gray-800,
.aside-footer a.text-gray-800 {
    color: var(--pe-sidebar-footer-text) !important;
}

.aside-footer .text-muted {
    color: var(--pe-sidebar-footer-muted) !important;
}

.aside-footer .symbol-label,
.aside-footer .symbol img {
    border: 2px solid var(--pe-sidebar-divider) !important;
    border-radius: 50%;
}

/* Fix: Gear icon / Settings icon in sidebar footer – MUST be visible */
.aside-footer .btn,
.aside-footer .btn-sm,
.aside-footer .btn-icon,
.aside-footer .btn-active-color-primary {
    color: var(--pe-sidebar-icon) !important;
}

.aside-footer .btn:hover,
.aside-footer .btn-sm:hover,
.aside-footer .btn-icon:hover,
.aside-footer .btn-active-color-primary:hover {
    color: var(--pe-primary) !important;
    background: var(--pe-primary-soft) !important;
    border-radius: 8px;
}

/* Fix: SVG/KTIcon icons inside sidebar footer – visible always */
.aside-footer .svg-icon,
.aside-footer .svg-icon svg,
.aside-footer i,
.aside-footer [class*="ki-"],
.aside-footer .ki-outline,
.aside-footer .ki-duotone,
.aside-footer .ki-solid {
    color: var(--pe-sidebar-icon) !important;
}

.aside-footer .btn:hover .svg-icon,
.aside-footer .btn:hover .svg-icon svg,
.aside-footer .btn:hover i,
.aside-footer .btn:hover [class*="ki-"],
.aside-footer .btn:hover .ki-outline,
.aside-footer .btn:hover .ki-duotone,
.aside-footer .btn:hover .ki-solid {
    color: var(--pe-primary) !important;
}

/* Fix: UserMenu dropdown from sidebar footer – proper z-index */
.aside-footer .menu-sub-dropdown,
.aside-footer .menu-sub.menu-sub-dropdown {
    z-index: 1070 !important;
    background: var(--pe-card-bg) !important;
    border: 1px solid var(--pe-border-color) !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12) !important;
}

/* Sidebar scrollbar */
.aside .hover-scroll-overlay-y::-webkit-scrollbar {
    width: 3px;
}

.aside .hover-scroll-overlay-y::-webkit-scrollbar-track {
    background: transparent;
}

.aside .hover-scroll-overlay-y::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 4px;
}

/* -----------------------------------------------
   HEADER – Glass effect, icons always visible
   ----------------------------------------------- */
.header {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) !important;
    z-index: 100 !important;
    overflow: visible !important;
}

/* Fix: all header overflow ancestors to not clip dropdowns */
.header *,
.header .d-flex,
.header #kt_header_container,
.header #kt_header_nav {
    overflow: visible !important;
}

/* Fix: Header icon buttons – ALL icons visible */
.header .btn-icon,
.header .btn-color-gray-700,
.header .btn-active-color-primary {
    color: var(--pe-text-secondary) !important;
}

.header .btn-icon:hover,
.header .btn-color-gray-700:hover,
.header .btn-active-color-primary:hover {
    color: var(--pe-primary) !important;
    background: var(--pe-primary-soft) !important;
    border-radius: var(--pe-radius-sm) !important;
}

/* Fix: SVG icons in header */
.header .svg-icon,
.header .svg-icon svg {
    color: var(--pe-text-secondary) !important;
}

.header .btn:hover .svg-icon,
.header .btn:hover .svg-icon svg {
    color: var(--pe-primary) !important;
}

/* Fix: Keenicons in header (ki-outline, ki-duotone, ki-solid) */
.header [class*="ki-"],
.header .ki-outline,
.header .ki-duotone,
.header .ki-solid {
    color: var(--pe-text-secondary) !important;
    font-size: 1.4rem;
}

.header .btn:hover [class*="ki-"],
.header .btn:hover .ki-outline,
.header .btn:hover .ki-duotone,
.header .btn:hover .ki-solid {
    color: var(--pe-primary) !important;
}

/* -----------------------------------------------
   FIX: Dropdowns NOT cut off
   ----------------------------------------------- */
.header .menu-sub-dropdown,
.header .dropdown-menu,
.menu-sub-dropdown[data-kt-element="theme-mode-menu"] {
    z-index: 1060 !important;
    overflow: visible !important;
}

.header,
.header-fixed .header {
    overflow: visible !important;
}

/* -----------------------------------------------
   CARDS – Premium glassmorphism-ready
   ----------------------------------------------- */
.card {
    background: var(--pe-card-bg);
    border: 1px solid var(--pe-card-border);
    border-radius: var(--pe-radius-lg) !important;
    box-shadow: var(--pe-card-shadow);
    transition: var(--pe-transition);
}

.card:hover {
    box-shadow: var(--pe-card-shadow-hover);
}

/* Colorful stat card icon bubbles */
.card .symbol.symbol-circle {
    transition: var(--pe-transition);
}

.card:hover .symbol.symbol-circle {
    transform: scale(1.05);
}

/* Card header gradient accent line */
.card-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 0;
}

/* Stat cards with inline gradient */
.card.stat-card,
.card[style*="linear-gradient"] {
    border: none !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}

.card[style*="linear-gradient"]:hover {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18) !important;
    transform: translateY(-4px);
}

.card-header {
    border-bottom: 1px solid var(--pe-border-color) !important;
    background: transparent !important;
}

.card-title .card-label {
    font-weight: 700 !important;
    font-size: 1rem !important;
}

/* Admin cards */
.admin-card {
    transition: var(--pe-transition) !important;
}

.admin-card:hover {
    transform: translateY(-2px);
}

/* -----------------------------------------------
   BUTTONS – Vibrant, with subtle shadows
   ----------------------------------------------- */
.btn-primary,
.btn.btn-primary {
    background: var(--pe-gradient) !important;
    border: none !important;
    border-radius: var(--pe-radius) !important;
    box-shadow: 0 4px 15px rgba(var(--pe-primary-rgb), 0.3) !important;
    font-weight: 600 !important;
    transition: var(--pe-transition) !important;
    position: relative;
    overflow: hidden;
}

.btn-primary:hover,
.btn.btn-primary:hover {
    box-shadow: 0 8px 25px rgba(var(--pe-primary-rgb), 0.4) !important;
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.btn-primary:active,
.btn.btn-primary:active {
    transform: translateY(0);
    filter: brightness(0.95);
}

.btn-light-primary {
    background-color: var(--pe-primary-soft) !important;
    color: var(--pe-primary) !important;
    border: none !important;
}

.btn-light-primary:hover {
    background-color: rgba(var(--pe-primary-rgb), 0.14) !important;
    transform: translateY(-1px);
}

.btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
}

.btn-success:hover {
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4) !important;
    transform: translateY(-1px);
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3) !important;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important;
}

/* -----------------------------------------------
   BADGES – Pill style
   ----------------------------------------------- */
.badge {
    font-weight: 600 !important;
    border-radius: 100px !important;
}

.badge-light-primary {
    background: rgba(14, 165, 233, 0.1) !important;
    color: #0ea5e9 !important;
}

.badge-light-success {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
}

.badge-light-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    color: #f59e0b !important;
}

.badge-light-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
}

.badge-light-info {
    background: rgba(99, 102, 241, 0.1) !important;
    color: #6366f1 !important;
}

/* -----------------------------------------------
   TABLES
   ----------------------------------------------- */
.table thead th {
    background: #f9fafb !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--pe-text-secondary) !important;
    border-bottom: 2px solid var(--pe-border-color) !important;
    padding: 14px 16px !important;
}

.table tbody tr {
    transition: var(--pe-transition-fast) !important;
}

.table tbody tr:hover {
    background: rgba(var(--pe-primary-rgb), 0.02) !important;
}

.table tbody td {
    padding: 14px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
    color: var(--pe-text-primary) !important;
}

/* -----------------------------------------------
   FORMS
   ----------------------------------------------- */
.form-control,
.form-select {
    border-radius: var(--pe-radius) !important;
    border: 1.5px solid var(--pe-border-color) !important;
    padding: 10px 16px !important;
    font-family: var(--pe-font) !important;
    color: var(--pe-text-primary) !important;
    transition: var(--pe-transition-fast) !important;
    background: #fff !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--pe-primary) !important;
    box-shadow: 0 0 0 4px rgba(var(--pe-primary-rgb), 0.08) !important;
}

.form-control.form-control-solid {
    background: #f8fafc !important;
    border: 1.5px solid transparent !important;
}

.form-control.form-control-solid:focus {
    background: #ffffff !important;
    border-color: var(--pe-primary) !important;
}

/* -----------------------------------------------
   MODALS
   ----------------------------------------------- */
.modal-content {
    border-radius: var(--pe-radius-2xl) !important;
    border: none !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15) !important;
}

.modal-header {
    border-bottom: 1px solid var(--pe-border-color) !important;
}

.modal-footer {
    border-top: 1px solid var(--pe-border-color) !important;
}

.modal-backdrop.show {
    opacity: 0.4 !important;
}

/* -----------------------------------------------
   PROGRESS BARS
   ----------------------------------------------- */
.progress {
    border-radius: 100px !important;
    background: #e8ecf1 !important;
}

.progress-bar {
    border-radius: 100px !important;
}

/* -----------------------------------------------
   ALERTS
   ----------------------------------------------- */
.alert {
    border-radius: var(--pe-radius) !important;
    font-family: var(--pe-font) !important;
}

/* -----------------------------------------------
   PAGINATION
   ----------------------------------------------- */
.page-link {
    border-radius: var(--pe-radius-sm) !important;
    margin: 0 2px !important;
    font-weight: 500 !important;
    transition: var(--pe-transition-fast) !important;
}

.page-item.active .page-link {
    background: var(--pe-gradient) !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px rgba(var(--pe-primary-rgb), 0.25) !important;
}

/* -----------------------------------------------
   FOOTER
   ----------------------------------------------- */
.footer {
    background: transparent !important;
    border-top: 1px solid var(--pe-border-color) !important;
}

.footer a {
    color: var(--pe-primary) !important;
    font-weight: 500;
}

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

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

::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* -----------------------------------------------
   DROPDOWN MENUS
   ----------------------------------------------- */
.dropdown-menu,
.menu-sub-dropdown {
    border-radius: var(--pe-radius) !important;
    border: 1px solid var(--pe-border-color) !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12) !important;
    padding: 8px !important;
    z-index: 1060 !important;
    animation: pe-dropdown-in 0.2s ease !important;
}

@keyframes pe-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

.dropdown-item,
.menu-sub-dropdown .menu-item .menu-link {
    border-radius: var(--pe-radius-xs) !important;
    transition: var(--pe-transition-fast) !important;
    padding: 8px 12px !important;
}

.dropdown-item:hover,
.menu-sub-dropdown .menu-item .menu-link:hover {
    background: var(--pe-primary-soft) !important;
    color: var(--pe-primary) !important;
}

/* -----------------------------------------------
   HOVER EFFECTS
   ----------------------------------------------- */
.hover-elevate-up {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease !important;
}

.hover-elevate-up:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1) !important;
}

/* Quick link items */
.quick-link-item {
    transition: var(--pe-transition) !important;
    border: 1px solid transparent;
}

.quick-link-item:hover {
    background: var(--pe-primary-soft) !important;
    border-color: rgba(var(--pe-primary-rgb), 0.1) !important;
    transform: translateX(4px);
}

/* -----------------------------------------------
   SWEET ALERT
   ----------------------------------------------- */
.swal2-popup {
    border-radius: var(--pe-radius-2xl) !important;
    font-family: var(--pe-font) !important;
}

/* -----------------------------------------------
   CHECKBOX & SWITCH
   ----------------------------------------------- */
.form-check-input:checked {
    background-color: var(--pe-primary) !important;
    border-color: var(--pe-primary) !important;
}

/* -----------------------------------------------
   SEPARATOR, BREADCRUMBS, TABS
   ----------------------------------------------- */
.separator {
    border-color: var(--pe-border-color) !important;
}

.breadcrumb-item a {
    color: var(--pe-primary) !important;
}

.breadcrumb-item.active {
    color: var(--pe-text-secondary) !important;
}

.nav-tabs .nav-link.active {
    color: var(--pe-primary) !important;
    border-color: var(--pe-primary) !important;
}

/* -----------------------------------------------
   SELECTION
   ----------------------------------------------- */
::selection {
    background: rgba(var(--pe-primary-rgb), 0.15);
    color: #0c4a6e;
}

/* -----------------------------------------------
   PAGE TITLE – with gradient text and accent
   ----------------------------------------------- */
.fs-2hx {
    font-weight: 800 !important;
    font-family: var(--pe-font) !important;
    letter-spacing: -0.025em;
    color: var(--pe-text-primary) !important;
    background: var(--pe-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Colorful breadcrumb accent */
.breadcrumb-item+.breadcrumb-item::before {
    color: var(--pe-primary) !important;
}

/* Header page title area colored accent */
.page-heading .page-title {
    position: relative;
}

/* -----------------------------------------------
   STAGGER ANIMATION – smoother
   ----------------------------------------------- */
@keyframes pe-fade-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

.row>[class*="col-"]:nth-child(1) {
    animation: pe-fade-in 0.4s ease both 0.05s;
}

.row>[class*="col-"]:nth-child(2) {
    animation: pe-fade-in 0.4s ease both 0.1s;
}

.row>[class*="col-"]:nth-child(3) {
    animation: pe-fade-in 0.4s ease both 0.15s;
}

.row>[class*="col-"]:nth-child(4) {
    animation: pe-fade-in 0.4s ease both 0.2s;
}

/* ============================================================
   DARK MODE 🌙
   ============================================================ */
[data-bs-theme="dark"] {
    --pe-page-bg: #0c1222;
    --pe-card-bg: #162032;
    --pe-card-border: rgba(255, 255, 255, 0.04);
    --pe-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --pe-card-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.35);
    --pe-text-primary: #f1f5f9;
    --pe-text-secondary: #94a3b8;
    --pe-text-muted: #64748b;
    --pe-border-color: rgba(255, 255, 255, 0.06);
    --pe-primary-soft: rgba(14, 165, 233, 0.12);

    /* Dark sidebar */
    --pe-sidebar-bg: #0a0f1c;
    --pe-sidebar-border: rgba(255, 255, 255, 0.04);
    --pe-sidebar-text: rgba(255, 255, 255, 0.5);
    --pe-sidebar-text-hover: rgba(255, 255, 255, 0.85);
    --pe-sidebar-text-active: #38bdf8;
    --pe-sidebar-icon: rgba(255, 255, 255, 0.3);
    --pe-sidebar-icon-hover: rgba(255, 255, 255, 0.55);
    --pe-sidebar-icon-active: #38bdf8;
    --pe-sidebar-active-bg: rgba(14, 165, 233, 0.1);
    --pe-sidebar-hover-bg: rgba(255, 255, 255, 0.03);
    --pe-sidebar-divider: rgba(255, 255, 255, 0.04);
    --pe-sidebar-footer-text: rgba(255, 255, 255, 0.8);
    --pe-sidebar-footer-muted: rgba(255, 255, 255, 0.35);
}

[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .page {
    background-color: var(--pe-page-bg) !important;
    color: var(--pe-text-primary);
}

[data-bs-theme="dark"] .card {
    background: var(--pe-card-bg);
    border-color: var(--pe-card-border);
}

[data-bs-theme="dark"] .aside {
    background: var(--pe-sidebar-bg) !important;
    border-right-color: var(--pe-sidebar-border) !important;
}

[data-bs-theme="dark"] .header {
    background: rgba(12, 18, 34, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

/* Dark mode header icon colors */
[data-bs-theme="dark"] .header .btn-icon,
[data-bs-theme="dark"] .header .btn-color-gray-700,
[data-bs-theme="dark"] .header .btn-active-color-primary,
[data-bs-theme="dark"] .header .svg-icon,
[data-bs-theme="dark"] .header .svg-icon svg,
[data-bs-theme="dark"] .header [class*="ki-"] {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .header .btn:hover .svg-icon,
[data-bs-theme="dark"] .header .btn:hover .svg-icon svg,
[data-bs-theme="dark"] .header .btn:hover [class*="ki-"],
[data-bs-theme="dark"] .header .btn-icon:hover,
[data-bs-theme="dark"] .header .btn-color-gray-700:hover,
[data-bs-theme="dark"] .header .btn-active-color-primary:hover {
    color: var(--pe-primary-light) !important;
}

/* Dark mode sidebar footer icons */
[data-bs-theme="dark"] .aside-footer .svg-icon,
[data-bs-theme="dark"] .aside-footer .svg-icon svg,
[data-bs-theme="dark"] .aside-footer i,
[data-bs-theme="dark"] .aside-footer [class*="ki-"] {
    color: rgba(255, 255, 255, 0.35) !important;
}

[data-bs-theme="dark"] .aside-footer .btn:hover .svg-icon,
[data-bs-theme="dark"] .aside-footer .btn:hover .svg-icon svg,
[data-bs-theme="dark"] .aside-footer .btn:hover i,
[data-bs-theme="dark"] .aside-footer .btn:hover [class*="ki-"] {
    color: #38bdf8 !important;
}

/* Dark sidebar scrollbar */
[data-bs-theme="dark"] .aside .hover-scroll-overlay-y::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.06);
}

/* Dark text overrides */
[data-bs-theme="dark"] .text-gray-900 {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .text-gray-800 {
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .text-gray-700 {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .text-gray-600 {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .text-gray-500 {
    color: #64748b !important;
}

/* Dark tables */
[data-bs-theme="dark"] .table thead th {
    background: rgba(255, 255, 255, 0.02) !important;
    color: #94a3b8 !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .table tbody td {
    border-bottom-color: rgba(255, 255, 255, 0.03) !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Dark forms */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--pe-primary) !important;
}

[data-bs-theme="dark"] .form-control.form-control-solid {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Dark modal */
[data-bs-theme="dark"] .modal-content {
    background: #162032 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
}

/* Dark dropdowns */
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .menu-sub-dropdown {
    background: #1a2740 !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5) !important;
}

/* Dark badges */
[data-bs-theme="dark"] .badge-light-primary {
    background: rgba(14, 165, 233, 0.15) !important;
    color: #38bdf8 !important;
}

[data-bs-theme="dark"] .badge-light-success {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
}

[data-bs-theme="dark"] .badge-light-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
}

[data-bs-theme="dark"] .badge-light-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

[data-bs-theme="dark"] .badge-light-info {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
}

/* Dark misc */
[data-bs-theme="dark"] .progress {
    background: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .separator {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .border-bottom-dashed {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .footer {
    border-top-color: rgba(255, 255, 255, 0.03) !important;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] ::selection {
    background: rgba(var(--pe-primary-rgb), 0.3);
    color: #e0f2fe;
}

/* Dark mode gradient title */
[data-bs-theme="dark"] .fs-2hx {
    background: linear-gradient(135deg, #38bdf8 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
    .aside {
        border-radius: 0 !important;
        border-right: none !important;
        box-shadow: 5px 0 30px rgba(0, 0, 0, 0.1) !important;
    }
}

/* ============================================================
   LOGIN PAGE OVERRIDE – Full Screen Background
   ============================================================ */

/* Remove any default background from body on login */
body.app-blank {
    background: transparent !important;
    background-image: none !important;
}

/* Inner wrapper inside auth-card – remove duplicate styling */
body.app-blank .auth-card .w-lg-500px,
body.app-blank .auth-card form {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    max-width: 100% !important;
    padding: 2.5rem !important;
}