/*
 * Sign-in and role choice (layouts/auth.php) in the employee portal's look:
 * the light teal canvas and its coloured light, a white frosted card, the teal
 * primary button (Ahmed: «white, or the employee dashboard's design»).
 *
 * The values are the teal portal's own tokens from glass.css
 * (.glass-ui.portal-teal), copied rather than loaded: glass.css scopes
 * everything under body.glass-ui and brings the whole portal with it.
 *
 * Contrast on the card (white at 62% over the lightest canvas point):
 * ink #0a1d23 ≥ 15:1, muted #3a4d53 ≥ 8:1, the button's white on #0a5a62 ≥ 7:1.
 * --a-faint (#6b7f85) is only for placeholders and field icons.
 */
body.auth-glass {
  --a-ink: #0a1d23; --a-muted: #3a4d53; --a-faint: #6b7f85;
  --a-brand: #0e7c86; --a-brand-2: #0a5a62; --a-brand-3: #084a51; --a-brand-text: #084a51;
  --a-soft: rgba(14,124,134,.12); --a-ring: rgba(14,124,134,.88);
  --a-line: rgba(10,29,35,.16); --a-hair: rgba(10,29,35,.08);
  --a-field: rgba(255,255,255,.82); --a-field-hover: #fff;
  --a-bad: #a8231a; --a-bad-bg: rgba(220,38,38,.08); --a-bad-line: rgba(220,38,38,.22);
  --a-ok: #116530;  --a-ok-bg: rgba(22,163,74,.09);  --a-ok-line: rgba(22,163,74,.24);
  --a-warn: #874905;
  --a-ease: cubic-bezier(.22,1,.36,1);
  margin: 0; min-height: 100vh; color: var(--a-ink);
  font-family: 'Tajawal', system-ui, sans-serif; font-size: 16px;
  background: #e6f1f3; overflow-x: hidden;
}

