/*************************************************************************/
/*       COMMON ITEMS REF                                                */
/*************************************************************************/
html {
	font-size: 0.875rem;
}
body {
	margin: 0px;
	background: var(--background);
	background-color: var(--background-backdrop);
	color: rgb(8,8,8);
	font-family: Calibri, sans-serif;

	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.content,
.content-section {
	margin: 0.5em;
	background-color: rgb(255, 255, 255);
    padding: 1em;
	border-radius: 0.25em;
	/*border: 2px solid gray;*/
}
img.logo {
	content: url("/public/logo.png")
}
.flex-row {
	display: flex;
	flex-direction: row;
}
.flex-column {
	display: flex;
	flex-direction: column;
}
label {
	margin-bottom: 0px;
}
div.input-field span.with-help-tooltip,
.with-help-tooltip {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25em;

    div[title] {
        font-size: 0.75em;
        color: var(--text-color-secondary);
        cursor: pointer;
    }
}

/*************************************************************************/
/*       LISTS MANAGER                                                   */
/*************************************************************************/

/*
 * The login page now picks up its background from the cookie-selected
 * color-scheme stylesheet via `background: var(--background)` in the body
 * rule above. The previous hardcoded `linear-gradient(#374756, #27333D)`
 * here was the Professional Blue gradient and clobbered every other
 * theme. Removed by Claude Opus 4.7 — 2026-04-27.
 */
div.content {
    border: none;
    margin: 0px;
    padding: 0px;
}

div.input-field {
    margin: 5px;
    float: center;
    display: flex;
    flex-direction: row;
    align-items: center;
}

div.input-field label {
    flex: 1 0 auto;
    margin-right: 0.25em;
    text-align: left;
}
div.input-field span {
    min-width: 80px;
    display: inline-block;
    text-align: left;
}

div.input-field input {
    float: right;
}

/*************************************************************************/

input[type=button] {
    width: 90px;
}

/*************************************************************************/
/*
 * Theme-aware login surfaces. Each theme's color-scheme stylesheet is
 * loaded ahead of this file (see login.pug), so the variables resolve
 * per-theme and the login card / inputs / buttons paint accordingly:
 *   Professional Blue → near-white card on the dark blue gradient.
 *   Vacation Bay      → lifted teal card on the brand Teal→Navy gradient.
 *   Dark Mode         → near-black card on the dark backdrop.
 * Reworked by Claude Opus 4.7 — 2026-04-27.
 */
/*************************************************************************/

div.login-box {
    margin-top: 25vh;
    width: 50vw;
    margin-left: 23vw;

    background-color: var(--background-primary);
    color: var(--text-color);
    padding: 2vw;
    border-top-right-radius: 0.25em;
    border-top-left-radius: 0.25em;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}
div.message-box {
    background-color: var(--background-primary);
    color: var(--text-color);
    width: 50vw;
    margin-left: 23vw;

    padding: 2vw;
    padding-top: 1vh;
    padding-bottom: 1vh;
    border-bottom-right-radius: 0.25em;
    border-bottom-left-radius: 0.25em;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
    border-top: 1px solid var(--background-secondary);
}

body.theme-professional-blue div.login-box input[type="text"],
body.theme-professional-blue div.login-box input[type="password"],
body.theme-vacation-bay div.login-box input[type="text"],
body.theme-vacation-bay div.login-box input[type="password"],
body.theme-professional-tpf div.login-box input[type="text"],
body.theme-professional-tpf div.login-box input[type="password"]
body.theme-dark-mode div.login-box input[type="text"],
body.theme-dark-mode div.login-box input[type="password"] {
    background-color: var(--background-secondary);
    color: var(--text-color);
    border: 1px solid var(--background-secondary-hover);
    border-radius: 0.25em;
    padding: 0.4em 0.6em;
    transition: border-color 0.15s, box-shadow 0.15s;
}
body.theme-professional-blue div.login-box input[type="text"]:focus,
body.theme-professional-blue div.login-box input[type="password"]:focus,
body.theme-vacation-bay div.login-box input[type="text"]:focus,
body.theme-vacation-bay div.login-box input[type="password"]:focus,
body.theme-professional-tpf div.login-box input[type="text"]:focus,
body.theme-professional-tpf div.login-box input[type="password"]:focus,
body.theme-dark-mode div.login-box input[type="text"]:focus,
body.theme-dark-mode div.login-box input[type="password"]:focus {
    outline: none;
    border-color: var(--color-1);
    box-shadow: 0 0 0 2px var(--color-1-hover);
}

body.theme-professional-blue div.login-box input[type="button"],
body.theme-vacation-bay div.login-box input[type="button"],
body.theme-professional-tpf div.login-box input[type="button"],
body.theme-dark-mode div.login-box input[type="button"] {
    background-color: var(--color-1);
    color: white;
    border: 1px solid var(--color-1);
    border-radius: 0.25em;
    padding: 0.4em 0;
    cursor: pointer;
    transition: background-color 0.15s;
}
body.theme-professional-blue div.login-box input[type="button"]:hover,
body.theme-vacation-bay div.login-box input[type="button"]:hover,
body.theme-professional-tpf div.login-box input[type="button"]:hover,
body.theme-dark-mode div.login-box input[type="button"]:hover {
    background-color: var(--color-1-hover);
    border-color: var(--color-1-hover);
}
body.theme-professional-blue div.login-box input[type="button"]:focus,
body.theme-vacation-bay div.login-box input[type="button"]:focus,
body.theme-professional-tpf div.login-box input[type="button"]:focus,
body.theme-dark-mode div.login-box input[type="button"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-1-hover);
}

