/* Hostiqo-Design für Roundcube (Elastic, dunkler Modus)
   Farben wie hostiqo.de: Nacht #061820, Glas, Sonne #F3B61F, Meer #3FB7C9 */

@font-face { font-family: "HQ Adventor"; src: url("fonts/adventor-bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "HQ Inter"; src: url("fonts/inter-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "HQ Inter"; src: url("fonts/inter-medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "HQ Inter"; src: url("fonts/inter-semibold.woff") format("woff"); font-weight: 600 700; font-display: swap; }

html.dark-mode {
  --hq-night: #061820; --hq-night2: #0A222B; --hq-panel: #0B2732; --hq-deep: #04121A;
  --hq-line: rgba(255,255,255,.09); --hq-line2: rgba(255,255,255,.16);
  --hq-txt: #DCEBEE; --hq-txt2: #9DB9C0; --hq-sun: #F3B61F; --hq-sun2: #FFD24D; --hq-sea: #3FB7C9; --hq-link: #7FD3E0; --hq-ink: #0D2B36;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
html.dark-mode:not(.touch) ::-webkit-scrollbar-track { background-color: transparent; }
html.dark-mode:not(.touch) ::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.16); border-radius: 8px; }

html.dark-mode body, html.dark-mode input, html.dark-mode select, html.dark-mode textarea, html.dark-mode button,
html.dark-mode .btn, html.dark-mode .form-control, html.dark-mode .custom-select, html.dark-mode table { font-family: "HQ Inter", Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
html.dark-mode h1, html.dark-mode h2, html.dark-mode .header-title, html.dark-mode .boxtitle, html.dark-mode #layout-content h2.subject,
html.dark-mode .popover-header, html.dark-mode legend { font-family: "HQ Adventor", "Avenir Next", system-ui, sans-serif; letter-spacing: -.01em; }

html.dark-mode body { background: var(--hq-night); color: var(--hq-txt); }
html.dark-mode a { color: var(--hq-link); }
html.dark-mode a:hover { color: var(--hq-sun); }

/* ---------- Grundflächen ---------- */
html.dark-mode #layout-menu { background: var(--hq-deep); border-right: 1px solid var(--hq-line); }
html.dark-mode #layout-sidebar { background: var(--hq-night2); border-right: 1px solid var(--hq-line); }
html.dark-mode #layout-list { background: linear-gradient(180deg, #0B2530, var(--hq-night2)); border-right: 1px solid var(--hq-line); }
html.dark-mode #layout-content { background: radial-gradient(900px 500px at 90% -10%, rgba(63,183,201,.10), transparent 60%), var(--hq-night); }
html.dark-mode #layout > div > .header, html.dark-mode #layout > div > .footer { background: rgba(4,18,26,.55); border-color: var(--hq-line); }
html.dark-mode #layout > div > .header { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html.dark-mode .header-title, html.dark-mode #layout > div > .header .header-title { color: #fff; }
html.dark-mode .watermark { opacity: .08; }

/* ---------- Linke Leiste (Schreiben, E-Mail, Kontakte, …) ---------- */
html.dark-mode #taskmenu a { color: #8FB3BB; border-color: transparent !important; border-radius: 12px; margin: 2px 6px; width: auto !important; transition: background .2s, color .2s; }
html.dark-mode #taskmenu a:hover { color: #fff; background: rgba(255,255,255,.05); }
html.dark-mode #taskmenu a.selected { color: var(--hq-sun); background: linear-gradient(90deg, rgba(243,182,31,.16), rgba(243,182,31,.03)) !important; box-shadow: inset 3px 0 0 var(--hq-sun); }
html.dark-mode #taskmenu .action-buttons a, html.dark-mode #taskmenu a.compose { color: var(--hq-sun) !important; }
html.dark-mode #taskmenu .action-buttons a.compose { background: rgba(243,182,31,.12); border: 1px solid rgba(243,182,31,.35) !important; }
html.dark-mode #taskmenu a.logout { color: #F4A38E !important; }
html.dark-mode #taskmenu a.theme { display: none !important; }
html.dark-mode #logo { opacity: 1; }
html.dark-mode #layout-menu #logo { max-height: 46px; padding: 6px; }

/* ---------- Ordnerliste ---------- */
html.dark-mode #layout-sidebar .header { background: transparent; }
html.dark-mode .listing li a, html.dark-mode #folderlist-content li a, html.dark-mode #mailboxlist li a { color: #C9DCE0; border-radius: 10px; }
html.dark-mode .listing li { border-color: transparent; }
html.dark-mode #mailboxlist li.mailbox > a { margin: 1px 8px; }
html.dark-mode .listing li.selected > a, html.dark-mode .listing li.selected > div > a, html.dark-mode #mailboxlist li.selected > a {
  background: linear-gradient(90deg, rgba(243,182,31,.16), rgba(243,182,31,.02)); color: #fff; box-shadow: inset 3px 0 0 var(--hq-sun); }
html.dark-mode .listing li a:hover, html.dark-mode #mailboxlist li a:hover { background: rgba(255,255,255,.05); }
html.dark-mode .listing li a:before, html.dark-mode #mailboxlist li a:before { color: var(--hq-sea); }
html.dark-mode #mailboxlist li.selected > a:before { color: var(--hq-sun); }
html.dark-mode .unreadcount, html.dark-mode #mailboxlist .unreadcount, html.dark-mode .listing li .unreadcount { background: var(--hq-sun) !important; color: var(--hq-ink) !important; font-weight: 700; border-radius: 99px; }
html.dark-mode .quota-widget .bar { background: rgba(255,255,255,.08); }
html.dark-mode .quota-widget .bar .value { background: linear-gradient(90deg, var(--hq-sea), var(--hq-sun)) !important; }

/* ---------- Nachrichtenliste ---------- */
html.dark-mode table.records-table tr, html.dark-mode table.records-table tr td { background: transparent; border-color: rgba(255,255,255,.06); color: var(--hq-txt); }
html.dark-mode table.records-table tbody tr:hover td { background: rgba(255,255,255,.04); }
html.dark-mode table.records-table tr.selected td, html.dark-mode table.records-table tr.selected:hover td { background: rgba(243,182,31,.12) !important; color: #fff; }
html.dark-mode table.records-table tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--hq-sun); }
html.dark-mode table.records-table tr.focused td { outline: 0; }
html.dark-mode table.messagelist tr.unread td.subject span.subject a, html.dark-mode table.messagelist tr.unread .subject a { color: #fff; font-weight: 600; }
html.dark-mode table.messagelist td.subject span.fromto, html.dark-mode table.messagelist td.subject span.date, html.dark-mode table.messagelist td span.size { color: var(--hq-txt2); }
html.dark-mode table.messagelist tr.unread td.subject span.msgicon.status:before, html.dark-mode table.messagelist span.msgicon.unread:before { color: var(--hq-sun); }
html.dark-mode table.messagelist td.flags span.flag:before { color: var(--hq-sun); }
html.dark-mode table.messagelist tr.flagged td, html.dark-mode table.messagelist tr.flagged td a { color: #FFD46A; }

/* ---------- Werkzeugleisten ---------- */
html.dark-mode .menu.toolbar a, html.dark-mode .toolbar a.button, html.dark-mode #layout > div > .header a.button, html.dark-mode #layout > div > .footer a.button { color: #C9DCE0; border-radius: 10px; }
html.dark-mode .menu.toolbar a:hover:not(.disabled) { color: var(--hq-sun); background: rgba(255,255,255,.04); }
html.dark-mode .menu.toolbar a.disabled { opacity: .35; }
html.dark-mode .searchbar { border-color: var(--hq-line2); border-radius: 12px; background: rgba(255,255,255,.04); }
html.dark-mode .searchbar:focus-within { border-color: var(--hq-sun); box-shadow: 0 0 0 3px rgba(243,182,31,.15); }
html.dark-mode .pagenav .pagenav-text, html.dark-mode .menu.pagenav a { color: var(--hq-txt2); }

/* ---------- Buttons ---------- */
html.dark-mode .btn-primary, html.dark-mode .btn.btn-primary, html.dark-mode button.mainaction, html.dark-mode input.mainaction, html.dark-mode .btn.mainaction,
html.dark-mode .formbuttons button.mainaction, html.dark-mode #rcmloginsubmit, html.dark-mode .floating-action-buttons a.button {
  background: var(--hq-sun) !important; border-color: var(--hq-sun) !important; color: var(--hq-ink) !important; font-weight: 700; border-radius: 12px;
  box-shadow: 0 10px 26px -12px rgba(243,182,31,.7); transition: transform .2s, background .2s, box-shadow .2s; }
html.dark-mode .btn-primary:hover, html.dark-mode button.mainaction:hover, html.dark-mode #rcmloginsubmit:hover { background: var(--hq-sun2) !important; border-color: var(--hq-sun2) !important; transform: translateY(-1px); }
html.dark-mode .btn-secondary, html.dark-mode .btn.btn-secondary, html.dark-mode button.btn-secondary { background: rgba(255,255,255,.06) !important; border-color: var(--hq-line2) !important; color: #fff !important; border-radius: 12px; }
html.dark-mode .btn-danger, html.dark-mode button.delete { background: rgba(200,67,43,.14) !important; border-color: rgba(231,111,81,.45) !important; color: #F4A38E !important; }

/* ---------- Formulare ---------- */
html.dark-mode .form-control, html.dark-mode .custom-select, html.dark-mode input[type=text], html.dark-mode input[type=password], html.dark-mode input[type=email], html.dark-mode input[type=search], html.dark-mode textarea, html.dark-mode select, html.dark-mode .recipient-input {
  background-color: rgba(0,0,0,.25) !important; border-color: var(--hq-line2) !important; color: #fff !important; border-radius: 10px; }
html.dark-mode .form-control:focus, html.dark-mode input:focus, html.dark-mode textarea:focus, html.dark-mode select:focus, html.dark-mode .recipient-input.focused {
  border-color: var(--hq-sun) !important; box-shadow: 0 0 0 3px rgba(243,182,31,.18) !important; }
html.dark-mode .input-group-text, html.dark-mode .input-group-prepend .input-group-text, html.dark-mode .input-group-append .input-group-text { background: rgba(255,255,255,.05); border-color: var(--hq-line2); color: var(--hq-txt2); }
html.dark-mode .custom-switch .custom-control-input:checked ~ .custom-control-label:before, html.dark-mode .custom-control-input:checked ~ .custom-control-label:before { background-color: var(--hq-sun) !important; border-color: var(--hq-sun) !important; }
html.dark-mode .recipient-input .recipient { background: rgba(63,183,201,.16); border-color: rgba(63,183,201,.4); color: #fff; border-radius: 99px; }
html.dark-mode .file-upload, html.dark-mode #compose-attachments { border-color: var(--hq-line2) !important; border-radius: 14px; }
html.dark-mode #compose-content .editor-toolbar, html.dark-mode .editor-toolbar { background: rgba(255,255,255,.04); border-color: var(--hq-line2); }

/* ---------- Nachrichtenansicht ---------- */
html.dark-mode #message-header, html.dark-mode .message-partheaders { background: transparent; border-color: var(--hq-line); }
html.dark-mode #message-header h2.subject { color: #fff; font-size: 1.45rem; }
html.dark-mode #message-header .header-links a, html.dark-mode #message-header .header a { color: var(--hq-link); }
html.dark-mode #messagebody, html.dark-mode div.message-part, html.dark-mode .message-part pre { color: var(--hq-txt); }
html.dark-mode #message-objects div a, html.dark-mode .attachmentslist li { border-color: var(--hq-line2); border-radius: 10px; }

/* ---------- Popups, Dialoge, Meldungen ---------- */
html.dark-mode .popover, html.dark-mode .ui-dialog, html.dark-mode .modal-content { background: #0B2732; border: 1px solid var(--hq-line2); border-radius: 16px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.8); }
html.dark-mode .popover .menu li a:hover, html.dark-mode .popover .menu li a.active:hover { background: rgba(243,182,31,.1); color: #fff; }
html.dark-mode .ui-dialog-titlebar, html.dark-mode .popover-header { background: transparent !important; border-color: var(--hq-line) !important; color: #fff; }
html.dark-mode #messagestack div { border-radius: 12px; box-shadow: 0 16px 40px -16px rgba(0,0,0,.7); }
html.dark-mode #messagestack .alert-success, html.dark-mode .ui.alert.boxconfirmation { background-color: #145A43; }
html.dark-mode #messagestack .alert-info, html.dark-mode .ui.alert.boxinformation { background-color: #0F4B5A; }
html.dark-mode #messagestack .loading { background-color: #0F3440; }
html.dark-mode .badge, html.dark-mode .badge-info { background: var(--hq-sea); color: var(--hq-ink); }

/* ---------- Anmeldung ---------- */
html.dark-mode body.task-login { background:
    radial-gradient(1100px 600px at 85% -10%, rgba(63,183,201,.22), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(243,182,31,.12), transparent 60%), var(--hq-night); }
html.dark-mode body.task-login::before { content: ""; position: fixed; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
html.dark-mode body.task-login #layout-content { background: transparent; }
html.dark-mode body.task-login #layout-content > form, html.dark-mode body.task-login #login-form {
  position: relative; z-index: 1; width: 100%; max-width: 26rem; margin: 0 auto; padding: 2.2rem 2rem 1.6rem; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.025)); border: 1px solid var(--hq-line2);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  animation: hqIn .7s cubic-bezier(.2,.8,.2,1) both; }
html.dark-mode body.task-login #logo { width: auto; max-width: 17rem; height: 3.4rem; max-height: none; margin: 0 auto 1.2rem; display: block; }
html.dark-mode body.task-login .hq-login-head { text-align: center; margin: 0 0 1.4rem; }
html.dark-mode body.task-login .hq-login-head h1 { font: 700 1.6rem/1.2 "HQ Adventor", "Avenir Next", sans-serif; color: #fff; margin: 0 0 .35rem; }
html.dark-mode body.task-login .hq-login-head h1 span { background: linear-gradient(90deg, var(--hq-sun), #FFE08A 60%, var(--hq-sea)); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.dark-mode body.task-login .hq-login-head p { color: var(--hq-txt2); font-size: .92rem; margin: 0; }
html.dark-mode body.task-login #login-form table { width: 100%; }
html.dark-mode body.task-login #login-form .input-group { margin-bottom: .4rem; }
html.dark-mode body.task-login #login-form .form-control { height: 3rem; font-size: 1rem; }
html.dark-mode body.task-login #login-form .input-group-text { border-radius: 10px 0 0 10px; }
html.dark-mode body.task-login #login-form .input-group .form-control { border-radius: 0 10px 10px 0; }
html.dark-mode body.task-login #rcmloginsubmit { height: 3rem; font-size: 1rem; text-transform: none !important; letter-spacing: 0 !important; margin-top: .6rem; width: 100%; }
html.dark-mode body.task-login #login-footer, html.dark-mode body.task-login .hq-login-foot { color: var(--hq-txt2); font-size: .82rem; text-align: center; }
html.dark-mode body.task-login .hq-login-foot { margin: 1.2rem 0 0; line-height: 1.6; }
html.dark-mode body.task-login #login-footer { position: relative; z-index: 1; margin-top: 1.4rem; opacity: .75; }
@keyframes hqIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html.dark-mode body.task-login #login-form { animation: none; } }

/* ---------- Handy ---------- */
html.dark-mode.layout-phone #layout-menu { background: #04121A; }
html.dark-mode.layout-phone #layout > div > .header { background: rgba(4,18,26,.92); }
html.dark-mode.layout-phone .floating-action-buttons a.button { border-radius: 50%; }
html.dark-mode.layout-phone body.task-login #login-form { margin: 0 1rem; padding: 1.8rem 1.3rem 1.4rem; }

/* Nachbesserungen */
html.dark-mode #layout-menu .special-buttons a:not(:focus), html.dark-mode #layout-menu .special-buttons a { background: transparent !important; }
html.dark-mode #taskmenu a, html.dark-mode #taskmenu a.selected { border: 0 !important; }
html.dark-mode #taskmenu .action-buttons a.compose { border: 1px solid rgba(243,182,31,.35) !important; }
html.dark-mode .recipient-input input, html.dark-mode .recipient-input input:focus { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html.dark-mode #layout-content .watermark, html.dark-mode .watermark { background-image: url("zeichen.svg") !important; background-size: 9rem !important; background-repeat: no-repeat !important; background-position: center !important; opacity: .1; filter: grayscale(.2); }
html.dark-mode .formbuttons button, html.dark-mode .btn, html.dark-mode button.btn { text-transform: none; letter-spacing: 0; }

html.dark-mode body.task-login .hq-login-forgot { text-align: center; margin: .9rem 0 0; font-size: .88rem; }
html.dark-mode body.task-login .hq-login-forgot a { color: var(--hq-link); }