/* ============================================================================
   BLAZOR CLIENT PAGE LAYOUT STYLES
   Shared page-level layout components for Blazor WebAssembly
   Version: 1.0.0
   ============================================================================ */

/* ============================================================================
   1. PAGE CONTAINER & HEADER
   ============================================================================ */

/* Page Wrapper - Spans full width with background */
.sf-page-wrapper {
    width: 100%;
    margin-top: 0; /* Removed, using wrapper padding instead */
    margin-bottom: 0; /* Removed, using wrapper padding instead */
    min-height: calc(100vh - 3.5rem - 37.795px); /* viewport - top-row - footer */
    display: flex;
    flex-direction: column;
    padding: 20px; /* Add breathing room from edges */
    padding-bottom: 100px;
    background-color: var(--sf-bg-primary);
}

/* Page Container - Constrains content width */
.sf-page-container {
    width: 100%;
    max-width: 1000px;
    padding: var(--sf-8);
    margin-top: 0; /* Removed, using wrapper padding instead */
    margin-bottom: 0; /* Removed, using wrapper padding instead */
    padding-left: var(--sf-8);
    padding-right: var(--sf-8);
    flex: 1;
    border-radius: var(--sf-radius-2xl, 1rem);
    box-shadow: var(--sf-shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1));
    background-color: var(--sf-bg-secondary);
}

/* Page Container Width Variants */
.sf-page-container[data-width="sm"] {
    max-width: 800px;

}

    .sf-page-container[data-width="md"] {
        max-width: 1000px;

    }

    .sf-page-container[data-width="lg"] {
        max-width: 1100px;
    }

.sf-page-container[data-width="xl"] {
    max-width: 1200px;
}

.sf-page-container[data-width="full"] {
    max-width: none;
}

/* No padding variant (for full-width content like calendars) */
.sf-page-container[data-no-padding="true"] {
    padding: 0;
}

.sf-page-header {
    margin-bottom: var(--sf-6);
    display: flex;
    flex-direction: column;
    gap: var(--sf-4);
}

.sf-page-header-top {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--sf-4);
    flex-wrap: wrap;
}

/* When there's a title, push actions to the right */
.sf-page-header-top:has(.sf-page-header-content) {
    justify-content: space-between;
}

.sf-page-header-content {
    flex: 1;
    min-width: 0; /* Prevents flex overflow */
    margin-right: auto; /* Push actions to the right when content exists */
}

.sf-page-title {
    font-size: var(--sf-text-4xl);
    font-weight: var(--sf-weight-bold);
    color: var(--sf-text-heading);
    margin: 0 0 var(--sf-2) 0;
    display: flex;
    align-items: center;
    gap: var(--sf-3);
    line-height: var(--sf-leading-tight);
    /* Remove focus outline since title is not interactive */
    outline: none;
}

/* Remove default browser focus styles on non-interactive elements */
.sf-page-title:focus {
    outline: none;
}

.sf-page-icon {
    font-size: var(--sf-text-3xl);
    color: var(--sf-primary-blue);
    flex-shrink: 0;
    /* Remove focus outline from icon */
    outline: none;
}

.sf-page-icon:focus {
    outline: none;
}

.sf-page-subtitle {
    font-size: var(--sf-text-lg);
    color: var(--sf-text-muted);
    margin: 0;
    line-height: var(--sf-leading-normal);
}

.sf-page-header-actions {
    display: flex;
    gap: var(--sf-3);
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
}

.sf-page-header-extra {
    width: 100%;
    padding-top: var(--sf-2);
    margin-bottom: var(--sf-6);
}

/* Page Content Area */
.sf-page-content {
    width: 100%;
}

/* Remove focus outlines from non-interactive page elements */
.sf-page-header,
.sf-page-header-top,
.sf-page-header-content,
.sf-page-header-extra {
    outline: none;
}

