/* Navigation Uneeti : accordéon de thèmes + zone épinglés/récents + palette Ctrl-K.
   Pensé pour une sidebar sombre (cf. .sidebar de l'app). */

/* ── Accordéon ───────────────────────────────────────────── */
.nav-theme {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    background: none; border: 0; color: var(--uneeti-menu-fg, #cdd7e1);
    padding: .5rem .75rem; cursor: pointer; white-space: nowrap;
    font-size: .82rem; text-transform: uppercase; letter-spacing: .04em;
    border-radius: 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);   /* [essai] détache le blanc du fond mauve clair */
}
.nav-theme:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-theme .nav-theme-chev { margin-left: auto; font-size: .6rem; transition: transform .18s; }
.nav-theme.open .nav-theme-chev { transform: rotate(90deg); }
.nav-theme-body { overflow: hidden; max-height: 0; transition: max-height .22s ease; }

/* l'item de menu : on réutilise .nav-link de l'app, on ajoute juste l'étoile */
.nav-item-row { display: flex; align-items: center; }
.nav-item-row .nav-link { flex: 1; }
.nav-pin { background: none; border: 0; color: #6c8aa6; cursor: pointer; padding: 0 .5rem; font-size: .85rem; opacity: 0; transition: opacity .12s, color .12s; }
.nav-item-row:hover .nav-pin { opacity: 1; }
.nav-pin:hover { color: #ffd54a; }
.nav-pin.pinned { color: #ffd54a; opacity: 1; }

/* ── Glisser-déposer des épinglés ────────────────────────── */
.nav-pin-row { cursor: grab; }
.nav-pin-row.dragging { opacity: .4; cursor: grabbing; }
.nav-grip { color: #6c8aa6; font-size: 1rem; padding: 0 .2rem 0 .35rem; cursor: grab; user-select: none; }
.sidebar.collapsed .nav-grip { display: none; }

/* ── Zone rapide (épinglés / récents) ────────────────────── */
.nav-quick { padding: .25rem 0 .5rem; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: .35rem; }
.nav-quick:empty { display: none; }
.nav-quick-title { color: var(--uneeti-menu-fg, #6c9bbf); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; padding: .4rem .75rem .15rem; }

/* ── État replié (rail d'icônes) ─────────────────────────── */
.sidebar.collapsed .nav-theme { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .nav-theme span:not(.nav-theme-ic), .sidebar.collapsed .nav-theme-chev { display: none; }
.sidebar.collapsed .nav-theme-body { max-height: 0 !important; }
.sidebar.collapsed .nav-quick-title, .sidebar.collapsed .nav-pin { display: none; }

/* ── Indice Ctrl-K (navbar) ──────────────────────────────── */
.cmdk-hint { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.08); border: 0; color: #cfd8e3; padding: .25rem .6rem; border-radius: 6px; cursor: pointer; font-size: .8rem; }
.cmdk-hint:hover { background: rgba(255,255,255,.16); color: #fff; }
.cmdk-hint kbd { background: rgba(0,0,0,.25); border-radius: 3px; padding: 0 .3rem; font-size: .72rem; }
/* Sidebar réduite (ou skin Rail, toujours étroit) : ne garder que la loupe
   (texte + badge Ctrl-K masqués, sinon ils débordent/tronquent). */
.sidebar.collapsed .cmdk-hint, .sidebar.skin-rail .cmdk-hint { justify-content: center; padding: .35rem; }
.sidebar.collapsed .cmdk-hint .cmdk-lbl, .sidebar.collapsed .cmdk-hint kbd,
.sidebar.skin-rail .cmdk-hint .cmdk-lbl, .sidebar.skin-rail .cmdk-hint kbd { display: none; }

/* ── Palette de commandes ────────────────────────────────── */
.cmdk-overlay { position: fixed; inset: 0; background: rgba(10,20,35,.5); z-index: 10500; display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.cmdk-overlay.show { display: flex; }
.cmdk-box { width: 560px; max-width: 92vw; background: #fff; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.35); overflow: hidden; }
.cmdk-input { width: 100%; border: 0; border-bottom: 1px solid #e3e6ea; padding: 16px 18px; font-size: 1rem; outline: none; box-sizing: border-box; }
.cmdk-results { max-height: 52vh; overflow-y: auto; padding: 6px; }
.cmdk-item { display: flex; align-items: center; gap: .6rem; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: .9rem; color: #1f2d3d; }
.cmdk-item .cmdk-theme { margin-left: auto; font-size: .72rem; color: #8a97a5; }
.cmdk-item.active, .cmdk-item:hover { background: #eef4fb; }
.cmdk-empty { padding: 20px; text-align: center; color: #8a97a5; font-size: .88rem; }

/* ─────────────────────────────────────────────────────────────────────────
   SKINS DE MENU (sélectionnables). La classe skin-* est posée sur .sidebar.
   ───────────────────────────────────────────────────────────────────────── */

/* Sélecteur de style */
.nav-skin-switch { display: flex; align-items: center; gap: .4rem; padding: .55rem .5rem; margin-top: .4rem; border-top: 1px solid rgba(0,0,0,.08); }
.nav-skin-switch .nav-skin-ic { font-size: .9rem; opacity: .55; }
.nav-skin-switch select { flex: 1; font-size: .8rem; padding: .25rem .4rem; border-radius: 6px; border: 1px solid rgba(0,0,0,.2); background: #fff; color: #333; }
.sidebar.skin-accordion .nav-skin-switch, .sidebar.skin-rail .nav-skin-switch { border-top-color: rgba(255,255,255,.1); }
/* [essai] icône pleinement blanche (au lieu d'atténuée) + fond plus clair + bordure blanche */
.sidebar.skin-accordion .nav-skin-switch .nav-skin-ic, .sidebar.skin-rail .nav-skin-switch .nav-skin-ic { opacity: 1; color: #fff; }
.sidebar.skin-accordion .nav-skin-switch select, .sidebar.skin-rail .nav-skin-switch select { background: var(--uneeti-menu-box, #13283f); color: #fff; border: 1px solid var(--uneeti-menu-box-border, #2c4a6b); }
.sidebar.collapsed .nav-skin-switch, .sidebar.skin-rail .nav-skin-switch { position: relative; justify-content: center; }
.sidebar.collapsed .nav-skin-switch .nav-skin-ic, .sidebar.skin-rail .nav-skin-switch .nav-skin-ic { margin: 0 auto; }
/* Réduit (ou skin Rail, toujours étroit) : le <select> reste réel et cliquable (superposé,
   invisible) pour que le menu déroulant natif s'ouvre toujours — seule l'icône est visible. */
.sidebar.collapsed .nav-skin-switch select, .sidebar.skin-rail .nav-skin-switch select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }

/* Skin « Cartes » (clair) */
.sidebar.skin-cards { background: #eef1f5 !important; }
.nav-cards { padding: .5rem; }
.nav-card { background: #fff; border: .5px solid rgba(0,0,0,.08); border-radius: 10px; padding: .3rem; margin-bottom: .55rem; }
.nav-card-h { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; padding: .35rem .5rem .2rem; }
.nav-cards-row { display: flex; align-items: center; gap: .55rem; padding: .42rem .55rem; border-radius: 7px; font-size: .84rem; color: #3a4654; text-decoration: none; }
.nav-cards-row:hover { background: rgba(0,0,0,.045); }
.nav-cards-ic { font-size: .95rem; width: 1.2rem; text-align: center; }
.sidebar.collapsed.skin-cards .nav-label, .sidebar.collapsed.skin-cards .nav-card-h { display: none; }

/* Skin « Couleurs » (bandeaux par module) */
.sidebar.skin-crayola { background: #fff !important; }
.nav-cray-bar { display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; text-align: left; cursor: pointer; color: #fff; padding: .55rem .9rem; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.nav-cray-lbl { flex: 1; }
.nav-cray-toggle { transition: transform .18s; font-size: .9rem; opacity: .9; }
.nav-cray-bar.open .nav-cray-toggle { transform: rotate(90deg); }
.nav-cray-body { overflow: hidden; max-height: 0; transition: max-height .22s ease; }
.nav-cray-body.open { max-height: 720px; }
.nav-cray-row { display: flex; align-items: center; justify-content: space-between; padding: .55rem .9rem; border-bottom: .5px solid rgba(0,0,0,.07); font-size: .84rem; color: #2a3340; text-decoration: none; }
.nav-cray-row:hover { background: rgba(0,0,0,.035); }
.nav-cray-row.active { font-weight: 600; background: rgba(0,0,0,.03); }
.nav-cray-chev { color: #b9bec5; font-size: 1rem; }
.sidebar.collapsed.skin-crayola .nav-label, .sidebar.collapsed.skin-crayola .nav-cray-chev { display: none; }

/* Zone épinglés/récents (#nav-quick) sur les skins CLAIRS (Cartes / Couleurs) :
   son texte générique (.nav-quick-title en bleu clair, .nav-link/.nav-label pensés
   pour la sidebar sombre) devient illisible sur fond clair. On force des teintes
   sombres cohérentes avec les lignes de menu de chaque skin, et un séparateur foncé. */
.sidebar.skin-cards .nav-quick, .sidebar.skin-crayola .nav-quick { border-bottom-color: rgba(0,0,0,.10); }
.sidebar.skin-cards .nav-quick-title, .sidebar.skin-crayola .nav-quick-title { color: #5a6675; }
.sidebar.skin-cards .nav-quick .nav-link, .sidebar.skin-cards .nav-quick .nav-label { color: #3a4654; }
.sidebar.skin-crayola .nav-quick .nav-link, .sidebar.skin-crayola .nav-quick .nav-label { color: #2a3340; }

/* Skin « Rail + panneau » : rail étroit d'icônes + panneau flottant (position fixed, dans body) */
.sidebar.skin-rail { width: 64px !important; }
.sidebar.skin-rail .nav-search-box { justify-content: center; }
.sidebar.skin-rail .nav-search-box .nav-search-lbl, .sidebar.skin-rail .nav-search-box kbd { display: none; }
.sidebar.skin-rail .nav-skin-switch .nav-skin-ic { display: none; }
/* Le sélecteur de skin doit rester dans le rail (64px) : sans min-width:0 le <select>
   garde sa largeur de contenu (~87px), déborde et sa flèche est rognée par overflow-x:hidden
   → on ne peut plus changer de menu. On le force à rétrécir et à rester cliquable. */
.sidebar.skin-rail .nav-skin-switch { padding-left: .25rem; padding-right: .25rem; justify-content: center; }
/* opacity:1 : sans ça le <select> hérite de opacity:0 (règle .skin-rail plus haut, pensée pour
   un select-overlay invisible sur icône) alors qu'ici l'icône est masquée (ligne au-dessus) —
   il ne restait alors plus AUCUN repère visuel pour changer de style une fois passé en Rail. */
.sidebar.skin-rail .nav-skin-switch select { display: block !important; opacity: 1; position: static; min-width: 0; width: 100%; flex: 1 1 0; font-size: .68rem; padding: .25rem .15rem; }
/* En rail, le bouton ☰ « réduire » ne doit pas masquer le sélecteur de skin (sinon, une fois
   réduit, on ne peut plus quitter le mode rail). Le rail force déjà 64px : on garde le select. */
.sidebar.skin-rail.collapsed .nav-skin-switch select { display: block !important; }
.sidebar.skin-rail.collapsed .nav-skin-switch .nav-skin-ic { display: none; }
.nav-rail-ico { display: flex; align-items: center; justify-content: center; width: 48px; height: 44px; margin: 3px auto; border: 0; background: none; color: #fff; font-size: 1.3rem; border-radius: 9px; cursor: pointer; }
.nav-rail-ico:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-rail-ico.active { background: var(--uneeti-menu-active-bg, #fff); color: var(--uneeti-menu-active-fg, #6b5fa0); }
.nav-rail-flyout { position: fixed; z-index: 1300; min-width: 214px; background: var(--uneeti-menu-box, #13283f); border: 1px solid var(--uneeti-menu-box-border, #2c4a6b); border-radius: 9px; box-shadow: 0 12px 32px rgba(0,0,0,.4); padding: 6px; display: none; }
.nav-rail-flyout.show { display: block; }
.nav-rail-fly-h { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: #fff; padding: 6px 10px 4px; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.nav-rail-fly-link { display: flex; align-items: center; gap: .55rem; padding: .45rem .7rem; color: #fff; text-decoration: none; border-radius: 6px; font-size: .84rem; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.nav-rail-fly-link:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav-rail-fly-link.active { background: rgba(255,255,255,.15); color: #fff; }
.nav-rail-fly-ic { width: 1.2rem; text-align: center; }

/* ============================================================
   Skin « top » : menu HORIZONTAL sous la navbar (prototype).
   La sidebar devient une barre pleine largeur ; le contenu
   reprend toute la largeur (~ .main-content ci-dessous).
   ============================================================ */
.sidebar.skin-top {
    position: sticky; top: 0; left: auto; bottom: auto;
    width: 100% !important; height: auto; min-height: 0;
    overflow: visible; display: flex; align-items: center; gap: .5rem;
    padding: .25rem .75rem !important;
    background: linear-gradient(90deg, var(--uneeti-menu-grad-start), var(--uneeti-menu-grad-end));
    z-index: 1030;
}
.sidebar.skin-top ~ .main-content { margin-left: 0 !important; }
.sidebar.skin-top #cmdk-hint { width: auto !important; max-width: 220px; margin-bottom: 0 !important; flex: 0 0 auto; }
.sidebar.skin-top .nav-skin-switch { position: static; margin-left: auto; flex: 0 0 auto; }

.nav-top { display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.nav-top-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    background: transparent; border: none; border-radius: .5rem;
    color: var(--uneeti-menu-fg-strong, #fff); padding: .45rem .8rem;
    font-size: .95rem; white-space: nowrap; cursor: pointer;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.sidebar.skin-top-cards .nav-top-btn, .sidebar.skin-top-crayola .nav-top-btn { text-shadow: none; }
.nav-top-btn:hover { background: rgba(255,255,255,.14); }
.nav-top-btn.active { background: rgba(255,255,255,.22); font-weight: 600; }
.nav-top-btn .nav-top-ic { opacity: .9; }
.nav-top-caret { font-size: .6rem; opacity: .7; }
.nav-top-dd { min-width: 240px; }
.nav-top-item { display: flex; align-items: center; gap: .55rem; padding: .45rem 1rem; }
.nav-top-item.active { background: var(--uneeti-accent); color: #fff; }
.nav-top-item-ic { display: inline-block; min-width: 20px; text-align: center; opacity: .8; }

/* En mode top, l'état « replié » (hamburger) ne doit rien masquer :
   la barre reste pleine largeur et le sélecteur de style reste visible,
   sinon on ne peut plus revenir à un menu vertical. */
.sidebar.skin-top.collapsed { width: 100% !important; padding: .25rem .75rem !important; overflow: visible; }
.sidebar.skin-top .nav-skin-switch select,
.sidebar.skin-top.collapsed .nav-skin-switch select { display: inline-block !important; }
.sidebar.skin-top.collapsed .nav-label { display: inline !important; }
.sidebar.skin-top.collapsed .nav-skin-switch .nav-skin-ic { margin: 0; }

/* Bouton de bascule horizontal/vertical (toujours visible à côté du sélecteur). */
.nav-skin-flip {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
    color: #fff; border-radius: 6px; padding: .25rem .6rem;
    font-size: .8rem; white-space: nowrap; cursor: pointer;
}
.nav-skin-flip:hover { background: rgba(255,255,255,.25); }
.sidebar.skin-cards .nav-skin-flip, .sidebar.skin-crayola .nav-skin-flip {
    background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.2); color: #333;
}
.sidebar.collapsed .nav-skin-flip { display: none; }
.sidebar.skin-top.collapsed .nav-skin-flip { display: inline-flex !important; }

/* ---- Déclinaisons horizontales des styles (skin-top-{style}) ---- */
/* Rail horizontal : icônes seules, barre compacte. */
.sidebar.skin-top-rail .nav-top-btn .nav-label,
.sidebar.skin-top-rail .nav-top-caret { display: none; }
.sidebar.skin-top-rail .nav-top-btn { padding: .45rem .65rem; font-size: 1.05rem; }

/* Cartes horizontal : barre claire, boutons en cartes. */
.sidebar.skin-top-cards { background: #eef1f5 !important; }
.sidebar.skin-top-cards .nav-top-btn { background: #fff; border: 1px solid #d9dfe7; color: #2a3340; box-shadow: 0 1px 2px rgba(16,36,60,.08); }
.sidebar.skin-top-cards .nav-top-btn:hover { background: #f6f8fb; }
.sidebar.skin-top-cards .nav-top-btn.active { border-color: var(--uneeti-accent); color: var(--uneeti-accent); font-weight: 600; }
.sidebar.skin-top-cards .nav-skin-switch select { background: #fff; color: #333; border: 1px solid rgba(0,0,0,.2); }
.sidebar.skin-top-cards #cmdk-hint { background: #fff; color: #555; border: 1px solid #d9dfe7; }

/* Couleurs horizontal : barre blanche, un bouton coloré par thème (couleur inline). */
.sidebar.skin-top-crayola { background: #fff !important; }
.sidebar.skin-top-crayola .nav-top-btn { font-weight: 600; text-transform: uppercase; font-size: .78rem; letter-spacing: .04em; }
.sidebar.skin-top-crayola .nav-top-btn:hover { filter: brightness(1.08); }
.sidebar.skin-top-crayola .nav-top-btn.active { outline: 2px solid rgba(0,0,0,.25); }
.sidebar.skin-top-crayola .nav-skin-switch select { background: #fff; color: #333; border: 1px solid rgba(0,0,0,.2); }
.sidebar.skin-top-crayola #cmdk-hint { background: #f4f6f9; color: #555; border: 1px solid #d9dfe7; }

/* Menus déroulants de la barre horizontale : même habillage sombre que le
   volet du rail vertical pour les styles sur fond dégradé (accordéon, rail).
   Cartes/Couleurs (barres claires) gardent le déroulant blanc de Bootstrap. */
.nav-top--accordion .nav-top-dd, .nav-top--rail .nav-top-dd {
    background: var(--uneeti-menu-box, #13283f);
    border: 1px solid var(--uneeti-menu-box-border, #2c4a6b);
    border-radius: 9px; box-shadow: 0 12px 32px rgba(0,0,0,.4); padding: 6px;
}
.nav-top--accordion .nav-top-item, .nav-top--rail .nav-top-item { color: #fff; border-radius: 6px; }
.nav-top--accordion .nav-top-item:hover, .nav-top--rail .nav-top-item:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav-top--accordion .nav-top-item.active, .nav-top--rail .nav-top-item.active { background: rgba(255,255,255,.15); color: #fff; }