/* =================================================================
   LUMEN ANALYTICS - Dashboard Styles
   Intelligence Platform Edition
   =================================================================

   COLOR PHILOSOPHY:
   - Card backgrounds: Always neutral (--glass-bg, --bg-elevated)
   - Status indicators: Use left borders (3px solid) for category
   - Badges/icons: Small colored backgrounds for status (success/warning/error)
   - Primary accent: --accent (indigo #6366F1) for all highlights
   - Avoid: Colored card backgrounds, gradient fills on data cards

   This creates visual consistency across all tabs while still
   communicating status through focused color indicators.
   ================================================================= */

/* ================================
   INTELLIGENCE PLATFORM SECTIONS
   ================================ */

/* ----------------------------------------
   SECTION 1: PRIORITY BANNER
   ---------------------------------------- */
.priority-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(239, 68, 68, 0.05) 100%);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-6);
    animation: bannerSlideIn 0.5s var(--ease-out);
}

@keyframes bannerSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.priority-banner[data-urgency="high"] {
    border-color: rgba(239, 68, 68, 0.35);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(245, 158, 11, 0.05) 100%);
}

.priority-banner[data-urgency="medium"] {
    border-color: rgba(245, 158, 11, 0.35);
}

.priority-banner[data-urgency="low"] {
    border-color: rgba(34, 197, 94, 0.35);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(99, 102, 241, 0.05) 100%);
}

.priority-banner--dismissed {
    display: none;
}

/* Dismissed alerts recovery link */
.dismissed-alerts-link {
    margin-bottom: var(--space-4);
}

.dismissed-alerts-link .btn {
    display: inline-flex;
    align-items: center;
    color: var(--text-tertiary);
    font-size: 0.8rem;
}

.dismissed-alerts-link .btn:hover {
    color: var(--accent-primary);
}

/* ----------------------------------------
   COLLAPSIBLE SECTIONS (Progressive Disclosure)
   ---------------------------------------- */
.collapsible-section {
    margin-bottom: var(--space-4);
}

.collapsible-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.collapsible-section__header:hover {
    border-color: var(--border-default);
    background: var(--bg-hover);
}

.collapsible-section--expanded .collapsible-section__header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.collapsible-section__title-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.collapsible-section__icon {
    width: 20px;
    height: 20px;
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
}

.collapsible-section--expanded .collapsible-section__icon {
    transform: rotate(90deg);
}

.collapsible-section__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.collapsible-section__preview {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.collapsible-section--expanded .collapsible-section__preview {
    display: none;
}

.collapsible-section__preview-stat {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.collapsible-section__preview-value {
    font-weight: 600;
    color: var(--text-primary);
}

.collapsible-section__preview-label {
    color: var(--text-tertiary);
}

.collapsible-section__content {
    display: none;
    padding: var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-top: none;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    animation: slideDown 0.2s ease;
}

.collapsible-section--expanded .collapsible-section__content {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reset internal section padding when inside collapsible */
.collapsible-section__content .performance-section,
.collapsible-section__content .pacing-section,
.collapsible-section__content .rebooking-section,
.collapsible-section__content .dashboard-section {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.collapsible-section__content .performance-section__header,
.collapsible-section__content .pacing-section__header,
.collapsible-section__content .rebooking-section__header,
.collapsible-section__content .dashboard-section__header {
    display: none; /* Header is in collapsible header now */
}

.priority-banner__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, 0.15);
    border-radius: var(--radius-lg);
    color: var(--warning);
}

.priority-banner[data-urgency="high"] .priority-banner__icon {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}

.priority-banner__icon svg {
    width: 24px;
    height: 24px;
}

.priority-banner__content {
    flex: 1;
    min-width: 0;
}

.priority-banner__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.priority-banner__urgency {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.priority-banner__urgency--high {
    background: rgba(239, 68, 68, 0.2);
    color: var(--error);
}

.priority-banner__urgency--medium {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.priority-banner__urgency--low {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success);
}

.priority-banner__type {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.priority-banner__message {
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.5;
    margin-bottom: var(--space-2);
}

.priority-banner__impact {
    color: var(--accent);
    font-weight: 600;
}

.priority-banner__insight {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.priority-banner__insight-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--accent);
    margin-top: 2px;
}

.priority-banner__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex-shrink: 0;
}

.priority-banner__cta {
    white-space: nowrap;
}

.priority-banner__dismiss {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: 0.8rem;
    padding: var(--space-2);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out);
}

.priority-banner__dismiss:hover {
    color: var(--text-secondary);
}

/* ----------------------------------------
   SPOTLIGHT SUMMARY BANNER (Compact)
   ---------------------------------------- */
.spotlight-banner {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.03) 100%);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}

.spotlight-banner__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.spotlight-banner__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    font-weight: 600;
    color: #ef4444;
}

.spotlight-banner__title svg {
    width: 18px;
    height: 18px;
}

.spotlight-banner__actions {
    display: flex;
    gap: var(--space-2);
}

.spotlight-banner__content {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.spotlight-banner__content strong {
    color: var(--text-primary);
}

.spotlight-banner__content em {
    font-style: normal;
    color: #ef4444;
}

/* ----------------------------------------
   OVERVIEW GRID (4 Cards)
   ---------------------------------------- */
.overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.overview-card {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    min-height: 180px;
}

.overview-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.overview-card__title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.overview-card__badge {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.overview-card__badge--success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.overview-card__badge--warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.overview-card__badge--error {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.overview-card__metrics {
    display: flex;
    gap: var(--space-4);
    flex: 1;
    align-items: flex-start;
}

.overview-card__metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.overview-card__metric--primary .overview-card__metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.overview-card__metric-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.overview-card__metric-label {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.overview-card__footer {
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--glass-border);
}

.overview-card__trend {
    font-size: 0.8rem;
    font-weight: 500;
}

.overview-card__trend--up {
    color: #22c55e;
}

.overview-card__trend--down {
    color: #ef4444;
}

.overview-card__insight {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

/* Responsive - stack on mobile */
@media (max-width: 768px) {
    .overview-grid {
        grid-template-columns: 1fr;
    }

    .overview-card {
        min-height: auto;
    }

    .spotlight-banner__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
}

/* ----------------------------------------
   SPOTLIGHT SUMMARY (AI Briefing)
   ---------------------------------------- */
.spotlight-summary {
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    border-left: 3px solid var(--accent);
}

.spotlight-summary__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.spotlight-summary__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent);
}

.spotlight-summary__title svg {
    width: 20px;
    height: 20px;
}

.spotlight-summary__date {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.spotlight-summary__content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.spotlight-summary__content strong {
    color: var(--text-primary);
}

.spotlight-summary__content em {
    font-style: normal;
    color: var(--accent);
}

/* ----------------------------------------
   PRIORITY ALERT (Snoozable)
   ---------------------------------------- */
.priority-alert {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(239, 68, 68, 0.03) 100%);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}

.priority-alert__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.15);
    border-radius: var(--radius-md);
    color: #ef4444;
}

.priority-alert__icon svg {
    width: 22px;
    height: 22px;
}

.priority-alert__content {
    flex: 1;
}

.priority-alert__label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ef4444;
    margin-bottom: 2px;
}

.priority-alert__message {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.priority-alert__message strong {
    color: var(--text-primary);
}

.priority-alert__actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* ----------------------------------------
   TODAY KPI GRID (Compact Summary)
   ---------------------------------------- */
.today-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

.today-kpi-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.today-kpi-card--primary {
    border-left: 3px solid var(--accent);
}

.today-kpi-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.today-kpi-card__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.today-kpi-card__badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.today-kpi-card__badge--success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.today-kpi-card__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.today-kpi-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.75rem;
}

.today-kpi-card__trend {
    font-weight: 600;
}

.today-kpi-card__trend--up {
    color: #22c55e;
}

.today-kpi-card__trend--down {
    color: #ef4444;
}

.today-kpi-card__benchmark {
    color: var(--text-tertiary);
}

@media (max-width: 1000px) {
    .today-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .today-kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------
   TODAY GRID (4 Cards) - DEPRECATED
   ---------------------------------------- */
.today-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.today-card {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
}

.today-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--glass-border);
}

