/* ============================================================================
   Legacy-class bridge for the Aurbit dashboard template.

   Assets/customJS/*.js builds markup with the OLD theme's class names
   (Bootstrap badges, .data-state dots, .lead, and so on). Those scripts own the
   live data and are deliberately left unchanged, so instead of renaming classes
   in JS this file restyles the names they already emit using the template's
   design tokens from dashboard.css.

   Load AFTER dashboard.css. Everything here exists only because a script emits
   it -- if a script is ever rewritten to emit template classes directly, the
   matching block below can be deleted.
   ============================================================================ */

/* --- transaction status badges (dashboard.js getTransactions) ---------------
   Emitted as: badge badge-md badge-outline badge-{warning|info|success|danger}
   Restyled as the template's .status-pill. */
.badge.badge-outline {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 20px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; white-space: nowrap;
  background: rgba(255, 255, 255, 0.06); color: var(--text-secondary);
}
.badge.badge-outline::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.badge.badge-success { background: var(--good-bg); color: var(--good); }
.badge.badge-warning { background: var(--warn-bg); color: var(--warn); }
.badge.badge-info    { background: var(--info-bg); color: var(--info); }
.badge.badge-danger  { background: var(--bad-bg); color: var(--bad); }

/* The old theme's extra utility classes ride along on the same element and
   would otherwise repaint it. */
.badge.badge-outline.bg-1,
.badge.badge-outline.block-pending,
.badge.badge-outline.block-not-available { background-color: inherit; }

/* --- status dot beside the token amount (dashboard.js getTransactions) --- */
.data-state {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  margin-right: 9px; background: var(--text-muted);
}
.data-state-approved { background: var(--good); }
.data-state-pending  { background: var(--warn); }
.data-state-progress { background: var(--info); }
.data-state-canceled { background: var(--bad); }

/* --- small layout utilities the scripts emit --- */
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.text-center { text-align: center; }
.lead { font-size: inherit; font-weight: 500; color: var(--text-primary); }

.tnx-info-icon { color: var(--gold-primary) !important; }
.tnx-info-icon:hover { color: var(--gold-light) !important; }

/* --- deposit-address modal bits kept from the old markup ------------------
   dashboard.js reads .copy-address / writes .copy-feedback, so those class
   names have to survive; they are styled here to match the template's
   .payment-address-box treatment. */
.copy-wrap {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--background-primary); border: 1px solid var(--border-gold);
  border-radius: 6px; padding: 12px 14px; margin-bottom: 10px;
}
.copy-address {
  flex: 1; background: none; border: none; color: var(--gold-light);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis;
}
.copy-address:disabled { opacity: 1; }
.copy-feedback { font-size: 11.5px; font-weight: 600; }

/* --- auth pages -----------------------------------------------------------
   The invitation-code field uppercases what the user types; without this the
   placeholder is uppercased too and "e.g." reads as "E.G.". */
#Promocode::placeholder { text-transform: none; }
#Promocode::-webkit-input-placeholder { text-transform: none; }

/* --- anonymous shell ------------------------------------------------------
   _Layout renders this variant for pages that use the dashboard layout but
   have no session to build a sidebar from (password reset, email confirmation,
   external-login callbacks, error pages). Single centred column. */
.dash-shell-anon .dash-main { width: 100%; }
.dash-shell-anon .dash-topbar { justify-content: flex-start; }
.dash-shell-anon .dash-body { max-width: 520px; margin: 48px auto; }
.dash-shell-anon .dash-sidebar-logo img { width: 30px; height: 30px; }

/* --- MVC unobtrusive validation -------------------------------------------
   Class names are emitted by Html.ValidationMessageFor / ValidationSummary and
   by jquery.validate.unobtrusive, so they are fixed. */
.field-validation-error { display: block; font-size: 11.5px; color: var(--bad); margin-top: 2px; }
.field-validation-valid { display: none; }
.input-validation-error { border-color: var(--bad) !important; background: var(--bad-bg) !important; }
.validation-summary-errors {
  border: 1px solid rgba(229,128,128,0.35); background: var(--bad-bg);
  border-radius: 6px; padding: 12px 16px; margin-bottom: 18px; color: var(--bad); font-size: 13px;
}
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.validation-summary-valid { display: none; }

/* Html.EditorFor renders bare inputs with these classes rather than the
   template's .field markup, so give them the same treatment. */
.field input.text-box,
.field input[type="datetime"],
.field textarea.text-box {
  background: var(--background-elevated); border: 1px solid var(--border-subtle);
  border-radius: 6px; padding: 12px 14px; color: var(--text-primary);
  font-size: 14.5px; width: 100%;
}
.field input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gold-primary); }
.field label { display: block; }

/* Footer row shared by the admin create/edit/delete forms. */
.form-actions {
  display: flex; gap: 10px; align-items: center;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border-subtle);
}

/* Sub-navigation linking the three offering-settings screens. */
.admin-subnav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }

/* --- PagedList pager (Html.PagedListPager) --------------------------------
   Markup comes from the PagedList.Mvc package, so its class names are fixed. */
