/* ============================================================
   СмартТендер CRM — Mobile / Responsive Styles
   Breakpoints: 1024px (tablet), 768px (mobile), 480px (small)
   ============================================================ */

/* ── Hamburger button (hidden on desktop) ───────────────── */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--dark);
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.hamburger-btn:hover {
  background: var(--gray-light);
}

/* ── Sidebar overlay (hidden by default) ────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 1099;
  opacity: 0;
  transition: opacity .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* ── Chat back button (hidden on desktop) ───────────────── */
.chat-back-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--dark);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  margin-right: 8px;
  -webkit-tap-highlight-color: transparent;
}

/* ── Body scroll lock when mobile menu open ─────────────── */
body.mobile-menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ════════════════════════════════════════════════════════════
   TABLET — max-width: 1024px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* Stats grid: 4 → 2 columns */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Page content padding slightly reduced */
  .page-content {
    padding: 22px 18px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   MOBILE — max-width: 768px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Layout: sidebar becomes off-canvas drawer ────────── */
  .app-layout {
    display: block !important;
  }

  /* Hide desktop sidebar toggle on mobile */
  .sidebar-toggle {
    display: none !important;
  }

  /* Fix: sidebar section labels must be clickable on mobile (override sb-collapsed pointer-events:none) */
  html.sb-collapsed .sidebar .nav-section-label {
    height: auto !important;
    padding: 6px 10px !important;
    margin: 4px 4px 2px !important;
    overflow: visible !important;
    background: none !important;
    pointer-events: auto !important;
  }
  html.sb-collapsed .sidebar .nav-section-label > * {
    display: inline !important;
  }

  /* Hide FAB when sidebar is open */
  body.mobile-menu-open #chat-fab,
  body.mobile-menu-open .chat-fab {
    display: none !important;
  }

  .sidebar,
  .sidebar.collapsed {
    position: fixed !important;
    top: 0 !important;
    left: -280px !important;
    bottom: 0 !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 1100 !important;
    transform: none !important;
    transition: left .3s cubic-bezier(.4, 0, .2, 1) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar.mobile-open,
  .sidebar.collapsed.mobile-open {
    left: 0 !important;
  }

  /* Ensure collapsed sidebar shows full labels on mobile */
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .sidebar-logo-text,
  .sidebar.collapsed .sidebar-logo-sub,
  .sidebar.collapsed .sidebar-user-info {
    display: block !important;
    opacity: 1 !important;
    width: auto !important;
    overflow: visible !important;
  }
  .sidebar.collapsed .nav-item {
    justify-content: flex-start !important;
    padding: 11px 16px !important;
  }
  .sidebar.collapsed .sidebar-logo {
    justify-content: flex-start !important;
    padding: 16px !important;
  }
  .sidebar.collapsed .sidebar-logo-img {
    width: 36px !important;
    height: 36px !important;
  }
  .sidebar.collapsed .sidebar-user {
    justify-content: flex-start !important;
  }
  .sidebar.collapsed .btn-logout {
    font-size: inherit !important;
    padding: 8px 12px !important;
    justify-content: flex-start !important;
  }
  .sidebar.collapsed .sidebar-footer {
    padding: 12px !important;
  }

  /* Override desktop collapsed state on mobile — keep sidebar hidden */
  html.sb-collapsed .sidebar {
    left: -280px !important;
    width: 280px !important;
    min-width: 280px !important;
  }
  html.sb-collapsed .sidebar.mobile-open {
    left: 0 !important;
  }
  html.sb-collapsed .sidebar .nav-label,
  html.sb-collapsed .sidebar .sidebar-logo-text,
  html.sb-collapsed .sidebar .sidebar-logo-sub,
  html.sb-collapsed .sidebar .sidebar-user-info {
    display: block !important;
  }
  html.sb-collapsed .sidebar .nav-item {
    justify-content: flex-start !important;
    padding: 11px 16px !important;
    font-size: inherit !important;
  }
  html.sb-collapsed .sidebar .sidebar-logo {
    justify-content: flex-start !important;
    padding: 16px !important;
  }
  html.sb-collapsed .sidebar .sidebar-logo-img {
    width: 36px !important;
    height: 36px !important;
  }
  html.sb-collapsed .sidebar .sidebar-user {
    justify-content: flex-start !important;
  }
  html.sb-collapsed .sidebar .btn-logout {
    font-size: inherit !important;
    padding: 8px 12px !important;
    justify-content: flex-start !important;
  }
  html.sb-collapsed .sidebar .sidebar-footer {
    padding: 12px !important;
  }

  /* Hide desktop sidebar toggle on mobile */
  .sidebar-toggle {
    display: none !important;
  }

  /* ── Show hamburger ───────────────────────────────────── */
  .hamburger-btn {
    display: flex;
  }

  /* ── Main content takes full width ────────────────────── */
  .main-content {
    width: 100% !important;
    margin-left: 0 !important;
    flex: 1 !important;
  }


  /* ── Topbar ───────────────────────────────────────────── */
  .topbar {
    height: 56px !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }

  .topbar-title {
    font-size: 15px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* ── Page content ─────────────────────────────────────── */
  .page-content {
    padding: 16px 12px !important;
  }

  /* ── Grids ────────────────────────────────────────────── */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .stats-grid .stat-card,
  .stats-grid > div {
    padding: 10px 12px !important;
  }

  .stats-grid .stat-card h3,
  .stats-grid .stat-value,
  .stats-grid > div > div:first-child {
    font-size: 20px !important;
  }

  .stats-grid .stat-card p,
  .stats-grid .stat-label,
  .stats-grid > div > div:last-child {
    font-size: 11px !important;
  }

  .grid-2,
  .grid-3,
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── Cards ────────────────────────────────────────────── */
  .card {
    border-radius: var(--radius-sm) !important;
  }

  .card-header {
    padding: 14px 14px !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  .card-body {
    padding: 14px !important;
  }

  /* ── Stat cards ───────────────────────────────────────── */
  .stat-card {
    padding: 14px !important;
  }

  /* ── Tables — card view on mobile ──────────────────────── */
  .table-wrapper {
    overflow-x: hidden !important;
  }

  /* Hide table headers, convert rows to cards */
  #apps-table { table-layout: auto !important; min-width: 0 !important; }
  #apps-table thead { display: none !important; }
  #apps-table tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 12px;
    padding: 14px 12px !important;
    border-bottom: 1px solid var(--gray-light);
    align-items: center;
  }
  #apps-table tbody td {
    display: block !important;
    border: none !important;
    padding: 0 !important;
    position: static !important;
    box-shadow: none !important;
    min-width: 0 !important;
    width: auto !important;
  }

  /* 1st col (title) — full width */
  #apps-table tbody td:nth-child(1) {
    width: 100% !important;
    flex-basis: 100%;
    margin-bottom: 4px;
    font-size: 14px !important;
  }

  /* 2nd col (status) — show only label, hide mini-track */
  #apps-table tbody td:nth-child(2) {
    width: 100% !important;
    flex-basis: 100%;
    margin-bottom: 6px;
  }

  #apps-table .mini-track {
    display: none !important;
  }

  #apps-table .mini-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    display: inline-block !important;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
  }

  /* Status-specific label colors */
  #apps-table .mini-statusbar.cur-new .mini-label { background: rgba(59,130,246,.1); color: #3b82f6; }
  #apps-table .mini-statusbar.cur-in_progress .mini-label { background: rgba(245,158,11,.1); color: #d97706; }
  #apps-table .mini-statusbar.cur-documents_needed .mini-label { background: rgba(139,92,246,.1); color: #7c3aed; }
  #apps-table .mini-statusbar.cur-under_review .mini-label { background: rgba(14,165,233,.1); color: #0284c7; }
  #apps-table .mini-statusbar.cur-approved .mini-label { background: rgba(34,197,94,.1); color: #16a34a; }
  #apps-table .mini-statusbar.cur-completed .mini-label { background: rgba(16,185,129,.1); color: #059669; }
  #apps-table .mini-statusbar.cur-rejected .mini-label { background: rgba(220,38,38,.1); color: #dc2626; }

  /* 3rd col (client) — hide on mobile */
  #apps-table tbody td:nth-child(3) {
    display: none !important;
  }

  /* 4th col (product) — hide on mobile */
  #apps-table tbody td:nth-child(4) {
    display: none !important;
  }

  /* 5th col (amount) — hide on mobile */
  #apps-table tbody td:nth-child(5) {
    display: none !important;
  }

  /* 6th col (EIS number) — hide on mobile */
  #apps-table tbody td:nth-child(6) {
    display: none !important;
  }

  /* 7th col (date) — hide on mobile */
  #apps-table tbody td:nth-child(7) {
    display: none !important;
  }

  /* 8th col (action btn) — hide on mobile, click row to open */
  #apps-table tbody td:last-child {
    display: none !important;
  }

  /* ── Proposals table → mobile cards ──────────────────── */
  #proposals-table {
    table-layout: auto !important;
    min-width: 0 !important;
  }
  #proposals-table thead {
    display: none !important;
  }
  #proposals-table tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 10px;
    padding: 12px 10px !important;
    border-bottom: 1px solid #e2e8f0;
    align-items: center;
    position: relative;
  }
  #proposals-table tbody td {
    display: none !important;  /* hide all by default */
    border: none !important;
    padding: 0 !important;
    position: static !important;
    box-shadow: none !important;
    min-width: 0 !important;
    width: auto !important;
  }
  /* Show: bank name (col 3) */
  #proposals-table tbody td.bank-name-cell {
    display: block !important;
    flex-basis: 100%;
    font-size: 14px !important;
    font-weight: 600 !important;
    order: 1;
  }
  /* Show: stage select (col 4) */
  #proposals-table tbody td:nth-child(4) {
    display: block !important;
    order: 2;
  }
  #proposals-table tbody td:nth-child(4) select {
    font-size: 12px !important;
    padding: 4px 8px !important;
    min-width: 120px;
  }
  /* Show: cost (col 5) */
  #proposals-table tbody td:nth-child(5) {
    display: block !important;
    order: 3;
  }
  #proposals-table tbody td:nth-child(5) input {
    font-size: 12px !important;
    width: 80px !important;
  }
  /* Show: ref number (col 1) as subtle text */
  #proposals-table tbody td:nth-child(1) {
    display: block !important;
    flex-basis: 100%;
    order: 4;
    font-size: 11px !important;
    color: #94a3b8 !important;
  }
  #proposals-table tbody td:nth-child(1) input {
    font-size: 11px !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    color: #94a3b8 !important;
  }
  /* Hide: aggregator, file icons, toggles, delete, ЭЦП on mobile */
  #proposals-table .th-resize {
    display: none !important;
  }

  /* Completed apps table — same treatment */
  .table-wrapper table:not(#apps-table) thead { display: none !important; }
  .table-wrapper table:not(#apps-table) { table-layout: auto !important; min-width: 0 !important; }
  .table-wrapper table:not(#apps-table) tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 12px;
    padding: 14px 12px !important;
    border-bottom: 1px solid var(--gray-light);
  }
  .table-wrapper table:not(#apps-table) tbody td {
    display: block !important;
    border: none !important;
    padding: 0 !important;
    position: static !important;
    box-shadow: none !important;
  }
  .table-wrapper table:not(#apps-table) tbody td:nth-child(1) {
    width: 100% !important;
    flex-basis: 100%;
  }
  .table-wrapper table:not(#apps-table) tbody td:nth-child(n+5) {
    display: none !important;
  }
  .table-wrapper table:not(#apps-table) tbody td:last-child {
    display: none !important;
  }

  /* Product tabs — 2 columns on mobile */
  .prod-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  .prod-tab {
    flex: none !important;
    padding: 10px 8px !important;
    font-size: 12px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
  }

  /* Column filter dropdowns */
  .col-filter-dd {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: 50vh !important;
  }

  /* Client edit popup */
  #client-edit-pop {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: 12px !important;
    width: auto !important;
  }

  /* Card header controls — wrap */
  .card-header {
    flex-wrap: wrap !important;
  }

  /* Page size selector — hide on mobile */
  #page-size {
    display: none !important;
  }

  /* ── Forms — touch-friendly ───────────────────────────── */
  .form-control,
  select.form-control,
  textarea.form-control {
    min-height: 44px !important;
    font-size: 16px !important; /* prevents iOS zoom */
    padding: 10px 14px !important;
  }

  .btn {
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 10px 16px !important;
  }

  .btn-sm {
    min-height: 36px !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

  /* ── Touch targets ────────────────────────────────────── */
  .nav-item {
    min-height: 44px !important;
  }

  a, button {
    -webkit-tap-highlight-color: transparent;
  }

  /* ── Chat page (full-page) ────────────────────────────── */

  /* Remove page-content padding when chat is inside */
  .page-content:has(.chat-layout) {
    padding: 0 !important;
    overflow: hidden !important;
  }

  .chat-layout {
    display: flex !important;
    flex-direction: column !important;
    height: calc(100vh - 56px) !important;
    height: calc(100dvh - 56px) !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  .chat-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
    border-right: none !important;
    border-bottom: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .chat-user-list {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0 !important;
  }

  .chat-window {
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    flex-direction: column !important;
  }

  /* When a conversation is open on mobile */
  .chat-layout.chat-conv-open {
    flex-direction: column !important;
  }

  .chat-layout.chat-conv-open .chat-sidebar {
    display: none !important;
  }

  .chat-layout.chat-conv-open .chat-window {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
  }

  .chat-back-btn {
    display: flex !important;
  }

  .chat-bubble {
    max-width: 85% !important;
  }

  .chat-bubble-wrap {
    max-width: 100% !important;
  }

  .chat-input-bar {
    padding: 8px !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  .chat-input {
    font-size: 16px !important; /* prevents iOS zoom */
    min-height: 40px !important;
    max-height: 100px !important;
    padding: 8px 14px !important;
  }

  .chat-send-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex-shrink: 0 !important;
  }

  .chat-messages {
    padding: 10px 8px !important;
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }

  .chat-window-header {
    padding: 10px 12px !important;
    flex-shrink: 0 !important;
  }

  .chat-sidebar-header {
    padding: 6px 12px !important;
    font-size: 0 !important;  /* hide "Сообщения" text — already in topbar */
    line-height: 0 !important;
    min-height: auto !important;
    justify-content: flex-end !important;
  }
  .chat-sidebar-header > .i,
  .chat-sidebar-header > span.i {
    display: none !important;  /* hide icon */
  }
  .chat-sidebar-header .btn {
    font-size: 13px !important;
    line-height: normal !important;
    margin-left: 0 !important;
  }

  .chat-search {
    padding: 8px 12px !important;
  }

  .chat-sidebar {
    overflow: hidden !important;
    overflow-y: auto !important;
  }
  .chat-user-item {
    overflow: visible !important;
    padding: 10px 12px !important;
  }
  .chat-user-item .chat-avatar {
    flex-shrink: 0 !important;
    margin-left: 0 !important;
  }
  .chat-user-list {
    overflow: visible !important;
    overflow-y: auto !important;
    padding: 0 !important;
  }

  .chat-search input {
    font-size: 16px !important;
  }

  .chat-user-item {
    padding: 10px 12px !important;
  }

  .chat-empty {
    padding: 40px 20px !important;
  }

  /* Context menu — position on mobile */
  #page-ctx-menu {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    top: auto !important;
    width: auto !important;
    border-radius: 12px !important;
    z-index: 2000 !important;
  }

  /* Reaction picker — centered on mobile */
  #reaction-picker {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 70px !important;
    top: auto !important;
    z-index: 2001 !important;
  }

  /* Drag overlay */
  .drag-overlay {
    font-size: 14px !important;
  }

  /* ── Chat widget (floating) — fullscreen on mobile ───── */
  #chat-float,
  .chat-float-panel {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    top: 0 !important;
    border-radius: 0 !important;
    max-width: 100vw !important;
    min-width: unset !important;
    min-height: unset !important;
    max-height: 100dvh !important;
  }

  /* Chat internals — fit within fullscreen container */
  #chat-float #chat-body,
  #chat-float #chat-app-area,
  #chat-float #chat-dm-area {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #chat-float #app-chat-messages,
  #chat-float #dm-messages {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #chat-float textarea {
    font-size: 16px !important; /* prevent iOS zoom */
  }

  /* FAB chat button — compact icon-only on mobile */
  #chat-fab,
  .chat-fab {
    bottom: 16px !important;
    right: 16px !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 24px !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  /* Hide text in FAB, show only emoji */
  #chat-fab {
    text-indent: -9999px !important;
    line-height: 0 !important;
  }

  #chat-fab::before {
    content: '\1F4AC';
    text-indent: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 24px;
    line-height: 1;
  }

  /* ── Notification panel on mobile ─────────────────────── */
  .notif-panel {
    width: 92vw !important;
    max-width: 92vw !important;
  }

  /* ── Profile modal on mobile ─────────────────────────── */
  .profile-modal {
    width: 92vw !important;
    max-width: 92vw !important;
  }

  /* ── Modals ───────────────────────────────────────────── */
  .modal {
    max-width: calc(100vw - 24px) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: 12px !important;
    border-radius: 12px !important;
  }

  /* ── Login page ───────────────────────────────────────── */
  .login-card {
    margin: 16px !important;
    padding: 28px 20px !important;
    max-width: calc(100vw - 32px) !important;
  }

  .login-card .form-control {
    font-size: 16px !important;
  }

  /* ── Action buttons wrap ──────────────────────────────── */
  .topbar-actions {
    gap: 6px !important;
  }

  /* ── Filter / action bars ─────────────────────────────── */
  .filter-bar,
  .action-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ── Cookie banner responsive ─────────────────────────── */
  #cookie-banner > div {
    flex-direction: column !important;
    text-align: center !important;
    gap: 10px !important;
  }

  /* ── Application status bar — compact horizontal scroll ── */
  .app-statusbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 16px !important;
    border-radius: 8px !important;
  }

  .statusbar-step {
    clip-path: none !important;
    height: 34px !important;
    font-size: 11px !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    border-right: 1px solid rgba(255,255,255,.5) !important;
  }

  .statusbar-form {
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }

  .statusbar-form:first-child .statusbar-step {
    clip-path: none !important;
    border-radius: 8px 0 0 8px !important;
    padding-left: 10px !important;
  }

  .statusbar-form:last-child .statusbar-step {
    clip-path: none !important;
    border-radius: 0 8px 8px 0 !important;
    border-right: none !important;
  }

  /* When statusbar uses buttons directly (no forms) */
  .app-statusbar > button.statusbar-step:first-child {
    clip-path: none !important;
    border-radius: 8px 0 0 8px !important;
    padding-left: 10px !important;
  }

  .app-statusbar > button.statusbar-step:last-child {
    clip-path: none !important;
    border-radius: 0 8px 8px 0 !important;
    border-right: none !important;
  }

  .app-statusbar > button.statusbar-step {
    clip-path: none !important;
    height: 34px !important;
    font-size: 11px !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
    flex-shrink: 1 !important;
    border-right: 1px solid rgba(255,255,255,.5) !important;
  }

  /* ── Application detail page — single column layout ──── */
  /* Main 2-column flex container → stack */
  .page-content > div[style*="display:flex"][style*="gap:20px"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* info-grid items stack */
  .info-grid {
    grid-template-columns: 1fr !important;
  }

  .info-grid .info-item[style*="grid-column:span 2"] {
    grid-column: span 1 !important;
  }

  /* Card header — wrap actions */
  .card-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .card-header > div {
    flex-wrap: wrap !important;
  }

  /* Breadcrumb */
  .breadcrumb {
    font-size: 13px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Proposals table on mobile */
  #proposals-table {
    font-size: 12px !important;
  }

  #proposals-table thead th {
    padding: 8px 6px !important;
    font-size: 10px !important;
  }

  #proposals-table tbody td {
    padding: 8px 6px !important;
  }

  /* Bank dropdown on mobile */
  .bank-dropdown {
    width: calc(100vw - 24px) !important;
    left: 12px !important;
  }

  /* Timeline compact */
  .tl-item {
    gap: 8px !important;
  }

  /* Action dropdown on mobile */
  .action-dropdown {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    top: auto !important;
    width: auto !important;
    z-index: 2000 !important;
    border-radius: 12px !important;
  }

  /* ── Proposals section ────────────────────────────────── */
  .proposal-card {
    padding: 12px !important;
  }

  /* ── Detail page info grids ───────────────────────────── */
  .info-grid,
  .detail-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Tabs ──────────────────────────────────────────────── */
  .tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }

  .tab {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ── Dropdown menus ───────────────────────────────────── */
  .dropdown-menu {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    z-index: 2000 !important;
  }

  /* ── Client dashboard — org card ─────────────────────── */
  .card-body > div[style*="display: flex"][style*="gap: 20px"] {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }
  .card-body > div[style*="display: flex"][style*="gap: 20px"] > div[style*="flex-shrink: 0"][style*="border-left"] {
    border-left: none !important;
    border-top: 1px solid #e2e8f0 !important;
    padding-left: 0 !important;
    padding-top: 12px !important;
    width: 100% !important;
  }
  .card-body > div[style*="display: flex"][style*="gap: 20px"] > div[style*="text-align: right"] {
    text-align: left !important;
    width: 100% !important;
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 12px !important;
  }
  /* Hide org icon on mobile */
  .card-body > div[style*="display: flex"][style*="gap: 20px"] > div[style*="48px"][style*="border-radius"] {
    display: none !important;
  }

  /* ── Client info-grid (application detail) ──────────── */
  .info-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .info-grid .info-item {
    grid-column: span 1 !important;
  }

  /* ── Client proposals table ─────────────────────────── */
  #proposals-table:not(.manager-table) tbody td:nth-child(2) {
    display: block !important;
    flex-basis: auto;
    font-size: 13px !important;
    font-weight: 600 !important;
    order: 1;
  }
  /* Client proposals: show stage badge */
  #proposals-table:not(.manager-table) tbody td:nth-child(3) {
    display: block !important;
    order: 2;
  }

  /* ── FIX: Chat FAB — не перекрывать контент при загрузке ─── */
  #chat-fab,
  .chat-fab {
    z-index: 900 !important;
  }

  /* ── FIX: Preferred bank banner — адаптация ─────────────── */
  div[style*="linear-gradient"][style*="border-radius"] {
    flex-direction: column !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    gap: 4px !important;
  }

  /* ── FIX: Sidebar sections — раскрытие и прокрутка ──────── */
  .sidebar-section-title {
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .sidebar .nav-section {
    display: block !important;
  }
  .sidebar-nav {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    flex: 1 !important;
    max-height: calc(100vh - 200px) !important;
    max-height: calc(100dvh - 200px) !important;
  }

  /* ── FIX: Statusbar — горизонтальная прокрутка ─────────── */
  .app-statusbar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-bottom: 4px !important;
  }
  .app-statusbar::-webkit-scrollbar {
    display: none !important;
  }
  .statusbar-step {
    font-size: 10px !important;
    padding: 0 6px !important;
    min-width: max-content !important;
  }

  /* ── FIX: Card header buttons — иконки вместо текста ────── */
  .card-header .btn.btn-sm {
    font-size: 0 !important;
    padding: 6px !important;
    min-width: 32px !important;
  }
  .card-header .btn.btn-sm svg {
    width: 14px !important;
    height: 14px !important;
  }
  /* Вернуть текст для кнопок без SVG */
  .card-header .btn.btn-sm:not(:has(svg)) {
    font-size: 11px !important;
  }

  /* ── FIX: Action buttons — компактнее ──────────────────── */
  .card-header div[style*="display:flex"][style*="gap:8px"] {
    gap: 4px !important;
    flex-wrap: wrap !important;
  }
  .card-header div[style*="display:flex"] .btn.btn-sm {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  /* ── FIX: LikeBG Wizard — прокрутка и мобильная адаптация ─ */
  .lbg-modal-body {
    max-height: 75vh !important;
    max-height: 75dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .lbg-modal-split {
    flex-direction: column !important;
    max-height: 70vh !important;
    max-height: 70dvh !important;
    overflow-y: auto !important;
  }
  .lbg-modal-split-left,
  .lbg-modal-split-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* Wizard stepper — горизонтальная прокрутка */
  .lbg-stepper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }
  .lbg-stepper::-webkit-scrollbar { display: none !important; }
  .lbg-stepper-seg {
    min-width: max-content !important;
    flex-shrink: 0 !important;
    font-size: 11px !important;
  }
  /* Wizard content area — прокрутка */
  .lbg-wiz-content,
  #lbg-wiz-content {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: 55vh !important;
    max-height: 55dvh !important;
  }
  /* Wizard bank cards panel */
  .lbg-wiz-pprog-list,
  #lbg-wiz-pprog-list {
    max-height: 40vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── FIX: Notifications page — прокрутка ────────────────── */
  .notifications-list,
  #notifications-list,
  div[class*="notification"][style*="max-height"] {
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── FIX: Proposals actions — компактнее ────────────────── */
  #proposal-add-wrap {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #proposal-add-wrap .btn {
    font-size: 11px !important;
    padding: 5px 10px !important;
  }

  /* ── FIX: Detail two-column → stack ────────────────────── */
  div[style*="display:flex"][style*="gap:12px"] > div[style*="flex:1"] {
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════
   SMALL PHONE — max-width: 480px
   ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  .page-content {
    padding: 12px 8px !important;
  }

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

  .stat-card {
    padding: 12px !important;
  }

  .topbar-title {
    font-size: 14px !important;
  }

  .card-header {
    padding: 12px !important;
  }

  .card-body {
    padding: 12px !important;
  }

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

  .btn {
    padding: 10px 14px !important;
  }

  /* Hide less important text on very small screens */
  .hide-mobile-sm {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════
   PWA Standalone mode — safe area insets
   ════════════════════════════════════════════════════════════ */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (display-mode: standalone) {
    .topbar {
      padding-top: env(safe-area-inset-top) !important;
    }

    .sidebar {
      padding-top: env(safe-area-inset-top) !important;
    }

    .chat-input-bar {
      padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }

    #cookie-banner {
      padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ── Application detail — aggressive mobile fix ────────────────────────── */
@media (max-width: 768px) {
  /* Title overflow */
  .page-content h2, .page-content h3 {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Force single column for all detail sections */
  .page-content > div > div[style*="flex:1"],
  .page-content > div > div[style*="flex: 1"] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Info item labels and values */
  .info-item .info-label {
    font-size: 10px !important;
  }
  .info-item .info-value {
    font-size: 13px !important;
    word-break: break-word !important;
  }

  /* Proposals table — horizontal scroll */
  .table-wrapper, div[style*="overflow-x"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px;
  }

  #proposals-table {
    min-width: 600px !important;
  }

  /* Card sections */
  .card, div[style*="border-radius"][style*="box-shadow"],
  div[style*="background:#fff"][style*="border-radius"],
  div[style*="background: #fff"][style*="border-radius"] {
    padding: 12px !important;
    border-radius: 10px !important;
  }

  /* Buttons in card */
  .card .btn, .card button[class*="btn"] {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

  /* Form controls */
  .form-control, select.form-control {
    font-size: 14px !important;
  }

  /* Toggle switches */
  .toggle-switch {
    transform: scale(0.85);
    transform-origin: left center;
  }

  /* Signing link */
  input[type="url"], input[type="text"][placeholder*="http"] {
    font-size: 12px !important;
  }

  /* Ensure table scrolls within proposals */
  .proposals-section .table-wrapper {
    overflow-x: auto !important;
  }

  /* Status bar compact */
  .app-statusbar {
    margin: 0 -12px 16px !important;
    border-radius: 0 !important;
  }

  /* Breadcrumb compact */
  .breadcrumb {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }

  /* Additional request, signing blocks */
  .dop-block, div[style*="background:var(--bg)"][style*="border-radius"] {
    padding: 10px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   ADDITIONAL MOBILE FIXES (April 2026)
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── 1. Dashboard tables → card view ─────────────────── */
  .card-body table thead { display: none !important; }
  .card-body table tbody { display: flex; flex-direction: column; gap: 8px; }
  .card-body table tbody tr {
    display: flex; flex-wrap: wrap; gap: 4px 10px;
    padding: 10px 12px; background: rgba(248,250,252,.6);
    border-radius: 10px; border: 1px solid rgba(148,163,184,.08);
    border-bottom: none !important;
  }
  .card-body table tbody tr:hover { background: rgba(0,122,255,.03); }
  .card-body table tbody td {
    padding: 2px 0 !important; border: none !important;
    font-size: 12.5px; white-space: normal !important;
  }
  .card-body table tbody td:first-child {
    width: 100%; font-weight: 600; font-size: 13px;
  }
  .card-body table tbody td:empty { display: none; }

  /* ── 2. Client dashboard org card ───────────────────── */
  .card-body > div[style*="display:flex"],
  .card-body > div[style*="display: flex"] {
    flex-direction: column !important; gap: 12px !important;
  }
  .card-body > div[style*="display:flex"] > div[style*="border-left"],
  .card-body > div[style*="display: flex"] > div[style*="border-left"] {
    border-left: none !important; border-top: 1px solid rgba(148,163,184,.12);
    padding-left: 0 !important; padding-top: 12px !important;
  }
  .card-body > div[style*="display:flex"] > div[style*="width:48px"],
  .card-body > div[style*="display: flex"] > div[style*="width:48px"] {
    display: none !important;
  }

  /* ── 3. Applications filters bar ────────────────────── */
  .filters-bar {
    flex-wrap: wrap !important; gap: 8px !important;
  }
  .filters-bar .search-input-wrap {
    flex: 1 1 100% !important; max-width: 100% !important;
  }
  .filters-bar select.form-control {
    flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important;
  }
  .filters-bar .btn {
    flex: 1 1 100% !important; justify-content: center;
  }
  .page-header {
    flex-direction: column !important; align-items: flex-start !important; gap: 8px !important;
  }
  .page-header .btn, .page-header > div {
    width: 100% !important;
  }

  /* ── 4. Proposals table horizontal scroll ───────────── */
  .table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  table[style*="min-width"] { min-width: 600px !important; }

  /* Reject hint tooltip — mobile width */
  .reject-hint::after { max-width: 90vw !important; left: auto !important; right: -10px !important; }

  /* ── 5. Email module mobile tweaks ──────────────────── */
  .email-toolbar-btn { min-width: 36px; min-height: 36px; }
  .email-msg-body { overflow-x: auto !important; max-width: 100vw; }
  .email-msg-body img { max-width: 100% !important; height: auto !important; }
  .email-msg-body table { max-width: 100% !important; }
  .email-compose-form { padding: 12px !important; }
  .email-search-form { max-width: 100% !important; flex: 1; }
  .email-search-input { font-size: 14px !important; }

  /* ── 6. Signing page ────────────────────────────────── */
  .signing-table thead { display: none !important; }
  .signing-table tbody { display: flex; flex-direction: column; gap: 8px; }
  .signing-table tbody tr {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 12px; background: #f8fafc;
    border-radius: 10px; border: 1px solid rgba(148,163,184,.1);
  }
  .signing-table tbody td {
    padding: 2px 0 !important; border: none !important; font-size: 13px;
  }
  .signing-table tbody td:first-child { width: 100%; }
  .signing-table .btn-mass, .signing-table .btn-sign {
    min-height: 40px !important; font-size: 13px !important;
    padding: 8px 16px !important;
  }
  .btn-mass { min-height: 40px !important; font-size: 13px !important; }
  .drop-zone { min-height: 100px !important; padding: 16px !important; }

  /* ── 7. Public signing page ─────────────────────────── */
  .signing-container, .signing-card {
    padding: 16px !important; margin: 8px !important;
    border-radius: 12px !important;
  }
  .signing-doc-item {
    flex-direction: column !important; gap: 8px !important;
  }
  .signing-doc-item .btn {
    width: 100% !important; min-height: 44px !important;
  }

  /* ── 8. Auth / Login pages ──────────────────────────── */
  .login-card {
    padding: 24px 20px !important; max-width: 100% !important;
    border-radius: 16px !important;
  }
  .login-card .form-control {
    min-height: 44px !important; font-size: 16px !important;
  }
  .login-card .btn-primary {
    min-height: 48px !important; font-size: 15px !important;
  }
  .login-logo-icon {
    width: 44px !important; height: 44px !important; font-size: 22px !important;
  }

  /* ── 9. Toast notifications ─────────────────────────── */
  #crm-toast-container {
    right: 12px !important; left: 12px !important;
    top: 12px !important; transform: none !important;
  }
  .crm-toast {
    max-width: 100% !important; min-width: 0 !important;
  }

  /* ── 10. Modals ─────────────────────────────────────── */
  .modal {
    max-width: calc(100vw - 24px) !important;
    max-height: 90vh !important; margin: 12px !important;
  }
  .modal-body { padding: 16px !important; }
  .modal-header { padding: 16px !important; }
  .modal-footer { padding: 12px 16px !important; }

  /* ── 11. Stats grid compact ─────────────────────────── */
  .stats-grid {
    grid-template-columns: 1fr 1fr !important; gap: 8px !important;
  }
  .stat-card { padding: 12px !important; gap: 10px !important; }
  .stat-icon { width: 36px !important; height: 36px !important; font-size: 18px !important; }
  .stat-value { font-size: 20px !important; }
  .stat-label { font-size: 11px !important; }

  /* ── 12. Topbar compact ─────────────────────────────── */
  .topbar { padding: 0 12px !important; }
  .topbar-title { font-size: 15px !important; }
  .topbar-actions { gap: 4px !important; }

  /* ── 13. Notification panel ─────────────────────────── */
  .notif-panel { width: 100vw !important; max-width: 100vw !important; }
  .notif-item { padding: 12px 16px !important; }

  /* ── 14. Client app status bar ──────────────────────── */
  .app-status-bar {
    overflow-x: auto !important; flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch; padding-bottom: 4px;
  }
  .app-status-step .step-label { font-size: 10px !important; white-space: nowrap; }

  /* ── 15. Manager clients page ───────────────────────── */
  .client-card, .org-card {
    flex-direction: column !important;
  }

  /* ── 16. General typography mobile ──────────────────── */
  .card-title { font-size: 13px !important; }
  .card-header { padding: 12px 14px !important; }
  .card-body { padding: 14px !important; }

  /* ── 17. Chat layout full height ────────────────────── */
  .chat-sidebar { display: none !important; }
  .chat-window { width: 100% !important; }
  .chat-window-header { padding: 10px 12px !important; }
  .chat-input-bar { padding: 10px 12px !important; }
}

/* ── Extra small phones (≤ 480px) ─────────────────────── */
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr !important; }
  .stat-card { flex-direction: row !important; }

  .filters-bar select.form-control { flex: 1 1 100% !important; }

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

  .card-body table tbody td { font-size: 12px; }

  .email-filter-tabs { font-size: 10px !important; }
  .email-filter-tab { padding: 6px 8px !important; font-size: 10px !important; }

  /* ── 18. Admin tables — card view ──────────────────────── */
  .styled-app-table { min-width: 0 !important; table-layout: auto !important; }
  .styled-app-table thead { display: none !important; }
  .styled-app-table tbody tr {
    display: flex !important; flex-wrap: wrap !important;
    gap: 4px 12px; padding: 12px !important;
    border-bottom: 1px solid var(--gray-light);
    align-items: center;
  }
  .styled-app-table tbody td {
    display: block !important; border: none !important;
    padding: 0 !important; position: static !important;
    box-shadow: none !important; min-width: 0 !important; width: auto !important;
  }
  .styled-app-table tbody td:first-child {
    width: 100% !important; flex-basis: 100%;
    font-size: 14px !important; font-weight: 600;
  }
  .styled-app-table tbody td:last-child {
    display: none !important;
  }

  /* ── 19. Tasks page ────────────────────────────────────── */
  .tasks-tabs {
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }
  .tasks-tab {
    padding: 8px 14px !important; font-size: 12px !important;
    white-space: nowrap; flex-shrink: 0;
  }
  .sort-bar { flex-wrap: wrap !important; gap: 6px !important; }
  .sort-btn { font-size: 12px !important; padding: 5px 10px !important; }
  .task-card { padding: 12px 14px !important; }
  .task-card-header {
    flex-wrap: wrap !important; gap: 8px !important;
  }
  .filter-bar-inline {
    flex-wrap: wrap !important; gap: 8px !important;
  }

  /* ── 20. Documents form ────────────────────────────────── */
  .doc-form {
    grid-template-columns: 1fr !important;
  }
  .doc-form .full {
    grid-column: span 1 !important;
  }
  .doc-actions {
    grid-column: span 1 !important;
    flex-wrap: wrap !important;
  }
  .doc-card { padding: 16px !important; }
  .doc-btn { padding: 8px 14px !important; font-size: 13px !important; }

  /* ── 21. Analytics grid ────────────────────────────────── */
  .analytics-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* ── 22. Admin grid-2 → single column ──────────────────── */
  .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── 23. Client detail — fixed widths ──────────────────── */
  .client-tabs, .detail-tabs {
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }
  .client-tabs > *, .detail-tabs > * {
    white-space: nowrap; flex-shrink: 0;
  }

  /* ── 24. Manager support page ──────────────────────────── */
  .support-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── 25. Application detail — inline flex containers ───── */
  div[style*="display:flex"][style*="gap:20px"],
  div[style*="display: flex"][style*="gap: 20px"] {
    gap: 12px !important;
  }

  /* ── 26. Inline tables with max-content → scrollable ──── */
  table[style*="width:max-content"],
  table[style*="width: max-content"] {
    width: 100% !important;
    min-width: 600px !important;
  }

  /* ── 27. Progress bars inline fixed width ──────────────── */
  div[style*="width:120px"][style*="height:6px"] {
    width: 80px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   SMALL PHONE ADDITIONS — max-width: 480px
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .analytics-grid {
    grid-template-columns: 1fr !important;
  }

  .tasks-tab {
    padding: 6px 10px !important; font-size: 11px !important;
  }

  .doc-btn { width: 100% !important; justify-content: center; }

  /* Email list — stack sender & subject */
  .email-from { width: 100% !important; min-width: 0 !important; font-weight: 600; }
  .email-subject-text { font-size: 12px !important; }
  .email-date { font-size: 10px !important; }
  .email-row { flex-wrap: wrap !important; gap: 2px !important; }

  /* Compose form — stack label above input */
  .compose-field-row {
    flex-direction: column !important; gap: 2px !important;
  }
  .compose-label {
    min-width: 0 !important; font-size: 11px !important;
  }

  /* Email toolbar compact */
  .email-toolbar { flex-wrap: wrap !important; gap: 4px !important; }
  .email-toolbar-btn { min-width: 32px !important; min-height: 32px !important; padding: 4px !important; }
  .email-toolbar-btn span { display: none !important; }

  /* Email search full width */
  .email-search-form { flex: 1 !important; max-width: 100% !important; }
  .email-search-input { width: 100% !important; font-size: 14px !important; }

  /* Message view compact */
  .email-sender-row { flex-wrap: wrap !important; gap: 4px !important; }
  .email-sender-date { font-size: 11px !important; }
  .email-message-subject { font-size: 15px !important; }

  /* Attachment cards */
  .email-attachments-list { grid-template-columns: 1fr !important; }
  .email-attachment-card { min-width: 0 !important; }
}


/* ═══════════════════════════════════════════════════════════
   COMPREHENSIVE SMARTPHONE OPTIMIZATION (April 2026)
   Covers all CRM pages: admin, manager, client, auth, etc.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── GLOBAL: All inline flex two-column layouts → stack ─── */
  .page-content > div[style*="display:flex"],
  .page-content > div[style*="display: flex"] {
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Nested flex containers in page content → also stack */
  .page-content > div[style*="display:flex"] > div[style*="flex:1"],
  .page-content > div[style*="display: flex"] > div[style*="flex: 1"],
  .page-content > div[style*="display:flex"] > div[style*="flex:"],
  .page-content > div[style*="display: flex"] > div[style*="flex:"] {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  /* Cards with max-height (e.g., manager/observers/history cards) → auto height */
  .page-content .card[style*="max-height"] {
    max-height: none !important;
  }

  /* ── GLOBAL: All modals fit mobile viewport ──────────────── */
  .modal,
  div[class*="modal"][style*="max-width"],
  .lbg-modal,
  .lbg-modal--xl,
  .lbg-modal--md {
    max-width: calc(100vw - 24px) !important;
    width: calc(100vw - 24px) !important;
    margin: 12px auto !important;
  }

  /* Modal body scrollable */
  .modal-body,
  .lbg-modal-body {
    max-height: 60vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── GLOBAL: Form rows → single column on mobile ─────────── */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .form-row,
  .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── GLOBAL: All tables → horizontal scroll ──────────────── */
  .table-wrapper,
  div[style*="overflow-x:auto"],
  div[style*="overflow-x: auto"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
  }

  /* ── GLOBAL: Inline toggle groups → wrap on mobile ────────── */
  div[style*="display:flex"][style*="gap:20px"] > label[style*="display:flex"][style*="cursor:pointer"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Toggle row containers → wrap */
  div[style*="display:flex"][style*="gap:20px"]:has(> label .toggle-switch) {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* ── APPLICATION DETAIL: Main two-column layout → stack ───── */
  div[style*="display:flex"][style*="gap:20px"][style*="align-items:stretch"],
  div[style*="display:flex"][style*="gap:20px"][style*="align-items:flex-start"] {
    flex-direction: column !important;
    gap: 12px !important;
  }

  div[style*="display:flex"][style*="gap:20px"][style*="align-items:stretch"] > div[style*="flex:1"],
  div[style*="display:flex"][style*="gap:20px"][style*="align-items:flex-start"] > div[style*="flex:1"] {
    width: 100% !important;
    flex: none !important;
    min-width: 0 !important;
  }

  /* Right sidebar (300px fixed width) → full width */
  div[style*="display:flex"][style*="gap:20px"] > div[style*="width:300px"],
  div[style*="display:flex"][style*="gap:20px"] > div[style*="width: 300px"],
  div[style*="display:flex"][style*="gap:20px"] > div[style*="min-width:300px"],
  div[style*="display:flex"][style*="gap:20px"] > div[style*="min-width: 300px"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* ── APPLICATION DETAIL: Card header actions → wrap ────────── */
  .card-header > div[style*="display:flex"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .card-header .btn {
    font-size: 11px !important;
    padding: 5px 10px !important;
    white-space: nowrap;
  }

  /* Action wrap dropdown triggers */
  .action-wrap .btn {
    font-size: 11px !important;
    padding: 5px 8px !important;
  }

  /* ── APPLICATION DETAIL: Preferred bank block ─────────────── */
  div[style*="linear-gradient(135deg,#f0fdf4"] {
    padding: 8px 12px !important;
    font-size: 12px !important;
    flex-wrap: wrap !important;
  }

  /* ── APPLICATION DETAIL: Proposals table → scrollable ─────── */
  #proposals-table {
    min-width: 700px !important;
  }

  /* ── APPLICATION DETAIL: Signing link & purchase link ─────── */
  .info-value a[href*="zakupki.gov"],
  .info-value a[href*="http"],
  .info-item a {
    word-break: break-all !important;
    font-size: 12px !important;
  }

  /* ── APPLICATION DETAIL: Status change confirmation ────────── */
  div[style*="display:flex"][style*="justify-content:flex-end"][style*="gap:8px"] {
    flex-wrap: wrap !important;
  }

  /* ── APPLICATION DETAIL: Manager/Observer cards → full width ── */
  div[style*="display:flex"][style*="gap:20px"] > .card[style*="flex:1"] {
    flex: none !important;
    width: 100% !important;
  }

  /* ── CLIENT DASHBOARD: Org card → stack ──────────────────── */
  .card-body[style*="display:flex"][style*="gap:20px"] {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* Org icon → hide on mobile */
  .card-body > div[style*="width:48px"][style*="height:48px"] {
    display: none !important;
  }

  /* Manager info border-left → border-top */
  .card-body > div[style*="border-left"] {
    border-left: none !important;
    border-top: 1px solid #e2e8f0 !important;
    padding-left: 0 !important;
    padding-top: 12px !important;
    width: 100% !important;
  }

  /* Stats right-aligned block → left-aligned */
  .card-body > div[style*="text-align:right"] {
    text-align: left !important;
    width: 100% !important;
  }

  /* ── CLIENT DASHBOARD: Applications table ────────────────── */
  .card-body .table-wrapper table thead {
    display: none !important;
  }

  .card-body .table-wrapper table tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 10px;
    padding: 12px !important;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
  }

  .card-body .table-wrapper table tbody td {
    border: none !important;
    padding: 2px 0 !important;
  }

  .card-body .table-wrapper table tbody td:first-child {
    width: 100% !important;
    font-weight: 600;
    font-size: 13px;
  }

  /* Hide less important columns on mobile */
  .card-body .table-wrapper table tbody td:nth-child(5),
  .card-body .table-wrapper table tbody td:nth-child(6) {
    display: none !important;
  }

  /* Action buttons in table → stack */
  .card-body .table-wrapper table tbody td div[style*="display:flex"][style*="gap:6px"] {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }

  /* ── CLIENT APP FORM: form grid → single column ────────────── */
  .form-grid,
  div[style*="display:grid"][style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* ── CLIENT HELP: method cards, docs grid ──────────────────── */
  .method-cards,
  .docs-subsection {
    grid-template-columns: 1fr !important;
  }

  .help-page {
    max-width: 100% !important;
  }

  /* ── MANAGER CLIENTS: Table → cards ────────────────────────── */
  .table-wrapper table:not(#apps-table):not(#proposals-table) thead {
    display: none !important;
  }

  .table-wrapper table:not(#apps-table):not(#proposals-table) tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 10px;
    padding: 12px !important;
    border-bottom: 1px solid #e2e8f0;
  }

  .table-wrapper table:not(#apps-table):not(#proposals-table) tbody td {
    border: none !important;
    padding: 2px 0 !important;
    font-size: 12.5px;
  }

  .table-wrapper table:not(#apps-table):not(#proposals-table) tbody td:first-child {
    width: 100% !important;
    font-weight: 600;
    font-size: 13px;
  }

  /* Hide less important table columns on mobile */
  .table-wrapper table:not(#apps-table):not(#proposals-table) tbody td:nth-child(n+4):not(:last-child) {
    display: none !important;
  }

  /* Action column button */
  .table-wrapper table:not(#apps-table):not(#proposals-table) tbody td:last-child {
    width: 100% !important;
    margin-top: 4px;
  }

  /* ── MANAGER CLIENT DETAIL: grid-2 → single column ─────────── */
  .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Password box → wrap */
  .password-box div[style*="display:flex"] {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* ── MANAGER CLIENT DETAIL: Info grid compact ──────────────── */
  .info-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .info-grid .info-item {
    grid-column: span 1 !important;
  }

  .info-item span {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* ── MANAGER APPLICATIONS: Filters → stack ─────────────────── */
  .filters-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .filters-bar .search-input-wrap {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }

  .filters-bar select.form-control {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
  }

  .filters-bar .btn {
    flex: 0 1 auto;
  }

  /* Column filter headers */
  th[style*="width:300px"],
  th[style*="max-width:300px"] {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  /* ── ADMIN DASHBOARD: Same as manager ──────────────────────── */

  /* ── ADMIN BANKS/AGGREGATORS: Table columns ────────────────── */
  th[style*="width:300px"] {
    width: auto !important;
  }

  /* Search inputs in admin pages */
  .search-banks,
  .search-agg {
    max-width: 100% !important;
  }

  /* ── ADMIN USERS: Modal fits screen ────────────────────────── */

  /* ── AUTH PAGES: Login card ──────────────────────────────────── */
  .login-card,
  div[style*="max-width:420px"][style*="border-radius"] {
    max-width: calc(100vw - 32px) !important;
    margin: 16px auto !important;
  }

  /* 2FA pages */
  div[style*="max-width: 420px"],
  div[style*="max-width:420px"],
  div[style*="max-width: 440px"],
  div[style*="max-width:440px"] {
    max-width: calc(100vw - 32px) !important;
  }

  /* ── SIGNING PAGES ──────────────────────────────────────────── */
  .signing-container,
  .signing-card,
  div.card[style*="max-width:620px"] {
    max-width: calc(100vw - 24px) !important;
    padding: 16px !important;
    margin: 8px auto !important;
  }

  /* Public signing modal */
  div[style*="max-width:520px"][style*="border-radius:16px"] {
    max-width: calc(100vw - 24px) !important;
    padding: 20px !important;
  }

  /* ── PROFILE MODAL: Full width on mobile (off-screen when closed) ─ */
  .profile-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    right: -100vw !important;
  }
  .profile-modal.open {
    right: 0 !important;
  }

  .profile-modal .modal {
    max-width: 100% !important;
  }

  /* ── NOTIFICATION PANEL: Full width ─────────────────────────── */
  .notif-panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .notif-panel-actions {
    padding-left: 12px !important;
    padding-right: 12px !important;
    flex-wrap: wrap !important;
    justify-content: stretch !important;
  }

  .notif-panel-actions .btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .notif-tabs-strip {
    gap: 3px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .notif-tab-btn {
    font-size: 9px !important;
    padding: 2px 3px !important;
    min-height: 24px !important;
    max-height: 28px !important;
  }

  .notif-tab-unread {
    font-size: 8px !important;
    min-width: 14px !important;
    height: 14px !important;
  }

  /* ── COOKIE BANNER: Stack on mobile ─────────────────────────── */
  #cookie-banner > div {
    flex-direction: column !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
  }

  /* ── TOPBAR: Push notifications text → hide ─────────────────── */
  .topbar-push-bell span {
    display: none !important;
  }

  .topbar-push-bell {
    width: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  /* ── CHAT WIDGET: Already full-screen via existing rules ──── */

  /* ── BREADCRUMB: Truncate on mobile ─────────────────────────── */
  .breadcrumb {
    font-size: 12px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  /* ── REJECT HINT TOOLTIP: Fix position on mobile ──────────── */
  .reject-hint::after {
    max-width: calc(100vw - 40px) !important;
    left: auto !important;
    right: -8px !important;
    transform: none !important;
  }

  /* ── APPLICATION STATUS BAR: Scrollable compact ────────────── */
  .app-statusbar {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  .statusbar-step {
    font-size: 10px !important;
    height: 32px !important;
    padding: 0 6px !important;
    min-width: 60px !important;
  }

  /* ── LANDING/ABOUT PAGE ─────────────────────────────────────── */
  .hero-content {
    max-width: 100% !important;
    padding: 0 16px !important;
  }

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

  .counters {
    gap: 16px !important;
    flex-wrap: wrap !important;
  }

  .hero-stat {
    min-width: 0 !important;
    flex: 1 !important;
    padding: 12px !important;
  }

  /* ── GLOBAL: Image overflow prevention ───────────────────── */
  img {
    max-width: 100%;
    height: auto;
  }

  /* ── GLOBAL: Pre/code blocks → scroll ───────────────────── */
  pre, code {
    max-width: 100%;
    overflow-x: auto;
    word-break: break-word;
  }

  /* ── FNS modal (check counterparty) ─────────────────────── */
  #modal-fns .modal,
  #modal-fns-result .modal {
    max-width: calc(100vw - 24px) !important;
  }

  /* ── LIKEBG modal ───────────────────────────────────────── */
  .lbg-modal {
    max-width: calc(100vw - 16px) !important;
    width: calc(100vw - 16px) !important;
    margin: 8px !important;
  }

  .lbg-modal-body {
    max-height: 55vh !important;
    overflow-y: auto !important;
    padding: 12px !important;
  }

  /* LikeBG form fields → single column */
  .lbg-form-grid,
  .lbg-modal-body div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* ── TIMELINE ITEMS: Compact ─────────────────────────────── */
  .tl-item {
    padding: 8px 0 !important;
    gap: 8px !important;
  }

  .tl-item .tl-text {
    font-size: 12px !important;
  }

  /* ── AR (Additional Request) history ─────────────────────── */
  .ar-history-item {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }

  /* ── GLOBAL: Horizontal overflow prevention ──────────────── */
  body, html {
    overflow-x: hidden !important;
  }

  .main-content {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .page-content {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* ── GLOBAL: Badge wrap ──────────────────────────────────── */
  .badge {
    font-size: 10px !important;
    padding: 2px 8px !important;
    white-space: nowrap;
  }

  /* ── GLOBAL: Copy buttons → ensure touchable ─────────────── */
  .copy-btn,
  .edit-field-btn {
    min-width: 28px !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── GLOBAL: Text truncation helpers ──────────────────────── */
  .td-muted[style*="max-width:250px"] {
    max-width: 150px !important;
  }

  /* ── MOBILE MODALS: прокручиваемый оверлей, safe-area, без обрезания снизу ─ */
  .modal-overlay.open {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .modal-overlay.open .modal {
    margin: 0 auto !important;
    flex-shrink: 0 !important;
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: min(520px, calc(100vw - 24px)) !important;
    max-height: min(90vh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)) !important;
    min-height: 0 !important;
  }

  .modal-overlay.open .modal-body {
    min-height: 0 !important;
  }

  /* LikeBG: отдельный оверлей (часто вместе с .modal-overlay) */
  .lbg-modal-overlay.open {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .lbg-modal-overlay.open .lbg-modal {
    width: min(100%, calc(100vw - 20px)) !important;
    max-width: 520px !important;
    max-height: min(90vh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)) !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
  }

  /* Панель уведомлений: при ширине 100vw уезжает целиком за экран */
  .notif-panel:not(.open) {
    right: -100vw !important;
  }
  .notif-panel.open {
    right: 0 !important;
  }
  .notif-panel {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    box-sizing: border-box !important;
  }

  /* Профиль: высота с учётом мобильного UI и выреза */
  .profile-modal {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    box-sizing: border-box !important;
  }

  /* WS-модалки (inline align-items:center перебиваем) */
  #crm-newclient-modal-overlay,
  #crm-callback-modal-overlay {
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box !important;
  }

  .email-modal-overlay.show {
    align-items: flex-start !important;
    justify-content: center !important;
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .email-modal-overlay.show .email-modal {
    width: min(100%, calc(100vw - 24px)) !important;
    max-width: min(420px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-height: min(90vh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px)) !important;
    overflow-y: auto !important;
    flex-shrink: 0 !important;
  }
}

/* ── EXTRA SMALL PHONES: Additional fixes ──────────────────── */
@media (max-width: 480px) {

  /* Status bar even more compact */
  .statusbar-step {
    font-size: 9px !important;
    min-width: 50px !important;
    height: 30px !important;
    padding: 0 4px !important;
  }

  /* Card header → stack buttons vertically */
  .card-header > div[style*="display:flex"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    width: 100%;
  }

  .card-header > div[style*="display:flex"] .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Preferred bank block: smaller */
  div[style*="linear-gradient(135deg,#f0fdf4"] {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  /* Application edit form toggles → column */
  div[style*="display:flex"][style*="gap:20px"]:has(.toggle-switch) {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Modal buttons → stack */
  .modal-footer {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .modal-footer .btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Info item values → smaller font */
  .info-value,
  .info-item span:not(label) {
    font-size: 12px !important;
  }

  /* Manager select in card → full width */
  .card-body select.form-control {
    width: 100% !important;
  }

  /* Two-column inline grids → single */
  div[style*="display:grid"][style*="1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}