/* V2 Components CSS
 *
 * Core UI components: topbar, sidebar, modals, buttons
 * Uses design tokens from tokens.css - no hard-coded values
 *
 * See docs/V2_DESIGN_SYSTEM.md for full documentation.
 */

/* ============================================
 * TOPBAR
 * Figma spec: 88px height, same bg as content area,
 * subtle grey line separator (no white background)
 * ============================================ */

.v2-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--page-margin);
  background: var(--color-bg-body);  /* Same as content area, not white */
  border-bottom: 1px solid var(--color-border);  /* Subtle grey line separator */
  z-index: var(--z-topbar);
}

.topbar-left,
.topbar-center,
.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Pin the org selector to the true horizontal centre of the viewport so it
   never drifts when the sidebar expands/collapses or the logo changes width.
   The centre column spans the whole bar (left:0/right:0) and centres the pill
   with flexbox. We deliberately avoid the shrink-to-fit column + translateX(-50%)
   trick: it is centred in Blink but WebKit sizes the auto-width abspos column
   differently, landing the pill ~90px right of centre in Safari. A full-width
   flex layer has no shrink-to-fit ambiguity and centres identically everywhere.
   The layer is click-through (pointer-events:none) so it never covers the logo
   or the bell/avatar underneath; the pill itself re-enables pointer events. */
.topbar-center {
  position: absolute;
  left: 0;
  right: 0;
  justify-content: center;
  pointer-events: none;
}

.topbar-center .org-pill {
  pointer-events: auto;
}

/* The logo sits at its natural size, left-aligned, in both sidebar states.
   It used to mirror the sidebar width to centre itself over the menu, but the
   org pill is now absolutely centred (see .topbar-center), so the logo no
   longer needs a sidebar-width column — that column both clipped a taller logo
   when expanded (overflow:hidden) and scaled it down when collapsed. Sizing to
   content keeps the logo identical regardless of expansion. */
.topbar-left {
  flex: 0 0 auto;
  justify-content: flex-start;
}

/* Logo */
.topbar-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  max-width: 100%;
}

.logo-image {
  height: 52px;
  width: auto;
  object-fit: contain;
  /* No percentage max-width: it would let a narrowed left column (collapsed
     sidebar rail) scale the whole logo down via object-fit. The logo keeps its
     natural width for the fixed height; the column sizes to fit it instead. */
  max-width: none;
}

/* In branded mode, show org logo and hide default; otherwise show default */
.logo-branded {
  display: none;
}

[data-theme="branded"] .logo-branded {
  display: block;
}

[data-theme="branded"] .logo-default {
  display: none;
}

.logo-text {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing-tight);
  font-family: var(--font-family-base);
}

/* ============================================
 * ORGANIZATION PILL
 * Figma spec: White background, card shadow, no border
 * ============================================ */

.org-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  min-width: max(30%, 300px);
  padding: 0 var(--space-8);  /* Extra padding for chevron space */
  background: var(--color-bg-surface);  /* White background */
  border: none;
  border-radius: var(--border-radius-2xl);
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-card);  /* Card shadow style */
}

.org-pill:hover {
  box-shadow: var(--shadow-card-hover);
}

.org-pill-content {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.org-info {
  display: flex;
  flex-direction: column;
  align-items: center;  /* Center the text */
}

.org-name {
  font-weight: var(--font-weight-semibold);
  font-size: 18px;
  color: var(--color-text-primary);
}

.team-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Chevron positioned on the right edge */
.org-pill > i {
  position: absolute;
  right: var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.team-avatars {
  display: flex;
  gap: -8px;
}

.team-avatar-circle {
  width: var(--avatar-size-sm);
  height: var(--avatar-size-sm);
  border-radius: var(--border-radius-full);
  border: var(--border-width-thick) solid var(--color-bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-sm);
}

.team-avatar-circle.more {
  background: var(--color-text-muted);
}

/* ============================================
 * ALERT BOX
 * Figma spec: 48x48px, white bg, card shadow (no border)
 * ============================================ */

.alert-box {
  position: relative;
  width: 48px;
  height: 48px;
  background: var(--color-bg-surface);  /* Pure white */
  border: none;
  border-radius: var(--border-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-card);  /* Figma: 0 0 0 1px #E5E5E5, 0 4px 8px -5px rgba(0,0,0,0.15) */
}

.alert-box i {
  font-size: var(--font-size-xl);
  color: var(--color-text-primary);
}

.alert-box:hover {
  box-shadow: var(--shadow-card-hover);
}

.alert-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--color-bg-hover);
  border-radius: var(--border-radius-full);
  border: 2px solid var(--color-bg-surface);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.alert-badge-unread {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ============================================
 * USER MENU
 * Figma spec: 78x48px pill, white bg, card shadow, 36x36 avatar
 * ============================================ */

.user-menu {
  position: relative;
}

/* User Pill - contains avatar and chevron */
.user-pill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 78px;
  height: 48px;
  padding: 6px;  /* (48 - 36) / 2 = 6px padding for 36px avatar */
  padding-right: var(--space-3);
  background: var(--color-bg-surface);  /* Pure white */
  border: none;
  border-radius: var(--border-radius-2xl);
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-card);  /* Same shadow as alert box */
}

