/* ============================================================
   Navigation — sidebar switchers, menus, tabs
   docs/08-design-system-v2.md §3.4 (application frame), §2 (type scale), §6 (focus)
   ------------------------------------------------------------
   THE SIDEBAR IS LIGHT (§3.4). This file used to open with the opposite rule:
   everything under `.tm-sidebar` was drawn on #0b1120, --tm-primary only reached
   2.84:1 against it and was banned, and a parallel palette of white-alpha
   overlays derived from --tm-sidebar-item with color-mix existed purely to be
   legible on that slab. The rail is --tm-sidebar-bg (#FFFFFF) now, so the
   overlays are gone and the ordinary ramp applies — a colour that works on a
   card works here, because the rail *is* a card.

   Measured on --tm-sidebar-bg (#FFFFFF):
     --tm-text              18.32:1  ✔ — the selected site name
     --tm-text-secondary     6.18:1  ✔ AA — placeholder, chevron, clear icon
     --tm-primary            5.91:1  ✔ — focus border
   --tm-text-muted is deliberately absent: 2.55:1 fails both the AA text floor
   and the 1.4.11 3:1 floor for a graphic that carries meaning on its own, and
   the chevron of a closed dropdown is exactly such a graphic.

   None of this needs !important. Our selectors carry 5 classes
   (`.tm-sidebar .tm-site-switcher .ui.selection.dropdown`) against Fomantic's 3
   (`.ui.selection.dropdown`), and this stylesheet loads after Fomantic.
   ============================================================ */

/* Fomantic rounds every `.ui.menu`. Attached menus are excluded: Fomantic
   deliberately flattens those (`.ui.attached.menu{border-radius:0}`) so they
   join the segment below, and re-rounding them here would reopen that seam on
   pages this file does not own. */
.ui.menu:not(.attached) {
    border-radius: var(--tm-radius-sm);
}

/* ── Tabs ─────────────────────────────────────────────────────
   Fomantic draws a tabular menu as literal folder tabs: every item is a
   bordered box with rounded top corners — the "ears" — that joins the panel
   below. Flattened here to a single underline row: the active tab is marked
   by colour plus a 2px rule, not by a box.

   `margin: 0` — no bottom gap — is the other half of that flattening, and it is
   what makes the panel below read as a card again (TM-162). Fomantic's two
   halves only work together: the ears carry the panel's top edge and its top
   corners, so `.ui.tabular.menu~.attached:not(.top).segment` sets `border-top:
   none` on it. Flattening the strip without closing the gap left the panel with
   no lid — a horizontal rule, 16px of nothing, then a white slab starting at a
   square, unbordered top edge. Closed up, the strip's own `border-bottom` sits
   directly on the panel and *is* its top edge, which is why the panel keeps
   square top corners on purpose: the line above them is not its own.

   The seam only lines up because both boxes span the same width, and that is
   Fomantic's doing rather than luck. `.ui.attached.menu` and
   `.ui.attached.segment` both ship `margin: 0 -1px; width: calc(100% + 2px)`,
   which would offset the strip from the panel by 1px on each side — but
   `.ui.attached.tabular.menu` (0-4-0) and `.ui.tabular.menu~.attached:not(.top).segment`
   put both back to `width: 100%` with zero side margins. Do not reintroduce a
   horizontal margin here without matching it on the panel. */
.ui.tabular.menu {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--tm-border);
    border-radius: 0;
    box-shadow: none;
    min-height: 0;
    margin: 0;
}

.ui.tabular.menu .item {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    /* Pull the underline down onto the menu's own 1px rule so the two read as
       one line instead of stacking. With the gap closed that rule is also the
       panel's top edge, so the active tab's 2px mark lands on the seam — which
       is the intent, not a collision: the mark should read as attaching the tab
       to the panel it opens. */
    margin-bottom: -1px;
    padding: var(--tm-space-3) var(--tm-space-4);
    color: var(--tm-text-secondary);
    /* --tm-text-md, not --tm-text-base: §2 names navigation as a consumer of
       the new default, and the scale was renumbered — base is 13px now and
       would render a tab a step smaller than the page it labels. */
    font-size: var(--tm-text-md);
    line-height: var(--tm-leading-md);
    font-weight: var(--tm-weight-medium);
    transition: color var(--tm-transition), border-color var(--tm-transition);
}

.ui.tabular.menu .item:hover {
    background: transparent;
    color: var(--tm-text);
}

.ui.tabular.menu .active.item {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--tm-primary);
    color: var(--tm-primary);
    /* Weights 700/800 are out of the system (§2); Fomantic asks for 700 here. */
    font-weight: var(--tm-weight-semibold);
    margin-bottom: -1px;
    /* The one declaration in this file that cannot be beaten on specificity:
       Fomantic ships `.ui.tabular.menu .active.item{border-radius:… !important}`,
       which is what draws the rounded "ears". Same 5-class selector as ours, so
       source order cannot win against its !important. */
    border-radius: 0 !important;
}

/* ── Sidebar switchers (site + group) ─────────────────────────
   The same control in two places, so one rule set. The only rule that stays
   split is the icon colour: the group filter is clearable and has an
   `i.delete.icon`, the site switcher has none.

   The mock-up draws these as a plain bordered field on the rail — surface fill,
   --tm-border hairline, --tm-radius-sm — which is what they are now. They used
   to be a translucent white wash over the dark slab, and after §3.4 lightened
   the rail that wash rendered as a barely-visible grey-on-white smudge with the
   selected site nearly unreadable. */
