/* Youshi — in-app dialogs.
   A stylesheet of its own so every surface can load it: the partner
   portal, the admin pages, the kitchen display, the rider app, the guest
   menu and the tracking page. Several of those deliberately do not share
   the portal's stylesheet, and none of them should have to in order to
   ask a question without opening a native window. */

/* ===================== In-app dialogs =====================
   These replace alert(), confirm() and prompt() everywhere. The point is
   not that they look nicer — though they do — it is that they never
   leave the window. A native modal in the desktop app takes OS focus and
   frequently does not hand it back, which leaves every text field on the
   page unclickable until you alt-tab away and return.

   Written against the --dg-* tokens, so they follow both themes. Also
   used by login.html and reset.html, which do not load the portal's
   shared script but do load this stylesheet. */
.yd-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 9, 20, .62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: ydVeil .18s ease both;
}
@keyframes ydVeil { from { opacity: 0; } to { opacity: 1; } }
.yd-overlay.is-leaving { animation: ydVeilOut .16s ease both; }
@keyframes ydVeilOut { to { opacity: 0; } }

.yd-card {
  width: min(460px, 100%);
  max-height: 84vh;
  overflow-y: auto;
  padding: 22px 24px 18px;
  border-radius: 18px;
  background: var(--dg-bg-1, #0a0e1c);
  border: 1px solid var(--dg-border, rgba(255, 255, 255, .1));
  box-shadow: 0 24px 70px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03);
  color: var(--dg-text, #eef1fb);
  animation: ydIn .24s cubic-bezier(.2, .9, .3, 1.1) both;
}
@keyframes ydIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.yd-overlay.is-leaving .yd-card { animation: ydOut .16s ease both; }
@keyframes ydOut { to { opacity: 0; transform: translateY(8px) scale(.985); } }

.yd-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.yd-icon {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 9px;
  background: var(--dg-gradient-soft, rgba(99, 102, 241, .16));
  color: var(--dg-blue-2, #7db2ff);
  font-size: 15px;
}
.yd-card.is-danger .yd-icon {
  background: color-mix(in srgb, var(--dg-red, #f65c6f) 16%, transparent);
  color: var(--dg-red, #f65c6f);
}
.yd-title { font-size: 16.5px; font-weight: 800; letter-spacing: -.2px; }

.yd-body { font-size: 13.5px; line-height: 1.6; color: var(--dg-text-soft, #99a3c4); }
.yd-body p { margin: 0 0 9px; }
.yd-body p:last-child { margin-bottom: 0; }

.yd-fields { margin-top: 14px; display: flex; flex-direction: column; gap: 11px; }
.yd-field { display: block; }
.yd-field > span {
  display: block; margin-bottom: 5px;
  font-size: 12px; font-weight: 700; color: var(--dg-text-soft, #99a3c4);
}
.yd-field input, .yd-field textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--dg-tint-1, rgba(255, 255, 255, .045));
  border: 1px solid var(--dg-border, rgba(255, 255, 255, .1));
  color: var(--dg-text, #eef1fb);
  font: inherit;
  font-size: 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.yd-field input:focus, .yd-field textarea:focus {
  outline: none;
  border-color: var(--dg-blue, #4d8dff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dg-blue, #4d8dff) 22%, transparent);
}

.yd-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.yd-btn {
  padding: 10px 18px;
  border-radius: 11px;
  border: 1px solid var(--dg-border, rgba(255, 255, 255, .12));
  background: var(--dg-tint-1, rgba(255, 255, 255, .045));
  color: var(--dg-text, #eef1fb);
  font: inherit; font-size: 13.5px; font-weight: 700;
  cursor: pointer;
  transition: transform .14s ease, background .18s ease, border-color .18s ease;
}
.yd-btn:hover { background: var(--dg-tint-2, rgba(255, 255, 255, .07)); }
.yd-btn:active { transform: scale(.97); }
.yd-btn:focus-visible { outline: 2px solid var(--dg-blue, #4d8dff); outline-offset: 2px; }
.yd-primary {
  background: var(--dg-gradient, linear-gradient(135deg, #4d8dff, #b565f5));
  border-color: transparent;
  color: #fff;
}
.yd-primary:hover { filter: brightness(1.08); background: var(--dg-gradient, linear-gradient(135deg, #4d8dff, #b565f5)); }
.yd-danger {
  background: linear-gradient(135deg, #f65c6f, #c0392b);
}
.yd-danger:hover { filter: brightness(1.08); background: linear-gradient(135deg, #f65c6f, #c0392b); }

@media (max-width: 520px) {
  .yd-actions { flex-direction: column-reverse; }
  .yd-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .yd-overlay, .yd-card { animation: none; }
}