/* WSD version 1.0.5 | 2026-11-05 15:07 +01:00 | Linjer: 2-330 (farver, originalt logo, fuld baggrund og moerk tilstand) */
:root {
    --wsd-ink: #172840;
    --wsd-muted: #52637b;
    --wsd-brand: #1d63ed;
    --wsd-brand-hover: #124dcc;
    --wsd-accent: #1d63ed;
    --wsd-nav: #0b1e38;
    --wsd-nav-text: #e3ebf8;
    --wsd-canvas: #f0f5fc;
    --wsd-panel: #ffffff;
    --wsd-soft: #f5f8fd;
    --wsd-line: #dce5f0;
    --wsd-selected: #e6efff;
    --wsd-focus: #1d63ed;
    --wsd-shadow: 0 20px 65px rgb(12 38 58 / 14%);
}
html.dark-mode {
    --wsd-ink: #e1ebf1;
    --wsd-muted: #a8bdcc;
    --wsd-brand: #9cc3ff;
    --wsd-brand-hover: #c3daff;
    --wsd-canvas: #0c1e2b;
    --wsd-panel: #142b3a;
    --wsd-soft: #193443;
    --wsd-line: #304b5b;
    --wsd-selected: #193d70;
    --wsd-focus: #9cc3ff;
}
@media screen {
    body {
        color: var(--wsd-ink);
        background: var(--wsd-canvas);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    }
    a { color: var(--wsd-brand); }
    a:hover { color: var(--wsd-brand-hover); }
    a:focus-visible, button:focus-visible, input:focus-visible,
    select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
        outline: 3px solid var(--wsd-focus);
        outline-offset: 3px;
    }
    #layout-menu, #layout-menu .popover-header, #taskmenu {
        background: var(--wsd-nav) !important;
        color: var(--wsd-nav-text);
    }
    #layout-menu .popover-header { border-color: #294566; }
    #layout-menu .wsd-brandmark {
        display: inline-flex;
        align-items: center;
        width: 64px;
        height: 38px;
        padding: 3px;
        overflow: hidden;
        border-radius: 6px;
        background: #fff;
        vertical-align: middle;
    }
    #layout-menu .wsd-brandmark #logo {
        display: block;
        flex: none;
        width: 167.36px;
        height: 21px;
        max-width: none;
        max-height: none;
        padding: 0;
        margin: 0;
    }
    #taskmenu a, #layout-menu .popover-header a {
        color: var(--wsd-nav-text);
        border-radius: 9px;
    }
    #taskmenu a:hover, #taskmenu a:focus {
        color: #fff;
        background-color: #1b365c;
    }
    #taskmenu a.selected {
        color: #fff;
        background-color: #1b426d;
        box-shadow: inset 3px 0 var(--wsd-accent);
    }
    #taskmenu .action-buttons a.compose {
        color: #fff;
        background: var(--wsd-accent);
        border-radius: 10px;
        margin: 8px 5px 15px;
        width: auto;
    }
    #taskmenu .action-buttons a.compose:hover { background: #124dcc; }
    #taskmenu .special-buttons a.logout:hover { background: #b42332; }
    #layout-sidebar, #layout-list, #layout-content {
        border-color: var(--wsd-line);
        background-color: var(--wsd-panel);
    }
    #layout-sidebar { background-color: var(--wsd-soft); }
    #layout > div > .header, #layout > div > .footer {
        color: var(--wsd-ink);
        background-color: var(--wsd-panel);
        border-color: var(--wsd-line);
    }
    #layout > div > .header .button { color: var(--wsd-ink); }
    .username { color: var(--wsd-muted); font-weight: 600; }
    .searchbar {
        background-color: var(--wsd-soft);
        border-color: var(--wsd-line);
    }
    .searchbar input { color: var(--wsd-ink); }
    ul.treelist li > div, ul.treelist li > a {
        color: var(--wsd-ink);
        border-radius: 7px;
    }
    ul.treelist li.selected > div, ul.treelist li.selected > a,
    ul.treelist li > div:hover, ul.treelist li > a:hover {
        color: var(--wsd-ink);
        background-color: var(--wsd-selected);
    }
    ul.treelist li.selected > div, ul.treelist li.selected > a {
        box-shadow: inset 3px 0 var(--wsd-brand);
        font-weight: 600;
    }
    ul.treelist .unreadcount {
        color: var(--wsd-panel);
        background: var(--wsd-brand);
        border-radius: 20px;
    }
    .listing, .listing tbody td, .listing li {
        color: var(--wsd-ink);
        border-color: var(--wsd-line);
    }
    .listing tbody tr:not(.selected):hover td,
    .listing li:not(.selected):hover {
        background-color: var(--wsd-soft);
    }
    .listing tbody tr.selected td, .listing li.selected {
        color: var(--wsd-ink);
        background-color: var(--wsd-selected);
    }
    .messagelist tr.unread td { font-weight: 650; }
    .messagelist td.subject { padding-top: 12px; padding-bottom: 12px; }
    .messagelist .date, .messagelist .size { color: var(--wsd-muted); }
    .form-control, .custom-select, .input-group-text,
    .formcontent, .formcontainer, .propform, .boxcontent {
        color: var(--wsd-ink);
        border-color: var(--wsd-line);
        background-color: var(--wsd-panel);
    }
    .form-control, .custom-select { border-radius: 8px; }
    .form-control:focus, .custom-select:focus {
        border-color: var(--wsd-brand);
        box-shadow: 0 0 0 3px rgb(29 99 237 / 18%);
    }
    .form-control::placeholder { color: var(--wsd-muted); opacity: 1; }
    .btn { border-radius: 8px; font-weight: 600; }
    .btn-primary, .btn-primary.disabled, .btn-primary:disabled {
        color: #fff;
        background-color: #1d63ed;
        border-color: #1d63ed;
    }
    .btn-primary:not(:disabled):not(.disabled):hover,
    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:focus {
        color: #fff;
        background-color: #124dcc;
        border-color: #124dcc;
    }
    .btn-secondary {
        color: var(--wsd-ink);
        background: var(--wsd-soft);
        border-color: var(--wsd-line);
    }
    .popover, .ui-dialog {
        color: var(--wsd-ink);
        background-color: var(--wsd-panel);
        border-color: var(--wsd-line);
        border-radius: 12px;
        box-shadow: var(--wsd-shadow);
    }
    .popover .popover-header, .ui-dialog .ui-dialog-titlebar,
    .ui-dialog .ui-dialog-buttonpane {
        color: var(--wsd-ink);
        background: var(--wsd-soft);
        border-color: var(--wsd-line);
    }
    .popupmenu .listing li a { color: var(--wsd-ink); }
    .popupmenu .listing li a:hover { background: var(--wsd-selected); }
    .toolbar a { color: var(--wsd-ink); }
    .toolbar a:hover { color: var(--wsd-brand); }
    .toolbar a.disabled { opacity: .45; }
    fieldset legend, .formcontent h2, .formcontent h3 {
        color: var(--wsd-ink);
        font-weight: 600;
    }
    #compose-subject { font-weight: 600; }
    html {
        min-height: 100%;
        background: var(--wsd-nav);
    }
    .task-login {
        min-height: 100vh;
        min-height: 100dvh;
        margin: 0;
        overflow: auto;
        background: var(--wsd-nav);
    }
    .task-login #layout {
        box-sizing: border-box;
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        height: auto;
        padding: 60px 20px;
        align-items: center;
        justify-content: center;
        background: var(--wsd-nav);
    }
    .task-login #layout-content {
        width: 100%;
        max-width: 420px;
        flex: 0 1 420px;
        margin: auto;
        padding: 38px 32px 22px;
        border: 1px solid var(--wsd-line);
        border-radius: 20px;
        background: var(--wsd-panel);
        box-shadow: var(--wsd-shadow);
    }
    .task-login #logo {
        display: block;
        position: static;
        top: auto;
        width: 100%;
        height: auto;
        max-width: 340px;
        max-height: none;
        margin: 0 auto 30px;
        padding: 10px;
        border-radius: 6px;
        background: #fff;
        object-fit: contain;
    }
    .task-login #login-form {
        position: static;
        top: auto;
        width: 100%;
        max-width: none;
        margin: 0;
    }
    .task-login #login-form .input-group { margin-bottom: 16px; }
    .task-login #login-form .form-control { height: 46px; }
    .task-login #login-form .input-group-text {
        color: var(--wsd-muted);
        background: var(--wsd-soft);
        border-radius: 8px 0 0 8px;
    }
    .task-login #login-form .input-group .form-control {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .task-login #login-form .btn-primary {
        width: 100%;
        min-height: 46px;
        margin-top: 5px;
    }
    .task-login #login-footer {
        position: static;
        width: auto;
        color: var(--wsd-muted);
        text-align: center;
        margin-top: 26px;
        padding: 0;
        font-size: 12px;
        line-height: 1.7;
    }
    @media (min-width: 481px) {
        #folderlist-content, #directorylist-content { padding: 8px; }
    }
    @media (max-width: 480px) {
        .task-login #layout { padding: 26px 14px; }
        .task-login #layout-content { padding: 30px 22px 20px; }
        #taskmenu .action-buttons a.compose { margin: 8px; }
    }
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { scroll-behavior: auto !important; }
    }
    html.dark-mode body,
    html.dark-mode #layout-content,
    html.dark-mode #layout-list,
    html.dark-mode #layout-sidebar {
        color: var(--wsd-ink);
        background-color: var(--wsd-panel);
    }
    html.dark-mode #layout-sidebar { background-color: var(--wsd-soft); }
    html.dark-mode .form-control,
    html.dark-mode .custom-select,
    html.dark-mode .input-group-text {
        color: var(--wsd-ink);
        background-color: var(--wsd-panel);
        border-color: var(--wsd-line);
    }
    html.dark-mode .btn-primary,
    html.dark-mode .btn-primary:disabled {
        color: #fff;
        background-color: #1d63ed;
        border-color: #1d63ed;
    }
    html.dark-mode .btn-primary:hover,
    html.dark-mode .btn-primary:focus {
        color: #fff;
        background-color: #124dcc;
        border-color: #124dcc;
    }
    html.dark-mode .task-login {
        background: var(--wsd-nav);
    }
    html.dark-mode .task-login #layout-content {
        color: var(--wsd-ink);
        background: var(--wsd-panel);
    }
    html.dark-mode .task-login #login-form {
        background: transparent;
    }
    html.dark-mode .task-login #logo,
    html.dark-mode #layout-menu .wsd-brandmark #logo {
        opacity: 1;
        filter: none;
    }
    html.dark-mode .task-login #login-footer {
        color: var(--wsd-muted);
    }
}