/* Thammasat University corporate identity (CI) accents.
 * Thammasat Red  #C3002F = 195 0 47   (Pantone 200 C)
 * Thammasat Yellow #FFD13F = 255 209 63 (Pantone 122 C)
 *
 * Red carries primary actions and links on light surfaces (6.9:1 against white). Yellow is the
 * accent on dark surfaces, where red falls under contrast, and the text selection colour.
 * The !important keeps the CI in force whatever `interface.theme` a deployment configures,
 * because the theme module writes these same properties inline on the root element. */
:root {
  --accent-primary: 195 0 47 !important;
  --accent-primary-hover: 150 0 36 !important;
  --surface-submit: 195 0 47 !important;
  --surface-submit-hover: 150 0 36 !important;
}

.dark {
  --accent-primary: 255 209 63 !important;
  --accent-primary-hover: 255 227 128 !important;
  --surface-submit: 195 0 47 !important;
  --surface-submit-hover: 224 24 72 !important;
}

::selection {
  background-color: #ffd13f;
  color: #1a1a1a;
}

/* Login background: the Dome Administration Building, faded into the page surface so the form
 * stays the focus. The fade is the surface colour itself, so it follows light and dark mode, and it
 * thickens toward the top where the heading sits. Only the auth shell that contains the login
 * button matches, so the image is fetched on the login page alone. If upstream's markup changes
 * and the selector stops matching, the page falls back to the plain surface. */
div.min-h-screen:has(> main):has(img[src$='assets/logo.svg']) {
  background-image:
    linear-gradient(
      to bottom,
      rgb(var(--surface-primary) / 0.94) 0%,
      rgb(var(--surface-primary) / 0.82) 45%,
      rgb(var(--surface-primary) / 0.62) 100%
    ),
    url('tu-dome.jpg');
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Glass login card. Matched structurally (the card is the direct child of <main> that holds the
 * login button), not by Tailwind utility classes, so restyling upstream does not break it. Without
 * backdrop-filter support the card keeps its normal solid surface. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  div.min-h-screen:has(> main):has(img[src$='assets/logo.svg']) > main > div {
    background-color: rgb(var(--surface-primary) / 0.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid rgb(255 255 255 / 0.55);
    border-radius: 1.25rem;
    box-shadow: 0 8px 32px rgb(0 0 0 / 0.12);
  }

  .dark div.min-h-screen:has(> main):has(img[src$='assets/logo.svg']) > main > div {
    background-color: rgb(var(--surface-primary) / 0.45);
    border-color: rgb(255 255 255 / 0.14);
    box-shadow: 0 8px 32px rgb(0 0 0 / 0.45);
  }
}

/* Larger logo on the auth pages. The logo wrapper is found by the image it holds, so utility-class
 * changes upstream (the stock wrapper is 2.5rem tall) do not break the rule. */
div.min-h-screen:has(> main):has(img[src$='assets/logo.svg']) div:has(> img[src$='assets/logo.svg']) {
  height: clamp(5rem, 16vh, 8rem);
  margin-top: clamp(1.5rem, 5vh, 3rem);
}

div.min-h-screen:has(> main):has(img[src$='assets/logo.svg']) div:has(> img[src$='assets/logo.svg']) > img {
  filter: drop-shadow(0 2px 10px rgb(0 0 0 / 0.22));
}

/* Floating field labels normally lift onto the input's top border and carry a solid surface
 * background that masks the border line. Over the glass card that solid box shows as a rectangle,
 * so on the login card the label has no fill and, once lifted, rests inside the top of the field
 * instead of on its border. Matched by field state (:focus, :placeholder-shown), not by class. */
div.min-h-screen:has(> main):has(img[src$='assets/logo.svg']) > main > div label {
  background: transparent;
}

div.min-h-screen:has(> main):has(img[src$='assets/logo.svg']) > main > div :is(input:focus, input:not(:placeholder-shown)) {
  padding-top: 1rem;
}

div.min-h-screen:has(> main):has(img[src$='assets/logo.svg']) > main > div
  :is(input:focus, input:not(:placeholder-shown))
  ~ label {
  top: 0.3rem;
  translate: 0 0;
}