:root {
    /* EN: Shared typography tokens keep frontend and backend aligned on the same visual language.
       IT: I token tipografici condivisi mantengono frontend e backend allineati sulla stessa lingua visiva. */
    --v24-font-ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --v24-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --v24-font: var(--v24-font-ui);
    --v24-type-h1-size: clamp(2rem, 2.3vw, 2.75rem);
    --v24-type-h2-size: clamp(1.5rem, 1.75vw, 2rem);
    --v24-type-h3-size: clamp(1.25rem, 1.35vw, 1.5rem);
    --v24-type-body-size: 16px;
    --v24-type-body-line: 1.5;
    --v24-type-label-size: 0.95rem;
    --v24-type-label-line: 1.4;
    --v24-type-micro-size: 0.78rem;
}

/* EN: Extend the font system to whole plugin-managed pages so theme/admin chrome stays visually aligned with the app.
   IT: Estende il sistema font a tutte le pagine gestite dal plugin cosi il chrome tema/admin resta visivamente allineato all'app. */
body.v24-support-page {
    font-family: var(--v24-font-ui);
    font-size: var(--v24-type-body-size);
    line-height: var(--v24-type-body-line);
}

body.v24-support-admin-page,
body.v24-support-admin-page #wpwrap,
body.v24-support-admin-page #wpbody,
body.v24-support-admin-page #wpbody-content,
body.v24-support-admin-page #wpcontent,
body.v24-support-admin-page #adminmenuwrap,
body.v24-support-admin-page #adminmenu,
body.v24-support-admin-page #wpadminbar,
body.v24-support-admin-page .wrap {
    font-family: var(--v24-font-ui);
}

/* EN: Apply the UI font to every plugin shell and force form controls to inherit it consistently.
   IT: Applica il font UI a ogni shell del plugin e forza i controlli form a ereditarlo in modo coerente. */
.v24-admin-wrap,
.v24-app-shell,
.v24-dashboard-shell,
.v24-portal-shell,
.v24-ticket-form,
.v24-ticket-detail-shell,
.v24-premium-chat,
.v24-auth-guard,
.v24-empty-state,
.v24-ticket-list-page,
.v24-ticket-detail-page,
.v24-ticket-form-page,
.v24-ui-widget-host,
.v24-ui-widget-host .v24-app-shell,
.v24-ui-widget-host .v24-dashboard-shell,
.v24-ui-widget-host .v24-portal-shell,
.v24-ui-widget-host .v24-ticket-list-page,
.v24-ui-widget-host .v24-ticket-detail-page,
.v24-ui-widget-host .v24-ticket-form-page,
.v24-ui-widget-host .v24-premium-chat {
    font-family: var(--v24-font-ui);
    font-size: var(--v24-type-body-size);
    line-height: var(--v24-type-body-line);
    font-weight: 400;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.v24-admin-wrap :is(button, input, select, textarea),
.v24-app-shell :is(button, input, select, textarea),
.v24-dashboard-shell :is(button, input, select, textarea),
.v24-portal-shell :is(button, input, select, textarea),
.v24-ticket-form :is(button, input, select, textarea),
.v24-ticket-detail-shell :is(button, input, select, textarea),
.v24-premium-chat :is(button, input, select, textarea),
.v24-ui-widget-host :is(button, input, select, textarea) {
    font: inherit;
}

.v24-admin-wrap :is(h1, h2, h3, h4, h5, h6),
.v24-app-shell :is(h1, h2, h3, h4, h5, h6),
.v24-dashboard-shell :is(h1, h2, h3, h4, h5, h6),
.v24-portal-shell :is(h1, h2, h3, h4, h5, h6),
.v24-ticket-form :is(h1, h2, h3, h4, h5, h6),
.v24-ticket-detail-shell :is(h1, h2, h3, h4, h5, h6),
.v24-premium-chat :is(h1, h2, h3, h4, h5, h6),
.v24-ui-widget-host :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--v24-font-ui);
    letter-spacing: 0;
    margin-top: 0;
}

.v24-admin-wrap h1,
.v24-app-shell h1,
.v24-ui-widget-host h1 {
    font-size: var(--v24-type-h1-size);
    line-height: 1.2;
    font-weight: 700;
}

