/* Unified mobile layer for the contract management system */
html { -webkit-text-size-adjust: 100%; }
img, svg, video, canvas { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; }

@media (max-width: 767px) {
  :root { --mobile-gap: 10px; --mobile-radius: 8px; }
  html, body { width: 100%; min-width: 0 !important; overflow-x: hidden !important; }
  body { min-height: 100dvh; }

  /* Main page containers */
  .container, .esf-container, .full-container, .page-container, .content-container,
  .modal-body, .esf-modal-body, .requisites-modal-body, .esf-content-body {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    padding-left: 10px !important; padding-right: 10px !important;
  }

  /* Header and toolbars */
  .esf-header, .page-header, .modal-header, .esf-modal-header, .requisites-modal-header,
  .editor-header, .table-header, .filters-row, .filters-main-row, .filters-inline,
  .block-header, .section-header, .action-buttons, .detailed-header {
    min-width: 0 !important; flex-wrap: wrap !important; gap: 8px !important;
  }
  .esf-header-content, .header-content { min-width: 0 !important; }
  .esf-logo, .modal-title, .requisites-modal-title, .editor-title, .table-title {
    min-width: 0 !important; overflow-wrap: anywhere !important;
  }

  /* Forms */
  .form-grid, .form-row, .esf-form-row, .esf-payment-layout, .requisites-grid,
  .filters-row, .filters-main-row, .filters-advanced-row, .cards-row,
  .stats-grid, .two-column-layout, .left-panel, .right-panel,
  .esf-grid-2, .esf-grid-3, .esf-grid-4, .esf-grid-5 {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important; min-width: 0 !important; gap: 10px !important;
  }
  .form-group, .esf-form-group, .filter-item, .setting-item,
  .requisites-section, .requisites-row, .esf-field {
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
  }
  input, select, textarea, .form-input, .filter-select, .filter-input, .esf-input, .esf-select {
    width: 100% !important; min-width: 0 !important; font-size: 16px !important;
  }
  textarea { min-height: 88px; }

  /* Modals: full-screen sheet on phones */
  .modal-overlay, .esf-modal-overlay, .requisites-modal-overlay,
  .notification-overlay, .esf-submodal {
    padding: 0 !important; align-items: stretch !important; justify-content: stretch !important;
  }
  .modal-container, .modal-content, .esf-modal-container, .requisites-modal-content,
  .esf-submodal-content, .notification-modal {
    width: 100vw !important; max-width: 100vw !important; min-width: 0 !important;
    height: 100dvh !important; max-height: 100dvh !important;
    margin: 0 !important; border-radius: 0 !important; overflow: hidden !important;
  }
  .modal-body, .esf-modal-body, .requisites-modal-body, .esf-content-body {
    flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important;
    overflow-x: hidden !important; -webkit-overflow-scrolling: touch;
  }
  .modal-footer, .esf-modal-footer, .esf-content-footer, .actions-panel {
    position: sticky !important; bottom: 0 !important; z-index: 30 !important;
    display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 8px !important; width: 100% !important; padding: 10px !important;
    background: #fff !important;
  }
  .modal-footer button, .esf-modal-footer button, .esf-content-footer button, .actions-panel button {
    width: 100% !important; justify-content: center !important; min-height: 42px !important;
  }

  /* Split-screen editors become vertical */
  .esf-main, .main-content, .editor-layout, .content-layout, .commercial-layout {
    height: auto !important; min-height: calc(100dvh - 52px) !important; overflow: visible !important;
  }
  .left-panel, .right-panel, .orgs-block, .docs-block, .editor-panel {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    height: auto !important; max-height: none !important;
  }

  /* Generic responsive tables -> cards. JS adds data-label attributes. */
  .mobile-card-table { width: 100% !important; min-width: 0 !important; border: 0 !important; }
  .mobile-card-table thead { display: none !important; }
  .mobile-card-table tbody { display: block !important; width: 100% !important; }
  .mobile-card-table tr:not(.group-row):not(.contract-header-row):not(.attachment-header-row):not(.contract-totals-row) {
    display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important; min-width: 0 !important; height: auto !important;
    margin: 0 0 10px !important; padding: 8px 10px !important;
    background: #fff !important; border: 1px solid #CDD9E1 !important;
    border-radius: var(--mobile-radius) !important; box-shadow: 0 2px 8px rgba(36,88,121,.06) !important;
  }
  .mobile-card-table td {
    display: grid !important; grid-template-columns: minmax(92px, 38%) minmax(0, 62%) !important;
    align-items: start !important; gap: 8px !important;
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    height: auto !important; min-height: 32px !important; padding: 6px 0 !important;
    border: 0 !important; border-bottom: 1px solid #E4EBF0 !important;
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
    text-align: left !important; overflow-wrap: anywhere !important;
  }
  .mobile-card-table td:last-child { border-bottom: 0 !important; }
  .mobile-card-table td::before {
    content: attr(data-mobile-label); color: #687C8B; font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .25px; line-height: 1.3;
  }
  .mobile-card-table td[data-mobile-label=""], .mobile-card-table td[colspan] {
    grid-template-columns: minmax(0,1fr) !important;
  }
  .mobile-card-table td[data-mobile-label=""]::before, .mobile-card-table td[colspan]::before { display:none !important; }
  .mobile-card-table .group-row, .mobile-card-table .contract-header-row,
  .mobile-card-table .attachment-header-row, .mobile-card-table .contract-totals-row {
    display: block !important; width: 100% !important; height: auto !important;
    margin: 10px 0 6px !important;
  }
  .mobile-card-table .group-row td, .mobile-card-table .contract-header-row td,
  .mobile-card-table .attachment-header-row td, .mobile-card-table .contract-totals-row td {
    display: block !important; width: 100% !important; padding: 9px 10px !important;
  }

  .table-wrapper, .detailed-table-wrapper, .esf-table-wrapper, .table-container,
  .table-fixed-body, .table-responsive {
    width: 100% !important; min-width: 0 !important; max-width: 100% !important;
    height: auto !important; max-height: none !important; overflow: visible !important;
  }

  /* Buttons and touch targets */
  button, .btn, .esf-btn, .filter-btn, .header-link, .text-action,
  .back-button, .requisites-btn { min-height: 40px; touch-action: manipulation; }
  .icon-btn, .esf-icon-btn, .modal-close, .esf-modal-close, .requisites-close-btn {
    min-width: 40px !important; min-height: 40px !important;
  }

  /* Dropdowns and floating menus */
  .dropdown-menu, .export-menu, .esf-context-menu {
    position: fixed !important; left: 8px !important; right: 8px !important; bottom: 8px !important;
    top: auto !important; width: auto !important; max-width: none !important;
    max-height: 70dvh !important; overflow-y: auto !important;
  }

  /* Long values */
  .requisites-value, .org-name, .doc-title, .item-name, .spec-item-name,
  .contract-info-value, .esf-readonly { overflow-wrap: anywhere !important; word-break: break-word !important; }

  /* Toasts */
  .app-toast, .toast, .notification-toast {
    left: 10px !important; right: 10px !important; bottom: 10px !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .form-grid, .stats-grid, .cards-row, .requisites-grid,
  .esf-grid-3, .esf-grid-4, .esf-grid-5 {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
  .modal-container, .modal-content, .esf-modal-container, .requisites-modal-content {
    width: min(94vw, 1100px) !important; max-width: 94vw !important;
  }
}