:root {

                    --sd-bg-primary: #f8fafc;

                    --sd-card-bg: #ffffff;

                    --sd-text-primary: #0f172a;

                    --sd-text-secondary: #475569;

                    --sd-text-muted: #94a3b8;

                    --sd-border: #f1f5f9;

                    

                    /* Accent & Brand Colors */

                    --sd-primary-start: #2563eb;

                    --sd-primary-end: #0ea5e9;

                    --sd-open-start: #f59e0b;

                    --sd-open-end: #d97706;

                    --sd-progress-start: #3b82f6;

                    --sd-progress-end: #1d4ed8;

                    --sd-closed-start: #10b981;

                    --sd-closed-end: #047857;

                    --sd-avg-start: #8b5cf6;

                    --sd-avg-end: #6d28d9;

                    

                    --sd-card-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.05);

                    --sd-hover-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.06), 0 10px 10px -6px rgba(15, 23, 42, 0.06);

                }



                .sahl-dashboard-wrapper {

                    background: #f8fafc;

                    border-radius: 20px;

                    padding: 32px;

                    margin: 20px 20px 20px 0;

                    border: 1px solid #e2e8f0;

                    position: relative;

                    box-sizing: border-box;

                }

                .sahl-dashboard-wrapper.rtl {

                    margin: 20px 0 20px 20px;

                    direction: rtl;

                    text-align: right;

                    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;

                }

                .sahl-dashboard-wrapper.ltr {

                    direction: ltr;

                    text-align: left;

                    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;

                }



                /* Header Layout */

                .sd-header {

                    display: flex;

                    justify-content: space-between;

                    align-items: center;

                    margin-bottom: 32px;

                    flex-wrap: wrap;

                    gap: 20px;

                }

                .sd-title-area {

                    display: flex;

                    align-items: center;

                    gap: 16px;

                }

                .sd-title-icon {

                    background: linear-gradient(135deg, #2563eb, #8b5cf6);

                    color: #ffffff;

                    width: 48px;

                    height: 48px;

                    border-radius: 14px;

                    display: flex;

                    align-items: center;

                    justify-content: center;

                    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);

                }

                .sd-title-icon svg {

                    width: 24px;

                    height: 24px;

                }

                .sd-title-text h2 {

                    margin: 0;

                    font-size: 26px;

                    font-weight: 800;

                    color: var(--sd-text-primary);

                }

                .sd-title-text p {

                    margin: 4px 0 0 0;

                    font-size: 14px;

                    color: var(--sd-text-muted);

                }



                /* Filter Group Buttons */

                .sd-filter-group {

                    background: #e2e8f0;

                    padding: 5px;

                    border-radius: 12px;

                    display: flex;

                    gap: 4px;

                }

                .sd-filter-btn {

                    background: transparent;

                    border: none;

                    color: #475569;

                    padding: 8px 18px;

                    border-radius: 9px;

                    cursor: pointer;

                    font-size: 13px;

                    font-weight: 700;

                    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

                }

                .sd-filter-btn:hover {

                    color: #0f172a;

                }

                .sd-filter-btn.active {

                    background: #ffffff;

                    color: #0f172a;

                    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

                }



                /* KPI Grid system */

                .sd-kpi-grid {

                    display: grid;

                    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

                    gap: 20px;

                    margin-bottom: 32px;

                }

                .sd-kpi-card {

                    background: var(--sd-card-bg);

                    border-radius: 18px;

                    padding: 24px;

                    display: flex;

                    justify-content: space-between;

                    align-items: center;

                    border: 1px solid var(--sd-border);

                    box-shadow: var(--sd-card-shadow);

                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

                    position: relative;

                    overflow: hidden;

                    gap: 12px;

                }

                .sd-kpi-card::before {

                    content: '';

                    position: absolute;

                    top: 0;

                    bottom: 0;

                    width: 4px;

                }

                .sahl-dashboard-wrapper.rtl .sd-kpi-card::before {

                    right: 0;

                    left: auto;

                }

                .sahl-dashboard-wrapper.ltr .sd-kpi-card::before {

                    left: 0;

                    right: auto;

                }

                .sd-kpi-card:hover {

                    transform: translateY(-5px);

                    box-shadow: var(--sd-hover-shadow);

                }

                

                .sd-kpi-total::before { background: var(--sd-grad-total); }

                .sd-kpi-open::before { background: var(--sd-grad-open); }

                .sd-kpi-progress::before { background: var(--sd-grad-progress); }

                .sd-kpi-closed::before { background: var(--sd-grad-closed); }

                .sd-kpi-avg::before { background: var(--sd-grad-avg); }



                .sd-kpi-content {

                    display: flex;

                    flex-direction: column;

                    flex: 1;

                    min-width: 0;

                }

                .sd-kpi-label {

                    font-size: 13px;

                    color: var(--sd-text-secondary);

                    font-weight: 700;

                    text-transform: uppercase;

                    letter-spacing: 0.5px;

                    margin-bottom: 8px;

                    white-space: nowrap;

                    overflow: hidden;

                    text-overflow: ellipsis;

                }

                .sd-kpi-value {

                    font-size: 34px;

                    font-weight: 800;

                    color: var(--sd-text-primary);

                    line-height: 1;

                    white-space: nowrap;

                    overflow: hidden;

                    text-overflow: ellipsis;

                }

                .sd-kpi-icon {

                    width: 48px;

                    height: 48px;

                    border-radius: 12px;

                    display: flex;

                    align-items: center;

                    justify-content: center;

                    transition: transform 0.3s ease;

                }

                .sd-kpi-icon svg {

                    width: 24px;

                    height: 24px;

                }

                .sd-kpi-card:hover .sd-kpi-icon {

                    transform: scale(1.15) rotate(5deg);

                }



                .sd-kpi-total .sd-kpi-icon { background: rgba(15, 23, 42, 0.08); color: #0f172a; }

                .sd-kpi-open .sd-kpi-icon { background: rgba(245, 158, 11, 0.1); color: #d97706; }

                .sd-kpi-progress .sd-kpi-icon { background: rgba(59, 130, 246, 0.1); color: #1d4ed8; }

                .sd-kpi-pending .sd-kpi-icon { background: rgba(234, 179, 8, 0.1); color: #ca8a04; }

                .sd-kpi-closed .sd-kpi-icon { background: rgba(16, 185, 129, 0.1); color: #047857; }

                .sd-kpi-avg .sd-kpi-icon { background: rgba(139, 92, 246, 0.1); color: #6d28d9; }



                /* Loading state styling */

                .sd-loading-overlay {

                    position: absolute;

                    top: 0;

                    left: 0;

                    right: 0;

                    bottom: 0;

                    background: rgba(248, 250, 252, 0.7);

                    backdrop-filter: blur(4px);

                    display: flex;

                    align-items: center;

                    justify-content: center;

                    z-index: 100;

                    border-radius: 20px;

                    opacity: 0;

                    pointer-events: none;

                    transition: opacity 0.3s ease;

                }

                .sahl-dashboard-wrapper.loading .sd-loading-overlay {

                    opacity: 1;

                    pointer-events: auto;

                }

                .sd-spinner {

                    width: 50px;

                    height: 50px;

                    border: 4px solid rgba(37, 99, 235, 0.1);

                    border-radius: 50%;

                    border-top-color: #2563eb;

                    animation: sd-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;

                }

                @keyframes sd-spin {

                    to { transform: rotate(360deg); }

                }



                /* Charts grids */

                .sd-charts-grid {

                    display: grid;

                    grid-template-columns: 2fr 1fr;

                    gap: 24px;

                    margin-bottom: 24px;

                }

                @media (max-width: 1024px) {

                    .sd-charts-grid {

                        grid-template-columns: 1fr;

                    }

                }

                .sd-widget {

                    background: var(--sd-card-bg);

                    border-radius: 18px;

                    padding: 24px;

                    border: 1px solid var(--sd-border);

                    box-shadow: var(--sd-card-shadow);

                    transition: all 0.3s ease;

                    position: relative;

                }

                .sd-widget:hover {

                    box-shadow: var(--sd-hover-shadow);

                }

                .sd-widget h3 {

                    margin: 0 0 20px 0;

                    font-size: 16px;

                    font-weight: 800;

                    color: var(--sd-text-primary);

                    border-bottom: 1px solid var(--sd-border);

                    padding-bottom: 14px;

                }

                .sd-widget-content {

                    position: relative;

                    width: 100%;

                }

                .sd-canvas-container {

                    position: relative;

                    width: 100%;

                    height: 290px;

                }



                /* Priorities styling */

                .sd-priority-list {

                    display: flex;

                    flex-direction: column;

                    gap: 18px;

                }

                .sd-priority-item {

                    display: flex;

                    flex-direction: column;

                    gap: 8px;

                }

                .sd-priority-info {

                    display: flex;

                    align-items: center;

                    gap: 8px;

                    font-size: 13px;

                    font-weight: 700;

                    color: var(--sd-text-secondary);

                }

                .sd-priority-dot {

                    width: 8px;

                    height: 8px;

                    border-radius: 50%;

                }

                .sd-dot-high { background: #ef4444; }

                .sd-dot-medium { background: #f59e0b; }

                .sd-dot-low { background: #10b981; }



                .sd-priority-bar-wrapper {

                    display: flex;

                    align-items: center;

                    gap: 12px;

                    background: #f1f5f9;

                    height: 8px;

                    border-radius: 6px;

                    position: relative;

                }

                .sd-priority-bar-fill {

                    height: 100%;

                    border-radius: 6px;

                    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);

                }

                .sd-fill-high { background: linear-gradient(90deg, #f87171, #ef4444); }

                .sd-fill-medium { background: linear-gradient(90deg, #fbbf24, #f59e0b); }

                .sd-fill-low { background: linear-gradient(90deg, #34d399, #10b981); }



                .sd-priority-count {

                    position: absolute;

                    font-size: 12px;

                    font-weight: 800;

                    color: var(--sd-text-primary);

                }

                .sahl-dashboard-wrapper.rtl .sd-priority-count {

                    left: 12px;

                }

                .sahl-dashboard-wrapper.ltr .sd-priority-count {

                    right: 12px;

                }



                /* Empty state design */

                .sd-empty-state {

                    text-align: center;

                    padding: 80px 20px;

                    background: var(--sd-card-bg);

                    border-radius: 20px;

                    border: 2px dashed #cbd5e1;

                }

                .sd-empty-icon {

                    color: var(--sd-text-muted);

                    margin-bottom: 20px;

                }

                .sd-empty-state h4 {

                    margin: 0 0 8px 0;

                    font-size: 20px;

                    font-weight: 800;

                    color: var(--sd-text-primary);

                }

                .sd-empty-state p {

                    margin: 0;

                    font-size: 15px;

                    color: var(--sd-text-secondary);

                    max-width: 460px;

                    margin: 0 auto;

                }



                /* Mobile Responsiveness Fixes */

                @media (max-width: 768px) {

                    .sahl-dashboard-wrapper { padding: 20px; margin: 15px 0 !important; }

                    .sd-kpi-grid { 

                        display: grid; 

                        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 

                        gap: 15px; 

                    }

                    .sd-kpi-card { padding: 16px; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; position: relative; box-sizing: border-box; }

                    .sd-kpi-content { width: 100%; z-index: 2; position: relative; }

                    .sd-kpi-value { font-size: 26px; }

                    .sd-kpi-label { font-size: 13px; white-space: normal; overflow: visible; display: block; line-height: 1.4; }

                    .sd-kpi-icon { position: absolute; bottom: 12px; right: 12px; width: 44px; height: 44px; flex-shrink: 0; opacity: 0.15; z-index: 1; }

                    .sahl-dashboard-wrapper.rtl .sd-kpi-icon { right: auto; left: 10px; }

                    .sd-kpi-icon svg { width: 22px; height: 22px; }

                }



                @media (max-width: 480px) {

                    .sahl-dashboard-wrapper { padding: 15px; border-radius: 12px; margin: 10px 0 !important; }

                    .sd-header { flex-direction: column; align-items: flex-start; gap: 15px; }

                    

                    /* Convert KPI cards to a compact vertical list on mobile */

                    .sd-kpi-grid { grid-template-columns: 1fr; gap: 8px; }

                    .sd-kpi-card { padding: 12px 16px; flex-direction: row; }

                    .sd-kpi-content { flex-direction: row; align-items: center; justify-content: space-between; }

                    .sd-kpi-label { font-size: 14px; margin-bottom: 0; white-space: nowrap; }

                    .sd-kpi-value { font-size: 18px; }

                    .sd-kpi-icon { display: none; }

                    .sd-charts-grid { gap: 16px; }

                    .sd-widget { padding: 16px; min-width: 0; }

                    .sd-title-area { flex-direction: column; align-items: flex-start; }

                    .sd-filter-group { flex-wrap: wrap; width: 100%; }

                    .sd-filter-btn { flex: 1 1 40%; text-align: center; }

                }