SYB2026

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

${cleanTableHeader(h)}

`).join(“”);
headHtml = `

${headers}

`;
rows = tbl.rows.map(r => `

${r.month[STATE.lang]}

${visibleValueIndexes.map(i => `

${formatNumber(r.values[i])}

`).join(“”)}

`).join(“”);
} else {
headHtml = `

${_tr(“year”)}${_tr(“value”)}

`;
rows = tbl.rows.map(r => `

${r.year}${formatNumber(r.value)}

`).join(“”);
}
block.innerHTML = `

${isFull ? `${tbl.period || “”}${tbl.unit && tbl.unit[STATE.lang] ? ` · ${tbl.unit[STATE.lang]}` : “”}` : “”}

${headHtml}${rows}

${isFull && tbl.source ? `${tbl.source[STATE.lang] || “”}` : “”}
${isFull && tbl.note && tbl.note[STATE.lang] ? `${tbl.note[STATE.lang]}` : “”}
`;
section.appendChild(block);
});
tablesZone.appendChild(section);
}
function cleanTableHeader(header){
if(!header) return “”;
let h = String(header);
if(STATE.lang === “en”){
h = h.replace(/عظمىs*/g, “”).replace(/صغرىs*/g, “”).replace(/إجمالى الأمطارs*/g, “”).replace(/الأيام الممطرةs*/g, “”).replace(/سرعة متوسطةs*/g, “”).replace(/أعلى هبةs*/g, “”);
} else {
h = h.replace(/s*Max.?s*Gust/gi, “”).replace(/s*Avg.?s*Speed/gi, “”).replace(/s*Total rainfall/gi, “”).replace(/s*Rainy days/gi, “”).replace(/s*Max/gi, “”).replace(/s*Min/gi, “”);
}
return h.replace(/s+/g, ” “).trim();
}
async function exportExcel(tableId){
try{
const unit = DATA[STATE.unit];
const theme = unit.themes.find(t => t.key === STATE.theme) || unit.themes[0];
const tbl = theme.tables.find(t => t.id === tableId);
if(!tbl) return;
if(typeof ExcelJS === “undefined”){
alert(STATE.lang === “ar” ? “تعذر تحميل أداة Excel. يرجى التحقق من الاتصال بالإنترنت ثم إعادة تحميل الصفحة.” : “Excel export library could not load. Check your internet connection and reload the page.”);
return;
}
const ar = STATE.lang === “ar”;
const sourceHeaders = tbl.headers[STATE.lang] || tbl.headers.en;
const visibleValueIndexes = [];
for(let i=1;i{
const v=r.values[valueIndex];
return v!==null && v!==undefined && String(v).trim()!==””;
});
if(hasData) visibleValueIndexes.push(valueIndex);
}
const headers=[sourceHeaders[0],…visibleValueIndexes.map(i=>sourceHeaders[i+1])].map(cleanTableHeader);
const wb=new ExcelJS.Workbook();
wb.creator=”Ras Al Khaimah Statistics Center”;
const ws=wb.addWorksheet(ar ? “الجدول” : “Table”);
const lastCol=Math.max(headers.length,1);
const lastLetter=ws.getColumn(lastCol).letter;
// Brand band
ws.mergeCells(`A1:${lastLetter}1`);
let c=ws.getCell(“A1”);
c.value=ar ? “مركز رأس الخيمة للإحصاء” : “RAS AL KHAIMAH STATISTICS CENTER”;
c.fill={type:”pattern”,pattern:”solid”,fgColor:{argb:”FF056B82″}};
c.font={bold:true,size:11,color:{argb:”FFFFFFFF”}};
c.alignment={horizontal:ar?”right”:”left”,vertical:”middle”};
ws.getRow(1).height=24;
// Title — no overlapping merged cells
ws.mergeCells(`A2:${lastLetter}2`);
c=ws.getCell(“A2″);
c.value=(tbl.title && (tbl.title[STATE.lang] || tbl.title.en)) || tableId;
c.font={bold:true,size:16,color:{argb:”FF056B82″}};
c.alignment={horizontal:ar?”right”:”left”,vertical:”middle”,wrapText:true};
ws.getRow(2).height=32;
// Period / unit
ws.mergeCells(`A3:${lastLetter}3`);
c=ws.getCell(“A3”);
const period=tbl.period || “”;
const unitText=(tbl.unit && tbl.unit[STATE.lang]) ? tbl.unit[STATE.lang] : “”;
c.value=[period,unitText].filter(Boolean).join(” · “);
c.font={size:10,color:{argb:”FF6B7B80″}};
c.alignment={horizontal:ar?”right”:”left”,vertical:”middle”};
// Accent line
for(let col=1;colhr.getCell(i+1).value=v);
hr.height=28;
hr.eachCell((cell,col)=>{
cell.fill={type:”pattern”,pattern:”solid”,fgColor:{argb:col===1?”FF0099B0″:”FF056B82″}};
cell.font={bold:true,color:{argb:”FFFFFFFF”},size:10};
cell.alignment={horizontal:col===1?(ar?”right”:”left”):”center”,vertical:”middle”,wrapText:true};
cell.border={bottom:{style:”thin”,color:{argb:”FFFFFFFF”}},right:{style:”thin”,color:{argb:”FFD7E9EC”}}};
});
tbl.rows.forEach((r,ri)=>{
const label = r.month ? (r.month[STATE.lang] ?? r.month.en ?? “”) : “”;
const values=[label,…visibleValueIndexes.map(i=>r.values[i])];
const row=ws.getRow(headerRow+1+ri);
row.height=22;
values.forEach((v,ci)=>{
const cell=row.getCell(ci+1); cell.value=v;
cell.alignment={horizontal:ci===0?(ar?”right”:”left”):”right”,vertical:”middle”,wrapText:true};
cell.font={size:10,bold:ci===0,color:{argb:ci===0?”FF056B82″:”FF24363B”}};
cell.fill={type:”pattern”,pattern:”solid”,fgColor:{argb:ri%2?”FFF7FBFB”:”FFFFFFFF”}};
cell.border={bottom:{style:”thin”,color:{argb:”FFD7E9EC”}},right:{style:”thin”,color:{argb:”FFD7E9EC”}},left:{style:”thin”,color:{argb:”FFD7E9EC”}}};
if(typeof v===”number”) cell.numFmt=Number.isInteger(v)?’#,##0′:’#,##0.0′;
});
const txt=String(values[0]??””).toLowerCase();
if(txt.includes(“total”)||txt.includes(“الإجمالي”)||txt.includes(“المجموع”)){
row.eachCell(cell=>{cell.fill={type:”pattern”,pattern:”solid”,fgColor:{argb:”FFE2F2ED”}};cell.font={…cell.font,bold:true,color:{argb:”FF056B82″}};});
}
});
let infoRow=headerRow+tbl.rows.length+2;
if(tbl.source && tbl.source[STATE.lang]){
ws.mergeCells(`A${infoRow}:${lastLetter}${infoRow}`);
c=ws.getCell(`A${infoRow}`); c.value=tbl.source[STATE.lang];
c.font={italic:!ar,size:9,color:{argb:”FF6B7B80″}};
c.alignment={horizontal:ar?”right”:”left”,wrapText:true}; infoRow++;
}
if(tbl.note && tbl.note[STATE.lang]){
ws.mergeCells(`A${infoRow}:${lastLetter}${infoRow}`);
c=ws.getCell(`A${infoRow}`); c.value=tbl.note[STATE.lang];
c.font={size:9,color:{argb:”FF6B7B80″}};
c.alignment={horizontal:ar?”right”:”left”,wrapText:true};
}
ws.getColumn(1).width=42;
for(let col=2;col7?”landscape”:”portrait”,paperSize:9,fitToPage:true,fitToWidth:1,fitToHeight:0,margins:{left:.35,right:.35,top:.5,bottom:.5,header:.2,footer:.2},printTitlesRow:`1:${headerRow}`};
const buffer=await wb.xlsx.writeBuffer();
const blob=new Blob([buffer],{type:”application/vnd.openxmlformats-officedocument.spreadsheetml.sheet”});
const url=URL.createObjectURL(blob);
const a=document.createElement(“a”);
const safe=((tbl.title && tbl.title.en)||tableId).replace(/[\/:*?”|]+/g,”_”).slice(0,80);
a.href=url; a.download=`${safe}_${STATE.lang}.xlsx`;
document.body.appendChild(a); a.click(); a.remove();
setTimeout(()=>URL.revokeObjectURL(url),1000);
}catch(err){
console.error(“Excel export failed”,err);
alert(STATE.lang === “ar” ? “حدث خطأ أثناء إنشاء ملف Excel.” : “An error occurred while creating the Excel file.”);
}
}
function toggleTable(tableId, button){
const wrap = document.getElementById(tableId);
const active = wrap.classList.toggle(“visible”);
button.classList.toggle(“active”, active);
button.querySelector(“span:last-child”).textContent = active ? _tr(“hide”) : _tr(“show”);
}
function formatNumber(value){
if(typeof value === “number”){
return value.toLocaleString(undefined, {maximumFractionDigits:2});
}
return value;
}
window.addEventListener(“load”, init);

CSS

Quick Links

Contact us

Work Days:

HAPPINESS METER

مؤشر السعادة

SYB2026

CSS

Quick Links

Contact us

Work Days: