/*
 * ASAP Delivery — Design system « Red & Black », Phase 2 : coque applicative (shell).
 * Référence : docs/DESIGN_SYSTEM.md § Coque.
 *
 * Restyle uniquement la coque commune aux 7 espaces (même markup partout) :
 *   resources/views/backend/partials/master.blade.php (#overlay, .wrapper, #sidebar, #main-content, .footer)
 *   backend/partials/navbar + merchant_panel/partials/navbar + deliveryman_panel/partials/navbar (.navbar)
 *   backend/partials/sidebar + merchant_panel/partials/sidebar + deliveryman_panel/partials/sidebar
 *
 * Contrat avec public/backend/js/sidebar.js : on ne change ni positions ni largeurs (sidebar 250 px,
 * navbar 70 px, #sidebar.show / body.hidden-sidebar / #overlay / .has-submenu.open / a.active),
 * seulement l'apparence. Sélecteurs préfixés par body.with-sidebar pour égaler la spécificité des
 * règles RTL historiques (body[dir=rtl] #sidebar …) sans !important. Propriétés logiques (RTL).
 */

/* ============================================================================================
 * Navbar
 * ========================================================================================== */
body.with-sidebar .navbar {
    background: var(--ds-navbar-bg);
    color: var(--ds-text-muted);
    border-bottom: 1px solid var(--ds-border);
    box-shadow: var(--ds-shadow-sm);
    min-height: 70px;
    padding-block: 0.75rem;
    padding-inline: 1.25rem;
}

body.with-sidebar .navbar .logo-container {
    gap: 2.5rem;
}

/* Bouton menu (#toggleSidebar, hook sidebar.js) */
body.with-sidebar .navbar #toggleSidebar {
    width: var(--ds-touch-target);
    height: var(--ds-touch-target);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-heading);
    box-shadow: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body.with-sidebar .navbar #toggleSidebar:hover {
    background: var(--ds-primary-soft);
    color: var(--ds-primary-text);
    border-color: var(--ds-primary-soft);
    box-shadow: none;
}

body.with-sidebar .navbar #toggleSidebar:focus-visible {
    outline: 2px solid var(--ds-primary);
    outline-offset: 2px;
}

body.with-sidebar .navbar .right-content {
    gap: 0.5rem;
}

/* Recherche de la navbar */
body.with-sidebar .navbar .j-search-form .j-form-control {
    height: 40px;
    min-width: 260px;
    background: var(--ds-surface-2);
    border: 1px solid var(--ds-border);
    color: var(--ds-text);
}

body.with-sidebar .navbar .j-search-form .j-form-control::placeholder {
    color: var(--ds-text-subtle);
}

body.with-sidebar .navbar .j-search-form .j-form-btn {
    color: var(--ds-text-muted);
}

/* Boutons-icônes uniformes : langue, thème, notifications, à-faire */
body.with-sidebar .navbar .nav-lang .custom-dropdown .btn-ami,
body.with-sidebar .navbar .right-content #day-night-icon,
body.with-sidebar .navbar .notification_dropdown .j-nav-lk,
body.with-sidebar .navbar .j-to-do .j-td-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-surface);
    color: var(--ds-text-muted);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body.with-sidebar .navbar .nav-lang .custom-dropdown .btn-ami:hover,
body.with-sidebar .navbar .right-content #day-night-icon:hover,
body.with-sidebar .navbar .notification_dropdown .j-nav-lk:hover,
body.with-sidebar .navbar .j-to-do .j-td-btn:hover {
    background: var(--ds-surface-2);
    border-color: var(--ds-border-strong);
    color: var(--ds-heading);
}

body.with-sidebar .navbar .right-content #day-night-icon i,
body.with-sidebar .navbar .nav-lang .custom-dropdown .btn-ami i {
    color: inherit;
    font-size: 1rem;
}

body.with-sidebar .navbar .notification_dropdown .j-nav-lk .nav-bell {
    display: inline-flex;
    width: auto;
    height: auto;
    border: 0;
    background: transparent;
}

