/* ============================================================================
   MOBILE ADAPTATION — KrakenOS Admin (2026-07-29)
   Фаза 1: адаптация модулей для мобильных устройств (≤768px, ≤480px)
   Влито из пакета КК krakenos-mobile-fix-2026-07-29 (2026-07-30, agent-15);
   внизу — добавка semifab_typecase: dropdown'ы _ss/_sf поверх модалки.
   ============================================================================ */

/* --------------------------------------------------------------------------
   Базовые мобильные настройки
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --sidebar-width: 0px;
    --space-section: var(--space-4);
  }

  body {
    font-size: 14px;
  }

  /* --- Главный layout --- */
  .main-content {
    margin-left: 0 !important;
    padding-top: 56px; /* под мобильный хедер */
  }

  .content-body {
    padding: var(--space-3);
  }

  .content-header {
    padding: var(--space-3);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .content-header h1 {
    font-size: 1.25rem;
  }

  /* --- Мобильный хедер (фиксированный) --- */
  .mobile-header {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-color);
    align-items: center;
    padding: 0 var(--space-3);
    z-index: var(--z-sidebar);
    gap: var(--space-2);
  }

  .mobile-header .menu-toggle {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 20px;
    cursor: pointer;
  }

  .mobile-header .header-title {
    flex: 1;
    font-weight: var(--font-weight-semibold);
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* --- Таблицы — горизонтальный скролл --- */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--space-3));
    padding: 0 var(--space-3);
  }

  .table-responsive table {
    min-width: 600px;
    font-size: 13px;
  }

  .table-responsive th,
  .table-responsive td {
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
  }

  /* --- Фильтры и поиск --- */
  .filter-bar {
    flex-direction: column;
    gap: var(--space-2);
  }

  .filter-bar .form-group {
    width: 100% !important;
    min-width: auto !important;
  }

  .filter-bar input,
  .filter-bar select {
    width: 100%;
  }

  /* --- Кнопки действий --- */
  .header-actions {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .header-actions .btn {
    flex: 1;
    min-width: 120px;
    justify-content: center;
  }

  /* --- Карточки --- */
  .card-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .card {
    padding: var(--space-4);
  }

  /* --- Формы --- */
  .form-row {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .form-group {
    min-width: auto !important;
  }

  /* --- Модальные окна --- */
  .modal-overlay .modal {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
  }

  .modal-header {
    padding: var(--space-3);
  }

  .modal-body {
    padding: var(--space-3);
    overflow-y: auto;
  }

  .modal-footer {
    padding: var(--space-3);
    flex-direction: column;
    gap: var(--space-2);
  }

  .modal-footer .btn {
    width: 100%;
  }

  /* --- Searchable dropdown (модули накладных, ПФ, техкарт) --- */
  .searchable-select {
    min-width: auto !important;
    width: 100%;
  }

  .searchable-dropdown {
    max-height: 240px;
    z-index: 200;
  }

  /* --- Invoice items (накладные) --- */
  .invoice-item {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .invoice-item .form-group {
    width: 100% !important;
  }

  /* --- Recipe / Semifab item rows --- */
  .recipe-item-row,
  .sf-item-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .recipe-item-row .form-group,
  .sf-item-row .form-group {
    width: 100% !important;
    min-width: auto !important;
  }

  .recipe-item-row input,
  .sf-item-row input,
  .recipe-item-row select,
  .sf-item-row select {
    width: 100%;
  }

  /* --- Tabs --- */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }

  .tab-btn {
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
    font-size: 13px;
  }

  /* --- Stats / Dashboard cards --- */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  /* --- Pagination --- */
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1);
  }

  /* --- Toast notifications --- */
  .toast-container {
    left: var(--space-3);
    right: var(--space-3);
    top: 64px;
  }

  .toast {
    max-width: 100%;
  }

  /* --- Detail view --- */
  .detail-grid {
    grid-template-columns: 1fr;
  }

  /* --- Toolbar --- */
  .toolbar {
    flex-direction: column;
    gap: var(--space-2);
  }

  .toolbar .search-box {
    width: 100%;
  }

  .toolbar .search-box input {
    width: 100%;
  }

  /* ------------------------------------------------------------------------
     Dropdown'ы _ss/_sf В МОДАЛКЕ (2026-07-30, semifab_typecase):
     при создании позиций (техкарта/ПФ/производство) выпадающий список
     обрезался строкой и уходил под модалку. Поверх модалки (z-modal=200),
     высота ≤40vh, собственный скролл; строка и select не клипают.
     Десктоп НЕ затронут (правила только в этом media-блоке).
     ------------------------------------------------------------------------ */
  .modal-overlay .searchable-select,
  .modal .searchable-select {
    overflow: visible;
  }

  .modal-overlay .searchable-dropdown,
  .modal .searchable-dropdown {
    z-index: 230; /* var(--z-modal)=200 + запас: поверх шапки/футера модалки */
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-overlay .sf-item-row,
  .modal-overlay .recipe-item-row,
  .modal .sf-item-row,
  .modal .recipe-item-row {
    overflow: visible;
  }
}

/* --------------------------------------------------------------------------
   Очень маленькие экраны (≤480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .content-header h1 {
    font-size: 1.1rem;
  }

  .card {
    padding: var(--space-3);
  }

  .table-responsive table {
    min-width: 500px;
    font-size: 12px;
  }

  .btn {
    padding: var(--space-2) var(--space-4);
    font-size: 13px;
  }

  /* --- Упрощённый sidebar (иконки без текста если можно) --- */
  .sidebar.open {
    width: 260px;
  }

  /* --- Модалка — полный экран --- */
  .modal-overlay .modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Touch-friendly overrides
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .tab-btn,
  .sidebar-menu-item,
  .ss-item,
  .page-btn {
    min-height: 44px;
  }

  input,
  select,
  textarea {
    font-size: 16px !important; /* предотвращает zoom на iOS */
  }

  .searchable-input {
    min-height: 44px;
  }
}