/*
 * The site's own dialog and toasts — assets/js/dp-dialog.js paints with these.
 *
 * Nick, 2026-09-24: "never use browser based dialogues. html only".
 *
 * One stylesheet for every page: the driver hub (@import at the top of
 * driver-portal-theme.css), the admin (includes/header.php), the shop and the
 * waiver pages (their own heads). The selectors and values are exactly the
 * ones that used to sit in the driver theme, so the hub's dialog is unchanged;
 * the only additions are the var() fallbacks, which are what a page WITHOUT
 * the hub's palette paints from: a dark panel, a yellow-400 primary button,
 * a red danger button — a look that sits on the admin and the public shop
 * pages alike. On the hub every fallback is shadowed by the theme token, in
 * both the dark and the light palette.
 */
.dp-dialog-backdrop     { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.dp-dialog              { width: 100%; max-width: 24rem; border-radius: 1rem; padding: 1.25rem 1.25rem 1rem; box-shadow: 0 20px 50px rgba(0,0,0,.35); background-color: var(--dp-card-raised, #1f2937); color: var(--dp-text, #ffffff); box-sizing: border-box; font-family: inherit; text-align: left; }
.dp-dialog-title        { font-size: 1.05rem; font-weight: 700; margin: 0 0 .35rem; color: var(--dp-text, #ffffff); }
.dp-dialog-message      { font-size: .9rem; margin: 0 0 1rem; line-height: 1.45; color: var(--dp-text-muted, #9ca3af); white-space: pre-line; overflow-wrap: anywhere; }
.dp-dialog-label        { display: block; font-size: .8125rem; font-weight: 600; margin: 0 0 .35rem; color: var(--dp-text-muted, #9ca3af); }
.dp-dialog-input        { display: block; width: 100%; box-sizing: border-box; margin: 0 0 1rem; padding: .5rem .7rem; border-radius: .6rem; font: inherit; font-size: .9rem; line-height: 1.4; background-color: var(--dp-input-bg, #111827); color: var(--dp-text, #ffffff); border: 1px solid var(--dp-border-strong, #4b5563); }
.dp-dialog-input::placeholder { color: var(--dp-text-faint, #8b93a1); opacity: .7; }
.dp-dialog-input:focus  { outline: 2px solid var(--dp-accent, #facc15); outline-offset: 1px; }
.dp-dialog-actions      { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.dp-dialog-btn          { padding: .5rem .9rem; border-radius: .6rem; font-size: .875rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; font-family: inherit; line-height: 1.25; }
.dp-dialog-cancel       { background: none; border-color: var(--dp-border-strong, #4b5563); color: var(--dp-text, #ffffff); }
.dp-dialog-confirm      { background-color: var(--dp-accent, #facc15); color: var(--dp-on-accent, #000000); }
.dp-dialog-confirm:hover { background-color: var(--dp-accent-hover, #fde047); }
.dp-dialog-danger       { background-color: var(--dp-danger, #dc2626); color: #fff; }
.dp-dialog-btn:focus-visible { outline: 2px solid var(--dp-accent, #facc15); outline-offset: 2px; }
.dp-toasts              { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 10001; display: flex; flex-direction: column; gap: .5rem; align-items: center; pointer-events: none; max-width: calc(100vw - 2rem); }
.dp-toast               { padding: .6rem 1rem; border-radius: .75rem; font-size: .875rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); border: 1px solid var(--dp-border-strong, #4b5563); opacity: 1; transition: opacity .3s, transform .3s; background-color: var(--dp-card-raised, #1f2937); color: var(--dp-text, #ffffff); font-family: inherit; text-align: center; }
.dp-toast.is-leaving    { opacity: 0; transform: translateY(.5rem); }
.dp-toast-ok            { border-color: var(--dp-border-ok, #166534); }
.dp-toast-warn          { border-color: var(--dp-border-warn, #92400e); }
.dp-toast-danger        { border-color: var(--dp-border-danger, #991b1b); }