.today-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.today-card__badge {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.today-card__badge--success {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.today-card__badge--warning {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.today-card__content {
    flex: 1;
}

.today-card__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.today-card__metric {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.today-card__metric--primary .today-card__metric-value {
    font-size: 1.75rem;
    font-weight: 700;
}

.today-card__metric-value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.today-card__metric-label {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.today-card__metric-sub {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.today-card__metric--warning .today-card__metric-value {
    color: #f59e0b;
}

.today-card__metric--opportunity .today-card__metric-value {
    color: #22c55e;
}

.today-card__progress {
    margin-bottom: var(--space-4);
}

.today-card__progress-bar {
    position: relative;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: visible;
    margin-bottom: var(--space-2);
}

.today-card__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, #818cf8 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.today-card__progress-expected {
    position: absolute;
    top: -4px;
    width: 2px;
    height: 16px;
    background: var(--text-tertiary);
    border-radius: 1px;
}

.today-card__progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-tertiary);
}

.today-card__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.today-card__list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

.today-card__list-item--urgent {
    border-left: 3px solid #ef4444;
}

.today-card__list-item--current {
    border-left: 3px solid var(--accent);
    background: rgba(99, 102, 241, 0.08);
}

.today-card__list-item--gap {
    border-left: 3px solid #22c55e;
    background: rgba(34, 197, 94, 0.08);
}

.today-card__insight {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    padding-top: var(--space-3);
    border-top: 1px solid var(--glass-border);
}

.today-card__insight strong {
    color: var(--text-primary);
}

/* Responsive */
@media (max-width: 1200px) {
    .today-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .priority-alert {
        flex-direction: column;
        align-items: flex-start;
    }

    .priority-alert__actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ----------------------------------------
   SECTION 2: YESTERDAY'S PERFORMANCE
   ---------------------------------------- */
.performance-section {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.performance-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--glass-border);
}

.performance-section__title-group {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.performance-section__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.performance-section__date {
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

.performance-verdict {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
}

.performance-verdict svg {
    width: 18px;
    height: 18px;
}

.performance-verdict--strong {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.performance-verdict--below {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.performance-verdict--weak {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}

.performance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.performance-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: all var(--duration-fast) var(--ease-out);
}

.performance-card:hover {
    border-color: var(--glass-border-hover);
    background: var(--glass-bg-hover);
}

/* Neutral card backgrounds - colors only on badges/indicators */
.performance-card--primary,
.performance-card--alert {
    background: var(--glass-bg);
    border-color: var(--glass-border);
}

.performance-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.performance-card__label {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.performance-card__badge {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.performance-card__badge--success {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.performance-card__badge--warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.performance-card__value-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.performance-card__value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.performance-card__value--warning {
    color: var(--warning);
}

.performance-card__vs {
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

.performance-card__benchmark {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.performance-card__lost {
    font-size: 0.85rem;
    color: var(--error);
    font-weight: 600;
}

.performance-card__progress {
    height: 6px;
    background: var(--glass-border);
    border-radius: var(--radius-full);
    overflow: visible;
    position: relative;
    margin-bottom: var(--space-3);
}

.performance-card__progress-fill {
    height: 100%;
    width: min(var(--progress), 100%);
    background: var(--success);
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-out);
}

.performance-card__progress-goal {
    position: absolute;
    top: -3px;
    left: 100%;
    width: 2px;
    height: 12px;
    background: var(--text-tertiary);
    border-radius: var(--radius-full);
}

.performance-card__trend {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--success);
}

.performance-card__trend svg {
    width: 12px;
    height: 12px;
}

.performance-card__detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.performance-card__detail-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.performance-card__detail-item--success {
    color: var(--success);
}

.performance-card__detail-item svg {
    width: 12px;
    height: 12px;
}

.performance-card__detail-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.performance-card__detail-dot--success {
    background: var(--success);
}

.performance-card__detail-dot--warning {
    background: var(--warning);
}

.performance-card__patients {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.performance-card__patient {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: var(--space-2);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-sm);
}

.performance-card__patient-value {
    color: var(--text-tertiary);
}

.performance-interpretation {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-lg);
}

.performance-interpretation__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-glow);
    border-radius: var(--radius-md);
    color: var(--accent);
}

.performance-interpretation__icon svg {
    width: 20px;
    height: 20px;
}

.performance-interpretation__content {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.performance-interpretation__content strong {
    color: var(--accent);
}

.performance-interpretation__content em {
    color: var(--text-tertiary);
    font-style: italic;
}

/* ----------------------------------------
   SECTION 3: GOAL PACING
   ---------------------------------------- */
.pacing-section {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.pacing-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.pacing-section__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.pacing-section__tabs {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-1);
    background: var(--glass-bg);
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border);
}

.pacing-tab {
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.pacing-tab:hover {
    color: var(--text-primary);
}

.pacing-tab--active {
    background: var(--accent);
    color: var(--bg-primary);
}

.pacing-view {
    display: none;
}

.pacing-view--active {
    display: block;
    animation: fadeIn 0.3s var(--ease-out);
}

.pacing-main {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
    margin-bottom: var(--space-6);
}

.pacing-progress-container {
    flex: 1;
}

.pacing-progress {
    margin-bottom: var(--space-4);
}

.pacing-progress__track {
    height: 16px;
    background: var(--glass-border);
    border-radius: var(--radius-full);
    position: relative;
    overflow: visible;
}

.pacing-progress__fill {
    height: 100%;
    width: min(var(--progress), 100%);
    background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-out);
    position: relative;
}

.pacing-progress__fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: -4px;
    width: 24px;
    height: 24px;
    background: var(--accent);
    border: 3px solid var(--bg-primary);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-glow);
}

.pacing-progress__expected {
    position: absolute;
    top: -6px;
    left: var(--expected);
    width: 4px;
    height: 28px;
    background: var(--text-tertiary);
    border-radius: var(--radius-full);
    z-index: 1;
}

.pacing-progress__expected::before {
    content: 'Expected';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.pacing-progress__markers {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-2);
}

.pacing-progress__marker {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    position: relative;
    transform: translateX(-50%);
}

.pacing-progress__marker:first-child {
    transform: translateX(0);
}

.pacing-progress__marker:last-child {
    transform: translateX(-100%);
}

.pacing-legend {
    display: flex;
    gap: var(--space-6);
}

.pacing-legend__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pacing-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.pacing-legend__dot--actual {
    background: var(--accent);
}

.pacing-legend__dot--expected {
    background: var(--text-tertiary);
}

.pacing-status {
    text-align: center;
    padding: var(--space-5);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    min-width: 180px;
}

/* Pacing status - subtle left border indicator only */
.pacing-status[data-status="ahead"],
.pacing-status[data-status="on-track"],
.pacing-status[data-status="at-risk"],
.pacing-status[data-status="behind"] {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    border-left-width: 3px;
}

.pacing-status[data-status="ahead"] { border-left-color: var(--success); }
.pacing-status[data-status="on-track"] { border-left-color: var(--accent); }
.pacing-status[data-status="at-risk"] { border-left-color: var(--warning); }
.pacing-status[data-status="behind"] { border-left-color: var(--error); }

.pacing-status__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.pacing-status__badge svg {
    width: 16px;
    height: 16px;
}

.pacing-status[data-status="ahead"] .pacing-status__badge {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.pacing-status[data-status="at-risk"] .pacing-status__badge {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.pacing-status[data-status="behind"] .pacing-status__badge {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}

.pacing-status__value {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pacing-details {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
}

.pacing-detail {
    text-align: center;
}

.pacing-detail__label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}

.pacing-detail__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.pacing-detail__value--highlight {
    color: var(--accent);
}

.pacing-projection {
    padding: var(--space-5);
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-lg);
}

.pacing-projection__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.85rem;
    color: var(--text-tertiary);
    margin-bottom: var(--space-3);
}

.pacing-projection__header svg {
    width: 18px;
    height: 18px;
    color: var(--accent);
}

.pacing-projection__content {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.pacing-projection__value {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pacing-projection__percent {
    font-size: 1rem;
    color: var(--text-secondary);
}

.pacing-projection__insight {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.pacing-projection__insight strong {
    color: var(--text-primary);
}

.pacing-projection__insight em {
    color: var(--accent);
    font-style: normal;
}

/* ----------------------------------------
   SECTION 4: REBOOKING OPPORTUNITIES
   ---------------------------------------- */
.rebooking-section {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}

.rebooking-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.rebooking-section__title-group {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
}

.rebooking-section__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.rebooking-section__summary {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.rebooking-section__summary strong {
    color: var(--accent);
}

.rebooking-section__actions {
    display: flex;
    gap: var(--space-3);
}

.rebooking-insight {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.rebooking-insight svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--accent);
}

.rebooking-insight strong {
    color: var(--accent);
}

.rebooking-filters {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.rebooking-filter {
    padding: var(--space-2) var(--space-4);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.rebooking-filter:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

.rebooking-filter--active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-primary);
}

.rebooking-table-container {
    overflow-x: auto;
    margin-bottom: var(--space-4);
}

.rebooking-table {
    width: 100%;
    border-collapse: collapse;
}

.rebooking-table th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--glass-border);
}

.rebooking-table td {
    padding: var(--space-4);
    font-size: 0.9rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--glass-border);
}

.rebooking-table__checkbox {
    width: 40px;
}

.rebooking-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
}

.rebooking-row {
    transition: background var(--duration-fast) var(--ease-out);
}

.rebooking-row:hover {
    background: var(--glass-bg-hover);
}

.rebooking-row--urgent {
    background: rgba(245, 158, 11, 0.03);
}

.rebooking-row--urgent:hover {
    background: rgba(245, 158, 11, 0.06);
}

.rebooking-patient {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.rebooking-patient__name {
    font-weight: 500;
    color: var(--text-primary);
}

.rebooking-patient__tag {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rebooking-patient__tag--vip {
    background: rgba(139, 92, 246, 0.15);
    color: var(--accent-secondary);
}

.rebooking-overdue {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
}

.rebooking-overdue--critical {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}

.rebooking-overdue--warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.rebooking-overdue--mild {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.rebooking-revenue {
    font-weight: 600;
    color: var(--accent);
}

.rebooking-actions {
    display: flex;
    gap: var(--space-2);
}

.rebooking-action {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.rebooking-action svg {
    width: 16px;
    height: 16px;
}

.rebooking-action--contact:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-primary);
}

.rebooking-action--schedule:hover {
    background: var(--success);
    border-color: var(--success);
    color: var(--bg-primary);
}

.rebooking-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rebooking-footer__showing {
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

.rebooking-footer__load-more {
    font-size: 0.85rem;
}

/* ================================
   DASHBOARD LAYOUT
   ================================ */
.dashboard-body {
    display: flex;
    min-height: 100vh;
    background: var(--bg-primary);
}

/* ================================
   SIDEBAR
   ================================ */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    background: var(--bg-secondary);
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: transform var(--duration-normal) var(--ease-out);
}

.sidebar--collapsed {
    transform: translateX(-100%);
}

.sidebar__header {
    padding: var(--space-5) var(--space-5);
    border-bottom: 1px solid var(--glass-border);
}

.sidebar__logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sidebar__logo-icon {
    width: 32px;
    height: 32px;
    color: var(--accent);
}

.sidebar__logo-text {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sidebar__nav {
    flex: 1;
    padding: var(--space-4) 0;
    overflow-y: auto;
}

.sidebar__section {
    padding: var(--space-2) var(--space-4);
    margin-bottom: var(--space-4);
}

.sidebar__section-title {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-1);
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: all var(--duration-fast) var(--ease-out);
    margin-bottom: var(--space-1);
}

.sidebar__link svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar__link:hover {
    background: var(--glass-bg);
    color: var(--text-primary);
}

.sidebar__divider {
    height: 1px;
    background: var(--border-subtle);
    margin: var(--space-3) var(--space-3);
}

.sidebar__link--active {
    background: var(--accent-glow);
    color: var(--accent);
}

.sidebar__link--active:hover {
    background: var(--accent-glow);
    color: var(--accent);
}

.sidebar__footer {
    padding: var(--space-4);
    border-top: 1px solid var(--glass-border);
}

.sidebar__user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
}

.sidebar__user-avatar {
    width: 36px;
    height: 36px;
    background: var(--accent-glow);
    color: var(--accent);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 600;
}

.sidebar__user-info {
    display: flex;
    flex-direction: column;
}

.sidebar__user-name {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}

.sidebar__user-role {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* ================================
   MAIN CONTENT
   ================================ */
.dashboard-main {
    flex: 1;
    margin-left: 260px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ================================
   HEADER
   ================================ */
.dashboard-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: rgba(10, 10, 15, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
}

.dashboard-header__left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.sidebar-toggle {
    display: none;
    padding: var(--space-2);
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
}

.sidebar-toggle svg {
    width: 24px;
    height: 24px;
}

.dashboard-header__title h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
    letter-spacing: -0.02em;
}

.dashboard-header__title p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}

.dashboard-header__context {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.dashboard-header__context #lastSyncTime {
    color: var(--text-tertiary);
}

.dashboard-header__right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.dashboard-header__date {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.dashboard-header__refresh {
    padding: var(--space-2);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.dashboard-header__refresh:hover {
    background: var(--glass-bg-hover);
    color: var(--text-primary);
}

.dashboard-header__refresh svg {
    width: 18px;
    height: 18px;
}

/* ================================
   DASHBOARD CONTENT
   ================================ */
.dashboard-content {
    flex: 1;
    padding: var(--space-4);
}

/* ================================
   VIEWS
   ================================ */
.view {
    display: none;
    width: 100%;
    padding: var(--space-4);
    box-sizing: border-box;
}

.view--active {
    display: block;
    animation: fadeIn 0.3s var(--ease-out);
}

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

/* Data update animation */
.data-updated {
    animation: dataFlash 0.5s ease-out;
}

@keyframes dataFlash {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* ================================
   KPI GRID
   ================================ */
.kpi-grid {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.kpi-grid--primary {
    grid-template-columns: 2fr 1fr;
}

.kpi-grid--secondary {
    grid-template-columns: repeat(4, 1fr);
}

/* ================================
   KPI CARDS
   ================================ */
.kpi-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    transition: all var(--duration-normal) var(--ease-out);
    cursor: pointer;
}

.kpi-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    transform: translateY(-2px);
}

/* Neutral highlight - accent border only */
.kpi-card--highlight {
    background: var(--glass-bg);
    border-color: rgba(99, 102, 241, 0.2);
}

.kpi-card--highlight:hover {
    border-color: rgba(99, 102, 241, 0.35);
}

.kpi-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.kpi-card__label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.kpi-card__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Unified accent color for live badges */
.kpi-card__badge--live {
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent);
}

.kpi-card__badge--live::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.kpi-card__badge--warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.kpi-card__value {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.kpi-card__value--warning {
    color: var(--warning);
}

.kpi-card__footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.kpi-card__trend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.85rem;
    font-weight: 600;
}

.kpi-card__trend svg {
    width: 12px;
    height: 12px;
}

.kpi-card__trend--up {
    color: var(--success);
}

.kpi-card__trend--down {
    color: var(--error);
}

.kpi-card__compare {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.kpi-card__chart {
    height: 60px;
}

.kpi-card__chart canvas {
    width: 100%;
    height: 100%;
}

/* Small KPI Cards */
.kpi-card--small {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
}

.kpi-card--small .kpi-card__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-glow);
    border-radius: var(--radius-md);
    color: var(--accent);
}

.kpi-card--small .kpi-card__icon svg {
    width: 20px;
    height: 20px;
}

.kpi-card--small .kpi-card__content {
    flex: 1;
}

.kpi-card--small .kpi-card__label {
    display: block;
    margin-bottom: var(--space-1);
}

.kpi-card--small .kpi-card__value {
    font-size: 1.5rem;
    margin-bottom: var(--space-1);
}

.kpi-card__benchmark {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.kpi-card__benchmark--good {
    color: var(--success);
}

/* Progress Bar */
.kpi-card__progress {
    height: 6px;
    background: var(--glass-border);
    border-radius: var(--radius-full);
    position: relative;
    overflow: hidden;
}

.kpi-card__progress-bar {
    height: 100%;
    width: var(--progress);
    background: var(--accent);
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-out);
}

.kpi-card__progress-target {
    position: absolute;
    top: -2px;
    left: var(--target);
    width: 2px;
    height: 10px;
    background: var(--text-tertiary);
    border-radius: var(--radius-full);
}

/* KPI Card List */
.kpi-card__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.kpi-card__list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    background: var(--glass-bg);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.kpi-card__action {
    padding: var(--space-1) var(--space-3);
    background: var(--accent);
    color: var(--bg-primary);
    border: none;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.kpi-card__action:hover {
    transform: scale(1.05);
}

/* ================================
   DASHBOARD SECTION
   ================================ */
.dashboard-section {
    margin-top: var(--space-8);
}

.dashboard-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.dashboard-section__header h2 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.dashboard-section__link {
    font-size: 0.85rem;
    color: var(--accent);
    transition: opacity var(--duration-fast) var(--ease-out);
}

.dashboard-section__link:hover {
    opacity: 0.8;
}

/* ================================
   SCHEDULE
   ================================ */
.schedule-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.schedule-item {
    display: grid;
    grid-template-columns: 100px 1fr 120px 100px;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    transition: all var(--duration-fast) var(--ease-out);
}

.schedule-item:hover {
    background: var(--glass-bg-hover);
}

/* Schedule items - border indicators only, neutral backgrounds */
.schedule-item--current {
    border-color: var(--accent);
    background: var(--glass-bg);
}

.schedule-item--gap {
    border-style: dashed;
    border-color: var(--warning);
    background: var(--glass-bg);
}

.schedule-item__time {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.schedule-item__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.schedule-item__name {
    font-weight: 500;
    color: var(--text-primary);
}

.schedule-item__service {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.schedule-item__gap-label {
    font-weight: 500;
    color: var(--warning);
}

.schedule-item__gap-value {
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

.schedule-item__provider {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.schedule-item__status {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
}

.schedule-item__status--confirmed {
    background: rgba(74, 222, 128, 0.15);
    color: var(--success);
}

.schedule-item__status--pending {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.schedule-item__fill-btn {
    padding: var(--space-2) var(--space-4);
    background: var(--warning);
    color: var(--bg-primary);
    border: none;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.schedule-item__fill-btn:hover {
    transform: scale(1.05);
}

/* ================================
   KPI DETAIL VIEWS
   ================================ */
.kpi-detail {
    /* Full width - removed max-width constraint */
}

.kpi-detail__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--glass-border);
}

.kpi-detail__title {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.kpi-detail__value {
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-3);
}

.kpi-detail__value--warning {
    background: var(--warning);
    -webkit-background-clip: text;
    background-clip: text;
}

.kpi-detail__meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: 0.9rem;
}

.kpi-detail__benchmark {
    color: var(--text-tertiary);
}

.kpi-detail__rank {
    text-align: right;
}

.kpi-detail__rank-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin-bottom: var(--space-1);
}

.kpi-detail__rank-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--success);
}

.kpi-detail__rank-value--warning {
    color: var(--warning);
}

.kpi-detail__actions {
    display: flex;
    gap: var(--space-3);
}

.kpi-detail__goal {
    text-align: right;
}

.kpi-detail__goal-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}

.kpi-detail__goal-bar {
    width: 200px;
    height: 8px;
    background: var(--glass-border);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.kpi-detail__goal-fill {
    height: 100%;
    width: var(--progress);
    background: var(--accent);
    border-radius: var(--radius-full);
}

.kpi-detail__goal-value {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Chart Placeholder */
.kpi-detail__chart {
    padding: var(--space-6);
    margin-bottom: var(--space-8);
}

.kpi-detail__chart h3 {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.chart-placeholder {
    height: 150px;
}

.chart-placeholder svg {
    width: 100%;
    height: 100%;
}

/* Breakdown List */
.kpi-detail__breakdown {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}

.kpi-detail__breakdown h3 {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.breakdown-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.breakdown-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2);
    align-items: center;
}

.breakdown-item__name {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.breakdown-item__value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.breakdown-item__bar {
    grid-column: 1 / -1;
    height: 8px;
    background: var(--glass-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.breakdown-item__bar::after {
    content: '';
    display: block;
    height: 100%;
    width: var(--width);
    background: var(--accent);
    border-radius: var(--radius-full);
    transition: width var(--duration-slow) var(--ease-out);
}

.breakdown-item__bar--good::after {
    background: var(--success);
}

.breakdown-item__bar--warning::after {
    background: var(--warning);
}

/* ================================
   AT-RISK CARDS
   ================================ */
.at-risk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.at-risk-card {
    padding: var(--space-5);
}

.at-risk-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--glass-border);
}

.at-risk-card__category {
    font-weight: 600;
    color: var(--text-primary);
}

.at-risk-card__count {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
}

.at-risk-card__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.at-risk-patient {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    background: var(--glass-bg);
    border-radius: var(--radius-md);
}

.at-risk-patient__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.at-risk-patient__name {
    font-weight: 500;
    color: var(--text-primary);
}

.at-risk-patient__detail {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.at-risk-patient__action {
    padding: var(--space-1) var(--space-3);
    background: var(--accent);
    color: var(--bg-primary);
    border: none;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

/* ================================
   CONVERSION FUNNEL
   ================================ */
.conversion-funnel {
    padding: var(--space-6);
}

.conversion-funnel h3 {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
}

.funnel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.funnel-step {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.funnel-step__bar {
    height: 40px;
    width: var(--width);
    background: var(--accent);
    border-radius: var(--radius-md);
    min-width: 60px;
}

.funnel-step__info {
    display: flex;
    flex-direction: column;
}

.funnel-step__label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.funnel-step__value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ================================
   CAPACITY SLOTS
   ================================ */
.capacity-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.capacity-slot {
    padding: var(--space-5);
}

.capacity-slot__time {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.capacity-slot__provider {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.capacity-slot__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: var(--space-4);
}

.capacity-slot__suggestions {
    margin-bottom: var(--space-4);
}

.capacity-slot__label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}

.capacity-slot__patient {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: var(--space-2);
    background: var(--glass-bg);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-1);
}

/* ================================
   BENCHMARK CARDS
   ================================ */
.benchmark-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.benchmark-card {
    padding: var(--space-6);
}

.benchmark-card__title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.benchmark-card__comparison {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.benchmark-card__yours,
.benchmark-card__industry {
    text-align: center;
}

.benchmark-card__label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-bottom: var(--space-1);
}

.benchmark-card__value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.benchmark-card__yours .benchmark-card__value {
    color: var(--accent);
}

.benchmark-card__status {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
}

.benchmark-card__status--good {
    background: rgba(74, 222, 128, 0.15);
    color: var(--success);
}

.benchmark-card__status--warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

/* ================================
   REPORTS
   ================================ */
.reports-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.report-card {
    padding: var(--space-6);
    text-align: center;
}

.report-card__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-glow);
    border-radius: var(--radius-lg);
    color: var(--accent);
}

.report-card__icon svg {
    width: 24px;
    height: 24px;
}

.report-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.report-card__description {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

/* ================================
   RESPONSIVE
   ================================ */
@media (max-width: 1200px) {
    .kpi-grid--secondary {
        grid-template-columns: repeat(2, 1fr);
    }

    .at-risk-grid,
    .capacity-grid,
    .benchmark-grid,
    .reports-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Intelligence Platform - 1200px */
    .performance-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pacing-details {
        grid-template-columns: repeat(2, 1fr);
    }

    .pacing-main {
        flex-direction: column;
    }

    .pacing-status {
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar--open {
        transform: translateX(0);
    }

    .dashboard-main {
        margin-left: 0;
    }

    .sidebar-toggle {
        display: block;
    }

    .kpi-grid--primary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-header {
        padding: var(--space-3) var(--space-4);
    }

    .dashboard-content {
        padding: var(--space-4);
    }

    .kpi-grid--secondary {
        grid-template-columns: 1fr;
    }

    .schedule-item {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }

    .schedule-item__provider {
        display: none;
    }

    .at-risk-grid,
    .capacity-grid,
    .benchmark-grid,
    .reports-grid {
        grid-template-columns: 1fr;
    }

    .kpi-detail__header {
        flex-direction: column;
        gap: var(--space-4);
    }

    .kpi-detail__rank,
    .kpi-detail__goal {
        text-align: left;
    }

    .kpi-detail__actions {
        flex-direction: column;
    }
}

/* ================================================================
   DATA-DENSE DASHBOARD VIEWS - Enhanced Analytics Styles
   ================================================================ */

/* ================================
   SHARED KPI GRID (all views)
   ================================ */
.revenue-kpi-grid,
.at-risk-kpi-grid,
.rebooking-kpi-grid,
.capacity-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.revenue-kpi-card,
.at-risk-kpi-card,
.rebooking-kpi-card,
.capacity-kpi-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: all var(--duration-fast) var(--ease-out);
}

.revenue-kpi-card:hover,
.at-risk-kpi-card:hover,
.rebooking-kpi-card:hover,
.capacity-kpi-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
}

/* Unified neutral card backgrounds across all views */
.revenue-kpi-card--primary,
.at-risk-kpi-card--primary,
.rebooking-kpi-card--primary,
.capacity-kpi-card--primary {
    background: var(--glass-bg);
    border-color: var(--glass-border);
}

.revenue-kpi-card__header,
.at-risk-kpi-card__header,
.rebooking-kpi-card__header,
.capacity-kpi-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.revenue-kpi-card__label,
.at-risk-kpi-card__label,
.rebooking-kpi-card__label,
.capacity-kpi-card__label {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.revenue-kpi-card__badge,
.at-risk-kpi-card__badge,
.rebooking-kpi-card__badge,
.capacity-kpi-card__badge {
    padding: 2px 6px;
    border-radius: var(--radius-full);
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    background: rgba(99, 102, 241, 0.15);
    color: var(--accent);
}

.revenue-kpi-card__badge--success { background: rgba(34, 197, 94, 0.15); color: var(--success); }
.revenue-kpi-card__badge--warning,
.at-risk-kpi-card__badge--warning,
.rebooking-kpi-card__badge--warning,
.capacity-kpi-card__badge--warning { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.revenue-secondary-card__badge--warning { background: rgba(245, 158, 11, 0.15); color: var(--warning); }

.revenue-kpi-card__value,
.at-risk-kpi-card__value,
.rebooking-kpi-card__value,
.capacity-kpi-card__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-1);
}

.revenue-kpi-card__meta,
.at-risk-kpi-card__meta,
.rebooking-kpi-card__meta,
.capacity-kpi-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.revenue-kpi-card__benchmark,
.rebooking-kpi-card__benchmark { font-size: 0.7rem; color: var(--text-tertiary); }

/* ================================
   REVENUE VIEW - Breakdown Grids
   ================================ */
.revenue-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.revenue-breakdown-card {
    padding: var(--space-4);
}

.revenue-breakdown-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--glass-border);
}

.revenue-breakdown-card__header h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.revenue-breakdown-card__period {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Service Mix List */
.service-mix-list { display: flex; flex-direction: column; gap: var(--space-3); }

.service-mix-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.service-mix-item:last-child { border-bottom: none; padding-bottom: 0; }

.service-mix-item__info { display: flex; flex-direction: column; gap: 2px; }
.service-mix-item__name { font-size: 0.85rem; color: var(--text-primary); }
.service-mix-item__appointments { font-size: 0.7rem; color: var(--text-tertiary); }

.service-mix-item__values { display: flex; align-items: baseline; gap: var(--space-3); text-align: right; }
.service-mix-item__revenue { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.service-mix-item__percent { font-size: 0.75rem; color: var(--accent); }

.service-mix-item__bar {
    grid-column: 1 / -1;
    height: 4px;
    background: var(--glass-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.service-mix-item__bar::after {
    content: '';
    display: block;
    height: 100%;
    width: var(--width);
    background: var(--accent);
    border-radius: var(--radius-full);
}

.service-mix-item__bar--retail::after { background: var(--accent-secondary); }

/* Provider Performance List */
.provider-performance-list { display: flex; flex-direction: column; gap: var(--space-3); }

.provider-performance-item {
    padding: var(--space-3);
    background: rgba(255,255,255,0.02);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent);
}

.provider-performance-item--attention { border-left-color: var(--warning); }

.provider-performance-item__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-2); }
.provider-performance-item__info { display: flex; flex-direction: column; gap: 2px; }
.provider-performance-item__name { font-size: 0.85rem; font-weight: 500; color: var(--text-primary); }
.provider-performance-item__role { font-size: 0.7rem; color: var(--text-tertiary); }
.provider-performance-item__revenue { font-size: 0.9rem; font-weight: 600; color: var(--accent); }

.provider-performance-item__metrics { display: flex; gap: var(--space-3); margin-bottom: var(--space-2); }
.provider-metric { display: flex; flex-direction: column; align-items: center; }
.provider-metric__label { font-size: 0.6rem; color: var(--text-tertiary); text-transform: uppercase; }
.provider-metric__value { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); }
.provider-metric__value--warning { color: var(--warning); }

.provider-performance-item__bar { height: 3px; background: var(--glass-border); border-radius: var(--radius-full); }
.provider-performance-item__bar::after { content: ''; display: block; height: 100%; width: var(--width); background: var(--accent); border-radius: var(--radius-full); }
.provider-performance-item__bar--warning::after { background: var(--warning); }

/* Daily Revenue Chart */
.revenue-trend-section {
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}

.revenue-trend-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.revenue-trend-section__title,
.rebooking-trend-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.revenue-trend-section__header h3,
.rebooking-trend-section__header h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* Chart Period Selector - uses global select styles */
.chart-period-select {
    font-size: 0.75rem;
    padding: var(--space-1) var(--space-3);
    padding-right: var(--space-6);
    min-width: 100px;
}

.revenue-trend-section__summary { display: flex; gap: var(--space-4); font-size: 0.8rem; }
.revenue-trend-section__avg { color: var(--text-secondary); }
.revenue-trend-section__total { color: var(--accent); font-weight: 600; }

.daily-revenue-chart {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    height: 120px;
    padding-bottom: var(--space-5);
}

.daily-revenue-bar {
    flex: 1;
    height: calc(var(--height) * 1);
    background: var(--accent);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 20px;
    opacity: 0.7;
}

.daily-revenue-bar:hover { opacity: 1; }
.daily-revenue-bar--highlight { opacity: 0.9; }
.daily-revenue-bar--low { background: var(--warning); opacity: 0.6; }
.daily-revenue-bar--today { background: linear-gradient(180deg, var(--accent), var(--accent-secondary)); opacity: 1; }

.daily-revenue-bar__value {
    position: absolute;
    top: -18px;
    font-size: 0.6rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.daily-revenue-bar__day {
    position: absolute;
    bottom: -20px;
    font-size: 0.65rem;
    color: var(--text-tertiary);
}

/* Secondary Cards Grid */
.revenue-secondary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.revenue-secondary-card {
    padding: var(--space-4);
}

.revenue-secondary-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.revenue-secondary-card__header h3 { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.revenue-secondary-card__badge { padding: 2px 6px; border-radius: var(--radius-full); font-size: 0.6rem; font-weight: 600; background: rgba(99, 102, 241, 0.15); color: var(--accent); }
.revenue-secondary-card__value { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-2); }
.revenue-secondary-card__meta { display: flex; align-items: center; gap: var(--space-2); font-size: 0.75rem; color: var(--text-tertiary); margin-bottom: var(--space-4); }

/* Membership Tiers */
.membership-tiers { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.membership-tier { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2); background: rgba(255,255,255,0.02); border-radius: var(--radius-sm); font-size: 0.75rem; }
.membership-tier__name { color: var(--text-secondary); }
.membership-tier__count { color: var(--text-tertiary); }
.membership-tier__mrr { color: var(--accent); font-weight: 500; }

.membership-stats { display: flex; gap: var(--space-3); }
.membership-stat { display: flex; flex-direction: column; align-items: center; flex: 1; padding: var(--space-2); background: rgba(255,255,255,0.02); border-radius: var(--radius-sm); }
.membership-stat__value { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.membership-stat__value--good { color: var(--success); }
.membership-stat__label { font-size: 0.6rem; color: var(--text-tertiary); }

/* Retail Products */
.retail-products { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.retail-product { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); background: rgba(255,255,255,0.02); border-radius: var(--radius-sm); }
.retail-product__rank { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; background: var(--glass-border); border-radius: var(--radius-full); font-size: 0.6rem; font-weight: 600; color: var(--text-tertiary); }
.retail-product__info { flex: 1; display: flex; flex-direction: column; }
.retail-product__name { font-size: 0.75rem; color: var(--text-secondary); }
.retail-product__units { font-size: 0.6rem; color: var(--text-tertiary); }
.retail-product__revenue { font-size: 0.75rem; font-weight: 500; color: var(--text-primary); }

.retail-attach-rate { display: flex; align-items: center; gap: var(--space-2); }
.retail-attach-rate__label { font-size: 0.7rem; color: var(--text-tertiary); }
.retail-attach-rate__bar { flex: 1; height: 6px; background: var(--glass-border); border-radius: var(--radius-full); overflow: hidden; }
.retail-attach-rate__fill { height: 100%; width: var(--width); background: var(--accent); border-radius: var(--radius-full); }
.retail-attach-rate__value { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); }

/* Marketing Channels */
.marketing-channels { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.marketing-channel { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2); background: rgba(255,255,255,0.02); border-radius: var(--radius-sm); font-size: 0.75rem; }
.marketing-channel__name { color: var(--text-secondary); }
.marketing-channel__leads { color: var(--text-tertiary); }
.marketing-channel__cac { color: var(--accent); }
.marketing-channel--organic .marketing-channel__cac { color: var(--success); }

.marketing-summary { display: flex; gap: var(--space-2); }
.marketing-summary__item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: var(--space-2); background: rgba(255,255,255,0.02); border-radius: var(--radius-sm); }
.marketing-summary__value { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.marketing-summary__label { font-size: 0.6rem; color: var(--text-tertiary); }

/* ================================
   AT-RISK VIEW - Enhanced Styles
   ================================ */
.at-risk-actions-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}

.at-risk-actions-bar__left,
.at-risk-actions-bar__right { display: flex; align-items: center; gap: var(--space-2); }
.at-risk-actions-bar__filter-label { font-size: 0.75rem; color: var(--text-tertiary); }
.at-risk-actions-bar__select { padding: var(--space-2) var(--space-3); background: var(--bg-secondary); border: 1px solid var(--glass-border); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 0.8rem; }

.at-risk-table-section { padding: var(--space-4); margin-bottom: var(--space-4); }
.at-risk-table-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--glass-border); }
.at-risk-table-header h3 { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.at-risk-table-header__count { font-size: 0.75rem; color: var(--text-tertiary); }

.at-risk-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.at-risk-table th { text-align: left; padding: var(--space-2) var(--space-3); font-size: 0.65rem; font-weight: 600; text-transform: uppercase; color: var(--text-tertiary); border-bottom: 1px solid var(--glass-border); }
.at-risk-table td { padding: var(--space-3); border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--text-secondary); }

.at-risk-table__row:hover { background: rgba(255,255,255,0.02); }
/* Critical rows use left border indicator, not colored background */
.at-risk-table__row--critical { border-left: 3px solid var(--error); }
.at-risk-table__row--critical:hover { background: rgba(255,255,255,0.03); }

.at-risk-table__patient { display: flex; align-items: center; gap: var(--space-2); }
.at-risk-table__patient-name { font-weight: 500; color: var(--text-primary); }
.at-risk-table__patient-tag { padding: 1px 4px; border-radius: var(--radius-sm); font-size: 0.55rem; font-weight: 700; text-transform: uppercase; }
.at-risk-table__patient-tag--vip { background: rgba(139, 92, 246, 0.15); color: var(--accent-secondary); }

.risk-score { display: flex; align-items: center; gap: var(--space-1); }
.risk-score__value { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 700; }
.risk-score--high .risk-score__value { background: rgba(239, 68, 68, 0.15); color: var(--error); }
.risk-score--medium .risk-score__value { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.risk-score--low .risk-score__value { background: rgba(34, 197, 94, 0.15); color: var(--success); }

.at-risk-overdue { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-weight: 600; }
.at-risk-overdue--critical { background: rgba(239, 68, 68, 0.15); color: var(--error); }
.at-risk-overdue--warning { background: rgba(245, 158, 11, 0.15); color: var(--warning); }

.at-risk-table__actions { display: flex; gap: var(--space-1); }
.at-risk-action { padding: var(--space-1) var(--space-2); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); font-size: 0.65rem; color: var(--text-secondary); cursor: pointer; }
.at-risk-action:hover { background: var(--accent); border-color: var(--accent); color: var(--bg-primary); }

.at-risk-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.at-risk-category-card { padding: var(--space-4); }
.at-risk-category-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.at-risk-category-card__title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.at-risk-category-card__count { font-size: 0.75rem; color: var(--text-tertiary); }
.at-risk-category-card__metrics { display: flex; gap: var(--space-3); margin-bottom: var(--space-3); }
.at-risk-category-metric { display: flex; flex-direction: column; align-items: center; flex: 1; }
.at-risk-category-metric__value { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.at-risk-category-metric__label { font-size: 0.6rem; color: var(--text-tertiary); }
.at-risk-category-card__bar { height: 6px; background: var(--glass-border); border-radius: var(--radius-full); margin-bottom: var(--space-1); }
.at-risk-category-card__bar-fill { height: 100%; width: var(--width); background: var(--accent); border-radius: var(--radius-full); }
.at-risk-category-card__bar-fill--warning { background: var(--warning); }
.at-risk-category-card__bar-label { font-size: 0.65rem; color: var(--text-tertiary); }

/* ================================
   REBOOKING VIEW - Enhanced Styles
   ================================ */
.rebooking-breakdown-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); }
.rebooking-breakdown-card { padding: var(--space-4); }
.rebooking-breakdown-card__header { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--glass-border); }
.rebooking-breakdown-card__header h3 { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }

.rebooking-category-list { display: flex; flex-direction: column; gap: var(--space-3); }
.rebooking-category-item { padding: var(--space-3); background: rgba(255,255,255,0.02); border-radius: var(--radius-md); }
.rebooking-category-item__info { display: flex; justify-content: space-between; margin-bottom: var(--space-1); }
.rebooking-category-item__name { font-size: 0.85rem; font-weight: 500; color: var(--text-primary); }
.rebooking-category-item__window { font-size: 0.7rem; color: var(--text-tertiary); }
.rebooking-category-item__stats { display: flex; justify-content: space-between; margin-bottom: var(--space-2); }
.rebooking-category-item__rate { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.rebooking-category-item__rate--warning { color: var(--warning); }
.rebooking-category-item__count { font-size: 0.75rem; color: var(--text-tertiary); }
.rebooking-category-item__bar-container { position: relative; height: 6px; background: var(--glass-border); border-radius: var(--radius-full); }
.rebooking-category-item__bar { height: 100%; width: var(--width); background: var(--accent); border-radius: var(--radius-full); }
.rebooking-category-item__bar--good { background: var(--success); }
.rebooking-category-item__bar--warning { background: var(--warning); }
.rebooking-category-item__benchmark { position: absolute; top: -2px; left: var(--pos); width: 2px; height: 10px; background: var(--text-tertiary); border-radius: var(--radius-full); }

.rebooking-provider-list { display: flex; flex-direction: column; gap: var(--space-3); }
.rebooking-provider-item { padding: var(--space-3); background: rgba(255,255,255,0.02); border-radius: var(--radius-md); border-left: 3px solid var(--accent); }
.rebooking-provider-item--attention { border-left-color: var(--warning); }
.rebooking-provider-item__header { display: flex; justify-content: space-between; margin-bottom: var(--space-2); }
.rebooking-provider-item__info { display: flex; flex-direction: column; }
.rebooking-provider-item__name { font-size: 0.85rem; font-weight: 500; color: var(--text-primary); }
.rebooking-provider-item__role { font-size: 0.7rem; color: var(--text-tertiary); }
.rebooking-provider-item__rate { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.rebooking-provider-item__rate--warning { color: var(--warning); }
.rebooking-provider-item__metrics { display: flex; gap: var(--space-3); margin-bottom: var(--space-2); font-size: 0.7rem; color: var(--text-tertiary); }
.rebooking-provider-item__bar { height: 4px; background: var(--glass-border); border-radius: var(--radius-full); }
.rebooking-provider-item__bar::after { content: ''; display: block; height: 100%; width: var(--width); background: var(--accent); border-radius: var(--radius-full); }
.rebooking-provider-item__bar--warning::after { background: var(--warning); }

.rebooking-trend-section { padding: var(--space-4); margin-bottom: var(--space-5); position: relative; }
.rebooking-trend-section__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.rebooking-trend-section__header h3 { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.rebooking-trend-section__summary { display: flex; gap: var(--space-4); font-size: 0.8rem; }
.rebooking-trend-section__avg { color: var(--text-secondary); }

.rebooking-weekly-chart { display: flex; align-items: flex-end; gap: var(--space-3); height: 100px; padding-bottom: var(--space-5); }
.rebooking-weekly-bar { flex: 1; height: calc(var(--height) * 1); background: var(--accent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; position: relative; opacity: 0.7; min-height: 20px; }
.rebooking-weekly-bar:hover { opacity: 1; }
.rebooking-weekly-bar--current { background: linear-gradient(180deg, var(--accent), var(--accent-secondary)); opacity: 1; }
.rebooking-weekly-bar__value { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 0.65rem; color: var(--text-secondary); }
.rebooking-weekly-bar__week { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 0.6rem; color: var(--text-tertiary); }

.rebooking-benchmark-line { position: absolute; bottom: 75px; left: var(--space-4); right: var(--space-4); height: 1px; background: var(--warning); opacity: 0.5; }
.rebooking-benchmark-line__label { position: absolute; right: 0; top: -14px; font-size: 0.6rem; color: var(--warning); }

.rebooking-insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.rebooking-insight-card { padding: var(--space-4); }
.rebooking-insight-card__header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.rebooking-insight-card__icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 700; }
.rebooking-insight-card__icon--opportunity { background: rgba(245, 158, 11, 0.15); color: var(--warning); }
.rebooking-insight-card__icon--training { background: rgba(99, 102, 241, 0.15); color: var(--accent); }
.rebooking-insight-card__icon--success { background: rgba(34, 197, 94, 0.15); color: var(--success); }
.rebooking-insight-card__header h4 { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); }
.rebooking-insight-card__content { margin-bottom: var(--space-3); }
.rebooking-insight-card__content p { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; }
.rebooking-insight-card__content strong { color: var(--text-primary); }

/* ================================
   CAPACITY VIEW - Calendar & Slots
   ================================ */
.capacity-calendar-section { padding: var(--space-4); margin-bottom: var(--space-5); }
.capacity-calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--glass-border); }
.capacity-calendar-header h3 { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.capacity-calendar-nav { display: flex; align-items: center; gap: var(--space-3); }
.capacity-calendar-nav__btn { padding: var(--space-1) var(--space-2); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 0.7rem; cursor: pointer; }
.capacity-calendar-nav__current { font-size: 0.85rem; color: var(--text-secondary); }

.capacity-calendar { width: 100%; }
.capacity-calendar__row { display: grid; grid-template-columns: 150px repeat(6, 1fr); gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.capacity-calendar__row--header { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: var(--text-tertiary); border-bottom: 1px solid var(--glass-border); padding-bottom: var(--space-3); }
.capacity-calendar__row--totals { background: rgba(255,255,255,0.02); border-radius: var(--radius-md); padding: var(--space-3); margin-top: var(--space-2); border-bottom: none; }

.capacity-calendar__provider-col { display: flex; flex-direction: column; justify-content: center; }
.capacity-calendar__provider-name { font-size: 0.8rem; font-weight: 500; color: var(--text-primary); }
.capacity-calendar__provider-role { font-size: 0.65rem; color: var(--text-tertiary); }

.capacity-calendar__day-col { text-align: center; }
.capacity-day { padding: var(--space-2); background: rgba(255,255,255,0.02); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 2px; }
.capacity-day--today { border: 1px solid var(--accent); background: rgba(99, 102, 241, 0.05); }
.capacity-day--weekend { background: rgba(255,255,255,0.01); }
.capacity-day--off { background: rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; }
.capacity-day__label { font-size: 0.7rem; color: var(--text-tertiary); }
.capacity-day__booked { font-size: 0.75rem; font-weight: 600; color: var(--success); }
.capacity-day__open { font-size: 0.65rem; color: var(--text-tertiary); }
.capacity-day__open--warning { color: var(--warning); font-weight: 600; }
.capacity-day__open--critical { color: var(--error); font-weight: 600; }
.capacity-day__util { font-size: 0.6rem; color: var(--text-tertiary); }
.capacity-day__util--full { color: var(--success); }
.capacity-day__util--low { color: var(--warning); }

.capacity-totals { font-size: 0.7rem; color: var(--text-secondary); line-height: 1.4; }
.capacity-totals__open { color: var(--warning); }

.capacity-today-section { margin-bottom: var(--space-5); }
.capacity-today-section__title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-4); }

.capacity-slots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.capacity-slot-card { padding: var(--space-4); }
.capacity-slot-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.capacity-slot-card__time { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.capacity-slot-card__urgency { font-size: 0.65rem; color: var(--text-tertiary); padding: 2px 6px; background: rgba(255,255,255,0.05); border-radius: var(--radius-full); }
.capacity-slot-card__urgency--high { background: rgba(239, 68, 68, 0.15); color: var(--error); }

.capacity-slot-card__provider { display: flex; justify-content: space-between; margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--glass-border); }
.capacity-slot-card__provider-name { font-size: 0.85rem; color: var(--text-secondary); }
.capacity-slot-card__value { font-size: 0.9rem; font-weight: 600; color: var(--accent); }

.capacity-slot-card__suggestions { margin-bottom: var(--space-3); }
.capacity-slot-card__suggestions-label { display: block; font-size: 0.7rem; color: var(--text-tertiary); margin-bottom: var(--space-2); }
.capacity-slot-card__suggestions-alt { display: block; font-size: 0.75rem; color: var(--text-tertiary); font-style: italic; }
.capacity-slot-card__patient { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2); background: rgba(255,255,255,0.02); border-radius: var(--radius-sm); margin-bottom: var(--space-1); }
.capacity-slot-card__patient-name { font-size: 0.8rem; font-weight: 500; color: var(--text-primary); }
.capacity-slot-card__patient-reason { font-size: 0.7rem; color: var(--text-tertiary); }
.capacity-slot-card__patient-action { padding: 2px 8px; background: var(--accent); border: none; border-radius: var(--radius-full); font-size: 0.6rem; font-weight: 600; color: var(--bg-primary); cursor: pointer; }

