/* ──────────────────────────────────────────────────────────────────────────
   OpenDrawing — UserMenu component styles
   Portable: works on any page. Requires tokens.css to load first.

   Modules in this file:
     1. Wrapper + avatar trigger
     2. Dropdown panel + open animation
     3. Header block (avatar + name row + role + plan badge)
     4. Tokens block (clickable row: count + bar + reset/CTA)
     5. Divider
     6. Menu items (Settings, Help & docs, Sign out)
   ────────────────────────────────────────────────────────────────────────── */

@layer components {

/* ════════════════════════════════════════════════════════════════════ 1. WRAPPER */
.um-wrap { position: relative; flex-shrink: 0; }

/* ── Avatar trigger ──────────────────────────────────────────────────────── */
.um-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center;
}

.um-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #3b5bdb, #2f4cc4);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
  flex-shrink: 0; user-select: none;
  transition: box-shadow 0.12s;

  /* Dropdown header avatar: only +2 px over the trigger, instead of +6 px.
     Stops the inner avatar from competing visually with the user's name. */
  &.um-avatar--lg { width: 30px; height: 30px; font-size: 11px; }
}

.um-btn:hover .um-avatar,
.um-btn[aria-expanded="true"] .um-avatar { box-shadow: 0 0 0 2.5px var(--accent); }

/* ════════════════════════════════════════════════════════════════════ 2. DROPDOWN PANEL */
@keyframes um-open {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.um-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  /* Tightened from 248 → 236 px — still fits the tokens block + reset date
     comfortably without the extra horizontal slack that made the menu feel
     wider than it needed to be. */
  min-width: 236px;
  background: var(--bg-panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg), var(--shadow-sm);
  z-index: 600;
  display: none; overflow: hidden;

  &.open {
    display: block;
    animation: um-open .15s ease;
  }
}

/* ════════════════════════════════════════════════════════════════════ 3. HEADER */
/* Tightened from 14/16/13 → 12/14/11. Pairs with the smaller avatar to give
   the name+badge row the visual priority it deserves. */
.um-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 11px;
}

.um-id { min-width: 0; flex: 1; }

/* Name + plan badge sit on one row so the chip rides beside the name without
   demanding its own line. Wraps to a new line on very long names rather than
   eating into the avatar gutter. */
.um-name-row {
  display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap;
  min-width: 0;
}
.um-name { font-size: 12px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.1px; }

/* Access role (Super Admin / Owner / Manager / Member / Viewer). The base
   tone uses the same muted colour as any other secondary label so plain
   roles (Member, Viewer) feel like neutral metadata. Elevated roles get
   the accent tone + slight weight bump so admins receive a passive visual
   confirmation that they're acting in an elevated context — useful before
   destructive actions, useful in multi-tenant contexts. No icon needed:
   the colour + weight delta is enough to scan. */
.um-role { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.um-role--elevated {
  color: var(--accent);
  font-weight: 500;
}

/* ── Plan badge ──────────────────────────────────────────────────────────── */
/* Small uppercase chip. Three tone variants: warn (TRIAL/FREE) signals
   urgency, accent (PRO/BUSINESS/ENTERPRISE) signals paid, neutral handles
   any unknown value so a typo doesn't ship as a broken layout. */
.um-plan {
  font-size: 9px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
  line-height: 1.3;
  white-space: nowrap;
}
.um-plan--warn {
  color: var(--warning);
  background: var(--warning-dim);
  border: 1px solid rgba(245,158,11,.30);
}
.um-plan--accent {
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(59,91,219,.30);
}
.um-plan--neutral {
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border);
}

/* ════════════════════════════════════════════════════════════════════ 4. TOKENS BLOCK */
/* Entire row is a button so the click target is large and keyboard-focusable.
   No accent halo on hover — the chevron + CTA text carry the affordance,
   keeping visual hierarchy: the menu items below are the actions, this is
   an enriched status row that happens to navigate. */
.um-tokens {
  display: block;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--sans);
  transition: background .07s;
}
.um-tokens:hover { background: var(--bg-hover); }
.um-tokens:focus-visible {
  outline: none;
  background: var(--bg-hover);
  box-shadow: inset 0 0 0 2px rgba(59,91,219,.30);
}

