/*
 * Application theme.
 * Shared by every web app that references z3lib.web, served as /dx/app-theme.css.
 * Load it AFTER bootstrap.min.css and dx.light(.compact).css.
 * Re-brand by overriding the --app-accent* variables in the app css.
 */

:root {
    --app-font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

    --app-accent: #2d5bd3;
    --app-accent-hover: #2449ad;
    --app-accent-active: #1d3a8a;
    --app-accent-soft: #eef3fd;
    --app-accent-soft-2: #dde7fb;
    --app-accent-ring: rgba(45, 91, 211, .18);

    --app-bg: #f6f7f9;
    --app-surface: #ffffff;
    --app-surface-2: #f9fafb;
    --app-border: #e5e7eb;
    --app-border-strong: #d1d5db;
    --app-text: #111827;
    --app-text-2: #374151;
    --app-muted: #6b7280;

    --app-success: #15803d;
    --app-success-soft: #e8f6ec;
    --app-danger: #b91c1c;
    --app-danger-soft: #fdecec;

    --app-radius-sm: 6px;
    --app-radius: 8px;
    --app-radius-lg: 12px;
    --app-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --app-shadow: 0 4px 16px rgba(16, 24, 40, .08);
    --app-shadow-lg: 0 12px 32px rgba(16, 24, 40, .14);

    --app-header-h: 56px;
    --app-gutter: 24px;
}

/* ------------------------------------------------------------------ */
/* Base                                                               */
/* ------------------------------------------------------------------ */

html, body {
    font-family: var(--app-font);
    color: var(--app-text);
    -webkit-font-smoothing: antialiased;
}

body.app-app {
    padding-top: var(--app-header-h);
    background: var(--app-bg);
    font-size: 14px;
}

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

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

.material-icons {
    vertical-align: middle;
}

::selection {
    background: var(--app-accent-soft-2);
}

/* ------------------------------------------------------------------ */
/* Header                                                             */
/* ------------------------------------------------------------------ */

.app-header.navbar {
    height: var(--app-header-h);
    padding: 0 20px;
    background: var(--app-surface);
    border-bottom: 1px solid var(--app-border);
    box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
    flex-wrap: nowrap;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 28px;
    color: var(--app-text);
    text-decoration: none;
    white-space: nowrap;
}

    .app-brand:hover {
        color: var(--app-text);
        text-decoration: none;
    }

    .app-brand img {
        height: 28px;
        width: auto;
        display: block;
    }

.app-brand-divider {
    width: 1px;
    height: 22px;
    background: var(--app-border);
}

.app-brand-app {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.app-header .navbar-collapse {
    height: 100%;
    align-items: stretch;
}

.app-header .navbar-nav {
    height: 100%;
    gap: 2px;
}

    .app-header .navbar-nav .nav-item {
        display: flex;
        align-items: stretch;
        position: relative;
    }

    .app-header .navbar-nav .nav-link {
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 0 12px;
        color: var(--app-text-2);
        font-size: 13.5px;
        font-weight: 500;
        line-height: 1;
        border-radius: 0;
        transition: color .15s ease, background-color .15s ease;
    }

        .app-header .navbar-nav .nav-link:hover,
        .app-header .navbar-nav .nav-link:focus {
            color: var(--app-text);
            background: var(--app-surface-2);
        }

        .app-header .navbar-nav .nav-link:focus {
            outline: none;
        }

        .app-header .navbar-nav .nav-link:focus-visible {
            box-shadow: inset 0 0 0 2px var(--app-accent-ring);
        }

    .app-header .navbar-nav .nav-item.active > .nav-link,
    .app-header .navbar-nav .nav-item.show > .nav-link {
        color: var(--app-text);
    }

    .app-header .navbar-nav .nav-item.active::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: -1px;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: var(--app-accent);
    }

.app-header .dropdown-toggle::after {
    margin-left: 4px;
    border-top-width: 5px;
    border-right-width: 4px;
    border-left-width: 4px;
    opacity: .6;
}

