/* Custom Styles for LapFlow */

/* Плавні переходи */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Кастомний скролбар */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #090d16;
}
::-webkit-scrollbar-thumb {
  background: #1f2937;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #374151;
}

/* Активні вкладки */
.tab-btn.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
  background: rgba(59, 130, 246, 0.05);
}

.mobile-nav-btn.active {
  color: #3b82f6 !important;
  font-weight: 600;
}

/* Статусні бейджі */
.badge-in_transit {
  background-color: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.badge-workshop {
  background-color: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-inventory {
  background-color: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-sold {
  background-color: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.badge-parts {
  background-color: rgba(107, 114, 128, 0.15);
  color: #9ca3af;
  border: 1px solid rgba(107, 114, 128, 0.3);
}

/* Анімація появи карток */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.item-card {
  animation: fadeIn 0.2s ease-out forwards;
}


/* ==========================================================================
   СТРИМАНА ТЕМА (NORDIC SLATE / NAVY & WHITE): БЕЗ ЯСКРАВИХ КОЛЬОРІВ ТА ГРАДІЄНТІВ
   Палітра: Чорний (#070a12), Темно-синій (#0f172a, #1e293b), Білий (#ffffff, #f8fafc) та Голубий (#38bdf8, #0284c7)
   ========================================================================== */

html.slate-theme,
html.light {
  color-scheme: dark;
}

/* Фон сторінки та базовий колір тексту */
html.slate-theme body,
html.light body {
  background-color: #070a12 !important;
  color: #f8fafc !important;
}

/* Шапка сайту */
html.slate-theme header,
html.light header {
  background-color: #0b111c !important;
  border-bottom: 1px solid #1e293b !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

html.slate-theme header h1,
html.light header h1 {
  color: #ffffff !important;
}

/* Десктопний таб-бар */
html.slate-theme #desktopTabBar,
html.light #desktopTabBar {
  background-color: #070a12 !important;
  border-top: 1px solid #1e293b !important;
  border-bottom: 1px solid #1e293b !important;
  box-shadow: none !important;
}

html.slate-theme #desktopTabContainer,
html.light #desktopTabContainer {
  background-color: #0b111c !important;
  border-color: #1e293b !important;
  box-shadow: none !important;
}

/* Вкладки (Кнопки навігації) */
html.slate-theme .tab-btn,
html.light .tab-btn {
  color: #94a3b8 !important;
  border-radius: 0.75rem !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  transition: all 0.15s ease !important;
}

html.slate-theme .tab-btn:hover,
html.light .tab-btn:hover {
  color: #ffffff !important;
  background-color: #151e2e !important;
}

html.slate-theme .tab-btn.active,
html.light .tab-btn.active {
  color: #38bdf8 !important;
  background: #0f1c2e !important;
  border-color: #0284c7 !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}

/* Мобільна навігація внизу */
html.slate-theme #mobileBottomNav,
html.light #mobileBottomNav {
  background-color: #0b111c !important;
  border-top: 1px solid #1e293b !important;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4) !important;
}

html.slate-theme .mobile-nav-btn,
html.light .mobile-nav-btn {
  color: #64748b !important;
}

html.slate-theme .mobile-nav-btn.active,
html.light .mobile-nav-btn.active {
  color: #38bdf8 !important;
  font-weight: 600 !important;
}

/* Усі плитки, контейнери та блоки карток */
html.slate-theme [class*="bg-slate-950"],
html.slate-theme [class*="bg-slate-900"],
html.slate-theme [class*="bg-[#0f172a]"],
html.slate-theme [class*="bg-[#111827]"],
html.slate-theme [class*="bg-[#0e1424]"],
html.slate-theme .item-card,
html.light [class*="bg-slate-950"],
html.light [class*="bg-slate-900"],
html.light [class*="bg-[#0f172a]"],
html.light [class*="bg-[#111827]"],
html.light [class*="bg-[#0e1424]"],
html.light .item-card {
  background-color: #0d1422 !important;
  border-color: #1e293b !important;
  box-shadow: none !important;
  color: #f8fafc !important;
}

html.slate-theme .item-card:hover,
html.light .item-card:hover {
  border-color: #334155 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* Внутрішні під-панелі (Характеристики, собівартість, нотатки) */
html.slate-theme [class*="bg-slate-800"],
html.slate-theme [class*="bg-slate-700"],
html.slate-theme .item-card [class*="bg-slate-950"],
html.slate-theme .item-card [class*="bg-slate-900"],
html.slate-theme .item-card [class*="bg-slate-800"],
html.slate-theme .item-card [class*="bg-slate-700"],
html.light [class*="bg-slate-800"],
html.light [class*="bg-slate-700"],
html.light .item-card [class*="bg-slate-950"],
html.light .item-card [class*="bg-slate-900"],
html.light .item-card [class*="bg-slate-800"],
html.light .item-card [class*="bg-slate-700"] {
  background-color: #070c15 !important;
  border-color: #1e293b !important;
}

/* Рамки та розділювачі */
html.slate-theme [class*="border-slate-"],
html.slate-theme .divide-slate-800 > :not([hidden]) ~ :not([hidden]),
html.slate-theme [class*="divide-slate-"] > :not([hidden]) ~ :not([hidden]),
html.light [class*="border-slate-"],
html.light .divide-slate-800 > :not([hidden]) ~ :not([hidden]),
html.light [class*="divide-slate-"] > :not([hidden]) ~ :not([hidden]) {
  border-color: #1e293b !important;
}

/* Кольори тексту: висока контрастність, приглушені акценти */
html.slate-theme .text-white,
html.slate-theme .text-slate-100,
html.light .text-white,
html.light .text-slate-100 {
  color: #ffffff !important;
}

html.slate-theme .text-slate-200,
html.slate-theme .text-slate-300,
html.light .text-slate-200,
html.light .text-slate-300 {
  color: #cbd5e1 !important;
}

html.slate-theme .text-slate-400,
html.light .text-slate-400 {
  color: #94a3b8 !important;
}

html.slate-theme .text-slate-500,
html.light .text-slate-500 {
  color: #64748b !important;
}

/* ==========================================================================
   МОНОХРОМНА СИНЬО-СЛАНЦЕВА ТЕМА (Nordic Slate Calm Palette)
   ========================================================================== */

/* 1. Повне приглушення всіх строкатих шрифтів (зелених, жовтих, фіолетових тощо) до монотонного синього */
html.slate-theme [class*="text-emerald-"]:not(.text-keep-color),
html.slate-theme [class*="text-green-"]:not(.text-keep-color),
html.slate-theme [class*="text-teal-"]:not(.text-keep-color),
html.slate-theme [class*="text-amber-"]:not(.text-keep-color),
html.slate-theme [class*="text-yellow-"]:not(.text-keep-color),
html.slate-theme [class*="text-purple-"]:not(.text-keep-color),
html.slate-theme [class*="text-violet-"]:not(.text-keep-color),
html.slate-theme [class*="text-indigo-"]:not(.text-keep-color),
html.slate-theme [class*="text-fuchsia-"]:not(.text-keep-color),
html.slate-theme [class*="text-pink-"]:not(.text-keep-color),
html.slate-theme [class*="text-cyan-"]:not(.text-keep-color),
html.light [class*="text-emerald-"]:not(.text-keep-color),
html.light [class*="text-green-"]:not(.text-keep-color),
html.light [class*="text-teal-"]:not(.text-keep-color),
html.light [class*="text-amber-"]:not(.text-keep-color),
html.light [class*="text-yellow-"]:not(.text-keep-color),
html.light [class*="text-purple-"]:not(.text-keep-color),
html.light [class*="text-violet-"]:not(.text-keep-color),
html.light [class*="text-indigo-"]:not(.text-keep-color),
html.light [class*="text-fuchsia-"]:not(.text-keep-color),
html.light [class*="text-pink-"]:not(.text-keep-color),
html.light [class*="text-cyan-"]:not(.text-keep-color) {
  color: #38bdf8 !important;
}

/* Специфічні числові метрики та показники в спокійній синій гамі */
html.slate-theme #headerUsdRate,
html.slate-theme #dashHarvestedUsd,
html.slate-theme #dashHarvestedCount,
html.slate-theme #dashSaleUah,
html.slate-theme #dashProfitUah,
html.slate-theme #dashDeliveringText,
html.slate-theme #soldTotalProfit,
html.slate-theme #soldAvgProfit,
html.slate-theme #soldAvgRoi,
html.light #headerUsdRate,
html.light #dashHarvestedUsd,
html.light #dashHarvestedCount,
html.light #dashSaleUah,
html.light #dashProfitUah,
html.light #dashDeliveringText,
html.light #soldTotalProfit,
html.light #soldAvgProfit,
html.light #soldAvgRoi {
  color: #38bdf8 !important;
}

/* 2. Приглушення кольорових іконок до спокійного блакитного (крім створення і видалення) */
html.slate-theme i[class*="text-emerald-"],
html.slate-theme i[class*="text-green-"],
html.slate-theme i[class*="text-teal-"],
html.slate-theme i[class*="text-amber-"],
html.slate-theme i[class*="text-yellow-"],
html.slate-theme i[class*="text-purple-"],
html.slate-theme i[class*="text-violet-"],
html.slate-theme i[class*="text-indigo-"],
html.slate-theme i[class*="text-fuchsia-"],
html.slate-theme i[class*="text-pink-"],
html.slate-theme i[class*="text-cyan-"],
html.light i[class*="text-emerald-"],
html.light i[class*="text-green-"],
html.light i[class*="text-teal-"],
html.light i[class*="text-amber-"],
html.light i[class*="text-yellow-"],
html.light i[class*="text-purple-"],
html.light i[class*="text-violet-"],
html.light i[class*="text-indigo-"],
html.light i[class*="text-fuchsia-"],
html.light i[class*="text-pink-"],
html.light i[class*="text-cyan-"] {
  color: #38bdf8 !important;
}

/* 3. Монохромні фони тегів, чіпсів, плашок (без кислотних зелено/жовто/фіолетових) */
html.slate-theme [class*="bg-emerald-"]:not(.btn-keep-color):not([onclick*="openItemModal"]):not([onclick*="openAgentModal"]):not([onclick*="openDropModal"]):not([onclick*="openStoreModal"]):not([onclick*="openAdd"]):not(#btnOpenCreateItemModal),
html.slate-theme [class*="bg-green-"]:not(.btn-keep-color):not([onclick*="openItemModal"]):not([onclick*="openAgentModal"]):not([onclick*="openDropModal"]):not([onclick*="openStoreModal"]):not([onclick*="openAdd"]):not(#btnOpenCreateItemModal),
html.slate-theme [class*="bg-teal-"],
html.slate-theme [class*="bg-amber-"],
html.slate-theme [class*="bg-yellow-"],
html.slate-theme [class*="bg-purple-"],
html.slate-theme [class*="bg-violet-"],
html.slate-theme [class*="bg-indigo-"],
html.slate-theme [class*="bg-fuchsia-"],
html.slate-theme [class*="bg-pink-"],
html.slate-theme [class*="bg-cyan-"],
html.light [class*="bg-emerald-"]:not(.btn-keep-color):not([onclick*="openItemModal"]):not([onclick*="openAgentModal"]):not([onclick*="openDropModal"]):not([onclick*="openStoreModal"]):not([onclick*="openAdd"]):not(#btnOpenCreateItemModal),
html.light [class*="bg-green-"]:not(.btn-keep-color):not([onclick*="openItemModal"]):not([onclick*="openAgentModal"]):not([onclick*="openDropModal"]):not([onclick*="openStoreModal"]):not([onclick*="openAdd"]):not(#btnOpenCreateItemModal),
html.light [class*="bg-teal-"],
html.light [class*="bg-amber-"],
html.light [class*="bg-yellow-"],
html.light [class*="bg-purple-"],
html.light [class*="bg-violet-"],
html.light [class*="bg-indigo-"],
html.light [class*="bg-fuchsia-"],
html.light [class*="bg-pink-"],
html.light [class*="bg-cyan-"] {
  background-color: #0d1a2d !important;
  color: #93c5fd !important;
  box-shadow: none !important;
}

/* Бордери чіпсів та плашок */
html.slate-theme [class*="border-emerald-"]:not(.btn-keep-color):not([onclick*="openItemModal"]):not([onclick*="openAgentModal"]):not([onclick*="openDropModal"]):not([onclick*="openStoreModal"]):not([onclick*="openAdd"]):not(#btnOpenCreateItemModal),
html.slate-theme [class*="border-green-"]:not(.btn-keep-color):not([onclick*="openItemModal"]):not([onclick*="openAgentModal"]):not([onclick*="openDropModal"]):not([onclick*="openStoreModal"]):not([onclick*="openAdd"]):not(#btnOpenCreateItemModal),
html.slate-theme [class*="border-teal-"],
html.slate-theme [class*="border-amber-"],
html.slate-theme [class*="border-yellow-"],
html.slate-theme [class*="border-purple-"],
html.slate-theme [class*="border-violet-"],
html.slate-theme [class*="border-indigo-"],
html.slate-theme [class*="border-fuchsia-"],
html.slate-theme [class*="border-pink-"],
html.slate-theme [class*="border-cyan-"],
html.light [class*="border-emerald-"]:not(.btn-keep-color):not([onclick*="openItemModal"]):not([onclick*="openAgentModal"]):not([onclick*="openDropModal"]):not([onclick*="openStoreModal"]):not([onclick*="openAdd"]):not(#btnOpenCreateItemModal),
html.light [class*="border-green-"]:not(.btn-keep-color):not([onclick*="openItemModal"]):not([onclick*="openAgentModal"]):not([onclick*="openDropModal"]):not([onclick*="openStoreModal"]):not([onclick*="openAdd"]):not(#btnOpenCreateItemModal),
html.light [class*="border-teal-"],
html.light [class*="border-amber-"],
html.light [class*="border-yellow-"],
html.light [class*="border-purple-"],
html.light [class*="border-violet-"],
html.light [class*="border-indigo-"],
html.light [class*="border-fuchsia-"],
html.light [class*="border-pink-"],
html.light [class*="border-cyan-"] {
  border-color: #1e3a5f !important;
}

/* 4. Лічильники та бейджі в табах (badgeTransit, badgeSale, badgeSold) */
html.slate-theme #badgeTransit,
html.slate-theme #badgeSale,
html.slate-theme #badgeSold,
html.light #badgeTransit,
html.light #badgeSale,
html.light #badgeSold {
  background-color: #0f1e36 !important;
  border-color: #1e3a5f !important;
  color: #93c5fd !important;
}

/* 5. Чіпси телефонів форвардерів в картках отримувачів */
html.slate-theme #agentsContainer [class*="bg-blue-500/10"],
html.slate-theme #agentsContainer [class*="bg-purple-500/10"],
html.slate-theme #agentsContainer [class*="bg-rose-500/10"],
html.light #agentsContainer [class*="bg-blue-500/10"],
html.light #agentsContainer [class*="bg-purple-500/10"],
html.light #agentsContainer [class*="bg-rose-500/10"] {
  background-color: #0d1a2d !important;
  border-color: #1e3a5f !important;
  color: #93c5fd !important;
}

html.slate-theme #agentsContainer [class*="bg-rose-400"],
html.slate-theme #agentsContainer [class*="bg-purple-400"],
html.light #agentsContainer [class*="bg-rose-400"],
html.light #agentsContainer [class*="bg-purple-400"] {
  background-color: #38bdf8 !important;
}

/* 6. Градієнти кнопок переведення лотів */
html.slate-theme [class*="from-emerald-600"],
html.slate-theme [class*="from-teal-600"],
html.slate-theme [class*="from-purple-600"],
html.slate-theme [class*="from-indigo-600"],
html.slate-theme [class*="from-blue-600"]:not(#btnSubTabStores),
html.light [class*="from-emerald-600"],
html.light [class*="from-teal-600"],
html.light [class*="from-purple-600"],
html.light [class*="from-indigo-600"],
html.light [class*="from-blue-600"]:not(#btnSubTabStores) {
  background-image: none !important;
  background-color: #0d1a2d !important;
  border: 1px solid #1e3a5f !important;
  color: #93c5fd !important;
  box-shadow: none !important;
}

html.slate-theme [class*="from-emerald-600"]:hover,
html.slate-theme [class*="from-teal-600"]:hover,
html.slate-theme [class*="from-purple-600"]:hover,
html.slate-theme [class*="from-indigo-600"]:hover,
html.light [class*="from-emerald-600"]:hover,
html.light [class*="from-teal-600"]:hover,
html.light [class*="from-purple-600"]:hover,
html.light [class*="from-indigo-600"]:hover {
  background-color: #1e3a5f !important;
  color: #ffffff !important;
}

/* 7. Прогрес-бари лімітів дропів у синьому стилі */
html.slate-theme #dropsContainer [class*="from-emerald-500"],
html.light #dropsContainer [class*="from-emerald-500"] {
  background-image: linear-gradient(to right, #0284c7, #38bdf8) !important;
}

/* ==========================================================================
   ВИКЛЮЧЕННЯ: ЗЕЛЕНИЙ ТА ЧЕРВОНИЙ ЛИШЕ ДЛЯ СТВОРЕННЯ/ДОДАВАННЯ ТА ВИДАЛЕННЯ
   ========================================================================== */

/* ЗЕЛЕНИЙ: Кнопки створення / додавання нового елемента */
html.slate-theme button[onclick*="openItemModal"],
html.slate-theme button[onclick*="openAgentModal"],
html.slate-theme button[onclick*="openDropModal"],
html.slate-theme button[onclick*="openStoreModal"],
html.slate-theme #btnOpenCreateItemModal,
html.slate-theme .btn-create-action,
html.light button[onclick*="openItemModal"],
html.light button[onclick*="openAgentModal"],
html.light button[onclick*="openDropModal"],
html.light button[onclick*="openStoreModal"],
html.light #btnOpenCreateItemModal,
html.light .btn-create-action {
  background-color: #059669 !important;
  background-image: linear-gradient(to right, #059669, #10b981) !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
}

html.slate-theme button[onclick*="openItemModal"] i,
html.slate-theme button[onclick*="openAgentModal"] i,
html.slate-theme button[onclick*="openDropModal"] i,
html.slate-theme button[onclick*="openStoreModal"] i,
html.slate-theme #btnOpenCreateItemModal i,
html.light button[onclick*="openItemModal"] i,
html.light button[onclick*="openAgentModal"] i,
html.light button[onclick*="openDropModal"] i,
html.light button[onclick*="openStoreModal"] i,
html.light #btnOpenCreateItemModal i {
  color: #ffffff !important;
}

/* ЧЕРВОНИЙ: Кнопки видалення */
html.slate-theme button[onclick*="delete"],
html.slate-theme button[title*="Видалити"],
html.slate-theme .btn-delete,
html.slate-theme button:has(.fa-trash),
html.slate-theme button:has(.fa-trash-can),
html.light button[onclick*="delete"],
html.light button[title*="Видалити"],
html.light .btn-delete,
html.light button:has(.fa-trash),
html.light button:has(.fa-trash-can) {
  background-color: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #f87171 !important;
}

html.slate-theme button[onclick*="delete"] i,
html.slate-theme button[title*="Видалити"] i,
html.slate-theme .btn-delete i,
html.slate-theme button:has(.fa-trash) i,
html.slate-theme button:has(.fa-trash-can) i,
html.light button[onclick*="delete"] i,
html.light button[title*="Видалити"] i,
html.light .btn-delete i,
html.light button:has(.fa-trash) i,
html.light button:has(.fa-trash-can) i {
  color: #f87171 !important;
}

html.slate-theme button[onclick*="delete"]:hover,
html.slate-theme button[title*="Видалити"]:hover,
html.slate-theme .btn-delete:hover,
html.light button[onclick*="delete"]:hover,
html.light button[title*="Видалити"]:hover,
html.light .btn-delete:hover {
  background-color: #dc2626 !important;
  color: #ffffff !important;
}

html.slate-theme button[onclick*="delete"]:hover i,
html.slate-theme button[title*="Видалити"]:hover i,
html.light button[onclick*="delete"]:hover i,
html.light button[title*="Видалити"]:hover i {
  color: #ffffff !important;
}

/* Віджети в шапці (Курс валют, аватар користувача, перемикач теми) */
html.slate-theme #btnThemeToggle,
html.slate-theme #userProfileBadge,
html.slate-theme header .bg-slate-900,
html.light #btnThemeToggle,
html.light #userProfileBadge,
html.light header .bg-slate-900 {
  background-color: #101928 !important;
  border-color: #1e293b !important;
  color: #cbd5e1 !important;
  box-shadow: none !important;
}

html.slate-theme #btnThemeToggle:hover,
html.slate-theme #userProfileBadge:hover,
html.light #btnThemeToggle:hover,
html.light #userProfileBadge:hover {
  background-color: #172439 !important;
  border-color: #334155 !important;
}

/* Головні сині кнопки (Додати ноутбук тощо) */
html.slate-theme button.bg-blue-600,
html.light button.bg-blue-600 {
  background: #0284c7 !important;
  border: 1px solid #0369a1 !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

html.slate-theme button.bg-blue-600:hover,
html.light button.bg-blue-600:hover {
  background: #0369a1 !important;
}

/* Поля вводу, форми та модалки */
html.slate-theme input,
html.slate-theme select,
html.slate-theme textarea,
html.light input,
html.light select,
html.light textarea {
  background-color: #070c15 !important;
  border: 1px solid #1e293b !important;
  color: #f8fafc !important;
}

html.slate-theme input:focus,
html.slate-theme select:focus,
html.slate-theme textarea:focus,
html.light input:focus,
html.light select:focus,
html.light textarea:focus {
  border-color: #0284c7 !important;
  outline: none !important;
  box-shadow: 0 0 0 1px #0284c7 !important;
}

html.slate-theme input::placeholder,
html.slate-theme textarea::placeholder,
html.light input::placeholder,
html.light textarea::placeholder {
  color: #475569 !important;
}

/* Модальні вікна */
html.slate-theme .fixed.inset-0.bg-black\/80,
html.slate-theme .fixed.inset-0.bg-black\/70,
html.slate-theme .fixed.inset-0.bg-black\/60,
html.light .fixed.inset-0.bg-black\/80,
html.light .fixed.inset-0.bg-black\/70,
html.light .fixed.inset-0.bg-black\/60 {
  background-color: rgba(3, 7, 18, 0.75) !important;
  backdrop-filter: blur(4px);
}

html.slate-theme #loginModal .bg-slate-900,
html.slate-theme #itemModal .bg-slate-900,
html.slate-theme #rateModal .bg-slate-900,
html.slate-theme #agentModal .bg-slate-900,
html.slate-theme #dropModal .bg-slate-900,
html.slate-theme #bulkStatusModal .bg-slate-900,
html.slate-theme #olxExportModal .bg-slate-900,
html.slate-theme #npTrackingModal .bg-slate-900,
html.light #loginModal .bg-slate-900,
html.light #itemModal .bg-slate-900,
html.light #rateModal .bg-slate-900,
html.light #agentModal .bg-slate-900,
html.light #dropModal .bg-slate-900,
html.light #bulkStatusModal .bg-slate-900,
html.light #olxExportModal .bg-slate-900,
html.light #npTrackingModal .bg-slate-900 {
  background-color: #0b111c !important;
  border: 1px solid #1e293b !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6) !important;
}

/* Таблиці */
html.slate-theme table,
html.light table {
  color: #f8fafc !important;
  background-color: #0d1422 !important;
}

html.slate-theme thead,
html.slate-theme table th,
html.light thead,
html.light table th {
  background-color: #080d16 !important;
  color: #94a3b8 !important;
  border-color: #1e293b !important;
  font-weight: 600 !important;
}

html.slate-theme tbody tr,
html.light tbody tr {
  border-color: #1e293b !important;
}

html.slate-theme tbody tr:hover td,
html.light tbody tr:hover td {
  background-color: #121c2e !important;
}

html.slate-theme table td,
html.light table td {
  border-color: #1e293b !important;
  color: #cbd5e1 !important;
}

/* Чіпи характеристик та код лота */
html.slate-theme span[class*="bg-slate-800"],
html.slate-theme span[class*="bg-slate-900"],
html.slate-theme span[class*="bg-slate-700"],
html.slate-theme .font-mono[class*="bg-slate-"],
html.light span[class*="bg-slate-800"],
html.light span[class*="bg-slate-900"],
html.light span[class*="bg-slate-700"],
html.light .font-mono[class*="bg-slate-"] {
  background-color: #0a101b !important;
  color: #cbd5e1 !important;
  border: 1px solid #1e293b !important;
}

/* Фільтри (Quick Filter Chips) */
html.slate-theme button[class*="bg-slate-800"],
html.slate-theme button[class*="bg-slate-700"],
html.slate-theme a[class*="bg-slate-800"],
html.slate-theme a[class*="bg-slate-700"],
html.light button[class*="bg-slate-800"],
html.light button[class*="bg-slate-700"],
html.light a[class*="bg-slate-800"],
html.light a[class*="bg-slate-700"] {
  background-color: #0b111c !important;
  color: #94a3b8 !important;
  border: 1px solid #1e293b !important;
}

html.slate-theme button[class*="bg-slate-800"]:hover,
html.slate-theme button[class*="bg-slate-700"]:hover,
html.slate-theme a[class*="bg-slate-800"]:hover,
html.slate-theme a[class*="bg-slate-700"]:hover,
html.light button[class*="bg-slate-800"]:hover,
html.light button[class*="bg-slate-700"]:hover,
html.light a[class*="bg-slate-800"]:hover,
html.light a[class*="bg-slate-700"]:hover {
  background-color: #151f30 !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}

/* Службові кнопки карток (Редагувати тощо) */
html.slate-theme button[onclick*="editItem"],
html.slate-theme button[onclick*="editAgent"],
html.slate-theme button[onclick*="editDrop"],
html.light button[onclick*="editItem"],
html.light button[onclick*="editAgent"],
html.light button[onclick*="editDrop"] {
  background-color: #101928 !important;
  border: 1px solid #1e293b !important;
  color: #cbd5e1 !important;
}

html.slate-theme button[onclick*="editItem"]:hover,
html.slate-theme button[onclick*="editAgent"]:hover,
html.slate-theme button[onclick*="editDrop"]:hover,
html.light button[onclick*="editItem"]:hover,
html.light button[onclick*="editAgent"]:hover,
html.light button[onclick*="editDrop"]:hover {
  background-color: #18253b !important;
  border-color: #0284c7 !important;
  color: #38bdf8 !important;
}

/* Статусні бейджі (Стримані монохромно-сині та нейтральні) */
html.slate-theme .badge-in_transit,
html.light .badge-in_transit {
  background-color: #0c1a2e !important;
  color: #93c5fd !important;
  border: 1px solid #1e3a5f !important;
}

html.slate-theme .badge-workshop,
html.light .badge-workshop {
  background-color: #0d1e38 !important;
  color: #38bdf8 !important;
  border: 1px solid #0284c7 !important;
}

html.slate-theme .badge-inventory,
html.light .badge-inventory {
  background-color: #091a1e !important;
  color: #7dd3fc !important;
  border: 1px solid #0369a1 !important;
}

html.slate-theme .badge-sold,
html.light .badge-sold {
  background-color: #131b2a !important;
  color: #cbd5e1 !important;
  border: 1px solid #334155 !important;
}

html.slate-theme .badge-parts,
html.light .badge-parts {
  background-color: #0b111c !important;
  color: #64748b !important;
  border: 1px solid #1e293b !important;
}

/* scrapAI кнопка в шапці для стриманої теми (без рожевого) */
html.slate-theme #btnHeaderScrapAI,
html.light #btnHeaderScrapAI {
  background: #0f1c2e !important;
  border-color: #1e3a5f !important;
  box-shadow: none !important;
}

html.slate-theme #btnHeaderScrapAI span,
html.light #btnHeaderScrapAI span {
  color: #93c5fd !important;
}


   МОБІЛЬНА АДАПТАЦІЯ (SMARTPHONE & TOUCH UX)
   ========================================================================== */

/* Запобігання горизонтальному зміщенню екрана на телефонах */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

/* Безпечні відступи для сучасних смартфонів (iPhone Notch & Home Indicator) */
#mobileBottomNav {
  padding-bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px));
}

body {
  padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}

/* Запобігання небажаному автозуму Safari на iOS при натисканні на інпути */
@media (max-width: 640px) {
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Покращений комфорт модальних вікон на малих екранах */
  #itemModal > div,
  #sellModal > div,
  #agentModal > div,
  #dropModal > div,
  #rateModal > div {
    max-height: 90vh;
    border-radius: 1.25rem;
  }
}

/* Стилізація висувного мобільного меню "Більше" для світлої теми */
html.slate-theme, html.light #mobileMoreSheet > div {
  background-color: #0b111c !important;
  border-top-color: #1e293b !important;
  box-shadow: 0 -10px 25px -5px rgba(225, 29, 72, 0.08) !important;
}

html.slate-theme, html.light #mobileMoreSheet button {
  background-color: #101928 !important;
  border-color: #1e293b !important;
  color: #f8fafc !important;
}

html.slate-theme, html.light #mobileMoreSheet button:hover {
  background-color: #1e293b !important;
}

html.slate-theme, html.light #mobileMoreSheet .text-white {
  color: #f8fafc !important;
}

html.slate-theme, html.light #mobileMoreSheet .text-slate-300,
html.slate-theme, html.light #mobileMoreSheet .text-slate-400 {
  color: #94a3b8 !important;
}

/* Митні документи */
html.slate-theme #customsDocsList > div,
html.light #customsDocsList > div {
  background-color: #0b111c !important;
  border-color: #1e293b !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

html.slate-theme #customsDocsList a,
html.light #customsDocsList a {
  color: #93c5fd !important;
}

html.slate-theme #customsDocsList a:hover,
html.light #customsDocsList a:hover {
  color: #38bdf8 !important;
}