/* ============================================================================
   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; }

/* --- full-width dashboard --------------------------------------------------
   dashboard.css caps .dash-body at max-width:1400px, which left a dead gutter on
   the right of every dashboard page on wide screens while the topbar still ran
   edge to edge. The cap is lifted so content fills the space beside the sidebar.

   :not() is deliberate. The anonymous shell uses class="dash-body dash-body-narrow"
   and its 760px cap must survive -- a plain .dash-body rule here would load after
   dashboard.css at equal specificity and override the narrow variant too, stretching
   the password-reset and email-confirmation pages across the whole screen. */
.dash-body:not(.dash-body-narrow) { max-width: none; }

/* --- equal-height side-by-side cards ---------------------------------------
   dashboard.css sets align-items:start on .grid-1fr-1fr, so each card sized to its
   own content and the two columns ended at different heights (Personal Details vs
   Change Password on Profile, Market & Offering vs Purchase AURB on Buy Tokens).
   Stretching makes both cards match the taller one.

   Left .grid-2fr-1fr alone: those columns hold several stacked cards, so stretching
   the column would not line up the individual cards inside it. */
.grid-1fr-1fr { align-items: stretch; }

/* dashboard.css:125 adds margin-top:24px to any .dash-card following another, which is
   right for cards stacked in a column but wrong for side-by-side grid cells -- it pushed
   the second card 24px down, so the two never lined up even once they stretched. The grid
   gap already provides the separation here. */
.grid-1fr-1fr > .dash-card + .dash-card { margin-top: 0; }

/* --- stop wide content dragging the page sideways --------------------------
   Grid and flex items default to min-width:auto, so they refuse to shrink below their
   content. The transactions table has a ~559px min-content width, which forced its grid
   column to 613px on a 430px phone and made the whole page scroll sideways -- the chart
   and the table both ran off the right edge.

   With min-width:0 the column can shrink to the viewport, and .dash-table-scroll's
   overflow-x:auto does its job: the table scrolls inside its own card, the page does not. */
.grid-2fr-1fr > *,
.grid-1fr-1fr > *,
.dash-main,
.dash-body,
.dash-card { min-width: 0; }

/* Anything genuinely wider than its card scrolls within the card, never the page. */
.dash-table-scroll { max-width: 100%; -webkit-overflow-scrolling: touch; }

/* The stage chart is an inline SVG sized width:100%; keep it from reporting a larger
   intrinsic width than the box it sits in. */
.price-chart-wrap { max-width: 100%; overflow: hidden; }
.price-chart-wrap svg { max-width: 100%; height: auto; display: block; }

/* --- mobile menu button ----------------------------------------------------
   dashboard.css styles this button as three <span> bars, but dash-chrome.js renders
   an SVG icon instead, so `.dash-menu-toggle span` matched nothing and the SVG -- which
   carries only a viewBox, no width/height -- collapsed to zero. The button measured 12px
   of padding and drew nothing, leaving no visible way to open the sidebar on a phone, and
   therefore no way to reach Log Out. Sized here with a proper 40px tap target. */
.dash-menu-toggle {
  align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  color: var(--text-primary); cursor: pointer;
}
.dash-menu-toggle svg { width: 22px; height: 22px; }

/* --- offering stage marks on the progress bar ------------------------------
   Ticks and labels under .sto-widget-track, positioned from the real stage thresholds
   (see Models/OfferingSettings). Used by the Overview widget. */
.sto-stage-tick {
  position: absolute; top: -3px; bottom: -3px; width: 1px;
  background: var(--border-gold); pointer-events: none;
}
/* Two lines now -- stage name over its USD goal -- so the row is tall enough for both. */
.sto-stage-labels { position: relative; height: 30px; margin: 0 0 12px; }
.sto-stage-label {
  position: absolute; transform: translateX(-50%); white-space: nowrap; text-align: center;
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
/* The label box shrinks to its widest line, so the narrower line needs aligning to the same
   edge the box itself is anchored by, or it drifts away from its own tick. */
.sto-stage-label.at-start { transform: translateX(0); text-align: left; }
.sto-stage-label.at-end { transform: translateX(-100%); text-align: right; }
.sto-stage-label.reached { color: var(--gold-primary); }
.sto-stage-amt {
  display: block; margin-top: 3px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums; color: var(--text-secondary);
}
.sto-stage-label.reached .sto-stage-amt { color: var(--gold-primary); }
/* On a phone the card is ~290px wide and "Private Sale" (left-anchored at 0%) starts to
   reach "Pre Sale" at 31.25%. Tightening both lines buys that gap back. */
@media (max-width: 560px) {
  .sto-stage-label { font-size: 8px; letter-spacing: 0.02em; }
  .sto-stage-amt { font-size: 9px; margin-top: 2px; }
}

/* --- 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); }

/* --- boolean columns (Html.DisplayFor on a bool) ---------------------------
   MVC's boolean display template renders <input class="check-box" disabled type="checkbox">,
   used for the Active flag on invitation codes. Browsers grey out disabled checkboxes and
   ignore accent-color on them, so the control is drawn from scratch here to keep the tick
   on-brand. Applies anywhere a bool is displayed, not just the invite list. */
input.check-box {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 4px;
  border: 1px solid var(--border-subtle);
  background: var(--background-elevated);
  position: relative; vertical-align: middle; opacity: 1; margin: 0;
}
input.check-box:checked {
  background: var(--gold-metal);
  border-color: var(--gold-primary);
}
input.check-box:checked::after {
  content: '';
  position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #1A1103;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* --- 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;
}