/* ================== Glassmorphism Topbar ==================
   topbar.css هو الملف الوحيد المتحكّم بمظهر الشريط العلوي وأبعاده.
   (الأبعاد المُصغّرة سابقاً كانت في scale-down-25.css بـ!important — نُقلت هنا.)
   استثناء: تنسيق زر المدينة .slot-city يبقى في city_picker.css لأنه تابع
   لمنتقي المدن (مرتبط بحالات فتح القائمة). */
.khaliq-topbar {
    position: fixed;
    top: 0; right: 0; left: 0;
    min-height: 30px;
    background: var(--main-bg-glass);
    backdrop-filter: blur(0px) saturate(160%);
    -webkit-backdrop-filter: blur(0px) saturate(160%);
    border-bottom: var(--glass-border);
    box-shadow: 0 3px 14px 0 rgba(66, 74, 98, 0.10);
    color: var(--text-main);
    font-weight: bold;
    font-size: 1.1rem;
    line-height: 1.5;                       /* يكسر line-height:1.7 الموروث من body (أهم سبب للسماكة) */
    letter-spacing: 0.5px;
    padding: 0.04rem 1.93rem 0.04rem 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.17s, box-shadow 0.13s;
    text-align: center;
    user-select: none;
}
.khaliq-topbar:hover {
    background: var(--main-bg-glass);
    box-shadow: var(--main-shadow-hover);
}

/* حشو احتياطي — يُضبط ديناميكياً بقياس ارتفاع الشريط في topbar.js
   (الستايل المضمَّن يتجاوز هذا، فلا يغطّي الشريط المحتوى مهما تعددت صفوفه) */
body { padding-top: 60px; }

/* ==========================================================================
   شبكة الشريط العلوي — مجموعة موحّدة تستجيب لاختيار مرجع الوقت
   الترتيب البصري (RTL): [زر التبديل] [يوم] [ساعة] [حدث] [تاريخ الخالق] [غريغوري] [المدينة]
   نمط column auto: عمود لكل خانة تلقائياً (مرن تجاه تغيّر عدد الخانات).
   ========================================================================== */
.topbar-grid {
    display: grid;
    align-items: center;
    justify-content: center;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 14px;
    width: 92%;
    max-width: 1900px;
    white-space: nowrap;
    overflow: hidden;
}

.topbar-grid .slot {
    min-width: 0;                 /* للسماح بالـ ellipsis */
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 2px;
}

.topbar-grid .slot-city {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 800;
}
.topbar-grid .slot-city i { color: var(--primary); }

/* ====== زر التحكّم بالتوقيت — بلا حاوية: زرّان فقط، الفعّال إبهام «زجاج سائل» ====== */
.topbar-grid .slot-toggle { padding: 0; overflow: visible; }

.time-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;                                       /* لا حاوية/إطار/خلفية */
    line-height: 1;
}
.time-toggle-btn {
    border: 0;
    margin: 0;
    background: transparent;
    color: rgba(34, 48, 70, 0.72);                  /* نص خافت (نهاري) */
    font-family: inherit;
    font-weight: 600;
    font-size: 0.64em;                              /* أصغر قليلاً */
    letter-spacing: normal;
    line-height: 1.0;
    padding: 3px 11px;
    border-radius: 999px;                           /* حواف دائرية */
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.time-toggle-btn:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.28);
}
/* الإبهام الفعّال: زجاج سائل لطيف (حافة باردة + لمعة علوية + ظل خفيف) */
.time-toggle-btn.is-active,
.time-toggle-btn.is-active:hover {
    color: var(--text-main);
    background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.72) 0%,
                rgba(244, 248, 255, 0.42) 100%);
    -webkit-backdrop-filter: blur(10px) saturate(190%);
    backdrop-filter: blur(10px) saturate(190%);
    box-shadow:
        inset 0 1.2px 0 rgba(255, 255, 255, 0.95),
        inset 0 0 0 1px rgba(120, 150, 210, 0.30),
        0 2px 6px rgba(70, 100, 170, 0.20);
}

/* الوضع الليلي */
:root[data-theme='dark'] .time-toggle-btn {
    color: rgba(231, 239, 252, 0.72);               /* نص خافت (ليلي) */
}
:root[data-theme='dark'] .time-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}
:root[data-theme='dark'] .time-toggle-btn.is-active,
:root[data-theme='dark'] .time-toggle-btn.is-active:hover {
    background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.16) 0%,
                rgba(255, 255, 255, 0.05) 100%);
    box-shadow:
        inset 0 1.2px 0 rgba(255, 255, 255, 0.36),
        inset 0 0 0 1px rgba(255, 255, 255, 0.22),
        0 2px 8px rgba(0, 0, 0, 0.40);
}

/* احتياطي: بلا backdrop-filter → تعبئة أوضح للإبهام */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .time-toggle-btn.is-active { background: rgba(255, 255, 255, 0.78); }
    :root[data-theme='dark'] .time-toggle-btn.is-active { background: rgba(255, 255, 255, 0.16); }
}
/* إمكانية الوصول: تقليل الشفافية → إبهام مصمت */
@media (prefers-reduced-transparency: reduce) {
    .time-toggle-btn.is-active {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--accent);
        color: #fff;
    }
}

/* ====== الإخفاء التدريجي على الشاشات الأضيق ====== */
@media (max-width: 1100px) {
    .topbar-grid { gap: 10px; }
    .hide-on-narrow { display: none; }
}

/* ====== الجوال: تكديس مرن في صفوف (الارتفاع يُعوَّض ديناميكياً) ====== */
@media (max-width: 700px) {
    .khaliq-topbar {
        min-height: 40.25px;
        font-size: 0.88rem;
        letter-spacing: 0.2px;
        padding: 0.09rem 0.61rem 0.09rem 0;
        flex-direction: column;
    }
    /* احتياطي بلا JS — يتجاوزه القياس الديناميكي عند توفّره */
    body { padding-top: 100px; }

    .topbar-grid {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 3px 10px;
        width: 100%;
        max-width: 100vw;
        white-space: normal;
        overflow: visible;
        padding: 0 4px;
    }
    /* الزر والمدينة يبقيان مدمجين (لا يأخذان سطراً كاملاً) */
    .topbar-grid .slot-toggle { order: -1; }
    .time-toggle-btn { font-size: 0.74em; padding: 3px 11px; }
}