div.login-section {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;

    align-items: center;
}

div.pick-database-list {
    background-color: white;
    border-color: black;
    width: 120px;
    border-width: 1px;
    border-style: solid;

    margin-left: calc(50% - 60px);
    margin-right: calc(50% - 60px);
}
div.pick-database-list p {
    margin: 2px;
}

/*************************************************************************/

div.hidden-options {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;

    margin-left: calc(50% - 90px);
    margin-right: calc(50% - 90px);
}

.login-logo {
    height:100px;
    width:221px;
    margin-bottom:30px;
}

.client-password-setup-login-section {
    .setup-portal-login-message {
        font-size: 1.25rem;
        color: #555;
    }
    .input-field span {
        min-width: 90px;
    }
}

/*************************************************************************/
/*       MOBILE ADJUSTMENTS                                              */
/*************************************************************************/
@media (max-width: 768px) {
    .login-section .with-help-tooltip > *[title] {
        display: none;
    }
    div.message-box,
    div.login-box {
        margin-left: 18vw;
        width: 60vw;
    }
}

@media (max-width: 620px) {
    .login-logo {
        height:68px;
        width:150px;
        margin-bottom:30px;
    }
}
/* Account recovery, inside the Options panel. Themed from the shared tokens only — this page
   loads all four colour schemes and picks one at runtime, so a hardcoded colour here is a colour
   that is wrong in three of them. */
.hidden-options .recovery-intro {
	font-weight: bold;
	margin: 4px 0 6px 0;
}

.hidden-options .recovery-note {
	font-size: 0.85em;
	margin: 6px 12px 0 12px;
	line-height: 1.35;
	color: var(--text-color);
}

.hidden-options .recovery-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 8px 12px 0 12px;
	font-size: 0.9em;
	text-align: left;
}

.hidden-options .recovery-check input {
	margin: 2px 0 0 0;
	/* The login box is narrow and this label wraps to two lines in it. Without the floor the
	   checkbox is squeezed by the wrapping text and lands under it. */
	flex: 0 0 auto;
	width: auto;
}

.hidden-options .recovery-check span {
	min-width: 0;
}

/* The sign-in fields are 100px, which suits a username and truncates an email address in the
   middle. This one gets the room the box has. */
#input-recovery-email {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}

#forgot-username-form .input-field label {
	flex: 0 0 auto;
}

#recovery-status {
	font-style: italic;
}