/*
 * StudentFocus Design System
 * Component Styles
 *
 * Reusable component patterns
 */

/* ============================================
   BUTTONS
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sf-space-2);
    padding: var(--sf-space-3) var(--sf-space-6);
    font-size: var(--sf-text-base);
    font-weight: var(--sf-font-medium);
    line-height: var(--sf-leading-none);
    text-decoration: none;
    border-radius: var(--sf-radius-lg);
    border: 1px solid transparent;
    transition: all var(--sf-transition-fast);
    cursor: pointer;
    white-space: nowrap;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Button Variants */
.btn-primary {
    background-color: var(--sf-primary-600);
    color: white;
    box-shadow: var(--sf-shadow-sm);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--sf-primary-700);
    box-shadow: var(--sf-shadow-md);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background-color: var(--sf-secondary-600);
    color: white;
    box-shadow: var(--sf-shadow-sm);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--sf-secondary-700);
    box-shadow: var(--sf-shadow-md);
}

.btn-success {
    background-color: var(--sf-success-600);
    color: white;
}

.btn-success:hover:not(:disabled) {
    background-color: var(--sf-success-700);
}

.btn-warning {
    background-color: var(--sf-warning-600);
    color: white;
}

.btn-warning:hover:not(:disabled) {
    background-color: var(--sf-warning-700);
}

.btn-error {
    background-color: var(--sf-error-600);
    color: white;
}

.btn-error:hover:not(:disabled) {
    background-color: var(--sf-error-700);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--sf-primary-600);
    color: var(--sf-primary-600);
}

.btn-outline:hover:not(:disabled) {
    background-color: var(--sf-primary-50);
}

.btn-ghost {
    background-color: transparent;
    color: var(--sf-neutral-700);
}

.btn-ghost:hover:not(:disabled) {
    background-color: var(--sf-neutral-100);
}

/* Button Sizes */
.btn-sm {
    padding: var(--sf-space-2) var(--sf-space-4);
    font-size: var(--sf-text-sm);
}

.btn-lg {
    padding: var(--sf-space-4) var(--sf-space-8);
    font-size: var(--sf-text-lg);
}

.btn-block {
    display: flex;
    width: 100%;
}

/* ============================================
   CARDS
   ============================================ */

.card {
    background-color: white;
    border-radius: var(--sf-radius-xl);
    box-shadow: var(--sf-shadow-sm);
    border: 1px solid var(--sf-neutral-200);
    overflow: hidden;
    transition: box-shadow var(--sf-transition-fast);
}

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

.card-header {
    padding: var(--sf-space-6);
    border-bottom: 1px solid var(--sf-neutral-200);
    background-color: var(--sf-neutral-50);
    color: var(--sf-neutral-900);
}

/* Card header with colored backgrounds */
.card-header.bg-primary {
    background-color: var(--sf-primary-600);
    color: white;
    border-bottom-color: var(--sf-primary-700);
}

.card-header.bg-secondary {
    background-color: var(--sf-secondary-600);
    color: white;
    border-bottom-color: var(--sf-secondary-700);
}

.card-header.bg-success {
    background-color: var(--sf-success-600);
    color: white;
    border-bottom-color: var(--sf-success-700);
}

.card-header.bg-warning {
    background-color: var(--sf-warning-600);
    color: var(--sf-neutral-900);
    border-bottom-color: var(--sf-warning-700);
}

.card-header.bg-danger,
.card-header.bg-error {
    background-color: var(--sf-error-600);
    color: white;
    border-bottom-color: var(--sf-error-700);
}

.card-header.bg-info {
    background-color: var(--sf-info-600);
    color: white;
    border-bottom-color: var(--sf-info-700);
}

/* Ensure text elements in colored headers have proper contrast */
.card-header.bg-primary h1,
.card-header.bg-primary h2,
.card-header.bg-primary h3,
.card-header.bg-primary h4,
.card-header.bg-primary h5,
.card-header.bg-primary h6,
.card-header.bg-secondary h1,
.card-header.bg-secondary h2,
.card-header.bg-secondary h3,
.card-header.bg-secondary h4,
.card-header.bg-secondary h5,
.card-header.bg-secondary h6,
.card-header.bg-success h1,
.card-header.bg-success h2,
.card-header.bg-success h3,
.card-header.bg-success h4,
.card-header.bg-success h5,
.card-header.bg-success h6,
.card-header.bg-info h1,
.card-header.bg-info h2,
.card-header.bg-info h3,
.card-header.bg-info h4,
.card-header.bg-info h5,
.card-header.bg-info h6,
.card-header.bg-danger h1,
.card-header.bg-danger h2,
.card-header.bg-danger h3,
.card-header.bg-danger h4,
.card-header.bg-danger h5,
.card-header.bg-danger h6 {
    color: white;
    margin-bottom: 0;
}

.card-header.bg-warning h1,
.card-header.bg-warning h2,
.card-header.bg-warning h3,
.card-header.bg-warning h4,
.card-header.bg-warning h5,
.card-header.bg-warning h6 {
    color: var(--sf-neutral-900);
    margin-bottom: 0;
}

/* Text color helper for colored headers */
.card-header.text-white {
    color: white;
}

.card-header.text-white * {
    color: white;
}

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

.card-footer {
    padding: var(--sf-space-6);
    border-top: 1px solid var(--sf-neutral-200);
    background-color: var(--sf-neutral-50);
}

.card-title {
    font-size: var(--sf-text-xl);
    font-weight: var(--sf-font-semibold);
    margin-bottom: var(--sf-space-2);
    color: var(--sf-neutral-900);
}

.sf-card-title {
    font-size: var(--sf-text-xl);
    font-weight: var(--sf-font-semibold);
    margin-bottom: var(--sf-space-2);
    color: var(--sf-neutral-900);
}

.card-subtitle {
    font-size: var(--sf-text-sm);
    color: var(--sf-neutral-600);
    margin-bottom: 0;
}

/* Card Variants */
.card-interactive {
    cursor: pointer;
    transition: all var(--sf-transition-fast);
}

.card-interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--sf-shadow-lg);
}

.card-compact {
    padding: var(--sf-space-4);
}

.card-compact .card-header,
.card-compact .card-body,
.card-compact .card-footer {
    padding: var(--sf-space-4);
}

/* ============================================
   BADGES
   ============================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-1);
    padding: var(--sf-space-1) var(--sf-space-3);
    font-size: var(--sf-text-xs);
    font-weight: var(--sf-font-medium);
    line-height: var(--sf-leading-none);
    border-radius: var(--sf-radius-full);
    text-transform: uppercase;
    letter-spacing: var(--sf-tracking-wide);
}

.badge-primary {
    background-color: var(--sf-primary-100);
    color: var(--sf-primary-800);
}

.badge-success {
    background-color: var(--sf-success-100);
    color: var(--sf-success-800);
}

.badge-warning {
    background-color: var(--sf-warning-100);
    color: var(--sf-warning-800);
}

.badge-error {
    background-color: var(--sf-error-100);
    color: var(--sf-error-800);
}

.badge-neutral {
    background-color: var(--sf-text-heading);
    color: var(--sf-neutral-800);
}

/* Executive Mode - Health Badges */
.badge-health-green {
    background-color: var(--sf-health-green-bg);
    color: var(--sf-success-900);
}

