/* ===== Brand red (جوانتر) ===== */
:root {
  --brand: #dc2626;
  --brand-dark: #b91c1c;
  --brand-soft: #fee2e2;
  --ink: #0c0a09;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-shadow: 0 10px 40px rgba(28, 25, 23, 0.07);
}

html.dark {
  --glass: rgba(28, 25, 23, 0.72);
  --glass-border: rgba(68, 64, 60, 0.65);
  --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

/* ===== Background + glass ===== */
body.app-body {
  background:
    radial-gradient(ellipse 80% 50% at 10% -10%, rgba(220, 38, 38, 0.12), transparent 50%),
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(220, 38, 38, 0.08), transparent 45%),
    linear-gradient(165deg, #f7f4f2 0%, #efe9e6 45%, #f5f1ef 100%);
  min-height: 100vh;
}

html.dark body.app-body {
  background:
    radial-gradient(ellipse 70% 45% at 0% 0%, rgba(220, 38, 38, 0.18), transparent 50%),
    radial-gradient(ellipse 50% 40% at 100% 10%, rgba(220, 38, 38, 0.1), transparent 45%),
    linear-gradient(165deg, #0c0a09 0%, #1c1412 50%, #0c0a09 100%);
}

.card-surface,
.glass-panel {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid var(--glass-border);
  border-radius: 1.15rem;
  box-shadow: var(--glass-shadow);
}

.glass-nav {
  background: rgba(12, 10, 9, 0.82);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid rgba(220, 38, 38, 0.35);
}

.btn-brand,
.bg-brand-600 {
  background-color: var(--brand) !important;
}
.btn-brand:hover,
.hover\:bg-brand-600:hover {
  background-color: var(--brand-dark) !important;
}
.text-brand-500,
.text-brand-600 {
  color: var(--brand) !important;
}
.border-brand-500 {
  border-color: var(--brand) !important;
}
.bg-brand-50 {
  background-color: var(--brand-soft) !important;
}

/* ===== دۆخی تاریک ===== */
html.dark body {
  color: #f5f5f4;
}

html.dark .bg-white {
  background-color: rgba(28, 25, 23, 0.85) !important;
}

html.dark .bg-stone-50,
html.dark .bg-stone-100 {
  background-color: rgba(41, 37, 36, 0.9) !important;
}

html.dark .border-stone-100,
html.dark .border-stone-200,
html.dark .border-stone-300 {
  border-color: #44403c !important;
}

html.dark .text-stone-400,
html.dark .text-stone-500,
html.dark .text-stone-600 {
  color: #a8a29e !important;
}

html.dark .text-stone-700,
html.dark .text-stone-800,
html.dark .text-stone-900,
html.dark .text-brand-800 {
  color: #fafaf9 !important;
}

html.dark .text-brand-700 {
  color: #f87171 !important;
}

html.dark input:not(.inv-sheet input):not(.no-print-border),
html.dark select:not(.inv-sheet select),
html.dark textarea:not(.inv-sheet textarea) {
  background-color: rgba(41, 37, 36, 0.95) !important;
  color: #fafaf9 !important;
  border-color: #57534e !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #78716c !important;
}

html.dark .bg-green-50 { background-color: rgba(20, 83, 45, 0.25) !important; }
html.dark .bg-amber-50 { background-color: rgba(120, 53, 15, 0.3) !important; }
html.dark .bg-red-50 { background-color: rgba(127, 29, 29, 0.3) !important; }
html.dark .bg-brand-50 { background-color: rgba(220, 38, 38, 0.15) !important; }

html.dark .bg-green-100 { background-color: rgba(22, 101, 52, 0.35) !important; color: #86efac !important; }
html.dark .bg-amber-100 { background-color: rgba(146, 64, 14, 0.4) !important; color: #fcd34d !important; }
html.dark .bg-sky-100 { background-color: rgba(12, 74, 110, 0.4) !important; color: #7dd3fc !important; }
html.dark .bg-stone-200 { background-color: #44403c !important; color: #e7e5e4 !important; }

html.dark .text-green-700,
html.dark .text-green-800 { color: #4ade80 !important; }
html.dark .text-amber-700,
html.dark .text-amber-800,
html.dark .text-amber-900 { color: #fbbf24 !important; }
html.dark .text-red-600,
html.dark .text-red-700 { color: #f87171 !important; }

/* ===== پیکەر — ڕووناک ===== */
html.dark #picker-modal {
  background: rgba(0, 0, 0, 0.65) !important;
}

html.dark #picker-modal > div,
html.dark #picker-modal .bg-white,
html.dark #picker-modal .card-surface {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border-color: #e7e5e4 !important;
  backdrop-filter: none !important;
}

html.dark #picker-modal #picker-title,
html.dark #picker-modal .font-extrabold,
html.dark #picker-modal .text-stone-900,
html.dark #picker-modal .text-stone-800,
html.dark #picker-modal .text-stone-700,
html.dark #picker-modal label {
  color: #0a0a0a !important;
}

html.dark #picker-modal .text-stone-600,
html.dark #picker-modal .text-stone-500,
html.dark #picker-modal .text-stone-400,
html.dark #picker-modal .text-xs {
  color: #57534e !important;
}

html.dark #picker-modal input,
html.dark #picker-modal select,
html.dark #picker-modal textarea {
  background: #f5f5f4 !important;
  color: #0a0a0a !important;
  border-color: #d6d3d1 !important;
}

html.dark #picker-list .picker-item,
html.dark #picker-list button,
html.dark #picker-list a,
html.dark #picker-list li {
  background: #ffffff !important;
  border-color: #e7e5e4 !important;
  color: #0a0a0a !important;
}

html.dark #picker-list .picker-item:hover,
html.dark #picker-list .picker-item:active {
  background: #fff1f2 !important;
  border-color: #dc2626 !important;
}

html.dark #picker-list .text-brand-700 { color: #b91c1c !important; }
html.dark #picker-list .text-green-700 { color: #15803d !important; }
html.dark #picker-list .text-amber-700 { color: #b45309 !important; }

html.dark #picker-modal .bg-brand-800,
html.dark #picker-modal .bg-brand-600 {
  background: #0a0a0a !important;
  color: #fff !important;
}

/* وەسڵ هەر سپی */
html.dark .print-area,
html.dark .inv-sheet,
html.dark #invoice-print-area {
  background: #ffffff !important;
  color: #0a0a0a !important;
  backdrop-filter: none !important;
}

