/**
 * ═══════════════════════════════════════════════════════════════
 * مَزون - الوضع الليلي المحسّن
 * Mazoon Platform - Enhanced Dark Mode
 * تباين عالي - خطوط واضحة - ألوان مميزة
 * ═══════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════
   المتغيرات - ألوان عالية التباين
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode {
    /* الخلفيات */
    --dm-bg-main: #0a0a12;
    --dm-bg-card: #14141f;
    --dm-bg-card-alt: #1a1a28;
    --dm-bg-hover: #22222f;
    --dm-bg-input: #1e1e2a;
    
    /* النصوص - تباين عالي جداً */
    --dm-white: #ffffff;
    --dm-text-bright: #f5f5f5;
    --dm-text-primary: #e8e8e8;
    --dm-text-secondary: #c5c5c5;
    --dm-text-muted: #9a9a9a;
    
    /* الألوان المميزة */
    --dm-gold: #d4af37;
    --dm-gold-bright: #ffd700;
    --dm-teal: #20b2aa;
    --dm-teal-bright: #40e0d0;
    
    /* ألوان الحالة */
    --dm-green: #00e676;
    --dm-red: #ff5252;
    --dm-orange: #ffab40;
    --dm-blue: #40c4ff;
    
    /* الحدود */
    --dm-border: rgba(255,255,255,0.15);
    --dm-border-strong: rgba(255,255,255,0.25);
}

/* ═══════════════════════════════════════════════════════════════
   الجسم الرئيسي
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode {
    background: var(--dm-bg-main) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode main,
body.dark-mode .main-content {
    background: var(--dm-bg-main) !important;
}

/* ═══════════════════════════════════════════════════════════════
   جميع النصوص - وضوح تام
   ═══════════════════════════════════════════════════════════════ */

