/* src/components/basic/XWUINavTabs/XWUINavTabs.css */
/**
 * XWUINavTabs Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/tab/*.css (component-specific border widths)
 * - Roundness: theme/roundness/tab/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-tabs {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.xwui-tabs-vertical {
    flex-direction: row;
}

/* Tab list */
.xwui-tabs-list {
    display: flex;
    gap: 0;
}

.xwui-tabs-horizontal .xwui-tabs-list {
    flex-direction: row;
    border-bottom: var(--border-tab-width, var(--border-width-regular, 1.5px)) var(--border-tab-style, solid) var(--border-tab-color, var(--border-color, #dee2e6));
}

.xwui-tabs-vertical .xwui-tabs-list {
    flex-direction: column;
    border-inline-end: var(--border-tab-width, var(--border-width-regular, 1.5px)) var(--border-tab-style, solid) var(--border-tab-color, var(--border-color, #dee2e6));
    min-width: 150px;
}

.xwui-tabs-centered .xwui-tabs-list {
    justify-content: center;
}

.xwui-tabs-full-width .xwui-tab-item {
    flex: 1;
}
.xwui-tabs-full-width .xwui-tab {
    flex: 1;
    width: 100%;
}

/* Tab item - holds the tab button + sibling action buttons (never nested). */
.xwui-tab-item {
    display: inline-flex;
    align-items: center;
    position: relative;
    flex-shrink: 0;
    min-width: 0;
    max-width: 260px;
}

.xwui-tab-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-inline-start: 2px;
}

.xwui-tab-actions > button {
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
    appearance: none;
}

/* Individual tab */
.xwui-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm, 0.5rem);
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-secondary, #6c757d);
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    position: relative;
    white-space: nowrap;
    min-width: 0;
    width: 100%;
}

.xwui-tab:hover:not(.xwui-tab-disabled) {
    color: var(--text-primary, #212529);
}

.xwui-tab-active {
    color: var(--accent-primary, #4f46e5);
}

.xwui-tab-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Size variants.
   The component config accepts both legacy names ("small"/"medium"/"large")
   and the canonical xwui scale ("xxxs"→"xxxxl"). Previously the CSS only
   defined the legacy names, so `size: 'sm'` (which the config treats as
   the canonical small) produced an unstyled tab strip - tabs had no
   padding, sitting flush against each other as unspaced text. These
   extra selectors alias every canonical size to a matching padding
   scale so the component feels the same regardless of which naming
   style the caller uses. */
.xwui-tabs-small .xwui-tab,
:is(.xwui-tabs-4xs,.xwui-tabs-xxxxs) .xwui-tab,
:is(.xwui-tabs-3xs,.xwui-tabs-xxxs) .xwui-tab,
:is(.xwui-tabs-2xs,.xwui-tabs-xxs) .xwui-tab,
.xwui-tabs-xs .xwui-tab,
:is(.xwui-tabs-s,.xwui-tabs-sm) .xwui-tab {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    font-size: var(--font-size-sm, 0.8125rem);
}

.xwui-tabs-medium .xwui-tab,
:is(.xwui-tabs-m,.xwui-tabs-md) .xwui-tab {
    padding: var(--spacing-sm, 0.75rem) var(--spacing-lg, 1.25rem);
    font-size: var(--font-size-sm, 0.875rem);
}

.xwui-tabs-large .xwui-tab,
:is(.xwui-tabs-l,.xwui-tabs-lg) .xwui-tab,
.xwui-tabs-xl .xwui-tab,
:is(.xwui-tabs-2xl,.xwui-tabs-xxl) .xwui-tab,
:is(.xwui-tabs-3xl,.xwui-tabs-xxxl) .xwui-tab,
:is(.xwui-tabs-4xl,.xwui-tabs-xxxxl) .xwui-tab {
    padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
    font-size: var(--font-size-base, 1rem);
}

/* Line variant - flat bottom underline. Needs `border-radius: 0` on the
   tab button itself to defeat the global `button { border-radius: 6px }`
   rule from core/utilities.css: without this, the `::after` pseudo would
   clip along the tab's rounded corners and render as a bracket shape at
   the bottom of the active tab instead of a flat line. */
.xwui-tabs-line .xwui-tab,
.xwui-tabs-underline .xwui-tab {
    border-radius: 0;
}

.xwui-tabs-line .xwui-tab-active::after {
    content: '';
    position: absolute;
    background: var(--accent-primary, #4f46e5);
}

.xwui-tabs-line.xwui-tabs-horizontal .xwui-tab-active::after {
    bottom: -1px;
    inset-inline: 0;
    height: 2px;
}

.xwui-tabs-line.xwui-tabs-vertical .xwui-tab-active::after {
    inset-inline-end: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
}

/* Card variant */
.xwui-tabs-card .xwui-tab {
    border: var(--border-tab-width, var(--border-width-regular, 1.5px)) var(--border-tab-style, solid) transparent;
    border-radius: var(--radius-tab, var(--radius-sm, 6px)) var(--radius-tab, var(--radius-sm, 6px)) 0 0;
    margin-bottom: -1px;
}

.xwui-tabs-card .xwui-tab-active {
    background: var(--bg-primary, #ffffff);
    border-color: var(--border-color, #dee2e6);
    border-bottom-color: transparent;
}

.xwui-tabs-card.xwui-tabs-vertical .xwui-tab {
    border-radius: var(--radius-tab, var(--radius-sm, 6px)) 0 0 var(--radius-tab, var(--radius-sm, 6px));
    margin-bottom: 0;
    margin-inline-end: -1px;
}

.xwui-tabs-card.xwui-tabs-vertical .xwui-tab-active {
    border-inline-end-color: transparent;
    border-bottom-color: var(--border-color, #dee2e6);
}

/* Underline variant (Primer UnderlineNav-style) */
.xwui-tabs-underline.xwui-tabs-horizontal .xwui-tabs-list {
    border-bottom: var(--border-tab-width, 1px) solid var(--border-tab-color, var(--border-color));
}

.xwui-tabs-underline .xwui-tab-active::after {
    content: '';
    position: absolute;
    background: var(--accent-primary);
}

.xwui-tabs-underline.xwui-tabs-horizontal .xwui-tab-active::after {
    bottom: -1px;
    inset-inline: 0;
    height: 2px;
}

.xwui-tabs-underline.xwui-tabs-vertical .xwui-tab-active::after {
    inset-inline-end: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
}

/* Button variant */
.xwui-tabs-button .xwui-tabs-list {
    gap: var(--spacing-xs, 0.25rem);
    padding: var(--spacing-xs, 0.25rem);
    background: var(--bg-secondary, #f8f9fa);
    border-radius: var(--radius-tab, var(--radius-md, 8px));
    border: none;
}

.xwui-tabs-button .xwui-tab {
    border-radius: var(--radius-tab, var(--radius-sm, 6px));
}

.xwui-tabs-button .xwui-tab-active {
    background: var(--bg-primary, #ffffff);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

/* Tab icon */
.xwui-tab-icon {
    display: flex;
    align-items: center;
}

.xwui-tab-icon svg {
    width: 16px;
    height: 16px;
}

/* Tab content/panels */
.xwui-tabs-content {
    flex: 1;
}

.xwui-tab-panel {
    padding: var(--spacing-md, 1rem) 0;
}

.xwui-tabs-vertical .xwui-tab-panel {
    padding: 0 var(--spacing-md, 1rem);
}

.xwui-tab-panel[hidden] {
    display: none;
}

/* Dark theme */
[data-theme="dark"] .xwui-tabs-horizontal .xwui-tabs-list,
[data-theme="dark"] .xwui-tabs-vertical .xwui-tabs-list {
    border-color: var(--border-color, #334155);
}

[data-theme="dark"] .xwui-tab {
    color: var(--text-secondary, #94a3b8);
}

[data-theme="dark"] .xwui-tab:hover:not(.xwui-tab-disabled) {
    color: var(--text-primary, #f1f5f9);
}

[data-theme="dark"] .xwui-tabs-card .xwui-tab-active {
    background: var(--bg-primary, #0f172a);
    border-color: var(--border-color, #334155);
}

[data-theme="dark"] .xwui-tabs-button .xwui-tabs-list {
    background: var(--bg-secondary, #1e293b);
}

[data-theme="dark"] .xwui-tabs-button .xwui-tab-active {
    background: var(--bg-primary, #0f172a);
}

/* ── Strip wrapper: arrows + tab list + add button in one row ───────── */
.xwui-tabs-strip {
    display: flex;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
}

/* Scrollable tab list: clip overflow horizontally so arrows can scroll it */
.xwui-tabs-strip .xwui-tabs-list {
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
}
.xwui-tabs-strip .xwui-tabs-list::-webkit-scrollbar { display: none; }

/* Nav arrows (prev / next) */
.xwui-tabs-nav,
.xwui-tabs-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: transparent;
    border: none;
    color: var(--text-secondary, #6c757d);
    cursor: pointer;
    border-radius: var(--radius-sm, 6px);
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.xwui-tabs-nav:hover,
.xwui-tabs-add:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.xwui-tabs-nav:disabled,
.xwui-tabs-add:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Drag-to-reorder visual feedback
 * Cursor stays NORMAL on hover - browsers show the closed-fist "grabbing"
 * cursor automatically during a native drag operation, which is what we
 * want. Showing `cursor: grab` on hover makes the tab feel non-clickable.
 * We DO however mark the currently-dragged tab with reduced opacity and
 * paint a colored edge on the hovered target tab to show the drop slot. */
.xwui-tab-dragging { opacity: 0.4; cursor: grabbing; }
.xwui-tab-drop-before { box-shadow: inset 2px 0 0 0 var(--accent-primary); }
.xwui-tab-drop-after  { box-shadow: inset -2px 0 0 0 var(--accent-primary); }

/* Drop target for external XWUIItem drags (acceptItemDrops config) */
.xwui-tabs-strip-drop-active {
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    box-shadow: inset 0 0 0 2px var(--accent-primary);
    transition: background 0.12s ease, box-shadow 0.12s ease;
}

/* Per-tab close / star / archive - sibling buttons inside .xwui-tab-actions */
.xwui-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    color: var(--text-tertiary, #adb5bd);
    cursor: pointer;
    opacity: 0.6;
    transition: background 0.15s, opacity 0.15s, color 0.15s;
}
.xwui-tab-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    opacity: 1;
}

.xwui-tab-star,
.xwui-tab-archive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    color: var(--text-tertiary, #adb5bd);
    cursor: pointer;
    opacity: 0.6;
    line-height: 1;
    transition: background 0.15s, opacity 0.15s, color 0.15s, transform 0.1s;
}
.xwui-tab-star { font-size: 14px; }
.xwui-tab-star:hover,
.xwui-tab-archive:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    opacity: 1;
}
.xwui-tab-star:active,
.xwui-tab-archive:active { transform: scale(0.9); }
.xwui-tab-star-on {
    color: var(--accent-warning, #f59e0b);
    opacity: 1;
}
.xwui-tab-archive-on {
    color: var(--accent-primary, #4f46e5);
    opacity: 1;
}
.xwui-tab-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    width: 100%;
}
.xwui-tab-labelcol {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    overflow: hidden;
    min-width: 0;
    width: 100%;
}
.xwui-tab-subtitle {
    font-size: 0.75em;
    color: var(--text-tertiary, #94a3b8);
    font-weight: 400;
}
.xwui-tab-image {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    margin-inline-end: 4px;
}

/* Smart scroll arrows - hide nav buttons when at the edge (set via JS).
   WHY: the hidden attribute alone is often defeated by the flex display
   rule on .xwui-tabs-nav, so we enforce display:none explicitly. */
.xwui-tabs-nav[hidden] { display: none !important; }

/* Fade-gradient overlay - signals overflowed content in each direction.
   WHY: applied via JS class toggle on the strip so the gradient tracks
   scroll position rather than being always-on. */
.xwui-tabs-strip { position: relative; }
.xwui-tabs-strip::before,
.xwui-tabs-strip::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transition: opacity 140ms ease;
}
/* Deliberately physical. XWUINavTabs.ts derives atStart/atEnd from
   list.scrollLeft (a genuinely physical, browser- and direction-dependent
   measurement whose RTL semantics vary by engine) and maps them straight
   onto these --faded-left/--faded-right classes. Getting this right needs
   verifying real RTL scrollLeft behavior in a browser, not a mechanical
   property rename - out of scope for this groundwork pass. */
.xwui-tabs-strip::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-app, var(--bg-base, #fff)), transparent);
}
.xwui-tabs-strip::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-app, var(--bg-base, #fff)), transparent);
}
.xwui-tabs-strip.xwui-tabs-strip--faded-left::before  { opacity: 1; }
.xwui-tabs-strip.xwui-tabs-strip--faded-right::after  { opacity: 1; }