/* Barming Fish Bar admin page: the kitchen page restyled in black and white glass. Loaded after the page's own styles. */
:root {
  color-scheme: dark;
  --bg:#050505; --surface:rgba(255,255,255,.07); --surface2:rgba(255,255,255,.13); --line:rgba(255,255,255,.16); --line-strong:rgba(255,255,255,.32);
  --ink:#ffffff; --muted:rgba(255,255,255,.66); --amber:#ffffff; --amber-ink:#000000; --aqua:#ffffff; --red:#ededed; --green:#ffffff;
  --serif:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
html { background:#050505; }
body { background:radial-gradient(circle at 12% 0%,rgba(255,255,255,.2),transparent 30rem),radial-gradient(circle at 92% 100%,rgba(255,255,255,.14),transparent 34rem),#050505 !important; background-attachment:fixed !important; }
h1, h2, h3 { font-weight:800; }
a { color:#fff; }
:focus-visible { outline-color:#fff !important; }

/* Frosted panels */
.card, .tile, .order, .item, .today-strip, .login-card, .tap-print, .help-card, dialog, .panel > div > .card {
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.16); box-shadow:0 8px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14);
}
.card, .tile, .order, .item, .today-strip { background:rgba(255,255,255,.06) !important; }
.tile.big { background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.28) !important; }

.topbar { background:rgba(10,10,10,.6) !important; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-bottom-color:rgba(255,255,255,.16); }
.tabs { background:rgba(10,10,10,.5) !important; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.tabs button[aria-selected=true] { color:#fff; border-bottom-color:#fff; }
.btn { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); }
.btn:hover:not(:disabled) { background:rgba(255,255,255,.2) !important; }
.btn.primary { background:#fff; color:#000; border-color:transparent; }
.btn.primary:hover:not(:disabled) { background:#e6e6e6 !important; }
.btn.danger { border-color:rgba(255,255,255,.5); color:#fff; }
input[type=text], input[type=password], input[type=time], input[type=number], input[type=email], select, textarea { background-color:rgba(0,0,0,.4) !important; color:#fff; }
select option { background-color:#111; color:#fff; }
select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }
input::placeholder { color:rgba(255,255,255,.4); }

.chip { background:rgba(255,255,255,.08); }
.tag { background:#fff !important; color:#000 !important; }
.tag.new { background:#fff !important; color:#000 !important; }
.order.new { border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.22); animation:glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow:0 0 0 7px rgba(255,255,255,.07); } }
.collect-chip, .collect-chip.booked { background:rgba(255,255,255,.14) !important; color:#fff !important; }
.order-note { background:rgba(255,255,255,.1) !important; color:#fff !important; }
.allergy { background:#fff !important; color:#000 !important; border-color:#fff !important; }
.no-allergy { color:rgba(255,255,255,.55); }
.seg input:checked + span, .pills button[aria-pressed=true], .branch-switch button[aria-pressed=true] { background:#fff !important; color:#000 !important; }
.item.changed { border-color:#fff; }
.savebar { background:rgba(10,10,10,.85) !important; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
.fin-track { background:rgba(255,255,255,.12) !important; }
.fin-track span, .bar { background:linear-gradient(90deg,rgba(255,255,255,.55),#fff) !important; }
.toast { background:#fff; color:#000; }
.banner { background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.4) !important; color:#fff !important; }
.error { background:#fff !important; color:#000 !important; border-color:#fff !important; }
.switch input:checked { background:#fff; }
.switch input:checked::after { background:#000; }
::-webkit-scrollbar-track { background:rgba(255,255,255,.05); }

/* ===== Admin page refresh: same pages and buttons, a cleaner look ===== */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fall { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: translate3d(-2vmax, -1vmax, 0); } to { transform: translate3d(3vmax, 2vmax, 0) scale(1.06); } }

body { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: .005em; }
body::before { content: ""; position: fixed; inset: -10%; z-index: -1; pointer-events: none; animation: drift 28s ease-in-out infinite alternate;
  background: radial-gradient(34vmax 34vmax at 10% 5%, rgba(255,255,255,.2), transparent 62%), radial-gradient(30vmax 30vmax at 92% 85%, rgba(255,255,255,.16), transparent 62%); }
body { background: transparent !important; }
h1, h2, h3, .order-number, .tile strong, .today-strip strong, .brand strong { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; letter-spacing: -.02em; }

/* floating top bar */
.topbar { position: sticky; top: 10px; margin: 12px 14px 0; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 22px; padding: 12px 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14); animation: fall .55s cubic-bezier(.2,.8,.2,1) both; }
.brand strong { font-size: 1.35rem; font-weight: 800; }
.brand small { padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: .66rem; }
.chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.chip .dot, .dot { box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
.dot.on { animation: dotpulse 2.2s ease-out infinite; }
@keyframes dotpulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 70% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

/* tabs as one rounded switch */
.tabs { margin: 14px auto 4px; width: max-content; max-width: calc(100% - 28px); padding: 5px; gap: 4px; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 999px; background: rgba(255,255,255,.07) !important;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 8px 30px rgba(0,0,0,.35); animation: rise .5s ease .1s both; }
.tabs button { min-height: 40px; padding: 0 18px; border: 0 !important; border-radius: 999px; color: rgba(255,255,255,.7); transition: background .2s ease, color .2s ease, transform .15s ease; }
.tabs button:hover { color: #fff; background: rgba(255,255,255,.1); }
.tabs button[aria-selected=true] { background: #fff; color: #000; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.tabs button:active { transform: scale(.96); }

/* panels slide in when you change tab */
.panel:not([hidden]) { animation: rise .4s ease both; }

/* cards and tiles */
.card, .tile, .order, .today-strip { border-radius: 24px; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.card { padding: 26px; }
.order:hover, .tile:hover, .card:hover { border-color: rgba(255,255,255,.3); }
.order, .tile { animation: rise .45s ease both; }
.orders .order:nth-child(2) { animation-delay: .06s; } .orders .order:nth-child(3) { animation-delay: .12s; } .orders .order:nth-child(4) { animation-delay: .18s; }
.tiles .tile:nth-child(2) { animation-delay: .06s; } .tiles .tile:nth-child(3) { animation-delay: .12s; } .tiles .tile:nth-child(4) { animation-delay: .18s; }
.today-strip { padding: 16px 24px; }
.today-strip:hover { transform: translateY(-2px); }
.tile strong { font-weight: 800; }
.tile.big strong { color: #fff; }
.tile-label, .today-strip small { color: rgba(255,255,255,.55); }

/* order cards */
.order { padding: 22px; gap: 14px; }
.order-number { font-size: 2.4rem; font-weight: 800; }
.qty { background: rgba(255,255,255,.14); color: #fff; border-radius: 10px; }
.lines li .dish { font-weight: 700; }
.order-foot { border-top-color: rgba(255,255,255,.14); }
.total { font-size: 1.25rem; font-weight: 800; }

/* buttons, inputs */
.btn { transition: background .2s ease, transform .15s ease, box-shadow .2s ease; }
.btn:active:not(:disabled) { transform: scale(.96); }
.btn.primary { box-shadow: 0 6px 20px rgba(255,255,255,.18); }
input[type=text], input[type=password], input[type=time], input[type=number], input[type=email], select, textarea { border-radius: 14px; transition: border-color .2s ease, box-shadow .2s ease; }
input:focus, select:focus, textarea:focus { border-color: #fff !important; box-shadow: 0 0 0 3px rgba(255,255,255,.2); outline: none; }
dialog[open], .toast { animation: rise .3s ease both; }

@media (max-width: 760px) {
  .topbar { margin: 8px 8px 0; border-radius: 18px; position: static; }
  .tabs { border-radius: 22px; width: auto; overflow-x: auto; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }