/* ============================================
   Explore Phase — CSS Design Tokens
   Source: FS/TS Section 9 (UI/UX Design Tokens)
   Adapted for SAP Fiori Horizon Light Theme
   ============================================ */

:root {
    /* ── Fit / Gap / Partial / Pending ──────────────────────────────── */
    --exp-fit:              #10B981;
    --exp-fit-bg:           #d1fae5;
    --exp-fit-text:         #065f46;

    --exp-gap:              #EF4444;
    --exp-gap-bg:           #fee2e2;
    --exp-gap-text:         #991b1b;

    --exp-partial:          #F59E0B;
    --exp-partial-bg:       #fef3c7;
    --exp-partial-text:     #92400e;

    --exp-pending:          #6366F1;
    --exp-pending-bg:       #e0e7ff;
    --exp-pending-text:     #3730a3;

    /* ── Priority Colours ───────────────────────────────────────────── */
    --exp-p1:               #EF4444;
    --exp-p1-bg:            #fee2e2;
    --exp-p2:               #F59E0B;
    --exp-p2-bg:            #fef3c7;
    --exp-p3:               #3B82F6;
    --exp-p3-bg:            #dbeafe;
    --exp-p4:               #64748B;
    --exp-p4-bg:            #f1f5f9;

    /* ── Entity Accent Colours ──────────────────────────────────────── */
    --exp-open-item:        #F97316;
    --exp-open-item-bg:     #fff7ed;
    --exp-open-item-text:   #9a3412;

    --exp-decision:         #8B5CF6;
    --exp-decision-bg:      #ede9fe;
    --exp-decision-text:    #5b21b6;

    --exp-requirement:      #3B82F6;
    --exp-requirement-bg:   #eff6ff;
    --exp-requirement-text: #1e40af;

    /* ── Process Level Colours ──────────────────────────────────────── */
    --exp-l1:               #8B5CF6;
    --exp-l1-bg:            #ede9fe;
    --exp-l2:               #3B82F6;
    --exp-l2-bg:            #dbeafe;
    --exp-l3:               #10B981;
    --exp-l3-bg:            #d1fae5;
    --exp-l4:               #F59E0B;
    --exp-l4-bg:            #fef3c7;

    /* ── Wave Colours ───────────────────────────────────────────────── */
    --exp-wave1:            #3B82F6;
    --exp-wave1-bg:         #dbeafe;
    --exp-wave2:            #8B5CF6;
    --exp-wave2-bg:         #ede9fe;
    --exp-wave3:            #EC4899;
    --exp-wave3-bg:         #fce7f3;
    --exp-wave4:            #14B8A6;
    --exp-wave4-bg:         #ccfbf1;

    /* ── SAP Area Colours ───────────────────────────────────────────── */
    --exp-area-FI:          #3B82F6;
    --exp-area-CO:          #6366F1;
    --exp-area-SD:          #10B981;
    --exp-area-MM:          #F59E0B;
    --exp-area-PP:          #EF4444;
    --exp-area-QM:          #EC4899;
    --exp-area-PM:          #14B8A6;
    --exp-area-WM:          #F97316;
    --exp-area-HR:          #8B5CF6;
    --exp-area-PS:          #06B6D4;

    /* ── Workshop Status Colours ────────────────────────────────────── */
    --exp-ws-draft:         #94A3B8;
    --exp-ws-draft-bg:      #f1f5f9;
    --exp-ws-scheduled:     #3B82F6;
    --exp-ws-scheduled-bg:  #dbeafe;
    --exp-ws-in-progress:   #F59E0B;
    --exp-ws-in-progress-bg:#fef3c7;
    --exp-ws-completed:     #10B981;
    --exp-ws-completed-bg:  #d1fae5;

    /* ── Requirement Status Colours ─────────────────────────────────── */
    --exp-rs-draft:         #94A3B8;
    --exp-rs-under-review:  #F59E0B;
    --exp-rs-approved:      #10B981;
    --exp-rs-in-backlog:    #3B82F6;
    --exp-rs-realized:      #8B5CF6;
    --exp-rs-verified:      #059669;
    --exp-rs-deferred:      #64748B;
    --exp-rs-rejected:      #EF4444;

    /* ── Open Item Status Colours ───────────────────────────────────── */
    --exp-oi-open:          #F97316;
    --exp-oi-in-progress:   #3B82F6;
    --exp-oi-blocked:       #EF4444;
    --exp-oi-resolved:      #10B981;
    --exp-oi-closed:        #64748B;

    /* ── Typography ─────────────────────────────────────────────────── */
    --exp-font-family:      var(--font-family);
    --exp-font-mono:        var(--font-mono);
    --exp-font-size-xs:     var(--fs-xs);
    --exp-font-size-sm:     var(--fs-sm);
    --exp-font-size-md:     var(--fs-md);
    --exp-font-size-lg:     var(--fs-lg);
    --exp-font-size-xl:     var(--fs-xl);
    --exp-font-size-2xl:    var(--fs-2xl);
    --exp-font-size-3xl:    var(--fs-3xl);

    /* ── Spacing Scale ──────────────────────────────────────────────── */
    --exp-space-xs:         4px;
    --exp-space-sm:         8px;
    --exp-space-md:         12px;
    --exp-space-lg:         16px;
    --exp-space-xl:         24px;
    --exp-space-2xl:        32px;
    --exp-space-3xl:        48px;

    /* ── Border Radius ──────────────────────────────────────────────── */
    --exp-radius-sm:        4px;
    --exp-radius-md:        6px;
    --exp-radius-lg:        8px;
    --exp-radius-xl:        12px;
    --exp-radius-pill:      9999px;

    /* ── Shadows ────────────────────────────────────────────────────── */
    --exp-shadow-xs:        0 1px 2px rgba(0,0,0,0.05);
    --exp-shadow-sm:        0 1px 3px rgba(0,0,0,0.08);
    --exp-shadow-md:        0 4px 12px rgba(0,0,0,0.10);
    --exp-shadow-lg:        0 8px 24px rgba(0,0,0,0.12);

    /* ── Z-Index Scale ──────────────────────────────────────────────── */
    --exp-z-dropdown:       200;
    --exp-z-sticky:         300;
    --exp-z-modal:          400;
    --exp-z-toast:          500;

    /* ── Component Tokens ───────────────────────────────────────────── */
    /* KPI Card */
    --exp-kpi-bg:           #ffffff;
    --exp-kpi-border:       #e2e8f0;
    --exp-kpi-shadow:       var(--exp-shadow-sm);
    --exp-kpi-radius:       var(--exp-radius-lg);
    --exp-kpi-padding:      var(--exp-space-lg) var(--exp-space-xl);

    /* Detail Panel */
    --exp-panel-width:      350px;
    --exp-panel-bg:         #ffffff;
    --exp-panel-border:     #e2e8f0;
    --exp-panel-shadow:     -4px 0 16px rgba(0,0,0,0.06);

    /* Tree Node */
    --exp-tree-indent:      24px;
    --exp-tree-node-height: 44px;
    --exp-tree-hover-bg:    #f8fafc;
    --exp-tree-active-bg:   #eff6ff;
    --exp-tree-active-border: var(--pg-color-primary);

    /* Table */
    --exp-table-header-bg:  #f8fafc;
    --exp-table-stripe-bg:  #fafbfc;
    --exp-table-hover-bg:   #f1f5f9;
    --exp-table-border:     #e2e8f0;

    /* Kanban */
    --exp-kanban-col-bg:    #f1f5f9;
    --exp-kanban-card-bg:   #ffffff;
    --exp-kanban-card-shadow: var(--exp-shadow-sm);

    /* Filter Chip */
    --exp-chip-bg:          #f1f5f9;
    --exp-chip-bg-active:   var(--pg-color-primary);
    --exp-chip-text:        #475569;
    --exp-chip-text-active: #ffffff;
    --exp-chip-radius:      var(--exp-radius-pill);

    /* Transition */
    --exp-transition-fast:  0.15s ease;
    --exp-transition:       0.2s ease;
    --exp-transition-slow:  0.35s ease;
}

