/* =================================================================
   MONO MEBEL Admin — Premium UI v2
   Smooth 120fps animations • Glassmorphism • Micro-interactions
================================================================= */

/* Shriftlar endi lokal: index.html -> vendor/fonts.css (offlayn ishlaydi) */

/* ================================================================
   ANIMATION TIMING CONSTANTS
================================================================= */
:root {
  /* Easing curves */
  --spring:   cubic-bezier(0.16, 1, 0.3, 1);
  --snappy:   cubic-bezier(0.4, 0, 0.2, 1);
  --bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --linear:   linear;

  /* Durations */
  --dur-xs:   80ms;
  --dur-sm:   150ms;
  --dur-md:   250ms;
  --dur-lg:   350ms;
  --dur-xl:   500ms;

  /* Colors */
  --bg:           hsl(228, 25%, 98%);
  --fg:           hsl(224, 71%, 4%);
  --card-bg:      hsl(0, 0%, 100%);
  --muted-fg:     hsl(220, 16%, 48%);
  --accent-bg:    hsl(228, 30%, 95%);
  --primary:      hsl(231, 50%, 40%);
  --primary-fg:   hsl(210, 40%, 98%);
  --border:       hsl(228, 20%, 91%);
  --input-bg:     hsl(0, 0%, 100%);
  --input-border: hsl(228, 20%, 88%);
  --radius:       0.75rem;
  --page-bg:      hsl(228, 28%, 97%);
  --sidebar-bg:   hsl(231, 42%, 16%);
  --sidebar-border: hsl(231, 35%, 24%);

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:    0 4px 8px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-xl:    0 20px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);
  --shadow-glow:  0 0 0 3px hsla(231, 50%, 40%, 0.15);
}

/* ================================================================
   DARK MODE VARIABLES
================================================================= */
html.dark {
  --bg:           hsl(231, 35%, 6%);
  --fg:           hsl(210, 40%, 96%);
  --card-bg:      hsl(231, 32%, 9%);
  --muted-fg:     hsl(220, 20%, 60%);
  --accent-bg:    hsl(231, 28%, 15%);
  --primary:      hsl(228, 75%, 68%);
  --primary-fg:   hsl(231, 42%, 12%);
  --border:       hsl(231, 28%, 18%);
  --input-bg:     hsl(231, 30%, 11%);
  --input-border: hsl(231, 28%, 20%);
  --page-bg:      hsl(231, 35%, 5%);
  --sidebar-bg:   hsl(231, 40%, 7%);
  --sidebar-border: hsl(231, 30%, 16%);
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:    0 4px 8px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
  --shadow-xl:    0 20px 48px rgba(0,0,0,0.5), 0 8px 16px rgba(0,0,0,0.3);
  --shadow-glow:  0 0 0 3px hsla(228, 75%, 68%, 0.2);
}

/* ================================================================
   BASE RESET
================================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Inter', 'Nunito', ui-sans-serif, system-ui, sans-serif !important;
  background: var(--page-bg) !important;
  color: var(--fg) !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ================================================================
   SCROLLBAR
================================================================= */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: hsl(228, 15%, 82%);
  border-radius: 10px;
  transition: background var(--dur-sm) var(--snappy);
}
::-webkit-scrollbar-thumb:hover { background: hsl(228, 15%, 68%); }
html.dark ::-webkit-scrollbar-thumb { background: hsl(231, 25%, 25%); }
html.dark ::-webkit-scrollbar-thumb:hover { background: hsl(231, 25%, 35%); }

/* ================================================================
   SIDEBAR
================================================================= */
#sidebar {
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--sidebar-border) !important;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 20;
  flex-shrink: 0;
  width: 16rem;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset -1px 0 0 var(--sidebar-border), 2px 0 24px rgba(0,0,0,0.12);
}

#sidebar.sidebar-collapsed {
  width: 4rem;
}

/* ================================================================
   SIDEBAR BUTTONS
================================================================= */
.sidebar-btn {
  position: relative;
  transition:
    background var(--dur-sm) var(--snappy),
    color var(--dur-sm) var(--snappy),
    transform var(--dur-xs) var(--snappy);
  will-change: transform;
  border-radius: 0.5rem;
  overflow: hidden;
}

.sidebar-btn:focus { outline: none; }

.sidebar-btn:active {
  transform: scale(0.97);
}

/* Active sidebar item */
.sidebar-btn.active {
  background: rgba(255,255,255,0.12) !important;
  color: white !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* Active indicator bar */
.sidebar-btn.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: white;
  border-radius: 0 3px 3px 0;
  opacity: 0.9;
}

.sidebar-btn:hover:not(.active) {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.95) !important;
}

.sidebar-btn span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  transition: transform var(--dur-sm, .25s) cubic-bezier(.34, 1.56, .64, 1);
}

/* ================================================================
   SIDEBAR ICON ANIMATIONS
================================================================= */

/* Kirish: tugmalar ketma-ket chapdan suzib kiradi (login/showDashboard'da) */
#sidebar nav.nav-enter .sidebar-btn {
  animation: navItemIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--nav-i, 0) * 35ms);
}

@keyframes navItemIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Icon — yumshoq prujinali harakat */
.sidebar-btn svg {
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.2s ease,
    filter 0.3s ease;
  will-change: transform;
}

/* Hover: icon kattalashib biroz buriladi, yozuv o'ngga siljiydi */
.sidebar-btn:hover:not(.active) svg {
  transform: scale(1.2) rotate(-8deg);
  color: #fff;
}

.sidebar-btn:hover span {
  transform: translateX(3px);
}

/* Faol bo'lim: icon "pop" bo'lib porlaydi */
.sidebar-btn.active svg {
  animation: navIconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: #fff;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55));
}

@keyframes navIconPop {
  0%   { transform: scale(0.5) rotate(-18deg); }
  55%  { transform: scale(1.3) rotate(7deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Faol bo'lganda yorug'lik chizig'i tugma ustidan o'tadi */
.sidebar-btn.active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.16) 50%, transparent 75%);
  transform: translateX(-100%);
  animation: navSweep 0.9s ease 0.1s forwards;
  pointer-events: none;
}

@keyframes navSweep {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  #sidebar nav.nav-enter .sidebar-btn,
  .sidebar-btn.active svg,
  .sidebar-btn.active::after {
    animation: none !important;
  }
  .sidebar-btn svg,
  .sidebar-btn span {
    transition: none !important;
  }
}

/* ================================================================
   MAIN CONTENT
================================================================= */
#mainContent {
  margin-left: 16rem;
  min-width: 0;
  flex: 1 1 0%;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#sidebar.sidebar-collapsed ~ #mainContent {
  margin-left: 4rem;
}

/* ================================================================
   HEADER — Glassmorphism
================================================================= */
header {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255,255,255,0.85) !important;
  border-bottom: 1px solid rgba(228, 228, 237, 0.6) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), var(--shadow-sm);
  will-change: transform;
}

html.dark header {
  background: rgba(16, 18, 36, 0.85) !important;
  border-bottom-color: rgba(48, 54, 90, 0.5) !important;
}

/* ================================================================
   SECTION TRANSITIONS
================================================================= */
.section {
  animation: sectionEnter var(--dur-lg) var(--spring) both;
  will-change: opacity, transform;
}

