/* =========================================================
   Syncfusion Fluent — brand visual overrides (appearance only)
   Do not change component behavior / bindings from CSS.
   ========================================================= */

/* ----- Primary buttons ----- */
.e-btn.e-primary,
.e-css.e-btn.e-primary,
.e-data-form .e-btn.e-primary,
.e-control.e-btn.e-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--text-on-primary) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: var(--font-weight-medium);
    box-shadow: none !important;
}

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

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

.e-btn.e-primary:disabled,
.e-btn.e-primary.e-disabled {
    opacity: 0.55;
}

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

.e-btn,
.e-css.e-btn {
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
}

.e-data-form .e-button-left .e-btn,
.e-data-form .e-button-right .e-btn,
.e-data-form .e-button-center .e-btn,
.e-data-form .e-button-stretch .e-btn,
.e-btn-primary {
    border-radius: var(--radius-sm) !important;
    padding: 7px 24px !important;
}

/* ----- Inputs / Dropdowns / DatePickers ----- */
.e-input-group,
.e-input-group.e-control-wrapper,
.e-float-input,
.e-float-input.e-control-wrapper,
.e-ddl.e-input-group,
.e-date-wrapper {
    border-radius: var(--radius-sm) !important;
    border-color: var(--border-strong) !important;
    background-color: var(--surface) !important;
}

.e-input-group:not(.e-disabled):hover,
.e-input-group.e-control-wrapper:not(.e-disabled):hover {
    border-color: var(--text-muted) !important;
}

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

.e-input-group input.e-input,
.e-input-group textarea.e-input,
.e-float-input input,
.e-float-input textarea {
    font-family: var(--font-sans);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.e-float-input .e-float-line::before,
.e-float-input .e-float-line::after {
    background: var(--brand-primary) !important;
}

.e-form-label,
.e-float-text,
.e-label-top {
    color: var(--text-secondary) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
}

/* Shared form vertical spacing — keep in sync with common.css form rhythm.
   Do not re-introduce Fluent's per-cell margin-top (causes uneven 40px gaps). */
.e-data-form .e-label-position-top,
.e-data-form .e-label-position-left {
    margin-top: 0 !important;
}

.e-data-form .e-form-group > .e-form-layout {
    margin-bottom: var(--field-gap, 1rem) !important;
}

.e-data-form .e-form-group > .e-form-layout:last-child {
    margin-bottom: 0 !important;
}

.e-data-form .e-form-label {
    margin: 0 !important;
}

/* ----- Grid ----- */
.e-grid {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
    background: var(--surface);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
}

.e-grid .e-gridheader,
.e-grid .e-headercell,
.e-grid .e-columnheader {
    background-color: var(--surface-subtle) !important;
}

.e-grid .e-headercelldiv,
.e-grid .e-headercell .e-headertext {
    color: var(--text-secondary) !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--font-size-xs) !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.e-grid .e-rowcell {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border) !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.e-grid .e-row:hover .e-rowcell {
    background-color: var(--surface-subtle) !important;
}

.e-grid .e-altrow .e-rowcell {
    background-color: rgba(247, 246, 244, 0.55) !important;
}

.e-grid .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
    box-shadow: none !important;
}

.e-pager {
    background: var(--surface) !important;
    border-top: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
    padding: var(--space-2) var(--space-3) !important;
}

.e-pager .e-currentitem,
.e-pager .e-numericitem.e-currentitem {
    background-color: var(--brand-primary) !important;
    color: var(--text-on-primary) !important;
    border-radius: var(--radius-sm) !important;
}

.e-pager .e-numericitem:hover {
    background-color: var(--brand-primary-soft) !important;
    color: var(--brand-primary) !important;
}

/* ----- Tabs ----- */
.e-tab .e-tab-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
.tab_content .e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    background: var(--brand-primary) !important;
    color: var(--text-on-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 {
    color: var(--text-on-primary) !important;
}

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

.e-tab .e-content > .e-item.e-active {
    background: inherit;
    display: block;
    margin-bottom: 40px;
    padding-top: var(--space-4);
}

/* ----- Dialogs ----- */
.e-dialog {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}

.e-dialog .e-dlg-header-content {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: var(--space-4) var(--space-5) !important;
}

.e-dialog .e-dlg-header {
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--font-size-lg) !important;
}

.e-dialog .e-dlg-content {
    padding: var(--space-5) !important;
    color: var(--text-primary);
    background: var(--surface) !important;
}

.e-dialog .e-footer-content {
    border-top: 1px solid var(--border) !important;
    padding: var(--space-3) var(--space-5) !important;
    background: var(--surface-subtle) !important;
}

.e-dlg-overlay {
    background-color: rgba(33, 30, 30, 0.45) !important;
}

/* ----- Toast ----- */
.e-toast-container .e-toast {
    background-color: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    color: var(--text-primary) !important;
}

.e-toast-container .e-toast .e-toast-message .e-toast-content {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.e-toast-container .e-toast .e-toast-progress {
    background-color: var(--brand-primary) !important;
}

/* ----- Spinner ----- */
.e-spinner-pane .e-spinner-inner .e-spin-material,
.e-spinner-pane .e-spinner-inner .e-spin-fluent,
.e-spinner-pane .e-spinner-inner svg circle {
    stroke: var(--brand-primary) !important;
}

/* ----- TreeView (sidebar nav) — color tokens only; geometry lives in NavMenu ----- */
.sidebar .e-treeview .e-list-text {
    color: var(--text-on-dark-muted) !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium);
}

.sidebar .e-treeview .e-list-item.e-active > .e-text-content .e-list-text,
.e-treeview .e-list-item.e-active > .e-text-content .e-list-text {
    color: var(--text-on-primary) !important;
}

.sidebar .e-treeview .e-list-icon {
    color: var(--text-on-dark-muted) !important;
}

.sidebar .e-treeview .e-list-item.e-active .e-list-icon {
    color: var(--text-on-primary) !important;
}

/* ----- Cards ----- */
.e-card {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    background: var(--surface) !important;
}

.e-card .e-card-header,
.e-card .e-card-content {
    color: var(--text-primary);
}

/* ----- Uploader ----- */
.e-upload {
    border-radius: var(--radius-md);
    border-color: var(--border-strong) !important;
}

/* ----- Switch ----- */
.e-switch-wrapper .e-switch-on,
.e-switch-wrapper.e-check .e-switch-inner {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

/* ----- Dropdown popup ----- */
.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-item-focus {
    background-color: var(--brand-primary-soft) !important;
    color: var(--brand-primary) !important;
}

.e-dropdownbase .e-list-item:hover {
    background-color: var(--surface-subtle) !important;
}