/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-qgzlhnkzx3] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-qgzlhnkzx3] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/Lease/LeaseDetails.razor.rz.scp.css */
/* =====================================================
   Lease Details Page Styles
   File: SafeHouseAdmin/Components/Pages/Leases/LeaseDetails.razor.css
   ===================================================== */

/* Layout */
.sh-details-layout[b-md00hiys7o] {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 1.5rem;
    padding: 1.5rem;
}

.sh-details-main[b-md00hiys7o] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sh-details-sidebar[b-md00hiys7o] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Alert Banner */
.sh-alert[b-md00hiys7o] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: var(--sh-radius-lg);
    margin: 0 1.5rem 1.5rem;
}

.sh-alert-warning[b-md00hiys7o] {
    background: var(--sh-warning-bg);
    border-left: 4px solid var(--sh-warning);
}

.sh-alert i[b-md00hiys7o] {
    font-size: 1.5rem;
    color: var(--sh-warning);
}

.sh-alert div[b-md00hiys7o] {
    flex: 1;
}

.sh-alert strong[b-md00hiys7o] {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--sh-text-primary);
}

.sh-alert p[b-md00hiys7o] {
    margin: 0;
    color: var(--sh-text-secondary);
    font-size: 0.875rem;
}

/* Details Grid */
.sh-details-grid[b-md00hiys7o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.sh-detail-item[b-md00hiys7o] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sh-detail-label[b-md00hiys7o] {
    font-size: 0.75rem;
    color: var(--sh-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Tenant Info */
.sh-tenant-info[b-md00hiys7o] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.sh-tenant-info i[b-md00hiys7o] {
    font-size: 2rem;
    color: var(--sh-text-secondary);
}

.sh-tenant-name[b-md00hiys7o] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--sh-text-primary);
}

.sh-tenant-contact[b-md00hiys7o] {
    font-size: 0.875rem;
    color: var(--sh-text-secondary);
    margin-top: 0.25rem;
}

/* Property Info */
.sh-property-info[b-md00hiys7o] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.sh-property-info i[b-md00hiys7o] {
    font-size: 2rem;
    color: var(--sh-text-secondary);
}

.sh-property-facility[b-md00hiys7o] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--sh-text-primary);
}

.sh-property-unit[b-md00hiys7o] {
    font-size: 0.875rem;
    color: var(--sh-text-secondary);
    margin-top: 0.25rem;
}

/* Date Range */
.sh-date-range[b-md00hiys7o] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sh-date[b-md00hiys7o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--sh-text-primary);
    font-weight: 500;
}

.sh-date i[b-md00hiys7o] {
    color: var(--sh-text-secondary);
}

/* Financial Displays */
.sh-rent-display[b-md00hiys7o],
.sh-deposit-display[b-md00hiys7o] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sh-primary-orange);
    font-family: 'Courier New', monospace;
}

.sh-deposit-display[b-md00hiys7o] {
    color: var(--sh-success);
}

/* Financial Metrics */
.sh-financial-metrics[b-md00hiys7o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.sh-metric[b-md00hiys7o] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.sh-metric-icon[b-md00hiys7o] {
    width: 50px;
    height: 50px;
    border-radius: var(--sh-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.sh-metric-icon-success[b-md00hiys7o] {
    background: var(--sh-success-bg);
    color: var(--sh-success);
}

.sh-metric-icon-warning[b-md00hiys7o] {
    background: var(--sh-warning-bg);
    color: var(--sh-warning);
}

.sh-metric-label[b-md00hiys7o] {
    font-size: 0.75rem;
    color: var(--sh-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sh-metric-value[b-md00hiys7o] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sh-text-primary);
    margin: 0.25rem 0;
}

/* Terms Grid */
.sh-terms-grid[b-md00hiys7o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.sh-term-item[b-md00hiys7o] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--sh-card-bg-secondary);
    border-radius: var(--sh-radius-md);
    font-size: 0.875rem;
    color: var(--sh-text-primary);
}

.sh-term-item i[b-md00hiys7o] {
    font-size: 1.25rem;
}

.sh-text-success[b-md00hiys7o] {
    color: var(--sh-success);
}

.sh-text-danger[b-md00hiys7o] {
    color: var(--sh-danger);
}

.sh-text-info[b-md00hiys7o] {
    color: var(--sh-info);
}

/* Special Terms */
.sh-special-terms[b-md00hiys7o] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--sh-border-color);
}

.sh-terms-heading[b-md00hiys7o] {
    font-size: 0.875rem;
    color: var(--sh-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.sh-special-terms p[b-md00hiys7o] {
    color: var(--sh-text-primary);
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
}

/* Timeline */
.sh-timeline[b-md00hiys7o] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sh-timeline-item[b-md00hiys7o] {
    display: flex;
    gap: 1rem;
}

.sh-timeline-marker[b-md00hiys7o] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--sh-border-color);
}

.sh-timeline-marker-success[b-md00hiys7o] {
    background: var(--sh-success-bg);
    border-color: var(--sh-success);
    color: var(--sh-success);
}

.sh-timeline-marker-info[b-md00hiys7o] {
    background: var(--sh-info-bg);
    border-color: var(--sh-info);
    color: var(--sh-info);
}

.sh-timeline-marker-warning[b-md00hiys7o] {
    background: var(--sh-warning-bg);
    border-color: var(--sh-warning);
    color: var(--sh-warning);
}

.sh-timeline-marker-danger[b-md00hiys7o] {
    background: var(--sh-danger-bg);
    border-color: var(--sh-danger);
    color: var(--sh-danger);
}

.sh-timeline-content[b-md00hiys7o] {
    flex: 1;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--sh-border-color);
}

.sh-timeline-item:last-child .sh-timeline-content[b-md00hiys7o] {
    border-bottom: none;
}

