/* ============================================================
   SAKALANS MOBILE SHELL v1.0
   Isolated responsive shell repair
   Loaded LAST intentionally.
   ============================================================ */

/* Desktop/tablet default:
   never force mobile navigation outside mobile breakpoint. */
.mobile-bottom-nav {
    display: none;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media screen and (max-width: 760px) {

    html {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    body {
        width: 100%;
        min-width: 0;
        margin: 0;
        overflow-x: hidden;
        padding-bottom:
            calc(76px + env(safe-area-inset-bottom)) !important;
    }

    #appShell,
    #appShell .app,
    #appShell .workspace {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
    }

    /* Desktop navigation must not occupy mobile width. */
    #appShell .sidebar,
    #appShell .sakalans-sidebar {
        display: none !important;
    }

    /* Keep main workspace inside viewport. */
    #appShell .workspace {
        display: block !important;
    }

    #appShell .content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding:
            14px 12px
            calc(92px + env(safe-area-inset-bottom))
            !important;
        margin: 0 !important;
    }

    /* Mobile top bar */
    #appShell .topbar,
    #appShell .sakalans-topbar {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 58px !important;
        height: auto !important;
        padding: 9px 12px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 900 !important;
    }

    #appShell .topbar-command,
    #appShell .searchbox,
    #appShell .ai-selector,
    #appShell .guardian-status {
        display: none !important;
    }

    /* Cards/workspaces */
    #appShell .page-card,
    #appShell .portal-panel,
    #appShell .workspace-section,
    #appShell .dash-card,
    #appShell .time-overview-card,
    #appShell .integration-card {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #appShell .dashboard-grid,
    #appShell .data-grid,
    #appShell .time-mobile-grid,
    #appShell .agent-center-dashboard {
        grid-template-columns: 1fr !important;
    }

    /* ========================================================
       MOBILE BOTTOM NAVIGATION
       Force visibility after every later workspace stylesheet.
       ======================================================== */

    #appShell .mobile-bottom-nav {
        display: grid !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height:
            calc(68px + env(safe-area-inset-bottom)) !important;
        min-height: 68px !important;
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        background:
            rgba(255,255,255,.98) !important;
        border-top:
            1px solid #dce7ef !important;
        box-shadow:
            0 -8px 28px rgba(20,61,90,.10) !important;
        backdrop-filter:
            blur(16px) !important;
        -webkit-backdrop-filter:
            blur(16px) !important;
        padding:
            0 0 env(safe-area-inset-bottom) !important;
        margin: 0 !important;
        z-index: 10000 !important;
        overflow: visible !important;
    }

    #appShell .mobile-bottom-nav button {
        min-width: 0 !important;
        height: 68px !important;
        margin: 0 !important;
        padding: 6px 3px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #60788c !important;
        display: grid !important;
        place-items: center !important;
        align-content: center !important;
        gap: 2px !important;
        font-weight: 800 !important;
        box-shadow: none !important;
    }

    #appShell .mobile-bottom-nav button.hidden {
        display: none !important;
    }

    #appShell .mobile-bottom-nav button span {
        font-size: 19px !important;
        line-height: 1 !important;
    }

    #appShell .mobile-bottom-nav button small {
        display: block !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    #appShell .mobile-bottom-nav .mobile-time-main {
        color: #0b91cc !important;
    }

    #appShell .mobile-bottom-nav .mobile-time-main span {
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        display: grid !important;
        place-items: center !important;
        margin-top: -18px !important;
        background: #e5f7ff !important;
        border: 4px solid #fff !important;
        box-shadow:
            0 4px 16px rgba(18,145,204,.18) !important;
    }

    /* Customer portal keeps its own three-button contract. */
    body.customer-mode #appShell .mobile-bottom-nav,
    .customer-mode #appShell .mobile-bottom-nav {
        grid-template-columns:
            repeat(3, minmax(0,1fr)) !important;
    }
}

/* Very narrow phones */
@media screen and (max-width: 430px) {

    #appShell .content {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #appShell .kpi-grid,
    #appShell .dashboard-grid,
    #appShell .data-grid {
        grid-template-columns: 1fr !important;
    }

    #appShell .page-card {
        padding: 14px !important;
        border-radius: 14px !important;
    }
}

/* Never show application bottom navigation in print. */
@media print {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* SAKALANS_MOBILE_SHELL_V10 */