.sf-page-header:focus,
.sf-page-header-top:focus,
.sf-page-header-content:focus,
.sf-page-header-extra:focus {
    outline: none;
}

/* ============================================================================
   2. LOADING & EMPTY STATES
   ============================================================================ */

.sf-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sf-12) var(--sf-6);
    text-align: center;
}

.sf-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sf-space-8);
    text-align: center;
    min-height: 300px;
}

.sf-loading-state i {
    color: var(--sf-primary-blue);
    margin-bottom: var(--sf-space-3);
}

.sf-loading-state p {
    color: var(--sf-text-muted);
    margin: 0;
}

.sf-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--sf-gray-200);
    border-top-color: var(--sf-primary-blue);
    border-radius: 50%;
    animation: sf-spin 0.8s linear infinite;
}

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

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

.sf-empty-state i {
    font-size: 3rem;
    color: var(--sf-text-light);
    margin-bottom: var(--sf-4);
}

.sf-empty-state p:first-of-type {
    font-size: var(--sf-text-lg);
    font-weight: var(--sf-weight-semibold);
    color: var(--sf-text-secondary);
    margin: 0 0 var(--sf-2) 0;
}

/* ============================================================================
   3. STATISTICS GRID
   ============================================================================ */

.sf-stats-grid {
    display: grid;
    gap: var(--sf-4);
    margin-bottom: var(--sf-6);
}

.sf-stats-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.sf-stats-grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.sf-stats-grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.sf-stat-card {
    display: flex;
    align-items: center;
    gap: var(--sf-4);
    padding: var(--sf-5);
    background-color: var(--sf-bg-card);
    border-radius: var(--sf-radius-xl);
    box-shadow: var(--sf-shadow-md);
    transition: all var(--sf-transition-base);
}

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

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

.sf-stat-icon-primary {
    background-color: color-mix(in srgb, var(--sf-primary-blue) 15%, transparent);
    color: var(--sf-primary-blue);
}

.sf-stat-icon-success {
    background-color: color-mix(in srgb, var(--sf-success) 15%, transparent);
    color: var(--sf-success);
}

.sf-stat-icon-warning {
    background-color: color-mix(in srgb, var(--sf-warning) 15%, transparent);
    color: var(--sf-warning);
}

.sf-stat-icon-danger {
    background-color: color-mix(in srgb, var(--sf-error) 15%, transparent);
    color: var(--sf-error);
}

.sf-stat-icon-info {
    background-color: color-mix(in srgb, var(--sf-info) 15%, transparent);
    color: var(--sf-info);
}

.sf-stat-content {
    flex: 1;
}

.sf-stat-value {
    font-size: var(--sf-text-3xl);
    font-weight: var(--sf-weight-bold);
    color: var(--sf-text-dark);
    line-height: 1;
    margin: 0 0 var(--sf-1) 0;
}

.sf-stat-label {
    font-size: var(--sf-text-sm);
    color: var(--sf-text-muted);
    margin: 0;
}

/* ============================================================================
   4. TABLES
   ============================================================================ */

.sf-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================================
   5. BADGES
   ============================================================================ */

.sf-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-1);
    padding: var(--sf-1) var(--sf-3);
    font-size: var(--sf-text-xs);
    font-weight: var(--sf-weight-semibold);
    border-radius: var(--sf-radius-full);
    white-space: nowrap;
}

.sf-badge-primary {
    background-color: color-mix(in srgb, var(--sf-primary-blue) 15%, transparent);
    color: var(--sf-primary-blue);
}

.sf-badge-success {
    background-color: color-mix(in srgb, var(--sf-success) 15%, transparent);
    color: var(--sf-success);
}

.sf-badge-warning {
    background-color: color-mix(in srgb, var(--sf-warning) 15%, transparent);
    color: var(--sf-warning);
}

.sf-badge-danger {
    background-color: color-mix(in srgb, var(--sf-error) 15%, transparent);
    color: var(--sf-error);
}

