/* Ant Bites admin: calm, neutral back-office look (deliberately not the colourful game style). */
:root {
    --ab-sidebar-w: 248px;
    --ab-sidebar-bg: #111827;
    --ab-sidebar-fg: #cbd5e1;
    --ab-sidebar-muted: #64748b;
    --ab-accent: #2563eb;
    --ab-page-bg: #f4f6f9;
    --ab-border: #e5e7eb;
}

.ab-body { background: var(--ab-page-bg); color: #1f2937; }
.ab-shell { display: flex; min-height: 100vh; }

.ab-sidebar {
    width: var(--ab-sidebar-w); flex: 0 0 var(--ab-sidebar-w);
    background: var(--ab-sidebar-bg); color: var(--ab-sidebar-fg);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.ab-brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid #1f2937; }
.ab-brand__mark {
    width: 34px; height: 34px; border-radius: 8px; background: var(--ab-accent); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem;
}
.ab-brand__text { font-weight: 600; color: #fff; }
.ab-brand__text small { color: var(--ab-sidebar-muted); font-weight: 500; margin-left: .2rem; }

.ab-nav { padding: .75rem .6rem 2rem; }
.ab-nav__title {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ab-sidebar-muted);
    padding: 1rem .75rem .35rem;
}
.ab-nav__link {
    display: flex; align-items: center; gap: .65rem; padding: .45rem .75rem; border-radius: 6px;
    color: var(--ab-sidebar-fg); text-decoration: none; font-size: .9rem;
}
.ab-nav__link:hover { background: #1f2937; color: #fff; }
.ab-nav__link.is-active { background: var(--ab-accent); color: #fff; }
.ab-nav__link.is-disabled { color: #4b5563; cursor: default; }
.ab-nav__link.is-disabled:hover { background: transparent; color: #4b5563; }
.ab-nav__soon { margin-left: auto; font-size: .65rem; border: 1px solid #374151; border-radius: 4px; padding: 0 .3rem; }

.ab-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ab-topbar {
    display: flex; align-items: center; gap: .75rem; background: #fff; border-bottom: 1px solid var(--ab-border);
    padding: .7rem 1.5rem; position: sticky; top: 0; z-index: 10;
}
.ab-topbar__title { font-size: 1.1rem; font-weight: 600; margin: 0; }
.ab-content { padding: 1.5rem; }

.ab-card { background: #fff; border: 1px solid var(--ab-border); border-radius: 10px; }
.ab-stat { padding: 1rem 1.25rem; }
.ab-stat__label { font-size: .8rem; color: #6b7280; }
.ab-stat__value { font-size: 1.6rem; font-weight: 600; }
.ab-stat__hint { font-size: .75rem; color: #9ca3af; }

.ab-table { margin: 0; }
.ab-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; font-weight: 600; }
.ab-json { font-size: .75rem; max-width: 360px; white-space: pre-wrap; word-break: break-word; margin: 0; }

/* Login */
.ab-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--ab-page-bg); }
.ab-login__card { width: 100%; max-width: 380px; }

/* Small screens: sidebar slides in */
@media (max-width: 991.98px) {
    .ab-sidebar { position: fixed; left: 0; z-index: 1040; transform: translateX(-100%); transition: transform .2s ease; }
    .ab-sidebar.is-open { transform: translateX(0); }
}

/* Dashboard charts: fixed height so Chart.js can size responsively */
.ab-chart { position: relative; height: 220px; }

/* ---------- Levels ---------- */
/* Food palette (mirror of Unity ColorPalette.cs) as classes, since the CSP forbids inline styles. */
.ab-pal-1 { --pal: #FF0000; }
.ab-pal-2 { --pal: #4169E1; }
.ab-pal-3 { --pal: #228B22; }
.ab-pal-4 { --pal: #FFD700; }
.ab-pal-5 { --pal: #FF8C00; }
.ab-pal-6 { --pal: #800080; }
.ab-pal-7 { --pal: #FF1493; }
.ab-pal-8 { --pal: #008080; }
.ab-pal-9 { --pal: #32CD32; }
.ab-pal-10 { --pal: #FF7F50; }
.ab-pal-11 { --pal: #DC143C; }
.ab-pal-12 { --pal: #000080; }
.ab-pal-13 { --pal: #D2691E; }
.ab-pal-14 { --pal: #87CEEB; }
.ab-pal-15 { --pal: #FF00FF; }
.ab-pal-16 { --pal: #808000; }
.ab-pal-17 { --pal: #0B0B0F; }
.ab-pal-18 { --pal: #212121; }
.ab-pal-19 { --pal: #3D001E; }
.ab-pal-20 { --pal: #1A0033; }
.ab-w-9 { width: 9rem; }
.ab-board-thumb { display: block; width: 44px; height: 44px; image-rendering: pixelated; }
.ab-board-wrap { background: #eef2f7; border-radius: 8px; padding: .5rem; display: flex; justify-content: center; }
.ab-board-wrap canvas { max-width: 100%; height: auto; image-rendering: pixelated; }
.ab-detail-preview { display: block; width: 100%; max-width: 560px; height: auto; image-rendering: pixelated; background: #eef2f7; border-radius: 8px; padding: .5rem; }
.ab-queues { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .25rem; }
.ab-queue { display: flex; flex-direction: column; gap: 4px; min-width: 64px; }
.ab-queue__title { font-size: .7rem; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.ab-box {
    display: flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 5px; font-size: .75rem;
    background: var(--pal, #ff00ff); color: #111827; border: 1px solid rgba(0,0,0,.15); min-height: 24px;
}
.ab-box__n { font-weight: 700; background: rgba(255,255,255,.75); border-radius: 3px; padding: 0 4px; }
.ab-box i { font-size: .7rem; background: rgba(255,255,255,.75); border-radius: 3px; padding: 0 2px; }
.ab-tray { display: flex; gap: 4px; min-height: 26px; flex-wrap: wrap; }
.ab-tray .ab-box { min-width: 44px; justify-content: center; }
.ab-tray__empty { width: 44px; height: 24px; border: 1px dashed #cbd5e1; border-radius: 5px; }
.ab-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--pal, #ff00ff); border: 1px solid rgba(0,0,0,.2); margin-right: 6px; vertical-align: -1px; }
.ab-checks > li { margin-bottom: .35rem; }
.ab-mini { background: #f8fafc; border: 1px solid var(--ab-border); border-radius: 6px; padding: .35rem .5rem; }

/* Level editor */
.ab-editor { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1rem; align-items: start; }
@media (max-width: 1199px) { .ab-editor { grid-template-columns: 1fr; } }
.ab-editor__canvas { background: #eef2f7; border-radius: 8px; padding: .5rem; overflow: auto; display: flex; justify-content: center; }
.ab-editor__canvas canvas { cursor: crosshair; touch-action: none; image-rendering: pixelated; }
.ab-palette { display: flex; flex-wrap: wrap; gap: 4px; }
.ab-palette button {
    width: 28px; height: 28px; border-radius: 6px; border: 2px solid transparent; background: var(--pal, #fff);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); font-size: .65rem; font-weight: 700; color: rgba(0,0,0,.55); padding: 0;
}
.ab-palette button.is-active { border-color: #111827; }
.ab-palette .ab-eraser { background: repeating-conic-gradient(#e5e7eb 0 25%, #fff 0 50%) 0 0 / 10px 10px; }
.ab-qedit { border: 1px solid var(--ab-border); border-radius: 8px; padding: .5rem; margin-bottom: .5rem; }
.ab-qedit__row { display: grid; grid-template-columns: 1.4fr .9fr 1fr .8fr auto auto auto; gap: 4px; align-items: center; margin-bottom: 4px; }
.ab-qedit__row .form-control, .ab-qedit__row .form-select { padding: .1rem .3rem; font-size: .75rem; }
.ab-json-area { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .75rem; }
.ab-check-list li { margin-bottom: .2rem; }
.ab-w-5 { width: 5rem; }
.ab-w-7 { width: 7.5rem; }
.ab-food-img { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.ab-food-preview { width: 96px; height: 96px; background: #eef2f7; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.ab-food-preview img, .ab-food-preview canvas { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; }
.ab-w-search { width: 18rem; }
.ab-card--tabbed { border-top-left-radius: 0; border-top: 0; }
.ab-stars { display: flex; flex-wrap: wrap; gap: 3px; }
.ab-stars__cell { width: 28px; height: 24px; border-radius: 4px; font-size: .65rem; display: inline-flex; align-items: center; justify-content: center; background: #f1f5f9; color: #64748b; border: 1px solid var(--ab-border); }
.ab-stars__cell--1 { background: #fef3c7; color: #92400e; }
.ab-stars__cell--2 { background: #fde68a; color: #92400e; }
.ab-stars__cell--3 { background: #f59e0b; color: #fff; border-color: #d97706; }

/* Analytics */
.ab-heat-0 { background: #f8fafc; } .ab-heat-1 { background: #ecfdf5; } .ab-heat-2 { background: #d1fae5; } .ab-heat-3 { background: #a7f3d0; } .ab-heat-4 { background: #6ee7b7; } .ab-heat-5 { background: #34d399; }
.ab-starbar { display: flex; width: 120px; height: 10px; border-radius: 3px; overflow: hidden; background: #f1f5f9; }
.ab-starbar span { display: block; height: 100%; }
.ab-starbar__s1 { background: #fde68a; } .ab-starbar__s2 { background: #fbbf24; } .ab-starbar__s3 { background: #d97706; }
.ab-wpct-0 { width: 0%; } .ab-wpct-5 { width: 5%; } .ab-wpct-10 { width: 10%; } .ab-wpct-15 { width: 15%; } .ab-wpct-20 { width: 20%; } .ab-wpct-25 { width: 25%; } .ab-wpct-30 { width: 30%; } .ab-wpct-35 { width: 35%; } .ab-wpct-40 { width: 40%; } .ab-wpct-45 { width: 45%; } .ab-wpct-50 { width: 50%; } .ab-wpct-55 { width: 55%; } .ab-wpct-60 { width: 60%; } .ab-wpct-65 { width: 65%; } .ab-wpct-70 { width: 70%; } .ab-wpct-75 { width: 75%; } .ab-wpct-80 { width: 80%; } .ab-wpct-85 { width: 85%; } .ab-wpct-90 { width: 90%; } .ab-wpct-95 { width: 95%; } .ab-wpct-100 { width: 100%; } 
.ab-event-banner { max-width: 100%; max-height: 180px; border-radius: 8px; border: 1px solid var(--ab-border); }

/* Settings checklist */
.ab-w-icon { width: 2rem; }

/* Avatars */
.ab-avatar-ant { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
    background: #E8413C; color: #fff; font-size: 22px; }
.ab-color-mini { width: 28px; height: 20px; padding: 0; border: 0; }

/* Two-factor setup QR code (inline SVG). */
.ab-qr svg { display: block; width: 220px; height: 220px; }

/* Notifications: phone preview, composer */
.ab-sticky { position: sticky; top: 1rem; }
.ab-phone { background: linear-gradient(160deg, #1e293b, #334155); border-radius: 22px; padding: 18px 12px 26px; }
.ab-push { background: rgba(255, 255, 255, .96); border-radius: 14px; padding: 10px 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.ab-push__head { font-size: .72rem; color: #64748b; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
.ab-push__icon { display: inline-flex; width: 18px; height: 18px; border-radius: 5px; background: #ff8020; align-items: center; justify-content: center; font-size: .7rem; }
.ab-push__title { font-weight: 600; font-size: .9rem; color: #0f172a; word-break: break-word; }
.ab-push__body { font-size: .82rem; color: #334155; white-space: pre-wrap; word-break: break-word; }
.ab-push__image { display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; margin-top: 8px; }
.ab-push-thumb { width: 100%; max-height: 70px; object-fit: cover; border-radius: 6px; border: 1px solid var(--ab-border); }
.ab-segment { border: 1px dashed var(--ab-border); border-radius: 8px; padding: .75rem; margin-bottom: .5rem; }
.ab-variant { border-left: 3px solid #c7d2fe; padding-left: .5rem; }
.ab-reminder { border: 1px solid var(--ab-border); border-radius: 8px; padding: .6rem .75rem; }
.ab-counter { margin-top: 0; }

/* Level editor: visual mechanics (level-mechanics.js) */
.ab-mtools { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: .5rem; }
.ab-mtool { display: inline-flex; align-items: center; padding: .25rem .55rem; border: 1px solid var(--ab-border); border-radius: 999px; background: #fff; font-size: .78rem; color: #374151; }
.ab-mtool:hover { border-color: #93c5fd; }
.ab-mtool.is-on { background: var(--ab-accent); border-color: var(--ab-accent); color: #fff; }
.ab-mopts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.ab-mrow { display: flex; align-items: center; gap: .45rem; padding: .25rem .4rem; border: 1px solid var(--ab-border); border-radius: 6px; margin-top: 4px; font-size: .78rem; background: #fff; }
.ab-mrow:hover { border-color: #f59e0b; background: #fffbeb; }
.ab-mrow .form-control { padding: .05rem .3rem; font-size: .75rem; }
.ab-queues [data-q] { cursor: pointer; position: relative; }
.ab-box.is-selected { outline: 3px solid var(--ab-accent); outline-offset: 1px; }
.ab-box.is-picking { outline: 2px dashed #94a3b8; }
.ab-box.is-grouped { outline: 3px solid #16a34a; }
.ab-box--hammer { background: #e5e7eb; justify-content: center; }
.ab-box__tag { position: absolute; top: -7px; right: -6px; font-size: .6rem; font-weight: 700; border-radius: 6px; padding: 0 3px; color: #fff; display: inline-flex; align-items: center; }
.ab-box__tag i { background: transparent !important; font-size: .65rem; padding: 0 !important; }
.ab-box__tag.is-link { background: #2563eb; }
.ab-box__tag.is-swap { background: #9333ea; }
.ab-rule-card { border: 1px solid var(--ab-border); border-radius: 8px; padding: .6rem; background: #f8fafc; }
.ab-rule-grid { display: grid; grid-template-columns: 1fr; gap: .35rem; }
.ab-rule-grid .form-control { padding: .05rem .3rem; font-size: .75rem; }
.ab-rule-chip { display: inline-flex; align-items: center; gap: .3rem; margin: 0 4px 4px 0; padding: .15rem .5rem; border: 1px solid var(--ab-border); border-radius: 999px; background: #fff; font-size: .75rem; }
.ab-tray-edit { display: flex; gap: 4px; margin-bottom: .25rem; }
.ab-tray-slot { width: 38px; height: 30px; border: 2px dashed #cbd5e1; border-radius: 6px; background: #fff; color: #92400e; padding: 0; }
.ab-tray-slot.is-locked { border-style: solid; border-color: #f59e0b; background: #fef3c7; }

/* Chips and screen picker (inputs.js) */
.ab-chips__list { display: flex; flex-wrap: wrap; gap: 4px; min-height: 1.6rem; align-items: center; }
.ab-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .1rem .2rem .1rem .55rem; border-radius: 999px; background: #eef2ff; color: #1e3a8a; font-size: .78rem; border: 1px solid #c7d2fe; }
.ab-chip__x { border: 0; background: transparent; color: #64748b; font-size: .9rem; line-height: 1; padding: 0 .3rem; }
.ab-chip__x:hover { color: #dc2626; }
.ab-chips__add { max-width: 12rem; }