.sh-timeline-header[b-md00hiys7o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.sh-timeline-title[b-md00hiys7o] {
    font-weight: 600;
    color: var(--sh-text-primary);
}

.sh-timeline-date[b-md00hiys7o] {
    font-size: 0.75rem;
    color: var(--sh-text-secondary);
}

.sh-timeline-description[b-md00hiys7o] {
    color: var(--sh-text-primary);
    margin: 0.5rem 0;
    font-size: 0.875rem;
}

.sh-timeline-user[b-md00hiys7o] {
    color: var(--sh-text-secondary);
    font-size: 0.75rem;
}

/* Action List (Sidebar) */
.sh-action-list[b-md00hiys7o] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sh-action-item[b-md00hiys7o] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: none;
    border: 1px solid var(--sh-border-color);
    border-radius: var(--sh-radius-md);
    color: var(--sh-text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.sh-action-item:hover[b-md00hiys7o] {
    background: var(--sh-card-bg-secondary);
    border-color: var(--sh-primary-orange);
    color: var(--sh-primary-orange);
}

.sh-action-item i[b-md00hiys7o] {
    font-size: 1.125rem;
}

/* Renewal Status */
.sh-renewal-status[b-md00hiys7o] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Status Badge in Header */
.sh-status-badge[b-md00hiys7o] {
    padding: 0.5rem 1rem;
    border-radius: var(--sh-radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sh-status-badge.sh-status-success[b-md00hiys7o] {
    background: var(--sh-success-bg);
    color: var(--sh-success);
}

.sh-status-badge.sh-status-danger[b-md00hiys7o] {
    background: var(--sh-danger-bg);
    color: var(--sh-danger);
}

.sh-status-badge.sh-status-warning[b-md00hiys7o] {
    background: var(--sh-warning-bg);
    color: var(--sh-warning);
}

.sh-status-badge.sh-status-info[b-md00hiys7o] {
    background: var(--sh-info-bg);
    color: var(--sh-info);
}

/* Responsive */
@media (max-width: 1024px) {
    .sh-details-layout[b-md00hiys7o] {
        grid-template-columns: 1fr;
    }

    .sh-details-sidebar[b-md00hiys7o] {
        order: -1;
    }
}

@media (max-width: 768px) {
    .sh-details-grid[b-md00hiys7o] {
        grid-template-columns: 1fr;
    }

    .sh-financial-metrics[b-md00hiys7o] {
        grid-template-columns: 1fr;
    }

    .sh-terms-grid[b-md00hiys7o] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Lease/Leases.razor.rz.scp.css */
/* ===== ENTERPRISE DESIGN SYSTEM ===== */
/* Matches Facilities.razor styling exactly */

/* ===== DARK THEME (Default) ===== */
.sh-app[b-eyivmss8ss] {
    --sh-bg-primary: #121212;
    --sh-bg-secondary: #1a1a1a;
    --sh-bg-tertiary: #222222;
    --sh-bg-elevated: #2a2a2a;
    --sh-bg-hover: #333333;
    --sh-border: #333333;
    --sh-border-subtle: #2a2a2a;
    --sh-text-primary: #ffffff;
    --sh-text-secondary: #a0a0a0;
    --sh-text-tertiary: #666666;
    --sh-accent: #FF8C00;
    --sh-accent-hover: #e67e00;
    --sh-accent-subtle: rgba(255, 140, 0, 0.1);
    --sh-success: #22c55e;
    --sh-warning: #f59e0b;
    --sh-error: #ef4444;
    --sh-info: #3b82f6;
    --sh-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --sh-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
}

    /* ===== LIGHT THEME ===== */
    .sh-app.light-theme[b-eyivmss8ss] {
        --sh-bg-primary: #f8f9fa;
        --sh-bg-secondary: #ffffff;
        --sh-bg-tertiary: #f1f3f4;
        --sh-bg-elevated: #ffffff;
        --sh-bg-hover: #e8eaed;
        --sh-border: #dadce0;
        --sh-border-subtle: #e8eaed;
        --sh-text-primary: #202124;
        --sh-text-secondary: #5f6368;
        --sh-text-tertiary: #80868b;
        --sh-accent: #e07800;
        --sh-accent-hover: #c66a00;
        --sh-accent-subtle: rgba(255, 140, 0, 0.08);
        --sh-success: #1e8e3e;
        --sh-warning: #f9ab00;
        --sh-error: #d93025;
        --sh-info: #1a73e8;
        --sh-shadow: 0 1px 3px rgba(60, 64, 67, 0.15);
        --sh-shadow-lg: 0 8px 32px rgba(60, 64, 67, 0.2);
    }

        .sh-app.light-theme .sh-table thead[b-eyivmss8ss] {
            background: #f1f3f4;
        }

        .sh-app.light-theme .sh-table tbody tr:hover[b-eyivmss8ss] {
            background: #f8f9fa;
        }

:root[b-eyivmss8ss] {
    --sh-radius-sm: 4px;
    --sh-radius-md: 6px;
    --sh-radius-lg: 8px;
    --sh-font-xs: 11px;
    --sh-font-sm: 12px;
    --sh-font-base: 13px;
    --sh-font-md: 14px;
    --sh-font-lg: 16px;
    --sh-transition: 150ms ease;
}

*[b-eyivmss8ss] {
    box-sizing: border-box;
}

.sh-app[b-eyivmss8ss] {
    min-height: 100vh;
    background: var(--sh-bg-primary);
    color: var(--sh-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--sh-font-base);
    line-height: 1.5;
}

/* ===== HEADER ===== */
.sh-header[b-eyivmss8ss] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid var(--sh-border-subtle);
    background: var(--sh-bg-secondary);
}

.sh-breadcrumb[b-eyivmss8ss] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--sh-font-sm);
}

    .sh-breadcrumb a[b-eyivmss8ss] {
        color: var(--sh-text-secondary);
        text-decoration: none;
    }

        .sh-breadcrumb a:hover[b-eyivmss8ss] {
            color: var(--sh-text-primary);
        }

.sh-breadcrumb-sep[b-eyivmss8ss] {
    color: var(--sh-text-tertiary);
}

.sh-breadcrumb-current[b-eyivmss8ss] {
    color: var(--sh-text-primary);
    font-weight: 500;
}

.sh-header-right[b-eyivmss8ss] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sh-theme-toggle[b-eyivmss8ss] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--sh-bg-tertiary);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    cursor: pointer;
    transition: all var(--sh-transition);
    color: var(--sh-text-secondary);
}

    .sh-theme-toggle:hover[b-eyivmss8ss] {
        border-color: var(--sh-accent);
    }

    .sh-theme-toggle i[b-eyivmss8ss] {
        font-size: 14px;
        color: var(--sh-accent);
    }

    .sh-theme-toggle span[b-eyivmss8ss] {
        font-size: var(--sh-font-xs);
    }

/* ===== BUTTONS ===== */
.sh-btn[b-eyivmss8ss] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: var(--sh-font-sm);
    font-weight: 500;
    border: none;
    border-radius: var(--sh-radius-md);
    cursor: pointer;
    transition: all var(--sh-transition);
    white-space: nowrap;
}

    .sh-btn i[b-eyivmss8ss] {
        font-size: 14px;
    }

.sh-btn-primary[b-eyivmss8ss] {
    background: var(--sh-accent);
    color: white;
}

    .sh-btn-primary:hover[b-eyivmss8ss] {
        background: var(--sh-accent-hover);
    }

.sh-btn-ghost[b-eyivmss8ss] {
    background: transparent;
    color: var(--sh-text-secondary);
    padding: 6px 8px;
}

    .sh-btn-ghost:hover[b-eyivmss8ss] {
        background: var(--sh-bg-hover);
        color: var(--sh-text-primary);
    }

/* ===== METRICS STRIP ===== */
.sh-metrics-strip[b-eyivmss8ss] {
    display: flex;
    align-items: center;
    padding: 10px 24px;
    background: var(--sh-bg-secondary);
    border-bottom: 1px solid var(--sh-border-subtle);
    gap: 20px;
}

.sh-metric[b-eyivmss8ss] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.sh-metric-value[b-eyivmss8ss] {
    font-size: var(--sh-font-md);
    font-weight: 600;
    color: var(--sh-text-primary);
}

.sh-metric-success[b-eyivmss8ss] {
    color: var(--sh-success);
}

.sh-metric-warning[b-eyivmss8ss] {
    color: var(--sh-warning);
}

.sh-metric-muted[b-eyivmss8ss] {
    color: var(--sh-text-tertiary);
}

