/* ============================================================
   ESOP Allocation Calculator — Results Dashboard design system
   Shared by the inline results screen (calculator.js renders this
   markup into #esopStage) and the standalone shareable report page
   (resources/views/frontend/esop-calculator/report.blade.php).
   Namespaced under .esop-dashboard so it never collides with the
   wizard's own narrow-column styles in app.blade.php.
   ============================================================ */

.esop-dashboard {
    --navy: #0f2a52;
    --navy-deep: #0a1c3a;
    --blue: #4a73c4;
    --blue-light: #7aa2e8;
    --gold: #d9a441;
    --money: #059669;
    --money-deep: #047857;
    --ink: #0f172a;
    --muted: #64748b;
    --muted-2: #94a3b8;
    --line: #e6eaf0;
    --bg-soft: #f7f9fc;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 0 4rem;
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.esop-dashboard * { box-sizing: border-box; }

.esop-dashboard a { color: inherit; }

/* ---------------- Hero band ---------------- */
.esop-dash-hero {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    min-height: 300px;
    padding: 2.6rem 2.75rem 2.4rem;
    margin-bottom: 1.75rem;
    background: linear-gradient(135deg, var(--navy-deep), var(--navy)) center / cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
}
.esop-dash-hero-bg {
    position: absolute;
    inset: 0;
    background-image: var(--esop-hero-img, none);
    background-size: cover;
    background-position: center;
    opacity: 0.9;
}
.esop-dash-hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(6,16,36,0.94) 0%, rgba(8,22,46,0.82) 32%, rgba(10,28,58,0.45) 62%, rgba(10,28,58,0.25) 100%),
        linear-gradient(0deg, rgba(4,10,22,0.55), rgba(4,10,22,0) 55%);
}
.esop-dash-hero-content { position: relative; z-index: 2; }
.esop-dash-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: auto;
    padding-bottom: 1.4rem;
    flex-wrap: wrap;
}
.esop-dash-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
}
.esop-dash-hero-meta {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.65);
}
.esop-dash-hero-title {
    font-size: clamp(1.6rem, 3.4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0.2rem 0 0.35rem;
    line-height: 1.15;
}
.esop-dash-hero-sub {
    font-size: 0.92rem;
    color: rgba(255,255,255,0.72);
    max-width: 620px;
    line-height: 1.6;
    margin: 0 0 1.6rem;
}
.esop-dash-hero-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.esop-dash-headline-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.55);
    margin-bottom: 0.2rem;
}
.esop-dash-headline-value {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(90deg, #ffffff, #cfe0ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
}
.esop-dash-headline-sub { font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-top: 0.3rem; }
.esop-dash-hero-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ---------------- Buttons ---------------- */
.esop-dash-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    border: 1.5px solid rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.08);
    color: #fff;
    text-decoration: none;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
    font-family: inherit;
}
.esop-dash-btn:hover { background: rgba(255,255,255,0.18); transform: translateY(-2px); }
.esop-dash-btn.primary {
    background: linear-gradient(135deg, var(--gold), #b9832f);
    border-color: transparent;
    color: #1b1204;
    box-shadow: 0 8px 20px rgba(217,164,65,0.28);
}
.esop-dash-btn.primary:hover { box-shadow: 0 12px 26px rgba(217,164,65,0.36); }
.esop-dash-btn.light {
    background: #fff;
    border-color: var(--line);
    color: var(--ink);
}
.esop-dash-btn.light:hover { border-color: var(--blue); color: var(--blue); box-shadow: 0 8px 18px rgba(15,23,42,0.08); }

/* ---------------- Layout grids ---------------- */
.esop-dash-grid-2 {
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
/* Cards in this row size to their own content. The department panel can hold a
   single row while seniority always holds five, and stretching both to the
   taller one left a large void under a one-employee department list. */
.esop-dash-grid-2.even { grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 880px) {
    .esop-dash-grid-2, .esop-dash-grid-2.even { grid-template-columns: 1fr; }
}

/* ---------------- Cards ---------------- */
.esop-dash-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.5rem 1.6rem;
    box-shadow: 0 1px 2px rgba(15,23,42,0.03);
}
.esop-dash-card-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ---------------- Pool overview: donut + stat grid ---------------- */
.esop-dash-donut-wrap { display: flex; align-items: center; gap: 1.5rem; }
.esop-dash-donut-box { position: relative; width: 168px; height: 168px; flex-shrink: 0; }
.esop-dash-donut-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    pointer-events: none;
}
.esop-dash-donut-center .val { font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1; }
.esop-dash-donut-center .lbl { font-size: 0.62rem; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.25rem; }
.esop-dash-legend { display: flex; flex-direction: column; gap: 0.6rem; font-size: 0.82rem; flex: 1; min-width: 0; }
.esop-dash-legend-row { display: flex; align-items: center; gap: 0.55rem; }
.esop-dash-legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.esop-dash-legend-label { color: var(--muted); flex: 1; }
.esop-dash-legend-val { font-weight: 700; color: var(--ink); }

