/* Shared in-page confirmation dialog (see confirm_dialog.js).
   Uses the same theme tokens as the dashboards it sits on top of. */

.vc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 8, 18, 0.72);
}

.vc-box {
  width: 100%;
  max-width: 440px;
  background: #101827;
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-radius: 6px;
  padding: 22px 24px 18px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}
.vc-box.vc-danger { border-color: rgba(255, 154, 154, 0.45); }

.vc-title {
  margin: 0 0 10px;
  font-family: var(--sans-geo, inherit);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text, #e8e4da);
}

.vc-body {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
  /* A record's own title goes in here, so it must not blow the layout. */
  overflow-wrap: anywhere;
}

.vc-actions { display: flex; justify-content: flex-end; gap: 10px; }

.vc-btn {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(201, 162, 39, 0.45);
  color: #e8ca6e;
  border-radius: 4px;
  padding: 8px 15px;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}
.vc-btn:hover { border-color: #c9a227; background: rgba(201, 162, 39, 0.12); }
/* Visible focus ring matters more here than anywhere else on the page -
   Cancel is focused on open, and the user needs to see where they are. */
.vc-btn:focus-visible { outline: 2px solid #e8ca6e; outline-offset: 2px; }

.vc-btn-confirm {
  color: #ff9a9a;
  border-color: rgba(255, 154, 154, 0.5);
  background: rgba(255, 154, 154, 0.10);
}
.vc-btn-confirm:hover { border-color: #ff9a9a; background: rgba(255, 154, 154, 0.18); }
.vc-btn-confirm:focus-visible { outline-color: #ff9a9a; }

@media (max-width: 480px) {
  .vc-actions { flex-direction: column-reverse; }
  .vc-btn { width: 100%; }
}

/* Prompt field, added 2026-08-31 with Fixed Assets & Inventory - for the
   confirmations that are a question ("dispose for how much?") rather than
   a yes/no. */
.vc-field { display: block; margin: 0 0 4px; }
.vc-field-label {
  display: block; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin-bottom: 5px;
}
.vc-input {
  width: 100%; box-sizing: border-box;
  background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(201, 162, 39, 0.4);
  color: var(--text, #e8e4da); border-radius: 4px; padding: 8px 10px;
  font: inherit; font-size: 0.95rem;
}
.vc-input:focus { outline: none; border-color: #c9a227; }

/* prompt: {options: [...]} renders a <select> rather than a text box - see
   confirm_dialog.js. Inherits .vc-input; this only restores the caret that
   `appearance: none` would otherwise be needed to replace, and makes the
   options readable on the dark panel (a native <option> is painted by the
   OS, which on Windows defaults to a white list on a dark control). */
.vc-select { cursor: pointer; }
.vc-select option { background: #14100a; color: var(--text, #e8e4da); }