.sf-badge-info {
    background-color: color-mix(in srgb, var(--sf-info) 15%, transparent);
    color: var(--sf-info);
}

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

/* ============================================================================
   6. FORM ACTIONS
   ============================================================================ */

.sf-form-actions {
    display: flex;
    gap: var(--sf-3);
    justify-content: flex-end;
    padding-top: var(--sf-6);
    margin-top: var(--sf-6);
    border-top: 1px solid var(--sf-border-light);
}

.sf-required {
    color: var(--sf-error);
}

/* Button text variant (minimal styling) */
.sf-btn-text {
    color: var(--sf-info-500);
    background-color: transparent;
    border-color: transparent;
    padding: var(--sf-space-2) var(--sf-space-3);
    text-decoration: none;
}

.sf-btn-text:hover:not(:disabled) {
    background-color: transparent;
    text-decoration: underline;
    color: var(--sf-info-500);
}

/* ============================================================================
   SF-BTN BEM COMPONENT SYSTEM
   Used across Dexira features: Sailing, Bodybuilding, etc.
   ============================================================================ */

.sf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sf-space-2);
    padding: var(--sf-space-2) var(--sf-space-4);
    font-size: var(--sf-text-sm);
    font-weight: var(--sf-font-medium);
    line-height: 1.5;
    text-decoration: none;
    border-radius: var(--sf-radius-md);
    border: 1px solid transparent;
    transition: all var(--sf-transition-fast);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    vertical-align: middle;
}

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

/* Primary — purple (Dexira primary brand color) */
.sf-btn--primary {
    background-color: var(--sf-primary-600);
    border-color: var(--sf-primary-600);
    color: #ffffff;
}

.sf-btn--primary:hover:not(:disabled) {
    background-color: var(--sf-primary-700);
    border-color: var(--sf-primary-700);
    color: #ffffff;
}

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

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

/* 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-500);
    border-color: var(--sf-error-500);
    color: #ffffff;
}

.sf-btn--danger:hover:not(:disabled) {
    background-color: var(--sf-error-600);
    border-color: var(--sf-error-600);
    color: #ffffff;
}

/* Size modifiers */
.sf-btn--xs {
    padding: 2px 8px;
    font-size: var(--sf-text-xs);
    border-radius: var(--sf-radius-sm);
    gap: var(--sf-space-1);
}

.sf-btn--sm {
    padding: var(--sf-space-1) var(--sf-space-3);
    font-size: var(--sf-text-sm);
}

.sf-btn--lg {
    padding: var(--sf-space-3) var(--sf-space-6);
    font-size: var(--sf-text-base);
    font-weight: var(--sf-font-semibold);
}

/* ============================================================================
   7. RESPONSIVE BREAKPOINTS
   ============================================================================ */