/* ---- the scene: the employee portal's canvas, its light drifting slowly ---- */
.auth-scene { position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(42% 50% at 92% 4%,  rgba(14,124,134,.42), transparent 70%),
    radial-gradient(36% 44% at 6% 10%,  rgba(56,189,248,.34), transparent 70%),
    radial-gradient(44% 52% at 50% 104%, rgba(99,102,241,.26), transparent 70%),
    radial-gradient(28% 34% at 32% 48%, rgba(234,179,8,.16), transparent 70%),
    radial-gradient(30% 36% at 78% 62%, rgba(20,184,166,.16), transparent 70%),
    #e6f1f3; }
.auth-blob { position: absolute; border-radius: 50%; filter: blur(70px); }
.auth-blob.g { width: 34vmax; height: 34vmax; background: rgba(14,124,134,.30); top: -12vmax; right: -8vmax; animation: aDrift 18s ease-in-out infinite alternate; }
.auth-blob.t { width: 30vmax; height: 30vmax; background: rgba(56,189,248,.26); bottom: -12vmax; left: -8vmax; animation: aDrift 21s ease-in-out infinite alternate-reverse; }
.auth-blob.p { width: 22vmax; height: 22vmax; background: rgba(99,102,241,.16); top: 58%; right: 32%; animation: aDrift 25s ease-in-out infinite alternate; }
.auth-blob.y { width: 14vmax; height: 14vmax; background: rgba(234,179,8,.14); top: 20%; left: 24%; animation: aDrift 29s ease-in-out infinite alternate-reverse; }

/* ---- the card ----------------------------------------------------------- */
.auth-wrap { position: relative; z-index: 1; min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.auth-card { width: 100%; max-width: 440px; padding: 36px 34px 24px; border-radius: 26px;
  background: linear-gradient(160deg, rgba(255,255,255,.78), rgba(255,255,255,.56));
  border: 1px solid rgba(255,255,255,.80);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--a-hair), 0 2px 8px rgba(8,42,51,.07), 0 26px 64px rgba(8,42,51,.16);
  -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
  animation: aCard 650ms var(--a-ease) both; }
.auth-card > * { animation: aRise 560ms var(--a-ease) both; }
.auth-card > :nth-child(1) { animation-delay: 110ms; }
.auth-card > :nth-child(2) { animation-delay: 180ms; }
.auth-card > :nth-child(3) { animation-delay: 250ms; }
.auth-card > :nth-child(4) { animation-delay: 320ms; }
.auth-card > :nth-child(5) { animation-delay: 390ms; }

.auth-brand { text-align: center; margin-bottom: 26px; }
.auth-brand img { width: 210px; max-width: 70%; height: auto; display: block; margin: 0 auto 18px; }
.auth-brand h1 { margin: 0; font-size: 24px; font-weight: 800; color: var(--a-ink); line-height: 1.35; }
.auth-brand p { margin: 6px 0 0; font-size: 15px; color: var(--a-muted); }

/* ---- fields ------------------------------------------------------------- */
.auth-field { margin-bottom: 16px; }
.auth-field label { display: block; margin-bottom: 7px; font-size: 14.5px; font-weight: 700; color: var(--a-ink); }
.auth-input { position: relative; display: flex; align-items: center; }
.auth-input > .ic { position: absolute; right: 15px; width: 19px; height: 19px; color: var(--a-faint); pointer-events: none; transition: color 200ms; }
.auth-input input { width: 100%; min-height: 50px; padding: 10px 46px 10px 14px; border-radius: 14px;
  font: inherit; font-size: 16px; color: var(--a-ink); background: var(--a-field);
  border: 1px solid var(--a-line); outline: none; box-shadow: inset 0 1px 2px rgba(10,29,35,.04);
  transition: border-color 200ms, background-color 200ms, box-shadow 200ms; }
.auth-input input::placeholder { color: var(--a-faint); }
.auth-input input:hover { background: var(--a-field-hover); border-color: rgba(10,29,35,.28); }
.auth-input input:focus { border-color: #139aa5; background: #fff; box-shadow: 0 0 0 3px var(--a-ring); }
.auth-input:focus-within > .ic { color: var(--a-brand); }
.auth-input input:-webkit-autofill { -webkit-text-fill-color: var(--a-ink); caret-color: var(--a-ink);
  -webkit-box-shadow: 0 0 0 40px #fff inset; transition: background-color 9999s; }
.auth-input.has-toggle input { padding-left: 50px; }
.auth-eye { position: absolute; left: 6px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px;
  background: transparent; color: var(--a-muted); cursor: pointer; transition: background-color 200ms, color 200ms; }
.auth-eye:hover { background: var(--a-soft); color: var(--a-brand-text); }
.auth-eye:focus-visible { outline: 3px solid var(--a-ring); outline-offset: 1px; }
.auth-eye .ic { width: 19px; height: 19px; }
.auth-eye .when-shown { display: none; }
.auth-eye[aria-pressed="true"] .when-shown { display: inline-block; }
.auth-eye[aria-pressed="true"] .when-hidden { display: none; }
.auth-caps { display: none; align-items: center; gap: 6px; margin-top: 7px; font-size: 13.5px; color: var(--a-warn); }
.auth-caps.is-on { display: flex; }

/* ---- actions: the teal primary button ------------------------------------ */
.auth-submit { position: relative; width: 100%; min-height: 52px; margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 15px; cursor: pointer; overflow: hidden;
  font: inherit; font-size: 16.5px; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, var(--a-brand), var(--a-brand-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 22px rgba(11,99,107,.30);
  transition: transform 200ms var(--a-ease), box-shadow 200ms, background 200ms; }
.auth-submit:hover { transform: translateY(-1px); background: linear-gradient(180deg, var(--a-brand), var(--a-brand-3));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 12px 28px rgba(14,124,134,.36); }
.auth-submit:active { transform: translateY(0); }
.auth-submit:focus-visible { outline: 3px solid var(--a-brand-text); outline-offset: 3px; }
.auth-submit .ic { width: 19px; height: 19px; }
.auth-submit::after { content: ""; position: absolute; inset: 0; transform: translateX(120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  animation: aSheen 5s ease-in-out 1.4s infinite; }
.auth-submit[aria-busy="true"] { cursor: progress; opacity: .85; }
.auth-submit[aria-busy="true"]::after { display: none; }
.auth-submit .spin { display: none; animation: aSpin .9s linear infinite; }
.auth-submit[aria-busy="true"] .spin { display: inline-block; }
.auth-submit[aria-busy="true"] .go { display: none; }

.auth-alert { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 18px; padding: 12px 14px; border-radius: 14px;
  font-size: 14.5px; line-height: 1.6; border: 1px solid; }
.auth-alert .ic { width: 19px; height: 19px; margin-top: 2px; flex: none; }
.auth-alert.is-bad { color: var(--a-bad); background: var(--a-bad-bg); border-color: var(--a-bad-line); }
.auth-alert.is-ok  { color: var(--a-ok);  background: var(--a-ok-bg);  border-color: var(--a-ok-line); }
.auth-alert span { color: var(--a-ink); }

.auth-foot { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--a-hair); display: flex; justify-content: center; align-items: center; gap: 7px;
  font-size: 13.5px; color: var(--a-muted); }
.auth-foot .ic { width: 15px; height: 15px; }
.auth-foot a { color: var(--a-brand-text); font-weight: 700; text-decoration: none; }
.auth-foot a:hover { text-decoration: underline; }

/* ---- role choice -------------------------------------------------------- */
.auth-roles { display: grid; gap: 10px; }
.auth-role { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 10px 16px; border-radius: 15px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 700; color: var(--a-ink); text-align: start;
  background: var(--a-field); border: 1px solid var(--a-line); transition: background-color 200ms, border-color 200ms, transform 200ms var(--a-ease), box-shadow 200ms; }
.auth-role:hover { background: #fff; border-color: #139aa5; transform: translateX(-3px); box-shadow: 0 8px 20px rgba(8,42,51,.10); }
.auth-role:focus-visible { outline: 3px solid var(--a-ring); outline-offset: 2px; }
.auth-role .r-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--a-soft); color: var(--a-brand-text); }
.auth-role .r-ic .ic { width: 20px; height: 20px; }
.auth-role .r-go { margin-inline-start: auto; width: 18px; height: 18px; color: var(--a-faint); }
.auth-lead { margin: 0 0 18px; font-size: 15px; line-height: 1.7; color: var(--a-muted); text-align: center; }

/* ---- motion ------------------------------------------------------------- */
@keyframes aDrift { to { transform: translate(-6vmax, 5vmax) scale(1.12); } }
@keyframes aCard  { from { opacity: 0; transform: translateY(22px) scale(.98); filter: blur(6px); } }
@keyframes aRise  { from { opacity: 0; transform: translateY(10px); } }
@keyframes aSheen { 0% { transform: translateX(120%); } 30%, 100% { transform: translateX(-120%); } }
@keyframes aSpin  { to { transform: rotate(360deg); } }

@media (max-width: 575.98px) {
  .auth-card { padding: 28px 20px 20px; border-radius: 22px; }
  .auth-brand h1 { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-blob, .auth-card, .auth-card > *, .auth-submit::after { animation: none !important; }
  .auth-submit:hover, .auth-role:hover { transform: none; }
}
/* No blur available: a solid white card. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .auth-card { background: #fff; }
}