/**
 * Swizzle Cast Branding Stylesheet
 * Color Palette from Logo Gradient
 *
 * Primary Colors:
 * - Deep Purple: #2B1B3D
 * - Purple-Burgundy: #5B2847
 * - Burgundy: #8B3653
 * - Burgundy-Red: #8B3653
 */

/* ==========================================
   GRADIENT UTILITIES
   ========================================== */

/* Main Swizzle Gradient - Matches Logo */
.swizzle-gradient {
    background: linear-gradient(135deg, #2B1B3D 0%, #5B2847 50%, #8B3653 100%);
}

.swizzle-gradient-reverse {
    background: linear-gradient(135deg, #8B3653 0%, #5B2847 50%, #2B1B3D 100%);
}

.swizzle-gradient-light {
    background: linear-gradient(135deg, #fff6f8 0%, #ffeef2 100%);
}

/* ==========================================
   HEADER & NAVIGATION ENHANCEMENTS
   ========================================== */

/* Header Text Colors - White for visibility on gradient */
header,
header * {
    color: #fff !important;
}

header .btn-user {
    color: #fff !important;
}

/* Logo Styling - Header Logo */
.logo img {
    transition: all 0.3s ease;
    /* Show logo as-is with subtle shadow for depth */
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}

.logo:hover img {
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
    transform: scale(1.02);
}

/* Enhanced Header User Profile */
.pro-box {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.pro-box:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.pro-dtls h3,
.pro-dtls p {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Dropdown Button Styling */
.btn-user.dropdown-toggle {
    background: transparent !important;
    border: none !important;
}

.btn-user.dropdown-toggle::after {
    border-top-color: #fff !important;
}

/* ==========================================
   SIDEBAR ACCENT COLORS
   ========================================== */

/* Active Menu Items with Gradient Accent */
.side-bar .menu .item.active a {
    background: linear-gradient(90deg, #ffeef2 0%, #fff6f8 100%);
    border-left: 4px solid #8B3653;
}

.side-bar .menu .item a:hover {
    background: linear-gradient(90deg, #ffeef2 0%, #fff6f8 100%);
    border-left: 4px solid #8B3653;
}

/* ==========================================
   BUTTONS WITH GRADIENT
   ========================================== */

/* Primary Button with Gradient */
.btn-primary.gradient {
    background: linear-gradient(135deg, #8B3653 0%, #8B3653 100%);
    border: none !important;
    position: relative;
    overflow: hidden;
}

.btn-primary.gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2B1B3D 0%, #5B2847 100%);
    transition: left 0.3s ease;
    z-index: 0;
}

.btn-primary.gradient:hover::before {
    left: 0;
}

.btn-primary.gradient span,
.btn-primary.gradient i {
    position: relative;
    z-index: 1;
}

/* ==========================================
   CARDS WITH BRANDING
   ========================================== */

/* Card Header with Gradient */
.card.swizzle-card .card-header {
    background: linear-gradient(135deg, #2B1B3D 0%, #5B2847 50%, #8B3653 100%);
    color: #fff;
    border-bottom: none;
}

.card.swizzle-card .card-header h1,
.card.swizzle-card .card-header h2,
.card.swizzle-card .card-header h3,
.card.swizzle-card .card-header h4,
.card.swizzle-card .card-header h5,
.card.swizzle-card .card-header h6,
.card.swizzle-card .card-header p {
    color: #fff !important;
}

/* Card with Gradient Border */
.card.bordered {
    border: none;
    position: relative;
    background: #fff;
}

.card.bordered::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2B1B3D 0%, #5B2847 50%, #8B3653 100%);
    border-radius: 12px 12px 0 0;
}

/* ==========================================
   BADGES & STATUS INDICATORS
   ========================================== */

.badge.swizzle-purple {
    background: #2B1B3D;
    color: #fff;
}

.badge.swizzle-burgundy {
    background: #8B3653;
    color: #fff;
}

.badge.swizzle-gradient {
    background: linear-gradient(135deg, #2B1B3D 0%, #8B3653 100%);
    color: #fff;
}

/* ==========================================
   FORM ELEMENTS
   ========================================== */

/* Focused Input with Brand Color */
.form-control:focus {
    border-color: #8B3653 !important;
    box-shadow: 0 0 0 0.25rem rgba(163, 38, 56, 0.15) !important;
}

/* Select Dropdown Accent */
.form-select:focus {
    border-color: #8B3653 !important;
    box-shadow: 0 0 0 0.25rem rgba(163, 38, 56, 0.15) !important;
}

/* ==========================================
   TABLES
   ========================================== */

/* Table Header with Gradient */
.table thead.swizzle-header {
    background: linear-gradient(135deg, #2B1B3D 0%, #5B2847 100%);
}

.table thead.swizzle-header th {
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Striped Table with Brand Colors */
.table-striped.swizzle tbody tr:nth-of-type(odd) {
    background-color: #fff6f8;
}

/* ==========================================
   ALERTS & NOTIFICATIONS
   ========================================== */

.alert-swizzle {
    background: linear-gradient(135deg, #fff6f8 0%, #ffeef2 100%);
    border-left: 4px solid #8B3653;
    color: #2B1B3D;
}

/* ==========================================
   LOADING & PROGRESS
   ========================================== */

/* Progress Bar with Gradient */
.progress-bar.swizzle {
    background: linear-gradient(90deg, #2B1B3D 0%, #8B3653 100%);
}

/* Spinner with Brand Colors */
.spinner-swizzle {
    border: 3px solid #ffeef2;
    border-top-color: #8B3653;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

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

/* ==========================================
   BREADCRUMBS
   ========================================== */

.breadcrumb .breadcrumb-item.active {
    color: #8B3653;
    font-weight: 600;
}

.breadcrumb .breadcrumb-item::before {
    color: #8B3653 !important;
}

/* ==========================================
   TABS
   ========================================== */

.nav-tabs .nav-link.active {
    color: #8B3653 !important;
    border-bottom-color: #8B3653 !important;
}

.nav-tabs .nav-link:hover {
    color: #8B3653;
}

/* ==========================================
   LOGIN PAGE ENHANCEMENTS
   ========================================== */

/* Login Card with Gradient Shadow */
.login-section .card {
    box-shadow: 0 10px 40px rgba(43, 27, 61, 0.15);
    border: none;
}

.login-section .card-header {
    background: linear-gradient(135deg, #2B1B3D 0%, #5B2847 50%, #8B3653 100%);
    color: #fff;
}

/* ==========================================
   ANIMATIONS
   ========================================== */

/* Fade In Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

/* Gradient Shift Animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gradient-animated {
    background: linear-gradient(270deg, #2B1B3D, #5B2847, #8B3653, #8B3653);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */

/* Text Colors */
.text-swizzle-purple {
    color: #2B1B3D !important;
}

.text-swizzle-burgundy {
    color: #8B3653 !important;
}

.text-swizzle-red {
    color: #8B3653 !important;
}

/* Background Colors */
.bg-swizzle-purple {
    background-color: #2B1B3D !important;
}

.bg-swizzle-burgundy {
    background-color: #8B3653 !important;
}

.bg-swizzle-red {
    background-color: #8B3653 !important;
}

.bg-swizzle-light {
    background-color: #fff6f8 !important;
}

.bg-swizzle-lighter {
    background-color: #ffeef2 !important;
}

/* Border Colors */
.border-swizzle {
    border-color: #8B3653 !important;
}

.border-swizzle-light {
    border-color: #ffeef2 !important;
}

/* ==========================================
   HOVER EFFECTS
   ========================================== */

/* Card Hover Effect */
.card-hover-swizzle {
    transition: all 0.3s ease;
}

.card-hover-swizzle:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(163, 38, 56, 0.2);
}

/* Link Hover with Gradient */
.link-swizzle {
    background: linear-gradient(to right, #8B3653 0%, #8B3653 100%);
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size 0.3s ease;
    text-decoration: none;
    color: #2B1B3D;
}

.link-swizzle:hover {
    background-size: 100% 2px;
    color: #8B3653;
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */

@media (max-width: 768px) {
    .swizzle-gradient,
    .card.swizzle-card .card-header {
        background: linear-gradient(180deg, #2B1B3D 0%, #5B2847 50%, #8B3653 100%);
    }
}

/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {
    .swizzle-gradient,
    header {
        background: #2B1B3D !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}