/* =====================================================================
   Transavis TPS mobile optimisation patch
   Tik mobiliai planšetei / telefonui. Desktop režimo nekeičia.
   ===================================================================== */

/* Hidden by default; enabled only in mobile media queries below. */
.mobile-nav-toggle,
.mobile-nav-close,
.mobile-nav-backdrop,
.mobile-nav-head {
  display: none;
}

body.mobile-nav-open {
  overflow: hidden;
}

@media (max-width: 980px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .app {
    grid-template-columns: 1fr !important;
  }

  /* Mobile navigation: compact header + full drawer.
     Desktop stays untouched because everything is inside max-width media query. */
  .sidebar {
    position: sticky !important;
    top: 0;
    z-index: 180;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: max(10px, env(safe-area-inset-top)) 12px 10px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 12px 32px rgba(6,13,24,.18) !important;
  }

  .sidebar .brand {
    min-height: 58px;
    min-width: 0;
    padding: 9px 10px !important;
    border-radius: 18px !important;
  }

  .sidebar .brand-copy {
    min-width: 0;
  }

  .sidebar .brand-mark {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 14px !important;
  }

  .sidebar .brand-mark img {
    width: 29px !important;
    height: 29px !important;
  }

  .sidebar .brand-logo {
    width: 132px !important;
    max-width: 100% !important;
  }

  .sidebar .brand-subtitle {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  .nav-section-label,
  .sidebar-footer,
  .sidebar .spacer {
    display: none !important;
  }

  .mobile-nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    padding: 10px 13px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 15px !important;
    color: #f8fafc !important;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,.20) !important;
    font: inherit !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .02em !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav-toggle-icon {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .mobile-nav-toggle[aria-expanded="true"] {
    background: rgba(255,255,255,.18) !important;
  }

  .mobile-nav-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 998 !important;
    display: none !important;
    width: 100% !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(2, 6, 23, .58) !important;
    backdrop-filter: blur(2px);
    cursor: pointer !important;
  }

  body.mobile-nav-open .mobile-nav-backdrop {
    display: block !important;
  }

  .nav {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    z-index: 999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: min(390px, calc(100vw - 32px)) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: max(16px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    background:
      radial-gradient(circle at 18% 0%, rgba(38, 129, 255, .18), transparent 32%),
      linear-gradient(180deg, rgba(9, 19, 34, .99), rgba(13, 27, 46, .99)) !important;
    border-left: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: -24px 0 60px rgba(0,0,0,.34) !important;
    transform: translateX(110%) !important;
    transition: transform .22s ease !important;
    scrollbar-width: thin;
  }

  body.mobile-nav-open .nav {
    transform: translateX(0) !important;
  }

  .mobile-nav-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 4px 0 12px !important;
    margin-bottom: 2px !important;
    background: linear-gradient(180deg, rgba(9,19,34,.99) 0%, rgba(9,19,34,.93) 80%, rgba(9,19,34,0) 100%) !important;
  }

  .mobile-nav-title-wrap {
    display: grid !important;
    gap: 3px !important;
    min-width: 0 !important;
  }

  .mobile-nav-title-wrap strong {
    color: #fff !important;
    font-size: 18px !important;
    line-height: 1.1 !important;
  }

  .mobile-nav-title-wrap span {
    color: rgba(226,232,240,.72) !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .mobile-nav-close {
    display: inline-grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 14px !important;
    color: #fff !important;
    background: rgba(255,255,255,.10) !important;
    font-size: 26px !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }

  .navbtn,
  .navsubbtn,
  .navgroup-trigger {
    width: 100% !important;
    min-height: 48px !important;
    white-space: normal !important;
    flex: 0 0 auto !important;
  }

  .navbtn {
    padding: 10px 12px !important;
    border-radius: 16px !important;
    gap: 10px !important;
  }

  .navbtn .ico,
  .ico {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    border-radius: 12px !important;
  }

  .ico svg {
    width: 18px !important;
    height: 18px !important;
  }

  .navbtn span:last-child {
    font-size: 13.5px !important;
    line-height: 1.25 !important;
  }

  .nav-group {
    position: static !important;
    flex: 0 0 auto !important;
    display: block !important;
    width: 100% !important;
  }

  .navgroup-trigger {
    cursor: pointer !important;
  }

  .navgroup-arrow {
    margin-left: auto !important;
  }

  .nav-submenu {
    position: static !important;
    left: auto !important;
    top: auto !important;
    z-index: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px 0 2px 44px !important;
    margin: 0 !important;
    display: grid !important;
    gap: 7px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .nav-group:not([open]) > .nav-submenu {
    display: none !important;
  }

  .navsubbtn {
    width: 100% !important;
    min-height: 42px !important;
    padding: 9px 11px !important;
    border-radius: 13px !important;
    white-space: normal !important;
  }

  .topbar {
    position: sticky !important;
    top: auto !important;
    z-index: 35 !important;
    padding: 14px 16px !important;
    gap: 12px !important;
  }

  .topbar-meta h1 {
    font-size: clamp(22px, 5.2vw, 27px) !important;
    line-height: 1.08 !important;
  }

  .page-hint {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  .top-actions {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }

  .content {
    padding: 16px 14px 26px !important;
    gap: 14px !important;
  }

  .grid,
  .layout,
  .expense-filter-grid,
  .insurance-filter-grid,
  .expense-form-grid,
  .insurance-form-grid,
  .detail-grid,
  .form,
  .dash-actions,
  .kpi-filter-grid,
  .kpi-stat-grid,
  .kpi-stat-grid--five,
  .kpi-month-grid,
  .history-kpis,
  .history-filter-grid {
    grid-template-columns: 1fr !important;
  }

  /* Inline grid-template-columns overrides from Razor pages. */
  .grid[style*="grid-template-columns"],
  .layout[style*="grid-template-columns"],
  .modal-body[style*="grid-template-columns"],
  .kpis[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .card {
    border-radius: 18px !important;
    padding: 16px !important;
  }

  .section-head,
  .expense-head,
  .insurance-head,
  .kpi-toolbar,
  .kpi-section-head,
  .map-toolbar,
  .map-list-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .btn,
  .icon-btn,
  button,
  .seg-btn,
  .map-status-filter {
    min-height: 42px;
  }

  .input,
  select.input,
  textarea.input,
  .login-card .input,
  .login-card select.input,
  .login-card textarea.input {
    min-height: 44px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  textarea.input {
    min-height: 92px !important;
  }

  .combo-list,
  .kpi-search-box .combo-list {
    max-height: min(360px, 58dvh) !important;
  }

  .modal {
    inset: 10px !important;
    max-width: none !important;
    max-height: calc(100dvh - 20px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 20px !important;
  }

  .modal-head {
    padding: 13px 14px !important;
    gap: 10px !important;
  }

  .modal-body {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: auto !important;
  }

  .modal-left,
  .modal-right {
    overflow: visible !important;
    padding: 14px !important;
  }

  .modal-left {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(215,224,235,.92) !important;
  }

  .doc-preview,
  .fleet-map-host,
  .kpi-event-map {
    max-width: 100% !important;
  }

  .fleet-map-host,
  .fleet-map-host.clean-map {
    height: min(520px, 62dvh) !important;
    min-height: 360px !important;
  }

  .kpi-event-map {
    height: min(480px, 58dvh) !important;
    min-height: 340px !important;
  }

  .map-main-grid,
  .map-quick-grid,
  .map-detail-grid,
  .map-violations-grid {
    grid-template-columns: 1fr !important;
  }

  .map-toolbar-actions,
  .map-list-tools,
  .map-violation-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .map-filter-field,
  .map-list-tools .input,
  .map-filter-field .input {
    width: 100% !important;
  }

  .map-overlay-box {
    max-width: calc(100% - 24px) !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
  }

  .map-overlay-box h4 {
    font-size: 13px !important;
  }

  .map-overlay-box p,
  .map-footer,
  .map-sidebar-note {
    font-size: 12px !important;
  }

  .login-shell {
    min-height: 100dvh !important;
  }

  .login-panel {
    padding: max(18px, env(safe-area-inset-top)) 16px 18px !important;
  }

  .login-card {
    width: 100% !important;
    max-width: 460px !important;
    border-radius: 22px !important;
    padding: 22px !important;
  }
}

@media (max-width: 760px) {
  .workspace-badge,
  .page-kicker {
    display: none !important;
  }

  .kpis,
  .expense-kpis,
  .insurance-kpis,
  .dash-actions {
    grid-template-columns: 1fr !important;
  }

  .kpi,
  .kpi-stat-card,
  .kpi-split-card,
  .kpi-month-card,
  .history-kpi-card {
    min-height: auto !important;
  }

  .kpi .num,
  .kpi-stat-value,
  .history-kpi-value {
    font-size: clamp(24px, 8vw, 32px) !important;
  }

  .seg,
  .kpi-switch {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .seg-btn,
  .kpi-switch .btn,
  .top-actions .btn,
  .section-head .btn,
  .expense-head .btn,
  .insurance-head .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Tables become readable mobile cards. Labels are added by mobile-ui.js from table headers. */
  .tbl {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
  }

  .tbl thead {
    display: none !important;
  }

  .tbl,
  .tbl tbody,
  .tbl tr,
  .tbl td {
    display: block !important;
    width: 100% !important;
  }

  .tbl tbody tr {
    border: 1px solid rgba(215,224,235,.95) !important;
    border-radius: 17px !important;
    background: linear-gradient(180deg,#fff,#f8fafc) !important;
    box-shadow: 0 10px 22px rgba(15,23,40,.06) !important;
    overflow: hidden !important;
  }

  .tbl tbody tr td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 14px !important;
    min-height: 42px !important;
    padding: 10px 13px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(215,224,235,.72) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: right !important;
    word-break: break-word !important;
  }

  .tbl tbody tr td:last-child {
    border-bottom: 0 !important;
  }

  .tbl tbody tr td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 42%;
    max-width: 42%;
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: .08em;
    text-align: left;
    text-transform: uppercase;
  }

  .tbl tbody tr td > * {
    max-width: 100%;
  }

  .row,
  .vehicle-row,
  .task-item,
  .ops-item,
  .kpi-rank-row,
  .map-service-row,
  .map-violation-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .vehicle-row-side,
  .kpi-rank-value {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .kpi-rank-row {
    grid-template-columns: 42px minmax(0,1fr) !important;
  }

  .kpi-rank-value {
    grid-column: 1 / -1;
  }

  .modal {
    inset: 6px !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 18px !important;
  }

  .modal-head,
  .modal-left,
  .modal-right {
    padding: 12px !important;
  }

  .fleet-map-host,
  .fleet-map-host.clean-map {
    height: min(460px, 58dvh) !important;
    min-height: 320px !important;
  }

  .kpi-event-map {
    height: min(420px, 54dvh) !important;
    min-height: 300px !important;
  }

  .map-overlay-box {
    position: static !important;
    margin: 8px 0 0 !important;
    max-width: 100% !important;
  }

  .login-card {
    padding: 20px !important;
  }
}

@media (max-width: 430px) {
  .sidebar {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  .sidebar .brand-logo {
    width: 118px !important;
  }

  .sidebar .brand-subtitle {
    display: none !important;
  }

  .navbtn span:last-child {
    font-size: 12px !important;
  }

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

  .card {
    padding: 14px !important;
  }

  .tbl tbody tr td {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    gap: 4px !important;
  }

  .tbl tbody tr td[data-label]::before {
    flex-basis: auto;
    max-width: none;
  }
}

@supports (height: 100svh) {
  @media (max-width: 980px) {
    .login-shell {
      min-height: 100svh !important;
    }

    .modal {
      max-height: calc(100svh - 20px) !important;
    }
  }
}


/* =====================================================================
   V141 native mobile zoom patch
   Tikslas: palikti stabilų mobilų išdėstymą, bet mastelį grąžinti telefono
   native pinch zoom mechanizmui. A-/100/A+ vidinis mastelis išjungtas.
   ===================================================================== */

.mobile-display-tools {
  display: none;
}

@media (max-width: 980px), (pointer: coarse) {
  :root {
    --m-body-font: 14px;
    --m-small-font: 12px;
    --m-control-font: 13px;
    --m-nav-font: 13px;
    --m-title-font: clamp(21px, 5vw, 26px);
    --m-content-x: 12px;
    --m-content-y: 14px;
    --m-card-pad: 15px;
    --m-control-min: 44px;
    --m-nav-width: 380px;
    --m-nav-icon: 33px;
    --m-radius: 18px;
  }

  body.mobile-density-compact {
    --m-body-font: 13px;
    --m-small-font: 11px;
    --m-control-font: 12px;
    --m-nav-font: 12px;
    --m-title-font: clamp(19px, 4.7vw, 23px);
    --m-content-x: 9px;
    --m-content-y: 11px;
    --m-card-pad: 12px;
    --m-control-min: 40px;
    --m-nav-width: 352px;
    --m-nav-icon: 29px;
    --m-radius: 15px;
  }

  body.mobile-density-comfort {
    --m-body-font: 15px;
    --m-small-font: 12.5px;
    --m-control-font: 14px;
    --m-nav-font: 14px;
    --m-title-font: clamp(23px, 5.2vw, 29px);
    --m-content-x: 14px;
    --m-content-y: 16px;
    --m-card-pad: 17px;
    --m-control-min: 46px;
    --m-nav-width: 410px;
    --m-nav-icon: 36px;
    --m-radius: 19px;
  }

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

  body {
    width: 100%;
    min-width: 0;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: var(--m-body-font) !important;
    line-height: 1.45;
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
  }

  .app,
  .main,
  .content,
  .card,
  .modal,
  .modal-body,
  .modal-left,
  .modal-right,
  .grid,
  .layout,
  .row,
  .vehicle-row,
  .task-item,
  .ops-item,
  .kpi-page-stack,
  .kpi-toolbar,
  .expense-head,
  .insurance-head,
  .map-toolbar,
  .sp-card,
  .equipment-page {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .main {
    overflow: visible !important;
  }

  .content {
    width: 100% !important;
    padding: var(--m-content-y) var(--m-content-x) calc(var(--m-content-y) + env(safe-area-inset-bottom)) !important;
  }

  .topbar {
    width: 100% !important;
    padding: 12px var(--m-content-x) !important;
    gap: 10px !important;
  }

  .topbar-meta,
  .top-actions {
    width: 100% !important;
    min-width: 0 !important;
  }

  .topbar-meta h1 {
    font-size: var(--m-title-font) !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere;
  }

  .page-hint,
  .muted,
  .sub,
  .kpi-stat-sub,
  .history-kpi-sub,
  .map-footer,
  .map-sidebar-note {
    font-size: var(--m-small-font) !important;
  }

  .mobile-display-tools {
    display: none !important;
  }

  .mobile-density-btn {
    min-height: 34px !important;
    padding: 6px 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--text-soft) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  .mobile-density-btn.is-active {
    background: linear-gradient(135deg, #005db8, #0a74d3) !important;
    color: #fff !important;
    box-shadow: 0 8px 16px rgba(0,93,184,.18) !important;
  }

  .sidebar {
    min-width: 0 !important;
  }

  .sidebar .brand {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .nav {
    width: min(var(--m-nav-width), calc(100vw - 14px)) !important;
    max-width: calc(100vw - 14px) !important;
    height: 100svh !important;
    max-height: 100svh !important;
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-gutter: stable;
  }

  .navbtn,
  .navsubbtn,
  .navgroup-trigger {
    min-height: var(--m-control-min) !important;
    border-radius: var(--m-radius) !important;
    padding: 9px 10px !important;
    gap: 9px !important;
  }

  .navbtn .ico,
  .ico {
    width: var(--m-nav-icon) !important;
    height: var(--m-nav-icon) !important;
    flex: 0 0 var(--m-nav-icon) !important;
  }

  .navbtn span:last-child,
  .navsubbtn {
    font-size: var(--m-nav-font) !important;
    line-height: 1.22 !important;
  }

  .nav-submenu {
    padding-left: calc(var(--m-nav-icon) + 8px) !important;
  }

  .btn,
  .icon-btn,
  button,
  .seg-btn,
  .map-status-filter,
  .sp-btn,
  .sp-mini-btn,
  .sp-tabs button {
    min-height: var(--m-control-min) !important;
    font-size: var(--m-control-font) !important;
    touch-action: auto;
  }

  .input,
  select.input,
  textarea.input,
  .sp-input,
  input,
  select,
  textarea {
    max-width: 100% !important;
  }

  .input,
  select.input,
  textarea.input,
  .sp-input,
  .login-card .input,
  .login-card select.input,
  .login-card textarea.input {
    min-height: 44px !important;
    font-size: 16px !important; /* neleidžia iOS automatiškai priartinti aktyvaus lauko */
  }

  .card,
  .kpi,
  .kpi-stat-card,
  .kpi-split-card,
  .kpi-month-card,
  .history-kpi-card,
  .sp-card,
  .equipment-kpi {
    padding: var(--m-card-pad) !important;
    border-radius: var(--m-radius) !important;
  }

  .tbl-wrap,
  .table-wrap,
  .sp-table-wrap,
  .equipment-table-wrap,
  .map-list-table,
  .doc-list,
  .history-table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  table:not(.tbl) {
    max-width: 100%;
  }

  .sp-table,
  .equipment-group-table {
    min-width: 720px !important;
  }

  /* Sales plans / kandidatai pardavimui */
  .sp-hero,
  .sp-card-head,
  .sp-tools,
  .sp-hero-actions,
  .sp-sale-row,
  .sp-drawer-head,
  .sp-drawer-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .sp-hero {
    padding: var(--m-card-pad) !important;
    border-radius: var(--m-radius) !important;
  }

  .sp-hero h2,
  .sp-drawer-head h3 {
    font-size: var(--m-title-font) !important;
    line-height: 1.1 !important;
  }

  .sp-kpis,
  .sp-detail-grid,
  .sp-form-grid.two,
  .sp-sales-grid {
    grid-template-columns: 1fr !important;
  }

  .sp-board,
  .sp-week-grid {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, 86vw);
    grid-template-columns: none !important;
    overflow-x: auto !important;
    padding: var(--m-content-x) !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .sp-column,
  .sp-week-day {
    scroll-snap-align: start;
  }

  .sp-drawer-overlay {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }

  .sp-drawer,
  .sp-drawer.wide {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100svh !important;
    padding: calc(14px + env(safe-area-inset-top)) var(--m-content-x) calc(18px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Equipment / įrangos OCR langai */
  .equipment-head,
  .equipment-modal-body,
  .equipment-scanner-body,
  .equipment-scanner-body.photo-only,
  .equipment-form-grid,
  .equipment-filter-grid {
    grid-template-columns: 1fr !important;
  }

  .equipment-head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .equipment-kpis {
    grid-template-columns: 1fr !important;
  }

  .equipment-modal,
  .equipment-scanner-modal {
    top: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
    left: 6px !important;
    max-width: none !important;
    max-height: calc(100svh - 12px) !important;
    overflow: hidden !important;
  }

  .equipment-modal-body,
  .equipment-scanner-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .equipment-scanner-video-wrap,
  .equipment-photo-zone {
    min-height: min(340px, 48svh) !important;
  }

  .equipment-scanner-body video {
    min-height: min(340px, 48svh) !important;
  }

  .equipment-device-cards {
    grid-template-columns: 1fr !important;
  }

  .equipment-device-card,
  .equipment-reg-cell,
  .equipment-device-meta {
    min-width: 0 !important;
  }

  /* Maps and long panels */
  .fleet-map-host,
  .fleet-map-host.clean-map,
  .kpi-event-map {
    width: 100% !important;
    max-width: 100% !important;
  }

  .map-main-grid,
  .map-quick-grid,
  .map-detail-grid,
  .map-violations-grid {
    grid-template-columns: 1fr !important;
  }

  .map-toolbar-actions,
  .map-list-tools,
  .map-violation-actions,
  .kpi-filter-actions {
    width: 100% !important;
  }

  .map-toolbar-actions > *,
  .map-list-tools > *,
  .map-violation-actions > *,
  .sp-tools > *,
  .sp-hero-actions > *,
  .sp-drawer-actions > * {
    width: 100% !important;
    justify-content: center !important;
  }

  .user-dropdown {
    position: fixed !important;
    right: var(--m-content-x) !important;
    left: var(--m-content-x) !important;
    top: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 430px) {
  .mobile-display-tools {
    max-width: 100%;
  }

  .mobile-density-btn {
    min-height: 32px !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .sidebar .brand-logo {
    max-width: min(118px, 42vw) !important;
  }

  .mobile-nav-toggle-text {
    display: none !important;
  }

  .nav {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
  }
}

@supports (height: 100svh) {
  @media (max-width: 980px), (pointer: coarse) {
    .nav {
      height: 100svh !important;
      max-height: 100svh !important;
    }

    .mobile-nav-backdrop {
      min-height: 100svh !important;
    }
  }
}

/* =====================================================================
   V144 professional mobile layout for Pardavimai / Planai
   Taikoma ne tik pagal pikselių plotį, bet ir pagal jutiklinį ekraną.
   ===================================================================== */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .sales-plan-page,
  .sales-plan-page section,
  .sales-plan-page .sp-card,
  .sales-plan-page .sp-table-wrap,
  .sales-plan-page .sp-board,
  .sales-plan-page .sp-week-grid,
  .sales-plan-page .sp-sales-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .sales-plan-page * {
    box-sizing: border-box !important;
  }

  .sales-plan-page {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }

  .sp-hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 15px !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 26px rgba(11,100,233,.18) !important;
  }

  .sp-hero h2 {
    font-size: clamp(22px, 5.6vw, 27px) !important;
    line-height: 1.12 !important;
    margin: 3px 0 6px !important;
  }

  .sp-hero p {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }

  .sp-hero-actions,
  .sp-tools {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    justify-content: stretch !important;
  }

  .sp-btn,
  .sp-mini-btn,
  .sp-tabs button,
  .sp-kpi,
  .sp-plan-card,
  .sp-week-item,
  .sp-sale-card {
    min-height: 44px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .sp-btn,
  .sp-mini-btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .sp-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
    padding: 2px 2px 9px !important;
    margin: 0 !important;
  }

  .sp-tabs button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    scroll-snap-align: start !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
  }

  .sp-kpis {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
    padding: 2px 2px 8px !important;
    margin: 0 !important;
  }

  .sp-kpi {
    flex: 0 0 min(76vw, 270px) !important;
    min-width: min(76vw, 270px) !important;
    scroll-snap-align: start !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  .sp-kpi-icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    font-size: 13px !important;
  }

  .sp-kpi b {
    font-size: 21px !important;
    line-height: 1.05 !important;
  }

  .sp-kpi small {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .sp-card {
    border-radius: 17px !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
  }

  .sp-card-head {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .sp-card-head h3 {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }

  .sp-card-head p {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .sp-input,
  .sales-plan-page input,
  .sales-plan-page select,
  .sales-plan-page textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;
  }

  .sp-table-wrap {
    overflow: visible !important;
    padding: 12px !important;
  }

  .sp-table {
    display: block !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  .sp-table thead {
    display: none !important;
  }

  .sp-table tbody,
  .sp-table tr,
  .sp-table td {
    display: block !important;
    width: 100% !important;
  }

  .sp-table tr {
    margin: 0 0 12px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #fff, #f8fafc) !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.055) !important;
    overflow: hidden !important;
  }

  .sp-table td {
    display: grid !important;
    grid-template-columns: minmax(104px, 36%) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #edf0f5 !important;
    text-align: right !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .sp-table td:last-child {
    border-bottom: 0 !important;
  }

  .sp-table td::before {
    content: attr(data-label) !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
    letter-spacing: .06em !important;
    text-align: left !important;
    text-transform: uppercase !important;
  }

  .sp-table .sp-vehicle-cell,
  .sp-table .sp-criteria {
    justify-content: flex-end !important;
    text-align: right !important;
  }

  .sp-table .sp-actions-cell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    text-align: left !important;
  }

  .sp-table .sp-actions-cell::before {
    margin-bottom: 2px !important;
  }

  .sp-actions-cell .sp-mini-btn {
    width: 100% !important;
  }

  .sp-board,
  .sp-week-grid,
  .sp-sales-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  .sp-column,
  .sp-week-day {
    width: 100% !important;
    min-width: 0 !important;
    min-height: auto !important;
    padding: 11px !important;
    border-radius: 15px !important;
  }

  .sp-column:empty {
    display: none !important;
  }

  .sp-column-title {
    gap: 7px !important;
    font-size: 14px !important;
  }

  .sp-plan-card,
  .sp-sale-card,
  .sp-week-item {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 15px !important;
    padding: 12px !important;
    white-space: normal !important;
  }

  .sp-plan-top,
  .sp-plan-footer,
  .sp-sale-title,
  .sp-sale-row {
    min-width: 0 !important;
  }

  .sp-plan-top,
  .sp-plan-footer {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: start !important;
  }

  .sp-plan-meta {
    font-size: 13px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
  }

  .sp-week-num {
    font-size: 24px !important;
    margin: 6px 0 !important;
  }

  .sp-sales-grid {
    padding-top: 12px !important;
  }

  .sp-sale-title {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .sp-sale-title b {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  .sp-sale-row {
    display: grid !important;
    grid-template-columns: minmax(92px, 36%) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }

  .sp-sale-row b {
    text-align: right !important;
    overflow-wrap: anywhere !important;
  }

  .sp-detail-grid,
  .sp-form-grid.two {
    grid-template-columns: 1fr !important;
  }

  .sp-form-grid .span-2 {
    grid-column: auto !important;
  }

  .sp-mini-list div,
  .sp-hidden-list div {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .sp-drawer-overlay {
    align-items: flex-end !important;
    justify-content: center !important;
    z-index: 1000 !important;
    padding: 0 !important;
    background: rgba(15,23,42,.56) !important;
  }

  .sp-drawer,
  .sp-drawer.wide {
    width: 100vw !important;
    max-width: 100vw !important;
    height: min(92dvh, 92vh) !important;
    max-height: min(92dvh, 92vh) !important;
    border-radius: 22px 22px 0 0 !important;
    padding: 15px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 0 -18px 40px rgba(15,23,42,.24) !important;
  }

  .sp-drawer-head {
    position: sticky !important;
    top: -15px !important;
    z-index: 2 !important;
    background: linear-gradient(180deg, #fff 0%, #fff 82%, rgba(255,255,255,.86) 100%) !important;
    margin: -15px -15px 12px !important;
    padding: 14px 15px 12px !important;
    border-bottom: 1px solid #edf0f5 !important;
  }

  .sp-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  .sp-score-big {
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 13px !important;
  }

  .sp-drawer-actions {
    position: sticky !important;
    bottom: -15px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin: 14px -15px -15px !important;
    padding: 12px 15px calc(15px + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.88), #fff 34%) !important;
    border-top: 1px solid #edf0f5 !important;
  }
}

@media (max-width: 430px) {
  .sales-plan-page {
    gap: 10px !important;
  }

  .sp-hero {
    padding: 13px !important;
  }

  .sp-kpi {
    flex-basis: 86vw !important;
    min-width: 86vw !important;
  }

  .sp-table td,
  .sp-sale-row {
    grid-template-columns: 1fr !important;
    text-align: left !important;
    gap: 4px !important;
  }

  .sp-table .sp-vehicle-cell,
  .sp-table .sp-criteria {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .sp-sale-row b {
    text-align: left !important;
  }

  .sp-sale-title {
    grid-template-columns: auto minmax(0,1fr) !important;
  }

  .sp-sale-title small {
    grid-column: 1 / -1 !important;
    margin-left: 0 !important;
  }
}