/*
 * Makes the few Syncfusion components (dialog, text boxes, toast, grid on the review page) match the design tokens.
 * Loaded after Syncfusion's theme, uses only the tokens from app.css. Hand-written on purpose: it is not compiled by Tailwind.
 */
.e-control, .e-css { font-family: var(--font-sans); }

.e-dialog.e-popup {
    border: 1.5px solid var(--color-fg);
    border-radius: 16px;
    background: var(--color-surface);
    color: var(--color-fg);
}
.e-dialog .e-dlg-header-content,
.e-dialog .e-dlg-content { background: transparent; color: var(--color-fg); }
.e-dialog .e-dlg-header { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--color-fg); }
.e-dialog .e-dlg-closeicon-btn { border-radius: 10px; }

.e-input-group,
.e-input-group.e-control-wrapper { border-color: var(--color-border); border-radius: 10px; background: var(--color-surface); }
.e-input-group input.e-input,
.e-input-group.e-control-wrapper input.e-input { min-height: 44px; color: var(--color-fg); }
.e-input-group:not(.e-disabled):not(.e-float-icon-left):not(.e-float-input)::before,
.e-input-group:not(.e-disabled):not(.e-float-icon-left):not(.e-float-input)::after { background: var(--color-fg); }
.e-input-group.e-input-focus { border-color: var(--color-fg); box-shadow: 0 0 0 3px var(--color-accent); }

.e-grid { border-color: var(--color-border); border-left-width: 0; border-right-width: 0; border-radius: 0; background: transparent; color: var(--color-fg); }
.e-grid .e-gridheader { border-color: var(--color-fg); background: transparent; }
.e-grid .e-headercell { background: transparent; color: var(--color-muted); font-weight: 700; }
.e-grid .e-headercelldiv { font-weight: 700; }
.e-grid .e-content { background: transparent; }
.e-grid .e-rowcell { border-color: var(--color-border); color: var(--color-fg); }
.e-grid .e-row:hover .e-rowcell { background: var(--color-surface-alt); }

.e-toast-container .e-toast {
    border-radius: 12px;
    background: var(--color-primary);
    color: var(--color-primary-fg);
}
.e-toast-container .e-toast .e-toast-title,
.e-toast-container .e-toast .e-toast-message,
.e-toast-container .e-toast .e-toast-close-icon { color: var(--color-primary-fg); }