/*
 * Modoboa Mobile CSS Patch
 * Улучшение мобильного отображения интерфейса Modoboa (Vuetify 3)
 * Применяется поверх скомпилированных стилей Vue SPA
 */

/* ===== ОБЩИЕ УЛУЧШЕНИЯ ===== */

/* Предотвращаем горизонтальный скролл */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ===== МОБИЛЬНЫЕ УСТРОЙСТВА (до 768px) ===== */
@media (max-width: 768px) {

  /* --- Навигационная панель (AppBar / Toolbar) --- */
  .v-app-bar,
  .v-toolbar {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .v-toolbar__content {
    padding: 0 4px !important;
  }

  .v-app-bar-title,
  .v-toolbar-title {
    font-size: 14px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
  }

  /* --- Боковая панель (Navigation Drawer) --- */
  .v-navigation-drawer {
    width: 240px !important;
    max-width: 80vw !important;
  }

  /* --- Основной контент --- */
  .v-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* --- Контейнеры --- */
  .v-container {
    padding: 8px !important;
  }

  /* --- Карточки --- */
  .v-card {
    margin: 4px !important;
  }

  .v-card-title {
    font-size: 16px !important;
    padding: 12px 12px 8px !important;
    white-space: normal !important;
    word-break: break-word;
  }

  .v-card-text {
    padding: 8px 12px !important;
  }

  /* --- Таблицы данных (VDataTable) --- */
  .v-data-table {
    font-size: 12px !important;
  }

  .v-data-table .v-data-table__td,
  .v-data-table .v-data-table__th {
    padding: 4px 8px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }

  .v-data-table-footer {
    flex-wrap: wrap !important;
    padding: 4px !important;
    font-size: 12px !important;
  }

  .v-data-table-footer .v-data-table-footer__items-per-page {
    margin: 4px 0 !important;
  }

  /* --- Кнопки --- */
  .v-btn {
    min-width: 36px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  .v-btn .v-btn__content {
    gap: 4px !important;
  }

  /* Скрываем текст кнопок с иконками на маленьких экранах */
  .v-btn.v-btn--icon {
    width: 36px !important;
    height: 36px !important;
  }

  /* --- Поля ввода --- */
  .v-field {
    font-size: 14px !important;
  }

  .v-field__input {
    padding: 8px 12px !important;
    min-height: 40px !important;
  }

  .v-label {
    font-size: 13px !important;
  }

  /* --- Диалоги --- */
  .v-dialog .v-overlay__content {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 8px !important;
  }

  .v-dialog .v-card {
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  /* --- Вкладки (Tabs) --- */
  .v-tabs {
    font-size: 12px !important;
  }

  .v-tab {
    min-width: 60px !important;
    padding: 0 8px !important;
    font-size: 12px !important;
  }

  /* --- Списки --- */
  .v-list-item {
    padding: 4px 8px !important;
    min-height: 40px !important;
  }

  .v-list-item-title {
    font-size: 14px !important;
  }

  .v-list-item-subtitle {
    font-size: 12px !important;
  }

  /* --- Чипы --- */
  .v-chip {
    font-size: 11px !important;
    height: 24px !important;
    padding: 0 8px !important;
  }

  /* --- Строки и колонки --- */
  .v-row {
    margin: 0 -4px !important;
  }

  .v-col {
    padding: 4px !important;
  }

  /* ===== WEBMAIL СПЕЦИФИЧНЫЕ СТИЛИ ===== */

  /* --- Панель папок (левая колонка) --- */
  .mailbox {
    font-size: 13px !important;
  }

  /* --- Список писем --- */
  .v-data-table .message-row,
  [class*="MessagesView"] .v-data-table__tr {
    cursor: pointer;
  }

  /* Скрываем некоторые колонки в таблице писем на мобильных */
  .messages-table .v-data-table__th:nth-child(4),
  .messages-table .v-data-table__td:nth-child(4) {
    display: none !important;
  }

  /* --- Просмотр письма --- */
  .email-view,
  [class*="EmailView"] {
    padding: 4px !important;
  }

  /* --- Форма написания письма --- */
  [class*="ComposeEmailForm"] .v-card {
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  /* --- Resize handle (разделитель панелей) --- */
  .resize-handle {
    display: none !important;
  }

  /* ===== АДМИНИСТРАТИВНЫЙ ИНТЕРФЕЙС ===== */

  /* --- Панель управления (Dashboard) --- */
  [class*="DashboardView"] .v-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* --- Форма параметров --- */
  [class*="ParametersView"] .v-col,
  [class*="ParametersForm"] .v-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* --- Домены и аккаунты --- */
  [class*="DomainsView"] .v-data-table__th:nth-child(n+4),
  [class*="DomainsView"] .v-data-table__td:nth-child(n+4),
  [class*="IdentitiesView"] .v-data-table__th:nth-child(n+4),
  [class*="IdentitiesView"] .v-data-table__td:nth-child(n+4) {
    display: none !important;
  }

  /* --- Статистика --- */
  [class*="StatisticsView"] .v-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* ===== МЕНЮ И ОВЕРЛЕИ ===== */
  .v-menu .v-overlay__content {
    max-width: 90vw !important;
  }

  .v-menu .v-list {
    max-height: 50vh !important;
    overflow-y: auto !important;
  }

  /* ===== ШРИФТЫ И ТИПОГРАФИКА ===== */
  .text-h4, .text-h5 {
    font-size: 1.2rem !important;
  }

  .text-h6 {
    font-size: 1rem !important;
  }

  .text-subtitle-1 {
    font-size: 0.875rem !important;
  }

  .text-body-1 {
    font-size: 0.875rem !important;
  }

  .text-caption {
    font-size: 0.7rem !important;
  }
}

/* ===== ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ (до 480px) ===== */
@media (max-width: 480px) {

  /* Скрываем заголовок приложения на очень маленьких экранах */
  .v-app-bar-title__content {
    display: none !important;
  }

  /* Уменьшаем отступы ещё больше */
  .v-container {
    padding: 4px !important;
  }

  .v-card-title {
    font-size: 14px !important;
    padding: 8px !important;
  }

  /* Таблицы — скрываем ещё больше колонок */
  .v-data-table .v-data-table__th:nth-child(n+3),
  .v-data-table .v-data-table__td:nth-child(n+3) {
    display: none !important;
  }

  /* Исключение: оставляем важные колонки в таблице писем */
  [class*="MessagesView"] .v-data-table__th:nth-child(1),
  [class*="MessagesView"] .v-data-table__td:nth-child(1),
  [class*="MessagesView"] .v-data-table__th:nth-child(2),
  [class*="MessagesView"] .v-data-table__td:nth-child(2),
  [class*="MessagesView"] .v-data-table__th:nth-child(3),
  [class*="MessagesView"] .v-data-table__td:nth-child(3) {
    display: table-cell !important;
  }

  /* Кнопки — только иконки */
  .v-btn:not(.v-btn--icon) .v-btn__content span {
    display: none !important;
  }

  /* Диалоги на весь экран */
  .v-dialog .v-overlay__content {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
}

/* ===== ПЛАНШЕТЫ (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {

  .v-container {
    padding: 12px !important;
  }

  .v-data-table .v-data-table__td,
  .v-data-table .v-data-table__th {
    padding: 6px 10px !important;
  }

  /* Скрываем второстепенные колонки */
  [class*="DomainsView"] .v-data-table__th:nth-child(n+5),
  [class*="DomainsView"] .v-data-table__td:nth-child(n+5) {
    display: none !important;
  }
}

/* ===== УЛУЧШЕНИЯ ДЛЯ СЕНСОРНЫХ ЭКРАНОВ ===== */
@media (pointer: coarse) {

  /* Увеличиваем зоны касания */
  .v-btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  .v-list-item {
    min-height: 48px !important;
  }

  .v-checkbox .v-selection-control {
    min-height: 44px !important;
  }

  /* Убираем hover-эффекты на сенсорных устройствах */
  .v-btn:hover::before,
  .v-list-item:hover::before {
    opacity: 0 !important;
  }
}