/**
 * Page Designer — Tab (working) Block Runtime Styles
 * v1.0.0
 *
 * Fully isolated clone of the Tabs runtime CSS. Selectors live under
 * `[data-pd-tabw-uid]` and use the dedicated `pd-blk-tabw-*`
 * namespace so this block never collides with the legacy Tabs block
 * (`pd-blk-tabs-*`) or any other tool. No selector overlap with
 * `pd-blk-tabs`, `pd-tbs-pnl-`, or any vendor `grapesjs-tabs` rule.
 */

[data-pd-tabw-uid].pd-blk-tabw {
    box-sizing: border-box;
    width: 100%;
    padding: 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--pd-label-color, inherit);
}

/* ── Tab strip (the row of clickable buttons) ───────────────── */
[data-pd-tabw-uid] > .pd-blk-tabw-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pd-tabw-gap, 6px);
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: stretch;
}

/* Tab buttons */
[data-pd-tabw-uid] .pd-blk-tabw-tab {
    /* v2.9.214 — Default to `inline-block` so text-align (set by the
     * Text-panel alignment buttons) works natively on the tab title.
     * `inline-flex` is only needed when the tab has child elements to
     * align (icon / label wrapper / badge); the :has() rule below
     * switches back to flex in that case. This makes alignment durable
     * across GrapesJS view re-renders (e.g. when tabw.js mirrors the
     * active class on tab click) — no inline-style mirroring needed. */
    display: inline-block;
    gap: 6px;
    padding: var(--pd-tabw-tab-pad-y, 8px) var(--pd-tabw-tab-pad-x, 16px);
    background: var(--pd-tabw-inactive-bg, #f3f4f6); /* v3.7.18 — Tabs > Inactive picker */
    color: var(--pd-tabw-inactive-text, var(--pd-label-color, inherit)); /* v3.7.421 — Tabs > Inactive Text Colour */
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
    user-select: none;
    text-decoration: none;
    outline: none;
    font-family: inherit;
}
/* v2.9.214 — Tabs with icon / label-wrapper / badge children need flex
 * to position those siblings; bare-text tabs (the common case) stay
 * inline-block so text-align works without flex-justify gymnastics. */
[data-pd-tabw-uid] .pd-blk-tabw-tab:has(> .pd-blk-tabw-icon),
[data-pd-tabw-uid] .pd-blk-tabw-tab:has(> .pd-blk-tabw-label),
[data-pd-tabw-uid] .pd-blk-tabw-tab:has(> .pd-blk-tabw-badge) {
    display: inline-flex;
    align-items: center;
}
[data-pd-tabw-uid] .pd-blk-tabw-tab:focus-visible {
    box-shadow: 0 0 0 2px var(--pd-tabw-active-bg, #89b4fa);
}
[data-pd-tabw-uid] .pd-blk-tabw-tab:hover {
    background: var(--pd-tabw-hover-bg, #e5e7eb); /* v3.7.18 — Tabs > Hover picker */
    color: var(--pd-tabw-hover-text, var(--pd-label-color, inherit)); /* v3.7.421 — Tabs > Hover Text Colour */
}
[data-pd-tabw-uid] .pd-blk-tabw-tab.pd-blk-tabw-tab-active {
    background: var(--pd-tabw-active-bg, #89b4fa);
    color: var(--pd-tabw-active-text, var(--pd-label-color, inherit)); /* v3.7.421 — Tabs > Active Text Colour */
}

[data-pd-tabw-uid] .pd-blk-tabw-tab .pd-blk-tabw-icon {
    font-size: 0.95em;
    line-height: 1;
}
[data-pd-tabw-uid] .pd-blk-tabw-tab .pd-blk-tabw-label {
    line-height: 1.25;
    /* v2.9.194 — Multi-line tab labels (mirrors Accordion <summary>):
       Enter inside the editable label inserts a new line that stacks
       vertically inside the pill. The strip's align-items:stretch
       (above) keeps sibling tabs aligned to the tallest pill. */
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    /* v2.9.211 — Let the label fill the tab's main-axis space so
       `text-align` set via the Text-panel alignment buttons actually
       shifts the title text when the user widens a tab beyond its
       content. flex:1 1 auto stays content-sized inside an inline-flex
       (content-width) tab, and grows when the tab is wider (explicit
       width or "full" alignment mode). min-width:0 lets long titles
       wrap rather than block tab from shrinking. */
    flex: 1 1 auto;
    min-width: 0;
}
/* v2.9.211 — Preserve the centered visual that "full" alignment used
 * to give via justify-content. Inline text-align on inner <p>/<div>
 * (set by execCommand) overrides this via higher specificity, so the
 * user can still left/right/justify per-tab. */
[data-pd-tabw-uid][data-pd-tabw-align="full"] .pd-blk-tabw-tab .pd-blk-tabw-label {
    text-align: center;
}
/* v2.9.197 — Allow RTE-inserted block elements (the tab is inline-
   flex, so without flex-wrap children would stay on one row regardless
   of their display value). flex-wrap lets a full-width child break to
   a new row. */
[data-pd-tabw-uid] .pd-blk-tabw-tab {
    flex-wrap: wrap;
}
/* v2.9.212 — When the Text-panel alignment buttons set inline
 * `text-align` on the tab pill (the pill is the editable element for
 * vendor `text` components), the pill is `display: flex` and ignores
 * `text-align` for child positioning. Mirror the inline value into
 * `justify-content` so the visual matches what the user picked. Works
 * for both the canvas AND the published HTML (the pill carries the
 * inline style in both, after the rich-text v2.9.212 sync fix). */
[data-pd-tabw-uid] .pd-blk-tabw-tab[style*="text-align: left"],
[data-pd-tabw-uid] .pd-blk-tabw-tab[style*="text-align:left"]    { justify-content: flex-start; }
[data-pd-tabw-uid] .pd-blk-tabw-tab[style*="text-align: center"],
[data-pd-tabw-uid] .pd-blk-tabw-tab[style*="text-align:center"]  { justify-content: center; }
[data-pd-tabw-uid] .pd-blk-tabw-tab[style*="text-align: right"],
[data-pd-tabw-uid] .pd-blk-tabw-tab[style*="text-align:right"]   { justify-content: flex-end; }
[data-pd-tabw-uid] .pd-blk-tabw-tab[style*="text-align: justify"],
[data-pd-tabw-uid] .pd-blk-tabw-tab[style*="text-align:justify"] { justify-content: space-between; }
/* RTE may insert <div> or <p> on Enter — render them as full-width
   block rows so each new line stacks vertically inside the pill.
   Covers both editable surfaces: the bare tab (no icon/badge) and
   the inner label span (icon/badge wrapped case). */
[data-pd-tabw-uid] .pd-blk-tabw-tab > div,
[data-pd-tabw-uid] .pd-blk-tabw-tab > p {
    display: block;
    margin: 0;
    padding: 0;
    flex: 0 0 100%;
    max-width: 100%;
}
[data-pd-tabw-uid] .pd-blk-tabw-tab .pd-blk-tabw-label > div,
[data-pd-tabw-uid] .pd-blk-tabw-tab .pd-blk-tabw-label > p {
    display: block;
    margin: 0;
    padding: 0;
}
[data-pd-tabw-uid] .pd-blk-tabw-tab .pd-blk-tabw-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 12%, transparent); /* v3.7.18 — neutral badge surface */
    color: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
[data-pd-tabw-uid] .pd-blk-tabw-tab.pd-blk-tabw-tab-active .pd-blk-tabw-badge {
    background: color-mix(in srgb, currentColor 12%, transparent); /* v3.7.18 — neutral badge surface */
}

/* ── Tab content panels ──────────────────────────────────────── */
[data-pd-tabw-uid] > .pd-blk-tabw-panel {
    padding: var(--pd-tabw-panel-pad, 16px);
    min-height: var(--pd-tabw-panel-min, 120px);
    text-align: var(--pd-tabw-panel-align, left);
    animation: pdBlkTabwFadeIn 0.32s ease both;
}
@keyframes pdBlkTabwFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Slide transition ────────────────────────────────────────── */
[data-pd-tabw-uid][data-pd-tabw-trans="slide"] .pd-blk-tabw-panel {
    animation: pdBlkTabwSlideIn 0.32s ease both;
}
@keyframes pdBlkTabwSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
[data-pd-tabw-uid][data-pd-tabw-trans="none"] .pd-blk-tabw-panel { animation: none; }

/* ── Alignment ───────────────────────────────────────────────── */
[data-pd-tabw-uid][data-pd-tabw-align="left"]   > .pd-blk-tabw-strip { justify-content: flex-start; }
[data-pd-tabw-uid][data-pd-tabw-align="center"] > .pd-blk-tabw-strip { justify-content: center; }
[data-pd-tabw-uid][data-pd-tabw-align="right"]  > .pd-blk-tabw-strip { justify-content: flex-end; }
[data-pd-tabw-uid][data-pd-tabw-align="full"]   > .pd-blk-tabw-strip .pd-blk-tabw-tab { flex: 1 1 0; justify-content: center; }

/* ── Orientation: vertical ───────────────────────────────────── */
[data-pd-tabw-uid][data-pd-tabw-orient="vertical"] {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: stretch;
    gap: 0;
}
[data-pd-tabw-uid][data-pd-tabw-orient="vertical"] > .pd-blk-tabw-strip {
    flex-direction: column;
    align-items: stretch;
    border-right: 1px solid var(--pd-tabw-border-color, color-mix(in srgb, currentColor 15%, transparent));
    padding-right: 8px;
    margin-right: 8px;
}
[data-pd-tabw-uid][data-pd-tabw-orient="vertical"][data-pd-tabw-align="full"] > .pd-blk-tabw-strip .pd-blk-tabw-tab {
    flex: 0 0 auto;
}

/* ── Style presets ───────────────────────────────────────────── */

/* Underline */
[data-pd-tabw-uid][data-pd-tabw-preset="underline"] > .pd-blk-tabw-strip {
    border-bottom: 1px solid var(--pd-tabw-border-color, color-mix(in srgb, currentColor 15%, transparent));
    gap: 0;
}
[data-pd-tabw-uid][data-pd-tabw-preset="underline"] .pd-blk-tabw-tab {
    background: transparent;
    color: var(--pd-tabw-inactive-text, var(--pd-label-color, inherit)); /* v3.7.421 — Tabs > Inactive Text Colour */
    border: none;
    border-radius: 0;
    border-bottom: var(--pd-tabw-border-thick, 2px) solid transparent;
    margin-bottom: -1px;
}
[data-pd-tabw-uid][data-pd-tabw-preset="underline"] .pd-blk-tabw-tab:hover {
    background: transparent;
    color: var(--pd-tabw-hover-text, var(--pd-label-color, inherit)); /* v3.7.421 — Tabs > Hover Text Colour */
}
[data-pd-tabw-uid][data-pd-tabw-preset="underline"] .pd-blk-tabw-tab.pd-blk-tabw-tab-active {
    background: transparent;
    color: var(--pd-tabw-active-text, var(--pd-label-color, inherit)); /* v3.7.421 — Tabs > Active Text Colour */
    border-bottom-color: var(--pd-tabw-border-color, color-mix(in srgb, currentColor 15%, transparent));
}

/* Boxed */
[data-pd-tabw-uid][data-pd-tabw-preset="boxed"] > .pd-blk-tabw-strip {
    gap: 0;
    border-bottom: 1px solid var(--pd-tabw-border-color, color-mix(in srgb, currentColor 15%, transparent));
}
[data-pd-tabw-uid][data-pd-tabw-preset="boxed"] .pd-blk-tabw-tab {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px 6px 0 0;
    margin-bottom: -1px;
}
[data-pd-tabw-uid][data-pd-tabw-preset="boxed"] .pd-blk-tabw-tab.pd-blk-tabw-tab-active {
    background: var(--pd-tabw-active-bg, #89b4fa); /* v3.7.18 — Tabs > Active picker */
    color: var(--pd-tabw-active-text, var(--pd-label-color, inherit)); /* v3.7.421 — Tabs > Active Text Colour */
    border-color: var(--pd-tabw-border-color, color-mix(in srgb, currentColor 15%, transparent)); /* v3.7.18 */
    border-bottom-color: transparent;
}

/* Minimal */
[data-pd-tabw-uid][data-pd-tabw-preset="minimal"] .pd-blk-tabw-tab {
    background: transparent;
    border: none;
    padding: 6px 10px;
}
[data-pd-tabw-uid][data-pd-tabw-preset="minimal"] .pd-blk-tabw-tab:hover {
    background: transparent;
    text-decoration: underline;
}
[data-pd-tabw-uid][data-pd-tabw-preset="minimal"] .pd-blk-tabw-tab.pd-blk-tabw-tab-active {
    background: transparent;
    color: var(--pd-tabw-active-bg, var(--pd-link-color, currentColor)); /* v3.7.18 — minimal active accent = Tabs Active colour */
}

/* Vertical-line */
[data-pd-tabw-uid][data-pd-tabw-preset="vertical-line"] .pd-blk-tabw-tab {
    background: transparent;
    border-radius: 0;
    border-left: var(--pd-tabw-border-thick, 2px) solid transparent;
    padding-left: 12px;
    text-align: left;
}
[data-pd-tabw-uid][data-pd-tabw-preset="vertical-line"] .pd-blk-tabw-tab.pd-blk-tabw-tab-active {
    background: transparent;
    color: var(--pd-tabw-active-text, var(--pd-label-color, inherit)); /* v3.7.421 — Tabs > Active Text Colour */
    border-left-color: var(--pd-tabw-border-color, color-mix(in srgb, currentColor 15%, transparent));
}

/* Hide non-active panels in editor + runtime */
[data-pd-tabw-uid] .pd-blk-tabw-panel[hidden] { display: none; }

/* ── Persistent block container outline in the editor ─────────────
 * Keep the green block outline visible on the tabw root even when
 * the user has clicked a descendant (a tab, panel body, etc.), so
 * the block boundary is always apparent while editing its content.
 * Solid when any descendant is selected, dashed when only hovered.
 * These supplement the generic `[data-pd-block].gjs-selected/.gjs-hovered`
 * rules in editor.js (which only fire when the root itself has the
 * class) — no `!important` needed since there's no conflict.
 */
[data-pd-block="tabw"]:has(.gjs-selected) {
    outline: 4px solid var(--at-color-border);
    outline-offset: -2px;
}
[data-pd-block="tabw"]:has(.gjs-hovered):not(:has(.gjs-selected)) {
    outline: 4px dashed var(--at-color-border);
    outline-offset: -2px;
}

/* ── Mobile accordion ────────────────────────────────────────── */
@media (max-width: 768px) {
    [data-pd-tabw-uid][data-pd-tabw-mobaccord="1"] {
        display: block;
    }
    [data-pd-tabw-uid][data-pd-tabw-mobaccord="1"] > .pd-blk-tabw-strip {
        display: contents;
    }
    [data-pd-tabw-uid][data-pd-tabw-mobaccord="1"] .pd-blk-tabw-tab {
        display: flex;
        width: 100%;
        border-radius: 6px;
        margin-top: 6px;
        justify-content: space-between;
    }
    [data-pd-tabw-uid][data-pd-tabw-mobaccord="1"] > .pd-blk-tabw-panel[hidden] {
        display: none;
    }
}

/* ── Vertical tabs on small screens ───────────────────────────────
   A vertical (label-column + panel) layout squashes on a phone. When the author
   hasn't opted into the mobile accordion above, drop the vertical grid to a single
   column with the tab strip as a wrapping row on top and the panel below, so it
   reads cleanly. Scoped to vertical + non-accordion only; specificity beats the
   base vertical rules, so no !important. */
@media (max-width: 768px) {
    [data-pd-tabw-uid][data-pd-tabw-orient="vertical"]:not([data-pd-tabw-mobaccord="1"]) {
        display: block;
    }
    [data-pd-tabw-uid][data-pd-tabw-orient="vertical"]:not([data-pd-tabw-mobaccord="1"]) > .pd-blk-tabw-strip {
        flex-direction: row;
        flex-wrap: wrap;
    }
}