/* ============================================================================
   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: 8px 20px 20px; /* Keep side breathing room without a large band under the top bar */
    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;
}

/* Dashboard/control panel sits directly under the app bar; avoid a visible pale ledge first. */
body:has(.dashboard-content-grid) .sf-page-wrapper {
    padding-top: 6px;
}

body:has(.dashboard-content-grid) .sf-page-container {
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

/* Icon-rail layout: let the dashboard panel lock into the sidebar/topbar corner instead of
   floating beside it. This removes the broken-looking notch at the top-left of /dashboard. */
@media screen and (min-width: 641px) and (max-width: 1199px) {
    body:has(.dashboard-content-grid) .sf-page-wrapper {
        padding-top: 0;
        padding-left: 0;
    }

    body:has(.dashboard-content-grid) .sf-page-container {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        min-height: calc(100vh - 3.5rem);
    }
}

.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;
    /* Enough room for a title+icon to read on one line before the row runs out of
       space — at min-width:0 this column could shrink to nothing instead, which let
       a long title (e.g. "Pomodoro Focus Timer") wrap onto 2-3 cramped lines next to
       the action buttons instead of the whole actions group wrapping to its own row
       the way it does below 768px. */
    min-width: 18rem;
    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
   ============================================================================ */

/* ── MOBILE GUTTER BUDGET (WIDTH-01) ──────────────────────────────────────────
   Three layers of horizontal padding used to stack on phones:
     article.content.px-4  24px  (Bootstrap utility, !important)
   + .sf-page-wrapper       8px
   + .sf-page-container    12px
   = 44px per side — 88px of a 390px viewport spent on whitespace, which is what
   squeezed body text into a narrow strip. MainLayout already zeroes the article
   at ≥641px, so px-4 only ever bit on mobile.

   PageContainer supplies its own gutter, so the article contributes none there.
   Pages that don't use PageContainer keep a gutter of their own via the fallback
   rule below. Needs !important to beat Bootstrap's utility.
   ------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
    main > .content,
    .content-with-rail > .content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* Pages not wrapped in PageContainer still need edge spacing */
    main > .content:not(:has(> .sf-page-wrapper)),
    .content-with-rail > .content:not(:has(> .sf-page-wrapper)) {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

@media screen and (max-width: 768px) {
.sf-page-wrapper {
    padding: 12px; /* WIDTH-01: was 16px */
}

.sf-page-container {
    /* WIDTH-01: keep the vertical rhythm, tighten the sides */
    padding: var(--sf-6);
    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-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: 8px; /* WIDTH-01: was 12px */
}

.sf-page-container {
    padding: var(--sf-4);
    padding-left: var(--sf-space-3);  /* WIDTH-01: was var(--sf-4) */
    padding-right: var(--sf-space-3);
}
    
    .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: 6px; /* WIDTH-01: was 8px — tightest gutter, iPhone 14/15 Pro Max */
    }

    .sf-page-container {
        padding: var(--sf-space-3);
        padding-left: 0.625rem;  /* WIDTH-01: 10px — was var(--sf-space-3) / 12px */
        padding-right: 0.625rem;
        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);
}

/* Page header action buttons. Lives here rather than in a page's .razor.css because
   .sf-page-header-actions is rendered by PageContainer, a child component. A page that
   renders <PageContainer> as its outermost element authors no wrapping element of its
   own, so "::deep .sf-page-header-actions" has no local anchor to scope onto and the
   rule compiles to a selector that can never match (it was dead in GoalDetail). */
:root.theme-dark .sf-page-header-actions .btn {
    background-color: var(--sf-bg-secondary);
    border-color: var(--sf-border-color-hover);
    color: var(--sf-text-heading);
}

:root.theme-dark .sf-page-header-actions .btn:hover {
    background-color: var(--sf-neutral-700);
    border-color: var(--sf-neutral-500);
}

@media (prefers-color-scheme: dark) {
    :root:not(.theme-light) .sf-page-header-actions .btn {
        background-color: var(--sf-bg-secondary);
        border-color: var(--sf-border-color-hover);
        color: var(--sf-text-heading);
    }

    :root:not(.theme-light) .sf-page-header-actions .btn:hover {
        background-color: var(--sf-neutral-700);
        border-color: var(--sf-neutral-500);
    }
}

: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);
}

/* Anchor-based clickable cards (e.g. the Performance hub tiles) shouldn't pick up the
   global a:hover underline (design-system/02-base.css) on every nested heading/paragraph
   just because the card itself is an <a> — the border-color hover above already signals
   interactivity, same as the <button>-based cards. */
.sf-card-clickable:hover,
.sf-card-clickable:hover * {
    text-decoration: none;
}

/* 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);
}

/* Panel title inside .sf-card. Used in 15 .razor files (BodybuildingHub "Training Tools",
   "JACKED Program Reference PDFs", etc.) but never defined anywhere — so it rendered as
   plain inline body text: no weight, no heading colour, and no gap, leaving the title
   flush against the card edge and the content below it. .sf-card supplies the padding,
   so this only needs the heading treatment and the separation. */
.sf-card-header {
    font-size: var(--sf-text-lg);
    font-weight: var(--sf-font-semibold);
    line-height: var(--sf-leading-snug);
    color: var(--sf-text-heading);
    padding-bottom: var(--sf-3);
    margin-bottom: var(--sf-4);
    border-bottom: 1px solid var(--sf-border-color);
}

.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);
}

/* -------------------------------------------------------------------------
   MobileQuickBar clearance
   The bar is fixed to the bottom of the viewport below 640px, so page content
   needs room to scroll clear of it. Deliberately placed at the end of the
   file, after the max-width:768px block above: that block's own
   `padding: 12px` shorthand also sets a bottom value, and at equal
   specificity the later rule in source order wins -- so this one has to
   come after it, not before.
   ------------------------------------------------------------------------- */
@media screen and (max-width: 640px) {
    .sf-page-wrapper {
        /* 56px bar + home-indicator inset + breathing room */
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 1rem);
    }
}

/* -------------------------------------------------------------------------
   Food search result rows (.fsp-*)
   Shared by FoodSearchPicker, FoodAddPicker and ServingLogPanel. Moved here
   from FoodSearchPicker.razor.css: Blazor CSS isolation only applies a
   component's scoped rules to markup that component itself renders, so
   FoodAddPicker/ServingLogPanel reusing these class names got no styling at
   all from FoodSearchPicker's scoped stylesheet -- same failure mode as the
   :global() bug documented for other components, just via a shared class
   name instead of a :global() typo. Unscoped here so every consumer gets it.
   ------------------------------------------------------------------------- */
.fsp-results {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--sf-border, var(--sf-border-color));
    border-radius: var(--sf-radius);
}

.fsp-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sf-3);
    width: 100%;
    padding: var(--sf-2) var(--sf-3);
    background: none;
    border: none;
    border-bottom: 1px solid var(--sf-border, var(--sf-border-color));
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.fsp-result-row:last-child {
    border-bottom: none;
}

.fsp-result-row:hover {
    background: var(--sf-bg-secondary);
}

.fsp-result-name {
    font-weight: var(--sf-font-medium);
}

.fsp-result-macros {
    font-size: var(--sf-text-xs);
    white-space: nowrap;
}

.fsp-selected {
    background: var(--sf-bg-secondary);
}