/* Rankorax ESL - extra styles on top of Tailwind CDN */
html { scroll-behavior: smooth; }
body { background: #f1f5f9; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; -webkit-tap-highlight-color: transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }

.eink-frame { background: linear-gradient(145deg, #d6d9de, #b9bec6); padding: 14px; border-radius: 16px; box-shadow: 0 10px 25px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.6); }
.eink-screen { display: block; width: 100%; height: auto; background: #eae8e3; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }

.plate-card { transition: box-shadow .15s, border-color .15s; }
.plate-card:hover { box-shadow: 0 8px 22px rgba(15,23,42,.10); }
.plate-card.is-selected { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37,99,235,.25); }
.plate-card.is-active { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.35); }

.st-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; }
.st-pending { background: #e2e8f0; color: #475569; }
.st-busy { background: #dbeafe; color: #1d4ed8; }
.st-ok { background: #d1fae5; color: #047857; }
.st-fail { background: #fee2e2; color: #b91c1c; }
.st-skip { background: #fef3c7; color: #92400e; }

.tpl-chip { width: 100%; text-align: left; padding: 8px 12px; border-radius: 12px; border: 1px solid #e2e8f0; font-size: 12px; font-weight: 700; color: #334155; background: #f8fafc; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
.tpl-chip:hover { background: #eff6ff; border-color: #93c5fd; }
.tpl-chip.active { background: #2563eb; border-color: #2563eb; color: #fff; }

.flag-on { background: #2563eb !important; color: #fff !important; border-color: #2563eb !important; }
.flag-off { background: #fff; color: #334155; border-color: #cbd5e1; }

.inline-input { width: 100%; border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 8px; padding: 5px 8px; font-size: 12px; font-weight: 700; color: #0f172a; outline: none; }
.inline-input:focus { border-color: #2563eb; background: #fff; }

#gestureBanner { animation: pulseBorder 1.6s ease-in-out infinite; }
@keyframes pulseBorder { 0%,100% { box-shadow: 0 0 0 0 rgba(245,158,11,.5); } 50% { box-shadow: 0 0 0 8px rgba(245,158,11,0); } }
@media (max-width: 1023px) { main { padding-bottom: 5rem; } }