:root {
    --orange-50: #fff7ed; --orange-100: #ffedd5; --orange-200: #fed7aa;
    --orange-300: #fdba74; --orange-400: #fb923c; --orange-500: #f97316;
    --orange-600: #ea580c; --orange-700: #c2410c; --orange-800: #9a3412; --orange-900: #7c2d12;

    --surface: #ffffff;
    --surface-subtle: #f8fafc;
    --surface-hover: #f1f5f9;
    --border: #e2e8f0;
    --border-light: #f1f5f9;

    --text: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.06), 0 2px 4px -2px rgba(0,0,0,.08);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.08), 0 8px 10px -6px rgba(0,0,0,.04);

    --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.25rem;

    --gradient-primary: linear-gradient(135deg, #f97316, #ea580c);
    --gradient-primary-subtle: linear-gradient(135deg, #fff7ed, #ffedd5);
    --gradient-blue: linear-gradient(135deg, #3b82f6, #2563eb);
    --gradient-green: linear-gradient(135deg, #22c55e, #16a34a);
    --gradient-purple: linear-gradient(135deg, #a855f7, #7c3aed);
    --gradient-amber: linear-gradient(135deg, #f59e0b, #d97706);
    --gradient-rose: linear-gradient(135deg, #f43f5e, #e11d48);
    --gradient-teal: linear-gradient(135deg, #14b8a6, #0d9488);
    --gradient-slate: linear-gradient(135deg, #64748b, #475569);
    --gradient-pink: linear-gradient(135deg, #ec4899, #db2777);
    --gradient-indigo: linear-gradient(135deg, #6366f1, #4f46e5);
    --gradient-cyan: linear-gradient(135deg, #06b6d4, #0891b2);
    --gradient-lime: linear-gradient(135deg, #84cc16, #65a30d);
    --gradient-red: linear-gradient(135deg, #ef4444, #dc2626);
    --gradient-sky: linear-gradient(135deg, #38bdf8, #0284c7);
    --gradient-violet: linear-gradient(135deg, #8b5cf6, #6d28d9);
    --gradient-emerald: linear-gradient(135deg, #34d399, #059669);
}

@keyframes gradientShift { 0% { background-position:0% 50%; } 50% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
@keyframes float { 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-20px) rotate(3deg); } }
@keyframes floatSlow { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-12px); } }
@keyframes pulseGlow { 0%,100% { box-shadow:0 0 20px rgba(249,115,22,.15); } 50% { box-shadow:0 0 40px rgba(249,115,22,.3); } }
@keyframes shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes rainbow { 0% { filter:hue-rotate(0deg); } 100% { filter:hue-rotate(360deg); } }
@keyframes flicker { 0%,100% { opacity:1; } 50% { opacity:0.85; } }
@keyframes breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.02); } }
@keyframes wiggle { 0%,100% { transform:rotate(0deg); } 25% { transform:rotate(-3deg); } 75% { transform:rotate(3deg); } }
@keyframes slideInLeft { from { opacity:0; transform:translateX(-20px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideInRight { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
@keyframes fadeSlideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes scaleIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
@keyframes bgPulse { 0%,100% { opacity:.04; } 50% { opacity:.08; } }

html { scroll-behavior: smooth; }

body {
    background-color: var(--surface-subtle);
    background-image:
        radial-gradient(at 20% 50%, rgba(249,115,22,.04) 0px, transparent 50%),
        radial-gradient(at 80% 20%, rgba(59,130,246,.04) 0px, transparent 50%),
        radial-gradient(at 40% 80%, rgba(168,85,247,.03) 0px, transparent 50%),
        radial-gradient(at 90% 70%, rgba(20,184,166,.03) 0px, transparent 50%),
        radial-gradient(#e2e8f0 .5px, transparent .5px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 20px 20px;
    font-family: 'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ===== NAVBAR ===== */
.app-shell {
    height: 100vh;
    overflow: hidden;
}

.sidebar {
    width: 270px;
    min-width: 270px;
    max-width: 270px;
    border-right: none;
    box-shadow: 4px 0 30px rgba(0,0,0,.08);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1030;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #1e3a5f, #2563eb, #ea580c, #1e3a5f);
    background-size: 400% 400%;
    animation: sidebarGradient 12s ease infinite;
    will-change: background-position;
}

@keyframes sidebarGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.sidebar .sidebar-brand {
    flex-shrink: 0;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.sidebar-menu {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 1rem;
}

.sidebar-menu::-webkit-scrollbar { width: 3px; }
.sidebar-menu::-webkit-scrollbar-track { background: transparent; }
.sidebar-menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 4px; }

.sidebar .sidebar-brand .h6 { color: #fff; }
.sidebar .sidebar-brand small { color: rgba(255,255,255,.5) !important; }

.sidebar .nav-link {
    color: rgba(255,255,255,.55);
    font-weight: 500;
    padding: 0.7rem 1rem;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
    font-size: .88rem;
    margin: 0 0.4rem;
}

.sidebar .nav-link i {
    margin-right: 0.8rem;
    font-size: 1.05rem;
    width: 22px;
    text-align: center;
    color: rgba(255,255,255,.35);
    transition: all 0.3s ease;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.collapsed:hover {
    background: linear-gradient(135deg, rgba(234,88,12,.55), rgba(194,65,12,.4));
    color: #fed7aa;
    transform: translateX(4px);
}

.sidebar .nav-link:hover i {
    color: #fdba74;
    transform: scale(1.15);
}

.sidebar .nav-link.active {
    background: linear-gradient(135deg, rgba(30,58,138,.7), rgba(30,64,175,.5));
    color: #dbeafe;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(30,58,138,.35);
}

.sidebar .nav-link.active i {
    color: #bfdbfe;
    transform: scale(1.1);
}

.sidebar .nav-link[data-bs-toggle="collapse"] i.bi-caret-down-fill {
    font-size: .7rem;
    margin-right: 0;
    color: rgba(255,255,255,.3);
    transition: transform 0.2s ease;
}

.sidebar .nav-link[data-bs-toggle="collapse"][aria-expanded="true"] i.bi-caret-down-fill {
    transform: rotate(180deg);
    color: #60a5fa;
}

.sidebar .nav .collapse .nav-link {
    padding-left: 2.1rem;
    font-size: .83rem;
    border-left: 2px solid rgba(255,255,255,.06);
    margin-left: 1.2rem;
    border-radius: 0;
}

.sidebar .nav .collapse .nav-link.active {
    border-left-color: #93c5fd;
    background: transparent;
    color: #bfdbfe;
}

.main-content {
    margin-left: 270px;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.main-content {
    margin-left: 270px;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.topbar {
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: sticky;
    top: 0;
    z-index: 1020;
    border-bottom: 1px solid rgba(15,23,42,.06);
    box-shadow: 0 1px 20px rgba(0,0,0,.04);
}

.topbar .btn-outline-secondary {
    color: var(--text);
    border-color: rgba(15,23,42,.12);
    background: rgba(255,255,255,.5);
    border-radius: var(--radius-lg);
}
.topbar .btn-outline-secondary:hover {
    background: rgba(249,115,22,.1);
    border-color: #f97316;
    color: #f97316;
}

.topbar .nav-title {
    background: rgba(249,115,22,.08);
    padding: .25rem .85rem;
    border-radius: 50px;
    border: 1px solid rgba(249,115,22,.12);
    backdrop-filter: blur(4px);
}
.topbar .nav-title h2 {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    background: linear-gradient(135deg, var(--orange-500), var(--orange-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0;
    line-height: 1.4;
}
.topbar .nav-title small {
    font-size: .6rem;
    color: var(--text-muted);
    letter-spacing: .4px;
}

.topbar .clock-badge {
    background: rgba(249,115,22,.08);
    color: var(--orange-700);
    padding: .35rem .8rem;
    border-radius: 50rem;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid rgba(249,115,22,.12);
}
.topbar .clock-badge i { font-size: .7rem; margin-right: .35rem; }

.topbar .user-dropdown {
    background: linear-gradient(135deg, rgba(249,115,22,.08), rgba(234,88,12,.04));
    border: 1px solid rgba(249,115,22,.12);
    border-radius: 50rem;
    padding: .3rem .8rem .3rem .3rem;
    font-weight: 600;
    font-size: .8rem;
    color: var(--orange-700);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.topbar .user-dropdown:hover {
    background: linear-gradient(135deg, rgba(249,115,22,.15), rgba(234,88,12,.08));
    border-color: var(--orange-400);
    color: var(--orange-800);
}
.topbar .user-dropdown::after { display: none; }
.topbar .user-avatar {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    border-radius: 50rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-110%);
        transition: transform 0.3s ease;
        z-index: 1040;
        box-shadow: 4px 0 40px rgba(0,0,0,.3);
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .app-shell {
        flex-direction: column;
    }

    .main-content {
        margin-left: 0;
    }
}

.avatar { width:32px; height:32px; background:rgba(255,255,255,.2); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; color:#fff; }
.avatar-sm { width:36px; height:36px; background:rgba(255,255,255,.12); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; color:#fff; }

/* ===== CARDS ===== */
.card {
    border: none; border-radius: var(--radius-xl);
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--shadow-sm);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-xl); }

.table-card {
    border: none; border-radius: var(--radius-xl);
    overflow: hidden; box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
}
.table-card:hover { box-shadow: var(--shadow-lg); }
.table-card .card-header { background: var(--surface); border-bottom: 1px solid var(--border-light); padding: 1rem 1.25rem; }
.table-card .card-header h5 { font-weight: 700; font-size: 0.9rem; color: var(--text); margin-bottom: 0; }
.table-card .table { margin-bottom: 0; }
.table-card .table thead th {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    font-size: 0.68rem; text-transform: uppercase;
    letter-spacing: 0.6px; font-weight: 700;
    color: var(--orange-700); border-bottom: 1px solid var(--border);
    padding: 0.7rem 0.75rem;
}
.table-card .table tbody td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border-light); }
.table-card .table tbody tr:last-child td { border-bottom: none; }
.table-card .table tbody tr:hover td { background: var(--orange-50); }

.detalle-panel h2 { letter-spacing: -0.03em; }

.detalle-panel .detalle-card {
    border: 1px solid rgba(15,23,42,.08);
    background: #ffffff;
}

.detalle-panel .card-header {
    background: linear-gradient(90deg, rgba(249,115,22,.05), rgba(249,115,22,.03));
    border-bottom: 1px solid rgba(226,232,240,.85);
    padding: 1rem 1.25rem;
}

.detalle-panel .card-header h5 { font-size: 1rem; font-weight: 700; color: var(--text); }
.detalle-panel .card-header small { color: var(--text-secondary); font-size: 0.82rem; }

.detalle-panel .panel-title-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.detalle-panel .small-badge {
    font-size: 0.72rem;
    padding: 0.5rem 0.75rem;
    letter-spacing: 0.04em;
}

.detalle-panel .info-table th {
    width: 38%;
    color: var(--text-secondary);
    font-weight: 600;
    padding: 0.95rem 0 0.95rem 0;
    vertical-align: top;
}

.detalle-panel .info-table td {
    color: var(--text);
    font-weight: 700;
    padding: 0.95rem 0 0.95rem 0.75rem;
}

.detalle-panel .info-table tr + tr th,
.detalle-panel .info-table tr + tr td {
    border-top: 1px solid rgba(226,232,240,.85);
}

.detalle-panel .table-responsive {
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.detalle-panel .table-responsive .table thead th {
    background: rgba(249,115,22,.08);
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(226,232,240,.95);
}

.detalle-panel .table-responsive .table tbody td {
    border-top: 1px solid rgba(226,232,240,.9);
}

.detalle-panel .table-responsive .table tbody tr:hover td { background: rgba(249,115,22,.05); }

.table thead th { font-size:0.7rem; text-transform:uppercase; letter-spacing:.6px; font-weight:700; border-bottom:1px solid var(--border); color:var(--text-secondary); }
.table td { vertical-align: middle; }

/* ===== STAT CARDS ===== */
.stat-card {
    border: none; border-radius: var(--radius-2xl);
    overflow: hidden; position: relative;
    box-shadow: var(--shadow-md);
    transition: all 0.45s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}
.stat-card:hover {
    transform: translateY(-7px) scale(1.015);
    box-shadow: var(--shadow-xl), 0 12px 40px rgba(0,0,0,.12);
}
.stat-card:active { transform: translateY(-2px) scale(0.98); }
.stat-card .stat-icon-bg {
    position: absolute; right: -8px; bottom: -8px;
    opacity: 0.07; font-size: 7rem; line-height: 1; pointer-events: none;
    filter: drop-shadow(0 0 40px rgba(255,255,255,.08));
    transition: all 0.5s ease;
}
.stat-card:hover .stat-icon-bg {
    opacity: 0.12; transform: scale(1.08) rotate(-3deg);
}
.stat-card .stat-label {
    font-size:0.65rem; text-transform:uppercase; letter-spacing:.8px; font-weight:700;
    opacity:.75; margin-bottom:2px;
}
.stat-card .stat-value {
    font-size:2.2rem; font-weight:900; line-height:1; letter-spacing:-1px;
    text-shadow: 0 2px 15px rgba(0,0,0,.08);
    margin-bottom:6px;
}
.stat-card .stat-sub {
    font-size:0.68rem; opacity:.8; 
}
.stat-card .stat-trend {
    font-size:0.68rem; display:flex; align-items:center; gap:3px; opacity:.85;
}
.stat-card .stat-trend i { font-size:0.9rem; }
.stat-card .stat-bar {
    height:3px; border-radius:3px;
    background: rgba(255,255,255,.3);
    margin-top:10px; width:100%;
    position: relative; overflow: hidden;
}
.stat-card .stat-bar::after {
    content:''; position:absolute; top:0; left:0;
    height:100%; width:100%;
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
    background-size: 200% 100%;
    border-radius:3px; animation: shimmer 2.5s ease-in-out infinite;
}
.stat-card .stat-icon-box {
    width: 44px; height: 44px; display: flex;
    align-items: center; justify-content: center;
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(4px);
    font-size: 1.3rem; flex-shrink: 0;
    transition: all 0.4s ease;
    border: 1px solid rgba(255,255,255,.1);
}
.stat-card:hover .stat-icon-box {
    background: rgba(255,255,255,.22);
    transform: scale(1.06) rotate(-4deg);
}

.stat-card.bg-orange { background: linear-gradient(135deg, #f97316, #ea580c, #f59e0b); background-size: 200% 200%; animation: gradientShift 8s ease infinite; color:#fff; }
.stat-card.bg-blue { background: linear-gradient(135deg, #3b82f6, #2563eb, #6366f1); background-size: 200% 200%; animation: gradientShift 8s ease infinite; color:#fff; }
.stat-card.bg-teal { background: linear-gradient(135deg, #14b8a6, #0d9488, #06b6d4); background-size: 200% 200%; animation: gradientShift 8s ease infinite; color:#fff; }
.stat-card.bg-purple { background: linear-gradient(135deg, #a855f7, #7c3aed, #8b5cf6); background-size: 200% 200%; animation: gradientShift 8s ease infinite; color:#fff; }
.stat-card.bg-green { background: linear-gradient(135deg, #22c55e, #16a34a, #34d399); background-size: 200% 200%; animation: gradientShift 8s ease infinite; color:#fff; }
.stat-card.bg-rose { background: linear-gradient(135deg, #f43f5e, #e11d48, #ec4899); background-size: 200% 200%; animation: gradientShift 8s ease infinite; color:#fff; }
.stat-card.bg-amber { background: linear-gradient(135deg, #f59e0b, #d97706, #fbbf24); background-size: 200% 200%; animation: gradientShift 8s ease infinite; color:#fff; }
.stat-card.bg-slate { background: linear-gradient(135deg, #64748b, #475569, #94a3b8); background-size: 200% 200%; animation: gradientShift 8s ease infinite; color:#fff; }
.stat-card.bg-pink { background: linear-gradient(135deg, #ec4899, #db2777); background-size: 200% 200%; animation: gradientShift 8s ease infinite; color:#fff; }
.stat-card.bg-indigo { background: linear-gradient(135deg, #6366f1, #4f46e5); background-size: 200% 200%; animation: gradientShift 8s ease infinite; color:#fff; }
.stat-card.bg-cyan { background: linear-gradient(135deg, #06b6d4, #0891b2); background-size: 200% 200%; animation: gradientShift 8s ease infinite; color:#fff; }
.stat-card.bg-emerald { background: linear-gradient(135deg, #34d399, #059669); background-size: 200% 200%; animation: gradientShift 8s ease infinite; color:#fff; }

/* ===== CHART CARDS ===== */
.chart-card {
    border: none; border-radius: var(--radius-2xl);
    overflow: hidden; box-shadow: var(--shadow-sm);
    transition: all 0.4s cubic-bezier(.4,0,.2,1);
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid rgba(249,115,22,.06);
    will-change: transform;
}
.chart-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-xl); }
.chart-card .card-body { padding: 1.25rem; }
.chart-card p { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text-muted); }

/* ===== WELCOME SECTION ===== */
.welcome-section {
    background: linear-gradient(135deg, #ea580c, #f97316, #f59e0b, #f97316);
    background-size: 300% 300%;
    animation: gradientShift 8s ease infinite;
    border-radius: var(--radius-2xl);
    padding: 2rem 2.5rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(234,88,12,.25), 0 0 60px rgba(249,115,22,.15);
    border: 1px solid rgba(255,255,255,.1);
}
.welcome-section::before {
    content: ''; position: absolute; top: -60%; right: -15%;
    width: 400px; height: 400px;
    background: rgba(255,255,255,.08); border-radius: 50%;
    animation: floatSlow 8s ease-in-out infinite;
    filter: blur(40px);
}
.welcome-section::after {
    content: ''; position: absolute; bottom: -35%; right: 15%;
    width: 250px; height: 250px;
    background: rgba(255,255,255,.06); border-radius: 50%;
    animation: floatSlow 10s ease-in-out infinite 2s;
    filter: blur(35px);
}
.welcome-section .welcome-icon {
    font-size: 2.5rem; opacity: 0.95;
    animation: float 6s ease-in-out infinite;
}
.welcome-section h2 { font-weight: 700; font-size: 1.6rem; letter-spacing: -0.5px; margin-bottom: 0; }
.welcome-section p { opacity: 0.88; font-size: 0.95rem; margin-bottom: 0; }
.welcome-section .badge {
    font-weight: 600; background: rgba(255,255,255,.15);
    backdrop-filter: blur(12px); border: 1.5px solid rgba(255,255,255,.2);
    animation: breathe 3s ease-in-out infinite;
}
.welcome-section .welcome-shape {
    position: absolute; border-radius: 50%;
    pointer-events: none;
}

/* ===== BUTTONS ===== */
.btn {
    border-radius: var(--radius-md);
    font-weight: 600; font-size: 0.85rem;
    padding: 0.5rem 1rem;
    transition: all 0.25s cubic-bezier(.4,0,.2,1);
    position: relative; overflow: hidden; letter-spacing: 0.2px;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.btn:active { transform: translateY(0) scale(0.97); }
.btn-sm { padding: 0.35rem 0.65rem; font-size: 0.78rem; border-radius: var(--radius-sm); }

.btn-primary { background: linear-gradient(135deg, #f97316, #ea580c) !important; border: none; background-size: 200% 200%; animation: gradientShift 4s ease infinite; }
.btn-primary:hover { background: linear-gradient(135deg, #f97316, #ea580c) !important; }

.btn-success { background: linear-gradient(135deg, #22c55e, #16a34a) !important; border: none; background-size: 200% 200%; }
.btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626) !important; border: none; background-size: 200% 200%; }
.btn-warning { background: linear-gradient(135deg, #fbbf24, #f59e0b) !important; border: none; color: #1c1917; }
.btn-info { background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important; border: none; color: #fff; }
.btn-secondary { background: linear-gradient(135deg, #64748b, #475569) !important; border: none; color: #fff; }
.btn-dark { background: #1e293b; border: none; }

.btn-outline-primary {
    border: 2px solid var(--orange-400); color: var(--orange-600);
}
.btn-outline-primary:hover { background: linear-gradient(135deg, #f97316, #ea580c); border-color: transparent; color: #fff; }
.btn-outline-success { border: 2px solid #4ade80; color: #16a34a; }
.btn-outline-success:hover { background: linear-gradient(135deg, #22c55e, #16a34a); border-color: transparent; color: #fff; }
.btn-outline-info { border: 2px solid #38bdf8; color: #0284c7; }
.btn-outline-info:hover { background: linear-gradient(135deg, #38bdf8, #0ea5e9); border-color: transparent; color: #fff; }
.btn-outline-danger { border: 2px solid #f87171; color: #dc2626; }
.btn-outline-danger:hover { background: linear-gradient(135deg, #ef4444, #dc2626); border-color: transparent; color: #fff; }
.btn-outline-warning { border: 2px solid #fbbf24; color: #d97706; }
.btn-outline-warning:hover { background: linear-gradient(135deg, #fbbf24, #f59e0b); border-color: transparent; color: #1c1917; }
.btn-outline-secondary { border: 2px solid var(--border); color: var(--text-secondary); }
.btn-outline-secondary:hover { background: var(--surface-hover); border-color: var(--border); color: var(--text); }

/* ===== FORMS ===== */
.form-control, .form-select {
    border-radius: var(--radius-md);
    border: 2px solid var(--border);
    padding: 0.55rem 0.85rem;
    font-size: 0.875rem;
    transition: all 0.25s ease;
    background: var(--surface);
}
.form-control:focus, .form-select:focus {
    border-color: var(--orange-400);
    box-shadow: 0 0 0 4px rgba(249,115,22,.1);
    outline: none;
    transform: translateY(-1px);
}
.form-control::placeholder { color: var(--text-muted); font-size: 0.85rem; }

.form-label { font-size:0.8rem; font-weight:600; color:var(--text-secondary); margin-bottom:.35rem; letter-spacing:.2px; }
.input-group .input-group-text { border:2px solid var(--border); background:var(--surface-subtle); color:var(--text-muted); font-size:.875rem; }

/* ===== BADGES ===== */
.badge {
    font-weight: 600; letter-spacing: 0.3px;
    padding: 0.3em 0.7em; border-radius: 100px;
    font-size: 0.75rem; transition: all 0.2s ease;
}
.badge:hover { filter: brightness(1.1); transform: scale(1.05); }

/* ===== PAGINATION ===== */
.pagination .page-link {
    border-radius: var(--radius-md) !important;
    margin: 0 2px; border: none;
    color: var(--orange-600); font-weight: 600;
    font-size: 0.8rem; padding: 0.4rem 0.75rem;
    transition: all 0.2s ease;
}
.pagination .page-item.active .page-link { background: linear-gradient(135deg, #f97316, #ea580c); color:#fff; }
.pagination .page-item.disabled .page-link { background: transparent; color: var(--text-muted); }
.pagination .page-link:hover { background: var(--orange-50); color: var(--orange-700); transform: translateY(-1px); }
.page-link { cursor: pointer; }

/* ===== ALERTS ===== */
.alert { border:none; border-radius:var(--radius-lg); padding:.85rem 1.15rem; font-size:.85rem; }
.alert-success { background:#f0fdf4; color:#166534; border-left:4px solid #22c55e; }
.alert-danger { background:#fef2f2; color:#991b1b; border-left:4px solid #ef4444; }
.alert-dismissible .btn-close { font-size: .75rem; }

.card-header { border-bottom: 1px solid var(--border-light); }
.bg-primary { background: linear-gradient(135deg, #f97316, #ea580c) !important; }
.table-light { background: linear-gradient(135deg, #fff7ed, #ffedd5) !important; }
.thead-primary { background: linear-gradient(135deg, #f97316, #ea580c) !important; color: #fff !important; }

a { color:var(--orange-600); transition:color .15s ease; text-decoration:none; }
a:hover { color:var(--orange-700); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--orange-300), var(--orange-400)); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--orange-400), var(--orange-500)); }

/* ===== ANIMATIONS ===== */
.animate-in { animation: fadeSlideUp .4s cubic-bezier(.4,0,.2,1) forwards; }
.animate-in-delay-1 { animation-delay: .08s; }
.animate-in-delay-2 { animation-delay: .16s; }
.animate-in-delay-3 { animation-delay: .24s; }
.animate-in-delay-4 { animation-delay: .32s; }

.animate-slide-left { animation: slideInLeft .5s cubic-bezier(.4,0,.2,1) forwards; }
.animate-slide-right { animation: slideInRight .5s cubic-bezier(.4,0,.2,1) forwards; }

/* ===== SECTION TITLE ===== */
.section-title {
    font-size: 1.1rem; font-weight: 700; 
    letter-spacing: -0.3px; color: var(--text); margin-bottom: 1.5rem;
    display: flex; align-items: center; gap: 0.8rem;
    position: relative; padding-bottom: 0.5rem;
}
.section-title::after {
    content: ''; flex: 1; height: 3px;
    background: linear-gradient(90deg, var(--orange-300), var(--orange-500), var(--purple-500, #a855f7), transparent);
    background-size: 200% 200%;
    animation: gradientShift 4s ease infinite;
    border-radius: 2px;
}
h2.fw-bold { font-size: 1.35rem; letter-spacing: -.3px; color: var(--text); }
h2.fw-bold i { color: var(--orange-500); }
.text-muted { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-secondary) !important; }

/* ===== MODALS ===== */
.modal-content {
    border: none; border-radius: var(--radius-2xl);
    box-shadow: 0 25px 60px -12px rgba(0,0,0,.3);
}
.modal-header { border-radius: var(--radius-2xl) var(--radius-2xl) 0 0 !important; padding: 1.1rem 1.25rem; }
.modal-header .modal-title { font-weight: 700; font-size: 1rem; }
.modal-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--border-light); }
.modal-body { padding: 1.25rem; }

.modal.fade .modal-dialog {
    transform: scale(0.9) translateY(30px);
    transition: transform 0.3s cubic-bezier(.4,0,.2,1), opacity 0.25s ease;
}
.modal.show .modal-dialog { transform: scale(1) translateY(0); }
.modal-backdrop.show { opacity: .6; }

.bg-white.bg-opacity-20 { backdrop-filter: blur(4px); }
.dropdown-header { font-size:.8rem; padding:.5rem .85rem; }
hr.dropdown-divider { border-color:rgba(255,255,255,.08); margin:.3rem 0; }
footer { font-size:.75rem; color:var(--text-muted); }

/* ===== REPORT CARDS ===== */
.report-card {
    border: none; border-radius: var(--radius-2xl);
    overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,.08);
    transition: all 0.5s cubic-bezier(.4,0,.2,1);
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,.04);
    will-change: transform;
}
}
.report-card:hover { 
    transform: translateY(-8px) scale(1.01); 
    box-shadow: 0 20px 50px rgba(0,0,0,.12);
}
.report-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, #f97316, #ea580c, #f59e0b, #3b82f6, #a855f7);
    background-size: 300% 300%;
    animation: gradientShift 4s ease infinite;
    opacity: 0; transition: opacity 0.4s ease;
}
.report-card:hover::before { opacity: 1; }
.report-card .report-icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
    transition: all 0.4s ease;
}
.report-card:hover .report-icon { transform: scale(1.1) rotate(-5deg); }
.report-card .card-body { padding: 1rem 1.25rem; align-items: center; gap: 1rem; }
.report-card h5 { font-weight: 700; font-size: .9rem; margin-bottom: .15rem; color: var(--text); }
.report-card p { font-size: .78rem; color: var(--text-muted); margin-bottom: 0; line-height: 1.4; }

/* ===== REPORT STATS ===== */
.report-stat {
    border: none; border-radius: var(--radius-2xl);
    overflow: hidden; position: relative;
    transition: all 0.5s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 4px 15px rgba(0,0,0,.08);
}
.report-stat:hover { 
    transform: translateY(-8px) scale(1.025); 
    box-shadow: 0 20px 50px rgba(0,0,0,.15);
}
.report-stat:active { transform: translateY(-3px) scale(0.98); }
.report-stat .card-body { padding: .85rem 1.1rem; }
.report-stat .report-stat-value {
    font-size: 1.7rem; font-weight: 900; line-height: 1;
    letter-spacing: -1px;
}
.report-stat .report-stat-label {
    font-size: .6rem; text-transform: uppercase; letter-spacing: .7px;
    font-weight: 700; opacity: .8; line-height: 1.2;
}

/* ===== DROPDOWNS ===== */
.dropdown-menu {
    border: none; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); border: 1px solid var(--border-light);
    padding: 0.4rem;
}
.dropdown-item { border-radius:var(--radius-md); padding:.45rem .85rem; font-size:.85rem; transition:all .15s ease; }
.dropdown-item:hover { background:var(--orange-50); }
.dropdown-item:active { background:var(--orange-100); color:var(--orange-700); }

.nav-tabs .nav-link { border:none; border-radius:var(--radius-md); padding:.5rem 1rem; font-weight:600; font-size:.85rem; color:var(--text-secondary); transition:all .2s ease; }
.nav-tabs .nav-link:hover { background:var(--orange-50); color:var(--orange-600); }
.nav-tabs .nav-link.active { background: linear-gradient(135deg, #f97316, #ea580c); color:#fff; }

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label { color: var(--orange-600); }

/* ===== BACKGROUND SOFT ===== */
.bg-soft-primary { background: var(--orange-50); }
.bg-soft-blue { background: #eff6ff; }
.bg-soft-green { background: #f0fdf4; }
.bg-soft-amber { background: #fffbeb; }
.bg-soft-purple { background: #faf5ff; }
.bg-soft-pink { background: #fdf2f8; }
.bg-soft-indigo { background: #eef2ff; }
.bg-soft-cyan { background: #ecfeff; }
.bg-soft-rose { background: #fff1f2; }

.text-gradient { background:linear-gradient(135deg,#f97316,#ea580c,#f59e0b); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; background-size:200% 200%; animation:gradientShift 4s ease infinite; }

progress { border-radius:100px; height:8px; overflow:hidden; }
progress::-webkit-progress-bar { background:var(--border); border-radius:100px; }
progress::-webkit-progress-value { background:linear-gradient(90deg,#f97316,#ea580c); border-radius:100px; }
progress::-moz-progress-bar { background:linear-gradient(90deg,#f97316,#ea580c); border-radius:100px; }

/* ===== GRADIENT UTILITIES ===== */
.bg-gradient-orange { background: linear-gradient(135deg, #f97316, #ea580c) !important; color:#fff; }
.bg-gradient-blue { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; color:#fff; }
.bg-gradient-green { background: linear-gradient(135deg, #22c55e, #16a34a) !important; color:#fff; }
.bg-gradient-teal { background: linear-gradient(135deg, #14b8a6, #0d9488) !important; color:#fff; }
.bg-gradient-amber { background: linear-gradient(135deg, #f59e0b, #d97706) !important; color:#fff; }
.bg-gradient-purple { background: linear-gradient(135deg, #a855f7, #7c3aed) !important; color:#fff; }
.bg-gradient-pink { background: linear-gradient(135deg, #ec4899, #db2777) !important; color:#fff; }
.bg-gradient-indigo { background: linear-gradient(135deg, #6366f1, #4f46e5) !important; color:#fff; }
.bg-gradient-cyan { background: linear-gradient(135deg, #06b6d4, #0891b2) !important; color:#fff; }
.bg-gradient-lime { background: linear-gradient(135deg, #84cc16, #65a30d) !important; color:#fff; }
.bg-gradient-emerald { background: linear-gradient(135deg, #34d399, #059669) !important; color:#fff; }
.bg-gradient-violet { background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important; color:#fff; }
.bg-gradient-sky { background: linear-gradient(135deg, #38bdf8, #0284c7) !important; color:#fff; }
.bg-gradient-rose { background: linear-gradient(135deg, #f43f5e, #e11d48) !important; color:#fff; }

.text-orange-500 { color: var(--orange-500) !important; }
.text-purple-600 { color: #7c3aed !important; }
.report-icon-dark { background: #1e293b !important; color: #fff !important; }

.modal-header-orange { background: linear-gradient(135deg, #f97316, #ea580c) !important; color: #fff; }
.modal-header-blue { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; color: #fff; }
.modal-header-green { background: linear-gradient(135deg, #22c55e, #16a34a) !important; color: #fff; }
.modal-header-purple { background: linear-gradient(135deg, #a855f7, #7c3aed) !important; color: #fff; }

.btn-orange { background: linear-gradient(135deg, #f97316, #ea580c) !important; color: #fff; border: none; }
.btn-orange:hover { background: linear-gradient(135deg, #f97316, #ea580c) !important; color: #fff; opacity: 0.95; }
.btn-blue { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; color: #fff; border: none; }
.btn-blue:hover { background: linear-gradient(135deg, #3b82f6, #2563eb) !important; color: #fff; opacity: 0.95; }
.btn-purple { background: linear-gradient(135deg, #a855f7, #7c3aed) !important; color: #fff; border: none; }
.btn-purple:hover { background: linear-gradient(135deg, #a855f7, #7c3aed) !important; color: #fff; opacity: 0.95; }

.truncate-cell { max-width: 150px; }
.w-120 { width: 120px; }
.w-80 { width: 80px; }
.h-80 { height: 80px; }
.card-accent-orange { border-top: 3px solid var(--orange-500) !important; border-radius: var(--radius-xl); overflow: hidden; }
.card-accent-orange-full { border: 2px solid var(--orange-500) !important; border-radius: var(--radius-xl); overflow: hidden; }
.avatar-circle { width: 80px; height: 80px; display: inline-flex; align-items: center; justify-content: center; }
.avatar-80 { width: 80px !important; height: 80px !important; }

/* ===== GLOW ACCENTS ===== */
.glow-orange { box-shadow: 0 0 25px rgba(249,115,22,.2); }
.glow-blue { box-shadow: 0 0 25px rgba(59,130,246,.2); }
.glow-green { box-shadow: 0 0 25px rgba(34,197,94,.2); }
.glow-purple { box-shadow: 0 0 25px rgba(168,85,247,.2); }

.border-gradient {
    border: 2px solid transparent;
    border-image: linear-gradient(135deg, #f97316, #ea580c, #f59e0b) 1;
    border-radius: var(--radius-xl);
}

/* ===== SHIMMER PLACEHOLDER ===== */
.shimmer {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
    border-radius: var(--radius-md);
}

/* ===== FLOATING BACKGROUND ELEMENTS ===== */
.bg-float-1, .bg-float-2, .bg-float-3 { position: fixed; border-radius: 50%; pointer-events: none; z-index: -1; }
.bg-float-1 {
    top: 20%; left: -5%;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(249,115,22,.06), transparent 70%);
    animation: floatSlow 12s ease-in-out infinite;
}
.bg-float-2 {
    bottom: 10%; right: -3%;
    width: 250px; height: 250px;
    background: radial-gradient(circle, rgba(59,130,246,.05), transparent 70%);
    animation: floatSlow 15s ease-in-out infinite 3s;
}
.bg-float-3 {
    top: 50%; left: 50%;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(168,85,247,.04), transparent 70%);
    animation: floatSlow 10s ease-in-out infinite 5s;
}

/* ===== TABLE ALTERNATING COLORS ===== */
.table-striped>tbody>tr:nth-of-type(odd)>* { background-color: rgba(249,115,22,.03); }

/* ===== LIVE CLOCK ===== */
.live-clock {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
}

/* ===== TOAST ===== */
.toast-container { z-index: 9999; }