/* Cockpit — Anmeldung und Einmalcode.
   Login-Regeln und die Sechs-Kaestchen-Optik 1:1 aus dem Finanz-Dashboard
   uebernommen, damit sich beide Anwendungen gleich bedienen. Die Optik der
   Kaestchen stammt urspruenglich von oceon.io/ui/form-otp-code -- uebernommen
   wurde ausschliesslich das Aussehen, die Pruefung passiert auf dem Server. */

/* Login */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:100%;max-width:440px;background:var(--color-surface);border:1px solid var(--border);border-radius:var(--radius);padding:40px 36px}
.login-card .brand{margin-bottom:22px}
.login-card h1{font-size:19px;font-weight:600;margin-bottom:2px}
.field{margin-bottom:14px}
.field label{display:block;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.08em;font-size:10px;color:var(--color-text-muted);margin-bottom:6px}
.field input[type=email],.field input[type=password],.field input[type=text]{width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--border-strong);background:var(--color-surface-2);color:var(--color-text);font-family:'Space Grotesk',sans-serif;font-size:14px}
.field input:focus{outline:none;border-color:var(--color-accent-ring)}
.login-error{background:rgba(248,81,73,0.14);border:1px solid rgba(248,81,73,0.4);color:#ff7b72;padding:9px 12px;border-radius:9px;font-size:12.5px;margin-bottom:14px}
.remember{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--color-text-2);margin-bottom:16px}


/* Cloudagunt-Wortmarke auf den Anmeldeseiten — ersetzt Icon + Schriftzug. */
.brand-logo{height:42px;width:auto;max-width:88%;display:block}
.login-card .brand{display:flex;justify-content:center;margin-bottom:26px}

/* ── Einmalcode-Eingabe ────────────────────────────────────────────────────
   Optik uebernommen von oceon.io/ui/form-otp-code, Farben auf die Palette
   des Dashboards gezogen. Die Mechanik ist NICHT uebernommen: die Vorlage
   prueft den Code im Browser gegen einen fest verdrahteten Wert und sendet
   das Formular nie ab. Hier prueft der Server.
   ------------------------------------------------------------------------ */
.foc-root{
  --foc-blue:  59,130,246;    /* --color-accent  #3b82f6 */
  --foc-green: 63,185,80;     /* --color-ok      #3fb950 */
  --foc-red:   248,81,73;     /* --color-err     #f85149 */
  --foc-fg:    230,237,243;   /* --color-text    #e6edf3 */
  --foc-ease:  cubic-bezier(.2,.85,.25,1);
  box-sizing:border-box;
  color:rgba(var(--foc-fg),0.92);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
  width:100%;
  -webkit-font-smoothing:antialiased;
}
.foc-root *{ box-sizing:border-box; }

.foc-head{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.foc-eyebrow{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:650; color:rgba(var(--foc-fg),0.5);
}
.foc-title{
  margin:0; font-size:19px; font-weight:640;
  letter-spacing:-.012em; color:rgba(var(--foc-fg),0.96);
}
.foc-sub{
  margin:0; max-width:284px; font-size:13px; line-height:1.45;
  color:rgba(var(--foc-fg),0.6);
}

.foc-form{ display:flex; flex-direction:column; align-items:center; gap:15px; margin:0; width:100%; }

.foc-boxes{
  position:relative; display:flex; align-items:center;
  justify-content:center; gap:10px; padding:8px 4px;
}
.foc-divider{
  width:12px; height:2px; border-radius:2px;
  background:rgba(var(--foc-fg),0.2); flex:0 0 auto;
}

.foc-box{
  position:relative; z-index:1;
  width:50px; height:62px; flex:0 0 auto;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  border:1px solid rgba(255,255,255,0.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 7px 18px rgba(0,0,0,0.30);
  transition:border-color .28s var(--foc-ease), transform .34s var(--foc-ease),
             box-shadow .32s var(--foc-ease), background .32s var(--foc-ease);
}

.foc-input{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; margin:0; padding:0;
  background:transparent; border:0; outline:0;
  text-align:center;
  font-family:'JetBrains Mono',ui-monospace,"SFMono-Regular","Menlo",monospace;
  font-size:26px; font-weight:600;
  color:rgba(var(--foc-fg),0.96);
  caret-color:rgb(var(--foc-blue));
  border-radius:16px;
  transition:color .22s var(--foc-ease);
}
.foc-input::selection{ background:rgba(var(--foc-blue),0.35); }

.foc-box--filled{
  border-color:rgba(255,255,255,0.17);
  background:linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.028));
}

