/* ═══════════════════════════════════════════════════════════
   Maktab Kauzariyya — Global Stylesheet
   Brand Identity: Quicksand + Urbanist · Teal/Green Palette
   ═══════════════════════════════════════════════════════════ */

/* ─── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Urbanist:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap');

/* ─── Brand CSS Custom Properties ──────────────────────────── */
:root {
    --cream:        #ecf3d6;
    --cream-light:  #f1f6d0;
    --cyan-light:   #a7ebf3;
    --green-fresh:  #6dcc8d;
    --teal-mid:     #41aebd;
    --teal-dark:    #3e6d6c;
    --navy:         #123b47;
    --navy-deep:    #0e2e38;
    --font-main:    'Quicksand', sans-serif;
    --font-italic:  'Urbanist', sans-serif;
}

/* ─── Base font override ────────────────────────────────────── */
html, body, input, button, select, textarea { font-family: var(--font-main); }

/* ═══════════════════════════════════════════════════════════
   1. Blob Animations
   ═══════════════════════════════════════════════════════════ */
@keyframes morph-blob-1 {
    0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; transform: translate(0, 0) scale(1); }
    33%       { border-radius: 70% 30% 52% 48% / 60% 40% 60% 40%; transform: translate(60px, 40px) scale(1.1); }
    66%       { border-radius: 50% 50% 30% 70% / 50% 60% 40% 50%; transform: translate(-30px, 60px) scale(0.9); }
}
@keyframes morph-blob-2 {
    0%, 100% { border-radius: 70% 30% 52% 48% / 60% 40% 60% 40%; transform: translate(0, 0) scale(1); }
    50%       { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; transform: translate(-60px, -40px) scale(1.15); }
}
@keyframes morph-blob-3 {
    0%, 100% { border-radius: 50% 50% 30% 70% / 50% 60% 40% 50%; transform: translate(0, 0) scale(1); }
    50%       { border-radius: 70% 30% 52% 48% / 60% 40% 60% 40%; transform: translate(80px, -120px) scale(1.1); }
}
.animate-blob-1 { animation: morph-blob-1 25s infinite alternate ease-in-out; }
.animate-blob-2 { animation: morph-blob-2 20s infinite alternate ease-in-out; }
.animate-blob-3 { animation: morph-blob-3 22s infinite alternate ease-in-out; }

/* ═══════════════════════════════════════════════════════════
   2. Glass Utility Classes
   ═══════════════════════════════════════════════════════════ */
