/* =============================================================
 * OYSI CI-Schrift — Plus Jakarta Sans (variabel 400-800)
 *
 * SELBST GEHOSTET, nicht von Google geladen: die Seite laeuft hinter einer
 * CSP (font-src) und soll beim Aufruf keine Drittanbieter kontaktieren.
 * Lizenz SIL OFL 1.1, Text liegt bei den Dateien (../fonts/OFL.txt).
 * Je Subset EINE Datei, die variable Achse `wght` deckt alle Schnitte ab
 * (27 KB + 22 KB statt fuenf Einzelschnitten).
 * ============================================================= */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;            /* variable Achse: ein File, alle Schnitte */
  font-display: swap;
  src: url("/assets/oysi_branding/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;            /* variable Achse: ein File, alle Schnitte */
  font-display: swap;
  src: url("/assets/oysi_branding/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* `html:root` statt `:root` — NICHT kosmetisch: frappes login.bundle.css wird
   NACH unserer Datei geladen und definiert --font-stack ein zweites Mal auf
   :root. Bei gleicher Spezifitaet gewinnt die spaetere Deklaration, unsere
   Schrift war damit wirkungslos (2026-08-07 im Browser gemessen: computed
   fontFamily begann mit "InterVariable"). `html:root` hat (0,1,1) und schlaegt
   `:root` (0,1,0). */
html:root {
  --font-stack: "Plus Jakarta Sans", "InterVariable", "Inter", -apple-system,
                BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                Arial, sans-serif;
}

/* =============================================================
 * OYSI Branding — Website & Login CSS
 * Split Layout: links fixed OYSI-Panel, rechts Form mit margin-left.
 * Keine Grid-Hacks, keine body::before + Grid Doppelrenderings.
 * ============================================================= */

:root {
  --oysi-gray-50:  #f8fafc;
  --oysi-gray-100: #f1f5f9;
  --oysi-gray-200: #e2e8f0;
  --oysi-gray-500: #64748b;
  --oysi-gray-600: #475569;
  --oysi-gray-700: #334155;
  --oysi-gray-900: #0f172a;

  --oysi-beige: #F0ECE6;

  /* --- OYSI Corporate Identity (identisch zu Desk, shipping, pricing) --- */
  --oysi-navy:        #0f1729;
  --oysi-navy-700:    #16223b;
  --oysi-navy-500:    #24304d;
  --oysi-teal:        #00d4aa;
  --oysi-teal-bright: #00e8bb;
  /* Einzige Teal-Variante fuer helle Flaechen: 4,9:1. Volles Teal hat gegen
     Weiss nur 1,9:1 und darf dort weder Text noch Linie tragen. */
  --oysi-teal-ink:      #00806f;
  --oysi-teal-ink-dark: #00655a;
  --oysi-line:        #d5d1cb;
  --oysi-line-strong: #c2bdb4;

  --primary:          var(--oysi-navy);
  --primary-color:    var(--oysi-navy);
  --primary-hover:    var(--oysi-navy-700);
  --text-on-primary:  #ffffff;
}

/* =============================================================
 * LOGIN-PAGE — Split Layout
 * ============================================================= */

body[data-path="login"] {
  margin: 0;
  /* 45vw Platz links für das fixed Brand-Panel */
  padding: 0 0 0 45vw;
  min-height: 100vh;
  /* CI-Schrift. Diese Zeile stand vorher hart auf "Inter" und hat --font-stack
     zwei Bloecke weiter oben ausgehebelt — die Website lief deshalb weiter in
     Inter, obwohl das Token korrekt gesetzt war. Am 2026-08-07 im Browser
     gemessen (computed fontFamily auf /login), nicht vermutet. */
  font-family: var(--font-stack);
  color: var(--oysi-gray-900);
  background: #ffffff;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Links — Fixed Brand-Panel mit Logo + Claim */
body[data-path="login"]::before {
  content: "OYSI ERP";
  position: fixed;
  top: 0;
  left: 0;
  width: 45vw;
  height: 100vh;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* WEISSES Logo. Vorher stand hier logo.svg — dessen Wortmarke ist mit
     #123f64 gefuellt und lag damit dunkelblau auf dunkelblauem Grund: das Logo
     war zwar da, aber praktisch unsichtbar (Screenshot 2026-08-07). Die weisse
     Fassung lag ungenutzt daneben. */
  background:
    radial-gradient(circle at 30% 22%, rgba(0,212,170,0.16) 0%, transparent 55%),
    radial-gradient(circle at 75% 85%, rgba(0,212,170,0.08) 0%, transparent 50%),
    linear-gradient(160deg, var(--oysi-navy-700) 0%, var(--oysi-navy) 55%, #0a1020 100%);
  background-image:
    url("/assets/oysi_branding/images/logo_weiss.svg"),
    radial-gradient(circle at 30% 22%, rgba(0,212,170,0.16) 0%, transparent 55%),
    linear-gradient(160deg, var(--oysi-navy-700) 0%, var(--oysi-navy) 55%, #0a1020 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center 30%, center, center;
  background-size: 168px 168px, cover, cover;
  padding-top: 15rem;
  color: #ffffff;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.2);
}

/* Claim unter dem "OYSI ERP" Text */
body[data-path="login"]::after {
  content: "Enterprise Resource Planning";
  position: fixed;
  top: calc(50% + 3.2rem);
  left: 0;
  width: 45vw;
  z-index: 2;
  text-align: center;
  /* Teal auf Navy = 9,2:1. Auf hellem Grund waere dieselbe Farbe 1,9:1 und
     damit unzulaessig — deshalb steht sie hier und nur hier. */
  color: var(--oysi-teal);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: var(--font-stack);
  pointer-events: none;
}

/* Rechts — Form-Bereich: NUR #page-login setzt width, keine kaskadierenden margins. */
body[data-path="login"] #page-login {
  width: 100%;
  max-width: 100%;
  padding: 2rem 0 !important;
  margin: 0 !important;
}

body[data-path="login"] main.container,
body[data-path="login"] .page-content-wrapper {
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 28rem !important;
  width: 100% !important;
}

body[data-path="login"] .page_content {
  padding: 0 !important;
  margin: 0 !important;
}

/* Form-Card */
body[data-path="login"] .for-login,
body[data-path="login"] .for-forgot,
body[data-path="login"] .for-signup,
body[data-path="login"] .for-email-login,
body[data-path="login"] .for-login-with-email-link {
  width: 100%;
  max-width: 22rem;
  padding: 2rem 1rem !important;
  background: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Mini-Logo in der Form weg (ist im Brand-Panel) */
body[data-path="login"] .for-login .page-card-head img,
body[data-path="login"] .for-login .app-logo,
body[data-path="login"] .page-card-head img.app-logo {
  display: none !important;
}

body[data-path="login"] .page-card-head {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding: 0;
  border: none;
  text-align: left;
}

body[data-path="login"] .page-card-head h4 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--oysi-gray-900);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}

/* Frappes englischer Untertitel ("Welcome! Please sign in to continue.") steht
   unuebersetzt direkt ueber unserem deutschen Satz — zwei Untertitel, einer in
   der falschen Sprache. Unserer bleibt, der andere geht. */
body[data-path="login"] .page-card-subtitle {
  display: none !important;
}

body[data-path="login"] .page-card-head::after {
  content: "Willkommen zurück. Melde dich mit deinem OYSI-Konto an.";
  font-size: 0.9rem;
  color: var(--oysi-gray-500);
  font-weight: 400;
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* Form-Inputs */
body[data-path="login"] .form-control {
  padding: 0.75rem 1rem !important;
  border: 1.5px solid var(--oysi-line) !important;
  border-radius: 10px !important;
  font-size: 0.95rem !important;
  background: var(--oysi-gray-50) !important;
  transition: all 120ms !important;
  height: auto !important;
}
body[data-path="login"] .form-control:focus {
  border-color: var(--oysi-teal-ink) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 170, 0.25) !important;
  outline: none !important;
}

/* Platz fuer das Feld-Symbol. Frappe legt es absolut 8px vom linken Rand
   (16px breit, also bis 24px); unser padding-left von 16px liess den Text
   genau darunter laufen — im Browser gemessen: Symbol 868–884, Textbeginn 876.
   Gilt nur fuer Felder, die tatsaechlich ein Symbol tragen. */
body[data-path="login"] .email-field .form-control,
body[data-path="login"] .password-field .form-control {
  padding-left: 2.5rem !important;
}

body[data-path="login"] .page-card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Primary-Button — OYSI Blue Gradient, prominent */
body[data-path="login"] .btn-login,
body[data-path="login"] .btn-primary {
  background: linear-gradient(180deg, var(--oysi-navy-700) 0%, var(--oysi-navy) 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 0.85rem 1.5rem !important;
  border-radius: 10px !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.01em;
  width: 100%;
  box-shadow:
    0 1px 2px rgba(15, 23, 41, 0.25),
    0 4px 12px -2px rgba(15, 23, 41, 0.22) !important;
  transition: all 150ms ease-in-out !important;
}
body[data-path="login"] .btn-login:hover,
body[data-path="login"] .btn-primary:hover {
  background: linear-gradient(180deg, var(--oysi-navy-500) 0%, var(--oysi-navy-700) 100%) !important;
  transform: translateY(-1px);
  box-shadow:
    0 2px 4px rgba(15, 23, 41, 0.28),
    0 8px 18px -3px rgba(0, 212, 170, 0.28) !important;
}

/* Sekundär-Button "Mit E-Mail-Link anmelden" */
body[data-path="login"] .btn-email-login,
body[data-path="login"] button[name="login-with-email-link"],
body[data-path="login"] .btn-secondary {
  background: #ffffff !important;
  border: 1.5px solid var(--oysi-line) !important;
  color: var(--oysi-gray-700) !important;
  font-weight: 500 !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 10px !important;
  width: 100%;
  transition: all 120ms !important;
}
body[data-path="login"] .btn-email-login:hover,
body[data-path="login"] button[name="login-with-email-link"]:hover,
body[data-path="login"] .btn-secondary:hover {
  border-color: var(--oysi-teal-ink) !important;
  color: var(--oysi-teal-ink-dark) !important;
  background: #f0faf7 !important;
}

body[data-path="login"] a {
  color: var(--oysi-teal-ink);
  font-weight: 500;
}
body[data-path="login"] a:hover {
  color: var(--oysi-teal-ink-dark);
  text-decoration: underline;
}

body[data-path="login"] .forgot-password-message,
body[data-path="login"] .sign-up-message {
  text-align: left;
  font-size: 0.875rem;
  color: var(--oysi-gray-500);
  margin-top: 0.5rem;
}

body[data-path="login"] .login-divider {
  text-align: center;
  color: var(--oysi-gray-500);
  font-size: 0.85rem;
  margin: 0.5rem 0;
  position: relative;
}

/* Footer unten — position:absolute damit er nicht den margin-left setup bricht */
body[data-path="login"] .footer,
body[data-path="login"] footer {
  position: absolute;
  bottom: 1rem;
  left: 45vw;
  right: 0;
  background: transparent;
  border: none;
  color: var(--oysi-gray-500);
  font-size: 0.75rem;
  text-align: center;
  z-index: 10;
}

/* Mobile — Brand-Panel zum Top-Header shrinken */
@media (max-width: 900px) {
  body[data-path="login"]::before {
    position: relative;
    width: 100%;
    height: 220px;
    padding-top: 5.5rem;
    font-size: 1.5rem;
    background-size: 70px 70px, cover, cover;
    background-position: center 1.5rem, center, center;
  }
  body[data-path="login"]::after {
    position: absolute;
    top: 175px;
    width: 100%;
    left: 0;
  }
  body[data-path="login"] {
    padding: 0 !important;
    display: block !important;
  }
  body[data-path="login"] main.container,
  body[data-path="login"] .page-content-wrapper {
    max-width: 28rem !important;
    padding: 1rem !important;
  }
  body[data-path="login"] .footer,
  body[data-path="login"] footer {
    position: relative;
    left: 0;
  }
}

/* =============================================================
 * Website/Portal — global touches
 * ============================================================= */

.website-footer,
.web-footer {
  border-top: 1px solid var(--oysi-gray-200);
}

.web-list-row a,
.portal-sidebar a {
  color: var(--oysi-teal-ink);
}
.web-list-row a:hover {
  color: var(--oysi-teal-ink-dark);
}