.capacity-slot-card__actions { display: flex; gap: var(--space-2); }
.capacity-slot-card__actions .btn { flex: 1; font-size: 0.75rem; padding: var(--space-2); }

.capacity-bottom-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.capacity-waitlist-card, .capacity-stats-card { padding: var(--space-4); }
.capacity-waitlist-card__header, .capacity-stats-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--glass-border); }
.capacity-waitlist-card__header h3, .capacity-stats-card__header h3 { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.capacity-waitlist-card__count { font-size: 0.75rem; color: var(--text-tertiary); }

.capacity-waitlist-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.capacity-waitlist-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); background: rgba(255,255,255,0.02); border-radius: var(--radius-sm); }
.capacity-waitlist-item__name { font-size: 0.8rem; font-weight: 500; color: var(--text-primary); min-width: 80px; }
.capacity-waitlist-item__service { font-size: 0.75rem; color: var(--text-secondary); }
.capacity-waitlist-item__pref { font-size: 0.7rem; color: var(--text-tertiary); flex: 1; }
.capacity-waitlist-item__action { padding: 2px 8px; background: var(--accent); border: none; border-radius: var(--radius-full); font-size: 0.6rem; font-weight: 600; color: var(--bg-primary); cursor: pointer; }

.capacity-stats-list { display: flex; flex-direction: column; gap: var(--space-2); }
.capacity-stat-item { display: flex; justify-content: space-between; padding: var(--space-2); background: rgba(255,255,255,0.02); border-radius: var(--radius-sm); }
.capacity-stat-item__label { font-size: 0.8rem; color: var(--text-secondary); }
.capacity-stat-item__value { font-size: 0.8rem; font-weight: 500; color: var(--text-primary); }

