/* Manager Portal shared drilldown styles - rebuilt on design tokens */

.manager-page {
    padding: var(--sp-5);
    background: var(--bg-default);
    min-height: 100vh;
}

/* Page header bar (back button + title + actions) */
.manager-page-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-4);
    background: var(--bg-paper);
    border: 1px solid var(--divider);
    border-radius: var(--shape-lg);
    box-shadow: var(--elev-1);
}
.manager-page-header h2 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--text-primary);
}
.manager-page-subtitle {
    margin: 0 0 var(--sp-5);
    padding: 0 var(--sp-1);
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 20px;
}

/* KPI strip - simple tiles used by drilldowns */
.mp-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}
.mp-kpi {
    position: relative;
    padding: var(--sp-4);
    background: var(--bg-paper);
    border: 1px solid var(--divider);
    border-radius: var(--shape-lg);
    box-shadow: var(--elev-1);
    transition: transform var(--motion-base), box-shadow var(--motion-base);
}
.mp-kpi:hover {
    transform: translateY(-1px);
    box-shadow: var(--elev-3);
}
.mp-kpi-label {
    display: block;
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.mp-kpi-value {
    display: block;
    font-family: var(--font-sans);
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: var(--sp-1);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.2px;
}
.mp-kpi-sub {
    display: block;
    font-size: 12px;
    line-height: 16px;
    color: var(--text-secondary);
    margin-top: var(--sp-1);
}

.mp-kpi--risk {
    background: var(--gray-900);
    border-color: var(--gray-900);
}

.mp-kpi--risk .mp-kpi-label,
.mp-kpi--risk .mp-kpi-value {
    color: #fff;
}

.mp-kpi--risk .mp-kpi-sub {
    color: var(--gray-300);
}

/* Section grouping */
.mp-section {
    margin-top: var(--sp-6);
}
.mp-section-title {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Two-column responsive grid */
.mp-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

/* Card surface */
.mp-card {
    padding: var(--sp-5);
    background: var(--bg-paper);
    border: 1px solid var(--divider);
    border-radius: var(--shape-lg);
    box-shadow: var(--elev-1);
    transition: box-shadow var(--motion-base);
}
.mp-card:hover {
    box-shadow: var(--elev-2);
}
.mp-card h3 {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.1px;
}

.mp-empty {
    padding: var(--sp-5);
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

.mp-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--sp-10) 0;
    min-height: 240px;
}

/* Inline alert row used by drilldowns (distinct from AlertSignalRow component) */
.mp-alert-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--shape-md);
    border: 1px solid var(--divider);
    background: var(--bg-paper);
    margin-bottom: var(--sp-2);
    cursor: pointer;
    transition: background var(--motion-base), transform var(--motion-base), box-shadow var(--motion-base);
}
.mp-alert-row:hover {
    background: var(--action-hover);
    transform: translateX(2px);
    box-shadow: var(--elev-2);
}
.mp-alert-left {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
}
.mp-alert-left .material-icons {
    color: var(--primary-main);
    font-size: 20px;
}
.mp-alert-count {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
    padding: 2px var(--sp-2);
    border-radius: var(--shape-pill);
    background: var(--primary-lighter);
    font-variant-numeric: tabular-nums;
}

/* Bar chart row used in inventory / pipeline drilldowns */
.mp-bar-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-2);
    font-size: 13px;
}
.mp-bar-label {
    flex: 0 0 160px;
    color: var(--text-secondary);
    font-weight: 500;
}
.mp-bar-track {
    flex: 1;
    height: 8px;
    background: var(--divider);
    border-radius: var(--shape-pill);
    overflow: hidden;
}
.mp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-main), var(--chart-2));
    border-radius: var(--shape-pill);
    transition: width var(--motion-slow);
}
.mp-bar-value {
    flex: 0 0 64px;
    text-align: right;
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}