.user-pill:hover {
  box-shadow: var(--shadow-card-hover);
}

.user-pill .user-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--border-radius-full);
  border: none;
  background: var(--color-bg-hover);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.user-pill .user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-pill .user-avatar i {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
}

.user-pill-chevron {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  transition: color var(--transition-base);
}

.user-pill:hover .user-pill-chevron {
  color: var(--color-text-primary);
}

/* Legacy standalone user-avatar (for backward compatibility) */
button.user-avatar {
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  border-radius: var(--border-radius-full);
  border: var(--border-width-thick) solid var(--color-border);
  background: var(--color-bg-hover);
  cursor: pointer;
  transition: all var(--transition-base);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}

button.user-avatar:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-primary-light);
}

button.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

button.user-avatar i {
  font-size: var(--font-size-2xl);
}

.user-menu-dropdown {
  display: none;
  position: absolute;
  top: 56px;
  right: 0;
  min-width: 200px;
  background: var(--color-bg-surface);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-lg);
  z-index: calc(var(--z-topbar) + 1);
  box-sizing: border-box;
}

.user-menu-dropdown.open {
  display: block;
}

.user-menu-dropdown .menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: background var(--transition-base);
  font-size: var(--font-size-sm);
}

.user-menu-dropdown .menu-item:hover {
  background: var(--color-bg-hover);
  color: var(--color-primary);
}

.user-menu-dropdown .menu-item i {
  color: var(--color-text-muted);
}

.user-menu-dropdown .menu-item:hover i {
  color: var(--color-primary);
}

/* Menu item button (for non-link actions like theme toggle) */
.user-menu-dropdown .menu-item-button {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: 400;
}

/* Theme choice — active state indicator */
.user-menu-dropdown .theme-choice.active {
  color: var(--color-primary);
}

.user-menu-dropdown .theme-choice.active i {
  color: var(--color-primary);
}

.user-menu-dropdown .menu-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-2) 0;
}

/* ============================================
 * SIDEBAR
 * ============================================ */

.v2-sidebar {
  position: fixed;
  left: var(--sidebar-left-offset);
  top: var(--sidebar-top-offset);
  width: var(--sidebar-width);
  max-height: calc(100vh - var(--sidebar-top-offset) - var(--page-margin));
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--color-bg-surface);
  border: none;
  border-radius: var(--border-radius-xl);
  padding: var(--space-6) 0;
  z-index: var(--z-sidebar);
  box-shadow: var(--shadow-sidebar);
  transition: var(--sidebar-transition);
}

/* Collapsed sidebar */
.v2-sidebar.collapsed {
  width: var(--sidebar-width-collapsed);
  padding: var(--space-4) 0;
}

/* Initial collapsed state from localStorage (applied before JS runs, no transition) */
[data-sidebar-collapsed="true"] .v2-sidebar {
  width: var(--sidebar-width-collapsed);
  padding: var(--space-4) 0;
  transition: none;
}

[data-sidebar-collapsed="true"] .v2-content-area {
  margin-left: calc(var(--sidebar-width-collapsed) + var(--sidebar-left-offset) + var(--layout-gap));
  transition: none;
}

[data-sidebar-collapsed="true"] .sidebar-collapse-tab {
  left: calc(var(--sidebar-left-offset) + var(--sidebar-width-collapsed));
  transition: none;
}