/* ================================
   RESPONSIVE - Data-Dense Views
   ================================ */
@media (max-width: 1400px) {
    .revenue-kpi-grid, .at-risk-kpi-grid, .rebooking-kpi-grid, .capacity-kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .revenue-secondary-grid { grid-template-columns: repeat(2, 1fr); }
    .rebooking-insights-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
    .revenue-kpi-grid, .at-risk-kpi-grid, .rebooking-kpi-grid, .capacity-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .revenue-breakdown-grid, .rebooking-breakdown-grid, .capacity-bottom-grid { grid-template-columns: 1fr; }
    .at-risk-category-grid, .capacity-slots-grid { grid-template-columns: 1fr; }
    .capacity-calendar__row { grid-template-columns: 100px repeat(6, 1fr); }
}

@media (max-width: 768px) {
    .revenue-kpi-grid, .at-risk-kpi-grid, .rebooking-kpi-grid, .capacity-kpi-grid { grid-template-columns: 1fr; }
    .revenue-secondary-grid, .rebooking-insights-grid { grid-template-columns: 1fr; }
    .at-risk-actions-bar { flex-direction: column; gap: var(--space-3); }
    .capacity-calendar { overflow-x: auto; }
    .capacity-calendar__row { min-width: 600px; }
}

/* ================================================================
   DRAGGABLE SIDEBAR ITEMS
   ================================================================ */
