/* Yleinen admin-teema: tumma tausta + vaalea teksti */

html, body {
    background: #020617 !important;
    background-color: #020617 !important;
    margin: 0;
    padding: 0;
}

body {
    background-color: #020617;
    color: #e5e7eb;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Tähtitausta bodyyn pseudo-elementeillä – ei tarvita .stars-diviä */
body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-repeat: no-repeat;
    pointer-events: none;
}

body::before {
    background-image:
        radial-gradient(1px 1px at 10% 20%, #ffffff 80%, transparent 81%),
        radial-gradient(1px 1px at 25% 80%, #ffffff 80%, transparent 81%),
        radial-gradient(1px 1px at 40% 30%, #ffffff 80%, transparent 81%),
        radial-gradient(1px 1px at 60% 70%, #ffffff 80%, transparent 81%),
        radial-gradient(1px 1px at 80% 40%, #ffffff 80%, transparent 81%),
        radial-gradient(1px 1px at 90% 85%, #ffffff 80%, transparent 81%),
        radial-gradient(1px 1px at 15% 55%, #ffffff 80%, transparent 81%),
        radial-gradient(1px 1px at 50% 10%, #ffffff 80%, transparent 81%);
    animation: drift1 120s linear infinite;
}

body::after {
    background-image:
        radial-gradient(1px 1px at 5% 10%, #e5e7eb 75%, transparent 76%),
        radial-gradient(1px 1px at 35% 60%, #e5e7eb 75%, transparent 76%),
        radial-gradient(1px 1px at 55% 25%, #e5e7eb 75%, transparent 76%),
        radial-gradient(1px 1px at 70% 90%, #e5e7eb 75%, transparent 76%),
        radial-gradient(1px 1px at 85% 15%, #e5e7eb 75%, transparent 76%),
        radial-gradient(1px 1px at 20% 85%, #e5e7eb 75%, transparent 76%);
    opacity: 0.8;
    animation: drift2 180s linear infinite;
}

@keyframes drift1 {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-60px, 40px, 0); }
}
@keyframes drift2 {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(40px, -60px, 0); }
}

/* HEADER / BRANDING */
#header {
    background: transparent;
    border-bottom: none;
    padding: 1rem 2rem 0.5rem 2rem;
}

#branding h1, #branding h1 a {
    color: #f9fafb;
    font-size: 1.5rem;
    text-decoration: none;
}

/* LOGIN-SIVU: sama "kortti" kuin etusivulla */
/* LOGIN-SIVU: kortti keskelle, ei taustalaatikoita */
body.login {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Django adminin omat marginaalit ja taustat pois */
body.login #container {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 480px;
    background: transparent;
    box-shadow: none;
    border: none;
}

body.login #content {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Varsinainen kortti */
body.login #content-main {
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.96);
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
    padding: 2.5rem 2.25rem 2rem 2.25rem;
}

/* Login-otsikko keskelle */
body.login #content-main h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 2rem;
    color: #f9fafb;
    text-align: center;
}


/* Login-otsikko */
body.login #content-main h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 2rem;
    color: #f9fafb;
    text-align: center;
}

/* Lomakkeen typografiaa */
body.login .form-row label {
    color: #e5e7eb;
}

body.login input[type="text"],
body.login input[type="password"] {
    background: #020617;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.8);
    color: #e5e7eb;
}

/* Login-napin stailaus hieman pill-tyyliin */
body.login .submit-row input[type="submit"] {
    background: rgba(20, 30, 50, 0.9);
    border-radius: 999px;
    border: 1px solid rgba(94, 234, 212, 0.6);
    color: #a5f3fc;
    padding: 0.4rem 1.6rem;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
}

body.login .submit-row input[type="submit"]:hover {
    background: rgba(94, 234, 212, 0.2);
    border-color: rgba(94, 234, 212, 0.95);
    color: #67e8f9;
}

/* FOOTER */
#footer {
    border: none;
    color: #9ca3af;
    text-align: center;
    font-size: 0.75rem;
    padding: 1rem 0 1.5rem 0;
}