/* العناوين - أبيض ناصع */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .title,
body.dark-mode .heading,
body.dark-mode [class*="title"],
body.dark-mode [class*="Title"],
body.dark-mode [class*="name"],
body.dark-mode [class*="Name"] {
    color: var(--dm-white) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* النصوص العادية */
body.dark-mode p,
body.dark-mode span,
body.dark-mode div,
body.dark-mode label,
body.dark-mode li,
body.dark-mode td,
body.dark-mode .text,
body.dark-mode .content,
body.dark-mode .description,
body.dark-mode [class*="desc"],
body.dark-mode [class*="Desc"] {
    color: var(--dm-text-primary) !important;
}

/* النصوص الثانوية */
body.dark-mode small,
body.dark-mode .small,
body.dark-mode .meta,
body.dark-mode .muted,
body.dark-mode .hint,
body.dark-mode .subtitle,
body.dark-mode [class*="meta"],
body.dark-mode [class*="time"],
body.dark-mode [class*="date"],
body.dark-mode [class*="source"] {
    color: var(--dm-text-secondary) !important;
}

/* الأرقام - واضحة جداً */
body.dark-mode .number,
body.dark-mode .value,
body.dark-mode .price,
body.dark-mode .rate,
body.dark-mode .count,
body.dark-mode .amount,
body.dark-mode .percentage,
body.dark-mode [class*="number"],
body.dark-mode [class*="value"],
body.dark-mode [class*="price"],
body.dark-mode [class*="rate"],
body.dark-mode [class*="temp"],
body.dark-mode [class*="Temp"] {
    color: var(--dm-white) !important;
    font-weight: 700 !important;
}

/* الروابط */
body.dark-mode a {
    color: var(--dm-text-primary) !important;
}

body.dark-mode a:hover {
    color: var(--dm-gold-bright) !important;
}

/* ═══════════════════════════════════════════════════════════════
   البطاقات
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .card,
body.dark-mode [class*="card"],
body.dark-mode [class*="Card"],
body.dark-mode .item,
body.dark-mode [class*="-item"],
body.dark-mode [class*="_item"] {
    background: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
}

body.dark-mode .card:hover,
body.dark-mode [class*="card"]:hover {
    background: var(--dm-bg-hover) !important;
    border-color: var(--dm-border-strong) !important;
}

body.dark-mode .card-header,
body.dark-mode [class*="card-header"],
body.dark-mode [class*="card-head"] {
    background: rgba(0,0,0,0.3) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

body.dark-mode .card-footer,
body.dark-mode [class*="card-footer"],
body.dark-mode [class*="card-foot"] {
    background: rgba(0,0,0,0.25) !important;
    border-top: 1px solid var(--dm-border) !important;
}

body.dark-mode .card-title,
body.dark-mode .card-title h3,
body.dark-mode [class*="card-title"] {
    color: var(--dm-white) !important;
}

body.dark-mode .card-content,
body.dark-mode .card-body,
body.dark-mode [class*="card-content"],
body.dark-mode [class*="card-body"] {
    color: var(--dm-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   الهيدر والنافبار
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode header,
body.dark-mode .header,
body.dark-mode .navbar,
body.dark-mode nav {
    background: linear-gradient(135deg, #080810, #101020) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

body.dark-mode .logo-text,
body.dark-mode .brand {
    color: var(--dm-white) !important;
}

body.dark-mode .nav-link,
body.dark-mode .menu-link {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .nav-link:hover,
body.dark-mode .nav-link.active {
    color: var(--dm-gold-bright) !important;
}

/* ═══════════════════════════════════════════════════════════════
   بطاقة الطقس
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .card-weather,
body.dark-mode [class*="weather"] {
    background: linear-gradient(135deg, #1a3a4a, #0d3d4d) !important;
}

body.dark-mode .weather-temp,
body.dark-mode .temperature,
body.dark-mode [class*="temp"] {
    color: var(--dm-white) !important;
    font-size: inherit;
    font-weight: 700 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

body.dark-mode .weather-city,
body.dark-mode .city-name {
    color: var(--dm-white) !important;
}

body.dark-mode .weather-desc,
body.dark-mode .weather-condition {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .weather-detail,
body.dark-mode .weather-info span,
body.dark-mode .weather-data {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .prayer-time,
body.dark-mode .prayer-name {
    color: var(--dm-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   بطاقة الأخبار
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .news-ticker,
body.dark-mode .ticker {
    background: #080810 !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

body.dark-mode .ticker-text,
body.dark-mode .ticker-item {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .news-item,
body.dark-mode .news-card,
body.dark-mode .article {
    background: var(--dm-bg-card) !important;
    border-bottom: 1px solid var(--dm-border) !important;
}

body.dark-mode .news-title,
body.dark-mode .news-headline,
body.dark-mode .article-title {
    color: var(--dm-white) !important;
    font-weight: 600 !important;
}

body.dark-mode .news-source,
body.dark-mode .news-time,
body.dark-mode .news-date,
body.dark-mode .news-category {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .breaking-news,
body.dark-mode .urgent {
    color: var(--dm-red) !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
   بطاقة الوظائف
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .job-item,
body.dark-mode .job-card,
body.dark-mode [class*="job"] {
    background: var(--dm-bg-card) !important;
}

body.dark-mode .job-title,
body.dark-mode .job-name {
    color: var(--dm-white) !important;
    font-weight: 600 !important;
}

body.dark-mode .job-company {
    color: var(--dm-gold) !important;
}

body.dark-mode .job-location,
body.dark-mode .job-type {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .job-salary,
body.dark-mode .salary {
    color: var(--dm-green) !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
   بطاقة البورصة والعملات
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .msx-card,
body.dark-mode .stock-card,
body.dark-mode .currency-card,
body.dark-mode [class*="msx"],
body.dark-mode [class*="stock"],
body.dark-mode [class*="currency"] {
    background: var(--dm-bg-card) !important;
}

body.dark-mode .msx-index-value,
body.dark-mode .stock-price,
body.dark-mode .currency-rate,
body.dark-mode .index-value {
    color: var(--dm-white) !important;
    font-weight: 700 !important;
    font-size: 1.2em;
}

body.dark-mode .msx-stock-name,
body.dark-mode .stock-name,
body.dark-mode .currency-name {
    color: var(--dm-white) !important;
}

body.dark-mode .msx-stock-code,
body.dark-mode .stock-symbol,
body.dark-mode .currency-code {
    color: var(--dm-text-muted) !important;
}

body.dark-mode .stock-change.positive,
body.dark-mode .change.positive,
body.dark-mode .up,
body.dark-mode [class*="positive"],
body.dark-mode [class*="gain"] {
    color: var(--dm-green) !important;
    font-weight: 700 !important;
}

body.dark-mode .stock-change.negative,
body.dark-mode .change.negative,
body.dark-mode .down,
body.dark-mode [class*="negative"],
body.dark-mode [class*="loss"] {
    color: var(--dm-red) !important;
    font-weight: 700 !important;
}

body.dark-mode .msx-volume,
body.dark-mode .volume {
    color: var(--dm-text-secondary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   بطاقة المرور
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .traffic-card,
body.dark-mode [class*="traffic"] {
    background: var(--dm-bg-card) !important;
}

body.dark-mode .traffic-content-overlay,
body.dark-mode .traffic-city-item,
body.dark-mode .traffic-event-item,
body.dark-mode .traffic-roads-section {
    background: var(--dm-bg-card-alt) !important;
}

body.dark-mode .traffic-title,
body.dark-mode .road-name,
body.dark-mode .city-name,
body.dark-mode .route-name {
    color: var(--dm-white) !important;
}

body.dark-mode .traffic-status,
body.dark-mode .traffic-time {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .traffic-good,
body.dark-mode .status-good {
    color: var(--dm-green) !important;
}

body.dark-mode .traffic-moderate,
body.dark-mode .status-moderate {
    color: var(--dm-orange) !important;
}

body.dark-mode .traffic-heavy,
body.dark-mode .status-heavy {
    color: var(--dm-red) !important;
}

/* ═══════════════════════════════════════════════════════════════
   بطاقة الرياضة
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .sports-card,
body.dark-mode .match-card,
body.dark-mode [class*="match"],
body.dark-mode [class*="sport"] {
    background: var(--dm-bg-card) !important;
}

body.dark-mode .team-name {
    color: var(--dm-white) !important;
    font-weight: 600 !important;
}

body.dark-mode .match-score,
body.dark-mode .score {
    color: var(--dm-white) !important;
    font-weight: 700 !important;
    font-size: 1.3em;
}

body.dark-mode .match-time,
body.dark-mode .match-date,
body.dark-mode .match-league {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .live-badge,
body.dark-mode .live {
    color: var(--dm-red) !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
   بطاقة العروض
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .offer-card,
body.dark-mode [class*="offer"] {
    background: var(--dm-bg-card) !important;
}

body.dark-mode .offer-title {
    color: var(--dm-white) !important;
}

body.dark-mode .offer-store,
body.dark-mode .store-name {
    color: var(--dm-gold) !important;
}

body.dark-mode .offer-discount,
body.dark-mode .discount,
body.dark-mode .discount-badge {
    color: var(--dm-red) !important;
    font-weight: 700 !important;
}

body.dark-mode .offer-price,
body.dark-mode .original-price {
    color: var(--dm-text-muted) !important;
    text-decoration: line-through;
}

body.dark-mode .offer-sale-price,
body.dark-mode .sale-price {
    color: var(--dm-green) !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
   بطاقة المطاعم
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .restaurant-card,
body.dark-mode [class*="restaurant"] {
    background: var(--dm-bg-card) !important;
}

body.dark-mode .restaurant-name {
    color: var(--dm-white) !important;
}

body.dark-mode .restaurant-cuisine {
    color: var(--dm-gold) !important;
}

body.dark-mode .restaurant-rating {
    color: var(--dm-gold-bright) !important;
}

body.dark-mode .restaurant-location,
body.dark-mode .restaurant-price {
    color: var(--dm-text-secondary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   بطاقة الوقود
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .fuel-card,
body.dark-mode [class*="fuel"] {
    background: var(--dm-bg-card) !important;
}

body.dark-mode .fuel-type,
body.dark-mode .fuel-name {
    color: var(--dm-white) !important;
}

body.dark-mode .fuel-price {
    color: var(--dm-gold-bright) !important;
    font-weight: 700 !important;
    font-size: 1.2em;
}

/* ═══════════════════════════════════════════════════════════════
   بطاقة الطوارئ
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .emergency-card,
body.dark-mode [class*="emergency"] {
    background: var(--dm-bg-card) !important;
}

body.dark-mode .emergency-title,
body.dark-mode .emergency-name {
    color: var(--dm-white) !important;
}

body.dark-mode .emergency-number {
    color: var(--dm-red) !important;
    font-weight: 700 !important;
    font-size: 1.3em;
}

body.dark-mode .emergency-desc {
    color: var(--dm-text-secondary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   بطاقة الفعاليات/التقويم
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .event-card,
body.dark-mode .calendar-card,
body.dark-mode [class*="event"],
body.dark-mode [class*="calendar"] {
    background: var(--dm-bg-card) !important;
}

body.dark-mode .event-title,
body.dark-mode .event-name {
    color: var(--dm-white) !important;
}

body.dark-mode .event-date {
    color: var(--dm-gold) !important;
    font-weight: 600 !important;
}

body.dark-mode .event-location,
body.dark-mode .event-time {
    color: var(--dm-text-secondary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   بطاقة الترند
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .trend-card,
body.dark-mode [class*="trend"] {
    background: var(--dm-bg-card) !important;
}

body.dark-mode .trend-title,
body.dark-mode .trend-tag,
body.dark-mode .hashtag {
    color: var(--dm-white) !important;
}

body.dark-mode .trend-count {
    color: var(--dm-blue) !important;
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
   بطاقة الحكمة
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .quote-card,
body.dark-mode [class*="quote"] {
    background: var(--dm-bg-card) !important;
}

body.dark-mode .quote-text {
    color: var(--dm-text-primary) !important;
    font-style: italic;
}

body.dark-mode .quote-author {
    color: var(--dm-gold) !important;
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════
   بطاقة السياحة
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .tourism-card,
body.dark-mode .travel-card,
body.dark-mode [class*="tourism"],
body.dark-mode [class*="travel"],
body.dark-mode [class*="dest"] {
    background: var(--dm-bg-card) !important;
}

body.dark-mode .travel-tabs {
    background: var(--dm-bg-card-alt) !important;
}

body.dark-mode .travel-tab {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode .travel-tab.active {
    background: var(--dm-gold) !important;
    color: #000 !important;
}

body.dark-mode .destination-name,
body.dark-mode .place-name {
    color: var(--dm-white) !important;
}

/* ═══════════════════════════════════════════════════════════════
   الأزرار
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .btn,
body.dark-mode button,
body.dark-mode [class*="btn"] {
    border-color: var(--dm-border-strong) !important;
}

body.dark-mode .btn-primary,
body.dark-mode .btn-main,
body.dark-mode .btn-gold {
    background: linear-gradient(135deg, var(--dm-gold), #c4a030) !important;
    color: #000 !important;
    font-weight: 700 !important;
    border: none !important;
}

body.dark-mode .btn-secondary,
body.dark-mode .btn-outline {
    background: transparent !important;
    color: var(--dm-text-primary) !important;
    border: 1px solid var(--dm-border-strong) !important;
}

body.dark-mode .btn-secondary:hover {
    background: var(--dm-bg-hover) !important;
    color: var(--dm-white) !important;
}

body.dark-mode .btn-dark-mode {
    background: rgba(255,215,0,0.15) !important;
    border-color: var(--dm-gold) !important;
    color: var(--dm-gold) !important;
}

body.dark-mode .btn-success {
    background: var(--dm-green) !important;
    color: #000 !important;
}

body.dark-mode .btn-danger {
    background: var(--dm-red) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   حقول الإدخال
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-control {
    background: var(--dm-bg-input) !important;
    border: 1px solid var(--dm-border-strong) !important;
    color: var(--dm-white) !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: var(--dm-gold) !important;
    box-shadow: 0 0 0 3px rgba(212,175,55,0.25) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--dm-text-muted) !important;
}

body.dark-mode .search-box,
body.dark-mode .search-input {
    background: var(--dm-bg-input) !important;
}

/* ═══════════════════════════════════════════════════════════════
   التبويبات والفلاتر
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .tab,
body.dark-mode .filter-btn,
body.dark-mode .filter-chip,
body.dark-mode .chip,
body.dark-mode .category-tab,
body.dark-mode [class*="tab"],
body.dark-mode [class*="filter"],
body.dark-mode [class*="chip"] {
    background: var(--dm-bg-input) !important;
    color: var(--dm-text-secondary) !important;
    border: 1px solid var(--dm-border) !important;
}

body.dark-mode .tab.active,
body.dark-mode .filter-btn.active,
body.dark-mode .filter-chip.active,
body.dark-mode .chip.active,
body.dark-mode .category-tab.active,
body.dark-mode [class*="tab"].active,
body.dark-mode [class*="filter"].active {
    background: var(--dm-gold) !important;
    color: #000 !important;
    border-color: var(--dm-gold) !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
   البادجات والعلامات
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .badge,
body.dark-mode .tag,
body.dark-mode .label,
body.dark-mode [class*="badge"],
body.dark-mode [class*="tag"] {
    background: rgba(255,255,255,0.15) !important;
    color: var(--dm-text-primary) !important;
    font-weight: 600 !important;
}

body.dark-mode .badge-success,
body.dark-mode .tag-success {
    background: rgba(0,230,118,0.2) !important;
    color: var(--dm-green) !important;
}

body.dark-mode .badge-warning,
body.dark-mode .tag-warning {
    background: rgba(255,171,64,0.2) !important;
    color: var(--dm-orange) !important;
}

body.dark-mode .badge-danger,
body.dark-mode .tag-danger {
    background: rgba(255,82,82,0.2) !important;
    color: var(--dm-red) !important;
}

body.dark-mode .badge-info,
body.dark-mode .tag-info {
    background: rgba(64,196,255,0.2) !important;
    color: var(--dm-blue) !important;
}

/* ═══════════════════════════════════════════════════════════════
   الجداول
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode table {
    background: var(--dm-bg-card) !important;
}

body.dark-mode th {
    background: rgba(0,0,0,0.4) !important;
    color: var(--dm-white) !important;
    font-weight: 700 !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode td {
    color: var(--dm-text-primary) !important;
    border-color: var(--dm-border) !important;
}

body.dark-mode tr:hover {
    background: var(--dm-bg-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════
   القوائم والدروب داون
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .dropdown-menu,
body.dark-mode .dropdown-content,
body.dark-mode .menu {
    background: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5) !important;
}

body.dark-mode .dropdown-item,
body.dark-mode .menu-item {
    color: var(--dm-text-primary) !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .menu-item:hover {
    background: var(--dm-bg-hover) !important;
    color: var(--dm-white) !important;
}

/* ═══════════════════════════════════════════════════════════════
   المودال
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .modal,
body.dark-mode .modal-content,
body.dark-mode .popup,
body.dark-mode .dialog {
    background: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
}

body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    border-color: var(--dm-border) !important;
}

body.dark-mode .modal-overlay {
    background: rgba(0,0,0,0.85) !important;
}

/* ═══════════════════════════════════════════════════════════════
   التنبيهات
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode .alert,
body.dark-mode .notification,
body.dark-mode .toast {
    background: var(--dm-bg-card) !important;
    border: 1px solid var(--dm-border) !important;
    color: var(--dm-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   الفوتر
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode footer,
body.dark-mode .footer {
    background: linear-gradient(135deg, #060608, #0a0a12) !important;
    border-top: 1px solid var(--dm-border) !important;
}

body.dark-mode footer a,
body.dark-mode .footer-link {
    color: var(--dm-text-secondary) !important;
}

body.dark-mode footer a:hover {
    color: var(--dm-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════
   عناصر متفرقة
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode hr {
    border-color: var(--dm-border) !important;
}

body.dark-mode .results-info {
    background: var(--dm-bg-card) !important;
    color: var(--dm-text-primary) !important;
}

body.dark-mode .empty-state {
    color: var(--dm-text-muted) !important;
}

body.dark-mode code,
body.dark-mode pre {
    background: rgba(0,0,0,0.5) !important;
    color: var(--dm-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   سكرول بار
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--dm-bg-main);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #404050;
    border-radius: 5px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #505060;
}

/* ═══════════════════════════════════════════════════════════════
   التحديد
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode ::selection {
    background: var(--dm-gold);
    color: #000;
}

/* ═══════════════════════════════════════════════════════════════
   ═══════════════════════════════════════════════════════════════
   التجاوب مع الأجهزة
   ═══════════════════════════════════════════════════════════════
   ═══════════════════════════════════════════════════════════════ */

/* تابلت */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    body.dark-mode h1 { font-size: 1.7rem !important; }
    body.dark-mode h2 { font-size: 1.4rem !important; }
    body.dark-mode h3 { font-size: 1.15rem !important; }
    body.dark-mode .card { padding: 1.25rem; }
}

/* موبايل */
@media screen and (max-width: 767px) {
    body.dark-mode {
        font-size: 15px;
    }
    
    body.dark-mode h1 { font-size: 1.4rem !important; }
    body.dark-mode h2 { font-size: 1.2rem !important; }
    body.dark-mode h3 { font-size: 1.05rem !important; }
    
    body.dark-mode p,
    body.dark-mode span,
    body.dark-mode .text {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
    }
    
    body.dark-mode .card {
        padding: 1rem;
        margin-bottom: 0.75rem;
    }
    
    body.dark-mode .btn,
    body.dark-mode button {
        min-height: 44px;
        font-size: 0.95rem;
    }
    
    body.dark-mode input,
    body.dark-mode select {
        min-height: 44px;
        font-size: 16px;
    }
}

/* موبايل صغير */
@media screen and (max-width: 480px) {
    body.dark-mode {
        font-size: 14px;
    }
    
    body.dark-mode h1 { font-size: 1.25rem !important; }
    body.dark-mode h2 { font-size: 1.1rem !important; }
    body.dark-mode h3 { font-size: 1rem !important; }
    
    body.dark-mode .card {
        padding: 0.875rem;
    }
}