.badge-health-yellow {
    background-color: var(--sf-health-yellow-bg);
    color: var(--sf-warning-900);
}

.badge-health-red {
    background-color: var(--sf-health-red-bg);
    color: var(--sf-error-900);
}

/* ============================================
   ALERTS
   ============================================ */

.alert {
    display: flex;
    gap: var(--sf-space-3);
    padding: var(--sf-space-4);
    border-radius: var(--sf-radius-lg);
    border-left: 4px solid;
}

.alert-icon {
    flex-shrink: 0;
    font-size: var(--sf-text-xl);
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: var(--sf-font-semibold);
    margin-bottom: var(--sf-space-1);
}

.alert-message {
    font-size: var(--sf-text-sm);
    line-height: var(--sf-leading-relaxed);
}

.alert-success {
    background-color: var(--sf-success-50);
    border-color: var(--sf-success-600);
    color: var(--sf-success-900);
}

.alert-warning {
    background-color: var(--sf-warning-50);
    border-color: var(--sf-warning-600);
    color: var(--sf-warning-900);
}

.alert-error {
    background-color: var(--sf-error-50);
    border-color: var(--sf-error-600);
    color: var(--sf-error-900);
}

.alert-info {
    background-color: var(--sf-info-50);
    border-color: var(--sf-info-600);
    color: var(--sf-info-900);
}

/* SF Alert variants (alternative naming) */
.sf-alert {
    display: flex;
    align-items: center;
    gap: var(--sf-space-3);
    padding: var(--sf-space-4);
    border-radius: var(--sf-radius-lg);
    border-left: 4px solid;
    margin-bottom: var(--sf-space-4);
}

.sf-alert--success {
    background-color: var(--sf-success-50);
    border-color: var(--sf-success-600);
    color: var(--sf-success-900);
}

.sf-alert--warn {
    background-color: var(--sf-warning-50);
    border-color: var(--sf-warning-600);
    color: var(--sf-warning-900);
}

.sf-alert--danger {
    background-color: var(--sf-error-50);
    border-color: var(--sf-error-600);
    color: var(--sf-error-900);
}

.sf-alert--info {
    background-color: var(--sf-info-50);
    border-color: var(--sf-info-600);
    color: var(--sf-info-900);
}

/* ============================================
   FORM CONTROLS
   ============================================ */

.form-group {
    margin-bottom: var(--sf-space-4);
}

.form-label {
    display: block;
    font-size: var(--sf-text-sm);
    font-weight: var(--sf-font-medium);
    color: var(--sf-neutral-700);
    margin-bottom: var(--sf-space-2);
}

.form-label-required::after {
    content: " *";
    color: var(--sf-error-600);
}

.form-control {
    display: block;
    width: 100%;
    padding: var(--sf-space-3) var(--sf-space-4);
    font-size: var(--sf-text-base);
    line-height: var(--sf-leading-normal);
    color: var(--sf-neutral-900);
    background-color: white;
    border: 1px solid var(--sf-neutral-300);
    border-radius: var(--sf-radius-lg);
    transition: all var(--sf-transition-fast);
}

.form-control:hover {
    border-color: var(--sf-text-muted);
}

.form-control:focus {
    outline: none;
    border-color: var(--sf-primary-500);
    box-shadow: 0 0 0 3px var(--sf-primary-100);
}

.form-control:disabled {
    background-color: var(--sf-text-heading);
    cursor: not-allowed;
    opacity: 0.6;
}

.form-control.is-invalid {
    border-color: var(--sf-error-500);
}

.form-control.is-invalid:focus {
    border-color: var(--sf-error-500);
    box-shadow: 0 0 0 3px var(--sf-error-100);
}

.form-control.is-valid {
    border-color: var(--sf-success-500);
}

.form-hint {
    display: block;
    font-size: var(--sf-text-sm);
    color: var(--sf-neutral-600);
    margin-top: var(--sf-space-2);
}

.form-error {
    display: block;
    font-size: var(--sf-text-sm);
    color: var(--sf-error-600);
    margin-top: var(--sf-space-2);
}

/* Checkboxes and Radio Buttons */
.form-check {
    display: flex;
    align-items: center;
    gap: var(--sf-space-3);
    margin-bottom: var(--sf-space-3);
}

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--sf-neutral-400);
    border-radius: var(--sf-radius-base);
    cursor: pointer;
}

.form-check-input[type="radio"] {
    border-radius: var(--sf-radius-full);
}

.form-check-input:checked {
    background-color: var(--sf-primary-600);
    border-color: var(--sf-primary-600);
}

.form-check-label {
    cursor: pointer;
    user-select: none;
    outline: none;
}

.form-check-label:focus,
.form-check-label:active {
    outline: none;
    border: none;
}

/* ============================================
   LOADING STATES
   ============================================ */

.spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid var(--sf-neutral-200);
    border-top-color: var(--sf-primary-600);
    border-radius: var(--sf-radius-full);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--sf-neutral-200) 0%,
        var(--sf-neutral-100) 50%,
        var(--sf-neutral-200) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--sf-radius-md);
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 1rem;
    margin-bottom: var(--sf-space-2);
}

.skeleton-title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: var(--sf-space-4);
}

/* ============================================
   TOOLTIPS
   ============================================ */

.tooltip {
    position: relative;
}

.tooltip-text {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-0.5rem);
    padding: var(--sf-space-2) var(--sf-space-3);
    background-color: var(--sf-bg-primary);
    color: white;
    font-size: var(--sf-text-xs);
    border-radius: var(--sf-radius-md);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sf-transition-fast);
    z-index: var(--sf-z-tooltip);
}

.tooltip:hover .tooltip-text,
.tooltip:focus .tooltip-text {
    opacity: 1;
}

/* ============================================
   DIVIDERS
   ============================================ */

.divider {
    height: 1px;
    background-color: var(--sf-neutral-200);
    margin: var(--sf-space-6) 0;
}

.divider-vertical {
    width: 1px;
    height: auto;
    background-color: var(--sf-neutral-200);
    margin: 0 var(--sf-space-4);
}

/* ============================================
   EMPTY STATES
   ============================================ */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sf-space-16) var(--sf-space-8);
    text-align: center;
}

.empty-state-icon {
    font-size: 4rem;
    color: var(--sf-text-muted);
    margin-bottom: var(--sf-space-4);
}