.app-header .dropdown-menu {
    margin-top: 6px;
    padding: 6px;
    min-width: 260px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    box-shadow: var(--app-shadow-lg);
    font-size: 13.5px;
}

.app-header .dropdown-item {
    padding: 7px 12px;
    border-radius: var(--app-radius-sm);
    color: var(--app-text-2);
}

    .app-header .dropdown-item:hover,
    .app-header .dropdown-item:focus {
        background: var(--app-surface-2);
        color: var(--app-text);
    }

    .app-header .dropdown-item.active,
    .app-header .dropdown-item:active {
        background: var(--app-accent-soft);
        color: var(--app-accent);
        font-weight: 500;
    }

.app-header .dropdown-header {
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--app-muted);
}

.app-header .dropdown-divider {
    margin: 6px 0;
    border-color: var(--app-border);
}

.app-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding-left: 16px;
    white-space: nowrap;
}

.app-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--app-accent-soft);
    color: var(--app-accent);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.app-user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--app-text-2);
}

.app-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--app-radius);
    display: grid;
    place-items: center;
    color: var(--app-muted);
    background: transparent;
    border: 0;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

    .app-icon-btn:hover,
    .app-icon-btn:focus {
        background: var(--app-surface-2);
        color: var(--app-text);
        text-decoration: none;
    }

    .app-icon-btn .material-icons {
        font-size: 20px;
    }

.app-header .navbar-toggler {
    border: 0;
    padding: 6px;
    margin-left: auto;
    color: var(--app-text-2);
}

    .app-header .navbar-toggler:focus {
        outline: none;
        box-shadow: 0 0 0 3px var(--app-accent-ring);
    }

/* mobile menu */
@media (max-width: 767.98px) {
    .app-header.navbar {
        flex-wrap: wrap;
    }

    .app-header .navbar-collapse {
        position: absolute;
        top: var(--app-header-h);
        left: 0;
        right: 0;
        height: auto;
        background: var(--app-surface);
        border-bottom: 1px solid var(--app-border);
        box-shadow: var(--app-shadow);
        padding: 8px 12px 12px;
    }

    .app-header .navbar-nav {
        height: auto;
    }

        .app-header .navbar-nav .nav-link {
            padding: 10px 12px;
            border-radius: var(--app-radius-sm);
        }

        .app-header .navbar-nav .nav-item.active::after {
            display: none;
        }

        .app-header .navbar-nav .nav-item.active > .nav-link {
            background: var(--app-accent-soft);
            color: var(--app-accent);
        }

    .app-header .navbar-nav .nav-item {
        flex-direction: column;
    }

    .app-header .dropdown-menu {
        box-shadow: none;
        border: 0;
        padding-left: 12px;
    }

    .app-user {
        margin: 8px 0 0;
        padding: 10px 12px 0;
        border-top: 1px solid var(--app-border);
    }
}

/* ------------------------------------------------------------------ */
/* Page head (breadcrumbs + title)                                    */
/* ------------------------------------------------------------------ */

.app-pagehead {
    padding: 18px var(--app-gutter) 6px;
}

    .app-pagehead .breadcrumb {
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        font-size: 12.5px;
        line-height: 1.4;
    }

    .app-pagehead .breadcrumb-item {
        color: var(--app-muted);
        display: flex;
        align-items: center;
    }

        .app-pagehead .breadcrumb-item a {
            color: var(--app-muted);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
        }

            .app-pagehead .breadcrumb-item a:hover {
                color: var(--app-accent);
            }

        .app-pagehead .breadcrumb-item.active {
            color: var(--app-text-2);
        }

        .app-pagehead .breadcrumb-item + .breadcrumb-item {
            padding-left: 6px;
        }

            .app-pagehead .breadcrumb-item + .breadcrumb-item::before {
                content: "/";
                padding-right: 6px;
                color: var(--app-border-strong);
            }

        .app-pagehead .breadcrumb-item .dx-icon-home {
            font-size: 14px;
            line-height: 1;
        }

.app-page-title {
    margin: 4px 0 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.3;
    color: var(--app-text);
}

/* content area produced by pages */
.app-main > .container-fluid,
.app-main .container-fluid.mt-2 {
    padding-left: var(--app-gutter);
    padding-right: var(--app-gutter);
}

.app-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-sm);
}

/* status badges (bootstrap .badge-*) in a soft corporate style */
.app-main .badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
}

    .app-main .badge::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

.app-main .badge-success { background: var(--app-success-soft); color: var(--app-success); }
.app-main .badge-danger { background: var(--app-danger-soft); color: var(--app-danger); }
.app-main .badge-warning { background: #fef6e7; color: #b45309; }
.app-main .badge-primary { background: var(--app-accent-soft); color: var(--app-accent); }
.app-main .badge-info { background: #e8f3fb; color: #0369a1; }
.app-main .badge-secondary { background: #f1f2f4; color: var(--app-muted); }

/* charts pages: the chart container becomes a card */
.app-main .chart-area {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-sm);
    padding: 12px 16px 8px;
    margin-left: var(--app-gutter);
    margin-right: var(--app-gutter);
    width: auto;
}

@media (max-width: 767.98px) {
    :root {
        --app-gutter: 12px;
    }
}

/* ------------------------------------------------------------------ */
/* DevExtreme: typography                                             */
/* ------------------------------------------------------------------ */

.dx-widget,
.dx-widget input,
.dx-widget textarea,
.dx-overlay-wrapper,
.dx-overlay-wrapper input,
.dx-overlay-wrapper textarea {
    font-family: var(--app-font);
}

.dx-widget {
    color: var(--app-text);
}

/* ------------------------------------------------------------------ */
/* DevExtreme: buttons                                                */
/* ------------------------------------------------------------------ */

.dx-button {
    border-radius: var(--app-radius);
}

.dx-button-mode-contained.dx-button-default,
.dx-button-mode-contained.dx-button-default.dx-state-focused {
    background-color: var(--app-accent);
    border-color: transparent;
    color: #fff;
}

    .dx-button-mode-contained.dx-button-default.dx-state-hover {
        background-color: var(--app-accent-hover);
        border-color: transparent;
    }

    .dx-button-mode-contained.dx-button-default.dx-state-active {
        background-color: var(--app-accent-active);
        border-color: transparent;
    }

    .dx-button-mode-contained.dx-button-default.dx-state-focused {
        box-shadow: 0 0 0 3px var(--app-accent-ring);
    }

.dx-button-mode-contained.dx-button-normal {
    border-color: var(--app-border);
    background-color: var(--app-surface);
    color: var(--app-text-2);
}

    .dx-button-mode-contained.dx-button-normal.dx-state-hover {
        background-color: var(--app-surface-2);
        border-color: var(--app-border-strong);
    }

    .dx-button-mode-contained.dx-button-normal.dx-state-focused {
        border-color: var(--app-accent);
        box-shadow: 0 0 0 3px var(--app-accent-ring);
        background-color: var(--app-surface);
    }

    .dx-button-mode-contained.dx-button-normal.dx-state-active {
        background-color: var(--app-accent-soft);
    }

.dx-button-mode-contained.dx-button-normal .dx-icon,
.dx-button-mode-text.dx-button-normal .dx-icon {
    color: var(--app-muted);
}

.dx-button-mode-contained.dx-button-normal.dx-state-hover .dx-icon,
.dx-button-mode-text.dx-button-normal.dx-state-hover .dx-icon {
    color: var(--app-text);
}

.dx-button-mode-contained.dx-button-normal.dx-state-disabled {
    background-color: var(--app-surface-2);
}

.dx-button-mode-text.dx-button-default {
    color: var(--app-accent);
}

/* ------------------------------------------------------------------ */
/* DevExtreme: editors                                                */
/* ------------------------------------------------------------------ */

.dx-texteditor.dx-editor-outlined,
.dx-texteditor.dx-editor-filled {
    border-radius: var(--app-radius);
    border-color: var(--app-border);
}

    .dx-texteditor.dx-editor-outlined.dx-state-hover,
    .dx-texteditor.dx-editor-filled.dx-state-hover {
        border-color: var(--app-border-strong);
    }

    .dx-texteditor.dx-editor-outlined.dx-state-focused,
    .dx-texteditor.dx-editor-outlined.dx-state-active,
    .dx-texteditor.dx-editor-filled.dx-state-focused,
    .dx-texteditor.dx-editor-filled.dx-state-active {
        border-color: var(--app-accent);
        box-shadow: 0 0 0 3px var(--app-accent-ring);
    }

    .dx-texteditor.dx-invalid.dx-editor-outlined,
    .dx-texteditor.dx-invalid.dx-editor-outlined.dx-state-focused {
        border-color: var(--app-danger);
        box-shadow: none;
    }

.dx-placeholder {
    color: #9ca3af;
}

/* checkbox */
.dx-checkbox-icon {
    border-radius: 4px;
    border-color: var(--app-border-strong);
}

.dx-checkbox-checked .dx-checkbox-icon {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
    color: #fff;
}

.dx-checkbox.dx-state-focused .dx-checkbox-icon,
.dx-checkbox.dx-state-hover .dx-checkbox-icon {
    border-color: var(--app-accent);
}

.dx-checkbox.dx-state-readonly .dx-checkbox-icon {
    border-color: var(--app-border-strong);
}

.dx-checkbox.dx-state-readonly.dx-checkbox-checked .dx-checkbox-icon {
    background-color: var(--app-success);
    border-color: var(--app-success);
}

/* list / select box highlight */
.dx-list-item.dx-state-focused,
.dx-list-item.dx-list-item-selected {
    background-color: var(--app-accent-soft);
    color: var(--app-text);
}

.dx-list-item.dx-state-hover {
    background-color: var(--app-surface-2);
    color: var(--app-text);
}

.dx-list-item.dx-state-focused.dx-list-item-selected,
.dx-list-item.dx-state-active {
    background-color: var(--app-accent-soft-2);
    color: var(--app-text);
}

.dx-loadindicator-segment-inner,
.dx-loadindicator-content .dx-loadindicator-segment-inner {
    border-color: var(--app-accent) var(--app-accent) transparent var(--app-accent);
}

/* ------------------------------------------------------------------ */
/* DevExtreme: data grid                                              */
/* ------------------------------------------------------------------ */

.dx-datagrid {
    background: var(--app-surface);
    color: var(--app-text);
}

.app-main .dx-datagrid.dx-datagrid-borders,
.app-main .dx-datagrid-borders.dx-gridbase-container {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-sm);
    overflow: hidden;
}

.dx-datagrid-borders > .dx-datagrid-headers,
.dx-datagrid-borders > .dx-datagrid-rowsview,
.dx-datagrid-borders > .dx-datagrid-total-footer,
.dx-datagrid-borders > .dx-datagrid-filter-panel,
.dx-datagrid-borders > .dx-datagrid-pager {
    border-left: 0;
    border-right: 0;
}

.dx-datagrid-borders > .dx-datagrid-rowsview,
.dx-datagrid-borders > .dx-datagrid-total-footer {
    border-bottom: 0;
}

.dx-datagrid-borders > .dx-datagrid-headers {
    border-top: 1px solid var(--app-border);
}

.dx-datagrid-header-panel {
    padding: 10px 12px;
    background: var(--app-surface);
    border-bottom: 0;
}

    .dx-datagrid-header-panel .dx-toolbar,
    .dx-toolbar {
        background: transparent;
    }

.dx-datagrid-search-panel {
    margin: 0;
}

.dx-datagrid-header-panel .dx-toolbar .dx-button-mode-contained.dx-button-normal:not(.dx-state-focused):not(.dx-state-hover) {
    border-color: transparent;
    background: transparent;
}

.dx-datagrid-header-panel .dx-toolbar .dx-button-has-text.dx-button-mode-contained.dx-button-normal:not(.dx-state-focused):not(.dx-state-hover) {
    border-color: var(--app-border);
    background: var(--app-surface);
}

.dx-datagrid-headers {
    background: var(--app-surface-2);
    color: var(--app-muted);
    border-bottom: 1px solid var(--app-border);
}

    .dx-datagrid-headers .dx-header-row > td,
    .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
        font-size: 12px;
        font-weight: 600;
        color: var(--app-text-2);
        border-bottom-color: var(--app-border);
    }

    .dx-datagrid-headers .dx-header-row > td {
        padding-top: 9px;
        padding-bottom: 9px;
    }