.sidebar__draggable-list {
    display: flex;
    flex-direction: column;
}

.sidebar__link--draggable {
    position: relative;
    cursor: grab;
    transition: all 0.15s ease;
}

.sidebar__link--draggable:active {
    cursor: grabbing;
}

.sidebar__link--draggable.dragging {
    opacity: 0.5;
    background: var(--accent-glow);
    transform: scale(0.98);
}

.sidebar__link--draggable.drag-over {
    border-top: 2px solid var(--accent);
    margin-top: -2px;
}

.drag-handle {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s ease;
    letter-spacing: -2px;
    cursor: grab;
}

.sidebar__link--draggable:hover .drag-handle {
    opacity: 0.6;
}

.sidebar__link--draggable:active .drag-handle {
    opacity: 1;
    cursor: grabbing;
}

/* Adjust link padding to make room for drag handle */
.sidebar__link--draggable {
    padding-left: calc(var(--space-4) + 12px) !important;
}

/* ================================================================
   RESIZABLE SIDEBAR
   ================================================================ */
/* Note: sidebar must remain position: fixed (set above)
   Only add resize constraints here */
.sidebar {
    min-width: 180px;
    max-width: 400px;
}

.sidebar__resize-handle {
    position: absolute;
    top: 0;
    right: -4px;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
    background: transparent;
    z-index: 101;
    transition: background 0.15s ease;
}

