/**
 * theme-gov.css
 * =============
 * UI theme overrides for GOV Services, Inc. (qr.govservicesinc.com)
 *
 * HOW IT WORKS
 * ------------
 * Loaded AFTER style.css but BEFORE page-specific CSS (e.g. auth.css).
 * Overrides CSS custom properties in :root so every component that uses
 * those variables (sidebar, buttons, login page, links, focus rings)
 * adopts the new palette automatically.
 *
 * Brand text is handled directly in templates via {{ COMPANY_NAME }} —
 * no CSS tricks needed.
 *
 * TO CUSTOMISE COLORS
 * -------------------
 * Change --primary-color / --primary-hover below.
 * All gradients, buttons, focus rings, sidebar, and login page pick
 * up the new values automatically via CSS variable inheritance.
 *
 * ADDING A THIRD THEME (future)
 * -----------------------------
 * Create static/css/theme-{name}.css and set THEME_NAME={name} in
 * that instance's .env. No code changes required.
 */

/* ------------------------------------------------------------------ */
/* 1. COLOR PALETTE — GOV Services green                               */
/* ------------------------------------------------------------------ */
:root {
  /* Primary brand color: bright institutional green */
  --primary-color: #16a34a;
  --primary-hover: #15803d;

  /* Accent used for links, focus rings, active states */
  --info-color: #16a34a;
}

/* ------------------------------------------------------------------ */
/* 2. SIDEBAR GRADIENT                                                  */
/*    Re-declared to consume the new variables above.                  */
/* ------------------------------------------------------------------ */
.sidebar {
  background: linear-gradient(
    180deg,
    var(--primary-color),
    var(--primary-hover)
  );
}

/* ------------------------------------------------------------------ */
/* 3. LOGIN PAGE — auth.css loads after this file (via extra_head) so  */
/*    we must use !important to win the cascade on rules that auth.css */
/*    also declares with !important.                                   */
/* ------------------------------------------------------------------ */

/* Login background gradient */
.auth-container {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-hover)
  ) !important;
}

/* Logo circle gradient */
.auth-logo {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-hover)
  ) !important;
}

/* Card top accent stripe */
.auth-card::before {
  background: linear-gradient(
    90deg,
    var(--primary-color),
    var(--primary-hover)
  ) !important;
}

/* Sign In button gradient */
.auth-form .btn-primary {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--primary-hover)
  ) !important;
}

/* Input focus border colour */
.auth-form .form-group input:focus {
  border-color: var(--primary-color) !important;
  /* Override the hardcoded blue rgba(37,99,235) in auth.css */
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15) !important;
}

/* Focused label colour */
.auth-form .form-group.focused label {
  color: var(--primary-color) !important;
}

/* Label icon colour */
.auth-form .form-group label i {
  color: var(--primary-color) !important;
}

/* Focus accessibility outline */
.auth-form .btn:focus,
.auth-form .form-group input:focus {
  outline-color: var(--primary-color) !important;
}

/* ------------------------------------------------------------------ */
/* 4. FOOTER COPYRIGHT                                                  */
/*    Handled dynamically in templates via {{ CURRENT_YEAR }} and      */
/*    {{ COMPANY_NAME }} — no CSS override needed here.                */
/* ------------------------------------------------------------------ */