/* ==========================================================================
   Tech5A brand: tokens, split-screen sign-in page, faint inner-page background.
   Taken from Tech5A IMS (Tech5AERP site.css). Put auth-bg.jpg and app-bg.svg in the same folder
   as this file, or change the two url()s.
   Markup:
     sign-in:  <div class="t5-auth"><div class="t5-auth-brand" aria-hidden="true">
                 <div class="t5-auth-brand-content"><img class="t5-auth-logo" src=".../logo-dark.svg" alt="">
                 <span class="t5-auth-title">Tech5A Product</span><span class="t5-auth-subtitle">...</span>
                 <p class="t5-auth-tagline">...</p></div></div>
               <div class="t5-auth-form">...form...</div></div>
     inner:    <div id="PageBackground"></div> as the first child of <body> on signed-in pages.
   Dark mode follows html[data-bs-theme="dark"], html.dark or html.theme-dark; add the project's own
   switch to those selector lists if it uses another one.
   ========================================================================== */

:root {
  /* Fixed brand colours (logo, favicon, manifest) */
  --t5-navy: #0F1E3C;
  --t5-blue: #2B5BE3;
  /* App primary: follows the project's theme when it has one (Bootstrap shown), else brand blue */
  --t5-primary: var(--bs-primary, var(--t5-blue));
  /* Sign-in brand panel overlay, darkest to lightest: the Tech5A IMS teal (teal 950, 900, 500),
     which matches the teal artwork in auth-bg.jpg. Also the dark-mode surface on sign-in pages. */
  --t5-auth-dark: #042f2e;
  --t5-auth-mid: #134e4a;
  --t5-auth-accent: #14b8a6;
  --t5-surface: #ffffff;
  --t5-text: #1e293b;
  --t5-text-muted: #64748b;
}

html[data-bs-theme="dark"],
html.dark,
html.theme-dark {
  --t5-surface: var(--t5-auth-dark);
  --t5-text: #e2e8f0;
  --t5-text-muted: #94a3b8;
}

/* ---------- Sign-in / sign-up: image + brand on one side, form on the other ---------- */
.t5-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  width: 100%;
  background: var(--t5-surface);
}

.t5-auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 3rem 2.5rem;
  background: var(--t5-auth-dark) url(auth-bg.jpg) center / cover no-repeat;
  overflow: hidden;
  text-align: center;
}

/* Dark gradient over the image so the white text stays readable */
.t5-auth-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--t5-auth-dark) 95%, transparent) 0%,
    color-mix(in srgb, var(--t5-auth-mid) 80%, transparent) 35%,
    color-mix(in srgb, var(--t5-auth-dark) 55%, transparent) 100%);
  pointer-events: none;
}

/* Thin accent line along the bottom */
.t5-auth-brand::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--t5-auth-accent), transparent);
  pointer-events: none;
}

.t5-auth-brand-content {
  position: relative;
  z-index: 1;
  max-width: 380px;
}

/* Use logo-dark.svg (white mark) here: it sits on the dark overlay */
.t5-auth-logo {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 1.5rem;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.t5-auth-title {
  display: block;
  color: #fff;
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.t5-auth-subtitle {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.t5-auth-tagline {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 2.5rem;
}

.t5-auth-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 2.5rem;
  background: var(--t5-surface);
  color: var(--t5-text);
  overflow-y: auto;
}

.t5-auth-form > * {
  width: 100%;
  max-width: 420px;
}

@media (max-width: 991.98px) {
  .t5-auth { grid-template-columns: 2fr 3fr; }
  .t5-auth-brand { padding: 2rem 1.5rem; }
}

/* Phones: brand becomes a short band above the form */
@media (max-width: 767.98px) {
  .t5-auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .t5-auth-brand { padding: 1.75rem 1.5rem 1.5rem; }
  .t5-auth-logo { width: 52px; height: 52px; margin-bottom: 0.75rem; }
  .t5-auth-title { font-size: 1.35rem; }
  .t5-auth-subtitle { margin-bottom: 0; }
  .t5-auth-tagline { display: none; }
  .t5-auth-form { padding: 1.5rem 1rem 2rem; }
}

/* ---------- Inner pages: faint dashboard drawing + soft wash in the app's primary colour ----------
   app-bg.svg is used as a mask (only its alpha matters), so it takes whatever primary colour the
   theme has. It sits behind the content; cards, grids and panels must stay opaque on top of it. */
#PageBackground {
  --page-bg-tint: color-mix(in srgb, var(--t5-primary) 7%, transparent);
  --page-bg-art: color-mix(in srgb, var(--t5-primary) 9%, transparent);
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 45% at 100% 0%, var(--page-bg-tint), transparent 70%),
    radial-gradient(ellipse 45% 40% at 0% 100%, var(--page-bg-tint), transparent 70%);
}

#PageBackground::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: min(760px, 60vw);
  aspect-ratio: 4 / 3;
  background-color: var(--page-bg-art);
  -webkit-mask: url(app-bg.svg) center / contain no-repeat;
  mask: url(app-bg.svg) center / contain no-repeat;
}

/* Right-to-left: mirror the wash and the drawing */
html[dir="rtl"] #PageBackground {
  background:
    radial-gradient(ellipse 55% 45% at 0% 0%, var(--page-bg-tint), transparent 70%),
    radial-gradient(ellipse 45% 40% at 100% 100%, var(--page-bg-tint), transparent 70%);
}

html[dir="rtl"] #PageBackground::after {
  transform: scaleX(-1);
}

/* Dark mode needs a little more strength to show at all */
html[data-bs-theme="dark"] #PageBackground,
html.dark #PageBackground,
html.theme-dark #PageBackground {
  --page-bg-tint: color-mix(in srgb, var(--t5-primary) 12%, transparent);
  --page-bg-art: color-mix(in srgb, var(--t5-primary) 16%, transparent);
}

@media print {
  #PageBackground { display: none; }
}