.section.hidden {
  display: none !important;
  animation: none;
}

@keyframes sectionEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================================================================
   CARDS — Hover lift
================================================================= */
.user-card,
.supplier-card,
.product-card {
  transition:
    box-shadow var(--dur-md) var(--snappy),
    transform var(--dur-md) var(--spring),
    border-color var(--dur-md) var(--snappy);
  will-change: transform, box-shadow;
}

.user-card:hover,
.supplier-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: hsl(231, 30%, 82%);
}

html.dark .user-card:hover,
html.dark .supplier-card:hover {
  border-color: hsl(231, 30%, 28%);
  box-shadow: var(--shadow-lg);
}

/* Generic card hover for stat/info cards */
.rounded-2xl,
.rounded-xl {
  transition:
    box-shadow var(--dur-md) var(--snappy),
    transform var(--dur-md) var(--spring);
  will-change: transform;
}

/* ================================================================
   BUTTONS — Press animation + transitions
================================================================= */
button {
  transition:
    background var(--dur-sm) var(--snappy),
    color var(--dur-sm) var(--snappy),
    border-color var(--dur-sm) var(--snappy),
    box-shadow var(--dur-sm) var(--snappy),
    transform var(--dur-xs) var(--snappy),
    opacity var(--dur-sm) var(--snappy);
  will-change: transform;
}

button:active:not(:disabled) {
  transform: scale(0.96) !important;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary buttons glow */
.bg-blue-800:hover,
.bg-blue-900:hover {
  box-shadow: 0 4px 16px hsla(231, 50%, 40%, 0.4);
}

/* ================================================================
   INPUTS — Animated focus
================================================================= */
input, select, textarea {
  transition:
    border-color var(--dur-sm) var(--snappy),
    box-shadow var(--dur-sm) var(--snappy),
    background var(--dur-sm) var(--snappy);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary) !important;
  box-shadow: var(--shadow-glow) !important;
}

html.dark input,
html.dark select,
html.dark textarea {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--fg) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: var(--muted-fg) !important;
}

/* ================================================================
   MODALS — Scale + Fade animations
================================================================= */

/* Overlay fade */
[id$="Modal"]:not(.hidden) {
  animation: overlayFadeIn var(--dur-md) var(--snappy) both;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Modal panel spring entrance */
[id$="Modal"]:not(.hidden) > div:first-child {
  animation: modalEnter var(--dur-lg) var(--spring) both;
  will-change: transform, opacity;
}

@keyframes modalEnter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(16px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ================================================================
   LOGIN PAGE — Animated gradient background
================================================================= */
#loginPage {
  position: relative;
  background: var(--page-bg) !important;
  overflow: hidden;
}

#loginPage::before,
#loginPage::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
  will-change: transform;
}

#loginPage::before {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, hsl(231, 70%, 60%) 0%, transparent 70%);
  top: -200px;
  right: -100px;
  animation: orb1 12s ease-in-out infinite alternate;
}

#loginPage::after {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, hsl(195, 80%, 55%) 0%, transparent 70%);
  bottom: -150px;
  left: -100px;
  animation: orb2 15s ease-in-out infinite alternate;
}

@keyframes orb1 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-60px, 40px) scale(1.1); }
  100% { transform: translate(40px, -30px) scale(0.95); }
}

@keyframes orb2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(50px, -40px) scale(1.08); }
  100% { transform: translate(-30px, 30px) scale(1.02); }
}

html.dark #loginPage::before { opacity: 0.15; }
html.dark #loginPage::after  { opacity: 0.12; }

/* Login card animation */
#loginPage > div {
  position: relative;
  z-index: 1;
  animation: loginCardEnter 0.6s var(--spring) both;
  will-change: transform, opacity;
}

@keyframes loginCardEnter {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ================================================================
   TOAST
================================================================= */
.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  background: white;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 0.1rem);
  padding: 0.875rem 1.125rem;
  box-shadow: var(--shadow-xl);
  font-family: 'Inter', 'Nunito', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  max-width: 380px;
  will-change: transform, opacity;
  animation: toastEnter 0.4s var(--spring) both;
}

