/*
 * StackVox skin — login page (V2 Editorial)
 * Inherits: elastic
 * Active only on /?_task=login (template login.html)
 *
 * Pack source: docs/marketing/blueprints/2026-05-01-roundcube-login/login/v2-editorial.html
 */

:root {
  /* Dark theme (default) */
  --bg-editorial: #1a1a1a;
  --bg-form: #0f0f0f;
  --noir-1: #1a1a1a;
  --noir-2: #212121;
  --fg-1: #f5f5f4;
  --fg-2: #cfcfcf;
  --fg-3: #9a9a9a;
  --fg-4: #6b6b6b;
  --fg-5: #4a4a4a;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --violet: #6d28d9;
  --violet-soft: #9b7dbd;
  --quote-mark: #9b7dbd;
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Light theme — papier crème chaud (Moleskine), encre noire, violet tranché */
[data-theme="light"] {
  --bg-editorial: #e8dcc0;     /* papier crème vraiment saturé (Moleskine vintage) */
  --bg-form: #ffffff;          /* blanc pur côté formulaire (concentration) */
  --noir-1: #e8dcc0;
  --noir-2: #ddccaa;
  --fg-1: #1a1a1a;             /* encre noire */
  --fg-2: #2a2a2a;
  --fg-3: #3a3a3a;             /* texte secondaire vraiment lisible */
  --fg-4: #3a3a3a;
  --fg-5: #5a5a5a;
  --border: rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.20);
  --violet: #5b21b6;           /* violet tech profond pour focus/CTA */
  --violet-soft: #5b21b6;      /* violet tranché sur crème (plus de fondu) */
  --quote-mark: #5b21b6;
}

/* Smooth transition between themes */
body.login-stackvox,
body.login-stackvox * {
  transition: background-color 280ms var(--ease, cubic-bezier(0.2, 0, 0, 1)),
              color 280ms var(--ease, cubic-bezier(0.2, 0, 0, 1)),
              border-color 280ms var(--ease, cubic-bezier(0.2, 0, 0, 1));
}

/* Reset Roundcube/Bootstrap chrome on login page */
body.login-stackvox {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--noir-1) !important;
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.login-stackvox * { box-sizing: border-box; }

/* Hide Roundcube's auto-injected elements we don't need */
body.login-stackvox #layout,
body.login-stackvox #layout-content,
body.login-stackvox #layout-menu,
body.login-stackvox #logo,
body.login-stackvox #login-footer,
body.login-stackvox .voice {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* === LAYOUT === */
.frame {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
}

/* === LEFT: editorial column === */
.editorial {
  position: relative;
  padding: 56px 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--border);
}
.editorial::before {
  content: '';
  position: absolute;
  top: 56px; bottom: 56px; left: 32px;
  width: 1px;
  background: var(--border);
}

.masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.masthead .mark {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-3);
}
.masthead .mark .vio { color: var(--violet-soft); }
.masthead .issue {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-5);
}

.hero { margin: 0; padding: 64px 0 32px; max-width: 540px; }
.hero .kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--violet-soft);
  margin-bottom: 32px;
  display: flex; align-items: center; gap: 12px;
}
.hero .kicker::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--violet-soft);
}
.hero h1 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin: 0;
}
.hero h1 .amp { color: var(--violet-soft); font-style: italic; }
.hero h1 .initial { color: var(--violet-soft); }

.hero blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.45;
  color: var(--fg-2);
  margin: 40px 0 0;
  padding: 0;
  max-width: 460px;
}
.hero blockquote::before { content: '“'; color: var(--violet-soft); margin-right: 4px; }
.hero blockquote::after { content: '”'; color: var(--violet-soft); margin-left: 2px; }

.hero cite {
  display: block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-4);
}

.colophon {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-4);
  letter-spacing: 0.04em;
  gap: 32px;
}
.colophon .l, .colophon .r { display: flex; flex-direction: column; gap: 4px; }
.colophon .r { text-align: right; }
.colophon strong { color: var(--fg-2); font-weight: 500; }

