/* -------------------------------------------------------------
   wts Login Suite – v1.0
   -------------------------------------------------------------
   • Works in light & dark admin colour schemes
   • WCAG-AA colour contrast for buttons & text
   • Fluid layout up to 420 px wide
----------------------------------------------------------------*/

/* =Variables
   ----------------------------------------------------------- */
:root {
	--wts-bg:            #ffffff;
	--wts-surface:       #f6f7f7;
	--wts-border:        #dcdfe5;
	--wts-radius:        6px;
	--wts-primary:       #0073aa; /* WP blue */
	--wts-primary-dark:  #005c8e;
	--wts-danger:        #be1212;
	--wts-success:       #008a20;
	--wts-font:          -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* Prevent browser dark mode from auto-adjusting form controls */
.wts-login-form input,
.wts-login-form textarea,
.wts-login-form select {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #dcdcdc;
}

.wts-login-form input::placeholder,
.wts-login-form textarea::placeholder {
    color: #888888;
}

/* Prevent browser dark mode from auto-adjusting form controls */
.wts-login-form {
    color-scheme: light;
}


/* Prevent browser dark mode from auto-adjusting form controls */
.wts-forgot-form input,
.wts-forgot-form textarea,
.wts-forgot-form select {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #dcdcdc;
}

.wts-forgot-form input::placeholder,
.wts-forgot-form textarea::placeholder {
    color: #888888;
}

/* Prevent browser dark mode from auto-adjusting form controls */
.wts-forgot-form {
    color-scheme: light;
}


/* Container (login + forgot) */
.wts-login-form,
.wts-forgot-form,
.wts-reset-form {
	box-sizing: border-box;
	max-width: 420px;
	padding: 2.5rem 2rem 2rem;
	margin: 2rem auto;
	background: var(--wts-surface);
	border: 1px solid var(--wts-border);
	border-radius: var(--wts-radius);
	font-family: var(--wts-font);
}

/* Headings */
.wts-login-form h2,
.wts-forgot-form h3 {
	margin: 0 0 1.25rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--wts-primary-dark);
	text-align: center;
}

/* Form fields */
.wts-login-form input[type="email"],
.wts-login-form input[type="password"],
.wts-forgot-form input[type="email"],
.wts-reset-form input[type="password"] {
	display: block;
	width: 100%;
	padding: 0.625rem 0.75rem;
	margin: 0 0 1rem;
	border: 1px solid var(--wts-border);
	border-radius: var(--wts-radius);
	background: var(--wts-bg);
	font: 400 16px/1.4 var(--wts-font);
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.wts-login-form input:focus,
.wts-forgot-form input:focus,
.wts-reset-form input:focus {
	outline: none;
	border-color: var(--wts-primary);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--wts-primary) 25%, transparent);
}

/* Buttons */
.wts-login-form button,
.wts-forgot-form button,
.wts-reset-form button {
	display: inline-block;
	width: 100%;
	padding: 0.7rem 1rem;
	border: none;
	border-radius: var(--wts-radius);
	background: var(--wts-primary);
	color: #fff;
	font: 600 16px/1 var(--wts-font);
	cursor: pointer;
	transition: background .15s ease-in-out;
}
.wts-login-form button:hover,
.wts-forgot-form button:hover,
.wts-reset-form button:hover {
	background: var(--wts-primary-dark);
}

/* Success & error notices */
.wts-error,
.wts-success {
	max-width: 420px;
	margin: 1rem auto;
	padding: 0.85rem 1rem;
	border-radius: var(--wts-radius);
	font: 600 14px/1.4 var(--wts-font);
}
.wts-error   { background: color-mix(in srgb, var(--wts-danger) 10%, #fff); color: var(--wts-danger); }
.wts-success { background: color-mix(in srgb, var(--wts-success) 10%, #fff); color: var(--wts-success); }

/* Forgot-password “panel” under login */
.wts-forgot-form {
	margin-top: -0.5rem;          /* visually tie it to the login card */
	padding-top: 1.25rem;
	text-align: center;
	background: transparent;
	border: none;
}
.wts-forgot-form h3 {
	font-size: 15px;
	margin-bottom: 0.75rem;
	color: inherit;
}

/* Responsive niceties */
@media (prefers-color-scheme: dark) {
	:root {
		--wts-bg:            #1c1d1f;
		--wts-surface:       #28292b;
		--wts-border:        #3b3d42;
		--wts-primary:       #0a84ff;  /* iOS blue – bright enough in dark mode */
		--wts-primary-dark:  #0066ce;
		--wts-danger:        #ff3b30;
		--wts-success:       #32d74b;
	}
}