[data-sidebar-collapsed="true"] .sidebar-collapse-tab i {
  transform: rotate(180deg);
}

[data-sidebar-collapsed="true"] .v2-sidebar .sidebar-item span {
  display: none;
}

[data-sidebar-collapsed="true"] .v2-sidebar .sidebar-item {
  justify-content: center;
  padding: var(--space-3);
  margin: 0 var(--space-2);
}

[data-sidebar-collapsed="true"] .v2-sidebar .sidebar-item i {
  margin: 0;
}

[data-sidebar-collapsed="true"] .v2-sidebar .sidebar-item.disabled i.fa-lock {
  display: none;
}

[data-sidebar-collapsed="true"] .v2-sidebar .section-header {
  margin: 0 var(--space-2);
}

[data-sidebar-collapsed="true"] .v2-sidebar .section-header span {
  display: none;
}

/* Sidebar Collapse Toggle Tab - positioned as sibling to sidebar */
.sidebar-collapse-tab {
  position: fixed;
  /* Position flush with sidebar's right edge */
  left: calc(var(--sidebar-left-offset) + var(--sidebar-width));
  top: calc(var(--sidebar-top-offset) + 70px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px; /* Narrow to fit in the gap */
  height: 48px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-left: none; /* No border on the side attached to sidebar */
  border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all var(--transition-base);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* Shadow only on right and bottom */
  z-index: calc(var(--z-sidebar) + 1); /* Just above sidebar */
}

.sidebar-collapse-tab:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-primary);
  color: var(--color-primary);
  width: 18px; /* Slightly wider on hover */
}

.sidebar-collapse-tab i {
  font-size: 10px;
  transition: transform var(--transition-base);
}

/* Flip icon when sidebar is collapsed */
body:has(.v2-sidebar.collapsed) .sidebar-collapse-tab i {
  transform: rotate(180deg);
}

/* When sidebar is collapsed, reposition tab */
body:has(.v2-sidebar.collapsed) .sidebar-collapse-tab {
  left: calc(var(--sidebar-left-offset) + var(--sidebar-width-collapsed));
}

/* Sidebar Scrollbar */
.v2-sidebar::-webkit-scrollbar {
  width: 6px;
}

.v2-sidebar::-webkit-scrollbar-track {
  background: transparent;
  margin: var(--space-4) 0;
}

.v2-sidebar::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

.v2-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-disabled);
}

/* Sidebar Item - Figma specs: 16px Medium, 150% line-height, 2% letter-spacing */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--sidebar-item-gap);
  padding: var(--sidebar-item-padding-y) var(--sidebar-item-padding-x);
  text-decoration: none;
  color: var(--color-text-secondary);
  transition: all var(--transition-base);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-wide);
}

.sidebar-item i {
  width: var(--icon-size-base);
  height: var(--icon-size-base);
  font-size: var(--icon-size-base);
  color: var(--color-text-primary);
  flex-shrink: 0;
}

/* Lock icon for disabled items appears at the end */
.sidebar-item.disabled i.fa-lock {
  margin-left: auto;
  color: var(--color-text-disabled);
}

.sidebar-item:hover:not(.disabled):not(.active) {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

/* Active state uses card-style shadow, not orange border */
.sidebar-item.active {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  border: none;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-card);
  /* Add margins for breathing room around the elevated card */
  margin: var(--space-2) var(--space-3);
  padding-left: var(--space-3);
}

.sidebar-item.home-link {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  margin-bottom: var(--space-2);
}

.sidebar-item.disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 0.5;
}

/* Sidebar action item (e.g., + Add Team) */
.sidebar-item.sidebar-action {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  border: 1px dashed var(--color-border);
  border-radius: var(--border-radius-md);
  margin: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-3);
  justify-content: center;
  transition: all var(--transition-base);
}

.sidebar-item.sidebar-action:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-hover);
}

.sidebar-item.sidebar-action i {
  font-size: var(--font-size-sm);
}

/* Sidebar Divider (hidden by default) */
.sidebar-divider {
  display: none;
}

/* Sidebar Section */
.sidebar-section {
  margin: var(--space-4) 0;
}