html.dark .inv-sheet input,
html.dark .inv-sheet .btn-pick-product,
html.dark .inv-sheet #received_amount,
html.dark .inv-sheet select,
html.dark .inv-sheet textarea {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border-color: #d6d3d1 !important;
}

html.dark .inv-brand-name,
html.dark .inv-to-label,
html.dark .inv-customer-name,
html.dark .inv-thanks,
html.dark .inv-terms-title,
html.dark .inv-meta-table th,
html.dark .inv-sign,
html.dark .inv-customer-line,
html.dark .inv-terms-text,
html.dark .inv-brand-meta,
html.dark .inv-sheet .item-name-label,
html.dark .inv-sheet td {
  color: #0a0a0a !important;
}

html.dark .inv-banner-title { color: #ffffff !important; }
html.dark .inv-brand-tag { color: #dc2626 !important; }
html.dark .inv-grand { color: #fff !important; }

html.dark .inv-items thead tr {
  background: #0a0a0a !important;
  color: #fff !important;
}

html.dark .inv-items tbody tr:nth-child(even) {
  background: #f9fafb !important;
}

html.dark .inv-items td { color: #374151 !important; }

html.dark nav.md\:hidden {
  background: rgba(28, 25, 23, 0.92) !important;
  backdrop-filter: blur(16px);
  border-color: #3f3f46 !important;
}

#more-sheet-panel {
  max-height: min(88vh, 640px);
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
}

html.dark #more-sheet-panel {
  background: rgba(28, 25, 23, 0.94);
}

/* Desktop header nav pills */
.desk-nav-link {
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.78);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.desk-nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.desk-nav-link.is-active {
  background: rgba(220, 38, 38, 0.95);
  color: #fff;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}

.prod-thumb,
.prod-thumb-letter {
  width: 36px;
  height: 36px;
  border-radius: 0.5rem;
  object-fit: cover;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.prod-thumb-letter {
  background: #0c0a09;
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  border: 2px solid #dc2626;
}
.icon-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.7rem;
  border: 1px solid #e7e5e4;
  background: rgba(255,255,255,0.85);
  color: #44403c;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  text-decoration: none;
}
.icon-action svg { width: 1.15rem; height: 1.15rem; pointer-events: none; }
.icon-action:hover { background: #f5f5f4; }
.icon-action-edit { color: #dc2626; border-color: #fecaca; }
.icon-action-edit:hover { background: #fef2f2; }
.icon-action-del { color: #b91c1c; border-color: #fecaca; }
.icon-action-del:hover { background: #fef2f2; }
.icon-action-view { color: #0c0a09; }
.icon-action-archive { color: #78716c; }
html.dark .icon-action {
  background: rgba(41,37,36,0.85);
  border-color: #57534e;
  color: #e7e5e4;
}

@media print {
  html.dark,
  html.dark body {
    background: #fff !important;
    color: #000 !important;
  }
  #more-sheet { display: none !important; }
  body.app-body {
    background: #fff !important;
  }
}