/*
  Archiv — dunkles Dashboard-Theme für piler
  Nur das Nachrichtenfenster ist weiß, damit der Mailtext lesbar bleibt.
  Liegt nach piler.css.

  Auf den Server:
    /var/piler/www/assets/css/archiv.css

  In /etc/piler/config-site.php:
    $config['CUSTOM_CSS'] = '<link rel="stylesheet" href="/assets/css/archiv.css">';
*/

:root,
[data-theme="dark"] {
  --archiv-bg: #232b31;
  --archiv-card: #232b31;
  --archiv-field: #1b2227;
  --archiv-line: #596066;
  --archiv-line-soft: #3c454c;
  --archiv-text: #e6e6e6;
  --archiv-muted: #9ea3a9;
  --archiv-nav: #b8c4cb;
  --archiv-blue: #0f6df9;
  --archiv-blue-deep: #0b5ed7;
  --archiv-yellow: #fec109;
  --archiv-green: #1a8754;
  --archiv-red: #db3544;
  --archiv-select: #2a3642;
  --archiv-radius: 10px;
  --archiv-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: var(--archiv-font);
  --bs-body-bg: var(--archiv-bg);
  --bs-body-color: var(--archiv-text);
  --bs-primary: var(--archiv-blue);
  --bs-primary-rgb: 15, 109, 249;
  --bs-link-color: #8eb6ff;
  --bs-link-hover-color: #c5d9ff;
  --bs-border-color: var(--archiv-line);
  --bs-border-radius: 0.6rem;
  --bs-secondary-color: var(--archiv-muted);
  --bs-secondary-bg: #2a333a;
  --bs-tertiary-bg: #1b2227;
  --bs-emphasis-color: var(--archiv-text);
  --bs-heading-color: var(--archiv-text);
}

html,
html[data-theme="dark"],
body,
[data-theme="dark"] body,
body#loginpage,
[data-theme="dark"] body#loginpage {
  font-family: var(--archiv-font);
  color: var(--archiv-text);
  background: var(--archiv-bg);
  background-image: none;
}

body {
  font-size: 14px;
  line-height: 1.45;
}

h1, h2, h3, h4,
#menu,
.dropdown-menu,
#logincontainer,
[data-theme="dark"] #menu,
[data-theme="dark"] .dropdown-menu {
  font-family: var(--archiv-font);
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--archiv-text);
}

h1, h2, h3, h4 {
  font-weight: 600;
}

a,
[data-theme="dark"] a {
  color: #8eb6ff;
  text-decoration: none;
}

a:hover,
[data-theme="dark"] a:hover {
  color: #c5d9ff;
}

#menu,
[data-theme="dark"] #menu {
  left: 0;
  right: 0;
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  background: var(--archiv-bg);
  color: var(--archiv-nav);
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid var(--archiv-line-soft);
  box-shadow: none;
}

#menu > * {
  flex: 1 1 auto;
  width: 100%;
}

#header,
[data-theme="dark"] #header {
  height: 48px;
  background: transparent;
  text-transform: none;
  color: var(--archiv-nav);
}

.menulink,
[data-theme="dark"] .menulink {
  color: var(--archiv-nav);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 2px;
  padding: 6px 10px;
  border-radius: 6px;
  text-shadow: none;
}

.menulink:hover,
[data-theme="dark"] .menulink:hover {
  color: var(--archiv-text);
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}

.dropdown-menu,
[data-theme="dark"] .dropdown-menu {
  font-size: 13px;
  font-weight: 400;
  padding: 6px;
  border: 1px solid var(--archiv-line);
  border-radius: 10px;
  background: #2a333a;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.dropdown-menu li.dropdown-item:hover,
a.dropdown-item:hover,
[data-theme="dark"] .dropdown-menu li.dropdown-item:hover,
[data-theme="dark"] a.dropdown-item:hover {
  background: rgba(15, 109, 249, 0.16);
  color: var(--archiv-text);
}

a.dropdown-item,
[data-theme="dark"] a.dropdown-item {
  border-radius: 7px;
  color: var(--archiv-text);
  font-weight: 400;
  padding: 7px 10px;
}

.branding_logo {
  max-height: 18px;
}

.searchcontainer {
  padding-top: 64px;
}

.container-panes {
  height: calc(100vh - 88px);
}

.pane,
[data-theme="dark"] .pane,
.pane-upper-content,
[data-theme="dark"] .pane-upper-content,
#preview,
[data-theme="dark"] #preview {
  background: var(--archiv-card);
  border: 1px solid var(--archiv-line);
  border-radius: var(--archiv-radius);
  color: var(--archiv-text);
}

.pane-upper-fixed,
[data-theme="dark"] .pane-upper-fixed {
  height: 42px;
  background: #1b2227;
  border-top: 1px solid var(--archiv-line-soft);
  color: var(--archiv-muted);
}

.resizer,
[data-theme="dark"] .resizer {
  height: 10px;
  background: transparent;
}

.messageheader,
[data-theme="dark"] .messageheader {
  background: #ffffff;
  border-bottom: 1px solid #e1e4e8;
  color: #1c2126;
  border-radius: var(--archiv-radius) var(--archiv-radius) 0 0;
}

