/* ============================================================
   Washeej Web UX — responsive + dark-theme P0/P1 (2026-09-07)
   Load LAST after theme-surfaces.css. Does not replace brand tokens.
   Scope: dashboard CTA wrap, equal KPI cards, table overflow/RTL,
   dark contrast, button hit-targets. No Inbox/V2/campaign-engine.
   ============================================================ */

/* --- Dark muted text: 55% on near-black fails scan contrast --- */
[data-theme="dark"] {
    --wj-text-muted: 215 16% 72%;
}

[data-theme="dark"] .dashboard .text-muted,
[data-theme="dark"] .dashboard-container .text-muted,
[data-theme="dark"] .dashboard__right .text-muted {
    color: hsl(215 16% 72%) !important;
}

/* ========================================
   1. Dashboard CTA row — wrap cleanly <1200 and phone
======================================== */
.dashboard .dashboard-body__top {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
}

.dashboard .dashboard-body__top .right,
.dashboard .dashboard-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
    justify-content: flex-end;
}

.dashboard .dashboard-body__top .right .btn,
.dashboard .dashboard-cta-row .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 40px;
    white-space: nowrap;
    line-height: 1.6;
}

@media (max-width: 1199.98px) {
    .dashboard .dashboard-body__top {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard .dashboard-body__top .right,
    .dashboard .dashboard-cta-row {
        width: 100%;
        justify-content: flex-start;
    }

    .dashboard .dashboard-body__top .right .btn,
    .dashboard .dashboard-cta-row .btn {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
        min-height: 44px;
    }
}

@media (max-width: 575.98px) {
    .dashboard .dashboard-body__top .right .btn,
    .dashboard .dashboard-cta-row .btn {
        flex: 1 1 100%;
    }
}

@media (pointer: coarse) {
    .dashboard .btn,
    .dashboard-container .btn {
        min-height: 44px;
    }
}

/* Page toolbars (contacts / campaigns / tickets) */
.dashboard-container .container-top {
    align-items: flex-start;
}

.dashboard-container .container-top .btn--group,
.dashboard-container .container-top__right {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 767.98px) {
    .dashboard-container .container-top {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 16px;
    }

    .dashboard-container .container-top__right,
    .dashboard-container .container-top .btn--group {
        width: 100%;
    }

    .dashboard-container .container-top .btn--group .btn,
    .dashboard-container .container-top__right .btn {
        flex: 1 1 auto;
        min-height: 44px;
        justify-content: center;
    }

    .dashboard-container__body {
        padding: 16px;
    }

    .dashboard .dashboard-body {
        padding: 16px;
    }
}

/* Header cluster: hide long lang name on narrow; keep flag + icons */
@media (max-width: 767.98px) {
    .dashboard-header .lang-switch-text,
    .dashboard-header .user-info__profile {
        display: none;
    }

    .dashboard .dashboard-header {
        padding-inline: 12px;
    }

    .dashboard .dashboard-header__right {
        gap: 8px;
        flex-wrap: wrap;
    }
}

/* Mid tablet: 368px sidebar eats the content pane */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .sidebar-menu,
    .sidebar-menu.sidebar-v2,
    .dashboard .sidebar-menu {
        width: 280px !important;
    }

    .dashboard__right {
        padding-left: 280px !important;
    }

    [dir="rtl"] .dashboard__right {
        padding-left: 0 !important;
        padding-right: 280px !important;
    }
}

/* ========================================
   2. Equal-height KPI cards
======================================== */
.dashboard .dashboard-kpi-row > [class*="col-"],
.dashboard-body .row.gy-4 > [class*="col-"] {
    display: flex;
}

.dashboard .dashboard-kpi-row > [class*="col-"] > .dashboard-widget,
.dashboard .dashboard-kpi-row > [class*="col-"] > .card,
.dashboard-body .row.gy-4 > [class*="col-"] > .dashboard-widget,
.dashboard-body .row.gy-4 > [class*="col-"] > .card {
    width: 100%;
}

.dashboard .dashboard-widget.widget-two {
    min-height: 112px;
    align-items: center;
}

.dashboard .dashboard-widget__text {
    margin-bottom: 6px !important;
    line-height: 1.6;
}

.dashboard .dashboard-widget__number {
    line-height: 1.35;
}

.dashboard .dashboard-widget__content {
    min-width: 0;
}

html[lang="ar"] .dashboard .dashboard-widget__text,
html[dir="rtl"] .dashboard .dashboard-widget__text {
    line-height: 1.65;
}

/* ========================================
   3. Tables — scroll on small, stacked cards keep labels, RTL safe
======================================== */
.dashboard-body .table-responsive,
.dashboard-container .table-responsive,
.dashboard-table,
.dashboard-activity-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