.toast.success {
  border-left: 3px solid #22c55e;
  color: #15803d;
  background: linear-gradient(135deg, #f0fdf4, #ffffff);
}
.toast.error {
  border-left: 3px solid #ef4444;
  color: #b91c1c;
  background: linear-gradient(135deg, #fef2f2, #ffffff);
}
.toast.info {
  border-left: 3px solid var(--primary);
  color: var(--primary);
  background: linear-gradient(135deg, hsl(231, 30%, 97%), #ffffff);
}
.toast svg { width: 1rem; height: 1rem; flex-shrink: 0; }

@keyframes toastEnter {
  from {
    opacity: 0;
    transform: translateX(100%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

html.dark .toast {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
  color: var(--fg) !important;
}
html.dark .toast.success {
  color: hsl(142, 60%, 60%) !important;
  border-left-color: hsl(142, 60%, 50%) !important;
  background: linear-gradient(135deg, hsl(142,30%,10%), var(--card-bg)) !important;
}
html.dark .toast.error {
  color: hsl(0, 80%, 70%) !important;
  border-left-color: hsl(0, 80%, 60%) !important;
  background: linear-gradient(135deg, hsl(0,30%,10%), var(--card-bg)) !important;
}

/* ================================================================
   SKELETON SHIMMER (loading placeholders)
================================================================= */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    hsl(228, 20%, 93%) 25%,
    hsl(228, 20%, 97%) 50%,
    hsl(228, 20%, 93%) 75%
  );
  background-size: 400px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius);
}

html.dark .skeleton {
  background: linear-gradient(
    90deg,
    hsl(231, 28%, 14%) 25%,
    hsl(231, 28%, 20%) 50%,
    hsl(231, 28%, 14%) 75%
  );
  background-size: 400px 100%;
}

/* ================================================================
   STAT CARDS — Gradient variants
================================================================= */
.stat-card-green {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: #bbf7d0;
}
.stat-card-red {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-color: #fecaca;
}
.stat-card-blue {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #bfdbfe;
}
.stat-card-orange {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border-color: #fed7aa;
}

/* ================================================================
   LANGUAGE BUTTON
================================================================= */
.lang-btn-active {
  background: var(--sidebar-bg) !important;
  color: #fff !important;
}

/* ================================================================
   QUICK NAV ACTIVE
================================================================= */
.quick-nav-btn.active {
  background: var(--primary) !important;
  color: var(--primary-fg) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 2px 8px hsla(231, 50%, 40%, 0.3);
}

/* ================================================================
   SECTION VISIBILITY
================================================================= */
.section.hidden { display: none !important; animation: none !important; }

/* ================================================================
   ROLE BADGES
================================================================= */
.role-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.role-super_admin, .role-Суперадминистратор {
  background: linear-gradient(135deg, #fca5a5, #fecdd3);
  color: #7f1d1d;
}
.role-seller, .role-Продавец {
  background: var(--primary);
  color: var(--primary-fg);
}
.role-warehouse, .role-Заведующий-складом {
  background: #e2e8f0;
  color: #1e293b;
}
.role-finance, .role-cashier, .role-product_manager, .role-sales_manager,
.role-Финансист, .role-Кассир {
  background: transparent;
  color: #374151;
  border-color: #d1d5db;
}
.role-default { background: var(--primary); color: var(--primary-fg); }

.status-active {
  display: inline-flex; align-items: center; border-radius: 9999px;
  padding: 2px 10px; font-size: 0.75rem; font-weight: 600;
  background: linear-gradient(135deg, hsl(231, 50%, 40%), hsl(231, 60%, 50%));
  color: var(--primary-fg);
}
.status-inactive {
  display: inline-flex; align-items: center; border-radius: 9999px;
  padding: 2px 10px; font-size: 0.75rem; font-weight: 600;
  background: #e2e8f0; color: #475569;
}

/* ================================================================
   DARK MODE — OVERRIDES
================================================================= */

/* Page background */
html.dark body,
html.dark #dashboardPage,
html.dark main,
html.dark .bg-gray-50,
html.dark .bg-gray-100 {
  background: var(--page-bg) !important;
}

/* White surfaces */
html.dark .bg-white,
html.dark header {
  background: var(--card-bg) !important;
}

/* All modal inner boxes */
html.dark [id$="Modal"] > div > div:first-child {
  background: var(--card-bg) !important;
}

/* Section cards */
html.dark .rounded-xl,
html.dark .rounded-2xl {
  background-color: var(--card-bg);
}

/* Override bg-white inside sections */
html.dark #sectionOverview .bg-white,
html.dark #sectionUsers .bg-white,
html.dark #sectionWarehouseCatalog .bg-white,
html.dark #sectionProductManagerProducts .bg-white,
html.dark #sectionSuppliers .bg-white,
html.dark #sectionWarehouseOverview .bg-white,
html.dark #sectionWarehouseArrivals .bg-white,
html.dark #sectionWarehouseExpenses .bg-white,
html.dark #sectionWarehouseProducts .bg-white,
html.dark #sectionWarehouseInventory .bg-white,
html.dark #sectionRepair .bg-white,
html.dark #sectionLogisticsOverview .bg-white,
html.dark #sectionFinanceJournal .bg-white,
html.dark #sectionFinanceSummary .bg-white,
html.dark #sectionFinanceSales .bg-white,
html.dark #sectionFinanceAuditLog .bg-white,
html.dark #sectionSellerHome .bg-white,
html.dark #sectionSellerDeals .bg-white,
html.dark #sectionSellerCatalog .bg-white,
html.dark #sectionSellerCart .bg-white {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
}

/* Borders */
html.dark [class*="border-gray"] {
  border-color: var(--border) !important;
}

/* Text */
html.dark .text-gray-900,
html.dark .text-gray-800 { color: var(--fg) !important; }
html.dark .text-gray-700,
html.dark .text-gray-600 { color: hsl(220, 20%, 75%) !important; }
html.dark .text-gray-500,
html.dark .text-gray-400 { color: var(--muted-fg) !important; }

/* Ghost/outline buttons */
html.dark button[class*="border-gray"],
html.dark button.border-gray-300 {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
  color: var(--fg) !important;
}
html.dark button[class*="border-gray"]:hover {
  background: var(--accent-bg) !important;
}

/* Primary buttons */
html.dark .bg-blue-800,
html.dark .bg-blue-900 {
  background: var(--primary) !important;
  color: var(--primary-fg) !important;
}

/* Colored light backgrounds */
html.dark .bg-blue-50 { background: hsl(214, 30%, 13%) !important; }
html.dark .bg-green-50 { background: hsl(142, 30%, 12%) !important; }
html.dark .bg-red-50 { background: hsl(0, 30%, 12%) !important; }
html.dark .bg-orange-50 { background: hsl(25, 30%, 12%) !important; }
html.dark .bg-yellow-50 { background: hsl(45, 30%, 12%) !important; }
html.dark .bg-purple-50 { background: hsl(260, 30%, 13%) !important; }
html.dark .bg-gray-50 { background: var(--accent-bg) !important; }

/* Colored text in dark */
html.dark .text-blue-700, html.dark .text-blue-800 { color: hsl(214, 80%, 70%) !important; }
html.dark .text-green-700, html.dark .text-green-800 { color: hsl(142, 60%, 60%) !important; }
html.dark .text-red-700, html.dark .text-red-800 { color: hsl(0, 80%, 70%) !important; }
html.dark .text-orange-700, html.dark .text-orange-800 { color: hsl(25, 80%, 65%) !important; }
html.dark .text-purple-700, html.dark .text-purple-800 { color: hsl(260, 75%, 75%) !important; }

/* Badges */
html.dark .bg-purple-100 { background: hsl(260, 35%, 18%) !important; }
html.dark .text-purple-800 { color: hsl(260, 80%, 80%) !important; }
html.dark .role-warehouse,
html.dark .role-Заведующий-складом { background: hsl(231, 28%, 20%) !important; color: var(--fg) !important; }
html.dark .role-finance, html.dark .role-cashier, html.dark .role-product_manager,
html.dark .role-sales_manager, html.dark .role-Финансист, html.dark .role-Кассир {
  background: transparent !important; color: var(--fg) !important; border-color: var(--border) !important;
}
html.dark .role-super_admin,
html.dark .role-Суперадминистратор { background: hsl(0, 35%, 18%) !important; color: hsl(0, 80%, 75%) !important; }
html.dark .status-inactive { background: hsl(231, 28%, 15%) !important; color: var(--muted-fg) !important; }

/* Header dark */
html.dark header {
  background: rgba(12, 14, 28, 0.9) !important;
}

/* Shadows in dark */
html.dark .shadow-sm { box-shadow: var(--shadow-sm) !important; }
html.dark .shadow    { box-shadow: var(--shadow-md) !important; }
html.dark .shadow-lg { box-shadow: var(--shadow-lg) !important; }
html.dark .shadow-xl { box-shadow: var(--shadow-xl) !important; }

/* Login page dark */
html.dark #loginPage {
  background: linear-gradient(135deg, hsl(231, 35%, 5%) 0%, hsl(231, 42%, 8%) 100%) !important;
}

/* ================================================================
   WAREHOUSE SECTION — Enhanced cards
================================================================= */
#sectionWarehouseOverview .rounded-2xl:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

#sectionWarehouseOverview button.flex-col {
  transition: all var(--dur-md) var(--spring);
  will-change: transform;
}
#sectionWarehouseOverview button.flex-col:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ================================================================
   TABLE ROWS — Hover highlight
================================================================= */
tr {
  transition: background var(--dur-xs) var(--snappy);
}
tr:hover td {
  background: hsl(228, 30%, 97%) !important;
}
html.dark tr:hover td {
  background: var(--accent-bg) !important;
}

/* ================================================================
   PRODUCT LIST ITEMS — Smooth hover
================================================================= */
#productsList > div {
  transition:
    box-shadow var(--dur-md) var(--snappy),
    border-color var(--dur-md) var(--snappy),
    transform var(--dur-md) var(--spring);
  will-change: transform;
}

#productsList > div:hover {
  border-color: hsl(231, 35%, 75%) !important;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

html.dark #productsList > div:hover {
  border-color: hsl(231, 30%, 28%) !important;
}