#preview,
[data-theme="dark"] #preview,
.messagecontents,
[data-theme="dark"] .messagecontents {
  background: #ffffff !important;
  color: #1c2126 !important;
  color-scheme: light;
}

#preview iframe,
.messagecontents iframe {
  background: #ffffff;
  color-scheme: light;
}

#preview a,
.messagecontents a,
[data-theme="dark"] #preview a,
[data-theme="dark"] .messagecontents a {
  color: #0b57d0;
}

#preview a:hover,
.messagecontents a:hover,
[data-theme="dark"] #preview a:hover,
[data-theme="dark"] .messagecontents a:hover {
  color: #0842a0;
}

table,
[data-theme="dark"] table,
.table,
[data-theme="dark"] .table {
  background: transparent;
  color: var(--archiv-text);
  border-color: var(--archiv-line-soft);
}

th,
[data-theme="dark"] th,
[data-theme="dark"] .table th,
[data-theme="dark"] table th {
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--archiv-line-soft);
  background: transparent;
  color: var(--archiv-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

td,
[data-theme="dark"] td,
[data-theme="dark"] .table td {
  border-color: var(--archiv-line-soft);
  color: inherit;
  background: transparent;
}

.resultrow,
.resultrow td,
[data-theme="dark"] .resultrow,
[data-theme="dark"] .resultrow td {
  font-style: normal;
  font-weight: 400;
  color: var(--archiv-muted);
  cursor: pointer;
}

.resultrow.new,
.resultrow.new td,
[data-theme="dark"] .resultrow.new,
[data-theme="dark"] .resultrow.new td {
  font-style: normal;
  font-weight: 600;
  color: var(--archiv-text);
}

.highlighted,
.highlighted td,
[data-theme="dark"] .highlighted,
[data-theme="dark"] .highlighted td {
  background-color: var(--archiv-select) !important;
  color: var(--archiv-text) !important;
  box-shadow: inset 3px 0 0 var(--archiv-blue);
}

.table-striped > tbody > tr:nth-of-type(odd),
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.02);
}

.functionbox,
[data-theme="dark"] .functionbox {
  border-left-color: var(--archiv-line-soft);
}

.btn {
  border-radius: 8px;
  font-weight: 600;
}

.btn-primary,
[data-theme="dark"] .btn-primary {
  background-color: var(--archiv-blue);
  border-color: var(--archiv-blue);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus {
  background-color: var(--archiv-blue-deep);
  border-color: var(--archiv-blue-deep);
  color: #fff;
}

.btn-outline-secondary,
[data-theme="dark"] .btn-outline-secondary {
  color: var(--archiv-nav);
  border-color: var(--archiv-line);
  background: transparent;
}

.btn-outline-secondary:hover,
[data-theme="dark"] .btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--archiv-text);
  border-color: var(--archiv-line);
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select,
.form-control,
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  border-radius: 8px;
  border: 1px solid var(--archiv-line);
  background-color: var(--archiv-field);
  color: var(--archiv-text);
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input[type="text"]:focus,
[data-theme="dark"] input[type="password"]:focus {
  background-color: var(--archiv-field);
  border-color: var(--archiv-blue);
  color: var(--archiv-text);
  box-shadow: 0 0 0 3px rgba(15, 109, 249, 0.25);
}

.form-label,
[data-theme="dark"] .form-label {
  color: var(--archiv-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#logo-lg {
  width: 220px;
  margin: 0 auto 18px;
  color: var(--archiv-text);
}

.form-signin,
[data-theme="dark"] .form-signin {
  max-width: 360px;
  padding: 26px 26px 28px;
  background: var(--archiv-card);
  border: 1px solid var(--archiv-line);
  border-radius: 12px;
  box-shadow: none;
}

#logincontainer,
[data-theme="dark"] #logincontainer {
  color: var(--archiv-text);
  text-transform: none;
}

#compatibility,
.compatibility {
  color: var(--archiv-muted);
}

.alert,
[data-theme="dark"] .alert,
.modal-content,
[data-theme="dark"] .modal-content,
.toast,
[data-theme="dark"] .toast,
[data-theme="dark"] .text-bg-light {
  background: #2a333a !important;
  color: var(--archiv-text) !important;
  border-color: var(--archiv-line) !important;
  border-radius: 12px;
}

.modal-header,
.modal-footer,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: var(--archiv-line-soft);
}

.pagination .page-link {
  color: var(--archiv-nav);
  background: transparent;
  border-color: var(--archiv-line);
}

.pagination .page-item.active .page-link {
  background: var(--archiv-blue);
  border-color: var(--archiv-blue);
  color: #fff;
}

#theme-toggle,
[data-theme="dark"] #theme-toggle {
  color: var(--archiv-nav);
}

#theme-toggle:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--archiv-text);
}

i.attachment { color: var(--archiv-blue); }
i.note { color: #20c997; }
i.spam { color: var(--archiv-yellow); }
i.tag { color: #c58bff; }
i.verified { color: var(--archiv-green); }
.private { color: var(--archiv-red); }

.text-body-secondary,
[data-theme="dark"] .text-body-secondary {
  color: var(--archiv-muted) !important;
}