/* ============================================================================
   M-OS Responsive + Touch Foundation
   Global final-layer overrides for phone, tablet, desktop and touch displays.
   Uses existing --mws-* theme tokens and does not redefine color schemes.
   ========================================================================== */

:root {
    --mos-touch-target: 44px;
    --mos-touch-target-coarse: 48px;
    --mos-page-gutter: clamp(10px, 2vw, 24px);
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body {
    width: 100%;
    max-width: 100%;
}

body {
    min-width: 320px;
    overscroll-behavior-x: none;
}

button,
[role="button"],
a,
input,
select,
textarea,
summary {
    -webkit-tap-highlight-color: transparent;
}

button,
[role="button"],
a,
label,
select,
summary {
    touch-action: manipulation;
}

button,
input,
select,
textarea {
    max-width: 100%;
}

input,
select,
textarea {
    accent-color: var(--mws-primary);
}

textarea {
    resize: vertical;
}

.workspace-scroll,
.portal-store-table-card,
.portal-table,
.ui-table-wrap,
.ticket-messages,
.topbar-profile-menu,
.ui-tabs {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.workspace-scroll {
    scrollbar-gutter: stable;
}

/* Prevent wide content from forcing the complete OS off screen. */
.os-shell,
.desktop,
.workspace,
.workspace-scroll,
.ui-system,
.portal-module,
.portal-settings-app,
.appstore-shell,
.security-shell,
.portal-module-shell {
    min-width: 0;
    max-width: 100%;
}

/* Keyboard focus remains clearly visible on every input method. */
:where(button, [role="button"], a, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--mws-primary);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Pointer / touch behavior
   -------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse) {
    :root {
        --mos-touch-target: var(--mos-touch-target-coarse);
    }

    button,
    [role="button"],
    .topbar-button,
    .topbar-search-toggle,
    .theme-toggle,
    .topbar-language-trigger,
    .topbar-language-option,
    .topbar-profile-toggle,
    .ui-btn,
    .primary-action,
    .password-toggle,
    .launcher-app-card,
    .ticket-list-item {
        min-height: var(--mos-touch-target-coarse);
    }

    .topbar-button,
    .topbar-search-toggle,
    .theme-toggle,
    .topbar-language-trigger,
    .topbar-language-option,
    .topbar-profile-toggle {
        min-width: var(--mos-touch-target-coarse);
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea,
    .input-shell {
        min-height: var(--mos-touch-target-coarse);
    }

    input[type="checkbox"],
    input[type="radio"] {
        min-width: 20px;
        min-height: 20px;
    }

    /* Hover-only movement feels unstable under touch emulation. */
    .launcher-app-card:hover,
    .ui-color-option:hover,
    .topbar-profile-toggle:hover {
        transform: none;
    }

    .launcher-app-card:active,
    .ui-btn:active,
    .primary-action:active,
    .topbar-button:active,
    .topbar-profile-toggle:active {
        transform: scale(.98);
    }

    .launcher-app-card,
    .ticket-list-item,
    .ui-color-option,
    .ui-btn,
    .primary-action {
        cursor: pointer;
    }
}

/* Keep the profile top bar compact until the user explicitly opens it.
   This also protects the collapsed state from page-specific responsive rules. */
.top-bar.panel.topbar-profile:not(.is-open) {
    width: fit-content;
}

.topbar-profile:not(.is-open) .topbar-profile-menu {
    max-width: 0;
    margin-right: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Large tablets / compact desktops
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    .launcher-dashboard-grid {
        grid-template-columns: repeat(5, minmax(96px, 124px));
        gap: 16px 18px;
    }

    .portal-page .workspace-scroll,
    .app-module-page .workspace-scroll {
        padding-inline: clamp(16px, 2.4vw, 28px);
    }
}

@media (max-width: 980px) {
    .launcher-dashboard-grid {
        grid-template-columns: repeat(4, minmax(92px, 116px));
        width: 100%;
    }

    .top-bar.panel.topbar-profile {
        --topbar-profile-size: 42px;
        width: fit-content;
        max-width: calc(100vw - 28px - var(--safe-left) - var(--safe-right));
        padding: 6px;
    }

    .topbar-profile.is-open .topbar-profile-menu {
        max-width: min(620px, calc(100vw - 92px - var(--safe-left) - var(--safe-right)));
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .portal-store-table-card,
    .ui-table-wrap {
        overflow-x: auto;
    }
}

/* --------------------------------------------------------------------------
   Tablet portrait / phone landscape
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    :root {
        --mos-page-gutter: 12px;
    }

    body::before {
        inset:
            max(8px, var(--safe-top))
            max(8px, var(--safe-right))
            max(8px, var(--safe-bottom))
            max(8px, var(--safe-left));
    }

    .os-shell,
    .portal-page .os-shell,
    .app-module-page .os-shell,
    .onboarding-page .os-shell {
        width: calc(100% - 16px - var(--safe-left) - var(--safe-right));
        max-width: 100%;
    }

    .desktop {
        min-height: calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom));
    }

    .portal-page .workspace-scroll,
    .app-module-page .workspace-scroll {
        padding-right: 14px;
        padding-left: 14px;
        padding-bottom: calc(28px + var(--safe-bottom));
    }

    .launcher-dashboard-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 8px;
        width: 100%;
    }

    .launcher-app-card {
        width: 100%;
        min-width: 0;
        padding-inline: 6px;
    }

    .launcher-app-image-wrap {
        width: clamp(68px, 19vw, 92px);
    }

    .launcher-app-title {
        max-width: 100%;
        overflow-wrap: anywhere;
        line-height: 1.25;
    }

    .topbar-slot {
        width: 100%;
    }

    .top-bar.panel.topbar-profile {
        --topbar-profile-size: 40px;
        width: fit-content;
        max-width: 100%;
        padding: 5px;
    }

    .topbar-profile.is-open .topbar-profile-menu {
        max-width: calc(100vw - 82px - var(--safe-left) - var(--safe-right));
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
    }

    .topbar-profile-menu > * {
        scroll-snap-align: start;
    }

    /* 44px remains touch-safe while keeping the compact top bar visibly smaller. */
    @media (hover: none), (pointer: coarse) {
        .topbar-profile-toggle {
            width: 44px;
            min-width: 44px;
            height: 44px;
            min-height: 44px;
        }
    }

    .portal-table,
    .portal-store-table-card .portal-table,
    .ui-table {
        width: max-content;
        max-width: none;
    }

    .portal-table,
    .ui-table {
        min-width: 640px;
    }

    .portal-store-table-card,
    .ui-table-wrap {
        max-width: 100%;
        overflow-x: auto;
        border-radius: var(--mws-radius);
    }

    .store-toolbar,
    .admin-form-actions,
    .module-form-footer,
    .ticket-admin-actions {
        gap: 10px;
    }

    .store-toolbar > *,
    .admin-form-actions > * {
        flex: 1 1 180px;
    }

    /* 16px avoids automatic input zoom on iOS Safari. */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px;
    }

    .ui-segmented button,
    .ui-section-nav a,
    .ui-tabs button {
        min-height: 44px;
    }

    .ticket-message {
        max-width: 92%;
    }
}

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .os-shell,
    .portal-page .os-shell,
    .app-module-page .os-shell,
    .onboarding-page .os-shell {
        width: calc(100% - 12px - var(--safe-left) - var(--safe-right));
        padding-top: max(6px, var(--safe-top));
        padding-bottom: max(6px, var(--safe-bottom));
    }

    .panel {
        border-radius: clamp(18px, 5vw, 24px);
    }

    .topbar-slot {
        margin-bottom: 10px;
    }

    .top-bar.panel.topbar-profile {
        --topbar-profile-size: 38px;
        width: fit-content;
        max-width: 100%;
        padding: 3px;
        justify-content: flex-end;
    }

    .topbar-profile.is-open .topbar-profile-menu {
        flex: 1 1 auto;
        max-width: none;
        margin-right: 6px;
    }

    .topbar-profile-menu {
        min-width: 0;
    }

    .topbar-profile-menu .topbar-search.is-open {
        min-width: min(220px, 62vw);
    }

    .portal-page .workspace-scroll,
    .app-module-page .workspace-scroll {
        padding-right: 10px;
        padding-left: 10px;
        padding-bottom: calc(20px + var(--safe-bottom));
    }

    .launcher-page .launcher-dashboard-workspace .workspace-scroll {
        padding-right: 10px;
        padding-left: 10px;
    }

    .launcher-dashboard-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px 4px;
    }

    .launcher-app-card {
        min-height: 126px;
        padding: 6px 2px;
    }

    .launcher-app-image-wrap {
        width: clamp(62px, 21vw, 78px);
    }

    .launcher-app-title {
        font-size: clamp(.72rem, 3.1vw, .82rem);
    }

    .dock-slot.is-inline .dock {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 12px;
    }

    .portal-summary-card,
    .portal-note-card,
    .portal-package-card,
    .portal-table-card,
    .ui-card {
        padding: 14px;
    }

    .ui-system-hero {
        padding-inline: 14px;
    }

    .ui-control-row,
    .ticket-status-form {
        grid-template-columns: 1fr;
    }

    .ui-style-status {
        text-align: left;
    }

    .store-toolbar,
    .admin-form-actions,
    .module-form-footer,
    .ticket-admin-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .store-toolbar > *,
    .admin-form-actions > *,
    .module-form-footer > *,
    .ticket-admin-actions > * {
        width: 100%;
        max-width: none;
    }

    .ticket-message {
        max-width: 96%;
    }

    .auth-panel,
    .auth-panel-wide {
        width: 100%;
        max-width: 100%;
    }

    .auth-form-options {
        align-items: flex-start;
    }

    .remember-login,
    .forgot-password-link,
    .password-toggle {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

@media (max-width: 390px) {
    .launcher-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 6px;
    }

    .launcher-app-card {
        min-height: 132px;
    }

    .launcher-app-image-wrap {
        width: 76px;
    }

    .dock-slot.is-inline .dock {
        grid-template-columns: 1fr;
    }

    .topbar-profile-menu {
        gap: 4px;
    }
}