.empty-state-title {
    font-size: var(--sf-text-xl);
    font-weight: var(--sf-font-semibold);
    color: var(--sf-neutral-900);
    margin-bottom: var(--sf-space-2);
}

.empty-state-message {
    font-size: var(--sf-text-base);
    color: var(--sf-neutral-600);
    max-width: var(--sf-width-md);
    margin-bottom: var(--sf-space-6);
}

/* ============================================
   DASHBOARD STATISTICS CARDS
   ============================================ */

.dashboard-container {
    padding: var(--sf-space-8);
    max-width: 1400px;
    margin: 0 auto;
}

.dashboard-title {
    color: var(--sf-neutral-800);
    font-weight: var(--sf-font-bold);
    margin-bottom: var(--sf-space-4);
    font-size: var(--sf-text-3xl);
}

.stat-card {
    background: white;
    border-radius: var(--sf-radius-xl);
    padding: var(--sf-space-6);
    box-shadow: var(--sf-shadow-md);
    display: flex;
    align-items: center;
    gap: var(--sf-space-4);
    transition: transform var(--sf-transition-base), box-shadow var(--sf-transition-base);
    height: 100%;
    border: 1px solid var(--sf-neutral-200);
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sf-shadow-xl);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--sf-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--sf-text-3xl);
    flex-shrink: 0;
}

.stat-pomodoro .stat-icon {
    background: var(--sf-primary-600);
    color: white;
}

.stat-completed .stat-icon {
    background: var(--sf-success-600);
    color: white;
}

.stat-outstanding .stat-icon {
    background: var(--sf-warning-600);
    color: white;
}

.stat-overdue .stat-icon {
    background: var(--sf-error-600);
    color: white;
}

.stat-content {
    flex: 1;
}

.stat-value {
    font-size: var(--sf-text-4xl);
    font-weight: var(--sf-font-bold);
    color: var(--sf-neutral-800);
    margin: 0;
    line-height: var(--sf-leading-none);
}

.stat-label {
    color: var(--sf-neutral-600);
    margin: var(--sf-space-2) 0 var(--sf-space-1) 0;
    font-size: var(--sf-text-base);
    font-weight: var(--sf-font-medium);
}

.stat-subtext {
    color: var(--sf-neutral-500);
    font-size: var(--sf-text-sm);
    margin: 0;
}

/* One Thing Card Variant */
.one-thing-card {
    background: var(--sf-primary-700);
    color: white;
    border: none;
}

.one-thing-card .card-title {
    color: white;
    font-weight: var(--sf-font-semibold);
}

.one-thing-card .lead {
    font-size: var(--sf-text-2xl);
    font-weight: var(--sf-font-medium);
    color: white;
}

.one-thing-card .text-muted {
    color: rgba(255, 255, 255, 0.85) !important;
}

.one-thing-card p {
    color: white;
}

/* Weekly Streak Component */
.streak-container {
    display: flex;
    gap: var(--sf-space-4);
    justify-content: center;
    flex-wrap: wrap;
}

.streak-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sf-space-2);
}

.streak-circle {
    width: 50px;
    height: 50px;
    border-radius: var(--sf-radius-full);
    border: 3px solid var(--sf-neutral-300);
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    transition: all var(--sf-transition-slow);
    font-size: var(--sf-text-lg);
    color: var(--sf-text-muted);
}

.streak-day.active .streak-circle {
    border-color: var(--sf-success-600);
    background: linear-gradient(135deg, var(--sf-success-500) 0%, var(--sf-success-400) 100%);
    color: white;
}

.streak-day span {
    font-size: var(--sf-text-sm);
    color: var(--sf-neutral-600);
    font-weight: var(--sf-font-medium);
}

/* Dashboard Responsive */

