/*
    login_dark.css

    Dark mode for the login page. The user preference lives in
    userprofile.is_dark_mode, which is unknowable before login, so the
    logged-in app mirrors it into localStorage ('concerto_dark_mode') and an
    inline script in login.aspx applies the classes to <html> before first
    paint. Rules are scoped to html.dark-mode because the body does not exist
    when that script runs; Bootstrap components flip via data-bs-theme="dark"
    set on <html> at the same time.
*/

html.dark-mode,
html.dark-mode body {
    background-color: #111827;
    color: #e5e7eb;
    /* Lighter interactive-blue for hover/focus states in dark mode. Mirrors
       --link-hover in horizon_dark.css (the login page loads its own CSS and
       not horizon_dark.css, so the token is redeclared here). */
    --link-hover: #8bb9fe;
}

/* :not(.btn) so button-styled LinkButtons (e.g. the solid Login button)
   keep their own label colour. */
html.dark-mode a:not(.btn) {
    color: var(--link-hover);
}

/* login.css colours these var(--primary) #1929D6 - a deep blue that is
   fine on white but ~1.7:1 against the dark page. */
html.dark-mode .btn-link {
    color: var(--link-hover);
}

html.dark-mode .btn-link:hover {
    color: #b3d0fe;
}

html.dark-mode .form-control:focus {
    border-color: var(--link-hover) !important;
}

/* The Concerto and Bellrock logos ship in light and dark variants -
   login.aspx renders both and these rules pick one per mode. */
img.login-logo-dark {
    display: none;
}

html.dark-mode img.login-logo-dark {
    display: inline;
}

html.dark-mode img.login-logo-light {
    display: none;
}

/* Client logos (still configurable) are designed for a light surface - sit
   them on a light plinth rather than guessing at a per-client dark variant. */
html.dark-mode #imgClientLogo {
    padding: 0.75rem;
    border-radius: 0.5rem;
}

/* The "OR" separator masks its line with an opaque span background (see
   loginwithproviders.css). Match the dark page background so the line breaks
   cleanly instead of showing white behind the text. The base border-bottom is
   #000, near-invisible on the dark page, so lighten it to match the other
   dark borders in this file. */
html.dark-mode .divSeperatorH2 {
    border-bottom-color: #374151;
}

html.dark-mode .divSeperatorH2 span {
    background-color: #111827;
}

html.dark-mode div.cookieConsent {
    background-color: #1f2937;
    border-color: #374151;
    color: #d1d5db;
}

html.dark-mode div#div_cookie {
    color: #9ca3af;
}

html.dark-mode #autoRefreshCountdown {
    background-color: #1f2937;
    border-color: #374151;
}

html.dark-mode div.green {
    background-color: #10331a;
    border-color: #1d4d2b;
    color: #a3e3b5;
}

html.dark-mode .alert-warning {
    background-color: #26240f !important;
    color: #f3ecb3;
}

html.dark-mode .powered-by {
    color: #9ca3af;
}

html.dark-mode div.ann_image {
    background-color: #1f2937;
    border-color: #4b5563;
}

html.dark-mode .custom-scrollbar-css::-webkit-scrollbar-track {
    background: #1f2937;
}

html.dark-mode table#gv_announce table.tbl_announcement {
    background-color: #1f2937;
    color: #e5e7eb;
}

html.dark-mode table#gv_announce table.tbl_announcement tr.firstrow {
    background-color: #1e3a5f;
    color: #e5e7eb;
}

html.dark-mode table#gv_announce table.tbl_announcement tr.firstrow td.imgcol {
    background-color: #1f2937;
    border-right-color: #374151;
}