/* Thin complement layer on top of Tailwind (Play CDN).
   Handles icon rendering, scrollbars and JS-toggled UI states. */

:root { color-scheme: light; }
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }

/* ---- Icons ---- */
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
svg { stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
[data-icon] svg,
.btn-primary svg,
.btn-secondary svg,
.icon-btn svg,
.primary-button svg,
.secondary-button svg,
.icon-button svg,
.nav-icon svg,
.segmented svg { width: 1.15em; height: 1.15em; flex: none; }

/* ---- Scrollbars ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, .35);
  border: 3px solid transparent;
  border-radius: 9999px;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, .55);
  background-clip: content-box;
}

/* ---- Drawer (right-side create panel) ---- */
#drawer.is-open { pointer-events: auto; }
#drawer.is-open .drawer-scrim { opacity: 1; }
#drawer.is-open .drawer-panel { transform: translateX(0); }

/* ---- Toast ---- */
#toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ---- DB status dot ---- */
#dbDot.is-online {
  background: #34d399;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, .18);
}

/* ---- Description collapse (B3) ---- */
.desc-collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}

/* ---- Price label print ---- */
#labelPrintOverlay { display: flex; flex-direction: column; }
.label-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px; }
.label-card {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: #fff;
  break-inside: avoid;
}
.label-brand { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6366f1; }
.label-name { font-size: 10px; font-weight: 600; color: #1e293b; text-align: center; max-width: 100%; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.label-barcode { width: 100%; }
.label-barcode svg { width: 100%; height: auto; display: block; }
.label-sku { font-size: 9px; font-family: monospace; color: #64748b; }
.label-price { font-size: 15px; font-weight: 800; color: #0f172a; }

@media print {
  body > *:not(#labelPrintOverlay) { display: none !important; }
  #labelPrintOverlay { position: fixed; inset: 0; overflow: visible; background: white; }
  #labelPrintOverlay .no-print { display: none !important; }
  .label-grid { grid-template-columns: repeat(3, 1fr); gap: 4mm; padding: 8mm; }
  .label-card { border: 0.5pt solid #999; }
}

/* Subtle entrance for rendered content sections */
@media (prefers-reduced-motion: no-preference) {
  #content > * { animation: rise .35s ease both; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}