/* ================================================================
   ICON THEME TOGGLE
================================================================= */
.icon-sun  { display: inline-block; }
.icon-moon { display: none; }
html.dark .icon-sun  { display: none; }
html.dark .icon-moon { display: inline-block; }

/* ================================================================
   PERMISSIONS MODAL — Checkbox label transitions
================================================================= */
#permSectionsGrid label {
  transition:
    background var(--dur-sm) var(--snappy),
    border-color var(--dur-sm) var(--snappy),
    color var(--dur-sm) var(--snappy),
    transform var(--dur-xs) var(--snappy);
  will-change: transform;
}

#permSectionsGrid label:hover {
  transform: scale(1.02);
}

#permSectionsGrid label:active {
  transform: scale(0.98);
}

/* ================================================================
   NUMBER COUNTER ANIMATION
================================================================= */
@keyframes countUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stat-number {
  animation: countUp var(--dur-lg) var(--spring) both;
}

/* ================================================================
   SIDEBAR — COLLAPSIBLE & MOBILE OFF-CANVAS
================================================================= */

/* ── Desktop sidebar ── */
@media (min-width: 768px) {
  #sidebar.sidebar-collapsed .sidebar-btn span,
  #sidebar.sidebar-collapsed nav p,
  #sidebar.sidebar-collapsed [data-i18n-group],
  #sidebar.sidebar-collapsed [data-i18n="sidebar.brand"],
  #sidebar.sidebar-collapsed .sidebar-brand-extra { display: none; }
  /* Yig'ilganda sarlavhada faqat toggle tugmasi qoladi (markazda) */
  #sidebar.sidebar-collapsed .sidebar-btn {
    justify-content: center;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  #sidebar.sidebar-collapsed > div:first-child {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ── Mobile sidebar: LIQUID GLASS — pastdan suyuq, prujinali chiqadi ── */
@media (max-width: 767px) {
  /* Header'dagi hamburger yashirin — menyu pastki tab-bar orqali ochiladi */
  header button.md\:hidden { display: none !important; }

  #sidebar {
    width: 100vw !important;
    max-width: none !important;
    height: 100vh;
    height: 100dvh;
    z-index: 400; /* tab-bar (150) ustida */
    transform: translateY(105%) scale(0.96);
    opacity: 0;
    border-radius: 30px 30px 0 0;
    overflow: hidden;
    /* Liquid glass: orqadagi kontent xira shisha orqali ko'rinadi */
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.8);
    backdrop-filter: blur(28px) saturate(1.8);
    border-right: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
      0 -20px 60px rgba(15, 23, 42, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition:
      transform 0.55s cubic-bezier(0.22, 1.36, 0.36, 1),
      opacity 0.3s ease,
      border-radius 0.55s ease !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom);
  }
  html.dark #sidebar {
    background: rgba(10, 16, 34, 0.55) !important;
    border-top-color: rgba(255, 255, 255, 0.14);
    box-shadow:
      0 -20px 60px rgba(0, 0, 0, 0.45),
      inset 0 1px 0 rgba(255, 255, 255, 0.10);
  }
  /* Eski qurilmalar (backdrop-filter yo'q) — shaffoflik kamaytiriladi */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #sidebar { background: rgba(255, 255, 255, 0.96) !important; }
    html.dark #sidebar { background: rgba(10, 16, 34, 0.97) !important; }
  }

  #sidebar.sidebar-open {
    transform: translateY(0) scale(1) !important;
    opacity: 1;
    border-radius: 0;
  }
  #sidebar.sidebar-collapsed {
    width: 100vw !important;
    transform: translateY(105%) scale(0.96);
  }
  #sidebar.sidebar-collapsed.sidebar-open {
    transform: translateY(0) scale(1) !important;
    opacity: 1;
  }

  /* Ochilganda shisha ustidan yorug'lik chizig'i (specular sheen) o'tadi */
  #sidebar::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg,
      transparent 30%,
      rgba(255, 255, 255, 0.30) 45%,
      rgba(255, 255, 255, 0.06) 58%,
      transparent 72%);
    transform: translateX(-130%);
    opacity: 0;
  }
  #sidebar.sidebar-open::after {
    animation: mmGlassSheen 1s ease 0.18s both;
  }

  /* Yorug' rejim: oq shisha ustida qoramtir matn (oq matn o'qilmaydi) */
  html:not(.dark) #sidebar { color: #0f172a; }
  html:not(.dark) #sidebar .sidebar-btn { color: rgba(15, 23, 42, 0.78) !important; }
  html:not(.dark) #sidebar .sidebar-btn:hover:not(.active) {
    background: rgba(15, 23, 42, 0.07) !important;
    color: #0f172a !important;
  }
  html:not(.dark) #sidebar .sidebar-btn.active {
    background: rgba(37, 99, 235, 0.14) !important;
    color: #1d4ed8 !important;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
  }
  html:not(.dark) #sidebar .sidebar-btn.active::before { background: #2563eb; }
  html:not(.dark) #sidebar nav p,
  html:not(.dark) #sidebar [data-i18n-group] { color: rgba(15, 23, 42, 0.45) !important; }
  html:not(.dark) #sidebar > div:first-child { border-color: rgba(15, 23, 42, 0.10) !important; }
  html:not(.dark) #sidebar > div:first-child button {
    background: rgba(15, 23, 42, 0.06) !important;
    color: #0f172a !important;
  }
  html:not(.dark) #sidebar img[alt="logo"] { background: rgba(15, 23, 42, 0.06) !important; }

  /* Menyu bandlari suyuq prujina bilan pastdan suzib chiqadi */
  #sidebar nav.nav-enter .sidebar-btn {
    animation: mmNavItemLiquid 0.55s cubic-bezier(0.22, 1.4, 0.36, 1) both;
    animation-delay: calc(var(--nav-i, 0) * 40ms + 100ms);
  }

  /* To'liq ekranda ham yig'ilgan holat ko'rinmasin — yozuvlar doim ochiq */
  #sidebar.sidebar-collapsed .sidebar-btn span,
  #sidebar.sidebar-collapsed nav p,
  #sidebar.sidebar-collapsed [data-i18n-group],
  #sidebar.sidebar-collapsed [data-i18n="sidebar.brand"],
  #sidebar.sidebar-collapsed .sidebar-brand-extra { display: flex !important; }
  #sidebar nav {
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom));
  }
  /* Menyu tugmalari telefonda kattaroq — barmoq uchun qulay */
  #sidebar .sidebar-btn { padding-top: 0.8rem; padding-bottom: 0.8rem; font-size: 0.95rem; border-radius: 0.9rem; }
  #sidebar .sidebar-btn svg { height: 1.2rem; width: 1.2rem; }
  #mainContent,
  #sidebar.sidebar-collapsed ~ #mainContent {
    margin-left: 0 !important;
  }

  /* Qora fon (overlay) kerak emas — shisha panel o'zi butun ekranni qoplaydi */
  #sidebarOverlay { display: none !important; }
}

