/**
 * Menu Admin — Styles du menu admin personnalisé dans la sidebar WordPress
 *
 * Design moderne type dashboard pour la navigation principale
 * du plugin dans l'interface d'administration WordPress.
 *
 * @file        cc-admin-menu.css
 * @package     CaisseConnect
 * @subpackage  CSS\Components
 * @since       0.9
 * @version     1.2.5
 * @author      Microlibre <contact@microlibre.net>
 * @copyright   2026 Microlibre
 * @license     GPL-2.0+ https://www.gnu.org/licenses/gpl-2.0.html
 * @link        https://microlibre.net/caisse-connect
 */


/* ========================================
   MARGE DE LA PAGE (espace par rapport au menu)
   ======================================== */

#wpcontent, #wpfooter {
    margin-left: 140px;
}


/* ========================================
   MENU PRINCIPAL CAISSE-CONNECT
   ======================================== */

/* Lien principal du menu */
#adminmenu .toplevel_page_cc > a.menu-top {
    color: var(--cc-menu-text, #374151);
    transition: all var(--cc-transition, 0.2s ease);
}

/* Hover sur lien principal */
#adminmenu .toplevel_page_cc:hover > a.menu-top,
#adminmenu .toplevel_page_cc.wp-has-current-submenu > a.menu-top:hover {
    background-color: var(--cc-menu-hover-bg, #e5e7eb);
    color: var(--cc-menu-text, #374151);
}

/* Menu principal actif */
#adminmenu .toplevel_page_cc.current > a.menu-top,
#adminmenu .toplevel_page_cc.wp-has-current-submenu > a.menu-top,
#adminmenu .toplevel_page_cc.wp-menu-open > a.menu-top {
    background-color: var(--cc-menu-active-bg, #007bff);
    color: var(--cc-menu-active-text, #ffffff);
}

/* ========================================
   SOUS-MENU CAISSE-CONNECT
   ======================================== */

/* Conteneur sous-menu */
#adminmenu .toplevel_page_cc ul.wp-submenu {
    background-color: var(--cc-menu-bg, #f9fafb);
    border-left: 1px solid var(--cc-menu-border, #e5e7eb);
}

/* Header du sous-menu (titre répété) */
#adminmenu .toplevel_page_cc ul.wp-submenu li.wp-submenu-head {
    color: var(--cc-menu-text-muted, #6b7280);
    border-bottom: 1px solid var(--cc-menu-border, #e5e7eb);
}

/* Liens du sous-menu */
#adminmenu .toplevel_page_cc ul.wp-submenu li a {
    color: var(--cc-menu-text, #374151);
    transition: all var(--cc-transition, 0.2s ease);
    border-radius: var(--cc-border-radius, 4px);
    margin: 2px 8px;
    padding: 6px 12px;
}

/* Hover sous-menu */
#adminmenu .toplevel_page_cc ul.wp-submenu li a:hover {
    background-color: var(--cc-menu-hover-bg, #e7f3ff);
    color: var(--cc-menu-active-bg, #007bff);
    border-left: 3px solid var(--cc-menu-active-bg, #007bff);
    padding-left: 9px;
}

/* Sous-menu item actif */
#adminmenu .toplevel_page_cc ul.wp-submenu li.current a {
    background-color: var(--cc-menu-active-bg, #007bff);
    color: var(--cc-menu-active-text, #ffffff);
    font-weight: 600;
}

/* ========================================
   ICONES DES SOUS-MENUS
   ======================================== */

/* Les icônes des sous-menus sont désormais portées par le TITRE du menu
   (helper cc_menu_item_icone(), cf. cc-ui-general.php), et non plus par ce CSS.
   Raison : cc-admin-menu.css n'est chargé que sur les pages CC ; les icônes
   doivent rester visibles partout (flyout natif depuis une page WP quelconque)
   et homogènes avec Apparence/Documentation (liens natifs/externes non ciblables
   par href). Porter l'icône dans le titre couvre toutes les pages et évite le
   doublon icône-CSS + icône-HTML. */

/* ========================================
   ICONE DU MENU
   ======================================== */

/* Icône normale */
#adminmenu .toplevel_page_cc .wp-menu-image::before {
    color: var(--cc-menu-text, #374151);
    transition: color var(--cc-transition, 0.2s ease);
}

/* Icône quand actif */
#adminmenu .toplevel_page_cc.current .wp-menu-image::before,
#adminmenu .toplevel_page_cc.wp-has-current-submenu .wp-menu-image::before,
#adminmenu .toplevel_page_cc.wp-menu-open .wp-menu-image::before {
    color: var(--cc-menu-active-text, #ffffff);
}

/* Icône au hover */
#adminmenu .toplevel_page_cc:hover .wp-menu-image::before {
    color: var(--cc-menu-text, #374151);
}

/* Icône au hover quand actif */
#adminmenu .toplevel_page_cc.current:hover .wp-menu-image::before,
#adminmenu .toplevel_page_cc.wp-has-current-submenu:hover .wp-menu-image::before,
#adminmenu .toplevel_page_cc.wp-menu-open:hover .wp-menu-image::before {
    color: var(--cc-menu-active-text, #ffffff);
}

/* ========================================
   SEPARATEUR ET FLECHE
   ======================================== */

/* Flèche du sous-menu */
#adminmenu .toplevel_page_cc .wp-menu-arrow,
#adminmenu .toplevel_page_cc .wp-menu-arrow div {
    background-color: var(--cc-menu-bg, #f9fafb);
    border-color: var(--cc-menu-border, #e5e7eb);
}

#adminmenu .toplevel_page_cc.wp-has-current-submenu .wp-menu-arrow,
#adminmenu .toplevel_page_cc.wp-menu-open .wp-menu-arrow {
    background-color: var(--cc-menu-active-bg, #007bff);
}


/* ========================================
   FLYOUT DES ONGLETS (survol page principale)
   ======================================== */

/* Visibilité pilotée par le CSS (autorité unique, réagit en live au resize et au
   repli) : le panneau n'est affiché que menu déplié desktop = largeur > 960 px ET
   body sans .folded (repli manuel). En dessous de 961 px (auto-fold icônes 783–960,
   ou mobile ≤ 782), et en repli manuel, WP gère son propre flyout natif → on reste
   masqué. NB : ne PAS se baser sur .auto-fold (présent même en grand écran déplié). */

/* Ancrage du panneau sur l'item de page principale */
#adminmenu .toplevel_page_cc ul.wp-submenu li {
    position: relative;
}

/* Panneau flyout — caché par défaut dans tous les contextes */
.cc-menu-admin-flyout {
    position: absolute;
    left: 100%;
    top: 0;
    display: none;
    z-index: 9999;
    min-width: 180px;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background-color: var(--cc-menu-bg, #f9fafb);
    border: 1px solid var(--cc-menu-border, #e5e7eb);
    border-radius: var(--cc-border-radius, 4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Affichage uniquement menu déplié desktop (large + non replié manuellement) */
@media screen and (min-width: 961px) {
    body:not(.folded) .cc-menu-admin-flyout.is-open {
        display: block;
    }
}

/* Liens des onglets dans le panneau (alignés sur le style des sous-menus) */
.cc-menu-admin-flyout li {
    margin: 0;
    padding: 0;
}

/* Spécificité volontairement élevée (préfixe complet du sous-menu) pour neutraliser
   l'héritage du style .current : quand on est sur la page active, son <li> est
   .current et la règle « li.current a » colorierait sinon TOUS les onglets du
   flyout (qui sont des <a> descendants). Seul l'item survolé doit être surligné. */
#adminmenu .toplevel_page_cc ul.wp-submenu li ul.cc-menu-admin-flyout li a {
    display: block;
    background-color: transparent;
    color: var(--cc-menu-text, #374151);
    font-weight: normal;
    text-decoration: none;
    padding: 6px 16px;
    font-size: 13px;
    line-height: 1.5;
    transition: all var(--cc-transition, 0.2s ease);
}

#adminmenu .toplevel_page_cc ul.wp-submenu li ul.cc-menu-admin-flyout li a:hover {
    background-color: var(--cc-menu-hover-bg, #e7f3ff);
    color: var(--cc-menu-active-bg, #007bff);
}

/* ========================================
   RESPONSIVE MOBILE
   ======================================== */

@media screen and (max-width: 782px) {
    #wpcontent, #wpfooter {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
    div#wpbody { padding-top: 0 !important; }
}