/* ==========================================================================
 * Roll Menu Component
 * Click dropdown for dice roll options with advantage/disadvantage
 * Matches the terminal D&D dark theme aesthetic
 * Mobile-friendly with 44px tap targets
 * ========================================================================== */

/* Rollable items indicator */
.rollable {
  cursor: pointer;
  transition: all var(--transition-fast);
  border-radius: var(--radius-sm);
}

.rollable:hover {
  background: rgba(97, 175, 239, 0.08);
}

.rollable:active {
  transform: scale(0.98);
}

/* Roll Action Menu Backdrop (click-outside-to-close) */
.cs-roll-action-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99998 !important;
  background: rgba(0, 0, 0, 0.4);
}

/* Roll Action Menu - Floating contextual menu */
.cs-roll-action-menu {
  position: fixed !important;
  min-width: 200px;
  padding: var(--space-1) 0;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.3);
  z-index: 99999 !important;
  font-family: var(--font-mono);
  animation: rollMenuFadeIn 0.12s ease-out;
}

@keyframes rollMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Menu Header */
.cs-roll-action-menu-header {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin: calc(-1 * var(--space-1)) 0 var(--space-1) 0;
}

/* Modifier badge in header */
.cs-roll-modifier-badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-mono);
  padding: var(--space-1) var(--space-2);
  background: rgba(97, 175, 239, 0.15);
  border: 1px solid rgba(97, 175, 239, 0.3);
  border-radius: var(--radius-md);
  color: var(--color-accent-primary);
}

/* Roll Action Buttons */
.cs-roll-action-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 44px; /* Mobile-friendly tap target */
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-family: var(--font-mono);
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.cs-roll-action-btn:hover {
  background: rgba(97, 175, 239, 0.1);
  color: var(--color-text-primary);
}

.cs-roll-action-btn:active {
  transform: scale(0.98);
  background: rgba(97, 175, 239, 0.15);
}

/* Button icon (dice notation) */
.cs-roll-action-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 26px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-primary);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

/* Advantage button styling */
.cs-roll-action-btn--advantage .cs-roll-action-btn-icon {
  color: var(--color-accent-secondary);
  border-color: rgba(152, 195, 121, 0.3);
}

.cs-roll-action-btn--advantage:hover {
  background: rgba(152, 195, 121, 0.1);
  color: var(--color-accent-secondary);
}

.cs-roll-action-btn--advantage:hover .cs-roll-action-btn-icon {
  background: rgba(152, 195, 121, 0.15);
  border-color: rgba(152, 195, 121, 0.4);
}

/* Disadvantage button styling */
.cs-roll-action-btn--disadvantage .cs-roll-action-btn-icon {
  color: var(--color-accent-error);
  border-color: rgba(224, 108, 117, 0.3);
}

.cs-roll-action-btn--disadvantage:hover {
  background: rgba(224, 108, 117, 0.1);
  color: var(--color-accent-error);
}

.cs-roll-action-btn--disadvantage:hover .cs-roll-action-btn-icon {
  background: rgba(224, 108, 117, 0.15);
  border-color: rgba(224, 108, 117, 0.4);
}

/* Keyboard focus indicator */
.cs-roll-action-btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
  background: rgba(97, 175, 239, 0.1);
}

/* Separator between normal roll and adv/dis */
.cs-roll-action-btn--advantage {
  margin-top: var(--space-1);
  border-top: 1px solid var(--color-border-subtle);
  padding-top: calc(var(--space-2) + var(--space-1));
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .cs-roll-action-menu {
    min-width: 180px;
    max-width: calc(100vw - 20px);
  }

  .cs-roll-action-btn {
    min-height: 48px; /* Slightly larger on mobile */
  }
}