/* Section Header with Line Through - SIDEBAR ONLY */
/* Figma specs: 12px SemiBold, 150% line-height, -2% letter-spacing, uppercase, #A3A3A3 */
.v2-sidebar .section-header {
  position: relative;
  text-align: left;
  margin: 0 var(--space-6);
}

.v2-sidebar .section-header::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--color-border);
  z-index: 0;
}

.v2-sidebar .section-header span {
  position: relative;
  display: inline-block;
  z-index: 1;
  background: var(--color-bg-surface);
  padding-right: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-tight);
}

/* Section header */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Section items container */
.section-items {
  display: flex;
  flex-direction: column;
}

/* Section with active item indicator */
.sidebar-section.has-active .section-header span {
  color: var(--color-primary);
}

/* ============================================
 * BRANDED SIDEBAR & TOPBAR — Bold palette styles
 * Only active when --brand-sidebar-bg is set.
 * Uses a subtle inner bg with primary as border
 * for depth rather than a flat color block.
 * ============================================ */

/* Sidebar container: primary color background */
[data-theme="branded"] .v2-sidebar {
  background: var(--brand-sidebar-bg, var(--color-bg-surface));
  box-shadow: var(--shadow-sidebar);
}

/* Sidebar items: branded text color */
[data-theme="branded"] .v2-sidebar .sidebar-item {
  color: var(--brand-sidebar-text, var(--color-text-secondary));
}

[data-theme="branded"] .v2-sidebar .sidebar-item i {
  color: var(--brand-sidebar-icon, var(--color-text-primary));
}

/* All sidebar items get rounded corners + margin to stay inside the sidebar */
[data-theme="branded"] .v2-sidebar .sidebar-item {
  color: var(--brand-sidebar-text, var(--color-text-secondary));
  margin-left: var(--space-2);
  margin-right: var(--space-2);
  border-radius: var(--border-radius-md);
  padding-left: var(--space-5);
}

/* Hover: lighter shade, contained within the sidebar */
[data-theme="branded"] .v2-sidebar .sidebar-item:hover:not(.disabled):not(.active) {
  background: var(--brand-sidebar-hover, var(--color-bg-hover));
  color: var(--brand-sidebar-text, var(--color-text-primary));
}

/* Active item: distinct lighter shade, no card/shadow cutout */
[data-theme="branded"] .v2-sidebar .sidebar-item.active {
  background: var(--brand-sidebar-active, var(--color-bg-surface));
  color: var(--brand-sidebar-text, var(--color-text-primary));
  box-shadow: none;
  margin-left: var(--space-2);
  margin-right: var(--space-2);
}

/* Section header text: muted contrast, NOT matching the bg */
[data-theme="branded"] .v2-sidebar .section-header span {
  color: var(--brand-sidebar-header-text, var(--color-text-muted));
  background: var(--brand-sidebar-bg, var(--color-bg-surface));
}

/* Section header divider line */
[data-theme="branded"] .v2-sidebar .section-header::before {
  background: var(--brand-sidebar-divider, var(--color-border));
}

/* Section with active item — header uses icon color for emphasis */
[data-theme="branded"] .sidebar-section.has-active .section-header span {
  color: var(--brand-sidebar-icon, var(--color-primary));
}

/* Sidebar action item (e.g., + Add Team) */
[data-theme="branded"] .v2-sidebar .sidebar-item.sidebar-action {
  color: var(--brand-sidebar-text-muted, var(--color-primary));
  border-color: var(--brand-sidebar-divider, var(--color-border));
}

[data-theme="branded"] .v2-sidebar .sidebar-item.sidebar-action:hover {
  border-color: var(--brand-sidebar-text, var(--color-primary));
  background: var(--brand-sidebar-hover, var(--color-bg-hover));
  color: var(--brand-sidebar-text, var(--color-primary));
}

/* Home link specific */
[data-theme="branded"] .v2-sidebar .sidebar-item.home-link {
  color: var(--brand-sidebar-text, var(--color-text-primary));
}

/* Topbar: branded when sidebar is branded */
[data-theme="branded"] .v2-topbar {
  background: var(--brand-topbar-bg, var(--color-bg-body));
  border-bottom-color: var(--brand-topbar-border, var(--color-border));
}

/* Topbar org pill — branded: transparent pill on branded topbar */
[data-theme="branded"] .v2-topbar .org-pill {
  background: transparent;
  box-shadow: none;
  border: 1px solid var(--brand-sidebar-divider, var(--color-border));
}

