/* NexusOS — Segment 6: notebooks (tabs) and stack switchers.
   Active tab gets a lime underline (or side-line for vertical tab strips).
   Stack switchers behave like a pill-shaped segmented control. */

/* ── Notebook container ──────────────────────────────────── */

notebook {
    background-color: transparent;
    color: @text_primary;
    padding: 0;
}

notebook > stack {
    background-color: @base_bg;
    color: @text_primary;
}

/* ── Tab strip header ────────────────────────────────────── */

notebook > header {
    background-color: @surface_bg;
    border-color: @border;
    padding: 0;
}

notebook > header.top {
    border-bottom: 1px solid @border;
}

notebook > header.bottom {
    border-top: 1px solid @border;
}

notebook > header.left {
    border-right: 1px solid @border;
}

notebook > header.right {
    border-left: 1px solid @border;
}

/* Tab strip background gap (the part not covered by tabs) */
notebook > header > tabs {
    margin: 0;
    padding: 0;
}

/* ── Individual tabs ─────────────────────────────────────── */

notebook > header > tabs > tab {
    background-color: transparent;
    background-image: none;
    color: @text_secondary;
    padding: 4px 12px;
    min-height: 20px;
    border: none;
    border-radius: 0;
    transition: background-color 120ms ease,
                color            120ms ease,
                box-shadow       120ms ease;
}

notebook > header > tabs > tab:hover {
    background-color: @hover_bg;
    color: @text_primary;
}

notebook > header > tabs > tab:checked {
    background-color: @base_bg;
    color: @text_primary;
    font-weight: 500;
}

notebook > header > tabs > tab:disabled {
    color: @text_disabled;
}

/* Position-specific active-tab accent line */
notebook > header.top > tabs > tab:checked {
    box-shadow: inset 0 -2px 0 0 @brand_green;
}

notebook > header.bottom > tabs > tab:checked {
    box-shadow: inset 0 2px 0 0 @brand_green;
}

notebook > header.left > tabs > tab:checked {
    box-shadow: inset -2px 0 0 0 @brand_green;
}

notebook > header.right > tabs > tab:checked {
    box-shadow: inset 2px 0 0 0 @brand_green;
}

/* Focused tab ring */
notebook > header > tabs > tab:focus,
notebook > header > tabs > tab:focus-visible {
    outline: 2px solid @focus_ring;
    outline-offset: -3px;
}

/* Close button on a tab */
notebook > header > tabs > tab button.flat,
notebook > header > tabs > tab > button {
    padding: 2px;
    margin: 0 0 0 6px;
    min-width: 18px;
    min-height: 18px;
    border-radius: 999px;
    background-color: transparent;
    border-color: transparent;
    color: @text_secondary;
}

notebook > header > tabs > tab button.flat:hover,
notebook > header > tabs > tab > button:hover {
    background-color: @error_color;
    color: #ffffff;
}

notebook > header > tabs > tab:checked button.flat,
notebook > header > tabs > tab:checked > button {
    color: @text_primary;
}

/* Scrolling arrows when the tab strip overflows */
notebook > header > arrow {
    color: @text_secondary;
    min-width: 18px;
    min-height: 18px;
    padding: 0 4px;
}

notebook > header > arrow:hover {
    color: @brand_green;
    background-color: @hover_bg;
}

notebook > header > arrow:disabled {
    color: @text_disabled;
}

/* "Reorderable" drag indicator */
notebook > header > tabs > tab.reorderable-page:drop(active) {
    box-shadow: inset 0 -2px 0 0 @brand_green;
    background-color: @hover_bg;
}

/* ── Stack switcher (pill-style segmented control) ───────── */

stackswitcher {
    padding: 2px;
    background-color: transparent;
    border-radius: 999px;
}

stackswitcher > button {
    padding: 6px 14px;
    min-height: 24px;
    min-width: 64px;
    border: 1px solid @border_strong;
    border-radius: 0;
    border-right-width: 0;
    background-color: @surface_bg;
    background-image: none;
    color: @text_primary;
    font-weight: 500;
    box-shadow: none;
}

stackswitcher > button:first-child {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

stackswitcher > button:last-child {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    border-right-width: 1px;
}

stackswitcher > button:hover {
    background-color: @hover_bg;
    border-color: @brand_green_dark;
    color: @text_primary;
}

stackswitcher > button:checked {
    background-color: @active_bg;
    border-color: @brand_green_dark;
    color: @active_fg;
}

stackswitcher > button:checked:hover {
    background-color: @brand_green_light;
    color: @text_on_accent;
}

stackswitcher > button:disabled {
    background-color: @surface_bg;
    border-color: @border;
    color: @text_disabled;
}

stackswitcher > button:focus {
    outline: 2px solid @focus_ring;
    outline-offset: -2px;
}

/* Notification dot when a hidden stack page needs attention */
stackswitcher > button.needs-attention > label {
    animation: none;
    background-image: radial-gradient(circle at center,
                                      @brand_green 30%,
                                      transparent 32%);
    background-size: 6px 6px;
    background-repeat: no-repeat;
    background-position: right top;
    padding-right: 12px;
}

/* ── Vertical stack switcher (e.g. preferences) ──────────── */

stackswitcher.vertical {
    background-color: transparent;
    padding: 0;
}

stackswitcher.vertical > button {
    border-radius: 6px;
    border: 1px solid transparent;
    border-right-width: 1px;
    background-color: transparent;
    margin: 2px 4px;
    padding: 8px 12px;
    min-width: 120px;
}

stackswitcher.vertical > button:hover {
    background-color: @hover_bg;
    border-color: transparent;
}

stackswitcher.vertical > button:checked {
    background-color: @selected_bg;
    border-color: transparent;
    color: @selected_fg;
}

stackswitcher.vertical > button:checked:hover {
    background-color: shade(@selected_bg, 1.12);
    color: @selected_fg;
}