.v24-admin-wrap h2,
.v24-app-shell h2,
.v24-ui-widget-host h2 {
    font-size: var(--v24-type-h2-size);
    line-height: 1.25;
    font-weight: 700;
}

.v24-admin-wrap h3,
.v24-app-shell h3,
.v24-ui-widget-host h3 {
    font-size: var(--v24-type-h3-size);
    line-height: 1.3;
    font-weight: 600;
}

.v24-admin-wrap :is(p, li, td, th, label, small, .v24-inline-note),
.v24-app-shell :is(p, li, td, th, label, small, .v24-inline-note),
.v24-ui-widget-host :is(p, li, td, th, label, small, .v24-inline-note) {
    font-family: inherit;
}

.v24-admin-wrap :is(.v24-overline, .v24-badge, .v24-brand-link, .v24-widget-pill),
.v24-app-shell :is(.v24-overline, .v24-badge, .v24-brand-link, .v24-brand-meta, .v24-reference-panel-kicker),
.v24-ui-widget-host :is(.v24-overline, .v24-badge, .v24-brand-link, .v24-brand-meta, .v24-reference-panel-kicker) {
    font-family: inherit;
    font-size: var(--v24-type-micro-size);
    line-height: 1.4;
}

.v24-admin-wrap :is(button, .button, .button-primary, .button-secondary, .v24-btn),
.v24-app-shell :is(button, .button, .button-primary, .button-secondary, .v24-btn),
.v24-ui-widget-host :is(button, .button, .button-primary, .button-secondary, .v24-btn) {
    font-family: inherit;
    font-size: var(--v24-type-label-size);
    line-height: var(--v24-type-label-line);
    font-weight: 500;
}

/* EN: Restrict the mono face to code-like surfaces so the UI keeps a consistent human-readable tone.
   IT: Limita il font mono alle superfici tecniche, cosi la UI mantiene un tono leggibile e coerente. */
.v24-admin-wrap :is(code, pre, kbd, samp, .v24-code-block, .v24-log-box, .v24-mono),
.v24-app-shell :is(code, pre, kbd, samp, .v24-mono),
.v24-ui-widget-host :is(code, pre, kbd, samp, .v24-mono) {
    font-family: var(--v24-font-mono);
    font-size: 0.9em;
    letter-spacing: 0;
}

/* EN: Shared validation/confirmation dialog used instead of native browser popups for a consistent branded experience.
   IT: Dialogo condiviso di validazione/conferma usato al posto dei popup nativi del browser per un'esperienza coerente col brand. */
.v24-system-dialog {
    border: 1px solid rgba(8, 17, 36, 0.48);
    border-radius: 8px;
    padding: 0;
    background: transparent;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.38);
    width: min(580px, calc(100vw - 36px));
    overflow: hidden;
}

.v24-system-dialog::backdrop {
    background: rgba(2, 7, 18, 0.48);
    backdrop-filter: blur(3px);
}

.v24-system-dialog-card {
    background: #ffffff;
    color: #111827;
}

.v24-system-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: #0d1f31;
    color: #ffffff;
}

.v24-system-dialog-title {
    margin: 0;
    font-family: var(--v24-font-ui);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.v24-system-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(13, 31, 49, 0.12);
    border-radius: 4px;
    background: #ffffff;
    color: #0d1f31;
    font-family: var(--v24-font-ui);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.v24-system-dialog-body {
    padding: 18px 16px 28px;
    border-top: 1px solid rgba(13, 31, 49, 0.08);
    border-bottom: 1px solid rgba(13, 31, 49, 0.08);
    background: #ffffff;
}

.v24-system-dialog-message {
    margin: 0;
    color: #111827;
    font-family: var(--v24-font-ui);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.55;
    white-space: pre-line;
}

.v24-system-dialog-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 16px 16px;
    background: #ffffff;
}

.v24-system-dialog-button {
    min-width: 80px;
    padding: 10px 22px;
    border: 0;
    border-radius: 4px;
    background: #0d1f31;
    color: #ffffff;
    font-family: var(--v24-font-ui);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.v24-system-dialog-button-secondary {
    background: rgba(13, 31, 49, 0.12);
    color: #0d1f31;
}