/* iPad Air and similar tablets (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .stat-card {
        padding: var(--sf-space-5);
        gap: var(--sf-space-3);
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: var(--sf-text-2xl);
    }
    
    .stat-value {
        font-size: var(--sf-text-3xl);
    }
    
    .stat-label {
        font-size: var(--sf-text-sm);
    }
}

@media (max-width: 768px) {
    .dashboard-container {
        padding: var(--sf-space-4);
    }
    
    .stat-card {
        flex-direction: column;
        text-align: center;
        padding: var(--sf-space-5);
    }

    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: var(--sf-text-2xl);
    }

    .stat-value {
        font-size: var(--sf-text-3xl);
    }
    
    .streak-container {
        gap: var(--sf-space-2);
    }
    
    .streak-circle {
        width: 42px;
        height: 42px;
        font-size: var(--sf-text-base);
    }
}

/* iPhone 14 Pro Max and similar (430px and below) */
@media (max-width: 430px) {
    /* === STAT CARDS === */
    .stat-card {
        padding: var(--sf-space-3) !important;
        gap: var(--sf-space-2) !important;
    }
    
    .stat-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: var(--sf-text-lg) !important;
    }
    
    .stat-content {
        flex: 1;
        min-width: 0;
    }
    
    .stat-value {
        font-size: var(--sf-text-xl) !important;
        line-height: 1.2 !important;
        margin-bottom: var(--sf-space-1) !important;
    }
    
    .stat-label {
        font-size: 0.75rem !important;
        margin: var(--sf-space-1) 0 0 0 !important;
        line-height: 1.3 !important;
    }
    
    .stat-subtext {
        font-size: 0.6875rem !important;
        margin-top: var(--sf-space-1) !important;
    }
    
    /* === TODAY'S ONE THING CARD === */
    .one-thing-card .card-body {
        padding: var(--sf-space-4) !important;
    }
    
    .one-thing-card .card-title,
    .one-thing-card .sf-card-title {
        font-size: var(--sf-text-lg) !important;
        margin-bottom: var(--sf-space-2) !important;
    }
    
    .one-thing-card .card-title i,
    .one-thing-card .sf-card-title i {
        font-size: 1rem !important;
    }
    
    .one-thing-card .lead {
        font-size: var(--sf-text-lg) !important;
        line-height: 1.3 !important;
    }
    
    .one-thing-card p {
        font-size: var(--sf-text-sm) !important;
    }
    
    /* === TODAY'S ROUTINES & HABITS CARDS === */
    
    /* Card body padding */
    .card-body {
        padding: var(--sf-space-4) !important;
    }
    
    /* Card section titles */
    .card-body h5,
    .card-body .sf-card-title {
        font-size: var(--sf-text-base) !important;
        margin-bottom: var(--sf-space-3) !important;
    }
    
    .card-body h5 i,
    .card-body .sf-card-title i {
        font-size: var(--sf-text-sm) !important;
    }
    
    /* Routine/Habit item cards - change to vertical layout */
    .card-body .d-flex.align-items-center.gap-3.p-3.border.rounded {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: var(--sf-space-3) !important;
        gap: var(--sf-space-2) !important;
    }
    
    /* Top row: Icon + Title + Badge */
    .card-body .d-flex.align-items-center.gap-3.p-3.border.rounded > .flex-shrink-0 {
        display: flex !important;
        align-items: center !important;
        gap: var(--sf-space-2) !important;
        width: 100% !important;
    }
    
    /* Category icon containers */
    .card-body .flex-shrink-0 > div[style*="width: 40px"],
    .card-body .flex-shrink-0 > div[style*="width: 32px"] {
        width: 28px !important;
        height: 28px !important;
        font-size: var(--sf-text-sm) !important;
        flex-shrink: 0 !important;
    }
    
    /* Make flex-1 container take full width */
    .card-body .d-flex.align-items-center.gap-3.p-3.border.rounded > .flex-1 {
        width: 100% !important;
        min-width: 0 !important;
    }
    
    /* Routine/Habit titles (h6) - single line with ellipsis */
    .card-body .flex-1 h6 {
        font-size: var(--sf-text-sm) !important;
        line-height: 1.3 !important;
        margin-bottom: 0 !important;
        font-weight: var(--sf-font-semibold) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 1 !important;
    }
    
    /* Metadata row (time, duration, badges) */
    .card-body .flex-1 .text-sm {
        font-size: var(--sf-text-xs) !important;
        line-height: 1.4 !important;
        flex-wrap: wrap !important;
        margin-top: var(--sf-space-1) !important;
    }
    
    .card-body .flex-1 .text-sm span {
        font-size: var(--sf-text-xs) !important;
    }
    
    .card-body .flex-1 .text-sm i {
        font-size: var(--sf-text-xs) !important;
    }
    
    /* Category badges */
    .card-body .badge {
        padding: 2px var(--sf-space-2) !important;
        font-size: 0.625rem !important;
        letter-spacing: 0.02em !important;
    }
    
    /* Complete buttons - full width at bottom */
    .card-body .d-flex.align-items-center.gap-3.p-3.border.rounded > .flex-shrink-0:last-child {
        width: 100% !important;
        margin-top: var(--sf-space-2) !important;
    }
    
    /* Scoped to routine/habit item rows only — prevents overflow on action buttons elsewhere */
    .card-body .d-flex.align-items-center.gap-3.p-3.border.rounded .btn-sm {
        width: 100% !important;
        padding: var(--sf-space-2) var(--sf-space-3) !important;
        font-size: var(--sf-text-sm) !important;
        white-space: nowrap !important;
        min-height: 36px !important;
        justify-content: center !important;
    }

    .card-body .d-flex.align-items-center.gap-3.p-3.border.rounded .btn-sm i {
        font-size: var(--sf-text-sm) !important;
        margin-right: var(--sf-space-1) !important;
    }

    .card-body .d-flex.align-items-center.gap-3.p-3.border.rounded .btn-sm span {
        display: inline !important;
    }
    
    /* Header "View All" button */
    .card-body .d-flex.justify-content-between.align-items-center .btn-outline {
        padding: 6px var(--sf-space-3) !important;
        font-size: var(--sf-text-xs) !important;
    }
    
    .card-body .d-flex.justify-content-between.align-items-center .btn-outline i {
        font-size: var(--sf-text-xs) !important;
    }
    
    /* Loading spinner */
    .card-body .spinner {
        width: 1rem !important;
        height: 1rem !important;
        border-width: 2px !important;
    }
    
    /* "View more" links */
    .card-body .text-center a {
        font-size: var(--sf-text-xs) !important;
    }
}

/* ============================================
   DARK MODE SUPPORT
   Comprehensive dark mode styles for all components
   ============================================ */