@keyframes mmGlassSheen {
  0%   { transform: translateX(-130%); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateX(130%); opacity: 0; }
}
@keyframes mmNavItemLiquid {
  from { opacity: 0; transform: translateY(24px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Mobile overlay (endi ishlatilmaydi — shisha panel to'liq ekran) ── */
#sidebarOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 200;
  cursor: pointer;
}
#sidebarOverlay.active { display: block; }

/* ── Section entrance animations ── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cardPop {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ================================================================
   PROFILE PANEL (top-right dropdown)
================================================================= */
#profilePanel {
  position: fixed;
  top: 4.25rem;
  right: 0.75rem;
  z-index: 100;
  width: 18.5rem;
  background: white;
  border-radius: 1.25rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.16), 0 6px 16px rgba(0,0,0,0.08);
  border: 1px solid hsl(228, 20%, 90%);
  overflow: hidden;
  transform-origin: top right;
  display: none;
}
#profilePanel.active {
  display: block;
  animation: profileIn 0.22s cubic-bezier(0.16,1,0.3,1);
}
@keyframes profileIn {
  from { opacity: 0; transform: scale(0.86) translateY(-12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Profile theme switch pill */
.theme-pill {
  width: 2.75rem; height: 1.5rem;
  background: #e2e8f0;
  border-radius: 9999px;
  position: relative;
  transition: background 0.2s;
  cursor: pointer;
  flex-shrink: 0;
}
.theme-pill::after {
  content: '';
  position: absolute;
  width: 1.125rem; height: 1.125rem;
  background: white;
  border-radius: 50%;
  top: 3px; left: 3px;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.theme-pill.on { background: hsl(231,50%,40%); }
.theme-pill.on::after { transform: translateX(1.25rem); }

/* Profile panel dark mode */
html.dark #profilePanel {
  background: var(--card-bg) !important;
  border-color: var(--border) !important;
}
html.dark #profilePanel .profile-row:hover { background: var(--accent-bg) !important; }
html.dark #profilePanel .text-gray-700 { color: var(--fg) !important; }
html.dark #profilePanel .text-gray-500 { color: var(--muted-fg) !important; }
html.dark #profilePanel .border-t { border-color: var(--border) !important; }
html.dark #profilePanel .bg-gray-100 { background: var(--accent-bg) !important; }
html.dark #profilePanel .bg-gray-50  { background: hsl(231,30%,10%) !important; }
html.dark #profilePanel .lang-pill-btn { background: hsl(231,30%,14%) !important; border-color: var(--border) !important; color: var(--fg) !important; }
html.dark #profilePanel .lang-pill-btn.active { background: var(--primary) !important; color: var(--primary-fg) !important; }

/* ================================================================
   CHART CONTAINER FADE
================================================================= */
canvas {
  animation: sectionEnter var(--dur-xl) var(--spring) both;
}

/* ================================================================
   RIPPLE EFFECT — Applied via JS
================================================================= */
.ripple-container {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  animation: rippleAnim 0.5s var(--snappy) forwards;
  pointer-events: none;
}

@keyframes rippleAnim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ================================================================
   STAGGERED LIST ANIMATIONS
================================================================= */
#usersList > div:nth-child(1)  { animation-delay: 0ms; }
#usersList > div:nth-child(2)  { animation-delay: 40ms; }
#usersList > div:nth-child(3)  { animation-delay: 80ms; }
#usersList > div:nth-child(4)  { animation-delay: 120ms; }
#usersList > div:nth-child(5)  { animation-delay: 160ms; }
#usersList > div:nth-child(6)  { animation-delay: 200ms; }
#usersList > div:nth-child(n+7) { animation-delay: 240ms; }

#productsList > div:nth-child(1)  { animation-delay: 0ms; }
#productsList > div:nth-child(2)  { animation-delay: 40ms; }
#productsList > div:nth-child(3)  { animation-delay: 80ms; }
#productsList > div:nth-child(4)  { animation-delay: 120ms; }
#productsList > div:nth-child(5)  { animation-delay: 160ms; }
#productsList > div:nth-child(n+6) { animation-delay: 200ms; }

/* ================================================================
   FOCUS VISIBLE — Keyboard navigation
================================================================= */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ================================================================
   SMOOTH IMAGE LOADING
================================================================= */
img {
  transition: opacity var(--dur-md) var(--snappy);
}

img[loading] {
  opacity: 0;
}

img.loaded {
  opacity: 1;
}

/* ================================================================
   VERTICAL DIVIDER ANIMATION
================================================================= */
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* ================================================================
   TAILWIND OVERRIDES — Smooth transitions on common utilities
================================================================= */
.transition { transition-duration: var(--dur-md) !important; }
.transition-colors {
  transition:
    color var(--dur-sm) var(--snappy),
    background-color var(--dur-sm) var(--snappy),
    border-color var(--dur-sm) var(--snappy) !important;
}

/* ================================================================
   MOBILE — Responsive sidebar (handled above in max-width:767px)
================================================================= */

/* ================================================================
   REDUCED MOTION — Accessibility
================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================================
   SAHIFA SARLAVHA IKONKASI — gradient badge + animatsiya
================================================================= */
.page-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  width: 2.75rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%);
  box-shadow: 0 8px 18px -8px rgba(30, 58, 138, 0.55);
  color: #fff;
  transition: transform 0.35s var(--spring), box-shadow 0.35s var(--spring);
  animation: pageIconIn 0.55s var(--spring) both;
}
.page-icon-sm { height: 2rem; width: 2rem; border-radius: 0.65rem; }
.page-icon svg { color: #fff; }
.page-icon:hover {
  transform: translateY(-2px) scale(1.06) rotate(3deg);
  box-shadow: 0 12px 24px -8px rgba(30, 58, 138, 0.65);
}
@keyframes pageIconIn {
  0%   { opacity: 0; transform: scale(0.5) rotate(-12deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* ================================================================
   SELLER CATALOG — product cards & swipeable image carousel
================================================================= */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Horizontal swipe carousel (native touch + scroll-snap) */
.cat-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.cat-slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  overflow: hidden;
}
.cat-img {
  display: block;
  transition: transform 0.6s var(--spring);
  animation: catImgFade 0.45s var(--snappy) both;
}
.cat-carousel-wrap:hover .cat-img { transform: scale(1.05); }
@keyframes catImgFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Card hover lift */
.seller-card {
  transition: transform var(--dur-md) var(--spring),
              box-shadow var(--dur-md) var(--spring),
              border-color var(--dur-sm) var(--snappy);
}
.seller-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -12px hsl(231 50% 40% / 0.22);
}

/* Carousel nav arrows — reveal on hover/focus */
.cat-nav {
  opacity: 0;
  transition: opacity var(--dur-sm) var(--snappy), background var(--dur-sm) var(--snappy);
}
.seller-card:hover .cat-nav,
.cat-carousel-wrap:focus-within .cat-nav { opacity: 1; }
@media (hover: none) { .cat-nav { display: none; } }

/* Dot indicators */
.cat-dot {
  width: 6px; height: 6px; border-radius: 9999px;
  background: hsl(0 0% 100% / 0.55);
  transition: width var(--dur-sm) var(--spring), background var(--dur-sm) var(--snappy);
}
.cat-dot.is-active { width: 18px; background: #fff; }

/* Description clamp */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Toplam (set) group wrapper */
.toplam-group {
  background: linear-gradient(180deg, hsl(231 60% 97%) 0%, hsl(0 0% 100%) 60%);
  border: 1px solid hsl(231 45% 88%);
}
.dona-link-card { position: relative; }
.dona-link-card::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 9999px;
  background: hsl(173 58% 45%);
}

/* ================================================================
   MOBILE / ANDROID (Capacitor) OPTIMIZATIONS
================================================================= */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* iOS/Android safe-area uchun */
  height: 100%;
}
body {
  -webkit-tap-highlight-color: transparent;   /* tap paytidagi kulrang miltillashni o'chiradi */
  -webkit-touch-callout: none;                /* uzoq bosishdagi tizim menyusi */
  overscroll-behavior-y: contain;             /* pull-to-refresh / bounce effektini cheklaydi */
  text-rendering: optimizeLegibility;
}

/* Tugma va menyu elementlari uchun qulay teginish yuzasi */
button, .sidebar-btn, .quick-nav-btn, select, a[role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;                 /* double-tap zoom kechikishini olib tashlaydi */
}

/* Scroll inertiyasi (silliq) */
.overflow-y-auto, #sidebar nav, main, #profilePanel {
  -webkit-overflow-scrolling: touch;
}

/* Safe-area (notch / gesture nav) — qurilmada inset bo'lmasa 0, xavfsiz */
@supports (padding: env(safe-area-inset-bottom)) {
  /* Asosiy kontent pastida tugmalar gesture-bar tagida qolmasligi uchun */
  main { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  /* Mobil off-canvas sidebar va profil paneli yuqori/past insetlarni hisobga oladi */
  @media (max-width: 767px) {
    #sidebar { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
  }
  #profilePanel { padding-bottom: env(safe-area-inset-bottom); }
  /* Toast pastdan chiqsa, gesture-bar ustida turadi */
  #toastContainer, .toast-container { margin-bottom: env(safe-area-inset-bottom); }
}

/* Telefon ekranida xarita balandligini moslash */
@media (max-width: 767px) {
  #logisticsMap { height: 60vh !important; min-height: 320px; }
}

/* ================================================================
   TELEFON UCHUN TO'LIQ MOSLASHUV (mobil versiya)
================================================================= */
@media (max-width: 767px) {
  /* — Header ixchamlashadi — */
  header { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  #pageTitle { font-size: 1rem; line-height: 1.25; }
  #pageSubtitle { font-size: 0.68rem; }

  /* — Asosiy kontent: kichik hoshiyalar + pastki tab-bar uchun joy — */
  main {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
    padding-bottom: calc(5rem + env(safe-area-inset-bottom)) !important;
  }
  main .p-6 { padding: 1rem !important; }
  main .p-8 { padding: 1.15rem !important; }
  main .p-5 { padding: 0.9rem !important; }

  /* — Formalar: iOS/Android avtomatik zoom bo'lmasligi uchun 16px — */
  input, select, textarea { font-size: 16px !important; }

  /* — Jadvallar: gorizontal siljish (scroll) bilan to'liq ko'rinadi — */
  main .overflow-x-auto { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  main .overflow-x-auto > table { min-width: 560px; }
  main table th, main table td { white-space: nowrap; }
  main table td p { white-space: normal; }

  /* — Kichik amal tugmalari: teginish uchun kattaroq yuza — */
  main button[class*="p-1.5"] { padding: 0.5rem !important; }
  main button[title] svg.h-3\.5 { height: 1rem; width: 1rem; }

  /* — Modallar: to'liq ekran sahifa uslubi (Android ilova kabi) — */
  [id$="Modal"]:not(.m-dialog) { align-items: stretch !important; padding: 0 !important; }
  [id$="Modal"]:not(.m-dialog) > div {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: calc(1.25rem + env(safe-area-inset-top)) !important;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
    animation: pageIn 0.26s cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* Kichik tasdiqlash oynalari (o'chirish va h.k.) markazda qoladi */
  [id$="Modal"].m-dialog { padding: 1.25rem !important; }
  [id$="Modal"].m-dialog > div {
    max-height: 86vh;
    overflow-y: auto;
    animation: sheetUp 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* — Profil paneli ekran eniga sig'adi — */
  #profilePanel { width: calc(100vw - 1.5rem); max-width: 20rem; }

  /* — Toast xabarlar ekran eniga moslashadi (tab-bar ustida turadi) — */
  .toast {
    left: 0.75rem;
    right: 0.75rem;
    bottom: calc(5rem + env(safe-area-inset-bottom));
    max-width: none;
  }

  /* — Sahifa sarlavhasi qatori: tugmalar pastga o'raladi — */
  main .section .flex.items-center.justify-between.flex-wrap { row-gap: 0.5rem; }

  /* — Grafik konteynerlar balandligi telefonda pastroq — */
  main canvas { max-height: 260px; }
}

/* Juda tor ekranlar (≤480px) — zich gridlarni 2 ustunga tushirish */
@media (max-width: 480px) {
  main .grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  main .grid-cols-3 > :last-child:nth-child(odd) { grid-column: span 2; }
  /* KPI raqamlari sig'ishi uchun ozgina kichikroq */
  main .text-2xl { font-size: 1.25rem !important; }
  main .text-3xl { font-size: 1.5rem !important; }
}

/* Modal bottom-sheet kirish animatsiyasi */
@keyframes sheetUp {
  from { transform: translateY(48px); opacity: 0.6; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ================================================================
   MOBIL PASTKI TAB-BAR (telefon ekrani, rolga mos 4 bo'lim + Menyu)
================================================================ */
#mobileTabbar { display: none; }

@media (max-width: 767px) {
  #mobileTabbar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 150; /* sidebar overlay (200) ostida, kontent ustida */
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    padding: 0.3rem 0.25rem calc(0.3rem + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.08);
  }
  #mobileTabbar.hidden { display: none; }

  .mtab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 3.2rem;
    padding: 0.3rem 0.15rem;
    border: none;
    border-radius: 0.85rem;
    background: transparent;
    color: var(--muted-fg);
    font-family: inherit;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.1;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur-sm) var(--snappy), background var(--dur-sm) var(--snappy);
  }
  .mtab svg { height: 1.35rem; width: 1.35rem; flex-shrink: 0; }
  .mtab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mtab:active { transform: scale(0.94); }
  .mtab.active {
    color: var(--primary);
    background: hsla(231, 50%, 40%, 0.09);
  }
  html.dark .mtab.active { background: hsla(228, 75%, 68%, 0.14); }

  /* Klaviatura ochiq bo'lsa tab-bar yashirinadi */
  body.kb-open #mobileTabbar { display: none; }

  /* Modal (mahsulot qo'shish / ko'rish va h.k.) ochiq payt menyu ko'rinmasin */
  body.m-modal-open #mobileTabbar { display: none; }
}

/* Desktop/planshetda tab-bar butunlay yo'q */
@media (min-width: 768px) {
  #mobileTabbar { display: none !important; }
}

/* ================================================================
   JADVAL -> KARTA KO'RINISHI (telefon ekrani)
   JS (_enhanceMobileTables) har bir td ga data-label beradi
================================================================ */
@media (max-width: 767px) {
  main .m-card-table,
  main .overflow-x-auto > table.m-card-table { min-width: 0 !important; }

  main .m-card-table { display: block; }
  main .m-card-table thead { display: none; }
  main .m-card-table > tbody {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  main .m-card-table > tbody > tr {
    display: block;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 0.35rem 0.9rem;
    box-shadow: var(--shadow-xs);
  }
  main .m-card-table > tbody > tr > td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0 !important;
    border: none !important;
    white-space: normal !important;
    text-align: right;
    font-size: 0.8rem;
  }
  main .m-card-table > tbody > tr > td + td { border-top: 1px dashed var(--border) !important; }
  main .m-card-table > tbody > tr > td::before {
    content: attr(data-label);
    flex-shrink: 0;
    max-width: 46%;
    text-align: left;
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    color: var(--muted-fg);
  }
  /* colspan qatorlar (masalan, "Ma'lumot yo'q") — markazda, labelsiz */
  main .m-card-table > tbody > tr > td.m-full {
    display: block;
    text-align: center;
  }
  main .m-card-table > tbody > tr > td.m-full::before { content: none; }
  main .m-card-table > tbody > tr > td.m-nolabel::before { content: none; }
  /* Amal tugmalari qatori — o'ngga tekislangan */
  main .m-card-table > tbody > tr > td.m-actions { justify-content: flex-end; }
  main .m-card-table > tbody > tr > td.m-actions::before { margin-right: auto; }
  main .m-card-table > tbody > tr > td.m-actions button { padding: 0.55rem !important; }
  /* Karta ichidagi uzun matnlar sig'sin */
  main .m-card-table td .truncate { white-space: normal !important; }
}

/* ── Mobil: modal (karta) ochiq payt menyu/tab-bar ko'rinmasin ──
   Modallar Tailwind z-50 bilan tab-bar (150) va sidebar (400) ostida
   qolar edi — karta to'ldirilayotganda menyu ustida turib qolardi.
   450: sidebar (400) ustida, print (500) / QR (550) / confirm (600) ostida */
@media (max-width: 767px) {
  div[id$="Modal"].fixed { z-index: 450 !important; }
}

/* ================================================================
   CHOP ETISH OYNASI (Android WebView'da window.print o'rniga)
================================================================ */
#mPrintOverlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  background: var(--page-bg);
}
#mPrintOverlay.hidden { display: none; }
#mPrintOverlay .m-print-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: calc(0.6rem + env(safe-area-inset-top)) 1rem 0.6rem;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}
#mPrintOverlay .m-print-top span { font-weight: 700; font-size: 0.9rem; color: var(--fg); }
#mPrintOverlay .m-print-top button {
  border: 1px solid var(--border);
  background: var(--accent-bg);
  color: var(--fg);
  border-radius: 0.75rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
}
#mPrintOverlay iframe {
  flex: 1;
  width: 100%;
  border: 0;
  background: #fff;
}

/* Modal to'liq ekran kirish animatsiyasi (o'ngdan siljib kiradi) */
@keyframes pageIn {
  from { transform: translateX(42px); opacity: 0.55; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ================================================================
   TASDIQLASH DIALOGI (mmConfirm) — confirm() o'rniga
================================================================ */
#mmConfirmBox {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(2, 6, 23, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
#mmConfirmBox.open { display: flex; animation: mmcFade 0.18s ease; }
.mmc-panel {
  width: 100%;
  max-width: 22rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 1.35rem;
  padding: 1.5rem 1.25rem 1.25rem;
  text-align: center;
  box-shadow: var(--shadow-xl);
  animation: mmcPop 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mmc-icon {
  width: 3.25rem; height: 3.25rem;
  margin: 0 auto 0.8rem;
  border-radius: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  background: hsl(0, 85%, 96%);
  color: hsl(0, 74%, 51%);
}
html.dark .mmc-icon { background: hsl(0, 40%, 16%); color: hsl(0, 85%, 72%); }
.mmc-title { font-size: 1.02rem; font-weight: 700; color: var(--fg); margin-bottom: 0.3rem; }
.mmc-msg { font-size: 0.85rem; color: var(--muted-fg); line-height: 1.5; word-break: break-word; }
.mmc-actions { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
.mmc-actions button {
  flex: 1; height: 2.9rem;
  border-radius: 0.95rem;
  font-family: inherit; font-size: 0.9rem; font-weight: 600;
  border: none; cursor: pointer;
  transition: transform var(--dur-xs) var(--snappy), filter var(--dur-sm) var(--snappy);
}
.mmc-actions button:active { transform: scale(0.96); }
.mmc-cancel { background: var(--accent-bg); color: var(--fg); border: 1px solid var(--border) !important; }
.mmc-ok { background: hsl(0, 74%, 51%); color: #fff; box-shadow: 0 8px 18px -8px hsl(0 74% 51% / 0.6); }
.mmc-ok:hover { filter: brightness(1.08); }
@keyframes mmcPop { from { transform: scale(0.85) translateY(14px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes mmcFade { from { opacity: 0; } to { opacity: 1; } }

/* ================================================================
   MAHSULOTLAR RO'YXATI — telefonda karta ko'rinishi
   (rasm + ma'lumot birinchi qator, amallar pastki qatorda)
================================================================ */
@media (max-width: 767px) {
  #productsList > div {
    flex-wrap: wrap;
    padding: 0.85rem !important;
  }
  #productsList > div > .flex-1 {
    min-width: 0;
    flex-basis: calc(100% - 3.9rem); /* rasm yonida qoladi */
  }
  /* Amallar ustuni -> to'liq enli pastki qator */
  #productsList > div > div:last-child {
    flex-direction: row !important;
    align-items: center !important;
    width: 100%;
    margin-top: 0.65rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border);
    justify-content: space-between;
  }
  #productsList > div > div:last-child .flex.gap-1 { gap: 0.4rem; }
  #productsList > div > div:last-child .flex.gap-1 button { padding: 0.6rem !important; }
  #productsList > div > div:last-child .flex.gap-1 button svg { height: 1.05rem; width: 1.05rem; }
  /* Faol/Nofaol tugmasi kattaroq */
  #productsList > div > div:last-child > button { height: 2.25rem; padding: 0 0.75rem; }
}

/* ================================================================
   MOBIL TOOLBAR/FILTRLAR — qulay joylashuv
================================================================ */
@media (max-width: 767px) {
  /* Sarlavha qatorlari: tugmalar sig'masa pastga o'raladi */
  main .section .flex.items-center.justify-between { flex-wrap: wrap; row-gap: 0.55rem; }
  /* Filtr maydonlari barmoq uchun qulay balandlikda */
  main input[type="text"], main input[type="date"], main input[type="number"], main select {
    min-height: 2.65rem;
  }
}

/* ================================================================
   DARK MODE — QO'SHIMCHA RANG TUZATISHLARI
   (bonus, kassir, haydovchilar, teal/amber/indigo/violet badge'lar)
================================================================ */
/* Pastel -50 fonlar */
html.dark .bg-amber-50  { background: hsl(38, 35%, 13%) !important; }
html.dark .bg-teal-50   { background: hsl(173, 35%, 11%) !important; }
html.dark .bg-indigo-50 { background: hsl(231, 35%, 14%) !important; }
html.dark .bg-violet-50 { background: hsl(262, 35%, 14%) !important; }
html.dark .bg-pink-50   { background: hsl(330, 35%, 13%) !important; }
html.dark .bg-sky-50    { background: hsl(200, 35%, 12%) !important; }
html.dark .bg-emerald-50{ background: hsl(152, 35%, 11%) !important; }

/* Pastel -100 badge fonlari */
html.dark .bg-blue-100   { background: hsl(214, 35%, 17%) !important; }
html.dark .bg-green-100  { background: hsl(142, 35%, 15%) !important; }
html.dark .bg-red-100    { background: hsl(0, 35%, 16%) !important; }
html.dark .bg-orange-100 { background: hsl(25, 35%, 15%) !important; }
html.dark .bg-yellow-100 { background: hsl(45, 35%, 14%) !important; }
html.dark .bg-amber-100  { background: hsl(38, 35%, 16%) !important; }
html.dark .bg-teal-100   { background: hsl(173, 35%, 15%) !important; }
html.dark .bg-indigo-100 { background: hsl(231, 35%, 18%) !important; }
html.dark .bg-violet-100 { background: hsl(262, 35%, 18%) !important; }
html.dark .bg-pink-100   { background: hsl(330, 35%, 16%) !important; }
html.dark .bg-gray-100   { background: var(--accent-bg) !important; }
html.dark .bg-gray-200   { background: hsl(231, 25%, 20%) !important; }

/* Rangli matnlar — qorong'ida o'qiladigan ochroq tuslar */
html.dark .text-blue-600   { color: hsl(214, 85%, 72%) !important; }
html.dark .text-green-600  { color: hsl(142, 60%, 62%) !important; }
html.dark .text-red-500,
html.dark .text-red-600    { color: hsl(0, 85%, 72%) !important; }
html.dark .text-orange-600 { color: hsl(25, 85%, 68%) !important; }
html.dark .text-yellow-700,
html.dark .text-yellow-800 { color: hsl(45, 80%, 65%) !important; }
html.dark .text-amber-600,
html.dark .text-amber-700  { color: hsl(38, 90%, 68%) !important; }
html.dark .text-teal-600,
html.dark .text-teal-700   { color: hsl(173, 60%, 60%) !important; }
html.dark .text-indigo-600,
html.dark .text-indigo-700 { color: hsl(231, 85%, 78%) !important; }
html.dark .text-violet-600,
html.dark .text-violet-700 { color: hsl(262, 85%, 78%) !important; }
html.dark .text-pink-600,
html.dark .text-pink-700   { color: hsl(330, 85%, 75%) !important; }
html.dark .text-sky-600,
html.dark .text-sky-700    { color: hsl(200, 85%, 70%) !important; }
html.dark .text-emerald-600,
html.dark .text-emerald-700{ color: hsl(152, 60%, 60%) !important; }

/* Rangli borderlar — qorong'ida umumiy border rangi */
html.dark .border-amber-100, html.dark .border-amber-200,
html.dark .border-blue-100,  html.dark .border-blue-200, html.dark .border-blue-300,
html.dark .border-green-100, html.dark .border-green-200,
html.dark .border-red-100,   html.dark .border-red-200,
html.dark .border-orange-100,html.dark .border-orange-200,
html.dark .border-yellow-200,
html.dark .border-teal-200,  html.dark .border-teal-300,
html.dark .border-indigo-100,html.dark .border-indigo-200,
html.dark .border-violet-200,
html.dark .border-white\/60 {
  border-color: var(--border) !important;
}

/* Hover holatlari qorong'ida yumshoq */
html.dark .hover\:bg-blue-50:hover,
html.dark .hover\:bg-green-50:hover,
html.dark .hover\:bg-red-50:hover,
html.dark .hover\:bg-teal-50:hover,
html.dark .hover\:bg-indigo-50:hover,
html.dark .hover\:bg-violet-100:hover,
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover,
html.dark .hover\:bg-gray-200:hover {
  background: var(--accent-bg) !important;
}

/* Ichki bo'linuvchi chiziqlar */
html.dark [class*="divide-gray"] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border) !important;
}

/* Toplam (set) guruh kartasi */
html.dark .toplam-group {
  background: var(--card-bg);
  border-color: var(--border);
}

/* Mahsulot karta fonlari (dona/teal va nofaol) */
html.dark #productsList .bg-teal-50 { background: hsl(173, 30%, 10%) !important; }
html.dark #productsList .bg-gray-50 { background: var(--accent-bg) !important; }

/* ================================================================
   QR SKANER OYNASI (sotuvchilar uchun)
================================================================ */
#qrScanOverlay {
  position: fixed;
  inset: 0;
  z-index: 550;
  display: none;
  background: #000;
  overflow: hidden;
}
#qrScanOverlay.open { display: block; animation: mmcFade 0.2s ease; }
#qrScanOverlay video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#qrScanOverlay .qrs-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(0.8rem + env(safe-area-inset-top)) 1rem 0.8rem;
  background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
}
#qrScanOverlay .qrs-top span { color: #fff; font-weight: 700; font-size: 0.95rem; }
#qrScanOverlay .qrs-top button {
  display: flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 0.9rem;
  border: none;
  background: rgba(255,255,255,0.16);
  color: #fff;
  cursor: pointer;
}
/* Skan ramkasi — markazda, burchak chizig'lari bilan */
#qrScanOverlay .qrs-frame {
  position: absolute;
  top: 50%; left: 50%;
  width: min(68vw, 300px);
  aspect-ratio: 1;
  transform: translate(-50%, -55%);
  z-index: 2;
  border-radius: 1.4rem;
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.45); /* atrofini xiralashtiradi */
  outline: 2.5px solid rgba(255,255,255,0.9);
  outline-offset: -2px;
}
/* Yurib turuvchi skan chizig'i */
#qrScanOverlay .qrs-frame i {
  position: absolute;
  left: 8%; right: 8%;
  top: 10%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, hsl(142 76% 55%), transparent);
  box-shadow: 0 0 12px hsl(142 76% 55% / 0.8);
  animation: qrsScan 2.1s ease-in-out infinite;
}
@keyframes qrsScan {
  0%, 100% { top: 10%; }
  50%      { top: 88%; }
}
#qrScanOverlay .qrs-hint {
  position: absolute;
  left: 1.5rem; right: 1.5rem;
  bottom: calc(3rem + env(safe-area-inset-bottom));
  z-index: 2;
  text-align: center;
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
}

/* Skaner tugmasi tab-barda alohida urg'u bilan */
.mtab-scan { color: var(--primary) !important; }
.mtab-scan svg { transform: scale(1.08); }

/* mmConfirm "info" varianti — ko'k ikonka, asosiy rangli OK tugma */
.mmc-panel.mmc-info .mmc-icon {
  background: hsl(214, 90%, 95%);
  color: hsl(214, 80%, 48%);
}
html.dark .mmc-panel.mmc-info .mmc-icon {
  background: hsl(214, 40%, 16%);
  color: hsl(214, 85%, 72%);
}
.mmc-panel.mmc-info .mmc-ok {
  background: var(--primary);
  color: var(--primary-fg);
  box-shadow: 0 8px 18px -8px hsl(231 50% 40% / 0.55);
}