/* ------------------------------------------------------------------
   QA server theme.
   Loaded only when APP_ENV=qa (or the request host starts with "qa.") —
   see qa_theme_tag() in application/helpers/env_helper.php. Production
   never links this file.

   Everything themed in style.css and colors/default.css resolves
   --brand, so recolouring the whole UI is this one declaration. The
   orange is deliberately muted rather than a warning colour: QA carries
   a full production data clone and is used for real testing, so it
   should read as "a different server", not "something is broken".

   Contrast against white text is 4.33:1 — better than production's
   green (3.97:1), so nothing becomes harder to read on QA.
   ------------------------------------------------------------------ */
:root {
  /* QA is PURPLE, end to end. Production is the logo's blue and orange;
     nothing on this server should be mistakable for it at a glance,
     from any page, at any zoom.

     White type measures 7.38:1 on the mid purple and 8.96:1 on the deep
     one — both past what small text needs, like production's. The light
     #8f5fd0 is 4.45:1 and is therefore used for accents and stripes,
     never for body text. */
  --brand:          #6b3fa0;
  --brand-hover:    #5b3491;
  --brand-light:    #8f5fd0;

  --sidebar:        #6b3fa0;
  --sidebar-2:      #5b3491;
  --sidebar-text:   #ffffff;
  --sidebar-cap:    rgba(255, 255, 255, 0.72);
  --sidebar-accent: #b98cf0;

  --topbar:         #5b3491;
  --topbar-2:       #4a2a70;
  --topbar-text:    #ffffff;

  /* The header panels stay a filled purple here rather than following
     production's warm off-white — a QA page should read as QA from the
     first block of colour on it. */
  --panel:          #4a2a70;
  --panel-2:        #6b3fa0;
  --panel-3:        #8f5fd0;
  --panel-text:     #ffffff;
  --panel-muted:    rgba(255, 255, 255, 0.85);
  --panel-border:   transparent;
  --panel-tint:     255, 255, 255;

  /* Aliases the shell stylesheet still falls back on. */
  --brand-dark:     #4a2a70;
  --brand-dark-2:   #5b3491;
}

/* ------------------------------------------------------------------
   The shell paints its sidebar and top bar from LITERAL blues and
   oranges, not variables — production needs a gradient that does not
   follow --brand. So overriding the palette above is not enough on its
   own: both surfaces are repainted here.
   ------------------------------------------------------------------ */
.left-sidebar {
    background: var(--sidebar, #6b3fa0) !important;
    background-image: linear-gradient(180deg,
        #4a2a70  0%,
        #6b3fa0 45%,
        #5b3491 100%) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.14) !important;
}

/* The shell's hover states are a white lift on a dark surface, which is
   what QA's brown wants too — nothing to override here. The text shadow
   the shell puts on the top bar is for white-on-orange; it is harmless
   on this darker ground and is left alone. */

/* ------------------------------------------------------------------
   Top bar. On production this stays white; on QA it takes the sidebar's
   gradient so the whole shell reads as one dark band, and carries a
   centred "Testing Environment" label.

   The label is a ::after rather than markup so the entire QA marker
   lives in this file — production templates are not touched at all, and
   there is no branch that could ever render it on the live server.
   ------------------------------------------------------------------ */
.topbar,
.topbar .top-navbar {
    /* Border only. The bar's own gradient is set further down, next to
       the sign-in page's — the two are designed as a pair and a second
       `background` here would just be dead weight overridden by it. */
    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}

/* The logo strip keeps its light plate — logo2.png is dark artwork and
   would be unreadable on the gradient. */
.topbar .navbar-header {
    background: #ffffff !important;
}

/* Everything in the bar was dark-on-white; invert it. */
.topbar .navbar-light .navbar-nav .nav-item > a.nav-link,
.topbar .navbar-nav .nav-link,
.topbar .navbar-nav .nav-link i,
.topbar .navbar-nav .nav-link span {
    color: rgba(255, 255, 255, 0.92) !important;
}
.topbar .navbar-light .navbar-nav .nav-item > a.nav-link:hover,
.topbar .navbar-light .navbar-nav .nav-item > a.nav-link:focus,
.topbar .navbar-nav .nav-link:hover,
.topbar .navbar-nav .nav-link:hover i {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.12) !important;
}
.topbar .u-pro .profile-pic img {
    border-color: rgba(255, 255, 255, 0.45) !important;
}
.topbar .u-pro .profile-pic:hover img {
    border-color: #ffffff !important;
}

/* ─── "Testing Environment" ─────────────────────────────────────────
   Centred within the nav area — that is, the bar minus the logo plate —
   so it lands over the middle of the content column and in the open gap
   between the sidebar toggle and the profile chip. pointer-events:none
   keeps it from swallowing clicks meant for the bar beneath it. */
.topbar .navbar-collapse {
    position: relative;
}
.topbar .navbar-collapse::after {
    content: "Testing Environment";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 20px;
    padding: 6px 20px;
}

/* On a phone the bar is too narrow to hold the label between the
   hamburger and the profile chip without colliding. */
@media (max-width: 767px) {
    .topbar .navbar-collapse::after {
        font-size: 10px;
        letter-spacing: 0.10em;
        padding: 4px 10px;
    }
}
@media (max-width: 480px) {
    .topbar .navbar-collapse::after {
        display: none;
    }
}

/* ------------------------------------------------------------------
   Login / register / forgot-password pages.

   These are the one place someone can act on the wrong server before
   they have any other cue — you sign in, then start entering real work.
   So the marker goes here too, and the page carries the same dark shell
   as the rest of QA.

   Scoped to .auth-page: qa-theme.css is linked on every page, and the
   selectors below (.card, .container) are plain Bootstrap classes that
   the admin portals use heavily.
   ------------------------------------------------------------------ */
/* The shell's top bar is a blue-to-orange gradient in production. QA
   gets its own, in purple, so the bar still reads as a designed surface
   rather than a flat block — just an unmistakably different one. */
.topbar,
.topbar .top-navbar {
    background: var(--topbar, #5b3491) !important;
    background-image:
        radial-gradient(700px 300px at 6% -40%, rgba(255, 255, 255, 0.12), transparent 60%),
        linear-gradient(100deg,
            #3d2260  0%,
            #4a2a70 22%,
            #5b3491 58%,
            #6b3fa0 100%) !important;
}

body.auth-page {
    /* Beats the template's inline background:#f4f4f4 on the body tag.
       The radial pass sits over the gradient as a soft highlight behind
       the sign-in block, so a full-bleed dark page doesn't read flat. */
    background:
        radial-gradient(1100px 520px at 50% 14%, rgba(255, 255, 255, 0.10), transparent 70%),
        linear-gradient(180deg, var(--brand-dark) 0%, var(--brand-dark-2) 55%, var(--brand-dark) 100%) !important;
    min-height: 100vh;
}

/* logo.png is dark artwork, so it needs a light plate to stay legible. */
body.auth-page .text-center > img[alt="Logo"] {
    background: #ffffff;
    padding: 14px 28px;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}

/* Sits directly above the sign-in box, matching the top bar's pill. */
body.auth-page .card {
    position: relative;
    /* Opens a gap under the logo for the banner to sit in. */
    margin-top: 30px;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
body.auth-page .card::before {
    content: "Testing Environment";
    position: absolute;
    left: 50%;
    top: -50px;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 20px;
    padding: 6px 20px;
}

/* The template pins the form block to 68vh, which leaves the card
   crowding the top of a tall window once it has a banner above it. */
body.auth-page .container {
    height: auto !important;
    padding-bottom: 40px;
}