/* ============================================================
   GWPTC HelpDesk — Shared Site Theme (mono-source)
   Consumes the SAME --gwr-* vars as the main GWPTC site
   (assets/theme/theme.css + assets/theme/theme-config.js).

   The main site's theme-config.js is loaded on every helpdesk
   page (see injected <script src="...assets/theme/theme-config.js">),
   so when the admin changes the theme colour on the main site,
   these vars are re-injected and the helpdesk follows instantly.

   Fallbacks below default to the current live maroon/gold palette
   so the helpdesk still renders even if the JS is not loaded.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Ethiopic:wght@400;500;600;700&display=swap');

:root {
  --gwr-primary: #991b1b;
  --gwr-primary-dark: #7f1d1d;
  --gwr-primary-light: #dc2626;
  --gwr-gold: #d4a012;
  --gwr-gold-light: #f5c845;
  --gwr-gold-dark: #b8860b;
}

/* ------------------------------------------------------------
   Animated header gradient — mirrors main site .nav-animated-bg.
   background-image (NOT background shorthand) keeps
   background-position animatable: the shorthand resets
   background-position with !important and freezes the animation.
   ------------------------------------------------------------ */
.navbar,
.bg-custom-gradient,
.helpdesk-navbar,
.login-header,
.login-card .login-header,
[class*="header"] {
  background-image: linear-gradient(115deg,
      var(--gwr-primary-dark) 0%,
      var(--gwr-primary) 22%,
      var(--gwr-primary-dark) 44%,
      var(--gwr-gold) 60%,
      var(--gwr-primary) 78%,
      var(--gwr-primary-dark) 100%) !important;
  background-size: 340% 340% !important;
  animation: navGradientShift 18s ease-in-out infinite;
}

@keyframes navGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Static gradient used for soft backgrounds (login page backdrop) */
:root {
  --gwr-gradient-soft: linear-gradient(135deg, var(--gwr-primary) 0%, var(--gwr-primary-dark) 100%);
}

body:has(.login-card) {
  background-image: var(--gwr-gradient-soft) !important;
}

.btn-login {
  background-image: linear-gradient(115deg,
      var(--gwr-primary) 0%, var(--gwr-primary-dark) 50%, var(--gwr-primary) 100%) !important;
  color: #fff !important;
}

/* ------------------------------------------------------------
   Buttons & links — Bootstrap primary -> brand colour
   ------------------------------------------------------------ */
.btn-primary {
  background-color: var(--gwr-primary) !important;
  border-color: var(--gwr-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--gwr-gold-dark) !important;
  border-color: var(--gwr-gold-dark) !important;
}
.btn-outline-primary {
  color: var(--gwr-primary) !important;
  border-color: var(--gwr-primary) !important;
}
.btn-outline-primary:hover {
  background-color: var(--gwr-primary) !important;
  color: #fff !important;
}
a {
  color: var(--gwr-primary);
}
a:hover {
  color: var(--gwr-gold-dark);
}
.text-primary {
  color: var(--gwr-primary) !important;
}
.bg-primary {
  background-color: var(--gwr-primary) !important;
}
.border-primary {
  border-color: var(--gwr-primary) !important;
}

/* ------------------------------------------------------------
   Cards, scrollbar, badges — subtle brand touches
   ------------------------------------------------------------ */
.card {
  border-color: #e5e7eb;
}
.card-header {
  background-color: var(--gwr-primary);
  color: #fff;
  border-bottom: 1px solid var(--gwr-primary-dark);
}
::-webkit-scrollbar-thumb {
  background: var(--gwr-primary);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gwr-primary-dark);
}
.badge.bg-success {
  background-color: var(--gwr-primary) !important;
}

/* ------------------------------------------------------------
   Ethiopic (Amharic) — ensure Ethiopic glyphs render from the
   dedicated font when the page is in Amharic.
   ------------------------------------------------------------ */
html[lang="am"] body,
html[lang="am"] * {
  font-family: 'Noto Sans Ethiopic', 'Nyala', 'Abyssinica SIL', 'Segoe UI', sans-serif !important;
}

/* RTL support kept intact */
[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-end { text-align: left !important; }