/* ============================================================
   FATAN SUBJECT THEMES SYSTEM (نظام ثيمات المواد الدراسية)
   Supports 5 Signature Subject Themes:
   1. Genius (عباقرة) - Cyber Indigo & Radiant Gold
   2. Mathematics (رياضيات) - Analytical Emerald & Geometry Teal
   3. Physics (فيزياء) - Quantum Cyan & Cosmic Particle Blue
   4. Social Studies (دراسات) - Imperial Amber & Desert Terracotta
   5. Arabic (لغة عربية) - Andalusian Emerald & Diwan Ruby Gold
   ============================================================ */

:root {
  /* Default: Genius (عباقرة) */
  --subj-primary: #4f46e5;
  --subj-primary-hover: #4338ca;
  --subj-primary-light: #eef2ff;
  --subj-secondary: #7c3aed;
  --subj-accent: #f59e0b;
  --subj-glow: rgba(79, 70, 229, 0.25);
  --subj-border: rgba(99, 102, 241, 0.25);
  --subj-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --subj-gradient-subtle: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(124, 58, 237, 0.05));
  --subj-badge-bg: rgba(79, 70, 229, 0.12);
  --subj-badge-text: #4f46e5;
  --subj-pattern-opacity: 0.04;
  --subj-header-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
  --subj-tag-name: "عباقرة";
}

/* 1. Genius Theme (ثيم عباقرة) */
html[data-subject-theme="genius"],
body[data-subject-theme="genius"] {
  --subj-primary: #4f46e5;
  --subj-primary-hover: #4338ca;
  --subj-primary-light: #eef2ff;
  --subj-secondary: #7c3aed;
  --subj-accent: #f59e0b;
  --subj-glow: rgba(79, 70, 229, 0.25);
  --subj-border: rgba(99, 102, 241, 0.25);
  --subj-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --subj-gradient-subtle: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(124, 58, 237, 0.06));
  --subj-badge-bg: rgba(79, 70, 229, 0.12);
  --subj-badge-text: #4f46e5;
  --subj-pattern-opacity: 0.04;
  --subj-header-gradient: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
  --subj-tag-name: "عباقرة";
}

