/* Tab Control Component
 * Styles for the reusable tab-control template partial.
 * Uses theme CSS variables for light/dark mode support.
 */

/* Tab bar container */
.tab-control.tabs {
    border-bottom-color: var(--border-color);
}

.tab-control.tabs ul {
    border-bottom-color: var(--border-color);
}

/* Tab items — only style the tab control, not the help overlay.
 * Selectors target [role="tab"] (no element prefix) so they apply equally to
 * <a role="tab"> (URL-routed branch) and <button role="tab"> (client-side
 * branch). The help overlay link uses .tab-icon-help and is excluded by
 * not having role="tab".
 */
.tab-control.tabs li [role="tab"] {
    color: var(--text-muted);
    border-color: var(--border-color);
    border-bottom-color: transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.tab-control.tabs li [role="tab"]:hover {
    color: var(--text-color);
    border-bottom-color: var(--border-color);
}

.tab-control.tabs li [role="tab"]:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    border-radius: 4px 4px 0 0;
}

/* Active tab */
.tab-control.tabs li.is-active [role="tab"] {
    color: var(--primary-color);
    border-color: var(--border-color);
    border-bottom-color: var(--bg-color, #fff);
    background-color: var(--bg-color, #fff);
    font-weight: 600;
}

/* Icon spacing inside tab controls — reduce gap between icon and text */
.tab-control.tabs li [role="tab"] .icon {
    margin-right: 0.25em;
}

.tab-control.tabs li [role="tab"] .icon:last-child {
    margin-right: 0;
}

/* Reset native <button> styling so the client-side <button role="tab">
 * renders identically to the URL-routed <a role="tab">. Bulma's .tabs styles
 * only target the <a> element (e.g. ".tabs a", ".tabs.is-boxed a",
 * ".tabs li.is-active a"); none of those reach <button>. We mirror those
 * Bulma rules here so a <button> tab is pixel-identical to an <a> tab in
 * both inactive and active states.
 *
 * Layered values: the colour / border-color overrides above
 * (.tab-control.tabs li [role="tab"]) still apply because they are
 * element-agnostic; this block only adds the structural properties Bulma
 * applies to <a>.
 */
.tab-control.tabs button[role="tab"] {
    /* Mirror .tabs a — flex layout, padding, border-bottom, color */
    align-items: center;
    background: none;
    border-bottom: var(--bulma-tabs-border-bottom-width) var(--bulma-tabs-border-bottom-style) var(--bulma-tabs-border-bottom-color);
    color: var(--bulma-tabs-link-color);
    cursor: pointer;
    display: flex;
    font: inherit;
    justify-content: center;
    margin-bottom: calc(var(--bulma-tabs-border-bottom-width) * -1);
    padding: var(--bulma-tabs-link-padding);
    transition-duration: var(--bulma-duration);
    transition-property: background-color, border-color, color;
    vertical-align: top;
}

/* Mirror .tabs.is-boxed a — top corners rounded, transparent border on the
 * inactive boxed tab. .is-boxed is the variant our tab-control uses. */
.tab-control.tabs.is-boxed button[role="tab"] {
    border: 1px solid transparent;
    border-start-end-radius: var(--bulma-tabs-boxed-link-radius);
    border-start-start-radius: var(--bulma-tabs-boxed-link-radius);
}

/* Mirror .tabs.is-boxed a:hover — lit background + bottom border on hover */
.tab-control.tabs.is-boxed button[role="tab"]:hover {
    background-color: var(--bulma-tabs-boxed-link-hover-background-color);
    border-bottom-color: var(--bulma-tabs-boxed-link-hover-border-bottom-color);
}

/* Mirror .tabs.is-boxed li.is-active a — active boxed tab background + border */
.tab-control.tabs.is-boxed li.is-active button[role="tab"] {
    background-color: var(--bulma-tabs-boxed-link-active-background-color);
    border-color: var(--bulma-tabs-boxed-link-active-border-color);
    border-bottom-color: var(--bulma-tabs-boxed-link-active-border-bottom-color) !important;
}

/* Tab icon as help link: overlay positioned over the tab's own icon */
.tab-control.tabs li {
    position: relative;
}

.tab-icon-help {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    /* Match the <a role="tab"> layout so the overlay icon sits exactly on top
       of the plain tab icon.  Bulma .tabs.is-boxed li a uses padding: 0.5em 1em
       plus a 1px border, so the icon starts at calc(1em + 1px) from the <li> edge.
       Use !important to override Bulma's .tabs a padding. */
    padding: 0 0 0 calc(1em + 1px) !important;
    color: transparent !important;
    text-decoration: none !important;
    border: none !important;
    border-color: transparent !important;
    background: transparent !important;
    outline: none;
    z-index: 2;
    cursor: pointer;
    pointer-events: none;
}

/* Reset icon margins inside help overlay to match the plain tab icon position.
   Bulma applies margins to .tabs a .icon that differ from the role="tab" link;
   zero them out so the overlay icon sits exactly on top of the original. */
.tab-icon-help .icon {
    margin: 0 !important;
    color: inherit !important;
}

.tab-icon-help .icon i {
    color: inherit !important;
}

/* Enable help link on tab hover but keep it visually hidden until
   the cursor is directly over the icon area (Option A: direct hover only). */
.tab-control.tabs li:hover .tab-icon-help {
    pointer-events: auto;
}

.tab-icon-help:hover {
    color: var(--primary-color) !important;
}

.tab-icon-help:focus-visible {
    color: var(--primary-color) !important;
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    border-radius: 4px;
}

/* Keyboard navigation: show focus outline on tab links */
.tab-control.tabs li a:focus {
    outline: none;
}