/**
 * rtl.css
 * Caricato SOLO quando la lingua corrente si legge da destra a sinistra
 * (vedi Lingua::eRtl() / Lingua::LINGUE_RTL — oggi: arabo, persiano, urdu).
 * Contiene solo le REGOLE CHE CAMBIANO rispetto a style.css: qui dentro
 * "sinistra" e "destra" vanno lette invertite rispetto al sito normale.
 *
 * Nota: il sito usa proprietà CSS "fisiche" (margin-left, border-right...)
 * invece di quelle "logiche" (margin-inline-start...), quindi qui le
 * specchiamo a mano invece che gratis dal browser. Coperti i blocchi di
 * layout principali (header, sidebar dashboard, menu, breadcrumb, form);
 * se durante i test qualche dettaglio minore risultasse ancora "storto",
 * va aggiunto qui con lo stesso pattern.
 */

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* ---- Header ---- */
html[dir="rtl"] .site-header {
    flex-direction: row-reverse;
}
html[dir="rtl"] .header-ricerca input {
    text-align: right;
}
html[dir="rtl"] .site-header-destra {
    flex-direction: row-reverse;
}

/* ---- Sidebar dashboard/admin: passa da sinistra a destra ---- */
html[dir="rtl"] .dev-sidebar {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--line);
}
html[dir="rtl"] .dev-dashboard {
    padding: 0 calc(220px + 2.5em) 0 2rem;
}
html[dir="rtl"] .dev-dashboard {
    grid-template-columns: 170px minmax(0, 1fr);
}
@media (max-width: 1050px) {
    html[dir="rtl"] .dev-dashboard { padding-right: calc(200px + 2.5em); padding-left: 0; }
}

/* ---- Voci di menu, icone, frecce a fisarmonica ---- */
html[dir="rtl"] .dev-menu-item,
html[dir="rtl"] .dev-menu-parent {
    text-align: right;
}
html[dir="rtl"] .dev-menu-children a,
html[dir="rtl"] .dev-submenu-item {
    padding: 0.35rem 2.35rem 0.35rem 1.2rem;
    border-left: none;
}
html[dir="rtl"] .dev-menu-children a.active,
html[dir="rtl"] .dev-submenu-item.active {
    border-left: none;
    border-right: 2px solid var(--brand);
}
html[dir="rtl"] .dev-menu-freccia.aperto {
    transform: rotate(180deg);
}

/* ---- Breadcrumb: la freccina "›" va specchiata ---- */
html[dir="rtl"] .stat-breadcrumb,
html[dir="rtl"] .perc-breadcrumb,
html[dir="rtl"] .bp-breadcrumb {
    direction: rtl;
}

/* ---- Form: allineamento testo/placeholder, checkbox e radio a destra della label ---- */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}
html[dir="rtl"] .backup-mirato-voce,
html[dir="rtl"] .stat-ora-opzione,
html[dir="rtl"] .perc-periodo {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* ---- Tabelle: intestazioni e celle allineate a destra ---- */
html[dir="rtl"] table th,
html[dir="rtl"] table td {
    text-align: right;
}

/* ---- Barre orizzontali (statistiche, percorsi): riempimento da destra ---- */
html[dir="rtl"] .stat-bar-fill,
html[dir="rtl"] .perc-bar-fill {
    margin-right: 0;
    margin-left: auto;
}
html[dir="rtl"] .perc-freccia {
    transform: scaleX(-1); /* la freccia "→" del percorso punta verso sinistra in RTL */
}

/* ---- Card profilo/scambio: badge e pulsanti non si specchiano (icone+testo restano leggibili) ---- */
html[dir="rtl"] .sc-card {
    text-align: right;
}