/* 🎃 Stream4K Halloween Theme 2024 🎃 */
/* Spooky Billing System Theme */

:root {
    /* Halloween Color Palette */
    --halloween-orange: #FF6B35;
    --halloween-orange-dark: #E55100;
    --halloween-purple: #6B2C91;
    --halloween-purple-dark: #4A1E64;
    --halloween-black: #1A0F1F;
    --halloween-gray: #2C2340;
    --halloween-green: #39FF14;
    --halloween-yellow: #FFD700;
    --halloween-red: #8B0000;
    --halloween-blood: #DC143C;
    
    /* Gradient Backgrounds */
    --spooky-gradient: linear-gradient(135deg, #1A0F1F 0%, #4A1E64 50%, #E55100 100%);
    --midnight-gradient: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243E 100%);
    --pumpkin-gradient: linear-gradient(135deg, #FF6B35 0%, #FFD700 100%);
    
    /* Shadow Effects */
    --spooky-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
    --glow-orange: 0 0 20px rgba(255, 107, 53, 0.6);
    --glow-purple: 0 0 20px rgba(107, 44, 145, 0.6);
}

/* Global Halloween Styling */
body {
    background: var(--midnight-gradient) !important;
    color: #E8E8E8 !important;
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><filter id="fog"><feTurbulence baseFrequency="0.01" numOctaves="2" seed="2"/><feColorMatrix values="0 0 0 0 0.1 0 0 0 0 0.05 0 0 0 0 0.15 0 0 0 0.3 0"/></filter></defs><rect width="100%" height="100%" filter="url(%23fog)" opacity="0.4"/></svg>') center/cover;
    pointer-events: none;
    z-index: 1;
    opacity: 0.3;
    animation: fogFloat 20s ease-in-out infinite;
}

/* Animated Fog Effect */
@keyframes fogFloat {
    0%, 100% { transform: translateX(0) translateY(0); }
    33% { transform: translateX(-20px) translateY(-10px); }
    66% { transform: translateX(20px) translateY(10px); }
}

/* Navigation Bar Halloween Theme */
.navbar {
    background: linear-gradient(90deg, var(--halloween-black) 0%, var(--halloween-gray) 100%) !important;
    border-bottom: 2px solid var(--halloween-orange) !important;
    box-shadow: var(--spooky-shadow) !important;
}

.navbar-brand {
    color: var(--halloween-orange) !important;
    font-family: 'Creepster', cursive !important;
    font-size: 28px !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
    animation: spookyGlow 2s ease-in-out infinite;
}

@keyframes spookyGlow {
    0%, 100% { text-shadow: 2px 2px 4px rgba(0,0,0,0.8), 0 0 10px var(--halloween-orange); }
    50% { text-shadow: 2px 2px 4px rgba(0,0,0,0.8), 0 0 20px var(--halloween-orange), 0 0 30px var(--halloween-orange); }
}

/* Sidebar Halloween Theme */
.sidebar {
    background: linear-gradient(180deg, var(--halloween-black) 0%, var(--halloween-purple-dark) 100%) !important;
    border-right: 1px solid var(--halloween-orange) !important;
}

.sidebar .navigation li a {
    color: #B8B8B8 !important;
    transition: all 0.3s ease !important;
    position: relative;
}

.sidebar .navigation li a:hover {
    background: linear-gradient(90deg, transparent 0%, rgba(255, 107, 53, 0.2) 50%, transparent 100%) !important;
    color: var(--halloween-orange) !important;
    padding-left: 25px !important;
}

.sidebar .navigation li a:hover::before {
    content: "🎃";
    position: absolute;
    left: 5px;
    animation: bounce 0.5s ease infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Card Halloween Styling */
.card, .panel {
    background: rgba(26, 15, 31, 0.95) !important;
    border: 1px solid var(--halloween-purple) !important;
    box-shadow: 0 4px 15px rgba(107, 44, 145, 0.3) !important;
    transition: all 0.3s ease !important;
}

.card:hover, .panel:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--glow-purple) !important;
    border-color: var(--halloween-orange) !important;
}

.card-header, .panel-heading {
    background: linear-gradient(135deg, var(--halloween-purple-dark) 0%, var(--halloween-gray) 100%) !important;
    color: var(--halloween-orange) !important;
    border-bottom: 2px solid var(--halloween-orange) !important;
}

/* Buttons Halloween Theme */
.btn {
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(135deg, var(--halloween-purple) 0%, var(--halloween-purple-dark) 100%) !important;
    border: 1px solid var(--halloween-orange) !important;
    color: white !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--halloween-orange) 0%, var(--halloween-orange-dark) 100%) !important;
    transform: scale(1.05) !important;
    box-shadow: var(--glow-orange) !important;
}

.btn-success {
    background: linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%) !important;
    border: 1px solid var(--halloween-green) !important;
}

.btn-danger {
    background: linear-gradient(135deg, var(--halloween-red) 0%, var(--halloween-blood) 100%) !important;
    border: 1px solid var(--halloween-blood) !important;
}

/* Table Halloween Styling */
.table {
    background: rgba(26, 15, 31, 0.9) !important;
    color: #E8E8E8 !important;
}

.table thead th {
    background: var(--halloween-purple-dark) !important;
    color: var(--halloween-orange) !important;
    border-color: var(--halloween-orange) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.table tbody tr {
    transition: all 0.3s ease !important;
}

.table tbody tr:hover {
    background: rgba(255, 107, 53, 0.1) !important;
    transform: scale(1.01) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(107, 44, 145, 0.1) !important;
}

/* Form Controls Halloween Theme */
.form-control, .form-select {
    background: rgba(26, 15, 31, 0.8) !important;
    border: 1px solid var(--halloween-purple) !important;
    color: #E8E8E8 !important;
}

.form-control:focus, .form-select:focus {
    background: rgba(26, 15, 31, 0.95) !important;
    border-color: var(--halloween-orange) !important;
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.5) !important;
}

