/* ============================================================
   Washeej theme surfaces — LAST layer (load after contrast-fix / dark-mode)
   SEALED 2026-08-23 — do not delete; tests lock these contracts.

   Purpose: dedicated light/dark rules so global tokens cannot paint
   light text onto white islands (or dark text onto the brand header).
   ============================================================ */

/* --- Sidebar expanded width (Arabic labels) --- */
@media (min-width: 992px) {
    .sidebar-menu,
    .sidebar-menu.sidebar-v2,
    .dashboard .sidebar-menu {
        width: 368px !important;
    }
    .dashboard__right {
        padding-left: 368px !important;
    }
    [dir="rtl"] .dashboard__right {
        padding-left: 0 !important;
        padding-right: 368px !important;
    }
}

/* --- Brand header is always dark chrome --- */
.dashboard-header .user-info__name,
.dashboard-header .user-info__desc,
.dashboard-header .user-info__desc .icon,
.dashboard-header .title,
.dashboard-header h3,
[data-theme="light"] .dashboard-header .user-info__name,
[data-theme="light"] .dashboard-header .user-info__desc,
[data-theme="light"] .dashboard-header .user-info__desc .icon,
[data-theme="dark"] .dashboard-header .user-info__name,
[data-theme="dark"] .dashboard-header .user-info__desc,
[data-theme="dark"] .dashboard-header .user-info__desc .icon {
    color: #ffffff !important;
}

.dashboard-header .lang-switch-text,
.dashboard-header .theme-toggle-btn,
.dashboard-header .notification-bell-btn {
    color: #ffffff !important;
}

/* --- Channel chooser: pair surface + ink per theme --- */
[data-theme="light"] .channel-option-card,
:root:not([data-theme="dark"]) .channel-option-card {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}
[data-theme="light"] .channel-option-card__title,
:root:not([data-theme="dark"]) .channel-option-card__title,
[data-theme="light"] .channel-option-card h6,
:root:not([data-theme="dark"]) .channel-option-card h6 {
    color: #111827 !important;
}
[data-theme="light"] .channel-option-card__desc,
[data-theme="light"] .channel-option-card__list,
[data-theme="light"] .channel-option-card__list li,
[data-theme="light"] .channel-option-card p,
[data-theme="light"] .channel-option-card .text-muted,
:root:not([data-theme="dark"]) .channel-option-card__desc,
:root:not([data-theme="dark"]) .channel-option-card__list,
:root:not([data-theme="dark"]) .channel-option-card__list li,
:root:not([data-theme="dark"]) .channel-option-card p,
:root:not([data-theme="dark"]) .channel-option-card .text-muted {
    color: #374151 !important;
}

[data-theme="dark"] .channel-option-card {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}
[data-theme="dark"] .channel-option-card__title,
[data-theme="dark"] .channel-option-card h6 {
    color: #f9fafb !important;
}
[data-theme="dark"] .channel-option-card__desc,
[data-theme="dark"] .channel-option-card__list,
[data-theme="dark"] .channel-option-card__list li,
[data-theme="dark"] .channel-option-card p,
[data-theme="dark"] .channel-option-card .text-muted,
[data-theme="dark"] .channel-option-card i {
    color: #d1d5db !important;
}
[data-theme="dark"] .channel-option-card--recommended:not(.is-disabled) {
    background: linear-gradient(180deg, #14532d 0%, #1f2937 42%) !important;
    border-color: #25d366 !important;
}
[data-theme="dark"] .channel-option-card.is-disabled {
    background-color: #111827 !important;
}

/* Modal chrome follows theme; inner white leftovers still get ink */
[data-theme="light"] .modal-content {
    background-color: #ffffff !important;
    color: #111827 !important;
}
[data-theme="dark"] .modal-content {
    background-color: #111827 !important;
    color: #f3f4f6 !important;
}
[data-theme="dark"] .modal-content .text-muted,
[data-theme="dark"] .modal-header .modal-title,
[data-theme="dark"] .modal-body {
    color: #e5e7eb !important;
}

/* Tables / cards sitting on the dashboard canvas */
[data-theme="light"] .custom--card,
[data-theme="light"] .card:not(.channel-option-card) {
    color: #111827;
}
[data-theme="dark"] .custom--card,
[data-theme="dark"] .card:not(.channel-option-card) {
    color: #f3f4f6;
}