body.with-sidebar .navbar .notification_dropdown .j-nav-lk img,
body.with-sidebar .navbar .j-to-do .j-td-btn img {
    width: 18px;
    height: 18px;
}

/* Profil */
body.with-sidebar .navbar .header-profile .nav-np {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.25rem;
    padding-inline-end: 0.625rem;
    border-radius: var(--ds-radius-pill);
    transition: background-color 0.15s ease;
}

body.with-sidebar .navbar .header-profile .nav-np:hover {
    background: var(--ds-surface-2);
}

body.with-sidebar .navbar .header-profile .nav-np .np {
    width: 36px;
    height: 36px;
    border-radius: var(--ds-radius-pill);
    object-fit: cover;
    border: 2px solid var(--ds-surface);
    box-shadow: 0 0 0 1px var(--ds-border);
}

body.with-sidebar .navbar .header-profile .nav-np h6 {
    color: var(--ds-heading);
    font-weight: var(--ds-weight-semibold);
    font-size: var(--ds-text-md);
}

/* Menus déroulants de la navbar uniquement (langue, notifications, profil) */
body.with-sidebar .navbar .dropdown-menu {
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow-lg);
    padding: 0.375rem;
    margin-top: 0.5rem;
}

body.with-sidebar .navbar .dropdown-menu .dropdown-item {
    color: var(--ds-text);
    border-radius: var(--ds-radius-sm);
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
}

body.with-sidebar .navbar .dropdown-menu .dropdown-item:hover,
body.with-sidebar .navbar .dropdown-menu .dropdown-item:focus {
    background: var(--ds-row-hover);
    color: var(--ds-heading);
}

body.with-sidebar .navbar .notification_dropdown .dropdown-menu .all-notification {
    color: var(--ds-primary-text);
    font-weight: var(--ds-weight-semibold);
}

/* ============================================================================================
 * Sidebar (anthracite dans les deux modes, cramoisi pour l'élément actif)
 * ========================================================================================== */
body.with-sidebar #sidebar {
    background: var(--ds-sidebar-bg);
    color: var(--ds-sidebar-text);
    border-top: 0;
    padding-block: 0.875rem 1.5rem;
    padding-inline: 0.75rem;
    height: calc(100vh - 70px);
}

body.with-sidebar #sidebar ul {
    padding: 0;
    margin: 0;
}

body.with-sidebar #sidebar ul li {
    margin-bottom: 2px;
}

body.with-sidebar #sidebar ul li a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 40px;
    padding-block: 0.5rem;
    padding-inline: 0.75rem;
    border-radius: var(--ds-radius-sm);
    border-inline-start: 3px solid transparent;
    color: var(--ds-sidebar-text);
    font-size: var(--ds-text-md);
    font-weight: var(--ds-weight-medium);
    line-height: 1.25;
    background-color: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.with-sidebar #sidebar ul li a > i:first-child {
    flex: none;
    width: 1.25rem;
    text-align: center;
    font-size: 1rem;
    color: var(--ds-sidebar-muted);
    transition: color 0.15s ease;
}

body.with-sidebar #sidebar ul li a:hover {
    background-color: var(--ds-sidebar-hover-bg);
    color: var(--ds-sidebar-active-text);
}

body.with-sidebar #sidebar ul li a:hover > i:first-child {
    color: var(--ds-sidebar-active-text);
}

/* Élément actif : fond anthracite clair + rail cramoisi */
body.with-sidebar #sidebar ul li a.active {
    background-color: var(--ds-sidebar-active-bg);
    color: var(--ds-sidebar-active-text);
    font-weight: var(--ds-weight-semibold);
    border-inline-start-color: var(--ds-sidebar-rail);
}

body.with-sidebar #sidebar ul li a.active > i:first-child {
    color: var(--ds-sidebar-rail);
}

/* Groupe ouvert (.open posé par sidebar.js / Blade) : parent mis en avant, sans aplat de couleur */
body.with-sidebar #sidebar .has-submenu.open a,
body.with-sidebar #sidebar .has-submenu.open > a {
    background-color: transparent;
    color: var(--ds-sidebar-active-text);
    border-radius: var(--ds-radius-sm);
}

