/*
 * Rules that no Bootstrap or Syncfusion variable can drive. Keep this file short and
 * re-check it on every Syncfusion upgrade: each rule says why it exists.
 */

/* Bootstrap .form-control/.form-select hard-code font-size: 1rem and their padding:
   no variable, so the 32px compact height needs the rule itself. */
.form-control,
.form-select {
    font-size: var(--bs-body-font-size);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    min-height: var(--onf-control-height);
}

.form-control {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.form-select {
    padding-left: 0.5rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--onf-accent);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

/* Bootstrap heading sizes are literal rem values; section titles (h5, used by Impostazioni,
   dialogs and the Account pages) must stay below the 20px page title. */
h5,
.h5 {
    font-size: 1rem;
    font-weight: 600;
}

/* Bootstrap has no variable for the label style. */
.form-label {
    font-size: 12px;
    color: var(--onf-text-muted);
    margin-bottom: 0.25rem;
}

/* Bootstrap buttons (Account pages): the variables exist but are set per .btn, not on :root. */
.btn {
    --bs-btn-font-size: var(--bs-body-font-size);
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.75rem;
}

/* Syncfusion grid: border style, row padding and header look are literal values in the
   theme (padding 6px 8px, header 34px bold 14px). */
.e-grid {
    border-style: solid;
    border-color: var(--onf-border);
    border-radius: var(--onf-radius);
    font-variant-numeric: tabular-nums;
}

.e-grid .e-rowcell {
    padding-top: 5px;
    padding-bottom: 5px;
}

.e-grid .e-gridheader,
.e-grid .e-headercell {
    background-color: var(--onf-surface-alt);
}

.e-grid .e-headercell {
    height: 36px;
    font-size: 13px;
    font-weight: 600;
}

.e-grid .e-headercell .e-headertext {
    color: var(--onf-text-muted);
    font-weight: 600;
}

.e-grid .e-toolbar,
.e-grid .e-toolbar .e-toolbar-items {
    background: var(--onf-surface);
}

/* Bootstrap alerts: padding comes from variables, but the left accent bar has none. */
.alert {
    --bs-alert-padding-y: 0.5rem;
    --bs-alert-padding-x: 0.75rem;
    border-left: 3px solid var(--bs-alert-color);
}

/* Bootstrap nav-tabs as underline tabs (Abbonamenti). Colours are variables; the border
   width of each link is not. */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--onf-border);
    --bs-nav-tabs-border-radius: 0;
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-color: var(--onf-accent);
    --bs-nav-tabs-link-active-border-color: transparent transparent var(--onf-accent);
    --bs-nav-link-color: var(--onf-text-muted);
    --bs-nav-link-hover-color: var(--onf-text);
}

.nav-tabs .nav-link {
    border-width: 0 0 2px;
}

/* Syncfusion dialog header: separator and title size are literal values in the theme. */
.e-dialog .e-dlg-header-content {
    border-bottom: 1px solid var(--onf-border);
}

.e-dialog .e-dlg-header {
    font-size: 16px;
    font-weight: 600;
}