/* === RIGHT: form column === */
.form-col {
  background: var(--bg-form);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px 64px;
  position: relative;
  min-height: 100vh;
}

.topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.topnav .status {
  display: flex; align-items: center; gap: 8px;
  color: var(--fg-3);
}
.topnav .status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #6ba368;
  box-shadow: 0 0 8px rgba(107, 163, 104, 0.5);
}

/* Theme toggle button — discret, top-right de form-col */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--fg-3);
  transition: all 200ms var(--ease);
  font-size: 14px;
  line-height: 1;
}
.theme-toggle:hover {
  border-color: var(--violet-soft);
  color: var(--fg-1);
  transform: rotate(20deg);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 4px;
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { transition: opacity 200ms var(--ease); }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: inline; }
[data-theme="light"] .theme-toggle .icon-sun { display: inline; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
:root:not([data-theme]) .theme-toggle .icon-sun { display: none; }
:root:not([data-theme]) .theme-toggle .icon-moon { display: inline; }

.form-wrap {
  max-width: 380px;
  width: 100%;
  margin: auto 0;
}
.form-wrap .salut {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-4);
  margin: 0 0 32px;
}
.form-wrap .salut .vio { color: var(--violet-soft); }

.signature {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-5);
  text-align: right;
}

/* === ROUNDCUBE FORM (loginform object) — restyle === */
/* Roundcube generates: <table><tbody><tr><td.title><label></td><td.input><input></td></tr>...</tbody></table>
   <p.formbuttons><button.button.mainaction.submit>Login</button></p>                              */

#login-form,
form#login-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
}

#login-form table {
  width: 100%;
  border-collapse: collapse;
  display: block;
}
#login-form tbody { display: block; width: 100%; }
#login-form tr {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
#login-form td {
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  vertical-align: baseline;
}
#login-form td.title {
  width: auto;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-3);
}
#login-form td.title label {
  margin: 0;
  font-weight: 400;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
#login-form td.input {
  position: relative;
  width: 100%;
}

/* Inputs */
#login-form input[type="text"],
#login-form input[type="email"],
#login-form input[type="password"],
#login-form .form-control,
#rcmloginuser,
#rcmloginpwd {
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-strong) !important;
  border-radius: 0 !important;
  outline: 0 !important;
  color: var(--fg-1) !important;
  font-family: var(--font-sans) !important;
  font-size: 18px !important;
  padding: 12px 0 !important;
  font-weight: 400;
  box-shadow: none !important;
  transition: border-color 200ms var(--ease);
}
#login-form input::placeholder,
#rcmloginuser::placeholder,
#rcmloginpwd::placeholder {
  color: var(--fg-5);
  font-style: italic;
  font-family: var(--font-serif);
  font-size: 18px;
}
#login-form input:focus,
#rcmloginuser:focus,
#rcmloginpwd:focus {
  border-bottom-color: var(--violet) !important;
  box-shadow: none !important;
}
#login-form input::selection { background: var(--violet); color: #fff; }

/* Reveal button (injected via JS) */
.reveal {
  position: absolute;
  right: 0;
  bottom: 12px;
  background: transparent;
  border: 0;
  color: var(--fg-4);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  padding: 8px 0 8px 12px;
  transition: color 200ms var(--ease);
}
.reveal:hover { color: var(--fg-1); }

/* Submit button */
#login-form .formbuttons,
#login-form p.formbuttons {
  margin: 16px 0 0;
  padding: 0;
}
#login-form button[type="submit"],
#rcmloginsubmit,
#login-form .button.mainaction {
  background: transparent;
  color: var(--fg-1) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 999px !important;
  padding: 14px 32px !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 200ms var(--ease);
  box-shadow: none !important;
}
#login-form button[type="submit"]::before,
#rcmloginsubmit::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--violet-soft);
  transition: all 200ms var(--ease);
}
#login-form button[type="submit"]:hover,
#rcmloginsubmit:hover {
  border-color: var(--violet-soft) !important;
  color: #fff !important;
  padding-right: 36px !important;
}
#login-form button[type="submit"]:hover::before,
#rcmloginsubmit:hover::before {
  background: var(--violet);
  box-shadow: 0 0 12px var(--violet);
}
#login-form button[type="submit"]:focus-visible,
#rcmloginsubmit:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 4px;
}

