/* ELVENSONG_ADMIN_FIT_1_1_1
   Catalog admin only. Storefront untouched. */

/* —— 1) Unlock vertical scroll (non-kanban) —— */
html.es-admin-scroll div.h-dvh.bg-slate-950.flex.overflow-hidden > div.flex-1.flex.flex-col.min-w-0.min-h-0 > div.flex-1.min-h-0 {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}
html.es-admin-scroll div.h-dvh.bg-slate-950.flex.overflow-hidden main.flex-1.min-h-0.overflow-hidden,
html.es-admin-scroll div.h-dvh.bg-slate-950.flex.overflow-hidden main.overflow-hidden {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  display: block !important;
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
}

html.es-admin-scroll .admin-ops-main,
html.es-admin-scroll .admin-ops-main .ops-root,
html.es-admin-scroll .admin-ops-main .ops-content,
html.es-admin-scroll .settings-panel,
html.es-admin-scroll #elvensong-backup-details,
html.es-admin-scroll #elvensong-ops-backup-panel-root,
html.es-admin-scroll #es-dw-root {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}

/* —— 2) Contrast: readable light text on dark admin —— */
html.es-admin-shell .ops-btn { color: #f1f5f9 !important; }
html.es-admin-shell .ops-btn.secondary {
  background: #1e293b !important;
  border: 1px solid #64748b !important;
  color: #f8fafc !important;
}
html.es-admin-shell .ops-btn.gold {
  background: #b45309 !important;
  color: #fff7ed !important;
}
html.es-admin-shell .muted,
html.es-admin-shell .text-muted,
html.es-admin-shell [class*="text-muted"] {
  color: #e2e8f0 !important;
}
html.es-admin-shell .text-slate-400,
html.es-admin-shell .text-slate-500,
html.es-admin-shell .text-slate-600,
html.es-admin-shell .text-gray-400,
html.es-admin-shell .text-gray-500 {
  color: #e2e8f0 !important;
}
html.es-admin-shell input::placeholder,
html.es-admin-shell textarea::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
}
html.es-admin-shell button:not(:disabled),
html.es-admin-shell .ops-btn:not(:disabled) {
  color: #f8fafc !important;
}
/* Unstick SPA section headers / toolbars that slide through other labels */
html.es-admin-shell main .sticky,
html.es-admin-shell main [class*="sticky"],
html.es-admin-shell #es-aa-bar {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
}

