:root {
    --bg: #f4f6fb;
    --card: #ffffff;
    --primary: #1565d8;
    --text: #15223b;
    --muted: #6b7280;
}
* { box-sizing: border-box; }
.hidden { display: none !important; }
body { margin: 0; font-family: Inter, Arial, sans-serif; background: var(--bg); color: var(--text); display: flex; }
body.mobile-route { display: block; }
.sidebar { width: 250px; min-height: 100vh; background: #0f172a; padding: 1rem; position: sticky; top: 0; }
.sidebar h2 { color: #fff; }
.sidebar a { display: block; color: #e5e7eb; text-decoration: none; padding: .7rem; border-radius: .5rem; margin: .2rem 0; }
.sidebar a:hover { background: #1e293b; }
.content { padding: 1rem; width: 100%; }
.mobile-content { max-width: 100vw; margin: 0 auto; padding: .5rem; }
.auth-main { max-width: 420px; margin: 8vh auto; }
.card { background: var(--card); border-radius: 1rem; padding: 1rem; box-shadow: 0 8px 26px rgba(15, 23, 42, 0.07); }
.grid { display: grid; gap: 1rem; }
.cards { grid-template-columns: repeat(4, minmax(140px, 1fr)); }
.cols-2 { grid-template-columns: 1fr 1fr; }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.btn, button { background: var(--primary); color: #fff; border: 0; border-radius: .65rem; padding: .65rem .9rem; text-decoration: none; cursor: pointer; }
form label { display: grid; gap: .4rem; margin-bottom: .6rem; }
input, select, textarea { width: 100%; padding: .65rem; border-radius: .65rem; border: 1px solid #d1d5db; background: #fff; }
textarea { min-height: 90px; }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid #e5e7eb; padding: .55rem; text-align: left; vertical-align: top; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: .8rem; }
.error { color: #b91c1c; }
#signature-pad { border: 1px dashed #94a3b8; width: 100%; max-width: 520px; background: #fff; }
.mobile-screen { max-width: 100%; margin: 0 auto; }
.mobile-actions { display: grid; grid-template-columns: 1fr; gap: .7rem; }
.mobile-actions button { font-size: 1.05rem; min-height: 50px; }
.offline-note { color: var(--muted); font-size: .9rem; }
.mobile-header { display: flex; align-items: center; gap: .6rem; }
.hamburger-btn { min-width: 44px; min-height: 44px; font-size: 1.2rem; display: inline-flex; align-items: center; justify-content: center; z-index: 20; }
.mobile-menu { display: grid; gap: .5rem; margin: .5rem 0 1rem; }
.mobile-menu.hidden { display: none; }
.mobile-menu button { text-align: left; }
#mobile-current-barcodes { margin: 0; padding-left: 1rem; max-height: 140px; overflow: auto; }
.signature-layout { display: flex; flex-direction: column; gap: .7rem; min-height: 78vh; }
.signature-items-scroll { max-height: 28vh; overflow: auto; border: 1px solid #d1d5db; border-radius: .6rem; padding: .5rem; background: #f8fafc; }
.signature-pad-wrap { border: 2px dashed #64748b; border-radius: .7rem; padding: .6rem; background: #fff; }
#mobile-signature-pad { border: 1px solid #94a3b8; width: 100%; background: #fff; min-height: 180px; }
.signature-actions { margin-top: auto; position: sticky; bottom: 0; background: #fff; padding-top: .5rem; display: grid; gap: .5rem; grid-template-columns: 1fr 1fr 1fr; }
.modal { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.65); display: grid; place-items: center; z-index: 40; }
.modal.hidden { display: none; }
.modal-body { width: min(560px, 92vw); max-height: 90vh; overflow: auto; }
.status-ampel { display: flex; gap: .5rem; margin-bottom: .7rem; flex-wrap: wrap; }
.ampel-dot { padding: .25rem .6rem; border-radius: 999px; background: #cbd5e1; color: #0f172a; font-size: .85rem; opacity: .45; }
.ampel-dot.active { opacity: 1; color: #fff; }
.ampel-dot.ampel-open.active { background: #0369a1; }
.ampel-dot.ampel-awaiting_signature.active { background: #d97706; }
.ampel-dot.ampel-signed.active { background: #16a34a; }
.ampel-dot.ampel-closed.active { background: #475569; }
@media (max-width: 1024px) {
    .cards, .cols-2, .form-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    body { flex-direction: column; }
    .sidebar { width: 100%; min-height: auto; position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; }
    .sidebar h2 { grid-column: span 2; margin: .2rem 0; }
    .cards, .cols-2, .form-grid { grid-template-columns: 1fr; }
    th:nth-child(n+4), td:nth-child(n+4) { display: none; }
}