.dx-datagrid .dx-column-lines > td,
.dx-datagrid-headers.dx-datagrid-borders .dx-datagrid-table .dx-header-row > td {
    border-left-color: var(--app-border);
    border-right-color: var(--app-border);
}

.dx-datagrid .dx-row-lines > td {
    border-bottom-color: var(--app-border);
}

.dx-datagrid .dx-row > td {
    line-height: 18px;
}

.dx-datagrid-rowsview .dx-row.dx-data-row > td {
    border-bottom: 1px solid #f0f1f4;
}

.dx-datagrid-table .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row):not(.dx-row-focused) > td:not(.dx-focused) {
    background-color: var(--app-surface-2);
    color: var(--app-text);
}

.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td,
.dx-datagrid-rowsview .dx-selection.dx-row.dx-state-hover:not(.dx-row-focused) > td {
    background-color: var(--app-accent-soft);
    color: var(--app-text);
    border-bottom-color: var(--app-accent-soft-2);
}

.dx-datagrid-rowsview .dx-row-focused.dx-data-row > td:not(.dx-focused),
.dx-datagrid-rowsview .dx-row-focused.dx-data-row .dx-command-edit .dx-link {
    background-color: var(--app-accent);
    color: #fff;
}

.dx-datagrid-rowsview .dx-data-row .dx-link,
.dx-datagrid .dx-link {
    color: var(--app-accent);
}