.esop-dash-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 1.2rem; }
.esop-dash-stat {
    background: var(--bg-soft);
    border-radius: 10px;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line);
}
.esop-dash-stat .lbl { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-2); margin-bottom: 0.25rem; }
.esop-dash-stat .val { font-size: 1.05rem; font-weight: 800; color: var(--ink); line-height: 1.2; }
.esop-dash-stat .val.money { color: var(--money); }
.esop-dash-stat .val.small { font-size: 0.82rem; font-weight: 700; }

.esop-dash-note {
    margin-top: 1.1rem;
    font-size: 0.8rem;
    line-height: 1.6;
    color: #92640f;
    background: #fdf6e8;
    border: 1px solid #f2e0b8;
    border-radius: 10px;
    padding: 0.75rem 1rem;
}

/* ---------------- Chart boxes ---------------- */
.esop-chart-box { position: relative; height: 230px; }
.esop-chart-box canvas { max-width: 100%; }

/* ---------------- Distribution bars (department / seniority) ----------------
   Used by EsopDashboard.renderDistribution(). Deliberately CSS rather than a
   canvas chart so a single-row panel still looks composed, and so the bars
   survive the html2canvas PDF export. */
.esop-dist { display: flex; flex-direction: column; gap: 1.05rem; }
.esop-dist-row { display: flex; flex-direction: column; gap: 0.4rem; }
.esop-dist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.esop-dist-label { font-size: 0.85rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
.esop-dist-val {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--money);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.esop-dist-track {
    position: relative;
    height: 9px;
    border-radius: 5px;
    background: #eef2f7;
    overflow: hidden;
}
.esop-dist-fill { height: 100%; border-radius: 5px; min-width: 4px; }
.esop-dist-meta { font-size: 0.72rem; color: var(--muted-2); line-height: 1.4; }

/* A tier nobody was scored against is still shown — an explicit 0% says
   "this level is unallocated", which an omitted row does not. Muted so it
   recedes behind the rows that carry real allocation. */
.esop-dist-row.is-zero .esop-dist-label { color: var(--muted-2); font-weight: 600; }
.esop-dist-row.is-zero .esop-dist-val { color: var(--muted-2); font-weight: 700; }
.esop-dist-row.is-zero .esop-dist-track { background: #f4f6fa; }

.esop-dist-empty { font-size: 0.82rem; color: var(--muted-2); text-align: center; padding: 1.75rem 0; }
.esop-dist-note {
    margin-top: 1.15rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line);
    font-size: 0.72rem;
    color: var(--muted-2);
    line-height: 1.5;
}

/* ---------------- Employee table ---------------- */
.esop-dash-table-wrap {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.esop-dash-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--line);
}
.esop-dash-table-head h3 { margin: 0; font-size: 0.95rem; font-weight: 800; color: var(--ink); }
.esop-dash-table-head span { font-size: 0.78rem; color: var(--muted); }

