/* ─────────────────────────────────────────────────────────────────────────
   SubGenius ViP — a child skin of Elastic.

   SCOPE, and it matters: ONE Roundcube install answers for eight mail
   domains on this box, including the client-facing wholesalehosting.net
   webmail. This skin is selected ONLY when HTTP_HOST is mail.subgenius.vip
   or webmail.subgenius.vip — see the per-host block in
   /etc/roundcube/config.inc.php. Every other host keeps stock Elastic.
   Do not set $config['skin'] outside that branch.

   Elastic itself is never edited: it is a package-owned symlink to
   /usr/share/roundcube/skins/elastic and gets replaced on upgrade. This
   file imports it and overrides on top, so an upgrade to roundcube-core
   carries through instead of clobbering the theme.

   Palette is taken from the existing subgenius.vip site so webmail reads as
   part of the same property rather than a bolted-on app.
   ───────────────────────────────────────────────────────────────────────── */

@import url("../../elastic/styles/styles.min.css");

:root {
	--sgv-ink:    #140d04;   /* page ground        */
	--sgv-raised: #1a1206;   /* card               */
	--sgv-well:   #0d0803;   /* input well         */
	--sgv-amber:  #ff9900;   /* primary accent     */
	--sgv-pale:   #ffcc66;   /* text on dark       */
	--sgv-dim:    #8a7a5f;   /* labels             */
	--sgv-faint:  #6b5c46;   /* footer             */
	--sgv-mono:   Consolas, Menlo, ui-monospace, SFMono-Regular, monospace;
}

/* ── login page ─────────────────────────────────────────────────────────
   Scoped to body.task-login so nothing here can reach the mail UI. */

body.task-login,
body.task-login #layout,
body.task-login #layout-content {
	background: var(--sgv-ink) !important;
}

/* Stock Roundcube logo out; monospace wordmark in. No image dependency —
   nothing to ship, nothing to break on upgrade. */
body.task-login #logo { display: none !important; }

body.task-login #login-form::before {
	content: "SUBGENIUS ViP\A W E B M A I L";
	white-space: pre;
	display: block;
	text-align: center;
	font: 700 21px/1.55 var(--sgv-mono);
	letter-spacing: .26em;
	color: var(--sgv-amber);
	margin: 0 0 22px;
	text-indent: .26em;          /* optical: cancel the trailing letterspace */
}

body.task-login #login-form {
	background: var(--sgv-raised) !important;
	border: 1px solid rgba(255, 153, 0, .32) !important;
	border-radius: 10px;
	padding: 28px 26px 22px !important;
	max-width: 400px;
	margin: 0 auto !important;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 18px 50px rgba(0, 0, 0, .55);
}

body.task-login label {
	color: var(--sgv-dim) !important;
	font: 600 11px/1.4 var(--sgv-mono) !important;
	letter-spacing: .14em;
	text-transform: uppercase;
}

body.task-login input.form-control,
body.task-login .propform input,
body.task-login select.form-control {
	background: var(--sgv-well) !important;
	color: var(--sgv-pale) !important;
	border: 1px solid rgba(255, 153, 0, .30) !important;
	border-radius: 6px !important;
	font-family: var(--sgv-mono) !important;
}

body.task-login input.form-control:focus,
body.task-login .propform input:focus {
	border-color: var(--sgv-amber) !important;
	box-shadow: 0 0 0 3px rgba(255, 153, 0, .18) !important;
	outline: none !important;
}

body.task-login input.form-control::placeholder { color: #5c4f3c !important; }

body.task-login button.mainaction,
body.task-login .buttons button,
body.task-login button[type="submit"] {
	background: var(--sgv-amber) !important;
	color: var(--sgv-ink) !important;
	border: 0 !important;
	border-radius: 6px !important;
	font: 700 13px var(--sgv-mono) !important;
	letter-spacing: .12em;
	text-transform: uppercase;
}

body.task-login button.mainaction:hover,
body.task-login .buttons button:hover,
body.task-login button[type="submit"]:hover {
	background: var(--sgv-pale) !important;
}

body.task-login #login-footer,
body.task-login #login-footer * {
	color: var(--sgv-faint) !important;
	font: 11px var(--sgv-mono) !important;
	letter-spacing: .1em;
}

body.task-login a { color: var(--sgv-amber) !important; }

/* Error / notice banners: keep them loud, just re-tinted. */
body.task-login .ui.alert {
	background: var(--sgv-raised) !important;
	border-color: rgba(255, 153, 0, .45) !important;
	color: var(--sgv-pale) !important;
	font-family: var(--sgv-mono) !important;
}

/* Login hint: people reach for a bare username, but Dovecot authenticates on the
   full address — this install serves eight mail domains, so the local part alone
   is ambiguous. Stated on the form rather than left to be discovered. */
body.task-login #login-form::after {
	content: "USE YOUR FULL EMAIL ADDRESS \2014 e.g. you@subgenius.vip";
	display: block;
	text-align: center;
	margin: 22px 0 2px;
	padding: 10px 12px;
	font: 700 13px/1.55 var(--sgv-mono);
	letter-spacing: .07em;
	color: #ffd27a;
	background: rgba(255, 153, 0, .10);
	border: 1px solid rgba(255, 153, 0, .55);
	border-radius: 6px;
	text-shadow: 0 0 12px rgba(255, 153, 0, .55);
}