[dir="rtl"] .dashboard-body .table-responsive,
[dir="rtl"] .dashboard-container .table-responsive,
[dir="rtl"] .dashboard-table {
    direction: rtl;
}

.dashboard-activity-table table {
    margin-bottom: 0;
    min-width: 0 !important;
}

.dashboard-activity-table th,
.dashboard-activity-table td {
    white-space: normal;
    vertical-align: middle;
    border-color: hsl(var(--wj-border));
    padding-block: 0.65rem;
}

.dashboard-activity-table th {
    font-weight: 500;
}

.dashboard-activity-table td {
    font-variant-numeric: tabular-nums;
    text-align: end;
}

@media (max-width: 767.98px) {
    .table--responsive--md tbody tr td,
    .table--responsive--lg tbody tr td {
        text-align: start;
        border-bottom-color: hsl(var(--wj-border)) !important;
    }

    .table--responsive--md tbody tr td::before,
    .table--responsive--lg tbody tr td::before {
        content: attr(data-label);
        font-weight: 600;
        color: hsl(var(--wj-text-muted));
        line-height: 1.6;
        flex: 0 0 38%;
        max-width: 42%;
    }

    [dir="ltr"] .table--responsive--md tbody tr td,
    [dir="ltr"] .table--responsive--lg tbody tr td {
        text-align: start;
    }
}

[data-theme="dark"] .table--responsive--md tbody tr td,
[data-theme="dark"] .table--responsive--lg tbody tr td {
    border-color: hsl(var(--wj-border));
}

[data-theme="dark"] .dashboard .table thead th,
[data-theme="dark"] .dashboard-container .table thead th {
    background: hsl(var(--wj-table-header-bg)) !important;
    color: hsl(var(--wj-table-header-text)) !important;
    border-color: hsl(var(--wj-table-border)) !important;
}

[data-theme="dark"] .dashboard .list-group-item {
    background: transparent !important;
    border-color: hsl(var(--wj-border)) !important;
    color: hsl(var(--wj-text)) !important;
}

[data-theme="dark"] .dashboard .custom--card,
[data-theme="dark"] .dashboard .card {
    border-color: hsl(217 25% 22%) !important;
}

[data-theme="dark"] .dashboard .card-header {
    border-bottom-color: hsl(217 25% 22%) !important;
}

/* ========================================
   4. Dark theme — mute neon icons / button insets
======================================== */
[data-theme="dark"] .dashboard .widget-blue .dashboard-widget__icon {
    background-color: hsl(217 52% 40%) !important;
}

[data-theme="dark"] .dashboard .widget-purple .dashboard-widget__icon {
    background-color: hsl(258 40% 46%) !important;
}

[data-theme="dark"] .dashboard .widget-red .dashboard-widget__icon {
    background-color: hsl(0 48% 44%) !important;
}

[data-theme="dark"] .dashboard .widget-green .dashboard-widget__icon {
    background-color: hsl(142 38% 36%) !important;
}

[data-theme="dark"] .dashboard .dashboard-widget {
    border-color: hsl(217 25% 20%) !important;
}

[data-theme="dark"] .dashboard .btn--success,
[data-theme="dark"] .dashboard-container .btn--success {
    background-color: hsl(142 38% 30%) !important;
    border-color: hsl(142 32% 38%) !important;
    color: #fff !important;
    box-shadow: none !important;
}

[data-theme="dark"] .dashboard .btn--info,
[data-theme="dark"] .dashboard-container .btn--info {
    background-color: hsl(199 48% 34%) !important;
    border-color: hsl(199 40% 40%) !important;
    color: #fff !important;
    box-shadow: none !important;
}

[data-theme="dark"] .dashboard .btn--base,
[data-theme="dark"] .dashboard-container .btn--base {
    box-shadow: none !important;
}

[data-theme="dark"] .dashboard .btn--outline-base,
[data-theme="dark"] .dashboard .btn-outline--base {
    color: hsl(210 40% 90%) !important;
    border-color: hsl(217 25% 32%) !important;
}

[data-theme="dark"] .dashboard .btn:focus-visible,
[data-theme="dark"] .dashboard-container .btn:focus-visible {
    outline: 2px solid hsl(var(--wj-accent));
    outline-offset: 2px;
}

[data-theme="dark"] .dashboard-container .container-top {
    background-color: hsl(222 40% 8%) !important;
    border-bottom-color: hsl(217 25% 20%) !important;
}

[data-theme="dark"] .dashboard-container .container-top__desc {
    color: hsl(215 16% 72%) !important;
}