.sh-metric-label[b-eyivmss8ss] {
    font-size: var(--sh-font-xs);
    color: var(--sh-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sh-metric-divider[b-eyivmss8ss] {
    width: 1px;
    height: 16px;
    background: var(--sh-border);
}

.sh-metric-spacer[b-eyivmss8ss] {
    flex: 1;
}

.sh-metric-info[b-eyivmss8ss] {
    font-size: var(--sh-font-sm);
    color: var(--sh-text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===== FILTER BAR ===== */
.sh-filter-bar[b-eyivmss8ss] {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    background: var(--sh-bg-secondary);
    border-bottom: 1px solid var(--sh-border-subtle);
    gap: 12px;
}

.sh-filter-group[b-eyivmss8ss] {
    display: flex;
    gap: 8px;
    flex: 1;
}

.sh-filter-item[b-eyivmss8ss] {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--sh-bg-tertiary);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    padding: 0 8px;
    min-width: 140px;
}

    .sh-filter-item i[b-eyivmss8ss] {
        font-size: 12px;
        color: var(--sh-text-tertiary);
    }

.sh-filter-input[b-eyivmss8ss],
.sh-filter-select[b-eyivmss8ss] {
    background: transparent;
    border: none;
    color: var(--sh-text-primary);
    font-size: var(--sh-font-sm);
    padding: 6px 4px;
    outline: none;
    flex: 1;
}

.sh-filter-select[b-eyivmss8ss] {
    cursor: pointer;
}

.sh-btn-clear-filters[b-eyivmss8ss] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    color: var(--sh-text-secondary);
    font-size: var(--sh-font-sm);
    cursor: pointer;
    transition: all var(--sh-transition);
}

    .sh-btn-clear-filters:hover[b-eyivmss8ss] {
        border-color: var(--sh-error);
        color: var(--sh-error);
    }

/* ===== MAIN CONTENT ===== */
.sh-main[b-eyivmss8ss] {
    padding: 0;
}

.sh-content-wrapper[b-eyivmss8ss] {
    background: var(--sh-bg-secondary);
    margin: 16px 24px;
    border-radius: var(--sh-radius-lg);
    overflow: hidden;
    box-shadow: var(--sh-shadow);
}

/* ===== TABLE ===== */
.sh-table-container[b-eyivmss8ss] {
    overflow-x: auto;
}

.sh-table[b-eyivmss8ss] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sh-font-sm);
}

    .sh-table thead[b-eyivmss8ss] {
        background: var(--sh-bg-tertiary);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .sh-table th[b-eyivmss8ss] {
        padding: 12px 16px;
        text-align: left;
        font-weight: 600;
        color: var(--sh-text-secondary);
        border-bottom: 1px solid var(--sh-border);
        cursor: pointer;
        user-select: none;
        white-space: nowrap;
    }

        .sh-table th:hover[b-eyivmss8ss] {
            color: var(--sh-text-primary);
        }

        .sh-table th i[b-eyivmss8ss] {
            font-size: 10px;
            margin-left: 4px;
        }

    .sh-table tbody tr[b-eyivmss8ss] {
        border-bottom: 1px solid var(--sh-border-subtle);
        cursor: pointer;
        transition: background var(--sh-transition);
    }

        .sh-table tbody tr:hover[b-eyivmss8ss] {
            background: var(--sh-bg-hover);
        }

    .sh-table td[b-eyivmss8ss] {
        padding: 12px 16px;
        color: var(--sh-text-primary);
    }

.sh-table-actions[b-eyivmss8ss] {
    width: 120px;
    text-align: right;
}

/* ===== CUSTOM CELLS ===== */
.sh-tenant-cell[b-eyivmss8ss],
.sh-unit-cell[b-eyivmss8ss] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .sh-tenant-cell i[b-eyivmss8ss],
    .sh-unit-cell i[b-eyivmss8ss] {
        color: var(--sh-text-tertiary);
    }

.sh-rent-cell[b-eyivmss8ss] {
    font-weight: 600;
    font-family: 'Courier New', monospace;
    color: var(--sh-accent);
}

.sh-text-warning[b-eyivmss8ss] {
    color: var(--sh-warning);
    font-weight: 500;
}

.sh-text-muted[b-eyivmss8ss] {
    color: var(--sh-text-tertiary);
}

/* ===== STATUS BADGES ===== */
.sh-status-badge[b-eyivmss8ss] {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--sh-radius-sm);
    font-size: var(--sh-font-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sh-status-success[b-eyivmss8ss] {
    background: rgba(34, 197, 94, 0.15);
    color: var(--sh-success);
}

.sh-status-error[b-eyivmss8ss] {
    background: rgba(239, 68, 68, 0.15);
    color: var(--sh-error);
}

.sh-status-warning[b-eyivmss8ss] {
    background: rgba(245, 158, 11, 0.15);
    color: var(--sh-warning);
}

.sh-status-info[b-eyivmss8ss] {
    background: rgba(59, 130, 246, 0.15);
    color: var(--sh-info);
}

.sh-status-muted[b-eyivmss8ss] {
    background: var(--sh-bg-hover);
    color: var(--sh-text-tertiary);
}

.sh-type-badge[b-eyivmss8ss] {
    font-size: var(--sh-font-xs);
    color: var(--sh-text-secondary);
    padding: 2px 6px;
    background: var(--sh-bg-tertiary);
    border-radius: var(--sh-radius-sm);
}

/* ===== ACTION BUTTONS ===== */
.sh-action-group[b-eyivmss8ss] {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

.sh-action-btn[b-eyivmss8ss] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sh-radius-sm);
    border: 1px solid var(--sh-border);
    background: var(--sh-bg-tertiary);
    color: var(--sh-text-secondary);
    cursor: pointer;
    transition: all var(--sh-transition);
}

    .sh-action-btn:hover[b-eyivmss8ss] {
        border-color: var(--sh-accent);
        color: var(--sh-accent);
    }

.sh-action-btn-view:hover[b-eyivmss8ss] {
    border-color: var(--sh-info);
    color: var(--sh-info);
}

.sh-action-btn-renew:hover[b-eyivmss8ss] {
    border-color: var(--sh-success);
    color: var(--sh-success);
}

.sh-action-btn-terminate:hover[b-eyivmss8ss] {
    border-color: var(--sh-error);
    color: var(--sh-error);
}

/* ===== EMPTY STATE ===== */
.sh-empty-state[b-eyivmss8ss] {
    text-align: center;
    padding: 60px 20px;
}

    .sh-empty-state i[b-eyivmss8ss] {
        font-size: 48px;
        color: var(--sh-text-tertiary);
        margin-bottom: 16px;
    }

    .sh-empty-state h3[b-eyivmss8ss] {
        font-size: var(--sh-font-lg);
        color: var(--sh-text-primary);
        margin: 0 0 8px 0;
    }

    .sh-empty-state p[b-eyivmss8ss] {
        color: var(--sh-text-secondary);
        margin: 0 0 20px 0;
    }

/* ===== LOADING STATE ===== */
.sh-loading-state[b-eyivmss8ss] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
}

.sh-spinner[b-eyivmss8ss] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--sh-border);
    border-top-color: var(--sh-accent);
    border-radius: 50%;
    animation: spin-b-eyivmss8ss 0.8s linear infinite;
}

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

.sh-loading-state p[b-eyivmss8ss] {
    margin-top: 16px;
    color: var(--sh-text-secondary);
}

