/* ═══════════════════════════════════════════════════════════
   Dropdown menu — a trigger that opens a floating panel of items
   For account/company switchers, overflow (⋯) menus, context menus.
   Light by default (headers, toolbars); add .tn-menu--on-dark for the
   dark sidebar company switcher. Show the panel by adding .is-open to
   the .tn-menu wrapper (framework-agnostic).
   ═══════════════════════════════════════════════════════════ */

.tn-menu {
    position: relative;
    display: inline-block;
}

.tn-menu--block {
    display: block;
}

/* ── Trigger ── */
.tn-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    width: 100%;
    padding: 8px 12px;
    background: var(--tn-bg-card);
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius);
    color: var(--tn-text-primary);
    font-size: var(--tn-font-size-sm);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background var(--tn-transition), border-color var(--tn-transition);
}

.tn-menu-trigger:hover {
    background: var(--tn-bg-hover);
    border-color: var(--tn-text-muted);
}

.tn-menu-trigger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--tn-accent);
}

/* Label fills the trigger; chevron sits at the end and flips when open */
.tn-menu-trigger-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tn-menu-chevron {
    flex-shrink: 0;
    font-size: 0.7em;
    opacity: 0.6;
    transition: transform var(--tn-transition);
}

.tn-menu.is-open .tn-menu-chevron {
    transform: rotate(180deg);
}

/* ── Panel ── */
.tn-menu-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    max-width: calc(100vw - 20px);
    max-height: 320px;
    overflow-y: auto;
    background: var(--tn-bg-card);
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius);
    box-shadow: var(--tn-shadow-lg);
    z-index: var(--tn-z-dropdown);
    padding: 4px;
}

.tn-menu.is-open .tn-menu-panel {
    display: block;
}

/* Align the panel to the right edge of the trigger instead of the left */
.tn-menu-panel--end {
    left: auto;
    right: 0;
}

/* Width variants — for panels holding real content (an identity block, a
   message preview) rather than short single-word labels. .tn-menu itself
   is inline-block sized to its trigger (often a 44px icon button), so
   without an explicit width the panel shrink-to-fits its widest row's
   max-content instead of taking a fixed size — and .tn-list-item-title/
   -sub's white-space:nowrap+ellipsis has nothing to truncate against
   when nothing constrains the container, so long text grows the panel
   instead of clipping inside it. Pick the variant that matches what the
   panel holds:
     --sm (260px)  identity block — name + email, a couple of short lines
     --md (280px)  selector — one or two label lines (company, warehouse)
     --lg (320px)  message preview — a row with real body text (notifications)
   The base panel's max-width: calc(100vw - 20px) applies regardless of
   variant — every size still yields to a narrow viewport rather than
   hanging off the screen edge on mobile. */
.tn-menu-panel--sm { width: 260px; }
.tn-menu-panel--md { width: 280px; }
.tn-menu-panel--lg { width: 320px; }

/* ── Items ── */
.tn-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6em;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: var(--tn-radius-sm);
    background: transparent;
    color: var(--tn-text-primary);
    font-size: var(--tn-font-size-sm);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--tn-transition);
}

.tn-menu-item > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tn-menu-item:hover {
    background: var(--tn-bg-hover);
}

.tn-menu-item:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--tn-accent);
}

.tn-menu-item.is-selected {
    color: var(--tn-accent);
    font-weight: 600;
}

/* Trailing check on the selected item */
.tn-menu-item .tn-menu-check {
    margin-left: auto;
    color: var(--tn-accent);
    flex-shrink: 0;
}

.tn-menu-item:disabled,
.tn-menu-item.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tn-menu-item--danger {
    /* --tn-danger-text — real menu-item label text, passing at 5.47:1
       today only on margin, not by rule. Same fix as #58. */
    color: var(--tn-danger-text);
}

.tn-menu-item--danger:hover {
    background: var(--tn-danger-light);
}

/* Section label + divider inside a panel */
.tn-menu-label {
    padding: 6px 10px 2px;
    font-size: var(--tn-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tn-text-muted);
}

.tn-menu-divider {
    height: 1px;
    margin: 4px 0;
    background: var(--tn-border-light);
}

/* ═══════════════════════════════════════════════════════════
   On-dark variant — the company switcher in the dark sidebar
   (matches TNonline / LogEasy: translucent white trigger, dark panel)
   ═══════════════════════════════════════════════════════════ */
.tn-menu--on-dark .tn-menu-trigger {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--tn-text-on-dark-bright);
}

.tn-menu--on-dark .tn-menu-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.12);
}

.tn-menu--on-dark .tn-menu-panel {
    background: var(--tn-primary);
    border-color: rgba(255, 255, 255, 0.1);
}

.tn-menu--on-dark .tn-menu-item {
    color: var(--tn-text-on-dark);
}

.tn-menu--on-dark .tn-menu-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.tn-menu--on-dark .tn-menu-item.is-selected {
    color: var(--tn-text-on-dark-bright);
    background: var(--tn-sidebar-active);
}

.tn-menu--on-dark .tn-menu-check {
    color: var(--tn-accent);
}