/* ============================================================================
 * zen/components/box/box.css
 * ----------------------------------------------------------------------------
 * Architecture box — the atomic unit for representing a Teleport service,
 * an agent, a user, a Kubernetes API, or any other node in a diagram.
 *
 * Public API (see box.md): data-role, data-at/data-anchor (from core),
 * data-cell (from core), data-min-w/min-h/max-w/max-h (from core),
 * data-size="auto" (from core), data-i18n (from core).
 *
 * Structure:
 *   <div class="zen-box a-proxy" data-at="45% 20%" data-min-w="220">
 *       <svg class="zen-box__icon" viewBox="0 0 24 24">…</svg>
 *       <h3 data-i18n="boxes.proxy.title">Proxy Service</h3>
 *       <div class="sub" data-i18n="boxes.proxy.sub">TLS 1.3 · ALPN</div>
 *   </div>
 *
 * Backwards-compat: `.abox` legacy class is an alias. All `.zen-box` rules
 * also apply to `.abox`.
 * ============================================================================ */

.zen-box, .abox {
    position: absolute;
    border-radius: var(--r-lg);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px;
    transition: all var(--d-slow) var(--ease-natural);
    opacity: 0.15;
    z-index: 2;
    padding: 14px;
    background: linear-gradient(145deg, var(--bg2), var(--bg3));
    border: 1.5px solid var(--border);
}

/* State classes ---------------------------------------------------------- */
.zen-box.a-active, .abox.a-active { opacity: 1; }
.zen-box.a-dimmed, .abox.a-dimmed { opacity: 0.12 !important; filter: grayscale(0.8); }
.zen-box.a-past,   .abox.a-past   { opacity: 0.25; filter: grayscale(0.4); }

/* Typography ------------------------------------------------------------- */
.zen-box h3, .abox h3 {
    font-size: 1rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
}
.zen-box p, .abox p {
    font-size: 0.95rem; color: var(--gray); text-align: center;
}
.zen-box .sub, .abox .sub {
    font-size: 0.85rem; color: var(--gray); text-align: center;
    font-family: 'Courier New', monospace;
}

/* Icon slot -------------------------------------------------------------- */
.zen-box__icon, .zen-box .a-icon,
.abox .a-icon        { font-size: 2rem; line-height: 1; }
.zen-box svg.zen-box__icon,
.zen-box svg.a-icon,
.abox svg.a-icon     { width: 38px; height: 38px; stroke-width: 1.8; fill: none; }

/* Padding tweak when anchored via data-at (icon + title need breathing) -- */
.zen-box[data-at], .abox[data-at] { padding: 14px 18px; }

/* Readable min-widths on new-system boxes only (avoid regressing legacy) - */
.zen-box[data-at] h3, .abox[data-at] h3,
.zen-scope > .zen-box h3, .zen-scope > .abox h3,
.ob-scope  > .zen-box h3, .ob-scope  > .abox h3 { white-space: nowrap; }
.zen-scope > .zen-box .sub, .zen-scope > .abox .sub,
.ob-scope  > .zen-box .sub, .ob-scope  > .abox .sub { text-align: center; }

/* ===== Role coloring ====================================================== *
 * Glow + border color light up when .a-active is set.
 * Titles pick up the role color unconditionally (visible even when dim).   */

.zen-box.a-agent,   .abox.a-agent,
.zen-box[data-role="agent"], .abox[data-role="agent"]    { }
.zen-box.a-agent.a-active,   .abox.a-agent.a-active,
.zen-box[data-role="agent"].a-active,   .abox[data-role="agent"].a-active
    { border-color: var(--orange); box-shadow: 0 0 30px rgba(249,115,22,0.25); }
.zen-box.a-agent h3, .abox.a-agent h3,
.zen-box[data-role="agent"] h3, .abox[data-role="agent"] h3    { color: var(--orange); }
.zen-box.a-agent .a-icon, .abox.a-agent .a-icon,
.zen-box.a-agent .zen-box__icon, .abox.a-agent .zen-box__icon,
.zen-box[data-role="agent"] .a-icon, .abox[data-role="agent"] .a-icon,
.zen-box[data-role="agent"] .zen-box__icon, .abox[data-role="agent"] .zen-box__icon
    { color: var(--orange); }