.dx-datagrid-filter-panel {
    padding: 8px 12px;
    border-top: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-muted);
}

    .dx-datagrid-filter-panel .dx-icon-filter,
    .dx-datagrid-filter-panel .dx-datagrid-filter-panel-text {
        color: var(--app-accent);
    }

    .dx-datagrid-filter-panel .dx-datagrid-filter-panel-clear-filter {
        color: var(--app-accent);
    }

.dx-datagrid-group-panel .dx-group-panel-item,
.dx-datagrid-group-panel .dx-block-separator {
    border-radius: var(--app-radius-sm);
}

.dx-header-filter:not(.dx-header-filter-empty),
.dx-datagrid .dx-sort {
    color: var(--app-accent);
}

/* ------------------------------------------------------------------ */
/* DevExtreme: popups, dialogs, toasts                                */
/* ------------------------------------------------------------------ */

.dx-popup-wrapper > .dx-overlay-content {
    border: 0;
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-lg);
}

.dx-popup-title.dx-toolbar {
    padding: 12px 20px;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface);
    border-radius: var(--app-radius-lg) var(--app-radius-lg) 0 0;
}

    .dx-popup-title.dx-toolbar .dx-toolbar-label {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -.01em;
    }

.dx-popup-bottom.dx-toolbar {
    padding: 12px 20px;
    border-top: 1px solid var(--app-border);
}

.dx-dropdowneditor-overlay > .dx-overlay-content,
.dx-context-menu > .dx-overlay-content,
.dx-dropdownmenu-popup-wrapper > .dx-overlay-content {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow);
}

.dx-toast-content {
    border-radius: var(--app-radius);
    box-shadow: var(--app-shadow-lg);
    font-family: var(--app-font);
}

.dx-toast-success {
    background-color: var(--app-success);
}