/* ── Explore Layout Container ───────────────────────────────────────── */
.explore-page {
    display: flex;
    flex-direction: column;
    gap: var(--pg-shell-gap, var(--exp-space-lg));
    padding: var(--pg-shell-card-pad, var(--exp-space-lg));
    min-height: 100%;
}

.explore-page__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--exp-space-md);
}

.explore-page__title {
    font-size: var(--exp-font-size-2xl);
    font-weight: 700;
    color: var(--pg-color-text);
    margin: 0;
}

.explore-page__subtitle {
    font-size: var(--exp-font-size-sm);
    color: var(--pg-color-text-secondary);
    margin: 0;
}

/* ── KPI Strip ──────────────────────────────────────────────────────── */
.exp-kpi-strip {
    display: flex;
    gap: var(--exp-space-sm);
    flex-wrap: nowrap;
    overflow: hidden;
    margin-bottom: var(--exp-space-md);
}

.exp-kpi-strip--compact .exp-kpi-card {
    min-width: 96px;
    max-width: 200px;
    padding: 10px 12px;
}

.exp-kpi-strip--compact .exp-kpi-card__value {
    font-size: var(--fs-xl);  /* 18px — compact variant visually smaller than full 22px */
}

.exp-kpi-strip--compact .exp-kpi-card__label,
.exp-kpi-strip--compact .exp-kpi-card__sub {
    font-size: var(--fs-2xs); /* 10px — replaces inaccessible 9px */
}