/* ===== PAGINATION ===== */
.sh-pagination[b-eyivmss8ss] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid var(--sh-border-subtle);
    background: var(--sh-bg-secondary);
}

.sh-pagination-info[b-eyivmss8ss] {
    font-size: var(--sh-font-sm);
    color: var(--sh-text-secondary);
}

.sh-pagination-controls[b-eyivmss8ss] {
    display: flex;
    gap: 4px;
}

.sh-page-btn[b-eyivmss8ss] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sh-border);
    background: var(--sh-bg-tertiary);
    color: var(--sh-text-secondary);
    border-radius: var(--sh-radius-sm);
    cursor: pointer;
    font-size: var(--sh-font-sm);
    transition: all var(--sh-transition);
}

    .sh-page-btn:hover:not(:disabled)[b-eyivmss8ss] {
        border-color: var(--sh-accent);
        color: var(--sh-accent);
    }

    .sh-page-btn.active[b-eyivmss8ss] {
        background: var(--sh-accent);
        border-color: var(--sh-accent);
        color: white;
    }

    .sh-page-btn:disabled[b-eyivmss8ss] {
        opacity: 0.3;
        cursor: not-allowed;
    }

/* ===== RESPONSIVE ===== */
@@media (max-width: 1024px) {
    .sh-filter-group[b-eyivmss8ss] {
        flex-wrap: wrap;
    }

    .sh-filter-item[b-eyivmss8ss] {
        min-width: 120px;
    }
}

@@media (max-width: 768px) {
    .sh-header[b-eyivmss8ss] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .sh-header-right[b-eyivmss8ss] {
        justify-content: flex-end;
    }

    .sh-metrics-strip[b-eyivmss8ss] {
        overflow-x: auto;
    }

    .sh-content-wrapper[b-eyivmss8ss] {
        margin: 12px;
    }
}
/* /Components/Pages/Organization/UploadOrganizationLogoDialog.razor.rz.scp.css */
.logo-upload-container[b-1159uasm1m] {
    min-height: 300px;
}

