/* ===========================================================================
   Brand dark theme for the API's Razor (Identity) pages.
   Loaded last in /Pages/Shared/_Layout.cshtml so it overrides Bootstrap and the
   Microsoft.AspNetCore.Identity.UI package's default site.css.
   Palette mirrors the React frontend (ClientApp/src/index.css).
   =========================================================================== */

:root {
  --color-topbar:   #0A0608;
  --color-bg-top:   #14080F;
  --color-bg-bot:   #1E0F18;
  --color-card:     #1A0E15;
  --color-card-2:   #221220;
  --color-border:   #2A1820;

  --color-text:     #E8E0E4;
  --color-text-mut: #9A8E94;
  --color-text-dim: #6A5E64;

  --color-accent:        #E91E8C;
  --color-accent-hover:  #FF3FA0;
  --color-link:          #FF6BB5;
}

/* Layout / page ------------------------------------------------------------ */
html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}
@media (min-width: 768px) {
  html { font-size: 16px; }
}

body {
  margin: 0;
  margin-bottom: 60px;
  min-height: 100vh;
  background: var(--color-bg-top);
  background-image: linear-gradient(180deg, var(--color-bg-top) 0%, var(--color-bg-bot) 100%);
  background-attachment: fixed;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container { max-width: 960px; }
.pricing-header { max-width: 700px; }

/* Headings & text ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: var(--color-text); }
.text-muted { color: var(--color-text-mut) !important; }
.text-dark { color: var(--color-text) !important; }
hr { border-color: var(--color-border); opacity: 1; }

/* Links -------------------------------------------------------------------- */
a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }

/* Navbar ------------------------------------------------------------------- */
.navbar.bg-white,
.navbar-light {
  background-color: var(--color-topbar) !important;
  border-bottom: 1px solid var(--color-border) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6) !important;
}
.navbar-light .navbar-brand,
.navbar-brand {
  color: var(--color-text) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
}
a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}
.navbar-light .navbar-nav .nav-link { color: var(--color-text) !important; }
.navbar-light .navbar-nav .nav-link:hover { color: var(--color-accent-hover) !important; }
.navbar-toggler { border-color: var(--color-border); }
.navbar-toggler-icon { filter: invert(1) brightness(2); }

/* Cards / panels ----------------------------------------------------------- */
.card {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.card-header,
.card-footer {
  background-color: var(--color-card-2);
  border-color: var(--color-border);
}

/* Forms -------------------------------------------------------------------- */
label, .form-label { color: var(--color-text); }
.form-control,
.form-select {
  background-color: var(--color-card-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}
.form-control::placeholder { color: var(--color-text-dim); }
.form-control:focus,
.form-select:focus {
  background-color: var(--color-card-2);
  color: var(--color-text);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0.2rem rgba(233, 30, 140, 0.35);
}
.form-floating > label { color: var(--color-text-mut); }
.form-check-input {
  background-color: var(--color-card-2);
  border-color: var(--color-border);
}
.form-check-input:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Buttons ------------------------------------------------------------------ */
.btn-primary {
  color: #fff;
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  color: #fff;
  background-color: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
  box-shadow: 0 0 0 0.2rem rgba(233, 30, 140, 0.35);
}
.btn-link { color: var(--color-link); }
.btn-link:hover { color: var(--color-accent-hover); }
.btn-link.nav-link:focus { outline: var(--color-accent) auto 1px; }
.btn-outline-primary {
  color: var(--color-link);
  border-color: var(--color-accent);
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-secondary {
  background-color: var(--color-card-2);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Nav pills / lists (e.g. Manage account nav) ------------------------------ */
.nav-pills .nav-link { color: var(--color-text); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.list-group-item {
  background-color: var(--color-card);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Alerts / status messages ------------------------------------------------- */
.alert-success {
  color: #d6ffe8;
  background-color: rgba(111, 207, 151, 0.12);
  border-color: rgba(111, 207, 151, 0.40);
}
.alert-danger {
  color: #ffd6d6;
  background-color: rgba(255, 107, 107, 0.12);
  border-color: rgba(255, 107, 107, 0.40);
}
.alert-info,
.alert-warning {
  color: var(--color-text);
  background-color: var(--color-card-2);
  border-color: var(--color-border);
}

/* Validation --------------------------------------------------------------- */
.text-danger,
.field-validation-error,
.validation-summary-errors { color: #FF6B6B !important; }

/* Tables ------------------------------------------------------------------- */
.table { color: var(--color-text); }
.table > :not(caption) > * > * {
  border-color: var(--color-border);
  background-color: transparent;
  color: var(--color-text);
}

/* Borders / shadows -------------------------------------------------------- */
.border-top { border-top: 1px solid var(--color-border) !important; }
.border-bottom { border-bottom: 1px solid var(--color-border) !important; }
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .35); }

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Footer ------------------------------------------------------------------- */
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
  color: var(--color-text-mut);
}
.footer a { color: var(--color-link); }