@media screen and (max-width: 768px) {
.sf-page-wrapper {
    padding: 16px; /* Reduce padding on tablet */
}

.sf-page-container {
    padding: var(--sf-6);
    padding-left: var(--sf-6);
    padding-right: var(--sf-6);
}
    
    .sf-page-container[data-no-padding="true"] {
        padding: 0;
    }
    
    .sf-page-title {
        font-size: var(--sf-text-3xl);
    }
    
    .sf-page-icon {
        font-size: var(--sf-text-2xl);
    }
    
    .sf-page-subtitle {
        font-size: var(--sf-text-base);
    }
    
    .sf-page-header {
        margin-bottom: var(--sf-4);
    }
    
    .sf-page-header-top {
        flex-direction: column;
        align-items: stretch;
    }
    
    .sf-page-header-actions {
        flex-direction: row;
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end; /* Ensure buttons stay right-aligned on tablet */
    }
    
    .sf-page-header-actions .btn,
    .sf-page-header-actions button {
        flex: 0 1 auto;
        white-space: nowrap;
    }
    
    .sf-stats-grid-2,
    .sf-stats-grid-3,
    .sf-stats-grid-4 {
        grid-template-columns: 1fr;
    }
    
    .sf-form-actions {
        flex-direction: column-reverse;
    }
    
    .sf-form-actions .btn,
    .sf-form-actions button {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
.sf-page-wrapper {
    padding: 12px; /* Minimal padding on mobile */
}

.sf-page-container {
    padding: var(--sf-4);
    padding-left: var(--sf-4);
    padding-right: var(--sf-4);
}
    
    .sf-page-container[data-no-padding="true"] {
        padding: 0;
    }
    
    .sf-page-title {
        font-size: var(--sf-text-2xl);
    }
    
    .sf-stat-card {
        padding: var(--sf-4);
    }
    
    .sf-stat-icon {
        width: 48px;
        height: 48px;
        font-size: var(--sf-text-xl);
    }
    
    .sf-stat-value {
        font-size: var(--sf-text-2xl);
    }
}

/* ============================================================================
   8. MOBILE OPTIMIZATIONS (iPhone 14 Pro Max - 430px)
   ============================================================================ */

@media screen and (max-width: 430px) {
    .sf-page-wrapper {
        padding: 8px; /* Tighter padding for iPhone 14 Pro Max */
    }
    
    .sf-page-container {
        padding: var(--sf-space-3);
        padding-left: var(--sf-space-3);
        padding-right: var(--sf-space-3);
        border-radius: var(--sf-radius-lg);
    }
    
    .sf-page-container[data-no-padding="true"] {
        padding: 0;
    }
    
    .sf-page-header {
        margin-bottom: var(--sf-space-3);
        gap: var(--sf-space-3);
    }
    
    .sf-page-header-top {
        gap: var(--sf-space-3);
    }
    
    .sf-page-title {
        font-size: var(--sf-text-xl);
        gap: var(--sf-space-2);
        margin-bottom: var(--sf-space-1);
    }
    
    .sf-page-icon {
        font-size: var(--sf-text-lg);
    }
    
    .sf-page-subtitle {
        font-size: var(--sf-text-sm);
        line-height: 1.4;
    }
    
    .sf-page-header-actions {
        gap: var(--sf-space-2);
    }
    
    .sf-page-header-actions .btn,
    .sf-page-header-actions button {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .sf-page-header-extra {
        padding-top: var(--sf-space-2);
        margin-bottom: var(--sf-space-4);
    }
    
    /* Stat cards more compact */
    .sf-stat-card {
        padding: var(--sf-space-3);
        gap: var(--sf-space-3);
    }
    
    .sf-stat-icon {
        width: 40px;
        height: 40px;
        font-size: var(--sf-text-lg);
    }
    
    .sf-stat-value {
        font-size: var(--sf-text-xl);
    }
    
    .sf-stat-label {
        font-size: 0.75rem;
    }
    
    /* Form actions tighter */
    .sf-form-actions {
        padding-top: var(--sf-space-4);
        margin-top: var(--sf-space-4);
        gap: var(--sf-space-2);
    }
    
    /* Loading state more compact */
    .sf-loading-state {
        padding: var(--sf-space-6);
        min-height: 200px;
    }
    
    .sf-spinner {
        width: 40px;
        height: 40px;
        border-width: 3px;
    }
    
    /* Empty state more compact */
    .sf-empty-state {
        padding: var(--sf-space-8) var(--sf-space-4);
    }
    
    .sf-empty-state i {
        font-size: 2.5rem;
        margin-bottom: var(--sf-space-3);
    }
}

/* ============================================================================
   9. DARK MODE SUPPORT
   Page layout dark mode styles
   ============================================================================ */

/* Unscoped: fires for any user in OS dark mode, before JS sets a theme class */
@media (prefers-color-scheme: dark) {
    .sf-page-wrapper {
        background-color: var(--sf-bg-primary);
    }

    .sf-page-container {
        background-color: var(--sf-bg-secondary);
        border-color: var(--sf-border-color);
    }

    .sf-page-title {
        color: var(--sf-text-heading);
    }

    .sf-page-icon {
        color: var(--sf-primary-500);
    }

    .sf-page-subtitle {
        color: var(--sf-text-muted);
    }

    .sf-loading-state i { color: var(--sf-primary-500); }
    .sf-loading-state p { color: var(--sf-text-muted); }

    .sf-spinner {
        border-color: var(--sf-border-color);
        border-top-color: var(--sf-primary-500);
    }

    .sf-empty-state i { color: var(--sf-text-secondary); }
    .sf-empty-state p:first-of-type { color: var(--sf-text-secondary); }

    .sf-stat-card {
        background-color: var(--sf-bg-secondary);
        border-color: var(--sf-border-color);
    }

    .sf-stat-card:hover { border-color: var(--sf-border-color-hover); }
    .sf-stat-value { color: var(--sf-text-heading); }
    .sf-stat-label { color: var(--sf-text-muted); }

    .sf-badge-primary { background-color: rgba(139, 92, 246, 0.2); color: var(--sf-primary-400); }
    .sf-badge-success { background-color: rgba(34, 197, 94, 0.2); color: var(--sf-success-400); }
    .sf-badge-warning { background-color: rgba(245, 158, 11, 0.2); color: var(--sf-warning-400); }
    .sf-badge-danger  { background-color: rgba(239, 68, 68, 0.2);  color: var(--sf-error-400); }
    .sf-badge-info    { background-color: rgba(59, 130, 246, 0.2);  color: var(--sf-info-400); }
    .sf-badge-outline { border-color: var(--sf-border-color-hover); color: var(--sf-text-secondary); }

    .sf-form-actions { border-top-color: var(--sf-border-color); }
    .sf-required { color: var(--sf-error-400); }
}

/* Scoped: JS theme class present — semantic vars already correct from theme.css, keep neutral vars aligned */
@media (prefers-color-scheme: dark) {
    :root.theme-dark,
    :root.theme-default {
        /* Page wrapper and container */
        .sf-page-wrapper {
            background-color: var(--sf-bg-primary);
        }
        
        .sf-page-container {
            background-color: var(--sf-bg-secondary);
            border-color: var(--sf-border-color);
        }
        
        /* Page header */
        .sf-page-title {
            color: var(--sf-text-heading);
        }
        
        .sf-page-icon {
            color: var(--sf-primary-500);
        }
        
        .sf-page-subtitle {
            color: var(--sf-text-muted);
        }
        
        /* Loading states */
        .sf-loading-state i {
            color: var(--sf-primary-500);
        }
        
        .sf-loading-state p {
            color: var(--sf-text-muted);
        }
        
        .sf-spinner {
            border-color: var(--sf-border-color);
            border-top-color: var(--sf-primary-500);
        }
        
        /* Empty states */
        .sf-empty-state i {
            color: var(--sf-text-secondary);
        }
        
        .sf-empty-state p:first-of-type {
            color: var(--sf-text-secondary);
        }
        
        /* Stat cards */
        .sf-stat-card {
            background-color: var(--sf-bg-secondary);
            border-color: var(--sf-border-color);
        }
        
        .sf-stat-card:hover {
            border-color: var(--sf-border-color-hover);
        }
        
        .sf-stat-value {
            color: var(--sf-text-heading);
        }
        
        .sf-stat-label {
            color: var(--sf-text-muted);
        }
        
        /* Badges */
        .sf-badge-primary {
            background-color: rgba(139, 92, 246, 0.2);
            color: var(--sf-primary-400);
        }
        
        .sf-badge-success {
            background-color: rgba(34, 197, 94, 0.2);
            color: var(--sf-success-400);
        }
        
        .sf-badge-warning {
            background-color: rgba(245, 158, 11, 0.2);
            color: var(--sf-warning-400);
        }
        
        .sf-badge-danger {
            background-color: rgba(239, 68, 68, 0.2);
            color: var(--sf-error-400);
        }
        
        .sf-badge-info {
            background-color: rgba(59, 130, 246, 0.2);
            color: var(--sf-info-400);
        }
        
        .sf-badge-outline {
            border-color: var(--sf-border-color-hover);
            color: var(--sf-text-secondary);
        }
        
        /* Form actions */
        .sf-form-actions {
            border-top-color: var(--sf-border-color);
        }
        
        .sf-required {
            color: var(--sf-error-400);
        }
    }
}

/* ============================================================================
   10. EXPLICIT DARK THEME (Force Dark - Works without media query)
   Applied when user explicitly selects dark theme
   ============================================================================ */

:root.theme-dark .sf-page-wrapper {
    background-color: var(--sf-bg-primary);
}

:root.theme-dark .sf-page-container {
    background-color: var(--sf-bg-secondary);
    border-color: var(--sf-border-color);
}

:root.theme-dark .sf-page-title {
    color: var(--sf-text-heading);
}

:root.theme-dark .sf-page-icon {
    color: var(--sf-primary-500);
}

:root.theme-dark .sf-page-subtitle {
    color: var(--sf-text-muted);
}

:root.theme-dark .sf-loading-state i {
    color: var(--sf-primary-500);
}

:root.theme-dark .sf-loading-state p {
    color: var(--sf-text-muted);
}

:root.theme-dark .sf-spinner {
    border-color: var(--sf-border-color);
    border-top-color: var(--sf-primary-500);
}

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

:root.theme-dark .sf-empty-state p:first-of-type {
    color: var(--sf-text-secondary);
}

:root.theme-dark .sf-stat-card {
    background-color: var(--sf-bg-secondary);
    border-color: var(--sf-border-color);
}

:root.theme-dark .sf-stat-card:hover {
    border-color: var(--sf-border-color-hover);
}

:root.theme-dark .sf-stat-value {
    color: var(--sf-text-heading);
}

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

:root.theme-dark .sf-badge-primary {
    background-color: rgba(139, 92, 246, 0.2);
    color: var(--sf-primary-400);
}

:root.theme-dark .sf-badge-success {
    background-color: rgba(34, 197, 94, 0.2);
    color: var(--sf-success-400);
}

:root.theme-dark .sf-badge-warning {
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--sf-warning-400);
}

:root.theme-dark .sf-badge-danger {
    background-color: rgba(239, 68, 68, 0.2);
    color: var(--sf-error-400);
}

:root.theme-dark .sf-badge-info {
    background-color: rgba(59, 130, 246, 0.2);
    color: var(--sf-info-400);
}

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

:root.theme-dark .sf-form-actions {
    border-top-color: var(--sf-border-color);
}

:root.theme-dark .sf-required {
    color: var(--sf-error-400);
}



/* ============================================================================
   DS-005 — TYPOGRAPHY ROLE CLASSES
   Semantic type roles using existing token variables.
   Use these instead of bare h1/h2 where component context matters.
   ============================================================================ */

.sf-type-display {
    font-family: var(--sf-font-sans);
    font-size: var(--sf-text-4xl);
    font-weight: var(--sf-font-bold);
    line-height: var(--sf-leading-tight);
    letter-spacing: var(--sf-tracking-tight);
    color: var(--sf-text-heading);
}

.sf-type-title {
    font-family: var(--sf-font-sans);
    font-size: var(--sf-text-2xl);
    font-weight: var(--sf-font-semibold);
    line-height: var(--sf-leading-snug);
    color: var(--sf-text-heading);
}

.sf-type-section {
    font-family: var(--sf-font-sans);
    font-size: var(--sf-text-lg);
    font-weight: var(--sf-font-semibold);
    line-height: var(--sf-leading-snug);
    color: var(--sf-text-heading);
}

.sf-type-card-title {
    font-family: var(--sf-font-sans);
    font-size: var(--sf-text-base);
    font-weight: var(--sf-font-semibold);
    line-height: var(--sf-leading-snug);
    color: var(--sf-text-heading);
}

.sf-type-body {
    font-family: var(--sf-font-sans);
    font-size: var(--sf-text-base);
    font-weight: var(--sf-font-normal);
    line-height: var(--sf-leading-relaxed);
    color: var(--sf-text-primary);
}

.sf-type-body-sm {
    font-family: var(--sf-font-sans);
    font-size: var(--sf-text-sm);
    font-weight: var(--sf-font-normal);
    line-height: var(--sf-leading-normal);
    color: var(--sf-text-secondary);
}

.sf-type-label {
    font-family: var(--sf-font-sans);
    font-size: var(--sf-text-sm);
    font-weight: var(--sf-font-medium);
    line-height: var(--sf-leading-none);
    color: var(--sf-text-primary);
}

.sf-type-caption {
    font-family: var(--sf-font-sans);
    font-size: var(--sf-text-xs);
    font-weight: var(--sf-font-normal);
    line-height: var(--sf-leading-normal);
    color: var(--sf-text-muted);
}

/* ============================================================================
   DS-006 — INFORMATION DENSITY MODES
   Apply data-density="compact" to <html> element for compact layouts.
   ============================================================================ */

[data-density="compact"] .sf-page-container {
    padding: var(--sf-5);
}

[data-density="compact"] .sf-page-header {
    margin-bottom: var(--sf-4);
    gap: var(--sf-2);
}

[data-density="compact"] .sf-page-title {
    font-size: var(--sf-text-2xl);
    margin-bottom: var(--sf-1);
}

[data-density="compact"] .sf-card {
    padding: var(--sf-3) var(--sf-4);
}

[data-density="compact"] .sf-table td,
[data-density="compact"] .sf-table th {
    padding: var(--sf-2) var(--sf-3);
}

[data-density="compact"] .sf-field {
    margin-bottom: var(--sf-3);
}

[data-density="compact"] .sf-list-row {
    padding: var(--sf-2) var(--sf-3);
}

/* ============================================================================
   DS-010 — CARD SYSTEM
   Base .sf-card + variants: compact, status, metric.
   ============================================================================ */

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

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

/* Compact card — reduced padding for dense views */
.sf-card--compact {
    padding: var(--sf-3) var(--sf-4);
    border-radius: var(--sf-radius-lg);
}

/* Status card — left border accent for health/state indication */
.sf-card--status {
    border-left-width: 3px;
    padding-left: calc(var(--sf-6) - 2px);
}

.sf-card--status.sf-card--green  { border-left-color: var(--sf-health-green); }
.sf-card--status.sf-card--yellow { border-left-color: var(--sf-health-yellow); }
.sf-card--status.sf-card--red    { border-left-color: var(--sf-health-red); }

/* Metric card — for dashboard stat tiles */
.sf-card--metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sf-1);
    padding: var(--sf-4) var(--sf-5);
    border-radius: var(--sf-radius-lg);
}

