/* CRM 2.4.6 — system-wide mobile UX layer
   Goal: every base.html screen behaves like a mobile app instead of a squeezed desktop page.
   Sales keeps its dedicated v2.4.4 mobile layouts; this file normalizes the rest of CRM. */

@media (max-width: 800px) {
  html { width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
  body { width: 100%; overflow-x: hidden; background: #f3f6fb; }
  main { padding: 12px 0 calc(82px + env(safe-area-inset-bottom)); }
  main > .wrap { width: 100%; max-width: none; padding-left: 10px; padding-right: 10px; }
  main img, main video, main canvas { max-width: 100%; height: auto; }
  main svg { max-width: 100%; }

  /* Global header: compact first row, search gets a calm full-width second row. */
  .app-topbar { padding: 7px 10px 8px; row-gap: 7px; }
  .app-brand { font-size: 18px; }
  .app-system-actions { gap: 5px; }
  .app-global-search { height: 36px; border-radius: 10px; }
  .app-global-search input { font-size: 16px; }
  .app-icon-action,
  .background-job-indicator.app-icon-action,
  .notification-bell.app-icon-action { width: 34px; height: 34px; border-radius: 9px; }
  .app-vat-toggle { height: 34px; }

  /* Page chrome */
  .pagehead,
  .ss-head,
  .audit-hero,
  .import-pagehead { gap: 10px; margin-top: 2px; margin-bottom: 13px; }
  .pagehead h1, .hero h1, .audit-hero h1, .import-title-block h1 {
    font-size: clamp(25px, 7vw, 31px);
    letter-spacing: -.025em;
    overflow-wrap: anywhere;
  }
  .pagehead p, .hero p { font-size: 12px; line-height: 1.45; }
  .eyebrow { font-size: 10px; letter-spacing: .07em; }
  .section { margin-top: 14px; }
  .section > h2 { font-size: 18px; margin-bottom: 9px; }
  .card, .org-card, .ss-card, .ce-card, .ci-card, .sd-card {
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(20, 38, 70, .045);
  }
  .card { padding: 13px; }

  /* Actions become thumb-friendly, without making every toolbar absurdly tall. */
  .actions,
  .formactions,
  .org-card-actions,
  .enrichment-actions,
  .import-page-actions,
  .ss-inline-actions,
  .ce-form-actions {
    gap: 7px;
  }
  .pagehead > .actions,
  .audit-hero > .actions,
  .import-page-actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagehead > .actions > *,
  .audit-hero > .actions > *,
  .import-page-actions > * { min-width: 0; }
  .btn { min-height: 42px; padding: 9px 12px; border-radius: 10px; line-height: 1.15; }
  .btn.small { min-height: 36px; padding: 7px 10px; }

  /* Forms: no zoom-on-focus in iOS and no desktop multi-column squeeze. */
  main input:not([type="checkbox"]):not([type="radio"]),
  main select,
  main textarea { max-width: 100%; font-size: 16px !important; }
  .formcard { max-width: none; }
  .formgrid,
  .details,
  .service-story,
  .notification-layout,
  .audit-detail-grid,
  .two-table-grid,
  .org-overview-grid,
  .warehouse-form-layout,
  .snap-two-col,
  .snap-config-pair,
  .analysis-modal-grid { grid-template-columns: 1fr !important; }
  .field.full { grid-column: auto; }
  .wide { grid-column: 1 / -1; }
  .field label { margin-bottom: 4px; }
  .field .help { line-height: 1.35; }
  .formactions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Filter/search bars */
  .searchbar,
  .catalog-search-row,
  .bom-toolbar,
  .bom-search { align-items: stretch; }
  .searchbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .searchbar input { min-width: 0; }
  .service-filters,
  .task-filters,
  .warehouse-filters,
  .audit-filter,
  .sl-filters,
  .pw-filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .service-filters > :first-child,
  .task-filters > :first-child,
  .warehouse-filters > :first-child,
  .audit-filter > :first-child,
  .pw-filter-form > :first-child { grid-column: 1 / -1; }
  .catalog-filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px; }
  .catalog-filter-actions { flex-wrap: wrap; gap: 8px; }
  .catalog-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: end; }
  .catalog-toolbar .catalog-search { min-width: 0; }
  .per-page { margin: 0; }

  /* Common metric grids — preserve useful density on phones. */
  .grid,
  .grid.cols-4,
  .audit-summary,
  .org-metrics,
  .item-crm-kpis,
  .ce-kpi-grid,
  .ci-kpis,
  .cm-kpis,
  .bom-summary-grid,
  .analysis-summary-grid,
  .import-metrics {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  .stat { font-size: clamp(22px, 7vw, 30px); }

  /* Generic grids used by catalog / knowledge / snapshots. */
  .item-spec-grid,
  .crossrefs-grid,
  .family-list,
  .availability-summary,
  .document-grid,
  .applicability-grid,
  .ce-grid-2,
  .ce-grid-4,
  .ce-system-grid,
  .ci-summary,
  .ci-quick-facts,
  .ci-key-params,
  .ci-system-grid,
  .ci-crossrefs,
  .ci-connection-groups,
  .ci-image-gallery,
  .ci-related-list,
  .snap-primary-grid,
  .snap-secondary-grid,
  .snap-source-grid,
  .snap-option-grid,
  .analysis-source-grid,
  .analysis-save-grid,
  .analysis-maint-grid,
  .bom-machine-grid,
  .bom-diff-grid { grid-template-columns: 1fr !important; }

  /* Catalog */
  .catalog-import-strip { grid-template-columns: 1fr !important; gap: 8px; }
  .catalog-import-progress { width: 100%; }
  .catalog-result-bar { align-items: flex-start; flex-direction: column; gap: 3px; }
  .catalog-pagination, .pagination { gap: 7px; }
  .catalog-pagination .btn, .pagination .btn { width: auto; min-width: 42px; }
  .ce-gallery { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
  .ce-image-preview { height: 140px; }
  .ce-doc-grid { grid-template-columns: 1fr; }
  .ci-card, .ce-card { padding: 13px; }


  .catalog-index-head,
  .cm-head,
  .ci-header,
  .ce-topbar,
  .backup-analysis-head,
  .pw-head { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .catalog-index-actions,
  .cm-head-actions,
  .ci-header-actions,
  .ce-topbar > .actions,
  .backup-analysis-head > .actions,
  .pw-head > .actions { width: 100%; }
  .catalog-index-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .catalog-action-menu, .catalog-action-menu > summary { width: 100%; }
  .catalog-action-popover { position: fixed; left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); top: auto; min-width: 0; max-height: 58vh; overflow: auto; }
  .cm-head-actions, .ci-header-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .pw-head { margin-top: 4px !important; padding: 13px !important; border-radius: 14px !important; }
  .pw-context { gap: 5px 10px !important; font-size: 11px !important; }

  /* Organizations */
  .org-hero { margin-top: 4px; gap: 12px; }
  .org-title-row h1 { font-size: clamp(26px, 7vw, 31px); }
  .org-hero-actions { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .org-hero-actions > * { min-width: 0; }
  .org-create-menu, .org-create-menu > summary { width: 100%; }
  .org-create-dropdown { position: fixed; left: 10px; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); top: auto; width: auto; max-height: 60vh; overflow: auto; }
  .org-metric { padding: 11px; min-width: 0; }
  .org-metric strong { font-size: 22px; }
  .org-metric small { margin-top: 5px; font-size: 10px; }
  .org-card { padding: 13px; }
  .org-card-head { gap: 8px; }
  .org-contact-grid { grid-template-columns: 1fr !important; }
  .org-facts, .org-requisites-grid { grid-template-columns: 1fr !important; }
  .org-facts > div, .org-requisites-grid > div { border-right: 0 !important; }
  .org-system-meta-grid { grid-template-columns: 1fr; gap: 1px; }
  .org-system-meta-grid > * { padding: 3px 0; }
  .org-comment-form { align-items: stretch; flex-direction: column; }

  /* Tabs / chip rows: horizontal swipe instead of ugly wrapping. */
  .org-tabs,
  .org-subtabs,
  .item-tabs,
  .ce-tabs,
  .warehouse-tabs,
  .analysis-filter-pills,
  .quicklinks {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .org-tabs::-webkit-scrollbar,
  .org-subtabs::-webkit-scrollbar,
  .item-tabs::-webkit-scrollbar,
  .ce-tabs::-webkit-scrollbar,
  .warehouse-tabs::-webkit-scrollbar,
  .analysis-filter-pills::-webkit-scrollbar,
  .quicklinks::-webkit-scrollbar { display: none; }
  .quicklinks { flex-wrap: nowrap; margin-left: -10px; margin-right: -10px; padding: 0 10px 4px; }
  .quicklinks a { flex: 0 0 auto; min-height: 40px; align-items: center; }

  /* Notifications */
  .notification-layout { gap: 10px; }
  .push-card { position: static; order: -1; }
  .notification-row { padding: 12px 2px; }
  .notification-icon { width: 34px; height: 34px; flex-basis: 34px; }

  /* Import / background jobs */
  .job-banner { grid-template-columns: 1fr !important; gap: 10px; }
  .job-card { align-items: flex-start; }
  .import-overview-card { grid-template-columns: 1fr !important; border-radius: 14px; }
  .import-progress-main { padding: 14px; }
  .import-metrics { border-left: 0; border-top: 1px solid var(--line); }
  .import-metric { min-height: 72px; padding: 13px; }
  .import-percent { font-size: 34px; }
  .import-files-head { gap: 9px; }
  .import-file-search-wrap { width: 100%; }
  .import-file-visible-count { margin-left: 0; }

  /* Audit */
  .audit-kpi { padding: 11px; }
  .audit-kpi strong { font-size: 21px; }
  .audit-meta { grid-template-columns: 1fr; }
  .audit-meta dt { padding-bottom: 0; border-bottom: 0; font-size: 11px; }
  .audit-meta dd { padding-top: 2px; }
  .audit-pagination { gap: 8px; }
  .audit-json { max-height: 50vh; overflow: auto; }

  /* Work / service / warehouse */
  .service-story, .collaboration-grid { gap: 8px; }
  .attachment { gap: 9px; }
  .warehouse-tabs { display: flex !important; grid-template-columns: none !important; }
  .warehouse-tabs > * { flex: 0 0 auto; }
  .status-breakdown { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }

  /* Machine BOM */
  .bom-manual-form { grid-template-columns: 1fr !important; }
  .bom-manual-form .btn { width: 100%; }
  .bom-summary-card { min-width: 0; }

  /* FANUC / backup heavy workspaces: do not cardify matrices, make them intentional swipe surfaces. */
  .pw-shell { grid-template-columns: 1fr !important; }
  .pw-advanced-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .pw-drawer { max-width: 100%; }
  .pw-dl > div { grid-template-columns: 1fr !important; gap: 3px !important; }
  .pw-drawer-values { grid-template-columns: 1fr !important; }
  .fanuc-body { grid-template-columns: 1fr !important; }
  .fanuc-param-block,
  .technical-table,
  .analysis-tablewrap,
  .codebox { -webkit-overflow-scrolling: touch; }

  /* Long text / identifiers never push the viewport. */
  .mono, code, pre, .ss-track, .audit-request-id { overflow-wrap: anywhere; word-break: break-word; }
  .codebox, pre { max-width: 100%; overflow: auto; }

  /* Global mobile table system. JS attaches .mobile-card-table to ordinary list/detail tables. */
  .tablewrap:has(> .mobile-card-table),
  .catalog-table-wrap:has(> .mobile-card-table),
  .org-table-wrap:has(> .mobile-card-table),
  .import-files-table-wrap:has(> .mobile-card-table) {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  table.mobile-card-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  table.mobile-card-table thead { display: none !important; }
  table.mobile-card-table tbody { display: grid !important; gap: 9px; width: 100%; }
  table.mobile-card-table tbody > tr {
    display: block !important;
    width: 100%;
    background: #fff;
    border: 1px solid #dfe6f0;
    border-radius: 14px;
    padding: 3px 11px;
    box-shadow: 0 3px 12px rgba(20,38,70,.04);
    overflow: hidden;
  }
  table.mobile-card-table tbody > tr[hidden],
  table.mobile-card-table tbody > tr.file-search-hidden { display: none !important; }
  table.mobile-card-table td {
    display: grid !important;
    grid-template-columns: minmax(86px, .75fr) minmax(0, 1.35fr);
    gap: 10px;
    width: 100% !important;
    min-width: 0 !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #eef2f7 !important;
    background: transparent !important;
    text-align: right !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    vertical-align: top !important;
  }
  table.mobile-card-table td:last-child { border-bottom: 0 !important; }
  table.mobile-card-table td::before {
    content: attr(data-mobile-label);
    display: block;
    color: #7d899d;
    font-size: 9px;
    line-height: 1.3;
    font-weight: 850;
    letter-spacing: .045em;
    text-transform: uppercase;
    text-align: left;
  }
  table.mobile-card-table td.mobile-primary-cell {
    display: block !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    text-align: left !important;
  }
  table.mobile-card-table td.mobile-primary-cell::before { margin-bottom: 4px; }
  table.mobile-card-table td.mobile-primary-cell a.title,
  table.mobile-card-table td.mobile-primary-cell > strong,
  table.mobile-card-table td.mobile-primary-cell .title {
    font-size: 15px;
    line-height: 1.25;
  }
  table.mobile-card-table td.mobile-actions-cell { align-items: center; }
  table.mobile-card-table td.mobile-actions-cell > * { justify-self: end; }
  table.mobile-card-table td.mobile-table-empty {
    display: block !important;
    text-align: center !important;
    padding: 22px 8px !important;
    color: var(--muted);
  }
  table.mobile-card-table td.mobile-table-empty::before { display: none; }

  /* Tables intentionally kept wide: obvious horizontal swipe, no page overflow. */
  .mobile-scroll-surface {
    max-width: calc(100vw - 20px);
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
  }
  table.mobile-scroll-table { min-width: max(680px, 100%) !important; }
  .mobile-scroll-surface::after {
    content: "← пролистайте таблицу →";
    position: sticky;
    left: 0;
    display: block;
    width: max-content;
    margin: 5px 8px 7px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(244,247,251,.94);
    color: #7d899c;
    font-size: 9px;
    font-weight: 700;
    pointer-events: none;
  }

  /* Dialogs / sheets */
  dialog, .analysis-modal, [role="dialog"] {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 90px) !important;
    overflow: auto;
    border-radius: 16px !important;
  }
}

@media (max-width: 560px) {
  main > .wrap { padding-left: 9px; padding-right: 9px; }
  .pagehead > .actions,
  .audit-hero > .actions,
  .import-page-actions,
  .formactions,
  .org-hero-actions { grid-template-columns: 1fr; }
  .searchbar { grid-template-columns: 1fr; }
  .catalog-index-actions, .cm-head-actions, .ci-header-actions { grid-template-columns: 1fr; }
  .service-filters,
  .task-filters,
  .warehouse-filters,
  .audit-filter,
  .sl-filters,
  .pw-filter-form,
  .catalog-filter-grid { grid-template-columns: 1fr !important; }
  .service-filters > :first-child,
  .task-filters > :first-child,
  .warehouse-filters > :first-child,
  .audit-filter > :first-child,
  .pw-filter-form > :first-child { grid-column: auto; }
  .grid,
  .grid.cols-4,
  .audit-summary,
  .org-metrics,
  .item-crm-kpis,
  .ce-kpi-grid,
  .ci-kpis,
  .cm-kpis,
  .bom-summary-grid,
  .analysis-summary-grid { grid-template-columns: 1fr 1fr !important; }
  .ce-gallery { grid-template-columns: 1fr; }
  .catalog-toolbar { grid-template-columns: 1fr; }
  .per-page { justify-content: space-between; }
  .contact { gap: 7px; }
  .org-identity-line { gap: 4px; }
  .org-source-card { align-items: flex-start; flex-direction: column; }
  .document-row, .designation-row { grid-template-columns: 1fr !important; gap: 4px !important; }
  .status-breakdown { grid-template-columns: 1fr !important; }
  .pw-advanced-grid { grid-template-columns: 1fr !important; }
  table.mobile-card-table td { grid-template-columns: minmax(78px,.7fr) minmax(0,1.3fr); gap: 8px; }
}

@media (max-width: 380px) {
  .grid,
  .grid.cols-4,
  .audit-summary,
  .org-metrics,
  .item-crm-kpis,
  .ce-kpi-grid,
  .ci-kpis,
  .cm-kpis,
  .bom-summary-grid,
  .analysis-summary-grid { grid-template-columns: 1fr !important; }
  .mobile-bottom-nav span { font-size: 9px; }
  .mobile-bottom-nav a, .mobile-bottom-nav button { font-size: 17px; }
}

@media (max-width: 800px) {
  .mobile-bottom-nav a.active,
  .mobile-bottom-nav button.active { color: #1f55c7; }
  .mobile-bottom-nav a.active::before,
  .mobile-bottom-nav button.active::before {
    content: "";
    position: absolute;
    top: 1px;
    width: 26px;
    height: 3px;
    border-radius: 999px;
    background: #2f63d4;
  }
  .mobile-card-surface {
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}