.sidebar__resize-handle:hover,
.sidebar__resize-handle.resizing {
    background: var(--accent);
    opacity: 0.5;
}

.sidebar__resize-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 40px;
    background: var(--glass-border);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.sidebar__resize-handle:hover::after {
    opacity: 1;
}

/* Compact sidebar text for more data cuts */
.sidebar__link span:last-child {
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar__section-title {
    font-size: 0.65rem;
}

/* ================================================================
   LOCATION SWITCHER
   ================================================================ */
.location-switcher {
    position: relative;
    margin-left: var(--space-3);
}

/* Uses global select styles - only overrides specific properties */
.location-switcher__select {
    min-width: 160px;
    background-color: var(--glass-bg);
}

.location-switcher__select:hover {
    background-color: var(--glass-bg-hover);
}

.location-switcher__select optgroup {
    font-weight: 600;
    color: var(--text-tertiary);
}

/* Status indicators in dropdown */
.location-switcher__status {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: var(--space-2);
}

.location-switcher__status--warning {
    background: #f59e0b;
}

.location-switcher__status--top {
    background: #facc15;
}

.location-switcher__status--healthy {
    background: #22c55e;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .location-switcher {
        margin-left: var(--space-2);
    }

    .location-switcher__select {
        min-width: 120px;
        font-size: 0.8rem;
        padding: var(--space-1) var(--space-3);
        padding-right: var(--space-6);
    }
}