.exp-kpi-card {
    flex: 1 1 0;
    min-width: 112px;
    max-width: 220px;
    background: var(--exp-kpi-bg);
    border: 1px solid var(--exp-kpi-border);
    border-radius: var(--exp-kpi-radius);
    padding: 10px 12px;
    box-shadow: var(--exp-kpi-shadow);
    transition: box-shadow var(--exp-transition);
}

.exp-kpi-card:hover {
    box-shadow: var(--exp-shadow-md);
}

.exp-kpi-card__value {
    font-size: var(--pg-shell-summary-value-size, var(--fs-2xl));
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--pg-color-text);
}

.exp-kpi-card__value--accent {
    color: var(--pg-color-primary);
}

.exp-kpi-card__label {
    font-size: var(--fs-2xs);  /* 10px */
    font-weight: var(--fw-semibold);
    color: var(--pg-color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    margin-top: 4px;
}

.exp-kpi-card__sub {
    font-size: var(--fs-2xs);  /* 10px */
    color: #94a3b8;
    margin-top: 2px;
}

.exp-metric-bar {
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--exp-kpi-border);
    border-radius: var(--exp-kpi-radius);
    margin-bottom: var(--exp-space-md);
}
.exp-metric-bar__label {
    font-size: var(--fs-2xs);  /* 10px */
    font-weight: var(--fw-semibold);
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    margin-bottom: 6px;
}
.exp-metric-bar__legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 6px;
    font-size: var(--fs-2xs);  /* 10px */
    color: #64748b;
}

/* ── Card (Explore) ─────────────────────────────────────────────────── */
.exp-card {
    background: var(--pg-color-surface);
    border: 1px solid var(--exp-kpi-border);
    border-radius: var(--pg-shell-card-radius, var(--exp-radius-lg));
    box-shadow: var(--exp-shadow-xs);
}

.exp-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--pg-shell-header-pad-y, var(--exp-space-md)) var(--pg-shell-header-pad-x, var(--exp-space-lg));
    border-bottom: 1px solid var(--exp-kpi-border);
}

.exp-card__title {
    font-size: var(--exp-font-size-lg);
    font-weight: 600;
    color: var(--pg-color-text);
    margin: 0;
}

.exp-card__body {
    padding: var(--pg-shell-card-pad, var(--exp-space-lg));
}

/* ── Tabs ───────────────────────────────────────────────────────────── */
.exp-tabs {
    display: flex;
    border-bottom: 2px solid #e2e8f0;
    gap: 0;
}

.exp-tab {
    padding: var(--exp-space-sm) var(--exp-space-lg);
    font-size: var(--exp-font-size-md);
    font-weight: 500;
    color: var(--pg-color-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--exp-transition-fast);
    white-space: nowrap;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.exp-tab:hover {
    color: var(--pg-color-text);
    background: #f8fafc;
}

.exp-tab--active {
    color: var(--pg-color-primary);
    border-bottom-color: var(--pg-color-primary);
    font-weight: 600;
}

/* ── Table (Explore) ────────────────────────────────────────────────── */
.exp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--exp-font-size-md);
}

.exp-table thead th {
    background: var(--exp-table-header-bg);
    color: var(--pg-color-text-secondary);
    font-weight: 600;
    font-size: var(--exp-font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: var(--exp-space-sm) var(--exp-space-md);
    border-bottom: 2px solid var(--exp-table-border);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

.exp-table thead th:hover {
    background: #eef2f6;
}

.exp-table thead th .sort-icon {
    margin-left: 4px;
    opacity: 0.4;
}

.exp-table thead th .sort-icon--active {
    opacity: 1;
}

.exp-table tbody tr {
    border-bottom: 1px solid var(--exp-table-border);
    transition: background var(--exp-transition-fast);
}

.exp-table tbody tr:hover {
    background: var(--exp-table-hover-bg);
}

.exp-table tbody tr:nth-child(even) {
    background: var(--exp-table-stripe-bg);
}

.exp-table tbody tr:nth-child(even):hover {
    background: var(--exp-table-hover-bg);
}

.exp-table td {
    padding: var(--exp-space-sm) var(--exp-space-md);
    vertical-align: middle;
}

/* ── Empty State ────────────────────────────────────────────────────── */
.exp-empty {
    text-align: center;
    padding: var(--exp-space-3xl) var(--exp-space-xl);
    color: var(--pg-color-text-secondary);
}

.exp-empty__icon {
    font-size: var(--fs-4xl);  /* 48px */
    margin-bottom: var(--exp-space-md);
}

.exp-empty__title {
    font-size: var(--exp-font-size-lg);
    font-weight: 600;
    color: var(--pg-color-text);
    margin-bottom: var(--exp-space-sm);
}

.exp-empty__text {
    font-size: var(--exp-font-size-md);
    max-width: 400px;
    margin: 0 auto;
}

/* ── Search Input ───────────────────────────────────────────────────── */
.exp-search {
    position: relative;
}

.exp-search__input {
    width: 100%;
    padding: var(--exp-space-sm) var(--exp-space-md);
    padding-left: 36px;
    border: 1px solid var(--pg-color-border);
    border-radius: var(--exp-radius-md);
    font-size: var(--exp-font-size-md);
    outline: none;
    transition: border-color var(--exp-transition-fast);
}

.exp-search__input:focus {
    border-color: var(--pg-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 112, 242, 0.1);
}

.exp-search__icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pg-color-text-secondary);
    font-size: 14px;
    pointer-events: none;
}