/* Explicit dark theme � always active when user selects dark */
:root.theme-dark {
        
        /* === BUTTONS === */
        .btn-outline {
            border-color: var(--sf-primary-500);
            color: var(--sf-primary-500);
        }
        
        .btn-outline:hover:not(:disabled) {
            background-color: var(--sf-primary-900);
            border-color: var(--sf-primary-400);
            color: var(--sf-primary-400);
        }
        
        .btn-ghost {
            color: var(--sf-text-secondary);
        }
        
        .btn-ghost:hover:not(:disabled) {
            background-color: var(--sf-bg-secondary);
            color: var(--sf-text-heading);
        }
        
        /* === CARDS === */
        .card {
            background-color: var(--sf-bg-secondary);
            border-color: var(--sf-border-color);
        }
        
        .card-header {
            background-color: var(--sf-bg-primary);
            border-bottom-color: var(--sf-border-color);
            color: var(--sf-text-heading);
        }
        
        .card-body {
            color: var(--sf-text-heading);
        }
        
        .card-footer {
            background-color: var(--sf-bg-primary);
            border-top-color: var(--sf-border-color);
            color: var(--sf-text-secondary);
        }
        
        .card-title,
        .sf-card-title {
            color: var(--sf-text-heading);
        }
        
        .card-subtitle {
            color: var(--sf-text-muted);
        }
        
        .card-interactive:hover {
            border-color: var(--sf-neutral-600);
        }
        
        /* === BADGES === */
        .badge-primary {
            background-color: var(--sf-primary-900);
            color: var(--sf-primary-200);
        }
        
        .badge-success {
            background-color: var(--sf-success-900);
            color: var(--sf-success-200);
        }
        
        .badge-warning {
            background-color: var(--sf-warning-900);
            color: var(--sf-warning-200);
        }
        
        .badge-error {
            background-color: var(--sf-error-900);
            color: var(--sf-error-200);
        }
        
        .badge-neutral {
            background-color: var(--sf-neutral-700);
            color: var(--sf-neutral-200);
        }
        
        .badge-health-green {
            background-color: var(--sf-health-green-bg);
            color: var(--sf-success-300);
        }
        
        .badge-health-yellow {
            background-color: var(--sf-health-yellow-bg);
            color: var(--sf-warning-300);
        }
        
        .badge-health-red {
            background-color: var(--sf-health-red-bg);
            color: var(--sf-error-300);
        }
        
        /* === ALERTS === */
        .alert-success,
        .sf-alert--success {
            background-color: var(--sf-success-900);
            border-color: var(--sf-success-500);
            color: var(--sf-success-200);
        }
        
        .alert-warning,
        .sf-alert--warn {
            background-color: var(--sf-warning-900);
            border-color: var(--sf-warning-500);
            color: var(--sf-warning-200);
        }
        
        .alert-error,
        .sf-alert--danger {
            background-color: var(--sf-error-900);
            border-color: var(--sf-error-500);
            color: var(--sf-error-200);
        }
        
        .alert-info,
        .sf-alert--info {
            background-color: var(--sf-info-900);
            border-color: var(--sf-info-500);
            color: var(--sf-info-200);
        }
        
        /* === FORM CONTROLS === */
        .form-label {
            color: var(--sf-text-secondary);
        }
        
        .form-control {
            color: var(--sf-text-heading);
            background-color: var(--sf-bg-secondary);
            border-color: var(--sf-neutral-600);
        }
        
        .form-control:hover {
            border-color: var(--sf-neutral-500);
        }
        
        .form-control:focus {
            border-color: var(--sf-primary-500);
            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
        }
        
        .form-control:disabled {
            background-color: var(--sf-bg-primary);
            opacity: 0.5;
        }
        
        .form-control::placeholder {
            color: var(--sf-neutral-500);
        }
        
        .form-control.is-invalid {
            border-color: var(--sf-error-500);
        }
        
        .form-control.is-invalid:focus {
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
        }
        
        .form-control.is-valid {
            border-color: var(--sf-success-500);
        }
        
        .form-hint {
            color: var(--sf-text-muted);
        }
        
        .form-error {
            color: var(--sf-error-400);
        }
        
        .form-check-input {
            border-color: var(--sf-neutral-500);
            background-color: var(--sf-bg-secondary);
        }
        
        .form-check-input:checked {
            background-color: var(--sf-primary-600);
            border-color: var(--sf-primary-600);
        }
        
        .form-check-label {
            color: var(--sf-text-secondary);
        }
        
        /* === LOADING STATES === */
        .spinner {
            border-color: var(--sf-border-color);
            border-top-color: var(--sf-primary-500);
        }
        
        .skeleton {
            background: linear-gradient(
                90deg,
                var(--sf-neutral-800) 0%,
                var(--sf-neutral-700) 50%,
                var(--sf-neutral-800) 100%
            );
        }
        
        /* === TOOLTIPS === */
        .tooltip-text {
            background-color: var(--sf-neutral-200);
            color: var(--sf-neutral-900);
        }
        
        /* === DIVIDERS === */
        .divider,
        .divider-vertical {
            background-color: var(--sf-neutral-700);
        }
        
        /* === EMPTY STATES === */
        .empty-state-icon {
            color: var(--sf-neutral-600);
        }
        
        .empty-state-title {
            color: var(--sf-text-heading);
        }
        
        .empty-state-message {
            color: var(--sf-text-muted);
        }
        
        /* === DASHBOARD STATS === */
        .dashboard-title {
            color: var(--sf-text-heading);
        }
        
        .stat-card {
            background: var(--sf-bg-secondary);
            border-color: var(--sf-border-color);
        }
        
        .stat-card:hover {
            border-color: var(--sf-neutral-600);
        }
        
        .stat-value {
            color: var(--sf-text-heading);
        }
        
        .stat-label {
            color: var(--sf-text-secondary);
        }
        
        .stat-subtext {
            color: var(--sf-neutral-500);
        }
        
        /* === STREAK COMPONENT === */
        .streak-circle {
            background: var(--sf-bg-secondary);
            border-color: var(--sf-neutral-600);
            color: var(--sf-neutral-500);
        }
        
        .streak-day span {
            color: var(--sf-text-muted);
        }
        
        /* Active state still uses gradient but with better contrast */
        .streak-day.active .streak-circle {
            border-color: var(--sf-success-500);
            background: linear-gradient(135deg, var(--sf-success-600) 0%, var(--sf-success-500) 100%);
            color: white;
        }
        
        /* === COLORED HEADER CARDS (maintain contrast in dark mode) === */
        .card-header.bg-warning {
            color: var(--sf-neutral-900);
        }
        
        .card-header.bg-warning h1,
        .card-header.bg-warning h2,
        .card-header.bg-warning h3,
        .card-header.bg-warning h4,
        .card-header.bg-warning h5,
        .card-header.bg-warning h6 {
            color: var(--sf-neutral-900);
        }
        
        /* === CARD BODY TEXT === */
        .card-body p,
        .card-body .lead {
            color: var(--sf-text-secondary);
        }
        
        .card-body strong {
            color: var(--sf-text-heading);
        }
        
        .card-body a {
            color: var(--sf-primary-400);
        }
        
        .card-body a:hover {
            color: var(--sf-primary-300);
        }
        
        .card-body .text-muted {
            color: var(--sf-text-muted) !important;
        }
}

