/* =========================================================
   Base Theme (Light / Dark) – Final Cleaned (No Visual Change)
   ========================================================= */

/* ---------------------------------------------------------
   Variables
   --------------------------------------------------------- */
:root {
    --radius-lg: 1.25rem;
}

/* ---------------------------------------------------------
   Global / Typography (macOS-like, Japanese-safe)
   --------------------------------------------------------- */
body {
    min-height: 100vh;
    font-size: 1rem;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Text",
        "SF Pro Display",
        "Hiragino Sans",
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        system-ui,
        sans-serif;

    letter-spacing: .01em;
    background-color: var(--bs-body-bg);
}

/* ---------------------------------------------------------
   Background – Dark (original blue gradient)
   --------------------------------------------------------- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(
            1200px 600px at 10% -10%,
            rgba(30, 60, 114, 0.55),
            transparent 60%
        ),
        radial-gradient(
            1200px 600px at 90% 10%,
            rgba(42, 82, 152, 0.45),
            transparent 60%
        ),
        linear-gradient(
            135deg,
            #0f172a,
            #020617
        );
}

/* ---------------------------------------------------------
   Background – Light
   --------------------------------------------------------- */
[data-bs-theme="light"] body::before {
    background:
        radial-gradient(
            1200px 700px at 20% -10%,
            rgba(99,102,241,.10),
            transparent 65%
        ),
        radial-gradient(
            1200px 700px at 90% 0%,
            rgba(14,165,233,.08),
            transparent 70%
        ),
        linear-gradient(
            180deg,
            #f7f8fb,
            #eef1f6
        );
}

/* ---------------------------------------------------------
   Login Card – macOS Glass (final)
   --------------------------------------------------------- */
.login-card {
    background: rgba(255, 255, 255, 0.85); /* Increased opacity for text contrast */
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);

    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.6); /* More visible border */

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Dark mode card */
[data-bs-theme="dark"] .login-card {
    background: rgba(28, 28, 30, 0.85); /* Increased for contrast */
    border-color: rgba(255, 255, 255, 0.18); /* Stronger border */

    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------------------------------------------------------
   Typography
   --------------------------------------------------------- */
.card-body h4 {
    font-weight: 600;
    letter-spacing: .03em;
}

/* ---------------------------------------------------------
   Form Controls – macOS style
   --------------------------------------------------------- */
.form-control,
.input-group-text {
    background-color: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.25); /* Increased contrast */
    color: #000;
    border-radius: .65rem;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .input-group-text {
    background-color: rgba(44, 44, 46, 0.85); /* Darker, less transparent */
    border-color: rgba(255, 255, 255, 0.25); /* High contrast border */
    color: #fff;
}

/* ---------------------------------------------------------
   Primary Button – Premium SaaS style
   --------------------------------------------------------- */
.btn-primary {
    border: none;
    border-radius: .75rem;
    font-weight: 500;
    letter-spacing: .04em;

    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bs-primary) 90%, #fff),
        color-mix(in srgb, var(--bs-primary) 75%, #000)
    );

    box-shadow: 0 8px 22px rgba(0,0,0,.18);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px rgba(0,0,0,.28);
    filter: brightness(1.03);
}

/* ---------------------------------------------------------
   Caps Lock Warning – macOS style
   --------------------------------------------------------- */
#capsWarning {
    font-weight: 500;
}

[data-bs-theme="light"] #capsWarning {
    color: #b42318; /* macOS error red */
}

[data-bs-theme="dark"] #capsWarning {
    color: #ff453a; /* macOS dark error red */
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.text-body-secondary {
    opacity: .7;
}

/* ---------------------------------------------------------
   Focus Ring – macOS blue
   --------------------------------------------------------- */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.45);
}