/* ============================================
   ORGANOGRAM — Microsoft Teams-style Org Chart
   Udham Singh Nagar District Administration
   ============================================ */

/* ---------- Custom Properties ---------- */
:root {
  --exec: #1B3A5C;  --exec-lt: #E8EEF4;
  --rev:  #2E7D32;  --rev-lt:  #E8F5E9;
  --dev:  #E65100;  --dev-lt:  #FFF3E0;
  --law:  #C62828;  --law-lt:  #FFEBEE;
  --line: #1565C0;  --line-lt: #E3F2FD;
  --leg:  #6A1B9A;  --leg-lt:  #F3E5F5;

  --bg:       #F8FAFC;
  --surface:  #FFFFFF;
  --text:     #1E293B;
  --text-2:   #64748B;
  --border:   #E2E8F0;
  --shadow:   0 1px 3px rgba(0,0,0,0.08);
  --shadow-h: 0 4px 16px rgba(0,0,0,0.12);
  --gold:     #FFC107;
  --radius:   10px;
  --radius-sm:6px;
  --font:     'Inter', system-ui, -apple-system, sans-serif;
  --font-hi:  'Noto Sans Devanagari', system-ui, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5;display:flex;flex-direction:column;height:100vh;overflow:hidden}
[hidden]{display:none!important}
[lang="hi"]{font-family:var(--font-hi)}
button{font-family:inherit;cursor:pointer}
a{color:inherit}