/* OS dark mode preference � applies when theme-default and OS is dark */
@media (prefers-color-scheme: dark) {
    :root.theme-default {
        /* === BUTTONS === */
        .btn-outline {
            border-color: var(--sf-primary-500);
            color: var(--sf-primary-500);
        }
        
        .btn-outline:hover:not(:disabled) {
            background-color: var(--sf-primary-900);
            border-color: var(--sf-primary-400);
            color: var(--sf-primary-400);
        }
        
        .btn-ghost {
            color: var(--sf-text-secondary);
        }
        
        .btn-ghost:hover:not(:disabled) {
            background-color: var(--sf-bg-secondary);
            color: var(--sf-text-heading);
        }
        
        /* === CARDS === */
        .card {
            background-color: var(--sf-bg-secondary);
            border-color: var(--sf-border-color);
        }
        
        .card-header {
            background-color: var(--sf-bg-primary);
            border-bottom-color: var(--sf-border-color);
            color: var(--sf-text-heading);
        }
        
        .card-body {
            color: var(--sf-text-heading);
        }
        
        .card-footer {
            background-color: var(--sf-bg-primary);
            border-top-color: var(--sf-border-color);
            color: var(--sf-text-secondary);
        }
        
        .card-title,
        .sf-card-title {
            color: var(--sf-text-heading);
        }
        
        .card-subtitle {
            color: var(--sf-text-muted);
        }
        
        .card-interactive:hover {
            border-color: var(--sf-neutral-600);
        }
        
        /* === BADGES === */
        .badge-primary {
            background-color: var(--sf-primary-900);
            color: var(--sf-primary-200);
        }
        
        .badge-success {
            background-color: var(--sf-success-900);
            color: var(--sf-success-200);
        }
        
        .badge-warning {
            background-color: var(--sf-warning-900);
            color: var(--sf-warning-200);
        }
        
        .badge-error {
            background-color: var(--sf-error-900);
            color: var(--sf-error-200);
        }
        
        .badge-neutral {
            background-color: var(--sf-neutral-700);
            color: var(--sf-neutral-200);
        }
        
        .badge-health-green {
            background-color: var(--sf-health-green-bg);
            color: var(--sf-success-300);
        }
        
        .badge-health-yellow {
            background-color: var(--sf-health-yellow-bg);
            color: var(--sf-warning-300);
        }
        
        .badge-health-red {
            background-color: var(--sf-health-red-bg);
            color: var(--sf-error-300);
        }
        
        /* === ALERTS === */
        .alert-success,
        .sf-alert--success {
            background-color: var(--sf-success-900);
            border-color: var(--sf-success-500);
            color: var(--sf-success-200);
        }
        
        .alert-warning,
        .sf-alert--warn {
            background-color: var(--sf-warning-900);
            border-color: var(--sf-warning-500);
            color: var(--sf-warning-200);
        }
        
        .alert-error,
        .sf-alert--danger {
            background-color: var(--sf-error-900);
            border-color: var(--sf-error-500);
            color: var(--sf-error-200);
        }
        
        .alert-info,
        .sf-alert--info {
            background-color: var(--sf-info-900);
            border-color: var(--sf-info-500);
            color: var(--sf-info-200);
        }
        
        /* === FORM CONTROLS === */
        .form-label {
            color: var(--sf-text-secondary);
        }
        
        .form-control {
            color: var(--sf-text-heading);
            background-color: var(--sf-bg-secondary);
            border-color: var(--sf-neutral-600);
        }
        
        .form-control:hover {
            border-color: var(--sf-neutral-500);
        }
        
        .form-control:focus {
            border-color: var(--sf-primary-500);
            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
        }
        
        .form-control:disabled {
            background-color: var(--sf-bg-primary);
            opacity: 0.5;
        }
        
        .form-control::placeholder {
            color: var(--sf-neutral-500);
        }
        
        .form-control.is-invalid {
            border-color: var(--sf-error-500);
        }
        
        .form-control.is-invalid:focus {
            box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
        }
        
        .form-control.is-valid {
            border-color: var(--sf-success-500);
        }
        
        .form-hint {
            color: var(--sf-text-muted);
        }
        
        .form-error {
            color: var(--sf-error-400);
        }
        
        .form-check-input {
            border-color: var(--sf-neutral-500);
            background-color: var(--sf-bg-secondary);
        }
        
        .form-check-input:checked {
            background-color: var(--sf-primary-600);
            border-color: var(--sf-primary-600);
        }
        
        .form-check-label {
            color: var(--sf-text-secondary);
        }
        
        /* === LOADING STATES === */
        .spinner {
            border-color: var(--sf-border-color);
            border-top-color: var(--sf-primary-500);
        }
        
        .skeleton {
            background: linear-gradient(
                90deg,
                var(--sf-neutral-800) 0%,
                var(--sf-neutral-700) 50%,
                var(--sf-neutral-800) 100%
            );
        }
        
        /* === TOOLTIPS === */
        .tooltip-text {
            background-color: var(--sf-neutral-200);
            color: var(--sf-neutral-900);
        }
        
        /* === DIVIDERS === */
        .divider,
        .divider-vertical {
            background-color: var(--sf-neutral-700);
        }
        
        /* === EMPTY STATES === */
        .empty-state-icon {
            color: var(--sf-neutral-600);
        }
        
        .empty-state-title {
            color: var(--sf-text-heading);
        }
        
        .empty-state-message {
            color: var(--sf-text-muted);
        }
        
        /* === DASHBOARD STATS === */
        .dashboard-title {
            color: var(--sf-text-heading);
        }
        
        .stat-card {
            background: var(--sf-bg-secondary);
            border-color: var(--sf-border-color);
        }
        
        .stat-card:hover {
            border-color: var(--sf-neutral-600);
        }
        
        .stat-value {
            color: var(--sf-text-heading);
        }
        
        .stat-label {
            color: var(--sf-text-secondary);
        }
        
        .stat-subtext {
            color: var(--sf-neutral-500);
        }
        
        /* === STREAK COMPONENT === */
        .streak-circle {
            background: var(--sf-bg-secondary);
            border-color: var(--sf-neutral-600);
            color: var(--sf-neutral-500);
        }
        
        .streak-day span {
            color: var(--sf-text-muted);
        }
        
        /* Active state still uses gradient but with better contrast */
        .streak-day.active .streak-circle {
            border-color: var(--sf-success-500);
            background: linear-gradient(135deg, var(--sf-success-600) 0%, var(--sf-success-500) 100%);
            color: white;
        }
        
        /* === COLORED HEADER CARDS (maintain contrast in dark mode) === */
        .card-header.bg-warning {
            color: var(--sf-neutral-900);
        }
        
        .card-header.bg-warning h1,
        .card-header.bg-warning h2,
        .card-header.bg-warning h3,
        .card-header.bg-warning h4,
        .card-header.bg-warning h5,
        .card-header.bg-warning h6 {
            color: var(--sf-neutral-900);
        }
        
        /* === CARD BODY TEXT === */
        .card-body p,
        .card-body .lead {
            color: var(--sf-text-secondary);
        }
        
        .card-body strong {
            color: var(--sf-text-heading);
        }
        
        .card-body a {
            color: var(--sf-primary-400);
        }
        
        .card-body a:hover {
            color: var(--sf-primary-300);
        }
        
        .card-body .text-muted {
            color: var(--sf-text-muted) !important;
        }
    }
}

/* ==========================================================================
   SF-BTN — BEM Button System (DS-009)
   Variants: primary | outline | ghost | danger | link
   Sizes: xs | sm | (default) | lg
   ========================================================================== */

.sf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sf-space-2);
    padding: var(--sf-space-2) var(--sf-space-5);
    font-family: var(--sf-font-sans);
    font-size: var(--sf-font-size-sm);
    font-weight: var(--sf-font-weight-medium);
    line-height: var(--sf-line-height-normal);
    text-decoration: none;
    border-radius: var(--sf-radius-md);
    border: 1px solid transparent;
    transition: background-color var(--sf-transition-fast),
                border-color var(--sf-transition-fast),
                color var(--sf-transition-fast),
                box-shadow var(--sf-transition-fast);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    background-color: transparent;
    color: var(--sf-text-primary);
}

.sf-btn:focus-visible {
    outline: 2px solid var(--sf-accent, var(--sf-primary-500));
    outline-offset: 2px;
}

.sf-btn:disabled,
.sf-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- Primary --- */
.sf-btn--primary {
    background-color: var(--sf-accent, var(--sf-primary-600));
    color: #ffffff;
    border-color: var(--sf-accent, var(--sf-primary-600));
    box-shadow: var(--sf-shadow-sm);
}

.sf-btn--primary:hover:not(:disabled) {
    background-color: var(--sf-accent-hover, var(--sf-primary-700));
    border-color: var(--sf-accent-hover, var(--sf-primary-700));
    box-shadow: var(--sf-shadow-md);
}

.sf-btn--primary:active:not(:disabled) {
    background-color: var(--sf-primary-800);
    border-color: var(--sf-primary-800);
    box-shadow: none;
}

/* --- Outline --- */
.sf-btn--outline {
    background-color: transparent;
    border-color: var(--sf-accent, var(--sf-primary-600));
    color: var(--sf-accent, var(--sf-primary-600));
}

.sf-btn--outline:hover:not(:disabled) {
    background-color: var(--sf-accent-subtle, var(--sf-primary-50));
    border-color: var(--sf-accent-hover, var(--sf-primary-700));
    color: var(--sf-accent-hover, var(--sf-primary-700));
}