/* ── Toolbar ────────────────────────────────────────────────────────── */
.exp-toolbar {
    display: flex;
    align-items: center;
    gap: var(--exp-space-md);
    flex-wrap: wrap;
}

.exp-toolbar__group {
    display: flex;
    align-items: center;
    gap: var(--exp-space-sm);
}

.exp-toolbar__spacer {
    flex: 1;
}

/* ── F-050 FilterBar ─────────────────────────────────────────────── */
.exp-fb { position: relative; margin-bottom: var(--exp-space-md); }
.exp-fb__row { display:flex; align-items:center; gap:var(--exp-space-sm); flex-wrap:wrap; }
.exp-fb__controls { display:flex; gap:4px; }
.exp-fb__chips { display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap; }

.exp-fb-btn {
    display:inline-flex; align-items:center; gap:5px;
    padding:6px 12px; border:1px solid var(--pg-color-border); border-radius:var(--exp-radius-md);
    background:#fff; color:#64748b; font-size:var(--fs-base); font-weight:var(--fw-medium);
    cursor:pointer; transition:all 0.15s; font-family:inherit;
}
.exp-fb-btn:hover { background:#f8fafc; border-color:#cbd5e1; color:#334155; }
.exp-fb-btn--active { border-color:var(--pg-color-primary); color:var(--pg-color-primary); background:#eff6ff; }
.exp-fb-btn__badge {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; border-radius:9px;
    background:var(--pg-color-primary); color:#fff; font-size:var(--fs-2xs); font-weight:var(--fw-bold);
}

.exp-fb-chip {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 8px 3px 6px; border-radius:var(--exp-radius-pill);
    background:#f1f5f9; font-size:var(--fs-sm); font-weight:var(--fw-medium); color:#334155; white-space:nowrap;
}
.exp-fb-chip__dot { width:6px; height:6px; border-radius:50%; }
.exp-fb-chip__x { cursor:pointer; color:#94a3b8; font-size:var(--fs-xs); margin-left:2px; }
.exp-fb-chip__x:hover { color:#dc2626; }
.exp-fb-clear-all { background:none; border:none; color:#94a3b8; font-size:var(--fs-sm); cursor:pointer; }
.exp-fb-clear-all:hover { color:#dc2626; }

/* Dropdown */
.exp-fb-dd {
    position:absolute; top:100%; margin-top:4px;
    min-width:220px; max-width:300px; max-height:400px; overflow-y:auto;
    background:#fff; border:1px solid #e2e8f0; border-radius:var(--exp-radius-lg);
    box-shadow:var(--exp-shadow-lg); z-index:200; padding:4px 0;
}
.exp-fb-dd__header { padding:8px 16px; font-size:var(--fs-xs); font-weight:var(--fw-bold); color:#94a3b8; text-transform:uppercase; letter-spacing:var(--ls-widest); }
.exp-fb-dd__item {
    display:flex; align-items:center; gap:8px; padding:8px 16px;
    font-size:var(--fs-base); cursor:pointer; transition:background 0.1s;
}
.exp-fb-dd__item:hover { background:#f8fafc; }
.exp-fb-dd__count {
    font-size:var(--fs-2xs); font-weight:var(--fw-bold); color:var(--pg-color-primary);
    background:#eff6ff; padding:1px 6px; border-radius:8px;
}
.exp-fb-dd__back {
    display:flex; align-items:center; gap:6px; padding:8px 16px;
    font-size:var(--fs-base); font-weight:var(--fw-semibold); cursor:pointer; border-bottom:1px solid #f1f5f9;
}
.exp-fb-dd__back:hover { background:#f8fafc; }
.exp-fb-dd__search { padding:6px 12px; border-bottom:1px solid #f1f5f9; }
.exp-fb-dd__search input {
    width:100%; padding:5px 8px; border:1px solid #e2e8f0; border-radius:var(--exp-radius-sm);
    font-size:var(--fs-sm); outline:none; font-family:inherit;
}
.exp-fb-dd__search input:focus { border-color:var(--pg-color-primary); }
.exp-fb-dd__option {
    display:flex; align-items:center; gap:8px; padding:6px 16px;
    font-size:var(--fs-base); cursor:pointer; transition:background 0.1s;
}
.exp-fb-dd__option:hover { background:#f8fafc; }
.exp-fb-dd__option input { accent-color:var(--pg-color-primary); }

/* ── 2-Column Layout (Content + Detail Panel) ───────────────────────── */
.exp-layout-split {
    display: flex;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.exp-layout-split__main {
    flex: 1;
    overflow-y: auto;
    min-width: 0;
}

.exp-layout-split__panel {
    width: var(--exp-panel-width);
    background: var(--exp-panel-bg);
    border-left: 1px solid var(--exp-panel-border);
    box-shadow: var(--exp-panel-shadow);
    overflow-y: auto;
    transition: width var(--exp-transition);
    flex-shrink: 0;
}

.exp-layout-split__panel--collapsed {
    width: 0;
    border-left: none;
    box-shadow: none;
    overflow: hidden;
}

/* ── Expandable Row ─────────────────────────────────────────────────── */
.exp-expandable-row {
    cursor: pointer;
}

.exp-expandable-row__chevron {
    display: inline-block;
    transition: transform var(--exp-transition-fast);
    color: var(--pg-color-text-secondary);
    font-size: 12px;
    width: 20px;
    text-align: center;
}

.exp-expandable-row__chevron--open {
    transform: rotate(90deg);
}

.exp-expandable-detail {
    background: #fafbfc;
    border-top: 1px solid var(--exp-table-border);
    padding: var(--exp-space-lg);
    animation: exp-slideDown 0.2s ease;
}

@keyframes exp-slideDown {
    from { opacity: 0; max-height: 0; }
    to   { opacity: 1; max-height: 600px; }
}

/* ── Kanban Board ───────────────────────────────────────────────────── */
.exp-kanban {
    display: flex;
    gap: var(--exp-space-md);
    overflow-x: auto;
    padding-bottom: var(--exp-space-sm);
}

.exp-kanban__column {
    flex: 1;
    min-width: 260px;
    max-width: 340px;
    background: var(--exp-kanban-col-bg);
    border-radius: var(--exp-radius-lg);
    padding: var(--exp-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--exp-space-sm);
}

.exp-kanban__col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--exp-space-sm) var(--exp-space-sm);
    font-weight: 600;
    font-size: var(--exp-font-size-sm);
    color: var(--pg-color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.exp-kanban__col-count {
    background: #e2e8f0;
    color: var(--pg-color-text-secondary);
    padding: 2px 8px;
    border-radius: var(--exp-radius-pill);
    font-size: var(--exp-font-size-xs);
    font-weight: 700;
}

.exp-kanban__card {
    background: var(--exp-kanban-card-bg);
    border-radius: var(--exp-radius-md);
    padding: var(--exp-space-md);
    box-shadow: var(--exp-kanban-card-shadow);
    cursor: pointer;
    transition: box-shadow var(--exp-transition-fast);
    border-left: 3px solid transparent;
}

.exp-kanban__card:hover {
    box-shadow: var(--exp-shadow-md);
}

/* ── Timeline ───────────────────────────────────────────────────────── */
.exp-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 24px;
}

.exp-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: #e2e8f0;
}

.exp-timeline__item {
    position: relative;
    padding: var(--exp-space-sm) 0 var(--exp-space-md) 0;
}

.exp-timeline__item::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 12px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pg-color-primary);
    border: 2px solid #ffffff;
}

.exp-timeline__time {
    font-size: var(--exp-font-size-xs);
    color: var(--pg-color-text-secondary);
    font-weight: 600;
}

.exp-timeline__content {
    font-size: var(--exp-font-size-md);
    color: var(--pg-color-text);
    margin-top: 2px;
}

/* ── Process Tree ───────────────────────────────────────────────────── */
.exp-tree {
    display: flex;
    flex-direction: column;
    font-size: var(--exp-font-size-md);
}

.exp-tree-node {
    display: flex;
    align-items: center;
    gap: var(--exp-space-sm);
    height: var(--exp-tree-node-height);
    padding: 0 var(--exp-space-md);
    cursor: pointer;
    transition: background var(--exp-transition-fast);
    border-left: 3px solid transparent;
}

.exp-tree-node:hover {
    background: var(--exp-tree-hover-bg);
}

.exp-tree-node--active {
    background: var(--exp-tree-active-bg);
    border-left-color: var(--exp-tree-active-border);
}

.exp-tree-node__chevron {
    width: 16px;
    font-size: 10px;
    color: var(--pg-color-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform var(--exp-transition-fast);
    text-align: center;
}

.exp-tree-node__chevron--open {
    transform: rotate(90deg);
}

.exp-tree-node__chevron--leaf {
    visibility: hidden;
}

.exp-tree-node__level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 20px;
    border-radius: var(--exp-radius-sm);
    font-size: var(--exp-font-size-xs);
    font-weight: 700;
    flex-shrink: 0;
    color: #ffffff;
}

.exp-tree-node__code {
    font-size: var(--exp-font-size-sm);
    font-family: var(--exp-font-mono);
    color: var(--pg-color-text-secondary);
    flex-shrink: 0;
    min-width: 80px;
}

.exp-tree-node__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.exp-tree-node__meta {
    display: flex;
    align-items: center;
    gap: var(--exp-space-sm);
    flex-shrink: 0;
}

.exp-tree-node__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--exp-transition-fast);
}

.exp-tree-node:hover .exp-tree-node__actions,
.exp-tree-node--active .exp-tree-node__actions {
    opacity: 1;
    pointer-events: auto;
}

.exp-tree-node__actions .btn-icon {
    width: 22px;
    height: 22px;
}

/* ── Highlight Newly Imported Nodes ─────────────────────────────────── */
@keyframes highlight-fade {
    0%   { background-color: rgba(192, 139, 92, 0.25); }
    70%  { background-color: rgba(192, 139, 92, 0.12); }
    100% { background-color: transparent; }
}
.highlight-new {
    animation: highlight-fade 5s ease-out forwards;
    border-left: 3px solid var(--exp-l4, #c08b5c);
}

/* ── Status Flow Indicator ──────────────────────────────────────────── */
.exp-status-flow {
    display: flex;
    align-items: center;
    gap: 2px;
}

.exp-status-flow__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e2e8f0;
    transition: background var(--exp-transition-fast);
}

.exp-status-flow__dot--reached {
    background: var(--pg-color-primary);
}

.exp-status-flow__dot--current {
    background: var(--pg-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 112, 242, 0.2);
}

.exp-status-flow__dot--rejected {
    background: var(--exp-gap);
}

.exp-status-flow__dot--deferred {
    background: var(--exp-p4);
}

.exp-status-flow__connector {
    width: 12px;
    height: 2px;
    background: #e2e8f0;
}

.exp-status-flow__connector--reached {
    background: var(--pg-color-primary);
}

/* ── Detail Panel Sections ──────────────────────────────────────────── */
.exp-detail-section {
    padding: var(--exp-space-lg);
    border-bottom: 1px solid #f1f5f9;
}

.exp-detail-section:last-child {
    border-bottom: none;
}

.exp-detail-section__title {
    font-size: var(--exp-font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--pg-color-text-secondary);
    margin-bottom: var(--exp-space-sm);
}

.exp-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 4px 0;
    font-size: var(--exp-font-size-md);
}

.exp-detail-row__label {
    color: var(--pg-color-text-secondary);
    font-size: var(--exp-font-size-sm);
    min-width: 100px;
}

.exp-detail-row__value {
    font-weight: 500;
    text-align: right;
    flex: 1;
}

/* ── Capacity Bar ───────────────────────────────────────────────────── */
.exp-capacity-bar {
    height: 6px;
    border-radius: 3px;
    background: #e2e8f0;
    overflow: hidden;
}

.exp-capacity-bar__fill {
    height: 100%;
    border-radius: 3px;
    transition: width var(--exp-transition);
}

.exp-capacity-bar__fill--ok      { background: var(--exp-fit); }
.exp-capacity-bar__fill--warning { background: var(--exp-partial); }
.exp-capacity-bar__fill--over    { background: var(--exp-gap); }

.exp-dashboard-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--exp-space-lg);
    margin-top: var(--exp-space-lg);
}

.exp-dashboard-card-stack {
    margin-top: var(--exp-space-lg);
}

.exp-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.exp-bar-row--spaced {
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 4px;
}

.exp-bar-row__label {
    width: 90px;
    font-size: 12px;
    text-align: right;
}

.exp-bar-row__label--wide {
    width: 120px;
}

.exp-bar-row__value {
    width: 30px;
    font-size: 12px;
    font-weight: 600;
}

.exp-bar-row__value--wide {
    width: 40px;
}

.exp-bar-track {
    flex: 1;
    height: 22px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
}

.exp-bar-track--sm {
    height: 20px;
}

.exp-bar-track--xs {
    height: 16px;
}

.exp-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width .3s;
}

.exp-readiness-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.exp-readiness-gauge {
    text-align: center;
}

.exp-readiness-gauge__frame {
    position: relative;
    width: 160px;
    height: 90px;
    margin: 0 auto 12px;
}

.exp-readiness-gauge__frame svg {
    width: 100%;
    height: 100%;
}

.exp-readiness-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sap-text-primary);
}

