:root {
    --cx-primary: #0b5fff;
    --cx-primary-dark: #0847bf;
    --cx-accent: #0ea5e9;
    --cx-bg: #f4f7fb;
    --cx-surface: #ffffff;
    --cx-text: #1e293b;
    --cx-muted: #64748b;
    --cx-border: #dbe3ef;
    --cx-shadow: 0 10px 30px rgba(2, 8, 23, 0.08);
}

body {
    background: linear-gradient(145deg, #eef4ff 0%, #f7fbff 45%, #f5f8fb 100%);
    color: var(--cx-text);
}

/* Login page */
body.task-login #layout {
    min-height: 100vh;
}

body.task-login #layout-content {
    width: min(440px, calc(100vw - 36px));
    margin: 5vh auto 0 auto;
    padding: 28px 30px 24px 30px;
    background: var(--cx-surface);
    border: 1px solid var(--cx-border);
    border-radius: 18px;
    box-shadow: var(--cx-shadow);
}

body.task-login #logo {
    margin-bottom: 18px;
}

body.task-login #login-form .form-control {
    border-radius: 10px;
    border-color: #cdd8e8;
}

body.task-login #login-form .btn-primary,
body.task-login #login-form button[type="submit"] {
    border-radius: 10px;
    background: linear-gradient(90deg, var(--cx-primary) 0%, var(--cx-accent) 100%);
    border: none;
}

body.task-login #login-form .btn-primary:hover,
body.task-login #login-form button[type="submit"]:hover {
    background: linear-gradient(90deg, var(--cx-primary-dark) 0%, #0284c7 100%);
}

/* Main app polish */
#layout-menu,
#layout-sidebar,
#layout-list,
#layout-content {
    border-color: var(--cx-border);
}

.listing .selected > td,
.listing li.selected,
.listing tr.selected {
    background: #e8f0ff !important;
}

a,
.button,
.btn {
    transition: all 0.18s ease;
}

.button.primary,
.btn-primary {
    background-color: var(--cx-primary) !important;
    border-color: var(--cx-primary) !important;
}

.button.primary:hover,
.btn-primary:hover {
    background-color: var(--cx-primary-dark) !important;
    border-color: var(--cx-primary-dark) !important;
}

#taskmenu .selected a,
#taskmenu a:focus,
#taskmenu a:hover {
    color: var(--cx-primary);
}

.boxfooter,
.header,
.footer {
    background: #f8fbff;
}