:root {
    --nm-blue-dark: #173556;
    --nm-blue: #2d70b8;
    --nm-blue-soft: #eef6ff;
    --nm-border: #d8e6f3;
    --nm-text: #173556;
    --nm-muted: #6b7f98;
    --nm-bg-soft: #f7fbff;
    --nm-green: #15865c;
    --nm-red: #dc2626;
    --nm-red-soft: #fff1f1;
    --nm-shadow-sm: 0 10px 24px rgba(48, 91, 140, 0.07);
    --nm-shadow-md: 0 16px 38px rgba(48, 91, 140, 0.10);
}


.nm-app-main .btn {
    border-radius: 999px;
    font-weight: 800;
    font-size: 13px;
    padding: 9px 15px;
    transition: all 0.18s ease;
    box-shadow: none;
}

.nm-app-main .btn:hover {
    transform: translateY(-1px);
}

.nm-app-main .btn-sm {
    padding: 7px 12px;
    font-size: 12px;
}

.nm-app-main .btn-lg {
    padding: 12px 22px;
    font-size: 15px;
}

.nm-app-main .btn-primary,
.nm-app-main .btn-dark {
    border: 0;
    background: linear-gradient(135deg, var(--nm-blue-dark), var(--nm-blue));
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(23, 53, 86, 0.16);
}