.exp-readiness-sub {
    font-size: 11px;
    color: var(--sap-text-secondary);
    margin-top: 4px;
}

.exp-readiness-section-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}

.exp-readiness-section-title--tight {
    margin-bottom: 8px;
}

.exp-readiness-meta {
    font-size: 11px;
    color: var(--sap-text-secondary);
    margin-bottom: 16px;
}

.exp-readiness-inline {
    display: flex;
    gap: 12px;
    font-size: 12px;
}

.exp-text-fit {
    color: var(--exp-fit);
}

.exp-text-gap {
    color: var(--exp-gap);
}

.exp-section-divider {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.exp-table--full {
    width: 100%;
}

.exp-cell-center {
    text-align: center;
}

.exp-cell-compact {
    font-size: 12px;
    padding: 6px;
}

.exp-cell-compact--strong {
    font-weight: 600;
}

.exp-cell-compact--bold {
    font-weight: 700;
}

.exp-header-compact {
    font-size: 11px;
}

.exp-cell-heat--draft { background: color-mix(in srgb, var(--exp-rs-draft) 10%, white); }
.exp-cell-heat--under-review { background: color-mix(in srgb, var(--exp-rs-under-review) 10%, white); }
.exp-cell-heat--approved { background: color-mix(in srgb, var(--exp-rs-approved) 10%, white); }
.exp-cell-heat--in-backlog { background: color-mix(in srgb, var(--exp-rs-in-backlog) 10%, white); }
.exp-cell-heat--realized { background: color-mix(in srgb, var(--exp-rs-realized) 10%, white); }
.exp-cell-heat--verified { background: color-mix(in srgb, var(--exp-rs-verified) 10%, white); }

.exp-cell-coverage--high { color: var(--exp-fit); }
.exp-cell-coverage--medium { color: var(--exp-partial); }
.exp-cell-coverage--low { color: var(--exp-gap); }
.exp-cell-coverage--none { color: #a9b4be; }

.exp-cell-gap--high {
    background: var(--exp-gap-bg);
    color: var(--exp-gap);
}

.exp-cell-gap--medium {
    background: var(--exp-partial-bg);
    color: var(--exp-partial);
}

.exp-cell-gap--low {
    background: #fff8e1;
    color: var(--exp-fit);
}

.exp-cell-gap--none {
    background: var(--exp-fit-bg);
    color: var(--exp-fit);
}

.exp-loading-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.exp-loading-shell__inner {
    text-align: center;
    color: var(--sap-text-secondary);
}

.exp-loading-shell__icon {
    font-size: 28px;
    margin-bottom: 8px;
}

/* ── Form Inline ────────────────────────────────────────────────────── */
.exp-inline-form {
    background: #fafbfc;
    border: 1px solid #e2e8f0;
    border-radius: var(--exp-radius-md);
    padding: var(--exp-space-lg);
    animation: exp-slideDown 0.2s ease;
}

.exp-inline-form__row {
    display: flex;
    gap: var(--exp-space-md);
    align-items: flex-start;
    margin-bottom: var(--exp-space-md);
}

.exp-inline-form__field {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exp-inline-form__field label {
    font-size: var(--exp-font-size-sm);
    font-weight: 600;
    color: var(--pg-color-text-secondary);
}

.exp-inline-form__field input,
.exp-inline-form__field select,
.exp-inline-form__field textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: var(--exp-space-sm) var(--exp-space-md);
    border: 1px solid var(--pg-color-border);
    border-radius: var(--exp-radius-md);
    font-size: var(--exp-font-size-md);
    font-family: inherit;
    outline: none;
    transition: border-color var(--exp-transition-fast);
}

.exp-inline-form__field input:focus,
.exp-inline-form__field select:focus,
.exp-inline-form__field textarea:focus {
    border-color: var(--pg-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 112, 242, 0.1);
}

.exp-inline-form__actions {
    display: flex;
    gap: var(--exp-space-sm);
    justify-content: flex-end;
    padding-top: var(--exp-space-md);
    border-top: 1px solid #e2e8f0;
}

/* ── Attendee List ──────────────────────────────────────────────────── */
.exp-attendee {
    display: flex;
    align-items: center;
    gap: var(--exp-space-md);
    padding: var(--exp-space-sm) 0;
    border-bottom: 1px solid #f1f5f9;
}

.exp-attendee:last-child { border-bottom: none; }

.exp-attendee__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pg-color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--exp-font-size-xs);
    font-weight: 700;
    flex-shrink: 0;
}