body.with-sidebar #sidebar .has-submenu.open > a > i:first-child {
    color: var(--ds-sidebar-rail);
}

/* Amélioration progressive (règle séparée : un :has() non supporté invaliderait toute la liste). */
body.with-sidebar #sidebar .has-submenu:has(.submenu a.active) > a > i:first-child {
    color: var(--ds-sidebar-rail);
}

body.with-sidebar #sidebar .has-submenu > a::after {
    color: var(--ds-sidebar-muted);
    transition: transform 0.2s ease;
}

/* Sous-menus : ligne de guide, items plus discrets, actif en blanc + point cramoisi */
body.with-sidebar #sidebar .submenu {
    background-color: transparent;
    color: var(--ds-sidebar-muted);
    border-radius: 0;
    border-top: 0;
    margin-block: 2px 6px;
    margin-inline-start: 1.375rem;
    padding-block: 0.125rem;
    padding-inline: 0.5rem 0;
    border-inline-start: 1px solid var(--ds-sidebar-line);
}

body.with-sidebar #sidebar .has-submenu.open .submenu {
    border-top: 0;
}

body.with-sidebar #sidebar .submenu li {
    margin-bottom: 0;
}

body.with-sidebar #sidebar .submenu li a,
body.with-sidebar #sidebar .has-submenu.open .submenu li a {
    min-height: 36px;
    padding-block: 0.4375rem;
    padding-inline: 0.875rem 0.5rem;
    border-inline-start: 0;
    color: var(--ds-sidebar-muted);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-weight-regular);
    background-color: transparent;
}

body.with-sidebar #sidebar .submenu li:last-child a {
    padding-bottom: 0.4375rem;
}

body.with-sidebar #sidebar .submenu li a::before {
    left: auto;
    right: auto;
    inset-inline-start: 0.25rem;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background-color: var(--ds-sidebar-line);
}

body.with-sidebar #sidebar .has-submenu .submenu a:hover {
    background-color: var(--ds-sidebar-hover-bg);
    color: var(--ds-sidebar-active-text);
}

body.with-sidebar #sidebar .has-submenu .submenu a:hover::before {
    background-color: var(--ds-sidebar-muted);
}

body.with-sidebar #sidebar .has-submenu .submenu a.active,
body.with-sidebar #sidebar .has-submenu.open .submenu a.active {
    background-color: var(--ds-sidebar-active-bg);
    color: var(--ds-sidebar-active-text);
    font-weight: var(--ds-weight-semibold);
}

body.with-sidebar #sidebar .has-submenu .submenu a.active::before,
body.with-sidebar #sidebar .has-submenu.open .submenu a.active::before {
    background-color: var(--ds-sidebar-rail);
}

/* ============================================================================================
 * Contenu principal, pied de page, overlay
 * ========================================================================================== */
body.with-sidebar #main-content .container-fluid {
    padding-block: 1.5rem;
    padding-inline: 1.5rem;
}

/* Remplace le fond sombre codé en dur (#12151a, css/sass/style.css) par le token de fond. */
body.with-sidebar.dark-mode #main-content .container-fluid {
    background-color: var(--ds-bg);
}

body.with-sidebar #main-content .footer {
    background: var(--ds-bg);
    border-top: 1px solid var(--ds-border);
}

body.with-sidebar #main-content .footer .copyright {
    padding-block: 1rem;
    padding-inline: 1.5rem;
}

body.with-sidebar #main-content .footer .copyright p {
    margin: 0;
    color: var(--ds-text-muted);
    font-size: var(--ds-text-sm);
}

body.with-sidebar #overlay {
    background: var(--ds-overlay);
}

/* ============================================================================================
 * Responsive de la coque (aucune largeur/position modifiée : contrat sidebar.js)
 * ========================================================================================== */
