/* Theme variables (light as default) */
:root{
  --bg-accent-1: rgba(30,136,229,0.06);
  --bg-accent-2: rgba(255,213,79,0.04);
  --card-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,252,0.98));
  --card-text: #0f172a;
  --muted-border: rgba(15,23,42,0.06);
  --tower-stroke: #1e88e5;
  --beam-stroke: #ffd54f;
  --brand-color: #0b5ed7;
  --shadow: 0 8px 24px rgba(16,24,40,0.08);
}

/* Dark-mode overrides: respects prefers-color-scheme and MudBlazor dark theme class */
@media (prefers-color-scheme: dark) {
  :root{
    --bg-accent-1: rgba(30,136,229,0.03);
    --bg-accent-2: rgba(255,213,79,0.02);
    --card-bg: linear-gradient(180deg, rgba(10,12,16,0.72), rgba(18,20,26,0.72));
    --card-text: #e6eef8;
    --muted-border: rgba(255,255,255,0.04);
    --tower-stroke: #6fb3ff;
    --beam-stroke: #ffdca3;
    --brand-color: #9ecbff;
    --shadow: 0 10px 30px rgba(0,0,0,0.6);
  }
}
/* Also support MudBlazor dark theme class on body (some Mud versions add .mud-theme-provider or body class) */
body.mud-theme-dark, .mud-theme-dark {
  --bg-accent-1: rgba(30,136,229,0.03);
  --bg-accent-2: rgba(255,213,79,0.02);
  --card-bg: linear-gradient(180deg, rgba(10,12,16,0.72), rgba(18,20,26,0.72));
  --card-text: #e6eef8;
  --muted-border: rgba(255,255,255,0.04);
  --tower-stroke: #6fb3ff;
  --beam-stroke: #ffdca3;
  --brand-color: #9ecbff;
  --shadow: 0 10px 30px rgba(0,0,0,0.6);
}

/* Page layout - center card */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 64px);
    padding: 2rem;
    background:
      radial-gradient(circle at 10% 20%, var(--bg-accent-1), transparent 10%),
      radial-gradient(circle at 90% 80%, var(--bg-accent-2), transparent 10%);
}

/* Card */
.login-card {
    width: 100%;
    max-width: 540px;
    border-radius: 12px;
    padding: 1.6rem;
    background: var(--card-bg);
    color: var(--card-text);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    /* subtle border for separation in dark mode */
    border: 1px solid rgba(255,255,255,0.03);
}

/* Brand area */
.brand-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    margin-bottom: 0.4rem;
}

.tower {
    transform-origin: center;
    animation: tower-bob 3s ease-in-out infinite;
    /* make sure SVG inherits stroke colors from variables */
}
.tower .tower-stroke { stroke: var(--tower-stroke); }
.tower .beam { stroke: var(--beam-stroke); }

/* Draw the tower stroke */
.tower-stroke {
    stroke-dasharray: 240;
    stroke-dashoffset: 240;
    animation: draw 1.2s ease forwards;
    animation-delay: 0.1s;
}

/* Beam flash */
.beam {
    opacity: 0;
    animation: beam-flash 2.6s ease-in-out infinite;
}

/* Brand text - letter stagger animation */
.brand-text {
    display: flex;
    gap: 0.06em;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
    margin-top: 0.2rem;
    filter: drop-shadow(0 2px 6px rgba(30,136,229,0.08));
    color: var(--card-text);
}
.brand-text span {
    display: inline-block;
    transform: translateY(14px) rotateX(70deg);
    opacity: 0;
    color: var(--brand-color);
    animation: letter-up 0.7s cubic-bezier(.2,.9,.3,1) forwards;
    animation-delay: calc(var(--i) * 0.05s);
}

/* Login body spacing */
.login-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Aux links smaller */
.aux-links {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.4rem;
}
.aux-links a, .aux-links .mud-link {
    color: var(--brand-color);
}

/* External login area */
.external-login {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--muted-border);
}

/* Accessibility: visually-hidden for screen readers when needed */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* Animations */
@keyframes draw {
    to { stroke-dashoffset: 0; }
}
@keyframes beam-flash {
    0% { opacity: 0; transform: translateY(-2px) scaleY(1); }
    35% { opacity: 1; transform: translateY(-6px) scaleY(1.1); }
    100% { opacity: 0; transform: translateY(-2px) scaleY(1); }
}
@keyframes letter-up {
    to { transform: translateY(0) rotateX(0deg); opacity: 1; }
}
@keyframes tower-bob {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Responsive tweaks */
@media (max-width: 600px) {
    .login-card { padding: 1rem; }
    .brand-text { font-size: 1rem; }
}

/* Small focus improvements for keyboard users */
.login-card :focus {
  outline: 3px solid rgba(100,150,255,0.12);
  outline-offset: 2px;
  border-radius: 6px;
}