/* ==========================================================================
   SR Properties Solutions - Luxury Black / Gold / Silver brand
   Matches logo.png: metallic gold, silver, deep black
   ========================================================================== */

:root {
  --sr-black: #050505;
  --sr-black-soft: #0C0C0C;
  --sr-charcoal: #161616;
  --sr-panel: #1C1C1C;
  --sr-gold: #D4AF37;
  --sr-gold-bright: #F0D78C;
  --sr-gold-deep: #B8860B;
  --sr-gold-bronze: #8A6A12;
  --sr-silver: #C8CDD3;
  --sr-silver-bright: #F3F4F6;
  --sr-muted: #9AA0A8;
  --sr-line: rgba(212, 175, 55, 0.28);
  --sr-gradient-gold: linear-gradient(135deg, #F0D78C 0%, #D4AF37 48%, #B8860B 100%);
  --sr-gradient-black: linear-gradient(160deg, #111111 0%, #050505 55%, #1A1408 100%);
  --sr-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --sr-radius: 18px;
  --sr-font: "Figtree", "Segoe UI", sans-serif;
  --sr-display: "Cormorant Garamond", "Times New Roman", serif;

  --primary-gold: #D4AF37;
  --primary-gold-bright: #F0D78C;
  --primary-gold-dark: #B8860B;
  --navy-dark: #050505;
  --navy-medium: #161616;
  --navy-surface: #1C1C1C;
  --accent-gold: #D4AF37;
  --emerald-dark: #1A1408;
  --emerald-deep: #0C0C0C;
  --text-dark: #F3F4F6;
  --text-muted: #9AA0A8;
  --text-light: #FFFFFF;
  --bg-light: #0C0C0C;
  --bg-ice: #161616;
  --nw-primary: #D4AF37;
  --nw-primary-dark: #B8860B;
  --nw-primary-light: #F0D78C;
  --nw-navy: #050505;
  --nw-navy-mid: #161616;
  --nw-gold: #D4AF37;
  --nw-text: #F3F4F6;
  --nw-muted: #9AA0A8;
  --nw-gradient-gold: linear-gradient(135deg, #F0D78C 0%, #D4AF37 50%, #B8860B 100%);
  --nw-gradient-navy: linear-gradient(135deg, #111111 0%, #050505 100%);
  --bs-primary: #D4AF37;
  --bs-link-color: #D4AF37;
  --bs-pagination-active-bg: #D4AF37;
  --bs-pagination-active-border-color: #B8860B;
}

/* ---------- Auth pages ---------- */
.sr-auth-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--sr-font);
  color: var(--sr-silver-bright);
  background:
    radial-gradient(900px 420px at 50% -8%, rgba(212, 175, 55, 0.16), transparent 58%),
    linear-gradient(180deg, #0E0C08 0%, #070706 42%, #050505 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1.25rem, env(safe-area-inset-top)) 1rem max(1.5rem, env(safe-area-inset-bottom));
  position: relative;
  overflow-x: hidden;
}

.sr-auth-wrap {
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 2;
}

.sr-auth-wrap.wide { max-width: 500px; }

.sr-auth-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sr-auth-top a {
  color: var(--sr-gold-soft, #D4C08A);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
}
.sr-auth-top a:hover { color: #fff; }

.sr-auth-card {
  background: linear-gradient(180deg, rgba(22, 18, 12, 0.92) 0%, rgba(10, 9, 7, 0.96) 100%);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-top: 2px solid var(--sr-gold);
  border-radius: 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  padding: clamp(1.35rem, 5vw, 2rem) clamp(1.15rem, 4vw, 1.75rem) 1.6rem;
  backdrop-filter: blur(10px);
}

.sr-logo-wrap {
  text-align: center;
  margin-bottom: 1.25rem;
}

.sr-logo-frame {
  width: min(188px, 56vw);
  margin: 0 auto 0.15rem;
  background: #050505;
  border: 1px solid rgba(212, 175, 55, 0.32);
  box-shadow: 0 0 0 5px rgba(212, 175, 55, 0.07);
  display: block;
}

.sr-logo-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: 0 auto;
}

.sr-kicker {
  margin: 0;
  color: var(--sr-gold);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-weight: 600;
}

.sr-rule {
  width: 48px;
  height: 1px;
  background: var(--sr-gold);
  margin: 0.85rem auto 0.95rem;
  opacity: 0.7;
}

.sr-auth-card h1 {
  margin: 0 0 0.4rem;
  font-family: var(--sr-display);
  font-size: clamp(1.7rem, 6vw, 2.15rem);
  font-weight: 500;
  color: #F7F3EA;
  letter-spacing: -0.02em;
  text-align: center;
}

.sr-lead {
  margin: 0 0 1.5rem;
  text-align: center;
  color: #A39B8C;
  font-size: 0.9rem;
  line-height: 1.55;
}

.sr-field { margin-bottom: 1.05rem; }

.sr-field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sr-gold);
}

.sr-input,
.sr-field input[type="text"],
.sr-field input[type="password"],
.sr-field input[type="email"],
.sr-auth-card input.form-control,
.sr-auth-card .form-control,
.sr-auth-card input[type="text"],
.sr-auth-card input[type="password"] {
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: 0;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
  background: #0C0B09 !important;
  color: #F4EFE4 !important;
  font-family: inherit;
  font-size: 16px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.sr-field input:focus,
.sr-auth-card .form-control:focus,
.sr-auth-card input:focus {
  outline: none;
  border-color: var(--sr-gold) !important;
  box-shadow: 0 0 0 1px var(--sr-gold) !important;
  background: #12100C !important;
}

.sr-field input::placeholder {
  color: #7A7368 !important;
  opacity: 1;
}

.sr-input:-webkit-autofill,
.sr-input:-webkit-autofill:hover,
.sr-input:-webkit-autofill:focus,
.sr-field input:-webkit-autofill,
.sr-field input:-webkit-autofill:hover,
.sr-field input:-webkit-autofill:focus,
.sr-auth-card input:-webkit-autofill {
  -webkit-text-fill-color: #F4EFE4 !important;
  caret-color: #F4EFE4;
  box-shadow: 0 0 0 1000px #0C0B09 inset !important;
  transition: background-color 99999s ease-out;
}

.sr-pwd { position: relative; }
.sr-pwd input { padding-right: 3rem; }

.sr-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #8A8478;
  cursor: pointer;
  padding: 8px;
}
.sr-toggle:hover { color: var(--sr-gold-bright); }

.sr-btn {
  width: 100%;
  margin-top: 0.45rem;
  padding: 1rem 1.2rem;
  border: 1px solid #C9A227;
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #111 !important;
  background: linear-gradient(180deg, #F0D78C 0%, #D4AF37 55%, #B8860B 100%) !important;
  box-shadow: 0 10px 24px rgba(184, 134, 11, 0.28);
}
.sr-btn:hover {
  filter: brightness(1.05);
}

.sr-footer-link {
  margin-top: 1.35rem;
  text-align: center;
  font-size: 0.84rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.9rem;
}
.sr-footer-link a {
  color: var(--sr-gold);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
}
.sr-footer-link a:hover { color: #fff; }

.sr-error {
  display: block;
  margin-top: 0.75rem;
  color: #E8A0A0;
  text-align: center;
  font-size: 0.84rem;
  min-height: 1.1em;
}

.sr-hint { color: var(--sr-muted); font-size: 0.78rem; margin-top: 0.25rem; }

.sr-copy {
  text-align: center;
  margin: 1.15rem 0 0;
  color: #6F6A60;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Portal overrides ---------- */
body:not(.sr-auth-body) {
  background-color: #0C0C0C !important;
  color: #E8EAED;
}

.sr-auth-body input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]) {
  background: #0C0B09 !important;
  color: #F4EFE4 !important;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #F3F4F6;
}

.btn-primary,
.btn-primary:disabled,
.btn-grd-info,
.btn-info {
  background-image: var(--sr-gradient-gold) !important;
  background-color: var(--sr-gold) !important;
  border-color: var(--sr-gold-deep) !important;
  color: #111 !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(212, 175, 55, 0.28) !important;
}

.btn-primary:hover,
.btn-grd-info:hover {
  filter: brightness(1.06);
  color: #111 !important;
}

.btn-outline-primary {
  color: var(--sr-gold-bright) !important;
  border-color: var(--sr-gold) !important;
  background: transparent !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sr-gold) !important;
  box-shadow: 0 0 0 0.22rem rgba(212, 175, 55, 0.22) !important;
}

.sidebar-wrapper {
  background: #080808 !important;
  border-right: 1px solid rgba(212, 175, 55, 0.22) !important;
}
.sidebar-header {
  background: #080808 !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.22) !important;
}

.sidebar-wrapper .metismenu a {
  color: #C8CDD3 !important;
}
.sidebar-wrapper .metismenu a:hover,
.sidebar-wrapper .metismenu a.active,
.sidebar-wrapper .metismenu .mm-active > a {
  color: #F0D78C !important;
  background: rgba(212, 175, 55, 0.1) !important;
}

.topbar, .top-header, header.top-header, .page-footer {
  background: #0A0A0A !important;
  border-color: rgba(212, 175, 55, 0.18) !important;
}

.card {
  background: #161616 !important;
  border: 1px solid rgba(212, 175, 55, 0.18) !important;
  color: #E8EAED !important;
}

.page-content, .wrapper, .page-wrapper {
  background: #0C0C0C !important;
}

.pace .pace-progress {
  background: #D4AF37 !important;
  box-shadow: 0 0 10px #D4AF37 !important;
}

.brand-logo-img {
  height: 58px;
  width: auto;
  object-fit: contain;
}

.text-primary { color: var(--sr-gold) !important; }
.bg-primary { background-color: #111 !important; }
.border-primary { border-color: var(--sr-gold) !important; }
a { color: var(--sr-gold); }
a:hover { color: var(--sr-gold-bright); }