/* ═══════════════════════════════════════════════════════════════════
   TIK Mail — theme.css (المرحلة 0: نقل طبقة v1 إلى توكنات النظام)
   يُحمَّل بعد styles.css الخاص بـelastic فيغلبه بترتيب التتالي.
   قواعد TIK: الأزرق العتيد الوحيد · بطاقات مسطحة · hover درجة أغمق ·
   تركيز ring لا توهج · لا pill إلا الوسوم.
   ═══════════════════════════════════════════════════════════════════ */

/* ── الأساس ── */
body,
#layout,
input,
button,
select,
textarea,
.form-control {
    font-family: var(--font-sans);
}

body {
    background: var(--surface-page);
    color: var(--text-body);
}

a {
    color: var(--text-link);

    &:hover {
        color: var(--text-link-hover);
    }
}

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

::selection {
    background: var(--blue-100);
    color: var(--neutral-900);
}

html.dark-mode ::selection {
    background: var(--blue-800);
    color: var(--neutral-0);
}

/* ── العمود الجانبي (قائمة المهام + المجلدات) ── */
#layout-menu {
    background: var(--mail-rail);
    border-inline-end: 1px solid var(--mail-line-soft);
}

#taskmenu a.selected,
#layout-menu a.selected {
    color: var(--mail-accent);
}

/* زر التأليف — العنصر الأبرز في الواجهة */
#layout-menu .special-buttons a.compose,
#taskmenu a.compose {
    background: var(--mail-accent) !important;
    color: var(--text-on-accent) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm);

    &:hover {
        background: var(--mail-accent-hover) !important;
        box-shadow: var(--shadow-md);
    }

    &:active {
        transform: scale(var(--press-scale));
    }
}

/* ── الأزرار الرئيسية (مواصفة Button.jsx: قطر 6px، hover درجة أغمق) ── */
.btn-primary,
button.mainaction,
.form-buttons .mainaction {
    background: var(--mail-accent) !important;
    border-color: var(--mail-accent) !important;
    border-radius: var(--radius-control) !important;
    font-weight: var(--weight-medium);

    &:hover {
        background: var(--mail-accent-hover) !important;
        border-color: var(--mail-accent-hover) !important;
    }

    &:active {
        transform: scale(var(--press-scale));
    }
}

.btn:disabled,
button:disabled {
    opacity: 0.42;
}

/* ── الحقول (مواصفة Input.jsx: حد default، تركيز ring) ── */
.form-control:focus,
input:focus:not([type="checkbox"]):not([type="radio"]),
textarea:focus,
select:focus {
    border-color: var(--mail-accent) !important;
    box-shadow: var(--ring-focus) !important;
    outline: none;
}

/* ── قائمة الرسائل (نمط Table.jsx) ── */
.listing li > a {
    border-radius: var(--radius-md);
    margin: 1px 4px;
}

.listing li.selected > a,
#messagelist tr.selected td {
    background: var(--mail-selected-bg) !important;
    color: var(--mail-selected-fg) !important;
}

#messagelist tr.unread td.subject {
    font-weight: var(--mail-unread-weight);
}

/* أداء العرض: الصفوف خارج الشاشة لا تُرسم (Baseline 2024) —
   الارتفاع الحقيقي لصف elastic في وضع القائمة العريضة */
#messagelist tbody tr {
    content-visibility: auto;
    contain-intrinsic-size: auto 3.6rem;
}

/* ── رؤوس اللوحات ── */
#layout-content .header,
#layout-list .header,
#layout-sidebar .header {
    background: var(--surface-card);
    border-bottom: 1px solid var(--mail-line-soft);
}

/* ── صفحة الدخول (بطاقة النظام: قطر panel + ظل dialog) ── */
body.task-login {
    background: var(--surface-subtle);
}

#login-form {
    background: var(--surface-card);
    border: 1px solid var(--mail-line-soft);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-dialog);
    padding: var(--space-8);

    & .button.mainaction {
        border-radius: var(--radius-control) !important;
        height: 44px;
    }
}

/* ── التنبيهات العائمة (نغمات Alert.jsx) ── */
#messagestack div {
    border-radius: var(--radius-md);

    &.error   { background: var(--danger-100);  color: var(--danger-500); }
    &.success { background: var(--success-100); color: var(--success-500); }
    &.warning { background: var(--warning-100); color: var(--warning-500); }
    &.information { background: var(--info-100); color: var(--blue-700); }
}

/* ── الحوارات (لوح 16px + الظل الأعمق + الscrim المسموح الوحيد) ── */
.ui-dialog {
    border-radius: var(--radius-panel) !important;
    box-shadow: var(--shadow-dialog) !important;
    border: 1px solid var(--mail-line-soft) !important;
}

.ui-widget-overlay {
    background: rgba(11, 16, 32, 0.55) !important;
    backdrop-filter: blur(2px);
}

/* ── متن قراءة الرسائل — شرط العربية: سطر ≥ 1.7 ── */
#messagebody,
.message-part {
    line-height: var(--leading-body);
}

/* ── الهيكل العظمي لقائمة الرسائل (يطابق ارتفاع الصف الحقيقي 3.6rem) ── */
.tik-skeleton {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: var(--surface-page);
    padding: var(--space-2);
}

.tik-sk-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 3.6rem;
    padding-inline: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.tik-sk-dot {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    flex: none;
}

.tik-sk-line {
    height: 10px;
    border-radius: var(--radius-xs);
    background: var(--surface-sunken);

    &.w40 { width: 28%; flex: none; }
    &.w70 { width: 52%; }
}

/* حاوية القائمة تحتاج سياق تموضع للهيكل */
#layout-list {
    position: relative;
}