/* Procom CRM - Mobile App Shell
   Desktop styles are intentionally untouched. */
@media (max-width: 991.98px) {
  :root {
    --mobile-appbar-h: 64px;
    --mobile-nav-h: 72px;
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-page-bg: #f4f7fb;
    --mobile-card-radius: 18px;
  }

  html, body {
    min-height: 100%;
    background: var(--mobile-page-bg) !important;
    overscroll-behavior-y: none;
  }

  body:not(.login-page) {
    min-height: 100dvh;
    padding-bottom: 0;
    -webkit-tap-highlight-color: transparent;
  }

  body:not(.login-page) .app-content {
    margin-left: 0 !important;
    padding: calc(var(--mobile-appbar-h) + var(--mobile-safe-top) + 12px) 10px calc(var(--mobile-nav-h) + var(--mobile-safe-bottom) + 12px) !important;
    min-height: 100dvh;
    box-sizing: border-box;
    background: var(--mobile-page-bg) !important;
  }

  body:not(.login-page) .app-content > main,
  body:not(.login-page) .page-container,
  body:not(.login-page) .container,
  body:not(.login-page) .container-fluid {
    max-width: 100% !important;
  }

  body:not(.login-page) .page-container {
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Keep every page start below the fixed app bar, including standalone PWA safe-area. */
  body:not(.login-page) .app-content > main {
    position: relative;
    z-index: 1;
    padding-top: 0 !important;
  }

  body:not(.login-page) .page-container > :first-child {
    scroll-margin-top: calc(var(--mobile-appbar-h) + var(--mobile-safe-top) + 16px);
  }

  /* Desktop top bar is replaced with a native-app-like mobile app bar. */
  body:not(.login-page) .topbar {
    display: none !important;
  }

  .mobile-appbar {
    position: fixed;
    z-index: 1040;
    inset: 0 0 auto 0;
    height: calc(var(--mobile-appbar-h) + var(--mobile-safe-top));
    padding: calc(7px + var(--mobile-safe-top)) 12px 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(13, 26, 52, .97);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 8px 24px rgba(2, 6, 23, .16);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .mobile-appbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #fff;
    text-decoration: none;
  }

  .mobile-appbar-logo {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    background: rgba(99,114,255,.16);
    border: 1px solid rgba(137,149,255,.22);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 5px 16px rgba(0,0,0,.13);
  }

  .mobile-appbar-logo.mobile-page-icon i {
    color: #aeb8ff;
    font-size: 20px;
    line-height: 1;
  }
  .mobile-appbar-copy { min-width: 0; line-height: 1.08; }
  .mobile-appbar-kicker {
    display: block;
    margin-bottom: 3px;
    color: rgba(220,229,248,.70);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .055em;
    text-transform: uppercase;
  }
  .mobile-appbar-title {
    display: block;
    max-width: min(56vw, 260px);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-appbar-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
  }

  .mobile-appbar-btn {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  .mobile-appbar-btn:active { transform: scale(.96); }

  .mobile-user-avatar {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(145deg, #6372ff, #4455e7);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: .02em;
    box-shadow: 0 6px 16px rgba(57,72,210,.30);
  }

  /* Bottom navigation */
  .mobile-bottom-nav {
    position: fixed;
    z-index: 1038;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(62px + var(--mobile-safe-bottom));
    padding: 5px 8px calc(4px + var(--mobile-safe-bottom));
    border: 0;
    border-top: 1px solid rgba(255,255,255,.10);
    border-radius: 18px 18px 0 0;
    background: #050505;
    box-shadow: 0 -8px 28px rgba(0,0,0,.30);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    gap: 2px;
  }


  .mobile-nav-item {
    min-width: 0;
    border: 0;
    border-radius: 15px;
    background: transparent;
    color: rgba(255,255,255,.86);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px 3px;
    font-size: 10.5px;
    font-weight: 720;
    line-height: 1.05;
    transition: .16s ease;
  }
  .mobile-nav-item i { font-size: 20px; line-height: 1; }
  .mobile-nav-item span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-nav-item.active {
    background: rgba(255,255,255,.14);
    color: #fff;
  }
  .mobile-nav-item i,
  .mobile-nav-item span { color: #fff; }
  .mobile-nav-item:active { transform: scale(.96); }

  /* App-like bottom menu sheet */
  #appMenuOffcanvas.offcanvas-bottom {
    --bs-offcanvas-height: min(86dvh, 760px);
    border: 0;
    border-radius: 26px 26px 0 0;
    overflow: hidden;
    box-shadow: 0 -18px 50px rgba(2,6,23,.30);
    background: linear-gradient(180deg,#111f3d 0%,#09152b 100%);
  }
  #appMenuOffcanvas .mobile-sheet-handle {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.26);
    margin: 9px auto 0;
  }
  #appMenuOffcanvas .offcanvas-header {
    min-height: 62px !important;
    padding: 9px 15px 8px !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
  }
  #appMenuOffcanvas .mobile-brand-logo-wrap {
    min-height: 39px !important;
    max-width: 190px !important;
    padding: 5px 8px !important;
    border-radius: 11px !important;
  }
  #appMenuOffcanvas .mobile-brand-logo { max-height: 29px !important; max-width: 170px !important; }
  #appMenuOffcanvas .offcanvas-body {
    padding: 9px 11px calc(22px + var(--mobile-safe-bottom)) !important;
    background: transparent !important;
    overflow-y: auto;
  }

  .mobile-menu-user-card {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 5px 1px 12px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.055);
    color: #fff;
  }
  .mobile-menu-user-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 13px;
    background: linear-gradient(145deg,#6372ff,#4455e7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 850;
    box-shadow: 0 6px 16px rgba(58,73,215,.24);
  }
  .mobile-menu-user-copy { min-width: 0; flex: 1; }
  .mobile-menu-user-name {
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-menu-user-sub {
    margin-top: 2px;
    color: #96a8c8;
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-menu-profile-link {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    background: rgba(255,255,255,.08);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  #appMenuOffcanvas .app-menu { gap: 5px; }
  #appMenuOffcanvas .app-menu-link {
    min-height: 48px;
    border-radius: 14px;
    padding: 9px 11px;
    font-size: 14px;
  }
  #appMenuOffcanvas .app-menu-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 10px;
    background: rgba(255,255,255,.045);
  }
  #appMenuOffcanvas .app-submenu {
    margin-left: 31px;
    padding-left: 17px;
  }
  #appMenuOffcanvas .app-submenu-link {
    min-height: 42px;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 13px;
  }

  /* Common content becomes touch friendly and app-like. */
  body:not(.login-page) .card,
  body:not(.login-page) .crm-card,
  body:not(.login-page) .pipeline-kpi-card,
  body:not(.login-page) .stat-card,
  body:not(.login-page) .filter-card {
    border-radius: var(--mobile-card-radius) !important;
  }

  body:not(.login-page) .card {
    box-shadow: 0 5px 18px rgba(15,23,42,.055) !important;
    border-color: #e5eaf1 !important;
  }

  body:not(.login-page) .card-body { padding: 14px !important; }

  body:not(.login-page) .btn:not(.btn-sm):not(.btn-close) {
    min-height: 42px;
    border-radius: 12px;
  }

  body:not(.login-page) input.form-control,
  body:not(.login-page) select.form-select,
  body:not(.login-page) textarea.form-control,
  body:not(.login-page) .input-group > .form-control,
  body:not(.login-page) .input-group > .form-select {
    min-height: 44px;
    border-radius: 12px;
    font-size: 16px;
  }

  body:not(.login-page) .input-group > .btn { min-height: 44px; }

  body:not(.login-page) .table-responsive {
    border-radius: 16px;
    border: 1px solid #e6ebf2;
    background: #fff;
    box-shadow: 0 5px 16px rgba(15,23,42,.04);
    -webkit-overflow-scrolling: touch;
  }
  body:not(.login-page) .table-responsive > .table { margin-bottom: 0; }
  body:not(.login-page) .table thead th {
    white-space: nowrap;
    font-size: 11px !important;
  }
  body:not(.login-page) .table tbody td { font-size: 12.5px; }

  body:not(.login-page) .pagination { gap: 3px; flex-wrap: wrap; }
  body:not(.login-page) .page-link { border-radius: 10px !important; min-width: 38px; text-align: center; }

  /* Existing desktop page headings are usually duplicated on mobile; compact them. */
  body:not(.login-page) .crm-page-head,
  body:not(.login-page) .page-header,
  body:not(.login-page) .page-head {
    gap: 9px !important;
    margin-bottom: 10px !important;
  }
  body:not(.login-page) .crm-page-title,
  body:not(.login-page) h1 { font-size: 1.25rem !important; }
  body:not(.login-page) h2 { font-size: 1.15rem !important; }

  /* Toolbars wrap as touch controls instead of shrinking desktop controls. */
  body:not(.login-page) .pipeline-toolbar,
  body:not(.login-page) .toolbar,
  body:not(.login-page) .page-actions {
    gap: 7px !important;
  }

  /* Bootstrap dialogs act more like mobile sheets. */
  body:not(.login-page) .modal-dialog:not(.modal-fullscreen) {
    margin: auto 8px 8px;
    min-height: calc(100% - 8px);
    display: flex;
    align-items: flex-end;
  }
  body:not(.login-page) .modal-content {
    width: 100%;
    max-height: 90dvh;
    border-radius: 24px 24px 18px 18px !important;
    overflow: hidden;
  }
  body:not(.login-page) .modal-body { overflow-y: auto; }

  /* Toasts sit below the app bar and above the bottom navigation. */
  body:not(.login-page) #globalNoticeHost {
    top: calc(var(--mobile-appbar-h) + var(--mobile-safe-top) + 8px) !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
  }

  /* PWA install banner must not collide with bottom navigation after login. */
  body:not(.login-page) .pwa-install-banner {
    bottom: calc(var(--mobile-nav-h) + 14px + var(--mobile-safe-bottom)) !important;
  }

  /* Horizontal filters/tabs remain reachable without making the whole page overflow. */
  body:not(.login-page) .nav-tabs,
  body:not(.login-page) .nav-pills.mobile-scroll,
  body:not(.login-page) .mobile-scroll-row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body:not(.login-page) .nav-tabs::-webkit-scrollbar,
  body:not(.login-page) .mobile-scroll-row::-webkit-scrollbar { display: none; }

  /* Mobile dashboard */
  .mobile-home-shell { padding: 2px 1px 12px; }
  .mobile-home-hero {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 18px 17px;
    background: linear-gradient(135deg,#132343 0%,#223a6d 62%,#4457d8 100%);
    color: #fff;
    box-shadow: 0 12px 30px rgba(25,43,92,.22);
  }
  .mobile-home-hero:after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: -70px;
    top: -80px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
  }
  .mobile-home-date { color: #b9c7e5; font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
  .mobile-home-greeting { margin: 4px 0 5px; font-size: 21px; font-weight: 850; letter-spacing: -.02em; }
  .mobile-home-copy { margin: 0; color: #d6e1f5; font-size: 13px; line-height: 1.45; max-width: 88%; }

  .mobile-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 18px 3px 9px;
  }
  .mobile-section-title strong { color: #1d2939; font-size: 14px; font-weight: 850; }
  .mobile-section-title span { color: #98a2b3; font-size: 11.5px; }

  .mobile-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 9px;
  }
  .mobile-quick-card {
    min-height: 112px;
    border: 1px solid #e5eaf1;
    border-radius: 18px;
    background: #fff;
    color: #1f2937;
    text-decoration: none;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 5px 16px rgba(15,23,42,.045);
  }
  .mobile-quick-card:active { transform: scale(.985); }
  .mobile-quick-icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
  }
  .mobile-quick-icon.blue { background:#eef2ff; color:#5262f4; }
  .mobile-quick-icon.orange { background:#fff2eb; color:#f26a2e; }
  .mobile-quick-icon.green { background:#eafaf4; color:#1da47a; }
  .mobile-quick-icon.pink { background:#fff0f7; color:#dc4d91; }
  .mobile-quick-icon.cyan { background:#eafaff; color:#0999bb; }
  .mobile-quick-icon.purple { background:#f4efff; color:#7957d5; }
  .mobile-quick-title { font-size: 14px; font-weight: 820; line-height: 1.25; }
  .mobile-quick-sub { margin-top: 3px; color: #8993a4; font-size: 11.5px; line-height: 1.3; }

  .mobile-home-info {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 10px;
    padding: 12px 13px;
    border: 1px solid #e5eaf1;
    border-radius: 16px;
    background: #fff;
  }
  .mobile-home-info-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    background: #eef6ff;
    color: #1677ff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-home-info strong { display:block; font-size: 12.5px; color:#344054; }
  .mobile-home-info span { display:block; margin-top:2px; font-size:11.5px; color:#8993a4; line-height:1.35; }
}

@media (max-width: 370px) {
  .mobile-appbar-title { max-width: 48vw; }
  .mobile-nav-item { font-size: 9.8px; }
  .mobile-nav-item i { font-size: 19px; }
  .mobile-quick-grid { gap: 7px; }
  .mobile-quick-card { padding: 12px; }
}

/* 2026-09-07 - Mobile navigation response tuning */
@media (max-width: 991.98px) {
  /* Avoid the historic mobile click delay and give immediate touch feedback. */
  .mobile-bottom-nav,
  .mobile-bottom-nav .mobile-nav-item,
  #appMenuOffcanvas .app-menu-link,
  #appMenuOffcanvas .app-submenu-link,
  #appMenuOffcanvas .mobile-menu-profile-link,
  .mobile-appbar-btn,
  .mobile-user-avatar {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Heavy live blur can make installed PWAs feel sluggish on some phones. */
  .mobile-appbar {
    background: #0d1a34 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .mobile-bottom-nav {
    background: #050505 !important;
    border-top-color: rgba(255,255,255,.10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,.28) !important;
  }

  /* Make the bottom sheet and accordion feel immediate rather than web-like. */
  #appMenuOffcanvas.offcanvas {
    --bs-offcanvas-transition: transform .12s cubic-bezier(.2,.8,.2,1);
  }
  #appMenuOffcanvas .collapsing {
    transition: height .10s ease !important;
  }
  .mobile-nav-item {
    transition: background-color .06s linear, color .06s linear, transform .04s linear !important;
  }
  #appMenuOffcanvas .app-menu-link,
  #appMenuOffcanvas .app-submenu-link {
    transition-duration: .06s !important;
  }

  .mobile-nav-item:active,
  #appMenuOffcanvas .app-menu-link:active,
  #appMenuOffcanvas .app-submenu-link:active {
    opacity: .72;
  }
}

/* Mobile route/API transition loader */
@media (max-width: 991.98px) {
  .mobile-route-loader[hidden] { display: none !important; }

  .mobile-route-loader {
    --route-accent: #5263ea;
    --route-accent-soft: #eef1ff;
    --route-accent-border: rgba(82,99,234,.24);
    position: fixed !important;
    z-index: 2147483000 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: calc(var(--mobile-safe-top) + 20px) 18px calc(var(--mobile-safe-bottom) + 20px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(7, 17, 35, .50) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .14s ease, visibility .14s ease;
  }

  .mobile-route-loader.is-api {
    --route-accent: #14845f;
    --route-accent-soft: #eaf8f2;
    --route-accent-border: rgba(20,132,95,.24);
  }

  .mobile-route-loader.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-route-loader-card {
    width: min(100%, 360px);
    margin: 0 auto;
    padding: 18px 18px 15px;
    border: 1px solid rgba(255,255,255,.92);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(2, 10, 27, .34);
    transform: translateY(8px) scale(.982);
    transition: transform .16s ease;
  }

  .mobile-route-loader.show .mobile-route-loader-card {
    transform: translateY(0) scale(1);
  }

  .mobile-route-loader-head {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .mobile-route-loader-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef1ff;
    color: #5263ea;
    font-size: 21px;
    box-shadow: inset 0 0 0 1px rgba(82,99,234,.08);
  }

  .mobile-route-loader.is-api .mobile-route-loader-icon {
    background: #eaf8f2;
    color: #14845f;
    box-shadow: inset 0 0 0 1px rgba(20,132,95,.08);
  }

  .mobile-route-loader-copy { min-width: 0; flex: 1; }

  .mobile-route-loader-kicker {
    display: block;
    margin-bottom: 3px;
    color: #8793a7;
    font-size: 9.5px;
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: .07em;
  }

  .mobile-route-loader-copy strong {
    display: block;
    color: #17233a;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.25;
  }

  .mobile-route-loader-pulse {
    position: relative;
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 999px;
    color: #6372ff;
    background: currentColor;
  }

  .mobile-route-loader.is-api .mobile-route-loader-pulse {
    color: #1aa879;
  }

  .mobile-route-loader-pulse::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 2px solid currentColor;
    border-radius: inherit;
    opacity: .25;
    animation: mobileRoutePulse 1.15s ease-out infinite;
  }

  .mobile-route-loader-track {
    position: relative;
    height: 5px;
    margin-top: 15px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf0f6;
  }

  .mobile-route-loader-track span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6372ff, #8b97ff);
    box-shadow: 0 0 14px rgba(99,114,255,.20);
    transform: scaleX(.07);
    transform-origin: left center;
    will-change: transform;
  }

  .mobile-route-loader-track span.is-running {
    animation: mobileRouteProgress 9.5s cubic-bezier(.18,.72,.24,1) forwards;
  }

  .mobile-route-loader-track span::after {
    content: '';
    position: absolute;
    inset: 0;
    width: 34%;
    transform: translateX(-160%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
    animation: mobileRouteProgressShine 1.15s ease-in-out infinite;
  }

  .mobile-route-loader.is-api .mobile-route-loader-track span {
    background: linear-gradient(90deg, #15946b, #37c394);
    box-shadow: 0 0 14px rgba(21,148,107,.20);
  }

  .mobile-route-loader-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-top: 12px;
  }

  .mobile-route-loader-steps::before,
  .mobile-route-loader-steps::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 12.5%;
    width: 75%;
    height: 2px;
    border-radius: 999px;
    pointer-events: none;
  }

  .mobile-route-loader-steps::before {
    background: #e6eaf1;
  }

  .mobile-route-loader-steps::after {
    background: var(--route-accent);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
  }

  .mobile-route-loader.show .mobile-route-loader-steps::after {
    animation: mobileRouteStepLine 9.5s cubic-bezier(.18,.72,.24,1) forwards;
  }

  .mobile-route-loader-step {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #9aa5b6;
    font-size: 8.8px;
    font-weight: 750;
    line-height: 1.05;
    text-align: center;
  }

  .mobile-route-loader-step > span:last-child {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-route-step-dot {
    position: relative;
    width: 21px;
    height: 21px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e1e6ee;
    background: #f7f9fc;
    color: #a0a9b8;
    font-size: 9px;
    font-weight: 850;
    box-shadow: 0 0 0 3px #fff;
    will-change: transform, background-color, border-color, color;
  }

  .mobile-route-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .mobile-route-step-dot::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--route-accent);
    font-size: 11px;
    font-weight: 900;
    opacity: 0;
    transform: scale(.55);
  }

  /* JS timer'lar PWA navigasyonunda durabilse bile asamalar CSS tarafinda akar. */
  .mobile-route-loader.show .mobile-route-loader-step:nth-child(1) {
    animation: mobileRouteStepLabelActive .2s ease 0s forwards,
               mobileRouteStepLabelDone .2s ease 1.8s forwards;
  }
  .mobile-route-loader.show .mobile-route-loader-step:nth-child(2) {
    animation: mobileRouteStepLabelActive .2s ease 1.8s forwards,
               mobileRouteStepLabelDone .2s ease 4.0s forwards;
  }
  .mobile-route-loader.show .mobile-route-loader-step:nth-child(3) {
    animation: mobileRouteStepLabelActive .2s ease 4.0s forwards,
               mobileRouteStepLabelDone .2s ease 6.45s forwards;
  }
  .mobile-route-loader.show .mobile-route-loader-step:nth-child(4) {
    animation: mobileRouteStepLabelActive .2s ease 6.45s forwards;
  }

  .mobile-route-loader.show .mobile-route-loader-step:nth-child(1) .mobile-route-step-dot {
    animation: mobileRouteStepDotActive .2s ease 0s forwards,
               mobileRouteStepDotDone .2s ease 1.8s forwards;
  }
  .mobile-route-loader.show .mobile-route-loader-step:nth-child(2) .mobile-route-step-dot {
    animation: mobileRouteStepDotActive .2s ease 1.8s forwards,
               mobileRouteStepDotDone .2s ease 4.0s forwards;
  }
  .mobile-route-loader.show .mobile-route-loader-step:nth-child(3) .mobile-route-step-dot {
    animation: mobileRouteStepDotActive .2s ease 4.0s forwards,
               mobileRouteStepDotDone .2s ease 6.45s forwards;
  }
  .mobile-route-loader.show .mobile-route-loader-step:nth-child(4) .mobile-route-step-dot {
    animation: mobileRouteStepDotActive .2s ease 6.45s forwards;
  }

  .mobile-route-loader.show .mobile-route-loader-step:nth-child(1) .mobile-route-step-number {
    animation: mobileRouteStepNumberHide .16s ease 1.8s forwards;
  }
  .mobile-route-loader.show .mobile-route-loader-step:nth-child(2) .mobile-route-step-number {
    animation: mobileRouteStepNumberHide .16s ease 4.0s forwards;
  }
  .mobile-route-loader.show .mobile-route-loader-step:nth-child(3) .mobile-route-step-number {
    animation: mobileRouteStepNumberHide .16s ease 6.45s forwards;
  }

  .mobile-route-loader.show .mobile-route-loader-step:nth-child(1) .mobile-route-step-dot::after {
    animation: mobileRouteStepCheckShow .2s ease 1.8s forwards;
  }
  .mobile-route-loader.show .mobile-route-loader-step:nth-child(2) .mobile-route-step-dot::after {
    animation: mobileRouteStepCheckShow .2s ease 4.0s forwards;
  }
  .mobile-route-loader.show .mobile-route-loader-step:nth-child(3) .mobile-route-step-dot::after {
    animation: mobileRouteStepCheckShow .2s ease 6.45s forwards;
  }

  /* JS tarafindaki siniflar yedek olarak calismaya devam eder. */
  .mobile-route-loader-step.is-active { color: var(--route-accent); }
  .mobile-route-loader-step.is-active .mobile-route-step-dot {
    border-color: var(--route-accent-border);
    background: var(--route-accent-soft);
    color: var(--route-accent);
  }
  .mobile-route-loader-step.is-done { color: #647189; }
  .mobile-route-loader-step.is-done .mobile-route-step-dot {
    border-color: #dce2eb;
    background: #eef2f7;
  }

  .mobile-route-loader-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 18px;
    margin-top: 9px;
    color: #778399;
    font-size: 10.5px;
    font-weight: 650;
  }

  .mobile-route-loader-foot > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-route-loader-time {
    flex: 0 0 auto;
    color: #56647a;
    font-variant-numeric: tabular-nums;
  }

  @keyframes mobileRouteStepLine {
    0%   { transform: scaleX(0); }
    18%  { transform: scaleX(.18); }
    42%  { transform: scaleX(.48); }
    68%  { transform: scaleX(.76); }
    100% { transform: scaleX(.96); }
  }

  @keyframes mobileRouteStepLabelActive {
    to { color: var(--route-accent); }
  }

  @keyframes mobileRouteStepLabelDone {
    to { color: #647189; }
  }

  @keyframes mobileRouteStepDotActive {
    to {
      border-color: var(--route-accent-border);
      background: var(--route-accent-soft);
      color: var(--route-accent);
      transform: scale(1.08);
    }
  }

  @keyframes mobileRouteStepDotDone {
    to {
      border-color: #dce2eb;
      background: #eef2f7;
      color: transparent;
      transform: scale(1);
    }
  }

  @keyframes mobileRouteStepNumberHide {
    to { opacity: 0; transform: scale(.6); }
  }

  @keyframes mobileRouteStepCheckShow {
    to { opacity: 1; transform: scale(1); }
  }

  @keyframes mobileRouteProgress {
    0%   { transform: scaleX(.07); }
    8%   { transform: scaleX(.17); }
    22%  { transform: scaleX(.34); }
    42%  { transform: scaleX(.56); }
    64%  { transform: scaleX(.73); }
    82%  { transform: scaleX(.84); }
    100% { transform: scaleX(.91); }
  }

  @keyframes mobileRouteProgressShine {
    0%   { transform: translateX(-160%); opacity: 0; }
    24%  { opacity: .95; }
    100% { transform: translateX(360%); opacity: 0; }
  }

  @keyframes mobileRoutePulse {
    0% { transform: scale(.55); opacity: .34; }
    100% { transform: scale(1.25); opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-route-loader,
    .mobile-route-loader-card { transition: none; }
    .mobile-route-loader-track span.is-running { animation-duration: 7s; }
    .mobile-route-loader-track span::after { animation-duration: 2.2s; }
    .mobile-route-loader-pulse::after { animation-duration: 2.4s; }
  }
}


/* 2026-09-07 - Mobile tab bar: render at shell root from first paint */
@media (max-width: 991.98px) {
  body > .mobile-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 2147481000 !important;
    background: #050505 !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
  }
  body > .mobile-bottom-nav .mobile-nav-item,
  body > .mobile-bottom-nav .mobile-nav-item i,
  body > .mobile-bottom-nav .mobile-nav-item span {
    color: #fff !important;
  }
  body > .mobile-bottom-nav .mobile-nav-item.active {
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
  }
}


/* 2026-09-07 - Home screen follows the same natural document flow as long
   mobile modules. Do not lock the home page to a fixed viewport height. */
@media (max-width: 991.98px) {
  body.mobile-home-page {
    min-height: 100% !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
  }

  body.mobile-home-page .app-shell,
  body.mobile-home-page .app-content {
    height: auto !important;
    overflow: visible !important;
  }

  /* Keep the home page just slightly scrollable, like the other modules.
     This lets mobile/PWA browsers settle their real viewport on first paint
     without any device-specific pixel correction. */
  body.mobile-home-page .mobile-home-shell {
    min-height: calc(100svh - var(--mobile-appbar-h) - var(--mobile-nav-h) - var(--mobile-safe-top) - var(--mobile-safe-bottom) + 2px);
    padding-bottom: 14px;
  }
}