table.esop-dash-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.esop-dash-table thead th {
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    background: var(--bg-soft);
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
table.esop-dash-table tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    color: #334155;
}
table.esop-dash-table tbody tr:last-child td { border-bottom: none; }
table.esop-dash-table tbody tr.emp-row { cursor: pointer; transition: background .15s; }
table.esop-dash-table tbody tr.emp-row:hover { background: var(--bg-soft); }
table.esop-dash-table tbody tr.emp-detail-row td { padding: 0 1rem; }
table.esop-dash-table tbody tr.emp-detail-row .emp-detail-inner {
    max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease;
}
table.esop-dash-table tbody tr.emp-detail-row.open .emp-detail-inner {
    max-height: 260px; padding: 0.9rem 0 1.1rem;
}
.emp-detail-inner .note { background: #fbf8ef; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 0.7rem 0.9rem; font-size: 0.82rem; color: #4a3f28; line-height: 1.6; margin-bottom: 0.5rem; }
.emp-detail-inner .note.retention { border-left-color: var(--blue); background: #eff6ff; color: #24405f; font-style: italic; }

.esop-rank-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, var(--navy), var(--blue));
    color: #fff; font-size: 0.72rem; font-weight: 800;
}
.esop-rank-badge.top { background: linear-gradient(135deg, var(--gold), #b9832f); color: #241a04; }

.esop-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    color: #fff; font-size: 0.72rem; font-weight: 700;
    flex-shrink: 0;
}

.esop-emp-name-cell { display: flex; align-items: center; gap: 0.65rem; }
.esop-emp-name-cell .info strong { display: block; font-size: 0.86rem; color: var(--ink); }
.esop-emp-name-cell .info span { font-size: 0.72rem; color: var(--muted-2); }

.esop-scorebar { width: 96px; height: 6px; border-radius: 4px; background: #eef1f5; overflow: hidden; margin-top: 0.3rem; }
.esop-scorebar-fill { height: 100%; border-radius: 4px; }

.esop-chip {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #3949ab;
    white-space: nowrap;
}
.esop-chip.remainder { background: #f1f5f9; color: var(--muted); }

.esop-grant-figure { font-weight: 800; color: var(--money); font-size: 0.92rem; }
.esop-grant-share { font-size: 0.7rem; color: var(--muted-2); }

.esop-expand-hint { font-size: 0.68rem; color: var(--muted-2); }

/* ---------------- Advisory notes panel ---------------- */
.esop-dash-notes { display: flex; flex-direction: column; gap: 0.9rem; }
.esop-note-item { display: flex; gap: 0.8rem; align-items: flex-start; }
.esop-note-icon {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; color: #fff;
}
.esop-note-icon.summary { background: linear-gradient(135deg, var(--navy), var(--blue)); }
.esop-note-icon.risk { background: linear-gradient(135deg, #dc2626, #ef4444); }
.esop-note-icon.risk.ok { background: linear-gradient(135deg, var(--money-deep), var(--money)); }
.esop-note-icon.vesting { background: linear-gradient(135deg, var(--gold), #b9832f); color:#241a04; }
.esop-note-icon.steps { background: linear-gradient(135deg, #475569, #334155); }
.esop-note-body h4 { margin: 0 0 0.2rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.esop-note-body p { margin: 0; font-size: 0.86rem; color: #334155; line-height: 1.65; }
.esop-note-body ol { margin: 0.3rem 0 0; padding-left: 1.1rem; font-size: 0.86rem; color: #334155; line-height: 1.8; }

/* ---------------- Soft CTA: book a free ESOP Clarity call ---------------- */
.esop-dash-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #f4f7fe, #eef2fb);
    border: 1px solid #dde5f6;
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
}
.esop-dash-cta-text { max-width: 580px; }
.esop-dash-cta-eyebrow { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue); margin-bottom: 0.4rem; }
.esop-dash-cta-title { font-size: 1.05rem; font-weight: 800; color: var(--ink); margin: 0 0 0.4rem; line-height: 1.3; }
.esop-dash-cta-sub { font-size: 0.85rem; color: var(--muted); line-height: 1.65; margin: 0; }
.esop-dash-btn.calendly {
    background: linear-gradient(135deg, var(--navy), var(--blue));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px rgba(15,42,82,0.22);
    flex-shrink: 0;
}
.esop-dash-btn.calendly:hover { box-shadow: 0 12px 26px rgba(15,42,82,0.3); transform: translateY(-2px); color: #fff; }
@media (max-width: 640px) {
    .esop-dash-cta { flex-direction: column; align-items: flex-start; }
}

/* ---------------- Footer ---------------- */
.esop-dash-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.esop-dash-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.esop-dash-disclaimer { font-size: 0.72rem; color: var(--muted-2); font-style: italic; line-height: 1.6; margin-top: 1.4rem; }

/* ---------------- Section spacing ---------------- */
.esop-dash-section-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.esop-dash-section-title .bar { width: 4px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, var(--navy), var(--blue)); }

@media (max-width: 620px) {
    .esop-dash-hero { padding: 2rem 1.4rem 1.8rem; }
    .esop-dash-card { padding: 1.2rem 1.1rem; }
    .esop-dash-donut-wrap { flex-direction: column; align-items: flex-start; }
    .esop-dash-stat-grid { grid-template-columns: 1fr 1fr; }
}

@media print {
    .esop-dash-hero-actions, .esop-dash-actions, .esop-expand-hint, .esop-dash-cta { display: none !important; }
    .esop-dashboard { padding: 0; }
}