[data-theme="branded"] .v2-topbar .org-pill:hover {
  box-shadow: none;
  border-color: var(--brand-sidebar-text, var(--color-border));
}

[data-theme="branded"] .v2-topbar .org-name {
  color: var(--brand-sidebar-text, var(--color-text-primary));
}

[data-theme="branded"] .v2-topbar .team-count {
  color: var(--brand-sidebar-text-muted, var(--color-text-muted));
}

[data-theme="branded"] .v2-topbar .org-pill > i {
  color: var(--brand-sidebar-text-muted, var(--color-text-muted));
}

/* ============================================
 * COLLAPSED SIDEBAR BEHAVIOR
 * ============================================ */

/* When sidebar is collapsed horizontally */
.v2-sidebar.collapsed .sidebar-item span {
  display: none;
}

.v2-sidebar.collapsed .sidebar-item {
  justify-content: center;
  padding: var(--space-3);
  margin: 0 var(--space-2);
}

.v2-sidebar.collapsed .sidebar-item.active {
  /* Keep same padding and margin as collapsed items */
}

/* Center icons when collapsed */
.v2-sidebar.collapsed .sidebar-item i {
  margin: 0;
}

/* Hide lock icon in collapsed state */
.v2-sidebar.collapsed .sidebar-item.disabled i.fa-lock {
  display: none;
}

/* Section headers in collapsed state */
.v2-sidebar.collapsed .section-header {
  margin: 0 var(--space-2);
  cursor: default;
}

.v2-sidebar.collapsed .section-header span,
.v2-sidebar.collapsed .section-header::before {
  display: none;
}

/* Tooltips for collapsed sidebar items */
.v2-sidebar.collapsed .sidebar-item {
  position: relative;
}

.v2-sidebar.collapsed .sidebar-item::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + var(--space-3));
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-text-primary);
  color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
  z-index: var(--z-tooltip);
  box-shadow: var(--shadow-lg);
}

.v2-sidebar.collapsed .sidebar-item:hover::after {
  opacity: 1;
}

/* Mobile Toggle Button */
.sidebar-mobile-toggle {
  display: none;
  position: fixed;
  bottom: var(--space-5);
  left: var(--space-5);
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius-full);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-primary);
  z-index: calc(var(--z-topbar) + 2);
  cursor: pointer;
}

.sidebar-mobile-toggle:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 6px 16px var(--color-primary-shadow-strong);
}

/* ============================================
 * MODAL
 * ============================================ */

.v2-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
}

.v2-modal.hidden {
  display: none;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: var(--modal-max-width);
  max-height: var(--modal-max-height);
  overflow-y: auto;
  background: var(--color-bg-surface);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-xl);
  z-index: 1001;
}

.modal-lg {
  max-width: 720px;
}

.modal-xl {
  max-width: 900px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-6);
  border-bottom: var(--border-width-default) solid var(--color-border);
}

.modal-header h2 {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.modal-close {
  background: none;
  border: none;
  font-size: var(--font-size-2xl);
  cursor: pointer;
  color: var(--color-text-muted);
  width: var(--space-8);
  height: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-sm);
  transition: all var(--transition-base);
}

.modal-close:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.modal-section {
  padding: var(--space-6);
  border-bottom: none;
}

.modal-section h3 {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* ============================================
 * ORGANIZATION LIST (Modal)
 * ============================================ */

.org-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.org-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-hover);
  border: var(--border-width-thick) solid transparent;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
}

.org-option:hover:not(.active) {
  background: var(--color-bg-surface);
  border-color: var(--color-primary);
}

.org-option.active {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  cursor: default;
}

.org-option .org-name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  flex: 1;
}

.org-option i {
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  margin-left: var(--space-3);
}

/* ============================================
 * ORG SWITCHER — Mine | All TABS (super only)
 * ============================================ */

.org-switcher-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-4);
}

.org-switcher-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) var(--space-4);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.org-switcher-tab:hover {
  color: var(--color-text-primary);
}

.org-switcher-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.org-switcher-tab-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  margin-left: var(--space-1);
}

.org-switcher-tab.active .org-switcher-tab-count {
  color: var(--color-primary);
}

