/* Cairo and IBM Plex Sans Arabic, SIL Open Font License 1.1 (self-hosted copies of the Google Fonts files). */
@font-face{font-family:'Cairo';font-style:normal;font-weight:600 800;font-display:swap;src:url(/assets/fonts/cairo-600-800-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Cairo';font-style:normal;font-weight:600 800;font-display:swap;src:url(/assets/fonts/cairo-600-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-500-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-600-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Org chart tool — Careerians identity. Logical properties (inline-start/end) keep Arabic and English layouts mirrored. */
:root{--navy:#1D6199;--blue:#277FC3;--mid:#1D6199;--ink:#152636;--muted:#75869a;--line:#D3E0EC;--bg:#F3F7FB}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:14px "IBM Plex Sans Arabic",'Segoe UI',Tahoma,Arial,sans-serif}
h1,h2{font-family:"Cairo","IBM Plex Sans Arabic",'Segoe UI',Tahoma,sans-serif}
button,input,select{font:inherit}
button{cursor:pointer;border:1px solid #d3dce7;border-radius:5px;padding:10px 15px;background:#fff;color:#344e6b;font-weight:500}
button:hover{background:#edf2f7}
button:disabled{opacity:.55;cursor:wait}
button.primary{background:var(--blue);border-color:var(--blue);color:#fff}
button.primary:hover{background:var(--mid)}
input,select{border:1px solid #d5dee8;border-radius:5px;padding:10px 12px;color:#243952;background:#fff;min-width:0}
input:focus,select:focus,button:focus-visible{outline:2px solid #a8c6dc;outline-offset:1px}
small{color:#7a8b9f}
a{color:var(--mid)}

/* Side bar */
aside{position:fixed;inset-inline-start:0;top:0;bottom:0;width:205px;background:var(--navy);padding:28px 20px;color:#c3cfde}
.brand{display:flex;justify-content:center}
.brand img{width:130px;height:auto;background:#fff;border-radius:6px;padding:10px}
.all-tools{display:block;text-align:center;margin:14px 0 26px;font-size:12px;color:#b9d3e5;text-decoration:none}
.all-tools:hover{color:#fff;text-decoration:underline}
.active{background:#0874ab24;color:#fff;border:1px solid #ffffff1b;border-inline-start:3px solid #0786c6;border-radius:4px;padding:14px 12px;font-weight:600}
.aside-bottom{position:absolute;bottom:24px;inset-inline:20px;font-size:12px;line-height:1.8}
.aside-bottom strong{color:#fff;font-weight:600}
.aside-bottom p{font-size:11px;color:#94a8c0;margin:6px 0 0}
.dot{display:inline-block;width:7px;height:7px;background:#45b9d3;border-radius:50%;margin-inline-end:7px}

/* Main area */
main{margin-inline-start:205px;padding:34px 36px 22px}
header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:24px;border-bottom:1px solid #d5dee8;margin-bottom:22px}
header small{font-size:11px}
h1{font-size:30px;margin:10px 0 6px;color:var(--ink)}
header p{margin:0;color:#748499;font-size:13px;max-width:640px}
.header-actions{display:flex;gap:8px;flex-shrink:0}
.header-actions button{height:44px}
.lang{font-weight:600}

.stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:5px;overflow:hidden;background:#fff;margin-bottom:22px}
.stats>div{padding:18px 24px;border-inline-end:1px solid #e4e9ef}
.stats>div:last-child{border-inline-end:0}
.stats small{display:block;font-size:12px;color:#708198}
.stats strong{display:block;font-size:28px;margin:7px 0;color:var(--ink)}
.stats span{font-size:11px;color:#8a97a7}
.stats .vacant-stat strong{color:#7b8da3}

.tools{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px;flex-wrap:wrap}
.tabs{display:flex;gap:2px;background:#e1e7ee;border-radius:5px;padding:4px}
.tabs button{border:0;background:transparent;padding:9px 15px;font-size:12px;color:#63788e}
.tabs .selected{background:#fff;color:var(--mid);box-shadow:0 1px 4px #172f4c12}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.actions button{font-size:12px}

.panel{background:#fff;border:1px solid #d3dce7;border-radius:6px;overflow:hidden;box-shadow:0 6px 24px #20375305}
.report-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);align-items:center;gap:24px;padding:22px 28px;border-top:4px solid var(--blue);border-bottom:1px solid #d9e5ed;min-height:130px}
.client-brand{display:flex;align-items:center;gap:14px;min-width:0}
.client-brand>div{min-width:0;flex:1}
.client-brand>button{width:74px;height:74px;flex-shrink:0;padding:5px;border:1px dashed #c1d3e0;background:#f8fbfd;font-size:10px;color:#7390a4}
.client-brand img{width:100%;height:100%;object-fit:contain}
#title{width:100%;font-size:17px;font-weight:600;border:1px solid transparent;background:transparent;color:var(--ink);padding:6px 2px}
#removeClient{display:block;font-size:10px;padding:0;border:0;color:#8a9aa7;background:none}
.report-center{text-align:center;min-width:0}
#reportTitle{text-align:center;width:100%;font-size:24px;font-weight:650;border:1px solid transparent;background:transparent;color:var(--ink);padding:7px 3px}
#title:hover,#reportTitle:hover{border-bottom-color:#b9cddd}
#subtitle{font-size:11px;letter-spacing:.6px;color:#5f86a3;margin:5px 0;font-weight:600}
.report-provider{display:flex;justify-content:flex-end}
.report-provider img{width:80px;height:80px;object-fit:contain}

.chart-controls{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:12px 24px;background:#f9fbfd;flex-wrap:wrap}
.chart-controls input{width:200px}
.chart-controls button{padding:7px 10px}
#zoom{font-size:11px;min-width:38px;text-align:center}
.scope{display:flex;align-items:center;gap:8px;font-size:12px;color:#5d7389}
.selectors{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.chart-controls .selectors{margin-inline-end:auto}
.selectors label.check,dialog .selectors label.check{display:flex;align-items:center;gap:7px;margin:0;padding:7px 11px;font-size:12px;color:#7a2d2d;background:#fff6f4;border:1px solid #f1c9c2;border-radius:5px;cursor:pointer}
.selectors label.check input{width:15px;height:15px;margin:0;accent-color:#d43c3c}
.selectors label.check:has(input:disabled){opacity:.5;cursor:not-allowed}
#issues{border-top:1px solid #f1d6d0;background:#fffaf8;padding:14px 26px;max-height:240px;overflow:auto}
#issues h3{margin:0 0 8px;font-size:13px;color:#a12f2f}
#issues ul{margin:0;padding-inline-start:18px;display:grid;gap:5px;font-size:12px;color:#3d4f63}
#issues li.higher::marker{color:#d43c3c}
#issues li.equal::marker{color:#e09a00}
#issues p{margin:0;font-size:12px;color:#2f7a4f}
.scope select{max-width:340px}

#gradeLegend{display:flex;flex-wrap:wrap;gap:10px 22px;padding:12px 26px;border-block:1px solid #e4eaf1;background:#fff;font-size:11px;color:#6b7f95}
#gradeLegend b{color:var(--ink);font-weight:600}
#gradeLegend span{display:flex;align-items:center;gap:6px}
#gradeLegend i{height:10px;width:10px;border-radius:3px}

#canvas{height:600px;overflow:auto;background:#fff;direction:ltr;display:flex;align-items:flex-start;justify-content:flex-start}
#chart{display:block;flex-shrink:0;margin:auto}
#chart .person{cursor:pointer}
#chart .person:hover rect:nth-of-type(2),#chart .person:focus rect:nth-of-type(2){stroke:#637f9e;stroke-width:1.8}
#chart .person:focus{outline:none}

#list{overflow:auto;min-height:400px}
table{width:100%;border-collapse:collapse;text-align:start}
th,td{padding:13px 18px;border-bottom:1px solid #edf0f5;font-size:12px;text-align:start}
th{background:#f0f4f8;color:#59718c;font-weight:500}
td{color:#304b68}
td button{padding:5px 9px;font-size:11px;margin-inline-end:5px}
.grade-chip{display:inline-block;color:#fff;border-radius:4px;padding:4px 8px;font-size:11px;white-space:nowrap}
.vacant-chip{display:inline-block;border:1px dashed #9fb2c6;color:#6c8096;border-radius:4px;padding:3px 8px;font-size:11px}

.panel>footer{display:flex;justify-content:space-between;gap:12px;padding:14px 25px;font-size:11px;color:#74869b;border-top:1px solid var(--line);background:#fff}
.panel>footer i{display:inline-block;width:7px;height:7px;background:var(--blue);border-radius:50%;margin-inline-end:5px}
.bottom{display:flex;justify-content:space-between;align-items:center;color:#7d8da0;font-size:11px;margin-top:18px}
.bottom button{border:0;background:transparent;font-size:11px;color:#8b98ab;padding:4px}
.bottom a{direction:ltr;color:var(--mid);text-decoration:none;font-size:10px;letter-spacing:.4px}

/* Dialogs */
dialog{border:1px solid #dce4f1;border-radius:8px;padding:26px;width:460px;max-width:95vw;color:var(--ink);box-shadow:0 20px 100px #172c5040}
dialog::backdrop{background:#172c5070;backdrop-filter:blur(3px)}
dialog label{display:grid;gap:7px;margin:13px 0;font-size:12px}
dialog label.check{display:flex;align-items:center;gap:9px;background:#f5f9fc;border:1px dashed #c3d3e0;border-radius:5px;padding:10px 12px}
dialog label.check input{width:16px;height:16px;margin:0}
dialog input:disabled{background:#f1f4f7;color:#9aa8b6}
dialog form>.primary{width:100%;margin-top:8px}
.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dialog-head h2{margin:0;font-size:21px}
.dialog-head button{border:0;font-size:25px;padding:0 8px;background:none}
dialog .actions{justify-content:flex-end;margin-top:14px}
.error{color:#bd3549;font-size:12px;min-height:1em}
#exportDialog{width:1060px}
#exportDialog p{font-size:12px;color:#74849a}
#exportDialog .selectors{margin:6px 0 12px}
#exportDialog .scope{display:flex;margin:0}
#paperPreview{background:#fff;border:1px solid #dfe5ee;aspect-ratio:4200/2970;max-height:58vh;margin:0 auto;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px #1e3a5714}
#paperPreview svg{width:100%;height:100%}
.export-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.hint{margin-bottom:0}

#toast{position:fixed;bottom:25px;inset-inline-end:30px;background:var(--navy);color:#fff;padding:13px 22px;border-radius:5px;z-index:10;max-width:min(520px,90vw)}
#printPage{display:none}

/* Responsive */
@media(max-width:1100px){aside{width:175px;padding:24px 14px}main{margin-inline-start:175px;padding:25px 20px}.stats>div{padding:16px}.chart-controls input{width:150px}}
@media(max-width:1000px){.report-heading{gap:14px;padding:18px}#reportTitle{font-size:20px}.report-provider img{width:62px;height:62px}}
@media(max-width:750px){
  aside{display:none}main{margin:0;padding:18px 12px}
  header{flex-direction:column;align-items:flex-start}h1{font-size:24px}
  .stats{grid-template-columns:1fr 1fr}.stats>div{border-bottom:1px solid #e4e9ef}
  .report-heading{grid-template-columns:1fr auto}.report-center{grid-column:1/-1;grid-row:2}.client-brand>button{width:55px;height:55px}
  .chart-controls{padding:12px}.chart-controls input{flex:1;width:auto}.selectors,.chart-controls .scope{width:100%}.scope select{flex:1}
  #canvas{height:500px}.bottom{flex-wrap:wrap;gap:12px}
}

/* Print: only the generated A3 report page is printed. */
@page{size:A3 landscape;margin:8mm}
@media print{
  html,body{background:#fff!important;margin:0!important;padding:0!important}
  body>*{display:none!important}
  body>#printPage{display:flex!important;width:404mm;height:280mm;align-items:center;justify-content:center;overflow:hidden}
  #printPage svg{width:100%;height:100%;print-color-adjust:exact;-webkit-print-color-adjust:exact}
}