/* MENZIL - КОМПАКТНЫЙ режим v2 (Средний)
   Уменьшает все элементы на ~15-20% + ПРЕВЬЮ ФОТО + ТЕКСТОВЫЕ РАМКИ
*/

/* ============================================================
   БАЗОВЫЕ ШРИФТЫ
   ============================================================ */
body { font-size: 14px !important; }

h1, .dashboard-title {
  font-size: 22px !important;
  line-height: 1.3 !important;
}

h2, .scanner-title, .card-title {
  font-size: 16px !important;
  line-height: 1.3 !important;
}

h3 { font-size: 15px !important; }

.dashboard-subtitle, .card-subtitle { font-size: 12px !important; }

/* ============================================================
   КНОПКИ
   ============================================================ */
.btn {
  padding: 8px 14px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

.btn-primary, .btn-outline, .btn-ghost, .btn-white, .btn-outline-white {
  padding: 8px 14px !important;
  font-size: 13px !important;
}

button[style*="padding:14px"], button[style*="padding: 14px"] {
  padding: 10px 16px !important;
  font-size: 14px !important;
}

/* Кнопки сканеры (камера) */
button[style*="padding:16px 18px"], button[style*="padding: 16px 18px"] {
  padding: 10px 14px !important;
}

/* ============================================================
   КАРТОЧКИ
   ============================================================ */
.card {
  padding: 14px !important;
  border-radius: 10px !important;
  margin-bottom: 12px !important;
}

.card-header {
  padding-bottom: 10px !important;
  margin-bottom: 10px !important;
}

/* ============================================================
   ФОРМЫ - ВСЕ ПОЛЯ
   ============================================================ */
.form-input,
.scanner-input,
input[type="text"].form-input,
input[type="number"].form-input,
input[type="tel"].form-input,
input[type="email"].form-input,
input[type="password"].form-input,
input[type="date"].form-input,
select.form-input,
textarea.form-input {
  padding: 7px 10px !important;
  font-size: 13px !important;
  border-radius: 7px !important;
  min-height: auto !important;
}

textarea.form-input {
  min-height: 50px !important;
  resize: vertical !important;
}

.form-label {
  font-size: 12px !important;
  margin-bottom: 4px !important;
  font-weight: 600 !important;
}

.form-group {
  margin-bottom: 10px !important;
}

.form-row {
  gap: 8px !important;
  margin-bottom: 10px !important;
}

/* Сканер (большие) - чуть больше */
.scanner-input {
  padding: 10px 14px !important;
  font-size: 14px !important;
}

/* ============================================================
   SIDEBAR (меню)
   ============================================================ */
.sidebar { width: 220px !important; }

.sidebar-link {
  padding: 10px 14px !important;
  font-size: 13px !important;
  border-radius: 7px !important;
  gap: 10px !important;
}

.sidebar-icon { font-size: 16px !important; }
.user-info-name { font-size: 13px !important; }
.user-info-role { font-size: 11px !important; }

/* ============================================================
   ТАБЛИЦЫ
   ============================================================ */
.table th {
  padding: 7px 10px !important;
  font-size: 11px !important;
}

.table td {
  padding: 7px 10px !important;
  font-size: 12px !important;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar { padding: 10px 16px !important; }
.logo-name { font-size: 15px !important; }
.logo-tag { font-size: 10px !important; }
.nav-link { padding: 6px 10px !important; font-size: 13px !important; }
.lang-btn { padding: 4px 8px !important; font-size: 11px !important; }

/* ============================================================
   STAT КАРТОЧКИ
   ============================================================ */
.stat-card { padding: 12px !important; }
.stat-card-value { font-size: 20px !important; }
.stat-card-label { font-size: 11px !important; }
.stat-card-change { font-size: 10px !important; }

/* ============================================================
   HERO (главная)
   ============================================================ */
.hero { padding: 40px 16px !important; }

.hero h1 {
  font-size: 28px !important;
  line-height: 1.2 !important;
}

.hero p {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.hero-badge {
  padding: 6px 14px !important;
  font-size: 12px !important;
}

/* ============================================================
   ПРЕВЬЮ ФОТО - 70x70 → 50x50
   ============================================================ */
#wh-photo-preview > div,
#wh-photo-preview .photo-preview-item {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  border-radius: 6px !important;
}

#wh-photo-preview img {
  max-width: 50px !important;
  max-height: 50px !important;
  width: 50px !important;
  height: 50px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
}

#wh-photo-preview button,
#wh-photo-preview .remove-photo-btn {
  font-size: 10px !important;
  padding: 1px 5px !important;
  top: -3px !important;
  right: -3px !important;
}

