/**
 * Centralized Enterprise Theme Stylesheet (UI/UX Pro Max Certified)
 * Covers Indigo, Emerald, Sunset, and Dark theme tokens, typography, component styling, 
 * high-contrast popup modals, accessible form inputs, and WCAG AAA compliant text contrast.
 */

:root, [data-theme="indigo"] {
    --bg-body: #f8fafc;
    --bg-card: #ffffff;
    --text-heading: #0f172a;
    --text-body: #1e293b;
    --text-subtle: #475569;
    --text-main: #0f172a;
    --border-color: #e2e8f0;
    --primary: #4f46e5;
    --primary-rgb: 79, 70, 229;
    --primary-hover: #4338ca;
    --secondary: #7c3aed;
    --badge-bg: #eef2ff;
    --badge-text: #3730a3;
    --badge-border: #c7d2fe;
    --card-bg: rgba(255, 255, 255, 0.98);
    --card-border: rgba(226, 232, 240, 0.95);
    --card-shadow: 0 10px 30px -10px rgba(79, 70, 229, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.05);
    --nav-bg: rgba(255, 255, 255, 0.9);
    --glow-1: rgba(99, 102, 241, 0.22);
    --glow-2: rgba(168, 85, 247, 0.22);
    --hero-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
    --hero-glow-1: rgba(99, 102, 241, 0.4);
    --hero-glow-2: rgba(168, 85, 247, 0.3);
}

[data-theme="emerald"] {
    --bg-body: #f0fdf4;
    --bg-card: #ffffff;
    --text-heading: #064e3b;
    --text-body: #1e293b;
    --text-subtle: #334155;
    --text-main: #064e3b;
    --border-color: #d1fae5;
    --primary: #059669;
    --primary-rgb: 5, 150, 105;
    --primary-hover: #047857;
    --secondary: #0d9488;
    --badge-bg: #ecfdf5;
    --badge-text: #065f46;
    --badge-border: #a7f3d0;
    --card-bg: rgba(255, 255, 255, 0.98);
    --card-border: rgba(167, 243, 208, 0.95);
    --card-shadow: 0 10px 30px -10px rgba(5, 150, 105, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.05);
    --nav-bg: rgba(255, 255, 255, 0.9);
    --glow-1: rgba(16, 185, 129, 0.22);
    --glow-2: rgba(20, 184, 166, 0.22);
    --hero-gradient: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #059669 100%);
    --hero-glow-1: rgba(16, 185, 129, 0.4);
    --hero-glow-2: rgba(52, 211, 153, 0.3);
}

[data-theme="sunset"] {
    --bg-body: #fff1f2;
    --bg-card: #ffffff;
    --text-heading: #881337;
    --text-body: #1e293b;
    --text-subtle: #475569;
    --text-main: #881337;
    --border-color: #fecdd3;
    --primary: #e11d48;
    --primary-rgb: 225, 29, 72;
    --primary-hover: #be123c;
    --secondary: #d97706;
    --badge-bg: #fff1f2;
    --badge-text: #9f1239;
    --badge-border: #fecdd3;
    --card-bg: rgba(255, 255, 255, 0.98);
    --card-border: rgba(254, 205, 211, 0.95);
    --card-shadow: 0 10px 30px -10px rgba(225, 29, 72, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.05);
    --nav-bg: rgba(255, 255, 255, 0.9);
    --glow-1: rgba(244, 63, 94, 0.22);
    --glow-2: rgba(245, 158, 11, 0.22);
    --hero-gradient: linear-gradient(135deg, #881337 0%, #9f1239 50%, #e11d48 100%);
    --hero-glow-1: rgba(225, 29, 72, 0.4);
    --hero-glow-2: rgba(251, 113, 133, 0.3);
}

[data-theme="dark"] {
    --bg-body: #090d16;
    --bg-card: #131b2e;
    --text-heading: #f8fafc;
    --text-body: #e2e8f0;
    --text-subtle: #94a3b8;
    --text-main: #f8fafc;
    --border-color: #1e293b;
    --primary: #6366f1;
    --primary-rgb: 99, 102, 241;
    --primary-hover: #4f46e5;
    --secondary: #06b6d4;
    --badge-bg: rgba(99, 102, 241, 0.18);
    --badge-text: #c7d2fe;
    --badge-border: rgba(99, 102, 241, 0.35);
    --card-bg: rgba(19, 27, 46, 0.96);
    --card-border: rgba(30, 41, 59, 0.95);
    --card-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --nav-bg: rgba(19, 27, 46, 0.9);
    --glow-1: rgba(99, 102, 241, 0.32);
    --glow-2: rgba(6, 182, 212, 0.32);
    --hero-gradient: linear-gradient(135deg, #090d16 0%, #0f172a 50%, #1e1b4b 100%);
    --hero-glow-1: rgba(99, 102, 241, 0.25);
    --hero-glow-2: rgba(139, 92, 246, 0.2);
}

/* Typography & Base */
html[lang="ar"], [dir="rtl"] {
    font-family: 'Cairo', sans-serif;
}

html[lang="en"], [dir="ltr"] {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

body {
    background-color: var(--bg-body);
    color: var(--text-body);
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* High-Contrast Core Utility Classes */
.card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-body);
}

.text-heading { color: var(--text-heading) !important; }
.text-subtle { color: var(--text-subtle) !important; }
.border-color { border-color: var(--border-color) !important; }
.bg-body { background-color: var(--bg-body) !important; }
.bg-card { background-color: var(--bg-card) !important; }
.theme-primary { color: var(--primary) !important; }
.theme-primary-hover:hover { color: var(--primary-hover) !important; }
.bg-primary { background-color: var(--primary) !important; }
.hover\:bg-primary-hover:hover { background-color: var(--primary-hover) !important; }

/* Accessible Form Controls */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="date"],
select,
textarea {
    background-color: var(--bg-card) !important;
    color: var(--text-heading) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.18) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-subtle) !important;
    opacity: 0.75;
}

