/* =========================================================
   Demmel-Kfz Custom Theme
   ========================================================= */

/* Grundfarben */
:root {
    --demmel-blue: #2f6bff;
    --demmel-magenta: #ff00b7;
    --demmel-dark: #111318;
    --demmel-light: #f4f5f7;
}

/* Login-Hintergrund */
body.task-login {
    background:
        radial-gradient(circle at top left, rgba(47, 107, 255, 0.12), transparent 35%),
        radial-gradient(circle at bottom right, rgba(255, 0, 183, 0.10), transparent 35%),
        #f4f5f7;
}

/* Login-Box */
#login-form {
    border-radius: 18px;
    padding: 28px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 18px 50px rgba(17, 19, 24, 0.12),
        0 0 0 1px rgba(17, 19, 24, 0.05);
}

/* Logo */
#logo {
    margin-bottom: 22px;
}

#logo img {
    max-width: 280px;
    height: auto;
}

/* Eingabefelder */
#login-form input {
    border-radius: 10px;
}

/* Login-Button */
#login-form .button.mainaction {
    border: 0;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        var(--demmel-blue),
        var(--demmel-magenta)
    );
    box-shadow: 0 8px 20px rgba(47, 107, 255, 0.20);
}

#login-form .button.mainaction:hover {
    filter: brightness(1.06);
}

/* Slogan / Footer */
#login-footer {
    color: #6b7280;
    font-size: 13px;
    letter-spacing: 0.03em;
}

/* Hauptnavigation */
#taskmenu a.selected,
#taskmenu a:hover {
    color: var(--demmel-blue);
}

/* Aktive Ordner / Auswahl */
.listing li.selected,
.listing tr.selected td {
    background: rgba(47, 107, 255, 0.10);
}

/* Links */
a {
    color: var(--demmel-blue);
}
#login-form .button.mainaction {
    background: linear-gradient(90deg, #2f6bff, #ff00b7) !important;
}
#login-form {
    transform: translateY(-35px);
}
/* hier neu */
#taskmenu {
    background: #16181d;
}

#taskmenu a {
    color: #d7d9de;
}

#taskmenu a:hover,
#taskmenu a.selected {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        rgba(47, 107, 255, 0.24),
        rgba(255, 0, 183, 0.18)
    );
}

#taskmenu a.selected::before {
    color: #ff00b7;
}

.btn-primary,
.button.mainaction,
button.mainaction,
input.mainaction {
    border: 0 !important;
    border-radius: 9px !important;
    background: linear-gradient(
        90deg,
        #2f6bff,
        #ff00b7
    ) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(47, 107, 255, 0.20);
}

.btn-primary:hover,
.button.mainaction:hover,
button.mainaction:hover {
    filter: brightness(1.08);
}

.listing li.selected,
.listing tr.selected td,
.messagelist tr.selected td {
    background: linear-gradient(
        90deg,
        rgba(47, 107, 255, 0.14),
        rgba(255, 0, 183, 0.07)
    ) !important;
}

.folderlist li.selected > a {
    color: #2f6bff !important;
    font-weight: 600;
}

.toolbar,
#layout-list .header,
#layout-content .header,
#layout-sidebar .header {
    background: #f7f8fa;
    border-bottom: 1px solid #dfe3e8;
}

.toolbar a:hover,
.toolbar button:hover {
    background: rgba(47, 107, 255, 0.09);
    color: #2f6bff;
}

body,
button,
input,
select,
textarea {
    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}
.form-control,
input,
textarea,
select {
    border-radius: 8px;
    border-color: #cfd5dc;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: #2f6bff !important;
    box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.14) !important;
}

.messagelist tr.unread td {
    font-weight: 650;
}

.messagelist tr.unread td:first-child {
    border-left: 3px solid #ff00b7;
}
:root {
    --demmel-blue: #2f6bff;
    --demmel-magenta: #ff00b7;
    --demmel-dark: #16181d;
    --demmel-gray: #6b7280;
    --demmel-success: #2f9e63;
    --demmel-warning: #d88a16;
    --demmel-danger: #c83b4d;
}

html.dark-mode body {
    background: #111318;
    color: #e8e9ec;
}

html.dark-mode #taskmenu {
    background: #0c0e12;
}

html.dark-mode .toolbar,
html.dark-mode #layout-list .header,
html.dark-mode #layout-content .header {
    background: #181b21;
    border-color: #292d35;
}

html.dark-mode .listing tr.selected td {
    background: linear-gradient(
        90deg,
        rgba(47, 107, 255, 0.26),
        rgba(255, 0, 183, 0.14)
    ) !important;
}