/********************************************************
 HVLoginPage - style.css (Kort-layout, WCAG-anpassad)
 ********************************************************/

/* =========================
   1. SIDBAKGRUND OCH CENTRERING
   ========================= */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
    background-color: #121212 !important;
    background-image: url('/adfs/portal/illustration/illustration.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
}

/* Centrerat vitt kort */
#db, #fullPage, #mainContent, .pane {
    display: block !important;
    max-width: 480px !important;
    width: 90% !important;
    margin: 60px auto 40px auto !important;
    padding: 35px !important;
    background-color: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* Dölj standard ADFS vänsterpanel */
.pane-left, #illustration, #brandingIllustration {
    display: none !important;
}

.pane-right, #loginArea, #content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    border: none !important;
    background: transparent !important;
}

/* =========================
   2. LOGOTYP OCH TYPOGRAFI
   ========================= */
#branding, #logoBlock, #header {
    text-align: left !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#logoImage, .logo-image, img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-bottom: 16px !important;
}

/* Text & Rubriker - Hög kontrast (WCAG 1.4.3) */
#loginHeader, #loginMessage, .loginMessage, .groupMargin {
    color: #1a1a1a !important;
    display: block !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

/* Beskrivningstexten under användarnamn (större text) */
#signInDescription, .usernameDescription {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #222222 !important;
    margin-bottom: 16px !important;
}

/* =========================
   3. TILLBAKA-PIL (STEG 2)
   ========================= */
#idp_BackLink, #backButton, .backButton, #backButtonArea a {
    display: inline-block !important;
    font-size: 24px !important;
    color: #005A9C !important; /* Mörkare blå för WCAG-kontrast */
    text-decoration: none !important;
    padding: 4px 8px !important;
    margin-bottom: 15px !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    transition: background-color 0.2s ease !important;
}

#idp_BackLink:hover, #backButton:hover, .backButton:hover, #backButtonArea a:hover {
    background-color: #e8f2fa !important;
    color: #003366 !important;
}

/* =========================
   4. FORMULÄRFÄLT & TANGENTBORDSTILLGÄNGLIGHET
   ========================= */
input[type="text"], 
input[type="password"], 
input[type="email"],
.genericInput {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border: 1px solid #767676 !important; /* WCAG synlig ram */
    border-radius: 4px !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    font-size: 16px !important;
    color: #1a1a1a !important;
    margin-top: 6px !important;
    margin-bottom: 16px !important;
}

/* Tydlig fokusmarkering vid tabbing (WCAG 2.4.7) */
input[type="text"]:focus, 
input[type="password"]:focus,
a:focus,
button:focus {
    outline: 3px solid #005A9C !important;
    outline-offset: 2px !important;
    border-color: #005A9C !important;
}

/* =========================
   5. KNAPPAR OCH LÄNKAR
   ========================= */
#nextButton, #submitButton, input[type="submit"], .submitButton {
    background: none !important;
    border: none !important;
    color: #005A9C !important; /* WCAG godkänd kontrast (minst 4.5:1) */
    text-decoration: underline !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 2px 4px !important;
    display: inline-block !important;
    clear: both !important;
    margin-top: 15px !important;
    margin-bottom: 25px !important;
}

#nextButton:hover, #submitButton:hover, input[type="submit"]:hover, .submitButton:hover {
    color: #003366 !important;
}

/* =========================
   6. FOOTER & LÄNKSTAPLING
   ========================= */
#copyright, #footerBorder {
    display: none !important;
    border: none !important;
}

#footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-top: 20px !important;
    padding-top: 0 !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
}

/* Länk-ordning och färger i footern */
#opening, #helpDesk {
    order: 1 !important;
    margin-bottom: 8px !important;
}

#footerLinks {
    order: 2 !important;
}

#footer a, #footerLinks a, .footer-links a, #opening a, #helpDesk a {
    display: block !important;
    color: #005A9C !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    text-decoration: underline !important;
    margin-top: 4px !important;
}

#footer a:hover, #footerLinks a:hover, #opening a:hover {
    color: #003366 !important;
}