@font-face{font-family:"Tajawal";src:url("./fonts/Tajawal-Regular.ttf") format("truetype");font-weight:400;font-display:swap;}
@font-face{font-family:"Tajawal";src:url("./fonts/Tajawal-Bold.ttf") format("truetype");font-weight:700;font-display:swap;}

:root{
  --ink:#1f2937;
  --sub:#6b7280;
  --line:#e7eaee;
  --bg:#ffffff;
  --panel-bg:#fafbfc;
  --accent:#2E7D77;
  --radius:14px;
  --shadow:0 8px 24px rgba(31,41,55,.10);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;font-family:"Tajawal","Noto Kufi Arabic",system-ui,sans-serif;background:var(--bg);color:var(--ink);
  direction:rtl;overflow:hidden;
}
button{font-family:inherit;}
.hidden{display:none !important;}

.topbar{
  height:62px;display:flex;align-items:center;gap:16px;padding:0 20px;border-bottom:1px solid var(--line);
  background:#fff;position:relative;z-index:30;
}
.brand{display:flex;flex-direction:column;line-height:1.15;flex:0 0 auto;}
.brand-title{font-size:19px;font-weight:700;color:var(--ink);}
.brand-sub{font-size:11px;color:var(--sub);}
.breadcrumb-wrap{flex:1;overflow-x:auto;}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap;}
.breadcrumb button{background:none;border:none;color:var(--accent);cursor:pointer;font-size:13px;padding:4px 8px;border-radius:8px;font-family:inherit;}
.breadcrumb button:hover{background:#eef5f4;}
.breadcrumb button.current{color:var(--ink);font-weight:700;cursor:default;}
.breadcrumb button.current:hover{background:none;}
.breadcrumb .sep{color:#c7cdd6;}
.topbar-search{position:relative;width:240px;flex:0 0 240px;}
#searchInput{
  width:100%;padding:9px 14px;border-radius:999px;border:1px solid var(--line);font-size:13.5px;
  background:#f6f7f9;outline:none;color:var(--ink);
}
#searchInput:focus{border-color:var(--accent);background:#fff;}
.search-results{
  position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border-radius:10px;box-shadow:var(--shadow);
  max-height:280px;overflow-y:auto;z-index:50;border:1px solid var(--line);
}
.search-result-item{padding:9px 14px;font-size:13px;cursor:pointer;border-bottom:1px solid #f1f2f4;display:flex;justify-content:space-between;}
.search-result-item:hover{background:#f6f7f9;}
.search-result-item small{color:var(--sub);}

.layout{display:flex;height:calc(100% - 62px);}
.chart-area{flex:1;position:relative;overflow:hidden;background:
  radial-gradient(circle at 50% 50%, #fbfcfd 0%, #f3f5f7 100%);}
#sunburst{width:100%;height:100%;display:block;}
.chart-controls{position:absolute;top:16px;right:16px;z-index:10;display:flex;flex-direction:column;gap:8px;}
.icon-btn{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--accent);
  font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);
}
.icon-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);}

.hover-card{
  position:absolute;pointer-events:none;background:#fff;border-radius:12px;box-shadow:var(--shadow);
  padding:10px 14px;min-width:170px;z-index:20;border:1px solid var(--line);transition:opacity .1s;
}
.hover-card .hc-row{display:flex;align-items:center;gap:8px;}
.hover-card .hc-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex:0 0 30px;}
.hover-card .hc-avatar.mono2{font-size:9.5px;letter-spacing:-1px;}
.hover-card .hc-name{font-size:13px;font-weight:700;}
.hover-card .hc-sub{font-size:11px;color:var(--sub);margin-top:3px;}

.overview-box{
  position:absolute;bottom:16px;left:16px;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:8px;z-index:10;
}
.overview-title{font-size:10.5px;color:var(--sub);text-align:center;margin-bottom:4px;}

/* ---------- Side panel ---------- */
.side-panel{
  width:320px;flex:0 0 320px;background:var(--panel-bg);border-right:1px solid var(--line);
  overflow-y:auto;z-index:25;
}
.panel-inner{padding:18px;}
.sheet-handle{display:none;}
.panel-empty{color:var(--sub);font-size:13px;text-align:center;padding:30px 10px;}
.drawer-avatar{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;color:#fff;margin:4px auto 10px;}
.drawer-avatar.mono2{font-size:22px;letter-spacing:-1px;}
.drawer-name{text-align:center;font-size:17px;font-weight:700;}
.drawer-sub{text-align:center;font-size:12px;color:var(--sub);margin-top:4px;}
.drawer-status{text-align:center;font-size:12px;color:var(--accent);margin-top:6px;}
.drawer-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:10px;}
.tag{font-size:11px;background:#eef2f1;border-radius:999px;padding:4px 10px;color:#374151;}
.zoom-in-btn{
  display:block;width:100%;margin-top:14px;padding:10px;border-radius:10px;border:none;background:var(--accent);
  color:#fff;font-size:13px;cursor:pointer;font-family:inherit;
}
.zoom-in-btn:hover{background:#246560;}
.panel-stats{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);}
.panel-stats h4{font-size:12.5px;color:var(--sub);margin:0 0 10px;font-weight:700;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.stat-tile{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center;}
.stat-tile .num{font-size:17px;font-weight:700;color:var(--ink);}
.stat-tile .lbl{font-size:10.5px;color:var(--sub);margin-top:2px;}

.panel-scrim{display:none;}

.note-footer{position:fixed;bottom:6px;left:14px;font-size:11px;color:var(--sub);z-index:5;background:rgba(255,255,255,.85);padding:2px 8px;border-radius:8px;}

@media (max-width:768px){
  .topbar{flex-wrap:wrap;height:auto;padding:8px 12px;gap:8px;}
  .breadcrumb-wrap{order:3;width:100%;flex:0 0 100%;}
  .topbar-search{width:auto;flex:1;}
  .layout{height:calc(100% - 96px);}
  .side-panel{
    position:fixed;inset:auto 0 0 0;width:100%;flex:none;height:58vh;transform:translateY(100%);
    transition:transform .25s ease;border-radius:18px 18px 0 0;border-right:none;border-top:1px solid var(--line);
    box-shadow:0 -8px 24px rgba(0,0,0,.14);z-index:70;
  }
  .side-panel.sheet-open{transform:translateY(0);}
  .sheet-handle{display:block;width:44px;height:5px;border-radius:3px;background:#d8dbe0;border:none;margin:8px auto 2px;}
  .panel-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.22);z-index:65;}
  .panel-scrim.show{display:block;}
  .overview-box{display:none;}
}