/* Direct Follow-up / Operations dashboard tab */

.dash-followup-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.dash-followup-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.dash-followup-updated {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.dash-followup-section-title {
    font-size: var(--fs-sm);
    font-weight: 700;
    margin: 0 0 var(--space-2);
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    text-transform: none;
}

.dash-followup-critical {
    margin-bottom: var(--space-3);
}

.dash-followup-queues {
    margin-top: var(--space-4);
}

/* Shared card grid for upper + lower sections (same responsive sizing). */
.dash-followup-card-grid,
.dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-3);
}

.dash-followup-card {
    position: relative;
    cursor: grab;
    user-select: none;
    touch-action: none;
    min-width: 0;
}

.dash-followup-card:active {
    cursor: grabbing;
}

.dash-followup-card.dash-followup-dragging {
    opacity: 0.55;
    outline: 2px dashed var(--primary);
    outline-offset: 2px;
}

.dash-followup-card.dash-followup-drag-over {
    box-shadow: 0 0 0 2px var(--primary);
}

.dash-followup-card .stat-card-link,
.dash-followup-card a.stat-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

/* Unified operational + queue card dimensions */
.dash-followup-stat,
.dash-kpi-stat,
.dash-queue-stat {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
    min-height: 88px;
    height: 100%;
    box-sizing: border-box;
    align-items: center;
}

.dash-followup-stat::after,
.dash-kpi-stat::after {
    opacity: 1;
}

.dash-followup-stat .stat-card-icon,
.dash-kpi-stat .stat-card-icon,
.dash-queue-stat .stat-card-icon {
    width: 36px;
    height: 36px;
    font-size: var(--fs-lg);
    border-radius: var(--radius);
}

.dash-followup-stat .stat-card-label,
.dash-kpi-stat .stat-card-label,
.dash-queue-stat .stat-card-label {
    font-size: var(--fs-xs);
    margin-bottom: 2px;
}

.dash-followup-stat .stat-card-value,
.dash-kpi-stat .stat-card-value,
.dash-queue-stat .stat-card-value {
    font-size: var(--fs-xl);
}

.dash-followup-stat .stat-card-sub,
.dash-kpi-stat .stat-card-sub,
.dash-queue-stat .stat-card-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.dash-stat-unavailable {
    opacity: 0.72;
}

.dash-followup-handle {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    color: var(--text-muted);
    background: transparent;
    border: 0;
    z-index: 2;
    cursor: grab;
}

.dash-followup-handle:hover {
    color: var(--primary);
    background: var(--surface-muted, rgba(0, 0, 0, 0.04));
}

.dash-followup-status.is-error {
    color: var(--danger, #c0392b);
}

.dash-followup-skeleton {
    min-height: 88px;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg, var(--surface-muted, #f1f5f9) 25%, var(--surface-card) 50%, var(--surface-muted, #f1f5f9) 75%);
    background-size: 200% 100%;
    animation: dash-skel 1.1s ease-in-out infinite;
}

@keyframes dash-skel {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.dash-quick-shortcuts {
    margin-top: var(--space-3);
    margin-bottom: var(--space-2);
}

/* Accordion-style shell so collapsed Quick Actions looks clickable */
.dash-quick-shortcuts-shell {
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.dash-quick-shortcuts-header {
    margin-bottom: 0;
}

.dash-quick-shortcuts-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 0;
    background: var(--surface-muted, rgba(0, 0, 0, 0.02));
    color: inherit;
    cursor: pointer;
    text-align: start;
    transition:
        background-color var(--transition-fast, 0.15s ease),
        border-color var(--transition-fast, 0.15s ease);
}

.dash-quick-shortcuts-toggle:hover {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface-muted, #f8fafc));
}

.dash-quick-shortcuts-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.dash-quick-shortcuts-toggle-main {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.dash-quick-shortcuts-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background: var(--primary-light, color-mix(in srgb, var(--primary) 12%, transparent));
    color: var(--primary);
    font-size: var(--fs-md);
    line-height: 1;
}

.dash-quick-shortcuts-toggle-copy {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2px;
    min-width: 0;
}

.dash-quick-shortcuts-title,
.dash-quick-shortcuts-toggle .dash-followup-section-title {
    margin: 0;
    color: var(--text-primary);
    font-weight: 700;
}

.dash-quick-shortcuts-hint {
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.3;
}

.dash-quick-shortcuts.is-collapsed .dash-quick-shortcuts-hint--expanded,
.dash-quick-shortcuts:not(.is-collapsed) .dash-quick-shortcuts-hint--collapsed {
    display: none;
}

.dash-quick-shortcuts-chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--surface-border);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: 1;
    transition:
        transform var(--transition-fast, 0.2s ease),
        color var(--transition-fast, 0.15s ease),
        border-color var(--transition-fast, 0.15s ease),
        background-color var(--transition-fast, 0.15s ease);
}

.dash-quick-shortcuts-toggle:hover .dash-quick-shortcuts-chevron {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--surface-border));
}

.dash-quick-shortcuts:not(.is-collapsed) .dash-quick-shortcuts-chevron {
    transform: rotate(180deg);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--surface-border));
}

.dash-quick-shortcuts:not(.is-collapsed) .dash-quick-shortcuts-header {
    border-bottom: 1px solid var(--surface-border);
}

.dash-quick-shortcuts-panel {
    padding: var(--space-3) var(--space-4);
    background: var(--surface-card);
}

.dash-quick-shortcuts.is-collapsed .dash-quick-shortcuts-panel {
    display: none;
}

.dash-loading--inline {
    padding: 16px;
    justify-content: flex-start;
}

@media (max-width: 1200px) {
    .dash-followup-card-grid,
    .dash-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .dash-followup-card-grid,
    .dash-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dash-followup-card-grid,
    .dash-kpi-grid {
        grid-template-columns: 1fr;
    }

    .dash-followup-header {
        flex-direction: column;
    }
}