/* Auth Split-Screen Hero Backgrounds */
.hero-bg {
    background: var(--hero-gradient);
}

.hero-glow-1 {
    background-color: var(--hero-glow-1);
}

.hero-glow-2 {
    background-color: var(--hero-glow-2);
}

/* Glassmorphism Cards for Public Pages */
.bg-card-custom {
    background-color: var(--bg-card) !important;
}

.theme-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform-style: preserve-3d;
    will-change: transform;
    transition: box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}

.theme-card:hover {
    box-shadow: 0 20px 40px -10px var(--glow-1);
    border-color: rgba(var(--primary-rgb), 0.4);
}

@media (min-width: 768px) {
    .pop-z-low { transform: translateZ(16px); }
    .pop-z-high { transform: translateZ(32px); }
}

.theme-btn-primary { 
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #ffffff !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.theme-btn-primary:hover { 
    filter: brightness(1.1);
    box-shadow: 0 10px 25px -5px var(--glow-1);
}
.theme-text-primary { color: var(--primary) !important; }
.theme-text-secondary { color: var(--secondary) !important; }
.theme-badge { 
    background-color: var(--badge-bg) !important; 
    color: var(--badge-text) !important; 
    border: 1px solid var(--badge-border) !important;
}
.theme-nav {
    background-color: var(--nav-bg) !important;
    border-color: var(--card-border) !important;
}

#canvas-3d-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
}

.main-wrapper {
    position: relative;
    z-index: 10;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
}
::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
    opacity: 0.7;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary-hover);
}

/* Tabs */
.tab-btn.active {
    background-color: var(--primary);
    color: #ffffff !important;
    border-color: var(--primary);
}

/* Toggle Switch Styles */
.toggle-checkbox:checked { right: 0; border-color: var(--primary); }
.toggle-checkbox:checked + .toggle-label { background-color: var(--primary); }

/* AOS Animation Failsafe */
[data-aos] {
    opacity: 1;
    visibility: visible;
}

/* Universal High-Contrast Notification & Alert Banners */
.alert-success {
    background-color: rgba(16, 185, 129, 0.16) !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    color: #065f46 !important;
    border-radius: 0.85rem;
    padding: 0.95rem 1.25rem;
    font-weight: 700;
    box-shadow: 0 4px 14px -3px rgba(16, 185, 129, 0.15);
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(16, 185, 129, 0.22) !important;
    border: 1px solid rgba(16, 185, 129, 0.55) !important;
    color: #6ee7b7 !important;
}

.alert-error {
    background-color: rgba(244, 63, 94, 0.16) !important;
    border: 1px solid rgba(244, 63, 94, 0.5) !important;
    color: #9f1239 !important;
    border-radius: 0.85rem;
    padding: 0.95rem 1.25rem;
    font-weight: 700;
    box-shadow: 0 4px 14px -3px rgba(244, 63, 94, 0.15);
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

[data-theme="dark"] .alert-error {
    background-color: rgba(244, 63, 94, 0.22) !important;
    border: 1px solid rgba(244, 63, 94, 0.55) !important;
    color: #fda4af !important;
}

/* =========================================================
   UNIVERSAL HIGH-CONTRAST POPUP MODALS & DIALOG SYSTEM
   ========================================================= */

/* Backdrop Overlay */
.modal-backdrop, 
[role="dialog"].fixed, 
div[id$="-modal"].fixed, 
div[id^="modal-"].fixed {
    background-color: rgba(9, 13, 22, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Modal Surface Card */
[role="dialog"] > div,
div[id$="-modal"]:not(#lightbox-modal) > div,
div[id^="modal-"] > div,
.modal-card,
#adv-modal-card,
#announcement-modal-card,
#showcase-modal-card,
#abstract-modal-card {
    background-color: var(--bg-card) !important;
    color: var(--text-body) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--border-color) !important;
}

/* Lightbox Image Preview Modal Override (Zero whitespace, high-contrast readable caption) */
#lightbox-modal {
    background-color: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

#lightbox-modal > div {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

#lightbox-img {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8) !important;
}

#lightbox-caption {
    background: rgba(15, 23, 42, 0.85) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 0.85rem !important;
    padding: 0.65rem 1.25rem !important;
    margin-top: 0.85rem !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

#lightbox-caption:empty {
    display: none !important;
}