.dx-toast-error {
    background-color: var(--app-danger);
}

/* chart tooltips */
.dxc-tooltip,
.dx-chart-tooltip {
    font-family: var(--app-font);
}

/* ------------------------------------------------------------------ */
/* Login page                                                         */
/* ------------------------------------------------------------------ */

body.app-login-body {
    margin: 0;
    min-height: 100vh;
    background: var(--app-bg);
    font-size: 14px;
}

.app-login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(420px, 1.05fr) 1fr;
}

.app-login-aside {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 56px;
    background: linear-gradient(150deg, var(--app-accent-soft) 0%, #f6f8fd 45%, #ffffff 100%);
    border-right: 1px solid var(--app-border);
}

    .app-login-aside::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(45, 91, 211, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 91, 211, .07) 1px, transparent 1px);
        background-size: 32px 32px;
        -webkit-mask-image: radial-gradient(ellipse at 85% 90%, #000 0%, transparent 65%);
        mask-image: radial-gradient(ellipse at 85% 90%, #000 0%, transparent 65%);
        pointer-events: none;
    }

    .app-login-aside > * {
        position: relative;
    }

.app-login-logo {
    height: 34px;
    width: auto;
    display: block;
    align-self: flex-start;
}

.app-login-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--app-surface);
    border: 1px solid var(--app-accent-soft-2);
    color: var(--app-accent);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

.app-login-headline {
    margin: 0 0 12px;
    max-width: 440px;
    font-size: 34px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--app-text);
}

.app-login-lead {
    margin: 0;
    max-width: 400px;
    color: var(--app-muted);
    font-size: 15px;
    line-height: 1.55;
}

.app-login-copy {
    font-size: 12px;
    color: var(--app-muted);
}

.app-login-main {
    display: grid;
    place-items: center;
    padding: 40px 24px;
}

.app-login-card {
    width: 100%;
    max-width: 380px;
}

    .app-login-card .app-login-logo {
        display: none;
        margin-bottom: 28px;
    }

.app-login-title {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--app-text);
}

.app-login-subtitle {
    margin: 0 0 28px;
    color: var(--app-muted);
    font-size: 14px;
}

.app-field {
    margin-bottom: 16px;
}

    .app-field > label {
        display: block;
        margin-bottom: 6px;
        font-size: 13px;
        font-weight: 500;
        color: var(--app-text-2);
    }

.app-login-card .dx-texteditor.dx-editor-outlined {
    background: var(--app-surface);
}

.app-login-card .dx-texteditor-input {
    font-size: 14px;
    padding-left: 12px;
    min-height: 38px;
}

/* keep the browser autofill from painting the input blue */
.app-login-card input:-webkit-autofill,
.app-login-card input:-webkit-autofill:hover,
.app-login-card input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--app-surface) inset;
    box-shadow: 0 0 0 1000px var(--app-surface) inset;
    -webkit-text-fill-color: var(--app-text);
    caret-color: var(--app-text);
}

.app-password-toggle.dx-button {
    margin-right: 4px;
    color: var(--app-muted);
}

    .app-password-toggle.dx-button .dx-button-content {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px 8px;
    }

    .app-password-toggle.dx-button .app-eye {
        display: block;
    }

    .app-password-toggle.dx-button.dx-state-hover,
    .app-password-toggle.dx-button.dx-state-focused {
        color: var(--app-accent);
    }

.app-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 22px;
}

.app-login-card .dx-checkbox-text {
    font-size: 13px;
    color: var(--app-text-2);
}

.app-login-error {
    display: none;
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: var(--app-radius);
    background: var(--app-danger-soft);
    color: var(--app-danger);
    font-size: 13px;
    line-height: 1.4;
}

    .app-login-error.visible {
        display: block;
    }

