/* ---------------------------------------------------------------------------
auth.css - the utility classes the CAS sign-in views actually use.
WHY THIS FILE EXISTS
The auth views are written in Tailwind utility classes, but Tailwind was
never loaded: _Layout.cshtml linked only flowbite.min.css, which ships
Flowbite's component styles and none of Tailwind's utilities. Every
w-full / rounded-2xl / flex in these views was inert, so the sign-in,
OTP and password-reset pages rendered essentially unstyled.
Rather than pull in the Tailwind Play CDN (which ships a compiler to the
browser and is explicitly not for production) this file implements exactly
the utilities these pages reference, using Tailwind's own default scale.
It is served from our own origin, so the sign-in page no longer depends on
a third-party CDN being reachable to render.
If you later add a real Tailwind build step, delete this file and the
in _Layout.cshtml - the markup needs no changes.
--------------------------------------------------------------------------- */
:root {
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
--indigo-500: #6366f1;
--indigo-600: #4f46e5;
--indigo-700: #4338ca;
--red-500: #ef4444;
--green-600: #16a34a;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
/* --- layout --------------------------------------------------------------- */
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-y-0 { top: 0; bottom: 0; }
.right-3 { right: 0.75rem; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.gap-2 { gap: 0.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.overflow-hidden { overflow: hidden; }
.object-contain { object-fit: contain; }
/* Tailwind's space-y-* puts the gap between siblings, not around them. */
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
/* --- sizing --------------------------------------------------------------- */
.w-full { width: 100%; }
.w-12 { width: 3rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.max-w-md { max-width: 28rem; }
.max-w-6xl { max-width: 72rem; }
.max-h-96 { max-height: 24rem; }
.min-h-screen { min-height: 100vh; }
/* --- spacing -------------------------------------------------------------- */
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.pr-10 { padding-right: 2.5rem; }
.pt-4 { padding-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mr-1 { margin-right: 0.25rem; }
/* --- typography ----------------------------------------------------------- */
.text-center { text-align: center; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.opacity-70 { opacity: 0.7; }
.hover\:underline:hover { text-decoration-line: underline; }
/* --- colour --------------------------------------------------------------- */
.bg-white { background-color: #fff; }
.bg-gray-50 { background-color: var(--gray-50); }
.bg-gray-100 { background-color: var(--gray-100); }
.bg-indigo-600 { background-color: var(--indigo-600); }
.text-white { color: #fff; }
.text-gray-500 { color: var(--gray-500); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-900 { color: var(--gray-900); }
.text-indigo-600 { color: var(--indigo-600); }
.text-red-500 { color: var(--red-500); }
.text-green-600 { color: var(--green-600); }
.hover\:bg-indigo-700:hover { background-color: var(--indigo-700); }
.hover\:text-indigo-600:hover { color: var(--indigo-600); }
/* --- borders and shadow --------------------------------------------------- */
.border { border-width: 1px; border-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-gray-300 { border-color: var(--gray-300); }
.rounded-lg { border-radius: 0.5rem; }
.rounded-2xl { border-radius: 1rem; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
/* --- transitions ---------------------------------------------------------- */
.transition {
transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-colors {
transition-property: color, background-color, border-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-300 { transition-duration: 300ms; }
/* --- interaction states --------------------------------------------------- */
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--ring-color, var(--indigo-500)); }
.focus\:ring-indigo-500:focus { --ring-color: var(--indigo-500); }
.disabled\:bg-gray-400:disabled { background-color: var(--gray-400); }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
/* Keyboard users must always see focus, even where the markup asked for
outline-none. */
input:focus-visible,
button:focus-visible,
a:focus-visible {
outline: 2px solid var(--indigo-600);
outline-offset: 2px;
}
/* --- responsive (Tailwind md: breakpoint) --------------------------------- */
@media (min-width: 768px) {
.md\:flex { display: flex; }
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* --- dark scheme ----------------------------------------------------------
The views carry dark:* classes but no Tailwind config ever enabled them.
Honouring the OS preference is the useful reading of that intent. */
@media (prefers-color-scheme: dark) {
.dark\:bg-gray-700 { background-color: var(--gray-700); }
.dark\:bg-gray-800 { background-color: var(--gray-800); }
.dark\:bg-gray-900 { background-color: var(--gray-900); }
.dark\:border-gray-600 { border-color: var(--gray-600); }
.dark\:text-gray-100 { color: var(--gray-100); }
}
/* --- shared pieces the auth views rely on --------------------------------- */
/* Password reveal button. Inline SVG rather than an icon font, so the control
still renders if the Font Awesome kit is blocked or fails to load. */
.pw-toggle {
position: absolute;
top: 50%;
right: 0.375rem;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 2.125rem;
height: 2.125rem;
padding: 0;
border: 0;
border-radius: 0.375rem;
background: transparent;
color: var(--gray-500);
cursor: pointer;
}
.pw-toggle:hover { color: var(--indigo-600); background-color: var(--gray-100); }
.pw-toggle svg { width: 1.15rem; height: 1.15rem; }
/* Exactly one icon is ever shown, selected by the button's aria-pressed state.
This must not use the `hidden` attribute: `hidden` is an HTMLElement attribute,
and an