/*
 * ╔═══════════════════════════════════════════════════════════════╗
 * ║                  DYNAMIC COLOR UTILITIES                      ║
 * ║          CSS Classes for API-Driven Dynamic Colors            ║
 * ╚═══════════════════════════════════════════════════════════════╝
 * 
 * هذا الملف يحتوي على CSS rules للعناصر التي تحصل على ألوان ديناميكية من API
 * الألوان يتم تطبيقها من JS عبر CSS Variables (--dynamic-*)
 */

/* ═════════════════════════════════════════════════════════════
 * BASE DYNAMIC COLOR CLASSES
 * ═════════════════════════════════════════════════════════════ */

/* عنصر يحتوي على لون نص ديناميكي - only for text elements, not icons */
.has-dynamic-color:not(.feature-icon):not(.card-icon):not(.info-icon) {
  color: var(--dynamic-color, inherit);
}

/* عنصر يحتوي على خلفية ديناميكية - excluding feature icons (handled separately) */
.has-dynamic-color[style*="--dynamic-bg"]:not(.feature-icon) {
  background-color: var(--dynamic-bg, var(--surface-0));
}

/* عنصر يحتوي على حدود ديناميكية */
.has-dynamic-color[style*="--dynamic-border"] {
  border-color: var(--dynamic-border, var(--border-color));
}

/* ═════════════════════════════════════════════════════════════
 * COMMON PATTERNS - BADGES
 * ═════════════════════════════════════════════════════════════ */

.info-badge.has-dynamic-color {
  background: var(--dynamic-bg, var(--primary-color));
  color: var(--text-white);
}

.badge.has-dynamic-color {
  background: var(--dynamic-bg, var(--neutral-200));
  color: var(--dynamic-color, var(--text-main));
}

/* ═════════════════════════════════════════════════════════════
 * COMMON PATTERNS - CARDS
 * ═════════════════════════════════════════════════════════════ */

.card-icon.has-dynamic-color {
  background: var(--dynamic-bg, var(--primary-color));
  color: var(--dynamic-color, var(--text-white));
}

.feature-card.has-dynamic-color {
  border-color: var(--dynamic-border, var(--border-color));
}

.feature-card.has-dynamic-color::before {
  background: var(--dynamic-bg, var(--primary-color));
}

/* ═════════════════════════════════════════════════════════════
 * FEATURE ICONS - Override gradient with solid dynamic color
 * Must override linear-gradient from features.css
 * Using higher specificity selectors to ensure override
 * ═════════════════════════════════════════════════════════════ */

/* Normal state - highest specificity */
.features .feature-card .feature-icon.has-dynamic-color,
#features-section .feature-card .feature-icon.has-dynamic-color,
.feature-grid .feature-card .feature-icon.has-dynamic-color,
.feature-icon.has-dynamic-color[style] {
  background: var(--dynamic-bg, var(--primary-color));
  background-image: none;
  background-color: var(--dynamic-bg, var(--primary-color));
}

/* Hover on icon directly */
.features .feature-card .feature-icon.has-dynamic-color:hover,
#features-section .feature-card .feature-icon.has-dynamic-color:hover,
.feature-grid .feature-card .feature-icon.has-dynamic-color:hover,
.feature-icon.has-dynamic-color[style]:hover {
  background: var(--dynamic-bg, var(--primary-color));
  background-image: none;
  background-color: var(--dynamic-bg, var(--primary-color));
  filter: brightness(1.1);
  transform: scale(1.1) rotate(5deg);
}

/* Hover on parent card */
.features .feature-card:hover .feature-icon.has-dynamic-color,
#features-section .feature-card:hover .feature-icon.has-dynamic-color,
.feature-grid .feature-card:hover .feature-icon.has-dynamic-color {
  background: var(--dynamic-bg, var(--primary-color));
  background-image: none;
  background-color: var(--dynamic-bg, var(--primary-color));
  filter: brightness(1.1);
  transform: scale(1.1) rotate(5deg);
}

/* Icon color - must be white always */
.features .feature-card .feature-icon.has-dynamic-color i,
#features-section .feature-card .feature-icon.has-dynamic-color i,
.feature-grid .feature-card .feature-icon.has-dynamic-color i,
.feature-icon.has-dynamic-color[style] i {
  color: var(--text-white);
}