/* --- Ghost --- */
.sf-btn--ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--sf-text-secondary);
}

.sf-btn--ghost:hover:not(:disabled) {
    background-color: var(--sf-bg-hover);
    color: var(--sf-text-primary);
}

/* --- Danger --- */
.sf-btn--danger {
    background-color: var(--sf-error-600);
    border-color: var(--sf-error-600);
    color: #ffffff;
    box-shadow: var(--sf-shadow-sm);
}

.sf-btn--danger:hover:not(:disabled) {
    background-color: var(--sf-error-700);
    border-color: var(--sf-error-700);
    box-shadow: var(--sf-shadow-md);
}

/* --- Link --- */
.sf-btn--link {
    background-color: transparent;
    border-color: transparent;
    color: var(--sf-accent, var(--sf-primary-600));
    padding-left: 0;
    padding-right: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sf-btn--link:hover:not(:disabled) {
    color: var(--sf-accent-hover, var(--sf-primary-700));
}

/* --- Sizes --- */
.sf-btn--xs {
    padding: var(--sf-space-1) var(--sf-space-3);
    font-size: var(--sf-font-size-xs);
    border-radius: var(--sf-radius-sm);
}

.sf-btn--sm {
    padding: calc(var(--sf-space-1) + 2px) var(--sf-space-4);
    font-size: var(--sf-font-size-xs);
}

.sf-btn--lg {
    padding: var(--sf-space-3) var(--sf-space-7);
    font-size: var(--sf-font-size-base);
}

/* Dark mode overrides for sf-btn */
:root.theme-dark .sf-btn--outline,
:root.theme-dark .sf-btn--ghost {
    color: var(--sf-text-secondary);
}

:root.theme-dark .sf-btn--outline {
    border-color: var(--sf-border-color-hover);
    color: var(--sf-text-primary);
}

:root.theme-dark .sf-btn--outline:hover:not(:disabled) {
    background-color: var(--sf-bg-hover);
}

@media (prefers-color-scheme: dark) {
    :root.theme-default .sf-btn--outline {
        border-color: var(--sf-border-color-hover);
        color: var(--sf-text-primary);
    }
    :root.theme-default .sf-btn--outline:hover:not(:disabled) {
        background-color: var(--sf-bg-hover);
    }
}

/* ==========================================================================
   SF-CARD — BEM Card System (DS-010)
   Variants: compact | status | metric
   ========================================================================== */

.sf-card {
    background-color: var(--sf-bg-secondary);
    border: 1px solid var(--sf-border-color);
    border-radius: var(--sf-radius-lg);
    box-shadow: var(--sf-shadow-sm);
    padding: var(--sf-space-5);
    transition: box-shadow var(--sf-transition-fast), border-color var(--sf-transition-fast);
}

.sf-card:hover {
    box-shadow: var(--sf-shadow-md);
    border-color: var(--sf-border-color-hover);
}

/* --- Compact (reduced padding for dense executive views) --- */
.sf-card--compact {
    padding: var(--sf-space-3) var(--sf-space-4);
}

/* --- Status (left accent border for health indication) --- */
.sf-card--status {
    border-left-width: 3px;
}

.sf-card--status-success { border-left-color: var(--sf-success-500); }
.sf-card--status-warning { border-left-color: var(--sf-warning-500); }
.sf-card--status-danger  { border-left-color: var(--sf-error-500); }
.sf-card--status-info    { border-left-color: var(--sf-info-500); }
.sf-card--status-neutral { border-left-color: var(--sf-neutral-400); }

/* --- Metric (single KPI display) --- */
.sf-card--metric {
    display: flex;
    flex-direction: column;
    gap: var(--sf-space-1);
    padding: var(--sf-space-4);
}

.sf-card--metric .sf-card-metric-value {
    font-size: var(--sf-text-3xl);
    font-weight: var(--sf-font-weight-bold);
    color: var(--sf-text-heading);
    line-height: var(--sf-line-height-tight);
    font-variant-numeric: tabular-nums;
}

.sf-card--metric .sf-card-metric-label {
    font-size: var(--sf-type-label);
    font-weight: var(--sf-font-weight-medium);
    color: var(--sf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Dark mode — sf-card inherits bg from theme tokens already */

/* ==========================================================================
   SF-BADGE — BEM Badge System (DS-013)
   Variants: neutral | info | success | warning | danger
   ========================================================================== */

.sf-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-space-1);
    padding: 2px var(--sf-space-2);
    font-size: var(--sf-font-size-xs);
    font-weight: var(--sf-font-weight-medium);
    line-height: var(--sf-line-height-normal);
    border-radius: var(--sf-radius-full);
    white-space: nowrap;
}

.sf-badge--neutral {
    background-color: var(--sf-bg-light);
    color: var(--sf-text-secondary);
    border: 1px solid var(--sf-border-color);
}

.sf-badge--info {
    background-color: var(--sf-info-100);
    color: var(--sf-info-800);
}

.sf-badge--success {
    background-color: var(--sf-success-100);
    color: var(--sf-success-800);
}

.sf-badge--warning {
    background-color: var(--sf-warning-100);
    color: var(--sf-warning-900);
}

.sf-badge--danger {
    background-color: var(--sf-error-100);
    color: var(--sf-error-800);
}

/* Initiative health chips (DS-013) */
.sf-badge--on-track  { background-color: var(--sf-success-100); color: var(--sf-success-800); }
.sf-badge--slipping  { background-color: var(--sf-warning-100); color: var(--sf-warning-900); }
.sf-badge--at-risk   { background-color: var(--sf-error-100);   color: var(--sf-error-800); }

/* Dark mode badge overrides */
:root.theme-dark .sf-badge--neutral {
    background-color: var(--sf-bg-light);
    color: var(--sf-text-secondary);
    border-color: var(--sf-border-color);
}

:root.theme-dark .sf-badge--info    { background-color: var(--sf-info-900);    color: var(--sf-info-200); }
:root.theme-dark .sf-badge--success { background-color: var(--sf-success-900); color: var(--sf-success-200); }
:root.theme-dark .sf-badge--warning { background-color: var(--sf-warning-900); color: var(--sf-warning-200); }
:root.theme-dark .sf-badge--danger  { background-color: var(--sf-error-900);   color: var(--sf-error-200); }
:root.theme-dark .sf-badge--on-track { background-color: var(--sf-success-900); color: var(--sf-success-300); }
:root.theme-dark .sf-badge--slipping { background-color: var(--sf-warning-900); color: var(--sf-warning-300); }
:root.theme-dark .sf-badge--at-risk  { background-color: var(--sf-error-900);   color: var(--sf-error-300); }

@media (prefers-color-scheme: dark) {
    :root.theme-default .sf-badge--info    { background-color: var(--sf-info-900);    color: var(--sf-info-200); }
    :root.theme-default .sf-badge--success { background-color: var(--sf-success-900); color: var(--sf-success-200); }
    :root.theme-default .sf-badge--warning { background-color: var(--sf-warning-900); color: var(--sf-warning-200); }
    :root.theme-default .sf-badge--danger  { background-color: var(--sf-error-900);   color: var(--sf-error-200); }
}

/* ==========================================================================
   SF-TABLE — Table & List System (DS-012)
   ========================================================================== */

.sf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sf-font-size-sm);
    color: var(--sf-text-primary);
}

