/* TOKEN FALLBACKS ARE LOad-BEARING, not tidiness. This sheet is loaded by
 * every shell, and the shells do not share a palette: TeamShell defines
 * --surface and --bg but NOT --card or --backdrop. An undefined custom
 * property is not a colour, so `background: var(--card)` painted NOTHING and
 * the dialog rendered see-through over the roster with its own text
 * unreadable, while the backdrop dimmed nothing at all. --surface is opaque on
 * every surface that has it (#FFFFFF light, #201D18 dark on the team app),
 * which is why it is the fallback rather than a literal.
 */
/*
 * The confirm-over-button popover (confirm.js), shared by EVERY surface.
 *
 * These rules lived copy-pasted in AdminShell, GnaShell and MastersShell while
 * KioskShell loaded the SCRIPT with no styles at all, which is the shared-CSS
 * trap in its purest form: the kiosk got working dialogs rendered completely
 * naked. All four (plus TeamShell, which gains the popover today for the
 * timesheet flows) now load this one file. Ten classes come off the
 * shared-css-baseline debt list with it.
 *
 * Tokens carry fallbacks because the kiosk palette lacks --r-md and --shadow-*.
 */
.confirm-backdrop { position: fixed; inset: 0; z-index: 9500; background: var(--backdrop, rgba(0, 0, 0, 0.45)); }
.confirm-pop { position: fixed; z-index: 9501; width: min(320px, calc(100vw - 16px)); background: var(--card, var(--surface, #fff)); border: 1px solid var(--line-2); border-radius: 13px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22); padding: 1rem 1.05rem 0.9rem; animation: confirmIn 0.13s ease-out; }
.confirm-pop.is-centered { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); animation: none; }
.confirm-msg { margin: 0 0 0.85rem; font-size: 0.92rem; line-height: 1.5; color: var(--ink); }
.confirm-input { width: 100%; margin: 0 0 0.85rem; padding: 0.55em 0.7em; border: 1.5px solid var(--line-2); border-radius: 9px; font: inherit; font-size: 16px; resize: vertical; color: var(--ink); background: var(--card, var(--surface, #fff)); }
.confirm-input:focus { outline: none; border-color: var(--ember); }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; }
.confirm-actions .confirm-btn { margin-top: 0; padding: 7px 14px; font-size: 0.84rem; width: auto; }
.confirm-arrow { position: absolute; width: 12px; height: 12px; background: var(--card, var(--surface, #fff)); border: 1px solid var(--line-2); transform: rotate(45deg); }
.confirm-pop.place-below .confirm-arrow { top: -7px; border-right: none; border-bottom: none; }
.confirm-pop.place-above .confirm-arrow { bottom: -7px; border-left: none; border-top: none; }
.confirm-ok-danger { background: var(--danger); color: #fff; border: 1px solid var(--danger); border-radius: var(--r-sm); font-weight: 600; cursor: pointer; }
.confirm-ok-danger:hover { filter: brightness(0.92); }
.confirm-ok-danger:hover { filter: none; }