/* TASKL Look fuer Roundcube (Elastic, Dark Mode) */
html.dark-mode body,
html.dark-mode #layout,
html.dark-mode #layout-content,
html.dark-mode #layout-list,
html.dark-mode #layout-sidebar,
html.dark-mode .iframe,
html.dark-mode body.iframe { background:#0a0a12 !important; color:#e8e8f2 !important; }
html.dark-mode #layout-menu,
html.dark-mode #layout > .menu { background:#07070e !important; border-right:1px solid rgba(0,229,255,.15) !important; }
html.dark-mode #layout-sidebar .header,
html.dark-mode #layout-list .header,
html.dark-mode #layout-content .header,
html.dark-mode .toolbar,
html.dark-mode .footer,
html.dark-mode #layout .searchbar { background:#10101c !important; border-color:rgba(255,255,255,.08) !important; }
html.dark-mode .ui-dialog,
html.dark-mode .popover,
html.dark-mode .popupmenu,
html.dark-mode .boxcontent,
html.dark-mode table.records-table tr { background:#12121f !important; color:#e8e8f2 !important; }
html.dark-mode .form-control,
html.dark-mode input[type=text],
html.dark-mode input[type=password],
html.dark-mode select,
html.dark-mode textarea { background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.14) !important; color:#e8e8f2 !important; border-radius:12px !important; }
html.dark-mode .form-control:focus { border-color:#00e5ff !important; box-shadow:0 0 0 3px rgba(0,229,255,.18) !important; }
html.dark-mode a, html.dark-mode .listing li a { color:#6fdcff; }
html.dark-mode .btn-primary, html.dark-mode button.btn.btn-primary, html.dark-mode .button.submit, html.dark-mode .btn.mainaction, html.dark-mode #taskmenu a.compose, html.dark-mode .toolbar a.button.mainaction {
  background:linear-gradient(90deg,#00e5ff,#6fa8ff) !important; color:#06121a !important; border:0 !important; border-radius:12px !important; font-weight:700; box-shadow:0 0 18px rgba(0,229,255,.3); }
html.dark-mode .listing li.selected, html.dark-mode .listing li.focused, html.dark-mode table.messagelist tr.selected td,
html.dark-mode #taskmenu a.selected, html.dark-mode #taskmenu a:hover { background:rgba(0,229,255,.12) !important; color:#fff !important; }
html.dark-mode table.messagelist tr.unread td, html.dark-mode table.messagelist tr.unread a { color:#fff !important; font-weight:700; }
html.dark-mode .ui-dialog { border:1px solid rgba(0,229,255,.35) !important; box-shadow:0 0 50px rgba(0,229,255,.15) !important; border-radius:20px !important; }

/* Login */
html.dark-mode body.task-login, html.dark-mode body.action-login {
  background:radial-gradient(40vw 40vw at 15% 20%,rgba(0,229,255,.18),transparent 70%),radial-gradient(45vw 45vw at 85% 30%,rgba(155,107,255,.2),transparent 70%),#0a0a12 !important; }
html.dark-mode #login-form { background:rgba(255,255,255,.05) !important; border:1px solid rgba(0,229,255,.3) !important; border-radius:24px !important; box-shadow:0 0 60px rgba(0,229,255,.15); backdrop-filter:blur(12px); }
html.dark-mode #login-form .formcontent, html.dark-mode #login-form label { color:#e8e8f2 !important; }
html.dark-mode #logo { max-width:220px; }

/* Eigene Seiten */
.tk-box { max-width:560px; padding:24px !important; }
.tk-h { font-size:1.2rem; letter-spacing:.08em; margin-bottom:14px; background:linear-gradient(90deg,#00e5ff,#9b6bff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tk-f { margin-bottom:14px; } .tk-f label { display:block; margin-bottom:5px; opacity:.8; font-size:.9rem; }
.tk-btn { padding:10px 22px !important; }
.tk-warn { padding:12px 14px; border-radius:12px; border:1px solid rgba(255,170,0,.5); background:rgba(255,170,0,.1); color:#ffb84d; margin-bottom:16px; }
.tk-ok { padding:14px; border-radius:12px; border:1px solid rgba(93,255,176,.5); background:rgba(93,255,176,.08); margin-bottom:16px; }
.tk-ok code { font-size:1.15rem; color:#5dffb0; letter-spacing:.05em; user-select:all; }
.tk-t { width:100%; border-collapse:collapse; } .tk-t td { padding:9px 4px; border-bottom:1px solid rgba(255,255,255,.08); }
.tk-tag { font-size:.7rem; padding:2px 8px; border-radius:999px; background:rgba(255,170,0,.15); color:#ffb84d; margin-left:6px; }

/* Login Update: ohne Rahmen, animierter Hintergrund */
html.dark-mode body.task-login, html.dark-mode body.action-login {
  background:#07070e !important; position:relative; overflow:hidden; }
html.dark-mode body.task-login::before, html.dark-mode body.action-login::before {
  content:""; position:fixed; inset:-20%; z-index:0; pointer-events:none;
  background:radial-gradient(35vw 35vw at 20% 25%,rgba(31,182,255,.22),transparent 70%),radial-gradient(40vw 40vw at 80% 35%,rgba(155,107,255,.2),transparent 70%),radial-gradient(35vw 35vw at 50% 95%,rgba(255,70,130,.12),transparent 70%);
  animation:tkdrift 16s ease-in-out infinite alternate; }
html.dark-mode body.task-login::after, html.dark-mode body.action-login::after {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:48px 48px; animation:tkgrid 12s linear infinite; }
@keyframes tkdrift { to { transform:translate3d(4%,-3%,0) scale(1.12); } }
@keyframes tkgrid { to { background-position:48px 48px; } }
html.dark-mode #layout-content.no-navbar, html.dark-mode body.task-login #layout-content { position:relative; z-index:1; background:transparent !important; }
html.dark-mode #login-form { background:transparent !important; border:0 !important; box-shadow:none !important; backdrop-filter:none !important; outline:0 !important; }
html.dark-mode #login-form .formcontent, html.dark-mode #login-form table, html.dark-mode #login-form td { background:transparent !important; border:0 !important; }
html.dark-mode #logo { max-width:360px !important; width:360px; height:auto; margin-bottom:10px; }
html.dark-mode #login-form input.form-control { background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.12) !important; transition:.25s; }
html.dark-mode #login-form input.form-control:focus { border-color:#1fb6ff !important; box-shadow:0 0 0 3px rgba(31,182,255,.2),0 0 24px rgba(31,182,255,.25) !important; transform:translateY(-1px); }
html.dark-mode #login-form .input-group-text { background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.12) !important; color:#1fb6ff !important; }
html.dark-mode #login-form button.submit, html.dark-mode #login-form .button.mainaction { transition:transform .2s, box-shadow .2s; }
html.dark-mode #login-form button.submit:hover { transform:translateY(-2px); box-shadow:0 0 34px rgba(31,182,255,.55) !important; }
html.dark-mode #login-footer { opacity:.6; }

html.dark-mode #logo, html.dark-mode body.task-login #logo { max-width:380px !important; max-height:none !important; width:380px !important; height:auto !important; margin:0 auto 18px !important; display:block; }
html.dark-mode #login-footer { font-size:0 !important; }
html.dark-mode #login-footer::after { content:"© 2026 TASKL"; font-size:.85rem; letter-spacing:.08em; color:#8a8aa3; }

html.dark-mode #logo, html.dark-mode body.task-login #logo { max-width:min(640px,92vw) !important; width:min(640px,92vw) !important; }

html.dark-mode #login-footer::after { content:"© 2026 TASKL / Mail"; }

html.dark-mode #login-footer::after { content:"\00A9  2026 TASKL / Mail" !important; }

html.dark-mode #login-footer { display:none !important; }
#tk-foot { position:fixed; left:0; right:0; bottom:14px; text-align:center; z-index:5; font-size:.85rem; letter-spacing:.06em; color:#8a8aa3; }
#tk-foot a { color:#1fb6ff; text-decoration:none; }
#tk-foot a:hover { text-decoration:underline; }

html.dark-mode body:not(.task-login) #logo { width:64px !important; max-width:64px !important; height:auto !important; max-height:36px !important; margin:8px auto !important; display:block; position:static !important; }

/* Modern TASKL v2 */
html.dark-mode, html.dark-mode body, html.dark-mode body * { font-family:"Segoe UI Variable","Segoe UI",Inter,system-ui,-apple-system,Roboto,sans-serif; }
html.dark-mode .fa, html.dark-mode [class^="icon"], html.dark-mode [class*=" icon"], html.dark-mode .fas, html.dark-mode i { font-family:inherit; }
html.dark-mode body, html.dark-mode body.iframe, html.dark-mode body.task-mail, html.dark-mode body.task-settings, html.dark-mode body.task-addressbook, html.dark-mode body.action-preview, html.dark-mode body.action-show, html.dark-mode body.task-mail.action-compose,
html.dark-mode #layout, html.dark-mode #layout > div, html.dark-mode #layout-content, html.dark-mode .iframe-wrapper, html.dark-mode #messagecontframe, html.dark-mode .watermark,
html.dark-mode #message-content, html.dark-mode #messagebody, html.dark-mode .pagecontent, html.dark-mode .formcontent, html.dark-mode .propform, html.dark-mode fieldset, html.dark-mode #composebody, html.dark-mode .message-part, html.dark-mode div.message-part,
html.dark-mode .table, html.dark-mode table.propform, html.dark-mode .uibox, html.dark-mode .scroller, html.dark-mode .contentbox, html.dark-mode .boxcontent, html.dark-mode .iframe-content, html.dark-mode #layout-content > .content { background:#0a0a12 !important; color:#e4e6f0 !important; }
html.dark-mode #messagebody, html.dark-mode .message-htmlpart, html.dark-mode div.message-part div.pre { background:transparent !important; color:#e4e6f0 !important; }
html.dark-mode .header, html.dark-mode .toolbar, html.dark-mode .footer, html.dark-mode #layout-content .header, html.dark-mode .message-headers, html.dark-mode .header-title, html.dark-mode .subject { background:#0d0d18 !important; color:#f2f4fb !important; border-color:rgba(255,255,255,.06) !important; }
html.dark-mode .headers-table td, html.dark-mode .headers-table th, html.dark-mode .header-title, html.dark-mode label, html.dark-mode .form-check-label { color:#b9bdd0 !important; }
html.dark-mode .toolbar a.button, html.dark-mode .toolbar a.button span.inner { color:#cfd3e6 !important; transition:color .2s, transform .2s; }
html.dark-mode .toolbar a.button:not(.disabled):hover { color:#00e5ff !important; transform:translateY(-1px); }
html.dark-mode .listing li, html.dark-mode table.records-table td, html.dark-mode table.messagelist td, html.dark-mode table.messagelist tr { background:transparent !important; border-color:rgba(255,255,255,.05) !important; color:#d9dcec !important; transition:background .2s; }
html.dark-mode table.messagelist tr:hover td, html.dark-mode .listing li:hover { background:rgba(0,229,255,.07) !important; }
html.dark-mode table.messagelist td.subject span.subject { font-weight:600; letter-spacing:.1px; }
html.dark-mode table.messagelist span.fromto, html.dark-mode table.messagelist span.date { color:#8f95b0 !important; font-size:.85em; }
html.dark-mode .recordsbar, html.dark-mode .pagenav, html.dark-mode .searchbar { background:#0d0d18 !important; }
html.dark-mode .iframe-wrapper, html.dark-mode #layout-content { border-left:1px solid rgba(0,229,255,.12); }
html.dark-mode ::-webkit-scrollbar { width:9px; height:9px; }
html.dark-mode ::-webkit-scrollbar-thumb { background:rgba(0,229,255,.25); border-radius:9px; }
html.dark-mode ::-webkit-scrollbar-track { background:transparent; }
html.dark-mode #taskmenu a { border-radius:14px; margin:3px 6px; transition:background .2s, transform .2s; }
html.dark-mode #taskmenu a:hover { transform:translateX(2px); }
html.dark-mode .popover, html.dark-mode .popupmenu, html.dark-mode .ui-dialog { backdrop-filter:blur(14px); border-radius:16px !important; border:1px solid rgba(0,229,255,.2) !important; box-shadow:0 18px 60px rgba(0,0,0,.55) !important; }
html.dark-mode .popover .popover-header, html.dark-mode .ui-dialog-titlebar { background:transparent !important; }

html.dark-mode #messagebody, html.dark-mode #messagebody div, html.dark-mode .rcmBody, html.dark-mode div.message-part, html.dark-mode div.message-htmlpart, html.dark-mode #message-content, html.dark-mode #messagebody .message-part, html.dark-mode div.pre, html.dark-mode .rcmBody div { background:transparent !important; background-color:transparent !important; color:#dfe2f0 !important; }
html.dark-mode #messagebody blockquote, html.dark-mode .rcmBody blockquote { border-left:3px solid rgba(0,229,255,.45) !important; background:rgba(255,255,255,.03) !important; padding:4px 12px; border-radius:0 10px 10px 0; color:#aab0c8 !important; }
html.dark-mode #messagebody a, html.dark-mode .rcmBody a { color:#6fdcff !important; }
html.dark-mode #messagebody, html.dark-mode .message-headers, html.dark-mode .header-headers { max-width:none; }

html.dark-mode #messagebody blockquote, html.dark-mode .rcmBody blockquote, html.dark-mode blockquote { background:#10101c !important; background-color:#10101c !important; color:#aab0c8 !important; border-left:3px solid rgba(0,229,255,.45) !important; }
html.dark-mode blockquote blockquote { background:#151526 !important; background-color:#151526 !important; border-left-color:rgba(120,120,255,.55) !important; }
html.dark-mode blockquote *, html.dark-mode blockquote div { color:#aab0c8 !important; background:transparent !important; }
html.dark-mode blockquote a { color:#6fdcff !important; }
html.dark-mode #taskmenu a { margin:2px 0 !important; border-radius:0 !important; transform:none !important; }
html.dark-mode #layout-menu .footer a, html.dark-mode #layout-menu .footer button { background:transparent !important; }
html.dark-mode #taskmenu a.compose, html.dark-mode #taskmenu a.compose:hover { border-radius:14px !important; margin:6px 4px !important; }