.um-tokens-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.um-tokens-lbl {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500;
  color: var(--text-secondary);
}
.um-tokens-lbl svg { color: var(--accent); }
.um-tokens-count {
  font-size: 13px; font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* Bar reads used-of-total. Fill colour shifts via the parent ramp class so the
   colour at a glance answers "is this enough?"
   Polish pass:
     • Height bumped 4 → 5 px so the bar reads as an indicator, not a hairline.
     • Track lightened to a translucent white so it feels like a recessed
       channel rather than a solid block. Reads better against bg-panel.
     • Fill carries a soft accent glow that bleeds slightly past the fill
       edge, softening the right cap without altering the geometry. */
.um-tokens-bar {
  height: 5px;
  background: rgba(255,255,255,.05);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 7px;
}
.um-tokens-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(59,91,219,.35);
  transition: width .25s ease, background .15s, box-shadow .15s;
}

.um-tokens-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  font-size: 10.5px;
  line-height: 1.4;
}
.um-tokens-meta { color: var(--text-muted); }
.um-tokens-cta {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--accent);
  font-weight: 500;
}
.um-tokens-cta svg { transition: transform .12s; }
.um-tokens:hover .um-tokens-cta { color: var(--accent-hover); }
.um-tokens:hover .um-tokens-cta svg { transform: translateX(2px); }

/* Ramp variants — fill colour + count colour shift together as the remaining
   pool drops, so a glance at the dropdown surfaces "low" before the user has
   to read the number. Glow recolours alongside the fill so the soft halo
   still belongs to the bar. */
.um-tokens--warn   .um-tokens-fill  { background: var(--warning); box-shadow: 0 0 8px rgba(245,158,11,.35); }
.um-tokens--warn   .um-tokens-count { color: var(--warning); }
.um-tokens--warn   .um-tokens-lbl svg { color: var(--warning); }

.um-tokens--danger .um-tokens-fill  { background: var(--danger); box-shadow: 0 0 8px rgba(239,68,68,.40); }
.um-tokens--danger .um-tokens-count { color: var(--danger); }
.um-tokens--danger .um-tokens-lbl svg { color: var(--danger); }

/* ════════════════════════════════════════════════════════════════════ 5. DIVIDER */
.um-divider { height: 1px; background: var(--border); }

/* ════════════════════════════════════════════════════════════════════ 6. MENU ITEMS */
/* Each item carries a soft 2 px left-edge rail that fades in on hover. The
   rail is the polish layer: the bg shift is the broad signal, the rail is
   the precise pointer. Together they read as "this is the focused row"
   without needing a heavy treatment. Linear / Vercel / Notion all use this
   pattern. */
.um-item {
  position: relative;                              /* anchor for ::before rail */
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 9px 14px;
  font-size: 12px; font-family: var(--sans);
  color: var(--text-secondary); background: none; border: none;
  cursor: pointer; text-align: left;
  transition: background .12s, color .12s;        /* softened 70 → 120 ms */

  &::before {
    content: '';
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 2px;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transform: scaleY(.5);
    transform-origin: center;
    transition: opacity .14s ease, transform .14s ease;
  }

  &:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }
  &:hover::before {
    opacity: 1;
    transform: scaleY(1);
  }

  /* Icon opacity bumped .55 → .85 so Settings + Help carry the same visual
     authority as the tokens block above them. Previously the items felt
     underpowered because the icons were nearly washed out. */
  & svg { opacity: .85; flex-shrink: 0; transition: opacity .12s, color .12s; }
  &:hover svg { opacity: 1; }

  /* Sign out — calm at rest (matches Settings + Help), unmistakable on intent.
     Rail recolours to danger on hover, matching the row's hover tone so the
     polish layer still belongs to the same item. */
  &.um-item--danger {
    color: var(--text-secondary);
    &::before { background: var(--danger); }
    &:hover {
      background: var(--danger-dim);
      color: var(--danger);
    }
    & svg { opacity: .85; }
    &:hover svg { color: var(--danger); opacity: 1; }
  }
}

} /* @layer components */