/* Org chart tool — ERTQAA identity. Logical properties (inline-start/end) keep Arabic and English layouts mirrored. */
:root{--navy:#052d4e;--blue:#0673ac;--mid:#065583;--ink:#243d59;--muted:#75869a;--line:#dce3eb;--bg:#eff5f8}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--navy);font:14px 'Segoe UI',Tahoma,Arial,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(--navy)}
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(--navy)}
.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(--navy);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(--navy);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}
.chart-controls .scope{margin-inline-end:auto}
.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 span{display:flex;align-items:center;gap:6px}
#gradeLegend i{height:8px;width:8px;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(--navy);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 .scope{display:flex;margin:6px 0 12px}
#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}.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}
}