:root {
    --brand-primary: #64748b;
    --brand-primary-hover: #475569;
    --brand-secondary: #334155;
    --brand-on-primary: #ffffff;
    --brand-surface-tint: #f1f5f9;
    --brand-footer-background: #1e293b;
    --brand-icon-image: url('/images/logo.png');
    --theme-primary: var(--brand-primary);
    --admin-accent: var(--brand-primary);
    --admin-accent-hover: var(--brand-primary-hover);
    --admin-accent-soft: var(--brand-surface-tint);
}

.icon-Logo {
    background-image: var(--brand-icon-image) !important;
}

.icon-Logo-mask {
    background-color: var(--brand-primary) !important;
    -webkit-mask-image: var(--brand-icon-image) !important;
    mask-image: var(--brand-icon-image) !important;
}

.brand-header-icon {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.main-content-overlay,
.account-page {
    background: var(--brand-primary) !important;
}

.account-icon,
.account-company,
.account-secondary {
    color: var(--brand-primary) !important;
}

.account-button,
.account-step.active {
    background: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}

.account-input:focus {
    border-color: var(--brand-primary) !important;
    outline-color: color-mix(in srgb, var(--brand-primary) 18%, transparent) !important;
}

.app-footer-container {
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important;
}

/* Controles Syncfusion que representam a acao primaria da interface. */
.e-btn.e-primary,
.e-css.e-btn.e-primary,
.e-control.e-btn.e-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}

.e-btn.e-primary:hover,
.e-css.e-btn.e-primary:hover,
.e-control.e-btn.e-primary:hover {
    background-color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
}

.e-btn.e-outline.e-primary,
.e-css.e-btn.e-outline.e-primary {
    background-color: transparent !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
}

.e-btn.e-outline.e-primary:hover,
.e-css.e-btn.e-outline.e-primary:hover {
    background-color: var(--brand-surface-tint) !important;
    border-color: var(--brand-primary-hover) !important;
    color: var(--brand-primary-hover) !important;
}

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon,
.e-tab .e-tab-header .e-indicator {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.e-tab .e-tab-header .e-indicator {
    background-color: var(--brand-primary) !important;
}

.e-tab .e-tab-header .e-tab-wrap:hover,
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-icon,
body.e-dark .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-text,
body.e-dark .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover .e-tab-icon {
    color: var(--brand-primary) !important;
}

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon,
body.e-dark .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
body.e-dark .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
    color: var(--brand-primary) !important;
}

.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check,
.e-switch-wrapper .e-switch-on,
.e-css.e-switch-wrapper .e-switch-on,
.e-slider .e-range,
.e-slider .e-handle,
.e-progressbar .e-progressbar-progress {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}

.e-input-group.e-input-focus,
.e-input-group.e-control-wrapper.e-input-focus,
.e-ddl.e-input-group.e-control-wrapper.e-input-focus,
.e-outline.e-input-group.e-input-focus,
.e-outline.e-input-group.e-control-wrapper.e-input-focus {
    border-color: var(--brand-primary) !important;
    box-shadow: inset 0 0 0 1px var(--brand-primary) !important;
}

.e-calendar .e-content td.e-selected span.e-day,
.e-calendar .e-content td.e-focused-date.e-selected span.e-day,
.e-datepicker .e-input-group-icon.e-active {
    background-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}

.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-item-focus,
.e-listbox-wrapper .e-list-item.e-selected,
.e-menu-wrapper .e-menu-item.e-selected,
.e-chip-list .e-chip.e-active {
    background-color: color-mix(in srgb, var(--brand-primary) 16%, transparent) !important;
    color: var(--brand-primary) !important;
}

.e-radio:checked + label::before {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
    accent-color: var(--brand-primary);
}

body.e-dark .e-btn.e-primary,
body.e-dark .e-css.e-btn.e-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}

/* Acoes principais dos modais legados de cadastros e configuracoes. */
.e-dialog .e-footer-content .e-start-fast,
.e-dialog .e-footer-content .e-menu-add,
.e-dialog .e-footer-content .e-fast-end-btn {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-on-primary) !important;
}

.e-dialog .e-footer-content .e-start-fast:hover,
.e-dialog .e-footer-content .e-start-fast:focus,
.e-dialog .e-footer-content .e-menu-add:hover,
.e-dialog .e-footer-content .e-menu-add:focus,
.e-dialog .e-footer-content .e-fast-end-btn:hover,
.e-dialog .e-footer-content .e-fast-end-btn:focus {
    background-color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
    color: var(--brand-on-primary) !important;
}

.e-dialog .e-footer-content .e-fasting-cancel,
.e-dialog .e-footer-content .e-menu-cancel {
    background-color: var(--brand-surface-tint) !important;
    border-color: color-mix(in srgb, var(--brand-primary) 35%, transparent) !important;
    color: var(--brand-primary) !important;
}

body.e-dark .e-dialog .e-footer-content .e-fasting-cancel,
body.e-dark .e-dialog .e-footer-content .e-menu-cancel {
    background-color: color-mix(in srgb, var(--brand-primary) 14%, #1f2937) !important;
}