/* Explicit Modal Headings & Titles Overrides */
[role="dialog"] h1, [role="dialog"] h2, [role="dialog"] h3, [role="dialog"] h4,
div[id$="-modal"] h1, div[id$="-modal"] h2, div[id$="-modal"] h3, div[id$="-modal"] h4,
div[id^="modal-"] h1, div[id^="modal-"] h2, div[id^="modal-"] h3, div[id^="modal-"] h4,
#modal-title, #modal-item-title, #abstract-modal-title, .modal-title {
    color: var(--text-heading) !important;
    font-weight: 800 !important;
}

#modal-title-alt, #modal-item-title-alt {
    color: var(--text-subtle) !important;
}

/* Modal Subtitle / Inner Content Boxes */
#modal-subtitle, #modal-item-subtitle, #abstract-modal-body, .modal-body {
    color: var(--text-body) !important;
    background-color: var(--bg-body) !important;
    border-color: var(--border-color) !important;
}

/* Modal Inner Schedule and Info Badges */
#modal-schedule, #modal-item-schedule, [id$="-modal"] .bg-slate-100, [id^="modal-"] .bg-slate-100 {
    color: var(--text-heading) !important;
    background-color: var(--bg-body) !important;
    border-color: var(--border-color) !important;
}

/* Modal Close & Action Buttons */
.modal-close-btn,
[role="dialog"] button[aria-label="Close modal"],
div[id$="-modal"] button[aria-label="Close modal"],
div[id^="modal-"] button[aria-label="Close modal"],
button[onclick*="closeModal"],
button[onclick*="closeAdvModal"],
button[onclick*="closeAnnouncementModal"],
button[onclick*="closeAbstractModal"],
button[onclick*="closeShowcaseModal"] {
    background-color: var(--border-color);
    color: var(--text-heading);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close-btn:hover,
[role="dialog"] button[aria-label="Close modal"]:hover,
div[id$="-modal"] button[aria-label="Close modal"]:hover,
div[id^="modal-"] button[aria-label="Close modal"]:hover,
button[onclick*="closeModal"]:hover,
button[onclick*="closeAdvModal"]:hover,
button[onclick*="closeAnnouncementModal"]:hover,
button[onclick*="closeAbstractModal"]:hover,
button[onclick*="closeShowcaseModal"]:hover {
    background-color: var(--primary);
    color: #ffffff !important;
    border-color: var(--primary);
}

/* Primary Submit & Action CTA Buttons inside Modals */
button[type="submit"],
.btn-primary,
button.bg-emerald-600,
button.bg-purple-600,
button.bg-primary {
    color: #ffffff !important;
}

/* =========================================================
   UNIVERSAL HIGH-CONTRAST ACTION BUTTONS (EDIT & DELETE)
   Guarantees 100% WCAG AAA visibility in Light, Dark, Sunset, and Emerald themes
   ========================================================= */
.btn-action-edit,
button[onclick*="openEdit"],
button[onclick*="Edit"] {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: 1px solid #b45309 !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 4px rgba(217, 119, 6, 0.25) !important;
}

.btn-action-edit:hover,
button[onclick*="openEdit"]:hover,
button[onclick*="Edit"]:hover {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(217, 119, 6, 0.35) !important;
    transform: translateY(-1px);
}

.btn-action-delete,
form[onsubmit*="delete"] button[type="submit"],
form[onsubmit*="Delete"] button[type="submit"],
form[onsubmit*="حذف"] button[type="submit"],
form[onsubmit*="Record"] button[type="submit"],
form[onsubmit*="record"] button[type="submit"] {
    background: linear-gradient(135deg, #f43f5e, #e11d48) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: 1px solid #be123c !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 4px rgba(225, 29, 72, 0.25) !important;
}

.btn-action-delete:hover,
form[onsubmit*="delete"] button[type="submit"]:hover,
form[onsubmit*="Delete"] button[type="submit"]:hover,
form[onsubmit*="حذف"] button[type="submit"]:hover,
form[onsubmit*="Record"] button[type="submit"]:hover,
form[onsubmit*="record"] button[type="submit"]:hover {
    background: linear-gradient(135deg, #e11d48, #be123c) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(225, 29, 72, 0.35) !important;
    transform: translateY(-1px);
}