/* ============================================================
   Organization Chart — CSS Tree Layout
   File: wwwroot/css/orgChart.css
   ============================================================ */

/* ── Wrapper ───────────────────────────────────────────────── */
.org-chart-wrapper {
    overflow: auto;
    padding: 2rem 1.5rem;
    background: #f8fafc;
    border-radius: 0.75rem;
    min-height: 500px;
    border: 1px solid #e2e8f0;
}

/* ── Root tree <ul> ────────────────────────────────────────── */
.org-tree {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Root <li> — single column, centred */
.org-tree > li {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

/* ── Child lists = horizontal row ─────────────────────────── */
.org-tree ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 0;
    padding-top: 2rem;
    margin: 0;
    position: relative;
}

/* Vertical line FROM parent node DOWN to horizontal bar */
.org-tree ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 2rem;
    background: #94a3b8;
}

/* ── Each child <li> ───────────────────────────────────────── */
.org-tree ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem 0;
    position: relative;
}

/* Horizontal connector: left half or right half or full width */
.org-tree ul li:not(:only-child)::before {
    content: '';
    position: absolute;
    top: 0;
    height: 2px;
    background: #94a3b8;
    width: 50%;
}
.org-tree ul li:first-child:not(:only-child)::before  { left: 50%;  }
.org-tree ul li:last-child:not(:only-child)::before   { right: 50%; }
.org-tree ul li:not(:first-child):not(:last-child)::before { width: 100%; left: 0; }

/* Vertical line from horizontal bar DOWN to each node */
.org-tree ul li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 2rem;
    background: #94a3b8;
}

/* ── Node Card ─────────────────────────────────────────────── */
.org-card {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    min-width: 150px;
    max-width: 190px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-decoration: none;
    position: relative;
}

.org-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13);
    transform: translateY(-3px);
}

.org-card.selected {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}

/* ── Level Badge ───────────────────────────────────────────── */
.org-level-badge {
    font-size: 0.60rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    margin-bottom: 0.2rem;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
}

/* ── Card Text ─────────────────────────────────────────────── */
.org-avatar-initials {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.3rem;
    flex-shrink: 0;
}

.org-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
    word-break: break-word;
}

.org-empno {
    font-size: 0.68rem;
    color: #475569;
    line-height: 1.3;
}

.org-position {
    font-size: 0.7rem;
    color: #64748b;
    line-height: 1.3;
    word-break: break-word;
}

.org-dept {
    font-size: 0.65rem;
    color: #94a3b8;
    margin-top: 0.15rem;
}

/* ── Level Colour Themes ───────────────────────────────────── */

/* L4 — Director — Red */
.org-card.level-l4              { border-color: #dc2626; }
.org-card.level-l4 .org-level-badge  { background: #fee2e2; color: #dc2626; }
.org-card.level-l4 .org-avatar-initials { background: #dc2626; }

/* L3 — Manager / Branch Manager / GM — Blue */
.org-card.level-l3            { border-color: #2563eb; }
.org-card.level-l3 .org-level-badge { background: #dbeafe; color: #2563eb; }
.org-card.level-l3 .org-avatar-initials { background: #2563eb; }

/* L2 — Exec / Senior Exec — Green */
.org-card.level-l2                   { border-color: #16a34a; }
.org-card.level-l2 .org-level-badge       { background: #dcfce7; color: #16a34a; }
.org-card.level-l2 .org-avatar-initials   { background: #16a34a; }

/* L1 — Non-Exec — Gray */
.org-card.level-l1                 { border-color: #94a3b8; }
.org-card.level-l1 .org-level-badge     { background: #f1f5f9; color: #475569; }
.org-card.level-l1 .org-avatar-initials { background: #64748b; }

/* ── Connector line colours per level ─────────────────────── */
.org-tree ul.children-of-l4::before,
.org-tree ul.children-of-l4 li::after,
.org-tree ul.children-of-l4 li::before  { background: #dc262660; }

.org-tree ul.children-of-l3::before,
.org-tree ul.children-of-l3 li::after,
.org-tree ul.children-of-l3 li::before { background: #2563eb60; }

.org-tree ul.children-of-l2::before,
.org-tree ul.children-of-l2 li::after,
.org-tree ul.children-of-l2 li::before        { background: #16a34a60; }

/* ── Stat chips ────────────────────────────────────────────── */
.org-stats {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.org-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.org-stat-chip.chip-l4  { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }
.org-stat-chip.chip-l3  { background: #dbeafe; color: #2563eb; border: 1px solid #93c5fd; }
.org-stat-chip.chip-l2  { background: #dcfce7; color: #16a34a; border: 1px solid #86efac; }
.org-stat-chip.chip-l1  { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.org-stat-chip.chip-hod { background: #fef3c7; color: #d97706; border: 1px solid #fcd34d; }

/* ── HOD Badge (inline on card) ────────────────────────────── */
.org-hod-badge {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fcd34d;
    white-space: nowrap;
}

/* ── Legend ────────────────────────────────────────────────── */
.org-legend {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    font-size: 0.78rem;
    color: #64748b;
    align-items: center;
}

.org-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Detail Side Panel ─────────────────────────────────────── */
.org-detail-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.09);
}

.org-detail-panel .org-avatar-lg {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* ── Empty / Loading state ─────────────────────────────────── */
.org-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: #94a3b8;
}

/* ── Preview Banner ────────────────────────────────────────── */
.org-preview-banner {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #f59e0b;
    border-radius: 0.6rem;
    padding: 0.6rem 1rem;
    font-size: 0.82rem;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}