/* Accept/Decline UI and status states for the public quote-review page,
   and every other page built on the same .qr-message-page "form/message"
   pattern (invoice-review.php, event.php, set-password.php, the customer
   portal login/setup/account pages). Dark theme, matching the rest of the
   public site's own palette (assets/css/style.css already uses #0d0d0d/
   #171717/#bac1d4 throughout) and the admin panel's identical colors -
   this file used to be a separate light theme, which looked inconsistent
   with every other page on the site.

   Layered on top of admin/assets/css/invoice-print.css, which supplies
   the shared branded PRINTABLE document styling (.inv-page, .inv-header,
   etc.) - that one stays light on purpose (a real invoice/quote is a
   paper-style document meant to be printed or saved as a PDF), so this
   file only adds what's specific to the interactive, non-printed page
   around it. */

body {
  background-color: #0d0d0d;
  color: #bac1d4;
}

.qr-message-page {
  max-width: 480px;
  margin: 80px auto;
  background-color: #171717;
  color: #bac1d4;
  padding: 48px 32px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.qr-message-page img {
  height: 48px;
  margin-bottom: 24px;
}

.qr-message-page h1 {
  font-size: 20px;
  margin: 0 0 12px;
  color: #ffffff;
}

.qr-message-page a {
  color: #00d20a;
}

.qr-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin: 32px 0;
}

.qr-action-form {
  margin: 0;
}

.qr-btn {
  border: none;
  border-radius: 30px;
  padding: 14px 36px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}

.qr-btn-accept {
  background-color: #00d20a;
  color: #fff;
}

.qr-btn-decline {
  background-color: transparent;
  color: #ff4d4f;
  border: 1px solid #ff4d4f;
}

.qr-status-banner {
  text-align: center;
  font-weight: 700;
  padding: 16px;
  margin: 32px 0;
  background-color: #1c1c1c;
  color: #bac1d4;
  border-radius: 8px;
}

/* .qr-message-page centers everything by default (its usual content is
   short status text) - a form dropped inside it (set-password.php) needs
   its labels/inputs left-aligned like any other form instead. */
.qr-form-left {
  text-align: left;
}

/* A wider variant for portal pages (my-account.php and its sub-pages)
   whose content is a real page of information/lists, not a short status
   message - the default 480px is too narrow for tables. */
.qr-message-page-wide {
  max-width: 720px;
}

.qr-form-group {
  margin-bottom: 20px;
}

.qr-form-group label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 14px;
  color: #ffffff;
}

.qr-form-group label small {
  font-weight: 400;
  color: #9ca3af;
}

.qr-form-group input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #393939;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  background-color: #0d0d0d;
  color: #bac1d4;
}

.qr-form-group input:focus {
  outline: none;
  border-color: #00d20a;
}

/* Password show/hide toggle - reuses admin/assets/js/password-toggle.js's
   exact class names (as-admin-password-wrap/as-admin-password-toggle) so
   the same script works unmodified on these public pages too, no fork
   needed. */
.as-admin-password-wrap {
  position: relative;
}

.as-admin-password-wrap input {
  padding-right: 44px !important;
}

.as-admin-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  font-size: 15px;
  line-height: 1;
}

.as-admin-password-toggle:hover {
  color: #00d20a;
}

/* Dark-mode overrides for invoice-print.css's .inv-items/.inv-status-badge
   when they're reused inside a .qr-message-page (my-invoices.php,
   my-quotes.php, my-projects.php's list tables) instead of on the actual
   printable document (.inv-page), which stays light on purpose. */
.qr-message-page .inv-items {
  color: #bac1d4;
}

.qr-message-page .inv-items th,
.qr-message-page .inv-items td {
  border-color: rgba(255, 255, 255, 0.08);
}

.qr-message-page .inv-items th {
  background-color: #1c1c1c;
  color: #ffffff;
}

.qr-message-page .inv-items a {
  color: #00d20a;
}

@media print {
  .qr-actions {
    display: none;
  }
}