.exp-attendee__info {
    flex: 1;
    min-width: 0;
}

.exp-attendee__name {
    font-weight: 500;
    font-size: var(--exp-font-size-md);
}

.exp-attendee__role {
    font-size: var(--exp-font-size-sm);
    color: var(--pg-color-text-secondary);
}

.exp-attendee__status {
    flex-shrink: 0;
}

/* ── Utility: Truncate ──────────────────────────────────────────────── */
.exp-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Utility: Accent Left Border ────────────────────────────────────── */
.exp-accent--fit       { border-left-color: var(--exp-fit) !important; }
.exp-accent--gap       { border-left-color: var(--exp-gap) !important; }
.exp-accent--partial   { border-left-color: var(--exp-partial) !important; }
.exp-accent--pending   { border-left-color: var(--exp-pending) !important; }
.exp-accent--decision  { border-left-color: var(--exp-decision) !important; }
.exp-accent--open-item { border-left-color: var(--exp-open-item) !important; }
.exp-accent--requirement { border-left-color: var(--exp-requirement) !important; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .exp-layout-split__panel {
        width: 280px;
    }
    .exp-kanban__column {
        min-width: 220px;
    }
}

@media (max-width: 768px) {
    .exp-layout-split {
        flex-direction: column;
    }
    .exp-layout-split__panel {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--exp-panel-border);
        max-height: 300px;
    }
    .exp-kpi-strip {
        gap: var(--exp-space-xs);
        overflow: hidden;
    }
    .exp-kpi-card {
        min-width: 96px;
        padding: 10px 12px;
    }
    .exp-kpi-card__value {
        font-size: 20px;
    }
    .exp-kanban {
        flex-direction: column;
    }
    .exp-kanban__column {
        max-width: none;
        min-width: auto;
    }
}

