/* ──────────────────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.tabs
   Classification : UI Atom | Tokenized Tab System | Wrapping-Aware | Genesis-Final
   Version        : 3.0.0
   File           : /tools/modules/ui.tabs/ui.tabs.css
   Maintainer     : DΛREΛKT_ UI TEAM
   ────────────────────────────────────────────────────────────────────────────── */

/* ─── Layer Declaration — Harmonized with Wrapping ───────────────────────────── */
@layer site, ui.tabs;

/* ──────────────────────────────────────────────────────────────────────────────
   ROOT + TOKENS
   Defines default tokens (overridden by themeLoader or global palette)
   ────────────────────────────────────────────────────────────────────────────── */
@layer ui.tabs {
  .ut {
    display: flex;
    flex-direction: column;
    width: 100%;
    --ut-gap: 8px;
    --ut-pad-x: 12px;
    --ut-pad-y: 8px;
    --ut-radius: 10px;
    --ut-bd: rgba(255, 255, 255, 0.08);
    --ut-fg: inherit;
    --ut-fg-active: #fff;
    --ut-bg: transparent;
    --ut-bg-active: rgba(255, 255, 255, 0.08);
    --ut-indicator: #2680eb;
    isolation: isolate;
  }

  /* ─── Wrapper Awareness Bridge (used by wrapping inspector) ────────────────── */
  .ut[data-owner],
  .ut[data-parent],
  .ut[data-fallback] {
    position: relative;
  }

  /* ─── Container for tab groups (multi-row layouts) ─────────────────────────── */
  .ut-lists {
    display: flex;
    flex-direction: column;
    gap: var(--ut-gap);
  }

  /* ─── Tablist Row ──────────────────────────────────────────────────────────── */
  .ut-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--ut-gap);
    border-bottom: 1px solid var(--ut-bd);
    padding-bottom: 4px;
  }

  /* ─── Tab Button ───────────────────────────────────────────────────────────── */
  .ut-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    color: var(--ut-fg);
    background: var(--ut-bg);
    border: 1px solid transparent;
    border-radius: var(--ut-radius);
    padding: var(--ut-pad-y) var(--ut-pad-x);
    cursor: pointer;
    transition: all 0.18s ease-in-out;
    user-select: none;
  }

  .ut-tab:hover {
    color: var(--ut-fg-active);
    background: color-mix(in srgb, var(--ut-bg-active) 40%, transparent);
  }

  .ut-tab.is-active,
  .ut-tab[aria-selected="true"] {
    color: var(--ut-fg-active);
    background: var(--ut-bg-active);
  }

  /* ─── Underline Variant ───────────────────────────────────────────────────── */
  .ut[data-mode="underline"] .ut-tab {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    padding: calc(var(--ut-pad-y) * 1.2) var(--ut-pad-x);
  }

  .ut[data-mode="underline"] .ut-tab.is-active {
    border-bottom-color: var(--ut-indicator);
  }

  /* ─── Minimal Variant (Flat Text) ─────────────────────────────────────────── */
  .ut[data-mode="minimal"] .ut-tab {
    border: none;
    background: none;
    color: var(--ut-fg);
  }

  .ut[data-mode="minimal"] .ut-tab.is-active {
    color: var(--ut-fg-active);
  }

  /* ─── Tabpanel ────────────────────────────────────────────────────────────── */
  .ut-panel {
    display: block;
    width: 100%;
    margin-top: calc(var(--ut-gap) * 1.25);
    padding: var(--ut-pad-y) 0;
    color: var(--ut-fg);
    contain: layout paint;
  }

  /* ─── Error Block (DEV MODE / Diagnostics) ────────────────────────────────── */
  .ut-error {
    display: block;
    white-space: pre-wrap;
    padding: 1em;
    border: 1px solid #b00;
    background: #fee;
    color: #a00;
    border-radius: 8px;
    font-size: 0.85em;
    font-family: ui-monospace, monospace;
  }

  /* ─── Keyboard Focus ─────────────────────────────────────────────────────── */
  .ut-tab:focus-visible {
    outline: 2px solid var(--ut-indicator);
    outline-offset: 2px;
  }

  /* ─── Wrapping Debug Outline (for diagnostics overlay) ───────────────────── */
  .ut[data-debug="true"] {
    outline: 1px dashed rgba(0, 0, 0, 0.15);
    outline-offset: 2px;
  }

  /* ─── Fade / Transition Placeholder for daPulse & daMind visual sync ─────── */
  @keyframes utFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .ut[data-animate="true"] .ut-panel {
    animation: utFadeIn 0.4s ease-out both;
  }
}