.sf-card--metric .sf-metric-value {
    font-size: var(--sf-text-2xl);
    font-weight: var(--sf-font-bold);
    line-height: var(--sf-leading-none);
    color: var(--sf-text-heading);
}

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

.sf-card--metric .sf-metric-trend {
    font-size: var(--sf-text-sm);
    color: var(--sf-text-muted);
}

.sf-card-body {
    color: var(--sf-text-secondary);
    font-size: var(--sf-text-sm);
    line-height: var(--sf-leading-relaxed);
}

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

/* ============================================================================
   DS-011 — FORM CONTROLS
   .sf-field wrapper + .sf-label, .sf-input, .sf-select, .sf-textarea
   with focus ring, validation states, and disabled treatment.
   ============================================================================ */

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

.sf-field--inline {
    flex-direction: row;
    align-items: center;
    gap: var(--sf-3);
}

.sf-label {
    font-size: var(--sf-text-sm);
    font-weight: var(--sf-font-medium);
    color: var(--sf-text-primary);
    line-height: var(--sf-leading-none);
    user-select: none;
}

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

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

.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-primary-500);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

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

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

.sf-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sf-3) center;
    padding-right: var(--sf-8);
}

/* Validation states */
.sf-field--valid .sf-input,
.sf-field--valid .sf-select,
.sf-field--valid .sf-textarea {
    border-color: var(--sf-success-500);
}

