/* Мобільні стилі для сторінки Пульт */

/* Мобільні медіа-запити */
@media (max-width: 768px) {
  /* Запобігання горизонтальному скролу */
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  /* Основний контейнер */
  .main-contained {
    padding: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Секція диспетчера на мобільних */
  .dispatcher-section {
    margin: 5px 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .dispatcher-selector {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .dispatcher-selector select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Пошукова секція на мобільних */
  .main-menu-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 10px 0;
    box-sizing: border-box;
  }

  .search-section {
    width: 100%;
    max-width: 100%;
    padding: 12px;
    box-sizing: border-box;
  }

  .search-box {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
  }

  #searchInput {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
  }

  #searchButton {
    flex-shrink: 0;
    padding: 10px 16px;
    white-space: nowrap;
  }

  /* Контейнер з техніками та панелями - вертикальний макет */
  .technicians-and-controls-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    margin: 10px 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Секція техніків на мобільних - горизонтальний список */
  .technicians-section {
    order: 1;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
  }

  .technicians-section h2 {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .technicians-list {
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 8px 0;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
  }

  .technician-item {
    flex-shrink: 0;
    min-width: 140px;
    max-width: 180px;
    padding: 10px;
    margin-bottom: 0;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }

  /* Стилі для горизонтального скролбару техніків */
  .technicians-list::-webkit-scrollbar {
    height: 6px;
  }

  .technicians-list::-webkit-scrollbar-track {
    background: rgba(15,22,34,0.3);
    border-radius: 3px;
  }

  .technicians-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
  }

  .technicians-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3);
  }

  /* Чат-панель на мобільних */
  .chat-panel-container {
    order: 2;
    padding: 8px;
    max-height: 50vh;
    min-height: 300px;
    width: 100%;
    box-sizing: border-box;
  }

  .static-chat-panel {
    min-height: 280px;
  }

  .chat-header {
    padding: 8px 10px;
  }

  .chat-title {
    font-size: 14px;
  }

  .chat-messages {
    padding: 8px;
    font-size: 14px;
  }

  .message {
    font-size: 13px;
    padding: 6px 8px 14px;
  }

  .chat-input-container {
    padding: 6px;
  }

  .chat-input {
    font-size: 16px; /* Запобігає зуму на iOS */
    padding: 8px 10px;
  }

  .send-message-btn {
    width: 36px;
    height: 36px;
  }

  /* Панель подій на мобільних */
  .events-panel {
    order: 3;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
  }

  .events-panel > div:first-child {
    flex-wrap: wrap;
    gap: 6px;
  }

  .events-panel button {
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* Дуже маленькі екрани */
@media (max-width: 480px) {
  /* Запобігання горизонтальному скролу */
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  
  .main-contained {
    padding: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* На дуже маленьких екранах зберігаємо горизонтальний список техніків */
  .technicians-and-controls-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .technician-item {
    min-width: 120px !important;
    max-width: 160px !important;
    font-size: 12px !important;
    padding: 8px !important;
  }

  .dispatcher-section,
  .search-section,
  .technicians-section,
  .chat-panel-container,
  .events-panel {
    padding: 8px;
    margin: 4px 0;
  }

  .technicians-section h2 {
    font-size: 16px;
  }

  .technician-item {
    padding: 10px;
    font-size: 13px;
  }

  .chat-panel-container {
    max-height: 40vh;
    min-height: 250px;
  }

  .static-chat-panel {
    min-height: 230px;
  }

  .chat-header {
    padding: 8px 10px;
  }

  .chat-title {
    font-size: 14px;
  }

  .chat-messages {
    padding: 8px;
  }

  .message {
    font-size: 14px;
    padding: 6px 8px 14px;
  }

  .chat-input-container {
    padding: 6px;
  }

  .send-message-btn {
    width: 36px;
    height: 36px;
  }

  /* Кнопки в панелі подій */
  .events-panel button {
    font-size: 11px;
    padding: 5px 8px;
  }

  /* Дати в панелі подій */
  .events-panel > div:first-child {
    font-size: 12px;
  }

  /* Пошукове поле залишається горизонтальним навіть на маленьких екранах */
  .search-box {
    flex-direction: row !important;
  }

  #searchInput {
    min-width: 120px;
  }
}

/* Landscape орієнтація на мобільних */
@media (max-width: 768px) and (orientation: landscape) {
  .chat-panel-container {
    max-height: 60vh;
    min-height: 250px;
  }

  .technician-item {
    min-width: 120px;
    max-width: 150px;
  }
}

/* Додаткові стилі для покращення UX на мобільних */
@media (max-width: 768px) {
  /* Покращення touch-взаємодії */
  .technician-item,
  .chat-input,
  #searchInput,
  button {
    min-height: 44px; /* Мінімальний розмір для touch */
  }

  /* Прокрутка для чату */
  .chat-messages {
    -webkit-overflow-scrolling: touch;
  }

  /* Фокус стилі для мобільних */
  .chat-input:focus,
  #searchInput:focus,
  .dispatcher-selector select:focus {
    transform: scale(1.02);
    transition: transform 0.2s ease;
  }

  /* Анімації для мобільних */
  .technician-item,
  .events-panel button,
  #searchButton {
    transition: all 0.2s ease;
  }

  .technician-item:active,
  .events-panel button:active,
  #searchButton:active {
    transform: scale(0.98);
  }

  /* Стилі для розділювача дат на мобільних */
  .date-separator {
    margin: 12px 0;
    font-size: 11px;
  }
  
  .date-separator::before,
  .date-separator::after {
    min-width: 20px;
  }
}