.upload-zone[b-1159uasm1m] {
    border: 2px dashed var(--sh-border-color, #dee2e6);
    border-radius: 8px;
    padding: 48px 24px;
    text-align: center;
    background-color: var(--sh-card-bg, #fff);
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-zone:hover[b-1159uasm1m] {
    border-color: var(--sh-primary, #FF8C00);
    background-color: var(--sh-hover-bg, #fff9f0);
}

.upload-zone.dragging[b-1159uasm1m] {
    border-color: var(--sh-primary, #FF8C00);
    background-color: var(--sh-hover-bg, #fff9f0);
    border-style: solid;
}

.upload-prompt[b-1159uasm1m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.upload-icon[b-1159uasm1m] {
    font-size: 48px;
    color: var(--sh-text-secondary, #6c757d);
    margin-bottom: 8px;
}

.upload-prompt h6[b-1159uasm1m] {
    margin: 0;
    color: var(--sh-text-primary, #212529);
    font-weight: 600;
}

.upload-prompt p[b-1159uasm1m] {
    margin: 0;
    color: var(--sh-text-secondary, #6c757d);
    font-size: 14px;
}

.upload-hint[b-1159uasm1m] {
    font-size: 12px !important;
    color: var(--sh-text-muted, #adb5bd) !important;
    margin-top: 8px !important;
}

/* Preview Styles */
.preview-container[b-1159uasm1m] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.preview-header[b-1159uasm1m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--sh-border-color, #dee2e6);
}

.preview-header h6[b-1159uasm1m] {
    margin: 0;
    font-weight: 600;
    color: var(--sh-text-primary, #212529);
}

.preview-image-wrapper[b-1159uasm1m] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    background-color: var(--sh-bg-subtle, #f8f9fa);
    border-radius: 8px;
    min-height: 200px;
}

.preview-image[b-1159uasm1m] {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.file-info[b-1159uasm1m] {
    display: flex;
    gap: 24px;
    padding: 12px 16px;
    background-color: var(--sh-bg-subtle, #f8f9fa);
    border-radius: 6px;
}

.file-detail[b-1159uasm1m] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--sh-text-secondary, #6c757d);
}

.file-detail i[b-1159uasm1m] {
    color: var(--sh-primary, #FF8C00);
}

.upload-options[b-1159uasm1m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background-color: var(--sh-bg-subtle, #f8f9fa);
    border-radius: 6px;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .upload-zone[b-1159uasm1m] {
        background-color: var(--sh-card-bg, #1a1a1a);
        border-color: var(--sh-border-color, #404040);
    }

    .upload-zone:hover[b-1159uasm1m],
    .upload-zone.dragging[b-1159uasm1m] {
        background-color: var(--sh-hover-bg, #2a2a2a);
    }

    .preview-image-wrapper[b-1159uasm1m],
    .file-info[b-1159uasm1m],
    .upload-options[b-1159uasm1m] {
        background-color: var(--sh-bg-subtle, #2a2a2a);
    }

    .preview-image[b-1159uasm1m] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }
}
/* /Components/Pages/Owner/OwnerAccounts.razor.rz.scp.css */
/* ===== ENTERPRISE DESIGN SYSTEM ===== */
/* Shared CSS for UnitOwners.razor and OwnerAccounts.razor */
/* Matches Facilities.razor styling exactly */

/* ===== DARK THEME (Default) ===== */
.sh-app[b-8p565dv8ll] {
    --sh-bg-primary: #121212;
    --sh-bg-secondary: #1a1a1a;
    --sh-bg-tertiary: #222222;
    --sh-bg-elevated: #2a2a2a;
    --sh-bg-hover: #333333;
    --sh-border: #333333;
    --sh-border-subtle: #2a2a2a;
    --sh-text-primary: #ffffff;
    --sh-text-secondary: #a0a0a0;
    --sh-text-tertiary: #666666;
    --sh-accent: #FF8C00;
    --sh-accent-hover: #e67e00;
    --sh-accent-subtle: rgba(255, 140, 0, 0.1);
    --sh-success: #22c55e;
    --sh-warning: #f59e0b;
    --sh-error: #ef4444;
    --sh-info: #3b82f6;
    --sh-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --sh-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ===== LIGHT THEME ===== */
.sh-app.light-theme[b-8p565dv8ll] {
    --sh-bg-primary: #f8f9fa;
    --sh-bg-secondary: #ffffff;
    --sh-bg-tertiary: #f1f3f4;
    --sh-bg-elevated: #ffffff;
    --sh-bg-hover: #e8eaed;
    --sh-border: #dadce0;
    --sh-border-subtle: #e8eaed;
    --sh-text-primary: #202124;
    --sh-text-secondary: #5f6368;
    --sh-text-tertiary: #80868b;
    --sh-accent: #e07800;
    --sh-accent-hover: #c66a00;
    --sh-accent-subtle: rgba(255, 140, 0, 0.08);
    --sh-success: #1e8e3e;
    --sh-warning: #f9ab00;
    --sh-error: #d93025;
    --sh-info: #1a73e8;
    --sh-shadow: 0 1px 3px rgba(60, 64, 67, 0.15);
    --sh-shadow-lg: 0 8px 32px rgba(60, 64, 67, 0.2);
}

:root[b-8p565dv8ll] {
    --sh-radius-sm: 4px;
    --sh-radius-md: 6px;
    --sh-radius-lg: 8px;
    --sh-font-xs: 11px;
    --sh-font-sm: 12px;
    --sh-font-base: 13px;
    --sh-font-md: 14px;
    --sh-font-lg: 16px;
    --sh-transition: 150ms ease;
}

*[b-8p565dv8ll] {
    box-sizing: border-box;
}

.sh-app[b-8p565dv8ll] {
    min-height: 100vh;
    background: var(--sh-bg-primary);
    color: var(--sh-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--sh-font-base);
    line-height: 1.5;
}

/* ===== HEADER ===== */
.sh-header[b-8p565dv8ll] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid var(--sh-border-subtle);
    background: var(--sh-bg-secondary);
}

.sh-header-left[b-8p565dv8ll],
.sh-header-right[b-8p565dv8ll] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sh-breadcrumb[b-8p565dv8ll] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--sh-font-sm);
}

.sh-breadcrumb a[b-8p565dv8ll] {
    color: var(--sh-text-secondary);
    text-decoration: none;
    transition: color var(--sh-transition);
}

.sh-breadcrumb a:hover[b-8p565dv8ll] {
    color: var(--sh-text-primary);
}

.sh-breadcrumb-sep[b-8p565dv8ll] {
    color: var(--sh-text-tertiary);
}

.sh-breadcrumb-current[b-8p565dv8ll] {
    color: var(--sh-text-primary);
    font-weight: 500;
}

.sh-theme-toggle[b-8p565dv8ll] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--sh-bg-tertiary);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    cursor: pointer;
    transition: all var(--sh-transition);
    color: var(--sh-text-secondary);
    font-size: var(--sh-font-sm);
}

.sh-theme-toggle:hover[b-8p565dv8ll] {
    border-color: var(--sh-accent);
    color: var(--sh-text-primary);
}

/* ===== BUTTONS ===== */
.sh-btn[b-8p565dv8ll] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: var(--sh-radius-md);
    font-size: var(--sh-font-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--sh-transition);
}

.sh-btn-primary[b-8p565dv8ll] {
    background: var(--sh-accent);
    color: white;
    border-color: var(--sh-accent);
}

.sh-btn-primary:hover[b-8p565dv8ll] {
    background: var(--sh-accent-hover);
    border-color: var(--sh-accent-hover);
}

.sh-btn-ghost[b-8p565dv8ll] {
    background: transparent;
    color: var(--sh-text-secondary);
    border-color: var(--sh-border);
}

.sh-btn-ghost:hover[b-8p565dv8ll] {
    background: var(--sh-bg-hover);
    color: var(--sh-text-primary);
    border-color: var(--sh-accent);
}

/* ===== METRICS STRIP ===== */
.sh-metrics-strip[b-8p565dv8ll] {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 16px 24px;
    background: var(--sh-bg-secondary);
    border-bottom: 1px solid var(--sh-border-subtle);
}

.sh-metric[b-8p565dv8ll] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 20px;
}

.sh-metric-value[b-8p565dv8ll] {
    font-size: 20px;
    font-weight: 600;
    color: var(--sh-text-primary);
}

.sh-metric-success[b-8p565dv8ll] {
    color: var(--sh-success);
}

.sh-metric-warning[b-8p565dv8ll] {
    color: var(--sh-warning);
}

.sh-metric-error[b-8p565dv8ll] {
    color: var(--sh-error);
}

.sh-metric-info[b-8p565dv8ll] {
    color: var(--sh-info);
}

.sh-metric-label[b-8p565dv8ll] {
    font-size: var(--sh-font-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sh-text-secondary);
}

.sh-metric-divider[b-8p565dv8ll] {
    width: 1px;
    height: 32px;
    background: var(--sh-border);
}

/* ===== FILTER BAR ===== */
.sh-filter-bar[b-8p565dv8ll] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: var(--sh-bg-secondary);
    border-bottom: 1px solid var(--sh-border-subtle);
}

.sh-filter-left[b-8p565dv8ll],
.sh-filter-right[b-8p565dv8ll] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sh-search-box[b-8p565dv8ll] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--sh-bg-tertiary);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    transition: border-color var(--sh-transition);
    min-width: 280px;
}

.sh-search-box:focus-within[b-8p565dv8ll] {
    border-color: var(--sh-accent);
}

.sh-search-box i[b-8p565dv8ll] {
    color: var(--sh-text-tertiary);
    font-size: 14px;
}

.sh-search-box input[b-8p565dv8ll] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--sh-text-primary);
    font-size: var(--sh-font-sm);
}

.sh-search-box input[b-8p565dv8ll]::placeholder {
    color: var(--sh-text-tertiary);
}

.sh-expanded-filters[b-8p565dv8ll] {
    padding: 16px 24px;
    background: var(--sh-bg-tertiary);
    border-bottom: 1px solid var(--sh-border-subtle);
}

.sh-filter-grid[b-8p565dv8ll] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.sh-filter-col label[b-8p565dv8ll] {
    display: block;
    font-size: var(--sh-font-xs);
    color: var(--sh-text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sh-select[b-8p565dv8ll] {
    width: 100%;
    padding: 6px 10px;
    background: var(--sh-bg-elevated);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-sm);
    color: var(--sh-text-primary);
    font-size: var(--sh-font-sm);
    cursor: pointer;
}

/* ===== TABLE ===== */
.sh-table-wrapper[b-8p565dv8ll] {
    padding: 0 24px 24px;
}

.sh-table[b-8p565dv8ll] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sh-font-sm);
}

.sh-table thead[b-8p565dv8ll] {
    background: var(--sh-bg-tertiary);
}

.sh-table th[b-8p565dv8ll] {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--sh-text-secondary);
    text-transform: uppercase;
    font-size: var(--sh-font-xs);
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--sh-border);
}

.sh-table td[b-8p565dv8ll] {
    padding: 12px;
    border-bottom: 1px solid var(--sh-border-subtle);
    color: var(--sh-text-primary);
}

.sh-table tbody tr[b-8p565dv8ll] {
    transition: background var(--sh-transition);
}

.sh-table tbody tr:hover[b-8p565dv8ll] {
    background: var(--sh-bg-hover);
    cursor: pointer;
}

/* ===== BADGES ===== */
.sh-badge[b-8p565dv8ll] {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--sh-radius-sm);
    font-size: var(--sh-font-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sh-badge-success[b-8p565dv8ll] {
    background: var(--sh-accent-subtle);
    color: var(--sh-success);
}

.sh-badge-warning[b-8p565dv8ll] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--sh-warning);
}

.sh-badge-error[b-8p565dv8ll] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--sh-error);
}

/* ===== ACTION BUTTONS ===== */
.sh-action-btn[b-8p565dv8ll] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-sm);
    cursor: pointer;
    transition: all var(--sh-transition);
    background: transparent;
}

.sh-action-btn:hover[b-8p565dv8ll] {
    background: var(--sh-bg-hover);
    border-color: var(--sh-accent);
    transform: translateY(-1px);
}

/* ===== PAGINATION ===== */
.sh-pagination[b-8p565dv8ll] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--sh-border-subtle);
    background: var(--sh-bg-secondary);
}