/* ============================================================================
   SPOTLIGHT VIEW - Priority Stream (3-30-300 Framework)
   ============================================================================ */

.spotlight-container {
    max-width: 800px;
}

/* 3-Second Pulse - Overall Health */
.spotlight-pulse {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
    border-left: 3px solid var(--success);
}

.spotlight-pulse__status {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    min-width: 80px;
}

.spotlight-pulse__indicator {
    display: flex;
    gap: 4px;
}

.spotlight-pulse__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
}

.spotlight-pulse__dot--empty {
    background: var(--border-subtle);
}

.spotlight-pulse__indicator--warning .spotlight-pulse__dot:not(.spotlight-pulse__dot--empty) {
    background: var(--warning);
}

.spotlight-pulse__indicator--critical .spotlight-pulse__dot:not(.spotlight-pulse__dot--empty) {
    background: var(--error);
}

.spotlight-pulse__label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--success);
}

.spotlight-pulse__summary {
    flex: 1;
}

.spotlight-pulse__headline {
    font-size: 0.95rem;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.5;
}

.spotlight-pulse__headline strong {
    color: var(--warning);
}

.spotlight-pulse__cta {
    padding: var(--space-2) var(--space-3);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.spotlight-pulse__cta:hover {
    color: var(--text-primary);
    border-color: var(--border-default);
    background: var(--bg-hover);
}

/* Priority Stream */
.spotlight-stream {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

@media (max-width: 1200px) {
    .spotlight-stream {
        grid-template-columns: 1fr;
    }
}

/* Section Headers */
.spotlight-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.spotlight-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--space-2);
}

