:root {
    --ws-accent: #169b62;
    --ws-accent-strong: #0f7a4c;
    --ws-accent-soft: rgba(22, 155, 98, 0.12);
    --ws-ink: #111827;
    --ws-border: rgba(15, 23, 42, 0.08);
    --ws-surface: rgba(255, 255, 255, 0.88);
    --ws-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
    --ws-sidebar: #0f172a;
    --ws-sidebar-edge: rgba(255, 255, 255, 0.08);
}

a {
    color: var(--ws-accent);
}

a:hover {
    color: var(--ws-accent-strong);
}

.btn-primary {
    background: linear-gradient(135deg, var(--ws-accent) 0%, #22c55e 100%);
    border-color: var(--ws-accent);
}

.button.mainaction,
button.button.mainaction,
#rcmloginsubmit {
    color: #fff;
    background: linear-gradient(135deg, var(--ws-accent) 0%, #22c55e 100%);
    border-color: var(--ws-accent);
}

.btn-primary:hover:not(:disabled),
.btn-primary:focus:not(:disabled),
.button.mainaction:hover,
.button.mainaction:focus,
button.button.mainaction:hover,
button.button.mainaction:focus,
#rcmloginsubmit:hover,
#rcmloginsubmit:focus {
    background: linear-gradient(135deg, var(--ws-accent-strong) 0%, #16a34a 100%);
    border-color: var(--ws-accent-strong);
}

.btn-primary:focus,
.form-control:focus,
.custom-file-label:focus,
.recipient-input.focus,
.input-group a:focus {
    border-color: var(--ws-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(22, 155, 98, 0.18) !important;
}

.listing li.selected,
.listing li.selected > a,
.listing li.selected > div > a,
.listing tr.selected td,
.table-widget table.options-table tr.selected td {
    background-color: var(--ws-accent-soft);
    color: var(--ws-ink);
}

.folderlist li.mailbox .unreadcount {
    background-color: rgba(22, 155, 98, 0.14);
    color: var(--ws-accent-strong);
    font-weight: 700;
}

.floating-action-buttons a.button,
.quota-widget .value {
    background-color: var(--ws-accent);
}

#layout > div > .header {
    background: #f7faf8;
}

#layout-menu {
    background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
}

#layout-menu .popover-header {
    border-bottom: 1px solid var(--ws-sidebar-edge);
    background: transparent !important;
}

#layout-menu .popover-header img {
    max-width: 42px;
}

html.layout-phone #layout-menu .popover-header img {
    max-width: 168px;
}

#taskmenu a.selected {
    color: #86efac !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

#taskmenu a:hover,
#taskmenu .special-buttons a:hover,
#taskmenu .action-buttons a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

#taskmenu .action-buttons a,
#taskmenu .special-buttons a.theme {
    color: #86efac;
}

#taskmenu a.about {
    display: none;
}

body.task-login {
    overflow: auto;
    background:
        radial-gradient(circle at top left, rgba(34, 197, 94, 0.16), transparent 30%),
        radial-gradient(circle at right 10%, rgba(15, 23, 42, 0.08), transparent 28%),
        linear-gradient(135deg, #f8fbf9 0%, #eef5f1 48%, #f8fafc 100%);
}

body.task-login::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.55;
}

.task-login #layout-content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    padding: 2rem 1.5rem 3rem;
}

.task-login #logo {
    top: auto;
    display: block;
    width: min(340px, 82vw);
    max-height: none;
    height: auto;
    margin: 8vh auto 1.75rem;
}

#login-form {
    top: auto;
    width: min(100%, 430px);
    max-width: 430px;
    padding: 1.75rem;
    background: var(--ws-surface);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 28px;
    box-shadow: var(--ws-shadow);
    backdrop-filter: blur(18px);
}

#login-form table,
#login-form tbody {
    width: 100%;
}

#login-form table {
    display: table;
    border-collapse: separate;
    border-spacing: 0 0.85rem;
}

#login-form tbody {
    display: table-row-group;
}

#login-form tr {
    display: block;
}

#login-form td {
    display: block;
    width: 100%;
    padding: 0;
}

#login-form td.title {
    margin-bottom: 0.35rem;
    text-align: left;
}

#login-form td.title label {
    display: block;
    color: #334155;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

#login-form td.input {
    text-align: left;
}

#login-form .input-group,
#login-form .input-group-prepend,
#login-form .input-group-append {
    display: block;
    width: 100%;
}

#login-form .form-control,
#login-form .custom-select {
    width: 100%;
    min-height: 50px;
    border-radius: 14px;
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.94);
}

#login-form .input-group-text {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 14px 0 0 14px;
}

#login-form .input-group-text:before,
#login-form .icon:before,
#login-form a.button:before,
#login-form button.btn:before {
    display: none !important;
    content: none !important;
}

#login-form .input-group-append,
#login-form .input-group-prepend {
    margin: 0;
}

#login-form .input-group-append .input-group-text,
#login-form .input-group-prepend .input-group-text,
#login-form .input-group-append a,
#login-form .input-group-prepend a {
    display: none !important;
}

#login-form .input-group > .form-control,
#login-form .input-group > .custom-select,
#login-form .input-group > input,
#login-form .input-group > select {
    border-radius: 14px !important;
}

#login-form .formbuttons .btn,
#rcmloginsubmit {
    width: 100%;
    min-height: 50px;
    border-radius: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

#login-footer {
    color: #4b5563;
}

#login-form .hint,
#login-form .form-error,
#login-form .text-danger {
    text-align: left;
}

#login-footer > div {
    margin-top: 1.25rem;
    background: rgba(248, 250, 252, 0.72);
    border: 1px solid var(--ws-border);
}

#messagestack {
    width: min(100%, 430px);
    margin: 1rem auto 0;
}

@media screen and (max-width: 480px) {
    .task-login #layout-content {
        padding: 1.25rem 1rem 2rem;
    }

    .task-login #logo {
        width: min(280px, 80vw);
        margin-top: 3rem;
    }

    #login-form {
        padding: 1.2rem;
        border-radius: 22px;
    }
}

html.dark-mode {
    --ws-accent: #34d399;
    --ws-accent-strong: #10b981;
    --ws-accent-soft: rgba(52, 211, 153, 0.16);
}

html.dark-mode .btn-primary {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    border-color: #059669;
}

html.dark-mode .btn-primary:hover:not(:disabled),
html.dark-mode .btn-primary:focus:not(:disabled),
html.dark-mode .button.mainaction:hover,
html.dark-mode .button.mainaction:focus,
html.dark-mode button.button.mainaction:hover,
html.dark-mode button.button.mainaction:focus,
html.dark-mode #rcmloginsubmit:hover,
html.dark-mode #rcmloginsubmit:focus {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    border-color: #047857;
}

html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a,
html.dark-mode .listing tr.selected td,
html.dark-mode .table-widget table.options-table tr.selected td {
    color: #d1fae5;
}

html.dark-mode .folderlist li.mailbox .unreadcount {
    background-color: rgba(52, 211, 153, 0.18);
    color: #a7f3d0;
}

html.dark-mode #login-form td.title label {
    color: #cbd5e1;
}