/* === Roundcube messagestack (errors) === */
body.login-stackvox #messagestack {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 999;
  max-width: 380px;
}
body.login-stackvox #messagestack > div {
  background: rgba(180, 40, 60, 0.12) !important;
  border: 1px solid rgba(180, 40, 60, 0.35) !important;
  color: #f5b3bf !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.04em;
  padding: 12px 16px !important;
  margin-bottom: 8px !important;
  border-radius: 4px !important;
}

/* === Responsive === */
@media (max-width: 880px) {
  .frame { grid-template-columns: 1fr; }
  .editorial {
    padding: 40px 32px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .editorial::before { display: none; }
  .form-col {
    padding: 40px 32px;
    min-height: auto;
  }
  .topnav {
    margin-bottom: 32px;
    justify-content: flex-start;
  }
  .hero { padding: 32px 0 16px; }
  .hero blockquote { font-size: 18px; }
  .signature { text-align: left; margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
  }
}

/* === Bouton SSO StackVox — pill stylé violet (dark+light) === */
#login-form .oauthlogin {
  margin-top: 20px !important;
  text-align: center;
}
#login-form a.button.oauth.authentik {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 28px !important;
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-soft) 100%) !important;
  color: #ffffff !important;
  border: 1px solid var(--violet) !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: all 200ms var(--ease);
  box-shadow: 0 2px 14px rgba(109, 40, 217, 0.25);
  position: relative;
  overflow: hidden;
}
#login-form a.button.oauth.authentik::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
  transition: all 200ms var(--ease);
}
/* Subtle shimmer effect on hover */
#login-form a.button.oauth.authentik::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 600ms var(--ease);
}
#login-form a.button.oauth.authentik:hover {
  border-color: var(--violet-soft) !important;
  padding-right: 32px !important;
  box-shadow: 0 4px 22px rgba(109, 40, 217, 0.5);
  transform: translateY(-1px);
}
#login-form a.button.oauth.authentik:hover::before {
  box-shadow: 0 0 14px rgba(255, 255, 255, 1);
}
#login-form a.button.oauth.authentik:hover::after {
  left: 100%;
}
#login-form a.button.oauth.authentik:active {
  transform: translateY(0);
  box-shadow: 0 1px 8px rgba(109, 40, 217, 0.3);
}
#login-form a.button.oauth.authentik:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 4px;
}

/* Light mode adjustments : gradient un peu plus opaque + shadow réduit */
[data-theme="light"] #login-form a.button.oauth.authentik {
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet) 100%) !important;
  box-shadow: 0 2px 12px rgba(91, 33, 182, 0.30);
}
[data-theme="light"] #login-form a.button.oauth.authentik:hover {
  background: linear-gradient(135deg, var(--violet) 0%, #7c3aed 100%) !important;
  box-shadow: 0 4px 20px rgba(91, 33, 182, 0.5);
}

/* === Align CONNEXION + CONNEXION StackVox SSO : same size + left alignement === */
#login-form .formbuttons,
#login-form .oauthlogin {
  text-align: left !important;
  margin-top: 16px !important;
}
#login-form button[type="submit"],
#login-form a.button.oauth.authentik {
  min-width: 320px !important;
  justify-content: flex-start !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
/* Hover : on garde l'extra padding-right pour le shimmer, mais on conserve min-width */
#login-form button[type="submit"]:hover,
#login-form a.button.oauth.authentik:hover {
  padding-right: 28px !important;
}

/* === Override : center contenu des chips au lieu de flex-start === */
#login-form button[type="submit"],
#login-form a.button.oauth.authentik {
  justify-content: center !important;
}

/* === Replace texte bouton login : "Connexion · mot de passe" === */
#login-form #rcmloginsubmit {
  font-size: 0 !important;
  line-height: 0;
}
#login-form #rcmloginsubmit::after {
  content: 'Connexion · mot de passe';
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  line-height: normal;
}