/* —— 3) Mobile: card rows, no sideways swipe —— */
@media screen and (max-width: 767px) {
  html.es-admin-shell main {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    max-width: 100vw !important;
  }

  html.es-admin-shell button,
  html.es-admin-shell .ops-btn,
  html.es-admin-shell a.ops-btn {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html.es-admin-shell .flex.flex-wrap,
  html.es-admin-shell .es-backup-actions,
  html.es-admin-shell .sales-summary {
    max-width: 100% !important;
  }

  /* Kill horizontal scroll traps */
  html.es-admin-shell .overflow-x-auto,
  html.es-admin-shell .table-wrap,
  html.es-admin-shell .es-backup-table-wrap,
  html.es-admin-shell main div:has(> table) {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Cardified tables */
  html.es-admin-shell table.es-m-cards {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }
  html.es-admin-shell table.es-m-cards thead {
    display: none !important;
  }
  html.es-admin-shell table.es-m-cards tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  html.es-admin-shell table.es-m-cards tr {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid #334155 !important;
    border-radius: 14px !important;
    background: #0b1220 !important;
    box-sizing: border-box !important;
  }
  html.es-admin-shell table.es-m-cards td {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 8px 12px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    color: #e2e8f0 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
  }
  html.es-admin-shell table.es-m-cards td::before {
    content: attr(data-es-label);
    flex: 0 0 auto;
    max-width: 42%;
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }
  html.es-admin-shell table.es-m-cards td[data-es-label=""]::before,
  html.es-admin-shell table.es-m-cards td:not([data-es-label])::before {
    display: none !important;
  }
  /* Primary cell (photo / title / order #): full width stack */
  html.es-admin-shell table.es-m-cards td.es-m-primary {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
    border-bottom: 1px solid #1e293b !important;
    margin-bottom: 2px !important;
  }
  html.es-admin-shell table.es-m-cards td.es-m-primary::before {
    display: none !important;
  }
  html.es-admin-shell table.es-m-cards td.es-m-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding-top: 4px !important;
    border-top: 1px solid #1e293b !important;
    margin-top: 2px !important;
  }
  html.es-admin-shell table.es-m-cards td.es-m-actions::before {
    display: none !important;
  }
  html.es-admin-shell table.es-m-cards td.es-m-actions > * {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  html.es-admin-shell table.es-m-cards td.es-m-hide {
    display: none !important;
  }

  /* Product thumbs larger & readable */
  html.es-admin-shell table.es-m-cards img.es-admin-thumb,
  html.es-admin-shell table.es-m-cards img[data-es-admin-preview] {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }
  html.es-admin-shell table.es-m-cards .truncate,
  html.es-admin-shell table.es-m-cards [class*="truncate"] {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: 100% !important;
  }

  /* Status pills stay one line */
  html.es-admin-shell .rounded-full,
  html.es-admin-shell span.inline-flex {
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  /* Toolbars stack */
  html.es-admin-shell main .flex.gap-2:has(button),
  html.es-admin-shell main .flex.gap-3:has(button) {
    flex-wrap: wrap !important;
  }
  html.es-admin-shell .flex.flex-wrap.items-center.gap-2.pt-1 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }
  html.es-admin-shell .flex.flex-wrap.items-center.gap-2.pt-1 > * {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Floating FAB clear of chrome */
  html.es-admin-shell button.fixed,
  html.es-admin-shell a.fixed,
  html.es-admin-shell .fixed.bottom-4,
  html.es-admin-shell .fixed.bottom-6 {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    right: 12px !important;
    max-width: calc(100vw - 24px) !important;
    z-index: 40 !important;
  }

  /* ELVENSONG_ADMIN_FIT_LIGHT_1_2_0 — раньше эти правила «подсвечивали» текст
     на тёмной теме и красили кнопки/пилюли в #0f172a. Тема теперь светлая,
     поэтому значения переведены на светлые токены (--ev-*). */
  html.es-admin-shell .text-slate-500,
  html.es-admin-shell .text-slate-600 {
    color: var(--ev-muted, #57667c) !important;
  }

  html.es-admin-shell .text-slate-700,
  html.es-admin-shell .text-slate-800,
  html.es-admin-shell .text-slate-900 {
    color: var(--ev-ink, #202b40) !important;
  }

  html.es-admin-shell button.border,
  html.es-admin-shell button[class*="ghost"],
  html.es-admin-shell .border.text-xs {
    border-color: var(--ev-line-strong, #d6d0c2) !important;
    background: var(--ev-surface, #fff) !important;
  }

  html.es-admin-shell .settings-panel,
  html.es-admin-shell .settings-card {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* —— 4) Lightbox —— */
#es-admin-lightbox {
  position: fixed; inset: 0; z-index: 2147483646;
  display: none; align-items: center; justify-content: center;
  padding: 16px; background: rgba(2, 6, 23, 0.92);
}
#es-admin-lightbox.active { display: flex; }
#es-admin-lightbox img {
  max-width: min(96vw, 920px); max-height: 86vh; object-fit: contain;
  border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.55); background: #0b1220;
}
#es-admin-lightbox .es-admin-lb-close {
  position: absolute; top: 12px; right: 12px; width: 42px; height: 42px;
  border: 0; border-radius: 999px; background: #1e293b; color: #f8fafc;
  font-size: 22px; line-height: 1; cursor: pointer;
}
#es-admin-lightbox .es-admin-lb-hint {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: #94a3b8; font-size: 12px;
}
body.es-admin-lb-open { overflow: hidden !important; }

@media screen and (min-width: 768px) {
  html.es-admin-scroll div.h-dvh.bg-slate-950.flex.overflow-hidden > div.flex-1.flex.flex-col.min-w-0.min-h-0 > div.flex-1.min-h-0 {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  html.es-admin-scroll main.overflow-hidden {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
}