/* app.css — a few SPA-only helpers layered on top of bibbot.css.
   bibbot.css owns the whole visual system; this file only adds things the
   mockups imply but don't ship a class for (modal overlay, spinner, run shots). */

/* router-link reset so nav-items / cards keep their look */
a.nav-item, a.nav-item:hover { text-decoration: none; }
a.plain, a.plain:hover { color: inherit; text-decoration: none; display: block; }

/* modal / confirm dialog */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(19,19,51,.45);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem;
}
.modal {
  background: var(--bb-panel); border-radius: var(--r); box-shadow: var(--shadow-drop);
  padding: 1.25rem; width: 420px; max-width: 100%;
}
.modal h4 { margin-bottom: .5rem; }

/* spinner */
.spinner {
  width: 1.1rem; height: 1.1rem; border: 2px solid var(--bb-primary-overlay);
  border-top-color: var(--bb-primary); border-radius: 50%; display: inline-block;
  animation: bb-spin .7s linear infinite; vertical-align: middle;
}
.spinner.lg { width: 2rem; height: 2rem; border-width: 3px; }
@keyframes bb-spin { to { transform: rotate(360deg); } }
.loading-wrap { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 2rem; color: var(--bb-text-muted); }

/* inline error helper text under a field */
.error-text { color: var(--bb-danger); font-size: .82rem; margin-top: .35rem; }

/* run "shots" log */
.shot-log { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem;
  background: #1118270a; border-radius: var(--r-sm); padding: .5rem .65rem; max-height: 260px; overflow-y: auto; }
.shot-row { display: flex; gap: .6rem; padding: .15rem 0; border-bottom: 1px solid var(--bb-table-border); }
.shot-row:last-child { border-bottom: none; }
.shot-row .t { color: var(--bb-text-muted); white-space: nowrap; }

/* small select that matches .input */
select.input { appearance: auto; }

/* qr canvas centering */
.qr-canvas { display: block; margin: 0 auto; border: 8px solid #fff; border-radius: var(--r); box-shadow: var(--shadow-card); background: #fff; }

/* toast */
.toast { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  background: var(--bb-primary-dark); color: #fff; padding: .6rem 1rem; border-radius: var(--r);
  box-shadow: var(--shadow-drop); z-index: 200; font-size: .9rem; }

/* copy-to dropdown */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu { position: absolute; right: 0; top: 110%; background: var(--bb-panel);
  box-shadow: var(--shadow-drop); border-radius: var(--r-sm); padding: .35rem; z-index: 30; min-width: 180px; }
.dropdown-menu .item { padding: .4rem .55rem; border-radius: var(--r-sm); cursor: pointer; font-size: .85rem; font-weight: 700; color: var(--bb-text-2); }
.dropdown-menu .item:hover { background: rgba(0,0,0,.05); }

/* ---- dark-mode fixes for the SPA-only surfaces above (see bibbot.css theme block).
   The QR canvas intentionally stays white in both themes so it scans reliably. ---- */
html.dark .dropdown-menu .item:hover,
html.system.is-dark .dropdown-menu .item:hover { background: rgba(255,255,255,.06); }
html.dark .shot-log,
html.system.is-dark .shot-log { background: rgba(255,255,255,.04); }

/* ---- walkthrough 2026-07-01 additions ---------------------------------- */

/* next-run strip: tomorrow's plan (left) + countdown (right) */
.nextrun { align-items: flex-start; }
.nextrun .nextrun-plan { display: flex; flex-direction: column; gap: .1rem; }
.nextrun .nextrun-cd { text-align: right; }
.nextrun .plan-line { font-size: .92rem; }
.nextrun .plan-line.muted { color: var(--bb-text-muted); }
.nextrun .plan-line.warn { color: var(--bb-warning); font-weight: 700; }

/* date subheader in grouped bookings */
.datehead { font-family: var(--font-head); font-weight: 700; font-size: .8rem; color: var(--bb-text-2);
  text-transform: uppercase; letter-spacing: .04em; margin: .6rem 0 .35rem; }

/* inline icon-buttons (edit / duplicate / delete / remove) */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem;
  border: none; border-radius: var(--r-sm); background: var(--bb-input-bg); color: var(--bb-text-2);
  cursor: pointer; padding: 0; text-decoration: none; }
.icon-btn:hover { background: rgba(0,0,0,.08); color: var(--bb-text); }
.icon-btn.danger:hover { background: var(--bb-danger); color: #fff; }
.icon-btn[disabled] { opacity: .5; cursor: default; }

/* topbar user dropdown menu */
.usermenu { position: relative; }
.user .caret { font-size: .8rem; color: var(--bb-text-muted); }
.menu-backdrop { position: fixed; inset: 0; z-index: 40; }
.menu { position: absolute; right: 0; top: 130%; z-index: 41; min-width: 170px; background: var(--bb-panel);
  box-shadow: var(--shadow-drop); border-radius: var(--r-sm); padding: .35rem; }
.menu-item { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: var(--r-sm);
  cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--bb-text-2); }
.menu-item:hover { background: rgba(0,0,0,.05); }
.menu-item.danger { color: var(--bb-danger); }
.menu-item .ico { display: inline-flex; }
.menu-sep { height: 1px; background: var(--bb-table-border); margin: .25rem 0; }

/* editor day tabs */
.daytabs { flex-wrap: wrap; max-width: 100%; }

/* clickable table rows / cards */
tr.clickable, .card.clickable { cursor: pointer; }

/* de-emphasised prototype dev panel */
.dev-panel { opacity: .85; }
.dev-panel > summary { list-style: none; color: var(--bb-text-2); }
.dev-panel > summary::-webkit-details-marker { display: none; }

/* dark-mode fixes for the new surfaces */
html.dark .icon-btn:hover, html.system.is-dark .icon-btn:hover,
html.dark .menu-item:hover, html.system.is-dark .menu-item:hover { background: rgba(255,255,255,.08); }