.sf-field--invalid .sf-input,
.sf-field--invalid .sf-select,
.sf-field--invalid .sf-textarea {
    border-color: var(--sf-error-500);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.sf-field-error {
    font-size: var(--sf-text-xs);
    color: var(--sf-error-500);
    font-weight: var(--sf-font-medium);
}

.sf-field-hint {
    font-size: var(--sf-text-xs);
    color: var(--sf-text-muted);
}

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

:root.theme-dark .sf-input:focus,
:root.theme-dark .sf-select:focus,
:root.theme-dark .sf-textarea:focus {
    border-color: var(--sf-primary-400);
    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
}

/* ============================================================================
   DS-012 — TABLE & LIST SYSTEM
   .sf-table for data tables, .sf-list-row for stacked list items.
   ============================================================================ */

.sf-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--sf-radius-xl);
    border: 1px solid var(--sf-border-color);
}

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

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

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

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

.sf-table tbody tr {
    transition: background-color var(--sf-transition-fast);
}

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

/* Compact table — tighter rows for dense executive views */
.sf-table--compact th,
.sf-table--compact td {
    padding: var(--sf-2) var(--sf-3);
    font-size: var(--sf-text-xs);
}

/* List rows — stacked card-like items */
.sf-list-row {
    display: flex;
    align-items: center;
    gap: var(--sf-3);
    padding: var(--sf-3) var(--sf-4);
    border-bottom: 1px solid var(--sf-border-color);
    background-color: var(--sf-bg-secondary);
    transition: background-color var(--sf-transition-fast);
}