/* ── Multi-Select Dropdown Component ────────────────────────────────── */
.exp-multiselect {
    position: relative;
    width: 100%;
}

.exp-multiselect__trigger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 38px;
    padding: 4px 32px 4px 8px;
    border: 1px solid var(--pg-color-border);
    border-radius: var(--exp-radius-md);
    background: #fff;
    cursor: pointer;
    transition: border-color var(--exp-transition-fast), box-shadow var(--exp-transition-fast);
    position: relative;
}

.exp-multiselect__trigger:hover {
    border-color: var(--pg-color-primary);
}

.exp-multiselect__trigger--open {
    border-color: var(--pg-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 112, 242, 0.1);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.exp-multiselect__trigger::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #64748b;
    transition: transform 0.2s ease;
}

.exp-multiselect__trigger--open::after {
    transform: translateY(-50%) rotate(180deg);
}

.exp-multiselect__placeholder {
    color: #94a3b8;
    font-size: var(--exp-font-size-md, 13px);
    user-select: none;
}

.exp-multiselect__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px 2px 8px;
    background: var(--exp-l3-bg, #d1fae5);
    color: var(--exp-l3, #10B981);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.exp-multiselect__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: var(--exp-l3, #10B981);
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.15s;
}

.exp-multiselect__chip-remove:hover {
    background: rgba(0,0,0,0.08);
}

.exp-multiselect__dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid var(--pg-color-primary);
    border-top: none;
    border-bottom-left-radius: var(--exp-radius-md);
    border-bottom-right-radius: var(--exp-radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    max-height: 220px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: exp-fadeIn 0.15s ease;
}

.exp-multiselect__search {
    padding: 8px;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.exp-multiselect__search input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: var(--exp-radius-sm, 4px);
    font-size: 12px;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}

.exp-multiselect__search input:focus {
    border-color: var(--pg-color-primary);
}

.exp-multiselect__list {
    overflow-y: auto;
    flex: 1;
}

.exp-multiselect__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: #334155;
    transition: background 0.1s;
    user-select: none;
}

.exp-multiselect__option:hover {
    background: #f1f5f9;
}

.exp-multiselect__option--selected {
    background: var(--exp-l3-bg, #d1fae5);
    font-weight: 500;
}

.exp-multiselect__option--selected:hover {
    background: #bbf7d0;
}

.exp-multiselect__checkbox {
    width: 16px;
    height: 16px;
    border: 2px solid #cbd5e1;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}

.exp-multiselect__option--selected .exp-multiselect__checkbox {
    background: var(--exp-l3, #10B981);
    border-color: var(--exp-l3, #10B981);
}

.exp-multiselect__option--selected .exp-multiselect__checkbox::after {
    content: '✓';
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.exp-multiselect__option-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exp-multiselect__option-code {
    font-family: var(--exp-font-mono, monospace);
    font-size: 11px;
    color: #64748b;
    flex-shrink: 0;
}

.exp-multiselect__empty {
    padding: 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
}

.exp-multiselect__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.exp-multiselect__counter {
    font-size: 11px;
    color: #64748b;
}

.exp-multiselect__clear-btn {
    font-size: 11px;
    color: var(--pg-color-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s;
}

.exp-multiselect__clear-btn:hover {
    background: #f1f5f9;
}

@keyframes exp-fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}