/* Custom overrides on top of theme.min.css — keep here instead of editing the vendor file directly, so these survive theme updates */

:root {
    --ds-body-font-size: 12px;
}

/* .form-control/.form-select hardcode their own font-size (.875rem) in theme.min.css
   instead of using --ds-body-font-size, so the 13px above never reached inputs/selects.
   Placeholder text inherits this too, since it has no font-size rule of its own. */
.form-control,
.form-label,
.form-select {
    font-size: 13px;
}

/* Keep the password-reveal eye icon anchored to the input's own vertical center, in every validation state.
   The theme's own rules position it with percentages relative to the whole .password-field wrapper (which grows
   taller once .invalid-feedback text is visible), causing the icon to drift down/sideways. Pinning to fixed px
   values here keeps it consistent regardless of validation state or message length. */
.password-field .passwordToggler,
.password-field .is-valid + span .passwordToggler,
.was-validated .password-field .form-control:valid + span .passwordToggler {
    top: 20px !important;
    right: 20px !important;
    transform: translateY(-50%) !important;
}

/* Invalid state needs extra right-offset (not 20px) so the eye icon doesn't overlap
   the native Bootstrap invalid-state exclamation-circle icon that appears in that state only */
.password-field .is-invalid + span .passwordToggler,
.was-validated .password-field .form-control:invalid + span .passwordToggler {
    top: 20px !important;
    right: 40px !important;
    transform: translateY(-50%) !important;
}


.bg-gradient-primary {
    background: linear-gradient(320deg, rgba(203, 215, 249, .7) 0, var(--ds-white) 70%);
}

.bg-gradient-mixed2 {
    background: linear-gradient(94.82deg, var(--ds-primary-light) 1.11% , var(--ds-success-lighter) 99.11%)
}

.bg-gradient-blue {
    background: linear-gradient(360deg, #E8EFFC 0%, var(--ds-primary-light) 100%);
}

/* theme.min.css hardcodes .apexcharts-xaxis-label/.apexcharts-yaxis-label to 13px, which beats
   the fontSize set via each chart's own JS options (a CSS class rule wins over the SVG attribute
   ApexCharts sets it with) — scoped to the dashboard summary chart only, not all charts site-wide */
#messageSummaryChart .apexcharts-xaxis-label,
#messageSummaryChart .apexcharts-yaxis-label {
    font-size: 10px;
}

/* theme.min.css gives the inner <ul class="navbar-nav"> its own fixed height + overflow:auto,
   nested inside .offcanvas-body which already scrolls the whole mobile menu — two independent
   scrollbars stack once an open dropdown pushes the list taller than the inner cap. Let only
   the offcanvas body scroll; desktop's #miniSidebar .navbar-nav rules are untouched. */
.offcanvas-body .navbar-nav {
    height: auto;
    overflow: visible;
}