/* The HTML `hidden` attribute is overridden by `display: flex` on these
   panes, so re-assert it for the org-switcher panes specifically. */
.org-list[hidden],
.org-list-all[hidden] {
  display: none;
}

/* All-orgs pane: search + compact rows */
.org-list-all {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.org-search-wrapper {
  position: relative;
}

.org-search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  pointer-events: none;
}

.org-search-input {
  width: 100%;
  padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + var(--space-5));
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background: transparent;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
}

.org-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* Super-only: create a new organization from the switcher. */
.org-create-section {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.org-create-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  background: transparent;
  border: none;
  color: var(--color-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.org-create-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.org-create-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background: transparent;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
}

.org-create-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.org-create-submit {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-primary);
  border-radius: var(--border-radius-md);
  background: transparent;
  color: var(--color-primary);
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
}

.org-create-error {
  flex: 1 0 100%;
  color: var(--color-danger, #d9534f);
  font-size: var(--font-size-xs);
}

.org-row-list {
  display: flex;
  flex-direction: column;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
}

.org-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
  cursor: pointer;
  transition: background-color 0.15s;
  font-size: var(--font-size-sm);
}

.org-row:last-child {
  border-bottom: none;
}

.org-row:hover:not(.active) {
  background: var(--color-bg-hover);
}

.org-row.active {
  cursor: default;
  font-weight: var(--font-weight-semibold);
}

.org-row-name {
  color: var(--color-text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-row-meta {
  flex-shrink: 0;
}

.org-row-badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 2px var(--space-2);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.org-row-badge-current {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.org-row-badge-member {
  border-color: var(--color-success);
  color: var(--color-success);
}

.org-row-badge-other {
  /* leave default — neutral */
}

.org-row-empty {
  padding: var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* ============================================
 * TEAM LIST (Modal)
 * ============================================ */

.team-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.team-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-hover);
  border: var(--border-width-thick) solid transparent;
  border-radius: var(--border-radius-md);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: all var(--transition-base);
}

.team-option:hover {
  background: var(--color-bg-surface);
  border-color: var(--color-primary);
  transform: translateX(var(--space-1));
}

.team-avatar {
  width: var(--avatar-size-md);
  height: var(--avatar-size-md);
  border-radius: var(--border-radius-full);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  box-shadow: var(--shadow-sm);
}

.team-details {
  flex: 1;
}

.team-name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

.no-teams-message {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-8);
  font-size: var(--font-size-sm);
}

/* ============================================
 * BUTTONS
 * ============================================ */

/* Base Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: auto;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  font-family: var(--font-family-base);
  border-radius: var(--btn-border-radius);
  border: var(--border-width-default) solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: var(--shadow-primary);
}

.btn-secondary {
  background: var(--color-bg-hover);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.btn-secondary:hover {
  background: var(--color-bg-disabled);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--color-bg-hover);
  color: var(--color-primary);
}

/* Icon Button (Circle) */
.btn-icon {
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  padding: 0;
  border-radius: var(--border-radius-full);
  background: var(--color-bg-hover);
  border: var(--border-width-default) solid var(--color-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-primary);
}

.btn-icon-sm {
  width: var(--btn-icon-size-sm);
  height: var(--btn-icon-size-sm);
}

.btn-icon-lg {
  width: var(--btn-icon-size-lg);
  height: var(--btn-icon-size-lg);
}

/* ============================================
 * FORM ELEMENTS
 * ============================================ */

/* Form Group */
.form-group {
  margin-bottom: var(--space-6);
}

/* Form Label */
.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

/* Form Input & Textarea */
.form-input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-md);
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
  background: transparent;
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--border-radius-md);
  transition: all var(--transition-base);
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 116, 68, 0.1);
}

.form-input:hover:not(:focus) {
  border-color: var(--color-text-muted);
}

/* Textarea specific */
textarea.form-input {
  resize: vertical;
  min-height: 100px;
}

/* Form Help Text */
.form-help {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* Form Actions (button container) */
.form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.form-actions .btn {
  min-width: 120px;
}

/* ============================================
 * INFO LIST (for feature descriptions, etc.)
 * ============================================ */

.info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.info-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.info-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius-md);
  background: var(--color-bg-hover);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}

.info-icon i {
  font-size: var(--font-size-lg);
}