#wh-photo-preview {
  gap: 5px !important;
  margin-top: 8px !important;
}

/* ============================================================
   КНОПКИ ФОТО (камера/галерея) - КОМПАКТНО В СТРОКУ
   ============================================================ */
.product-photo-upload {
  padding: 8px 14px !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  text-align: left !important;
  min-height: 40px !important;
  cursor: pointer !important;
  border: 1.5px dashed #d1d5db !important;
  background: #fafafa !important;
  transition: all 0.2s !important;
  margin-bottom: 6px !important;
}

.product-photo-upload:hover {
  border-color: #3b82f6 !important;
  background: rgba(59, 130, 246, 0.05) !important;
}

/* Иконка (первый div) - небольшая в строке */
.product-photo-upload > div:first-child {
  font-size: 18px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  width: 24px !important;
  text-align: center !important;
}

/* Текст - инлайн с иконкой */
.product-photo-upload .text,
.product-photo-upload > div:last-child {
  font-size: 13px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  flex: 1 !important;
  line-height: 1.3 !important;
}

/* ============================================================
   МОДАЛЬНЫЕ ОКНА
   ============================================================ */
.modal-content {
  padding: 18px !important;
}

.modal-header h3 {
  font-size: 16px !important;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  padding: 2px 8px !important;
  font-size: 11px !important;
  border-radius: 10px !important;
}

/* ============================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ
   ============================================================ */
@media (max-width: 600px) {
  body { font-size: 13px !important; }
  
  .dashboard-title { font-size: 18px !important; }
  
  .card { padding: 12px !important; }
  
  .btn { 
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
  
  .form-input, .scanner-input, textarea.form-input {
    padding: 6px 10px !important;
    font-size: 13px !important;
  }
  
  .sidebar-link {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  
  .table th, .table td {
    padding: 6px 8px !important;
    font-size: 11px !important;
  }
  
  .hero h1 { font-size: 22px !important; }
  .hero p { font-size: 13px !important; }
  
  /* Превью фото - ещё меньше на мобильном */
  #wh-photo-preview > div,
  #wh-photo-preview .photo-preview-item,
  #wh-photo-preview img {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
  }
}


/* === PHOTO-COMPACT-ROW-V2 START === */
/* Кнопки фото: компактно в одну строку (иконка + текст) */
.product-photo-upload,
.product-photo-upload.product-photo-compact {
  aspect-ratio: auto !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border: 2px dashed var(--border) !important;
  border-radius: 12px !important;
  background: var(--bg-light) !important;
  text-align: left !important;
  cursor: pointer !important;
}
.product-photo-upload:hover,
.product-photo-upload.product-photo-compact:hover {
  border-color: var(--primary) !important;
  background: var(--bg-blue-soft) !important;
}
/* Иконка (первый div внутри label) */
.product-photo-upload > div:first-child,
.product-photo-upload .icon {
  font-size: 20px !important;
  margin: 0 !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  width: 26px !important;
  text-align: center !important;
}
/* Текст */
.product-photo-upload .text,
.product-photo-upload > div:last-child {
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  flex: 1 1 auto !important;
  line-height: 1.2 !important;
  text-align: left !important;
}
/* === PHOTO-COMPACT-ROW-V2 END === */


/* === ADMIN-FILTERS-RESPONSIVE START === */
/* Поиск в "Все посылки" — аккуратно на телефоне */
@media (max-width: 640px) {
  #admin-pkg-filters {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    align-items: end !important;
  }
  #admin-pkg-filters > div:first-child {
    grid-column: 1 / -1 !important;
  }
  #admin-pkg-filters > button {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 18px !important;
  }
}
/* === ADMIN-FILTERS-RESPONSIVE END === */