/* ─────────────────────────────────────────────────────────────────────────────
   TritiumTabs — the app's own tab strip (clean-slate, no MudTabs).

   Every color falls back twice: the window system's --tt-* palette when the strip lives inside a
   TritiumWindow, otherwise the MudBlazor palette so the same component looks native on a plain page.

   Layout is one flex box. The strip is always FIRST in the DOM (correct reading/tab order); the
   Bottom/Right positions only reverse the visual flex direction.
   ───────────────────────────────────────────────────────────────────────────── */

.tt-tabs {
    --ttab-fg:      var(--tt-fg,      var(--mud-palette-text-primary));
    --ttab-dim:     var(--tt-fg-dim,  var(--mud-palette-text-secondary));
    --ttab-border:  var(--tt-border,  var(--mud-palette-lines-default));
    --ttab-surface: var(--tt-surface, var(--mud-palette-surface));
    --ttab-elev:    var(--tt-elev,    var(--mud-palette-background-gray));
    --ttab-accent:  var(--mud-palette-primary);

    --ttab-pad-y: 10px;
    --ttab-pad-x: 14px;
    --ttab-font: .84rem;

    display: flex;
    min-height: 0;   /* let the panel region scroll instead of pushing the window taller */
    color: var(--ttab-fg);
}

/* ── Size ── */
.tt-tabs--sm { --ttab-pad-y: 6px;  --ttab-pad-x: 10px; --ttab-font: .78rem; }
.tt-tabs--lg { --ttab-pad-y: 14px; --ttab-pad-x: 18px; --ttab-font: .92rem; }

/* ── Edge ── */
.tt-tabs--top    { flex-direction: column; }
.tt-tabs--bottom { flex-direction: column-reverse; }
.tt-tabs--left   { flex-direction: row; }
.tt-tabs--right  { flex-direction: row-reverse; }

/* ── The strip ── */
.tt-tabs__bar {
    display: flex; flex: 0 0 auto; gap: 2px;
    outline: none;                     /* focus shows on the active tab, not the strip */
    scrollbar-width: thin;
}
.tt-tabs--top > .tt-tabs__bar,
.tt-tabs--bottom > .tt-tabs__bar {
    flex-direction: row; align-items: stretch;
    width: 100%;                       /* own the full width so Stretch has room to divide */
    overflow-x: auto; overflow-y: hidden;
    padding: 0 2px;
}
.tt-tabs--left > .tt-tabs__bar,
.tt-tabs--right > .tt-tabs__bar {
    flex-direction: column; align-items: stretch;
    overflow-y: auto; overflow-x: hidden;
    padding: 6px;
    min-width: 168px; max-width: 260px;
}
.tt-tabs--top    > .tt-tabs__bar { border-bottom: 1px solid var(--ttab-border); }
.tt-tabs--bottom > .tt-tabs__bar { border-top:    1px solid var(--ttab-border); }
.tt-tabs--left   > .tt-tabs__bar { border-right:  1px solid var(--ttab-border); }
.tt-tabs--right  > .tt-tabs__bar { border-left:   1px solid var(--ttab-border); }

/* Icon-only rails collapse to a narrow strip. */
.tt-tabs--left > .tt-tabs__bar:not(:has(.tt-tabs__label)),
.tt-tabs--right > .tt-tabs__bar:not(:has(.tt-tabs__label)) { min-width: 0; max-width: none; }

.tt-tabs__bar-lead { padding: 8px 10px; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; opacity: .55; }
.tt-tabs__bar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; padding: 0 4px; }
.tt-tabs--left > .tt-tabs__bar > .tt-tabs__bar-actions,
.tt-tabs--right > .tt-tabs__bar > .tt-tabs__bar-actions { margin-inline-start: 0; margin-top: auto; }

/* ── A tab button (shared) ── */
.tt-tabs__tab {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    flex: 0 0 auto;
    padding: var(--ttab-pad-y) var(--ttab-pad-x);
    border: 0; background: transparent; color: var(--ttab-dim);
    font: inherit; font-size: var(--ttab-font); font-weight: 500; text-align: start;
    white-space: nowrap; cursor: pointer;
    border-radius: 8px;
    transition: color .12s ease, background-color .12s ease;
}
/* A tab with a tooltip is wrapped by MudTooltip — keep the wrapper transparent to the strip's layout,
   otherwise it, not the button, becomes the flex item and Stretch has no effect. */
.tt-tabs__bar > .mud-tooltip-root { display: flex; flex: 0 0 auto; }
.tt-tabs__bar > .mud-tooltip-root > .tt-tabs__tab { width: 100%; }