.foc-box:focus-within{
  border-color:rgba(var(--foc-blue),0.78);
  transform:translateY(-2px);
  background:linear-gradient(180deg, rgba(var(--foc-blue),0.15), rgba(var(--foc-blue),0.03));
  box-shadow:0 0 0 1px rgba(var(--foc-blue),0.45),
             0 0 24px rgba(var(--foc-blue),0.34),
             inset 0 1px 0 rgba(255,255,255,0.07);
}
.foc-box:has(.foc-input:focus-visible){
  box-shadow:0 0 0 2px rgba(var(--foc-blue),0.95),
             0 0 28px rgba(var(--foc-blue),0.42),
             inset 0 1px 0 rgba(255,255,255,0.07);
}

/* Falscher Code: der Server hat abgelehnt, Seite kam mit Fehler zurueck. */
.foc-shake .foc-box{
  border-color:rgba(var(--foc-red),0.62);
  background:linear-gradient(180deg, rgba(var(--foc-red),0.13), rgba(var(--foc-red),0.03));
  box-shadow:0 0 0 1px rgba(var(--foc-red),0.30), 0 7px 18px rgba(0,0,0,0.30);
}
.foc-shake .foc-input{ color:rgb(var(--foc-red)); }

/* Waehrend des Absendens stilllegen. */
.foc-busy{ opacity:.6; pointer-events:none; }

.foc-status{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:500;
  color:rgba(var(--foc-fg),0.62);
  transition:color .3s var(--foc-ease);
  text-align:center;
}
.foc-status-dot{
  width:7px; height:7px; border-radius:50%;
  background:rgba(var(--foc-fg),0.38); flex:0 0 auto;
  transition:background .3s var(--foc-ease), box-shadow .3s var(--foc-ease);
}
.foc-status--err{ color:rgba(var(--foc-red),0.95); }
.foc-status--err .foc-status-dot{ background:rgb(var(--foc-red)); box-shadow:0 0 10px rgba(var(--foc-red),0.7); }

@media (prefers-reduced-motion: no-preference){
  .foc-box--tap .foc-input{ animation:foc-digit .34s cubic-bezier(.2,1.3,.3,1); }
  @keyframes foc-digit{
    0%{ transform:scale(.45); opacity:0; }
    60%{ transform:scale(1.14); opacity:1; }
    100%{ transform:scale(1); opacity:1; }
  }
  .foc-shake .foc-boxes{ animation:foc-shake .52s cubic-bezier(.36,.07,.19,.97); }
  @keyframes foc-shake{
    10%{ transform:translateX(-7px); } 22%{ transform:translateX(6px); }
    34%{ transform:translateX(-6px); } 46%{ transform:translateX(5px); }
    58%{ transform:translateX(-4px); } 70%{ transform:translateX(3px); }
    82%{ transform:translateX(-2px); } 100%{ transform:translateX(0); }
  }
}

@media (prefers-reduced-motion: reduce){
  .foc-box, .foc-input{ transition-duration:.01ms !important; animation:none !important; }
}

/* Sechs Kaestchen a 50px passen auf schmalen Displays nicht nebeneinander. */
@media (max-width:400px){
  .foc-boxes{ gap:6px; }
  .foc-box{ width:44px; height:56px; border-radius:13px; }
  .foc-input{ font-size:22px; border-radius:13px; }
  .foc-divider{ width:8px; }
}

/* Mehrere Tags pro Beleg: kleiner Abstand, Umbruch erlaubt. */
.ltable td .pill{margin:1px 3px 1px 0}