.info-content h4 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1) 0;
}

.info-content p {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--line-height-relaxed);
}

/* ============================================
 * BADGES
 * ============================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--border-radius-sm);
}

.badge-success {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.badge-info {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

.badge-warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.badge-error {
  background: var(--color-error-bg);
  color: var(--color-error-text);
}

/* ============================================
 * AVATARS
 * ============================================ */

.avatar {
  border-radius: var(--border-radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-sm {
  width: var(--avatar-size-sm);
  height: var(--avatar-size-sm);
  font-size: var(--font-size-xs);
}

.avatar-md {
  width: var(--avatar-size-md);
  height: var(--avatar-size-md);
  font-size: var(--font-size-md);
}

.avatar-lg {
  width: var(--avatar-size-lg);
  height: var(--avatar-size-lg);
  font-size: var(--font-size-xl);
}

.avatar-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.avatar-secondary {
  background: var(--color-bg-hover);
  border: var(--border-width-thick) solid var(--color-border);
  color: var(--color-text-secondary);
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
 * PROGRESS BAR
 * ============================================ */

.progress-bar {
  width: 100%;
  height: var(--progress-height);
  background: var(--color-border);
  border-radius: var(--progress-border-radius);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), #ff9d44);
  border-radius: var(--progress-border-radius);
  transition: width var(--transition-slow);
}

/* ============================================
 * RESPONSIVE
 * ============================================ */

@media (max-width: 768px) {
  .v2-topbar {
    padding: 0 var(--space-4);
  }

  /* Mobile: sidebar is off-canvas, so don't force logo to sidebar width */
  .topbar-left,
  html[data-sidebar-collapsed="true"] .topbar-left,
  body:has(.v2-sidebar.collapsed) .topbar-left {
    width: auto;
    justify-content: flex-start;
    overflow: visible;
  }

  .topbar-logo {
    font-size: var(--font-size-xl);
  }

  .org-pill-content {
    gap: var(--space-2);
  }

  .team-avatars {
    display: none;
  }

  .v2-sidebar {
    left: 0;
    top: var(--topbar-height);
    max-height: calc(100vh - var(--topbar-height));
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    box-shadow: var(--shadow-lg);
  }

  .v2-sidebar.open {
    transform: translateX(0);
  }

  .sidebar-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* ============================================
 * TEAM MANAGEMENT MODALS
 * ============================================ */

/* Standalone modal overlay with visibility toggle (team mgmt, settings, tags) */
div.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
}

div.modal-overlay.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inside .v2-modal, overlay is always visible (parent .hidden controls visibility) */
.v2-modal .modal-overlay {
  display: block;
}

/* Modal content positioning override for fixed overlay */
.modal-overlay .modal-content {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
}

/* Header / body / footer modals: the body is the single scroll region and
   the footer stays pinned (sticky) at the bottom. Without this, both
   .modal-content and .modal-body scroll independently, which leaves the
   footer in the OUTER scroll container — so it only appears after the inner
   body scroll is exhausted and a second scroll gesture chains outward
   (the "scroll all the way down, footer pops in on the next scroll" bug). */
.modal-overlay .modal-content:has(> .modal-body):has(> .modal-footer) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-overlay .modal-content:has(> .modal-body):has(> .modal-footer) > .modal-body {
  flex: 1 1 auto;
  min-height: 0;
}
.modal-overlay .modal-content:has(> .modal-body):has(> .modal-footer) > .modal-header,
.modal-overlay .modal-content:has(> .modal-body):has(> .modal-footer) > .modal-footer {
  flex-shrink: 0;
}

/* Modal sizes */
.modal-large {
  max-width: 700px;
  width: 90%;
}

.modal-medium {
  max-width: 500px;
  width: 90%;
}

.modal-small {
  max-width: 400px;
  width: 90%;
}

/* Modal body */
.modal-body {
  padding: var(--space-6);
  max-height: 60vh;
  overflow-y: auto;
}

/* Modal footer */
.modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-width-default) solid var(--color-border);
}

.modal-footer-left {
  display: flex;
  gap: var(--space-3);
}

.modal-footer-right {
  display: flex;
  gap: var(--space-3);
}

/* Form sections within modals */
.form-section {
  margin-bottom: var(--space-6);
}

.form-section:last-child {
  margin-bottom: 0;
}

