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

/* ── Nobody Workz Branding (2026-08-08) ─────────────────────────────────
   Skin 'nbw' erweitert elastic; hier nur Farb-/Marken-Overrides.
   Palette wie Portal/Website: Brand #008bc2, Dark-Navy #111920/#161e28. */


/* Primaer-Buttons ueberall: NBW-Blau. */
.btn-primary, button.mainaction, .form-buttons .mainaction {
  background: #008bc2 !important; border-color: #008bc2 !important;
}
.btn-primary:hover, button.mainaction:hover { background: #006892 !important; border-color: #006892 !important; }

/* App: linke Task-Leiste in NBW-Navy, aktive Eintraege Brand-Blau. */
#layout-menu { background: #111920 !important; }
#layout-menu #taskmenu a { color: #9fb3c8; }
#layout-menu #taskmenu a.selected, #layout-menu #taskmenu a:hover { color: #fff; background: #008bc2 !important; }

/* Listen-/Fokus-Akzente. */
a { color: #008bc2; }
a:hover { color: #006892; }
.listing li.selected > a, .listing tr.selected td { background-color: rgba(0,139,194,.14) !important; }
#messagelist tr.selected td { background-color: rgba(0,139,194,.16) !important; }
input.form-control:focus { border-color: #008bc2 !important; box-shadow: 0 0 0 .2rem rgba(0,139,194,.25) !important; }

/* ── Vertiefung (2026-08-08, Runde 2): Farben wirklich ueberall ───────── */

/* Kopfzeilen/Toolbar: Icon- und Hover-Akzente. */
.toolbar a.button:not(.disabled):hover, #layout-content .header a.button:not(.disabled):hover { color: #008bc2; }
.searchbar form { border-color: #2c3949; }
.searchbar form.focused, .searchbar form:focus-within { border-color: #008bc2 !important; box-shadow: 0 0 0 .15rem rgba(0,139,194,.2); }

/* Badges, ungelesen-Zaehler, Auswahl-Haekchen. */
.badge-primary, span.badge.bg-primary { background: #008bc2 !important; }
.listing li > a .badge { background: #008bc2; }
#messagelist tr.unread span.subject { color: #0b1524; }

/* Formulare: Checkboxen/Switches/Selects in Brand-Blau. */
.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked { background-color: #008bc2 !important; border-color: #008bc2 !important; }
input.icon-checkbox:checked + label { color: #008bc2 !important; }
select.form-control:focus, textarea.form-control:focus { border-color: #008bc2 !important; box-shadow: 0 0 0 .2rem rgba(0,139,194,.2) !important; }

/* Quota-Anzeige + Ladebalken. */
#quotadisplay .bar .value, .quota_text_high, .progress-bar { background-color: #008bc2 !important; }

/* Dialoge. */
.ui-dialog .ui-dialog-titlebar { border-bottom-color: #008bc2; }
.ui-dialog .mainaction { background: #008bc2 !important; border-color: #008bc2 !important; }

/* Dark-Mode der App: Roundcube-Dunkelgrau -> NBW-Navy-Flaechen. */
html.dark-mode body { background-color: #111920; }
html.dark-mode #layout-list, html.dark-mode #layout-content,
html.dark-mode #layout-sidebar, html.dark-mode .ui-dialog,
html.dark-mode .popover, html.dark-mode .menu-content { background-color: #161e28 !important; }
html.dark-mode #layout-list .header, html.dark-mode #layout-content .header,
html.dark-mode #layout-sidebar .header { background-color: #111920 !important; border-color: #232d3b !important; }
html.dark-mode .listing li > a, html.dark-mode #messagelist td { border-color: #232d3b; }
html.dark-mode .listing li.selected > a, html.dark-mode #messagelist tr.selected td { background-color: rgba(0,139,194,.22) !important; }
html.dark-mode input.form-control, html.dark-mode select.form-control, html.dark-mode textarea.form-control {
  background-color: #111920 !important; border-color: #2c3949 !important; color: #e8f0f7 !important; }
html.dark-mode .searchbar form { background: #111920; }
html.dark-mode a { color: #45b4dc; }
html.dark-mode a:hover { color: #6bc4e4; }

/* Untere Sidebar-Ecke (Dark/Light-Mode, About, Logout): elastic legt dort
   #2f3a3f drueber — auf NBW-Navy ziehen, mit feiner Trennlinie. */
#layout-menu .special-buttons { background-color: #0d141b !important; border-top: 1px solid #232d3b; }
#layout-menu .special-buttons a { color: #9fb3c8; }
#layout-menu .special-buttons a:hover { color: #fff; }

/* Untere Sidebar-Ecke (Heller Modus/Über/Abmelden) auch im DARK-Mode auf
   NBW-Navy statt Elastic-Grau (2026-08-08). Elastic setzt hier
   html.dark-mode ....special-buttons{background:transparent!important} plus
   graue Button-Backgrounds (#21292c) — beides mit hoeherer Spezifitaet.
   Deshalb hier mit html.dark-mode-Prefix + !important dagegen. */
#layout-menu .special-buttons,
html.dark-mode #layout-menu .special-buttons {
  background-color: #111920 !important;
  border-top: 1px solid #232d3b;
}
#layout-menu .special-buttons a:not(:focus),
html.dark-mode #layout-menu .special-buttons a:not(:focus) {
  background: transparent !important;
  color: #9fb3c8 !important;
}
#layout-menu .special-buttons a:hover,
html.dark-mode #layout-menu .special-buttons a:hover {
  background: #008bc2 !important;
  color: #fff !important;
}

/* Aktiver/fokussierter Sidebar-Button unten: Brand-Blau statt Elastic-Grau. */
#layout-menu .special-buttons a:focus,
#layout-menu .special-buttons a:active,
#layout-menu .special-buttons a.active,
#layout-menu .special-buttons a.selected,
html.dark-mode #layout-menu .special-buttons a:focus,
html.dark-mode #layout-menu .special-buttons a:active,
html.dark-mode #layout-menu .special-buttons a.active,
html.dark-mode #layout-menu .special-buttons a.selected {
  background: #008bc2 !important;
  color: #fff !important;
}

/* ── Login-Screen auf NBW-Niveau (2026-08-08) ─────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════
   Login — Werkstatt-Sprache (2026-09-14)
   Gleiche Bausteine wie das Kundenportal: Navy-Poster #0a2040 mit Riso-
   Bild im Rahmen, Eyebrow mit Farbstrich, Syne-Ueberschrift, Fakten mit
   Raute, Formular auf dunkler Flaeche mit Akzent #45b4dc. Keine Verlaeufe,
   keine Leuchtkugeln, keine Animation. Nur der Login — die App bleibt.
   ══════════════════════════════════════════════════════════════════════ */
@font-face { font-family: "Syne"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/syne-700.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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Syne"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/syne-ext-700.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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; font-display: swap; src: url("../fonts/jakarta-400.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jakarta-500.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/jakarta-600.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/mono-500.woff2") format("woff2"); }

body.task-login {
  --nw-canvas: #060a0e;
  --nw-navy: #0a2040;
  --nw-panel: #0f1620;
  --nw-cream: #f4ead6;
  --nw-cream-78: rgba(244,234,214,.78);
  --nw-cream-60: rgba(244,234,214,.6);
  --nw-line: rgba(244,234,214,.16);
  --nw-line-2: rgba(244,234,214,.32);
  --nw-accent: #45b4dc;
  --nw-orange: #ff8a3d;
  --nw-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nw-display: "Syne", var(--nw-sans);
  --nw-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--nw-canvas) !important;
  font-family: var(--nw-sans);
  color: var(--nw-cream);
}
body.task-login #layout, body.task-login #layout-content {
  background: var(--nw-canvas) !important;
}
body.task-login #layout-content {
  display: flex !important; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px; position: relative;
}

/* Buehne: zwei Flaechen in einem Rahmen, Radius 20 wie .nw-riso im Portal. */
.nbw-login-stage {
  position: relative; display: flex; width: min(94vw, 960px); min-height: 560px;
  border-radius: 20px; overflow: hidden; border: 1px solid var(--nw-line);
  box-shadow: 0 28px 64px -34px rgba(0,0,0,.7);
}

/* Links: Navy-Poster. Kopf (Lockup) · Bild + Eyebrow/Claim · Fakten · Fuss */
.nbw-login-brand {
  flex: 1.08; display: flex; flex-direction: column; gap: 28px;
  padding: 36px 40px; background: var(--nw-navy);
}
.nbw-brand-top { display: flex; align-items: center; min-height: 28px; }
body.task-login .nbw-login-brand #logo {
  position: static !important; display: block; margin: 0; inset: auto; transform: none;
  width: auto; max-width: 180px; max-height: 28px; filter: none;
}
.nbw-brand-poster { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 24px; align-items: center; }
.nbw-brand-art {
  aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--nw-navy);
  border: 1px solid rgba(255,138,61,.42);
}
.nbw-brand-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nbw-brand-kicker {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-family: var(--nw-mono); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: var(--nw-orange);
}
.nbw-brand-kicker::before { content: ""; width: 20px; height: 2px; background: currentColor; flex: none; }
.nbw-brand-claim {
  margin: 12px 0 0; font-family: var(--nw-display); font-size: 28px; line-height: 1.08; font-weight: 700;
  letter-spacing: -.02em; color: var(--nw-cream);
}
.nbw-brand-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nbw-brand-points li {
  position: relative; padding-left: 22px; color: var(--nw-cream-78); font-size: 14px; line-height: 1.5; text-align: left;
}
.nbw-brand-points li::before {
  content: ""; position: absolute; left: 2px; top: 7px; width: 9px; height: 9px; border-radius: 2px;
  background: var(--nw-orange); transform: rotate(45deg);
}
.nbw-brand-foot {
  margin-top: auto; padding-top: 20px; border-top: 1px solid var(--nw-line);
  font-family: var(--nw-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--nw-cream-60);
}

/* Rechts: Formular. */
.nbw-login-panel {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 36px 40px; background: var(--nw-panel); text-align: left;
}
.nbw-panel-kicker {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--nw-mono); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--nw-accent);
}
.nbw-panel-kicker::before { content: ""; width: 20px; height: 2px; background: currentColor; flex: none; }
.nbw-panel-title { margin-top: 12px; font-family: var(--nw-display); font-size: 26px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: var(--nw-cream); }
.nbw-panel-sub { margin: 8px 0 24px; font-size: 14px; line-height: 1.5; color: var(--nw-cream-78); }

/* Elastic-Karte neutralisieren: das Panel IST die Karte. Elastic setzt
   #login-form auf top:180px und 368px Breite — beides weg. */
body.task-login #login-form {
  position: static !important; top: 0 !important; width: 100% !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important;
  box-shadow: none !important; border-radius: 0 !important;
}
body.task-login #login-form table { width: 100% !important; table-layout: fixed; }
body.task-login #login-form td.title { display: none; }
body.task-login #login-form td.input { padding: 0; }
body.task-login #login-form .input-group { width: 100%; flex-wrap: nowrap; margin-bottom: 12px; }
/* Kein Symbol-Vorsatz vor den Feldern — wie im Kundenportal. */
body.task-login #login-form .input-group-text { display: none !important; }
body.task-login #login-form input.form-control {
  width: 100% !important; min-width: 0; height: 44px; font-family: var(--nw-sans); font-size: 15px;
  background: var(--nw-canvas) !important; border: 1px solid var(--nw-line) !important; color: var(--nw-cream) !important;
  border-radius: 10px !important; box-shadow: none !important;
}
body.task-login #login-form .input-group input.form-control { border-radius: 10px !important; }
body.task-login #login-form input.form-control::placeholder { color: var(--nw-cream-60); }
body.task-login #login-form input.form-control:focus {
  border-color: var(--nw-accent) !important; box-shadow: 0 0 0 3px rgba(69,180,220,.28) !important;
}
body.task-login #login-form .formbuttons { width: 100%; margin: 4px 0 0; }
body.task-login #rcmloginsubmit {
  width: 100%; height: 44px; margin: 0;
  background: var(--nw-accent) !important; border: 0 !important; border-radius: 10px !important;
  color: var(--nw-navy) !important; font-family: var(--nw-sans); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none !important;
  box-shadow: none !important; transition: background-color .15s ease;
}
body.task-login #rcmloginsubmit:hover { background: #5ec0e4 !important; filter: none; box-shadow: none; }
body.task-login #rcmloginsubmit:active { transform: none; }
body.task-login #rcmloginsubmit:focus-visible { outline: 2px solid var(--nw-accent); outline-offset: 2px; }
body.task-login #login-footer { margin-top: 20px; text-align: left; font-size: 12px; line-height: 1.5; color: var(--nw-cream-60); }
body.task-login #login-footer a { color: var(--nw-accent); }
body.task-login #layout-content > .footer, body.task-login .footer { color: var(--nw-cream-60) !important; }
body.task-login .footer a { color: var(--nw-accent) !important; }
body.task-login #messagestack div, body.task-login #message div { font-family: var(--nw-sans); }

/* Schmal: eine Spalte, Poster kompakt (Bild + Claim), Fakten bleiben. */
@media (max-width: 780px) {
  body.task-login #layout-content { padding: 16px; align-items: flex-start; }
  .nbw-login-stage { flex-direction: column; min-height: 0; width: 100%; }
  .nbw-login-brand { padding: 24px; gap: 20px; }
  .nbw-brand-poster { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; }
  .nbw-brand-claim { font-size: 22px; }
  .nbw-brand-points { display: none; }
  .nbw-brand-foot { display: none; }
  .nbw-login-panel { padding: 24px 24px 28px; }
  .nbw-panel-title { font-size: 22px; }
}