:root{
  --nav:#0b1230;
  --bg:#eff6fb;
  --panel:#ffffff;
  --text:#1b2430;
  --muted:#8a94a6;
  --purple:#6b7cff;
  --teal:#65d1c6;
  --warn:#ff4d61;
  --ring:#e9f0f7;
  --shadow:0 10px 25px rgba(24,39,75,.05), 0 8px 10px rgba(24,39,75,.03);
  --radius:16px;
}

@font-face {
    font-family: 'EuclidCircularA';
    font-style: normal;
    font-weight: 400;
    src: local('EuclidCircularA'), url('fonts/EuclidCircularA_Regular.woff') format('woff');
}
@font-face {
    font-family: 'EuclidCircularA';
    font-style: italic;
    font-weight: 400;
    src: local('EuclidCircularA'), url('fonts/EuclidCircularA_Italic.woff') format('woff');
}
@font-face {
    font-family: 'EuclidCircularA';
    font-style: normal;
    font-weight: 300;
    src: local('EuclidCircularA'), url('fonts/EuclidCircularA_Light.woff') format('woff');
}
@font-face {
    font-family: 'EuclidCircularA';
    font-style: italic;
    font-weight: 300;
    src: local('EuclidCircularA'), url('fonts/EuclidCircularA_Light_Italic.woff') format('woff');
}
@font-face {
    font-family: 'EuclidCircularA';
    font-style: normal;
    font-weight: 500;
    src: local('EuclidCircularA'), url('fonts/EuclidCircularA_Medium.woff') format('woff');
}
@font-face {
    font-family: 'EuclidCircularA';
    font-style: italic;
    font-weight: 500;
    src: local('EuclidCircularA'), url('fonts/EuclidCircularA_Medium_Italic.woff') format('woff');
}
@font-face {
    font-family: 'EuclidCircularA';
    font-style: normal;
    font-weight: 600;
    src: local('EuclidCircularA'), url('fonts/EuclidCircularA_SemiBold.woff') format('woff');
}
@font-face {
    font-family: 'EuclidCircularA';
    font-style: italic;
    font-weight: 600;
    src: local('EuclidCircularA'), url('fonts/EuclidCircularA_SemiBold_Italic.woff') format('woff');
}
@font-face {
    font-family: 'EuclidCircularA';
    font-style: normal;
    font-weight: 700;
    src: local('EuclidCircularA'), url('fonts/EuclidCircularA_Bold.woff') format('woff');
}
@font-face {
    font-family: 'EuclidCircularA';
    font-style: italic;
    font-weight: 700;
    src: local('EuclidCircularA'), url('fonts/EuclidCircularA_Bold_Italic.woff') format('woff');
}


        
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:"EuclidCircularA",Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, 'Cairo', sans-serif}
a{color:inherit;text-decoration:none}
.container{max-width:1240px;margin:0 auto;padding:24px}

.exclamation-mark.yellow[_ngcontent-ng-c1585045849] {
    fill: #f1830b;
}
<style>
.exclamation-mark[_ngcontent-ng-c1585045849] {
    fill: #d71c43;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-weight: 700;
    text-align: center;
    display: flex
;
    height: 20px;
    width: 20px;
    margin-left: 8px;
}

.page-navigation {
    height: 100%;
    color: #fff;
    font-size: 15px;
    line-height: 23px;
    font-weight: 400;
    margin: 0 0 0 8%;
}