.pager-wrap { margin-top: 18px; }
.PagedList-pager { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.PagedList-pager li a,
.PagedList-pager li span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px; border-radius: 6px;
  border: 1px solid var(--border-subtle); background: var(--background-elevated);
  color: var(--text-secondary); font-size: 13px; text-decoration: none;
}
.PagedList-pager li a:hover { border-color: var(--border-gold); color: var(--gold-light); }
.PagedList-pager li.active span { background: var(--gold-metal); border-color: transparent; color: #1A1103; font-weight: 700; }
.PagedList-pager li.disabled span { opacity: 0.4; }

/* --- profile / password form feedback -------------------------------------
   editProfile() and changePassword() in dashboard.js toggle .noOpacity on
   #succesText, and inject #passwordsuccesText / #passwordFailText spans into
   #ajaxResponse carrying .text-success / .text-danger. Invalid fields get
   .input--required. */
.text-success { color: var(--good); }
.text-danger { color: var(--bad); }
.opac { display: inline-block; font-size: 13px; margin-top: 12px; transition: opacity 0.25s ease; }
.noOpacity { opacity: 0; }

.input--required {
  border-color: var(--bad) !important;
  background: var(--bad-bg) !important;
}

#ajaxResponse { min-height: 20px; }

/* --- tabs -----------------------------------------------------------------
   The generic a[data-toggle="tab"] handler in dashboard.js does the switching
   (it toggles .active on .nav-link and "show active" on .tab-pane), so no
   Bootstrap JS is needed -- only these rules to make the classes mean
   something. Used by the KYC page for both the document-type tabs and the
   questionnaire tabs verification.js generates. */
.nav-tabs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 22px; }
.nav-item { margin: 0; }
.nav-link {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 10px 16px; border-radius: 6px; text-decoration: none;
  border: 1px solid var(--border-subtle); background: var(--background-elevated);
  color: var(--text-secondary); font-size: 13px; font-weight: 600;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.nav-link:hover { border-color: var(--border-gold); color: var(--text-primary); }
.nav-link.active { border-color: var(--gold-primary); color: var(--gold-light); background: var(--warn-bg); }

.nav-tabs-line { gap: 6px; margin-bottom: 18px; }
.nav-tabs-line .nav-link { min-width: 40px; justify-content: center; padding: 8px 12px; }

.tab-pane { display: none; }
.tab-pane.show.active { display: block; }

/* --- Dropzone upload areas (verification.js) ------------------------------- */
.upload-zone.dropzone {
  border: 1.5px dashed var(--border-gold); border-radius: 8px;
  background: var(--background-elevated); padding: 30px 20px; text-align: center;
  min-height: 150px; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.upload-zone.dropzone:hover { border-color: var(--gold-light); background: var(--background-card); }
.dropzone .dz-message { margin: 0; color: var(--text-secondary); font-size: 13.5px; }
.dz-message-text { display: block; margin-bottom: 8px; }
.dz-message-or { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 10px; }
.dropzone .dz-preview { margin: 14px 8px 0; }
.dropzone .dz-preview .dz-filename,
.dropzone .dz-preview .dz-size { color: var(--text-secondary); font-size: 12px; }
.dropzone .dz-preview .dz-remove {
  color: var(--bad); font-size: 12px; text-decoration: none; margin-top: 6px; display: inline-block;
}
.dropzone .dz-preview .dz-error-message { background: var(--bad); }

/* --- checkbox rows used by the KYC confirmations --------------------------- */
.input-checkbox { accent-color: var(--gold-primary); width: 16px; height: 16px; }
.input-checkbox.input--required { outline: 2px solid var(--bad); outline-offset: 2px; }
.list-check { list-style: none; padding: 0; margin: 0 0 8px; }
.list-check li {
  position: relative; padding-left: 24px; margin-bottom: 7px;
  color: var(--text-secondary); font-size: 13.5px;
}
.list-check li::before { content: '✓'; position: absolute; left: 0; color: var(--gold-primary); font-weight: 700; }

/* --- showCustomAlert() in verification.js builds this at runtime ----------- */
.custom-alert-overlay {
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.custom-alert-box {
  background: var(--background-elevated); border: 1px solid var(--border-subtle);
  border-radius: 10px; padding: 32px 28px; max-width: 420px; width: 100%;
  text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.custom-alert-icon {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 700;
}
.custom-alert-overlay.success .custom-alert-icon { background: var(--good-bg); color: var(--good); }
.custom-alert-overlay.error .custom-alert-icon { background: var(--bad-bg); color: var(--bad); }
.custom-alert-title { font-family: var(--font-serif); font-size: 19px; margin-bottom: 8px; }
.custom-alert-message { color: var(--text-secondary); font-size: 13.5px; margin-bottom: 22px; }
.custom-alert-button {
  height: 42px; padding: 0 30px; border: none; border-radius: 6px;
  background: var(--gold-metal); color: #1A1103;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}

/* --- countdown, reusing the old markup the updateCountdown.js script fills --- */
.countdown-clock-dashboard { display: flex; gap: 10px; justify-content: center; }
.countdown-item {
  flex: 1; text-align: center; background: var(--background-primary);
  border: 1px solid var(--border-subtle); border-radius: 6px; padding: 10px 4px;
}
.countdown-time {
  display: block; font-family: var(--font-serif); font-size: 20px;
  color: var(--gold-light); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.countdown-label {
  display: block; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-muted); margin-top: 3px;
}