/* Start WaslCard */
.card-anim-default {
    transition: transform .18s ease, box-shadow .18s ease;
}

    .card-anim-default:hover {
        transform: translateY(-2px);
    }

.card-anim-ads {
    transition: transform .2s ease, box-shadow .2s ease;
}

    .card-anim-ads:hover {
        transform: scale(1.02) translateY(-2px);
    }

.card-anim-promo {
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

    .card-anim-promo:hover {
        transform: rotate(-.3deg) translateY(-3px);
        filter: brightness(1.03);
    }

.card-anim-catalog {
    transition: transform .2s ease, box-shadow .2s ease;
}

    .card-anim-catalog:hover {
        transform: translateY(-3px);
    }

.card-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-text-area {
    min-height: 60px;
}

.cardPaper:hover {
    transform: translateY(-7px);
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.stat-card {
    transition: all 0.3s ease;
}

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.15);
    }

/* ── Dashboard panels ── */
.dash-panel {
    border: 1px solid #E4E4E7;
    border-radius: 14px;
    background: #fff;
}

.dash-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.dash-panel-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-panel-icon--blue {
    background: #EFF6FF;
    color: #2563EB;
}

.dash-panel-icon--orange {
    background: #FFF7ED;
    color: #EA580C;
}

.dash-panel-icon--violet {
    background: #F5F3FF;
    color: #7C3AED;
}

.dash-panel-title {
    font-weight: 650 !important;
    color: #18181B !important;
    line-height: 1.3 !important;
}

.dash-panel-sub {
    color: #71717A !important;
}

.dash-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
}

.dash-bar-row {
    display: grid;
    grid-template-columns: minmax(72px, 88px) 1fr minmax(36px, 48px);
    align-items: center;
    gap: 12px;
}

.dash-bar-label {
    color: #52525B !important;
    font-weight: 500 !important;
    white-space: nowrap;
}

.dash-bar-track {
    height: 10px;
    border-radius: 999px;
    background: #F4F4F5;
    overflow: hidden;
}

.dash-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--bar-color), color-mix(in srgb, var(--bar-color) 72%, white));
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
}

.dash-bar-value {
    font-weight: 650 !important;
    color: #18181B !important;
    text-align: end;
}

.dash-task-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.dash-task-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #FAFAFA;
    border: 1px solid #F4F4F5;
    transition: background 0.18s ease, border-color 0.18s ease;
}

    .dash-task-row:hover {
        background: #F4F4F5;
        border-color: #E4E4E7;
    }

.dash-task-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--task-icon-bg);
    color: var(--task-icon-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-task-body {
    flex: 1;
    min-width: 0;
}

.dash-task-label {
    font-weight: 600 !important;
    color: #27272A !important;
    line-height: 1.2 !important;
}

.dash-task-sub {
    color: #A1A1AA !important;
}

.dash-task-value {
    font-weight: 700 !important;
    color: #18181B !important;
    font-variant-numeric: tabular-nums;
}

.dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 220px;
    padding: 24px;
    margin-top: 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, #FAFAFA 0%, #F4F4F5 100%);
    border: 1px dashed #D4D4D8;
    color: #71717A;
    text-align: center;
}

.dash-empty--compact {
    min-height: 180px;
}

.dash-empty-icon {
    font-size: 2.5rem !important;
    color: #D4D4D8 !important;
}

.dash-donut-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 4px;
    min-height: 160px;
}

    .dash-donut-wrap .mud-chart-legend {
        display: none !important;
    }

.dash-donut-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dash-donut-number {
    font-size: 1.45rem;
    font-weight: 700;
    color: #18181B;
    line-height: 1.1;
    font-family: ExpoArabic, sans-serif;
    font-variant-numeric: tabular-nums;
}

.dash-donut-text {
    font-size: 0.75rem;
    font-weight: 500;
    color: #71717A;
    margin-top: 2px;
    font-family: ExpoArabic, sans-serif;
}

.dash-donut-legend-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
    width: 100%;
}

.dash-donut-legend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    border-radius: 8px;
    background: #FAFAFA;
    border: 1px solid #F4F4F5;
    transition: background 0.15s ease;
}

    .dash-donut-legend-row:hover {
        background: #F4F4F5;
    }

.dash-donut-legend-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.dash-donut-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dash-donut-legend-label {
    font-size: 0.8125rem !important;
    color: #3F3F46 !important;
    font-weight: 500 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-donut-legend-value {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: #18181B !important;
    font-variant-numeric: tabular-nums;
}

.card-title-1line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.card-title-2line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* هذا اللي يحل النص اللي بدون مسافات */
    overflow-wrap: anywhere; /* الأفضل */
    word-break: break-word; /* احتياط */
    min-width: 0; /* مهم داخل flex */
}

/* End WaslCard */

/* Start Image Preview Dialog*/
.WidthImage .mud-dialog {
    width: fit-content !important;
    max-width: none !important;
}

.WidthImage .mud-dialog-title {
    display: revert !important;
}

.WidthImage .mud-dialog-content {
    width: fit-content !important;
}

.preview-loading .mud-dialog-content {
    min-width: 70vh;
    min-height: 60vh;
    display: flex;
    justify-content: center
}

.preview-loading .mud-dialog-title {
    display: revert !important;
}

/* End Image Preview Dialog*/

/* Start Competition Card*/
.totle-card {
    padding: 8px; /* p-2 */
    border-radius: 12px; /* rounded-xl */
    border: 1px solid #f1f5f9; /* border-slate-100 */
    background: #f8fafc; /* bg-slate-50 */
}

.totle-name {
    font-size: 10px; /* text-[10px] */
    font-weight: 700; /* font-bold */
    color: #94a3b8; /* text-slate-400 */
    text-transform: uppercase; /* uppercase */
    text-align: center;
    margin-bottom: 4px; /* mb-1 */
    line-height: 1.1; /* leading-tight */
    min-height: 24px; /* h-6 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.totle-number {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* font-mono */
    font-weight: 700; /* font-bold */
    color: #334155; /* text-slate-700 */
}

/* name: text-sm font-bold text-slate-800 */
.name-text {
    font-weight: 700;
    color: #1f2937; /* قريب من slate-800 */
}

.status-text {
    font-size: 10px !important;
    font-weight: 700 !important;
}

/* flex flex-col gap-1 */
.date-col {
    gap: 4px;
}

/* text-[10px] font-bold text-slate-400 uppercase tracking-wider */
.date-label {
    font-weight: 700 !important;
    color: #94a3b8 !important; /* slate-400 */
    text-transform: uppercase;
    letter-spacing: .08em; /* tracking-wider */
}

/* flex items-center text-xs font-medium px-2 py-1.5 rounded-lg border */
.date-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 8px; /* قريب من px-2 py-1.5 */
    border-radius: 10px; /* rounded-lg */
    border: 1px solid;
}

/* Success: bg-emerald-50 text-emerald-700 border-emerald-100 */
.date-success {
    background: #ecfdf5;
    border-color: #d1fae5;
    color: #047857;
}

/* Error: bg-rose-50 text-rose-700 border-rose-100 */
.date-error {
    background: #fff1f2;
    border-color: #ffe4e6;
    color: #be123c;
}

/* icon size like w-3.5 h-3.5 */
.date-icon {
    font-size: 14px !important;
}

/* icon colors */
.icon-success {
    color: #10b981 !important;
}
/* emerald-500 */
.icon-error {
    color: #f43f5e !important;
}
/* rose-500 */

/* inherit text color nicely */
.date-value {
    color: inherit;
}
/* يخلي الكرت يمدد داخل MudItem */
.totle-fill {
    width: 100%;
    height: 100%;
    min-height: 92px; /* عدّلها لو تبغى أطول/أقصر */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* نفس الستايل */
.totle-card {
    padding: 8px;
    border-radius: 12px;
    border: 1px solid #f1f5f9;
    background: #f8fafc;
}

/* العنوان ثابت */
.totle-name {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase;
    line-height: 1.1;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* أهم جزء: الرقم لا يكسر سطر */
.totle-number {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis; /* إذا طول: 123123… */
    white-space: nowrap; /* يمنع سطرين */
    text-align: center;
}

.empty-state {
    min-height: 45vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state__icon {
    animation: floaty 2.5s ease-in-out infinite;
    opacity: 0.95;
    font-size: 3rem !important;
}

@keyframes floaty {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-6px);
    }
}
/* End Competition Card*/

/* Start Status Card*/
.StatusCard {
    height: auto !important;
    align-self: flex-start !important;
}

.wasl-stat-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

    .wasl-stat-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06) !important;
        border-color: #CBD5E1 !important;
    }

.wasl-stat-card__top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 12px !important;
}

.wasl-stat-card__info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.wasl-stat-card__title {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: #64748B !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
}

.wasl-stat-card__value {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
}

.wasl-stat-card__icon-box {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.wasl-stat-card__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 1px solid #F1F5F9 !important;
    width: 100% !important;
}

.wasl-stat-card__update-text {
    font-size: 0.72rem !important;
    color: #94A3B8 !important;
    font-weight: 400 !important;
}

.wasl-stat-card__sync-icon {
    font-size: 0.8rem !important;
    color: #94A3B8 !important;
}

.StatusCard .mud-card-actions {
    padding: 0px !important;
}
/* End Status Card*/

/* Start Avatar Component */
.app-avatar,
.contact-avatar,
.beneficiary-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .app-avatar .mud-avatar-content,
    .contact-avatar .mud-avatar-content,
    .beneficiary-avatar .mud-avatar-content {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        letter-spacing: 1px;
        line-height: 1;
        white-space: nowrap;
    }
/* End Avatar Component */

/* Start Beneficiary Component */

.summary-card {
    border-radius: 16px;
    border-color: rgba(0, 0, 0, 0.08);
    background: #fff;
}

.beneficiary-summary-card {
    background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
    overflow: hidden;
}

.section-label {
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    display: inline-block;
}

/*.beneficiary-avatar {
    background: rgba(25, 118, 210, 0.10);
    color: var(--mud-palette-primary);
}*/
.beneficiary-avatar {
    width: 64px;
    height: 64px;
    background: rgba(25, 118, 210, 0.10);
    color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px rgba(25, 118, 210, 0.08);
}

.contact-card {
    border-radius: 12px;
    border-color: rgba(0, 0, 0, 0.08);
    min-height: 30px;
    transition: all 0.2s ease;
}

    .contact-card:hover {
        border-color: rgba(25, 118, 210, 0.22);
        background: rgba(25, 118, 210, 0.03);
    }

.contact-avatar {
    background: rgba(25, 118, 210, 0.12);
    color: var(--mud-palette-primary);
}

.contact-avatar-text {
    font-size: 0.70rem;
    font-weight: 700;
}

.contact-name-wrapper {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

    .contact-name-wrapper .mud-tooltip-root.mud-tooltip-inline {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .contact-name-wrapper .mud-tooltip-root {
        width: 100%;
        max-width: 100%;
    }

.contact-name {
    display: block;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.contact-remove-btn {
    opacity: 0.75;
}

    .contact-remove-btn:hover {
        opacity: 1;
    }

.beneficiary-type {
    max-width: 100%;
    display: block;
}

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.h-100 {
    height: 100%;
}

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

.beneficiary-content {
    width: 100%;
    min-width: 0;
}

.beneficiary-name {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empty-contacts-state {
    /*    min-height: 140px;*/
    border-radius: 14px;
    border-style: dashed;
    color: var(--mud-palette-text-secondary);
}

.beneficiary-name-wrapper .mud-tooltip-root.mud-tooltip-inline {
    display: block;
    width: 100%;
    max-width: 100%;
}

.beneficiary-name-wrapper .mud-tooltip-root {
    width: 100%;
    max-width: 100%;
}
/* End Beneficiary Component*/

/* لون النص الثانوي - يستخدم للنصوص التوضيحية أو الوصفية */
.text-secondary {
    color: var(--mud-palette-text-secondary);
}

/* نص أقل أهمية - مثل الملاحظات الصغيرة أو المعلومات الإضافية */
.text-muted {
    opacity: .7;
}

/* نص خفيف جدًا - يستخدم للتفاصيل الثانوية جدًا مثل timestamps */
.text-soft {
    opacity: .5;
}

/* نص قوي - يستخدم للعناوين الصغيرة أو القيم المهمة */
.text-strong {
    font-weight: 600;
}

.text-bold {
    font-weight: 700;
}

.section-card {
    border-radius: 12px;
    transition: all 0.2s ease;
}

    .section-card:hover {
        border-color: rgba(25, 118, 210, 0.25);
    }

.section-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding-bottom: 12px;
}

.field-block {
    margin-bottom: 4px;
}

.field-label {
    display: inline-block;
    margin-bottom: 6px;
    font-weight: 600;
}

.view-container {
    position: relative;
    overflow: hidden;
}

.view {
    transition: all 0.3s ease;
}

    .view.hidden {
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
        position: absolute;
        width: 100%;
    }

    .view.visible {
        opacity: 1;
        transform: translateY(0);
        position: relative;
    }

.segment {
    position: relative;
    display: inline-flex;
    background: #E2E8F0;
    padding: 3px;
    border-radius: 9px;
    overflow: hidden;
}

/* المؤشر المتحرك */
.slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 50%;
    height: calc(100% - 4px);
    background: var(--mud-palette-secondary);
    border-radius: 6px;
    transition: transform 0.3s ease;
    z-index: 0;
}

    /* يتحرك لليمين */
    .slider.to-right {
        transform: translateX(100%);
    }

/* خلي الأزرار فوق */
.segment .mud-icon-button {
    z-index: 1;
}

.seg-item {
    background: transparent;
    border: none;
    padding: 5px 14px;
    border-radius: 7px;
    font-size: 0.78rem;
    cursor: pointer;
    color: #64748B;
    font-weight: 500;
    transition: all 0.2s ease;
}

    .seg-item.active {
        background: #FFFFFF !important;
        color: #0F172A !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
        font-weight: 600 !important;
    }

    .seg-item:hover:not(.active) {
        color: #0F172A;
    }

/* Guest Order & Service Card Overlays */
.guest-order-body,
.service-card-body {
    position: relative;
    min-height: 280px;
}

.guest-order-overlay,
.service-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 12px;
    transition: all 0.2s ease;
}
/* .seg-item {
        background: transparent;
        border: none;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 0.75rem;
        cursor: pointer;
        color: #848484;
    }

        .seg-item.active {
            background: var(--mud-palette-secondary);
            color: black;
            box-shadow: 0 1px 2px rgba(0,0,0,0.10);
            font-weight: 500;
        } */
.Archives-grid {
    display: grid;
    /*    grid-template-columns: repeat(5, 1fr);*/
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

/* Grid ↔ List view switch on /Archives */
.archives-view-swap {
    animation: archives-view-enter 0.28s ease;
}

@keyframes archives-view-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .archives-view-swap {
        animation: none;
    }
}

/* Temporary details drawers — portaled to body; above nav/appbar/menus; below progress (20000) */
.mud-drawer.wasl-details-drawer.mud-drawer-temporary {
    z-index: 10050 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
}

.mud-drawer.wasl-details-drawer.mud-drawer--open + .mud-overlay.mud-overlay-drawer,
body > .mud-overlay.mud-overlay-drawer.mud-drawer-overlay--open.mud-drawer-overlay-temporary {
    z-index: 10040 !important;
}

/* Closed drawer overlays must never remain as a clipped scrim over page content */
.mud-overlay.mud-overlay-drawer:not(.mud-drawer-overlay--open),
.mud-overlay.mud-drawer-overlay-temporary:not(.mud-drawer-overlay--open) {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

.archives-skeleton-card {
    width: 100%;
    height: 100%;
    min-height: 250px;
    border: 1px solid #f0f0f0;
}

.archives-skeleton-table {
    border-radius: 12px;
    overflow: hidden;
}

.Archives-grid .folder-card[draggable="true"],
.Archives-grid .folder-card[draggable="True"] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

    .Archives-grid .folder-card[draggable="true"]:active,
    .Archives-grid .folder-card[draggable="True"]:active,
    .Archives-grid .folder-card.node-dragging {
        cursor: grabbing !important;
    }

    .Archives-grid .folder-card[draggable="true"] *,
    .Archives-grid .folder-card[draggable="True"] * {
        user-select: none;
        -webkit-user-select: none;
    }

/* === Archives Grid/List === */
.archives-view {
    padding-top: 12px;
    padding-bottom: 18px;
}

.archives-grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.archives-card {
    border-radius: 14px !important;
    padding: 12px;
    min-height: 170px;
    display: flex;
    flex-direction: column;
}

.archives-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.archives-card-title {
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    word-break: break-word;
}

.archives-card-meta {
    margin-top: 2px;
    font-size: 12px;
}

.archives-card .archives-item-actions {
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .15s ease, transform .15s ease;
}

.archives-card:hover .archives-item-actions {
    opacity: 1;
    transform: translateY(0);
}

.archives-list-view {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.archives-list-row {
    padding: 10px 12px !important;
    border-radius: 14px !important;
    transition: background-color .15s ease, box-shadow .15s ease;
}

    .archives-list-row:hover {
        background: rgba(94, 118, 202, 0.05);
        box-shadow: rgba(0, 0, 0, 0.10) 0px 4px 14px;
    }

.archives-row-grid {
    display: grid;
    grid-template-columns: 1fr 140px 140px 44px;
    align-items: center;
    column-gap: 14px;
    min-width: 0;
}

.archives-row-main {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.archives-row-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.archives-row-text {
    min-width: 0;
}

.archives-row-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.archives-row-subtitle {
    margin-top: 2px;
}

.archives-row-actions {
    display: flex;
    justify-content: flex-end;
}

.archives-list-row .archives-item-actions {
    opacity: 0;
    transition: opacity .15s ease;
}

.archives-list-row:hover .archives-item-actions {
    opacity: 1;
}

@media (hover: none) and (pointer: coarse) {
    .archives-card .archives-item-actions,
    .archives-list-row .archives-item-actions {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 700px) {
    .archives-row-grid {
        grid-template-columns: 1fr 44px;
        grid-template-areas:
            "main actions"
            "size status";
    }

    .archives-row-main {
        grid-area: main;
    }

    .archives-row-actions {
        grid-area: actions;
    }

    .archives-row-size {
        grid-area: size;
    }

    .archives-row-status {
        grid-area: status;
    }
}

.archives-empty {
    padding: 18px;
    border-radius: 14px;
}

.mud-drawer {
    transition: all 0.25s ease-in-out;
}

.selected-item {
    border: 1px solid var(--mud-palette-primary);
    background: #f5f8ff;
}
/*th.mud-table-cell {
    font-size: 12px !important;
}*/

/*Start WasForm Button*/
.room-action-confirm__actions .WasFormButton {
    width: 100%;
}

.Wasl-btn {
    min-width: 106px;
    /*    height: 42px;*/
    border-radius: 4px;
    /*    font-weight: 600;*/
    white-space: nowrap;
    /*    overflow:hidden;*/
}

/* Start Wasl Button */
.was-btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    overflow: hidden;
}

.was-btn-spinner {
    flex-shrink: 0;
}

.was-btn-loading-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* End Wasl Button*/

@media (max-width: 600px) {
    .Wasl-btn {
        width: 100%;
        min-width: 100%;
    }
}

/*End WasForm Button*/

/*Start PdfViewerFull page*/

.PdfViewerFull .blazorpdf-pdf__thumbnails {
    padding-left: 0.75rem !important;
    margin-left: 0rem !important;
    background-color: #F0F0F0 !important;
}

.PdfViewerFull .blazorpdf-toolbar {
    align-items: baseline !important;
}

.icontask .mud-button-label .mud-button-icon-start {
    display: inherit;
    margin-left: -4px;
    margin-right: 8px;
    margin-inline-start: -4px;
    color: #343535 !important;
    margin-inline-end: 8px;
}

.icontask .mud-button-label .mud-button-icon-end {
    display: inherit;
    margin-left: 8px;
    margin-right: -4px;
    margin-inline-start: 8px;
    margin-inline-end: -4px;
    color: #343535 !important;
}

.btnGrayOutline .mud-button-outlined {
    border: 1px solid #DDDDDD !important;
}

.ConfPaper {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    /* width: 855px; */
    min-width: 330px;
}

.blazorpdf-container,
.blazorpdf-pdf {
    /*height: calc(100vh - 0px);*/
}

@media (max-width: 768px) {
    .textLayer {
        height: auto !important;
        max-height: none !important;
        width: auto !important;
    }
}

.conf-paper {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: min(92vw, 980px);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
}

.conf-paper__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.conf-paper__text {
    flex: 1 1 auto;
    min-width: 0;
}

    .conf-paper__text .mud-typography {
        word-break: break-word;
    }

.conf-paper__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

@media (max-width: 900px) {
    .conf-paper {
        width: min(94vw, 720px);
    }

    .conf-paper__content {
        flex-direction: column;
        align-items: stretch;
    }

    .conf-paper__actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }
}

@media (max-width: 600px) {
    .conf-paper {
        bottom: 12px;
        width: calc(100vw - 16px);
        border-radius: 14px;
    }

    .conf-paper__actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .PdfViewerFull .blazorpdf-pdf {
        height: 90vh;
    }
}

/*End PdfViewerFull page*/
img {
    opacity: 0.9;
    transition: 0.3s;
}

    img:hover {
        opacity: 1;
        transform: scale(1.05);
    }

.circle-image-container {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden; /* أهم سطر */

    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e0e0e0;
    background: #f9f9f9;
}

    .circle-image-container img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* يخلي الصورة تملأ الدائرة بشكل جميل */
    }

/*svg Empty folder */
/* Container for layout (optional, but keeps SVG centered) */
.svg-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Floating animation for the entire SVG */
.folder-illustration {
    width: 100%;
    max-width: 200px;
    height: auto;
    overflow: visible;
    animation: float-folder 4s ease-in-out infinite;
    filter: drop-shadow(0 15px 12px rgba(0, 0, 0, 0.06));
}

/* Sliding animation for the paper inside */
.paper-internal {
    animation: paper-peek 3s ease-in-out infinite;
}

@keyframes float-folder {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes paper-peek {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-35px);
    }
}
/*svg Empty folder */
/*.folder-item {
    cursor: grab;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .folder-item:active {
        cursor: grabbing;
    }

.drag-active {
    opacity: 0.9;
    transform: scale(1.05);
}

.drag-ghost {
    opacity: 0.4;
}*/
/* تأثير أثناء سحب العنصر */
.node-dragging {
    opacity: 0.5;
    transform: scale(0.95);
    border: 2px dashed #ffca28 !important;
}

/* تأثير عند المرور فوق مجلد كهدف للإفلات */
.drop-target-active {
    background-color: rgba(255, 202, 40, 0.1) !important;
    border: 2px solid #ffca28 !important;
    transition: all 0.2s ease;
}

/* لتغيير شكل المؤشر عند السحب */
.folder-item {
    /*    cursor: grab;*/
}

    .folder-item:active {
        cursor: grabbing;
    }

.fw-bold {
    font-weight: 600;
}

.Archive-Table .mud-table-body td {
    border-bottom: 1px solid #e0e0e0;
    cursor: pointer;
}

.Archive-Table .mud-table-head th {
    border-bottom: 2px solid #d5d5d5;
    background-color: #fafafa;
}

.node-dragging {
    opacity: 0.5;
    border: 2px dashed var(--mud-palette-primary) !important;
    cursor: grabbing !important;
}

.drop-target-active {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1) !important;
    border: 2px solid var(--mud-palette-primary) !important;
    transform: scale(1.03);
    transition: transform 0.2s ease-in-out;
}

.folder-list .mud-list-item-text p {
    display: contents;
}
/* حاوية الفولدر */
.folder-container {
    perspective: 1500px;
    position: relative;
    width: 150px;
    height: 100px;
    cursor: pointer;
    margin-bottom: 20px;
}