/* 2. Math Theme (ثيم رياضيات) */
html[data-subject-theme="math"],
body[data-subject-theme="math"] {
  --subj-primary: #059669;
  --subj-primary-hover: #047857;
  --subj-primary-light: #ecfdf5;
  --subj-secondary: #0d9488;
  --subj-accent: #10b981;
  --subj-glow: rgba(16, 185, 129, 0.25);
  --subj-border: rgba(16, 185, 129, 0.28);
  --subj-gradient: linear-gradient(135deg, #059669 0%, #0d9488 100%);
  --subj-gradient-subtle: linear-gradient(135deg, rgba(5, 150, 105, 0.1), rgba(13, 148, 136, 0.06));
  --subj-badge-bg: rgba(5, 150, 105, 0.15);
  --subj-badge-text: #059669;
  --subj-pattern-opacity: 0.06;
  --subj-header-gradient: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #047857 100%);
  --subj-tag-name: "رياضيات";
}

/* 3. Physics Theme (ثيم فيزياء) */
html[data-subject-theme="physics"],
body[data-subject-theme="physics"] {
  --subj-primary: #0284c7;
  --subj-primary-hover: #0369a1;
  --subj-primary-light: #f0f9ff;
  --subj-secondary: #0891b2;
  --subj-accent: #38bdf8;
  --subj-glow: rgba(14, 165, 233, 0.28);
  --subj-border: rgba(14, 165, 233, 0.3);
  --subj-gradient: linear-gradient(135deg, #0284c7 0%, #0891b2 100%);
  --subj-gradient-subtle: linear-gradient(135deg, rgba(2, 132, 199, 0.1), rgba(8, 145, 178, 0.06));
  --subj-badge-bg: rgba(2, 132, 199, 0.15);
  --subj-badge-text: #0284c7;
  --subj-pattern-opacity: 0.05;
  --subj-header-gradient: linear-gradient(135deg, #082f49 0%, #0c4a6e 50%, #0369a1 100%);
  --subj-tag-name: "فيزياء";
}

/* 4. Social Studies Theme (ثيم دراسات) */
html[data-subject-theme="social"],
body[data-subject-theme="social"] {
  --subj-primary: #d97706;
  --subj-primary-hover: #b45309;
  --subj-primary-light: #fffbeb;
  --subj-secondary: #ea580c;
  --subj-accent: #f59e0b;
  --subj-glow: rgba(217, 119, 6, 0.25);
  --subj-border: rgba(217, 119, 6, 0.28);
  --subj-gradient: linear-gradient(135deg, #d97706 0%, #ea580c 100%);
  --subj-gradient-subtle: linear-gradient(135deg, rgba(217, 119, 6, 0.1), rgba(234, 88, 12, 0.06));
  --subj-badge-bg: rgba(217, 119, 6, 0.15);
  --subj-badge-text: #b45309;
  --subj-pattern-opacity: 0.05;
  --subj-header-gradient: linear-gradient(135deg, #451a03 0%, #78350f 50%, #9a3412 100%);
  --subj-tag-name: "دراسات";
}

/* 5. Arabic Language Theme (ثيم عربي) */
html[data-subject-theme="arabic"],
body[data-subject-theme="arabic"] {
  --subj-primary: #047857;
  --subj-primary-hover: #065f46;
  --subj-primary-light: #ecfdf5;
  --subj-secondary: #831843;
  --subj-accent: #c2410c;
  --subj-glow: rgba(4, 120, 87, 0.25);
  --subj-border: rgba(4, 120, 87, 0.28);
  --subj-gradient: linear-gradient(135deg, #047857 0%, #831843 100%);
  --subj-gradient-subtle: linear-gradient(135deg, rgba(4, 120, 87, 0.1), rgba(131, 24, 67, 0.06));
  --subj-badge-bg: rgba(4, 120, 87, 0.15);
  --subj-badge-text: #047857;
  --subj-pattern-opacity: 0.05;
  --subj-header-gradient: linear-gradient(135deg, #022c22 0%, #064e3b 50%, #047857 100%);
  --subj-tag-name: "لغة عربية";
}

/* ============================================================
   GLOBAL RE-SKINNING UTILITIES ACROSS THE PLATFORM
   ============================================================ */

/* Ambient Body Tint */
body[data-subject-theme="genius"] {
  background-image: radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.07) 0%, transparent 60%),
                    radial-gradient(circle at 85% 85%, rgba(245, 158, 11, 0.05) 0%, transparent 60%);
  background-attachment: fixed;
}
body[data-subject-theme="math"] {
  background-image: radial-gradient(circle at 10% 20%, rgba(16, 185, 129, 0.08) 0%, transparent 55%),
                    radial-gradient(circle at 90% 80%, rgba(13, 148, 136, 0.06) 0%, transparent 55%);
  background-attachment: fixed;
}
body[data-subject-theme="physics"] {
  background-image: radial-gradient(circle at 20% 20%, rgba(14, 165, 233, 0.09) 0%, transparent 60%),
                    radial-gradient(circle at 80% 80%, rgba(56, 189, 248, 0.07) 0%, transparent 60%);
  background-attachment: fixed;
}
body[data-subject-theme="social"] {
  background-image: radial-gradient(circle at 15% 15%, rgba(217, 119, 6, 0.08) 0%, transparent 55%),
                    radial-gradient(circle at 85% 85%, rgba(234, 88, 12, 0.06) 0%, transparent 55%);
  background-attachment: fixed;
}
body[data-subject-theme="arabic"] {
  background-image: radial-gradient(circle at 10% 15%, rgba(4, 120, 87, 0.08) 0%, transparent 60%),
                    radial-gradient(circle at 90% 85%, rgba(131, 24, 67, 0.06) 0%, transparent 60%);
  background-attachment: fixed;
}

/* Header & Navbar Dynamic Accent */
[data-subject-theme] nav#mainNavbar,
[data-subject-theme] .app-header {
  border-bottom-color: var(--subj-border) !important;
}

/* Dynamic Brand Ribbon / Badge */
.subj-theme-pill-badge {
  background: var(--subj-gradient);
  color: #ffffff;
  box-shadow: 0 2px 10px var(--subj-glow);
}

/* Sidebar Active Button Override */
[data-subject-theme] .sidebar-nav-btn.active {
  background: var(--subj-gradient-subtle) !important;
  color: var(--subj-primary) !important;
  border-inline-start: 3px solid var(--subj-primary) !important;
  box-shadow: inset 0 0 16px var(--subj-glow);
}
[data-subject-theme] .sidebar-nav-btn.active .sidebar-icon-box {
  background: var(--subj-gradient) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px var(--subj-glow) !important;
}

/* Primary Action Buttons */
[data-subject-theme] .btn-primary-themed {
  background: var(--subj-gradient) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px var(--subj-glow) !important;
}
[data-subject-theme] .btn-primary-themed:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Quick Floating Dock Active Item */
[data-subject-theme] .dock-btn.active,
[data-subject-theme] .quick-access-pill.active {
  background: var(--subj-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px var(--subj-glow) !important;
}

/* ============================================================
   CREATIVE SIDEBAR BUTTONS & ICONS STYLING
   ============================================================ */

.sidebar-nav-btn {
  position: relative;
  overflow: visible;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0.55rem 0.65rem;
  border-radius: 1rem;
  border: 1px solid transparent;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

#appSidebar:not([data-collapsed="true"]) {
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
}

#appSidebar[data-collapsed="true"] {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
}

.sidebar-label {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-badge {
  margin-inline-start: auto !important;
  flex-shrink: 0 !important;
}

.sidebar-nav-btn:hover {
  transform: translateX(-2px);
  border-color: rgba(226, 232, 240, 0.8);
}

html.dark .sidebar-nav-btn:hover {
  border-color: rgba(51, 65, 85, 0.8);
}

/* Creative Icon Box */
.sidebar-icon-box {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  color: #ffffff !important;
}

.sidebar-icon-box svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  display: block;
}

.sidebar-icon-box.ib-indigo { background: linear-gradient(135deg, #4f46e5, #7c3aed) !important; box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important; }
.sidebar-icon-box.ib-violet { background: linear-gradient(135deg, #8b5cf6, #d946ef) !important; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important; }
.sidebar-icon-box.ib-pink { background: linear-gradient(135deg, #ec4899, #f43f5e) !important; box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3) !important; }
.sidebar-icon-box.ib-emerald { background: linear-gradient(135deg, #10b981, #0d9488) !important; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important; }
.sidebar-icon-box.ib-blue { background: linear-gradient(135deg, #3b82f6, #06b6d4) !important; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important; }
.sidebar-icon-box.ib-amber { background: linear-gradient(135deg, #f59e0b, #ea580c) !important; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important; }
.sidebar-icon-box.ib-yellow { background: linear-gradient(135deg, #f59e0b, #d97706) !important; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important; }
.sidebar-icon-box.ib-sky { background: linear-gradient(135deg, #0ea5e9, #2563eb) !important; box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3) !important; }
.sidebar-icon-box.ib-purple { background: linear-gradient(135deg, #a855f7, #6366f1) !important; box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3) !important; }
.sidebar-icon-box.ib-teal { background: linear-gradient(135deg, #14b8a6, #059669) !important; box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3) !important; }
.sidebar-icon-box.ib-slate { background: linear-gradient(135deg, #64748b, #475569) !important; box-shadow: 0 4px 12px rgba(100, 116, 139, 0.3) !important; }

.sidebar-nav-btn:hover .sidebar-icon-box {
  transform: scale(1.1) rotate(-3deg);
}

.sidebar-nav-btn:active .sidebar-icon-box {
  transform: scale(0.96);
}

/* Subtle Glass / Neon Underlay */
.sidebar-icon-box::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: inherit;
  filter: blur(6px);
  opacity: 0.35;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.sidebar-nav-btn:hover .sidebar-icon-box::after {
  opacity: 0.65;
  filter: blur(9px);
}

/* Badges that never overlap or clip */
.sidebar-badge {
  margin-inline-start: auto;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 9999px;
  white-space: nowrap;
  letter-spacing: 0.2px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.sidebar-nav-btn:hover .sidebar-badge {
  transform: scale(1.05);
}

/* ============================================================
   SUBJECT THEMES STUDIO MODAL & SELECTOR
   ============================================================ */

.theme-card-option {
  position: relative;
  cursor: pointer;
  border-radius: 1.25rem;
  border: 2px solid transparent;
  padding: 1.25rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
}

html.dark .theme-card-option {
  background: rgba(15, 23, 42, 0.85);
}

.theme-card-option:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
}

.theme-card-option.active {
  border-color: var(--subj-primary);
  box-shadow: 0 12px 28px var(--subj-glow);
}

.theme-card-swatch {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.6rem;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ============================================================
   HERO EXECUTIVE LAUNCHPAD & HEADER DOCK (المظهر الإبداعي لواجهة الموقع)
   ============================================================ */

/* 1. Header Quick Dock: Compact, unified, and soothing to the eyes */
.header-quick-dock {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.header-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 38px;
  padding: 0 0.85rem;
  border-radius: 0.85rem;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
  text-decoration: none;
  position: relative;
}

.header-action-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.header-action-pill:active {
  transform: scale(0.97);
}

/* 2. Master Hero Button with Shimmer & Glow */
.hero-master-btn {
  position: relative;
  overflow: hidden;
  background: var(--subj-gradient, linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%)) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px var(--subj-glow, rgba(79, 70, 229, 0.35)) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 1.25rem;
  padding: 0.75rem 1.6rem;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 900;
  font-size: 1.05rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  text-decoration: none;
}

.hero-master-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 36px var(--subj-glow, rgba(79, 70, 229, 0.45)) !important;
}

.hero-master-btn:active {
  transform: scale(0.98);
}

.hero-master-btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: rotate(25deg);
  animation: heroShine 4s infinite ease-in-out;
}

@keyframes heroShine {
  0% { left: -60%; }
  35% { left: 140%; }
  100% { left: 140%; }
}

/* 3. Creative Hero Companion Pods (No giant text duplication) */
.hero-companion-pod {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.95rem;
  border-radius: 1.15rem;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 800;
  color: #1e293b;
}

html.dark .hero-companion-pod {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(51, 65, 85, 0.8);
  color: #f1f5f9;
}

.hero-companion-pod:hover {
  transform: translateY(-3px);
  border-color: var(--subj-primary, #6366f1);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* 4. Metric KPI Card Enhancement */
.hero-kpi-card {
  position: relative;
  overflow: hidden;
  padding: 0.9rem 1.1rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
  min-width: 125px;
}

html.dark .hero-kpi-card {
  background: rgba(15, 23, 42, 0.8);
  border-color: rgba(51, 65, 85, 0.8);
}

.hero-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
}

/* Individual Header Action Pill Variations (Harmonious, Consistent, Eye-Friendly) */
.header-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 38px;
  padding: 0 0.85rem;
  border-radius: 0.85rem;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  border: 1.5px solid transparent;
  user-select: none;
  text-decoration: none !important;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.header-action-pill:hover {
  transform: translateY(-2px);
}

.header-action-pill:active {
  transform: scale(0.97);
}

/* Ensure inner text inherits the button's readable color */
.header-action-pill span,
.header-action-pill i {
  color: inherit;
}

/* 1. قمرة الحصة (Live Lesson Cockpit) - Primary Star Action */
.header-pill-cockpit {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 12px rgba(79, 70, 229, 0.3) !important;
}
.header-pill-cockpit span,
.header-pill-cockpit i {
  color: #ffffff !important;
}
.header-pill-cockpit:hover {
  background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4) !important;
}

/* 2. السبورة الذكية (Smart Whiteboard) - Sky Blue Soft Glass */
.header-pill-whiteboard {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: #bae6fd !important;
  color: #0369a1 !important;
}
html.dark .header-pill-whiteboard {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: rgba(14, 165, 233, 0.4) !important;
  color: #7dd3fc !important;
}
.header-pill-whiteboard:hover {
  background: #f0f9ff !important;
  border-color: #38bdf8 !important;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.18) !important;
}
html.dark .header-pill-whiteboard:hover {
  background: rgba(14, 165, 233, 0.15) !important;
}

/* 3. معمل المجسمات 3D (3D Solids Lab) - Warm Amber Soft Glass */
.header-pill-3d {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: #fde68a !important;
  color: #b45309 !important;
}
html.dark .header-pill-3d {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  color: #fde68a !important;
}
.header-pill-3d:hover {
  background: #fffbeb !important;
  border-color: #f59e0b !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.18) !important;
}
html.dark .header-pill-3d:hover {
  background: rgba(245, 158, 11, 0.15) !important;
}

/* 4. براعم فطن (Early Childhood) - Fresh Mint Soft Glass (100% Readable Text) */
.header-pill-baraem {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
}
html.dark .header-pill-baraem {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #6ee7b7 !important;
}
.header-pill-baraem:hover {
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.18) !important;
}
html.dark .header-pill-baraem:hover {
  background: rgba(16, 185, 129, 0.15) !important;
}

/* 5. بث لاسلكي (Wireless Presentation) - Soft Violet Glass */
.header-pill-cast {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: #ddd6fe !important;
  color: #6d28d9 !important;
}
html.dark .header-pill-cast {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: rgba(139, 92, 246, 0.4) !important;
  color: #c4b5fd !important;
}
.header-pill-cast:hover {
  background: #faf5ff !important;
  border-color: #8b5cf6 !important;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.18) !important;
}
html.dark .header-pill-cast:hover {
  background: rgba(139, 92, 246, 0.15) !important;
}

/* Micro Badge Tags inside pills */
.header-pill-tag {
  font-size: 0.62rem;
  font-weight: 900;
  padding: 0.1rem 0.45rem;
  border-radius: 9999px;
  line-height: 1;
}
.tag-amber {
  background: rgba(245, 158, 11, 0.14) !important;
  color: #b45309 !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}
html.dark .tag-amber {
  background: rgba(245, 158, 11, 0.25) !important;
  color: #fde68a !important;
}
.tag-emerald {
  background: rgba(16, 185, 129, 0.14) !important;
  color: #047857 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}
html.dark .tag-emerald {
  background: rgba(16, 185, 129, 0.25) !important;
  color: #6ee7b7 !important;
}

/* 6. Utility Capsule (Clean, Organized, Non-squished) */
.header-utility-capsule {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1.5px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: 0.85rem;
  padding: 2px 4px;
  height: 38px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
html.dark .header-utility-capsule {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: rgba(51, 65, 85, 0.85) !important;
}

/* ============================================================
   HEADER INTERACTIVE INNOVATION & ANIMATIONS (فَطِن Executive Header)
   ============================================================ */

/* 1. Brand Logo Insignia & Hologram */
.fatan-logo-badge {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 1rem;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #f59e0b 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

.fatan-logo-badge::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 1rem;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.1), rgba(245, 158, 11, 0.6));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.fatan-logo-badge::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: rotate(25deg);
  animation: logoShineSweep 5s infinite ease-in-out;
}

@keyframes logoShineSweep {
  0% { left: -75%; }
  25% { left: 150%; }
  100% { left: 150%; }
}

.group:hover .fatan-logo-badge {
  transform: scale(1.08) rotate(4deg);
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.45);
}

.fatan-brand-text {
  font-weight: 900;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #1e1b4b 0%, #4338ca 50%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease;
}

html.dark .fatan-brand-text {
  background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 50%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.group:hover .fatan-brand-text {
  filter: drop-shadow(0 2px 8px rgba(99, 102, 241, 0.3));
}

.fatan-pro-pill {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #4f46e5, #9333ea);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.fatan-pro-pill::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: proPillSweep 3s infinite;
}

@keyframes proPillSweep {
  0% { left: -100%; }
  30% { left: 200%; }
  100% { left: 200%; }
}

/* 2. Interactive Search Bar (Omnibar) */
.header-search-bar {
  position: relative;
  background: rgba(248, 250, 252, 0.9);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(226, 232, 240, 0.95);
  border-radius: 1rem;
  padding: 0.45rem 1rem;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

html.dark .header-search-bar {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(51, 65, 85, 0.9);
}

.header-search-bar:hover {
  background: #ffffff;
  border-color: #6366f1;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
  transform: translateY(-1px);
}

html.dark .header-search-bar:hover {
  background: rgba(15, 23, 42, 0.95);
  border-color: #818cf8;
  box-shadow: 0 4px 16px rgba(129, 140, 248, 0.2);
}

.header-search-bar:hover .search-lens-icon {
  transform: scale(1.15) rotate(10deg);
  color: #4f46e5;
}

/* 3. Action Pills Micro-Animations */
.header-action-pill {
  position: relative;
  overflow: hidden;
}

/* Subtle Shimmer for Cockpit button */
.header-pill-cockpit::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.25), transparent);
  transform: rotate(25deg);
  animation: cockpitShimmer 3.5s infinite ease-in-out;
}

@keyframes cockpitShimmer {
  0% { left: -100%; }
  35% { left: 160%; }
  100% { left: 160%; }
}

/* Animated Stylus Wiggle for Whiteboard */
.stylus-anim {
  display: inline-block;
  transform-origin: bottom left;
  transition: transform 0.3s ease;
}
.header-pill-whiteboard:hover .stylus-anim {
  animation: stylusWrite 0.6s infinite ease-in-out alternate;
}
@keyframes stylusWrite {
  0% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-15deg) translateY(-2px); }
  100% { transform: rotate(10deg) translateY(1px); }
}

/* 3D Cube Spin for Solids Lab */
.cube-3d-anim {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.header-pill-3d:hover .cube-3d-anim {
  transform: rotate(20deg) scale(1.2);
}

/* Organic Plant Sway for Baraem */
.plant-anim {
  display: inline-block;
  transform-origin: bottom center;
  transition: transform 0.3s ease;
}
.header-pill-baraem:hover .plant-anim {
  animation: plantSway 0.8s infinite ease-in-out alternate;
}
@keyframes plantSway {
  0% { transform: rotate(-8deg); }
  100% { transform: rotate(8deg); }
}

/* Wireless Broadcast Signal Radiate */
.signal-anim {
  display: inline-block;
  transition: transform 0.3s ease;
}
.header-pill-cast:hover .signal-anim {
  animation: signalPulse 0.7s infinite alternate;
}
@keyframes signalPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(139, 92, 246, 0)); }
  100% { transform: scale(1.2); filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.6)); }
}

/* Tools Capsule icon hover effects */
.tool-icon-btn {
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tool-icon-btn:hover {
  transform: translateY(-2px) scale(1.1);
}
.tool-icon-btn:active {
  transform: scale(0.95);
}