/* ============================================================
   Erticaz brand overrides for WGDashboard (vpn.erticaz.com)
   Source of truth: /root/wgd-brand/ on CT109. Re-apply after a
   WGDashboard update with: /root/wgd-brand/apply.sh
   Palette from erticaz.com (Blocksy theme): navy #100843 / #291e5f,
   gold #ffc300 / #d4bf00, button text #2f2207. Font: Cairo.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap");

:root {
  --ez-navy: #100843;
  --ez-navy-2: #1a1a4a;
  --ez-indigo: #291e5f;
  --ez-gold: #ffc300;
  --ez-gold-2: #f5a400; /* warm amber end of the button gradient (site's #d4bf00 reads olive on navy) */
  --ez-gold-hover: #ffd34d;
  --ez-gold-text: #2f2207;
  --ez-logo-white: url("/static/dist/WGDashboardAdmin/brand/erticaz-logo-white.png");
  --ez-icon: url("/static/dist/WGDashboardAdmin/brand/erticaz-icon-64.png");
}

/* ---- Typography: Cairo everywhere except icons and code ---- */
body,
.login-box,
.login-box *:not(.bi):not([class^="bi-"]):not([class*=" bi-"]):not(.codeFont):not(.font-monospace):not(code):not(pre),
.navbar,
.btn,
.form-control,
.form-label,
h1, h2, h3, h4, h5, h6 {
  font-family: "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ---- Brand gradient variables used by WGDashboard's own rules ---- */
.btn-brand,
.loadingBar,
.dashboardLogo {
  --brandColor1: var(--ez-gold);
  --brandColor2: var(--ez-gold-2);
}
.btn-brand:hover,
.dashboardLogo:hover {
  --brandColor1: var(--ez-gold-hover);
  --brandColor2: var(--ez-gold);
}
.btn-brand,
.btn-brand .text-white,
.btn-brand .spin,
.btn-brand .spinner-border {
  color: var(--ez-gold-text) !important;
}
.btn-brand {
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 8px 24px rgba(255, 195, 0, .18);
}

/* ---- Login page background: deep navy instead of blue/red animation ---- */
.login-container-fluid,
.login-container-fluid[data-bs-theme="dark"],
.login-container-fluid[data-bs-theme="light"] {
  background:
    radial-gradient(1100px 600px at 15% -10%, var(--ez-indigo) 0%, rgba(41, 30, 95, 0) 60%),
    radial-gradient(900px 500px at 110% 110%, #1f1a5c 0%, rgba(31, 26, 92, 0) 55%),
    linear-gradient(160deg, var(--ez-navy) 0%, #0b0a2e 100%) !important;
  animation: none !important;
  color: #fff;
}

/* ---- Login card ----
   The Vue template hard-codes .signInContainer { width: 700px } inline, so the
   card must size to its content and the inner width must yield on small screens. */
.login-box {
  width: fit-content;
  max-width: calc(100vw - 2rem);
  padding: 2rem 2rem 1rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.login-box .signInContainer {
  width: min(700px, calc(100vw - 6rem)) !important; /* overrides the inline 700px */
}
.signInContainer h4 {
  text-align: center;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
  margin-bottom: .25rem;
}

/* "WGDashboard" wordmark -> Erticaz logo (white on navy) */
.signInContainer .dashboardLogo {
  display: block;
  width: min(330px, 78vw);
  height: 90px;
  margin: .25rem auto 1.5rem;
  background: var(--ez-logo-white) center / contain no-repeat !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: transparent;
  transition: none !important;
}
.signInContainer .dashboardLogo strong {
  display: none;
}

/* Inputs inside the card */
.login-box .form-control,
.login-box .form-control:focus {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
}
.login-box .form-control:focus {
  border-color: var(--ez-gold);
  box-shadow: 0 0 0 .2rem rgba(255, 195, 0, .22);
}
/* placeholders stay transparent (Bootstrap floating labels) — the label is the hint */
.login-box .form-floating > label,
.login-box label,
.login-box .form-check-label,
.login-box .text-muted,
.login-box .text-body {
  color: rgba(255, 255, 255, .72) !important;
}
.login-box .form-floating > .form-control:focus ~ label,
.login-box .form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: rgba(255, 255, 255, .85) !important;
}
.login-box .form-check-input:checked {
  background-color: var(--ez-gold);
  border-color: var(--ez-gold);
}
.login-box a { color: var(--ez-gold); }
.login-box a:hover { color: var(--ez-gold-hover); }

/* Password show/hide toggle (injected by erticaz.js) */
.login-box .form-control.ez-has-eye {
  padding-right: 3rem !important;
}
.login-box .ez-eye {
  position: absolute;
  right: .55rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .6);
  font-size: 1.2rem;
  line-height: 1;
  padding: .4rem .5rem;
  border-radius: .5rem;
  cursor: pointer;
}
.login-box .ez-eye:hover,
.login-box .ez-eye:focus-visible {
  color: var(--ez-gold);
  background: rgba(255, 255, 255, .07);
  outline: none;
}
.login-box .ez-eye[aria-pressed="true"] {
  color: var(--ez-gold);
}

/* Footer credit line (kept, muted) */
.login-container-fluid small.text-muted {
  color: rgba(255, 255, 255, .35) !important;
  font-size: .75rem;
}
.login-container-fluid small.text-muted a { color: rgba(255, 255, 255, .55); }

/* ---- Inner pages (after login): brand accents only, layout untouched ---- */
[data-bs-theme="dark"] {
  --bs-body-bg: #0e0d2b;
  --bs-body-bg-rgb: 14, 13, 43;
  --bs-link-color: var(--ez-gold-hover);
  --bs-link-color-rgb: 255, 211, 77;
  --bs-link-hover-color: #ffe38a;
  --bs-link-hover-color-rgb: 255, 227, 138;
}
.navbar-brand img[alt="WGDashboard Logo"] {
  content: var(--ez-icon);
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}