/* ═══════════════════════════════════════════════════════════════════
   InkHub — Refonte de l'enveloppe (sidebar + topbar)
   Porté du handoff designer « Page Commande - Prototype.html »
   (var/design-proofs/page-commande/ · shared.jsx → .rx-side / .rx-top).

   Chargé GLOBALEMENT via assets/app.js (après app.css) → s'applique à
   TOUTES les pages. N'override que les sélecteurs de l'enveloppe
   (.sidebar, .top-navbar, .main-content) — le contenu des pages reste
   géré par leurs CSS dédiés (order-index.css, etc.).

   Marque : sidebar dégradé teal→vert Gel-Ink. Accent UI = bleu encre.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────── Police de marque : Comfortaa (auto-hébergée, handoff design) ─────────
   « Police de marque » fixée dans Claude Design pour l'enveloppe (sidebar +
   topbar) — cf. « Page Commande - Prototype » : .rx-side / .rx-top en Comfortaa.
   Variable font 300→700, fichier fourni dans assets/fonts/ (servi par AssetMapper). */
@font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/Comfortaa-VariableFont_wght-neco1wS.ttf") format('truetype');
}

/* ───────── Comfortaa sur TOUTE l'interface + voile de marque sur le contenu ─────────
   Parité maquette « Page Commande - Prototype » : :root{--font/--display:Comfortaa}
   → texte ET titres en Comfortaa PARTOUT (pas seulement l'enveloppe). Le mono
   (références/codes, --cmd-mono) reste en Geist Mono. Le contenu reçoit un voile
   teal→vert très transparent (le `.rx-main` du proto) pour détacher la sidebar
   opaque du contenu presque blanc teinté. */
body {
    font-family: 'Comfortaa', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* écrans au registre .ord-cmd (Commandes, Dashboard, Fiche) : titres + texte en
   Comfortaa via les tokens, mono inchangé. */
.ord-cmd {
    --cmd-font: 'Comfortaa', 'Inter', sans-serif;
    --cmd-display: 'Comfortaa', 'Inter', sans-serif;
}

/* voile de marque sur la zone de contenu (parité .rx-main du prototype) */
.main-content {
    background:
        linear-gradient(180deg, rgba(7, 58, 76, 0.06) 0%, rgba(10, 58, 44, 0.09) 100%),
        var(--ink-gray-bg, #F5F6FA);
}

/* ───────── Sidebar : dégradé teal→vert (marque Gel-Ink) ───────── */
.sidebar {
    background: linear-gradient(180deg, #073A4C 0%, #0A3A2C 100%);
    /* police de marque Comfortaa sur toute l'enveloppe latérale */
    font-family: 'Comfortaa', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* logo de marque : carré translucide (vs gradient cyan→magenta) */
.sidebar-brand {
    padding: 1.1rem 1.25rem;
}
.sidebar-brand__logo {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
    font-weight: 700;
    color: #fff;
}
.sidebar-brand__logo::after { display: none; } /* retire le reflet cyan/magenta */
.sidebar-brand small { color: rgba(255, 255, 255, 0.5); }

/* liens : icônes uniformes (teal clair), plus de couleur par section */
.sidebar-nav { padding: 0.75rem 0; }
.sidebar-nav .nav-link {
    padding: 0.55rem 1.25rem;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.85rem;
}
.sidebar-nav .nav-link[data-ink-section] svg,
.sidebar-nav .nav-link svg {
    color: rgba(186, 224, 238, 0.82);
}
.sidebar-nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}
.sidebar-nav .nav-link:hover svg { transform: none; }

/* état actif : léger lavis cyan + filet accent bleu encre (prototype .rx-nl.on) */
.sidebar-nav .nav-link.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(127, 211, 236, 0.16) 0%, transparent 100%);
    border-left-color: #0077B6;
    font-weight: 600;
}
.sidebar-nav .nav-link.active[data-ink-section] svg,
.sidebar-nav .nav-link.active svg { color: #fff; }
.sidebar-nav .nav-link.active::before { display: none; } /* retire la pastille lumineuse */

/* libellés de section : teal clair discret, sans filet supérieur */
.sidebar-section-label {
    color: rgba(180, 220, 235, 0.55) !important;
    border-top: none;
    margin-top: 0.45rem;
    padding-top: 0.55rem !important;
}

/* ───────── Topbar : fil d'Ariane · recherche · utilisateur ───────── */
.top-navbar {
    gap: 14px;
    padding: 0.6rem 1.4rem;
    /* enveloppe = même police de marque que la sidebar (parité design .rx-top) */
    font-family: 'Comfortaa', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* fil d'Ariane (gauche) */
.topbar-crumbs {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 0;
}
.topbar-crumbs a { color: var(--text-muted); text-decoration: none; }
.topbar-crumbs a:hover { color: var(--text-primary); }
.topbar-crumbs .cur { color: var(--text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.topbar-crumbs .sep { opacity: 0.45; }
.topbar-crumbs svg { width: 13px; height: 13px; opacity: 0.5; flex-shrink: 0; }

/* recherche (centre-gauche) */
.topbar-search {
    flex: 1;
    max-width: 340px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-alt);
    transition: border-color var(--duration-base), box-shadow var(--duration-base);
}
.topbar-search:focus-within {
    border-color: #0077B6;
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.10);
}
.topbar-search svg { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.topbar-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.82rem;
    color: var(--text-primary);
    width: 100%;
    min-width: 0;
    padding: 0;
}
.topbar-search input::placeholder { color: var(--text-muted); }

.topbar-spacer { flex: 1; }

/* bloc utilisateur (droite) : nom · rôle + avatar */
.topbar-user { line-height: 1.2; text-align: right; }
.topbar-user__name { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); display: block; }
.topbar-user__role { font-size: 0.72rem; color: var(--text-muted); }
.topbar-user__separator { margin: 0 0.2rem; opacity: 0.6; }

.topbar-logout {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    color: var(--text-muted);
    border: 1px solid transparent;
    text-decoration: none;
    transition: background-color var(--duration-base), color var(--duration-base);
}
.topbar-logout:hover { background: var(--surface-alt); color: var(--text-primary); }
.topbar-logout svg { width: 17px; height: 17px; }

/* masquer la recherche du topbar sur petits écrans (place limitée) */
@media (max-width: 768px) {
    .topbar-search { display: none; }
    .topbar-crumbs { display: none; }
}