/* Halloween Decorations */
.halloween-bat {
    position: fixed;
    width: 30px;
    height: 20px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20"><path d="M15 5 Q10 0 5 5 Q10 8 15 5 Q20 8 25 5 Q20 0 15 5" fill="%23000"/></svg>') no-repeat center;
    animation: flyBat 15s linear infinite;
    z-index: 1000;
}

@keyframes flyBat {
    0% { transform: translate(-50px, 100px) rotate(0deg); }
    25% { transform: translate(calc(100vw + 50px), 200px) rotate(10deg); }
    50% { transform: translate(calc(100vw + 50px), 300px) rotate(-10deg); }
    75% { transform: translate(-50px, 400px) rotate(10deg); }
    100% { transform: translate(-50px, 100px) rotate(0deg); }
}

/* Floating Ghost Animation */
.halloween-ghost {
    position: fixed;
    bottom: -50px;
    right: 50px;
    width: 50px;
    height: 60px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 60"><ellipse cx="25" cy="20" rx="20" ry="25" fill="white" opacity="0.8"/><circle cx="18" cy="18" r="3" fill="black"/><circle cx="32" cy="18" r="3" fill="black"/><path d="M5 35 Q10 45 15 35 Q20 45 25 35 Q30 45 35 35 Q40 45 45 35 L45 50 Q40 55 35 50 Q30 55 25 50 Q20 55 15 50 Q10 55 5 50 Z" fill="white" opacity="0.8"/></svg>') no-repeat center;
    animation: floatGhost 10s ease-in-out infinite;
    z-index: 999;
}

@keyframes floatGhost {
    0%, 100% { transform: translateY(0) rotate(-5deg); opacity: 0.7; }
    50% { transform: translateY(-200px) rotate(5deg); opacity: 1; }
}

/* Spider Web Corner Decoration */
.spider-web {
    position: fixed;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><g stroke="rgba(255,255,255,0.3)" stroke-width="1" fill="none"><path d="M200 0 L100 100 M200 0 L150 0 M200 0 L200 50 M150 0 L100 50 M200 50 L150 100 M100 50 Q125 75 150 100"/></g></svg>') no-repeat;
    pointer-events: none;
    z-index: 998;
}

/* Dashboard Stats Cards Halloween */
.stat-card {
    background: linear-gradient(135deg, rgba(107, 44, 145, 0.8) 0%, rgba(26, 15, 31, 0.95) 100%) !important;
    border: 2px solid var(--halloween-orange) !important;
    border-radius: 15px !important;
    padding: 20px !important;
    margin: 10px 0 !important;
    transition: all 0.4s ease !important;
}

.stat-card:hover {
    transform: translateY(-10px) rotate(1deg) !important;
    box-shadow: 0 10px 30px rgba(255, 107, 53, 0.5) !important;
}

.stat-card .stat-number {
    font-size: 36px !important;
    font-weight: bold !important;
    color: var(--halloween-orange) !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important;
}

.stat-card .stat-label {
    font-size: 14px !important;
    color: #B8B8B8 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

/* Halloween Loading Animation */
.halloween-loader {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 107, 53, 0.3);
    border-top: 3px solid var(--halloween-orange);
    border-radius: 50%;
    animation: halloweenSpin 1s linear infinite;
}

@keyframes halloweenSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Alert Boxes Halloween Theme */
.alert-success {
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.9) 0%, rgba(27, 94, 32, 0.9) 100%) !important;
    border: 1px solid var(--halloween-green) !important;
    color: white !important;
}

.alert-danger {
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.9) 0%, rgba(220, 20, 60, 0.9) 100%) !important;
    border: 1px solid var(--halloween-blood) !important;
    color: white !important;
}

.alert-warning {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.9) 0%, rgba(229, 81, 0, 0.9) 100%) !important;
    border: 1px solid var(--halloween-yellow) !important;
    color: white !important;
}

/* Modal Halloween Theme */
.modal-content {
    background: var(--midnight-gradient) !important;
    border: 2px solid var(--halloween-orange) !important;
    box-shadow: 0 0 50px rgba(255, 107, 53, 0.5) !important;
}

.modal-header {
    background: linear-gradient(135deg, var(--halloween-purple-dark) 0%, var(--halloween-gray) 100%) !important;
    border-bottom: 2px solid var(--halloween-orange) !important;
}

.modal-title {
    color: var(--halloween-orange) !important;
    font-family: 'Creepster', cursive !important;
}

/* Scrollbar Halloween Theme */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--halloween-black);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--halloween-orange) 0%, var(--halloween-purple) 100%);
    border-radius: 10px;
    border: 2px solid var(--halloween-black);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--halloween-orange-dark) 0%, var(--halloween-purple-dark) 100%);
}

/* Halloween Icons */
.halloween-icon::before {
    content: "🎃";
    margin-right: 8px;
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Responsive Halloween Adjustments */
@media (max-width: 768px) {
    .spider-web {
        width: 150px;
        height: 150px;
    }
    
    .halloween-ghost {
        width: 40px;
        height: 48px;
    }
    
    .stat-card {
        margin: 5px 0 !important;
    }
}

/* Print Styles - Remove Halloween Theme for Printing */
@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    .halloween-bat, .halloween-ghost, .spider-web {
        display: none !important;
    }
    
    .card, .panel, .table {
        background: white !important;
        border-color: #ddd !important;
    }
}