.tm-sidebar .tm-site-switcher,
.tm-sidebar .tm-group-filter {
    width: 100%;
}

/* Fomantic's own padding is deliberately left alone: it uses `.78571429em` top
   padding and positions the `.dropdown.icon` / `.delete.icon` absolutely
   against that same value, so overriding it would move the icons off centre.
   min-height pins the control to --tm-control-height regardless. */
.tm-sidebar .tm-site-switcher .ui.selection.dropdown,
.tm-sidebar .tm-group-filter .ui.selection.dropdown {
    width: 100%;
    min-width: 0;
    min-height: var(--tm-control-height);
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-sm);
    box-shadow: none;
    color: var(--tm-text);
    font-size: var(--tm-text-md);
    font-weight: var(--tm-weight-medium);
    transition: background var(--tm-transition), border-color var(--tm-transition),
        box-shadow var(--tm-transition);
}

.tm-sidebar .tm-site-switcher .ui.selection.dropdown:hover,
.tm-sidebar .tm-group-filter .ui.selection.dropdown:hover {
    border-color: var(--tm-border-strong);
}

/* §6: one focus treatment across the whole application — the accent as the
   border plus a 3px --tm-primary-light ring. Identical to what forms.css draws
   on an input and buttons.css on a button; this control is a select, so it gets
   the select's focus, not a rail-specific one. */
.tm-sidebar .tm-site-switcher .ui.selection.active.dropdown,
.tm-sidebar .tm-site-switcher .ui.selection.dropdown:focus,
.tm-sidebar .tm-site-switcher .ui.selection.dropdown.active,
.tm-sidebar .tm-site-switcher .ui.selection.dropdown.visible,
.tm-sidebar .tm-group-filter .ui.selection.active.dropdown,
.tm-sidebar .tm-group-filter .ui.selection.dropdown:focus,
.tm-sidebar .tm-group-filter .ui.selection.dropdown.active,
.tm-sidebar .tm-group-filter .ui.selection.dropdown.visible {
    background: var(--tm-surface);
    border-color: var(--tm-primary);
    box-shadow: 0 0 0 3px var(--tm-primary-light);
}

/* The selected value is the answer to "which site am I in", so it carries the
   full text colour (18.32:1) rather than a quiet one. */
.tm-sidebar .tm-site-switcher .ui.selection.dropdown .text,
.tm-sidebar .tm-group-filter .ui.selection.dropdown .text {
    color: var(--tm-text);
}

/* Placeholder ("All groups") is real text, so it clears AA rather than merely
   looking quiet: --tm-text-secondary is 6.18:1 on the rail. */
.tm-sidebar .tm-site-switcher .ui.selection.dropdown .default.text,
.tm-sidebar .tm-group-filter .ui.selection.dropdown .default.text {
    color: var(--tm-text-secondary);
}

/* The open panel is an ordinary floating surface now — the rail is white, so
   there is no second dark surface to blend it into. */
.tm-sidebar .tm-site-switcher .ui.selection.dropdown .menu,
.tm-sidebar .tm-group-filter .ui.selection.dropdown .menu {
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-sm);
    box-shadow: var(--tm-shadow-lg);
}

.tm-sidebar .tm-site-switcher .ui.selection.dropdown .menu > .item,
.tm-sidebar .tm-group-filter .ui.selection.dropdown .menu > .item {
    color: var(--tm-text);
    border-top-color: var(--tm-border-light);
    font-size: var(--tm-text-md);
    line-height: var(--tm-leading-md);
    padding: var(--tm-space-2) var(--tm-space-3);
}

.tm-sidebar .tm-site-switcher .ui.selection.dropdown .menu > .item:hover,
.tm-sidebar .tm-group-filter .ui.selection.dropdown .menu > .item:hover {
    background: var(--tm-surface-2);
    color: var(--tm-text);
}

/* Same tint and the same label colour as the active nav row, so "current" means
   one thing in the sidebar. --tm-sidebar-item-active on the tint is 7.17:1. */
.tm-sidebar .tm-site-switcher .ui.selection.dropdown .menu > .item.active,
.tm-sidebar .tm-group-filter .ui.selection.dropdown .menu > .item.active {
    background: var(--tm-sidebar-item-active-bg);
    color: var(--tm-sidebar-item-active);
    font-weight: var(--tm-weight-medium);
}

/* Non-text graphics owe WCAG 1.4.11 3:1. --tm-text-secondary is 6.18:1 on the
   rail; --tm-text-muted, which the mock-up uses here, would be 2.55:1. */
.tm-sidebar .tm-site-switcher .ui.selection.dropdown i.dropdown.icon,
.tm-sidebar .tm-group-filter .ui.selection.dropdown i.dropdown.icon,
.tm-sidebar .tm-group-filter .ui.selection.dropdown i.delete.icon {
    color: var(--tm-text-secondary);
    opacity: 1;
}

.tm-sidebar .tm-site-switcher .ui.selection.dropdown input.search,
.tm-sidebar .tm-group-filter .ui.selection.dropdown input.search {
    /* Fomantic already forces this input transparent with its own !important;
       only the text colour is ours to set. */
    color: var(--tm-text);
}

.tm-sidebar .tm-site-switcher .ui.dropdown.selected,
.tm-sidebar .tm-site-switcher .ui.dropdown .menu .selected.item,
.tm-sidebar .tm-group-filter .ui.dropdown.selected,
.tm-sidebar .tm-group-filter .ui.dropdown .menu .selected.item {
    background: var(--tm-surface-2);
    color: var(--tm-text);
}