/* ---------- Skip Link ---------- */
.skip-link{position:absolute;top:-100%;left:16px;background:var(--exec);color:#fff;padding:8px 16px;border-radius:6px;z-index:1000}
.skip-link:focus{top:8px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:0.8rem;transition:all .15s;white-space:nowrap}
.btn:hover{background:#F1F5F9}
.btn--ghost{border-color:transparent;background:transparent}
.btn--ghost:hover{background:#F1F5F9}
.btn--primary{background:var(--exec);color:#fff;border-color:var(--exec)}
.btn--primary:hover{background:#152E4A}

/* ---------- Header ---------- */
.header{flex-shrink:0;background:var(--surface);border-bottom:1px solid var(--border);z-index:20}
.header__top{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;gap:12px;flex-wrap:wrap}
.header__brand{display:flex;align-items:center;gap:12px;min-width:0}
.header__title{font-size:1.1rem;font-weight:700;color:var(--exec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.header__title [lang="hi"]{color:var(--text-2);font-size:0.95rem;margin-left:6px}
.header__sub{font-size:0.7rem;color:var(--text-2);font-weight:500}
.header__actions{display:flex;gap:6px}

.controls{display:flex;align-items:center;gap:12px;padding:6px 20px 12px;flex-wrap:wrap}
.controls__search{position:relative;flex:1;min-width:180px;max-width:380px}
.controls__search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-2);font-size:0.85rem;pointer-events:none}
.controls__search-input{width:100%;padding:8px 32px 8px 32px;border:1px solid var(--border);border-radius:20px;background:var(--bg);font-size:0.85rem;font-family:inherit;transition:all .15s}
.controls__search-input:focus{outline:none;border-color:#2563EB;box-shadow:0 0 0 3px rgba(37,99,235,0.1);background:var(--surface)}
.controls__search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-2);padding:4px;border-radius:50%}
.controls__search-clear:hover{color:var(--text)}

.controls__wings{display:flex;gap:4px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;padding:4px 10px;border-radius:14px;font-size:0.7rem;font-weight:600;border:1px solid transparent;user-select:none;cursor:default}
.chip--revenue{background:var(--rev-lt);color:var(--rev)}
.chip--development{background:var(--dev-lt);color:var(--dev)}
.chip--law_order{background:var(--law-lt);color:var(--law)}
.chip--line{background:var(--line-lt);color:var(--line)}
.chip--legislative{background:var(--leg-lt);color:var(--leg)}

.controls__count{font-size:0.75rem;color:var(--text-2);margin-left:auto;font-weight:500;white-space:nowrap}

/* ---------- Main / Org Chart Container ---------- */
.main{flex:1;overflow:hidden;position:relative}
.org-chart-wrap{width:100%;height:100%;overflow:hidden;position:relative;padding:40px;cursor:grab;user-select:none;-webkit-user-select:none;background-color:#fff;background-image:url(../assets/bg.png);background-position:center 80%;background-size:60%;background-repeat:no-repeat;background-attachment:fixed}
.org-chart-wrap:active{cursor:grabbing}
.org-chart-wrap--dragging{cursor:grabbing!important}
.org-chart{position:relative;min-width:max-content;min-height:max-content;display:flex;flex-direction:column;align-items:center;transform-origin:0 0;transition:transform .05s ease-out}
.org-chart--no-transition{transition:none!important}
.line-svg{position:absolute;top:0;left:0;pointer-events:none;z-index:0;overflow:visible}
.chart-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--text-2);z-index:5}

/* ---------- Tree Levels ---------- */
.tree-level{display:flex;justify-content:center;align-items:flex-start;gap:28px;position:relative;z-index:1;padding:28px 0}
.tree-level--root{padding-top:0}
.tree-level--collapsed{display:none}
.tree-branch{display:flex;flex-direction:column;align-items:center;width:220px;flex-shrink:0;position:relative}
.tree-branch > .tree-level{margin-top:0;padding-top:28px}

/* ---------- Node Card ---------- */
.node-card{position:relative;z-index:2;background:#FFF8E1;border-radius:var(--radius);box-shadow:var(--shadow);width:220px;cursor:pointer;transition:box-shadow .2s,transform .2s;flex-shrink:0;overflow:hidden}
.node-card:hover{box-shadow:var(--shadow-h);transform:translateY(-1px)}
.node-card--group{background:#615C5A;box-shadow:none;border:1px solid #4A4644}
.node-card--group:hover{box-shadow:0 2px 8px rgba(0,0,0,0.2)}
.node-card--group .node-card__name{color:#FFFFFF}
.node-card--group .node-card__role{color:#D1CECC}
.node-card--group .node-card__count{color:#B8B4B2}
.node-card--group .node-card__avatar{background:rgba(255,255,255,0.12);color:#D1CECC}
.node-card--group .node-card__toggle{background:rgba(255,255,255,0.12);color:#D1CECC}
.node-card--group .node-card__toggle:hover{background:rgba(255,255,255,0.2);color:#fff}
.node-card--matched{box-shadow:0 0 0 3px var(--gold),0 4px 12px rgba(255,193,7,0.25)}
.node-card--dimmed{opacity:0.3}
.node-card--hide{display:none}

/* Accent bar */
.node-card__accent{height:4px;width:100%}
.node-card__accent--executive{background:var(--exec)}
.node-card__accent--revenue{background:var(--rev)}
.node-card__accent--development{background:var(--dev)}
.node-card__accent--law_order{background:var(--law)}
.node-card__accent--line{background:var(--line)}
.node-card__accent--legislative{background:var(--leg)}

/* Body */
.node-card__body{display:flex;align-items:center;gap:10px;padding:12px 14px}

.node-card__avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1rem;color:var(--text-2);background:#F1F5F9}
.node-card__avatar--executive{background:var(--exec-lt);color:var(--exec)}
.node-card__avatar--revenue{background:var(--rev-lt);color:var(--rev)}
.node-card__avatar--development{background:var(--dev-lt);color:var(--dev)}
.node-card__avatar--law_order{background:var(--law-lt);color:var(--law)}
.node-card__avatar--line{background:var(--line-lt);color:var(--line)}
.node-card__avatar--legislative{background:var(--leg-lt);color:var(--leg)}

.node-card__info{flex:1;min-width:0}
.node-card__name{font-size:0.82rem;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node-card__role{font-size:0.68rem;color:var(--text-2);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Footer */
.node-card__foot{display:flex;align-items:center;justify-content:space-between;padding:6px 14px;border-top:1px solid rgba(0,0,0,0.06)}
.node-card--group .node-card__foot{border-top-color:#E2E8F0}
.node-card__count{font-size:0.68rem;color:var(--text-2);font-weight:500}
.node-card__toggle{width:22px;height:22px;border:none;background:#F1F5F9;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.6rem;color:var(--text-2);transition:all .2s;flex-shrink:0}
.node-card__toggle:hover{background:#E2E8F0;color:var(--text)}
.node-card__toggle i{transition:transform .3s}
.node-card__toggle--open i{transform:rotate(90deg)}
.node-card--leaf .node-card__toggle{visibility:hidden}

/* ---------- SVG Lines ---------- */
.line-svg line,.line-svg path{stroke:#1A1A1A;stroke-width:2.25;fill:none}

/* ---------- Detail Panel ---------- */
.detail-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.3);backdrop-filter:blur(2px);z-index:50;animation:fadeIn .3s}
.detail-panel{position:fixed;top:0;right:0;width:360px;max-width:92vw;height:100vh;background:var(--surface);box-shadow:-4px 0 24px rgba(0,0,0,0.15);z-index:51;padding:28px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;animation:slideIn .35s ease}
.detail-panel__close{position:absolute;top:14px;right:14px;width:34px;height:34px;border:1px solid var(--border);border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;transition:all .15s}
.detail-panel__close:hover{background:#FEE2E2;border-color:#FCA5A5}
.detail-panel__avatar{width:72px;height:72px;border-radius:50%;background:#F1F5F9;display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--text-2);align-self:center}
.detail-panel__name{font-size:1.2rem;font-weight:700;text-align:center;line-height:1.3}
.detail-panel__role{font-size:0.85rem;color:var(--text-2);text-align:center}
.detail-panel__tag{align-self:center;padding:4px 14px;border-radius:14px;font-size:0.72rem;font-weight:600}
.detail-panel__contacts{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--bg);border-radius:var(--radius-sm)}
.detail-panel__contacts .contact-row{display:flex;align-items:center;gap:10px;font-size:0.82rem}
.detail-panel__contacts .contact-row i{width:18px;color:var(--text-2);text-align:center}
.detail-panel__path{font-size:0.75rem;color:var(--text-2);padding-top:12px;border-top:1px solid var(--border);line-height:1.5}
.detail-links{display:flex;flex-direction:column;gap:8px}
.detail-link{display:flex;align-items:center;gap:8px;font-size:0.8rem;padding:8px 12px;border-radius:6px;text-decoration:none;transition:background .15s}
.detail-link--source{background:#E8F0FE;color:#1A56DB}
.detail-link--source:hover{background:#D2E3FC}
.detail-link--google{background:#E8F5E9;color:#1B7A2E}
.detail-link--google:hover{background:#D0E8D0}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}

/* ---------- Mobile Accordion ---------- */
.mobile-tree{padding:12px;overflow-y:auto;height:100%;background:var(--surface)}
.mobile-list{list-style:none;padding-left:0}
.mobile-list .mobile-list{padding-left:20px;border-left:2px solid var(--border);margin-left:12px}
.m-node{margin:2px 0}
.m-node--hide{display:none}
.m-node--dim{opacity:0.3}
.m-node--match .m-node__row{background:#FFF8E1;border-radius:6px}
.m-node__row{display:flex;align-items:center;gap:8px;padding:8px;border-radius:6px;cursor:pointer;transition:background .15s}
.m-node__row:hover{background:#F8FAFC}
.m-node__chev{width:20px;height:20px;border:none;background:#F1F5F9;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.5rem;flex-shrink:0;transition:transform .3s}
.m-node__chev--open{transform:rotate(90deg)}
.m-node__bar{width:3px;height:24px;border-radius:3px;flex-shrink:0}
.m-node__bar--executive{background:var(--exec)}
.m-node__bar--revenue{background:var(--rev)}
.m-node__bar--development{background:var(--dev)}
.m-node__bar--law_order{background:var(--law)}
.m-node__bar--line{background:var(--line)}
.m-node__bar--legislative{background:var(--leg)}
.m-node__info{flex:1;min-width:0}
.m-node__name{font-size:0.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-node__role{font-size:0.7rem;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-node--group .m-node__name{font-style:italic;color:var(--text-2)}
.m-node--leaf .m-node__chev{visibility:hidden}

/* ---------- Empty State ---------- */
.empty-state{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--text-2)}
.empty-state i{font-size:2.5rem;margin-bottom:12px;display:block}
.empty-state h2{font-size:1.1rem;color:var(--text);margin-bottom:4px}

/* ---------- Responsive ---------- */
@media(max-width:768px){
  .header__top{padding:8px 12px}
  .header__title{font-size:0.9rem}
  .header__sub{display:none}
  .hide-mobile{display:none}
  .controls{padding:6px 12px;gap:8px}
  .controls__search{max-width:none}
  .controls__count{width:100%;text-align:left}
  .org-chart-wrap{display:none}
  .mobile-tree{display:block!important}
  .detail-panel{width:100vw;max-width:100vw}
}

@media(max-width:400px){
  .chip{font-size:0.65rem;padding:3px 7px}
}

/* ---------- Print ---------- */
@media print{
  body{background:#fff;overflow:visible}
  .header,.detail-panel,.detail-overlay,.empty-state,.mobile-tree{display:none!important}
  .org-chart-wrap{overflow:visible!important;padding:10px}
  .node-card{box-shadow:none!important;border:1px solid #CCC;break-inside:avoid}
  .node-card--hide{display:block!important;opacity:1!important}
  .node-card--dimmed{opacity:1!important}
  .tree-level--collapsed{display:flex!important}
  .line-svg line,.line-svg path{stroke:#999}
  @page{size:A3 landscape;margin:10mm}
}

/* ---------- Accessibility ---------- */
@media(prefers-contrast:high){
  .node-card{border:2px solid currentColor;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
}