/* ResponsiveStyles.css - Mode-responsive CSS */

/* Mode class definitions applied by script */

/* Compact mode - narrow viewports */
.unb-mode-compact {
    --unb-panel-padding: 0.5em;
    --unb-panel-gap: 0.5em;
    --unb-gap: 0.5rem;

    --unb-sidebar-width: 0;
    --unb-header-height: calc(var(--unb-vh-unit) * 1.2);
    --unb-footer-height: calc(var(--unb-vh-unit) * 0.6);
}

.unb-mode-compact .UnB-Sidebar {
    position: fixed;
    inset-block-start: var(--unb-header-height);
    inset-block-end: var(--unb-footer-height);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
}

.unb-mode-compact .UnB-Sidebar.is-visible {
    opacity: 1;
    visibility: visible;
}

.unb-mode-compact .UnB-Sidebar-Start {
    inset-inline-start: 0;
    inline-size: calc(var(--unb-vw-unit) * 12);
}

.unb-mode-compact .UnB-Sidebar-End {
    inset-inline-end: 0;
    inline-size: calc(var(--unb-vw-unit) * 12);
}

.unb-mode-compact .UnB-Header {
    padding-inline: 0.5em;
    gap: 0.25em;
}

.unb-mode-compact .UnB-Display {
    grid-column: 1 / -1;
}

/* Standard mode - medium viewports */
.unb-mode-standard {
    --unb-panel-padding: 0.75em;
    --unb-panel-gap: 0.75em;
    --unb-gap: 0.75rem;

    --unb-sidebar-width: calc(var(--unb-vw-unit) * 3);
    --unb-header-height: calc(var(--unb-vh-unit) * 1.5);
    --unb-footer-height: calc(var(--unb-vh-unit) * 0.75);
}

.unb-mode-standard .UnB-Sidebar-End {
    display: none;
}

/* Spacious mode - larger viewports */
.unb-mode-spacious {
    --unb-panel-padding: 1em;
    --unb-panel-gap: 1em;
    --unb-gap: 1rem;

    --unb-sidebar-width: calc(var(--unb-vw-unit) * 4);
    --unb-header-height: calc(var(--unb-vh-unit) * 1.5);
    --unb-footer-height: calc(var(--unb-vh-unit) * 0.75);
}

/* Wide mode - large desktop */
.unb-mode-wide {
    --unb-panel-padding: 1.5em;
    --unb-panel-gap: 1.25em;
    --unb-gap: 1.25rem;

    --unb-sidebar-width: calc(var(--unb-vw-unit) * 4);
    --unb-header-height: calc(var(--unb-vh-unit) * 1.5);
    --unb-footer-height: calc(var(--unb-vh-unit) * 0.75);
}

/* High contrast mode */
.unb-high-contrast {
    --unb-border-color: rgba(255, 255, 255, 0.3);
    --unb-text-secondary: rgba(255, 255, 255, 0.9);
}

/* Reduced motion mode */
.unb-reduced-motion {
    --unb-transition-duration: 0ms;
}

.unb-reduced-motion * {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
}

/* Orientation modes */
@media (orientation: portrait) {
    .UnB-Panel {
        --unb-sidebar-width: auto;
    }
}

@media (orientation: landscape) {
    .UnB-Panel {
        --unb-sidebar-width: calc(var(--unb-vw-unit) * 4);
    }
}

/* Print styles */
@media print {
    .UnB-Sidebar,
    .UnB-Header-End,
    .UnB-Footer {
        display: none !important;
    }

    .UnB-Display {
        grid-column: 1 / -1;
        overflow: visible;
    }

    .UnB-Overlay {
        display: none !important;
    }
}