/* ============================================================================
 * shared/onboarding/_lib/onboarding.css
 * ----------------------------------------------------------------------------
 * Design tokens et composants partagés entre tous les modules d'onboarding.
 * À inclure dans chaque index.html de module AVANT le style.css local.
 * ============================================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg:       #0D1117;
    --bg2:      #161B22;
    --bg3:      #1C2128;
    --green:    #00E676;
    --violet:   #7C3AED;
    --blue:     #3B82F6;
    --orange:   #F97316;
    --red:      #EF4444;
    --yellow:   #FBBF24;
    --cyan:     #22D3EE;
    --pink:     #F472B6;
    --teleport: #512FC9;
    --white:    #FFFFFF;
    --gray:     #9CA3AF;
    --border:   #374151;
    /* Aliases */
    --text:     #FFFFFF;
    --panel:    #161B22;
    --panel2:   #1C2128;
}

html, body { height: 100%; }
body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    color: var(--white);
    overflow: hidden;
}
body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none; z-index: -1;
}

/* ===== World + canvas ===================================================== */
.o-scene {
    position: relative;
    width: 100%; height: 100vh;
    overflow: hidden;
}
.o-world {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    transform-origin: 0 0;
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.o-canvas {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ===== abox — architecture boxes ========================================== */
.abox {
    position: absolute;
    border-radius: 14px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px;
    transition: all 0.8s cubic-bezier(.16, 1, .3, 1);
    opacity: 0.15;
    z-index: 2;
    padding: 14px;
    background: linear-gradient(145deg, var(--bg2), var(--bg3));
    border: 1.5px solid var(--border);
}
.abox.a-active  { opacity: 1; }
.abox.a-dimmed  { opacity: 0.12 !important; filter: grayscale(0.8); }
.abox.a-past    { opacity: 0.25; filter: grayscale(0.4); }

.abox h3 {
    font-size: 1rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
}
.abox p { font-size: 0.95rem; color: var(--gray); text-align: center; }
.abox .a-icon { font-size: 2rem; line-height: 1; }
.abox svg.a-icon { width: 38px; height: 38px; }

/* Role colors ---------------------------------------------------------------
 * Used as: <div class="abox a-proxy a-active">…</div>
 * When .a-active is set, the glow/border color matches the role.
 * --------------------------------------------------------------------------- */
.a-agent   { }
.a-agent.a-active   { border-color: var(--orange); box-shadow: 0 0 30px rgba(249,115,22,0.25); }
.a-agent h3         { color: var(--orange); }

.a-proxy   { }
.a-proxy.a-active   { border-color: var(--cyan);   box-shadow: 0 0 40px rgba(34,211,238,0.25); }
.a-proxy h3         { color: var(--cyan); }

.a-auth    { }
.a-auth.a-active    { border-color: var(--green);  box-shadow: 0 0 40px rgba(0,230,118,0.25); }
.a-auth h3          { color: var(--green); }

.a-idp     { }
.a-idp.a-active     { border-color: var(--violet); box-shadow: 0 0 40px rgba(124,58,237,0.28); }
.a-idp h3           { color: var(--violet); }

.a-secret  { }
.a-secret.a-active  { border-color: var(--yellow); box-shadow: 0 0 35px rgba(251,191,36,0.35); }
.a-secret h3        { color: var(--yellow); }

.a-k8sapi  { }
.a-k8sapi.a-active  { border-color: var(--blue);   box-shadow: 0 0 35px rgba(59,130,246,0.3); }
.a-k8sapi h3        { color: var(--blue); }

/* ===== Terminal (macOS style) ============================================ */
.o-term {
    background: #0f1219;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    display: flex; flex-direction: column;
    position: absolute; z-index: 2;
    transition: all 0.8s cubic-bezier(.16, 1, .3, 1);
    opacity: 0.15;
}
.o-term.a-active { opacity: 1; border-color: var(--cyan); box-shadow: 0 0 35px rgba(34,211,238,0.15); }
.o-term .tbar {
    background: #1a1f2e; padding: 6px 10px;
    display: flex; gap: 5px; align-items: center;
    border-bottom: 1px solid var(--border);
}
.o-term .tdot { width: 8px; height: 8px; border-radius: 50%; }
.o-term .tdot.r { background: #ef4444; }
.o-term .tdot.y { background: #fbbf24; }
.o-term .tdot.g { background: #00e676; }
.o-term .ttitle {
    margin-left: 10px; color: #64748b; font-size: 0.78rem;
    font-family: 'Courier New', monospace;
}
.o-term .tbody {
    padding: 12px 14px;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem; line-height: 1.75;
    color: #94a3b8; flex: 1; overflow: hidden;
}
.o-term .prompt  { color: var(--green); }
.o-term .cmd     { color: var(--cyan); }
.o-term .ok      { color: var(--green); }
.o-term .warn    { color: var(--yellow); }
.o-term .fail    { color: var(--red); }
.o-term .muted   { color: #64748b; }
.o-term .cursor  {
    display: inline-block; width: 8px; height: 14px;
    background: var(--cyan); vertical-align: middle;
    margin-left: 2px; animation: oblink 1s step-end infinite;
}
@keyframes oblink { 50% { opacity: 0; } }

/* ===== Labels on Bézier paths ============================================ */
.o-label {
    position: absolute;
    transform: translate(-50%, -50%);
    background: rgba(13, 17, 23, 0.85);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.8rem;
    color: var(--white);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 3;
}
.o-label.show { opacity: 1; }
.o-label.cyan   { border-color: var(--cyan);   color: var(--cyan); }
.o-label.green  { border-color: var(--green);  color: var(--green); }
.o-label.violet { border-color: var(--violet); color: var(--violet); }
.o-label.orange { border-color: var(--orange); color: var(--orange); }
.o-label.yellow { border-color: var(--yellow); color: var(--yellow); }
.o-label.blue   { border-color: var(--blue);   color: var(--blue); }

/* ===== HUD (out of world — not affected by camera) ======================= */
.o-hud-title {
    position: fixed; top: 32px; left: 50%;
    transform: translateX(-50%);
    font-size: 1.3rem; font-weight: 600;
    color: var(--white);
    letter-spacing: 1px;
    z-index: 10;
    text-align: center;
    opacity: 0; transition: opacity 0.5s;
}
.o-hud-title.show { opacity: 1; }
.o-hud-sub {
    position: fixed; top: 66px; left: 50%;
    transform: translateX(-50%);
    font-size: 0.95rem; color: var(--gray);
    z-index: 10; max-width: 70%; text-align: center;
    opacity: 0; transition: opacity 0.5s;
}
.o-hud-sub.show { opacity: 1; }

.o-hud-step {
    position: fixed; bottom: 36px; left: 50%;
    transform: translateX(-50%);
    background: rgba(13, 17, 23, 0.85);
    border: 1px solid var(--border);
    border-radius: 40px;
    padding: 10px 22px;
    display: flex; gap: 10px; align-items: center;
    font-size: 0.85rem; color: var(--gray);
    z-index: 10;
}
.o-hud-step .pill {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--border);
    transition: all 0.3s;
}
.o-hud-step .pill.active { background: var(--cyan); transform: scale(1.4); }
.o-hud-step .pill.past   { background: var(--gray); }

/* ===== Cert / token visual tokens (transit animés) ======================= */
.o-token-card {
    position: absolute; z-index: 4;
    background: linear-gradient(145deg, #1a1505, #2a2008);
    border: 1.5px solid var(--yellow);
    border-radius: 10px;
    padding: 8px 14px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--yellow);
    box-shadow: 0 0 25px rgba(251, 191, 36, 0.4);
    opacity: 0;
    transition: all 0.6s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.6);
}
.o-token-card.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.o-token-card.jwt { border-color: var(--violet); color: var(--violet); box-shadow: 0 0 25px rgba(124,58,237,0.4); background: linear-gradient(145deg, #1a0f2e, #2d1b4e); }
.o-token-card.sa  { border-color: var(--blue);   color: var(--blue);   box-shadow: 0 0 25px rgba(59,130,246,0.4);  background: linear-gradient(145deg, #0a1628, #132648); }
.o-token-card.cert{ border-color: var(--green);  color: var(--green);  box-shadow: 0 0 25px rgba(0,230,118,0.4);    background: linear-gradient(145deg, #0f2922, #1a3f35); }

/* ===== Progress bar (top) ================================================ */
.o-progress {
    position: fixed; top: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--green), var(--cyan), var(--violet));
    z-index: 100;
    transition: width 0.5s ease-out;
}

/* ============================================================================
 * ob-layout — declarative hierarchical layout (paired with _lib/layout.js)
 * ----------------------------------------------------------------------------
 * `.ob-scope` is a grid-backed container positioned in the world.
 * Its `.abox` children use `data-cell="R/C"` for placement and no longer
 * need absolute coords — CSS grid guarantees no overlap between siblings.
 * Outside scopes, boxes use `data-at="X% Y%"` + `data-anchor="center"`.
 * ============================================================================ */
.ob-scope {
    position: absolute;
    box-sizing: border-box;
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255,255,255,0.015), rgba(255,255,255,0.005));
    z-index: 1;
    transition: border-color 0.8s cubic-bezier(.16, 1, .3, 1),
                box-shadow   0.8s cubic-bezier(.16, 1, .3, 1),
                opacity      0.8s cubic-bezier(.16, 1, .3, 1);
    opacity: 0.35;
}
.ob-scope.a-active { opacity: 1; }

/* Role coloring for scopes (mirrors role coloring for .abox) */
.ob-scope.a-agent        { border-color: rgba(249,115,22,0.35); }
.ob-scope.a-agent.a-active   { border-color: rgba(249,115,22,0.85); box-shadow: 0 0 40px rgba(249,115,22,0.15); }
.ob-scope.a-proxy        { border-color: rgba(34,211,238,0.35); }
.ob-scope.a-proxy.a-active   { border-color: rgba(34,211,238,0.85); box-shadow: 0 0 40px rgba(34,211,238,0.15); }
.ob-scope.a-auth         { border-color: rgba(0,230,118,0.35); }
.ob-scope.a-auth.a-active    { border-color: rgba(0,230,118,0.85);  box-shadow: 0 0 40px rgba(0,230,118,0.15); }
.ob-scope.a-idp          { border-color: rgba(124,58,237,0.35); }
.ob-scope.a-idp.a-active     { border-color: rgba(124,58,237,0.85); box-shadow: 0 0 40px rgba(124,58,237,0.15); }
.ob-scope.a-wds          { border-color: rgba(59,130,246,0.35); }
.ob-scope.a-wds.a-active     { border-color: rgba(59,130,246,0.85); box-shadow: 0 0 40px rgba(59,130,246,0.15); }

/* Label sitting on the scope's top edge (like a fieldset legend) */
.ob-scope-label {
    position: absolute;
    top: -14px; left: 20px;
    background: var(--bg);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 2px 12px;
    border-radius: 12px;
    font-family: 'Courier New', monospace;
    color: var(--gray);
    border: 1.5px solid currentColor;
}
.ob-scope.a-agent > .ob-scope-label { color: var(--orange); }
.ob-scope.a-proxy > .ob-scope-label { color: var(--cyan); }
.ob-scope.a-auth  > .ob-scope-label { color: var(--green); }
.ob-scope.a-idp   > .ob-scope-label { color: var(--violet); }
.ob-scope.a-wds   > .ob-scope-label { color: var(--blue); }

/* Direct-child .abox inside a scope: becomes a grid item (no absolute coords) */
.ob-scope > .abox {
    position: relative;
    left: auto; top: auto; right: auto; bottom: auto;
    /* Width/height now driven by grid cell + content. */
    width: auto;
    height: auto;
}

/* `data-size="auto"` = clear any inline fixed width/height */
.abox[data-size="auto"] {
    width: auto;
    height: auto;
}

/* Boxes positioned by `data-at` already have absolute via JS; keep text tidy */
.abox[data-at] {
    /* Let width grow with content, but padding keeps icon + title breathing. */
    padding: 14px 18px;
}

/* Readable min-widths: title lines force a minimum (only for new-system boxes
 * to avoid regressing existing modules whose .abox has a fixed narrow width). */
.abox[data-at] h3,
.ob-scope > .abox h3 { white-space: nowrap; }
.ob-scope > .abox .sub { text-align: center; }