.spotlight-section__header--collapsible {
    cursor: pointer;
    user-select: none;
}

.spotlight-section__header--collapsible:hover {
    background: var(--bg-hover);
    margin: 0 calc(-1 * var(--space-2));
    padding: var(--space-2);
    padding-bottom: var(--space-2);
    border-radius: var(--radius-md);
}

.spotlight-section__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-sm);
}

.spotlight-section__badge--critical {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}

.spotlight-section__badge--important {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.spotlight-section__badge--info {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent-primary);
}

.spotlight-section__badge--opportunity {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
}

.spotlight-section__badge--monitor {
    background: rgba(148, 163, 184, 0.1);
    color: var(--text-secondary);
}

.spotlight-section__value {
    font-size: 0.8rem;
    font-weight: 600;
}

.spotlight-section__value--positive {
    color: var(--success);
}

.spotlight-section__count {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.spotlight-section__right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.spotlight-section__chevron {
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
}

.spotlight-section--collapsed .spotlight-section__chevron {
    transform: rotate(-90deg);
}

.spotlight-section--collapsed .spotlight-section__content {
    display: none;
}

/* Spotlight Cards */
.spotlight-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.2s ease;
}

.spotlight-card:hover {
    border-color: var(--border-default);
}

.spotlight-card--critical {
    border-left: 3px solid var(--error);
}

.spotlight-card--important {
    border-left: 3px solid var(--warning);
}

.spotlight-card--info {
    border-left: 3px solid var(--accent-primary);
}

/* Spotlight cards - left border indicators only, neutral backgrounds */
.spotlight-card--opportunity {
    border-left: 3px solid var(--success);
    background: var(--glass-bg);
}

.spotlight-card--monitor {
    border-left: 3px solid var(--text-tertiary);
    background: var(--glass-bg);
}

.spotlight-card__main {
    padding: var(--space-3);
}

.spotlight-card__category {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}

.spotlight-card__title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-3) 0;
    line-height: 1.4;
}

.spotlight-card__metric {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.spotlight-card__metric-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.spotlight-card--critical .spotlight-card__metric-value {
    color: var(--error);
}

.spotlight-card__metric-value--positive {
    color: var(--success) !important;
}

.spotlight-card__metric-label {
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.spotlight-card__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.spotlight-card__action-primary {
    flex-shrink: 0;
}

.spotlight-card__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: auto;
}

.spotlight-card__toggle svg {
    transition: transform 0.2s ease;
}

.spotlight-card[data-expanded="true"] .spotlight-card__toggle svg {
    transform: rotate(180deg);
}

.spotlight-card[data-expanded="true"] .spotlight-card__toggle-text {
    display: none;
}

/* Detail Panel (Progressive Disclosure) */
.spotlight-card__detail {
    display: none;
    padding: var(--space-4);
    padding-top: 0;
    border-top: 1px solid var(--border-subtle);
    margin-top: var(--space-3);
    animation: slideDown 0.2s ease-out;
}

.spotlight-card[data-expanded="true"] .spotlight-card__detail {
    display: block;
}

.spotlight-card__reasoning {
    margin-bottom: var(--space-3);
}

.spotlight-card__reasoning-header {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}

.spotlight-card__reasoning p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.spotlight-card__confidence {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--border-subtle);
    font-size: 0.75rem;
}

.spotlight-card__confidence-label {
    color: var(--text-tertiary);
}

.spotlight-card__confidence-value {
    font-weight: 600;
    color: var(--success);
}

.spotlight-card__confidence-source {
    color: var(--text-tertiary);
}

/* Footer */
.spotlight-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
}

.spotlight-footer__updated {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* Responsive */
@media (max-width: 768px) {
    .spotlight-pulse {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .spotlight-pulse__status {
        flex-direction: row;
    }

    .spotlight-pulse__cta {
        width: 100%;
        text-align: center;
    }

    .spotlight-card__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .spotlight-card__toggle {
        margin-left: 0;
        justify-content: center;
    }
}