/* Icon color on hover */
.features .feature-card .feature-icon.has-dynamic-color:hover i,
#features-section .feature-card .feature-icon.has-dynamic-color:hover i,
.feature-grid .feature-card .feature-icon.has-dynamic-color:hover i,
.features .feature-card:hover .feature-icon.has-dynamic-color i,
#features-section .feature-card:hover .feature-icon.has-dynamic-color i,
.feature-grid .feature-card:hover .feature-icon.has-dynamic-color i {
  color: var(--text-white);
}

/* ═════════════════════════════════════════════════════════════
 * COMMON PATTERNS - BUTTONS
 * ═════════════════════════════════════════════════════════════ */

/* ✅ Normal state: Background + Border + Text color from --dynamic-* */
/* NO !important - contact-elegant.css uses :not(.has-dynamic-color) */
.btn.has-dynamic-color,
.unified-filter-btn.has-dynamic-color,
button.has-dynamic-color,
a.has-dynamic-color[class*="btn"],
.hero-btn.has-dynamic-color,
.contact-btn.has-dynamic-color,
.submit-btn.has-dynamic-color {
  background: var(--dynamic-bg, var(--primary-color));
  background-color: var(--dynamic-bg, var(--primary-color));
  background-image: none; /* Override any gradients */
  border-color: var(--dynamic-border, var(--dynamic-bg, var(--primary-color)));
  color: var(--dynamic-color, var(--text-white));
}

/* ✅ Higher specificity for contact page buttons (matches #contact selector) */
#contact .hero-btn.has-dynamic-color,
#contact .hero-btn.primary.has-dynamic-color,
#contact .hero-btn.secondary.has-dynamic-color,
#contact .premium-btn.has-dynamic-color,
#contact .premium-btn.call-btn.has-dynamic-color,
#contact .premium-btn.email-btn.has-dynamic-color,
#contact .submit-btn.has-dynamic-color,
body.theme-night #contact .hero-btn.has-dynamic-color,
body.theme-night #contact .premium-btn.has-dynamic-color {
  background: var(--dynamic-bg, var(--primary-color));
  background-color: var(--dynamic-bg, var(--primary-color));
  background-image: none;
  border-color: var(--dynamic-border, var(--dynamic-bg));
  color: var(--dynamic-color, var(--text-white));
}

/* ✅ Icon inside button also gets dynamic color */
.btn.has-dynamic-color i,
.unified-filter-btn.has-dynamic-color i,
button.has-dynamic-color i,
a.has-dynamic-color[class*="btn"] i,
#contact .hero-btn.has-dynamic-color i,
#contact .premium-btn.has-dynamic-color i {
  color: var(--dynamic-color, var(--text-white));
}

/* ✅ Hover state: Brighten */
.btn.has-dynamic-color:hover,
.unified-filter-btn.has-dynamic-color:hover,
button.has-dynamic-color:hover,
a.has-dynamic-color[class*="btn"]:hover,
#contact .hero-btn.has-dynamic-color:hover,
#contact .hero-btn.primary.has-dynamic-color:hover,
#contact .hero-btn.secondary.has-dynamic-color:hover,
#contact .premium-btn.has-dynamic-color:hover,
body.theme-night #contact .hero-btn.has-dynamic-color:hover,
body.theme-night #contact .premium-btn.has-dynamic-color:hover {
  background: var(--dynamic-bg, var(--primary-color));
  background-color: var(--dynamic-bg, var(--primary-color));
  background-image: none;
  border-color: var(--dynamic-border, var(--dynamic-bg));
  color: var(--dynamic-color, var(--text-white));
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(var(--black-rgb), 0.2);
}

/* ═════════════════════════════════════════════════════════════
 * LIBRARY CAPSULES & STRIPS
 * ═════════════════════════════════════════════════════════════ */

.capsule.has-dynamic-color,
.library-capsule.has-dynamic-color {
  background: var(--dynamic-bg, rgba(var(--primary-color-rgb), 0.1));
  color: var(--dynamic-color, var(--primary-color));
  border-color: var(--dynamic-border, rgba(var(--primary-color-rgb), 0.2));
}

.strip-type-capsule {
  color: var(--text-white);
  background: var(--dynamic-bg, var(--primary-color));
}

.strip-meta .meta-item i {
  color: var(--dynamic-color, var(--primary-color));
}

/* ═════════════════════════════════════════════════════════════
 * MAGAZINE & ACTIVITY CATEGORIES
 * ═════════════════════════════════════════════════════════════ */

.category-card.has-dynamic-color {
  border-color: var(--dynamic-border, var(--primary-color));
}