.nm-app-main .btn-primary:hover,
.nm-app-main .btn-dark:hover {
    background: linear-gradient(135deg, #102b49, #245f9d);
    color: #ffffff;
    box-shadow: 0 16px 30px rgba(23, 53, 86, 0.22);
}

.nm-app-main .btn-success {
    border: 0;
    background: linear-gradient(135deg, #15865c, #1fa971);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(21, 134, 92, 0.16);
}

.nm-app-main .btn-success:hover {
    background: linear-gradient(135deg, #116f4d, #198f60);
    color: #ffffff;
    box-shadow: 0 16px 30px rgba(21, 134, 92, 0.23);
}

.nm-app-main .btn-danger {
    border: 1px solid #fecaca;
    background: #fff1f1;
    color: #b91c1c;
    box-shadow: none;
}

.nm-app-main .btn-danger:hover {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}

.nm-app-main .btn-warning {
    border: 1px solid #fde68a;
    background: #fff7dd;
    color: #92400e;
    box-shadow: none;
}

.nm-app-main .btn-warning:hover {
    background: #fef3c7;
    color: #78350f;
}

.nm-app-main .btn-info {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
    box-shadow: none;
}

.nm-app-main .btn-info:hover {
    background: #dbeafe;
    color: #1e40af;
}

.nm-app-main .btn-light,
.nm-app-main .btn-outline-secondary,
.nm-app-main .btn-outline-primary,
.nm-app-main .btn-outline-dark {
    background: #ffffff;
    border: 1px solid var(--nm-border);
    color: #526b84;
    box-shadow: none;
}

.nm-app-main .btn-light:hover,
.nm-app-main .btn-outline-secondary:hover,
.nm-app-main .btn-outline-primary:hover,
.nm-app-main .btn-outline-dark:hover {
    background: var(--nm-blue-soft);
    border-color: #c9dceb;
    color: var(--nm-blue);
}

.nm-app-main .btn-outline-danger {
    background: #ffffff;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.nm-app-main .btn-outline-danger:hover {
    background: #fff1f1;
    border-color: #fca5a5;
    color: #b91c1c;
}

/* =========================
   Alertes globales
========================= */

.nm-app-main .alert {
    border: 0;
    border-radius: 18px;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.55;
    box-shadow: var(--nm-shadow-sm);
}

.nm-app-main .alert-success {
    background: #eefaf5;
    color: #157347;
    border: 1px solid #d4eee3;
}

.nm-app-main .alert-danger {
    background: #fff1f1;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.nm-app-main .alert-warning {
    background: #fff7dd;
    color: #92400e;
    border: 1px solid #fde68a;
}

.nm-app-main .alert-info {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

/* =========================
   Cartes globales
========================= */

.nm-app-main .card {
    border-color: #dbe8f4;
}

.nm-app-main .card.shadow-sm,
.nm-app-main .card.border-0 {
    box-shadow: var(--nm-shadow-sm) !important;
}

.nm-app-main .card-header {
    border-bottom: 1px solid #e8f1fa;
}

.nm-app-main .rounded-4 {
    border-radius: 22px !important;
}

/* =========================
   Formulaires globaux
========================= */

.nm-app-main .form-label {
    color: var(--nm-text);
    font-size: 13px;
    font-weight: 800;
}

.nm-app-main .form-control,
.nm-app-main .form-select {
    min-height: 45px;
    border-radius: 15px;
    border: 1px solid var(--nm-border);
    background-color: #fbfdff;
    color: var(--nm-text);
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
    transition: all 0.18s ease;
}

.nm-app-main .form-control::placeholder {
    color: #9aacbd;
    font-weight: 500;
}

.nm-app-main .form-control:focus,
.nm-app-main .form-select:focus {
    border-color: var(--nm-blue);
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(45, 112, 184, 0.13);
}

.nm-app-main textarea.form-control {
    line-height: 1.6;
}

/* =========================
   Tableaux globaux
========================= */

.nm-app-main .table {
    color: var(--nm-text);
}

.nm-app-main .table thead th {
    color: #708399;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: #fbfdff;
    border-bottom: 1px solid #e8f1fa;
}

.nm-app-main .table tbody td {
    border-color: #edf3f8;
}

.nm-app-main .table-hover tbody tr:hover {
    background-color: #f8fbff;
}

/* =========================
   Badges globaux
========================= */

.nm-app-main .badge {
    border-radius: 999px;
    font-weight: 900;
    padding: 6px 9px;
}

.nm-app-main .badge.bg-primary {
    background: #eef6ff !important;
    color: #286ba9 !important;
    border: 1px solid #d8e8f8;
}

.nm-app-main .badge.bg-danger {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fecaca;
}

.nm-app-main .badge.bg-success {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #bbf7d0;
}

.nm-app-main .badge.bg-warning {
    background: #fff4d6 !important;
    color: #9a6a00 !important;
    border: 1px solid #fde68a;
}

.nm-app-main .badge.bg-secondary {
    background: #edf2f7 !important;
    color: #526b84 !important;
    border: 1px solid #d8e1ea;
}

.nm-app-main .badge.bg-info {
    background: #e7f7fb !important;
    color: #0077a3 !important;
    border: 1px solid #bae6fd;
}

.nm-app-main .badge.bg-dark {
    background: #173556 !important;
    color: #ffffff !important;
}

/* =========================
   Menus dropdown
========================= */

.nm-app-main .dropdown-menu {
    border: 0;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 16px 38px rgba(23, 53, 86, 0.14);
}

.nm-app-main .dropdown-item {
    border-radius: 11px;
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 750;
}

.nm-app-main .dropdown-item:hover {
    background: #eef6ff;
    color: var(--nm-blue-dark);
}

.nm-topbar .nm-brand-logo {
    display: block !important;
    width: auto !important;
    height: 46px !important;
    max-width: 180px !important;
    max-height: 46px !important;
    object-fit: contain !important;
}

/* =========================
   États vides professionnels
========================= */

.nm-empty-state,
.mailbox-empty-state {
    padding: 52px 20px;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #bed7ee;
    border-radius: 22px;
}

.nm-empty-icon,
.mailbox-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
    border-radius: 24px;
    background: #eef6ff;
    color: #2d70b8;
    font-size: 28px;
    font-weight: 950;
}

.nm-empty-title,
.mailbox-empty-title {
    margin-bottom: 6px;
    color: var(--nm-text);
    font-size: 18px;
    font-weight: 950;
}

.nm-empty-text,
.mailbox-empty-text {
    max-width: 460px;
    margin: 0 auto;
    color: var(--nm-muted);
    font-size: 14px;
    line-height: 1.6;
    font-weight: 600;
}

/* Ancien contenu vide simple dans les tableaux */
.nm-app-main td[colspan] .text-muted,
.nm-app-main .table td[colspan] {
    color: var(--nm-muted);
}

/* =========================
   Modals
========================= */

.nm-app-main .modal-content {
    border: 0;
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(23, 53, 86, 0.22);
}

.nm-app-main .modal-header {
    border-bottom: 1px solid #e8f1fa;
}

.nm-app-main .modal-footer {
    border-top: 0;
}

/* =========================
   Petites finitions
========================= */

.nm-app-main a {
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.nm-app-main hr {
    border-color: #e8f1fa;
    opacity: 1;
}

.nm-app-main .text-muted {
    color: var(--nm-muted) !important;
}

/* =========================
   Responsive
========================= */

@media (max-width: 767.98px) {
    .nm-app-main .btn {
        min-height: 40px;
    }

    .nm-app-main .card-body {
        padding: 18px;
    }

    .nm-empty-state,
    .mailbox-empty-state {
        padding: 38px 16px;
    }

    .nm-empty-icon,
    .mailbox-empty-icon {
        width: 60px;
        height: 60px;
        border-radius: 20px;
        font-size: 24px;
    }
}
/* =========================
   Navigation / Sidebar globale
   Finition professionnelle
========================= */

/* Conteneurs possibles de la navigation gauche */
.nm-app-sidebar,
.nm-sidebar,
.app-sidebar,
.sidebar,
.layout-sidebar,
.dashboard-sidebar {
    background:
        radial-gradient(circle at top left, rgba(101, 168, 236, 0.10), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border-right: 1px solid #dbe8f4;
}

/* Carte interne si la sidebar utilise une card */
.nm-app-sidebar .card,
.nm-sidebar .card,
.app-sidebar .card,
.sidebar .card,
.layout-sidebar .card,
.dashboard-sidebar .card {
    border: 1px solid #dbe8f4 !important;
    border-radius: 24px !important;
    box-shadow: 0 16px 38px rgba(48, 91, 140, 0.08) !important;
    overflow: hidden;
}

/* Logo / marque dans la sidebar */
.nm-app-sidebar .navbar-brand,
.nm-sidebar .navbar-brand,
.app-sidebar .navbar-brand,
.sidebar .navbar-brand,
.layout-sidebar .navbar-brand,
.dashboard-sidebar .navbar-brand,
.nm-app-sidebar .brand,
.nm-sidebar .brand,
.app-sidebar .brand,
.sidebar .brand,
.layout-sidebar .brand,
.dashboard-sidebar .brand {
    color: #173556 !important;
    font-size: 17px;
    font-weight: 950;
    letter-spacing: -0.02em;
    text-decoration: none;
}

/* Petits titres de section */
.nm-app-sidebar .nav-title,
.nm-sidebar .nav-title,
.app-sidebar .nav-title,
.sidebar .nav-title,
.layout-sidebar .nav-title,
.dashboard-sidebar .nav-title,
.nm-app-sidebar .menu-title,
.nm-sidebar .menu-title,
.app-sidebar .menu-title,
.sidebar .menu-title,
.layout-sidebar .menu-title,
.dashboard-sidebar .menu-title {
    margin: 18px 0 8px;
    padding: 0 10px;
    color: #7b8fa5;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Liste de navigation */
.nm-app-sidebar .nav,
.nm-sidebar .nav,
.app-sidebar .nav,
.sidebar .nav,
.layout-sidebar .nav,
.dashboard-sidebar .nav {
    gap: 6px;
}

/* Liens de navigation */
.nm-app-sidebar .nav-link,
.nm-sidebar .nav-link,
.app-sidebar .nav-link,
.sidebar .nav-link,
.layout-sidebar .nav-link,
.dashboard-sidebar .nav-link,
.nm-app-sidebar .list-group-item,
.nm-sidebar .list-group-item,
.app-sidebar .list-group-item,
.sidebar .list-group-item,
.layout-sidebar .list-group-item,
.dashboard-sidebar .list-group-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 44px;
    padding: 10px 12px !important;
    margin-bottom: 4px;
    border-radius: 15px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #526b84 !important;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.25;
    text-decoration: none;
    transition: all 0.18s ease;
}

/* Hover */
.nm-app-sidebar .nav-link:hover,
.nm-sidebar .nav-link:hover,
.app-sidebar .nav-link:hover,
.sidebar .nav-link:hover,
.layout-sidebar .nav-link:hover,
.dashboard-sidebar .nav-link:hover,
.nm-app-sidebar .list-group-item:hover,
.nm-sidebar .list-group-item:hover,
.app-sidebar .list-group-item:hover,
.sidebar .list-group-item:hover,
.layout-sidebar .list-group-item:hover,
.dashboard-sidebar .list-group-item:hover {
    background: #eef6ff !important;
    border-color: #d8e8f8 !important;
    color: #173556 !important;
    transform: translateX(2px);
}

/* Page active */
.nm-app-sidebar .nav-link.active,
.nm-sidebar .nav-link.active,
.app-sidebar .nav-link.active,
.sidebar .nav-link.active,
.layout-sidebar .nav-link.active,
.dashboard-sidebar .nav-link.active,
.nm-app-sidebar .list-group-item.active,
.nm-sidebar .list-group-item.active,
.app-sidebar .list-group-item.active,
.sidebar .list-group-item.active,
.layout-sidebar .list-group-item.active,
.dashboard-sidebar .list-group-item.active,
.nm-app-sidebar .nav-link[aria-current="page"],
.nm-sidebar .nav-link[aria-current="page"],
.app-sidebar .nav-link[aria-current="page"],
.sidebar .nav-link[aria-current="page"],
.layout-sidebar .nav-link[aria-current="page"],
.dashboard-sidebar .nav-link[aria-current="page"] {
    background: linear-gradient(135deg, #173556, #2d70b8) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(23, 53, 86, 0.16);
}

/* Barre active à gauche */
.nm-app-sidebar .nav-link.active::before,
.nm-sidebar .nav-link.active::before,
.app-sidebar .nav-link.active::before,
.sidebar .nav-link.active::before,
.layout-sidebar .nav-link.active::before,
.dashboard-sidebar .nav-link.active::before,
.nm-app-sidebar .list-group-item.active::before,
.nm-sidebar .list-group-item.active::before,
.app-sidebar .list-group-item.active::before,
.sidebar .list-group-item.active::before,
.layout-sidebar .list-group-item.active::before,
.dashboard-sidebar .list-group-item.active::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    width: 4px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    transform: translateY(-50%);
}

/* Icônes si elles existent dans les liens */
.nm-app-sidebar .nav-link i,
.nm-sidebar .nav-link i,
.app-sidebar .nav-link i,
.sidebar .nav-link i,
.layout-sidebar .nav-link i,
.dashboard-sidebar .nav-link i,
.nm-app-sidebar .nav-link svg,
.nm-sidebar .nav-link svg,
.app-sidebar .nav-link svg,
.sidebar .nav-link svg,
.layout-sidebar .nav-link svg,
.dashboard-sidebar .nav-link svg {
    width: 20px;
    min-width: 20px;
    color: #2d70b8;
    transition: all 0.18s ease;
}

/* Icônes dans un petit fond si tu utilises span/icon */
.nm-app-sidebar .nav-link .icon,
.nm-sidebar .nav-link .icon,
.app-sidebar .nav-link .icon,
.sidebar .nav-link .icon,
.layout-sidebar .nav-link .icon,
.dashboard-sidebar .nav-link .icon,
.nm-app-sidebar .nav-link .nav-icon,
.nm-sidebar .nav-link .nav-icon,
.app-sidebar .nav-link .nav-icon,
.sidebar .nav-link .nav-icon,
.layout-sidebar .nav-link .nav-icon,
.dashboard-sidebar .nav-link .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 12px;
    background: #eef6ff;
    color: #2d70b8;
    font-size: 14px;
    font-weight: 950;
    transition: all 0.18s ease;
}

/* Icône active */
.nm-app-sidebar .nav-link.active i,
.nm-sidebar .nav-link.active i,
.app-sidebar .nav-link.active i,
.sidebar .nav-link.active i,
.layout-sidebar .nav-link.active i,
.dashboard-sidebar .nav-link.active i,
.nm-app-sidebar .nav-link.active svg,
.nm-sidebar .nav-link.active svg,
.app-sidebar .nav-link.active svg,
.sidebar .nav-link.active svg,
.layout-sidebar .nav-link.active svg,
.dashboard-sidebar .nav-link.active svg {
    color: #ffffff;
}

.nm-app-sidebar .nav-link.active .icon,
.nm-sidebar .nav-link.active .icon,
.app-sidebar .nav-link.active .icon,
.sidebar .nav-link.active .icon,
.layout-sidebar .nav-link.active .icon,
.dashboard-sidebar .nav-link.active .icon,
.nm-app-sidebar .nav-link.active .nav-icon,
.nm-sidebar .nav-link.active .nav-icon,
.app-sidebar .nav-link.active .nav-icon,
.sidebar .nav-link.active .nav-icon,
.layout-sidebar .nav-link.active .nav-icon,
.dashboard-sidebar .nav-link.active .nav-icon {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

/* Badges / nombres dans la sidebar */
.nm-app-sidebar .nav-link .badge,
.nm-sidebar .nav-link .badge,
.app-sidebar .nav-link .badge,
.sidebar .nav-link .badge,
.layout-sidebar .nav-link .badge,
.dashboard-sidebar .nav-link .badge,
.nm-app-sidebar .list-group-item .badge,
.nm-sidebar .list-group-item .badge,
.app-sidebar .list-group-item .badge,
.sidebar .list-group-item .badge,
.layout-sidebar .list-group-item .badge,
.dashboard-sidebar .list-group-item .badge {
    margin-left: auto;
    min-width: 26px;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef6ff !important;
    color: #286ba9 !important;
    border: 1px solid #d8e8f8 !important;
    font-size: 11px;
    font-weight: 950;
}

/* Badge actif */
.nm-app-sidebar .nav-link.active .badge,
.nm-sidebar .nav-link.active .badge,
.app-sidebar .nav-link.active .badge,
.sidebar .nav-link.active .badge,
.layout-sidebar .nav-link.active .badge,
.dashboard-sidebar .nav-link.active .badge,
.nm-app-sidebar .list-group-item.active .badge,
.nm-sidebar .list-group-item.active .badge,
.app-sidebar .list-group-item.active .badge,
.sidebar .list-group-item.active .badge,
.layout-sidebar .list-group-item.active .badge,
.dashboard-sidebar .list-group-item.active .badge {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
}

/* Bouton déconnexion dans sidebar */
.nm-app-sidebar a[href*="logout"],
.nm-sidebar a[href*="logout"],
.app-sidebar a[href*="logout"],
.sidebar a[href*="logout"],
.layout-sidebar a[href*="logout"],
.dashboard-sidebar a[href*="logout"] {
    color: #dc2626 !important;
}

.nm-app-sidebar a[href*="logout"]:hover,
.nm-sidebar a[href*="logout"]:hover,
.app-sidebar a[href*="logout"]:hover,
.sidebar a[href*="logout"]:hover,
.layout-sidebar a[href*="logout"]:hover,
.dashboard-sidebar a[href*="logout"]:hover {
    background: #fff1f1 !important;
    border-color: #fecaca !important;
    color: #b91c1c !important;
}

/* Séparateurs */
.nm-app-sidebar hr,
.nm-sidebar hr,
.app-sidebar hr,
.sidebar hr,
.layout-sidebar hr,
.dashboard-sidebar hr {
    margin: 14px 0;
    border-color: #e8f1fa;
    opacity: 1;
}

/* Footer interne de sidebar s'il existe */
.nm-app-sidebar .sidebar-footer,
.nm-sidebar .sidebar-footer,
.app-sidebar .sidebar-footer,
.sidebar .sidebar-footer,
.layout-sidebar .sidebar-footer,
.dashboard-sidebar .sidebar-footer {
    margin-top: auto;
    padding-top: 14px;
    color: #7b8fa5;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 650;
}

/* Responsive navigation */
@media (max-width: 991.98px) {
    .nm-app-sidebar,
    .nm-sidebar,
    .app-sidebar,
    .sidebar,
    .layout-sidebar,
    .dashboard-sidebar {
        border-right: 0;
        border-bottom: 1px solid #dbe8f4;
    }

    .nm-app-sidebar .nav,
    .nm-sidebar .nav,
    .app-sidebar .nav,
    .sidebar .nav,
    .layout-sidebar .nav,
    .dashboard-sidebar .nav {
        gap: 4px;
    }

    .nm-app-sidebar .nav-link,
    .nm-sidebar .nav-link,
    .app-sidebar .nav-link,
    .sidebar .nav-link,
    .layout-sidebar .nav-link,
    .dashboard-sidebar .nav-link,
    .nm-app-sidebar .list-group-item,
    .nm-sidebar .list-group-item,
    .app-sidebar .list-group-item,
    .sidebar .list-group-item,
    .layout-sidebar .list-group-item,
    .dashboard-sidebar .list-group-item {
        min-height: 42px;
        font-size: 13px;
    }
}
/* =========================================================
   RESPONSIVE GLOBAL — Novateam Box
   Corrections finales desktop / tablette / mobile
========================================================= */

/* Évite les débordements horizontaux généraux */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.nm-app-main {
    max-width: 100%;
    overflow-x: hidden;
}

/* Images, iframes, contenus HTML des emails */
.nm-app-main img,
.nm-app-main iframe,
.nm-app-main video,
.email-html-content img,
.email-html-content iframe,
.email-html-content video {
    max-width: 100%;
    height: auto;
}

/* Longs textes : emails, liens, noms, sujets */
.nm-app-main,
.nm-app-main p,
.nm-app-main td,
.nm-app-main th,
.nm-app-main a,
.email-html-content,
.email-text-content {
    overflow-wrap: anywhere;
}

/* Tables : éviter qu'elles cassent la page */
.nm-app-main .table-responsive,
.nm-app-main .table-wrapper,
.nm-app-main .mailbox-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Les cartes ne doivent jamais dépasser */
.nm-app-main .card,
.nm-app-main .modal-content,
.nm-app-main .dropdown-menu {
    max-width: 100%;
}

/* =========================================================
   ÉCRANS MOYENS — tablettes / petits laptops
========================================================= */

@media (max-width: 1199.98px) {
    .nm-app-main {
        padding-left: 0;
        padding-right: 0;
    }

    .nm-app-main .container,
    .nm-app-main .container-fluid {
        max-width: 100%;
        padding-left: 14px;
        padding-right: 14px;
    }

    .nm-app-main .row {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }

    .nm-app-main .card-body {
        padding: 20px;
    }

    .nm-app-main .card-header {
        padding: 18px 20px;
    }

    /* Tableaux */
    .nm-app-main table.table {
        min-width: 760px;
    }

    .nm-app-main .table thead th,
    .nm-app-main .table tbody td {
        white-space: normal;
    }

    /* Boutons groupés */
    .nm-app-main .btn-toolbar,
    .nm-app-main .btn-group,
    .nm-app-main .d-flex.gap-2,
    .nm-app-main .d-flex.gap-3 {
        flex-wrap: wrap;
    }

    /* Formulaires sur deux colonnes -> plus souples */
    .nm-app-main .row > [class*="col-md-"],
    .nm-app-main .row > [class*="col-lg-"] {
        min-width: 0;
    }

    /* Page mailbox */
    .mailbox-page {
        height: auto !important;
        overflow: visible !important;
    }

    .mailbox-layout-row {
        height: auto !important;
        min-height: 0 !important;
    }

    .mailbox-sidebar-col,
    .mailbox-content-col {
        height: auto !important;
        min-height: 0 !important;
    }

    .mailbox-sidebar-card,
    .mailbox-list-card {
        height: auto !important;
        max-height: none !important;
    }

    .mailbox-table {
        min-width: 980px;
    }

    /* Page détail discussion */
    .detail-page {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .detail-top-inner {
        align-items: stretch;
    }

    .detail-actions {
        justify-content: flex-start;
    }

    .detail-thread-card,
    .detail-thread-wrap {
        height: auto !important;
        max-height: none !important;
    }
}

/* =========================================================
   TABLETTE — inférieur à 992px
========================================================= */

@media (max-width: 991.98px) {
    body.nm-app-body {
        overflow: auto !important;
    }

    .nm-app-main {
        height: auto !important;
        min-height: calc(100vh - 58px);
        overflow: visible !important;
    }

    .nm-app-main .container,
    .nm-app-main .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Sidebar globale */
    .nm-app-sidebar,
    .nm-sidebar,
    .app-sidebar,
    .sidebar,
    .layout-sidebar,
    .dashboard-sidebar {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        border-right: 0 !important;
        border-bottom: 1px solid #dbe8f4;
    }

    .nm-app-sidebar .nav,
    .nm-sidebar .nav,
    .app-sidebar .nav,
    .sidebar .nav,
    .layout-sidebar .nav,
    .dashboard-sidebar .nav {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .nm-app-sidebar .nav-link,
    .nm-sidebar .nav-link,
    .app-sidebar .nav-link,
    .sidebar .nav-link,
    .layout-sidebar .nav-link,
    .dashboard-sidebar .nav-link,
    .nm-app-sidebar .list-group-item,
    .nm-sidebar .list-group-item,
    .app-sidebar .list-group-item,
    .sidebar .list-group-item,
    .layout-sidebar .list-group-item,
    .dashboard-sidebar .list-group-item {
        width: auto;
        min-height: 40px;
        margin-bottom: 0;
        font-size: 13px;
    }

    /* Titres */
    .nm-app-main h1 {
        font-size: clamp(1.7rem, 4vw, 2.2rem);
    }

    .nm-app-main h2 {
        font-size: clamp(1.35rem, 3vw, 1.8rem);
    }

    .nm-app-main h3,
    .nm-app-main h4 {
        font-size: clamp(1.15rem, 2.5vw, 1.45rem);
    }

    /* Cartes */
    .nm-app-main .card {
        border-radius: 20px !important;
    }

    .nm-app-main .card-body {
        padding: 18px;
    }

    .nm-app-main .card-header {
        padding: 16px 18px;
    }

    /* Formulaires */
    .nm-app-main form .row {
        row-gap: 12px;
    }

    .nm-app-main .form-control,
    .nm-app-main .form-select {
        min-height: 44px;
    }

    textarea.form-control {
        min-height: 110px;
    }

    /* Boutons */
    .nm-app-main .btn {
        min-height: 40px;
    }

    /* Page mailbox */
    .mailbox-list-header .d-flex,
    .mailbox-list-heading {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .mailbox-list-header form,
    .mailbox-search-form {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .mailbox-table-wrap {
        padding: 8px !important;
    }

    .mailbox-table {
        min-width: 920px;
    }

    /* Page détail discussion */
    .detail-top-inner {
        flex-direction: column !important;
    }

    .detail-actions {
        max-width: none !important;
        width: 100%;
        justify-content: flex-start !important;
    }

    .detail-sidebar-card {
        position: static !important;
    }

    .detail-layout-row,
    .detail-thread-stack,
    .detail-thread-card {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .detail-thread-wrap {
        overflow: visible !important;
        max-height: none !important;
    }

    .detail-form-grid {
        grid-template-columns: 1fr !important;
    }

    /* Login */
    .nm-login-page {
        min-height: 100vh;
        height: auto;
        overflow: visible;
    }

    .nm-login-shell {
        grid-template-columns: 1fr !important;
        max-width: 620px !important;
    }

    .nm-login-left,
    .nm-login-right {
        padding: 26px 24px !important;
    }
}

/* =========================================================
   MOBILE — inférieur à 768px
========================================================= */

@media (max-width: 767.98px) {
    .nm-app-main .container,
    .nm-app-main .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    .nm-app-main .row {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }

    /* Cartes plus compactes */
    .nm-app-main .card {
        border-radius: 18px !important;
    }

    .nm-app-main .card-body {
        padding: 16px;
    }

    .nm-app-main .card-header {
        padding: 15px 16px;
    }

    /* Boutons en pleine largeur quand ils sont dans des groupes */
    .nm-app-main .btn-toolbar .btn,
    .nm-app-main .btn-group .btn,
    .nm-app-main .d-flex.flex-wrap .btn {
        flex: 1 1 auto;
    }

    /* Boutons de formulaire */
    .nm-app-main form .btn,
    .detail-reply-actions .btn,
    .detail-send-btn,
    .detail-draft-btn {
        min-height: 42px;
    }

    /* Inputs */
    .nm-app-main .form-control,
    .nm-app-main .form-select {
        font-size: 14px;
        border-radius: 14px;
    }

    /* Tables */
    .nm-app-main table.table {
        min-width: 720px;
    }

    .nm-app-main .table thead th {
        font-size: 10px;
        padding: 10px 12px;
    }

    .nm-app-main .table tbody td {
        font-size: 13px;
        padding: 12px !important;
    }

    /* Dropdowns */
    .nm-app-main .dropdown-menu {
        max-width: calc(100vw - 24px);
    }

    /* Modals */
    .nm-app-main .modal-dialog {
        margin: 10px;
    }

    .nm-app-main .modal-content {
        border-radius: 20px;
    }

    /* Sidebar en version mobile */
    .nm-app-sidebar .nav,
    .nm-sidebar .nav,
    .app-sidebar .nav,
    .sidebar .nav,
    .layout-sidebar .nav,
    .dashboard-sidebar .nav {
        flex-direction: column;
    }

    .nm-app-sidebar .nav-link,
    .nm-sidebar .nav-link,
    .app-sidebar .nav-link,
    .sidebar .nav-link,
    .layout-sidebar .nav-link,
    .dashboard-sidebar .nav-link,
    .nm-app-sidebar .list-group-item,
    .nm-sidebar .list-group-item,
    .app-sidebar .list-group-item,
    .sidebar .list-group-item,
    .layout-sidebar .list-group-item,
    .dashboard-sidebar .list-group-item {
        width: 100%;
        min-height: 42px;
    }

    /* Page mailbox */
    .mailbox-page {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .mailbox-list-header {
        padding: 16px !important;
    }

    .mailbox-list-header h5,
    .mailbox-list-title {
        font-size: 20px !important;
    }

    .mailbox-list-header .input-group,
    .mailbox-search-wrap {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .mailbox-list-header .input-group .btn,
    .mailbox-search-btn,
    .mailbox-clear-btn {
        width: 100%;
    }

    .mailbox-table {
        min-width: 860px;
    }

    .mailbox-avatar {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 14px !important;
    }

    .mailbox-sender-name,
    .mailbox-subject-line {
        font-size: 13px !important;
    }

    .mailbox-sender-email,
    .mailbox-preview-line,
    .mailbox-date-link {
        font-size: 12px !important;
    }

    /* Page détail discussion */
    .detail-page {
        padding: 10px !important;
    }

    .detail-top-card,
    .detail-sidebar-card,
    .detail-thread-card,
    .detail-reply-card {
        border-radius: 18px !important;
    }

    .detail-top-card {
        padding: 16px !important;
    }

    .detail-title {
        font-size: 1.55rem !important;
    }

    .detail-actions {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .detail-actions form,
    .detail-actions a,
    .detail-action-btn {
        width: 100%;
    }

    .detail-message-inner {
        padding: 15px !important;
    }

    .detail-message-head {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .detail-message-date {
        text-align: left !important;
        white-space: normal !important;
    }

    .detail-avatar {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 14px !important;
    }

    .email-reader-body {
        padding: 15px !important;
        border-radius: 15px !important;
    }

    .email-html-content,
    .email-text-content {
        font-size: 13px !important;
        line-height: 1.65 !important;
    }

    .detail-reply-actions {
        display: grid !important;
        grid-template-columns: 1fr;
    }

    .detail-send-btn,
    .detail-draft-btn {
        width: 100%;
    }

    /* Login */
    .nm-login-page {
        padding: 10px !important;
    }

    .nm-login-shell {
        border-radius: 22px !important;
    }

    .nm-login-left,
    .nm-login-right {
        padding: 22px 18px !important;
    }

    .nm-login-left h1 {
        font-size: 1.85rem !important;
    }

    .nm-login-title {
        font-size: 26px !important;
    }

    .nm-login-logo {
        max-height: 42px !important;
    }
}

/* =========================================================
   PETITS MOBILES — inférieur à 576px
========================================================= */

@media (max-width: 575.98px) {
    .nm-app-main .container,
    .nm-app-main .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }

    .nm-app-main h1 {
        font-size: 1.55rem;
    }

    .nm-app-main h2 {
        font-size: 1.35rem;
    }

    .nm-app-main h3,
    .nm-app-main h4 {
        font-size: 1.15rem;
    }

    /* Tous les gros groupes d'actions deviennent verticaux */
    .nm-app-main .d-flex.justify-content-between,
    .nm-app-main .d-flex.align-items-center,
    .nm-app-main .d-flex.align-items-start {
        flex-wrap: wrap;
    }

    .nm-app-main .btn {
        font-size: 13px;
        padding: 9px 13px;
    }

    /* Formulaires : boutons pleine largeur dans les petits écrans */
    .nm-app-main form button[type="submit"],
    .nm-app-main form .btn-primary,
    .nm-app-main form .btn-dark,
    .nm-app-main form .btn-success,
    .nm-app-main form .btn-danger {
        width: 100%;
    }

    /* Les boutons dans les dropdown ne doivent pas devenir pleine largeur */
    .nm-app-main .dropdown-menu button,
    .nm-app-main .dropdown-menu .btn {
        width: 100%;
        text-align: left;
    }

    /* Cartes */
    .nm-app-main .card-body {
        padding: 14px;
    }

    .nm-app-main .card-header {
        padding: 14px;
    }

    /* Tables encore plus compactes */
    .nm-app-main table.table {
        min-width: 680px;
    }

    .nm-app-main .table thead th {
        padding: 9px 10px;
    }

    .nm-app-main .table tbody td {
        padding: 10px !important;
    }

    /* États vides */
    .nm-empty-state,
    .mailbox-empty-state {
        padding: 34px 14px;
        border-radius: 18px;
    }

    .nm-empty-icon,
    .mailbox-empty-icon {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        font-size: 23px;
    }

    .nm-empty-title,
    .mailbox-empty-title {
        font-size: 16px;
    }

    .nm-empty-text,
    .mailbox-empty-text {
        font-size: 13px;
    }

    /* Mailbox */
    .mailbox-table {
        min-width: 820px;
    }

    .mailbox-badges {
        gap: 5px !important;
    }

    .mailbox-badge,
    .mailbox-badges .badge {
        font-size: 10px !important;
        padding: 4px 7px !important;
    }

    /* Détail email */
    .detail-person {
        gap: 10px !important;
    }

    .detail-person-name {
        font-size: 14px !important;
    }

    .detail-person-meta {
        font-size: 11.5px !important;
    }

    .detail-pill {
        font-size: 10.5px !important;
        padding: 5px 8px !important;
    }

    /* Login */
    .nm-login-left p,
    .nm-login-subtitle {
        font-size: 13px !important;
    }

    .nm-login-feature {
        padding: 10px 12px !important;
    }

    .nm-login-input {
        min-height: 50px !important;
    }

    .nm-login-submit {
        min-height: 50px !important;
    }
}

/* =========================================================
   TRÈS PETITS ÉCRANS — inférieur à 400px
========================================================= */

@media (max-width: 399.98px) {
    .nm-app-main .container,
    .nm-app-main .container-fluid {
        padding-left: 6px;
        padding-right: 6px;
    }

    .nm-app-main .card {
        border-radius: 16px !important;
    }

    .nm-app-main .card-body,
    .nm-app-main .card-header {
        padding: 12px;
    }

    .nm-app-main .btn {
        font-size: 12.5px;
        padding: 8px 11px;
    }

    .nm-app-main .form-control,
    .nm-app-main .form-select {
        font-size: 13px;
    }

    .mailbox-table {
        min-width: 780px;
    }

    .detail-title {
        font-size: 1.35rem !important;
    }

    .nm-login-left h1 {
        font-size: 1.6rem !important;
    }

    .nm-login-title {
        font-size: 23px !important;
    }
}
/* =========================================================
   Liste des discussions — badges/statuts plus professionnels
========================================================= */

.mailbox-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    margin-top: 10px !important;
}

.mailbox-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 25px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    border: 1px solid transparent !important;
    box-shadow: 0 4px 12px rgba(23, 53, 86, 0.05) !important;
}

.mailbox-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    min-width: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
}

/* Nombre de messages */
.mailbox-badge-blue {
    background: #eef6ff !important;
    color: #286ba9 !important;
    border-color: #cfe3f7 !important;
}

/* Non lu / alerte importante */
.mailbox-badge-red {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border-color: #fecaca !important;
}

/* Répondu */
.mailbox-badge-yellow {
    background: #fff4d6 !important;
    color: #9a6a00 !important;
    border-color: #fde68a !important;
}

/* Archivé */
.mailbox-badge-gray {
    background: #edf2f7 !important;
    color: #526b84 !important;
    border-color: #d8e1ea !important;
}

/* Brouillon / pièce jointe */
.mailbox-badge-teal {
    background: #e7f7fb !important;
    color: #0077a3 !important;
    border-color: #bae6fd !important;
}

/* Style spécial pour les discussions non lues */
.mailbox-row-unread {
    background: transparent !important;
}

.mailbox-row-unread td {
    background: transparent !important;
    border-color: #edf1f5 !important;
}

.mailbox-row-unread:hover,
.mailbox-row-unread:hover td {
    background: #f8fbff !important;
}

.mailbox-row-unread td:first-child {
    box-shadow: none !important;
}

.mailbox-row-unread .mailbox-avatar {
    background: #eef6ff !important;
    color: #286ba9 !important;
    border: 0 !important;
}

.mailbox-row-unread .mailbox-date-link {
    color: #506070 !important;
    font-weight: 950 !important;
}

/* Petit effet propre au survol des badges */
.mailbox-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(23, 53, 86, 0.08) !important;
}