.sh-page-info[b-8p565dv8ll] {
    font-size: var(--sh-font-sm);
    color: var(--sh-text-secondary);
}

.sh-page-controls[b-8p565dv8ll] {
    display: flex;
    gap: 4px;
}

.sh-page-btn[b-8p565dv8ll] {
    padding: 4px 8px;
    border: 1px solid var(--sh-border);
    background: transparent;
    color: var(--sh-text-secondary);
    border-radius: var(--sh-radius-sm);
    cursor: pointer;
    transition: all var(--sh-transition);
    font-size: var(--sh-font-sm);
}

.sh-page-btn:hover:not(:disabled)[b-8p565dv8ll] {
    background: var(--sh-bg-hover);
    border-color: var(--sh-accent);
    color: var(--sh-text-primary);
}

.sh-page-btn:disabled[b-8p565dv8ll] {
    opacity: 0.4;
    cursor: not-allowed;
}

.sh-page-btn.active[b-8p565dv8ll] {
    background: var(--sh-accent);
    border-color: var(--sh-accent);
    color: white;
}

/* ===== LOADING & EMPTY STATES ===== */
.sh-loading[b-8p565dv8ll],
.sh-empty-state[b-8p565dv8ll] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--sh-text-secondary);
    text-align: center;
}

.sh-empty-state i[b-8p565dv8ll] {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: 16px;
}

/* ===== BADGE COLOUR VARIANTS ===== */
.sh-badge.success[b-8p565dv8ll] { background: rgba(34, 197, 94, 0.12); color: var(--sh-success); }
.sh-badge.warning[b-8p565dv8ll] { background: rgba(245, 158, 11, 0.12); color: var(--sh-warning); }
.sh-badge.error[b-8p565dv8ll]   { background: rgba(239, 68, 68, 0.12);  color: var(--sh-error);   }
.sh-badge.primary[b-8p565dv8ll] { background: var(--sh-accent-subtle);   color: var(--sh-accent);  }
.sh-badge.neutral[b-8p565dv8ll] { background: var(--sh-bg-tertiary);     color: var(--sh-text-secondary); }
.sh-badge.info[b-8p565dv8ll]    { background: rgba(59, 130, 246, 0.12); color: var(--sh-info);    }
.sh-badge.small[b-8p565dv8ll]   { font-size: 10px; padding: 2px 6px; }

/* ===== ACTION BUTTON GROUP + COLOURS ===== */
.sh-action-btn-group[b-8p565dv8ll] { display: flex; gap: 4px; justify-content: center; }
.sh-action-btn.primary[b-8p565dv8ll]   { color: var(--sh-accent); }
.sh-action-btn.secondary[b-8p565dv8ll] { color: var(--sh-text-secondary); }
.sh-action-btn.error[b-8p565dv8ll]     { color: var(--sh-error); }
.sh-action-btn.success[b-8p565dv8ll]   { color: var(--sh-success); }
.sh-action-btn.info[b-8p565dv8ll]      { color: var(--sh-info); }

/* ===== TEXT UTILITIES ===== */
.text-center[b-8p565dv8ll]       { text-align: center; }
.text-right[b-8p565dv8ll]        { text-align: right; }
.text-error[b-8p565dv8ll]        { color: var(--sh-error); }
.text-success[b-8p565dv8ll]      { color: var(--sh-success); }
.text-muted[b-8p565dv8ll]        { color: var(--sh-text-tertiary); }
.font-weight-600[b-8p565dv8ll]   { font-weight: 600; }

/* ===== TABLE UTILITIES ===== */
.sh-table-cell-main[b-8p565dv8ll] { font-size: var(--sh-font-sm); color: var(--sh-text-primary); font-weight: 500; }
.sh-table-cell-sub[b-8p565dv8ll]  { font-size: var(--sh-font-xs); color: var(--sh-text-secondary); margin-top: 2px; }
.sh-table-container[b-8p565dv8ll] { padding: 0 24px 24px; }
.sh-row-warning td[b-8p565dv8ll]  { background: rgba(245, 158, 11, 0.05) !important; }

/* ===== FILTER EXTRAS ===== */
.sh-select[b-8p565dv8ll] { width: auto; min-width: 140px; }
.sh-result-count[b-8p565dv8ll] { font-size: var(--sh-font-sm); color: var(--sh-text-secondary); }

/* ===== CHECKBOX ===== */
.sh-checkbox[b-8p565dv8ll] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--sh-font-sm);
    color: var(--sh-text-secondary);
    cursor: pointer;
    user-select: none;
}
.sh-checkbox input[b-8p565dv8ll] { accent-color: var(--sh-accent); }

/* ===== LOADING SPINNER ===== */
.sh-loading-state[b-8p565dv8ll] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--sh-text-secondary);
    text-align: center;
}

.sh-spinner[b-8p565dv8ll] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--sh-border);
    border-top-color: var(--sh-accent);
    border-radius: 50%;
    animation: sh-spin-b-8p565dv8ll 0.8s linear infinite;
    margin-bottom: 12px;
}

@keyframes sh-spin-b-8p565dv8ll {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/Owner/UnitOwners.razor.rz.scp.css */
/* ===== ENTERPRISE DESIGN SYSTEM ===== */
/* Shared CSS for UnitOwners.razor and OwnerAccounts.razor */
/* Matches Facilities.razor styling exactly */

/* ===== DARK THEME (Default) ===== */
.sh-app[b-or5abbc8ex] {
    --sh-bg-primary: #121212;
    --sh-bg-secondary: #1a1a1a;
    --sh-bg-tertiary: #222222;
    --sh-bg-elevated: #2a2a2a;
    --sh-bg-hover: #333333;
    --sh-border: #333333;
    --sh-border-subtle: #2a2a2a;
    --sh-text-primary: #ffffff;
    --sh-text-secondary: #a0a0a0;
    --sh-text-tertiary: #666666;
    --sh-accent: #FF8C00;
    --sh-accent-hover: #e67e00;
    --sh-accent-subtle: rgba(255, 140, 0, 0.1);
    --sh-success: #22c55e;
    --sh-warning: #f59e0b;
    --sh-error: #ef4444;
    --sh-info: #3b82f6;
    --sh-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --sh-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ===== LIGHT THEME ===== */
.sh-app.light-theme[b-or5abbc8ex] {
    --sh-bg-primary: #f8f9fa;
    --sh-bg-secondary: #ffffff;
    --sh-bg-tertiary: #f1f3f4;
    --sh-bg-elevated: #ffffff;
    --sh-bg-hover: #e8eaed;
    --sh-border: #dadce0;
    --sh-border-subtle: #e8eaed;
    --sh-text-primary: #202124;
    --sh-text-secondary: #5f6368;
    --sh-text-tertiary: #80868b;
    --sh-accent: #e07800;
    --sh-accent-hover: #c66a00;
    --sh-accent-subtle: rgba(255, 140, 0, 0.08);
    --sh-success: #1e8e3e;
    --sh-warning: #f9ab00;
    --sh-error: #d93025;
    --sh-info: #1a73e8;
    --sh-shadow: 0 1px 3px rgba(60, 64, 67, 0.15);
    --sh-shadow-lg: 0 8px 32px rgba(60, 64, 67, 0.2);
}

:root[b-or5abbc8ex] {
    --sh-radius-sm: 4px;
    --sh-radius-md: 6px;
    --sh-radius-lg: 8px;
    --sh-font-xs: 11px;
    --sh-font-sm: 12px;
    --sh-font-base: 13px;
    --sh-font-md: 14px;
    --sh-font-lg: 16px;
    --sh-transition: 150ms ease;
}

*[b-or5abbc8ex] {
    box-sizing: border-box;
}

.sh-app[b-or5abbc8ex] {
    min-height: 100vh;
    background: var(--sh-bg-primary);
    color: var(--sh-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--sh-font-base);
    line-height: 1.5;
}

/* ===== HEADER ===== */
.sh-header[b-or5abbc8ex] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    border-bottom: 1px solid var(--sh-border-subtle);
    background: var(--sh-bg-secondary);
}

.sh-header-left[b-or5abbc8ex],
.sh-header-right[b-or5abbc8ex] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sh-breadcrumb[b-or5abbc8ex] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--sh-font-sm);
}

