/* ========================================
   يوم التأسيس السعودي - Saudi Founding Day Theme
   22 فبراير - February 22
   الهوية البصرية الرسمية - Official Brand Identity
   ======================================== */

:root {
    /* الألوان الرسمية - Official Colors */
    --fd-brown: #6B4E45;        /* الأصالة - Al-Asala (Heritage) */
    --fd-black: #231F20;        /* العزم - Al-Azm (Determination) */
    --fd-cream: #F4EADA;        /* الوضوح - Al-Wuduh (Clarity) */
    --fd-tan: #DEC9B2;          /* الأرض - Al-Ard (Earth) */
    --fd-brown-light: #8B6B5E;
    --fd-brown-dark: #4A342D;
    --fd-cream-dark: #E8D5BD;
}

/* ========================================
   Override user-design-system CSS variables
   ======================================== */
body.founding-day-theme {
    --primary-50: #FAF5F0;
    --primary-100: #F4EADA;
    --primary-200: #DEC9B2;
    --primary-300: #C4A98A;
    --primary-400: #A07B65;
    --primary-500: #6B4E45;
    --primary-600: #5A3F37;
    --primary-700: #4A342D;
    --primary-800: #3A2620;
    --primary-900: #2A1A15;

    --teal-50: #FAF5F0;
    --teal-100: #F4EADA;
    --teal-200: #DEC9B2;
    --teal-500: #6B4E45;
    --teal-600: #5A3F37;
    --teal-700: #4A342D;
}

/* ========================================
   Top Banner - Founding Day Ribbon
   ======================================== */
.founding-day-banner {
    background: linear-gradient(135deg, var(--fd-brown-dark) 0%, var(--fd-brown) 40%, var(--fd-brown-dark) 100%);
    color: var(--fd-cream);
    text-align: center;
    padding: 10px 20px;
    font-family: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;
    position: relative;
    z-index: 1000;
    overflow: hidden;
    direction: rtl;
    max-height: 60px;
}

.founding-day-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 30px,
            rgba(244, 234, 218, 0.05) 30px,
            rgba(244, 234, 218, 0.05) 60px
        );
    pointer-events: none;
}

.founding-day-banner__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

/* Logo */
.founding-day-banner__logo {
    height: 36px !important;
    max-height: 36px !important;
    width: auto !important;
    max-width: 120px !important;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
    object-fit: contain;
}

/* Official visual element icons */
.founding-day-banner__icon {
    height: 22px !important;
    width: 22px !important;
    max-height: 22px !important;
    max-width: 22px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
    flex-shrink: 0;
}

/* Decorative symbols */
.founding-day-banner__symbols {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.45;
}

.founding-day-banner__text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--fd-cream) !important;
    letter-spacing: 0.02em;
}

.founding-day-banner__text .fd-highlight {
    color: var(--fd-tan) !important;
    font-weight: 700;
}

.founding-day-banner__year {
    background: var(--fd-cream);
    color: var(--fd-brown-dark) !important;
    padding: 3px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

/* Separator between symbols and content */
.founding-day-banner__sep {
    width: 1px;
    height: 20px;
    background: rgba(244, 234, 218, 0.25);
    flex-shrink: 0;
}

/* Tan/cream border at bottom */
.founding-day-banner__border {
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--fd-brown-light) 15%,
        var(--fd-tan) 35%,
        var(--fd-cream) 50%,
        var(--fd-tan) 65%,
        var(--fd-brown-light) 85%,
        transparent 100%
    );
}

/* ========================================
   Body Theme Overrides
   ======================================== */

body.founding-day-theme {
    background-color: #FAF8F5 !important;
}

/* Override hero gradient in user dashboard */
body.founding-day-theme .user-hero::before {
    background: linear-gradient(90deg, var(--fd-brown), var(--fd-brown-light)) !important;
}

/* Primary button overrides - heritage brown */
body.founding-day-theme .bg-blue-600,
body.founding-day-theme .bg-blue-500,
body.founding-day-theme .bg-indigo-600,
body.founding-day-theme .bg-indigo-500 {
    background-color: var(--fd-brown) !important;
}

body.founding-day-theme .bg-blue-700,
body.founding-day-theme .hover\:bg-blue-700:hover,
body.founding-day-theme .hover\:bg-indigo-700:hover {
    background-color: var(--fd-brown-dark) !important;
}

body.founding-day-theme .text-blue-600,
body.founding-day-theme .text-blue-500,
body.founding-day-theme .text-indigo-600 {
    color: var(--fd-brown) !important;
}

body.founding-day-theme .border-blue-500,
body.founding-day-theme .focus\:border-blue-500:focus,
body.founding-day-theme .border-indigo-500 {
    border-color: var(--fd-brown) !important;
}

body.founding-day-theme .focus\:ring-blue-500:focus,
body.founding-day-theme .focus\:ring-indigo-500:focus {
    --tw-ring-color: var(--fd-brown) !important;
}

/* Teal overrides */
body.founding-day-theme .bg-teal-600,
body.founding-day-theme .bg-teal-500,
body.founding-day-theme .bg-cyan-600,
body.founding-day-theme .bg-cyan-500 {
    background-color: var(--fd-brown) !important;
}

body.founding-day-theme .text-teal-600,
body.founding-day-theme .text-teal-500,
body.founding-day-theme .text-cyan-600 {
    color: var(--fd-brown) !important;
}

/* Green buttons shift to brown */
body.founding-day-theme .bg-green-600,
body.founding-day-theme .bg-emerald-600 {
    background-color: var(--fd-brown) !important;
}

