/*
 * Systeme de design du LIMS AMSSA.
 * Repris du systeme SCOLARITE (meme barre laterale, tableaux, formulaires,
 * modales et messages), decline dans le vert AMSSA. Charge apres Bootstrap,
 * qu'il surcharge : changer --primary / --secondary suffit a recolorer.
 */

@font-face {
    font-family: 'LouguiyaFR';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/LouguiyaFR.ttf') format('truetype');
}

@font-face {
    font-family: 'LouguiyaFR';
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/LouguiyaFR-Bold.ttf') format('truetype');
}

/* LouguiyaFR n'a aucun glyphe arabe : l'arabe (nom de l'agence, champs .ar)
   a sa propre police, la meme que sur les rapports. */
@font-face {
    font-family: 'XB Riyaz';
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/XBRiyaz.ttf') format('truetype');
}

@font-face {
    font-family: 'XB Riyaz';
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/XBRiyaz-Bold.ttf') format('truetype');
}

:root {
    --primary: #047a3a;
    --secondary: #06a044;
    --accent: #5fbf86;
    --light: #e9f6ee;
    --dark: #12351f;
    --text: #2b2b2b;
    --muted: #6c757d;
    --surface: #ffffff;
    --surface-alt: #f8f9fa;
    --border: #e5e7eb;
    --sidebar-width: 230px;

    /* Liens Bootstrap dans la couleur de l'application. */
    --bs-link-color: #047a3a;
    --bs-link-color-rgb: 4, 122, 58;
    --bs-link-hover-color: #06a044;
    --bs-link-hover-color-rgb: 6, 160, 68;
}

body {
    font-family: 'LouguiyaFR', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text);
    background-color: var(--surface-alt);
}

[lang="ar"],
[dir="rtl"],
.rtl,
.ar {
    font-family: 'XB Riyaz', 'Traditional Arabic', 'Segoe UI', sans-serif;
}

/* ------------------------------------------------------------------ Sidebar */