/* --------------------------------------------------------------------------
   Persistent M-OS top-bar overlay plane
   The top bar is a real overlay: it stays above the desktop/workspace but
   contributes no height to the document. This prevents browser-page overflow.
   Modal/dialog layers (z-index >= 1000) can still appear above it.
   -------------------------------------------------------------------------- */
.desktop {
    position: relative;
}

.topbar-slot {
    position: absolute;
    top: 6px;
    right: 0;
    left: 0;
    z-index: 900;
    width: auto;
    padding-top: 0;
    margin-bottom: 0;
    pointer-events: none;
}

.topbar-slot > .top-bar {
    position: relative;
    z-index: 1;
    pointer-events: auto;
}

/* Short touch displays / POS-style landscape screens. */
@media (max-height: 620px) and (orientation: landscape) {
    .os-shell {
        padding-top: max(6px, var(--safe-top));
        padding-bottom: max(6px, var(--safe-bottom));
    }

    .topbar-slot {
        position: absolute;
        top: 6px;
        right: 0;
        left: 0;
        z-index: 900;
        margin-bottom: 0;
    }

    .portal-page .workspace-scroll,
    .app-module-page .workspace-scroll {
        margin-top: 0;
        padding-top: 16px;
    }

    .launcher-page .launcher-dashboard-workspace .workspace-scroll {
        padding-top: 16px;
    }
}

