/* Custom styles for Creaflow */

:root {
    /* Custom Brand Colors */
    --brand-dark-blue: #04122C;
    --brand-medium-blue: #6982FF;
    --brand-red: #DC3545;
    --brand-pink: #FF7DC3;

    /* Bootstrap Color Overrides */
    --bs-primary: #6982FF;
    --bs-primary-rgb: 105, 130, 255;
    --bs-secondary: #04122C;
    --bs-secondary-rgb: 4, 18, 44;
    --bs-success: #198754;
    --bs-success-rgb: 25, 135, 84;
    --bs-danger: #DC3545;
    --bs-danger-rgb: 220, 53, 69;
    --bs-warning: #FF7DC3;
    --bs-warning-rgb: 255, 125, 195;
    --bs-info: #0dcaf0;
    --bs-info-rgb: 13, 202, 240;
    --bs-light: #f8f9fa;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark: #04122C;
    --bs-dark-rgb: 4, 18, 44;

    /* Legacy variables for compatibility */
    --primary-color: var(--brand-medium-blue);
    --secondary-color: var(--brand-dark-blue);
    --success-color: #198754;
    --danger-color: var(--brand-red);
    --warning-color: var(--brand-pink);
    --info-color: #0dcaf0;

    /* Custom gradient */
    --brand-gradient: linear-gradient(135deg, var(--brand-medium-blue), var(--brand-pink));
    --brand-gradient-reverse: linear-gradient(135deg, var(--brand-pink), var(--brand-medium-blue));
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
}

.navbar-brand {
    font-size: 1.5rem;
}

.card {
    border: none;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: box-shadow 0.15s ease-in-out;
}

.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.btn {
    border-radius: 0.375rem;
}

.form-control:focus {
    border-color: var(--brand-medium-blue);
    box-shadow: 0 0 0 0.2rem rgba(105, 130, 255, 0.25);
}

.hero-section {
    background: var(--brand-gradient);
    color: white;
    padding: 4rem 0;
    margin-bottom: 3rem;
}

.feature-card {
    text-align: center;
    padding: 2rem;
    height: 100%;
}

.feature-icon {
    font-size: 3rem;
    color: var(--brand-medium-blue);
    margin-bottom: 1rem;
}

.workflow-card {
    transition: transform 0.2s ease-in-out;
}

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

.status-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.loading-spinner {
    display: none;
}

.loading .loading-spinner {
    display: inline-block;
}

/* Brand-specific components */
.btn-brand-primary {
    background: var(--brand-gradient);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.btn-brand-primary:hover {
    background: var(--brand-gradient-reverse);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(105, 130, 255, 0.3);
    color: white;
}

.btn-brand-outline {
    border: 2px solid var(--brand-medium-blue);
    color: var(--brand-medium-blue);
    background: transparent;
    transition: all 0.3s ease;
}

.btn-brand-outline:hover {
    background: var(--brand-medium-blue);
    color: white;
    transform: translateY(-1px);
}

.card-brand {
    border: 2px solid transparent;
    background: linear-gradient(white, white) padding-box,
                var(--brand-gradient) border-box;
    transition: all 0.3s ease;
}

.card-brand:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(105, 130, 255, 0.2);
}

.badge-brand {
    background: var(--brand-gradient);
    color: white;
}

.text-brand-primary {
    color: var(--brand-medium-blue) !important;
}

.text-brand-secondary {
    color: var(--brand-dark-blue) !important;
}

.text-brand-pink {
    color: var(--brand-pink) !important;
}

.bg-brand-gradient {
    background: var(--brand-gradient) !important;
}

.border-brand {
    border-color: var(--brand-medium-blue) !important;
}

/* Navigation customization */
.navbar-brand {
    font-weight: 700;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom navbar for brand colors */
.navbar-brand-theme {
    background-color: var(--brand-dark-blue) !important;
}

.navbar-brand-theme .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

.navbar-brand-theme .navbar-nav .nav-link:hover {
    color: var(--brand-pink) !important;
}

/* Progress bars with brand colors */
.progress-bar-brand {
    background: var(--brand-gradient);
}

/* Status indicators */
.status-running {
    color: var(--brand-medium-blue);
}

.status-completed {
    color: #198754;
}

.status-failed {
    color: var(--brand-red);
}

.status-paused {
    color: var(--brand-pink);
}

/* Timeline customization */
.timeline-item.completed::after {
    background: var(--brand-gradient);
}

.timeline-item.current .timeline-content {
    border-color: var(--brand-medium-blue);
    background-color: rgba(105, 130, 255, 0.05);
}

/* Loading states */
.loading-overlay {
    background: linear-gradient(45deg,
        transparent 40%,
        rgba(105, 130, 255, 0.1) 50%,
        transparent 60%);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Responsive design */
@media (max-width: 768px) {
    .hero-section {
        padding: 2rem 0;
    }

    .hero-section h1 {
        font-size: 2rem;
    }

    .navbar-brand {
        font-size: 1.25rem;
    }
}