.folder-back {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #d97706; /* amber-600 */
    border-radius: 12px;
    border-top-left-radius: 0;
    transition: all 0.3s ease;
}

    .folder-back::after {
        content: '';
        position: absolute;
        bottom: 99%;
        left: 0;
        width: 50px;
        height: 10px;
        background-color: #d97706;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

.folder-paper {
    position: absolute;
    inset: 4px;
    background-color: #e4e4e7;
    border-radius: 8px;
    transition: all 0.3s ease;
    transform-origin: bottom;
}

.paper-1 {
    background-color: #a1a1aa;
}

.paper-2 {
    background-color: #d4d4d8;
}

.paper-3 {
    background-color: #f4f4f5;
}

.folder-front {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90px;
    background: linear-gradient(to top, #f59e0b, #fbbf24);
    border-radius: 12px;
    border-top-right-radius: 0;
    transform-origin: bottom;
    transition: all 0.3s ease;
}

/* تأثير الـ Hover */
.folder-card:hover .folder-back {
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.folder-card:hover .paper-1 {
    transform: rotateX(-20deg);
}

.folder-card:hover .paper-2 {
    transform: rotateX(-30deg);
}

.folder-card:hover .paper-3 {
    transform: rotateX(-38deg);
}

.folder-card:hover .folder-front {
    transform: rotateX(-46deg) translateY(1px);
    box-shadow: inset 0 15px 30px #fbbf24, inset 0 -15px 30px #d97706;
}

.folder-card:hover .folder-front-docu {
    transform: rotateX(-46deg) translateY(1px);
    box-shadow: inset 0 15px 30px #5558b1, inset 0 -15px 30px #3315ce;
}
/* تصميم المستند المتحرك */
.doc-container {
    position: relative;
    width: 100px;
    height: 120px;
    margin-bottom: 20px;
}

.doc-sleeve-back {
    position: absolute;
    inset: 0;
    background-color: #2563eb; /* Blue-600 */
    border-radius: 8px;
    transition: all 0.3s ease;
}

.doc-paper {
    position: absolute;
    inset: 6px;
    background-color: white;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
    border-top: 3px solid #60a5fa; /* Blue-400 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.doc-sleeve-front {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: rgba(59, 130, 246, 0.9); /* Blue-500 with opacity */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    backdrop-filter: blur(2px);
}

/* تأثير الانيميشن للمستند */
.folder-card:hover .doc-paper {
    transform: translateY(-35px) rotate(4deg);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.folder-card:hover .doc-sleeve-back {
    transform: scale(1.05);
}

/* تنسيق إضافي للمستند ليكون أزرق */
.document-theme .folder-back,
.document-theme .folder-back::after {
    background-color: #1e40af !important; /* Blue-800 */
}

.document-theme .folder-front {
    background: linear-gradient(to top, #2563eb, #60a5fa) !important;
}

    .document-theme .folder-front::after,
    .document-theme .folder-front::before {
        background-color: #60a5fa !important;
    }

/* تعديل الـ Hover للمستند */
.document-theme:hover .folder-front {
    box-shadow: inset 0 15px 30px #60a5fa, inset 0 -15px 30px #1e40af !important;
}

/* ثيم الأرشيف الروت — نيلي هادئ متناسق مع هوية المنصة (بدون أسود/ذهبي) */
.root-theme .folder-back,
.root-theme .folder-back::after {
    background-color: #3730a3 !important;
}

.root-theme .folder-front {
    background: linear-gradient(to top, #312e81, #4f46e5) !important;
}

    .root-theme .folder-front::after,
    .root-theme .folder-front::before {
        background-color: #6366f1 !important;
    }

.root-theme:hover .folder-front {
    box-shadow: inset 0 15px 30px #818cf8, inset 0 -15px 30px #312e81 !important;
}

.root-theme .paper-1 {
    background-color: #e0e7ff !important;
}

.root-theme .paper-2 {
    background-color: #c7d2fe !important;
}

.root-theme .paper-3 {
    background-color: #ffffff !important;
}

/* حاوية الملف الرأسية */
.file-portrait-container {
    perspective: 1000px;
    position: relative;
    width: 110px; /* عرض ضيق ليوحي بالورقة */
    height: 150px; /* ارتفاع طولي */
}

/* الغلاف الخلفي */
.file-portrait-back {
    position: absolute;
    inset: 0;
    background-color: #cbd5e1;
    border-radius: 4px;
}

/* الأوراق البيضاء بالداخل */
.file-portrait-paper {
    position: absolute;
    inset: 2px;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: bottom;
}

/* الغلاف الأمامي الملون */
.file-portrait-front {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    transform-origin: bottom;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
    /* شكل الورقة بكسرة علوية */
    clip-path: polygon(0% 0%, 75% 0%, 100% 18%, 100% 100%, 0% 100%);
}

/* كسرة الورقة (Dog-ear) */
.file-dog-ear {
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
    background-color: rgba(0,0,0,0.2);
}

/* الأنيميشن */
.folder-card:hover .file-portrait-front {
    transform: rotateX(-40deg) translateY(2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.folder-card:hover .file-portrait-paper {
    transform: rotateX(-20deg);
}

.context-menu-paper {
    min-width: 140px;
    /*    border: 1px solid rgba(0,0,0,0.08);*/
    animation: contextMenuFadeIn 0.12s ease-out;
}

@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.context-menu .mud-list-item-text {
    flex: 1 1 auto;
    display: flex;
    justify-content: start;
    min-width: 0;
    margin-top: 4px;
    margin-bottom: 4px;
    cursor: pointer;
}

.context-menu .mud-list-item-gutters {
    padding-left: 8px;
    padding-right: 8px;
}

.mud-menu-item {
    padding-left: 8px;
    padding-right: 8px;
}

.mud-list-item-gutters {
    padding-left: 8px;
    padding-right: 8px;
}

.mud-list-padding {
    padding: 4px !important;
}

.Archive .mud-list,
.Archive.mud-list,
.mud-popover .Archive,
.mud-list.Archive {
    min-width: 140px;
    direction: rtl;
    text-align: start;
}

[dir="ltr"] .Archive .mud-list,
[dir="ltr"] .Archive.mud-list,
[dir="ltr"] .mud-popover .Archive,
[dir="ltr"] .mud-list.Archive {
    direction: ltr;
}

/* Same item flow as right-click menu: direction handles RTL, keep flex row */
.mud-popover .Archive .app-menu-item .mud-stack,
.mud-list.Archive .app-menu-item .mud-stack,
.context-menu.Archive .app-menu-item .mud-stack {
    flex-direction: row !important;
    justify-content: flex-start;
    width: 100%;
}

.app-menu-item:hover {
    background-color: rgba(0,0,0,0.04);
    cursor: pointer;
}

/* الحاوية الصغيرة */
.folder-mini {
    perspective: 500px;
    position: relative;
    width: 45px; /* عرض صغير جداً للجداول */
    height: 32px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}

.folder-back-mini {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #d97706;
    border-radius: 4px;
    border-top-left-radius: 0;
    transition: all 0.3s ease;
}

    .folder-back-mini::after {
        content: '';
        position: absolute;
        bottom: 98%;
        left: 0;
        width: 15px; /* تصغير اللسان العلوي */
        height: 4px;
        background-color: #d97706;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
    }

.paper-mini {
    position: absolute;
    inset: 2px;
    background-color: #e4e4e7;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: bottom;
}

.folder-front-mini {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 28px;
    background: linear-gradient(to top, #f59e0b, #fbbf24);
    border-radius: 4px;
    border-top-right-radius: 0;
    transform-origin: bottom;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* التنسيق الأزرق للمستندات */
.folder-front-docu-mini {
    background: linear-gradient(to top, #2563eb, #60a5fa);
}

.folder-back-docu-mini {
    background-color: #1e40af;
}

    .folder-back-docu-mini::after {
        background-color: #1e40af;
    }

/* تأثير الـ Hover عند وضع الماوس على الصف أو الحاوية */
.folder-mini:hover .paper-mini {
    transform: rotateX(-20deg) translateY(-2px);
}

.folder-mini:hover .folder-front-mini {
    transform: rotateX(-40deg);
}

.Archive-Table .mud-table-row:hover .paper-mini {
    transform: rotateX(-20deg) translateY(-2px);
}

.Archive-Table .mud-table-row:hover .folder-front-mini {
    transform: rotateX(-40deg);
}

/* الحاوية الصغيرة للملف الرأسي */
.file-portrait-mini {
    perspective: 600px;
    position: relative;
    width: 32px; /* عرض صغير جداً */
    height: 42px; /* ارتفاع متناسق */
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

/* الغلاف الخلفي الصغير */
.file-portrait-back-mini {
    position: absolute;
    inset: 0;
    background-color: #cbd5e1;
    border-radius: 3px;
}

/* الأوراق الداخلية */
.file-portrait-paper-mini {
    position: absolute;
    inset: 1px;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: bottom;
}

/* الغلاف الأمامي الملون */
.file-portrait-front-mini {
    position: absolute;
    inset: 0;
    border-radius: 3px;
    transform-origin: bottom;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
    /* الحفاظ على قصة الزاوية */
    clip-path: polygon(0% 0%, 70% 0%, 100% 22%, 100% 100%, 0% 100%);
}

/* كسرة الورقة الصغرى */
.file-dog-ear-mini {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px; /* تصغير الكسرة */
    height: 10px;
    background-color: rgba(0,0,0,0.15);
    /* جعل الكسرة تبدو كمثلث مطوي */
    clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}

/* تأثير الـ Hover */
.file-portrait-mini:hover .file-portrait-front-mini {
    transform: rotateX(-35deg) translateY(1px);
}

.file-portrait-mini:hover .file-portrait-paper-mini {
    transform: rotateX(-15deg);
}

.Archive-Table .mud-table-row:hover .file-portrait-front-mini {
    transform: rotateX(-35deg) translateY(1px);
}

.Archive-Table .mud-table-row:hover .file-portrait-paper-mini {
    transform: rotateX(-15deg);
}
/* الحاوية الصغيرة جداً */
.folder-mini-inv {
    perspective: 500px;
    position: relative;
    width: 42px; /* عرض متناسق للجدول */
    height: 30px; /* ارتفاع متناسق */
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

/* الجزء الخلفي */
.folder-back-mini-inv {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #d97706; /* amber-600 */
    border-radius: 3px;
    border-top-left-radius: 0;
    transition: all 0.3s ease;
}

    .folder-back-mini-inv::after {
        content: '';
        position: absolute;
        bottom: 98%;
        left: 0;
        width: 14px;
        height: 4px;
        background-color: #d97706;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
    }

/* الأوراق الداخلية */
.folder-paper-mini-inv {
    position: absolute;
    inset: 2px;
    background-color: #e4e4e7;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: bottom;
}

.paper-mini-1 {
    background-color: #a1a1aa;
}

.paper-mini-2 {
    background-color: #d4d4d8;
}

.paper-mini-3 {
    background-color: #f4f4f5;
}

/* الجزء الأمامي مع الأيقونة */
.folder-front-mini-inv {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 26px;
    background: linear-gradient(to top, #f59e0b, #fbbf24);
    border-radius: 3px;
    border-top-right-radius: 0;
    transform-origin: bottom;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* تأثير الـ Hover */
.folder-mini-inv:hover .folder-front-mini-inv {
    transform: rotateX(-40deg);
}

.folder-mini-inv:hover .paper-mini-1 {
    transform: rotateX(-15deg);
}

.folder-mini-inv:hover .paper-mini-2 {
    transform: rotateX(-25deg);
}

.folder-mini-inv:hover .paper-mini-3 {
    transform: rotateX(-35deg);
}

.Archive-Table .mud-table-row:hover .folder-front-mini-inv {
    transform: rotateX(-40deg);
}

.Archive-Table .mud-table-row:hover .paper-mini-1 {
    transform: rotateX(-15deg);
}

.Archive-Table .mud-table-row:hover .paper-mini-2 {
    transform: rotateX(-25deg);
}

.Archive-Table .mud-table-row:hover .paper-mini-3 {
    transform: rotateX(-35deg);
}

/* ثيم الأرشيف الروت المصغر — نفس النيلي الهادئ */
.root-theme-mini .folder-back-mini-inv,
.root-theme-mini .folder-back-mini-inv::after {
    background-color: #3730a3 !important;
}

.root-theme-mini .folder-front-mini-inv {
    background: linear-gradient(to top, #312e81, #4f46e5) !important;
}

.root-theme-mini .paper-mini-1 {
    background-color: #e0e7ff !important;
}

.root-theme-mini .paper-mini-2 {
    background-color: #c7d2fe !important;
}

.root-theme-mini .paper-mini-3 {
    background-color: #ffffff !important;
}

.root-theme-mini:hover .folder-front-mini-inv {
    box-shadow: inset 0 5px 10px #818cf8, inset 0 -5px 10px #312e81 !important;
}

.border-all {
    border: 1px solid rgba(0,0,0,0.08);
}

.bg-light {
    background-color: #fcfcfc;
}

.shadow-xs {
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

/* تحسين شكل الـ TreeView */
.mud-treeview-item-content {
    border-radius: 8px;
    margin-bottom: 2px;
}

.mud-treeview-item-selected {
    background-color: var(--mud-palette-primary-hover) !important;
}

/* تنسيق جدول الصلاحيات */
.custom-acl-table .mud-table-head {
    background-color: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 2;
}

.custom-tree-scroll::-webkit-scrollbar {
    width: 4px;
}

.custom-tree-scroll::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    border-radius: 10px;
}

/* Archive ACL page — layout only; table fill follows Items (wasl-table-fill) pattern */
.acl-page__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
    background: var(--mud-palette-surface);
}

.acl-page__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    flex-wrap: wrap;
}

.acl-page__archive-picker {
    flex: 0 1 260px;
    min-width: 180px;
    max-width: 320px;
}

    .acl-page__archive-picker .mud-select,
    .acl-page__archive-picker .mud-input-control {
        width: 100%;
        margin-bottom: 0 !important;
    }

.acl-page__location {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 12px;
    border-radius: 8px;
    background-color: #f8f9fa;
    border: 1px dashed var(--mud-palette-lines-default);
}

.acl-page__location-label {
    white-space: nowrap;
}

    .acl-page__location-label::after {
        content: ":";
        margin-inline-start: 2px;
    }

.acl-page__location-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.acl-page__inherit {
    flex-shrink: 0;
}

.acl-page__inherit-row {
    flex-shrink: 0;
}

.acl-page__help {
    margin: 0;
    padding: 0;
}

.acl-page__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    min-width: 0;
}

    .acl-page__actions > :not(.acl-page__search) {
        flex: 0 0 auto;
    }

.acl-page__search {
    width: 220px;
    flex: 0 0 220px;
    min-width: 0;
}

    .acl-page__search.A-SearchBar .mud-input-control,
    .acl-page__search.A-SearchBar .mud-input-control-input-container,
    .acl-page__search.A-SearchBar .mud-input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

.acl-page__panel-meta {
    flex: 0 0 auto;
}

/* Split body fills remaining viewport (inside wasl-fill-table) */
.wasl-fill-table > .acl-split {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.acl-page__body {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    margin: 0 !important;
    align-items: stretch;
}

    .acl-page__body > .mud-grid-item {
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
    }

.acl-page__tree {
    border-inline-end: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-background) 55%, var(--mud-palette-surface));
    height: 100%;
}

.acl-page__tree-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 12px;
    min-height: 0;
}

.acl-page__section-label {
    display: block;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    flex: 0 0 auto;
}

/* Compact archive-level ACL entry — purpose-first, low height */
.acl-page__root-node {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 10px;
    padding: 6px 8px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    text-align: start;
    color: inherit;
    font: inherit;
    line-height: 1.2;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .acl-page__root-node:hover {
        background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
        border-color: color-mix(in srgb, var(--mud-palette-primary) 40%, var(--mud-palette-lines-default));
    }

    .acl-page__root-node.is-selected {
        border-style: solid;
        border-color: var(--mud-palette-primary);
        background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    }

.acl-page__root-node-icon {
    flex-shrink: 0;
}

.acl-page__root-node-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}

.acl-page__root-node-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acl-page__root-node.is-selected .acl-page__root-node-title {
    color: var(--mud-palette-primary);
}

.acl-page__root-node-name {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.acl-page__root-node-check {
    flex-shrink: 0;
}

.acl-page__tree-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.acl-page__panel {
    min-width: 0;
    height: 100%;
}

.acl-page__panel-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    padding: 12px 16px 12px;
    overflow: hidden;
}

    /* Make nested wasl-table-fill grow inside the panel (Items pattern) */
    .acl-page__panel-inner > .wasl-table-fill {
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

        .acl-page__panel-inner > .wasl-table-fill > .mud-table {
            flex: 1 1 auto;
            min-height: 0;
            width: 100%;
            height: auto !important;
            max-height: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden;
        }

        .acl-page__panel-inner > .wasl-table-fill .mud-table-container {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            height: auto !important;
            max-height: 100% !important;
            overflow-y: auto !important;
            overflow-x: auto !important;
        }

        .acl-page__panel-inner > .wasl-table-fill .mud-table-pagination,
        .acl-page__panel-inner > .wasl-table-fill .mud-tablepager {
            flex: 0 0 auto;
        }

.acl-page__empty {
    padding: 48px 24px;
}

.acl-loading-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.acl-loading-col--user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.acl-loading-col--user-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.acl-loading-col--switch {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 90px;
}

.acl-employee-picker-dialog .mud-dialog-content {
    overflow: hidden !important;
}

.acl-employee-dialog {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.acl-employee-dialog__title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.acl-employee-dialog__title {
    font-weight: 700;
    line-height: 1.3;
}

.acl-employee-dialog__subtitle {
    opacity: 0.85;
}

.acl-employee-dialog__toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .acl-employee-dialog__toolbar .mud-input-control {
        flex: 1 1 auto;
        min-width: 0;
    }

.acl-employee-dialog__count {
    flex: 0 0 auto;
}

.acl-employee-dialog__table {
    min-height: 0;
    position: relative;
}

    .acl-employee-dialog__table.is-loading .mud-table-container {
        visibility: hidden;
    }

.acl-employee-picker-dialog .mud-table .mud-progress-linear,
.acl-employee-picker-dialog .mud-table-loading .mud-progress-linear {
    display: none !important;
}

.acl-employee-dialog__skeleton-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 380px;
    z-index: 5;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    overflow: hidden;
}

.acl-employee-loading-panel {
    background: var(--mud-palette-surface);
    min-height: 380px;
}

.acl-employee-loading-panel__head {
    display: grid;
    grid-template-columns: 48px minmax(180px, 1.6fr) 140px;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    font-weight: 700;
    font-size: 0.8125rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.acl-employee-loading-panel__check {
    width: 18px;
    height: 18px;
    border-radius: 2px;
    border: 1px solid var(--mud-palette-lines-default);
    justify-self: center;
}

.acl-employee-dialog__empty {
    padding: 40px 16px;
}

.acl-employee-loading-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
}

.acl-employee-loading-col--mobile {
    flex: 0 0 140px;
}

.acl-loading-panel {
    background: var(--mud-palette-surface);
    min-height: 280px;
}

.acl-loading-panel__head {
    display: grid;
    grid-template-columns: minmax(180px, 1.6fr) 90px 90px 48px;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    font-weight: 700;
    font-size: 0.8125rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

    .acl-loading-panel__head > span:nth-child(2),
    .acl-loading-panel__head > span:nth-child(3) {
        text-align: center;
    }

@media (max-width: 1200px) {
    .acl-page__actions {
        flex-wrap: wrap;
        width: 100%;
        justify-content: flex-start;
    }

    .acl-page__search {
        flex: 1 1 200px;
        width: auto;
        max-width: 320px;
    }
}

@media (max-width: 960px) {
    .wasl-fill-table > .acl-split {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .acl-page__body > .mud-grid-item {
        height: auto;
    }

    .acl-page__tree {
        border-inline-end: none;
        border-bottom: 1px solid var(--mud-palette-lines-default);
        height: auto;
    }

    .acl-page__tree-inner,
    .acl-page__panel-inner {
        height: auto;
        overflow: visible;
    }

    .acl-page__tree-scroll {
        flex: 0 1 auto;
        max-height: min(45vh, 360px);
    }

    .acl-page__archive-picker {
        flex: 1 1 100%;
        max-width: 100%;
        order: -1;
    }

    .acl-page__search {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
    }

    .acl-page__location-name {
        max-width: 160px;
    }

    .acl-page__panel-inner > .wasl-table-fill,
    .acl-page__panel-inner > .wasl-table-fill > .mud-table,
    .acl-page__panel-inner > .wasl-table-fill .mud-table-container {
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
}

.tree-item-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
}

.tree-item-active {
    font-weight: bold;
    color: var(--mud-palette-primary);
}

/* تحسين شكل الصف الموروث ليعطي إيحاء بأنه للقراءة فقط */
.inherited-row {
    background-color: rgba(0, 0, 0, 0.02); /* لون خلفية خفيف جداً */
    cursor: not-allowed;
}

/*Dashbord*/

/* 🌟 Premium Design System 🌟 */
@keyframes subtleFadeUp {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   Start Nav Menu & Submenu Flyout  (SaaS dashboard shell)
   ═══════════════════════════════════════════════════════════════ */

:root {
    --nav-width: 280px;
    --nav-bg: #FFFFFF;
    --nav-border: #E4E4E7;
    --nav-muted: #71717A;
    --nav-text: #18181B;
    --nav-hover: #F4F4F5;
    --nav-expanded-hint: rgba(0, 0, 0, 0.03);
    --nav-active-bg: rgba(111, 58, 250, 0.09);
    --nav-active-text: var(--mud-palette-primary);
    --nav-group-active-bg: #F3F0FF;
    --nav-group-active-text: #6D28D9;
    --nav-group-active-icon: #6D28D9;
    --nav-radius: 8px;
    --nav-radius-lg: 10px;
    --nav-flyout-height: 340px;
    --nav-transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Drawer shell ── */
.nav-drawer {
    width: var(--nav-width) !important;
    min-width: var(--nav-width) !important;
    max-width: var(--nav-width) !important;
    border-inline-end: 1px solid var(--nav-border) !important;
    background-color: var(--nav-bg) !important;
}

    .nav-drawer .mud-drawer-content {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden !important;
        padding: 0 !important;
    }

/* ── Sidebar layout: fixed header + scrollable nav + fixed footer ── */
.nav-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    width: 100%;
    background: var(--nav-bg);
}

.nav-sidebar-header {
    flex: 0 0 auto;
    z-index: 2;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
}

.nav-sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 10px 16px;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #D4D4D8 transparent;
}

    .nav-sidebar-scroll::-webkit-scrollbar {
        width: 5px;
    }

    .nav-sidebar-scroll::-webkit-scrollbar-thumb {
        background: #D4D4D8;
        border-radius: 8px;
    }

        .nav-sidebar-scroll::-webkit-scrollbar-thumb:hover {
            background: #A1A1AA;
        }

.nav-sidebar-footer {
    flex: 0 0 auto;
    padding: 8px 10px 12px;
    border-top: 1px solid var(--nav-border);
    background: var(--nav-bg);
}

    .nav-sidebar-footer .nav-account-menu-root {
        display: block;
        width: 100%;
    }

    .nav-sidebar-footer .nav-business-profile {
        margin: 0;
        width: 100%;
    }

    .nav-sidebar-footer .nav-sidebar-profile-skeleton {
        margin: 0;
    }

.nav-sidebar-loading {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
}

.nav-skeleton-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: var(--nav-radius);
}

.nav-sidebar-profile-skeleton {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 12px 12px;
    padding: 10px 12px;
    border-radius: var(--nav-radius-lg);
    background: var(--nav-hover, #f4f4f5);
}

.nav-sidebar-loading-label {
    margin-top: 8px;
    padding-inline: 8px;
    color: var(--nav-muted, #71717a) !important;
    text-align: center;
    opacity: 0.85;
}

/* ── Brand header ── */
.nav-brand-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px 14px;
}

.nav-brand-logo {
    border-radius: var(--nav-radius);
    object-fit: contain;
    flex-shrink: 0;
}

.nav-brand-title {
    font-weight: 650 !important;
    font-size: 0.9375rem !important;
    color: var(--nav-text) !important;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* ── Organization / business profile ── */
.nav-account-menu-root {
    display: block;
    width: 100%;
}

.nav-account-menu {
    border-radius: 12px !important;
    border: 1px solid var(--nav-border) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    min-width: 220px;
    max-width: min(280px, calc(100vw - 96px)) !important;
    width: max-content;
    z-index: 2000 !important;
    box-sizing: border-box !important;
}

    .nav-account-menu.nav-account-menu--mini {
        z-index: 2100 !important;
        margin-inline: 8px !important;
        margin-block-end: 0 !important;
    }

    .nav-account-menu__list,
    .nav-account-menu .mud-list,
    .nav-account-menu .mud-list-padding {
        padding: 6px !important;
        display: flex;
        flex-direction: column;
        gap: 2px;
        overflow: hidden !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

.nav-account-menu__heading {
    padding: 8px 12px 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--nav-muted);
    text-align: start;
}

.nav-account-menu__user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    min-height: 40px;
    max-width: 100%;
    box-sizing: border-box;
}

.nav-account-menu__user-icon {
    flex: 0 0 1.25rem;
    color: var(--nav-muted, #71717A) !important;
}

.nav-account-menu__user-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--nav-text, #18181B);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: start;
}

.nav-account-menu__divider {
    margin: 4px 0 !important;
    max-width: 100%;
}

.nav-account-menu .mud-menu-item,
.nav-account-menu .mud-list-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    min-height: 40px !important;
    max-width: 100% !important;
    width: 100% !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    text-align: start !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.nav-account-menu .mud-menu-item-icon,
.nav-account-menu .mud-list-item-icon {
    order: 0;
    flex: 0 0 1.25rem !important;
    width: 1.25rem !important;
    min-width: 1.25rem !important;
    height: 1.25rem !important;
    margin: 0 !important;
    margin-inline: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--nav-muted, #71717A) !important;
}

    .nav-account-menu .mud-menu-item-icon .mud-icon-root,
    .nav-account-menu .mud-list-item-icon .mud-icon-root {
        font-size: 1.125rem !important;
        width: 1.125rem !important;
        height: 1.125rem !important;
    }

.nav-account-menu .mud-menu-item .mud-typography,
.nav-account-menu .mud-list-item-text,
.nav-account-menu .mud-list-item-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: start !important;
    color: var(--nav-text, #18181B) !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-account-menu .mud-menu-item:hover {
    background: var(--nav-hover) !important;
}

.nav-account-menu .mud-menu,
.nav-account-menu__submenu-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}

    .nav-account-menu .mud-menu > .mud-button-root,
    .nav-account-menu .mud-menu > button,
    .nav-account-menu__submenu-wrapper > .mud-button-root,
    .nav-account-menu__submenu-wrapper > button,
    .nav-account-menu__submenu-trigger {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 40px !important;
        height: 40px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        background: transparent !important;
        border: none !important;
        box-sizing: border-box !important;
        cursor: pointer !important;
        font-family: inherit !important;
        text-align: start !important;
    }

        .nav-account-menu .mud-menu > .mud-button-root .mud-button-label,
        .nav-account-menu .mud-menu > button .mud-button-label,
        .nav-account-menu__submenu-wrapper .mud-button-label {
            width: 100% !important;
            height: 100% !important;
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: space-between !important;
            padding: 0 !important;
            margin: 0 !important;
            box-sizing: border-box !important;
        }

        .nav-account-menu .mud-menu:hover > .mud-button-root,
        .nav-account-menu .mud-menu:hover > button,
        .nav-account-menu__submenu-wrapper:hover > .mud-button-root,
        .nav-account-menu__submenu-wrapper:hover > button,
        .nav-account-menu__submenu-trigger:hover {
            background: var(--nav-hover, #F4F4F5) !important;
        }

.nav-account-menu__icon {
    order: 0 !important;
    flex: 0 0 1.25rem !important;
    width: 1.25rem !important;
    min-width: 1.25rem !important;
    height: 1.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--nav-muted, #71717A) !important;
}

    .nav-account-menu__icon .mud-icon-root {
        font-size: 1.125rem !important;
        width: 1.125rem !important;
        height: 1.125rem !important;
    }

.nav-account-menu__title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: start !important;
    color: var(--nav-text, #18181B) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.nav-account-menu__chevron {
    flex: 0 0 auto !important;
    margin-inline-start: auto !important;
    color: var(--nav-muted, #71717A) !important;
    font-size: 1.125rem !important;
}

.nav-account-menu .nav-account-menu__logout,
.nav-account-menu .nav-account-menu__logout.mud-menu-item,
.nav-account-menu .mud-menu-item.nav-account-menu__logout {
    color: #DC2626 !important;
}

    .nav-account-menu .nav-account-menu__logout .mud-menu-item-icon,
    .nav-account-menu .nav-account-menu__logout .mud-list-item-icon,
    .nav-account-menu .nav-account-menu__logout .mud-icon-root,
    .nav-account-menu .nav-account-menu__logout .mud-menu-item-icon .mud-icon-root,
    .nav-account-menu .nav-account-menu__logout svg,
    .nav-account-menu .nav-account-menu__logout .mud-typography {
        color: #DC2626 !important;
        fill: currentColor !important;
    }

    .nav-account-menu .nav-account-menu__logout:hover {
        background: rgba(220, 38, 38, 0.06) !important;
    }

.nav-business-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 12px 12px;
    padding: 10px 12px;
    width: calc(100% - 24px);
    box-sizing: border-box;
    border-radius: var(--nav-radius-lg);
    border: 1px solid var(--nav-border);
    background: #FAFAFA;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-align: start;
    font: inherit;
    color: inherit;
    transition: border-color var(--nav-transition), background var(--nav-transition), box-shadow var(--nav-transition);
}

    .nav-business-profile:hover {
        border-color: #D4D4D8;
        background: var(--nav-hover);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .nav-business-profile:focus-visible {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }

.nav-business-profile-avatar {
    width: 32px !important;
    height: 32px !important;
    border: 1px solid var(--nav-border) !important;
    background: #fff !important;
    flex-shrink: 0;
}

.nav-business-profile-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.nav-business-profile-label {
    font-size: 0.625rem !important;
    color: var(--nav-muted) !important;
    font-weight: 600 !important;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.nav-business-profile-name {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--nav-text) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

.nav-business-profile-chevron {
    color: #A1A1AA !important;
    flex-shrink: 0;
    font-size: 1.125rem !important;
    transition: color var(--nav-transition), transform var(--nav-transition);
}

.nav-business-profile:hover .nav-business-profile-chevron {
    color: var(--nav-muted) !important;
}

/* ── Nav menu base ── */
.sty-nav-link.mud-navmenu {
    padding: 0 !important;
    gap: 2px;
}

.sty-nav-link .mud-nav-item {
    font-size: 0.8125rem !important;
    margin-block: 1px;
}

.sty-nav-group .mud-nav-group {
    padding-bottom: 6px;
    margin-bottom: 2px;
}

/* ── Parent group headers ── */
.sty-nav-link .mud-nav-group > .mud-nav-link {
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: var(--nav-text) !important;
    min-height: 38px !important;
    padding-block: 8px !important;
    padding-inline: 10px !important;
    margin-inline: 0;
    border-radius: var(--nav-radius);
    background: transparent !important;
    transition: background var(--nav-transition), color var(--nav-transition), box-shadow var(--nav-transition);
}

/* Expanded — transparent with a hairline hint only (skip active-parent groups) */
.sty-nav-link .mud-nav-group:not(.nav-parent-active):has(.mud-collapse-container:not([style*="height: 0px"])) > .mud-nav-link:not(:hover) {
    background: transparent !important;
    color: var(--nav-text) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}

/* Active parent — purple header */
.sty-nav-link .mud-nav-group.nav-parent-active > .mud-nav-link,
.sty-nav-link .mud-nav-group.mud-navgroup-open > .mud-nav-link,
.sty-nav-link .mud-nav-group.mud-navgroup-open > button.mud-nav-link,
.sty-nav-link .mud-nav-group.nav-parent-active:has(.mud-collapse-container:not([style*="height: 0px"])) > .mud-nav-link {
    background: var(--nav-group-active-bg, #F3F0FF) !important;
    color: var(--nav-group-active-text, #6D28D9) !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    box-shadow: none !important;
    border-radius: 12px !important;
}

    .sty-nav-link .mud-nav-group.nav-parent-active > .mud-nav-link .mud-nav-link-icon,
    .sty-nav-link .mud-nav-group.nav-parent-active > .mud-nav-link .mud-nav-link-expand-icon,
    .sty-nav-link .mud-nav-group.mud-navgroup-open > .mud-nav-link .mud-nav-link-icon,
    .sty-nav-link .mud-nav-group.mud-navgroup-open > .mud-nav-link .mud-nav-link-expand-icon {
        color: var(--nav-group-active-text, #6D28D9) !important;
        fill: var(--nav-group-active-text, #6D28D9) !important;
    }

.sty-nav-link .mud-nav-group > .mud-nav-link .mud-nav-link-icon {
    color: #6B7280;
    font-size: 1.125rem !important;
    width: 1.125rem;
    min-width: 1.125rem;
    margin-inline-end: 10px !important;
    transition: color var(--nav-transition);
}

.sty-nav-link .mud-nav-group > .mud-nav-link:hover .mud-nav-link-icon {
    color: #6D28D9 !important;
    fill: #6D28D9 !important;
}

/* Expand / collapse chevron */
.sty-nav-group .mud-nav-link .mud-nav-link-expand-icon {
    color: #6D28D9 !important;
    font-size: 1.125rem !important;
    transition: transform var(--nav-transition), color var(--nav-transition);
}

    .sty-nav-group .mud-nav-link .mud-nav-link-expand-icon.mud-transform {
        transform: rotate(180deg);
        color: #6D28D9 !important;
    }

/* Hover on group headers */
.sty-nav-link .mud-nav-group > .mud-nav-link:hover {
    background: #F8FAFC !important;
    color: #6D28D9 !important;
    box-shadow: none !important;
}

.sty-nav-link .mud-nav-group > .mud-nav-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* ── Child / nested links ── */
.sty-nav-link .mud-nav-group .mud-nav-item .mud-nav-link,
.sty-nav-link .mud-nav-group .mud-collapse-container .mud-nav-item .mud-nav-link {
    position: relative !important;
    margin-inline: 8px 0;
    /*    padding-inline: 10px 10px !important;*/
    padding-block: 6px !important;
    border-radius: 10px !important;
    color: #475569 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    min-height: 36px !important;
    transition: background 0.2s ease, color 0.2s ease;
}

    .sty-nav-link .mud-nav-group .mud-nav-item .mud-nav-link .mud-nav-link-text {
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: 1.35 !important;
    }

    /* COMPLETELY DISABLE LEGACY BULLET DOTS */
    .sty-nav-link .mud-nav-group .mud-nav-item .mud-nav-link::before,
    .sty-nav-link .mud-nav-group .mud-collapse-container .mud-nav-item .mud-nav-link::before,
    .sty-nav-link .mud-nav-group .mud-nav-item .mud-nav-link.active::before {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    .sty-nav-link .mud-nav-group .mud-nav-item .mud-nav-link:hover,
    .sty-nav-link .mud-nav-group .mud-collapse-container .mud-nav-item .mud-nav-link:hover {
        background: #F8FAFC !important;
        color: #6D28D9 !important;
    }

    /* Active route — child links */
    .nav-sidebar .mud-nav-group .mud-nav-item .mud-nav-link.active:not(.mud-nav-link-disabled),
    .nav-sidebar .mud-nav-group .mud-nav-item .mud-nav-link.wasl-navlink--active:not(.mud-nav-link-disabled),
    .sty-nav-link .mud-nav-group .mud-nav-item .mud-nav-link.active:not(.mud-nav-link-disabled),
    .sty-nav-link .mud-nav-group .mud-nav-item .mud-nav-link.wasl-navlink--active:not(.mud-nav-link-disabled) {
        border-radius: 0px !important;
        color: #6D28D9 !important;
        background: #FFFFFF !important;
        font-size: 0.875rem !important;
        font-weight: 700 !important;
        padding-inline-start: 16px !important;
        border-inline-start: 2px solid #6D28D9 !important;
        margin-inline-start: -9px !important;
    }

.sty-nav-link .iconLink .mud-icon-size-medium {
    font-size: 1.125rem !important;
    color: inherit !important;
}

.sty-nav-link .mud-nav-link.active .mud-nav-link-icon {
    color: #6D28D9 !important;
}

.sty-nav-link .iconLink .mud-ripple {
    display: flex !important;
    align-items: center !important;
}

.sty-nav-link .mud-nav-link.active .mud-nav-link-icon {
    color: var(--nav-active-text) !important;
}

.sty-nav-link .iconLink .mud-ripple {
    display: flex !important;
    align-items: center !important;
}

.sty-nav-link .iconLinkFa .fa-solid,
.sty-nav-link .iconLinkFa .fas {
    font-weight: 900;
    font-size: 0.75rem !important;
}

/* Accordion animation */
.navgroup-animated .mud-collapse-transition {
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.navgroup-animated .mud-collapse-container[style*="height: 0px"] {
    opacity: 0;
}

.navgroup-animated .mud-collapse-container:not([style*="height: 0px"]) {
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* ── Flyout trigger (Additions / System Init) ── */
.nav-submenu-wrapper {
    margin-inline: 4px 0;
    padding-inline-start: 38px;
    position: relative;
}

    .nav-submenu-wrapper::before {
        content: "";
        position: absolute;
        inset-inline-start: 22px;
        top: 14px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #D4D4D8;
    }

.nav-submenu {
    width: 100%;
}

.nav-submenu-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border-radius: var(--nav-radius);
    cursor: pointer;
    color: var(--nav-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    user-select: none;
    transition: background var(--nav-transition), color var(--nav-transition);
}

    .nav-submenu-trigger:hover,
    .nav-submenu-trigger:focus-visible {
        background: var(--nav-hover);
        color: var(--nav-text);
        outline: none;
    }

    .nav-submenu-trigger:focus-visible {
        box-shadow: 0 0 0 2px rgba(111, 58, 250, 0.35);
    }

.nav-submenu-trigger-text {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

.nav-submenu-trigger-arrow {
    font-size: 1rem !important;
    color: #A1A1AA !important;
    flex-shrink: 0;
    transition: color var(--nav-transition), transform var(--nav-transition);
}

.nav-submenu-trigger:hover .nav-submenu-trigger-arrow {
    color: var(--nav-muted) !important;
}

[dir="rtl"] .nav-submenu-trigger:hover .nav-submenu-trigger-arrow {
    transform: translateX(-2px);
}

[dir="ltr"] .nav-submenu-trigger:hover .nav-submenu-trigger-arrow {
    transform: translateX(2px);
}

/* ── Flyout panel (modern admin popover) ── */
.nav-submenu-popover.mud-popover-open {
    border-radius: var(--nav-radius-lg) !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.06), 0 24px 48px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid var(--nav-border) !important;
    overflow: hidden !important;
    width: 320px !important;
    min-width: 320px !important;
    max-width: min(320px, calc(100vw - 24px)) !important;
    animation: navFlyoutIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes navFlyoutIn {
    from {
        opacity: 0;
        transform: translateX(6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

[dir="rtl"] .nav-submenu-popover.mud-popover-open {
    animation-name: navFlyoutInRtl;
}

@keyframes navFlyoutInRtl {
    from {
        opacity: 0;
        transform: translateX(-6px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.nav-submenu-popover .mud-list,
.nav-submenu-popover .mud-list-padding {
    padding: 0 !important;
    width: 100%;
    overflow: hidden !important;
}

/* Fixed flyout shell: header + search fixed, body scrolls */
.nav-flyout-panel {
    display: flex;
    flex-direction: column;
    height: var(--nav-flyout-height);
    max-height: var(--nav-flyout-height);
    overflow: hidden;
    direction: inherit;
    text-align: start;
}

/* Flyout header */
.nav-submenu-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 10px 12px;
    background: #FAFAFA;
    border-bottom: 1px solid var(--nav-border);
}

.nav-submenu-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #F4F4F5;
    border: 1px solid var(--nav-border);
    flex-shrink: 0;
}

    .nav-submenu-header-icon .mud-icon-root {
        font-size: 1rem !important;
        color: var(--nav-muted) !important;
    }

.nav-submenu-header-text {
    flex: 1;
    min-width: 0;
    text-align: start;
}

.nav-submenu-header-title,
.nav-submenu-header-title.mud-typography,
.nav-submenu-header-title.mud-typography-body1,
.nav-submenu-header-title.mud-typography-body2 {
    display: block;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--nav-text) !important;
    line-height: 1.3;
    text-align: start;
}

.nav-submenu-header-sub,
.nav-submenu-header-sub.mud-typography,
.nav-submenu-header-sub.mud-typography-body2 {
    display: block;
    font-size: 0.625rem !important;
    color: var(--nav-muted) !important;
    margin-top: 1px;
    line-height: 1.25;
    text-align: start;
}

/* Flyout search — compact */
.nav-submenu-search {
    flex: 0 0 auto;
    padding: 8px 10px;
    background: #fff;
    border-bottom: 1px solid #F4F4F5;
}

    .nav-submenu-search .mud-input-control {
        margin: 0 !important;
    }

    .nav-submenu-search .mud-input-root-outlined {
        min-height: 30px !important;
        background: #FAFAFA;
        border-radius: 6px;
    }

    .nav-submenu-search .mud-input-outlined-border {
        border-radius: 6px !important;
        border-color: var(--nav-border) !important;
        transition: border-color var(--nav-transition), box-shadow var(--nav-transition);
    }

    .nav-submenu-search .mud-input-root-outlined:hover .mud-input-outlined-border {
        border-color: #D4D4D8 !important;
    }

    .nav-submenu-search .mud-input-root-outlined.mud-input-root-focused .mud-input-outlined-border,
    .nav-submenu-search .mud-input-root-outlined:focus-within .mud-input-outlined-border {
        border-color: #D4D4D8 !important;
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.04);
    }

    .nav-submenu-search .mud-input-adornment {
        align-self: center !important;
    }

        .nav-submenu-search .mud-input-adornment .mud-icon-root {
            color: #A1A1AA !important;
            font-size: 0.9375rem !important;
        }

    .nav-submenu-search .mud-input > input.mud-input-root-outlined,
    .nav-submenu-search .mud-input-slot.mud-input-root-outlined {
        padding-block: 4px !important;
        padding-inline: 8px !important;
        font-size: 0.75rem !important;
        color: var(--nav-text);
        line-height: 1.25 !important;
        min-height: 28px !important;
    }

        .nav-submenu-search .mud-input > input.mud-input-root-outlined::placeholder {
            color: #A1A1AA;
            opacity: 1;
        }

/* Flyout scrollable body */
.nav-submenu-items {
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px 6px 6px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

    .nav-submenu-items::-webkit-scrollbar {
        width: 5px;
    }

    .nav-submenu-items::-webkit-scrollbar-thumb {
        background: #D4D4D8;
        border-radius: 6px;
    }

    /* Dense module-selector list — override global center alignment */
    .nav-submenu-popover .mud-list-item,
    .nav-submenu-list .mud-list-item,
    .nav-submenu-items .mud-list-item,
    .nav-submenu-popover .mud-menu-item,
    .nav-submenu-items .mud-menu-item {
        text-align: start !important;
        justify-content: flex-start !important;
        align-items: center !important;
        border-radius: 6px !important;
        margin: 0 !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        min-height: 28px !important;
        padding: 3px 10px !important;
        color: var(--nav-text) !important;
        transition: background var(--nav-transition), color var(--nav-transition);
    }

        .nav-submenu-popover .mud-list-item .mud-list-item-text,
        .nav-submenu-list .mud-list-item .mud-list-item-text,
        .nav-submenu-items .mud-list-item .mud-list-item-text {
            text-align: start !important;
            justify-content: flex-start !important;
            align-items: center !important;
            margin: 0 !important;
            width: 100%;
            flex: 1 1 auto;
            font-size: 0.75rem !important;
            line-height: 1.35 !important;
        }

            .nav-submenu-popover .mud-list-item .mud-typography,
            .nav-submenu-popover .mud-menu-item .mud-typography,
            .nav-submenu-items .mud-menu-item .mud-typography,
            .nav-submenu-popover .mud-list-item .mud-list-item-text .mud-typography-body1,
            .nav-submenu-popover .mud-menu-item .mud-typography-body1,
            .nav-submenu-popover .mud-menu-item .mud-typography-body2,
            .nav-submenu-items .mud-menu-item .mud-typography-body1,
            .nav-submenu-items .mud-menu-item .mud-typography-body2 {
                font-size: 0.75rem !important;
                line-height: 1.35 !important;
                text-align: start !important;
                width: 100%;
            }

        .nav-submenu-popover .mud-list-item:hover,
        .nav-submenu-list .mud-list-item:hover,
        .nav-submenu-items .mud-list-item:hover,
        .nav-submenu-popover .mud-menu-item:hover,
        .nav-submenu-items .mud-menu-item:hover {
            background: var(--nav-hover) !important;
            color: var(--nav-text) !important;
        }

/* RTL flyout — portal-safe (popover may render outside RTL subtree) */
html[dir="rtl"] .nav-submenu-popover,
[dir="rtl"] .nav-submenu-popover,
.nav-submenu-popover-rtl {
    direction: rtl !important;
    text-align: right !important;
}

    html[dir="rtl"] .nav-submenu-popover .mud-list,
    html[dir="rtl"] .nav-submenu-popover .mud-list-padding,
    .nav-submenu-popover-rtl .mud-list,
    .nav-submenu-popover-rtl .mud-list-padding {
        direction: rtl !important;
        text-align: right !important;
    }

    html[dir="rtl"] .nav-flyout-panel,
    [dir="rtl"] .nav-flyout-panel,
    .nav-submenu-popover-rtl .nav-flyout-panel {
        direction: rtl !important;
        text-align: right !important;
    }

    html[dir="rtl"] .nav-submenu-header,
    .nav-submenu-popover-rtl .nav-submenu-header {
        flex-direction: row;
        text-align: right;
        direction: rtl;
    }

    html[dir="rtl"] .nav-submenu-header-text,
    html[dir="rtl"] .nav-submenu-header-title,
    html[dir="rtl"] .nav-submenu-header-sub,
    .nav-submenu-popover-rtl .nav-submenu-header-text,
    .nav-submenu-popover-rtl .nav-submenu-header-title,
    .nav-submenu-popover-rtl .nav-submenu-header-sub {
        text-align: right !important;
        direction: rtl;
    }

    html[dir="rtl"] .nav-submenu-search,
    .nav-submenu-popover-rtl .nav-submenu-search {
        direction: rtl !important;
        text-align: right;
    }

        html[dir="rtl"] .nav-submenu-search .mud-input-control,
        html[dir="rtl"] .nav-submenu-search .mud-input-control-input-container,
        .nav-submenu-popover-rtl .nav-submenu-search .mud-input-control,
        .nav-submenu-popover-rtl .nav-submenu-search .mud-input-control-input-container {
            direction: rtl !important;
        }

        html[dir="rtl"] .nav-submenu-search .mud-input-root,
        .nav-submenu-popover-rtl .nav-submenu-search .mud-input-root {
            direction: rtl !important;
            text-align: right;
        }

        html[dir="rtl"] .nav-submenu-search .mud-input > input.mud-input-root-outlined,
        html[dir="rtl"] .nav-submenu-search .mud-input-slot.mud-input-root-outlined,
        .nav-submenu-popover-rtl .nav-submenu-search .mud-input > input.mud-input-root-outlined,
        .nav-submenu-popover-rtl .nav-submenu-search .mud-input-slot.mud-input-root-outlined {
            text-align: right !important;
            direction: rtl;
        }

        html[dir="rtl"] .nav-submenu-search .mud-input-adornment-start,
        .nav-submenu-popover-rtl .nav-submenu-search .mud-input-adornment-start {
            margin-inline-end: 0 !important;
            margin-inline-start: 4px !important;
        }

    html[dir="rtl"] .nav-submenu-items,
    .nav-submenu-popover-rtl .nav-submenu-items {
        direction: rtl !important;
        text-align: right;
        padding-inline: 6px 4px;
    }

        html[dir="rtl"] .nav-submenu-popover .mud-list-item,
        html[dir="rtl"] .nav-submenu-list .mud-list-item,
        html[dir="rtl"] .nav-submenu-items .mud-list-item,
        html[dir="rtl"] .nav-submenu-popover .mud-menu-item,
        .nav-submenu-popover-rtl .mud-list-item,
        .nav-submenu-popover-rtl .mud-menu-item {
            text-align: right !important;
            justify-content: flex-start !important;
            direction: rtl !important;
            padding-inline: 10px 4px !important;
        }

            html[dir="rtl"] .nav-submenu-popover .mud-list-item .mud-list-item-text,
            html[dir="rtl"] .nav-submenu-popover .mud-list-item .mud-typography,
            .nav-submenu-popover-rtl .mud-list-item .mud-list-item-text,
            .nav-submenu-popover-rtl .mud-list-item .mud-typography,
            .nav-submenu-popover-rtl .mud-menu-item .mud-typography {
                text-align: right !important;
                direction: rtl;
                width: 100%;
            }

    html[dir="rtl"] .nav-submenu-empty,
    .nav-submenu-popover-rtl .nav-submenu-empty {
        text-align: center;
        direction: rtl;
    }

.nav-submenu-list .mud-list-item:focus-visible,
.nav-submenu-popover .mud-menu-item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.nav-submenu-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 16px;
    font-size: 0.75rem;
    color: var(--nav-muted);
    text-align: center;
}

    .nav-submenu-empty::before {
        content: "";
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #F4F4F5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23A1A1AA' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") center / 18px no-repeat;
    }

/* Footer logout */
.nav-sidebar-footer .nav-footer-link,
.nav-sidebar-footer .nav-footer-link.mud-nav-link {
    margin: 0 !important;
    border-radius: var(--nav-radius) !important;
    min-height: 38px !important;
    padding-inline: 10px !important;
    color: var(--nav-muted) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    transition: background var(--nav-transition), color var(--nav-transition);
}

    .nav-sidebar-footer .nav-footer-link:hover {
        background: var(--nav-hover) !important;
        color: var(--nav-text) !important;
    }

/* Responsive */
@media (max-width: 600px) {
    .nav-drawer {
        width: min(100vw, 300px) !important;
        min-width: min(100vw, 300px) !important;
        max-width: min(100vw, 300px) !important;
    }

    .nav-submenu-popover.mud-popover-open {
        width: min(300px, calc(100vw - 32px)) !important;
        min-width: min(300px, calc(100vw - 32px)) !important;
    }

    :root {
        --nav-flyout-height: 300px;
    }
}

/* End Nav Menu & Submenu Flyout */

/* ── App shell: fixed sidebar + scrollable main + footer ── */
html.wasl-app-shell-active,
body.wasl-app-shell-active,
html:has(.app-shell),
body:has(.app-shell) {
    overflow: hidden !important;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
}

#app:has(.app-shell) {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.app-shell.mud-layout {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
}

.app-shell .mud-drawer {
    height: 100dvh !important;
    max-height: 100dvh !important;
}

.app-shell-main.mud-main-content {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden !important;
    padding-top: 0 !important;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.app-shell-container {
    flex: 1 1 auto;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
}

.app-shell-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #D4D4D8 transparent;
}

    .app-shell-scroll .bg,
    .app-shell-scroll .new-sty-bg {
        min-height: 0 !important;
    }

    .app-shell-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .app-shell-scroll::-webkit-scrollbar-thumb {
        background: #D4D4D8;
        border-radius: 8px;
    }

        .app-shell-scroll::-webkit-scrollbar-thumb:hover {
            background: #A1A1AA;
        }

.app-shell .appbar-style {
    position: relative;
    top: auto;
    z-index: var(--mud-zindex-appbar, 1100);
    flex-shrink: 0;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    inset-inline: 0;
}

/* Full-viewport progress overlay (ported to document.body) */
.wasl-progress-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 20000 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(33, 33, 33, 0.55);
    pointer-events: all;
}

.app-shell-footer {
    flex: 0 0 auto;
    padding: 6px 16px;
    text-align: center;
    border-top: 1px solid #E9EDF4;
    background: #fff;
}

.app-shell-footer__text {
    color: #9CA3AF !important;
    font-size: 0.6875rem !important;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

/* ── Fill-height list pages: table fits content, max = viewport remainder ── */
.app-shell-scroll:has(.wasl-fill-page) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .app-shell-scroll:has(.wasl-fill-page) > .page-route,
    .app-shell-scroll:has(.wasl-fill-page) > .wasl-fill-page,
    .app-shell-scroll:has(.wasl-fill-page) > .page-route > .wasl-fill-page {
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
    }

.wasl-fill-layout {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    gap: 8px;
}

.wasl-fill-top {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

    .wasl-fill-top > .mud-grid {
        width: 100%;
        margin: 0;
    }

/* Max boundary for table — does not force stretch */
.wasl-fill-table {
    flex: 1 1 0;
    padding: 8px;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}

    .wasl-fill-table > * {
        min-width: 0;
        max-width: 100%;
    }

    .wasl-fill-table .wasl-table-toolbar {
        flex: 0 0 auto;
    }

    /* Shrink to rows; grow only up to parent max */
    .wasl-fill-table .wasl-table-fill {
        flex: 0 1 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: fit-content;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

        .wasl-fill-table .wasl-table-fill > .mud-table {
            flex: 0 1 auto;
            min-height: 0;
            min-width: 0;
            width: 100%;
            max-width: 100%;
            height: auto !important;
            max-height: 100% !important;
            display: flex !important;
            flex-direction: column !important;
            overflow: hidden;
        }

        .wasl-fill-table .wasl-table-fill .mud-table-container {
            flex: 1 1 auto !important;
            min-height: 0 !important;
            min-width: 0 !important;
            width: 100%;
            max-width: 100%;
            height: auto !important;
            max-height: 100% !important;
            overflow-y: auto !important;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
        }

        .wasl-fill-table .wasl-table-fill .mud-table-pagination,
        .wasl-fill-table .wasl-table-fill .mud-tablepager {
            flex: 0 0 auto;
        }

        .wasl-fill-table .wasl-table-fill > .mud-table.overflow-hidden .mud-table-container .mud-table-root {
            /*    min-width: 640px;*/
        }

/* Mobile: natural page scroll, no locked viewport */
@media (max-width: 959.98px) {
    .app-shell-scroll:has(.wasl-fill-page) {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

        .app-shell-scroll:has(.wasl-fill-page) > .page-route,
        .app-shell-scroll:has(.wasl-fill-page) > .wasl-fill-page,
        .app-shell-scroll:has(.wasl-fill-page) > .page-route > .wasl-fill-page,
        .wasl-fill-layout {
            height: auto;
            overflow-x: hidden;
            overflow-y: visible;
            flex: 0 0 auto;
            max-width: 100%;
        }

    .wasl-fill-table {
        flex: 0 0 auto;
        overflow-x: hidden;
        overflow-y: visible;
        max-width: 100%;
    }

        .wasl-fill-table .wasl-table-fill,
        .wasl-fill-table .wasl-table-fill > .mud-table {
            height: auto !important;
            max-height: none !important;
            overflow-x: hidden !important;
            overflow-y: visible !important;
            max-width: 100%;
        }

            .wasl-fill-table .wasl-table-fill .mud-table-container {
                height: auto !important;
                max-height: none !important;
                overflow-x: auto !important;
                overflow-y: visible !important;
                max-width: 100%;
            }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Documents page — HotelProject/Pages/Document/Documents.razor
   صفحة الفواتير (/Documents): حاوية التبويبات + ارتفاع الشاشة
   ═══════════════════════════════════════════════════════════════════════════ */

/* MudPaper: tabs + search + table in one bordered container */
.documents-fill-panel {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Body below tabs — flex area for table content */
.documents-fill-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Tab toggle: inactive item color */
.documents-fill-panel .mud-toggle-item.mud-toggle-item-primary {
    color: #ADADAD;
}

/* Tab toggle: active item underline */
.documents-fill-panel .mud-toggle-group .mud-theme-primary {
    color: var(--mud-palette-primary) !important;
    border-bottom: 1px solid var(--mud-palette-primary) !important;
    background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sales Invoices table — HotelProject/.../SalesInvoices.razor
   جدول فواتير المبيعات: هيدر مزدوج، شريط الأدوات، skeleton التحميل
   ═══════════════════════════════════════════════════════════════════════════ */

/* Toolbar: search, reload, add — vertical spacing */
.sales-invoice-toolbar {
    padding-block: 0.5rem;
}

/* Stacked table header — primary label (e.g. customer name, currency code) */
.sales-invoice-th-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    line-height: 1.25;
    min-height: 34px;
}

.sales-invoice-th-primary {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wasl-text-primary, #354361);
    line-height: 1.2;
}

/* Stacked table header — secondary label (e.g. invoice type code, exchange rate) */
.sales-invoice-th-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--wasl-text-secondary, #848484);
    line-height: 1.2;
}

/* Stacked cell — secondary value below primary text */
.sales-invoice-col-sub {
    color: var(--wasl-text-secondary, #848484);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-invoices-table .mud-table-head .sales-invoice-th {
    min-height: 52px !important;
}

/* Loading skeleton — row aligned with table columns */
.sales-invoice-loading-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    min-height: 52px;
}

.sales-invoice-loading-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sales-invoice-loading-col--customer {
    flex: 0 0 16%;
    min-width: 120px;
}

.sales-invoice-loading-col--supplier {
    flex: 1 1 16%;
}

.sales-invoice-loading-col--currency {
    flex: 0 0 12%;
    min-width: 90px;
}

.sales-invoice-loading-col--payment {
    flex: 1 1 12%;
}

.sales-invoice-loading-col--date {
    flex: 1 1 14%;
}

.sales-invoice-loading-col--action {
    flex: 0 0 40px;
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Vouchers tables — ReceiptVouchers.razor / PaymentVouchers.razor
   جداول قسائم الاستلام والدفع: skeleton التحميل
   ═══════════════════════════════════════════════════════════════════════════ */

.voucher-loading-col--account {
    flex: 0 0 15%;
    min-width: 110px;
}

.voucher-loading-col--receiver {
    flex: 1 1 14%;
}

.voucher-loading-col--cash {
    flex: 1 1 14%;
}

.voucher-loading-col--currency {
    flex: 0 0 11%;
    min-width: 85px;
}

.voucher-loading-col--local {
    flex: 1 1 11%;
}

.voucher-loading-col--date {
    flex: 1 1 13%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Employees table — HumanResource/Pages/Employee/Employees.razor
   جدول الموظفين: هوية الموظف (أفاتار + اسم + جوال) و skeleton التحميل
   ═══════════════════════════════════════════════════════════════════════════ */

.employee-table-identity-cell {
    min-width: 220px;
}

.employee-table-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

    .employee-table-identity .employee-table-avatar-wrap {
        margin: 0;
        flex-shrink: 0;
    }

.employee-table-identity__text {
    min-width: 0;
    flex: 1 1 auto;
    gap: 4px;
}

.employee-loading-col--identity {
    flex: 0 0 24%;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.employee-loading-col--identity-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.employee-loading-col--birth {
    flex: 1 1 14%;
}

.employee-loading-col--address {
    flex: 1 1 18%;
}

.employee-loading-col--status {
    flex: 0 0 12%;
    min-width: 90px;
}

/* Field visits table — reload / tab-switch skeleton columns */
.field-visit-loading-row {
    display: grid !important;
    grid-template-columns: minmax(200px, 1.6fr) minmax(90px, 0.8fr) minmax(110px, 0.9fr) minmax(90px, 0.8fr) minmax(100px, 1fr) 40px;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.field-visit-loading-col--time,
.field-visit-loading-col--status,
.field-visit-loading-col--date,
.field-visit-loading-col--type {
    min-width: 0;
    display: flex;
    align-items: center;
}

.field-visit-loading-row .employee-loading-col--identity {
    flex: unset;
    min-width: 0;
    width: 100%;
}

.field-visits-table-reload-skeleton {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

    .field-visits-table-reload-skeleton .mud-table-head .mud-table-cell {
        font-weight: 500;
    }

/* Approval requests table — reload / tab-switch skeleton columns */
.approval-loading-row {
    display: grid !important;
    grid-template-columns: minmax(160px, 1.5fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr) 48px;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.approval-loading-col--file,
.approval-loading-col--request,
.approval-loading-col--status,
.approval-loading-col--archive {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.approval-requests-table-reload-skeleton {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

    .approval-requests-table-reload-skeleton .mud-table-head .mud-table-cell {
        font-weight: 500;
    }

/* Currencies table — reload / tab-switch skeleton */
.currencies-table-reload-skeleton {
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

    .currencies-table-reload-skeleton .mud-table-head .mud-table-cell {
        font-weight: 500;
    }

.currencies-loading-row {
    display: grid !important;
    grid-template-columns: minmax(180px, 2fr) minmax(110px, 1fr) minmax(120px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr) minmax(130px, 1fr) minmax(170px, 1.5fr) 56px;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.currencies-loading-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/*
 * Reload-skeleton stage wrappers sit between .wasl-table-fill and .mud-table.
 * Re-apply the fill/scroll chain so the table is not clipped.
 */
.wasl-fill-table .wasl-table-fill > .field-visits-table-stage,
.wasl-fill-table .wasl-table-fill > .approval-requests-table-stage {
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    height: fit-content;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .wasl-fill-table .wasl-table-fill > .field-visits-table-stage > .field-visits-table-host,
    .wasl-fill-table .wasl-table-fill > .approval-requests-table-stage > .approval-requests-table-host {
        flex: 0 1 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 0;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

        .wasl-fill-table .wasl-table-fill > .field-visits-table-stage > .field-visits-table-host.d-none,
        .wasl-fill-table .wasl-table-fill > .approval-requests-table-stage > .approval-requests-table-host.d-none {
            display: none !important;
        }

    .wasl-fill-table .wasl-table-fill > .field-visits-table-stage .mud-table,
    .wasl-fill-table .wasl-table-fill > .approval-requests-table-stage .mud-table {
        flex: 0 1 auto;
        min-height: 0;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        height: auto !important;
        max-height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden;
    }

@media (max-width: 959.98px) {
    .wasl-fill-table .wasl-table-fill > .field-visits-table-stage,
    .wasl-fill-table .wasl-table-fill > .approval-requests-table-stage,
    .wasl-fill-table .wasl-table-fill > .field-visits-table-stage > .field-visits-table-host,
    .wasl-fill-table .wasl-table-fill > .approval-requests-table-stage > .approval-requests-table-host,
    .wasl-fill-table .wasl-table-fill > .field-visits-table-stage .mud-table,
    .wasl-fill-table .wasl-table-fill > .approval-requests-table-stage .mud-table {
        height: auto !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ItemSerials — Warranty/Pages/ItemSerial/ItemSerials.razor
   ═══════════════════════════════════════════════════════════════════════════ */

.item-serials-table .mud-table-container .mud-table-root {
/*    min-width: 640px;*/
}

.item-serials-table .mud-table-container {
    border-radius: 8px;
}

.serial-loading-col--number {
    flex: 0 0 14%;
    min-width: 100px;
}

.serial-loading-col--item {
    flex: 0 0 20%;
    min-width: 120px;
}

.serial-loading-col--date {
    flex: 1 1 14%;
}

.serial-loading-col--status {
    flex: 0 0 12%;
    min-width: 90px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AttendanceActions — HumanResource/Pages/AttendanceAction/AttendanceActions.razor
   ═══════════════════════════════════════════════════════════════════════════ */

.attendance-loading-col--employee {
    flex: 0 0 20%;
    min-width: 140px;
}

.attendance-loading-col--datetime {
    flex: 1 1 18%;
}

.attendance-loading-col--method {
    flex: 0 0 14%;
    min-width: 100px;
}

.attendance-loading-col--status {
    flex: 0 0 12%;
    min-width: 90px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Items table — ClassLibraryComponentPlatform/CommonPages/Item/Items.razor
   ═══════════════════════════════════════════════════════════════════════════ */

.item-loading-col--id {
    flex: 0 0 6%;
    min-width: 50px;
}

.item-loading-col--name {
    flex: 0 0 14%;
    min-width: 100px;
}

.item-loading-col--desc {
    flex: 1 1 16%;
}

.item-loading-col--code {
    flex: 0 0 10%;
    min-width: 70px;
}

.item-loading-col--category {
    flex: 0 0 12%;
    min-width: 90px;
}

.item-loading-col--audit {
    flex: 0 0 14%;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.item-loading-col--status {
    flex: 0 0 10%;
    min-width: 80px;
}

.items-table .mud-table-container .mud-table-root {
    min-width: 880px;
}

.items-table .mud-table-head .sales-invoice-th {
    min-height: 52px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OrderItems — HotelProject/Pages/OrderItem/OrderItems.razor
   ═══════════════════════════════════════════════════════════════════════════ */

.order-items-table .order-item-action-th,
.order-items-table .order-item-action-cell {
    width: auto;
    min-width: 72px;
    max-width: none;
    padding-inline: 8px !important;
    text-align: center;
    vertical-align: middle;
    overflow: visible;
}

/* Room form items — tight delete column */
.order-items-table .room-items-action-col.order-item-action-th,
.order-items-table .room-items-action-col.order-item-action-cell {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    padding-inline: 0 !important;
}

.order-items-table .room-items-action-col .order-item-action-bar {
    padding-inline: 0;
    justify-content: center;
}

/* GetItemDialog — checkbox column 30px */
.get-item-dialog__check-col,
.A-Table .get-item-dialog__table .mud-table-cell:has(.mud-checkbox),
.A-Table .get-item-dialog__table .mud-table-head .mud-table-cell:first-child:empty,
.get-item-dialog__table .mud-table-selection {
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    padding-inline: 0 !important;
}

.get-item-dialog__table .mud-table-cell .mud-input-control.mud-checkbox {
    margin: 0 !important;
}

.get-item-dialog-table-stage {
    min-height: 360px;
}

.get-item-dialog-table-skeleton {
    min-height: 360px;
}

.get-item-dialog-loading-row {
    display: grid;
    grid-template-columns: 30px minmax(72px, 0.8fr) minmax(140px, 2fr) minmax(72px, 0.9fr);
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.get-item-dialog-loading-col--check {
    display: flex;
    justify-content: center;
}

/* Room form — soft add-item button */
.room-add-item-btn.mud-button-filled {
    background: rgba(111, 58, 250, 0.10) !important;
    color: var(--mud-palette-primary) !important;
    box-shadow: none !important;
    border-radius: 10px !important;
    text-transform: none !important;
}

    .room-add-item-btn.mud-button-filled:hover {
        background: rgba(111, 58, 250, 0.16) !important;
    }

    .room-add-item-btn.mud-button-filled .mud-button-label,
    .room-add-item-btn.mud-button-filled .mud-icon-root {
        color: var(--mud-palette-primary) !important;
    }

.order-items-table .order-item-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
}

.order-items-table .order-item-action-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    white-space: nowrap;
    background: #fff;
    border-radius: 8px;
    padding-inline: 2px;
    box-shadow: 0 0 0 1px #eef1f5;
}

.order-items-table .order-item-action-btn {
    color: #5f6368 !important;
}

    .order-items-table .order-item-action-btn:hover {
        color: var(--mud-palette-primary) !important;
        background-color: rgba(100, 81, 177, 0.08) !important;
    }

.order-items-table--busy .order-item-action-cell {
    pointer-events: auto;
}

.order-loading-col--owner-code {
    flex: 0 0 18%;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.order-loading-col--point {
    flex: 1 1 16%;
}

.order-loading-col--date {
    flex: 0 0 16%;
    min-width: 120px;
}

.order-loading-col--status {
    flex: 0 0 12%;
    min-width: 90px;
}

/* Table row action menu */
.wasl-row-action-menu-host {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

    .wasl-row-action-menu-host .wasl-row-action-menu__trigger {
        color: var(--mud-palette-primary) !important;
    }

        .wasl-row-action-menu-host .wasl-row-action-menu__trigger:hover {
            background-color: rgba(19, 46, 89, 0.06) !important;
        }

/* خلايا الإجراءات — لا تقص زر النقاط الثلاث */
.A-Table .custom-table td:has(.wasl-row-action-menu-host),
.A-Table .custom-table th:has(.wasl-row-action-menu-host) {
    overflow: visible !important;
    max-width: 3.5rem !important;
    width: 3.5rem !important;
    min-width: 3.5rem !important;
    text-overflow: clip !important;
    padding-inline: 0.25rem !important;
}

.wasl-row-action-menu-popover.mud-popover-paper {
    border-radius: 8px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    background: var(--mud-palette-surface) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.24) !important;
    padding: 0 !important;
    overflow: hidden !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: none !important;
}

/* MudBlazor يفرض rtl على mud-list — نعزّل لوحتنا عنه */
.wasl-row-action-menu-popover .mud-list,
.wasl-row-action-menu-popover .mud-menu {
    padding: 0 !important;
    min-width: 0 !important;
    width: fit-content !important;
    /*    direction: ltr !important;*/
}

.wasl-row-action-menu__panel {
    display: inline-flex;
    flex-direction: column;
    width: fit-content;
    min-width: 0;
    padding: 4px;
    /*    direction: ltr;*/
}

html[dir="rtl"] .wasl-row-action-menu__panel {
    /*    align-items: flex-end;*/
}

html[dir="ltr"] .wasl-row-action-menu__panel {
    align-items: flex-start;
}

.wasl-row-action-menu__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
    height: 2rem;
    min-height: 2rem;
    max-height: 2rem;
    padding: 0 0.5rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
    direction: ltr;
    width: 100%;
}

/* عربي: نص يمين + أيقونة يساره — بدون الاعتماد على rtl الموروث */
html[dir="rtl"] .wasl-row-action-menu__item {
    flex-direction: row;
}

html[dir="ltr"] .wasl-row-action-menu__item {
    flex-direction: row-reverse;
}

.wasl-row-action-menu__item:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.wasl-row-action-menu__icon {
    flex: 0 0 auto;
    width: 1rem !important;
    height: 1rem !important;
    font-size: 1rem !important;
    color: var(--mud-palette-text-secondary) !important;
}

.wasl-row-action-menu__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    line-height: 1;
    white-space: nowrap;
    flex: 0 1 auto;
}

.wasl-row-action-menu__divider {
    height: 1px;
    margin: 2px 6px;
    background-color: var(--mud-palette-lines-default);
    flex: 0 0 1px;
}

.wasl-row-action-menu__item--danger .wasl-row-action-menu__label,
.wasl-row-action-menu__item--danger .wasl-row-action-menu__icon {
    color: #dc2626 !important;
}

.wasl-row-action-menu__item--danger:hover {
    background-color: rgba(220, 38, 38, 0.08) !important;
}

.sales-invoice-th-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    line-height: 1.25;
    min-height: 34px;
}

.sales-invoice-th-primary {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wasl-text-primary, #354361);
    line-height: 1.2;
}

.sales-invoice-th-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--wasl-text-secondary, #848484);
    line-height: 1.2;
}

.sales-invoice-col-sub {
    color: var(--wasl-text-secondary, #848484);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-invoice-th-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    line-height: 1.25;
    min-height: 34px;
}

.sales-invoice-th-primary {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wasl-text-primary, #354361);
    line-height: 1.2;
}

.sales-invoice-th-sub {
    display: block;
    font-size: 0.75rem;
    color: var(--wasl-text-secondary, #848484);
    line-height: 1.2;
}

.sales-invoice-col-sub {
    color: #848484;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-invoices-table .mud-table-head .sales-invoice-th {
    min-height: 52px !important;
}

.sales-invoice-th-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    line-height: 1.25;
    min-height: 34px;
}
/* Employee view — profile page */
.employee-view {
    width: 100%;
}

.employee-view__hero {
    position: relative;
    width: 100%;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: var(--mud-palette-surface) !important;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

    .employee-view__hero::before {
        content: "";
        display: block;
        height: 3px;
        background: linear-gradient(90deg, #406098 0%, #5a7fba 100%);
    }

    .employee-view__hero.stat-card:hover {
        transform: none;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    }

.employee-view__hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.125rem 1.375rem;
}

.employee-view__hero-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.employee-view__hero-details {
    flex: 1;
    min-width: 0;
    padding-top: 0;
}

.employee-view__hero-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.employee-view__avatar-ring {
    flex-shrink: 0;
    padding: 0.2rem;
    border-radius: 50%;
    background: var(--mud-palette-surface);
    border: 1px solid rgba(64, 96, 152, 0.12);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
}

.employee-view__avatar .employee-table-avatar-wrap {
    width: 4.5rem !important;
    height: 4.5rem !important;
    margin: 0 !important;
}

.employee-view__avatar .employee-table-avatar,
.employee-view__avatar .mud-avatar {
    width: 4.5rem !important;
    height: 4.5rem !important;
    min-width: 4.5rem !important;
    max-width: 4.5rem !important;
    max-height: 4.5rem !important;
    font-size: 1.25rem;
    border-radius: 50% !important;
}

.employee-view__avatar .employee-table-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.employee-view__name {
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #0f172a !important;
}

.employee-view__role {
    color: #475569 !important;
    font-weight: 500;
    margin-top: 0.15rem;
}

.employee-view__status {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.employee-view__status--active {
    color: #166534;
    background: rgba(34, 197, 94, 0.14);
}

.employee-view__status--inactive {
    color: #991b1b;
    background: rgba(239, 68, 68, 0.12);
}

.employee-view__meta {
    margin-top: 0.5rem;
}

.employee-view__meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: var(--mud-palette-background-grey);
    color: #334155;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
}

.employee-view__meta-chip--muted {
    color: #64748b;
    background: var(--mud-palette-background-grey);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.employee-view__meta-chip .mud-icon-root {
    font-size: 1rem;
    opacity: 0.85;
}

.employee-view__section {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    background: var(--mud-palette-surface) !important;
    padding: 1.25rem 1.375rem 1.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

    .employee-view__section.stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    }

.employee-view__section--audit {
    background: linear-gradient(180deg, var(--mud-palette-background-grey) 0%, var(--mud-palette-surface) 100%) !important;
}

.employee-view__section-head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.employee-view__section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    flex-shrink: 0;
}

    .employee-view__section-icon .mud-icon-root {
        font-size: 1.25rem;
    }

.employee-view__section-icon--personal {
    color: #406098;
    background: rgba(64, 96, 152, 0.15);
}

.employee-view__section-icon--location {
    color: #7c3aed;
    background: #f3e8ff;
}

.employee-view__section-icon--work {
    color: #0f766e;
    background: #ccfbf1;
}

.employee-view__section-icon--audit {
    color: #64748b;
    background: var(--mud-palette-background-grey);
}

.employee-view__section-title {
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.3 !important;
}

.employee-view__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    flex: 1;
    align-content: start;
}

.employee-view__fields--grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.employee-view__field {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4.25rem;
    padding: 0.75rem 0.875rem;
    border-radius: 12px;
    background: var(--mud-palette-background-grey);
    border: 1px solid rgba(0, 0, 0, 0.04);
    min-width: 0;
}

.employee-view__field--wide {
    grid-column: 1 / -1;
}

.employee-view__field-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    color: #406098;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.employee-view__field-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
    text-align: start;
}

.employee-view__field-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #94a3b8;
    line-height: 1.3;
    width: 100%;
}

.employee-view__field-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.45;
    word-break: break-word;
    width: 100%;
    text-align: start;
}

.employee-view__field-value--mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.85rem;
    font-weight: 600;
    direction: ltr;
    unicode-bidi: isolate;
    width: auto;
    max-width: 100%;
    text-align: match-parent;
}

.employee-view__field-value--phone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: auto;
    max-width: 100%;
    text-decoration: none;
    color: #0f172a;
    direction: ltr;
    unicode-bidi: isolate;
    transition: color 0.2s ease;
}

    .employee-view__field-value--phone:hover {
        color: #406098;
    }

.employee-view__phone-code {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    background: rgba(64, 96, 152, 0.15);
    color: #406098;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.3;
}

.employee-view__phone-number {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.employee-view__map-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    background: var(--mud-palette-background-grey);
    border: 1px solid rgba(109, 40, 217, 0.14);
    color: #6d28d9;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

    .employee-view__map-link:hover {
        background: #f3e8ff;
        border-color: rgba(109, 40, 217, 0.28);
    }

    .employee-view__map-link .mud-icon-root {
        font-size: 1.05rem;
    }

@media (max-width: 1279px) {
    .employee-view__fields--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 959px) {
    .employee-view__hero-top {
        padding-inline: 1.125rem;
    }
}

@media (max-width: 599px) {
    .employee-view__hero-top {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
    }

    .employee-view__hero-profile {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .employee-view__hero-actions {
        width: 100%;
        justify-content: stretch;
    }

        .employee-view__hero-actions .BTMButton {
            flex: 1;
        }

    .employee-view__avatar .employee-table-avatar-wrap,
    .employee-view__avatar .employee-table-avatar,
    .employee-view__avatar .mud-avatar {
        width: 4rem !important;
        height: 4rem !important;
        min-width: 4rem !important;
        max-width: 4rem !important;
        max-height: 4rem !important;
        font-size: 1.1rem;
    }

    .employee-view__meta {
        justify-content: center;
    }

    .employee-view__field-value--phone {
        max-width: 100%;
    }

    .employee-view__fields,
    .employee-view__fields--grid {
        grid-template-columns: 1fr;
    }

    .employee-view__section {
        padding: 1rem 1rem 1.125rem;
    }
}

@media (max-width: 600px) {
    .Document_Toggles .mud-toggle-group {
        display: flex !important;
        flex-direction: column !important;
        border-bottom: inherit;
        border-radius: inherit;
    }
}

.reservation-service-dialog {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .reservation-service-dialog > .mud-rtl-provider {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

        .reservation-service-dialog > .mud-rtl-provider > .outline-none {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

            .reservation-service-dialog > .mud-rtl-provider > .outline-none > div[tabindex="-1"] {
                flex: 1;
                min-height: 0;
                display: flex;
                flex-direction: column;
            }

    .reservation-service-dialog .mud-dialog-content {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .reservation-service-dialog .mud-dialog-actions {
        flex-shrink: 0;
    }

.mud-dialog {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .mud-dialog > .mud-rtl-provider {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

        .mud-dialog > .mud-rtl-provider > .outline-none {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

            .mud-dialog > .mud-rtl-provider > .outline-none > div[tabindex="-1"] {
                flex: 1;
                min-height: 0;
                display: flex;
                flex-direction: column;
            }

    .mud-dialog .mud-dialog-content {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .mud-dialog .mud-dialog-actions {
        flex-shrink: 0;
    }

/* ═══════════════════════════════════════════════════════════════════════════
   Custom Wasl Side Nav Design System (Exact Match to Image 1)
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. MudNavGroup Header Styles (Expanded & Open Groups) */
.nav-sidebar .mud-nav-group > .mud-nav-link,
.nav-sidebar .mud-nav-group > button.mud-nav-link,
.nav-sidebar .mud-nav-group.mud-navgroup-open > .mud-nav-link,
.nav-sidebar .mud-nav-group.mud-navgroup-open > button.mud-nav-link {
    border-radius: 12px !important;
    margin-block: 3px !important;
    padding-inline: 12px !important;
    transition: background 0.2s ease, color 0.2s ease;
}

    /* Hover on Group Header */
    .nav-sidebar .mud-nav-group > .mud-nav-link:hover,
    .nav-sidebar .mud-nav-group > button.mud-nav-link:hover {
        background: var(--nav-group-hover-bg, #F8FAFC) !important;
        color: var(--nav-group-active-text, #6D28D9) !important;
        font-weight: 600 !important;
    }

        .nav-sidebar .mud-nav-group > .mud-nav-link:hover .mud-nav-link-icon,
        .nav-sidebar .mud-nav-group > .mud-nav-link:hover .mud-nav-link-expand-icon,
        .nav-sidebar .mud-nav-group > button.mud-nav-link:hover .mud-nav-link-icon,
        .nav-sidebar .mud-nav-group > button.mud-nav-link:hover .mud-nav-link-expand-icon {
            color: var(--nav-group-active-text, #6D28D9) !important;
            fill: var(--nav-group-active-text, #6D28D9) !important;
        }

    /* Expanded Group Header */
    .nav-sidebar .mud-nav-group.mud-navgroup-open > .mud-nav-link,
    .nav-sidebar .mud-nav-group.mud-navgroup-open > button.mud-nav-link,
    .nav-sidebar .mud-nav-group > .mud-nav-link.mud-nav-link-expanded,
    .nav-sidebar .mud-nav-group > .mud-nav-link.active {
        background: var(--nav-group-active-bg, #F3F0FF) !important;
        color: var(--nav-group-active-text, #6D28D9) !important;
        font-weight: 700 !important;
    }

        .nav-sidebar .mud-nav-group.mud-navgroup-open > .mud-nav-link .mud-nav-link-icon,
        .nav-sidebar .mud-nav-group.mud-navgroup-open > .mud-nav-link .mud-nav-link-expand-icon,
        .nav-sidebar .mud-nav-group.mud-navgroup-open > button.mud-nav-link .mud-nav-link-icon,
        .nav-sidebar .mud-nav-group.mud-navgroup-open > button.mud-nav-link .mud-nav-link-expand-icon,
        .nav-sidebar .mud-nav-group > .mud-nav-link.mud-nav-link-expanded .mud-nav-link-icon,
        .nav-sidebar .mud-nav-group > .mud-nav-link.mud-nav-link-expanded .mud-nav-link-expand-icon {
            color: var(--nav-group-active-text, #6D28D9) !important;
            fill: var(--nav-group-active-text, #6D28D9) !important;
        }

/* 2. Vertical Connecting Tree Line & Sub-Item Borders */
.nav-sidebar .mud-nav-group .mud-nav-item,
.sty-nav-link .mud-nav-group .mud-nav-item {
    position: relative !important;
    border-inline-start: 1.5px solid var(--nav-border, #CBD5E1) !important;
    margin-inline-start: 16px !important;
    padding-right: 8px !important;
    padding-left: 0 !important;
}

    /* 3. WaslNavLink Sub-Item Styling */
    .nav-sidebar .mud-nav-group .mud-nav-item .mud-nav-link,
    .nav-sidebar .mud-nav-group .mud-nav-item a.mud-nav-link,
    .sty-nav-link .mud-nav-group .mud-nav-item .mud-nav-link {
        position: relative !important;
        border-radius: 10px !important;
        margin-block: 3px !important;
        padding-inline: 10px !important;
        color: var(--nav-text, #475569) !important;
        font-weight: 500 !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        transition: all 0.2s ease;
    }

        /* Sub-Item Hover State */
        .nav-sidebar .mud-nav-group .mud-nav-item .mud-nav-link:hover,
        .sty-nav-link .mud-nav-group .mud-nav-item .mud-nav-link:hover {
            background: var(--nav-group-hover-bg, #F8FAFC) !important;
            color: var(--nav-group-active-text, #6D28D9) !important;
            font-weight: 600 !important;
        }

            .nav-sidebar .mud-nav-group .mud-nav-item .mud-nav-link:hover .mud-nav-link-icon,
            .sty-nav-link .mud-nav-group .mud-nav-item .mud-nav-link:hover .mud-nav-link-icon {
                color: #6D28D9 !important;
                fill: #6D28D9 !important;
            }

        /* -------------------------------------------------------------
   WASL NAVLINK ACTIVE MODULE WRAPPER & CHILD STYLING (HIGHEST SPECIFICITY)
   ------------------------------------------------------------- */
        .nav-sidebar .mud-nav-group .mud-nav-item .mud-nav-link.wasl-navlink--active,
        .nav-sidebar .mud-navgroup .mud-nav-item .mud-nav-link.wasl-navlink--active,
        .sty-nav-link .mud-nav-group .mud-nav-item .mud-nav-link.wasl-navlink--active,
        .sty-nav-link .mud-navgroup .mud-nav-item .mud-nav-link.wasl-navlink--active,
        .nav-sidebar .mud-nav-group .mud-nav-item a.mud-nav-link.wasl-navlink--active,
        .nav-sidebar .mud-navgroup .mud-nav-item a.mud-nav-link.wasl-navlink--active,
        .sty-nav-link .mud-nav-group .mud-nav-item a.mud-nav-link.wasl-navlink--active,
        .sty-nav-link .mud-navgroup .mud-nav-item a.mud-nav-link.wasl-navlink--active,
        .sty-nav-link .mud-nav-item .wasl-navlink--active,
        .mud-nav-item .wasl-navlink--active,
        a.wasl-navlink--active,
        .wasl-navlink--active {
            background-color: #FFFFFF !important;
            background: #FFFFFF !important;
            color: #6D28D9 !important;
            font-weight: 700 !important;
            border-radius: 0px !important;
            border-inline-start: 4px solid #6D28D9 !important;
            margin-inline-start: -8px !important;
        }

            .nav-sidebar .mud-nav-group .mud-nav-item .wasl-navlink--active *,
            .nav-sidebar .mud-navgroup .mud-nav-item .wasl-navlink--active *,
            .sty-nav-link .mud-nav-group .mud-nav-item .wasl-navlink--active *,
            .sty-nav-link .mud-navgroup .mud-nav-item .wasl-navlink--active *,
            .wasl-navlink--active *,
            .wasl-navlink--active .mud-nav-link-text,
            .wasl-navlink--active .mud-nav-link-icon,
            .wasl-navlink--active svg {
                color: #6D28D9 !important;
                font-weight: 700 !important;
            }

/* 4. Brand Header Dot Grid Icon Color */
.nav-brand-header .mud-button-root,
.nav-brand-header .mud-icon-root {
    color: #6D28D9 !important;
}

/* -------------------------------------------------------------
   WASL WORKSPACE HEADER & COMPACT STAT CARDS
   ------------------------------------------------------------- */
.wasl-workspace-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
    width: 100%;
}

.wasl-workspace-header__title-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wasl-workspace-header__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0F172A;
}

.wasl-workspace-header__subtitle {
    font-size: 0.875rem;
    color: #64748B;
}

.wasl-workspace-header__cards {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.wasl-compact-stat-card {
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    width: fit-content !important;
    min-width: auto !important;
    flex: 0 0 auto !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.wasl-compact-stat-card--clickable {
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.wasl-compact-stat-card--clickable:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(123, 66, 246, 0.15) !important;
}

/* Lightning Sheen Sweep Animation for Quick Access Card */
@keyframes lightning-sheen-sweep {
    0% {
        transform: translateX(-150%) rotate(25deg);
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    35% {
        transform: translateX(150%) rotate(25deg);
        opacity: 0;
    }
    100% {
        transform: translateX(150%) rotate(25deg);
        opacity: 0;
    }
}

.wasl-compact-stat-card--card-purple-highlight,
.wasl-compact-stat-card--card-purple-solid {
    background: linear-gradient(135deg, #6F3AFA 0%, #4C1D95 100%) !important;
    border: 1px solid #7C3AED !important;
    box-shadow: 0 4px 14px rgba(111, 58, 250, 0.35) !important;
    position: relative !important;
    overflow: hidden !important;
}

.wasl-compact-stat-card--card-purple-highlight::after,
.wasl-compact-stat-card--card-purple-solid::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(251, 191, 36, 0.25) 46%,
        rgba(255, 255, 255, 0.55) 50%,
        rgba(251, 191, 36, 0.25) 54%,
        transparent 65%
    );
    pointer-events: none;
    animation: lightning-sheen-sweep 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.wasl-compact-stat-card--card-purple-highlight .wasl-compact-stat-card__val,
.wasl-compact-stat-card--card-purple-highlight .wasl-compact-stat-card__label,
.wasl-compact-stat-card--card-purple-solid .wasl-compact-stat-card__val,
.wasl-compact-stat-card--card-purple-solid .wasl-compact-stat-card__label {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.wasl-compact-stat-card--card-purple-highlight .wasl-compact-stat-card__icon-box,
.wasl-compact-stat-card--card-purple-solid .wasl-compact-stat-card__icon-box {
    background-color: rgba(251, 191, 36, 0.22) !important;
    color: #FBBF24 !important;
    border: 1px solid rgba(251, 191, 36, 0.35) !important;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.3) !important;
}

.wasl-compact-stat-card--card-purple-highlight .wasl-compact-stat-card__icon-box .mud-icon-root,
.wasl-compact-stat-card--card-purple-solid .wasl-compact-stat-card__icon-box .mud-icon-root {
    color: #FBBF24 !important;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.8)) !important;
}

.wasl-compact-stat-card--card-purple-highlight:hover,
.wasl-compact-stat-card--card-purple-solid:hover {
    box-shadow: 0 6px 20px rgba(111, 58, 250, 0.5), 0 0 12px rgba(251, 191, 36, 0.4) !important;
    transform: translateY(-2px) !important;
}

.wasl-compact-stat-card__info {
    display: flex;
    flex-direction: column;
}

.wasl-compact-stat-card__val {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.2;
}

.wasl-compact-stat-card__label {
    font-size: 0.75rem;
    color: #94A3B8;
    font-weight: 400;
    margin-top: 2px;
}

.wasl-compact-stat-card__icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wasl-compact-stat-card__icon-box--purple {
    background-color: #F3EEFF;
    color: #7C3AED;
}

.wasl-compact-stat-card__icon-box--green {
    background-color: #ECFDF5;
    color: #10B981;
}

.wasl-compact-stat-card__icon-box--red {
    background-color: #FEF2F2;
    color: #EF4444;
}

.wasl-compact-stat-card__icon-box--blue {
    background-color: #EFF6FF;
    color: #3B82F6;
}

.wasl-compact-stat-card__icon-box--yellow,
.wasl-compact-stat-card__icon-box--amber {
    background-color: #FFFBEB;
    color: #F59E0B;
}

/* Workspace header MudItem wrapper — no bottom gap */
.wasl-workspace-header-wrap {
    padding-bottom: 0 !important;
}
.mud-tabs-toolbar {
    position: relative;
    background-color: transparent;
}

/* Wasl Command Palette / Search Dialog Styles */
.wasl-command-palette-dialog {
    background-color: #FFFFFF !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    max-width: 600px !important;
    width: 100% !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
}

.wasl-search-bar {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1.5px solid #F1F5F9;
    gap: 12px;
    direction: rtl;
}

.wasl-search-bar__icon {
    color: #64748B;
}

.wasl-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.95rem;
    color: #0F172A;
    background: transparent;
    padding: 4px 0;
    font-family: inherit;
    text-align: right;
}

.wasl-search-badge {
    background: #F1F5F9;
    color: #64748B;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

.wasl-search-results {
    max-height: 380px;
    overflow-y: auto;
    padding: 8px 12px;
    direction: rtl;
}

.wasl-search-no-results {
    padding: 40px 20px;
    text-align: center;
    color: #94A3B8;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.9rem;
}

.wasl-search-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 16px;
    margin-bottom: 4px;
    text-decoration: none !important;
}

.wasl-search-item:hover,
.wasl-search-item--selected {
    background-color: #F8FAFC;
}

.wasl-search-item--selected {
    border-right: 3px solid #7C3AED;
    border-left: none;
    background-color: #F5F3FF;
}

.wasl-search-item__icon-box {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wasl-search-icon--blue {
    background-color: #EFF6FF;
    color: #3B82F6;
}

.wasl-search-icon--purple {
    background-color: #F3EEFF;
    color: #7C3AED;
}

.wasl-search-icon--green {
    background-color: #ECFDF5;
    color: #10B981;
}

.wasl-search-icon--yellow {
    background-color: #FFFBEB;
    color: #F59E0B;
}

.wasl-search-item__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: right;
}

.wasl-search-item__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #0F172A;
}

.wasl-search-item__path {
    font-size: 0.75rem;
    color: #94A3B8;
    margin-top: 2px;
}

.wasl-search-item__arrow {
    color: #CBD5E1;
    transition: transform 0.2s ease, color 0.2s ease;
    transform: scaleX(-1);
}

.wasl-search-item:hover .wasl-search-item__arrow,
.wasl-search-item--selected .wasl-search-item__arrow {
    color: #7C3AED;
    transform: scaleX(-1) translateX(-4px);
}

.wasl-search-footer {
    background: #F8FAFC;
    padding: 10px 20px;
    border-top: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #64748B;
    gap: 6px;
    direction: rtl;
}

/* Beneficiary Card Default Light Mode Styling */
.beneficiary-selected-card {
    background-color: #F8FAFC;
    border-color: #CBD5E1 !important;
}

.beneficiary-avatar-box {
    background-color: #EEF2FF;
    color: #6451B1;
}

.beneficiary-name-text {
    color: #1E293B;
}

.beneficiary-new-btn {
    border-color: #E2E8F0 !important;
    background-color: #FFFFFF;
}

.beneficiary-add-icon-box {
    background-color: #EEF2FF;
    border: 1.5px dashed #6451B1;
    color: #6451B1;
}

.order-details-employee-chip {
    background-color: #EEF2FF !important;
    color: #6451B1 !important;
}

.invoice-details-header-card,
.invoice-details-footer-card {
    background-color: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
}

.invoice-table-th {
    background-color: #F1F5F9 !important;
    color: #1E293B !important;
}

.invoice-details-total-price {
    color: #6451B1 !important;
}

.scd-skeleton-info-card {
    background-color: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
}

.scd-skeleton-table-header {
    background-color: #F1F5F9 !important;
}

/* ==========================================================================
   WASL FOLLOW-UP CARD (.wasl-follow-up-card)
   ========================================================================== */
.wasl-follow-up-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.wasl-follow-up-card:hover {
    box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.09), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    transform: translateY(-3px);
    border-color: #cbd5e1;
}

/* Cover Canvas Area */
.wasl-follow-up-card__cover {
    position: relative;
    width: 100%;
    height: 140px;
    background: var(--wasl-follow-up-accent-bg, #f8fafc);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.2s ease;
}

.wasl-follow-up-card__cover:hover {
    filter: brightness(0.98);
}

.wasl-follow-up-card__cover-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    z-index: 2;
}

.wasl-follow-up-card__cover-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wasl-follow-up-card__archive-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(30, 41, 59, 0.88);
    backdrop-filter: blur(4px);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.wasl-follow-up-card__archive-icon-btn:hover {
    transform: scale(1.08);
    background: rgba(15, 23, 42, 0.95);
}

.wasl-follow-up-card__archive-icon-btn .mud-icon-root {
    color: #ffffff !important;
    font-size: 1rem !important;
}

.wasl-follow-up-card__cover-menu {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
}

/* Center Signature Icon & Hover Eye Reveal */
.wasl-follow-up-card__doc-center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1 1 auto;
    margin-top: -8px;
}

.wasl-follow-up-card__icon-badge {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.wasl-follow-up-card:hover .wasl-follow-up-card__icon-badge {
    transform: scale(1.12);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.wasl-follow-up-card__signature-icon {
    font-size: 2.2rem !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: scale(1);
}

.wasl-follow-up-card:hover .wasl-follow-up-card__signature-icon {
    opacity: 0;
    transform: scale(0.6);
}

.wasl-follow-up-card__hover-eye {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.wasl-animated-eye {
    width: 36px;
    height: 36px;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
}

.wasl-eye__contour {
    stroke-width: 2.2;
    fill: none;
    transition: stroke 0.2s ease;
}

.wasl-eye__pupil-group {
    transform-origin: 12px 12px;
}

.wasl-eye__eyelid {
    transform: scaleY(0);
    transform-origin: top center;
}

.wasl-follow-up-card:hover .wasl-follow-up-card__hover-eye {
    opacity: 1;
    transform: scale(1);
}

.wasl-follow-up-card:hover .wasl-eye__pupil-group {
    animation: wasl-pupil-scan-8s 8s ease-in-out infinite;
}

.wasl-follow-up-card:hover .wasl-eye__eyelid {
    animation: wasl-eye-blink-4s 4s ease-in-out infinite;
}

/* Micro-interaction: Natural Eyelid Blink (every 4s, 0.3s duration) */
@keyframes wasl-eye-blink-4s {
    0%, 92.5% {
        transform: scaleY(0);
    }
    96.25% {
        transform: scaleY(1);
    }
    100% {
        transform: scaleY(0);
    }
}

/* Micro-interaction: Pupil Scanning (every 8s, 0.8s gaze shift, 0.5s pause) */
@keyframes wasl-pupil-scan-8s {
    0%, 12.5% {
        transform: translateX(0);
    }
    22.5%, 28.75% {
        transform: translateX(-3.6px); /* 15% to left + 0.5s pause */
    }
    38.75%, 45.0% {
        transform: translateX(3.6px);  /* 30% to right + 0.5s pause */
    }
    55.0%, 100% {
        transform: translateX(0);      /* Return to center */
    }
}

/* Content Area */
.wasl-follow-up-card__content {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #ffffff;
    flex: 1 1 auto;
}

.wasl-follow-up-card__heading {
    min-width: 0;
}

.wasl-follow-up-card__title {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tags Row (Status + Signature Type) */
.wasl-follow-up-card__tags-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.wasl-follow-up-card__sig-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1e293b;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.wasl-follow-up-card__sig-icon {
    font-size: 0.85rem !important;
}

.wasl-follow-up-card__sig-text {
    line-height: 1.3;
}

/* Footer */
.wasl-follow-up-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    margin-top: auto;
    min-height: 32px;
}

.wasl-follow-up-card__team-info {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    min-width: 0;
    flex: 1 1 auto;
}

.wasl-follow-up-card__team-icon {
    color: #94a3b8 !important;
    flex: 0 0 auto;
}

.wasl-follow-up-card__team-name {
    font-weight: 500 !important;
    color: #475569 !important;
    font-size: 0.775rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wasl-follow-up-card__team-avatars {
    flex: 0 0 auto;
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
}

/* ==========================================================================
   WASL ENTERPRISE TASK CARD (.wasl-task-card)
   ========================================================================== */

.wasl-task-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 190px;
    border-radius: 14px;
    border: 1px solid #E2E8F0;
    background-color: #FFFFFF;
    padding: 16px;
    gap: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.01);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
}

.wasl-task-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -4px rgba(108, 93, 211, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.03);
    border-color: rgba(108, 93, 211, 0.35);
}

.wasl-task-card:active {
    transform: translateY(-1px);
}

.wasl-task-card--completed {
    border-color: rgba(16, 185, 129, 0.28);
    background: linear-gradient(160deg, #FFFFFF 0%, #F0FDF4 100%);
}

.wasl-task-card--overdue {
    border-color: rgba(239, 68, 68, 0.25);
}

.wasl-task-card--overdue .wasl-task-card__title {
    color: #991B1B;
}

/* Header */
.wasl-task-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.wasl-task-card__header-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.wasl-task-card__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #1E293B;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.wasl-task-card:hover .wasl-task-card__title {
    color: #6C5DD3;
}

.wasl-task-card__status-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wasl-task-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    width: fit-content;
    line-height: 1.4;
}

.wasl-task-card__badge--success {
    background-color: #ECFDF5;
    color: #059669;
    border: 1px solid #A7F3D0;
}

.wasl-task-card__badge--warning {
    background-color: #FFFBEB;
    color: #D97706;
    border: 1px solid #FDE68A;
}

.wasl-task-card__badge--primary {
    background-color: #F5F3FF;
    color: #6C5DD3;
    border: 1px solid #DDD6FE;
}

.wasl-task-card__badge--neutral {
    background-color: #F8FAFC;
    color: #64748B;
    border: 1px solid #E2E8F0;
}

.wasl-task-card__badge-icon {
    font-size: 0.8rem !important;
}

.wasl-task-card__menu-wrap {
    flex-shrink: 0;
    margin-inline-start: 4px;
}

.wasl-task-card__menu-btn {
    color: #94A3B8 !important;
    border-radius: 8px !important;
    padding: 4px !important;
    transition: all 0.2s ease !important;
}

.wasl-task-card__menu-btn:hover {
    color: #6C5DD3 !important;
    background-color: rgba(108, 93, 211, 0.08) !important;
}

/* Description */
.wasl-task-card__desc {
    margin: 0;
    font-size: 0.8125rem;
    color: #64748B;
    line-height: 1.5;
    min-height: 38px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Horizontal Progress Section */
.wasl-task-card__progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}

.wasl-task-card__progress-labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 500;
}

.wasl-task-card__progress-state {
    color: #334155;
    font-weight: 600;
}

.wasl-task-card__progress-completed-text {
    color: #059669;
}

.wasl-task-card__progress-counter {
    color: #64748B;
    font-size: 0.725rem;
}

.wasl-task-card__progress-track {
    height: 6px;
    width: 100%;
    background-color: #F1F5F9;
    border-radius: 999px;
    overflow: hidden;
}

.wasl-task-card__progress-bar {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.wasl-task-card__progress-bar--success {
    background: linear-gradient(90deg, #10B981, #34D399);
}

.wasl-task-card__progress-bar--primary {
    background: linear-gradient(90deg, #6C5DD3, #8E82E6);
}

.wasl-task-card__progress-bar--neutral {
    background-color: #CBD5E1;
}

.wasl-task-card__progress-bar--error {
    background: linear-gradient(90deg, #EF4444, #F87171);
}

.wasl-task-card__meta-val--overdue {
    color: #DC2626 !important;
    font-weight: 700 !important;
}

/* Metadata (Due Date + Team) */
.wasl-task-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid #F1F5F9;
    margin-top: auto;
}

.wasl-task-card__meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wasl-task-card__meta-icon {
    color: #94A3B8 !important;
    font-size: 1rem !important;
}

.wasl-task-card__meta-text {
    display: flex;
    flex-direction: column;
}

.wasl-task-card__meta-label {
    font-size: 0.675rem;
    color: #94A3B8;
    font-weight: 500;
}

.wasl-task-card__meta-val {
    font-size: 0.75rem;
    color: #334155;
    font-weight: 600;
}

.wasl-task-card__meta-item--team {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.wasl-task-card__team-stack {
    display: flex;
    align-items: center;
}

.wasl-task-card__avatars .mud-avatar {
    border: 2px solid #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    width: 26px !important;
    height: 26px !important;
    font-size: 0.7rem !important;
}

.wasl-task-card__no-team {
    color: #94A3B8;
    font-size: 0.8125rem;
}

/* Actions Section */
.wasl-task-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #F8FAFC;
}

.wasl-task-card__btn {
    font-size: 0.75rem !important;
    padding: 3px 12px !important;
    min-height: 28px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.wasl-task-card__btn--approve {
    background-color: #10B981 !important;
    color: #FFFFFF !important;
}

.wasl-task-card__btn--approve:hover {
    background-color: #059669 !important;
}

.wasl-task-card__btn--reject {
    color: #EF4444 !important;
    border-color: #FCA5A5 !important;
}

.wasl-task-card__btn--reject:hover {
    background-color: #FEF2F2 !important;
}

.wasl-task-card__btn--delete {
    color: #EF4444 !important;
}

/* ==========================================================================
   Work Teams / Employee Groups Cards
   ========================================================================== */
.wasl-team-card {
    position: relative;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 160px;
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.22s ease;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
}

.wasl-team-card:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.35);
    box-shadow: 0 12px 24px -4px rgba(124, 58, 237, 0.12),
                0 4px 8px -2px rgba(0, 0, 0, 0.04);
}

.wasl-team-card__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.wasl-team-card__icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12) 0%, rgba(139, 92, 246, 0.04) 100%);
    border: 1px solid rgba(124, 58, 237, 0.15);
    color: var(--mud-palette-primary);
    transition: transform 0.22s ease, background 0.22s ease;
}

.wasl-team-card:hover .wasl-team-card__icon-wrapper {
    transform: scale(1.05);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18) 0%, rgba(139, 92, 246, 0.08) 100%);
}

.wasl-team-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 16px;
}

.wasl-team-card__title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--mud-palette-text-primary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wasl-team-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ==========================================================================
   Periods / Work Shifts Cards
   ========================================================================== */
.wasl-period-card {
    position: relative;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    padding: 18px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 220px;
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.22s ease;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
}

.wasl-period-card:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 58, 237, 0.35);
    box-shadow: 0 12px 24px -4px rgba(124, 58, 237, 0.12),
                0 4px 8px -2px rgba(0, 0, 0, 0.04);
}

.wasl-period-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.wasl-period-card__title-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.wasl-period-card__title {
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    color: var(--mud-palette-text-primary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wasl-period-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-block: 8px;
}

.wasl-period-card__section-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.wasl-period-card__schedules {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wasl-period-card__schedule-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 12px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    transition: background 0.15s ease;
}

.wasl-period-card:hover .wasl-period-card__schedule-item {
    background: rgba(124, 58, 237, 0.04);
}

.wasl-period-card__day {
    font-weight: 700;
    color: var(--mud-palette-primary);
    white-space: nowrap;
}

.wasl-period-card__time {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: embed;
}

.wasl-period-card__empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 12px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02));
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 10px;
    min-height: 52px;
}

.wasl-period-card__empty-icon {
    color: var(--mud-palette-text-disabled);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wasl-period-card__empty-text {
    color: var(--mud-palette-text-secondary) !important;
    font-size: 0.8rem !important;
    font-weight: 500;
}

.wasl-period-card__title--empty {
    color: var(--mud-palette-text-disabled) !important;
    font-style: italic;
    font-weight: 500 !important;
}

.wasl-period-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    margin-top: auto;
}

/* ==========================================================================
   Period Form (Add/Edit Period) Styles
   ========================================================================== */

.period-days-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.period-day-chip {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    border-radius: 8px !important;
}

.period-day-chip.mud-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.period-days-meta {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
}

.period-time-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.period-time-field__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.period-subtable {
    border-radius: 12px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

.period-subtable-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
}

.period-subtable-header__title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.period-subtable-header__count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.period-subtable-native {
    width: 100%;
    border-collapse: collapse !important;
    border-spacing: 0;
    margin: 0;
}

.period-subtable-th-main {
    vertical-align: middle;
    text-align: center;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    color: var(--mud-palette-text-secondary) !important;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.02)) !important;
    padding: 10px 12px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    white-space: nowrap;
}

.period-subtable-th-group {
    text-align: center;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    color: var(--mud-palette-primary) !important;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.03)) !important;
    padding: 8px 12px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    white-space: nowrap;
}

.period-subtable-th-sub {
    text-align: center;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    color: var(--mud-palette-text-secondary) !important;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.015)) !important;
    padding: 6px 10px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    white-space: nowrap;
}

.period-subtable-native td {
    padding: 8px 12px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    text-align: center;
    font-size: 0.82rem;
    vertical-align: middle;
}

.period-subtable-native tbody tr {
    cursor: grab;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.period-subtable-native tbody tr:active {
    cursor: grabbing;
}

.period-subtable-native tbody tr:hover {
    background: rgba(124, 58, 237, 0.03);
}

.period-row--dragging {
    opacity: 0.35 !important;
    background: var(--mud-palette-background-grey) !important;
}

.period-row--dragover {
    border-top: 2px solid var(--mud-palette-primary) !important;
    background: rgba(124, 58, 237, 0.08) !important;
}

.period-drag-handle {
    cursor: grab;
    color: var(--mud-palette-text-disabled);
    vertical-align: middle;
    transition: color 0.15s ease;
}

.period-subtable-native tbody tr:hover .period-drag-handle {
    color: var(--mud-palette-primary);
}

.period-reorder-arrows {
    display: inline-flex;
    flex-direction: column;
    gap: 0;
    line-height: 1;
    vertical-align: middle;
}

.period-arrow-btn {
    padding: 0 !important;
    width: 18px !important;
    height: 16px !important;
    min-width: 18px !important;
    color: var(--mud-palette-text-secondary) !important;
    border-radius: 4px !important;
}

.period-arrow-btn .mud-icon-root {
    font-size: 14px !important;
}

.period-arrow-btn:hover:not(:disabled) {
    color: var(--mud-palette-primary) !important;
    background-color: rgba(100, 81, 177, 0.1) !important;
}

.period-arrow-btn:disabled {
    opacity: 0.25 !important;
}

.wasl-segmented-control {
    display: flex;
    align-items: center;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.04));
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    padding: 2px;
    gap: 3px;
    width: 100%;
    height: 38px;
    box-sizing: border-box;
}

.wasl-segmented-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease-in-out;
    padding: 0 10px;
    user-select: none;
}

.wasl-segmented-option:hover:not(.active) {
    background: rgba(139, 92, 246, 0.08);
    color: var(--mud-palette-primary);
}

.wasl-segmented-option.active {
    background: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-contrast-text, #ffffff) !important;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.period-subtable-day-cell {
    font-weight: 700 !important;
    color: var(--mud-palette-primary) !important;
    white-space: nowrap;
    text-align: center;
}

.period-subtable-time-cell {
    direction: ltr;
    unicode-bidi: embed;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    display: inline-block;
}

.period-subtable .order-item-actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.period-subtable .order-item-action-bar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    white-space: nowrap;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    padding: 2px;
    box-shadow: 0 0 0 1px var(--mud-palette-lines-default);
}

.period-subtable .order-item-action-btn {
    color: var(--mud-palette-text-secondary) !important;
    width: 28px !important;
    height: 28px !important;
}

.period-subtable .order-item-action-btn:hover {
    color: var(--mud-palette-error) !important;
    background-color: rgba(244, 67, 54, 0.08) !important;
}

.period-subtable-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    text-align: center;
}

.period-subtable-empty__icon {
    color: var(--mud-palette-text-disabled);
}

.period-subtable-empty__title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--mud-palette-text-primary);
}

.period-subtable-empty__hint {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

/* ─────────────────────────────────────────────────────────────
   Start Work Task Cards & Vacation Details Drawer
   ───────────────────────────────────────────────────────────── */

/* Work Task Card */
.wt-card {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid #E9EDF4;
    border-radius: 16px;
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.wt-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(111, 58, 250, 0.10);
}

.wt-card--success {
    border-color: rgba(16, 185, 129, 0.35);
}

.wt-card--success:hover {
    border-color: rgba(16, 185, 129, 0.55);
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.10);
}

.wt-card--warning {
    border-color: rgba(245, 158, 11, 0.40);
}

.wt-card--warning:hover {
    border-color: rgba(245, 158, 11, 0.60);
    box-shadow: 0 10px 24px rgba(245, 158, 11, 0.10);
}

.wt-card--error {
    border-color: rgba(239, 68, 68, 0.45);
}

.wt-card--error:hover {
    border-color: rgba(239, 68, 68, 0.65);
    box-shadow: 0 10px 24px rgba(239, 68, 68, 0.12);
}

.wt-card--info {
    border-color: rgba(59, 130, 246, 0.35);
}

.wt-card--info:hover {
    border-color: rgba(59, 130, 246, 0.55);
    box-shadow: 0 10px 24px rgba(59, 130, 246, 0.10);
}

.wt-card--neutral {
    border-color: #E9EDF4;
}

.wt-card--neutral:hover {
    border-color: #DDD6FE;
}

.wt-card__body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 16px 14px;
    flex: 1 1 auto;
    min-height: 0;
}

.wt-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.wt-card__identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.wt-card__title-block {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wt-card__name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    color: #1E293B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wt-card:hover .wt-card__name {
    color: #6F3AFA;
}

.wt-card__duration {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    color: #6F3AFA;
    background: #F3EEFF;
}

.wt-card__badge {
    flex-shrink: 0;
    max-width: 42%;
}

.wt-card__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.wt-card__meta-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.wt-card__meta-icon {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin-top: 2px;
    color: #94A3B8;
    flex-shrink: 0;
}

.wt-card__meta-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wt-card__meta-label {
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.2;
    color: #8B93A7;
}

.wt-card__meta-value {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.25;
    color: #1F2430;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wt-card__reason {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px dashed #E9EDF4;
    min-height: 52px;
}

.wt-card__reason-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #8B93A7;
    margin-bottom: 4px;
}

.wt-card__reason-text {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #4B5563;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.wt-card__hover-cta {
    position: absolute;
    inset-inline-start: auto;
    inset-inline-end: 10px;
    bottom: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 12px;
    background: #F5F0FF;
    border: 1px solid #E4DBFF;
    box-shadow: 0 4px 14px rgba(111, 58, 250, 0.14);
    opacity: 0;
    transform: translateY(12px) scale(0.92);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.22s ease;
}

.wt-card:hover .wt-card__hover-cta {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.wt-card__hover-cta .mud-icon-root {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    color: #6F3AFA !important;
}

.wt-card--error .wt-card__hover-cta {
    background: #FEF2F2;
    border-color: #FECACA;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.14);
}

.wt-card--error .wt-card__hover-cta .mud-icon-root {
    color: #DC2626 !important;
}

@media (prefers-reduced-motion: reduce) {
    .wt-card,
    .wt-card__hover-cta {
        transition: none;
    }
}

body.mud-theme-dark .wt-card {
    background: #1E2538;
    border-color: #2A3349;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

body.mud-theme-dark .wt-card:hover {
    box-shadow: 0 8px 30px rgba(167, 139, 250, 0.2);
}

body.mud-theme-dark .wt-card--error {
    border-color: rgba(248, 113, 113, 0.45);
}

body.mud-theme-dark .wt-card__name,
body.mud-theme-dark .wt-card__meta-value {
    color: #F8FAFC;
}

body.mud-theme-dark .wt-card:hover .wt-card__name {
    color: #C4B5FD;
}

body.mud-theme-dark .wt-card__meta-label,
body.mud-theme-dark .wt-card__meta-icon,
body.mud-theme-dark .wt-card__reason-label {
    color: #94A3B8;
}

body.mud-theme-dark .wt-card__duration {
    color: #C4B5FD;
    background: rgba(167, 139, 250, 0.16);
}

body.mud-theme-dark .wt-card__reason {
    border-top-color: #2A3349;
}

body.mud-theme-dark .wt-card__reason-text {
    color: #CBD5E1;
}

body.mud-theme-dark .wt-card__hover-cta {
    background: #2A3349;
    border-color: #3B4560;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

body.mud-theme-dark .wt-card__hover-cta .mud-icon-root {
    color: #C4B5FD !important;
}

body.mud-theme-dark .wt-card--error .wt-card__hover-cta {
    background: rgba(239, 68, 68, 0.16);
    border-color: rgba(248, 113, 113, 0.35);
}

body.mud-theme-dark .wt-card--error .wt-card__hover-cta .mud-icon-root {
    color: #F87171 !important;
}

/* Vacation / Work Task Details Drawer */
.vacation-details-drawer {
    min-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.vd-profile-card {
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vd-info-section {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vd-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.vd-info-label {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.vd-info-value {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    text-align: end;
}

.vd-reason-card {
    background: var(--mud-palette-background-grey);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
    word-break: break-word;
}

.vacation-summary-row {
    padding: 6px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.vacation-summary-row:last-child {
    border-bottom: none;
}

.vacation-summary-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vacation-summary-count {
    font-size: 15px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    min-width: 24px;
    text-align: center;
}

.vacation-details-actions {
    width: 100%;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ─────────────────────────────────────────────────────────────
   End Work Task Cards & Vacation Details Drawer
   ───────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   Media Screen Workspace Components (3D Display, Showcase Card, Details)
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. 3D Smart Screen Mockup (.wasl-screen-3d) ─── */
.wasl-screen-3d {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 6px 4px;
    user-select: none;
    perspective: 800px;
}

.wasl-screen-3d.is-interactive {
    cursor: grab;
    touch-action: none;
}

.wasl-screen-3d.is-interactive.is-dragging {
    cursor: grabbing;
}

.wasl-screen-3d__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 190px;
    transform-style: preserve-3d;
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform;
}

.wasl-screen-3d.is-dragging .wasl-screen-3d__wrapper {
    transition: none !important;
}

.stat-card:hover .wasl-screen-3d:not(.is-interactive) .wasl-screen-3d__wrapper,
.wasl-screen-showcase-card:hover .wasl-screen-3d:not(.is-interactive) .wasl-screen-3d__wrapper {
    transform: translateY(-4px) scale(1.03);
}

/* Monitor Frame / Bezel */
.wasl-screen-3d__monitor {
    width: 100%;
    height: 104px;
    position: relative;
    z-index: 2;
    transform-style: preserve-3d;
}

.wasl-screen-3d__bezel {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(145deg, #32353b 0%, #1a1c20 50%, #0d0e10 100%);
    padding: 5px;
    box-shadow: 
        0 8px 18px -4px rgba(0, 0, 0, 0.35),
        0 2px 5px -1px rgba(0, 0, 0, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.25),
        inset 0 -1px 2px rgba(0, 0, 0, 0.6);
    position: relative;
    border: 1px solid #454950;
    transform-style: preserve-3d;
}

/* Glass Display Screen */
.wasl-screen-3d__glass {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #101216;
}

.wasl-screen-3d.is-active .wasl-screen-3d__glass {
    background: radial-gradient(circle at 50% 40%, #1e1b4b 0%, #0f172a 60%, #020617 100%);
    box-shadow: inset 0 0 15px rgba(99, 102, 241, 0.2);
}

.wasl-screen-3d.is-inactive .wasl-screen-3d__glass {
    background: radial-gradient(circle at 50% 30%, #1f2329 0%, #121418 70%, #08090a 100%);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.8);
}

/* Glass Reflection Sheen */
.wasl-screen-3d__sheen {
    position: absolute;
    inset: -20%;
    background: linear-gradient(
        125deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.06) 35%,
        rgba(255, 255, 255, 0) 55%
    );
    pointer-events: none;
    z-index: 3;
    transform: translate(var(--sheen-x, 0%), var(--sheen-y, 0%));
    transition: transform 0.2s ease-out;
}

/* Screen Content */
.wasl-screen-3d__display-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.wasl-screen-3d__ambient-glow {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.35) 0%, rgba(99, 102, 241, 0) 70%);
    animation: wasl-glow-pulse 3s infinite ease-in-out;
}

.wasl-screen-3d__media-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.wasl-screen-3d__playback-logo {
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: wasl-icon-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes wasl-icon-pop {
    0% { transform: scale(0.6); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.wasl-screen-3d__play-icon {
    color: #a78bfa !important;
    filter: drop-shadow(0 2px 6px rgba(124, 58, 237, 0.6));
}

.wasl-screen-3d__signal-bars {
    position: absolute;
    bottom: 5px;
    left: 8px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 8px;
}

.wasl-screen-3d__signal-bars span {
    width: 2px;
    background-color: #22c55e;
    border-radius: 1px;
}

.wasl-screen-3d__signal-bars span:nth-child(1) { height: 3px; }
.wasl-screen-3d__signal-bars span:nth-child(2) { height: 5px; }
.wasl-screen-3d__signal-bars span:nth-child(3) { height: 8px; }

/* Standby Screen */
.wasl-screen-3d__standby-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    opacity: 0.45;
}

.wasl-screen-3d__standby-icon {
    color: #94a3b8 !important;
}

.wasl-screen-3d__standby-text {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #94a3b8;
}

/* Power LED */
.wasl-screen-3d__power-led {
    position: absolute;
    bottom: 3px;
    right: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    z-index: 4;
}

.wasl-screen-3d__power-led.led-active {
    background-color: #22c55e;
    box-shadow: 0 0 5px #22c55e, 0 0 10px rgba(34, 197, 94, 0.5);
}

.wasl-screen-3d__power-led.led-inactive {
    background-color: #ef4444;
    box-shadow: 0 0 4px #ef4444;
}

/* 3D Stand Neck */
.wasl-screen-3d__neck {
    width: 14px;
    height: 14px;
    background: linear-gradient(90deg, #4b5563 0%, #9ca3af 45%, #e5e7eb 55%, #4b5563 100%);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
    margin-top: -1px;
    position: relative;
    z-index: 1;
}

/* 3D Stand Base */
.wasl-screen-3d__base {
    width: 58px;
    height: 7px;
    border-radius: 4px 4px 6px 6px;
    background: linear-gradient(180deg, #6b7280 0%, #374151 50%, #1f2937 100%);
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
    position: relative;
    z-index: 2;
}

.wasl-screen-3d__base-reflection {
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 1px;
}

/* Surface Shadow */
.wasl-screen-3d__shadow {
    position: absolute;
    bottom: -3px;
    width: 72px;
    height: 5px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 75%);
    border-radius: 50%;
    z-index: 0;
}

@keyframes wasl-glow-pulse {
    0%, 100% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.15); opacity: 1; }
}


/* ─── 2. Screen Showcase Card (.wasl-screen-showcase-card) ─── */
.wasl-screen-showcase-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--wasl-surface, var(--mud-palette-surface, #ffffff));
    border: 1px solid var(--wasl-border, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08)));
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease;
    position: relative;
    padding: 12px 14px 14px 14px;
}

.wasl-screen-showcase-card.is-clickable {
    cursor: pointer;
}

.wasl-screen-showcase-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px -6px rgba(0, 0, 0, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.06);
    border-color: var(--wasl-primary, rgba(var(--mud-palette-primary-rgb), 0.35));
}

/* Header Controls */
.wasl-screen-showcase-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    z-index: 5;
    margin-bottom: 4px;
}

.wasl-screen-showcase-card__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(125, 125, 125, 0.08);
    backdrop-filter: blur(6px);
    border: 1px solid var(--wasl-border, rgba(0, 0, 0, 0.06));
    border-radius: 50%;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.wasl-screen-showcase-card__action-btn:hover {
    background: rgba(125, 125, 125, 0.16);
    transform: scale(1.05);
}

/* 3D Display Unit (Seamless) */
.wasl-screen-showcase-card__display {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    min-height: 140px;
    padding: 6px 0 10px 0;
}

.wasl-screen-showcase-card__podium-glow {
    position: absolute;
    bottom: 8px;
    width: 130px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(111, 58, 250, 0.12) 0%, rgba(111, 58, 250, 0) 70%);
    pointer-events: none;
}

/* Card Metadata Body */
.wasl-screen-showcase-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
    padding-top: 4px;
}

.wasl-screen-showcase-card__title {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: var(--wasl-text-primary, var(--mud-palette-text-primary, #18181B));
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wasl-screen-showcase-card__model-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wasl-screen-showcase-card__model-icon {
    color: var(--wasl-text-secondary, var(--mud-palette-text-secondary, #64748B));
    font-size: 15px !important;
}

.wasl-screen-showcase-card__model-text {
    color: var(--wasl-text-secondary, var(--mud-palette-text-secondary, #64748B));
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer Strip */
.wasl-screen-showcase-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed var(--wasl-border, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08)));
}

.wasl-screen-showcase-card__broadcast-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.wasl-screen-showcase-card__broadcast-pill.pill-playlist {
    background-color: var(--wasl-primary-muted, rgba(111, 58, 250, 0.1));
    color: var(--wasl-primary, #6F3AFA);
}

.wasl-screen-showcase-card__broadcast-pill.pill-live {
    background-color: var(--wasl-success-muted, rgba(16, 185, 129, 0.1));
    color: var(--wasl-success, #10B981);
}

.wasl-screen-showcase-card__broadcast-icon {
    font-size: 15px !important;
}

.wasl-screen-showcase-card__date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--wasl-text-secondary, var(--mud-palette-text-secondary, #64748B));
    font-size: 0.75rem;
}

.wasl-screen-showcase-card__date-icon {
    font-size: 13px !important;
    opacity: 0.75;
}


/* ─── 3. Screen Details Dialog & QR Scanner (.wasl-screen-details-dialog) ─── */
.wasl-screen-details-dialog {
    max-width: 480px !important;
    border-radius: 20px !important;
    overflow: hidden;
}

.wasl-qr-showcase-box {
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.wasl-qr-code-wrapper {
    background: #ffffff;
    padding: 12px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
    animation: wasl-qr-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wasl-qr-image {
    width: 196px;
    height: 196px;
    display: block;
    border-radius: 8px;
}

/* Laser Scanner Skeleton */
.wasl-qr-skeleton-scanner {
    width: 210px;
    height: 210px;
    border-radius: 18px;
    background: rgba(111, 58, 250, 0.04);
    border: 1px dashed rgba(111, 58, 250, 0.3);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.wasl-qr-scanner-icon {
    color: var(--wasl-primary, #6F3AFA);
    opacity: 0.6;
    animation: wasl-icon-pulse 1.5s infinite ease-in-out;
}

.wasl-qr-loading-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wasl-primary, #6F3AFA);
    opacity: 0.85;
}

.wasl-qr-laser-line {
    position: absolute;
    top: 0;
    left: 8px;
    right: 8px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--wasl-primary, #6F3AFA), #a78bfa, transparent);
    box-shadow: 0 0 12px var(--wasl-primary, #6F3AFA), 0 0 20px rgba(111, 58, 250, 0.6);
    border-radius: 2px;
    animation: wasl-laser-scan 1.6s infinite ease-in-out alternate;
    z-index: 2;
}

/* Scanner Corner Markers */
.wasl-qr-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: var(--wasl-primary, #6F3AFA);
    border-style: solid;
    border-width: 0;
}

.corner-tl { top: 8px; left: 8px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 4px; }
.corner-tr { top: 8px; right: 8px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 4px; }
.corner-bl { bottom: 8px; left: 8px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 4px; }
.corner-br { bottom: 8px; right: 8px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 4px; }

/* Screen Code Pill Badge */
.wasl-screen-code-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 20px;
    background: var(--wasl-primary-muted, rgba(111, 58, 250, 0.1));
    color: var(--wasl-primary, #6F3AFA);
    font-family: monospace;
    font-size: 0.95rem;
    letter-spacing: 1px;
}

@keyframes wasl-laser-scan {
    0% { top: 10px; opacity: 0.8; }
    100% { top: 195px; opacity: 1; }
}

@keyframes wasl-icon-pulse {
    0%, 100% { transform: scale(0.92); opacity: 0.5; }
    50% { transform: scale(1.08); opacity: 0.9; }
}

@keyframes wasl-qr-pop {
    0% { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}


/* ─── 4. Playback Platform Choice Cards ─── */
.wasl-playback-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}

.wasl-playback-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1.5px solid var(--wasl-border, #e2e8f0);
    background: var(--wasl-surface, #ffffff);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    min-width: 105px;
    flex: 1 1 105px;
    max-width: 135px;
}

.wasl-playback-card:hover {
    border-color: var(--wasl-primary, #6F3AFA);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.wasl-playback-card.is-selected {
    border-color: var(--wasl-primary, #6F3AFA);
    background: var(--wasl-primary-muted, rgba(111, 58, 250, 0.06));
    box-shadow: 0 0 0 1px var(--wasl-primary, #6F3AFA);
}

.wasl-playback-card__check {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--wasl-primary, #6F3AFA);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 5;
}

.wasl-playback-card__icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
}

.wasl-playback-card__title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--wasl-text-primary, #18181B);
    text-align: center;
    white-space: nowrap;
}

.wasl-playback-icon--windows {
    color: #0078D4;
}

.wasl-playback-icon--samsung {
    color: #1428A0;
}

body.mud-theme-dark .wasl-playback-icon--windows {
    color: #60A5FA;
}

body.mud-theme-dark .wasl-playback-icon--samsung {
    color: #93C5FD;
}

.wasl-playback-icon--apple {
    color: var(--wasl-text-primary, #18181B);
}

/* ─── 5. Screen Orientation Choice Cards ─── */
.wasl-orientation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    width: 100%;
}

.wasl-orientation-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 10px;
    border-radius: 12px;
    border: 1.5px solid var(--wasl-border, #e2e8f0);
    background: var(--wasl-surface, #ffffff);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.wasl-orientation-card:hover {
    border-color: var(--wasl-primary, #6F3AFA);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.wasl-orientation-card.is-selected {
    border-color: var(--wasl-primary, #6F3AFA);
    background: var(--wasl-primary-muted, rgba(111, 58, 250, 0.06));
    box-shadow: 0 0 0 1px var(--wasl-primary, #6F3AFA);
}

.wasl-orientation-card__check {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--wasl-primary, #6F3AFA);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 5;
}

.wasl-orientation-card__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    margin-bottom: 12px;
}

.wasl-orientation-card__title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--wasl-text-primary, #18181B);
}

.wasl-orientation-card__subtitle {
    font-size: 0.72rem;
    color: var(--wasl-text-secondary, #64748B);
}

.wasl-orientation-card__icon-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    width: 60px;
}

.wasl-orientation-monitor-mini {
    width: 44px;
    height: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wasl-orientation-monitor-mini__screen {
    width: 100%;
    height: 25px;
    border: 2px solid var(--wasl-text-primary, #334155);
    border-radius: 4px;
    background: rgba(125, 125, 125, 0.1);
}

.wasl-orientation-monitor-mini__stand {
    width: 14px;
    height: 4px;
    background: var(--wasl-text-primary, #334155);
    border-radius: 0 0 2px 2px;
    margin-top: 1px;
}

/* ─── 6. Live Screen Form Preview Stage ─── */
.wasl-screen-form-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    border-radius: 16px;
    border: 1px solid var(--wasl-border, #e2e8f0);
    background: var(--wasl-surface, #ffffff);
    min-height: 280px;
}

.wasl-screen-form-preview__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 180px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wasl-screen-form-preview__notice {
    margin-top: 16px;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--wasl-primary-muted, rgba(111, 58, 250, 0.08));
    color: var(--wasl-primary, #6F3AFA);
    font-size: 0.78rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ─── 7. Channel Showcase Card & Container (.wasl-channel-showcase-card) ─── */
.wasl-fill-layout:has(.channels-page-content),
.wasl-fill-table:has(.channels-page-content) {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
}

.channels-page-content {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 32px;
}

.channels-grid-stage {
    position: relative;
    min-height: 320px;
    width: 100%;
    overflow: visible;
}

.wasl-channel-showcase-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--wasl-surface, var(--mud-palette-surface, #ffffff));
    border: 1px solid var(--wasl-border, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08)));
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease;
    position: relative;
    padding: 12px 14px 14px 14px;
}

.wasl-channel-showcase-card.is-clickable {
    cursor: pointer;
}

.wasl-channel-showcase-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px -6px rgba(0, 0, 0, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.06);
    border-color: var(--wasl-primary, rgba(var(--mud-palette-primary-rgb), 0.35));
}

.wasl-channel-showcase-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    z-index: 5;
    margin-bottom: 4px;
}

.wasl-channel-showcase-card__action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(125, 125, 125, 0.08);
    backdrop-filter: blur(6px);
    border: 1px solid var(--wasl-border, rgba(0, 0, 0, 0.06));
    border-radius: 50%;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.wasl-channel-showcase-card__action-btn:hover {
    background: rgba(125, 125, 125, 0.16);
    transform: scale(1.05);
}

/* Broadcast 3D Stage */
.wasl-channel-showcase-card__display {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    min-height: 140px;
    padding: 6px 0 10px 0;
}

.wasl-channel-showcase-card__podium-glow {
    position: absolute;
    bottom: 8px;
    width: 130px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(111, 58, 250, 0.14) 0%, rgba(111, 58, 250, 0) 70%);
    pointer-events: none;
}

/* ─── 8. 3D Channel Studio Monitor Mockup (.wasl-channel-3d) ─── */
.wasl-channel-3d {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 6px 4px;
    user-select: none;
    perspective: 800px;
}

.wasl-channel-3d.is-interactive {
    cursor: grab;
    touch-action: none;
}

.wasl-channel-3d.is-interactive.is-dragging {
    cursor: grabbing;
}

.wasl-channel-3d__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 195px;
    transform-style: preserve-3d;
    transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    transition: transform 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform;
}

.wasl-channel-3d.is-dragging .wasl-channel-3d__wrapper {
    transition: none !important;
}

.wasl-channel-showcase-card:hover .wasl-channel-3d:not(.is-interactive) .wasl-channel-3d__wrapper {
    transform: translateY(-4px) scale(1.03);
}

/* Monitor Frame / Bezel */
.wasl-channel-3d__monitor {
    width: 100%;
    height: 108px;
    position: relative;
    z-index: 2;
    transform-style: preserve-3d;
}

.wasl-channel-3d__bezel {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(145deg, #2b2d35 0%, #17181c 50%, #0b0c0e 100%);
    padding: 5px;
    box-shadow: 
        0 8px 20px -4px rgba(0, 0, 0, 0.38),
        0 2px 6px -1px rgba(0, 0, 0, 0.25),
        inset 0 1px 1px rgba(255, 255, 255, 0.3),
        inset 0 -1px 2px rgba(0, 0, 0, 0.7);
    position: relative;
    border: 1px solid #3e424c;
    transform-style: preserve-3d;
}

/* Glass Display Screen */
.wasl-channel-3d__glass {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f1117;
}

.wasl-channel-3d.is-active .wasl-channel-3d__glass {
    background: radial-gradient(circle at 50% 40%, #1e153b 0%, #0d111d 60%, #030712 100%);
    box-shadow: inset 0 0 18px rgba(111, 58, 250, 0.25);
}

.wasl-channel-3d.is-inactive .wasl-channel-3d__glass {
    background: radial-gradient(circle at 50% 30%, #1e2126 0%, #111317 70%, #060708 100%);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.85);
}

/* Glass Reflection Sheen */
.wasl-channel-3d__sheen {
    position: absolute;
    inset: -20%;
    background: linear-gradient(
        125deg,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.05) 35%,
        rgba(255, 255, 255, 0) 55%
    );
    pointer-events: none;
    z-index: 5;
    transform: translate(var(--sheen-x, 0%), var(--sheen-y, 0%));
    transition: transform 0.2s ease-out;
}

.wasl-channel-3d__ambient-glow {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(111, 58, 250, 0.35) 0%, rgba(99, 102, 241, 0) 70%);
    animation: wasl-glow-pulse 3s infinite ease-in-out;
    pointer-events: none;
}

/* Screen Content Stage */
.wasl-channel-3d__display-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 4px;
}

/* ON AIR Live Badge */
.wasl-channel-3d__on-air {
    position: absolute;
    top: 4px;
    inset-inline-start: 6px;
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    padding: 1px 5px;
    border-radius: 4px;
    border: 0.5px solid rgba(239, 68, 68, 0.5);
    z-index: 6;
}

.wasl-channel-3d__on-air-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 5px #ef4444;
    animation: wasl-pulse-dot 1.2s infinite ease-in-out;
}

@keyframes wasl-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

.wasl-channel-3d__on-air-text {
    font-size: 7.5px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.5px;
}

/* Multi-Zone Container */
.wasl-channel-3d__zones {
    width: 100%;
    height: 100%;
    display: grid;
    gap: 3px;
}

.wasl-channel-3d__zones.layout-full-100 {
    display: flex;
}

.wasl-channel-3d__zones.layout-split-50-50 {
    grid-template-columns: 1fr 1fr;
}

.wasl-channel-3d__zones.layout-split-70-30 {
    grid-template-columns: 7fr 3fr;
}

.wasl-channel-3d__zones.layout-split-50-20-30 {
    grid-template-columns: 5fr 4fr;
}

.wasl-channel-zone-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 100%;
}

.wasl-channel-zone-col .zone-top {
    height: 45%;
}

.wasl-channel-zone-col .zone-bottom {
    height: 55%;
}

/* Zone Box Base */
.wasl-channel-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    backdrop-filter: blur(2px);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
    padding: 2px;
    transition: all 0.2s ease;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.wasl-channel-zone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    will-change: transform, opacity, filter;
}

/* ─── Media Transition Animations in 3D Screen ─── */
/* 1. Slide Transition (انزلاق) */
.wasl-channel-3d__zones.transition-slide .wasl-channel-zone-inner {
    animation: wasl-zone-slide-cycle 3.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.wasl-channel-3d__zones.transition-slide .zone-2 .wasl-channel-zone-inner,
.wasl-channel-3d__zones.transition-slide .zone-side .wasl-channel-zone-inner,
.wasl-channel-3d__zones.transition-slide .zone-bottom .wasl-channel-zone-inner {
    animation-delay: 0.35s;
}

@keyframes wasl-zone-slide-cycle {
    0%, 30% {
        transform: translateX(0);
        opacity: 1;
        filter: blur(0);
    }
    45% {
        transform: translateX(-120%);
        opacity: 0;
        filter: blur(1.5px);
    }
    55% {
        transform: translateX(120%);
        opacity: 0;
        filter: blur(1.5px);
    }
    70%, 100% {
        transform: translateX(0);
        opacity: 1;
        filter: blur(0);
    }
}

/* 2. Fade Transition (تلاشي تدريجي) */
.wasl-channel-3d__zones.transition-fade .wasl-channel-zone-inner {
    animation: wasl-zone-fade-cycle 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.wasl-channel-3d__zones.transition-fade .zone-2 .wasl-channel-zone-inner,
.wasl-channel-3d__zones.transition-fade .zone-side .wasl-channel-zone-inner,
.wasl-channel-3d__zones.transition-fade .zone-bottom .wasl-channel-zone-inner {
    animation-delay: 0.4s;
}

@keyframes wasl-zone-fade-cycle {
    0%, 28% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
    48%, 52% {
        opacity: 0.08;
        transform: scale(0.92);
        filter: blur(2px);
    }
    72%, 100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

/* 3. None / Static Transition (لاشيء) */
.wasl-channel-3d__zones.transition-none .wasl-channel-zone-inner {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

.wasl-channel-zone:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(111, 58, 250, 0.4);
}

.wasl-zone-icon {
    font-size: 16px !important;
    color: #a78bfa !important;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
}

.wasl-zone-icon-mini {
    font-size: 12px !important;
    color: #c4b5fd !important;
}

.wasl-zone-icon-main {
    font-size: 24px !important;
    color: #c4b5fd !important;
    filter: drop-shadow(0 2px 6px rgba(111, 58, 250, 0.6));
}

.wasl-zone-label {
    font-size: 8px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 1px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}

.wasl-zone-label-full {
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

.wasl-channel-3d__full-visualizer {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wasl-channel-3d__audio-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
}

.wasl-channel-3d__audio-bars span {
    width: 2px;
    background: #a78bfa;
    border-radius: 1px;
    animation: wasl-audio-wave 1.2s infinite ease-in-out alternate;
}

.wasl-channel-3d__audio-bars span:nth-child(1) { height: 4px; animation-delay: 0.1s; }
.wasl-channel-3d__audio-bars span:nth-child(2) { height: 10px; animation-delay: 0.3s; }
.wasl-channel-3d__audio-bars span:nth-child(3) { height: 14px; animation-delay: 0.2s; }
.wasl-channel-3d__audio-bars span:nth-child(4) { height: 8px; animation-delay: 0.4s; }
.wasl-channel-3d__audio-bars span:nth-child(5) { height: 5px; animation-delay: 0.15s; }

@keyframes wasl-audio-wave {
    0% { transform: scaleY(0.4); opacity: 0.5; }
    100% { transform: scaleY(1); opacity: 1; }
}

/* Offline Standby */
.wasl-channel-3d__standby-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    opacity: 0.45;
}

.wasl-channel-3d__standby-icon {
    color: #94a3b8 !important;
}

.wasl-channel-3d__standby-text {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #94a3b8;
}

/* Power LED */
.wasl-channel-3d__power-led {
    position: absolute;
    bottom: 3px;
    right: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    z-index: 6;
}

.wasl-channel-3d__power-led.led-active {
    background-color: #22c55e;
    box-shadow: 0 0 5px #22c55e, 0 0 10px rgba(34, 197, 94, 0.5);
}

.wasl-channel-3d__power-led.led-inactive {
    background-color: #ef4444;
    box-shadow: 0 0 4px #ef4444;
}

/* 3D Stand */
.wasl-channel-3d__neck {
    width: 14px;
    height: 14px;
    background: linear-gradient(90deg, #4b5563 0%, #9ca3af 45%, #e5e7eb 55%, #4b5563 100%);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
    margin-top: -1px;
    position: relative;
    z-index: 1;
}

.wasl-channel-3d__base {
    width: 58px;
    height: 7px;
    border-radius: 4px 4px 6px 6px;
    background: linear-gradient(180deg, #6b7280 0%, #374151 50%, #1f2937 100%);
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.4);
    position: relative;
    z-index: 2;
}

.wasl-channel-3d__base-reflection {
    position: absolute;
    top: 0;
    left: 15%;
    right: 15%;
    height: 1px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 1px;
}

.wasl-channel-3d__shadow {
    position: absolute;
    bottom: -3px;
    width: 72px;
    height: 5px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 75%);
    border-radius: 50%;
    z-index: 0;
}

/* ─── 3D Monitor Large Variant (Form Live Preview) ─── */
.wasl-channel-3d.is-large {
    padding: 16px 8px 10px;
    perspective: 1000px;
}

.wasl-channel-3d.is-large .wasl-channel-3d__wrapper {
    max-width: 290px;
}

.wasl-channel-3d.is-large .wasl-channel-3d__monitor {
    height: 162px;
}

.wasl-channel-3d.is-large .wasl-channel-3d__bezel {
    border-radius: 12px;
    padding: 7px;
    box-shadow: 
        0 14px 28px -6px rgba(0, 0, 0, 0.45),
        0 4px 10px -2px rgba(0, 0, 0, 0.3),
        inset 0 1px 1.5px rgba(255, 255, 255, 0.35),
        inset 0 -2px 3px rgba(0, 0, 0, 0.8);
}

.wasl-channel-3d.is-large .wasl-channel-3d__glass {
    border-radius: 8px;
}

.wasl-channel-3d.is-large .wasl-channel-3d__ambient-glow {
    width: 120px;
    height: 120px;
}

.wasl-channel-3d.is-large .wasl-channel-3d__on-air {
    top: 6px;
    inset-inline-start: 8px;
    padding: 2px 7px;
    border-radius: 6px;
    gap: 4px;
}

.wasl-channel-3d.is-large .wasl-channel-3d__on-air-dot {
    width: 6px;
    height: 6px;
}

.wasl-channel-3d.is-large .wasl-channel-3d__on-air-text {
    font-size: 9px;
    letter-spacing: 0.8px;
}

.wasl-channel-3d.is-large .wasl-channel-3d__zones {
    gap: 5px;
}

.wasl-channel-3d.is-large .wasl-channel-zone {
    border-radius: 6px;
    padding: 4px;
}

.wasl-channel-3d.is-large .wasl-zone-icon {
    font-size: 24px !important;
}

.wasl-channel-3d.is-large .wasl-zone-icon-mini {
    font-size: 16px !important;
}

.wasl-channel-3d.is-large .wasl-zone-icon-main {
    font-size: 34px !important;
}

.wasl-channel-3d.is-large .wasl-zone-label {
    font-size: 11px;
    font-weight: 700;
    margin-top: 3px;
}

.wasl-channel-3d.is-large .wasl-zone-label-full {
    font-size: 13px;
    font-weight: 800;
    margin-top: 4px;
}

.wasl-channel-3d.is-large .wasl-channel-3d__audio-bars {
    height: 20px;
    gap: 3px;
}

.wasl-channel-3d.is-large .wasl-channel-3d__audio-bars span {
    width: 3px;
    border-radius: 1.5px;
}

.wasl-channel-3d.is-large .wasl-channel-3d__audio-bars span:nth-child(1) { height: 6px; }
.wasl-channel-3d.is-large .wasl-channel-3d__audio-bars span:nth-child(2) { height: 14px; }
.wasl-channel-3d.is-large .wasl-channel-3d__audio-bars span:nth-child(3) { height: 20px; }
.wasl-channel-3d.is-large .wasl-channel-3d__audio-bars span:nth-child(4) { height: 12px; }
.wasl-channel-3d.is-large .wasl-channel-3d__audio-bars span:nth-child(5) { height: 7px; }

.wasl-channel-3d.is-large .wasl-channel-3d__standby-badge {
    gap: 4px;
}

.wasl-channel-3d.is-large .wasl-channel-3d__standby-icon {
    font-size: 28px !important;
}

.wasl-channel-3d.is-large .wasl-channel-3d__standby-text {
    font-size: 10px;
    letter-spacing: 1.5px;
}

.wasl-channel-3d.is-large .wasl-channel-3d__power-led {
    bottom: 5px;
    right: 6px;
    width: 6px;
    height: 6px;
}

.wasl-channel-3d.is-large .wasl-channel-3d__neck {
    width: 20px;
    height: 18px;
}

.wasl-channel-3d.is-large .wasl-channel-3d__base {
    width: 82px;
    height: 9px;
    border-radius: 5px 5px 8px 8px;
}

.wasl-channel-3d.is-large .wasl-channel-3d__shadow {
    bottom: -4px;
    width: 105px;
    height: 7px;
}

/* Card Metadata Body */
.wasl-channel-showcase-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-grow: 1;
    padding-top: 4px;
}

.wasl-channel-showcase-card__title {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: var(--wasl-text-primary, var(--mud-palette-text-primary, #18181B));
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wasl-channel-showcase-card__code-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wasl-channel-code-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wasl-primary, #6F3AFA);
    background: var(--wasl-primary-muted, rgba(111, 58, 250, 0.08));
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.wasl-channel-showcase-card__screens-row {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--wasl-text-secondary, var(--mud-palette-text-secondary, #64748B));
    font-size: 0.78rem;
    font-weight: 500;
}

/* Footer Strip */
.wasl-channel-showcase-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed var(--wasl-border, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08)));
}

.wasl-channel-showcase-card__date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--wasl-text-secondary, var(--mud-palette-text-secondary, #64748B));
    font-size: 0.75rem;
}

/* ─── 9. Channel Layout Choice Cards (.wasl-channel-layout-card) ─── */
.wasl-channel-layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    width: 100%;
}

.wasl-channel-layout-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 12px 12px 12px;
    border-radius: 12px;
    border: 1.5px solid var(--wasl-border, #e2e8f0);
    background: var(--wasl-surface, #ffffff);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    min-height: 140px;
    user-select: none;
}

.wasl-channel-layout-card:hover {
    border-color: var(--wasl-primary, #6F3AFA);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.wasl-channel-layout-card.is-selected {
    border-color: var(--wasl-primary, #6F3AFA);
    background: var(--wasl-primary-muted, rgba(111, 58, 250, 0.05));
    box-shadow: 0 0 0 1px var(--wasl-primary, #6F3AFA);
}

.wasl-channel-layout-card__check {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--wasl-primary, #6F3AFA);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 5;
}

.wasl-channel-layout-card__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    margin-bottom: 12px;
    width: 100%;
}

.wasl-channel-layout-card__title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--wasl-text-primary, #18181B);
}

.wasl-channel-layout-card__subtitle {
    font-size: 0.72rem;
    color: var(--wasl-text-secondary, #64748B);
    white-space: nowrap;
}

.wasl-channel-layout-card__preview {
    display: flex;
    gap: 4px;
    width: 100%;
    height: 52px;
    border-radius: 8px;
    background: rgba(125, 125, 125, 0.06);
    padding: 4px;
    border: 1px solid var(--wasl-border, rgba(0, 0, 0, 0.06));
    margin-top: auto;
}

.wasl-channel-layout-card__zone {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.wasl-channel-layout-card__zone--primary {
    background: var(--wasl-primary-muted, rgba(111, 58, 250, 0.15));
    color: var(--wasl-primary, #6F3AFA);
}

.wasl-channel-layout-card__zone--secondary {
    background: rgba(125, 125, 125, 0.12);
    color: var(--wasl-text-secondary, #64748B);
}

.wasl-channel-layout-card.is-selected .wasl-channel-layout-card__zone--primary {
    background: var(--wasl-primary, #6F3AFA);
    color: #ffffff;
}

.wasl-channel-layout-card.is-selected .wasl-channel-layout-card__zone--secondary {
    background: var(--wasl-primary-muted, rgba(111, 58, 250, 0.2));
    color: var(--wasl-primary, #6F3AFA);
}

/* ─── 10. Target Screens Grid (.wasl-target-screens) ─── */
.wasl-target-screens-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    width: 100%;
}

.wasl-target-screen-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 10px 10px 10px;
    border-radius: 12px;
    border: 1px solid var(--wasl-border, #e2e8f0);
    background: var(--wasl-surface, #ffffff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
}

.wasl-target-screen-item:hover {
    border-color: var(--wasl-primary, #6F3AFA);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.wasl-target-screen-item__remove {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    padding: 2px !important;
}

.wasl-target-screen-item__avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--wasl-primary-muted, rgba(111, 58, 250, 0.08));
    color: var(--wasl-primary, #6F3AFA);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wasl-target-screen-item__name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wasl-text-primary, #18181B);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ─── 11. Live Channel Form Preview Stage ─── */
.wasl-channel-form-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 44px 16px 20px 16px;
    border-radius: 16px;
    border: 1px solid var(--wasl-border, #e2e8f0);
    background: var(--wasl-surface, #ffffff);
    height: 100%;
    min-height: 310px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}

.wasl-channel-form-preview__badge {
    position: absolute;
    top: 14px;
    inset-inline-start: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--wasl-primary-muted, rgba(111, 58, 250, 0.08));
    border: 1px solid rgba(111, 58, 250, 0.2);
    color: var(--wasl-primary, #6F3AFA);
    font-size: 0.78rem;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(111, 58, 250, 0.06);
    z-index: 10;
}

.wasl-channel-form-preview__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wasl-primary, #6F3AFA);
    box-shadow: 0 0 6px var(--wasl-primary, #6F3AFA);
    animation: wasl-pulse-dot 1.5s infinite ease-in-out;
}

.wasl-channel-form-preview__badge-icon {
    font-size: 15px !important;
    color: var(--wasl-primary, #6F3AFA) !important;
}

.wasl-channel-form-preview__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
    margin: auto 0;
}

.wasl-channel-form-preview__notice {
    margin-top: 12px;
    padding: 6px 14px;
    border-radius: 8px;
    background: var(--wasl-primary-muted, rgba(111, 58, 250, 0.07));
    border: 1px dashed rgba(111, 58, 250, 0.25);
    color: var(--wasl-primary, #6F3AFA);
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wasl-channel-code-pill {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: monospace;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    color: var(--mud-palette-text-primary, #333);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.selectPermissionLevel .mud-select {
    min-width: 150px;
    max-width: 200px;
}

.wasl-emp-avatar {
    font-weight: 700;
    font-size: 0.8rem;
    border-width: 1.5px;
}

/* ==========================================================================
   Wasl Beneficiary Card
   ========================================================================== */
.wasl-beneficiary-card {
    background: var(--mud-palette-surface, #ffffff);
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.wasl-beneficiary-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(111, 58, 250, 0.09);
    border-color: rgba(111, 58, 250, 0.35);
}

.wasl-beneficiary-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.wasl-beneficiary-card__identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.wasl-beneficiary-card__avatar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 2px solid var(--mud-palette-surface, #ffffff);
}

.wasl-beneficiary-card__meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.wasl-beneficiary-card__name {
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    color: var(--mud-palette-text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.wasl-beneficiary-card:hover .wasl-beneficiary-card__name {
    color: var(--wasl-primary, #6F3AFA);
}

.wasl-beneficiary-card__type-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 12px;
    background: var(--wasl-primary-muted, rgba(111, 58, 250, 0.08));
    color: var(--wasl-primary, #6F3AFA);
    font-size: 0.72rem;
    font-weight: 600;
    max-width: fit-content;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wasl-beneficiary-card__chip {
    font-weight: 700 !important;
    font-size: 0.75rem !important;
}

.wasl-beneficiary-card__phone-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    border-radius: 10px;
    background: var(--wasl-surface-elevated, var(--mud-palette-background-grey, #f8fafc));
    border: 1px solid var(--wasl-border, var(--mud-palette-lines-default, rgba(0, 0, 0, 0.05)));
    transition: background 0.15s ease, border-color 0.15s ease;
}

.wasl-beneficiary-card__phone-box:hover {
    background: var(--wasl-surface-hover, rgba(111, 58, 250, 0.06));
    border-color: var(--wasl-primary, rgba(111, 58, 250, 0.25));
}

.wasl-beneficiary-card__phone-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mud-palette-text-secondary, #64748b);
    min-width: 0;
}

.wasl-beneficiary-card__phone-icon {
    font-size: 1rem !important;
    color: var(--wasl-primary, #6F3AFA) !important;
}

.wasl-beneficiary-card__phone-text {
    font-family: monospace;
    font-weight: 600;
    font-size: 0.84rem;
    color: var(--mud-palette-text-primary, #334155);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wasl-beneficiary-card__copy-btn {
    padding: 4px !important;
    border-radius: 6px !important;
}

.wasl-beneficiary-card__divider {
    height: 1px;
    background: var(--mud-palette-lines-default, rgba(0, 0, 0, 0.06));
    margin: 2px 0;
}

.wasl-beneficiary-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 2px;
}

.wasl-beneficiary-card__footer-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary, #64748b);
}

.wasl-beneficiary-card__footer-icon {
    font-size: 1rem !important;
    color: var(--mud-palette-text-secondary, #94a3b8) !important;
}

.wasl-beneficiary-card__action-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--wasl-primary, #6F3AFA);
    transition: gap 0.2s ease, color 0.2s ease;
}

.wasl-beneficiary-card__arrow-icon {
    font-size: 1rem !important;
    transition: transform 0.2s ease;
}

.wasl-beneficiary-card:hover .wasl-beneficiary-card__action-link {
    gap: 7px;
}

.wasl-beneficiary-card:hover .wasl-beneficiary-card__arrow-icon {
    transform: translateX(calc(-3px * var(--mud-direction, 1)));
}

/* ==========================================================================
   BENEFICIARY VIEW — MODERN CONTACT TILES & DETAILS
   ========================================================================== */
.wasl-contact-tiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    width: 100%;
}

.wasl-contact-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--mud-palette-surface, #ffffff);
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    min-width: 0;
}

.wasl-contact-tile:hover {
    border-color: rgba(111, 58, 250, 0.35);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.wasl-contact-tile__icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wasl-contact-tile__icon-box--primary {
    background: rgba(111, 58, 250, 0.08);
    color: var(--wasl-primary, #6F3AFA);
}

.wasl-contact-tile__icon-box--success {
    background: rgba(16, 185, 129, 0.08);
    color: #10B981;
}

.wasl-contact-tile__icon-box--info {
    background: rgba(2, 132, 199, 0.08);
    color: #0284c7;
}

.wasl-contact-tile__icon-box--warning {
    background: rgba(245, 158, 11, 0.08);
    color: #f59e0b;
}

.wasl-contact-tile__content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wasl-contact-tile__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary, #64748b);
    line-height: 1.2;
}

.wasl-contact-tile__value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary, #0f172a);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wasl-contact-tile__value--ltr {
    direction: ltr;
    text-align: right;
}

.wasl-contact-tile__value--muted {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-disabled, #94a3b8);
}

.wasl-contact-tile__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* Contact Links Card Redesign */
.wasl-contact-link-card {
    border-radius: 14px !important;
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0) !important;
    background: var(--mud-palette-surface, #ffffff) !important;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wasl-contact-link-card:hover {
    border-color: rgba(111, 58, 250, 0.35) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
}

.wasl-contact-link-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
    gap: 12px;
}

.wasl-contact-link-card__header:hover {
    background-color: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.015));
}

.wasl-contact-link-card__identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}

.wasl-contact-link-card__title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wasl-contact-link-card__name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wasl-contact-link-card__sub {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary, #64748b);
}

.wasl-contact-link-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wasl-contact-link-card__phone-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: var(--mud-palette-background-grey, #f1f5f9);
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    direction: ltr;
    color: var(--mud-palette-text-primary, #334155);
}

.wasl-contact-link-card__toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--wasl-primary, #6F3AFA);
    background: rgba(111, 58, 250, 0.06);
    transition: all 0.2s ease;
}

.wasl-contact-link-card__toggle-btn:hover {
    background: rgba(111, 58, 250, 0.12);
}

.wasl-contact-link-card__body {
    padding: 16px;
    background: var(--mud-palette-background-grey, #f8fafc);
    border-top: 1px solid var(--mud-palette-lines-default, #e2e8f0);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wasl-contact-link-card__sub-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wasl-contact-link-card__sub-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary, #64748b);
    display: flex;
    align-items: center;
    gap: 6px;
}

.wasl-address-box {
    padding: 12px 14px;
    background: var(--mud-palette-surface, #ffffff);
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wasl-address-box__row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-primary, #1e293b);
}

.wasl-address-box__tag {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--mud-palette-background-grey, #f1f5f9);
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
    color: var(--mud-palette-text-secondary, #475569);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
}

/* Dark mode adjustments */
body.mud-theme-dark .wasl-contact-tile {
    background: var(--mud-palette-surface);
    border-color: rgba(255, 255, 255, 0.08);
}

body.mud-theme-dark .wasl-contact-tile:hover {
    border-color: rgba(111, 58, 250, 0.4);
}

body.mud-theme-dark .wasl-contact-link-card {
    background: var(--mud-palette-surface) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body.mud-theme-dark .wasl-contact-link-card__body {
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.06);
}

body.mud-theme-dark .wasl-contact-link-card__phone-pill {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--mud-palette-text-primary);
}

body.mud-theme-dark .wasl-address-box {
    background: var(--mud-palette-surface);
    border-color: rgba(255, 255, 255, 0.08);
}

body.mud-theme-dark .wasl-address-box__tag {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--mud-palette-text-secondary);
}

/* ==========================================================================
   WASL UNIFIED BACK BUTTON (.wasl-back-btn)
   ========================================================================== */
.wasl-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    font-family: inherit;
    text-decoration: none;
}

.wasl-back-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Circle variant */
.wasl-back-btn--circle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: var(--mud-palette-surface, #ffffff);
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
    color: var(--mud-palette-text-primary, #334155);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.wasl-back-btn--circle:hover:not(:disabled) {
    background: var(--mud-palette-background-grey, #f8fafc);
    border-color: var(--wasl-primary, #6F3AFA);
    color: var(--wasl-primary, #6F3AFA);
    box-shadow: 0 3px 8px rgba(111, 58, 250, 0.12);
}

/* Pill variant */
.wasl-back-btn--pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: var(--mud-palette-surface, #ffffff);
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
    color: var(--mud-palette-text-primary, #334155);
    font-size: 0.8125rem;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.wasl-back-btn--pill:hover:not(:disabled) {
    background: rgba(111, 58, 250, 0.06);
    border-color: rgba(111, 58, 250, 0.3);
    color: var(--wasl-primary, #6F3AFA);
    gap: 8px;
}

.wasl-back-btn__arrow {
    transition: transform 0.2s ease;
}

.wasl-back-btn:hover:not(:disabled) .wasl-back-btn__arrow {
    transform: translateX(calc(2px * var(--mud-direction, 1)));
}

/* Dark mode */
body.mud-theme-dark .wasl-back-btn--circle,
body.mud-theme-dark .wasl-back-btn--pill {
    background: var(--mud-palette-surface);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--mud-palette-text-primary);
}

body.mud-theme-dark .wasl-back-btn--circle:hover:not(:disabled),
body.mud-theme-dark .wasl-back-btn--pill:hover:not(:disabled) {
    background: rgba(111, 58, 250, 0.15);
    border-color: rgba(111, 58, 250, 0.4);
    color: #c4b5fd;
}

/* ==========================================================================
   Employee Details Page
   ========================================================================== */
.employee-details-page {
    border-radius: 16px;
    overflow: hidden;
}

.employee-details-hero {
    position: relative;
    padding: 24px 20px 28px;
    margin-bottom: 4px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(var(--mud-palette-primary-rgb), 0.16) 0%, transparent 55%),
        linear-gradient(180deg, rgba(var(--mud-palette-primary-rgb), 0.05) 0%, transparent 70%);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.employee-details-profile {
    position: relative;
    width: 112px;
    height: 112px;
    flex-shrink: 0;
}

.employee-details-profile__ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(145deg, var(--mud-palette-primary), rgba(var(--mud-palette-primary-rgb), 0.4));
    box-sizing: border-box;
}

.employee-details-profile__inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--mud-palette-surface);
    border: 3px solid var(--mud-palette-surface);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.employee-details-summary-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 14px 16px;
    height: 100%;
}

.employee-details-summary-card__value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.employee-details-empty {
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 28px 16px;
    text-align: center;
}

/* ==========================================================================
   Standard Action Bar (Details / Tables)
   ========================================================================== */
.order-item-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.order-item-action-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    white-space: nowrap;
    background: var(--mud-palette-surface, #ffffff);
    border-radius: 8px;
    padding: 2px 4px;
    border: 1px solid var(--mud-palette-lines-default, #e2e8f0);
}

.order-item-action-btn {
    color: var(--mud-palette-text-secondary, #64748b) !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.order-item-action-btn:hover {
    color: var(--wasl-primary, #6F3AFA) !important;
    background-color: rgba(111, 58, 250, 0.08) !important;
}

body.mud-theme-dark .order-item-action-bar {
    background: var(--mud-palette-surface);
    border-color: rgba(255, 255, 255, 0.08);
}

body.mud-theme-dark .order-item-action-btn:hover {
    background-color: rgba(111, 58, 250, 0.18) !important;
    color: #c4b5fd !important;
}

/* ==========================================================================
   Details Card Layout (Location / Warranty / Generic Details)
   ========================================================================== */
.warranty-details-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.warranty-details-card {
    border-radius: 16px !important;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0) !important;
    background: var(--mud-palette-surface, #FFFFFF) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

.warranty-details__info-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    min-height: 380px;
}

.warranty-details__header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.warranty-details__pill {
    background: var(--mud-palette-background-grey, #F1F5F9);
    color: var(--mud-palette-text-primary, #475569);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.warranty-details__pill--purple {
    background: rgba(111, 58, 250, 0.08);
    color: var(--wasl-primary, #6F3AFA);
    border-color: rgba(111, 58, 250, 0.2);
}

.warranty-details__title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--mud-palette-text-primary, #0F172A);
    line-height: 1.35;
    word-break: break-word;
}

.warranty-details__desc-box {
    padding: 14px 18px;
    background: var(--mud-palette-background-grey, #F8FAFC);
    border: 1px solid var(--mud-palette-lines-default, #F1F5F9);
    border-radius: 12px;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary, #334155);
    font-size: 14px;
}

.warranty-details__dates-box {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 18px;
    background: var(--mud-palette-background-grey, #F8FAFC);
    border: 1px solid var(--mud-palette-lines-default, #F1F5F9);
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
}

.warranty-details__dates-row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    flex-wrap: wrap;
}

.warranty-details__date-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 100px;
}

.warranty-details__date-label {
    font-size: 11px;
    color: var(--mud-palette-text-secondary, #94A3B8);
    font-weight: 600;
}

.warranty-details__date-value {
    font-size: 13px;
    color: var(--mud-palette-text-primary, #1E293B);
    font-weight: 700;
}

.location-details__map-wrapper {
    width: 100%;
    height: 380px;
    min-height: 340px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--mud-palette-background-grey, #F1F5F9);
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
}

.warranty-details__actions-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default, #F1F5F9);
}

.warranty-details__action-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    white-space: nowrap;
    background: var(--mud-palette-surface, #fff);
    border-radius: 8px;
    padding: 2px 4px;
    border: 1px solid var(--mud-palette-lines-default, #eef1f5);
    margin-inline-start: auto;
}

.warranty-details__action-bar .order-item-action-btn {
    color: var(--mud-palette-text-secondary, #5f6368) !important;
}

.warranty-details__action-bar .order-item-action-btn:hover {
    color: var(--wasl-primary, #6F3AFA) !important;
    background-color: rgba(111, 58, 250, 0.08) !important;
}

.warranty-details__info-sheet {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 8px;
}

.warranty-details__spec-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 24px;
}

@media (max-width: 900px) {
    .warranty-details__spec-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .warranty-details__spec-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.warranty-details__spec-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding-inline-start: 14px;
    border-inline-start: 2px solid var(--mud-palette-primary-lighten, #E9D5FF);
}

.warranty-details__spec-item-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, #94A3B8);
}

.warranty-details__spec-item-value {
    font-size: 15px;
    font-weight: 800;
    color: var(--mud-palette-text-primary, #0F172A);
    word-break: break-word;
    line-height: 1.35;
}

.warranty-details__meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 20px;
    margin-top: 4px;
}

.warranty-details__meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.warranty-details__meta-label {
    font-size: 11px;
    color: var(--mud-palette-text-secondary, #94A3B8);
    font-weight: 600;
}

.warranty-details__meta-value {
    font-size: 13px;
    color: var(--mud-palette-text-primary, #1E293B);
    font-weight: 600;
    word-break: break-word;
}

.transparent-paper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   Advertisement & Promotional Offer Details Card Layout
   ========================================================================== */
.ad-details-page,
.promo-details-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.ad-details-card,
.promo-details-card {
    border-radius: 16px !important;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0) !important;
    background: var(--mud-palette-surface, #FFFFFF) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

.ad-details__info-box,
.promo-details__info-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    min-height: 380px;
}

.ad-details__header-row,
.promo-details__header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ad-details__type-pill,
.promo-details__type-pill {
    background: var(--mud-palette-background-grey, #F1F5F9);
    color: var(--mud-palette-text-primary, #475569);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
}

.promo-details__type-pill {
    background: rgba(111, 58, 250, 0.08);
    color: var(--wasl-primary, #6F3AFA);
    border-color: rgba(111, 58, 250, 0.2);
}

.ad-details__title,
.promo-details__title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--mud-palette-text-primary, #0F172A);
    line-height: 1.35;
    word-break: break-word;
}

.ad-details__subtitle,
.promo-details__subtitle {
    font-size: 14px !important;
    color: var(--mud-palette-text-secondary, #475569);
    line-height: 1.6;
}

.ad-details__dates-box,
.promo-details__dates-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--mud-palette-background-grey, #F8FAFC);
    border: 1px solid var(--mud-palette-lines-default, #F1F5F9);
    border-radius: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ad-details__date-item,
.promo-details__date-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.ad-details__date-label,
.promo-details__date-label {
    font-size: 11px;
    color: var(--mud-palette-text-secondary, #94A3B8);
    font-weight: 600;
}

.ad-details__date-value,
.promo-details__date-value {
    font-size: 13px;
    color: var(--mud-palette-text-primary, #1E293B);
    font-weight: 700;
    font-family: inherit;
}

.ad-details__actions-row,
.promo-details__actions-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default, #F1F5F9);
}

.ad-details__btn-edit,
.promo-details__btn-edit {
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 8px 20px !important;
}

.ad-details__btn-delete,
.promo-details__btn-delete {
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 8px 20px !important;
    border-color: #FECDD3 !important;
    color: #E11D48 !important;
    background: #FFF1F2 !important;
}

.ad-details__btn-delete:hover,
.promo-details__btn-delete:hover {
    background: #FFE4E6 !important;
    border-color: #FDA4AF !important;
}

.ad-details__meta-grid,
.promo-details__meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 20px;
    margin-top: 4px;
}

.ad-details__meta-item,
.promo-details__meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ad-details__meta-label,
.promo-details__meta-label {
    font-size: 11px;
    color: var(--mud-palette-text-secondary, #94A3B8);
    font-weight: 600;
}

.ad-details__meta-value,
.promo-details__meta-value {
    font-size: 13px;
    color: var(--mud-palette-text-primary, #1E293B);
    font-weight: 600;
}

.ad-details__skeleton-thumbs,
.promo-details__skeleton-thumbs {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

/* ==========================================================================
   Wasl Platform — Business Profile Modern View Page
   ========================================================================== */
.wasl-profile-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.wasl-profile-hero {
    background: var(--mud-palette-surface, #FFFFFF) !important;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
    position: relative;
    overflow: hidden;
}

.wasl-profile-hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.wasl-profile-identity {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 280px;
}

.wasl-profile-logo-wrapper {
    width: 92px;
    height: 92px;
    min-width: 92px;
    border-radius: 16px;
    border: 2px solid var(--mud-palette-lines-default, #F1F5F9);
    background: var(--mud-palette-surface, #FFFFFF);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wasl-profile-logo-container {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.wasl-profile-camera-badge {
    position: absolute;
    bottom: -4px;
    inset-inline-end: -4px;
    z-index: 2;
}

.wasl-profile-camera-btn {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    border: 2px solid var(--mud-palette-surface, #FFFFFF) !important;
    border-radius: 50% !important;
    padding: 6px !important;
}

.wasl-profile-logo-edit-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.wasl-profile-logo-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wasl-profile-edit-footer {
    background: var(--mud-palette-surface, #FFFFFF);
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    border-radius: 14px;
    padding: 14px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.wasl-profile-logo-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(111, 58, 250, 0.15);
}

.wasl-profile-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.wasl-profile-logo-fallback {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(111, 58, 250, 0.1), rgba(168, 85, 247, 0.15));
    color: var(--wasl-primary, #6F3AFA);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wasl-profile-titles {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wasl-profile-main-title {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    color: var(--mud-palette-text-primary, #0F172A) !important;
    line-height: 1.25 !important;
}

.wasl-profile-sub-title {
    font-size: 0.9rem !important;
    color: var(--mud-palette-text-secondary, #64748B) !important;
    font-weight: 500 !important;
}

.wasl-profile-badges-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.wasl-profile-chip {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 8px !important;
}

/* Action Bar style matching Beneficiary View */
.wasl-profile-actions {
    display: flex;
    align-items: center;
}

.wasl-profile-action-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    white-space: nowrap;
    background: var(--mud-palette-surface, #fff);
    border-radius: 8px;
    padding-inline: 2px;
    box-shadow: 0 0 0 1px var(--mud-palette-lines-default, #eef1f5);
}

.wasl-profile-action-bar .order-item-action-btn {
    color: var(--mud-palette-text-secondary, #5f6368) !important;
}

.wasl-profile-action-bar .order-item-action-btn:hover {
    color: var(--mud-palette-primary) !important;
    background-color: rgba(100, 81, 177, 0.08) !important;
}

.wasl-profile-card {
    background: var(--mud-palette-surface, #FFFFFF) !important;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.02) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wasl-profile-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05) !important;
}

.wasl-profile-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #F1F5F9);
}

.wasl-profile-icon-box {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wasl-profile-icon-box--blue {
    background: rgba(37, 99, 235, 0.1);
    color: #2563EB;
}

.wasl-profile-icon-box--purple {
    background: rgba(111, 58, 250, 0.1);
    color: var(--wasl-primary, #6F3AFA);
}

.wasl-profile-icon-box--emerald {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.wasl-profile-icon-box--amber {
    background: rgba(245, 158, 11, 0.1);
    color: #D97706;
}

.wasl-profile-card-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--mud-palette-text-primary, #0F172A) !important;
}

.wasl-profile-items-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.wasl-profile-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--mud-palette-background-grey, #F8FAFC);
    border: 1px solid var(--mud-palette-lines-default, #F1F5F9);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.wasl-profile-item:hover {
    background: var(--wasl-surface-hover, #F1F5F9);
    border-color: var(--mud-palette-lines-default, #E2E8F0);
}

.wasl-profile-item-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

.wasl-profile-item-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 8px;
    background: var(--mud-palette-surface, #FFFFFF);
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary, #64748B);
}

.wasl-profile-item-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.wasl-profile-item-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--mud-palette-text-secondary, #94A3B8) !important;
}

.wasl-profile-item-value {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--mud-palette-text-primary, #1E293B) !important;
    word-break: break-word;
}

.wasl-profile-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wasl-profile-social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.wasl-profile-social-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    background: var(--mud-palette-background-grey, #F8FAFC);
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.wasl-profile-social-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.wasl-profile-social-card.twitter:hover {
    border-color: #0F1419;
    background: rgba(15, 20, 25, 0.06);
}

.wasl-profile-social-card.youtube:hover {
    border-color: #FF0000;
    background: rgba(255, 0, 0, 0.06);
}

.wasl-profile-social-card.instagram:hover {
    border-color: #E1306C;
    background: rgba(225, 48, 108, 0.06);
}

.wasl-profile-social-card.facebook:hover {
    border-color: #1877F2;
    background: rgba(24, 119, 242, 0.06);
}

.wasl-profile-social-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.wasl-profile-social-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.wasl-profile-social-card.twitter .wasl-profile-social-icon {
    background: rgba(15, 20, 25, 0.08);
    color: #0F1419;
}

.wasl-profile-social-card.youtube .wasl-profile-social-icon {
    background: rgba(255, 0, 0, 0.08);
    color: #FF0000;
}

.wasl-profile-social-card.instagram .wasl-profile-social-icon {
    background: rgba(225, 48, 108, 0.08);
    color: #E1306C;
}

.wasl-profile-social-card.facebook .wasl-profile-social-icon {
    background: rgba(24, 119, 242, 0.08);
    color: #1877F2;
}

.wasl-profile-empty-text {
    color: var(--mud-palette-text-disabled, #CBD5E1) !important;
    font-style: italic;
    font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Business Profile — Dark Mode Overrides
   ═══════════════════════════════════════════════════════════════════════════ */
body.mud-theme-dark .wasl-profile-hero,
.mud-theme-dark .wasl-profile-hero {
    background: var(--wasl-surface, #161B27) !important;
    border-color: var(--wasl-border, #2A3349) !important;
    box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3) !important;
}

body.mud-theme-dark .wasl-profile-logo-wrapper,
.mud-theme-dark .wasl-profile-logo-wrapper {
    background: var(--wasl-surface-elevated, #1E2535) !important;
    border-color: var(--wasl-border, #2A3349) !important;
}

body.mud-theme-dark .wasl-profile-logo-fallback,
.mud-theme-dark .wasl-profile-logo-fallback {
    background: linear-gradient(135deg, rgba(111, 58, 250, 0.2), rgba(168, 85, 247, 0.25)) !important;
    color: var(--wasl-primary, #A78BFA) !important;
}

body.mud-theme-dark .wasl-profile-action-bar,
.mud-theme-dark .wasl-profile-action-bar {
    background: var(--wasl-surface-elevated, #1E2535) !important;
    box-shadow: 0 0 0 1px var(--wasl-border, #2A3349) !important;
}

body.mud-theme-dark .wasl-profile-action-bar .order-item-action-btn,
.mud-theme-dark .wasl-profile-action-bar .order-item-action-btn {
    color: var(--wasl-text-secondary, #94A3B8) !important;
}

body.mud-theme-dark .wasl-profile-action-bar .order-item-action-btn:hover,
.mud-theme-dark .wasl-profile-action-bar .order-item-action-btn:hover {
    color: var(--wasl-primary, #A78BFA) !important;
    background-color: var(--wasl-primary-muted, rgba(111, 58, 250, 0.15)) !important;
}

body.mud-theme-dark .wasl-profile-card,
.mud-theme-dark .wasl-profile-card {
    background: var(--wasl-surface, #161B27) !important;
    border-color: var(--wasl-border, #2A3349) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

body.mud-theme-dark .wasl-profile-card-header,
.mud-theme-dark .wasl-profile-card-header {
    border-bottom-color: var(--wasl-border, #2A3349) !important;
}

body.mud-theme-dark .wasl-profile-item,
.mud-theme-dark .wasl-profile-item {
    background: var(--wasl-surface-elevated, #1E2535) !important;
    border-color: var(--wasl-border, #2A3349) !important;
}

body.mud-theme-dark .wasl-profile-item:hover,
.mud-theme-dark .wasl-profile-item:hover {
    background: var(--wasl-surface-hover, #232B3E) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.mud-theme-dark .wasl-profile-item-icon,
.mud-theme-dark .wasl-profile-item-icon {
    background: var(--wasl-surface, #161B27) !important;
    border-color: var(--wasl-border, #2A3349) !important;
    color: var(--wasl-text-secondary, #94A3B8) !important;
}

body.mud-theme-dark .wasl-profile-social-card,
.mud-theme-dark .wasl-profile-social-card {
    background: var(--wasl-surface-elevated, #1E2535) !important;
    border-color: var(--wasl-border, #2A3349) !important;
}

body.mud-theme-dark .wasl-profile-social-card:hover,
.mud-theme-dark .wasl-profile-social-card:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

body.mud-theme-dark .wasl-profile-social-card.twitter:hover,
.mud-theme-dark .wasl-profile-social-card.twitter:hover {
    border-color: rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body.mud-theme-dark .wasl-profile-social-card.youtube:hover,
.mud-theme-dark .wasl-profile-social-card.youtube:hover {
    border-color: #EF4444 !important;
    background: rgba(239, 68, 68, 0.12) !important;
}

body.mud-theme-dark .wasl-profile-social-card.instagram:hover,
.mud-theme-dark .wasl-profile-social-card.instagram:hover {
    border-color: #EC4899 !important;
    background: rgba(236, 72, 153, 0.12) !important;
}

body.mud-theme-dark .wasl-profile-social-card.facebook:hover,
.mud-theme-dark .wasl-profile-social-card.facebook:hover {
    border-color: #3B82F6 !important;
    background: rgba(59, 130, 246, 0.12) !important;
}

body.mud-theme-dark .wasl-profile-social-card.twitter .wasl-profile-social-icon,
.mud-theme-dark .wasl-profile-social-card.twitter .wasl-profile-social-icon {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #F1F5F9 !important;
}

body.mud-theme-dark .wasl-profile-empty-text,
.mud-theme-dark .wasl-profile-empty-text {
    color: var(--wasl-text-muted, #64748B) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Beneficiary Cards & Workspace — Dark Mode Overrides
   ═══════════════════════════════════════════════════════════════════════════ */
body.mud-theme-dark .wasl-beneficiary-card,
.mud-theme-dark .wasl-beneficiary-card {
    background: var(--wasl-surface, #161B27) !important;
    border-color: var(--wasl-border, #2A3349) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

body.mud-theme-dark .wasl-beneficiary-card:hover,
.mud-theme-dark .wasl-beneficiary-card:hover {
    border-color: rgba(167, 139, 250, 0.45) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(167, 139, 250, 0.2) !important;
}

body.mud-theme-dark .wasl-beneficiary-card:hover .wasl-beneficiary-card__name,
.mud-theme-dark .wasl-beneficiary-card:hover .wasl-beneficiary-card__name {
    color: var(--wasl-primary, #A78BFA) !important;
}

body.mud-theme-dark .wasl-beneficiary-card__avatar,
.mud-theme-dark .wasl-beneficiary-card__avatar {
    border-color: var(--wasl-surface, #161B27) !important;
}

body.mud-theme-dark .wasl-beneficiary-card__type-pill,
.mud-theme-dark .wasl-beneficiary-card__type-pill {
    background: rgba(167, 139, 250, 0.16) !important;
    color: var(--wasl-primary, #A78BFA) !important;
}

body.mud-theme-dark .wasl-beneficiary-card__phone-box,
.mud-theme-dark .wasl-beneficiary-card__phone-box {
    background: var(--wasl-surface-elevated, #1E2535) !important;
    border-color: var(--wasl-border, #2A3349) !important;
}

body.mud-theme-dark .wasl-beneficiary-card__phone-box:hover,
.mud-theme-dark .wasl-beneficiary-card__phone-box:hover {
    background: var(--wasl-surface-hover, #232B3E) !important;
    border-color: rgba(167, 139, 250, 0.4) !important;
}

body.mud-theme-dark .wasl-beneficiary-card__phone-icon,
.mud-theme-dark .wasl-beneficiary-card__phone-icon {
    color: var(--wasl-primary, #A78BFA) !important;
}

body.mud-theme-dark .wasl-beneficiary-card__phone-text,
.mud-theme-dark .wasl-beneficiary-card__phone-text {
    color: var(--wasl-text-primary, #F1F5F9) !important;
}

body.mud-theme-dark .wasl-beneficiary-card__copy-btn,
.mud-theme-dark .wasl-beneficiary-card__copy-btn {
    color: var(--wasl-text-secondary, #94A3B8) !important;
}

body.mud-theme-dark .wasl-beneficiary-card__copy-btn:hover,
.mud-theme-dark .wasl-beneficiary-card__copy-btn:hover {
    color: var(--wasl-primary, #A78BFA) !important;
    background: rgba(167, 139, 250, 0.15) !important;
}

body.mud-theme-dark .wasl-beneficiary-card__divider,
.mud-theme-dark .wasl-beneficiary-card__divider {
    background: var(--wasl-border, #2A3349) !important;
}

body.mud-theme-dark .wasl-beneficiary-card__footer-hint,
.mud-theme-dark .wasl-beneficiary-card__footer-hint {
    color: var(--wasl-text-secondary, #94A3B8) !important;
}

body.mud-theme-dark .wasl-beneficiary-card__footer-icon,
.mud-theme-dark .wasl-beneficiary-card__footer-icon {
    color: var(--wasl-text-muted, #64748B) !important;
}

body.mud-theme-dark .wasl-beneficiary-card__action-link,
.mud-theme-dark .wasl-beneficiary-card__action-link {
    color: var(--wasl-primary, #A78BFA) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Beneficiary View — Contact Tiles & Links Dark Mode Overrides
   ═══════════════════════════════════════════════════════════════════════════ */
body.mud-theme-dark .wasl-contact-tile,
.mud-theme-dark .wasl-contact-tile {
    background: var(--wasl-surface, #161B27) !important;
    border-color: var(--wasl-border, #2A3349) !important;
}

body.mud-theme-dark .wasl-contact-tile:hover,
.mud-theme-dark .wasl-contact-tile:hover {
    border-color: rgba(167, 139, 250, 0.45) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

body.mud-theme-dark .wasl-contact-tile__value,
.mud-theme-dark .wasl-contact-tile__value {
    color: var(--wasl-text-primary, #F1F5F9) !important;
}

body.mud-theme-dark .wasl-contact-tile__label,
.mud-theme-dark .wasl-contact-tile__label {
    color: var(--wasl-text-secondary, #94A3B8) !important;
}

body.mud-theme-dark .wasl-contact-link-card,
.mud-theme-dark .wasl-contact-link-card {
    background: var(--wasl-surface, #161B27) !important;
    border-color: var(--wasl-border, #2A3349) !important;
}

/* ==========================================================================
   Item & Catalog Details Pages
   ========================================================================== */
.item-details-page,
.catalog-details-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.item-details-card,
.catalog-details-card {
    border-radius: 16px !important;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0) !important;
    background: var(--mud-palette-surface, #FFFFFF) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

body.mud-theme-dark .item-details-card,
body.mud-theme-dark .catalog-details-card {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: var(--mud-palette-surface) !important;
}

.item-details__info-box,
.catalog-details__info-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    min-height: 380px;
}

.item-details__header-row,
.catalog-details__header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.item-details__pill,
.catalog-details__pill {
    background: var(--mud-palette-background-grey, #F1F5F9);
    color: var(--mud-palette-text-primary, #475569);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body.mud-theme-dark .item-details__pill,
body.mud-theme-dark .catalog-details__pill {
    background: rgba(255, 255, 255, 0.06);
    color: #CBD5E1;
    border-color: rgba(255, 255, 255, 0.12);
}

.item-details__pill--purple,
.catalog-details__pill--purple {
    background: rgba(111, 58, 250, 0.08);
    color: var(--wasl-primary, #6F3AFA);
    border-color: rgba(111, 58, 250, 0.2);
}

body.mud-theme-dark .item-details__pill--purple,
body.mud-theme-dark .catalog-details__pill--purple {
    background: rgba(111, 58, 250, 0.15);
    color: #C4B5FD;
    border-color: rgba(111, 58, 250, 0.3);
}

.item-details__pill--amber {
    background: #FEF3C7;
    color: #B45309;
    border-color: #FDE68A;
}

.item-details__pill--cyan,
.catalog-details__pill--cyan {
    background: #E0F2FE;
    color: #0369A1;
    border-color: #BAE6FD;
}

body.mud-theme-dark .item-details__pill--cyan,
body.mud-theme-dark .catalog-details__pill--cyan {
    background: rgba(2, 132, 199, 0.15);
    color: #7DD3FC;
    border-color: rgba(2, 132, 199, 0.3);
}

.item-details__title,
.catalog-details__title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--mud-palette-text-primary, #0F172A);
    line-height: 1.35;
    word-break: break-word;
}

.item-details__subtitle {
    font-size: 14px !important;
    color: var(--mud-palette-text-secondary, #475569);
    line-height: 1.6;
}

.item-details__desc-box,
.catalog-details__desc-box {
    padding: 14px 18px;
    background: var(--mud-palette-background-grey, #F8FAFC);
    border: 1px solid var(--mud-palette-lines-default, #F1F5F9);
    border-radius: 12px;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary, #334155);
    font-size: 14px;
}

body.mud-theme-dark .item-details__desc-box,
body.mud-theme-dark .catalog-details__desc-box {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.item-details__actions-row,
.catalog-details__actions-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default, #F1F5F9);
}

body.mud-theme-dark .item-details__actions-row,
body.mud-theme-dark .catalog-details__actions-row {
    border-color: rgba(255, 255, 255, 0.08);
}

.item-details__meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 20px;
    margin-top: 4px;
}

.item-details__meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-details__meta-label {
    font-size: 11px;
    color: var(--mud-palette-text-secondary, #94A3B8);
    font-weight: 600;
}

.item-details__meta-value {
    font-size: 13px;
    color: var(--mud-palette-text-primary, #1E293B);
    font-weight: 600;
}

.item-details__skeleton-thumbs {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.item-details__barcode-chip {
    font-size: 12px;
    font-family: monospace;
    font-weight: 600;
    background: var(--mud-palette-background-grey, #F1F5F9);
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    padding: 3px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ==========================================================================
   Warranty Details Standardized Styles
   ========================================================================== */
.warranty-details-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

.warranty-details-card {
    border-radius: 16px !important;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0) !important;
    background: var(--mud-palette-surface, #FFFFFF) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

body.mud-theme-dark .warranty-details-card {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: var(--mud-palette-surface) !important;
}

.warranty-details__info-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
    min-height: 380px;
}

.warranty-details__header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.warranty-details__pill {
    background: var(--mud-palette-background-grey, #F1F5F9);
    color: var(--mud-palette-text-primary, #475569);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body.mud-theme-dark .warranty-details__pill {
    background: rgba(255, 255, 255, 0.06);
    color: #CBD5E1;
    border-color: rgba(255, 255, 255, 0.12);
}

.warranty-details__pill--purple {
    background: rgba(111, 58, 250, 0.08);
    color: var(--wasl-primary, #6F3AFA);
    border-color: rgba(111, 58, 250, 0.2);
}

body.mud-theme-dark .warranty-details__pill--purple {
    background: rgba(111, 58, 250, 0.15);
    color: #C4B5FD;
    border-color: rgba(111, 58, 250, 0.3);
}

.warranty-details__title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--mud-palette-text-primary, #0F172A);
    line-height: 1.35;
    word-break: break-word;
}

.warranty-details__subtitle {
    font-size: 14px !important;
    color: var(--mud-palette-text-secondary, #475569);
    line-height: 1.6;
}

.warranty-details__desc-box {
    padding: 14px 18px;
    background: var(--mud-palette-background-grey, #F8FAFC);
    border: 1px solid var(--mud-palette-lines-default, #F1F5F9);
    border-radius: 12px;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary, #334155);
    font-size: 14px;
}

body.mud-theme-dark .warranty-details__desc-box {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.warranty-details__dates-box {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 18px;
    background: var(--mud-palette-background-grey, #F8FAFC);
    border: 1px solid var(--mud-palette-lines-default, #F1F5F9);
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
}

body.mud-theme-dark .warranty-details__dates-box {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.warranty-details__dates-row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    flex-wrap: wrap;
}

.warranty-details__date-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 100px;
}

.warranty-details__date-label {
    font-size: 11px;
    color: var(--mud-palette-text-secondary, #94A3B8);
    font-weight: 600;
}

.warranty-details__date-value {
    font-size: 13px;
    color: var(--mud-palette-text-primary, #1E293B);
    font-weight: 700;
}

.warranty-details__coverage {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.warranty-details__coverage-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.warranty-details__coverage-label {
    font-size: 11px;
    color: var(--mud-palette-text-secondary, #94A3B8);
    font-weight: 600;
}

.warranty-details__coverage-value {
    font-size: 13px;
    color: var(--mud-palette-text-primary, #1E293B);
    font-weight: 700;
}

.warranty-details__coverage-value span {
    color: var(--wasl-primary, #7C3AED);
    font-weight: 800;
}

.warranty-details__progress {
    height: 8px !important;
    border-radius: 999px !important;
    overflow: hidden;
    background: var(--mud-palette-lines-default, #E2E8F0) !important;
}

.warranty-details__progress .mud-progress-linear-bars {
    border-radius: 999px !important;
}

.warranty-details__actions-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default, #F1F5F9);
}

body.mud-theme-dark .warranty-details__actions-row {
    border-color: rgba(255, 255, 255, 0.08);
}

.warranty-details__info-sheet {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 8px;
}

.warranty-details__info-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 40px;
}

@media (max-width: 900px) {
    .warranty-details__info-columns {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.warranty-details__info-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.warranty-details__info-group-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary, #64748B);
    letter-spacing: 0.02em;
    text-transform: none;
}

.warranty-details__info-group-title .mud-icon-root {
    color: var(--wasl-primary, #7C3AED);
    font-size: 18px !important;
}

.warranty-details__info-group-main {
    font-size: 18px;
    font-weight: 800;
    color: var(--mud-palette-text-primary, #0F172A);
    line-height: 1.35;
    word-break: break-word;
}

.warranty-details__info-group-sub {
    font-size: 14px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, #475569);
    word-break: break-word;
}

.warranty-details__info-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.warranty-details__info-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 10px;
    width: fit-content;
    max-width: 100%;
}

.warranty-details__info-row-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, #94A3B8);
    flex: 0 0 auto;
    white-space: nowrap;
}

.warranty-details__info-row-label::after {
    content: ":";
}

.warranty-details__info-row-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--mud-palette-text-primary, #0F172A);
    word-break: break-word;
    line-height: 1.4;
    flex: 0 1 auto;
}

.warranty-details__info-divider {
    height: 1px;
    width: 100%;
    background: var(--mud-palette-lines-default, #EEF2F7);
    border: 0;
    margin: 0;
}

.warranty-details__spec-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 24px;
}

@media (max-width: 900px) {
    .warranty-details__spec-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .warranty-details__spec-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.warranty-details__spec-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding-inline-start: 14px;
    border-inline-start: 2px solid rgba(124, 58, 237, 0.3);
}

.warranty-details__spec-item-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, #94A3B8);
}

.warranty-details__spec-item-value {
    font-size: 15px;
    font-weight: 800;
    color: var(--mud-palette-text-primary, #0F172A);
    word-break: break-word;
    line-height: 1.35;
}

.warranty-details__timeline {
    display: flex;
    align-items: flex-start;
    justify-content: stretch;
    width: 100%;
    margin-inline: 0;
    position: relative;
}

.warranty-details__timeline::before {
    content: "";
    position: absolute;
    top: 4px;
    inset-inline: 0;
    height: 2px;
    background: rgba(124, 58, 237, 0.25);
    z-index: 0;
}

@media (max-width: 700px) {
    .warranty-details__timeline {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 18px;
    }

    .warranty-details__timeline::before {
        display: none;
    }
}

.warranty-details__timeline-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    min-width: 0;
    position: relative;
    padding-top: 22px;
}

.warranty-details__timeline-step::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--wasl-primary, #7C3AED);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15);
    z-index: 1;
}

@media (max-width: 700px) {
    .warranty-details__timeline-step {
        align-items: flex-start;
        text-align: start;
        padding-top: 0;
        padding-inline-start: 28px;
    }

    .warranty-details__timeline-step::before {
        top: 4px;
        left: auto;
        inset-inline-start: 0;
        transform: none;
    }
}

.warranty-details__timeline-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, #94A3B8);
    text-align: center;
}

.warranty-details__timeline-value {
    font-size: 15px;
    font-weight: 800;
    color: var(--mud-palette-text-primary, #0F172A);
    text-align: center;
}

.warranty-details__meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 20px;
    margin-top: 4px;
}

.warranty-details__meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.warranty-details__meta-label {
    font-size: 11px;
    color: var(--mud-palette-text-secondary, #94A3B8);
    font-weight: 600;
}

.warranty-details__meta-value {
    font-size: 13px;
    color: var(--mud-palette-text-primary, #1E293B);
    font-weight: 600;
    word-break: break-word;
}

.warranty-details__ops-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    flex-wrap: wrap;
}

.warranty-details__ops-header .wasl-form-section-header {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.warranty-details__add-service-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 700 !important;
}

.warranty-details__term-chip {
    display: inline-flex;
    align-items: center;
    background: var(--mud-palette-background-grey, #F8FAFC);
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, #334155);
}

body.mud-theme-dark .warranty-details__term-chip {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: #CBD5E1;
}

.warranty-details__ops-name {
    font-weight: 700;
    color: var(--mud-palette-text-primary, #0F172A);
}

.warranty-details__ops-notes {
    font-size: 12px;
    color: var(--mud-palette-text-secondary, #94A3B8);
    margin-top: 2px;
}

.warranty-details__skeleton-thumbs {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

/* ==========================================================================
   Field Visit Details Standardized Styles
   ========================================================================== */
.field-visit-details-page {
    background: var(--mud-palette-surface, #fff);
    border-radius: 12px;
}

.field-visit-details-page .field-visit-map-frame {
    position: relative;
    width: 100%;
    height: 320px;
    min-height: 320px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-background-grey, #e8eef3);
}

.field-visit-details-page .field-visit-map-canvas {
    width: 100%;
    height: 100%;
    min-height: 320px;
    z-index: 0;
}

.field-visit-details-page .leaflet-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 320px !important;
    border-radius: 12px;
    font: inherit;
}

.fv-map-marker {
    background: transparent;
    border: 0;
}

.field-visit-details-page .field-visit-notes-box {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 14px 16px;
    min-height: 72px;
}

.field-visit-details-page .field-visit-attachments {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: hidden;
}

.field-visit-details-page .field-visit-attachments table {
    width: 100%;
    margin: 0;
}

.field-visit-details-page .field-visit-attachments th,
.field-visit-details-page .field-visit-attachments td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.field-visit-details-page .field-visit-attachments tr:last-child td {
    border-bottom: 0;
}

.field-visit-details-page .field-visit-view-disabled {
    color: var(--mud-palette-action-disabled);
    cursor: default;
    pointer-events: none;
}

.fv-attachment-card {
    border-radius: 12px !important;
    padding: 12px !important;
    transition: all 0.2s ease-in-out;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0) !important;
}

.fv-attachment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
    border-color: var(--mud-palette-primary) !important;
}

.fv-attachment-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.4);
    opacity: 0;
    transition: opacity 0.2s ease;
    backdrop-filter: blur(2px);
    pointer-events: none;
}

.fv-attachment-card:hover .fv-attachment-overlay {
    opacity: 1;
}

.fv-file-icon-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.03);
    gap: 6px;
    position: relative;
    overflow: hidden;
}

.fv-file-type-tag {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.2px;
}

/* ==========================================================================
   Service Card Details Standardized Styles
   ========================================================================== */
.scd-breadcrumb-text {
    color: #64748B !important;
    font-weight: 500;
}

.scd-back-btn {
    color: #64748B !important;
}

.scd-tabs-paper {
    border-radius: 12px;
    background-color: var(--mud-palette-surface, #FFFFFF);
}

.scd-section-title {
    color: var(--mud-palette-text-primary, #1E293B) !important;
}

.scd-info-box {
    border-radius: 12px !important;
    background-color: var(--mud-palette-background-grey, #FAFAFA) !important;
    border: 1px solid var(--mud-palette-lines-default, #F1F5F9) !important;
}

.scd-stat-box {
    border-radius: 12px !important;
    background-color: var(--mud-palette-surface, #FFFFFF) !important;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.scd-stat-box:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

.scd-stat-label {
    color: var(--mud-palette-text-secondary, #64748B) !important;
    font-weight: 500;
    font-size: 0.8rem;
}

.scd-stat-value {
    line-height: 1.3;
    margin-top: 2px;
}

.scd-stat-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.scd-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 16px;
}

.scd-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scd-info-icon {
    color: var(--mud-palette-text-secondary, #94A3B8);
}

.scd-info-label {
    color: var(--mud-palette-text-secondary, #64748B) !important;
    font-weight: 500;
}

.scd-info-value {
    color: var(--mud-palette-text-primary, #0F172A) !important;
    font-size: 0.95rem;
}

.scd-table {
    background-color: var(--mud-palette-surface, #FFFFFF);
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0) !important;
}

.scd-table th {
    background-color: var(--mud-palette-background-grey, #F8FAFC) !important;
    color: var(--mud-palette-text-primary, #475569) !important;
    font-weight: 600 !important;
}

.scd-file-subtitle {
    color: #3B82F6 !important;
    font-size: 0.75rem;
}

.scd-attachment-card {
    border-radius: 12px !important;
    padding: 12px !important;
    transition: all 0.2s ease-in-out;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0) !important;
}

.scd-attachment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06) !important;
    border-color: var(--mud-palette-primary) !important;
}

.scd-attachment-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.4);
    opacity: 0;
    transition: opacity 0.2s ease;
    backdrop-filter: blur(2px);
    pointer-events: none;
}

.scd-attachment-card:hover .scd-attachment-overlay {
    opacity: 1;
}

.scd-file-icon-box {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.scd-file-type-tag {
    font-size: 0.7rem;
    font-weight: 800;
    margin-top: 2px;
}

@media (max-width: 768px) {
    .scd-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .scd-info-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* ==========================================================================
   Item Serial Details Highlight Styles
   ========================================================================== */
.serial-highlight-box {
    background: var(--mud-palette-background-grey, #F8FAFC);
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    border-radius: 12px;
}

body.mud-theme-dark .serial-highlight-box {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.serial-highlight-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, #94A3B8);
}

.serial-highlight-value {
    font-size: 15px;
    font-weight: 800;
    color: var(--mud-palette-text-primary, #0F172A);
    letter-spacing: 0.05em;
    word-break: break-all;
}

/* ==========================================================================
   Wasl Overview Page (General Dashboard) Styles
   ========================================================================== */
.wasl-overview-page {
    padding-bottom: 24px;
}

/* Hero Welcome & KPI Header */
.wasl-overview-hero {
    background: var(--mud-palette-surface, #FFFFFF);
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    border-radius: 14px;
    padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wasl-overview-hero__top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.wasl-overview-hero__bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.wasl-overview-hero__identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wasl-overview-hero__avatar {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    background: var(--mud-palette-background-grey, #F8FAFC);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wasl-overview-hero__logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wasl-overview-hero__avatar-placeholder {
    color: #6F3AFA;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wasl-overview-hero__greeting {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wasl-overview-hero__greeting-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary, #0F172A);
    line-height: 1.3;
}

.wasl-overview-hero__badge {
    font-size: 10px;
    font-weight: 700;
    color: #6F3AFA;
    background: rgba(111, 58, 250, 0.08);
    padding: 2px 7px;
    border-radius: 6px;
}

.wasl-overview-hero__biz-name {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, #64748B);
    background: var(--mud-palette-background-grey, #F8FAFC);
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    padding: 2px 8px;
    border-radius: 6px;
}

.wasl-overview-hero__subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    color: var(--mud-palette-text-primary, #1E293B);
    font-weight: 600;
    line-height: 1.4;
}

.wasl-overview-hero__sub-icon {
    color: #6F3AFA;
    font-size: 1.15rem !important;
    filter: drop-shadow(0 1px 2px rgba(111, 58, 250, 0.25));
}

.wasl-overview-hero__end {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.wasl-overview-hero__actions {
    display: flex;
    align-items: center;
}

.wasl-overview-action-btn,
.wasl-overview-edit-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    background: var(--mud-palette-surface, #FFFFFF);
    color: var(--mud-palette-text-secondary, #64748B);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wasl-overview-action-btn:hover,
.wasl-overview-edit-btn:hover {
    color: #6F3AFA;
    border-color: #6F3AFA;
    background: rgba(111, 58, 250, 0.05);
}

.wasl-overview-action-btn.is-spinning .mud-icon-root {
    animation: wasl-spin 1s linear infinite;
}

@keyframes wasl-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Compact Stats Cards (Single Row alongside greeting) */
.wasl-overview-hero__stats {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wasl-overview-kpi-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--mud-palette-surface, #FFFFFF);
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: auto;
    flex: 0 0 auto;
}

.wasl-overview-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.wasl-overview-kpi-card__info {
    display: flex;
    flex-direction: column;
}

.wasl-overview-kpi-card__val {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--mud-palette-text-primary, #0F172A);
    line-height: 1.1;
}

.wasl-overview-kpi-card__label {
    font-size: 0.725rem;
    color: var(--mud-palette-text-secondary, #64748B);
    font-weight: 500;
    margin-top: 2px;
    white-space: nowrap;
}

.wasl-overview-kpi-card__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wasl-overview-kpi-card--purple .wasl-overview-kpi-card__icon {
    background: rgba(111, 58, 250, 0.1);
    color: #6F3AFA;
}
.wasl-overview-kpi-card--purple:hover {
    border-color: #6F3AFA;
}

.wasl-overview-kpi-card--green .wasl-overview-kpi-card__icon {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}
.wasl-overview-kpi-card--green:hover {
    border-color: #10B981;
}

.wasl-overview-kpi-card--blue .wasl-overview-kpi-card__icon {
    background: rgba(14, 165, 233, 0.1);
    color: #0EA5E9;
}
.wasl-overview-kpi-card--blue:hover {
    border-color: #0EA5E9;
}

.wasl-overview-kpi-card--amber .wasl-overview-kpi-card__icon {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}
.wasl-overview-kpi-card--amber:hover {
    border-color: #F59E0B;
}

/* Panel Common */
.wasl-overview-panel {
    background: var(--mud-palette-surface, #FFFFFF);
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.wasl-overview-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default, #E2E8F0);
}

.wasl-overview-panel__icon-badge {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wasl-overview-panel__icon-badge--purple {
    background: rgba(111, 58, 250, 0.1);
    color: #6F3AFA;
}

.wasl-overview-panel__icon-badge--blue {
    background: rgba(14, 165, 233, 0.1);
    color: #0EA5E9;
}

.wasl-overview-panel__icon-badge--indigo {
    background: rgba(99, 102, 241, 0.1);
    color: #6366F1;
}

.wasl-overview-panel__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary, #0F172A);
}

.wasl-overview-panel__subtitle {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, #94A3B8);
}

.wasl-overview-panel__chip {
    font-size: 11px;
    font-weight: 700;
    color: #0EA5E9;
    background: rgba(14, 165, 233, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
}

/* Quick Actions Grid */
.wasl-overview-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}

.wasl-action-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    background: var(--mud-palette-surface, #FFFFFF);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.wasl-action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.wasl-action-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.wasl-action-card--purple .wasl-action-card__icon {
    background: rgba(111, 58, 250, 0.08);
    color: #6F3AFA;
}
.wasl-action-card--purple:hover {
    border-color: #6F3AFA;
}

.wasl-action-card--blue .wasl-action-card__icon {
    background: rgba(14, 165, 233, 0.08);
    color: #0EA5E9;
}
.wasl-action-card--blue:hover {
    border-color: #0EA5E9;
}

.wasl-action-card--teal .wasl-action-card__icon {
    background: rgba(20, 184, 166, 0.08);
    color: #14B8A6;
}
.wasl-action-card--teal:hover {
    border-color: #14B8A6;
}

.wasl-action-card--amber .wasl-action-card__icon {
    background: rgba(245, 158, 11, 0.08);
    color: #F59E0B;
}
.wasl-action-card--amber:hover {
    border-color: #F59E0B;
}

.wasl-action-card--green .wasl-action-card__icon {
    background: rgba(16, 185, 129, 0.08);
    color: #10B981;
}
.wasl-action-card--green:hover {
    border-color: #10B981;
}

.wasl-action-card--rose .wasl-action-card__icon {
    background: rgba(244, 63, 94, 0.08);
    color: #F43F5E;
}
.wasl-action-card--rose:hover {
    border-color: #F43F5E;
}

.wasl-action-card--cyan .wasl-action-card__icon {
    background: rgba(6, 182, 212, 0.08);
    color: #06B6D4;
}
.wasl-action-card--cyan:hover {
    border-color: #06B6D4;
}

.wasl-action-card--indigo .wasl-action-card__icon {
    background: rgba(99, 102, 241, 0.08);
    color: #6366F1;
}
.wasl-action-card--indigo:hover {
    border-color: #6366F1;
}

.wasl-action-card--slate .wasl-action-card__icon {
    background: rgba(100, 116, 139, 0.08);
    color: #64748B;
}
.wasl-action-card--slate:hover {
    border-color: #64748B;
}

.wasl-action-card__info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.wasl-action-card__name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary, #0F172A);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wasl-action-card__desc {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary, #64748B);
    margin-top: 1px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wasl-action-card__arrow {
    color: var(--mud-palette-text-secondary, #94A3B8);
    opacity: 0.4;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.wasl-action-card:hover .wasl-action-card__arrow {
    opacity: 1;
    color: var(--mud-palette-primary, #6F3AFA);
    transform: translateX(-3px);
}

[dir="ltr"] .wasl-action-card:hover .wasl-action-card__arrow {
    transform: translateX(3px);
}

/* Business Details in Overview */
.wasl-overview-biz-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wasl-overview-biz-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--mud-palette-background-grey, #F8FAFC);
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
}

.wasl-overview-biz-row__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-surface, #FFFFFF);
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    color: #6F3AFA;
    flex-shrink: 0;
}

.wasl-overview-biz-row__content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wasl-overview-biz-row__label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, #94A3B8);
}

.wasl-overview-biz-row__value {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary, #0F172A);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wasl-overview-biz-row__link {
    text-decoration: none;
    transition: color 0.2s ease;
}

.wasl-overview-biz-row__link:hover {
    color: #6F3AFA;
    text-decoration: underline;
}

.wasl-overview-biz-row__copy {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary, #94A3B8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.wasl-overview-biz-row__copy:hover {
    color: #6F3AFA;
    background: rgba(111, 58, 250, 0.08);
}

/* Active Modules Grid */
.wasl-overview-modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.wasl-module-card {
    border-radius: 14px;
    padding: 16px;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    background: var(--mud-palette-surface, #FFFFFF);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wasl-module-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.wasl-module-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wasl-module-card__icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wasl-module-card--purple .wasl-module-card__icon-wrap {
    background: rgba(111, 58, 250, 0.1);
    color: #6F3AFA;
}
.wasl-module-card--blue .wasl-module-card__icon-wrap {
    background: rgba(14, 165, 233, 0.1);
    color: #0EA5E9;
}
.wasl-module-card--teal .wasl-module-card__icon-wrap {
    background: rgba(20, 184, 166, 0.1);
    color: #14B8A6;
}
.wasl-module-card--green .wasl-module-card__icon-wrap {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}
.wasl-module-card--amber .wasl-module-card__icon-wrap {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
}
.wasl-module-card--rose .wasl-module-card__icon-wrap {
    background: rgba(244, 63, 94, 0.1);
    color: #F43F5E;
}
.wasl-module-card--indigo .wasl-module-card__icon-wrap {
    background: rgba(99, 102, 241, 0.1);
    color: #6366F1;
}

.wasl-module-card__status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #10B981;
    background: rgba(16, 185, 129, 0.08);
    padding: 3px 8px;
    border-radius: 6px;
}

.wasl-module-card__status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
}

.wasl-module-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wasl-module-card__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary, #0F172A);
}

.wasl-module-card__subs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wasl-module-card__subs-count {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, #64748B);
    font-weight: 500;
}

.wasl-module-card__sub-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.wasl-module-card__sub-chip {
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, #475569);
    background: var(--mud-palette-background-grey, #F1F5F9);
    padding: 2px 7px;
    border-radius: 4px;
}

.wasl-module-card__sub-chip--more {
    background: rgba(111, 58, 250, 0.08);
    color: #6F3AFA;
}

/* Empty State */
.wasl-overview-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
    color: var(--mud-palette-text-secondary, #94A3B8);
}

.wasl-overview-empty-icon {
    margin-bottom: 8px;
    opacity: 0.5;
}

.wasl-overview-empty-text {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Skeleton Styles */
.wasl-overview-skeleton__header {
    background: var(--mud-palette-surface, #FFFFFF);
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wasl-overview-skeleton__top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.wasl-overview-skeleton__bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.wasl-overview-skeleton__stats-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wasl-overview-skeleton__stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 10px;
    background: var(--mud-palette-background-grey, #F8FAFC);
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
}

.wasl-overview-skeleton__panel {
    background: var(--mud-palette-surface, #FFFFFF);
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    border-radius: 16px;
    padding: 20px;
}

.wasl-overview-skeleton__action-card {
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    background: var(--mud-palette-background-grey, #F8FAFC);
}

.wasl-overview-skeleton__module-card {
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-default, #E2E8F0);
    background: var(--mud-palette-background-grey, #F8FAFC);
}

/* ==========================================================================
   Dark Mode Overrides for Overview Dashboard
   ========================================================================== */
body.mud-theme-dark .wasl-overview-hero,
body.mud-theme-dark .wasl-overview-panel,
body.mud-theme-dark .wasl-overview-skeleton__header,
body.mud-theme-dark .wasl-overview-skeleton__panel {
    background: var(--mud-palette-surface, #1E1E2D);
    border-color: rgba(255, 255, 255, 0.08);
}

body.mud-theme-dark .wasl-stat-card,
body.mud-theme-dark .wasl-overview-kpi-card,
body.mud-theme-dark .wasl-overview-biz-row,
body.mud-theme-dark .wasl-overview-hero__avatar,
body.mud-theme-dark .wasl-overview-skeleton__stat-card,
body.mud-theme-dark .wasl-overview-skeleton__action-card,
body.mud-theme-dark .wasl-overview-skeleton__module-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
}

body.mud-theme-dark .wasl-action-card,
body.mud-theme-dark .wasl-module-card {
    background: var(--mud-palette-surface, #1E1E2D);
    border-color: rgba(255, 255, 255, 0.08);
}

body.mud-theme-dark .wasl-overview-biz-row__icon,
body.mud-theme-dark .wasl-overview-action-btn,
body.mud-theme-dark .wasl-overview-edit-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
}

body.mud-theme-dark .wasl-module-card__sub-chip {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.75);
}

body.mud-theme-dark .wasl-overview-panel__head {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .wasl-overview-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .wasl-overview-hero__end {
        width: 100%;
        justify-content: space-between;
    }

    .wasl-overview-skeleton__header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 576px) {
    .wasl-overview-hero__stats,
    .wasl-overview-skeleton__stats-row {
        width: 100%;
    }

    .wasl-overview-kpi-card,
    .wasl-overview-skeleton__stat-card {
        flex: 1 1 calc(50% - 10px);
    }

    .wasl-overview-actions-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Business Profile Logo Uploader ── */
.wasl-business-logo-card {
    border: 1px solid var(--mud-palette-lines-default, #E4E4E7);
    border-radius: 12px;
    padding: 16px;
    background: var(--mud-palette-surface, #FFFFFF);
    transition: all 0.2s ease;
}

.wasl-business-logo-preview-box {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    border: 1.5px dashed var(--mud-palette-lines-default, #CBD5E1);
    background: var(--mud-palette-background-grey, #F8FAFC);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.wasl-business-logo-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wasl-business-logo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary, #94A3B8);
}

body.mud-theme-dark .wasl-business-logo-card,
.mud-theme-dark .wasl-business-logo-card {
    background: var(--mud-palette-surface, #1E1E2D);
    border-color: rgba(255, 255, 255, 0.08);
}

body.mud-theme-dark .wasl-business-logo-preview-box,
.mud-theme-dark .wasl-business-logo-preview-box {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.12);
}

/* ── Profile Header Camera Badge & Button ── */
.wasl-profile-logo-container {
    position: relative;
    flex-shrink: 0;
}

.wasl-profile-camera-badge {
    position: absolute;
    bottom: -4px;
    inset-inline-end: -4px;
    z-index: 2;
}

.wasl-profile-camera-btn {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18) !important;
    border: 2px solid var(--mud-palette-surface, #FFFFFF) !important;
    background: var(--wasl-primary, #6F3AFA) !important;
    color: #FFFFFF !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
}

.wasl-profile-camera-btn:hover {
    background: #5b2bd4 !important;
    transform: scale(1.08);
}

body.mud-theme-dark .wasl-profile-camera-btn,
.mud-theme-dark .wasl-profile-camera-btn {
    border-color: var(--mud-palette-surface, #1E1E2D) !important;
}

/* ── Attendance Report Details Dialog ── */
.att-details-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 959.98px) {
    .att-details-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599.98px) {
    .att-details-stat-grid {
        grid-template-columns: 1fr;
    }
}

.att-details-card {
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
}

.att-details-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.att-details-card__icon--green {
    background: rgba(22, 163, 74, 0.12);
    color: #16A34A;
}

.att-details-card__icon--red {
    background: rgba(220, 38, 38, 0.12);
    color: #DC2626;
}

.att-details-card__icon--blue {
    background: rgba(37, 99, 235, 0.12);
    color: #2563EB;
}

.att-details-card__icon--purple {
    background: rgba(124, 58, 237, 0.12);
    color: #7C3AED;
}

.att-details-card__icon--indigo {
    background: rgba(79, 70, 229, 0.12);
    color: #4F46E5;
}

.att-details-card__icon--orange {
    background: rgba(234, 88, 12, 0.12);
    color: #EA580C;
}

.att-details-card__icon--teal {
    background: rgba(13, 148, 136, 0.12);
    color: #0D9488;
}

.att-details-card__icon--rose {
    background: rgba(225, 29, 72, 0.12);
    color: #E11D48;
}

.att-details-card__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.att-details-card__label {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.att-details-card__value {
    font-size: 15px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

.att-details-table-wrap {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 40vh;
    background: var(--mud-palette-surface);
}