/* Hover effects are enabled only on devices that actually support hover. */
@media (hover: hover) and (pointer: fine) {
    .launcher-app-card:hover {
        transform: translateY(-6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    html:not([data-ui-reduce-motion="off"]) *,
    html:not([data-ui-reduce-motion="off"]) *::before,
    html:not([data-ui-reduce-motion="off"]) *::after {
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   GLOBAL M-OS APPEARANCE PREFERENCES
   Settings -> Darstellung controls these states through <html data-ui-* />.
   This stylesheet is loaded after page/app CSS so the preferences win
   consistently across Admin, User, Premium, AppStore and future M-OS apps.
   -------------------------------------------------------------------------- */

/* Glass ON: shared structural surfaces use the same blur language. */
html[data-ui-glass="on"] :is(
    .panel,
    .ui-card,
    .top-bar,
    .settings-nav-card,
    .settings-content-card,
    .setting-block,
    .mws-notification-toast,
    .topbar-notification-dropdown,
    .mws-confirm-dialog,
    .mos-plus-promo,
    .mos-market-app-card,
    .mos-app-showcase,
    .mos-subscription-rail,
    .mos-permissions-panel,
    .mos-market-sidebar,
    .mos-plus-showcase,
    .mos-market-security,
    .mos-app-info-grid > article,
    .ui-panel,
    .settings-savebar,
    .topbar-language-menu,
    .update-modal,
    .legal-contact-card,
    .legal-sidebar-card
) {
    backdrop-filter: blur(var(--mos-glass-blur)) saturate(var(--mos-glass-saturate));
    -webkit-backdrop-filter: blur(var(--mos-glass-blur)) saturate(var(--mos-glass-saturate));
}

/* Glass OFF: no hidden browser blur cost and no transparent main surfaces. */
html[data-ui-glass="off"] :is(
    .panel,
    .ui-card,
    .top-bar,
    .settings-nav-card,
    .settings-content-card,
    .setting-block,
    .mws-notification-toast,
    .topbar-notification-dropdown,
    .mws-confirm-dialog,
    .mos-plus-promo,
    .mos-market-app-card,
    .mos-app-showcase,
    .mos-subscription-rail,
    .mos-permissions-panel,
    .mos-market-sidebar,
    .mos-plus-showcase,
    .mos-market-security,
    .mos-app-info-grid > article,
    .ui-panel,
    .settings-savebar,
    .topbar-language-menu,
    .update-modal,
    .legal-contact-card,
    .legal-sidebar-card
) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html[data-ui-glass="off"] :is(.panel, .top-bar) {
    background: var(--mos-panel-solid) !important;
}

html[data-ui-glass="off"] :is(
    .ui-card,
    .settings-nav-card,
    .settings-content-card,
    .setting-block,
    .mos-plus-promo,
    .mos-market-app-card,
    .mos-app-showcase,
    .mos-subscription-rail,
    .mos-permissions-panel,
    .mos-market-sidebar,
    .mos-plus-showcase,
    .mos-market-security,
    .mos-app-info-grid > article,
    .ui-panel,
    .settings-savebar,
    .topbar-language-menu,
    .topbar-notification-dropdown,
    .update-modal,
    .legal-contact-card,
    .legal-sidebar-card
) {
    background: var(--mos-card-solid) !important;
}

/* Primary interactive accents follow the selected color family everywhere. */
html[data-color] :is(
    .primary-action,
    .appstore-promo-action,
    .appstore-modal-primary,
    .appstore-area-tab.is-active,
    .appstore-product-billing button.is-active,
    .appstore-modal-billing button.is-active,
    .appstore-product-symbol,
    .appstore-plus-symbol
) {
    border-color: rgba(var(--mws-primary-rgb), .42) !important;
    color: var(--mws-on-primary) !important;
    background: var(--mws-accent-gradient) !important;
    box-shadow: 0 12px 30px rgba(var(--mws-primary-rgb), .20);
}

/* Explicit "animations off" and effective reduced-motion share one safe mode. */
html[data-ui-animations="off"] *,
html[data-ui-animations="off"] *::before,
html[data-ui-animations="off"] *::after,
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
}

html[data-ui-animations="off"] :is(.ui-btn, .admin-action-button, .open-app-link)::after,
html[data-motion="reduced"] :is(.ui-btn, .admin-action-button, .open-app-link)::after {
    display: none !important;
}

@media (hover: hover) and (pointer: fine) {
    html[data-ui-animations="off"] :is(
        .launcher-app-card,
        .appstore-app-slide,
        .appstore-product-card,
        .asset-card,
        .inbox-overview-card,
        .mos-market-app-card,
        .ui-color-option
    ):hover,
    html[data-motion="reduced"] :is(
        .launcher-app-card,
        .appstore-app-slide,
        .appstore-product-card,
        .asset-card,
        .inbox-overview-card,
        .mos-market-app-card,
        .ui-color-option
    ):hover {
        transform: none !important;
    }
}