.tt-tabs--stretch .tt-tabs__tab { flex: 1 1 0; min-width: 0; }
.tt-tabs--stretch > .tt-tabs__bar > .mud-tooltip-root { flex: 1 1 0; min-width: 0; }
/* Stretch fills the strip, so nothing should be left over to scroll. */
.tt-tabs--stretch.tt-tabs--top > .tt-tabs__bar,
.tt-tabs--stretch.tt-tabs--bottom > .tt-tabs__bar { overflow-x: visible; }

.tt-tabs__tab:hover:not(.tt-tabs__tab--disabled) {
    color: var(--ttab-fg);
    background: color-mix(in srgb, var(--ttab-fg) 8%, transparent);
}
.tt-tabs__tab:focus-visible { outline: 2px solid var(--ttab-accent); outline-offset: -2px; }
.tt-tabs__tab--active { color: var(--ttab-accent); font-weight: 600; }
.tt-tabs__tab--active:hover { color: var(--ttab-accent); }
.tt-tabs__tab--disabled { opacity: .4; cursor: not-allowed; }

.tt-tabs__label { overflow: hidden; text-overflow: ellipsis; }

/* ── Alignment of the icon + label inside a tab (visible whenever a tab is wider than its content) ── */
.tt-tabs--align-left   .tt-tabs__tab { justify-content: flex-start; text-align: start; }
.tt-tabs--align-center .tt-tabs__tab { justify-content: center;     text-align: center; }
.tt-tabs--align-right  .tt-tabs__tab { justify-content: flex-end;   text-align: end; }
/* Tiles stack icon over label, so alignment moves the column on the cross axis instead. */
.tt-tabs--tile.tt-tabs--align-left   .tt-tabs__tab { align-items: flex-start; }
.tt-tabs--tile.tt-tabs--align-center .tt-tabs__tab { align-items: center; }
.tt-tabs--tile.tt-tabs--align-right  .tt-tabs__tab { align-items: flex-end; }
/* A right-aligned tab pushes its badge to the leading edge so it doesn't collide with the label. */
.tt-tabs--align-right .tt-tabs__badge { margin-inline-start: 0; margin-inline-end: auto; order: -1; }
.tt-tabs__icon { position: relative; display: inline-flex; flex: 0 0 auto; }
.tt-tabs__tab .mud-icon-root { color: inherit !important; fill: currentColor !important; }

/* ── Variant: Line (default) — flat labels with an accent edge on the docked side ── */
.tt-tabs--line .tt-tabs__ink {
    position: absolute; background: var(--ttab-accent);
    border-radius: 2px; opacity: 0;
    transition: opacity .14s ease, transform .14s ease;
}
.tt-tabs--line.tt-tabs--top    .tt-tabs__ink { left: 10px; right: 10px; bottom: -1px; height: 2px; transform: scaleX(.4); }
.tt-tabs--line.tt-tabs--bottom .tt-tabs__ink { left: 10px; right: 10px; top: -1px;    height: 2px; transform: scaleX(.4); }
.tt-tabs--line.tt-tabs--left   .tt-tabs__ink { top: 8px; bottom: 8px; right: -7px;    width: 3px;  transform: scaleY(.4); }
.tt-tabs--line.tt-tabs--right  .tt-tabs__ink { top: 8px; bottom: 8px; left: -7px;     width: 3px;  transform: scaleY(.4); }
.tt-tabs--line .tt-tabs__tab--active .tt-tabs__ink { opacity: 1; transform: none; }
.tt-tabs--line.tt-tabs--top .tt-tabs__tab,
.tt-tabs--line.tt-tabs--bottom .tt-tabs__tab { border-radius: 8px 8px 0 0; }
.tt-tabs--line.tt-tabs--left .tt-tabs__tab--active,
.tt-tabs--line.tt-tabs--right .tt-tabs__tab--active { background: color-mix(in srgb, var(--ttab-accent) 12%, transparent); }

