/* Story 5.1 AC #6: Brand Colors (ADR-010, UX Design) */
:root {
    --brand-primary: #1976d2;
    --brand-secondary: #424242;
    --brand-success: #4caf50;
    --brand-warning: #ff9800;
    --brand-danger: #f44336;
    --brand-background: #fafafa;
    --brand-surface: #ffffff;
    /* Story 5.16: Responsive spacing */
    --page-padding: 1rem;
}
@media (min-width: 768px) {
    :root { --page-padding: 1.5rem; }
}
@media (min-width: 1024px) {
    :root { --page-padding: 2rem; }
}

/* Base styles */
html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--brand-background);
    margin: 0;
    padding: 0;
}

/* Radzen overrides */
.rz-sidebar-dark {
    background-color: var(--brand-secondary);
}

/* Error UI */
#blazor-error-ui {
    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 {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Form validation */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--brand-success);
}

.invalid {
    outline: 1px solid var(--brand-danger);
}

.validation-message {
    color: var(--brand-danger);
}

/* Blazor error boundary */
.blazor-error-boundary {
    background: var(--brand-danger);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Story 5.7: Smooth sidebar width transition to mitigate FOUC on tablet */
.rz-sidebar {
    transition: width 0.15s ease-out;
}

/* Story 5.7: Responsive sidebar behavior (UX Design) */
@media (max-width: 1023px) {
    /* Tablet: collapse sidebar by default */
    .rz-sidebar {
        width: 50px;
    }
}

@media (max-width: 767px) {
    /* Mobile: hide sidebar, show via toggle as overlay */
    .rz-sidebar {
        display: none;
    }
    .rz-sidebar.rz-sidebar-expanded {
        display: block;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        height: 100vh;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
    }
    /* Mobile backdrop when sidebar is open */
    .rz-layout:has(> .rz-sidebar.rz-sidebar-expanded)::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 999;
    }
}

/* Responsive breakpoints (UX Design) */
@media (min-width: 1920px) {
    /* Large desktop - content max-width constrained */
    .rz-body > div {
        max-width: 1600px;
        margin: 0 auto;
    }
}

/* Story 5.16: Responsive design and mobile support */

/* Responsive image reset (AC #4) - Inline styles on specific images (e.g., profile picture)
   override this via specificity. Verify after adding new images. */
img {
    max-width: 100%;
    height: auto;
}

/* Page container utility classes (replaces inline max-width styles) */
.page-container {
    width: 100%;
    margin: 0 auto;
    padding: var(--page-padding, 1rem);
    box-sizing: border-box;
}
.page-container--narrow {
    max-width: 720px;
}
.page-container--medium {
    max-width: 960px;
}
.page-container--wide {
    max-width: 1200px;
}

/* CreateTenant page centering (moved from inline <style> for CSP compliance) */
.create-tenant-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--page-padding, 2rem);
}

/* Responsive data grid wrapper (horizontal scroll on narrow viewports) */
.responsive-grid-wrapper {
    overflow-x: auto;
}

/* Chart container for responsive height */
.chart-container {
    height: 300px;
}

/* Tablet: compact header spacing and data grid scroll */
@media (max-width: 1023px) {
    .rz-header .rz-stack {
        gap: 0.25rem;
    }
    /* Tablet/Mobile: enable horizontal scroll for data grids */
    .rz-datatable-scrollable-body,
    .rz-datatable {
        overflow-x: auto;
    }
    /* Touch-friendly targets (AC #5 - WCAG 2.5.8) */
    .rz-button {
        min-height: 44px;
        min-width: 44px;
    }
    .rz-button.rz-button-sm {
        min-height: 44px;
        padding: 0.5rem 0.75rem;
    }
    .rz-textbox, .rz-dropdown, .rz-switch {
        min-height: 44px;
    }
}

/* Mobile: overrides tablet rules where needed (must come after max-width:1023px) */
@media (max-width: 767px) {
    .user-display-name {
        display: none;
    }
    /* Mobile: compact header padding */
    .rz-header {
        padding: 0.25rem 0.5rem;
    }
    /* Mobile: responsive dialogs (AC #1, #3) */
    .rz-dialog {
        max-width: calc(100vw - 2rem) !important;
        width: calc(100vw - 2rem) !important;
    }
    /* Mobile: responsive chart height (overrides Radzen inline style on .rz-chart element) */
    .rz-chart {
        height: 220px !important;
    }
}