.form-section-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-3) 0;
}

/* Member chips for team settings */
.member-chips-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  min-height: var(--space-10);
}

.member-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-sm);
}

.member-chip-name {
  color: var(--color-text-primary);
}

.member-chip-remove {
  background: none;
  border: none;
  padding: 0;
  width: var(--space-5);
  height: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-muted);
  border-radius: var(--border-radius-full);
  transition: all var(--transition-base);
}

.member-chip-remove:hover {
  color: var(--color-danger);
}

/* Selectable members list for add modal */
.selectable-members-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 300px;
  overflow-y: auto;
}

.selectable-member-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: var(--border-width-default) solid var(--color-border);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
}

.selectable-member-item:hover {
  border-color: var(--color-primary);
}

.selectable-member-item input[type="checkbox"] {
  flex-shrink: 0;
  width: auto;
}

.selectable-member-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.selectable-member-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.selectable-member-email {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Delete warning */
.delete-warning {
  text-align: center;
  padding: var(--space-4);
}

.delete-warning-icon {
  font-size: var(--font-size-4xl);
  color: var(--color-danger);
  margin-bottom: var(--space-4);
}

.delete-warning p {
  margin: 0 0 var(--space-3) 0;
  color: var(--color-text-primary);
}

.delete-warning-detail {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Button variants for modals */
.btn-danger {
  background: var(--color-danger);
  color: white;
  border: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--border-radius-md);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-base);
}

.btn-danger:hover {
  /* Re-assert the danger background: the global `.btn:hover` rule in
     theme.css whitens the fill, which would otherwise leave white text
     on a near-white background (invisible label) on hover. */
  background: var(--color-danger);
  opacity: 0.9;
}

.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-danger-text {
  background: none;
  border: none;
  color: var(--color-danger);
  padding: var(--space-2) var(--space-4);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-base);
}

.btn-danger-text:hover {
  opacity: 0.8;
}

.btn-text {
  background: none;
  border: none;
  color: var(--color-primary);
  padding: var(--space-2) 0;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-base);
}

.btn-text:hover {
  opacity: 0.8;
}

.btn-text i {
  margin-right: var(--space-2);
}

/* ============================================
 * TOAST NOTIFICATIONS
 * ============================================ */

.v2-toast-container {
  position: fixed;
  top: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-notification);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}

.v2-toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  max-width: 400px;
  background: var(--color-bg-elevated);
}

.v2-toast-visible {
  opacity: 1;
  transform: translateX(0);
}

.v2-toast-exit {
  opacity: 0;
  transform: translateX(100%);
}

.v2-toast i {
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.v2-toast-success i { color: var(--color-success); }
.v2-toast-error i { color: var(--color-danger); }
.v2-toast-warning i { color: var(--color-warning); }
.v2-toast-info i { color: var(--color-primary); }

.v2-toast-success { border-left: 3px solid var(--color-success); }
.v2-toast-error { border-left: 3px solid var(--color-danger); }
.v2-toast-warning { border-left: 3px solid var(--color-warning); }
.v2-toast-info { border-left: 3px solid var(--color-primary); }

/* Empty text for empty lists */
.empty-text {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-style: italic;
  padding: var(--space-2) 0;
}

/* Page header with actions */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
}

.page-header-content {
  flex: 1;
}

.page-header-actions {
  flex-shrink: 0;
}

/* ============================================
 * V2 QUADRANT CHART TOOLTIPS
 * Enterprise-style tooltips for scatter/quadrant charts
 * ============================================ */

.v2-quadrant-tooltip {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: var(--space-2) var(--space-3);
  box-shadow: var(--shadow-md);
  z-index: 1000;
  transform: translate(-50%, -100%);
  margin-top: -8px;
}

.v2-quadrant-tooltip-content {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.v2-quadrant-tooltip-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: contain;
  border: 1px solid var(--color-border);
  padding: 2px;
}

.v2-quadrant-tooltip-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* Full-screen loading overlay */
#v2-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}
.v2-loading-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3, 12px);
  color: #fff;
  background: rgba(30, 30, 30, 0.95);
  padding: 40px 60px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.v2-loading-overlay-text {
  font-size: var(--font-size-base, 14px);
  font-family: var(--font-family-base, sans-serif);
}