/* =====================================================================
   HeroRMM - HelpDesk Heroes branding for Tactical RMM
   GLOBAL section (applies app-wide) + LOGIN section (scoped to
   html.custom-login, added by custom.js only on the login screen).
   ===================================================================== */

:root {
  --hero-bg-1: #14161c;
  --hero-bg-2: #1b1f27;
  --hero-bg-3: #232833;
  --hero-accent: #f5871f;
  --hero-accent-2: #ffb04d;
}

/* ============================ GLOBAL ================================= */

/* Brand accent app-wide: Quasar reads --q-primary for text-primary,
   bg-primary, active tabs, toggles, spinners, buttons, loading bar. */
:root, html, body { --q-primary: #f5871f !important; }
.q-loading-bar { background: #f5871f !important; }

/* Logo mark in the top header, before "HeroRMM v1.5.1" */
.q-header .q-toolbar__title::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  margin: -3px 10px 0 0;
  background: url('/trmm-custom/favicon.svg?v=4') left center / contain no-repeat;
}

/* Login tagline (inserted by custom.js inside the card) */
#hdh-tagline {
  text-align: center;
  margin: -4px 0 16px 0;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--hero-accent);
}

/* Login footer strip (inserted by custom.js on the login page only) */
#hdh-login-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  text-align: center;
  padding: 11px 12px;
  font-size: 12.5px;
  letter-spacing: 0.3px;
  color: rgba(234, 240, 251, 0.72);
  background: linear-gradient(to top, rgba(11,14,22,0.55), transparent);
}
#hdh-login-footer a { color: var(--hero-accent-2); text-decoration: none; }
#hdh-login-footer a:hover { text-decoration: underline; }
#hdh-login-footer .hdh-sep { opacity: 0.45; margin: 0 9px; }
#hdh-login-footer .hdh-strong { color: rgba(234,240,251,0.9); font-weight: 600; }

/* ============================ LOGIN ================================= */
/* Everything below is scoped to the login screen via html.custom-login */

html.custom-login,
html.custom-login body { height: 100%; }

html.custom-login .q-page,
html.custom-login .flex.flex-center.window-height,
html.custom-login .window-height {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 15% 12%, rgba(245,135,31,0.20), transparent 60%),
    radial-gradient(1000px 700px at 85% 88%, rgba(245,135,31,0.10), transparent 60%),
    linear-gradient(135deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 55%, var(--hero-bg-3) 100%);
  overflow: hidden;
}

html.custom-login .q-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
  z-index: 0;
}

/* HelpDesk Heroes logo above the login card */
html.custom-login .q-card::before {
  content: "";
  display: block;
  width: 210px;
  height: 79px;
  margin: 0 auto 22px auto;
  background: url('/trmm-custom/logo.svg') center center / contain no-repeat;
}

html.custom-login .q-card {
  position: relative;
  z-index: 2;
  padding: 34px 30px 28px 30px !important;
  min-width: 340px;
  background: rgba(18, 27, 48, 0.55) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  color: #eaf0fb !important;
}

html.custom-login .q-card::after {
  content: "";
  position: absolute;
  top: 0; left: 20px; right: 20px;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, var(--hero-accent), var(--hero-accent-2));
}

html.custom-login .q-card,
html.custom-login .q-card .q-field__native,
html.custom-login .q-card .text-h6,
html.custom-login .q-card .text-subtitle1,
html.custom-login .q-card .text-subtitle2 { color: #eaf0fb !important; }
html.custom-login .q-card .q-field__label { color: rgba(234,240,251,0.65) !important; }

html.custom-login .q-card .q-field__control { background: rgba(255,255,255,0.06) !important; border-radius: 10px !important; }
html.custom-login .q-card .q-field__control:before { border-color: rgba(255,255,255,0.18) !important; }
html.custom-login .q-card .q-field--focused .q-field__control:after { border-color: var(--hero-accent) !important; }
html.custom-login .q-card input { color: #ffffff !important; caret-color: var(--hero-accent); }
html.custom-login .q-card .q-icon { color: rgba(234,240,251,0.75) !important; }

html.custom-login .q-card .q-btn.bg-primary,
html.custom-login .q-card .q-btn[type="submit"],
html.custom-login .q-card .q-btn--standard.text-white {
  background: linear-gradient(135deg, var(--hero-accent), #e06f0a) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 8px 22px rgba(245,135,31,0.38) !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
html.custom-login .q-card .q-btn.bg-primary:hover,
html.custom-login .q-card .q-btn[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(245,135,31,0.48) !important;
}

html.custom-login .q-card a { color: var(--hero-accent-2) !important; }
html.custom-login .q-card img[src*="logo"] { display: none !important; }

@media (max-width: 480px) {
  html.custom-login .q-card { min-width: unset; width: 92vw; padding: 26px 20px !important; }
  html.custom-login .q-card::before { width: 178px; height: 67px; }
  #hdh-login-footer { font-size: 11px; }
}