/* Mobile layout owns these properties across legacy module styles and inline
   styles loaded by the router. Keep desktop layouts and print output separate. */
@layer cabo-mobile-layout {
    /* Both libraries stack at 1000px. Sticky sidebars only work beside the
       content; in a single column they would paint over the following row. */
    @media screen and (max-width: 1000px) {
        :is(.dcl-shell, .lrn-shell) { grid-template-columns: minmax(0, 1fr) !important; }
        :is(.dcl-side, .lrn-side) {
            position: static !important; top: auto !important;
            max-height: none !important; overflow: visible !important;
        }
        :is(.dcl-toolbar, .lrn-toolbar) {
            display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
            gap: 10px !important;
        }
        :is(.dcl-searchbox, .lrn-searchbox) { width: 100% !important; min-width: 0 !important; }
        :is(.dcl-searchbox, .lrn-searchbox) input { display: block; width: 100% !important; min-height: 44px; }
        :is(.dcl-tool-right, .lrn-tool-right) {
            width: 100% !important; min-width: 0 !important; margin-left: 0 !important;
            flex-wrap: wrap !important; gap: 8px !important;
        }
        :is(.dcl-tool-right, .lrn-tool-right) > select { flex: 1 1 150px; min-width: 0 !important; }
        :is(.dcl-tool-right, .lrn-tool-right) :is(button, select) { min-height: 44px; }
        :is(.dcl-view-toggle, .lrn-view-toggle) { flex: 0 0 auto; }
        :is(.dcl-view-toggle, .lrn-view-toggle) button { min-width: 44px; }
        :is(#dcl-btn-folder-delete, #lrn-btn-folder-delete) { min-width: 44px; }
        :is(.dcl-grid, .lrn-grid) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 288px), 1fr)) !important; }
        :is(.dcl-grid, .lrn-grid).list { grid-template-columns: minmax(0, 1fr) !important; }
        :is(.dcl-card-body, .lrn-card-body) { min-width: 0; overflow-wrap: anywhere; }
        :is(.dcl-folder-hero, .lrn-folder-hero) .fh-left { min-width: 0; max-width: 100%; }
        :is(.dcl-folder-hero, .lrn-folder-hero) .fh-left > div:last-child { min-width: 0; overflow-wrap: anywhere; }
    }
    @media screen and (max-width: 600px) {
        :is(.dcl-tool-right, .lrn-tool-right) {
            display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important;
        }
        :is(.dcl-tool-right, .lrn-tool-right) > select { width: 100% !important; }
        :is(#dcl-btn-folder-delete, #lrn-btn-folder-delete) { justify-self: end; }
    }
    @media screen and (max-width: 1024px) {
        body.main-layout {
            padding-left: max(12px, env(safe-area-inset-left)) !important;
            padding-right: max(12px, env(safe-area-inset-right)) !important;
            padding-top: max(12px, env(safe-area-inset-top)) !important;
            padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
        }
    }
    @media screen and (max-width: 900px) {
        html { scroll-padding-top: 12px; scroll-padding-bottom: 100px; }
        body.intranet-page {
            height: auto !important; min-height: 100vh; min-height: 100dvh;
            background-attachment: scroll !important;
            background-size: 100% 100% !important;
            background-position: center top !important;
            scrollbar-gutter: auto;
        }
        body.intranet-page .portal-content-full {
            box-sizing: border-box !important; width: 100% !important;
            min-height: 100vh; min-height: 100dvh;
            padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 24px max(12px, env(safe-area-inset-left)) !important;
            transition: none !important;
        }
        body.intranet-page.portal-in-module .portal-content-full { padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important; }
        body.intranet-page .portal-topbar {
            /* Stay in the document flow: no floating panel covering the page. */
            position: relative !important; top: auto !important; inset-inline: auto !important;
            display: block !important; width: 100% !important; min-height: 0 !important;
            box-sizing: border-box !important; margin: 0 0 12px !important; padding: 8px !important;
            border: 1px solid #dfe6ed !important; border-radius: 18px !important;
            background: #f8fafc !important; box-shadow: 0 6px 24px -16px #172b4030 !important;
            transform: none !important; opacity: 1 !important; pointer-events: auto !important;
            transition: none !important;
        }
        body.intranet-page .portal-topbar * { box-sizing: border-box; }
        body.intranet-page :is(.portal-title, .topbar-logo-center, .portal-clock-chip) { display: none !important; }
        body.intranet-page .portal-top-actions {
            display: flex !important; flex-flow: row nowrap !important; align-items: center !important;
            justify-content: flex-start !important; gap: 6px !important;
            width: 100% !important; min-width: 0 !important; margin: 0 !important;
        }
        body.intranet-page .portal-live-cluster {
            order: 0 !important; flex: 1 1 0 !important; width: auto !important;
            min-width: 0 !important; justify-content: flex-start !important;
        }
        body.intranet-page .portal-weather-chip {
            display: flex !important; align-items: center; gap: 5px !important;
            width: 100% !important; max-width: 100% !important; min-width: 0 !important;
            min-height: 44px !important; padding: 0 !important;
        }
        body.intranet-page .portal-weather-ico { flex: 0 0 38px !important; width: 38px !important; height: 38px !important; padding: 0 !important; }
        body.intranet-page .portal-weather-ico .weather-art { width: 38px !important; }
        body.intranet-page .portal-weather-text { min-width: 0 !important; flex: 1 1 0 !important; }
        body.intranet-page .portal-weather-text strong { font-size: 18px !important; line-height: 1.2 !important; }
        body.intranet-page .portal-weather-text small {
            display: block !important; max-width: 100% !important; margin-top: 2px;
            font-size: 11px !important; line-height: 1.35; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
        }
        body.intranet-page :is(#portal-refresh, .global-announcer, #cabo-user-chip-host, .portal-session-chip) {
            flex: 0 0 auto !important; width: auto !important; min-width: 0 !important;
            margin: 0 !important; padding: 0 !important; border: 0 !important;
        }
        body.intranet-page #portal-refresh { order: 1 !important; }
        body.intranet-page .global-announcer { order: 2 !important; }
        body.intranet-page :is(#cabo-user-chip-host, .portal-session-chip) { order: 3 !important; }
        body.intranet-page :is(#portal-refresh, .global-announcer-bell, .cabo-user-chip-button) {
            display: flex !important; align-items: center; justify-content: center;
            flex: 0 0 44px !important; width: 44px !important; height: 44px !important;
            min-width: 44px !important; min-height: 44px !important; padding: 0 !important;
        }
        body.intranet-page :is(.cabo-user-chip-name, .cabo-user-chip-clock) { display: none !important; }
        body.intranet-page .cabo-user-chip-avatar { flex: 0 0 36px !important; width: 36px !important; height: 36px !important; box-shadow: none !important; }
        body.intranet-page .global-announcer-badge { top: 0 !important; right: 0 !important; min-width: 20px; height: 20px; font-size: 10px !important; }
        body.intranet-page .global-announcer-bell::after { display: none !important; }
        body.intranet-page .portal-view { min-width: 0 !important; padding: 12px 0 !important; border-radius: 18px !important; }
        body.intranet-page .hero-content { padding: 12px 4px 20px !important; }
        body.intranet-page .hero-top { gap: 16px !important; padding: 18px 0 22px !important; animation: none !important; }
        body.intranet-page .hero-logo { width: min(86%, 330px) !important; max-width: 100% !important; animation: none !important; }
        body.intranet-page .hero-saludo { margin: 0 !important; font-size: 16px !important; line-height: 1.5 !important; text-wrap: balance; }
        body.intranet-page .hero-saludo .login-cta { margin: 10px 0 0; min-height: 44px; }
        body.intranet-page .modules-orbit:not(.is-docking) {
            display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            width: 100% !important; max-width: 700px !important; margin: 12px auto 0 !important;
            padding: 0 !important; gap: 12px !important;
        }
        body.intranet-page .modules-orbit:not(.is-docking) .module-circle {
            width: 100% !important; max-width: none !important; min-width: 0 !important;
            min-height: 114px !important; aspect-ratio: auto !important; border-radius: 22px !important;
            padding: 16px 8px !important; gap: 10px !important; grid-column: auto !important;
            border: 1px solid #e5eaf0 !important; box-shadow: 0 8px 24px -18px #172b4040 !important;
            animation: none !important; transform: none !important;
        }
        body.intranet-page .module-circle .ico { width: 44px !important; height: 44px !important; flex: 0 0 44px; font-size: 20px !important; }
        body.intranet-page .module-circle .lbl { font-size: 13px !important; line-height: 1.4 !important; }
        body.intranet-page .portal-quick-rail {
            bottom: max(10px, env(safe-area-inset-bottom)) !important;
            max-width: calc(100vw - 24px) !important;
            max-height: 76px !important; padding: 8px !important;
            /* Keep its bounds stable when switching from the desktop rail. */
            transition: opacity .2s ease !important;
        }
        /* On mobile, menus belong to the visual viewport, not a transformed
           header. JavaScript only updates the viewport bounds on keyboard/resize. */
        :is(.cabo-user-chip-menu, .global-announcer-panel) {
            position: fixed !important;
            top: var(--cabo-menu-top, 76px) !important;
            left: max(12px, env(safe-area-inset-left)) !important;
            right: max(12px, env(safe-area-inset-right)) !important;
            width: auto !important; max-width: none !important;
            max-height: var(--cabo-menu-height, calc(100dvh - 96px)) !important;
            overflow: auto !important; overscroll-behavior: contain;
        }
        body .swal2-popup { max-height: calc(var(--cabo-viewport-height, 100dvh) - 24px) !important; }
        body .swal2-container {
            top: var(--cabo-viewport-top, 0px) !important; bottom: auto !important;
            height: var(--cabo-viewport-height, 100dvh) !important;
            box-sizing: border-box;
        }
    }
    @media screen and (max-width: 540px) {
        body.intranet-page .modules-orbit:not(.is-docking) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    }
    @media screen and (max-width: 360px) {
        body.intranet-page .portal-top-actions { gap: 3px !important; }
        body.intranet-page .portal-weather-ico, body.intranet-page .portal-weather-ico .weather-art { width: 30px !important; flex-basis: 30px !important; }
        body.intranet-page .portal-weather-text small { font-size: 10px !important; }
    }
    @media (hover: none) and (max-width: 900px) {
        body.intranet-page .module-circle:hover { transform: none !important; }
        body.intranet-page .module-circle:hover::before, body.intranet-page .module-circle:hover::after { opacity: 0 !important; }
        body.intranet-page .module-circle:hover .ico { transform: none !important; background: var(--mc-icon-bg) !important; color: var(--mc-icon-color) !important; }
        body.intranet-page .module-circle:hover .lbl { color: var(--cabo-dark) !important; }
    }
}