.sf-list-row:last-child {
    border-bottom: none;
}

.sf-list-row:hover {
    background-color: var(--sf-bg-hover);
}

.sf-list-row--clickable {
    cursor: pointer;
}

/* Dark mode table overrides */
:root.theme-dark .sf-table,
:root.theme-dark .sf-table-wrapper {
    background-color: var(--sf-bg-secondary);
    border-color: var(--sf-border-color);
}

:root.theme-dark .sf-table th {
    background-color: var(--sf-bg-light);
    border-color: var(--sf-border-color);
}

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

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

/* ============================================================================
   DS-013 — BADGE SYSTEM (missing variants)
   .sf-badge--neutral and .sf-health-chip health indicator chips.
   Existing .sf-badge-* classes are preserved for backward compatibility.
   ============================================================================ */

.sf-badge--neutral {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-1);
    padding: var(--sf-1) var(--sf-2);
    border-radius: var(--sf-radius-full);
    font-size: var(--sf-text-xs);
    font-weight: var(--sf-font-medium);
    background-color: var(--sf-bg-light);
    color: var(--sf-text-secondary);
    border: 1px solid var(--sf-border-color);
}

/* Health chip variants — for initiative/task health indicators */
.sf-health-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sf-1);
    padding: var(--sf-1) var(--sf-2);
    border-radius: var(--sf-radius-full);
    font-size: var(--sf-text-xs);
    font-weight: var(--sf-font-semibold);
    white-space: nowrap;
}

.sf-health-chip--green {
    background-color: var(--sf-health-green-bg);
    color: var(--sf-health-green);
}

.sf-health-chip--yellow {
    background-color: var(--sf-health-yellow-bg);
    color: var(--sf-health-yellow);
}

.sf-health-chip--red {
    background-color: var(--sf-health-red-bg);
    color: var(--sf-health-red);
}

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