@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700&display=swap');

:root {
  --ao-bg: #0a0a0f;
  --ao-bg-card: #12121a;
  --ao-bg-elevated: #1a1a26;
  --ao-border: rgba(255, 255, 255, 0.08);
  --ao-text: #e8e8ed;
  --ao-muted: #8b8b9a;
  --ao-accent: #00d4aa;
  --ao-accent-dim: rgba(0, 212, 170, 0.15);
  --ao-accent-hover: #00efc0;
  --ao-blue: #3b9eff;
}

/* ── Logo ── */
#logo img,
img#logo,
#layout-menu img#logo {
  max-height: 52px;
  width: auto;
  height: auto;
}

.task-login #logo,
.task-login img#logo {
  display: block !important;
  position: relative !important;
  top: 8vh !important;
  max-height: 200px !important;
  max-width: min(420px, 92vw) !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto 20px !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.task-login #layout-content > #logo,
.task-login #layout-content > img#logo {
  text-align: center;
}

/* ── Login (immer dunkel wie anwendungen.online) ── */
body.task-login {
  font-family: 'Syne', system-ui, sans-serif !important;
  background: var(--ao-bg) !important;
  color: var(--ao-text) !important;
}

body.task-login #layout-content {
  background: transparent !important;
}

body.task-login #login-form {
  background: var(--ao-bg-card);
  border: 1px solid var(--ao-border);
  border-radius: 16px;
  padding: 28px 32px 24px;
  max-width: 420px;
  margin: 0 auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

body.task-login #login-form table {
  width: 100%;
}

body.task-login #login-form .title,
body.task-login #login-form label {
  color: var(--ao-muted) !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body.task-login #login-form .form-control {
  background: var(--ao-bg-elevated) !important;
  border: 1px solid var(--ao-border) !important;
  color: var(--ao-text) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-family: inherit;
}

body.task-login #login-form .form-control:focus {
  border-color: var(--ao-accent) !important;
  box-shadow: 0 0 0 3px var(--ao-accent-dim) !important;
  outline: none !important;
}

body.task-login #login-form .button.mainaction,
body.task-login #login-form button[type="submit"] {
  background: var(--ao-accent) !important;
  border: none !important;
  color: #041510 !important;
  font-family: inherit !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  width: 100%;
  margin-top: 8px;
  transition: background 0.15s ease, transform 0.1s ease;
}

body.task-login #login-form .button.mainaction:hover,
body.task-login #login-form button[type="submit"]:hover {
  background: var(--ao-accent-hover) !important;
}

body.task-login #login-footer {
  color: var(--ao-muted) !important;
  font-size: 12px;
  margin-top: 20px;
}

body.task-login #login-footer a,
body.task-login .support-link {
  color: var(--ao-accent) !important;
}

/* ── Dark Mode: gesamtes Webmail ── */
html.dark-mode body {
  font-family: 'Syne', system-ui, sans-serif !important;
  background: var(--ao-bg) !important;
  color: var(--ao-text) !important;
}

html.dark-mode #layout-menu,
html.dark-mode #taskmenu {
  background: var(--ao-bg) !important;
  border-color: var(--ao-border) !important;
}

html.dark-mode #taskmenu a {
  color: var(--ao-muted) !important;
}

html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a:hover {
  color: var(--ao-accent) !important;
  background: var(--ao-accent-dim) !important;
}

html.dark-mode #layout-sidebar,
html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer {
  background: var(--ao-bg-card) !important;
  border-color: var(--ao-border) !important;
  color: var(--ao-text) !important;
}

html.dark-mode #layout > div > .header .header-title,
html.dark-mode #layout > div > .header a.button {
  color: var(--ao-text) !important;
}

html.dark-mode .listing li,
html.dark-mode .messagelist td,
html.dark-mode .messagelist tr {
  border-color: var(--ao-border) !important;
  color: var(--ao-text) !important;
}

html.dark-mode .messagelist tr.selected td,
html.dark-mode .messagelist tr.selected,
html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a {
  background: var(--ao-accent-dim) !important;
  color: var(--ao-text) !important;
}

html.dark-mode .messagelist tr:hover td,
html.dark-mode .listing li > a:hover {
  background: var(--ao-bg-elevated) !important;
}

html.dark-mode .toolbar a.button,
html.dark-mode .header .toolbar a,
html.dark-mode .menu.toolbar a {
  color: var(--ao-muted) !important;
}

html.dark-mode .toolbar a.button:hover,
html.dark-mode .header .toolbar a:hover {
  color: var(--ao-accent) !important;
}

html.dark-mode a,
html.dark-mode .button,
html.dark-mode .btn-primary,
html.dark-mode .btn-secondary {
  color: var(--ao-accent);
}

html.dark-mode .btn-primary,
html.dark-mode button.btn-primary,
html.dark-mode .floating-action-buttons a.primary {
  background: var(--ao-accent) !important;
  border-color: var(--ao-accent) !important;
  color: #041510 !important;
  font-weight: 600;
}

html.dark-mode .form-control,
html.dark-mode input[type="text"],
html.dark-mode input[type="password"],
html.dark-mode input[type="email"],
html.dark-mode textarea,
html.dark-mode select {
  background: var(--ao-bg-elevated) !important;
  border-color: var(--ao-border) !important;
  color: var(--ao-text) !important;
  border-radius: 8px;
}

html.dark-mode .form-control:focus {
  border-color: var(--ao-accent) !important;
  box-shadow: 0 0 0 2px var(--ao-accent-dim) !important;
}

html.dark-mode .popupmenu,
html.dark-mode .popover,
html.dark-mode .menu,
html.dark-mode .pagenav,
html.dark-mode .ui-widget-content {
  background: var(--ao-bg-card) !important;
  border-color: var(--ao-border) !important;
  color: var(--ao-text) !important;
}

html.dark-mode .folderlist li a,
html.dark-mode .contactlist li a {
  color: var(--ao-text) !important;
}

html.dark-mode .folderlist li.selected > a,
html.dark-mode .folderlist li.selected > a:hover {
  background: var(--ao-accent-dim) !important;
  color: var(--ao-accent) !important;
}

html.dark-mode .message-part,
html.dark-mode .message-htmlpart,
html.dark-mode #messagecont {
  background: var(--ao-bg-card) !important;
  color: var(--ao-text) !important;
}

html.dark-mode .box,
html.dark-mode .formcontent,
html.dark-mode #settings-sections {
  background: var(--ao-bg-card) !important;
  border-color: var(--ao-border) !important;
}

html.dark-mode #login-footer,
html.dark-mode .listing span.secondary,
html.dark-mode .hint {
  color: var(--ao-muted) !important;
}

html.dark-mode ::selection {
  background: var(--ao-accent-dim);
  color: var(--ao-text);
}

/* Scrollbars (WebKit) */
html.dark-mode ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html.dark-mode ::-webkit-scrollbar-thumb {
  background: #2a2a38;
  border-radius: 5px;
}
html.dark-mode ::-webkit-scrollbar-track {
  background: var(--ao-bg);
}