#button.dx-button {
    height: 40px;
    font-weight: 600;
}

    #button .dx-button-content {
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    #button .dx-button-text {
        font-size: 14px;
        text-transform: none;
    }

    #button .button-indicator {
        height: 20px;
        width: 20px;
    }

        #button .button-indicator .dx-loadindicator-segment-inner {
            border-color: #fff #fff transparent #fff;
        }

.app-login-footer {
    margin-top: 32px;
    text-align: center;
    font-size: 12px;
    color: var(--app-muted);
}

@media (max-width: 900px) {
    .app-login {
        grid-template-columns: 1fr;
    }

    .app-login-aside {
        display: none;
    }

    .app-login-card .app-login-logo {
        display: block;
    }
}

/* ------------------------------------------------------------------ */
/* Dark theme: <html data-theme="dark"> (see app-theme.js)            */
/* ------------------------------------------------------------------ */

html[data-theme="dark"] {
    color-scheme: dark;

    --app-accent: #5b87f0;
    --app-accent-hover: #7399f3;
    --app-accent-active: #87a8f5;
    --app-accent-soft: #1b2a4d;
    --app-accent-soft-2: #24376a;
    --app-accent-ring: rgba(91, 135, 240, .32);

    --app-bg: #0f141b;
    --app-surface: #171d26;
    --app-surface-2: #1c2330;
    --app-border: #2a3342;
    --app-border-strong: #3a4558;
    --app-text: #e6e9ef;
    --app-text-2: #c3c9d4;
    --app-muted: #8b94a5;

    --app-success: #4ade80;
    --app-success-soft: #12301f;
    --app-danger: #f87171;
    --app-danger-soft: #3a1a1a;

    --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --app-shadow: 0 4px 16px rgba(0, 0, 0, .45);
    --app-shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
}

html[data-theme="dark"] body,
html[data-theme="dark"] body.app-app {
    background: var(--app-bg);
    color: var(--app-text);
}

html[data-theme="dark"] .app-header.navbar { box-shadow: none; }

/* editors */
html[data-theme="dark"] .dx-texteditor.dx-editor-outlined,
html[data-theme="dark"] .dx-texteditor.dx-editor-filled,
html[data-theme="dark"] .dx-texteditor.dx-editor-underlined {
    background-color: var(--app-surface);
    border-color: var(--app-border);
}
html[data-theme="dark"] .dx-texteditor-input,
html[data-theme="dark"] .dx-texteditor-input-container input { color: var(--app-text); }
html[data-theme="dark"] .dx-placeholder { color: var(--app-muted); }
html[data-theme="dark"] .dx-checkbox-icon { background-color: var(--app-surface); }
html[data-theme="dark"] .dx-checkbox-checked .dx-checkbox-icon { background-color: var(--app-accent); }
html[data-theme="dark"] .dx-field-item-label-text,
html[data-theme="dark"] .dx-checkbox-text { color: var(--app-text-2); }

