@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. */

/* Login-Seite: dunkler NBW-Verlauf, Formular als Portal-Karte. */
body.task-login { background: linear-gradient(160deg, #0d141b 0%, #111920 55%, #0f2233 100%) !important; }
body.task-login #layout, body.task-login #layout-content { background: transparent !important; }
body.task-login #login-form { background: #161e28; border: 1px solid #2c3949; border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.45); padding: 2.2rem 2.4rem; }
body.task-login #login-form .input-group-text { background: #232d3b !important; border-color: #2c3949 !important; color: #9fb3c8 !important; }
body.task-login #login-form input.form-control { background: #111920 !important; border-color: #2c3949 !important; color: #e8f0f7 !important; }
body.task-login #login-form input.form-control::placeholder { color: #7d8fa3; }
body.task-login #layout-content > .footer, body.task-login .footer { color: #9fb3c8 !important; }
body.task-login .footer a { color: #45b4dc !important; }

/* 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) ─────────────────────────── */
body.task-login {
  background:
    radial-gradient(1100px 560px at 50% -12%, rgba(0,139,194,.20), transparent 60%),
    radial-gradient(760px 480px at 85% 118%, rgba(17,116,153,.16), transparent 55%),
    linear-gradient(160deg, #0b1218 0%, #0f1720 55%, #0c1c2b 100%) !important;
}
body.task-login #layout, body.task-login #layout-content {
  background: transparent !important;
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
}
body.task-login #logo {
  width: 92px; height: auto; margin: 0 auto 1.4rem; display: block;
  filter: drop-shadow(0 8px 22px rgba(0,139,194,.38));
}
body.task-login #login-form {
  width: min(92vw, 400px);
  background: linear-gradient(180deg, rgba(22,30,40,.97), rgba(16,24,33,.97)) !important;
  border: 1px solid #223143 !important;
  border-radius: 18px !important;
  box-shadow: 0 26px 72px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05) !important;
  padding: 2.5rem 2.4rem 2rem !important;
}
body.task-login #login-form .input-group { margin-bottom: .85rem; }
body.task-login #login-form .input-group-text {
  background: #0e161f !important; border-color: #26374a !important; color: #6f8296 !important;
}
body.task-login #login-form input.form-control {
  background: #0e161f !important; border-color: #26374a !important; color: #e8f0f7 !important; height: 46px;
}
body.task-login #login-form input.form-control:focus {
  border-color: #008bc2 !important; box-shadow: 0 0 0 .18rem rgba(0,139,194,.28) !important;
}
body.task-login #login-form input.form-control::placeholder { color: #6b7d90; }
body.task-login #rcmloginsubmit {
  width: 100%; height: 46px; margin-top: .5rem;
  background: linear-gradient(180deg,#0a9ed6,#008bc2) !important; border: 0 !important;
  border-radius: 10px !important; font-weight: 600; letter-spacing: .02em;
  box-shadow: 0 8px 22px rgba(0,139,194,.35);
  transition: filter .15s ease, box-shadow .15s ease, transform .08s ease;
}
body.task-login #rcmloginsubmit:hover { filter: brightness(1.07); box-shadow: 0 10px 28px rgba(0,139,194,.45); }
body.task-login #rcmloginsubmit:active { transform: translateY(1px); }
body.task-login #login-footer { margin-top: 1.2rem; color: #8ea2b6; font-size: .8rem; text-align: center; }
body.task-login #login-footer a { color: #45b4dc; }