/*
 * assets/login-iris.css — the sign-in page in the IRIS look (Keith,
 * 2026-10-14): deep black, the blue → orange gradient, a laser line along
 * the top of the card and soft blue/orange glows behind it. Loaded after
 * login.php's own styles; remove the <link> to go back.
 */
:root {
  --li-bg: #050607;
  --li-card: rgba(11, 13, 17, 0.86);
  --li-field: #111419;
  --li-border: #22272f;
  --li-text: #eef1f5;
  --li-muted: #8a93a3;
  --li-blue: #3b8bff;
  --li-orange: #ff8a3d;
  --li-gradient: linear-gradient(90deg, #3b8bff 0%, #8f7dd8 50%, #ff8a3d 100%);
}

html body.login-iris {
  /* The AKIRIS artwork (assets/login-bg.png): the mark top right, the
     horizon glowing blue → orange. A light shade on the left keeps the card
     readable; on a phone the picture is pinned right so the mark stays in. */
  background:
    linear-gradient(90deg, rgba(5, 6, 7, 0.55) 0%, rgba(5, 6, 7, 0.15) 55%, rgba(5, 6, 7, 0) 100%),
    url(login-bg.png?s=d01605f9efc1d211aa8c40058f931faef094208d) 72% center / cover no-repeat,
    var(--li-bg);
  animation: none;
  color: var(--li-text);
  color-scheme: dark;
}
/* The picture has its own glow: no drifting orbs. */
body.login-iris::before, body.login-iris::after { display: none; }
@media (max-width: 640px) {
  html body.login-iris { background-position: 0 0, 80% center, 0 0; }
}

body.login-iris .login-card {
  background: var(--li-card);
  border: 1px solid var(--li-border);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 60px -20px rgba(59, 139, 255, 0.35);
}
/* The laser line across the top of the card. */
body.login-iris .login-card::before {
  height: 3px;
  background: var(--li-gradient);
  background-size: 200% 100%;
  box-shadow: 0 0 14px rgba(59, 139, 255, 0.7), 0 0 22px rgba(255, 138, 61, 0.45);
}

body.login-iris .brand-tile {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 26px -4px rgba(59, 139, 255, 0.55), 0 0 40px -10px rgba(255, 138, 61, 0.45);
}
body.login-iris .brand-company { color: #fff; }
body.login-iris .brand-powered { color: var(--li-muted); }
body.login-iris .brand-powered strong {
  background: var(--li-gradient);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
body.login-iris .text-muted,
body.login-iris .form-label.text-muted { color: var(--li-muted) !important; }

/* Fields */
body.login-iris .form-control,
body.login-iris .input-group-text,
body.login-iris .input-group-text.bg-white {
  background: var(--li-field) !important;
  border-color: var(--li-border);
  color: var(--li-text);
}
body.login-iris .input-group-text .text-secondary { color: var(--li-muted) !important; }
body.login-iris .form-control::placeholder { color: #5d6573; }
body.login-iris .form-control:focus {
  background: #151920 !important;
  border-color: var(--li-blue);
  box-shadow: 0 0 0 3px rgba(59, 139, 255, 0.22);
  color: #fff;
}
body.login-iris .input-group:focus-within .input-group-text {
  background: #151920 !important;
  border-color: var(--li-blue);
}
body.login-iris .input-group:focus-within .input-group-text .text-secondary { color: var(--li-blue) !important; }
/* Browser autofill keeps the dark field. */
body.login-iris .form-control:-webkit-autofill {
  -webkit-text-fill-color: var(--li-text);
  -webkit-box-shadow: 0 0 0 1000px var(--li-field) inset;
  caret-color: var(--li-text);
}

/* Sign In: blue → orange, with a glow. */
body.login-iris .btn-primary-custom {
  background: linear-gradient(90deg, #1f6fff 0%, #6d6fe0 55%, #ff8a3d 100%);
  box-shadow: 0 6px 22px -6px rgba(59, 139, 255, 0.6), 0 4px 18px -8px rgba(255, 138, 61, 0.55);
}
body.login-iris .btn-primary-custom:hover {
  box-shadow: 0 10px 30px -6px rgba(59, 139, 255, 0.75), 0 6px 26px -8px rgba(255, 138, 61, 0.7);
}
body.login-iris .btn-primary-custom:focus-visible { outline: 2px solid var(--li-orange); outline-offset: 2px; }

body.login-iris .hipaa-badge {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--li-border);
  color: var(--li-muted);
}
body.login-iris .login-legal { color: #5d6573; }
body.login-iris .login-legal a { color: var(--li-muted); border-bottom-color: #2c323c; }
body.login-iris .login-legal a:hover,
body.login-iris .login-legal a:focus-visible { color: var(--li-orange); border-bottom-color: var(--li-orange); }

/* Messages stay readable on black. */
body.login-iris .alert-danger  { background: rgba(220, 38, 38, 0.14);  color: #fca5a5; }
body.login-iris .alert-success { background: rgba(34, 197, 94, 0.14);  color: #86efac; }

@media (prefers-reduced-motion: reduce) {
  body.login-iris::before, body.login-iris::after, body.login-iris .login-card::before { animation: none; }
}

/* ── Two-step code page (two_factor.php), same look ─────────────────── */
body.login-iris .auth-card {
  background: var(--li-card);
  border: 1px solid var(--li-border);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9), 0 0 60px -20px rgba(59, 139, 255, 0.35);
  color: var(--li-text);
}
body.login-iris .auth-card::before {
  height: 3px;
  background: var(--li-gradient);
  box-shadow: 0 0 14px rgba(59, 139, 255, 0.7), 0 0 22px rgba(255, 138, 61, 0.45);
}
body.login-iris .auth-header .brand-icon {
  background: #fff;
  box-shadow: 0 0 26px -4px rgba(59, 139, 255, 0.55), 0 0 40px -10px rgba(255, 138, 61, 0.45);
}
body.login-iris .auth-header h1 { color: #fff; }
body.login-iris .auth-header p,
body.login-iris .form-label,
body.login-iris .auth-card .hipaa-badge { color: var(--li-muted); }
body.login-iris .auth-card .hipaa-badge { background: none; border: 0; }
body.login-iris .btn-primary {
  background: linear-gradient(90deg, #1f6fff 0%, #6d6fe0 55%, #ff8a3d 100%);
  box-shadow: 0 6px 22px -6px rgba(59, 139, 255, 0.6), 0 4px 18px -8px rgba(255, 138, 61, 0.55);
}
body.login-iris .toggle-link a { color: var(--li-blue); }
body.login-iris .toggle-link a:hover { color: var(--li-orange); }