.glass-panel {
    background: rgba(109, 204, 141, 0.04);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(109, 204, 141, 0.12);
    box-shadow: 0 8px 32px 0 rgba(14, 46, 56, 0.4);
}
.glass-card {
    background: rgba(109, 204, 141, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(109, 204, 141, 0.08);
    box-shadow: 0 4px 20px 0 rgba(14, 46, 56, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
    background: rgba(109, 204, 141, 0.07);
    border-color: rgba(109, 204, 141, 0.18);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px 0 rgba(14, 46, 56, 0.3);
}
.glass-navbar {
    background: rgba(18, 59, 71, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(109, 204, 141, 0.1);
}
/* High-Visibility Form Input Styling */
input, textarea, select, .form-control {
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-family: var(--font-main);
}

input.bg-white, select.bg-white, textarea.bg-white,
.input-white,
.glass-panel input:not(.glass-dark) {
    background-color: #ffffff !important;
    color: #0f172a !important;
    -webkit-text-fill-color: #0f172a !important;
    font-weight: 600 !important;
}

input.bg-white::placeholder,
.glass-panel input::placeholder {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    opacity: 1;
}

/* Browser autofill styling: Always bold dark text */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: #0f172a !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════
   3. Select Dropdown Override
   ═══════════════════════════════════════════════════════════ */
select option {
    background-color: #0e2e38 !important;
    color: var(--cream) !important;
}

/* ═══════════════════════════════════════════════════════════
   4. Sidebar Tab Navigation
   ═══════════════════════════════════════════════════════════ */
.tab-btn { position: relative; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.tab-btn:hover { transform: translateX(4px); }
.tab-btn.active {
    background: linear-gradient(135deg, rgba(109, 204, 141, 0.12), rgba(109, 204, 141, 0.03)) !important;
    border-color: rgba(109, 204, 141, 0.2) !important;
    color: var(--cream) !important;
    box-shadow: 0 4px 12px rgba(109, 204, 141, 0.08);
}
.tab-btn.active::before {
    content: '';
    position: absolute;
    left: 0; top: 25%;
    height: 50%; width: 3.5px;
    background: var(--green-fresh);
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 8px var(--green-fresh);
}

/* ═══════════════════════════════════════════════════════════
   5. Specular Highlight Card
   ═══════════════════════════════════════════════════════════ */
.glass-highlight::after {
    content: '';
    position: absolute;
    top: 0; left: -150%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(167, 235, 243, 0.1), transparent);
    transform: skewX(-25deg);
    transition: 0.75s;
}
.glass-highlight:hover::after { left: 150%; }

/* ═══════════════════════════════════════════════════════════
   6. Brand Gradient Utilities
   ═══════════════════════════════════════════════════════════ */
.brand-gradient { background: linear-gradient(135deg, var(--green-fresh), var(--teal-mid)); }
.brand-text-gradient {
    background: linear-gradient(135deg, var(--green-fresh), var(--cyan-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ═══════════════════════════════════════════════════════════
   7. Branded page treatments
   ═══════════════════════════════════════════════════════════ */
.auth-page {
    background:
        linear-gradient(90deg, rgba(7, 28, 34, 0.88) 0%, rgba(7, 28, 34, 0.68) 48%, rgba(7, 28, 34, 0.46) 100%),
        url('../images/auth-page-5.jpg') center / cover fixed;
}
.auth-card {
    background: rgba(9, 39, 46, 0.82);
    border-color: rgba(167, 235, 243, 0.2);
    box-shadow: 0 24px 70px rgba(3, 18, 23, 0.5);
}
.home-page {
    background:
        radial-gradient(circle at 80% 8%, rgba(109, 204, 141, 0.12), transparent 28rem),
        linear-gradient(135deg, var(--navy-deep), var(--navy) 52%, #0b3038);
}
.home-hero {
    background:
        linear-gradient(90deg, rgba(9, 39, 46, 0.98) 0%, rgba(9, 39, 46, 0.82) 50%, rgba(9, 39, 46, 0.18) 100%),
        url('../images/brand-pattern-dark.png') right center / 560px,
        var(--navy);
    border-color: rgba(167, 235, 243, 0.16);
}
.home-hero-mark {
    background: rgba(236, 243, 214, 0.94);
    border: 8px solid rgba(109, 204, 141, 0.18);
    box-shadow: 0 20px 45px rgba(3, 18, 23, 0.32);
}
.site-footer {
    background:
        linear-gradient(90deg, rgba(7, 28, 34, 0.96) 0%, rgba(7, 28, 34, 0.88) 52%, rgba(7, 28, 34, 0.68) 100%),
        url('../images/footer-page-6.jpg') center / cover;
    border-top: 1px solid rgba(167, 235, 243, 0.12);
}
.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(236, 243, 214, 0.64);
    transition: color 0.2s ease, transform 0.2s ease;
}
.footer-link i {
    width: 1.25rem;
    text-align: center;
    color: var(--green-fresh);
}
.footer-link:hover {
    color: var(--cream);
    transform: translateX(3px);
}


/* ═══════════════════════════════════════════════════════════
    8. Scrollbar
   ═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(109, 204, 141, 0.25); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(109, 204, 141, 0.45); }

/* ═══════════════════════════════════════════════════════════
    9. Brand override — remap Tailwind emerald/blue to brand palette
   (Coordinator pages still use old Tailwind classes; override here)
   ═══════════════════════════════════════════════════════════ */

/* Gradient buttons (from-emerald-400 to-blue-500) → brand gradient */
[class*="from-emerald-400"][class*="to-blue-5"] {
    background: linear-gradient(135deg, #6dcc8d, #41aebd) !important;
    color: #0e2e38 !important;
}
[class*="from-emerald-400"][class*="to-blue-4"] {
    background: linear-gradient(135deg, #6dcc8d, #41aebd) !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Solid emerald backgrounds → brand green tint */
[class*="bg-emerald-500\/10"] { background: rgba(109, 204, 141, 0.08) !important; }
[class*="bg-emerald-500\/20"] { background: rgba(109, 204, 141, 0.14) !important; }
/* Emerald text → brand green */
[class*="text-emerald-4"] { color: #6dcc8d !important; }
/* Blue text → brand teal */
[class*="text-blue-4"] { color: #41aebd !important; }
/* Modal overlay bg-slate-950 → brand navy */
[class*="bg-slate-950\/60"] { background: rgba(14, 46, 56, 0.75) !important; }
[class*="bg-slate-950\/40"] { background: rgba(14, 46, 56, 0.5) !important; }
/* Emerald borders → brand green border */
[class*="border-emerald-5"] { border-color: rgba(109, 204, 141, 0.25) !important; }
/* from-blue-5 to-indigo-5 avatar/icon gradient → brand teal */
[class*="from-blue-5"][class*="to-indigo-5"] {
    background: linear-gradient(135deg, #41aebd, #3e6d6c) !important;
}
/* ═══════════════════════════════════════════════════════════
   10. Text Readability & Contrast Enhancements
   ═══════════════════════════════════════════════════════════ */
.glass-panel p,
.glass-card p,
.glass-panel .text-slate-300,
.glass-card .text-slate-300,
.text-slate-300 {
    color: #dcefe3 !important;
}

.glass-panel .text-slate-400,
.glass-card .text-slate-400,
.text-slate-400 {
    color: #9ecdb6 !important;
}

.glass-panel h1, .glass-panel h2, .glass-panel h3, .glass-panel h4,
.glass-card h1, .glass-card h2, .glass-card h3, .glass-card h4 {
    color: #ffffff;
}