/*
Template Name: Velzon - Admin & Dashboard Template
Event: Hakordia Run 2026 Color Palette & Design Tokens
*/

:root {
    /* Brand Tokens - Hakordia Run 2026 */
    --hr-primary: #7B0828;
    --hr-primary-rgb: 123, 8, 40;
    --hr-primary-light: #D81B43;
    --hr-primary-light-rgb: 216, 27, 67;
    --hr-secondary: #5200CC;
    --hr-secondary-rgb: 82, 0, 204;
    --hr-accent: #FFA300;
    --hr-accent-rgb: 255, 163, 0;
    --hr-accent-glow: #FF5E13;
    --hr-accent-glow-rgb: 255, 94, 19;
    --hr-bg-dark: #260214;
    --hr-bg-dark-rgb: 38, 2, 20;
    --hr-bg-light: #f3f3f9;
    --hr-bg-light-rgb: 243, 243, 249;
    --hr-text-dark: #1F1A24;
    --hr-text-dark-rgb: 31, 26, 36;
    --hr-text-light: #FFFFFF;
    --hr-text-light-rgb: 255, 255, 255;

    /* Gradients */
    --hr-hero-gradient: linear-gradient(135deg, #7B0828 0%, #260214 100%);
    --hr-cta-gradient: linear-gradient(135deg, #FFA300 0%, #FF5E13 100%);
    --hr-cta-gradient-hover: linear-gradient(135deg, #FF5E13 0%, #FFA300 100%);
    --hr-badge-gradient: linear-gradient(135deg, #5200CC 0%, #D81B43 100%);

    /* Velzon Theme Overrides */
    --vz-primary: #7B0828;
    --vz-primary-rgb: 123, 8, 40;
    --vz-secondary: #5200CC;
    --vz-secondary-rgb: 82, 0, 204;
    --vz-warning: #FFA300;
    --vz-warning-rgb: 255, 163, 0;
    --vz-danger: #D81B43;
    --vz-danger-rgb: 216, 27, 67;
    --vz-dark: #260214;
    --vz-dark-rgb: 38, 2, 20;
    --vz-light: #f8f9fa;
    --vz-light-rgb: 248, 249, 250;

    --vz-body-bg: #f3f3f9;
    --vz-body-bg-rgb: 243, 243, 249;
    --vz-body-color: #1F1A24;
    --vz-body-color-rgb: 31, 26, 36;
    --vz-link-color: #7B0828;
    --vz-link-hover-color: #D81B43;
    --vz-border-color: rgba(123, 8, 40, 0.15);
}

/* 1. Hero Section & Auth Backgrounds */
.auth-bg-cover {
    background: linear-gradient(135deg, #7B0828 0%, #260214 100%) !important;
}

.auth-bg-cover > .bg-overlay {
    background-image: url("../assets/images/cover-pattern.png") !important;
    background-position: center !important;
    background-size: cover !important;
    opacity: 1 !important;
    background-color: transparent !important;
}

.auth-one-bg {
    background-image: url("../assets/images/auth-one-bg.jpg") !important;
    background-position: center !important;
    background-size: cover !important;
}

.auth-one-bg .bg-overlay {
    background: linear-gradient(135deg, rgba(123, 8, 40, 0.85) 0%, rgba(38, 2, 20, 0.9) 100%) !important;
    opacity: 0.9 !important;
}

.hero-section {
    background: linear-gradient(135deg, #7B0828 0%, #260214 100%) !important;
}

/* 2. Call-to-Action (CTA) Primary Button */
#btnSubmit {
    padding: 0.72rem 1.25rem !important;
    min-height: 46px;
    font-size: 0.925rem;
    font-weight: 500;
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #7B0828 0%, #D81B43 100%) !important;
    border: none !important;
    border-radius: 0.35rem;
    box-shadow: 0 4px 12px rgba(123, 8, 40, 0.25);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#btnSubmit:hover:not(:disabled) {
    background: linear-gradient(135deg, #D81B43 0%, #7B0828 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 18px rgba(216, 27, 67, 0.35);
    transform: translateY(-2px);
}

#btnSubmit:active:not(:disabled) {
    transform: translateY(1px) scale(0.99);
    box-shadow: 0 2px 6px rgba(123, 8, 40, 0.25);
}

#btnSubmit:disabled {
    opacity: 0.6 !important;
    background: #7B0828 !important;
    color: #FFFFFF !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-cta,
.btn-cta-primary {
    background: linear-gradient(135deg, #FFA300 0%, #FF5E13 100%) !important;
    border: none !important;
    color: #1F1A24 !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 14px rgba(255, 94, 19, 0.35) !important;
    transition: all 0.3s ease !important;
}

.btn-cta:hover:not(:disabled),
.btn-cta-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #FF5E13 0%, #FFA300 100%) !important;
    color: #1F1A24 !important;
    box-shadow: 0 6px 20px rgba(255, 94, 19, 0.45) !important;
    transform: translateY(-1px);
}

.btn-cta:active:not(:disabled),
.btn-cta-primary:active:not(:disabled) {
    transform: translateY(0);
}

.btn-cta:disabled,
.btn-cta-primary:disabled {
    opacity: 0.65 !important;
    background: linear-gradient(135deg, #FFA300 0%, #FF5E13 100%) !important;
    color: #1F1A24 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* 3. Cards & Detail Components */
.card {
    background-color: #FFFFFF;
    border-color: rgba(123, 8, 40, 0.12);
}

.kategori-label {
    background-color: #FFFFFF !important;
    border: 1.5px solid rgba(82, 0, 204, 0.18) !important;
    border-radius: 8px;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}

.kategori-label:hover {
    border-color: #D81B43 !important;
    background-color: #f8f9fa !important;
    box-shadow: 0 4px 12px rgba(216, 27, 67, 0.08);
}

.btn-check:checked + .kategori-label {
    border-color: #7B0828 !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 1px #7B0828, 0 4px 12px rgba(123, 8, 40, 0.12);
}

.btn-check:checked + .kategori-label .check-icon {
    opacity: 1;
    transform: scale(1);
    color: #D81B43 !important;
}

.btn-check:disabled + .kategori-label {
    opacity: 0.55;
    background-color: #f8f9fa !important;
    border-color: #e9ebec !important;
    cursor: not-allowed;
}

.check-icon {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.25s ease-in-out;
    color: #7B0828;
}

.kategori-label .avatar-title {
    background: linear-gradient(135deg, #5200CC 0%, #D81B43 100%) !important;
    color: #FFFFFF !important;
}

/* Badges & Accent Highlights */
.badge-secondary,
.badge.bg-secondary {
    background-color: #5200CC !important;
    color: #FFFFFF !important;
}

.badge-soft-secondary {
    background-color: rgba(82, 0, 204, 0.12) !important;
    color: #5200CC !important;
    border: 1px solid rgba(82, 0, 204, 0.25);
}

.badge-primary-light,
.badge-crimson,
.badge.bg-danger {
    background-color: #D81B43 !important;
    color: #FFFFFF !important;
}

.badge-soft-danger {
    background-color: rgba(216, 27, 67, 0.12) !important;
    color: #D81B43 !important;
    border: 1px solid rgba(216, 27, 67, 0.25);
}

.badge-primary,
.badge.bg-primary {
    background-color: #7B0828 !important;
    color: #FFFFFF !important;
}

.badge-soft-primary {
    background-color: rgba(123, 8, 40, 0.12) !important;
    color: #7B0828 !important;
    border: 1px solid rgba(123, 8, 40, 0.25);
}

.badge-accent,
.badge.bg-warning {
    background-color: #FFA300 !important;
    color: #1F1A24 !important;
    font-weight: 700;
}

/* Text and Link Utilities */
a {
    color: #7B0828;
    transition: color 0.2s ease;
}

a:hover {
    color: #D81B43;
}

.text-primary {
    color: #7B0828 !important;
}

.text-secondary {
    color: #5200CC !important;
}

.text-crimson,
.text-primary-light {
    color: #D81B43 !important;
}

.text-accent {
    color: #FFA300 !important;
}