/* buttons */
html[data-theme="dark"] .dx-button-mode-contained.dx-button-normal,
html[data-theme="dark"] .dx-button-mode-outlined.dx-button-normal {
    background-color: var(--app-surface-2);
    border-color: var(--app-border);
    color: var(--app-text);
}
html[data-theme="dark"] .dx-button-mode-contained.dx-button-normal.dx-state-hover,
html[data-theme="dark"] .dx-button-mode-outlined.dx-button-normal.dx-state-hover { background-color: var(--app-border); }
html[data-theme="dark"] .dx-button-normal .dx-icon,
html[data-theme="dark"] .dx-icon { color: var(--app-text-2); }
html[data-theme="dark"] .dx-button-mode-contained.dx-button-default .dx-icon { color: #fff; }
html[data-theme="dark"] .dx-button-mode-text.dx-button-normal { color: var(--app-text-2); }

/* data grid */
html[data-theme="dark"] .dx-datagrid,
html[data-theme="dark"] .dx-datagrid-rowsview,
html[data-theme="dark"] .dx-datagrid-rowsview .dx-row > td,
html[data-theme="dark"] .dx-datagrid .dx-datagrid-content,
html[data-theme="dark"] .dx-datagrid-pager,
html[data-theme="dark"] .dx-datagrid-filter-panel,
html[data-theme="dark"] .dx-datagrid-total-footer {
    background-color: var(--app-surface);
    color: var(--app-text);
}
html[data-theme="dark"] .dx-datagrid-rowsview .dx-row.dx-data-row > td { border-bottom-color: var(--app-border); }
html[data-theme="dark"] .dx-datagrid-headers .dx-header-row > td,
html[data-theme="dark"] .dx-datagrid-headers .dx-datagrid-table .dx-row > td { color: var(--app-text-2); }
html[data-theme="dark"] .dx-datagrid-nodata { color: var(--app-muted); }
html[data-theme="dark"] .dx-datagrid .dx-header-filter,
html[data-theme="dark"] .dx-datagrid .dx-sort { color: var(--app-muted); }
html[data-theme="dark"] .dx-header-filter:not(.dx-header-filter-empty),
html[data-theme="dark"] .dx-datagrid .dx-sort-up,
html[data-theme="dark"] .dx-datagrid .dx-sort-down { color: var(--app-accent); }
html[data-theme="dark"] .dx-datagrid-search-panel { background-color: transparent; }

/* popups, menus, lists, calendars */
html[data-theme="dark"] .dx-overlay-content,
html[data-theme="dark"] .dx-popup-content,
html[data-theme="dark"] .dx-popup-normal,
html[data-theme="dark"] .dx-popup-title,
html[data-theme="dark"] .dx-list,
html[data-theme="dark"] .dx-menu-base,
html[data-theme="dark"] .dx-treeview,
html[data-theme="dark"] .dx-calendar,
html[data-theme="dark"] .dx-loadpanel-content {
    background-color: var(--app-surface);
    color: var(--app-text);
}
html[data-theme="dark"] .dx-popup-normal { border-color: var(--app-border); }
html[data-theme="dark"] .dx-list-item-content,
html[data-theme="dark"] .dx-item-content { color: var(--app-text); }
html[data-theme="dark"] .dx-calendar-cell,
html[data-theme="dark"] .dx-calendar-caption-button { color: var(--app-text); }
html[data-theme="dark"] .dx-calendar-other-view,
html[data-theme="dark"] .dx-calendar-empty-cell { color: var(--app-muted); }
html[data-theme="dark"] .dx-calendar-selected-date .dx-calendar-cell-in-range,
html[data-theme="dark"] .dx-calendar-cell.dx-calendar-selected-date { color: #fff; }
html[data-theme="dark"] .dx-scrollable-scroll-content { background-color: rgba(255, 255, 255, .28); }
html[data-theme="dark"] .dx-overlay-shader { background-color: rgba(0, 0, 0, .6); }

/* badges and other hard-coded light colors */
html[data-theme="dark"] .app-main .badge-warning { background: #3a2c10; color: #fbbf24; }
html[data-theme="dark"] .app-main .badge-info { background: #10303f; color: #38bdf8; }
html[data-theme="dark"] .app-main .badge-secondary { background: var(--app-surface-2); color: var(--app-muted); }

/* login page */
html[data-theme="dark"] .app-login-aside { background: linear-gradient(150deg, var(--app-accent-soft) 0%, var(--app-surface) 55%, var(--app-bg) 100%); }
html[data-theme="dark"] .app-login-aside::before {
    background-image: linear-gradient(rgba(91, 135, 240, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 135, 240, .09) 1px, transparent 1px);
}
html[data-theme="dark"] .app-login-card input:-webkit-autofill,
html[data-theme="dark"] .app-login-card input:-webkit-autofill:hover,
html[data-theme="dark"] .app-login-card input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--app-surface) inset;
    box-shadow: 0 0 0 1000px var(--app-surface) inset;
    -webkit-text-fill-color: var(--app-text);
}

/* theme toggle (header and login page) */
.app-theme-toggle .material-icons { font-size: 20px; }
.app-login-theme {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 20;
}