/* ============================================================================
   SIMS Design System — تقويمُ النظام
   File: wwwroot/css/sims-datepicker.css   ·   ملازمٌ لـ sims-datepicker.js
   ---------------------------------------------------------------------------
   يتبع رموزَ النظام (sims-tokens.css) فيعمل في الوضعين الفاتح والداكن بلا
   قاعدةٍ ثانية.
   ============================================================================ */

.dp { position: relative; }

/* الحقلُ نفسُه: مقاسُ خطٍّ ١٦ بكسل فما فوق — ودونه يُكبّر أندرويد الصفحةَ
   تلقائيّاً عند اللمس فتقفز الشاشة. */
.dp-in { font-size: 16px !important; letter-spacing: .02em; }

.dp-p {
    position: absolute; inset-inline-start: 0; top: calc(100% + 6px);
    z-index: var(--z-dropdown, 300);
    inline-size: 17.5rem; max-inline-size: calc(100vw - 2rem);
    padding: .7rem;
    background: var(--elev, #fff);
    border: 1px solid var(--line, rgba(0,0,0,.1));
    border-radius: var(--radius, 14px);
    box-shadow: 0 18px 44px rgba(0,0,0,.18);
}
.dp-p[hidden] { display: none; }
.dp-p.up { top: auto; bottom: calc(100% + 6px); }

/* ===== الرأس: شهرٌ وسنةٌ وسهمان ===== */
.dp-h { display: flex; align-items: center; gap: .35rem; margin-block-end: .55rem; }
.dp-t { display: flex; gap: .3rem; flex: 1; }

.dp-nav {
    inline-size: 2rem; block-size: 2rem; flex: none;
    display: grid; place-items: center;
    font-size: 1.15rem; line-height: 1;
    background: var(--inset, rgba(0,0,0,.05)); color: var(--fg, #1A2233);
    border: 0; border-radius: var(--radius-sm, 10px); cursor: pointer;
}
.dp-nav:hover { background: var(--lux-soft, rgba(212,175,55,.16)); }

.dp-m, .dp-y {
    font: inherit; font-size: var(--fs-sm, .84rem);
    padding: .3rem .4rem;
    background: var(--inset, rgba(0,0,0,.05)); color: var(--fg, #1A2233);
    border: 1px solid transparent; border-radius: var(--radius-sm, 10px);
}
.dp-m { flex: 1; }
.dp-y { inline-size: 4.2rem; text-align: center; direction: ltr; }
.dp-m:focus, .dp-y:focus { outline: 0; border-color: var(--lux, #D4AF37); }

/* ===== الشبكة ===== */
.dp-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }

.dp-dw {
    display: grid; place-items: center;
    block-size: 1.7rem;
    font-size: var(--fs-xs, .74rem); color: var(--faint, #93A0B4);
}

.dp-e { block-size: 2.1rem; }

.dp-d {
    block-size: 2.1rem;
    display: grid; place-items: center;
    font: inherit; font-size: var(--fs-sm, .84rem);
    /* الأرقامُ لاتينيّةٌ دائماً — لا تتبع لغةَ الجهاز. */
    direction: ltr;
    background: transparent; color: var(--fg, #1A2233);
    border: 0; border-radius: var(--radius-sm, 10px); cursor: pointer;
}
.dp-d:hover:not(:disabled) { background: var(--inset, rgba(0,0,0,.05)); }
.dp-d.td { box-shadow: inset 0 0 0 1px var(--lux, #D4AF37); }
.dp-d.on { background: var(--lux-grad, #D4AF37); color: #1A1407; font-weight: 600; }
.dp-d.off, .dp-d:disabled { color: var(--faint, #93A0B4); opacity: .4; cursor: not-allowed; }

/* ===== الذيل ===== */
.dp-f {
    display: flex; gap: .4rem; margin-block-start: .55rem;
    padding-block-start: .55rem;
    border-block-start: 1px solid var(--line, rgba(0,0,0,.08));
}
.dp-b {
    flex: 1; padding: .4rem;
    font: inherit; font-size: var(--fs-xs, .74rem);
    background: var(--inset, rgba(0,0,0,.05)); color: var(--fg, #1A2233);
    border: 0; border-radius: var(--radius-sm, 10px); cursor: pointer;
}
.dp-b:hover { background: var(--lux-soft, rgba(212,175,55,.16)); }
.dp-clr { color: var(--muted, #5D6B82); }

/* على الشاشات الصغيرة تتّسع اللوحةُ وتكبر مساحةُ اللمس. */
@media (max-width: 480px) {
    .dp-p { inline-size: calc(100vw - 2rem); }
    .dp-d, .dp-e { block-size: 2.5rem; }
}

/* ===== شريطُ الوقت — لحقول datetime-local ===== */
.dp-tm {
    display: flex; align-items: center; gap: .35rem;
    margin-block-start: .55rem; padding-block-start: .55rem;
    border-block-start: 1px solid var(--line, rgba(0,0,0,.08));
}
.dp-tl { flex: 1; font-size: var(--fs-xs, .74rem); color: var(--muted, #5D6B82); }
.dp-hh, .dp-mi {
    inline-size: 2.6rem; padding: .3rem;
    font: inherit; font-size: var(--fs-sm, .84rem);
    text-align: center; direction: ltr;
    background: var(--inset, rgba(0,0,0,.05)); color: var(--fg, #1A2233);
    border: 1px solid transparent; border-radius: var(--radius-sm, 10px);
}
.dp-hh:focus, .dp-mi:focus { outline: 0; border-color: var(--lux, #D4AF37); }
.dp-c { color: var(--muted, #5D6B82); }