/*
 * Ticket Attendant corporate theme.
 * Shared by every web app that references TAWeb.DevextremeUI, served as /dx/ta-theme.css.
 * Load it AFTER bootstrap.min.css and dx.light(.compact).css.
 * Brand colors come from ticketattendant.com (logo purple #693776).
 */

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

    --ta-accent: #6b3381;
    --ta-accent-hover: #582a6b;
    --ta-accent-active: #4a2359;
    --ta-accent-soft: #f5eef8;
    --ta-accent-soft-2: #ebdff0;
    --ta-accent-ring: rgba(107, 51, 129, .18);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .ta-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(--ta-accent);
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* status badges (bootstrap .badge-*) in a soft corporate style */
.ta-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;
}

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

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

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

@media (max-width: 767.98px) {
    :root {
        --ta-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(--ta-font);
}

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

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

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

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

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

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

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

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

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

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

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

.dx-button-mode-contained.dx-button-normal .dx-icon,
.dx-button-mode-text.dx-button-normal .dx-icon {
    color: var(--ta-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(--ta-text);
}

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

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

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

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

    .dx-texteditor.dx-editor-outlined.dx-state-hover,
    .dx-texteditor.dx-editor-filled.dx-state-hover {
        border-color: var(--ta-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(--ta-accent);
        box-shadow: 0 0 0 3px var(--ta-accent-ring);
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

.ta-main .dx-datagrid.dx-datagrid-borders,
.ta-main .dx-datagrid-borders.dx-gridbase-container {
    border: 1px solid var(--ta-border);
    border-radius: var(--ta-radius-lg);
    box-shadow: var(--ta-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(--ta-border);
}

.dx-datagrid-header-panel {
    padding: 10px 12px;
    background: var(--ta-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(--ta-border);
    background: var(--ta-surface);
}

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

    .dx-datagrid-headers .dx-header-row > td,
    .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
        font-size: 12px;
        font-weight: 600;
        color: #4b5563;
        border-bottom-color: var(--ta-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(--ta-border);
    border-right-color: var(--ta-border);
}

.dx-datagrid .dx-row-lines > td {
    border-bottom-color: var(--ta-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(--ta-surface-2);
    color: var(--ta-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(--ta-accent-soft);
    color: var(--ta-text);
    border-bottom-color: var(--ta-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(--ta-accent);
    color: #fff;
}

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

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

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

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

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

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

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

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

.dx-popup-title.dx-toolbar {
    padding: 12px 20px;
    border-bottom: 1px solid var(--ta-border);
    background: var(--ta-surface);
    border-radius: var(--ta-radius-lg) var(--ta-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(--ta-border);
}

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

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

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

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

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

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

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

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

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

    .ta-login-aside::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(107, 51, 129, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 51, 129, .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;
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .ta-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;
        }

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

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

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

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