/* =========================================================
   الاستكشاف التاريخي للأحداث — نسخة موحّدة ونهائية
   هذا البلوك يستبدل جميع تنسيقات التقويم/أحداث اليوم القديمة
   يعتمد على HTML الموجود في monthly-calendar-weekday-filter.blade.php
========================================================= */

.sirah-history-hub {
    --sce-oud: var(--sirah-brand-oud, #8b4654);
    --sce-oud-dark: var(--sirah-brand-oud-dark, #67313d);
    --sce-oud-deep: var(--sirah-brand-oud-deep, #4b252d);
    --sce-oud-soft: var(--sirah-brand-oud-soft, #a76470);
    --sce-gold: var(--sirah-brand-gold, #c69a58);
    --sce-gold-soft: var(--sirah-brand-gold-light, #e1c38a);
    --sce-paper: var(--sirah-brand-paper, #fffaf5);
    --sce-paper-deep: var(--sirah-brand-paper-deep, #f3e7df);
    --sce-ink: var(--sirah-brand-ink, #342329);
    --sce-muted: var(--sirah-brand-muted, #75656a);

    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-block: var(--sirah-section-space-y);

    /* background:
        radial-gradient(circle at 8% 12%, rgba(184, 139, 67, .10), transparent 26%),
        radial-gradient(circle at 91% 88%, rgba(99, 57, 47, .08), transparent 29%),
        linear-gradient(180deg, #fbf5ec 0%, #f2e5d4 100%); */
}

.sirah-history-hub *,
.sirah-history-hub *::before,
.sirah-history-hub *::after {
    box-sizing: border-box;
}

.sirah-history-hub::before,
.sirah-history-hub::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(184, 139, 67, .14);
    border-radius: 50%;
    pointer-events: none;
}

.sirah-history-hub::before {
    width: clamp(250px, 27vw, 410px);
    height: clamp(250px, 27vw, 410px);
    top: clamp(-250px, -16vw, -155px);
    right: clamp(-130px, -8vw, -70px);
}

.sirah-history-hub::after {
    width: clamp(210px, 22vw, 330px);
    height: clamp(210px, 22vw, 330px);
    bottom: clamp(-200px, -14vw, -120px);
    left: clamp(-110px, -7vw, -55px);
}

.sirah-history-hub .sirah-calendar-explorer__pattern {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .025;
    pointer-events: none;
}

.sirah-history-hub .sirah-calendar-explorer__container {
    position: relative;
    z-index: 1;
    width: min(calc(100% - 36px), 1240px);
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 0;
}

/* =========================================================
   عنوان القسم
========================================================= */

.sirah-history-hub .sirah-calendar-explorer__heading {
    width: min(100%, 760px);
    margin: 0 auto clamp(22px, 2.5vw, 32px);
    text-align: center;
}

.sirah-history-hub .sirah-calendar-explorer__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-bottom: 6px;
    color: var(--sce-oud-soft);
    font-size: clamp(11px, 1vw, 14px);
    font-weight: 800;
}

.sirah-history-hub .sirah-calendar-explorer__eyebrow i {
    color: var(--sce-gold);
}

.sirah-history-hub .sirah-calendar-explorer__heading h2 {
    margin: 0;
    color: var(--sce-oud-dark);
    font-family: "Amiri", "Cairo", serif !important;
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 700 !important;
    line-height: 1.15;
}

/* =========================================================
   الورقة الخارجية
========================================================= */

.sirah-history-hub .sirah-calendar-explorer__paper {
    position: relative;
    overflow: visible;
    padding: clamp(18px, 2vw, 26px);
    border: 1px solid rgba(99, 57, 47, .11);
    border-radius: clamp(19px, 2vw, 26px);
    background: rgba(255, 252, 247, .96);
    box-shadow:
        0 22px 55px rgba(71, 48, 39, .13),
        inset 0 1px 0 rgba(255, 255, 255, .78);
}

.sirah-history-hub .sirah-calendar-explorer__paper::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(184, 139, 67, .12);
    border-radius: 18px;
    pointer-events: none;
}

/* =========================================================
   التخطيط الرئيسي
   على الكمبيوتر: الأحداث والتقويم بنفس الارتفاع
========================================================= */

.sirah-history-hub .sirah-calendar-workspace {
    position: relative;
    z-index: 1;
    min-width: 0;
}

@media (min-width: 992px) {
    .sirah-history-hub .sirah-calendar-workspace {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(340px, .78fr);
        grid-template-areas: "events calendar";
        gap: clamp(18px, 2vw, 28px);
        align-items: stretch;
        direction: ltr;
    }

    /*
     * الاتزان النهائي لكل الحالات:
     *
     * 0 حدث أو حدث واحد:
     * لا نفرض ارتفاعًا صناعيًا.
     * التقويم يأخذ ارتفاعه الطبيعي، وعمود الأحداث يساويه تلقائيًا
     * لأن عناصر الـ Grid تعمل بـ stretch.
     *
     * حدثان أو أكثر:
     * نعطي القسم ارتفاعًا متوازنًا يكفي لإظهار بطاقتين تقريبًا،
     * وما زاد يظهر بتمرير داخلي في عمود الأحداث.
     */
    .sirah-history-hub .sirah-calendar-workspace.is-empty-events .sirah-selected-events,
    .sirah-history-hub .sirah-calendar-workspace.is-empty-events .sirah-calendar-workspace__calendar,
    .sirah-history-hub .sirah-calendar-workspace.is-one-event .sirah-selected-events,
    .sirah-history-hub .sirah-calendar-workspace.is-one-event .sirah-calendar-workspace__calendar {
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .sirah-history-hub .sirah-calendar-workspace.is-many-events .sirah-selected-events,
    .sirah-history-hub .sirah-calendar-workspace.is-many-events .sirah-calendar-workspace__calendar {
        height: 430px;
        min-height: 430px;
        max-height: 430px;
    }
}

/* =========================================================
   بطاقة اليوم والتاريخ
========================================================= */

.sirah-history-hub .sirah-calendar-today {
    position: relative;
    flex: 0 0 auto;
    min-height: 54px;
    isolation: isolate;
    overflow: hidden;

    display: grid;
    grid-template-columns:
        minmax(98px, .70fr) 1px minmax(145px, 1.15fr) 1px minmax(145px, 1.15fr);
    align-items: stretch;
    gap: 0;

    width: 100%;
    margin: 0 0 12px;
    padding: 7px 8px;

    color: #fffaf5;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 12px;

    background:
        radial-gradient(circle at 8% 0%, rgba(225, 195, 138, .17), transparent 38%),
        linear-gradient(145deg, #914e5c, #67313d 62%, #4b252d);

    box-shadow: 0 7px 17px rgba(72, 40, 39, .12);
}

.sirah-history-hub .sirah-calendar-today::after {
    content: "";
    position: absolute;
    left: -34px;
    bottom: -48px;
    z-index: -1;
    width: 84px;
    height: 84px;
    border: 1px solid rgba(225, 195, 138, .15);
    pointer-events: none;
    transform: rotate(45deg);
}

.sirah-history-hub .sirah-calendar-today__item {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
}

.sirah-history-hub .sirah-calendar-today__item--day {
    justify-content: center;
}

.sirah-history-hub .sirah-calendar-today__icon {
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    color: #f0d299;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 9px;
    background: rgba(0, 0, 0, .12);
    font-size: 9px;
}

.sirah-history-hub .sirah-calendar-today__copy {
    min-width: 0;
    display: grid;
    gap: 2px;
    overflow: visible;
}

.sirah-history-hub .sirah-calendar-today__copy small {
    color: rgba(255, 250, 245, .66);
    font-size: 7px;
    font-weight: 800;
    line-height: 1.2;
}

.sirah-history-hub .sirah-calendar-today__copy strong,
.sirah-history-hub .sirah-calendar-today__copy b {
    display: block;
    overflow: visible;
    color: #fffaf1;
    font-size: 8.2px;
    font-weight: 900;
    line-height: 1.35;
    text-overflow: clip;
    white-space: normal;
}

.sirah-history-hub .sirah-calendar-today__item--day .sirah-calendar-today__copy {
    min-width: 55px;
}

.sirah-history-hub .sirah-calendar-today__item--day .sirah-calendar-today__copy strong {
    font-family: "Amiri", "Cairo", serif !important;
    font-size: clamp(18px, 1.55vw, 22px);
    line-height: 1.05;
    white-space: nowrap;
}

.sirah-history-hub .sirah-calendar-today__separator {
    position: relative;
    z-index: 1;
    align-self: center;
    width: 1px;
    height: 30px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .20), transparent);
}

/* =========================================================
   لوحة الأحداث
========================================================= */

.sirah-history-hub .sirah-selected-events {
    grid-area: events;
    direction: rtl;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

@media (min-width: 992px) {
    .sirah-history-hub .sirah-selected-events {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
}

.sirah-history-hub .sirah-selected-events__header {
    flex: 0 0 auto;
    min-height: 50px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 12px;
    margin-bottom: 8px;
}

.sirah-history-hub .sirah-selected-events__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--sce-gold);
    font-size: 9px;
    font-weight: 800;
}

.sirah-history-hub .sirah-selected-events__header h3 {
    margin: 0;
    color: var(--sce-oud-dark);
    font-family: "Amiri", "Cairo", serif !important;
    font-size: clamp(23px, 2.2vw, 31px);
    font-weight: 700 !important;
    line-height: 1.15;
}

.sirah-history-hub .sirah-selected-events__count {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    color: var(--sce-oud);
    border: 1px solid rgba(99, 57, 47, .12);
    border-radius: 999px;
    background: #f4e7d5;
    font-size: 8.5px;
    font-weight: 800;
    white-space: nowrap;
}

.sirah-history-hub .sirah-selected-events__content {
    display: grid;
    grid-auto-rows: max-content;
    align-content: start;

    gap: 9px;
    min-width: 0;
}

@media (min-width: 992px) {
    .sirah-history-hub .sirah-selected-events__content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding-left: 5px;
        padding-bottom: 6px;
        scrollbar-width: thin;
        scrollbar-color: rgba(99, 57, 47, .34) rgba(99, 57, 47, .06);
    }

    .sirah-history-hub .sirah-selected-events__content::-webkit-scrollbar {
        width: 6px;
    }

    .sirah-history-hub .sirah-selected-events__content::-webkit-scrollbar-track {
        border-radius: 999px;
        background: rgba(99, 57, 47, .06);
    }

    .sirah-history-hub .sirah-selected-events__content::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(99, 57, 47, .30);
    }
}

/* =========================================================
   بطاقة الحدث
   - في الكمبيوتر ارتفاع ثابت حتى يظهر تقريبًا حدثان
   - الصورة تظهر فقط إذا كانت موجودة
========================================================= */

.sirah-history-hub .sirah-selected-event-card {
    display: grid;
    grid-template-columns: minmax(145px, 29%) minmax(0, 1fr);

    width: 100%;
    height: auto;
    min-height: 142px;
    max-height: none;

    overflow: hidden;
    min-width: 0;

    border: 1px solid rgba(99, 57, 47, .10);
    border-radius: 15px;
    background: #fffdf9;
    box-shadow: 0 7px 18px rgba(70, 46, 37, .075);
}

.sirah-history-hub .sirah-selected-event-card__media {
    position: relative;
    display: block;
    min-height: 100%;
    overflow: hidden;
    background: #4a312a;
    contain: paint;
}

.sirah-history-hub .sirah-selected-event-card__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: transform .45s ease;
}

.sirah-history-hub .sirah-selected-event-card:hover .sirah-selected-event-card__media img {
    transform: translateZ(0) scale(1.025);
}

.sirah-history-hub .sirah-selected-event-card__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(38, 22, 18, .26), transparent 58%),
        linear-gradient(180deg, transparent 56%, rgba(35, 20, 16, .30));
}

.sirah-history-hub .sirah-selected-event-card__body {
    display: flex;
    min-width: 0;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;

    overflow: hidden;

    padding: 10px 14px 11px;
}

.sirah-history-hub .sirah-selected-event-card__category {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
    color: var(--sce-oud-soft);
    font-size: 8.5px;
    font-weight: 800;
}

.sirah-history-hub .sirah-selected-event-card__category i {
    color: var(--sce-gold);
}

.sirah-history-hub .sirah-selected-event-card__body h4 {
    display: -webkit-box;
    overflow: hidden;

    margin: 0 0 4px;

    color: var(--sce-oud-dark);

    font-family: "Amiri", "Cairo", serif !important;
    font-size: clamp(18px, 1.45vw, 22px);
    font-weight: 700 !important;
    line-height: 1.24;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.sirah-history-hub .sirah-selected-event-card__dates {
    position: absolute;
    z-index: 3;
    right: 8px;
    left: 8px;
    bottom: 8px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;

    margin: 0;
    pointer-events: none;
}

.sirah-history-hub .sirah-selected-event-card__dates span {
    min-height: 21px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;

    max-width: 100%;
    padding: 4px 7px;

    color: #fff8ea;
    border: 1px solid rgba(240, 205, 145, .28);
    border-radius: 999px;

    background:
        linear-gradient(135deg,
            rgba(89, 39, 48, .90),
            rgba(117, 61, 57, .84));

    box-shadow:
        0 3px 9px rgba(38, 20, 17, .18),
        inset 0 1px rgba(255, 255, 255, .08);

    backdrop-filter: blur(3px);

    font-size: 7px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.sirah-history-hub .sirah-selected-event-card__dates i {
    color: #f0cf93;
    font-size: 7px;
}

.sirah-history-hub .sirah-selected-event-card__body p {
    display: -webkit-box;
    overflow: hidden;

    margin: 0 0 6px;

    color: var(--sce-muted);

    font-size: clamp(9.4px, .78vw, 11.2px);
    line-height: 1.44;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.sirah-history-hub .sirah-selected-event-card__button {
    display: inline-flex;
    min-height: 29px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: auto;
    padding: 4px 11px;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 9px;
    background: linear-gradient(135deg, #914e5c, #67313d);
    box-shadow: 0 7px 16px rgba(80, 46, 38, .17);
    font-size: 9px;
    font-weight: 800;
    text-decoration: none !important;
    transition: .2s ease;
}

.sirah-history-hub .sirah-selected-event-card__button:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 9px 19px rgba(80, 46, 38, .21);
}

.sirah-history-hub .sirah-selected-events__empty {
    display: flex;
    min-height: 150px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 24px;
    color: var(--sce-muted);
    border: 1px dashed rgba(99, 57, 47, .15);
    border-radius: 15px;
    background: #faf3e8;
    text-align: center;
}

.sirah-history-hub .sirah-selected-events__empty>span {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    margin-bottom: 9px;
    color: var(--sce-gold);
    border-radius: 50%;
    background: #efe0cb;
}

.sirah-history-hub .sirah-selected-events__empty strong {
    margin-bottom: 4px;
    color: var(--sce-oud);
    font-size: 13px;
}

.sirah-history-hub .sirah-selected-events__empty p {
    margin: 0;
    font-size: 10px;
}

/* =========================================================
   لوحة التقويم/الفلاتر
========================================================= */

.sirah-history-hub .sirah-calendar-workspace__calendar {
    grid-area: calendar;
    direction: rtl;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 15px 14px 13px;
    border: 1px solid rgba(99, 57, 47, .10);
    border-radius: 17px;
    background: linear-gradient(180deg, rgba(250, 243, 233, .90), rgba(255, 252, 247, .96));
    box-shadow: 0 10px 26px rgba(70, 46, 37, .07);
}

.sirah-history-hub .sirah-calendar-toolbar {
    position: relative;
    z-index: 40;
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    width: 100%;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* نوع التقويم */
.sirah-history-hub .sirah-calendar-toggle {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(99, 57, 47, .16);
    border-radius: 11px;
    background: #f5eadc;
}

.sirah-history-hub .sirah-calendar-toggle .btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.sirah-history-hub .sirah-calendar-toggle label {
    min-width: 0;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 8px;
    color: var(--sce-oud);
    border-left: 1px solid rgba(99, 57, 47, .12);
    cursor: pointer;
    font-size: 8.7px;
    font-weight: 800;
    white-space: nowrap;
    transition: .2s ease;
}

.sirah-history-hub .sirah-calendar-toggle label:last-of-type {
    border-left: 0;
}

.sirah-history-hub .sirah-calendar-toggle .btn-check:checked+label {
    color: #fff;
    background: linear-gradient(135deg, #914e5c, #67313d);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}

/* الشهر + يوم الأسبوع + وقت الحدث — صف واحد دائمًا */
.sirah-history-hub .sirah-calendar-selectors {
    position: relative;
    z-index: 5001;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    gap: 5px;
    overflow: visible;
}

.sirah-history-hub .sirah-calendar-field {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow: visible;
}

.sirah-history-hub .sirah-calendar-field>span {
    display: block;
    margin-bottom: 4px;
    overflow: hidden;
    color: var(--sce-oud-soft);
    font-size: 6.6px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* القوائم المخصصة */
.sirah-history-hub .sirah-smart-select {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

.sirah-history-hub .sirah-smart-select.is-open {
    z-index: 5200;
}

.sirah-history-hub .sirah-smart-select__native {
    display: none !important;
}

.sirah-history-hub .sirah-smart-select__button {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 38px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 4px;

    padding: 6px 7px;

    color: var(--sce-ink);

    border: 1px solid rgba(99, 57, 47, .14);
    border-radius: 9px;

    background: #fffaf3;

    font-family: inherit;
    font-size: 9px;
    font-weight: 700;

    text-align: right;

    cursor: pointer;
}
.sirah-history-hub .sirah-smart-select__button:hover {
    border-color: rgba(184, 139, 67, .55);
    background: #fffdf8;
}

.sirah-history-hub .sirah-smart-select.is-open .sirah-smart-select__button,
.sirah-history-hub .sirah-smart-select__button:focus-visible {
    outline: none;
    border-color: rgba(184, 139, 67, .82);
    box-shadow: 0 0 0 3px rgba(184, 139, 67, .13);
}


.sirah-history-hub .sirah-smart-select__button > span {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.sirah-history-hub .sirah-smart-select__button i {
    flex: 0 0 auto;
    color: var(--sce-gold);
    font-size: 7px;
    transition: transform .2s ease;
}

.sirah-history-hub .sirah-smart-select.is-open .sirah-smart-select__button i {
    transform: rotate(180deg);
}

.sirah-history-hub .sirah-smart-select__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 5400;
    display: none;
    max-height: 230px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid rgba(99, 57, 47, .13);
    border-radius: 11px;
    background: #fffdf9;
    box-shadow: 0 14px 34px rgba(66, 42, 34, .16);
    scrollbar-width: thin;
}

.sirah-history-hub .sirah-smart-select.is-open .sirah-smart-select__menu {
    display: grid;
    gap: 3px;
}

.sirah-history-hub .sirah-smart-select__option {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 9px;
    color: #604b46;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    text-align: right;
    cursor: pointer;
}

.sirah-history-hub .sirah-smart-select__option:hover,
.sirah-history-hub .sirah-smart-select__option:focus-visible {
    outline: none;
    color: var(--sce-oud-dark);
    background: #f8ede0;
}

.sirah-history-hub .sirah-smart-select__option.is-selected,
.sirah-history-hub .sirah-smart-select__option[aria-selected="true"] {
    color: #fff;
    background: linear-gradient(135deg, #914e5c, #67313d);
}

/* =========================================================
   تثبيت الفلاتر الثلاثة في صف واحد
========================================================= */

.sirah-history-hub .sirah-calendar-selectors > .sirah-calendar-field {
    grid-row: 1 !important;
    min-width: 0 !important;
}

.sirah-history-hub .sirah-calendar-selectors > .sirah-calendar-field:nth-child(1) { grid-column: 1 !important; }
.sirah-history-hub .sirah-calendar-selectors > .sirah-calendar-field:nth-child(2) { grid-column: 2 !important; }
.sirah-history-hub .sirah-calendar-selectors > .sirah-calendar-field:nth-child(3) { grid-column: 3 !important; }

/* =========================================================
   شبكة أيام الشهر المجمعة
========================================================= */

.sirah-history-hub .sirah-calendar-grid {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.sirah-history-hub .sirah-calendar-grid__title {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    padding: 0 1px 7px;
    border-bottom: 1px solid rgba(99, 57, 47, .09);
}

.sirah-history-hub .sirah-calendar-grid__title span {
    color: var(--sce-oud-dark);
    font-size: 9px;
    font-weight: 900;
}

.sirah-history-hub .sirah-calendar-grid__title small {
    min-width: 0;
    overflow: hidden;
    color: #9b8179;
    font-size: 7px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sirah-history-hub .sirah-calendar-days {
    flex: 0 0 auto;
    min-height: 0;

    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: 44px;
    gap: 5px;
}

.sirah-history-hub .sirah-calendar-day {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    padding: 4px 2px;
    color: #8d817a;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #f5f3f1;
    font-family: inherit;
    cursor: default;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.sirah-history-hub button.sirah-calendar-day.has-events {
    cursor: pointer;
}

.sirah-history-hub button.sirah-calendar-day.has-events:hover {
    z-index: 2;
    transform: translateY(-2px);
    box-shadow: 0 7px 16px rgba(72, 48, 39, .11);
}

.sirah-history-hub .sirah-calendar-day strong {
    font-size: clamp(11px, .95vw, 14px);
    line-height: 1;
}

.sirah-history-hub .sirah-calendar-day>span:not(.visually-hidden) {
    font-size: 6px;
    font-weight: 700;
    line-height: 1.1;
}

.sirah-history-hub .sirah-calendar-day.intensity-0 {
    color: #9a9591;
    border-color: #eee9e4;
    background: #f6f4f2;
}

/* 1–2 حدث: برتقالي فاتح */
.sirah-history-hub .sirah-calendar-day.intensity-1 {
    color: #864817;
    border-color: #efbd72;
    background:
        linear-gradient(145deg,
            #fff0d7 0%,
            #ffd18b 100%);
}

/* 3–5 أحداث: برتقالي واضح */
.sirah-history-hub .sirah-calendar-day.intensity-2 {
    color: #fffaf2;
    border-color: #ed8e36;
    background:
        linear-gradient(145deg,
            #f6a13e 0%,
            #ee702f 100%);
}

/* 6–10 أحداث: برتقالي محمر */
.sirah-history-hub .sirah-calendar-day.intensity-3 {
    color: #fffaf2;
    border-color: #d95731;
    background:
        linear-gradient(145deg,
            #eb6934 0%,
            #cf3f2c 100%);
}

/* أكثر من 10: أحمر داكن */
.sirah-history-hub .sirah-calendar-day.intensity-4 {
    color: #fffaf2;
    border-color: #98272a;
    background:
        linear-gradient(145deg,
            #ce352f 0%,
            #861f29 100%);
}

.sirah-history-hub .sirah-calendar-day.is-selected {
    outline: 3px solid rgba(184, 139, 67, .25);
    outline-offset: 1px;
    box-shadow: 0 8px 18px rgba(80, 48, 38, .16);
}

.sirah-history-hub .sirah-calendar-grid.is-loading {
    opacity: .68;
    filter: saturate(.78);
    pointer-events: none;
}

.sirah-history-hub .sirah-calendar-grid.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 20;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border: 3px solid rgba(139, 70, 84, .15);
    border-top-color: var(--sce-oud);
    border-radius: 50%;
    animation: sirah-calendar-spin .65s linear infinite;
}

@keyframes sirah-calendar-spin {
    to {
        transform: rotate(360deg);
    }
}

.sirah-history-hub .sirah-calendar-error {
    grid-column: 1 / -1;
    display: flex;
    min-height: 160px;
    align-items: center;
    justify-content: center;
    color: #8a5146;
    text-align: center;
    font-size: 11px;
}

/* =========================================================
   دليل الكثافة
========================================================= */

.sirah-history-hub .sirah-calendar-legend {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin-top: 9px;
    color: var(--sce-muted);
    font-size: 7.2px;
}

.sirah-history-hub .sirah-calendar-legend strong {
    color: var(--sce-oud);
}

.sirah-history-hub .sirah-calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sirah-history-hub .sirah-calendar-legend__swatch {
    display: inline-block;
    width: 13px;
    height: 8px;
    border: 1px solid transparent;
    border-radius: 3px;
}

.sirah-history-hub .sirah-calendar-legend__swatch.intensity-0 {
    border-color: #eee9e4;
    background: #f6f4f2;
}

.sirah-history-hub .sirah-calendar-legend__swatch.intensity-1 {
    border-color: #efbd72;
    background: linear-gradient(90deg, #fff0d7, #ffd18b);
}

.sirah-history-hub .sirah-calendar-legend__swatch.intensity-2 {
    border-color: #ed8e36;
    background: linear-gradient(90deg, #f6a13e, #ee702f);
}

.sirah-history-hub .sirah-calendar-legend__swatch.intensity-3 {
    border-color: #d95731;
    background: linear-gradient(90deg, #eb6934, #cf3f2c);
}

.sirah-history-hub .sirah-calendar-legend__swatch.intensity-4 {
    border-color: #98272a;
    background: linear-gradient(90deg, #ce352f, #861f29);
}

/* =========================================================
   اتزان بصري للديسكتوب
   التقويم يتبع ارتفاع منطقة الأحداث، وليس العكس
========================================================= */

@media (min-width: 992px) {
    .sirah-history-hub .sirah-calendar-workspace.is-many-events .sirah-calendar-workspace__calendar {
        padding-top: 13px;
        padding-bottom: 10px;
    }

    .sirah-history-hub .sirah-calendar-workspace.is-many-events .sirah-calendar-toolbar {
        margin-bottom: 7px !important;
    }

    .sirah-history-hub .sirah-calendar-workspace.is-many-events .sirah-calendar-weekdays,
    .sirah-history-hub .sirah-calendar-workspace.is-many-events .sirah-calendar-days {
        gap: 5px;
    }

    .sirah-history-hub .sirah-calendar-workspace.is-many-events .sirah-calendar-days {
        grid-auto-rows: 42px;
    }

    .sirah-history-hub .sirah-calendar-workspace.is-many-events .sirah-calendar-day {
        min-height: 42px;
    }

    .sirah-history-hub .sirah-calendar-workspace.is-many-events .sirah-calendar-legend {
        margin-top: 7px;
    }
}

/* =========================================================
   وضع حدث واحد / لا أحداث
   يصغر التقويم بدل ترك مساحة فارغة كبيرة
========================================================= */

@media (min-width: 992px) {
    .sirah-history-hub .sirah-calendar-workspace:is(.is-one-event, .is-empty-events) .sirah-calendar-workspace__calendar {
        padding-top: 12px;
        padding-bottom: 10px;
    }

    .sirah-history-hub .sirah-calendar-workspace:is(.is-one-event, .is-empty-events) .sirah-calendar-toolbar {
        gap: 6px !important;
        margin-bottom: 6px !important;
    }

    .sirah-history-hub .sirah-calendar-workspace:is(.is-one-event, .is-empty-events) .sirah-calendar-toggle label {
        min-height: 34px !important;
    }

    .sirah-history-hub .sirah-calendar-workspace:is(.is-one-event, .is-empty-events) .sirah-smart-select__button {
        min-height: 36px;
    }

    .sirah-history-hub .sirah-calendar-workspace:is(.is-one-event, .is-empty-events) .sirah-calendar-weekdays {
        margin-bottom: 5px;
        padding-bottom: 5px;
    }

    .sirah-history-hub .sirah-calendar-workspace:is(.is-one-event, .is-empty-events) .sirah-calendar-weekdays,
    .sirah-history-hub .sirah-calendar-workspace:is(.is-one-event, .is-empty-events) .sirah-calendar-days {
        gap: 4px;
    }

    .sirah-history-hub .sirah-calendar-workspace:is(.is-one-event, .is-empty-events) .sirah-calendar-days {
        grid-auto-rows: 36px;
    }

    .sirah-history-hub .sirah-calendar-workspace:is(.is-one-event, .is-empty-events) .sirah-calendar-day {
        aspect-ratio: auto;
        min-height: 36px;
        padding: 2px 3px;
        border-radius: 7px;
    }

    .sirah-history-hub .sirah-calendar-workspace:is(.is-one-event, .is-empty-events) .sirah-calendar-day strong {
        font-size: 11px;
    }

    .sirah-history-hub .sirah-calendar-workspace:is(.is-one-event, .is-empty-events) .sirah-calendar-day>span:not(.visually-hidden) {
        font-size: 5.7px;
    }

    .sirah-history-hub .sirah-calendar-workspace:is(.is-one-event, .is-empty-events) .sirah-calendar-legend {
        gap: 5px 7px;
        margin-top: 7px;
        font-size: 7px;
    }

    /*
     * البطاقات لا نثبت ارتفاعها:
     * العنوان من سطر واحد يعطي بطاقة أقصر،
     * والعنوان من سطرين يزيد الارتفاع طبيعيًا بدون فراغ مصطنع.
     */
    .sirah-history-hub .sirah-calendar-workspace:is(.is-one-event, .is-many-events) .sirah-selected-event-card {
        height: auto;
        min-height: 142px;
        max-height: none;
    }
}

/* =========================================================
   تابلت
========================================================= */

@media (max-width: 991.98px) {
    .sirah-history-hub {
        padding-block: var(--sirah-section-space-y);
    }

    .sirah-history-hub .sirah-calendar-workspace {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .sirah-history-hub .sirah-selected-events {
        order: 1;
    }

    .sirah-history-hub .sirah-calendar-workspace__calendar {
        order: 2;
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .sirah-history-hub .sirah-selected-events__content {
        max-height: none;
        overflow: visible;
    }

    .sirah-history-hub .sirah-selected-event-card {
        height: auto;
        min-height: 142px;
        max-height: none;
    }
}

/* =========================================================
   جوال
========================================================= */

@media (max-width: 767.98px) {
    .sirah-history-hub .sirah-selected-event-card__dates {
        right: 7px;
        left: 7px;
        bottom: 7px;
        gap: 3px;
    }

    .sirah-history-hub .sirah-selected-event-card__dates span {
        min-height: 19px;
        padding: 3px 6px;
        font-size: 6.4px;
    }

    .sirah-history-hub {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-block: var(--sirah-section-space-y);
        border-radius: 0;
    }

    .sirah-history-hub .sirah-calendar-explorer__container {
        width: min(calc(100% - 20px), 1120px);
    }

    .sirah-history-hub .sirah-calendar-explorer__heading {
        margin-bottom: 20px;
    }

    .sirah-history-hub .sirah-calendar-explorer__paper {
        padding: 11px;
        border-radius: 18px;
    }

    .sirah-history-hub .sirah-calendar-explorer__paper::before {
        inset: 6px;
        border-radius: 13px;
    }

    /* تاريخ اليوم */
    .sirah-history-hub .sirah-calendar-today {
        grid-template-columns: 92px minmax(0, 1fr);
        grid-template-rows: repeat(2, minmax(36px, auto));
        margin-bottom: 10px;
        padding: 6px;
    }

    .sirah-history-hub .sirah-calendar-today__item {
        min-height: 36px;
        padding: 4px 6px;
    }

    .sirah-history-hub .sirah-calendar-today__item--day {
        grid-column: 1;
        grid-row: 1 / 3;
        justify-content: center;
        flex-direction: column;
        border-left: 1px solid rgba(255, 255, 255, .11);
    }

    .sirah-history-hub .sirah-calendar-today__item--hijri {
        grid-column: 2;
        grid-row: 1;
    }

    .sirah-history-hub .sirah-calendar-today__item--gregorian {
        grid-column: 2;
        grid-row: 2;
        border-top: 1px solid rgba(255, 255, 255, .09);
    }

    .sirah-history-hub .sirah-calendar-today__separator {
        display: none;
    }

    .sirah-history-hub .sirah-calendar-today__item--day .sirah-calendar-today__copy {
        width: 100%;
        text-align: center;
    }

    .sirah-history-hub .sirah-calendar-today__item--day .sirah-calendar-today__copy strong {
        font-size: 18px;
    }

    .sirah-history-hub .sirah-calendar-today__copy b {
        font-size: 7.6px;
    }

    /* عنوان النتائج */
    .sirah-history-hub .sirah-selected-events__header {
        align-items: flex-start;
        margin-bottom: 11px;
    }

    .sirah-history-hub .sirah-selected-events__header h3 {
        font-size: clamp(22px, 7vw, 28px);
    }

    /* البطاقات على الجوال */
    .sirah-history-hub .sirah-selected-event-card,
    .sirah-history-hub .sirah-selected-event-card.is-without-image {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .sirah-history-hub .sirah-selected-event-card__media {
        aspect-ratio: 16 / 7.2;
        min-height: 0;
    }

    .sirah-history-hub .sirah-selected-event-card__body {
        padding: 14px 13px 15px;
    }

    /* الفلاتر */
    .sirah-history-hub .sirah-calendar-workspace__calendar {
        padding: 12px 10px;
    }

    .sirah-history-hub .sirah-calendar-toolbar {
        gap: 7px;
        margin-bottom: 8px;
    }

    .sirah-history-hub .sirah-calendar-toggle label {
        min-height: 35px;
        padding-inline: 5px;
        font-size: 7.8px;
    }

    .sirah-history-hub .sirah-calendar-selectors {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-flow: column;
        gap: 4px;
    }

    .sirah-history-hub .sirah-smart-select__button {
        min-height: 36px;
        padding-inline: 6px;
        font-size: 7.8px;
    }

    .sirah-history-hub .sirah-smart-select__menu {
        max-height: 210px;
    }

    /* شبكة الأيام */
    .sirah-history-hub .sirah-calendar-grid__title {
        margin-top: 1px;
        margin-bottom: 7px;
    }

    .sirah-history-hub .sirah-calendar-grid__title small {
        font-size: 6.4px;
    }

    .sirah-history-hub .sirah-calendar-days {
        grid-auto-rows: minmax(40px, auto);
        gap: 4px;
    }

    .sirah-history-hub .sirah-calendar-day {
        min-height: 40px;
        padding: 3px 2px;
        border-radius: 7px;
    }

    .sirah-history-hub .sirah-calendar-day strong {
        font-size: clamp(11px, 4vw, 14px);
    }

    .sirah-history-hub .sirah-calendar-day>span:not(.visually-hidden) {
        font-size: 5.7px;
    }

    .sirah-history-hub .sirah-calendar-legend {
        gap: 6px 8px;
        margin-top: 9px;
        font-size: 7px;
    }
}

@media (max-width: 420px) {
    .sirah-history-hub .sirah-calendar-explorer__container {
        width: min(calc(100% - 14px), 1120px);
    }

    .sirah-history-hub .sirah-calendar-explorer__paper {
        padding-inline: 8px;
    }

    .sirah-history-hub .sirah-calendar-today {
        grid-template-columns: 84px minmax(0, 1fr);
    }

    .sirah-history-hub .sirah-calendar-today__copy b {
        font-size: 7.1px;
    }

    .sirah-history-hub .sirah-calendar-toggle label {
        font-size: 7.2px;
    }

    .sirah-history-hub .sirah-calendar-selectors {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-flow: column;
        gap: 3px;
    }

    .sirah-history-hub .sirah-smart-select__button {
        min-height: 34px;
        padding-inline: 5px;
        font-size: 7px;
    }

    .sirah-history-hub .sirah-calendar-days {
        gap: 3px;
    }

    .sirah-history-hub .sirah-calendar-day {
        min-height: 38px;
    }

    .sirah-history-hub .sirah-selected-events__count {
        padding-inline: 8px;
        font-size: 8px;
    }
}

@media (min-width: 1600px) {
    .sirah-history-hub {
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .sirah-history-hub .sirah-calendar-day,
    .sirah-history-hub .sirah-selected-event-card__media img,
    .sirah-history-hub .sirah-selected-event-card__button,
    .sirah-history-hub .sirah-smart-select__button i {
        transition: none !important;
    }

    .sirah-history-hub .sirah-calendar-grid.is-loading::after {
        animation-duration: 1.4s;
    }
}