.sf-table th {
    padding: var(--sf-space-3) var(--sf-space-4);
    font-size: var(--sf-font-size-xs);
    font-weight: var(--sf-font-weight-semibold);
    text-align: left;
    color: var(--sf-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--sf-bg-light);
    border-bottom: 1px solid var(--sf-border-color);
}

.sf-table td {
    padding: var(--sf-space-3) var(--sf-space-4);
    border-bottom: 1px solid var(--sf-border-color);
    color: var(--sf-text-primary);
    vertical-align: middle;
}

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

.sf-table tbody tr:last-child td {
    border-bottom: none;
}

.sf-table tbody tr.sf-table-row--selected {
    background-color: var(--sf-accent-subtle, var(--sf-primary-50));
}

/* --- Compact variant (DS-006/DS-012) --- */
.sf-table--compact th,
.sf-table--compact td {
    padding: var(--sf-space-2) var(--sf-space-3);
}

/* Dark mode */
:root.theme-dark .sf-table th {
    background-color: var(--sf-bg-light);
    color: var(--sf-text-muted);
    border-bottom-color: var(--sf-border-color);
}

:root.theme-dark .sf-table td {
    border-bottom-color: var(--sf-border-color);
}

:root.theme-dark .sf-table tbody tr:hover {
    background-color: var(--sf-bg-hover);
}

/* ==========================================================================
   SF-FIELD / SF-INPUT / SF-LABEL — Form Controls (DS-011)
   ========================================================================== */

.sf-field {
    display: flex;
    flex-direction: column;
    gap: var(--sf-space-2);
    margin-bottom: var(--sf-space-4);
}

.sf-label {
    display: block;
    font-size: var(--sf-font-size-sm);
    font-weight: var(--sf-font-weight-medium);
    color: var(--sf-text-secondary);
    line-height: var(--sf-line-height-normal);
}

.sf-label--required::after {
    content: " *";
    color: var(--sf-error-500);
}

.sf-input,
.sf-select,
.sf-textarea {
    display: block;
    width: 100%;
    padding: var(--sf-space-2) var(--sf-space-3);
    font-family: var(--sf-font-sans);
    font-size: var(--sf-font-size-sm);
    font-weight: var(--sf-font-weight-normal);
    line-height: var(--sf-line-height-normal);
    color: var(--sf-text-primary);
    background-color: var(--sf-bg-secondary);
    border: 1px solid var(--sf-border-color);
    border-radius: var(--sf-radius-md);
    transition: border-color var(--sf-transition-fast), box-shadow var(--sf-transition-fast);
    appearance: none;
    -webkit-appearance: none;
}

.sf-input::placeholder,
.sf-textarea::placeholder {
    color: var(--sf-text-muted);
}

.sf-input:hover,
.sf-select:hover,
.sf-textarea:hover {
    border-color: var(--sf-border-color-hover);
}

.sf-input:focus,
.sf-select:focus,
.sf-textarea:focus {
    outline: none;
    border-color: var(--sf-accent, var(--sf-primary-500));
    box-shadow: 0 0 0 3px var(--sf-accent-subtle, var(--sf-primary-100));
}

.sf-input:disabled,
.sf-select:disabled,
.sf-textarea:disabled {
    background-color: var(--sf-bg-light);
    color: var(--sf-text-muted);
    cursor: not-allowed;
    opacity: 0.7;
}

.sf-input[readonly],
.sf-textarea[readonly] {
    background-color: var(--sf-bg-light);
    cursor: default;
}

/* Field error state */
.sf-field--error .sf-input,
.sf-field--error .sf-select,
.sf-field--error .sf-textarea {
    border-color: var(--sf-error-500);
}

.sf-field--error .sf-input:focus,
.sf-field--error .sf-select:focus,
.sf-field--error .sf-textarea:focus {
    box-shadow: 0 0 0 3px var(--sf-error-100);
}

.sf-field__error {
    font-size: var(--sf-font-size-xs);
    color: var(--sf-error-600);
    margin-top: var(--sf-space-1);
}

.sf-field__hint {
    font-size: var(--sf-font-size-xs);
    color: var(--sf-text-muted);
    margin-top: var(--sf-space-1);
}

.sf-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sf-space-3) center;
    padding-right: var(--sf-space-8);
}

.sf-textarea {
    resize: vertical;
    min-height: 6rem;
}

/* Dark mode form controls */
:root.theme-dark .sf-input,
:root.theme-dark .sf-select,
:root.theme-dark .sf-textarea {
    background-color: var(--sf-bg-secondary);
    border-color: var(--sf-border-color);
    color: var(--sf-text-primary);
}

:root.theme-dark .sf-input:hover,
:root.theme-dark .sf-select:hover,
:root.theme-dark .sf-textarea:hover {
    border-color: var(--sf-border-color-hover);
}

:root.theme-dark .sf-field--error .sf-input,
:root.theme-dark .sf-field--error .sf-select,
:root.theme-dark .sf-field--error .sf-textarea {
    border-color: var(--sf-error-400);
}

:root.theme-dark .sf-label {
    color: var(--sf-text-secondary);
}

@media (prefers-color-scheme: dark) {
    :root.theme-default .sf-input,
    :root.theme-default .sf-select,
    :root.theme-default .sf-textarea {
        background-color: var(--sf-bg-secondary);
        border-color: var(--sf-border-color);
        color: var(--sf-text-primary);
    }
}

/* ==========================================================================
   SF-EMPTY-STATE (DS-022)
   ========================================================================== */

.sf-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sf-space-12) var(--sf-space-8);
    text-align: center;
    color: var(--sf-text-muted);
}

.sf-empty-state__icon {
    font-size: 2.5rem;
    margin-bottom: var(--sf-space-4);
    color: var(--sf-neutral-400);
}

.sf-empty-state__title {
    font-size: var(--sf-type-section-title);
    font-weight: var(--sf-font-weight-semibold);
    color: var(--sf-text-heading);
    margin-bottom: var(--sf-space-2);
}

.sf-empty-state__message {
    font-size: var(--sf-type-body-small);
    color: var(--sf-text-muted);
    max-width: 28rem;
    margin-bottom: var(--sf-space-6);
}