.sh-breadcrumb a[b-or5abbc8ex] {
    color: var(--sh-text-secondary);
    text-decoration: none;
    transition: color var(--sh-transition);
}

.sh-breadcrumb a:hover[b-or5abbc8ex] {
    color: var(--sh-text-primary);
}

.sh-breadcrumb-sep[b-or5abbc8ex] {
    color: var(--sh-text-tertiary);
}

.sh-breadcrumb-current[b-or5abbc8ex] {
    color: var(--sh-text-primary);
    font-weight: 500;
}

.sh-theme-toggle[b-or5abbc8ex] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--sh-bg-tertiary);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    cursor: pointer;
    transition: all var(--sh-transition);
    color: var(--sh-text-secondary);
    font-size: var(--sh-font-sm);
}

.sh-theme-toggle:hover[b-or5abbc8ex] {
    border-color: var(--sh-accent);
    color: var(--sh-text-primary);
}

/* ===== BUTTONS ===== */
.sh-btn[b-or5abbc8ex] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: var(--sh-radius-md);
    font-size: var(--sh-font-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--sh-transition);
}

.sh-btn-primary[b-or5abbc8ex] {
    background: var(--sh-accent);
    color: white;
    border-color: var(--sh-accent);
}

.sh-btn-primary:hover[b-or5abbc8ex] {
    background: var(--sh-accent-hover);
    border-color: var(--sh-accent-hover);
}

.sh-btn-ghost[b-or5abbc8ex] {
    background: transparent;
    color: var(--sh-text-secondary);
    border-color: var(--sh-border);
}

.sh-btn-ghost:hover[b-or5abbc8ex] {
    background: var(--sh-bg-hover);
    color: var(--sh-text-primary);
    border-color: var(--sh-accent);
}

/* ===== METRICS STRIP ===== */
.sh-metrics-strip[b-or5abbc8ex] {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 16px 24px;
    background: var(--sh-bg-secondary);
    border-bottom: 1px solid var(--sh-border-subtle);
}

.sh-metric[b-or5abbc8ex] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 20px;
}

.sh-metric-value[b-or5abbc8ex] {
    font-size: 20px;
    font-weight: 600;
    color: var(--sh-text-primary);
}

.sh-metric-success[b-or5abbc8ex] {
    color: var(--sh-success);
}

.sh-metric-warning[b-or5abbc8ex] {
    color: var(--sh-warning);
}

.sh-metric-error[b-or5abbc8ex] {
    color: var(--sh-error);
}

.sh-metric-info[b-or5abbc8ex] {
    color: var(--sh-info);
}

.sh-metric-label[b-or5abbc8ex] {
    font-size: var(--sh-font-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sh-text-secondary);
}

.sh-metric-divider[b-or5abbc8ex] {
    width: 1px;
    height: 32px;
    background: var(--sh-border);
}

/* ===== FILTER BAR ===== */
.sh-filter-bar[b-or5abbc8ex] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: var(--sh-bg-secondary);
    border-bottom: 1px solid var(--sh-border-subtle);
}

.sh-filter-left[b-or5abbc8ex],
.sh-filter-right[b-or5abbc8ex] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sh-search-box[b-or5abbc8ex] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--sh-bg-tertiary);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-md);
    transition: border-color var(--sh-transition);
    min-width: 280px;
}

.sh-search-box:focus-within[b-or5abbc8ex] {
    border-color: var(--sh-accent);
}

.sh-search-box i[b-or5abbc8ex] {
    color: var(--sh-text-tertiary);
    font-size: 14px;
}

.sh-search-box input[b-or5abbc8ex] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--sh-text-primary);
    font-size: var(--sh-font-sm);
}

.sh-search-box input[b-or5abbc8ex]::placeholder {
    color: var(--sh-text-tertiary);
}

.sh-expanded-filters[b-or5abbc8ex] {
    padding: 16px 24px;
    background: var(--sh-bg-tertiary);
    border-bottom: 1px solid var(--sh-border-subtle);
}

.sh-filter-grid[b-or5abbc8ex] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.sh-filter-col label[b-or5abbc8ex] {
    display: block;
    font-size: var(--sh-font-xs);
    color: var(--sh-text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sh-select[b-or5abbc8ex] {
    width: 100%;
    padding: 6px 10px;
    background: var(--sh-bg-elevated);
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-sm);
    color: var(--sh-text-primary);
    font-size: var(--sh-font-sm);
    cursor: pointer;
}

/* ===== TABLE ===== */
.sh-table-wrapper[b-or5abbc8ex] {
    padding: 0 24px 24px;
}

.sh-table[b-or5abbc8ex] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sh-font-sm);
}

.sh-table thead[b-or5abbc8ex] {
    background: var(--sh-bg-tertiary);
}

.sh-table th[b-or5abbc8ex] {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--sh-text-secondary);
    text-transform: uppercase;
    font-size: var(--sh-font-xs);
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--sh-border);
}

.sh-table td[b-or5abbc8ex] {
    padding: 12px;
    border-bottom: 1px solid var(--sh-border-subtle);
    color: var(--sh-text-primary);
}

.sh-table tbody tr[b-or5abbc8ex] {
    transition: background var(--sh-transition);
}

.sh-table tbody tr:hover[b-or5abbc8ex] {
    background: var(--sh-bg-hover);
    cursor: pointer;
}

/* ===== BADGES ===== */
.sh-badge[b-or5abbc8ex] {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--sh-radius-sm);
    font-size: var(--sh-font-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sh-badge-success[b-or5abbc8ex] {
    background: var(--sh-accent-subtle);
    color: var(--sh-success);
}

.sh-badge-warning[b-or5abbc8ex] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--sh-warning);
}

.sh-badge-error[b-or5abbc8ex] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--sh-error);
}

/* ===== ACTION BUTTONS ===== */
.sh-action-btn[b-or5abbc8ex] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--sh-border);
    border-radius: var(--sh-radius-sm);
    cursor: pointer;
    transition: all var(--sh-transition);
    background: transparent;
}

.sh-action-btn:hover[b-or5abbc8ex] {
    background: var(--sh-bg-hover);
    border-color: var(--sh-accent);
    transform: translateY(-1px);
}

