/* =====================================================
  Мобильная версия админ-панели - Jewelry Admin
  ===================================================== */

/* Базовые настройки для мобильных */
@media (max-width: 768px) {
  body {
    font-size: 14px;
    padding: 10px;
  }

  /* Уменьшаем шрифты на мобильных */
  h1 { 
    font-size: 1.2rem; 
    margin-bottom: 0.5rem; 
  }
  h2 { 
    font-size: 1rem; 
    margin-bottom: 0.5rem; 
  }
  h3 { 
    font-size: 0.9rem; 
  }

  /* Header на мобильных */
  .header {
    padding: 12px;
    margin-bottom: 10px;
  }

  .header > div {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Section на мобильных */
  .section {
    padding: 12px;
    margin-bottom: 10px;
  }

  /* Карточки статистики - 2 колонки */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }

  .stat-card {
    padding: 12px;
  }

  .stat-value {
    font-size: 20px;
  }

  .stat-label {
    font-size: 11px;
  }

  /* Карточка сервиса */
  .stat-card > div:first-child {
    flex-wrap: wrap;
    gap: 8px;
  }

  .stat-card .badge {
    font-size: 10px;
    padding: 3px 8px;
  }

  /* Кнопка Reset на мобильных */
  .stat-card > div[style*="text-align: right"] {
    text-align: left;
    margin-top: 8px;
  }

  .stat-card > div[style*="text-align: right"] .btn {
    width: 80px;
    font-size: 11px;
    padding: 4px 8px;
  }

  /* Grid с данными сервиса - 2 колонки */
  .stat-card > div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }

  /* Таблицы - горизонтальный скролл */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 12px;
  }

  table thead {
    background: #f7fafc;
  }

  table th,
  table td {
    padding: 8px 10px;
  }

  /* Вкладки */
  .tabs {
    flex-wrap: wrap;
    gap: 5px;
  }

  .tab {
    padding: 8px 12px;
    font-size: 12px;
    flex: 1;
    text-align: center;
  }

  /* Кнопки в таблицах */
  .actions {
    flex-direction: column;
    gap: 5px;
  }

  .actions .btn {
    width: 100%;
    padding: 6px;
    font-size: 11px;
  }

  /* Графики */
  .chart-container {
    height: 200px !important;
    padding: 10px;
  }

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

  /* Модальные окна */
  .modal-overlay {
    padding: 10px;
  }

  .modal {
    width: 95%;
    max-width: none;
    padding: 20px;
  }

  .modal h3 {
    font-size: 16px;
    margin-bottom: 15px;
  }

  .modal-actions {
    flex-direction: column;
    gap: 8px;
  }

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

  /* Формы */
  .form-group input {
    padding: 10px;
    font-size: 14px;
  }

  /* Login форма */
  .login-form {
    margin: 20px auto;
    padding: 20px 15px;
  }

  .login-form h2 {
    font-size: 18px;
  }

  .login-form .btn {
    width: 100%;
    padding: 12px;
  }
}

/* Очень маленькие экраны - одна колонка */
@media (max-width: 480px) {
  body {
    padding: 5px;
    font-size: 13px;
  }

  .header {
    padding: 10px;
  }

  .header h1 {
    font-size: 15px;
  }

  .header .btn {
    padding: 5px 8px;
    font-size: 11px;
  }

  .section {
    padding: 10px;
  }

  .section h2 {
    font-size: 14px;
  }

  /* Статистика в одну колонку */
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  /* Сервисы в одну колонку */
  .stats-grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  .stat-card > div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Таблицы */
  table {
    font-size: 11px;
  }

  table th,
  table td {
    padding: 6px 8px;
  }

  /* Вкладки */
  .tab {
    padding: 8px 10px;
    font-size: 11px;
  }

  /* Графики */
  .chart-container {
    height: 180px !important;
  }

  /* Login форма */
  .login-form {
    margin: 10px auto;
    padding: 15px 12px;
  }

  .login-form h2 {
    font-size: 16px;
  }
}

/* Планшеты - промежуточный размер */
@media (min-width: 769px) and (max-width: 1024px) {
  body { 
    font-size: 14px; 
    padding: 15px;
  }
  
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
  
  .chart-container { 
    height: 220px !important; 
  }

  .header h1 {
    font-size: 20px;
  }
}