body.founding-day-theme .hover\:bg-green-700:hover,
body.founding-day-theme .hover\:bg-emerald-700:hover {
    background-color: var(--fd-brown-dark) !important;
}

body.founding-day-theme .text-green-600,
body.founding-day-theme .text-green-500,
body.founding-day-theme .text-emerald-600,
body.founding-day-theme .text-emerald-500 {
    color: var(--fd-brown) !important;
}

/* ========================================
   User Dashboard - Stat Cards
   ======================================== */
body.founding-day-theme .user-stat-card__icon--teal {
    background: var(--fd-cream) !important;
    color: var(--fd-brown) !important;
}

body.founding-day-theme .user-stat-card__icon--blue,
body.founding-day-theme .user-stat-card__icon--green {
    background: var(--fd-cream) !important;
    color: var(--fd-brown) !important;
}

/* ========================================
   Card & Section Accents
   ======================================== */

body.founding-day-theme .rounded-lg.shadow-md,
body.founding-day-theme .rounded-xl.shadow-md,
body.founding-day-theme .admin-card,
body.founding-day-theme .bg-white.rounded-lg,
body.founding-day-theme .bg-white.rounded-xl {
    border-top: 3px solid var(--fd-brown) !important;
}

body.founding-day-theme .admin-stat-card {
    background: linear-gradient(135deg, #FFFFFF 0%, var(--fd-cream) 100%) !important;
    border-top: 3px solid var(--fd-brown) !important;
}

/* User design system cards */
body.founding-day-theme .user-hero {
    border-color: var(--fd-tan) !important;
}

body.founding-day-theme .user-card {
    border-top: 3px solid var(--fd-brown) !important;
}

/* ========================================
   Sidebar Accents
   ======================================== */
body.founding-day-theme .sidebar-item.active,
body.founding-day-theme .sidebar-item:hover {
    border-color: var(--fd-brown) !important;
}

body.founding-day-theme .sidebar__nav-item.active {
    background: var(--fd-cream) !important;
    border-right-color: var(--fd-brown) !important;
}

body.founding-day-theme .sidebar__nav-item.active .sidebar__nav-icon {
    color: var(--fd-brown) !important;
}

body.founding-day-theme .sidebar__nav-item.active .sidebar__nav-text {
    color: var(--fd-brown-dark) !important;
}

/* ========================================
   Links
   ======================================== */
body.founding-day-theme a.text-blue-600,
body.founding-day-theme a.text-indigo-600,
body.founding-day-theme a.text-teal-600 {
    color: var(--fd-brown) !important;
}

body.founding-day-theme a.text-blue-600:hover,
body.founding-day-theme a.text-indigo-600:hover,
body.founding-day-theme a.text-teal-600:hover {
    color: var(--fd-brown-dark) !important;
}

/* ========================================
   Toggle Switches
   ======================================== */
body.founding-day-theme .toggle-checkbox:checked {
    background-color: var(--fd-brown) !important;
    border-color: var(--fd-brown) !important;
}

/* ========================================
   Progress Bars
   ======================================== */
body.founding-day-theme .bg-blue-600[style*="width"],
body.founding-day-theme .bg-green-500[style*="width"],
body.founding-day-theme .bg-emerald-500[style*="width"],
body.founding-day-theme .bg-teal-500[style*="width"] {
    background-color: var(--fd-brown) !important;
}

/* ========================================
   Public Pages - Header & Navbar
   ======================================== */
body.founding-day-theme .navbar,
body.founding-day-theme nav.bg-white {
    border-bottom: 2px solid var(--fd-tan) !important;
}

/* ========================================
   Topbar Accent
   ======================================== */
body.founding-day-theme .topbar {
    border-bottom: 2px solid var(--fd-tan) !important;
}

/* ========================================
   Buttons - User Design System
   ======================================== */
body.founding-day-theme .user-btn--primary {
    background: var(--fd-brown) !important;
    border-color: var(--fd-brown) !important;
}

body.founding-day-theme .user-btn--primary:hover {
    background: var(--fd-brown-dark) !important;
}

body.founding-day-theme .user-btn--outline {
    border-color: var(--fd-brown) !important;
    color: var(--fd-brown) !important;
}

body.founding-day-theme .user-btn--outline:hover {
    background: var(--fd-cream) !important;
}

/* ========================================
   Mobile Responsive
   ======================================== */
@media (max-width: 768px) {
    .founding-day-banner {
        padding: 8px 14px;
    }

    .founding-day-banner__content {
        gap: 8px;
    }

    .founding-day-banner__text {
        font-size: 0.85rem;
    }

    .founding-day-banner__logo {
        height: 28px !important;
        max-height: 28px !important;
    }

    .founding-day-banner__icon {
        height: 18px;
        width: 18px;
    }

    .founding-day-banner__year {
        font-size: 0.72rem;
        padding: 2px 10px;
    }

    .founding-day-banner__symbols {
        gap: 6px;
    }

    .founding-day-banner__sep {
        display: none;
    }
}

@media (max-width: 480px) {
    .founding-day-banner {
        padding: 7px 10px;
    }

    .founding-day-banner__text {
        font-size: 0.8rem;
    }

    .founding-day-banner__logo {
        height: 24px !important;
        max-height: 24px !important;
    }

    .founding-day-banner__symbols {
        display: none;
    }
}

/* ========================================
   Print: Hide banner and reset colors
   ======================================== */
@media print {
    .founding-day-banner,
    .founding-day-banner__border {
        display: none !important;
    }

    body.founding-day-theme {
        background-color: white !important;
    }
}