/* =========================================================
   SKYSUITE MOBILE FOUNDATION — WHOLE PLATFORM
   Loaded after existing page styles so it can safely correct
   mobile overflow/navigation without changing desktop UX.
   ========================================================= */

:root{
  --sky-mobile-top:48px;
  --sky-mobile-bottom-nav:68px;
  --sky-mobile-safe-bottom:env(safe-area-inset-bottom,0px);
  --sky-mobile-safe-top:env(safe-area-inset-top,0px);
  --sky-mobile-burgundy:#741a3b;
  --sky-mobile-deep:#3d0b20;
  --sky-mobile-line:#eadfe4;
  --sky-mobile-paper:#fff;
  --sky-mobile-shadow:0 22px 70px rgba(31,13,22,.24);
}

html,body{max-width:100%;overflow-x:hidden}
img,video,iframe,svg,canvas{max-width:100%}
input,select,textarea,button{max-width:100%}
main,.main-content,.page-content,.sf-main,.sf-content,.sp-main,.sp-content,.fp-main,.fp-content,.learn-main{min-width:0;max-width:100%}

.sky-mobile-nav-overlay{
  position:fixed;
  inset:0;
  z-index:1540;
  background:rgba(24,10,16,.48);
  backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease;
}
body.sky-mobile-nav-open .sky-mobile-nav-overlay,
body.sky-portal-drawer-open .sky-mobile-nav-overlay{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
body.sky-mobile-nav-open,
body.sky-portal-drawer-open{overflow:hidden}

.sky-mobile-table-wrap{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  border-radius:inherit;
}
.sky-mobile-table-wrap>table{margin-bottom:0!important}
.sky-mobile-table-hint{
  display:none;
  color:#8c7d84;
  font-size:10px;
  font-weight:750;
  margin:0 0 7px;
}

.sky-network-banner{
  position:fixed;
  z-index:2200;
  left:50%;
  top:calc(58px + var(--sky-mobile-safe-top));
  transform:translate(-50%,-10px);
  width:min(430px,calc(100% - 24px));
  padding:10px 14px;
  border-radius:12px;
  background:#30252a;
  color:#fff;
  box-shadow:0 12px 36px rgba(0,0,0,.22);
  font-size:11px;
  font-weight:800;
  text-align:center;
  opacity:0;
  visibility:hidden;
  transition:.2s ease;
}
.sky-network-banner.show{opacity:1;visibility:visible;transform:translate(-50%,0)}

.sky-pwa-install-toast{
  position:fixed;
  z-index:2180;
  right:16px;
  bottom:calc(16px + var(--sky-mobile-safe-bottom));
  width:min(360px,calc(100% - 32px));
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px;
  border:1px solid #e9dde2;
  border-radius:16px;
  background:#fff;
  color:#2b2025;
  box-shadow:0 20px 60px rgba(50,20,34,.2);
}
.sky-pwa-install-mark{width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#521027,#8c2850);color:#fff;font-weight:950}
.sky-pwa-install-copy{min-width:0;flex:1}.sky-pwa-install-copy strong{display:block;font-size:11px}.sky-pwa-install-copy span{display:block;margin-top:2px;color:#81747a;font-size:9px;line-height:1.35}
.sky-pwa-install-actions{display:flex;gap:6px}.sky-pwa-install-actions button{min-height:34px;padding:0 10px;border-radius:10px;border:1px solid #eadfe4;background:#fff;color:#6f1d3b;font-size:9px;font-weight:900;cursor:pointer}.sky-pwa-install-actions .primary{border-color:#741a3b;background:#741a3b;color:#fff}

.sky-mobile-bottom-nav{display:none}

@media(max-width:980px){
  /* ---------- Main operations portal drawer ---------- */
  body .sidebar{
    display:flex!important;
    position:fixed!important;
    z-index:1600!important;
    left:0!important;
    top:var(--sky-global-topbar-height,48px)!important;
    bottom:0!important;
    height:calc(100dvh - var(--sky-global-topbar-height,48px))!important;
    min-height:0!important;
    width:min(86vw,300px)!important;
    max-width:300px!important;
    transform:translateX(-106%);
    transition:transform .22s ease!important;
    box-shadow:var(--sky-mobile-shadow)!important;
    overflow:hidden!important;
  }
  body.sky-mobile-nav-open .sidebar{transform:translateX(0)}
  body .sidebar .navigation{overflow-y:auto!important;-webkit-overflow-scrolling:touch;padding-bottom:18px!important}
  body .main-content,
  body.sidebar-collapsed .main-content{
    margin-left:0!important;
    width:100%!important;
    max-width:100%!important;
  }
  body.sidebar-collapsed .sidebar{width:min(86vw,300px)!important}
  .sky-global-topbar{padding-left:10px!important;padding-right:10px!important;gap:8px!important}
  .sky-global-topbar-left,.sky-global-topbar-right{gap:7px!important}
  .sky-global-brand-tagline{display:none!important}
  .sky-global-topbar-name{display:none!important}
  .sky-ai-topbar-label{display:none!important}
  .sky-ai-topbar-button{min-width:30px!important;width:30px!important;padding:0!important;justify-content:center!important}
  .sky-notification-panel{right:-45px!important;width:min(380px,calc(100vw - 18px))!important}
  .main-content{padding:18px 16px 48px!important}
  .page-heading-bar{margin-bottom:16px!important}
  .page-heading-bar h2{font-size:24px!important;line-height:1.1!important}
  .page-content{width:100%!important;max-width:100%!important}
  .sky-page-hero{border-radius:20px!important}

  /* Portal drawers */
  .sf-sidebar,.sp-sidebar,.fp-side{
    position:fixed!important;
    left:0!important;
    top:0!important;
    bottom:0!important;
    height:100dvh!important;
    width:min(86vw,270px)!important;
    max-width:270px!important;
    z-index:1600!important;
    transform:translateX(-106%)!important;
    transition:transform .22s ease!important;
    box-shadow:var(--sky-mobile-shadow)!important;
  }
  .sf-sidebar.open,.fp-side.open,.sp-shell.menu-open .sp-sidebar{transform:translateX(0)!important;left:0!important}
  .sf-main,.sp-main,.fp-main{width:100%!important;max-width:100%!important}
  .sf-topbar,.sp-topbar,.fp-top{padding-left:14px!important;padding-right:14px!important;min-height:62px!important;height:auto!important}
  .sf-content,.sp-content,.fp-content{padding-left:16px!important;padding-right:16px!important;padding-bottom:calc(92px + var(--sky-mobile-safe-bottom))!important}
  .sf-mobile,.sp-mobile-toggle,.fp-mobile{display:grid!important}
  .sf-notify-panel,.sp-notification-menu,.fp-notify-panel{position:fixed!important;left:10px!important;right:10px!important;top:68px!important;width:auto!important;max-width:none!important}

  /* Cards/grids: preserve information, reduce dense multi-column layouts */
  .sf-signal-row,.sp-signal-row,.fp-signals{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .sf-grid,.sp-grid,.fp-grid{grid-template-columns:1fr!important}
  .sf-grid>[class*="sf-"],.sp-grid>[class*="sp-"],.fp-grid>[class*="fp-"]{grid-column:1/-1!important}

  /* Learning becomes mobile app-like. Desktop links are mirrored into bottom nav by JS. */
  .learn-nav{min-height:62px!important;padding:0 13px!important;gap:10px!important}
  .learn-brand{font-size:18px!important;padding-right:0!important;border-right:0!important}
  .learn-brand-mark{width:36px!important;height:36px!important;border-radius:11px!important}
  .learn-links{display:none!important}
  .learn-user-copy{display:none!important}
  .learn-actions{margin-left:auto!important;gap:6px!important}
  .learn-actions .learn-btn{min-height:38px!important;padding:8px 10px!important}
  .learn-main{padding:16px 14px calc(92px + var(--sky-mobile-safe-bottom))!important}
  .learn-footer{padding:22px 14px calc(92px + var(--sky-mobile-safe-bottom))!important}

  /* Native-feeling bottom navigation for self-service portals / Learning */
  .sky-mobile-bottom-nav{
    position:fixed;
    z-index:1505;
    left:8px;
    right:8px;
    bottom:calc(8px + var(--sky-mobile-safe-bottom));
    min-height:58px;
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:1fr;
    gap:3px;
    padding:5px;
    border:1px solid rgba(226,211,218,.94);
    border-radius:18px;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(18px);
    box-shadow:0 16px 44px rgba(49,20,33,.18);
  }
  .sky-mobile-bottom-nav a,.sky-mobile-bottom-nav button{
    min-width:0;
    min-height:48px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    padding:5px 3px;
    border:0;
    border-radius:13px;
    background:transparent;
    color:#766970;
    text-decoration:none;
    font:inherit;
    cursor:pointer;
  }
  .sky-mobile-bottom-nav a.active{background:#f8edf2;color:#741a3b}
  .sky-mobile-bottom-nav .sky-bottom-ico{font-size:17px;line-height:1}
  .sky-mobile-bottom-nav .sky-bottom-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;font-weight:900}

  /* Global tables: horizontal movement stays inside table container. */
  .sky-mobile-table-hint{display:block}
  .sky-mobile-table-wrap{margin-bottom:12px}
  .sky-mobile-table-wrap table{min-width:max(680px,100%)!important;width:max-content!important;max-width:none!important}
  .sf-table-wrap,.sp-table-wrap,.fp-table-wrap,[class*="table-wrap"],[class*="table-container"]{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}

  /* Forms / filters */
  form{max-width:100%}
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea{width:100%;max-width:100%;font-size:16px!important}
  .page-content .form-grid,.page-content .filter-grid,.page-content .filters,.page-content .filter-row,.page-content .form-row,
  .sf-content .sf-info-grid,.sp-content .sp-info-grid,.fp-content .fp-info-grid{grid-template-columns:1fr!important}
  .page-content [class*="filter"]{max-width:100%}
  .page-content [class*="filter"] select,.page-content [class*="filter"] input{min-width:0!important}
  button,a.btn,[class$="-btn"],.button,.action-button{touch-action:manipulation}

  /* AI panel must fit the phone */
  .sky-ai-chat-panel{left:8px!important;right:8px!important;bottom:8px!important;width:auto!important;height:min(680px,calc(100dvh - 68px))!important;border-radius:18px!important}
  .sky-ai-launcher{right:16px!important;bottom:calc(82px + var(--sky-mobile-safe-bottom))!important;width:56px!important;height:56px!important}
}

@media(max-width:620px){
  .main-content{padding:14px 12px 42px!important}
  .page-heading-bar h2{font-size:21px!important}
  .sky-global-brand-name{font-size:14px!important}
  .sky-global-topbar-avatar{display:none!important}
  .sf-content,.sp-content,.fp-content{padding-left:12px!important;padding-right:12px!important}
  .sf-signal-row,.sp-signal-row,.fp-signals{grid-template-columns:1fr!important}
  .sf-card,.sp-card,.fp-card{border-radius:17px!important;padding:15px!important}
  .sf-hero,.sp-hero,.fp-hero{border-radius:21px!important;padding:20px!important}
  .sf-hero-inner,.sp-hero-inner,.fp-hero-inner{align-items:flex-start!important}
  .sf-hero-side,.sp-hero-side,.fp-hero-side{display:none!important}
  .sky-pwa-install-toast{left:12px;right:12px;bottom:calc(82px + var(--sky-mobile-safe-bottom));width:auto}
}

@media(max-width:420px){
  .sky-global-topbar{padding-left:7px!important;padding-right:7px!important}
  .sky-global-topbar-right{gap:4px!important}
  .sky-global-brand-mark{display:none!important}
  .sky-notification-panel{right:-64px!important}
  .sky-mobile-bottom-nav{left:6px;right:6px;bottom:calc(6px + var(--sky-mobile-safe-bottom));border-radius:16px}
  .sky-mobile-bottom-nav .sky-bottom-label{font-size:7.3px}
}

@media(prefers-reduced-motion:reduce){
  .sidebar,.sf-sidebar,.sp-sidebar,.fp-side,.sky-mobile-nav-overlay,.sky-network-banner{transition:none!important}
}

@media print{
  .sky-mobile-nav-overlay,.sky-mobile-bottom-nav,.sky-network-banner,.sky-pwa-install-toast{display:none!important}
}

/* =========================================================
   MOBILE POLISH — DASHBOARD + SKYSUITE AI CLOSE CONTROL
   Keeps the AI close action inside the visible phone header.
   ========================================================= */
@media(max-width:980px){
  .sky-ai-chat-panel{
    max-width:calc(100vw - 16px)!important;
    overflow:hidden!important;
  }
  .sky-ai-chat-head{
    position:relative!important;
    z-index:3!important;
    min-width:0!important;
    padding-left:14px!important;
    padding-right:10px!important;
  }
  .sky-ai-chat-title{min-width:0!important;flex:1 1 auto!important}
  .sky-ai-chat-head-actions{display:flex!important;flex:0 0 auto!important;align-items:center!important}
  #skyAiClose{
    display:grid!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    flex:0 0 38px!important;
    place-items:center!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.13)!important;
    color:#fff!important;
    font-size:17px!important;
  }
  #skyAiClose:active,#skyAiClose:focus-visible{background:rgba(255,255,255,.23)!important}
  .sky-ai-panel-close,.sky-ai-chat-panel.open .sky-ai-panel-close{display:none!important}
}
@media(max-width:480px){
  .sky-ai-chat-panel{
    left:6px!important;
    right:6px!important;
    bottom:6px!important;
    width:auto!important;
    max-width:calc(100vw - 12px)!important;
    height:calc(100dvh - 62px)!important;
    max-height:720px!important;
  }
  .sky-ai-chat-head{min-height:64px!important}
  .sky-ai-chat-title strong{font-size:13px!important}
  .sky-ai-chat-title span{font-size:10.5px!important}
}

/* =========================================================
   STAGE 85.2 — FAMILY PORTAL SIDEBAR VIEWPORT FIX
   Keep the burgundy Family sidebar pinned to the full viewport
   while only the menu area scrolls when its contents are long.
   ========================================================= */

@media (min-width: 981px) {
  .fp-shell {
    display: block !important;
    min-height: 100dvh !important;
  }

  .fp-side {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 245px !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    z-index: 120 !important;
  }

  .fp-main {
    margin-left: 245px !important;
    width: calc(100% - 245px) !important;
    max-width: none !important;
    min-height: 100dvh !important;
  }

  .fp-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .fp-nav::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .fp-foot {
    flex: 0 0 auto !important;
    margin-top: 10px !important;
    padding-bottom: 4px !important;
  }
}

@media (max-width: 980px) {
  .fp-main {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .fp-side {
    overflow: hidden !important;
  }

  .fp-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .fp-nav::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}