.zen-box.a-proxy,   .abox.a-proxy,
.zen-box[data-role="proxy"], .abox[data-role="proxy"]    { }
.zen-box.a-proxy.a-active,   .abox.a-proxy.a-active,
.zen-box[data-role="proxy"].a-active,   .abox[data-role="proxy"].a-active
    { border-color: var(--cyan);   box-shadow: 0 0 40px rgba(34,211,238,0.25); }
.zen-box.a-proxy h3, .abox.a-proxy h3,
.zen-box[data-role="proxy"] h3, .abox[data-role="proxy"] h3    { color: var(--cyan); }
.zen-box.a-proxy .a-icon, .abox.a-proxy .a-icon,
.zen-box.a-proxy .zen-box__icon, .abox.a-proxy .zen-box__icon,
.zen-box[data-role="proxy"] .a-icon, .abox[data-role="proxy"] .a-icon,
.zen-box[data-role="proxy"] .zen-box__icon, .abox[data-role="proxy"] .zen-box__icon
    { color: var(--cyan); }

.zen-box.a-auth,    .abox.a-auth,
.zen-box[data-role="auth"], .abox[data-role="auth"]      { }
.zen-box.a-auth.a-active,    .abox.a-auth.a-active,
.zen-box[data-role="auth"].a-active,    .abox[data-role="auth"].a-active
    { border-color: var(--green);  box-shadow: 0 0 40px rgba(0,230,118,0.25); }
.zen-box.a-auth h3, .abox.a-auth h3,
.zen-box[data-role="auth"] h3, .abox[data-role="auth"] h3      { color: var(--green); }
.zen-box.a-auth .a-icon, .abox.a-auth .a-icon,
.zen-box.a-auth .zen-box__icon, .abox.a-auth .zen-box__icon,
.zen-box[data-role="auth"] .a-icon, .abox[data-role="auth"] .a-icon,
.zen-box[data-role="auth"] .zen-box__icon, .abox[data-role="auth"] .zen-box__icon
    { color: var(--green); }

.zen-box.a-idp,     .abox.a-idp,
.zen-box[data-role="idp"], .abox[data-role="idp"]        { }
.zen-box.a-idp.a-active,     .abox.a-idp.a-active,
.zen-box[data-role="idp"].a-active,     .abox[data-role="idp"].a-active
    { border-color: var(--violet); box-shadow: 0 0 40px rgba(124,58,237,0.28); }
.zen-box.a-idp h3, .abox.a-idp h3,
.zen-box[data-role="idp"] h3, .abox[data-role="idp"] h3        { color: var(--violet); }
.zen-box.a-idp .a-icon, .abox.a-idp .a-icon,
.zen-box.a-idp .zen-box__icon, .abox.a-idp .zen-box__icon,
.zen-box[data-role="idp"] .a-icon, .abox[data-role="idp"] .a-icon,
.zen-box[data-role="idp"] .zen-box__icon, .abox[data-role="idp"] .zen-box__icon
    { color: var(--violet); }

.zen-box.a-wds,     .abox.a-wds,
.zen-box[data-role="wds"], .abox[data-role="wds"],
.zen-box.a-k8sapi,  .abox.a-k8sapi,
.zen-box[data-role="k8sapi"], .abox[data-role="k8sapi"]  { }
.zen-box.a-wds.a-active, .abox.a-wds.a-active,
.zen-box[data-role="wds"].a-active, .abox[data-role="wds"].a-active,
.zen-box.a-k8sapi.a-active, .abox.a-k8sapi.a-active,
.zen-box[data-role="k8sapi"].a-active, .abox[data-role="k8sapi"].a-active
    { border-color: var(--blue);   box-shadow: 0 0 35px rgba(59,130,246,0.3); }
.zen-box.a-wds h3, .abox.a-wds h3,
.zen-box[data-role="wds"] h3, .abox[data-role="wds"] h3,
.zen-box.a-k8sapi h3, .abox.a-k8sapi h3,
.zen-box[data-role="k8sapi"] h3, .abox[data-role="k8sapi"] h3  { color: var(--blue); }
.zen-box.a-wds .a-icon, .abox.a-wds .a-icon,
.zen-box.a-wds .zen-box__icon, .abox.a-wds .zen-box__icon,
.zen-box[data-role="wds"] .a-icon, .abox[data-role="wds"] .a-icon,
.zen-box[data-role="wds"] .zen-box__icon, .abox[data-role="wds"] .zen-box__icon,
.zen-box.a-k8sapi .a-icon, .abox.a-k8sapi .a-icon,
.zen-box.a-k8sapi .zen-box__icon, .abox.a-k8sapi .zen-box__icon,
.zen-box[data-role="k8sapi"] .a-icon, .abox[data-role="k8sapi"] .a-icon,
.zen-box[data-role="k8sapi"] .zen-box__icon, .abox[data-role="k8sapi"] .zen-box__icon
    { color: var(--blue); }