.sidebar {
    height: 100vh;
    background: var(--primary);
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: var(--sidebar-width);
    padding: 0;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 4px 0 20px rgba(4, 122, 58, 0.15);
    display: flex;
    flex-direction: column;
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.sidebar-header {
    padding: 20px 15px 18px;
    text-align: center;
}

/* Selecteur de langue de la barre laterale, dans le style du formulaire de connexion. */
.sidebar-language {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.sidebar-language .dropdown-toggle {
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: white;
    border-radius: 25px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.sidebar-language .dropdown-toggle:hover,
.sidebar-language .dropdown-toggle:focus {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
}

.sidebar-language .dropdown-toggle .flag-icon {
    font-size: 14px;
    margin-inline-end: 5px;
}

.sidebar-language .dropdown-menu {
    min-width: 160px;
    border-radius: 12px;
    border: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    padding: 8px;
}

.sidebar-language .dropdown-item {
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.sidebar-language .dropdown-item:hover {
    background: var(--surface-alt);
}

.sidebar-language .dropdown-item .flag-icon {
    margin-inline-end: 8px;
}

.sidebar-logo {
    background: white;
    border-radius: 10px;
    padding: 6px 10px;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.sidebar-logo img {
    max-width: 55px;
    height: auto;
    object-fit: contain;
}

.sidebar-brand {
    color: var(--primary);
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 16px;
}

.sidebar-nav {
    padding: 10px 12px;
    flex: 1;
}

.sidebar-nav .nav-section-title {
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    padding: 0 14px;
    margin: 16px 0 10px;
}

.sidebar a {
    text-decoration: none;
    display: flex;
    align-items: center;
    padding: 11px 14px;
    color: rgba(255, 255, 255, 0.85);
    border-radius: 10px;
    margin-bottom: 5px;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 14px;
    position: relative;
}

.sidebar a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    transform: translateX(5px);
}

[dir="rtl"] .sidebar a:hover {
    transform: translateX(-5px);
}

.sidebar a.active {
    background: rgba(255, 255, 255, 0.95);
    color: var(--primary);
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.sidebar a.active i {
    color: var(--primary);
}

.sidebar a .badge {
    margin-inline-start: auto;
    padding: 3px 8px;
}

.sidebar-lab-name {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
    line-height: 1.3;
}

.sidebar-module {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.sidebar a i {
    margin-inline-end: 10px;
    width: 18px;
    font-size: 14px;
    text-align: center;
}

.sidebar-footer {
    padding: 15px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.sidebar-logout:hover {
    background: gray;
    border-color: rgba(93, 90, 90, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(174, 172, 172, 0.4);
}

.sidebar-logout i {
    margin-inline-end: 10px;
}

/* ------------------------------------------------------------- Navbar */

.navbar {
    background-color: var(--surface);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-inline-start: var(--sidebar-width);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar-title {
    font-weight: 600;
    color: var(--dark);
    font-size: 16px;
}

.navbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
}

.navbar-user i {
    font-size: 20px;
    color: var(--primary);
}

.navbar-user:hover {
    color: var(--primary);
}

.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--primary);
    cursor: pointer;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.sidebar-overlay.show {
    display: block;
}

/* ------------------------------------------------------------ Contenu */

.content {
    margin-inline-start: var(--sidebar-width);
    padding: 20px;
}

.topbar {
    margin-bottom: 20px;
}

.topbar h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.menu-title {
    font-weight: 600;
    margin: 20px 0 10px;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card {
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    border-radius: 12px 12px 0 0 !important;
}

/* ------------------------------------------------------------ Tableaux */

.table-container {
    margin-top: 20px;
}

.table {
    border-radius: 10px;
    overflow: hidden;
}

.table tbody tr:last-child > td {
    border-bottom: none;
}

.table .badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 12px;
}

/* En-tete comme ONSER : fond blanc (Bootstrap), texte en gras, sans bordure. */
.table thead th {
    border: none;
    padding: 12px 15px;
    font-weight: 600;
    white-space: nowrap;
}

.table tbody td {
    padding: 12px 15px;
    vertical-align: middle;
}

/* ------------------------------------------------- Formulaires et boutons */

.form-label {
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 6px;
}

.form-control,
.form-select {
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    transition: all 0.3s;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 0.2rem rgba(6, 160, 68, 0.15);
}

.form-control:read-only:not([type="date"]) {
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.form-control-sm,
.form-select-sm {
    padding: 6px 10px;
    border-radius: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(4, 122, 58, 0.3);
}

.btn-success {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border: none;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-success:hover,
.btn-success:focus {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(4, 122, 58, 0.3);
}

.btn-outline-success {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    border-radius: 8px;
}

.btn-outline-primary {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    border-radius: 8px;
}

.btn-sm {
    border-radius: 8px;
}

.text-success {
    color: var(--primary) !important;
}

.bg-success {
    background-color: var(--primary) !important;
}

.pagination {
    --bs-pagination-color: var(--primary);
    --bs-pagination-active-bg: var(--primary);
    --bs-pagination-active-border-color: var(--primary);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(6, 160, 68, 0.15);
}

/* ------------------------------------------- Actions d'une ligne de tableau

   Les icones se lisent d'elles-memes ; sur des lignes deja denses, leur
   contour n'ajoutait que du bruit. La couleur du bouton reste, portee par
   l'icone seule, et un fond leger parait au survol pour montrer la cible.

   Bootstrap 5.3 decrit chaque variante par des variables : les redefinir vaut
   mieux que d'ecraser les regles, qui different d'une variante a l'autre.

   Seules les variantes a contour sont visees : un bouton plein dans la meme
   rangee marque un etat — « inscrit pour l'annee » — et non une action ; il
   doit garder son fond pour se distinguer. */
.table td .btn-group > [class*="btn-outline-"],
.table td .btn-group > form > [class*="btn-outline-"] {
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-bg: transparent;

    /* Le survol ne renverse plus le bouton : la couleur reste celle de la
       variante, seul le fond change. */
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: var(--light);
    --bs-btn-active-color: var(--bs-btn-color);
    --bs-btn-active-bg: var(--light);
}

/* La desactivation passe par un formulaire ; sans cela son bouton sort de la
   rangee et se decale d'un cheveu par rapport aux autres. */
.table td .btn-group > form {
    display: contents;
}

.badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 12px;
}

.input-icon-group {
    position: relative;
}

.input-icon {
    position: absolute;
    inset-inline-start: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondary);
    z-index: 10;
}

.input-icon-group .form-control {
    padding-inline-start: 45px;
}

.toggle-icon {
    position: absolute;
    inset-inline-end: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--secondary);
    cursor: pointer;
    z-index: 10;
}

/* ------------------------------------------------------------- Modales */

/*
 * Toutes les modales sont defilantes. Les formulaires metier (eleve, paiement,
 * emploi du temps) depassent souvent la hauteur de l'ecran : sans cela, le pied
 * de modale et ses boutons sortent du viewport et deviennent inatteignables.
 * Reproduit le comportement de .modal-dialog-scrollable sans avoir a poser la
 * classe sur chaque modale.
 */
.modal-body {
    overflow-y: auto;
    /* Laisse la place a l'en-tete, au pied et aux marges de la modale. */
    max-height: calc(100vh - 12rem);
}

.modal-header,
.modal-footer {
    flex-shrink: 0;
}

/* Fenetre de confirmation commune (data-confirm). */
.confirm-dialog .modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.confirm-dialog .confirm-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    font-size: 26px;
    background: var(--light);
    color: var(--primary);
}

.confirm-dialog.confirm-danger .confirm-icon {
    background: #fdecea;
    color: #dc3545;
}

.confirm-dialog .modal-body {
    text-align: center;
    padding: 28px 24px 10px;
}

.confirm-dialog .modal-footer {
    justify-content: center;
    border-top: none;
    padding-bottom: 24px;
}

/* --------------------------------------------------- Messages de session */

.session-messages {
    position: fixed;
    top: 80px;
    inset-inline-end: 20px;
    z-index: 1080;
    width: 340px;
    max-width: 90vw;
}

.session-message {
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    margin-bottom: 10px;
}

/* ------------------------------------------------------------ Squelettes */

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 16px;
    margin: 4px 0;
}

/* ---------------------------------------------------------- Statistiques */

.stat-card {
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 20px;
    height: 100%;
}

.stat-card .stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light);
    color: var(--primary);
    font-size: 18px;
}

.stat-card .stat-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2;
}

.stat-card .stat-label {
    color: var(--muted);
    font-size: 13px;
}

/* ---------------------------------------------------------------- Auth */

body.auth-page {
    background: linear-gradient(135deg, #f5f7fa 0%, #c6e3cf 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.auth-container {
    width: 100%;
    max-width: 420px;
    display: flex;
    align-items: stretch;
    justify-content: center;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.auth-card {
    background: white;
    width: 100%;
}

.auth-brand {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--primary);
    margin-bottom: 4px;
}

/* Selecteur de langue du formulaire de connexion. */
.language-switcher-inline {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
}

.language-switcher-inline .dropdown-toggle {
    background: white;
    border: 2px solid var(--secondary);
    color: var(--secondary);
    border-radius: 25px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(4, 122, 58, 0.1);
}

.language-switcher-inline .dropdown-toggle:hover,
.language-switcher-inline .dropdown-toggle:focus {
    background: var(--secondary);
    color: white;
}

.language-switcher-inline .dropdown-toggle .flag-icon {
    font-size: 16px;
    margin-inline-end: 6px;
}

.language-switcher-inline .dropdown-item .flag-icon {
    font-size: 16px;
    margin-inline-end: 8px;
}

.auth-header {
    padding: 24px 24px 8px;
    text-align: center;
}

.auth-header img {
    max-height: 80px;
    margin-bottom: 10px;
    object-fit: contain;
}

.auth-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 4px;
}

.auth-header p {
    font-size: 14px;
    color: var(--muted);
}

.auth-body {
    padding: 20px 24px 28px;
}

.auth-body .form-group {
    margin-bottom: 20px;
}

.auth-body .btn-primary {
    border-radius: 10px;
    padding: 12px 30px;
    font-weight: 600;
    width: 100%;
}

/* ---------------------------------------------------------- Responsive */

@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    [dir="rtl"] .sidebar {
        transform: translateX(100%);
    }

    .sidebar.show {
        transform: translateX(0) !important;
    }

    .content,
    .navbar {
        margin-inline-start: 0 !important;
    }

    .sidebar-toggle {
        display: block !important;
    }
}