.category-card.has-dynamic-color .cat-header {
  background: linear-gradient(135deg, 
    rgba(var(--primary-color-rgb), 0.15), 
    rgba(var(--primary-color-rgb), 0.05)
  );
}

.category-icon-box.has-dynamic-color {
  background: var(--dynamic-bg, var(--primary-color));
}

/* ═════════════════════════════════════════════════════════════
 * SUBJECT TEMPLATES
 * ═════════════════════════════════════════════════════════════ */

.subject-card.has-dynamic-color {
  border: 2px solid var(--dynamic-border, var(--primary-color));
}

.subject-card.has-dynamic-color .card-header {
  background: linear-gradient(135deg,
    rgba(var(--primary-color-rgb), 0.15),
    rgba(var(--primary-color-rgb), 0.05)
  );
}

.subject-card.has-dynamic-color .icon-bg {
  background: var(--dynamic-bg, var(--primary-color));
}

/* ═════════════════════════════════════════════════════════════
 * STAFF & FILTERS
 * ═════════════════════════════════════════════════════════════ */

#subjectFilterSection.has-dynamic-color {
  border-color: var(--dynamic-border, var(--primary-color));
}

#subjectFilterSection.has-dynamic-color .oval-select-arrow {
  color: var(--dynamic-color, var(--primary-color));
}

#staffResetFilters.has-dynamic-color {
  color: var(--dynamic-color, var(--primary-color));
  border-color: var(--dynamic-border, var(--primary-color));
}

/* ═════════════════════════════════════════════════════════════
 * ICON BACKGROUNDS (ABOUT PAGE, TIMELINE, CONTACT PAGE, ETC)
 * ═════════════════════════════════════════════════════════════ */

.icon-preview.has-dynamic-color,
.timeline-icon.has-dynamic-color,
.icon-bg.has-dynamic-color,
#contact .icon-bg.has-dynamic-color,
#contact .hours-icon.has-dynamic-color,
#contact .form-icon.has-dynamic-color,
#contact .section-badge.has-dynamic-color {
  background: var(--dynamic-bg, var(--primary-color));
  background-image: none;
  background-color: var(--dynamic-bg, var(--primary-color));
  color: var(--dynamic-color, var(--text-white));
}

/* ✅ Icon inside stays white */
.icon-bg.has-dynamic-color i,
#contact .icon-bg.has-dynamic-color i,
#contact .hours-icon.has-dynamic-color i,
#contact .form-icon.has-dynamic-color i,
#contact .section-badge.has-dynamic-color i {
  color: var(--text-white);
}

/* ═════════════════════════════════════════════════════════════
 * HOVER STATES WITH DYNAMIC COLORS
 * ═════════════════════════════════════════════════════════════ */

/* Base hover - no opacity change to prevent white overlay effect */
.has-dynamic-color {
  transition: all 0.3s ease;
}

/* Feature icon hover effects are defined above in FEATURE ICONS section */

/* Buttons with dynamic colors */
.btn.has-dynamic-color:hover,
.unified-filter-btn.has-dynamic-color:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(var(--black-rgb), 0.2);
}

/* Cards with dynamic colors */
.feature-card.has-dynamic-color:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 70px rgba(var(--black-rgb), 0.15);
}

/* Badges with dynamic colors */
.info-badge.has-dynamic-color:hover,
.badge.has-dynamic-color:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* ═════════════════════════════════════════════════════════════
 * SPECIAL: OPACITY VARIATIONS
 * ═════════════════════════════════════════════════════════════ */

/* للعناصر التي تحتاج خلفية شفافة من اللون الديناميكي */
.dynamic-bg-10 {
  background: color-mix(in srgb, var(--dynamic-bg) 10%, transparent);
}

.dynamic-bg-20 {
  background: color-mix(in srgb, var(--dynamic-bg) 20%, transparent);
}

/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .dynamic-bg-10 {
    background: var(--dynamic-bg);
    opacity: 0.1;
  }
  
  .dynamic-bg-20 {
    background: var(--dynamic-bg);
    opacity: 0.2;
  }
}

/* ═════════════════════════════════════════════════════════════
 * DEBUGGING (يمكن حذفها في Production)
 * ═════════════════════════════════════════════════════════════ */

/* عرض outline للعناصر التي تحتوي على ألوان ديناميكية في وضع التطوير */
/*
.has-dynamic-color {
  outline: 1px dashed rgba(var(--danger-color-rgb), 0.3);
  outline-offset: 2px;
}
*/