.zen-box.a-secret,  .abox.a-secret,
.zen-box[data-role="secret"], .abox[data-role="secret"]  { }
.zen-box.a-secret.a-active,  .abox.a-secret.a-active,
.zen-box[data-role="secret"].a-active,  .abox[data-role="secret"].a-active
    { border-color: var(--yellow); box-shadow: 0 0 35px rgba(251,191,36,0.35); }
.zen-box.a-secret h3, .abox.a-secret h3,
.zen-box[data-role="secret"] h3, .abox[data-role="secret"] h3  { color: var(--yellow); }
.zen-box.a-secret .a-icon, .abox.a-secret .a-icon,
.zen-box.a-secret .zen-box__icon, .abox.a-secret .zen-box__icon,
.zen-box[data-role="secret"] .a-icon, .abox[data-role="secret"] .a-icon,
.zen-box[data-role="secret"] .zen-box__icon, .abox[data-role="secret"] .zen-box__icon
    { color: var(--yellow); }

.zen-box.a-user,    .abox.a-user,
.zen-box[data-role="user"], .abox[data-role="user"]      { }
.zen-box.a-user.a-active,    .abox.a-user.a-active,
.zen-box[data-role="user"].a-active,    .abox[data-role="user"].a-active
    { border-color: var(--pink);   box-shadow: 0 0 30px rgba(244,114,182,0.25); }
.zen-box.a-user h3, .abox.a-user h3,
.zen-box[data-role="user"] h3, .abox[data-role="user"] h3      { color: var(--pink); }
.zen-box.a-user .a-icon, .abox.a-user .a-icon,
.zen-box.a-user .zen-box__icon, .abox.a-user .zen-box__icon,
.zen-box[data-role="user"] .a-icon, .abox[data-role="user"] .a-icon,
.zen-box[data-role="user"] .zen-box__icon, .abox[data-role="user"] .zen-box__icon
    { color: var(--pink); }

.zen-box.a-ca,      .abox.a-ca,
.zen-box[data-role="ca"], .abox[data-role="ca"]          { }
.zen-box.a-ca.a-active,      .abox.a-ca.a-active,
.zen-box[data-role="ca"].a-active,      .abox[data-role="ca"].a-active
    { border-color: var(--green);  box-shadow: 0 0 35px rgba(0,230,118,0.3); }
.zen-box.a-ca h3, .abox.a-ca h3,
.zen-box[data-role="ca"] h3, .abox[data-role="ca"] h3          { color: var(--green); }
.zen-box.a-ca .a-icon, .abox.a-ca .a-icon,
.zen-box.a-ca .zen-box__icon, .abox.a-ca .zen-box__icon,
.zen-box[data-role="ca"] .a-icon, .abox[data-role="ca"] .a-icon,
.zen-box[data-role="ca"] .zen-box__icon, .abox[data-role="ca"] .zen-box__icon
    { color: var(--green); }

.zen-box.a-gpo,     .abox.a-gpo,
.zen-box[data-role="gpo"], .abox[data-role="gpo"]        { }
.zen-box.a-gpo.a-active,     .abox.a-gpo.a-active,
.zen-box[data-role="gpo"].a-active,     .abox[data-role="gpo"].a-active
    { border-color: var(--blue);   box-shadow: 0 0 30px rgba(59,130,246,0.28); }
.zen-box.a-gpo h3, .abox.a-gpo h3,
.zen-box[data-role="gpo"] h3, .abox[data-role="gpo"] h3        { color: var(--blue); }
.zen-box.a-gpo .a-icon, .abox.a-gpo .a-icon,
.zen-box.a-gpo .zen-box__icon, .abox.a-gpo .zen-box__icon,
.zen-box[data-role="gpo"] .a-icon, .abox[data-role="gpo"] .a-icon,
.zen-box[data-role="gpo"] .zen-box__icon, .abox[data-role="gpo"] .zen-box__icon
    { color: var(--blue); }