/* ------------------------------------------------------------ Impression */

@media print {
    .sidebar,
    .navbar,
    .sidebar-overlay,
    .session-messages,
    .no-print,
    .aap {
        display: none !important;
    }

    .content {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Titres de section des formulaires : vert LIMS (et non le bleu Bootstrap). */
.form-section-title {
    color: var(--primary);
    font-weight: 600;
    border-bottom: 2px solid var(--secondary);
    padding-bottom: 6px;
    margin: 8px 0 12px;
}

/* Boutons des tableaux : icone et libelle sur la meme ligne, taille compacte. */
.table .btn {
    white-space: nowrap;
}

.table .btn-sm {
    padding: 0.2rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Boutons des tableaux : remplis de leur couleur (pas de contour seul). */
.table .btn-outline-primary { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.table .btn-outline-success { background-color: var(--bs-success); border-color: var(--bs-success); color: #fff; }
.table .btn-outline-danger { background-color: var(--bs-danger); border-color: var(--bs-danger); color: #fff; }
.table .btn-outline-warning { background-color: var(--bs-warning); border-color: var(--bs-warning); color: #212529; }
.table .btn-outline-secondary { background-color: var(--bs-secondary); border-color: var(--bs-secondary); color: #fff; }
.table .btn-outline-info { background-color: var(--bs-info); border-color: var(--bs-info); color: #212529; }
.table [class*="btn-outline-"]:hover { filter: brightness(0.9); }

/* Retour des pages de detail (style GED) : fleche a gauche du titre. */
.page-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.15em;
    margin-right: .55rem;
    text-decoration: none;
    vertical-align: middle;
    transition: transform .15s ease, color .15s ease;
}
.page-back:hover,
.page-back:focus { color: var(--secondary); transform: translateX(-3px); }
@media print { .page-back { display: none; } }

/* Bascule de module (LIMS / Stock) sous le logo. */
.module-switch-btn,
.module-switch-static {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    font-size: .9rem;
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .3);
}
.module-switch-btn { cursor: pointer; transition: background .15s ease; }
.module-switch-btn:hover,
.module-switch-btn:focus { background: rgba(255, 255, 255, .22); }
.module-switch-btn::after { margin-inline-start: auto; }
.module-switch .dropdown-item.active,
.module-switch .dropdown-item:active { background: var(--primary); color: #fff; }
.module-switch-static { background: rgba(255, 255, 255, .06); border-style: dashed; cursor: default; }

/* Options de la bascule : texte sombre sur fond blanc (les liens de la barre laterale sont blancs). */
.sidebar .module-switch .dropdown-menu {
    padding: 6px;
    border: 0;
    border-radius: 10px;
    margin-top: 6px !important;
}
.sidebar .module-switch .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    color: #1f2937;
    background: transparent;
    padding: 9px 12px;
    margin: 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
    transform: none;
}
.sidebar .module-switch .dropdown-menu .dropdown-item i { color: var(--primary); margin-inline-end: 8px; }
.sidebar .module-switch .dropdown-menu .dropdown-item:hover { background: #eef6f0; color: var(--primary); transform: none; }
.sidebar .module-switch .dropdown-menu .dropdown-item.active { background: #e3f1e7; color: var(--primary); font-weight: 600; }
.sidebar .module-switch .dropdown-menu .dropdown-item .fa-check { margin-inline-start: auto; margin-inline-end: 0; }