/* Bridge vers tokens.css — les variables --login-* sont derivees des tokens */
:root {
      --purple:      var(--color-primary);
      --purple-dark: var(--color-primary-hover);
      --teal:        var(--color-success);
      --gold:        var(--color-warning);

      --login-bg:          var(--color-bg);
      --login-glow-purple: var(--color-primary-soft);
      --login-glow-teal:   var(--color-success-bg);
      --login-card-bg:     var(--color-card-bg);
      --login-card-border: var(--color-border);
      --login-card-shadow: var(--shadow-xl);
      --login-text:        var(--color-text-strong);
      --login-text-sub:    var(--color-text-muted);
      --login-text-mid:    var(--color-text-muted);
      --login-text-soft:   var(--color-text-body);
      --login-text-strong: var(--color-text-strong);
      --login-text-faint:  var(--color-text-faint);
      --login-text-muted:  var(--color-text-faint);
      --login-text-dim:    var(--color-text-faint);
      --login-input-bg:    var(--color-input-bg);
      --login-input-border:var(--color-input-border);
      --login-input-focus: var(--color-primary-soft);
      --login-divider:     var(--color-divider);
      --login-kc-bg:       transparent;
      --login-kc-hover:    rgba(232,96,15,0.08);
      --login-email-bg:    var(--color-primary-soft);
      --login-email-border:var(--color-border-strong);
      --login-error-bg:    var(--color-danger-bg);
      --login-error-border:rgba(239,68,68,0.25);
      --login-error-text:  var(--color-danger);
      --login-back-hover:  var(--color-chip-bg);
      --login-logo-shadow: drop-shadow(0 4px 16px rgba(123,92,196,0.4));
      --login-toggle-bg:   var(--color-chip-bg);
      --login-toggle-hover:var(--color-sidebar-hover-bg);
      --login-toggle-text: var(--color-text-faint);
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: var(--font-sans);
      background: var(--login-bg);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s;
    }

    body::before {
      content: '';
      position: fixed;
      top: -150px; left: -150px;
      width: 500px; height: 500px;
      background: radial-gradient(circle, var(--login-glow-purple) 0%, transparent 70%);
      pointer-events: none;
    }
    body::after {
      content: '';
      position: fixed;
      bottom: -100px; right: -100px;
      width: 400px; height: 400px;
      background: radial-gradient(circle, var(--login-glow-teal) 0%, transparent 70%);
      pointer-events: none;
    }

    .login-card {
      background: var(--login-card-bg);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid var(--login-card-border);
      border-radius: 24px;
      padding: 44px 44px 36px;
      width: 100%;
      max-width: 420px;
      box-shadow: var(--login-card-shadow);
      position: relative;
      z-index: 1;
      transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
    }
    /* Card translucide en dark pour effet frosted glass (visible dans les mockups) */
    [data-theme*="-dark"] .login-card {
      background: rgba(255,255,255,0.04);
      border-color: rgba(255,255,255,0.08);
      box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
    }

    .logo-wrap {
      display: flex;
      justify-content: center;
      margin-bottom: 24px;
    }
    .logo-wrap img {
      width: 68px; height: 68px;
      object-fit: contain;
      filter: var(--login-logo-shadow);
    }

    h1 {
      color: var(--login-text);
      text-align: center;
      font-size: 21px;
      font-weight: 700;
      letter-spacing: -0.3px;
      margin-bottom: 5px;
      transition: color 0.3s;
    }

    .subtitle {
      color: var(--login-text-sub);
      text-align: center;
      font-size: 13px;
      margin-bottom: 28px;
      transition: color 0.3s;
    }

    .color-bar {
      display: flex;
      gap: 6px;
      justify-content: center;
      margin-bottom: 28px;
    }
    .color-bar span { height: 3px; border-radius: 2px; }
    .cb-purple { width: 36px; background: var(--purple); }
    .cb-teal   { width: 22px; background: var(--teal); }
    .cb-gold   { width: 14px; background: var(--gold); }

    .error-box {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--login-error-bg);
      border: 1px solid var(--login-error-border);
      color: var(--login-error-text);
      padding: 10px 14px;
      border-radius: 10px;
      font-size: 13px;
      margin-bottom: 18px;
      transition: background 0.3s, border-color 0.3s, color 0.3s;
    }

    .field { margin-bottom: 16px; }

    label {
      display: block;
      color: var(--login-text-mid);
      font-size: 12.5px;
      font-weight: 500;
      margin-bottom: 7px;
      letter-spacing: 0.02em;
      transition: color 0.3s;
    }

    input {
      width: 100%;
      padding: 11px 14px;
      background: var(--login-input-bg);
      border: 1px solid var(--login-input-border);
      border-radius: 10px;
      color: var(--login-text);
      font-family: var(--font-sans);
      font-size: 14px;
      outline: none;
      transition: border-color 0.2s, background 0.2s, color 0.3s;
    }
    input:focus {
      border-color: var(--purple);
      background: var(--login-input-focus);
    }
    input::placeholder { color: var(--login-text-dim); }

    /* Primary button */
    .btn-primary {
      width: 100%;
      padding: 13px;
      margin-top: 6px;
      background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%);
      color: white;
      border: none;
      border-radius: 10px;
      font-family: var(--font-sans);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.15s;
      box-shadow: var(--shadow-lg);
      letter-spacing: 0.02em;
    }
    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-xl);
    }
    .btn-primary:active { transform: translateY(0); }

    /* Divider */
    .divider {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 20px 0;
    }
    .divider-line {
      flex: 1;
      height: 1px;
      background: var(--login-divider);
    }
    .divider-text {
      color: var(--login-text-dim);
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      white-space: nowrap;
      transition: color 0.3s;
    }

    /* Keycloak button */
    .btn-keycloak {
      width: 100%;
      padding: 12px 16px;
      background: var(--login-kc-bg);
      border: 1px solid rgba(232,96,15,0.3);
      border-radius: 10px;
      color: var(--login-text-soft);
      font-family: var(--font-sans);
      font-size: 13.5px;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      text-decoration: none;
      transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .btn-keycloak:hover {
      background: var(--login-kc-hover);
      border-color: rgba(232,96,15,0.55);
      color: var(--login-text);
      box-shadow: 0 4px 16px rgba(232,96,15,0.15);
    }
    .btn-keycloak .kc-logo {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }
    .btn-keycloak .kc-badge {
      font-size: 9px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      padding: 2px 6px;
      border-radius: 4px;
      background: rgba(232,96,15,0.2);
      color: #F97316;
      margin-left: auto;
    }

    /* Role pills */
    .roles-hint {
      margin-top: 22px;
      display: flex;
      gap: 6px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .role-pill {
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.04em;
    }
    .rp-admin    { background: rgba(123,92,196,0.15); color: #A080E0; border: 1px solid rgba(123,92,196,0.2); }
    .rp-cn       { background: rgba(59,130,246,0.12); color: #60A5FA; border: 1px solid rgba(59,130,246,0.2); }
    .rp-sales    { background: rgba(23,181,160,0.12); color: #2EC9B3; border: 1px solid rgba(23,181,160,0.2); }
    .rp-am       { background: rgba(16,185,129,0.12); color: #34D399; border: 1px solid rgba(16,185,129,0.2); }
    .rp-customer { background: rgba(245,168,32,0.12); color: #F5A820; border: 1px solid rgba(245,168,32,0.2); }

    .footer {
      margin-top: 24px;
      text-align: center;
      color: var(--login-text-faint);
      font-size: 11px;
      transition: color 0.3s;
    }

    /* ── Two-step login ── */
    #loginStep1, #loginStep2 {
      animation: stepIn 0.2s ease;
    }
    @keyframes stepIn {
      from { opacity: 0; transform: translateY(5px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .step-error {
      background: var(--login-error-bg);
      border: 1px solid var(--login-error-border);
      color: var(--login-error-text);
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 12.5px;
      margin-top: -6px;
      margin-bottom: 12px;
      transition: background 0.3s, border-color 0.3s, color 0.3s;
    }

    .email-confirmed {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--login-email-bg);
      border: 1px solid var(--login-email-border);
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 13px;
      color: var(--login-text-soft);
      transition: background 0.3s, border-color 0.3s, color 0.3s;
    }
    .email-confirmed span:first-child { font-size: 15px; flex-shrink: 0; }
    .email-confirmed span:nth-child(2) {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--login-text-strong);
      font-weight: 500;
    }

    .back-btn {
      background: transparent;
      border: none;
      color: var(--login-text-muted);
      font-family: var(--font-sans);
      font-size: 11.5px;
      font-weight: 500;
      cursor: pointer;
      padding: 2px 6px;
      border-radius: 4px;
      transition: color 0.15s, background 0.15s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .back-btn:hover {
      color: var(--login-text-soft);
      background: var(--login-back-hover);
    }

    /* ── Theme toggle button ── */
    .theme-toggle {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 34px;
      height: 34px;
      border: none;
      border-radius: 10px;
      background: var(--login-toggle-bg);
      color: var(--login-toggle-text);
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s, color 0.2s, transform 0.2s;
      z-index: 2;
      line-height: 1;
    }
    .theme-toggle:hover {
      background: var(--login-toggle-hover);
      color: var(--login-text-mid);
      transform: scale(1.08);
    }