{"id":8598,"date":"2026-09-22T09:37:07","date_gmt":"2026-09-22T09:37:07","guid":{"rendered":"https:\/\/css.rak.ae\/?page_id=8598"},"modified":"2026-09-23T08:29:43","modified_gmt":"2026-09-23T08:29:43","slug":"syvb2026","status":"publish","type":"page","link":"https:\/\/css.rak.ae\/en\/syvb2026\/","title":{"rendered":"SYB2026"},"content":{"rendered":"


\n#raksc-syb-2026{width:100%;max-width:none;margin:0;padding:0;box-sizing:border-box;isolation:isolate;position:relative}
\n#raksc-syb-2026,#raksc-syb-2026 *{box-sizing:border-box}
\n#raksc-syb-2026 img,#raksc-syb-2026 canvas,#raksc-syb-2026 svg{max-width:100%}
\n#raksc-syb-2026 button,#raksc-syb-2026 input,#raksc-syb-2026 select{font:inherit}
\n#raksc-syb-2026 table{margin:0}
\n@media(max-width:767px){#raksc-syb-2026{overflow-x:hidden}}
\n*{box-sizing:border-box;margin:0;padding:0}
\n:root{
\n –teal:#0a5e6e;
\n –teal-2:#0d7e94;
\n –green:#5dcaa5;
\n –muted:#6b7280;
\n –bg:#eef2f4;
\n –card:#ffffff;
\n –border:#d7dee1;
\n –soft:#e0f4f6;
\n –danger-bg:#fdecec;
\n –danger:#a32d2d;
\n –radius:10px;
\n}
\n#raksc-syb-2026 {
\n font-family:”Frutiger LT Pro”,”FrutigerLTPro”,”Frutiger LT Com”,Arial,sans-serif;
\n background:var(–bg);
\n padding:24px;
\n color:#1f2937;
\n}
\n.app{
\n min-height:0;
\n max-width:1180px;
\n margin:auto;
\n border:1px solid var(–border);
\n border-radius:14px;
\n overflow:visible;
\n background:var(–card);
\n display:flex;
\n flex-direction:column;
\n box-shadow:0 18px 35px rgba(10,94,110,.12);
\n}
\nheader-inner{
\n background:linear-gradient(135deg,#0a5e6e,#087b8e);
\n color:#fff;
\n padding:14px 22px;
\n display:flex;
\n justify-content:space-between;
\n align-items:center;
\n flex-shrink:0;
\n}
\n.logo{display:flex;align-items:center;gap:12px}
\n.logo-dot{
\n width:34px;height:34px;border-radius:10px;
\n background:rgba(255,255,255,.17);
\n display:flex;align-items:center;justify-content:center;
\n}
\n.logo-title{font-size:16px;font-weight:650;letter-spacing:.2px}
\n.logo-sub{font-size:11px;opacity:.75;margin-top:2px}
\n.lang-switch{
\n display:flex;
\n background:rgba(255,255,255,.14);
\n border-radius:999px;
\n padding:3px;
\n gap:2px;
\n}
\n.lang-switch button{
\n border:0;background:transparent;color:rgba(255,255,255,.75);
\n padding:5px 13px;border-radius:999px;cursor:pointer;font-size:12px;
\n}
\n.lang-switch button.active{background:#fff;color:var(–teal);font-weight:650}
\n.body{display:flex;align-items:stretch;overflow:visible}
\naside{
\n width:190px;
\n background:#fff;
\n border-right:1px solid var(–border);
\n padding:14px 0;
\n flex-shrink:0;
\n}
\n.nav-label{
\n padding:0 18px 8px;
\n font-size:10px;
\n text-transform:uppercase;
\n letter-spacing:.8px;
\n color:var(–muted);
\n font-weight:700;
\n}
\n.nav-item{
\n width:calc(100% – 18px);
\n margin:3px 9px;
\n border:0;background:transparent;
\n padding:10px 12px;
\n border-radius:9px;
\n color:#4b5563;
\n cursor:pointer;
\n display:flex;
\n align-items:center;
\n gap:9px;
\n font-size:13px;
\n text-align:left;
\n transition:.15s ease;
\n}
\n.nav-item:hover{background:#f3f7f8}
\n.nav-item.active{background:var(–soft);color:var(–teal);font-weight:700}
\n.nav-item i{font-size:18px}
\n.nav-submenu{margin:2px 9px 10px 34px;display:flex;flex-direction:column;gap:3px}
\n.nav-subitem{border:0;background:transparent;color:#6b7280;padding:7px 10px;border-radius:8px;cursor:pointer;font-size:12px;text-align:left}
\n.nav-subitem:hover{background:#f3f7f8;color:var(–teal)}
\n.nav-subitem.active{background:var(–soft);color:var(–teal);font-weight:700}
\n[dir=”rtl”] .nav-submenu{margin:2px 34px 10px 9px}
\n[dir=”rtl”] .nav-subitem{text-align:right}
\nmain{
\n flex:1;
\n overflow:visible;
\n background:#f4f7f8;
\n padding:18px;
\n}
\n\/* top menu *\/
\n.topbar{
\n background:rgba(255,255,255,.86);
\n backdrop-filter:blur(10px);
\n border:1px solid var(–border);
\n border-radius:12px;
\n padding:12px;
\n margin-bottom:14px;
\n display:flex;
\n align-items:center;
\n justify-content:space-between;
\n gap:12px;
\n}
\n.unit-title{
\n display:flex;
\n align-items:center;
\n gap:8px;
\n color:var(–teal);
\n font-weight:750;
\n font-size:16px;
\n}
\n.tabs{display:flex;gap:7px;flex-wrap:wrap}
\n.tab-btn{
\n border:1px solid var(–border);
\n background:#fff;
\n color:#4b5563;
\n padding:6px 14px;
\n border-radius:999px;
\n cursor:pointer;
\n font-size:12px;
\n transition:.15s ease;
\n}
\n.tab-btn:hover{background:#f5fbfc}
\n.tab-btn.active{background:var(–teal);color:#fff;border-color:var(–teal)}
\n\/* KPI *\/
\n.kpi-row{
\n display:grid;
\n grid-template-columns:repeat(4,minmax(130px,1fr));
\n gap:12px;
\n margin-bottom:16px;
\n}
\n.kpi-card{
\n background:#fff;
\n border:1px solid var(–border);
\n border-radius:12px;
\n padding:13px 14px;
\n box-shadow:0 6px 14px rgba(31,41,55,.04);
\n}
\n.kpi-label{font-size:11px;color:var(–muted);margin-bottom:5px}
\n.kpi-value{font-size:21px;font-weight:750;color:#111827}
\n.kpi-badge{
\n display:inline-block;
\n margin-top:6px;
\n font-size:10px;
\n padding:3px 7px;
\n border-radius:999px;
\n background:#f3f4f6;
\n color:#6b7280;
\n}
\n.kpi-badge.up{background:var(–soft);color:var(–teal)}
\n.kpi-badge.down{background:var(–danger-bg);color:var(–danger)}
\n\/* charts *\/
\n.charts-row{
\n display:grid;
\n grid-template-columns:repeat(2,minmax(260px,1fr));
\n gap:12px;
\n margin-bottom:16px;
\n}
\n.chart-card{
\n background:#fff;
\n border:1px solid var(–border);
\n border-radius:12px;
\n padding:14px;
\n box-shadow:0 6px 14px rgba(31,41,55,.04);
\n}
\n.chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
\n.chart-title{font-size:14px;font-weight:700;color:#1f2937}
\n.chart-sub{font-size:11px;color:var(–muted);margin-top:2px}
\n.chart-icon{
\n width:30px;height:30px;border-radius:9px;
\n background:var(–soft);
\n color:var(–teal);
\n display:flex;align-items:center;justify-content:center;
\n}
\n.chart-wrap{height:220px;position:relative}
\n.chart-wrap canvas{width:100%!important;height:100%!important}
\n\/* tables list *\/
\n.tables-section{
\n background:#fff;
\n border:1px solid var(–border);
\n border-radius:12px;
\n padding:14px;
\n box-shadow:0 6px 14px rgba(31,41,55,.04);
\n}
\n.tables-title{
\n font-size:14px;
\n font-weight:750;
\n color:var(–teal);
\n margin-bottom:10px;
\n display:flex;align-items:center;gap:7px;
\n}
\n.table-toggle{
\n width:100%;
\n border:1px solid var(–border);
\n background:#fff;
\n color:#4b5563;
\n padding:8px 10px;
\n border-radius:9px;
\n cursor:pointer;
\n font-size:12px;
\n display:flex;
\n align-items:center;
\n justify-content:space-between;
\n margin-top:8px;
\n}
\n.table-toggle:hover{background:#f7fafb}
\n.export-btn{border:1px solid #b7dce2;background:#f5fbfc;color:var(–teal);padding:6px 10px;border-radius:8px;cursor:pointer;font-size:11px;font-weight:700;margin-inline-start:8px}.export-btn:hover{background:var(–soft)}
\n.table-toggle .left{display:flex;align-items:center;gap:7px}
\n.table-toggle.active{background:#f5fbfc;color:var(–teal);border-color:#b7dce2}
\n.data-table-wrap{display:none;margin-top:8px;overflow:auto}
\n.data-table-wrap.visible{display:block}
\n.data-table{width:max-content;min-width:100%;border-collapse:collapse;font-size:12px}.data-table th,.data-table td{white-space:nowrap;text-align:center}.data-table th:first-child,.data-table td:first-child{position:sticky;left:0;background:#fff;z-index:1;font-weight:650}.data-table th:first-child{background:#f7f9fa;z-index:2}
\n.data-table th{
\n text-align:left;
\n color:var(–muted);
\n font-weight:700;
\n background:#f7f9fa;
\n padding:8px;
\n border-bottom:1px solid var(–border);
\n}
\n.data-table td{
\n padding:8px;
\n border-bottom:1px solid var(–border);
\n color:#374151;
\n}
\n.data-table tr:hover td{background:#f9fcfc}
\n.empty{
\n background:#fff;
\n border:1px dashed var(–border);
\n border-radius:12px;
\n padding:45px;
\n color:var(–muted);
\n text-align:center;
\n}
\n.empty i{font-size:36px;opacity:.45;margin-bottom:8px}
\n[dir=”rtl”]{font-family:”RAK”,”RAK Regular”,”Frutiger LT Pro”,Arial,sans-serif}
\n[dir=”rtl”] aside{border-right:0;border-left:1px solid var(–border)}
\n[dir=”rtl”] .nav-item{text-align:right;direction:rtl;justify-content:flex-start;flex-direction:row-reverse}
\n[dir=”rtl”] .nav-item span{flex:1;text-align:right}
\n[dir=”rtl”] .nav-label{text-align:right;direction:rtl}
\n[dir=”rtl”] .data-table th{text-align:right}
\n[dir=”rtl”] .topbar{direction:rtl; flex-direction:row; justify-content:flex-start}
\n[dir=”rtl”] .unit-title{width:100%; direction:rtl; flex-direction:row; justify-content:flex-start; text-align:right}
\n[dir=”rtl”] .unit-title i{order:-1}
\n[dir=”rtl”] .unit-title span{text-align:right}
\n[dir=”rtl”] .nav-item{flex-direction:row; direction:rtl; justify-content:flex-start}
\n[dir=”rtl”] .nav-item i{order:-1; margin-left:0; margin-right:0}
\n[dir=”rtl”] .nav-item span{flex:1; text-align:right}
\n[dir=”rtl”] .logo-title,[dir=”rtl”] .logo-sub{text-align:right;direction:rtl}
\n[dir=”rtl”] .logo{flex-direction:row-reverse;text-align:right}
\n@media(max-width:850px){
\n#raksc-syb-2026 {padding:10px}
\n .app{min-height:0;height:auto}
\n aside{width:150px}
\n .kpi-row{grid-template-columns:repeat(2,1fr)}
\n .charts-row{grid-template-columns:1fr}
\n .topbar{align-items:flex-start;flex-direction:column}
\n}
\n\/* Stronger visual distinction between units and their themes *\/
\n.nav-item{
\n background:#eef7f8;
\n border:1px solid #d7e9ec;
\n font-weight:700;
\n}
\n.nav-item:hover{background:#e3f1f3}
\n.nav-item.active{background:var(–teal);color:#fff;border-color:var(–teal)}
\n.nav-submenu{
\n background:#f8fafb;
\n border-radius:10px;
\n padding:6px;
\n}
\n.nav-subitem{
\n background:#fff;
\n border:1px solid #edf1f2;
\n border-radius:8px;
\n}
\n.nav-subitem:hover{background:#f0f7f7}
\n.nav-subitem.active{
\n background:#dff2ee;
\n color:var(–teal);
\n border-color:#c4e4dc;
\n font-weight:700;
\n}
\n\/* Table alignment by language\/content *\/
\n.data-table th,
\n.data-table td{
\n text-align:right; \/* numbers default to the right *\/
\n}
\n[dir=”ltr”] .data-table th:first-child,
\n[dir=”ltr”] .data-table td:first-child{
\n text-align:left; \/* English descriptions *\/
\n direction:ltr;
\n}
\n[dir=”rtl”] .data-table th:first-child,
\n[dir=”rtl”] .data-table td:first-child{
\n text-align:right; \/* Arabic descriptions *\/
\n direction:rtl;
\n}
\n\/* English text remains left-aligned wherever it appears *\/
\n.data-table [dir=”ltr”],
\n.data-table .text-en{
\n text-align:left !important;
\n direction:ltr;
\n}
\n\/* Arabic text remains right-aligned *\/
\n.data-table [dir=”rtl”],
\n.data-table .text-ar{
\n text-align:right !important;
\n direction:rtl;
\n}
\n.unit-theme-name{
\n color:#64748b;
\n font-weight:650;
\n font-size:14px;
\n}
\n.unit-theme-sep{
\n color:#a8b5ba;
\n font-weight:500;
\n}
\n[dir=”rtl”] .unit-title{direction:rtl;text-align:right}
\n\/* Chrome: form controls do not inherit the page font by default. *\/
\nbutton,input,select,textarea{font-family:inherit}
\n[dir=”rtl”] body,
\n[dir=”rtl”] button,
\n[dir=”rtl”] .nav-item,
\n[dir=”rtl”] .nav-subitem,
\n[dir=”rtl”] .nav-label,
\n[dir=”rtl”] .unit-title,
\n[dir=”rtl”] .table-toggle,
\n[dir=”rtl”] .tables-title,
\n[dir=”rtl”] .data-table,
\n[dir=”rtl”] .data-table th,
\n[dir=”rtl”] .data-table td,
\n[dir=”rtl”] .export-btn,
\n[dir=”rtl”] .logo-title,
\n[dir=”rtl”] .logo-sub{font-family:”RAK”,”RAK Regular”,Arial,sans-serif !important}
\n Statistical Yearbook 2026
\n RAK Statistics Centre
\n