/* ── Windows family (AD Domain Controller, domain-joined host, standalone host)
 * dc       → violet (directory / AD)
 * winhost  → blue   (Windows host, domain-joined)
 * standalone → blue (Windows host, non-AD)
 * Legacy aliases kept for backwards-compat: .a-domain-controller / .a-winhost /
 * .a-standalone all still work.                                              */

.zen-box.a-dc,      .abox.a-dc,
.zen-box.a-domain-controller, .abox.a-domain-controller,
.zen-box[data-role="dc"], .abox[data-role="dc"]          { }
.zen-box.a-dc.a-active,      .abox.a-dc.a-active,
.zen-box.a-domain-controller.a-active, .abox.a-domain-controller.a-active,
.zen-box[data-role="dc"].a-active,      .abox[data-role="dc"].a-active
    { border-color: var(--violet); box-shadow: 0 0 35px rgba(124,58,237,0.28); }
.zen-box.a-dc h3, .abox.a-dc h3,
.zen-box.a-domain-controller h3, .abox.a-domain-controller h3,
.zen-box[data-role="dc"] h3, .abox[data-role="dc"] h3          { color: var(--violet); }
.zen-box.a-dc .a-icon, .abox.a-dc .a-icon,
.zen-box.a-dc .zen-box__icon, .abox.a-dc .zen-box__icon,
.zen-box.a-domain-controller .a-icon, .abox.a-domain-controller .a-icon,
.zen-box.a-domain-controller .zen-box__icon, .abox.a-domain-controller .zen-box__icon,
.zen-box[data-role="dc"] .a-icon, .abox[data-role="dc"] .a-icon,
.zen-box[data-role="dc"] .zen-box__icon, .abox[data-role="dc"] .zen-box__icon
    { color: var(--violet); }

.zen-box.a-winhost, .abox.a-winhost,
.zen-box[data-role="winhost"], .abox[data-role="winhost"]            { }
.zen-box.a-winhost.a-active, .abox.a-winhost.a-active,
.zen-box[data-role="winhost"].a-active, .abox[data-role="winhost"].a-active
    { border-color: var(--blue);   box-shadow: 0 0 30px rgba(59,130,246,0.25); }
.zen-box.a-winhost h3, .abox.a-winhost h3,
.zen-box[data-role="winhost"] h3, .abox[data-role="winhost"] h3      { color: var(--blue); }
.zen-box.a-winhost .a-icon, .abox.a-winhost .a-icon,
.zen-box.a-winhost .zen-box__icon, .abox.a-winhost .zen-box__icon,
.zen-box[data-role="winhost"] .a-icon, .abox[data-role="winhost"] .a-icon,
.zen-box[data-role="winhost"] .zen-box__icon, .abox[data-role="winhost"] .zen-box__icon
    { color: var(--blue); }

.zen-box.a-standalone, .abox.a-standalone,
.zen-box[data-role="standalone"], .abox[data-role="standalone"]      { }
.zen-box.a-standalone.a-active, .abox.a-standalone.a-active,
.zen-box[data-role="standalone"].a-active, .abox[data-role="standalone"].a-active
    { border-color: var(--blue);   box-shadow: 0 0 30px rgba(59,130,246,0.25); }
.zen-box.a-standalone h3, .abox.a-standalone h3,
.zen-box[data-role="standalone"] h3, .abox[data-role="standalone"] h3 { color: var(--blue); }
.zen-box.a-standalone .a-icon, .abox.a-standalone .a-icon,
.zen-box.a-standalone .zen-box__icon, .abox.a-standalone .zen-box__icon,
.zen-box[data-role="standalone"] .a-icon, .abox[data-role="standalone"] .a-icon,
.zen-box[data-role="standalone"] .zen-box__icon, .abox[data-role="standalone"] .zen-box__icon
    { color: var(--blue); }

/* ===== Variants =========================================================== */

/* Compact variant — smaller padding, tighter type */
.zen-box--compact, .abox--compact {
    padding: 10px 12px;
    gap: 4px;
}
.zen-box--compact h3, .abox--compact h3 { font-size: 0.85rem; letter-spacing: 0.8px; }
.zen-box--compact .sub, .abox--compact .sub { font-size: 0.75rem; }
.zen-box--compact svg.zen-box__icon, .abox--compact svg.a-icon { width: 28px; height: 28px; }

/* Stacked variant — icon on the left, title/sub on the right */
.zen-box--row, .abox--row {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}
.zen-box--row h3, .abox--row h3 { text-align: left; }
.zen-box--row .sub, .abox--row .sub { text-align: left; }