@media (max-width: 991.98px) {
    /* Ombre seulement menu ouvert : fermé (hors écran), elle déborderait sur le bord de l'écran. */
    body.with-sidebar #sidebar.show {
        box-shadow: var(--ds-shadow-lg);
    }

    /* Cibles tactiles >= 44 px dans le menu mobile */
    body.with-sidebar #sidebar ul li a,
    body.with-sidebar #sidebar .submenu li a,
    body.with-sidebar #sidebar .has-submenu.open .submenu li a {
        min-height: var(--ds-touch-target);
    }

    body.with-sidebar .navbar .logo-container {
        gap: 0.75rem;
    }
}

@media (max-width: 767.98px) {
    body.with-sidebar .navbar {
        padding-inline: 0.75rem;
    }

    body.with-sidebar .navbar .right-content {
        gap: 0.375rem;
    }

    body.with-sidebar .navbar #toggleSidebar {
        margin-inline-start: 0.5rem;
    }

    body.with-sidebar #main-content .container-fluid {
        padding-block: 1rem;
        padding-inline: 1rem;
    }

    body.with-sidebar #main-content .footer .copyright {
        padding-inline: 1rem;
    }
}

@media (max-width: 575.98px) {
    /* Boutons-icônes en cible tactile complète sur téléphone */
    body.with-sidebar .navbar .nav-lang .custom-dropdown .btn-ami,
    body.with-sidebar .navbar .right-content #day-night-icon,
    body.with-sidebar .navbar .notification_dropdown .j-nav-lk {
        width: var(--ds-touch-target);
        height: var(--ds-touch-target);
    }

    body.with-sidebar .navbar .header-profile .nav-np {
        padding-inline-end: 0.25rem;
    }
}

/* ============================================================================================
 * Bloc logo intégré au shell (conformité visuelle avec le prototype Direction D)
 * Le logo n'est plus posé sur la barre blanche dans l'ancien conteneur du gabarit : sur bureau,
 * quand la sidebar est ouverte, le lien .logo devient la tête de la sidebar sombre (même largeur
 * 250 px, même fond, pleine hauteur de la navbar) et affiche la variante « fond sombre »
 * (img.logo-dark = settings('light_logo') : « Delivery » en blanc). Ratio toujours conservé
 * (hauteur max 40 px, largeur automatique, jamais d'agrandissement au-delà de la taille native).
 * Sidebar repliée (body.hidden-sidebar) et < 992 px : comportement standard sur la barre claire.
 * Aucun markup modifié : mêmes .logo / .logo-light / .logo-dark / #toggleSidebar.
 * CURRENT LOGO ASSET LIMITATION : l'asset en base est trop petit pour la qualité finale
 * (voir docs/DESIGN_SYSTEM.md). Ne pas agrandir au-delà du natif. Asset recommandé :
 * horizontal, icône + ASAP Delivery, sans tagline, SVG ou PNG ≥ 520×160, deux variantes.
 * ========================================================================================== */
body.with-sidebar .navbar .logo-container .logo img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 40px;
    object-fit: contain;
}

@media (min-width: 992px) {
    body.with-sidebar:not(.hidden-sidebar) .navbar {
        padding-block: 0;
        padding-inline-start: 0;
    }

    body.with-sidebar:not(.hidden-sidebar) .navbar .logo-container {
        align-self: stretch;
        gap: var(--ds-space-4);
    }

    body.with-sidebar:not(.hidden-sidebar) .navbar .logo-container > a.logo.d-md-block {
        display: flex !important; /* (!) bootstrap .d-md-block { display: block !important } */
        align-items: center;
        justify-content: center;
        flex: 0 0 250px;
        width: 250px;
        max-width: none;
        max-height: none;
        height: 100%;
        min-height: 70px;
        padding-inline: var(--ds-space-5);
        background: var(--ds-sidebar-bg);
        /* recouvre la bordure basse claire de la navbar : continuité avec la sidebar */
        box-shadow: 0 1px 0 0 var(--ds-sidebar-bg);
    }

    body.with-sidebar:not(.hidden-sidebar) .navbar .logo-container > a.logo .logo-light {
        display: none;
    }

    body.with-sidebar:not(.hidden-sidebar) .navbar .logo-container > a.logo .logo-dark {
        display: block;
    }
}