/* =============================================================================
   Onagre UI — structure : shell applicatif (sidebar + topbar + contenu), en-têtes de page, écrans d'authentification.
   ============================================================================= */
@layer o-layout {

    /* ---------------------------------------------------------------- Shell */
    .o-shell {
        display: grid;
        grid-template-columns: var(--o-sidebar-width) minmax(0, 1fr);
        min-height: 100dvh;
        background: var(--o-bg);
        transition: grid-template-columns var(--o-duration-slow) var(--o-ease-out);
    }
    :root[data-sidebar="collapsed"] .o-shell { grid-template-columns: var(--o-sidebar-collapsed) minmax(0, 1fr); }

    /* ---------------------------------------------------------------- Sidebar */
    .o-sidebar {
        position: sticky;
        top: 0;
        z-index: var(--o-z-sidebar);
        display: flex;
        flex-direction: column;
        height: 100dvh;
        background: var(--o-bg-sidebar);
        border-right: 1px solid var(--o-border-subtle);
        overflow: hidden;
    }
    .o-sidebar__brand {
        display: flex;
        align-items: center;
        gap: var(--o-space-2);
        height: var(--o-topbar-height);
        padding: 0 var(--o-space-3) 0 var(--o-space-4);
        flex-shrink: 0;
    }
    .o-sidebar__logo { display: flex; align-items: center; gap: var(--o-space-2-5); min-width: 0; color: var(--o-text); }
    .o-sidebar__logo:hover { color: var(--o-text); }
    .o-sidebar__wordmark { font-size: 0.9375rem; font-weight: var(--o-weight-bold); letter-spacing: -0.02em; white-space: nowrap; }
    .o-sidebar__tag { font-size: var(--o-text-2xs); font-weight: var(--o-weight-semibold); color: var(--o-text-3); padding: 1px 6px; border-radius: var(--o-radius-xs); border: 1px solid var(--o-border); }
    .o-sidebar__collapse { margin-left: auto; color: var(--o-text-3); }

    .o-sidebar__scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--o-space-1) var(--o-space-2) var(--o-space-4); scrollbar-width: none; }
    .o-sidebar__scroll::-webkit-scrollbar { display: none; }
    .o-sidebar__footer { flex-shrink: 0; padding: var(--o-space-2); border-top: 1px solid var(--o-border-subtle); display: flex; flex-direction: column; gap: var(--o-space-1); }

    .o-nav-section { display: flex; flex-direction: column; gap: 1px; }
    .o-nav-section + .o-nav-section { margin-top: var(--o-space-5); }
    .o-nav-section__title {
        display: flex; align-items: center;
        height: 1.5rem; padding: 0 var(--o-space-2-5); margin-bottom: 2px;
        font-size: var(--o-text-2xs); font-weight: var(--o-weight-semibold);
        text-transform: uppercase; letter-spacing: var(--o-tracking-caps);
        color: var(--o-text-3);
        white-space: nowrap;
    }
    .o-nav-item {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--o-space-2-5);
        height: 2rem;
        padding: 0 var(--o-space-2-5);
        border-radius: var(--o-radius-md);
        font-size: var(--o-text-sm);
        font-weight: var(--o-weight-medium);
        color: var(--o-text-2);
        white-space: nowrap;
        transition: background-color var(--o-duration-fast), color var(--o-duration-fast);
    }
    .o-nav-item .o-icon { color: var(--o-text-3); transition: color var(--o-duration-fast); }
    .o-nav-item:hover { background: var(--o-surface-hover); color: var(--o-text); }
    .o-nav-item:hover .o-icon { color: var(--o-text-2); }
    .o-nav-item.active, .o-nav-item[aria-current="page"] {
        background: var(--o-surface);
        color: var(--o-text);
        box-shadow: var(--o-shadow-xs), 0 0 0 1px var(--o-border-subtle);
    }
    .o-nav-item.active .o-icon, .o-nav-item[aria-current="page"] .o-icon { color: var(--o-accent-fg); }
    .o-nav-item__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .o-nav-item__meta { margin-left: auto; font-size: var(--o-text-2xs); color: var(--o-text-3); font-variant-numeric: tabular-nums; }
    .o-nav-item__badge { margin-left: auto; min-width: 1.125rem; height: 1.125rem; padding: 0 5px; border-radius: var(--o-radius-full); background: var(--o-danger); color: oklch(1 0 0); font-size: var(--o-text-2xs); font-weight: var(--o-weight-semibold); display: grid; place-items: center; font-variant-numeric: tabular-nums; }
    .o-nav-item--cta { color: var(--o-accent-fg); }
    .o-nav-item--cta .o-icon { color: var(--o-accent-fg); }

    /* Repliée : icônes seules, libellés en infobulle */
    :root[data-sidebar="collapsed"] .o-shell .o-sidebar__wordmark,
    :root[data-sidebar="collapsed"] .o-shell .o-sidebar__tag,
    :root[data-sidebar="collapsed"] .o-shell .o-nav-item__label,
    :root[data-sidebar="collapsed"] .o-shell .o-nav-item__meta,
    :root[data-sidebar="collapsed"] .o-shell .o-nav-section__title,
    :root[data-sidebar="collapsed"] .o-shell .o-sidebar__hide-collapsed { display: none; }
    :root[data-sidebar="collapsed"] .o-shell .o-nav-item { justify-content: center; padding: 0; }
    :root[data-sidebar="collapsed"] .o-shell .o-nav-item__badge { position: absolute; top: 2px; right: 4px; min-width: 0.5rem; height: 0.5rem; padding: 0; font-size: 0; }
    :root[data-sidebar="collapsed"] .o-shell .o-nav-section + .o-nav-section { margin-top: var(--o-space-3); padding-top: var(--o-space-3); border-top: 1px solid var(--o-border-subtle); }
    :root[data-sidebar="collapsed"] .o-shell .o-sidebar__brand { justify-content: center; padding: 0; }
    :root[data-sidebar="collapsed"] .o-shell .o-sidebar__collapse { display: none; }

    /* Bloc utilisateur en pied de sidebar */
    .o-account {
        display: flex; align-items: center; gap: var(--o-space-2-5);
        width: 100%; padding: var(--o-space-1-5) var(--o-space-2);
        border-radius: var(--o-radius-md);
        text-align: left; color: var(--o-text);
        transition: background-color var(--o-duration-fast);
    }
    .o-account:hover, .o-account[aria-expanded="true"] { background: var(--o-surface-hover); }
    .o-account__text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
    .o-account__name { font-size: var(--o-text-sm); font-weight: var(--o-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .o-account__org { font-size: var(--o-text-xs); color: var(--o-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    :root[data-sidebar="collapsed"] .o-shell .o-account { justify-content: center; padding: var(--o-space-1-5) 0; }
    :root[data-sidebar="collapsed"] .o-shell .o-account__text, :root[data-sidebar="collapsed"] .o-shell .o-account > .o-icon { display: none; }

    /* Encadré d'offre (plan gratuit) */
    .o-plan-card {
        position: relative;
        display: flex; flex-direction: column; gap: var(--o-space-2);
        padding: var(--o-space-3);
        border-radius: var(--o-radius-lg);
        border: 1px solid var(--o-border);
        background:
            radial-gradient(120% 90% at 100% 0%, color-mix(in oklch, var(--o-brand-primrose) 22%, transparent) 0%, transparent 55%),
            var(--o-surface);
        font-size: var(--o-text-xs);
        color: var(--o-text-2);
        overflow: hidden;
    }
    .o-plan-card__title { font-size: var(--o-text-sm); font-weight: var(--o-weight-semibold); color: var(--o-text); }
    :root[data-sidebar="collapsed"] .o-shell .o-plan-card { display: none; }

    /* ---------------------------------------------------------------- Colonne principale */
    .o-main { display: flex; flex-direction: column; min-width: 0; min-height: 100dvh; }

    .o-topbar {
        position: sticky;
        top: 0;
        z-index: var(--o-z-sticky);
        display: flex;
        align-items: center;
        gap: var(--o-space-3);
        height: var(--o-topbar-height);
        padding: 0 var(--o-space-6);
        background: color-mix(in oklch, var(--o-bg) 82%, transparent);
        backdrop-filter: saturate(1.4) blur(10px);
        -webkit-backdrop-filter: saturate(1.4) blur(10px);
        border-bottom: 1px solid var(--o-border-subtle);
    }
    .o-topbar__menu { display: none; }
    .o-topbar__actions { display: flex; align-items: center; gap: var(--o-space-1); margin-left: auto; }

    .o-content { flex: 1; width: 100%; padding: var(--o-space-6) var(--o-space-6) var(--o-space-12); }
    .o-content > .o-page { max-width: var(--o-content-max); margin: 0 auto; }
    .o-content--fluid > .o-page { max-width: none; }
    .o-content--narrow > .o-page { max-width: 64rem; }
    .o-page { display: flex; flex-direction: column; gap: var(--o-space-6); animation: o-page-in var(--o-duration-slow) var(--o-ease-out); }
    @keyframes o-page-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

    .o-footer {
        display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-2) var(--o-space-4);
        padding: var(--o-space-4) var(--o-space-6);
        border-top: 1px solid var(--o-border-subtle);
        font-size: var(--o-text-xs); color: var(--o-text-3);
    }
    .o-footer a { color: var(--o-text-3); }
    .o-footer a:hover { color: var(--o-text); }

    /* ---------------------------------------------------------------- En-tête de page */
    .o-page-header { display: flex; flex-direction: column; gap: var(--o-space-4); }
    .o-page-header__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--o-space-3) var(--o-space-6); }
    .o-page-header__identity { display: flex; align-items: flex-start; gap: var(--o-space-3); min-width: 0; flex: 1 1 24rem; }
    .o-page-header__text { display: flex; flex-direction: column; gap: var(--o-space-1); min-width: 0; }
    .o-page-header__eyebrow { display: flex; align-items: center; gap: var(--o-space-1-5); font-size: var(--o-text-xs); font-weight: var(--o-weight-medium); color: var(--o-text-3); }
    .o-page-header__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-2) var(--o-space-3); font-size: var(--o-text-2xl); font-weight: var(--o-weight-semibold); letter-spacing: var(--o-tracking-display); line-height: 1.2; }
    .o-page-header__desc { font-size: var(--o-text-sm); color: var(--o-text-3); max-width: 46rem; }
    .o-page-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-1) var(--o-space-4); font-size: var(--o-text-xs); color: var(--o-text-3); }
    .o-page-header__meta > * { display: inline-flex; align-items: center; gap: var(--o-space-1); }
    .o-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-2); margin-left: auto; }

    /* Section titrée à l'intérieur d'une page */
    .o-section { display: flex; flex-direction: column; gap: var(--o-space-3); min-width: 0; }
    .o-section__head { display: flex; align-items: center; gap: var(--o-space-3); }
    .o-section__title { font-size: var(--o-text-md); font-weight: var(--o-weight-semibold); }
    .o-section__desc { font-size: var(--o-text-sm); color: var(--o-text-3); }

    /* ---------------------------------------------------------------- Responsive : sidebar hors-champ sous 64rem */
    .o-sidebar-scrim { display: none; }
    @media (max-width: 64rem) {
        .o-shell, :root[data-sidebar="collapsed"] .o-shell { grid-template-columns: minmax(0, 1fr); }
        .o-sidebar {
            position: fixed;
            inset: 0 auto 0 0;
            width: min(18rem, 86vw);
            transform: translateX(-100%);
            transition: transform var(--o-duration-slow) var(--o-ease-out);
            box-shadow: var(--o-shadow-lg);
        }
        .o-shell[data-mobile-nav="open"] .o-sidebar { transform: none; }
        .o-shell[data-mobile-nav="open"] .o-sidebar-scrim {
            display: block; position: fixed; inset: 0; z-index: calc(var(--o-z-sidebar) - 1);
            background: var(--o-scrim); animation: o-fade var(--o-duration-base) var(--o-ease-out);
        }
        /* En mobile, la sidebar est toujours dépliée */
        :root[data-sidebar="collapsed"] .o-shell .o-sidebar__wordmark,
        :root[data-sidebar="collapsed"] .o-shell .o-nav-item__label,
        :root[data-sidebar="collapsed"] .o-shell .o-nav-section__title,
        :root[data-sidebar="collapsed"] .o-shell .o-account__text,
        :root[data-sidebar="collapsed"] .o-shell .o-plan-card { display: revert; }
        :root[data-sidebar="collapsed"] .o-shell .o-nav-item { justify-content: flex-start; padding: 0 var(--o-space-2-5); }
        .o-sidebar__collapse { display: none; }
        .o-topbar { padding: 0 var(--o-space-4); }
        .o-topbar__menu { display: inline-flex; }
        .o-content { padding: var(--o-space-5) var(--o-space-4) var(--o-space-10); }
        .o-footer { padding: var(--o-space-4); }
    }
    @media (max-width: 40rem) {
        .o-page { gap: var(--o-space-5); }
        .o-page-header__title { font-size: var(--o-text-xl); }
        .o-page-header__actions { width: 100%; margin-left: 0; }
        .o-page-header__actions > .o-btn { flex: 1; }
        .o-topbar .o-breadcrumb > :not(:last-child) { display: none; }
    }

    /* ---------------------------------------------------------------- Authentification */
    .o-auth {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        min-height: 100dvh;
        background: var(--o-bg);
    }
    .o-auth__panel {
        display: flex;
        flex-direction: column;
        padding: var(--o-space-6) var(--o-space-8);
    }
    .o-auth__top { display: flex; align-items: center; justify-content: space-between; gap: var(--o-space-3); }
    .o-auth__brand .o-sidebar__wordmark { font-size: 1.375rem; }
    .o-auth__form-wrap { flex: 1; display: grid; place-items: center; padding: var(--o-space-10) 0; }
    .o-auth__form { width: min(100%, 23rem); display: flex; flex-direction: column; gap: var(--o-space-6); animation: o-page-in var(--o-duration-slow) var(--o-ease-out); }
    .o-auth__head { display: flex; flex-direction: column; gap: var(--o-space-2); }
    .o-auth__title { font-size: var(--o-text-2xl); font-weight: var(--o-weight-semibold); letter-spacing: var(--o-tracking-display); }
    .o-auth__subtitle { font-size: var(--o-text-sm); color: var(--o-text-3); }
    .o-auth__fields { display: flex; flex-direction: column; gap: var(--o-space-4); }
    .o-auth__alt { font-size: var(--o-text-sm); color: var(--o-text-3); text-align: center; }
    .o-auth__legal { font-size: var(--o-text-xs); color: var(--o-text-3); display: flex; flex-wrap: wrap; gap: var(--o-space-3); }
    .o-auth__legal a { color: var(--o-text-3); }
    .o-auth__legal a:hover { color: var(--o-text); }

    /* Visuel de marque : nuit chaude éclairée par la fleur d'onagre (jaune primevère), signal de monitoring */
    .o-auth__visual {
        position: relative;
        margin: var(--o-space-3);
        border-radius: calc(var(--o-radius-xl) + 4px);
        overflow: hidden;
        background:
            radial-gradient(75% 55% at 88% 6%, oklch(0.87 0.16 96 / 0.42) 0%, transparent 62%),
            radial-gradient(65% 60% at 4% 104%, oklch(0.64 0.15 48 / 0.38) 0%, transparent 65%),
            linear-gradient(165deg, oklch(0.28 0.03 85) 0%, oklch(0.2 0.02 70) 55%, oklch(0.15 0.012 60) 100%);
        color: oklch(0.97 0.01 90);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: var(--o-space-10);
        isolation: isolate;
    }
    .o-auth__visual::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-image:
            linear-gradient(oklch(1 0 0 / 0.045) 1px, transparent 1px),
            linear-gradient(90deg, oklch(1 0 0 / 0.045) 1px, transparent 1px);
        background-size: 44px 44px;
        mask-image: radial-gradient(90% 80% at 50% 40%, black 30%, transparent 85%);
    }
    .o-auth__claim { max-width: 28rem; display: flex; flex-direction: column; gap: var(--o-space-3); }
    .o-auth__claim-title { font-size: 2rem; font-weight: var(--o-weight-semibold); letter-spacing: -0.03em; line-height: 1.15; color: oklch(0.99 0 0); text-wrap: balance; }
    .o-auth__claim-text { font-size: var(--o-text-md); color: oklch(0.87 0.025 85); line-height: var(--o-leading-normal); }
    .o-auth__signal {
        align-self: stretch;
        display: flex; flex-direction: column; gap: var(--o-space-3);
        padding: var(--o-space-4) var(--o-space-5);
        border-radius: var(--o-radius-xl);
        background: oklch(0.17 0.015 70 / 0.55);
        border: 1px solid oklch(1 0 0 / 0.09);
        box-shadow: 0 30px 60px -20px oklch(0 0 0 / 0.5);
        backdrop-filter: blur(12px);
        font-size: var(--o-text-xs);
        width: min(100%, 32rem);
    }
    /* Topologie Hub ↔ agents ↔ sensors */
    .o-topo { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
    .o-topo__zone { fill: oklch(1 0 0 / 0.025); stroke: oklch(1 0 0 / 0.16); stroke-dasharray: 4 5; }
    .o-topo__zone-label { fill: oklch(0.8 0.03 85); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
    .o-topo__link { fill: none; stroke: oklch(1 0 0 / 0.16); stroke-width: 1.25; }
    .o-topo__flow { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 26; }
    .o-topo__flow--down { stroke: var(--o-brand-primrose); animation: o-topo-flow 2.6s linear infinite; }
    .o-topo__flow--up { stroke: oklch(0.78 0.15 152); stroke-dashoffset: 14; animation: o-topo-flow 2.6s linear infinite reverse; }
    @keyframes o-topo-flow { to { stroke-dashoffset: -56; } }
    @media (prefers-reduced-motion: reduce) { .o-topo__flow { animation: none; } }
    .o-topo__node rect { fill: oklch(0.24 0.018 75 / 0.9); stroke: oklch(1 0 0 / 0.12); }
    .o-topo__node--hub rect { fill: oklch(0.3 0.04 92 / 0.95); stroke: oklch(0.87 0.16 96 / 0.65); filter: drop-shadow(0 0 14px oklch(0.87 0.16 96 / 0.35)); }
    .o-topo__dot { fill: oklch(0.74 0.16 152); }
    .o-topo__node--hub .o-topo__dot { fill: var(--o-brand-primrose); }
    .o-topo__node--agent .o-topo__dot { fill: oklch(0.8 0.1 230); }
    .o-topo__name { fill: oklch(0.97 0.01 90); font-size: 12px; font-weight: 600; }
    .o-topo__detail { fill: oklch(0.78 0.025 85); font-size: 10px; font-variant-numeric: tabular-nums; }
    @media (max-width: 64rem) {
        .o-auth { grid-template-columns: minmax(0, 1fr); }
        .o-auth__visual { display: none; }
        .o-auth__panel { padding: var(--o-space-5); }
    }

    /* Page de message centrée (vérifier ses e-mails, plateforme non configurée…) */
    .o-center-page { min-height: 100dvh; display: grid; place-items: center; padding: var(--o-space-6); background: var(--o-bg); }
    .o-center-page__card { width: min(100%, 28rem); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--o-space-4); }
}

/* Bouton « déplier » de la topbar : visible seulement quand la sidebar est repliée (desktop) */
@layer o-layout {
    .o-topbar__expand { display: none; }
    :root[data-sidebar="collapsed"] .o-topbar__expand { display: inline-flex; }
    @media (max-width: 64rem) { :root[data-sidebar="collapsed"] .o-topbar__expand { display: none; } }
    .o-account-menu { min-width: 16rem; }
}