/* ── Variant: Pill — the active tab is a filled chip ── */
.tt-tabs--pill > .tt-tabs__bar { border: 0; gap: 4px; padding: 6px; }
.tt-tabs--pill .tt-tabs__tab { border-radius: 999px; }
.tt-tabs--pill .tt-tabs__tab--active {
    background: var(--ttab-accent); color: #fff;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--ttab-accent) 40%, transparent);
}
.tt-tabs--pill .tt-tabs__tab--active:hover { background: var(--ttab-accent); color: #fff; }
.tt-tabs--pill .tt-tabs__tab--active .tt-tabs__badge { background: rgba(255,255,255,.28); color: #fff; }

/* ── Variant: Segment — one joined control sitting in a tray ── */
.tt-tabs--segment > .tt-tabs__bar { border: 0; gap: 0; padding: 8px; }
.tt-tabs--segment .tt-tabs__tab {
    border-radius: 0; border: 1px solid var(--ttab-border);
    background: var(--ttab-surface);
}
/* Horizontal: the run is rounded on its outer ends only, and the shared edges collapse into one hairline. */
.tt-tabs--segment.tt-tabs--top .tt-tabs__tab,
.tt-tabs--segment.tt-tabs--bottom .tt-tabs__tab { margin-inline-start: -1px; }
.tt-tabs--segment.tt-tabs--top .tt-tabs__tab--first,
.tt-tabs--segment.tt-tabs--bottom .tt-tabs__tab--first {
    margin-inline-start: 0;
    border-start-start-radius: 8px; border-end-start-radius: 8px;   /* left corners only */
}
.tt-tabs--segment.tt-tabs--top .tt-tabs__tab--last,
.tt-tabs--segment.tt-tabs--bottom .tt-tabs__tab--last {
    border-start-end-radius: 8px; border-end-end-radius: 8px;       /* right corners only */
}
/* Vertical: same idea rotated — the run rounds at its top and bottom. */
.tt-tabs--segment.tt-tabs--left .tt-tabs__tab,
.tt-tabs--segment.tt-tabs--right .tt-tabs__tab { margin-top: -1px; }
.tt-tabs--segment.tt-tabs--left .tt-tabs__tab--first,
.tt-tabs--segment.tt-tabs--right .tt-tabs__tab--first { margin-top: 0; border-radius: 8px 8px 0 0; }
.tt-tabs--segment.tt-tabs--left .tt-tabs__tab--last,
.tt-tabs--segment.tt-tabs--right .tt-tabs__tab--last { border-radius: 0 0 8px 8px; }
.tt-tabs--segment .tt-tabs__tab--active {
    background: var(--ttab-accent); color: #fff; border-color: var(--ttab-accent); z-index: 1;
}
.tt-tabs--segment .tt-tabs__tab--active:hover { background: var(--ttab-accent); color: #fff; }

/* ── Variant: Tile — icon over label, reads like a launcher rail ── */
.tt-tabs--tile > .tt-tabs__bar { gap: 6px; padding: 8px; }
.tt-tabs--tile .tt-tabs__tab {
    flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    min-width: 92px; min-height: 78px; padding: 12px 10px;
    border: 1px solid var(--ttab-border); border-radius: 12px;
    background: var(--ttab-surface); text-align: center; white-space: normal;
}
.tt-tabs--tile .tt-tabs__label { font-size: calc(var(--ttab-font) - .04rem); line-height: 1.2; white-space: normal; }
.tt-tabs--tile .tt-tabs__tab:hover:not(.tt-tabs__tab--disabled) {
    border-color: color-mix(in srgb, var(--ttab-accent) 45%, var(--ttab-border));
    transform: translateY(-1px);
}
.tt-tabs--tile .tt-tabs__tab--active {
    border-color: var(--ttab-accent); color: var(--ttab-accent);
    background: color-mix(in srgb, var(--ttab-accent) 12%, var(--ttab-surface));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ttab-accent) 22%, transparent);
}
.tt-tabs--tile .tt-tabs__badge { position: absolute; top: 6px; inset-inline-end: 6px; }
.tt-tabs--tile.tt-tabs--left > .tt-tabs__bar,
.tt-tabs--tile.tt-tabs--right > .tt-tabs__bar { min-width: 108px; max-width: 150px; }

/* ── Count badge ── */
.tt-tabs__badge {
    flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; font-size: .68rem; font-weight: 700; line-height: 1;
    background: color-mix(in srgb, var(--ttab-fg) 14%, transparent); color: var(--ttab-fg);
}
.tt-tabs--left .tt-tabs__badge, .tt-tabs--right .tt-tabs__badge { margin-inline-start: auto; }
.tt-tabs--tile .tt-tabs__badge, .tt-tabs--stretch .tt-tabs__badge { margin-inline-start: 0; }
.tt-tabs--line .tt-tabs__tab--active .tt-tabs__badge { background: var(--ttab-accent); color: #fff; }
.tt-tabs__badge--primary   { background: var(--mud-palette-primary);   color: #fff; }
.tt-tabs__badge--secondary { background: var(--mud-palette-secondary); color: #fff; }
.tt-tabs__badge--info      { background: var(--mud-palette-info);      color: #fff; }
.tt-tabs__badge--success   { background: var(--mud-palette-success);   color: #fff; }
.tt-tabs__badge--warning   { background: var(--mud-palette-warning);   color: #000; }
.tt-tabs__badge--error     { background: var(--mud-palette-error);     color: #fff; }

/* ── Status dot: "the problem is on a tab you can't see" ── */
.tt-tabs__dot {
    position: absolute; top: -2px; inset-inline-end: -3px;
    width: 8px; height: 8px; border-radius: 50%;
    box-shadow: 0 0 0 2px var(--ttab-surface);
}
.tt-tabs__tab > .tt-tabs__dot { position: static; box-shadow: none; flex: 0 0 auto; }
.tt-tabs__dot--error   { background: var(--mud-palette-error); }
.tt-tabs__dot--warning { background: var(--mud-palette-warning); }
.tt-tabs__dot--success { background: var(--mud-palette-success); }
.tt-tabs__dot--info    { background: var(--mud-palette-info); }

/* ── Panel region ── */
.tt-tabs__panels {
    flex: 1 1 auto; min-width: 0; min-height: 0;
    overflow: auto; overscroll-behavior: contain;
}
.tt-tabs__panel { padding: 16px; }
.tt-tabs__panel[hidden] { display: none; }

.tt-tabs--bordered > .tt-tabs__panels { border: 1px solid var(--ttab-border); }
.tt-tabs--bordered.tt-tabs--top    > .tt-tabs__panels { border-top: 0;    border-radius: 0 0 10px 10px; }
.tt-tabs--bordered.tt-tabs--bottom > .tt-tabs__panels { border-bottom: 0; border-radius: 10px 10px 0 0; }
.tt-tabs--bordered.tt-tabs--left   > .tt-tabs__panels { border-left: 0;   border-radius: 0 10px 10px 0; }
.tt-tabs--bordered.tt-tabs--right  > .tt-tabs__panels { border-right: 0;  border-radius: 10px 0 0 10px; }
/* Pill/Tile strips float free — no seam to join, so no border on that side either. */
.tt-tabs--pill.tt-tabs--bordered > .tt-tabs__panels,
.tt-tabs--tile.tt-tabs--bordered > .tt-tabs__panels { border: 1px solid var(--ttab-border); border-radius: 10px; }

/* ── Symbiosis: a TritiumTabs that IS the body of a window ──
   The strip anchors flush to the window chrome and owns the scroll. The window body becomes a plain,
   non-scrolling frame (padding + its own scrollbar removed); the tab strip fills it via flex; and ONLY the
   active panel scrolls. Result: a tabbed window shows ONE scrollbar, never two — the strip stays pinned
   while its content scrolls beneath it. Direct-child (`> .tt-tabs`) on purpose: it targets the window's
   TOP-LEVEL strip, so a tab-strip nested deeper inside a panel never reframes the whole body.
   `min-height:0 !important` neutralizes any page-oriented `min-height:Nvh` a strip sets for standalone-page
   use (needed on a page, wrong inside a window) without having to edit each panel. */
.tt-win__body:has(> .tt-tabs) { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
/* height:auto neutralizes any page-oriented fixed height a strip sets for standalone use (PreferencesContent
   uses height:75vh so its panel self-scrolls on the page); in a window the strip fills via flex instead. */
.tt-win__body > .tt-tabs { flex: 1 1 auto; min-height: 0 !important; height: auto !important; }

/* ── Touch + small screens: a side rail folds up into a row ── */
@media (pointer: coarse) {
    .tt-tabs { --ttab-pad-y: 12px; --ttab-pad-x: 16px; }
}
@media (max-width: 700px) {
    .tt-tabs--left, .tt-tabs--right { flex-direction: column; }
    .tt-tabs--left > .tt-tabs__bar, .tt-tabs--right > .tt-tabs__bar {
        flex-direction: row; min-width: 0; max-width: none;
        overflow-x: auto; overflow-y: hidden;
        border-right: 0; border-left: 0; border-bottom: 1px solid var(--ttab-border); padding: 0 2px;
    }
    .tt-tabs--line.tt-tabs--left .tt-tabs__ink,
    .tt-tabs--line.tt-tabs--right .tt-tabs__ink {
        top: auto; bottom: -1px; left: 10px; right: 10px; width: auto; height: 2px;
    }
    .tt-tabs--left .tt-tabs__badge, .tt-tabs--right .tt-tabs__badge { margin-inline-start: 0; }
    .tt-tabs--bordered.tt-tabs--left > .tt-tabs__panels,
    .tt-tabs--bordered.tt-tabs--right > .tt-tabs__panels { border: 1px solid var(--ttab-border); border-top: 0; border-radius: 0 0 10px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .tt-tabs__tab, .tt-tabs--line .tt-tabs__ink { transition: none; }
    .tt-tabs--tile .tt-tabs__tab:hover { transform: none; }
}