/* SX Agency CRM — V6.3 mobile-first enhancement, 25 October 2026.
   Presentation-only overrides. Existing desktop UI, data, authentication,
   permissions, lead workflows, Supabase configuration and audit logic intact. */
.sx-mobile-bottom-nav{display:none}
@media(max-width:770px){
  :root{--sx-mobile-edge:14px;--sx-mobile-nav-height:67px}
  html{width:100%;overflow-x:clip;-webkit-text-size-adjust:100%}
  body{width:100%;min-width:0;overflow-x:clip;overscroll-behavior-x:none}
  #app,.sx-space-layout,.sx-space-layout .main{min-width:0;width:100%;max-width:100%}
  /* Mobile wallpaper is quieter behind information, not a redesign. */
  .sx-space-background::after{background:linear-gradient(180deg,rgba(3,5,10,.44),rgba(3,5,10,.28) 42%,rgba(3,5,10,.56))!important}
  .sx-space-background::before{opacity:.21!important}
  .sx-space-layout .sx-topbar,.sx-space-layout .topbar{
    position:sticky;top:0;z-index:33;width:100%;height:62px;
    padding:0 var(--sx-mobile-edge)!important;gap:9px!important;
    background:rgba(8,12,19,.78)!important;
    border-bottom:1px solid rgba(224,235,249,.14)!important;
    -webkit-backdrop-filter:blur(16px) saturate(125%);
    backdrop-filter:blur(16px) saturate(125%);
  }
  .sx-mobile-menu{display:grid!important;place-items:center;flex:0 0 43px;min-width:43px;min-height:44px;border-radius:13px}
  .sx-global-search-wrap{min-width:0;flex:1 1 auto}
  .sx-global-search-field{min-width:0;height:44px;padding:0 12px;border-radius:15px}
  .sx-global-search-field input{font-size:16px!important;line-height:1.3!important;min-width:0;padding:0!important}
  .sx-global-search-field input::placeholder{font-size:13px!important;opacity:.85}
  .sx-header-actions{flex:0 0 auto;gap:0}.sx-header-actions .sx-bell{display:none}
  .sx-top-avatar{display:grid;place-items:center;min-width:39px;min-height:44px}
  .sx-top-avatar .sx-profile-orb{width:33px;height:33px}
  .sx-global-results{width:min(340px,calc(100vw - 24px));max-height:55dvh;overflow-y:auto;right:0;left:auto}
  /* Keep full navigation accessible in a dedicated scrollable drawer. */
  .sx-space-layout .sidebar{width:min(300px,85vw)!important;padding:20px 17px max(22px,env(safe-area-inset-bottom))!important;z-index:120!important;overscroll-behavior:contain}
  .sx-space-layout .sidebar.sx-sidebar-open{transform:translateX(0)}
  .sx-mobile-scrim.visible{z-index:119!important}
  .sx-nav button{min-height:46px;padding:10px 14px;border-radius:13px}
  .sx-nav-close{min-width:44px;min-height:44px;place-items:center}
  .sx-space-layout .sx-content{padding:19px var(--sx-mobile-edge) calc(var(--sx-mobile-nav-height) + env(safe-area-inset-bottom) + 36px)!important;min-width:0}
  .sx-space-layout .sx-content > *{max-width:100%;min-width:0}
  /* Persistent quick-nav: top-level sections are one thumb-tap away. */
  .sx-mobile-bottom-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;
    min-height:calc(var(--sx-mobile-nav-height) + env(safe-area-inset-bottom));
    padding:7px 9px calc(7px + env(safe-area-inset-bottom));
    background:linear-gradient(155deg,rgba(30,38,51,.92),rgba(7,11,18,.96))!important;
    border-top:1px solid rgba(230,240,255,.25);
    box-shadow:0 -12px 38px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.065);
    -webkit-backdrop-filter:blur(22px) saturate(128%);
    backdrop-filter:blur(22px) saturate(128%);
  }
  .sx-mobile-bottom-nav button{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    min-height:51px;min-width:0;border:1px solid transparent;border-radius:13px;
    padding:4px 1px;background:transparent;color:#aebacb;
    font:600 10px/1.2 Inter,system-ui,sans-serif;letter-spacing:.005em;
    white-space:nowrap;cursor:pointer;
  }
  .sx-mobile-bottom-nav button svg{width:20px;height:20px;stroke-width:1.75}
  .sx-mobile-bottom-nav button[aria-current="page"]{
    color:#f5f9ff;background:linear-gradient(145deg,rgba(231,238,252,.19),rgba(170,192,222,.07));
    border-color:rgba(236,245,255,.16);
  }
  .sx-mobile-bottom-nav button:focus-visible,.sx-mobile-menu:focus-visible{outline:2px solid white;outline-offset:2px}
  /* Mobile headings, buttons and KPI summaries. */
  .sx-hero,.heading,.ops-header{gap:12px;flex-wrap:wrap}
  .sx-hero h1,.sx-space-layout .heading h1{font-size:clamp(26px,7.6vw,34px)!important;line-height:1.1;letter-spacing:-.035em}
  .sx-hero p,.heading p{line-height:1.5}
  .sx-hero .sx-new-lead{margin-top:6px;min-height:44px;padding:11px 14px;font-size:12px}
  .sx-metrics,.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sx-metric,.kpi{min-width:0;overflow-wrap:anywhere}
  .sx-space-layout .panel,.li-panel,.ops-panel,.rel-panel,.sx-audit-panel{border-radius:17px!important}
  .sx-space-layout .panel,.sx-graph,.sx-priorities,.sx-recent{min-width:0}
  .sx-space-layout .panel{padding:17px}
  .actions,.toolbar,.filters,.li-actions,.li-header-actions,.ops-controls{max-width:100%;min-width:0}
  .btn,.li-button,.ops-primary,.ops-ghost{min-height:44px}
  /* iPhone Safari: inputs below 16px zoom the viewport on focus. */
  input:not([type=checkbox]):not([type=radio]),textarea,select,
  .li-input,.ops-field input,.ops-field textarea,.ops-field select,
  .sx-space-layout .modal input:not([type=checkbox]),
  .sx-space-layout .modal textarea,.sx-space-layout .modal select{
    font-size:16px!important;
  }
  .glass-filter-trigger,.form-glass-trigger,.li-glass-trigger{min-height:44px}
  .modal-backdrop{padding:12px 10px calc(12px + env(safe-area-inset-bottom))!important;z-index:500!important}
  .modal{max-height:calc(100dvh - 28px - env(safe-area-inset-bottom))!important;width:100%;padding:19px!important;overscroll-behavior:contain}
  .modal-footer{flex-wrap:wrap}.modal-footer .btn{flex:1 1 auto}
  .grid-2,.info-grid{grid-template-columns:minmax(0,1fr)}
  .table-scroll,.sx-recent-scroll,.ops-table-wrap,.rel-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .mobile-lead-card{min-height:44px}
  /* Lead Intelligence: single-line, swipeable tabs instead of tiny crowded labels. */
  .li-workspace{max-width:100%;min-width:0;padding-bottom:15px}
  .li-page-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start}
  .li-page-header h1{font-size:clamp(27px,7.5vw,33px)!important;overflow-wrap:anywhere}
  .li-stat{min-width:72px;padding:10px 12px}
  .li-safetybar{padding:12px 14px;gap:7px;line-height:1.45;margin-bottom:16px}
  .li-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    width:100%;max-width:100%;padding:5px;gap:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .li-tabs::-webkit-scrollbar{display:none}
  .li-tabs button{flex:0 0 auto;white-space:nowrap;min-height:44px;padding:11px 14px!important;font-size:12px!important;scroll-snap-align:start}
  .li-panel{padding:17px!important;min-width:0}
  .li-panel-head,.li-heading-row,.li-header-actions,.li-actions{gap:9px;flex-wrap:wrap}
  .li-actions .li-button{flex:1 1 150px}
  .li-filters{grid-template-columns:minmax(0,1fr);gap:12px}
  .li-facts,.li-candidate-facts{grid-template-columns:96px minmax(0,1fr);gap:10px;overflow-wrap:anywhere}
  .li-prospect{min-height:62px;padding:12px 4px;gap:9px}
  .li-prospect-entry{min-width:0}.li-prospect .li-lead{min-width:0;flex-basis:46%}
  .li-prospect strong,.li-prospect small,.li-plain-link{overflow-wrap:anywhere}
  .li-delete-one{min-height:44px}
  .li-priority-row{min-height:54px}
  .li-glass-menu{max-height:min(270px,40dvh)}
  /* Other modules preserve their functions and switch to readable single-column flows. */
  .ops-workspace,.sx-audit-root,.rel-workspace{min-width:0;max-width:100%}
  .ops-metrics,.ops-form-grid,.sx-audit-cards{grid-template-columns:minmax(0,1fr)}
  .ops-panel{padding:17px!important}.ops-list-row,.ops-milestone{min-width:0}
  .sx-audit-filters{display:grid;grid-template-columns:minmax(0,1fr)}
  .sx-audit-filters label,.sx-audit-filters select{min-width:0;max-width:100%;width:100%}
  .task-controls button,.iconbtn{min-width:44px;min-height:44px}
}
@media(max-width:370px){
  :root{--sx-mobile-edge:11px}
  .sx-mobile-bottom-nav{gap:0;padding-left:5px;padding-right:5px}
  .sx-mobile-bottom-nav button{font-size:9px}
  .sx-top-avatar .sx-profile-orb{width:29px;height:29px}
  .sx-global-search-field{padding:0 8px}
  .sx-metric .kpi-value{font-size:22px}
}
@media(min-width:771px){.sx-mobile-bottom-nav{display:none!important}}
@media(prefers-reduced-motion:reduce){
  .sx-mobile-bottom-nav *,.sx-space-layout .sidebar{transition:none!important;animation:none!important}
}
@media(prefers-reduced-transparency:reduce){
  .sx-mobile-bottom-nav,.sx-space-layout .sx-topbar{background:#101923!important;-webkit-backdrop-filter:none;backdrop-filter:none}
}