@media (min-width: 1200px) {
    .menuxa {
        height: 70%;
        list-style: none;
        display: flex;
		width: max-content;
        justify-content: space-between;
    }
}
.menu-itemx {
    padding-right: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.link {
    padding-top: 6px;
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
    color: #fff;
    text-decoration: none;
}

.nav{background:var(--nav);color:#fff;overflow:visible}
.nav{position: sticky; top: 0; z-index: 9999; background-color: #06092b; display: flex ; justify-content: space-between;}
.nav-inner{position:relative;max-width:100%;margin:0 auto;height:102px;display:flex;align-items:center;gap:8rem;/*padding:0 24px;*/padding:0 56px 0 36px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand b{letter-spacing:.3px}
/*.nav a.link{opacity:.9;white-space:nowrap}
.nav a.link:hover{opacity:1}*/
.spacer{flex:1}
.menu{background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;padding:8px 12px;border-radius:10px;cursor:pointer;display:none}
.lang{background:transparent;border:1px solid rgba(255,255,255,.25);color:#fff;padding:8px 12px;border-radius:10px;cursor:pointer}
.avatar{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.2)}

h1{font-size:22px;margin:12px 0 18px}

.grid{display:grid;gap:18px}
.grid.cols-2{grid-template-columns:1fr 1fr}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;border:1px solid var(--ring)}
.card h3{font-size:14px;margin:0 0 8px;color:#5b6473;font-weight:600}
.kpi{display:flex;align-items:center;justify-content:space-between}
.kpi .big{font-size:24px;font-weight:700}
.sub{font-size:12px;color:#8c97ab}

.deviation-value{width:100%;font-weight:600;font-size:14px;line-height:18px;display:flex;align-items:center;justify-content:center;gap:6px}
.deviation-value.positive-value{color:#59c9a5;display: contents;}
.deviation-value.negative-value{color:#d71c43;display: contents;}
.deviation-value.neutral-value{color:#888f97;display: contents;}
.deviation-value .arrow{margin-top:3px}

#acc-tabs{
	justify-content: flex-start;
}
.pane {
    margin: 3% auto;
}

/* .tabs{display:flex;gap:10px;border-bottom:1px solid #eef1f6;margin-bottom:14px;align-items:center} */
.tabs{justify-content: space-around;overflow: auto hidden; display: inline-flex ; align-items: stretch; height: 60px; border-radius: 10px; width: 100%; background-color: #f2fbff;}
/* .tab{padding:8px 12px;border-radius:10px;cursor:pointer;color:#637089;font-weight:600} */
/* .tab{overflow: auto hidden; display: inline-flex ; align-items: stretch; height: 60px; border-radius: 10px; background-color: #f2fbff;} */
.tab{
    display: flex;
    align-items: center;
    height: 100%;
    padding: 24px 0;
    margin: 0 24px;
    position: relative;
    line-height: 20px;
    font-size: 16px;
    font-weight: 500;
    color: #888f97;
    white-space: nowrap;
    transition: linear .3s;
    cursor: pointer;
}
.tab.active:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 2px solid #06092b;
}
.tab.active{
	display: flex;
    align-items: center;
    height: 100%;
    padding: 24px 0;
    margin: 0 24px;
    position: relative;
    line-height: 20px;
    font-size: 16px;
    font-weight: 500;
    color: #888f97;
    white-space: nowrap;
    transition: linear .3s;
    cursor: pointer;
}
.right{margin-inline-start:auto}

.small-stat { display: grid ; gap: 24px; text-align: center; height: 173px; flex-direction: column;}
.small-stat b{font-size:0.95rem}

.is-shadow {
    box-shadow: 0 56px 24px -48px #c4d6e8;
}

.legend{display:grid;gap:8px}
.legend .row{display:flex;align-items:center;gap:8px;justify-content:space-between}
.dot{width:8px;height:8px;border-radius:50%}

table{width:100%;border-collapse:separate;border-spacing:0 8px}
thead th{font-size:12px;color:#7b879c;font-weight:600;text-align:start;padding:0 12px}
tbody tr{background:var(--panel);box-shadow:var(--shadow)}
tbody td{padding:14px 12px;border-top:1px solid var(--ring);border-bottom:1px solid var(--ring)}
tbody td:first-child{border-inline-start:1px solid var(--ring);border-start-start-radius:12px;border-end-start-radius:12px}
tbody td:last-child{border-inline-end:1px solid var(--ring);border-start-end-radius:12px;border-end-end-radius:12px}

.filters{display:grid;grid-template-columns:repeat(6, minmax(0,1fr));gap:12px;margin-bottom:14px}
.select,.input{width:100%;border:1px solid #dfe7f1;border-radius:12px;padding:10px 12px;background:#fff;color:#2a3447}
.btn{display:inline-grid;place-items:center;padding:11px 16px;border-radius:12px;border:none;cursor:pointer;font-weight:700}
.btn.primary{background:var(--warn);color:#fff}
.btn.light{background:#f1f5fb;color:#3a4761}

.footer{color:#7c879b;font-size:12px;padding:22px 24px;display:flex;align-items:center;gap:18px}
.footer-inner{max-width:1240px;margin:0 auto;padding:0;display:flex;justify-content:space-between;align-items:center;width:100%}

@media (max-width:1024px){
  .grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr 1fr}
  .nav a.link{display:none}
  .menu{display:inline-grid}
}

/* Font direction helpers */
html[dir='rtl'] body{font-family:'Cairo', Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
html[dir='rtl'] thead th{text-align:right}
html[dir='rtl'] .right{margin-inline-start:0;margin-inline-end:auto}

/* --- Tabs pill style (pixel-closer) --- */
/* .tab{padding:10px 14px;border-radius:14px;transition:background .15s ease,color .15s ease} */
/* .tab.active{background:#eaf1ff;box-shadow:inset 0 0 0 1px rgba(107,124,255,.08)} */

/* --- User menu dropdown --- */
.user_mx{height: 100%; display: flex ; align-items: flex-end; justify-content: center; flex-direction: column; position: relative;}
.nav .avatarBtn{padding: 0 11px; height: 56px; border-radius: 8px 8px 0 0; background: transparent; border: none; cursor: pointer; display: flex ; justify-content: center; align-items: center; transition: .3s opacity cubic-bezier(.67, .89, .64, .98);}
.nav .avatarBtn svg{width:32px;height:32px;stroke:#fff;opacity:.9}
.user-menu{position:absolute;color:var(--text);top:78px;inset-inline-end:-4.3%;background:#fff;border:1px solid var(--ring);border-radius:16px;box-shadow:var(--shadow);padding:16px 0;width:340px;display:none;z-index:50}
.user-menu.open{display:block}
.user-menu .hi{font-weight:700;margin:0 20px 10px}
.user-menu .email{margin:0 20px 12px;background:#e9f1f3;border-radius:10px;padding:10px 12px;color:#4f5f6f;font-size:13px}
.user-menu .sep{height:1px;background:#eef1f6;margin:10px 20px}
.user-menu a.item{display:block;padding:12px 20px;color:#1e2a3a}
.user-menu a.item:hover{background:#f7f9fc}
@media (max-width:1024px){
  .user-menu{inset-inline-end:12px}
}

.user-menu::before{
  content:""; position:absolute; top:-10px; inset-inline-end:34px;
  width:18px; height:18px; background:#fff; /*border:1px solid var(--ring);*/
  transform:rotate(45deg); /*box-shadow:var(--shadow);*/
}

.user-menu{border-radius:20px}
.user-menu .sep{height:1px;background:#e7ecf2;margin:12px 20px}
.user-menu .email{border-radius:12px}

/* Charts on desktop */

.chart-wrap2{width: 100%; height: 200px; display: flex ; flex-direction: column; gap: 6px; position: relative; }
.chart-wrap2 canvas{width: 100%; height: 100%; padding: 0 20px; position: absolute; top: 0; left: 0; background: #000; display: flex ; justify-content: center; align-items: center; align-content: center; background: url(column-chart-placeholder.png) no-repeat center bottom; background-size: contain;}
.chart-wrap{position:relative;width:100%;height:173px}
.chart-wrap canvas{position:relative !important; width:100% !important; height:100% !important}

/* Avatar menu robustness */
.avatarBtn{z-index:1001; pointer-events:auto}
.user-menu{z-index:1200}

/* --- Homepage fixed proportions --- */
.home-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.home-rowx{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.home-row-2{display:grid;grid-template-columns:2fr 1fr;gap:18px}
.home-row-3{display:grid;grid-template-columns:1fr 2fr 1fr;gap:18px}
.home-row-4{display:grid;grid-template-columns:1fr 4fr 4fr;gap:18px}
.card.kpi{min-height:126px}
.card.chart{min-height:300px}
.card.bar{min-height:260px}

/* --- Mobile full-screen menu (instead of side) --- */
.mobile-menu{position:fixed;inset:0;background:rgba(10,16,48,.65);backdrop-filter:blur(2px);display:none;z-index:1300}
.mobile-menu .sheet{position:absolute;inset-inline:0;top:0;background:#0b1230;color:#fff;padding:18px 22px 28px;border-bottom-left-radius:20px;border-bottom-right-radius:20px;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.mobile-menu .links{display:grid;gap:14px;margin-top:10px}
.mobile-menu .links a{color:#fff;opacity:.95;font-weight:600}
.mobile-menu.open{display:block}

/* --- Responsive switches --- */
@media (max-width:1024px){
  .home-row,.home-rowx,.home-row-2,.home-row-3,.home-row-4{grid-template-columns:1fr}
  .card.chart,.card.bar{min-height:260px}
  .home-row-4{margin-top: 16px;display: block;}
  .is-shadow_m { margin: 6.3rem 0 2rem 0;}
  .item-mobile,.page-navigation { display:none;}
}