/* Shining Black Theme - Custom CSS */
:root {
    /* Deep romantic night palette with neon accents */
    --shining-black-primary: #0b0b12;
    --shining-black-secondary: #0f0a1f;
    --shining-black-tertiary: #151026;
    --shining-black-accent: #1c1533;
    --shining-black-border: #2a2042;
    --shining-black-text: #f7f7ff;
    --shining-black-text-secondary: #cdbff2;
    --shining-black-text-muted: #9a8fc0;

    /* Neon glow accent (pink/purple/blue) */
    --romance-accent-1: #ff3cac; /* pink */
    --romance-accent-2: #784ba0; /* purple */
    --romance-accent-3: #2b86c5; /* blue */

    /* Purple theme colors to replace blue */
    --purple-primary: #8b5cf6;
    --purple-secondary: #7c3aed;
    --purple-accent: #a855f7;
    --purple-light: #c4b5fd;
    --purple-dark: #5b21b6;
    --purple-hover: #9333ea;

    --shining-black-glow: var(--romance-accent-1);
    --shining-black-highlight: #2a1b44;
    --shining-black-gradient-start: #0b0b12;
    --shining-black-gradient-end: #1a1330;

    --shining-black-metallic: linear-gradient(145deg, #110d1d, #1a1330, #110d1d);
    --shining-black-shine: linear-gradient(45deg, var(--romance-accent-2), var(--romance-accent-1), var(--romance-accent-3));
}

/* Global shining black background */
.bg-shining-black {
    background: var(--shining-black-primary);
    background: linear-gradient(135deg, var(--shining-black-gradient-start) 0%, var(--shining-black-gradient-end) 100%);
}

.bg-shining-black-secondary {
    background: var(--shining-black-secondary);
    background: linear-gradient(145deg, var(--shining-black-secondary) 0%, var(--shining-black-accent) 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.bg-shining-black-tertiary {
    background: var(--shining-black-tertiary);
    background: linear-gradient(145deg, var(--shining-black-tertiary) 0%, var(--shining-black-secondary) 100%);
    border: 1px solid var(--shining-black-border);
}

/* Metallic effects */
.metallic-black {
    background: var(--shining-black-metallic);
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.shining-effect {
    position: relative;
    overflow: hidden;
}

.shining-effect::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 70%
    );
    transform: rotate(45deg);
    animation: shine 3s infinite;
    pointer-events: none;
}

@keyframes shine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    50% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
    100% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
}

/* Glowing borders */
.border-shining-black {
    border: 1px solid var(--shining-black-border);
    box-shadow: 
        0 0 10px rgba(255, 255, 255, 0.05),
        inset 0 0 10px rgba(255, 255, 255, 0.02);
}

.border-shining-black-glow {
    border: 1px solid var(--shining-black-glow);
    box-shadow:
        0 0 20px rgba(255, 60, 172, 0.25),
        0 0 40px rgba(120, 75, 160, 0.15),
        inset 0 0 14px rgba(43, 134, 197, 0.08);
}

/* Text colors */
.text-shining-white {
    color: var(--shining-black-text);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.text-shining-secondary {
    color: var(--shining-black-text-secondary);
}

.text-shining-muted {
    color: var(--shining-black-text-muted);
}

/* Hover effects */
.hover-shining-black:hover {
    background: var(--shining-black-highlight);
    background: linear-gradient(145deg, var(--shining-black-highlight) 0%, var(--shining-black-accent) 100%);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
    transition: all 0.3s ease;
}

/* Button styles */
.btn-shining-black {
    background: linear-gradient(145deg, var(--romance-accent-2), var(--romance-accent-1), var(--romance-accent-3));
    border: 1px solid var(--shining-black-border);
    color: var(--shining-black-text);
    box-shadow:
        0 8px 24px rgba(255, 60, 172, 0.25),
        0 2px 12px rgba(120, 75, 160, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.btn-shining-black:hover {
    background: var(--shining-black-shine);
    box-shadow:
        0 10px 28px rgba(255, 60, 172, 0.35),
        0 6px 18px rgba(120, 75, 160, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px) scale(1.01);
}

/* Card styles */
.card-shining-black {
    background: var(--shining-black-secondary);
    background: linear-gradient(145deg, var(--shining-black-secondary) 0%, var(--shining-black-accent) 100%);
    border: 1px solid var(--shining-black-border);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

/* Input styles */
.input-shining-black {
    background: var(--shining-black-primary);
    border: 1px solid var(--shining-black-border);
    color: var(--shining-black-text);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 10px rgba(255, 255, 255, 0.05);
}

.input-shining-black:focus {
    border-color: var(--shining-black-glow);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.35),
        0 0 10px rgba(255, 60, 172, 0.35),
        0 0 24px rgba(120, 75, 160, 0.25);
    outline: none;
}

/* Table styles */
.table-shining-black {
    background: var(--shining-black-secondary);
    border: 1px solid var(--shining-black-border);
}

.table-shining-black th {
    background: var(--shining-black-accent);
    color: var(--shining-black-text);
    border-bottom: 1px solid var(--shining-black-border);
}

.table-shining-black td {
    border-bottom: 1px solid var(--shining-black-border);
    color: var(--shining-black-text-secondary);
}

/* Sidebar styles */
.sidebar-shining-black {
    background: var(--shining-black-metallic);
    border-right: 1px solid var(--shining-black-border);
    box-shadow: 
        4px 0 15px rgba(0, 0, 0, 0.3),
        inset -1px 0 0 rgba(255, 255, 255, 0.05);
}

/* Navigation styles */
.nav-shining-black {
    background: var(--shining-black-secondary);
    background: linear-gradient(90deg, var(--shining-black-secondary) 0%, var(--shining-black-accent) 70%, rgba(120,75,160,0.25) 100%);
    border-bottom: 1px solid var(--shining-black-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Accent utilities for a more loving/beautiful vibe */
.accent-gradient {
    background: linear-gradient(135deg, var(--romance-accent-1), var(--romance-accent-2), var(--romance-accent-3));
}

.neon-border {
    border: 1px solid rgba(255, 60, 172, 0.6);
    box-shadow:
        0 0 18px rgba(255, 60, 172, 0.4),
        0 0 36px rgba(120, 75, 160, 0.25);
}

.soft-glow-text {
    color: var(--shining-black-text);
    text-shadow:
        0 0 12px rgba(255, 60, 172, 0.35),
        0 0 28px rgba(120, 75, 160, 0.25);
}

/* Tailwind overrides for landing page so it matches the new theme */
.bg-\[\#09090d\],
.bg-\[\#0f0f17\] {
    background: var(--shining-black-primary) !important;
}

.text-white { color: var(--shining-black-text) !important; }
.text-gray-400 { color: var(--shining-black-text-secondary) !important; }
.text-gray-500 { color: var(--shining-black-text-muted) !important; }

.border-gray-200,
.border-\[\#0f0f17\] {
    border-color: var(--shining-black-border) !important;
}

.hover\:bg-gray-700:hover {
    background: var(--shining-black-highlight) !important;
}

.focus\:ring-gray-800:focus,
.focus\:ring-blue-800:focus {
    box-shadow: 0 0 0 3px rgba(255, 60, 172, 0.35) !important;
}

/* Modal styles */
.modal-shining-black {
    background: var(--shining-black-primary);
    border: 1px solid var(--shining-black-border);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Scrollbar styles */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--shining-black-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--shining-black-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--shining-black-glow);
}

/* Animation for loading states */
@keyframes shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.shimmer {
    background: linear-gradient(
        90deg,
        var(--shining-black-secondary) 25%,
        var(--shining-black-accent) 50%,
        var(--shining-black-secondary) 75%
    );
    background-size: 200px 100%;
    animation: shimmer 2s infinite;
}

/* Custom utility classes */
.bg-black-shine {
    background: var(--shining-black-shine);
}

.bg-black-metallic {
    background: var(--shining-black-metallic);
}

.text-glow {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.border-glow {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

/* Purple theme utilities to replace blue */
.bg-purple-500 {
    background-color: var(--purple-primary) !important;
}

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

.bg-purple-700 {
    background-color: var(--purple-dark) !important;
}

.bg-purple-800 {
    background-color: var(--purple-dark) !important;
}

.hover\:bg-purple-600:hover {
    background-color: var(--purple-hover) !important;
}

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

.hover\:bg-purple-800:hover {
    background-color: var(--purple-dark) !important;
}

.from-purple-500 {
    --tw-gradient-from: var(--purple-primary) !important;
}

.to-purple-600 {
    --tw-gradient-to: var(--purple-secondary) !important;
}

.text-purple-400 {
    color: var(--purple-light) !important;
}

.text-purple-500 {
    color: var(--purple-primary) !important;
}

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

.text-purple-700 {
    color: var(--purple-dark) !important;
}

.text-purple-800 {
    color: var(--purple-dark) !important;
}

.border-purple-500 {
    border-color: var(--purple-primary) !important;
}

.border-purple-600 {
    border-color: var(--purple-secondary) !important;
}

.border-purple-700 {
    border-color: var(--purple-dark) !important;
}

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

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

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

/* Blue color overrides to use purple instead */
.bg-blue-500,
.bg-blue-600,
.bg-blue-700,
.bg-blue-800 {
    background-color: var(--purple-primary) !important;
}

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

.text-blue-400,
.text-blue-500,
.text-blue-600,
.text-blue-700,
.text-blue-800 {
    color: var(--purple-primary) !important;
}

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

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

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

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

.from-blue-500 {
    --tw-gradient-from: var(--purple-primary) !important;
}

.to-blue-600 {
    --tw-gradient-to: var(--purple-secondary) !important;
}