/* ===== PAGINATION ===== */
.sh-pagination[b-or5abbc8ex] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--sh-border-subtle);
    background: var(--sh-bg-secondary);
}

.sh-page-info[b-or5abbc8ex] {
    font-size: var(--sh-font-sm);
    color: var(--sh-text-secondary);
}

.sh-page-controls[b-or5abbc8ex] {
    display: flex;
    gap: 4px;
}

.sh-page-btn[b-or5abbc8ex] {
    padding: 4px 8px;
    border: 1px solid var(--sh-border);
    background: transparent;
    color: var(--sh-text-secondary);
    border-radius: var(--sh-radius-sm);
    cursor: pointer;
    transition: all var(--sh-transition);
    font-size: var(--sh-font-sm);
}

.sh-page-btn:hover:not(:disabled)[b-or5abbc8ex] {
    background: var(--sh-bg-hover);
    border-color: var(--sh-accent);
    color: var(--sh-text-primary);
}

.sh-page-btn:disabled[b-or5abbc8ex] {
    opacity: 0.4;
    cursor: not-allowed;
}

.sh-page-btn.active[b-or5abbc8ex] {
    background: var(--sh-accent);
    border-color: var(--sh-accent);
    color: white;
}

/* ===== LOADING & EMPTY STATES ===== */
.sh-loading[b-or5abbc8ex],
.sh-empty-state[b-or5abbc8ex] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--sh-text-secondary);
    text-align: center;
}

.sh-empty-state i[b-or5abbc8ex] {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: 16px;
}

/* ===== BADGE COLOUR VARIANTS ===== */
.sh-badge.success[b-or5abbc8ex] { background: rgba(34, 197, 94, 0.12); color: var(--sh-success); }
.sh-badge.warning[b-or5abbc8ex] { background: rgba(245, 158, 11, 0.12); color: var(--sh-warning); }
.sh-badge.error[b-or5abbc8ex]   { background: rgba(239, 68, 68, 0.12);  color: var(--sh-error);   }
.sh-badge.primary[b-or5abbc8ex] { background: var(--sh-accent-subtle);   color: var(--sh-accent);  }
.sh-badge.neutral[b-or5abbc8ex] { background: var(--sh-bg-tertiary);     color: var(--sh-text-secondary); }
.sh-badge.info[b-or5abbc8ex]    { background: rgba(59, 130, 246, 0.12); color: var(--sh-info);    }
.sh-badge.small[b-or5abbc8ex]   { font-size: 10px; padding: 2px 6px; }

/* ===== ACTION BUTTON GROUP + COLOURS ===== */
.sh-action-btn-group[b-or5abbc8ex] { display: flex; gap: 4px; justify-content: center; }
.sh-action-btn.primary[b-or5abbc8ex]   { color: var(--sh-accent); }
.sh-action-btn.secondary[b-or5abbc8ex] { color: var(--sh-text-secondary); }
.sh-action-btn.error[b-or5abbc8ex]     { color: var(--sh-error); }
.sh-action-btn.success[b-or5abbc8ex]   { color: var(--sh-success); }
.sh-action-btn.info[b-or5abbc8ex]      { color: var(--sh-info); }

/* ===== TEXT UTILITIES ===== */
.text-center[b-or5abbc8ex]       { text-align: center; }
.text-right[b-or5abbc8ex]        { text-align: right; }
.text-error[b-or5abbc8ex]        { color: var(--sh-error); }
.text-success[b-or5abbc8ex]      { color: var(--sh-success); }
.text-muted[b-or5abbc8ex]        { color: var(--sh-text-tertiary); }
.font-weight-600[b-or5abbc8ex]   { font-weight: 600; }

/* ===== TABLE UTILITIES ===== */
.sh-table-cell-main[b-or5abbc8ex] { font-size: var(--sh-font-sm); color: var(--sh-text-primary); font-weight: 500; }
.sh-table-cell-sub[b-or5abbc8ex]  { font-size: var(--sh-font-xs); color: var(--sh-text-secondary); margin-top: 2px; }
.sh-table-container[b-or5abbc8ex] { padding: 0 24px 24px; }
.sh-row-warning td[b-or5abbc8ex]  { background: rgba(245, 158, 11, 0.05) !important; }

/* ===== FILTER EXTRAS ===== */
.sh-select[b-or5abbc8ex] { width: auto; min-width: 140px; }
.sh-result-count[b-or5abbc8ex] { font-size: var(--sh-font-sm); color: var(--sh-text-secondary); }

/* ===== LOADING SPINNER ===== */
.sh-loading-state[b-or5abbc8ex] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--sh-text-secondary);
    text-align: center;
}

.sh-spinner[b-or5abbc8ex] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--sh-border);
    border-top-color: var(--sh-accent);
    border-radius: 50%;
    animation: sh-spin-b-or5abbc8ex 0.8s linear infinite;
    margin-bottom: 12px;
}

@keyframes sh-spin-b-or5abbc8ex {
    to { transform: rotate(360deg); }
}
/* /Components/Shared/CommHealthBanner.razor.rz.scp.css */
/* CommHealthBanner — subtle, dismissable channel health notice */

.comm-health-banner[b-hbak02cq42] {
    border: 1px solid #e8d89a;
    background: #fefce8;
    border-radius: 8px;
    margin: 0 0 1rem;
    font-size: 13.5px;
    overflow: hidden;
    transition: border-color .15s;
}

.comm-health-banner.expanded[b-hbak02cq42] {
    border-color: #d4b440;
}

/* summary row — always visible */
.chb-summary[b-hbak02cq42] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: .55rem .9rem;
    cursor: pointer;
    user-select: none;
    color: #854f0b;
}

.chb-summary:hover[b-hbak02cq42] {
    background: #fef9c3;
}

.chb-icon[b-hbak02cq42] {
    font-size: 15px;
    flex-shrink: 0;
}

.chb-text[b-hbak02cq42] {
    flex: 1;
    font-weight: 500;
    font-size: 13px;
}

.chb-chevron[b-hbak02cq42] {
    font-size: 12px;
    opacity: .7;
}

/* expanded detail */
.chb-detail[b-hbak02cq42] {
    border-top: 1px solid #e8d89a;
    padding: .5rem .9rem .65rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.chb-row[b-hbak02cq42] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: .45rem .6rem;
    border-radius: 6px;
    font-size: 13px;
}

.chb-row.chb-warn[b-hbak02cq42] {
    background: #fef3c7;
    color: #78350f;
}

.chb-row.chb-info[b-hbak02cq42] {
    background: #f0f9ff;
    color: #075985;
}

.chb-row-icon[b-hbak02cq42] {
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 1px;
}

.chb-row-body[b-hbak02cq42] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chb-row-label[b-hbak02cq42] {
    font-weight: 600;
    font-size: 12.5px;
}

.chb-row-msg[b-hbak02cq42] {
    font-size: 12px;
    opacity: .85;
    line-height: 1.4;
}

.chb-fix-btn[b-hbak02cq42] {
    flex-shrink: 0;
    background: none;
    border: 1px solid currentColor;
    border-radius: 5px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    color: inherit;
    opacity: .8;
    display: flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.chb-fix-btn:hover[b-hbak02cq42] {
    opacity: 1;
    background: rgba(0,0,0,.06);
}