/**
 * Адаптивные стили для мобильных телефонов и планшетов (Mobile & Tablet Responsive)
 * Разработано для идеального отображения на iPhone, Android, iPad и любых экранах (320px - 1440px)
 */

/* ==========================================================================
   1. БОЛЬШИЕ ПЛАНШЕТЫ И НОУТБУКИ (max-width: 1200px)
   ========================================================================== */
@media (max-width: 1200px) {
  .app-main-content {
    max-width: 100%;
    padding: 0 16px 60px 16px;
  }

  .nav-item-btn {
    padding: 8px 4px;
    font-size: 0.82rem;
    gap: 4px;
  }

  .kpi-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .fines-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .analytics-charts-grid {
    grid-template-columns: 1fr;
  }

  .templates-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   2. СРЕДНИЕ ПЛАНШЕТЫ И ЭКРАНЫ ДО 900px (max-width: 900px)
   ========================================================================== */
@media (max-width: 900px) {
  .header-container {
    gap: 12px;
  }

  /* Сетка навигации в 4 колонки: все таб-кнопки видны */
  .nav-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 6px;
    border-radius: var(--radius-md);
  }

  .nav-item-btn {
    padding: 9px 8px;
    font-size: 0.84rem;
    gap: 6px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
  }
  .nav-item-btn.active {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(228, 0, 43, 0.1);
  }

  /* Переключение карточек выбора типа проверки и решений в 1 колонку, чтобы ничего не вылезало */
  .inspection-type-selector {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .type-card-inner {
    flex-direction: row !important;
    align-items: center !important;
    padding: 14px 16px !important;
    gap: 14px !important;
  }
  .type-info {
    flex: 1;
  }

  .decision-options-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .decision-card-inner {
    flex-direction: row !important;
    align-items: center !important;
    padding: 14px 16px !important;
    gap: 14px !important;
  }

  .form-grid-2col {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .knowledge-subtabs-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .contacts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .kpi-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fines-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .calc-grid {
    grid-template-columns: 1fr;
  }

  .filters-grid {
    grid-template-columns: 1fr 1fr;
  }

  .chain-steps {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .chain-arrow {
    transform: rotate(90deg);
    margin: 4px 0 4px 10px;
  }

  .fines-analytics-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   3. МОБИЛЬНЫЕ ТЕЛЕФОНЫ И СМАРТФОНЫ (max-width: 640px)
   ========================================================================== */
@media (max-width: 640px) {
  /* Предотвращение зума на iOS Safari при фокусе на input/select */
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="url"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Верхний хедер */
  .app-header {
    padding: 8px 12px;
  }

  .header-container {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .brand-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .brand-titles h1 {
    font-size: 1.18rem;
  }

  .header-user-controls {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .role-switcher-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F1F5F9;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    border: 1px solid #E2E8F0;
  }
  .role-switcher-box .role-select {
    max-width: 65%;
    font-size: 0.85rem;
  }

  .user-profile-pill {
    width: 100%;
    justify-content: flex-start;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    padding: 6px 10px;
    border-radius: var(--radius-md);
  }

  /* Навигационная панель: удобная 2-колоночная сетка */
  .main-navigation-bar {
    padding: 8px 10px;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .nav-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding: 6px !important;
    background: #F1F5F9;
    border-radius: var(--radius-md);
    border: 1px solid #E2E8F0;
  }

  .nav-item-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 9px 12px;
    font-size: 0.84rem;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: var(--radius-sm);
    min-height: 42px;
    color: var(--color-text-main);
  }

  /* Кнопка «Новая проверка» на всю ширину на мобильном */
  .nav-item-btn[data-tab="new-inspection"] {
    grid-column: span 2;
    background: var(--color-primary);
    color: #FFFFFF;
    font-weight: 700;
    justify-content: center;
    box-shadow: 0 3px 10px var(--color-primary-glow);
    border-color: var(--color-primary);
  }
  .nav-item-btn[data-tab="new-inspection"] i,
  .nav-item-btn[data-tab="new-inspection"] svg {
    color: #FFFFFF;
  }

  .nav-item-btn.active:not([data-tab="new-inspection"]) {
    background: #FFFFFF;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1.5px var(--color-primary), 0 3px 8px rgba(228, 0, 43, 0.08);
    color: var(--color-primary);
    font-weight: 700;
  }
  .nav-item-btn.active:not([data-tab="new-inspection"]) i,
  .nav-item-btn.active:not([data-tab="new-inspection"]) svg {
    color: var(--color-primary);
  }

  /* Основной контейнер контента */
  .app-main-content {
    padding: 0 8px 80px 8px;
    margin-top: 10px;
    overflow-x: hidden;
  }

  .glass-panel {
    padding: 14px 12px;
    border-radius: var(--radius-md);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .wizard-card {
    padding: 14px 12px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  /* Индикатор шагов */
  .wizard-steps-container {
    padding: 10px 12px;
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    scrollbar-width: none;
    border-radius: var(--radius-md);
  }
  .wizard-steps-container::-webkit-scrollbar {
    display: none;
  }

  .step-badge-item {
    flex: 0 0 auto;
    font-size: 0.8rem;
    gap: 6px;
  }
  .step-badge-item .step-num {
    width: 26px;
    height: 26px;
    font-size: 0.8rem;
  }
  .step-badge-item .step-title {
    display: inline-block;
    white-space: nowrap;
  }
  .step-divider {
    display: none;
  }

  /* Формы и сетки */
  .form-grid-2col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .inspection-type-selector {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100%;
    box-sizing: border-box;
  }
  .type-card-inner {
    flex-direction: row !important;
    align-items: flex-start !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    box-sizing: border-box;
  }
  .type-icon-box {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }
  .type-info h4 {
    font-size: 0.95rem;
    margin-bottom: 4px;
  }
  .type-info p {
    font-size: 0.8rem;
    line-height: 1.35;
  }

  /* Карточки решений */
  .decision-options-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .decision-card-inner {
    flex-direction: row !important;
    align-items: flex-start !important;
    padding: 12px 14px !important;
    gap: 12px !important;
  }
  .decision-icon-box {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  /* Сетки карточек и фильтров */
  .kpi-cards-grid,
  .fines-kpi-grid,
  .scripts-cards-grid,
  .tasks-grid,
  .docs-grid,
  .contacts-grid,
  .filters-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
  }

  .fine-kpi-card {
    padding: 12px 14px;
  }
  .fine-kpi-value {
    font-size: 1.15rem;
  }

  /* Панели управления и кнопки действий */
  .panel-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .panel-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .panel-actions button,
  .panel-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
    font-size: 0.9rem;
    min-height: 44px;
  }

  /* Пилюли статусов со скроллом */
  .status-pills-row {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding: 4px 0 8px 0;
    scrollbar-width: none;
  }
  .status-pills-row::-webkit-scrollbar {
    display: none;
  }
  .status-pill-btn {
    flex: 0 0 auto;
    padding: 6px 12px;
    font-size: 0.78rem;
  }

  /* Таблицы проверок и штрафов на мобильном */
  .table-responsive {
    border-radius: var(--radius-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    border: 1px solid #E2E8F0;
  }

  .custom-data-table {
    min-width: 600px;
    font-size: 0.82rem;
  }
  .custom-data-table th,
  .custom-data-table td {
    padding: 9px 8px;
  }

  .action-buttons-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 90px;
  }
  .action-buttons-group .btn {
    width: 100%;
    padding: 5px 8px;
    font-size: 0.75rem;
    justify-content: center;
  }

  /* Модальные окна в стиле Bottom Sheet для мобильных */
  .modal-container {
    padding: 0;
    align-items: flex-end;
  }

  .modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh !important;
    margin: 0 !important;
    padding: 18px 14px 28px 14px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUpMobile 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes slideUpMobile {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .modal-header-row {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #E2E8F0;
  }
  .modal-header-row h3 {
    font-size: 1.05rem;
    line-height: 1.3;
  }

  .modal-body {
    max-height: calc(92vh - 90px) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
  }

  .modal-footer-actions {
    flex-direction: column-reverse;
    gap: 10px;
    margin-top: 16px;
  }
  .modal-footer-actions button,
  .modal-footer-actions .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  /* Сетка реквизитов внутри модалки */
  .inspection-details-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .fine-status-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .fine-status-hero .text-end {
    text-align: left !important;
  }

  /* Кнопки смены статуса в модалке */
  .status-action-box .d-flex {
    flex-direction: column;
  }
  .status-action-box .btn-set-status {
    width: 100%;
    justify-content: flex-start;
    padding: 8px 12px;
    font-size: 0.85rem;
  }

  /* Чек-листы проверки */
  .checklist-item-card {
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .checklist-item-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .checklist-radios-group {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .checklist-radios-group .btn-check-choice {
    width: 100%;
    justify-content: center;
  }

  /* Мастер проверок футер */
  .wizard-footer-actions {
    flex-direction: column-reverse;
    gap: 10px;
  }
  .wizard-footer-actions button,
  .wizard-footer-actions .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }

  /* Карточки фраз в Базе знаний */
  .phrase-card {
    padding: 12px 14px;
  }
  .phrase-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .btn-copy-phrase {
    width: 100%;
    margin-top: 8px;
    justify-content: center;
  }

  /* Финансовый баннер */
  .fines-analytics-banner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .fines-analytics-banner .d-flex {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .fines-analytics-banner .text-end {
    text-align: left !important;
  }
  .fines-analytics-banner button {
    width: 100%;
  }
}

/* ==========================================================================
   4. СВЕРХМАЛЕНЬКИЕ СМАРТФОНЫ (max-width: 380px)
   ========================================================================== */
@media (max-width: 380px) {
  .brand-titles h1 {
    font-size: 1.05rem;
  }

  .nav-item-btn {
    padding: 8px 8px;
    font-size: 0.78rem;
  }

  .fine-kpi-value {
    font-size: 1.05rem;
  }

  .btn {
    padding: 8px 12px;
    font-size: 0.82rem;
  }
}