/* ============================================ */
/* Popup Pattern System - AntDesign v5 Tokens   */
/* ============================================ */

/* 
 * This file provides a unified popup design system
 * based on AntDesign v5 tokens. All popups across
 * the application should use these styles.
 * 
 * Token sources:
 *   - Colors: --ant-color-* (from ant-design-tokens.css)
 *   - Spacing: --ant-spacing-* (4px base unit)
 *   - Radius: --ant-border-radius-* 
 *   - Shadow: --ant-box-shadow
 *   - Motion: --ant-motion-*
 */

:root {
  /* ========== POPUP CONTAINER TOKENS ========== */
  
  /* Sizing */
  --pls-popup-width: 300px;
  --pls-popup-max-height: 500px;
  
  /* Colors - Token-based with Phase 1 Fallbacks */
  /* Phase 2 TODO: Remove fallbacks when ant-design-tokens.css is imported from Figma */
  --pls-popup-background: var(--ant-color-bg-base, #ffffff);
  --pls-popup-border-color: var(--ant-color-border, #d9d9d9);
  
  /* Effects - Token-based with Phase 1 Fallbacks */
  --pls-popup-shadow: var(--ant-box-shadow, 0 3px 6px -4px rgba(0, 0, 0, 0.12));
  --pls-popup-border-radius: var(--ant-border-radius-md, 6px);
  --pls-popup-z-index: 1000;
  
  /* ========== POPUP HEADER TOKENS ========== */
  
  --pls-popup-header-padding: var(--ant-spacing-md, 16px);
  --pls-popup-header-border: var(--ant-border-width-base, 1px) solid var(--ant-color-border, #d9d9d9);
  
  /* ========== POPUP TITLE TOKENS ========== */
  
  --pls-popup-title-font-size: var(--ant-font-size-lg, 16px);
  --pls-popup-title-font-weight: var(--ant-font-weight-strong, 600);
  --pls-popup-title-color: var(--ant-color-text, #000000);
  
  /* ========== POPUP CONTENT TOKENS ========== */
  
  --pls-popup-content-padding: var(--ant-spacing-lg, 24px);
  --pls-popup-content-gap: var(--ant-spacing-sm, 12px);
  
  /* ========== POPUP FOOTER TOKENS ========== */
  
  --pls-popup-footer-padding: var(--ant-spacing-md, 16px);
  --pls-popup-footer-border: var(--ant-border-width-base, 1px) solid var(--ant-color-border, #d9d9d9);
  
  /* ========== POPUP ITEM TOKENS ========== */
  
  --pls-popup-item-padding: var(--ant-spacing-xs, 8px) var(--ant-spacing-sm, 12px);
  --pls-popup-item-height: 36px;
  --pls-popup-item-text-color: var(--ant-color-text, #000000);
  --pls-popup-item-text-color-hover: var(--ant-color-text, #000000);
  --pls-popup-item-bg-hover: var(--ant-color-bg-container, #fafafa);
  --pls-popup-item-text-color-disabled: var(--ant-color-text-disabled, rgba(0, 0, 0, 0.25));
  
  /* ========== POPUP CLOSE BUTTON TOKENS ========== */
  
  --pls-popup-close-color: var(--ant-color-text-secondary, rgba(0, 0, 0, 0.65));
  --pls-popup-close-color-hover: var(--ant-color-text, #000000);
  --pls-popup-close-bg-hover: var(--ant-color-bg-container, #fafafa);
  --pls-popup-close-font-size: var(--ant-font-size-lg, 16px);
  --pls-popup-close-padding: var(--ant-spacing-xs, 8px);
  
  /* ========== POPUP ANIMATION TOKENS ========== */
  
  --pls-popup-transition-duration: var(--ant-motion-unit, 0.1s);
  --pls-popup-transition-timing: var(--ant-motion-timing-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1));
  
  /* ========== POPUP SCROLLBAR TOKENS ========== */
  
  --pls-popup-scrollbar-width: 6px;
  --pls-popup-scrollbar-thumb-color: var(--ant-color-border, #d9d9d9);
  --pls-popup-scrollbar-thumb-color-hover: var(--ant-color-text-secondary, rgba(0, 0, 0, 0.65));
}

/* ============================================ */
/* MAIN POPUP CONTAINER */
/* ============================================ */

.pls-popup-container {
  background: var(--pls-popup-background);
  border-radius: var(--pls-popup-border-radius);
  border: var(--ant-border-width-base) solid var(--pls-popup-border-color);
  box-shadow: var(--pls-popup-shadow);
  width: var(--pls-popup-width);
  max-height: var(--pls-popup-max-height);
  overflow-y: auto;
  overflow-x: hidden;
}

/* ============================================ */
/* POPUP HEADER */
/* ============================================ */

.pls-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--pls-popup-header-padding);
  border-bottom: var(--pls-popup-header-border);
  gap: var(--ant-spacing-sm);
}

/* ============================================ */
/* POPUP TITLE */
/* ============================================ */

.pls-popup-title {
  margin: 0;
  font-size: var(--pls-popup-title-font-size);
  font-weight: var(--pls-popup-title-font-weight);
  color: var(--pls-popup-title-color);
  flex: 1;
}

/* ============================================ */
/* POPUP CLOSE BUTTON */
/* ============================================ */

/* AntDesign Link Button - Clean close button */
.pls-popup-close {
  padding: var(--pls-popup-close-padding);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* AntDesign Button renders as .ant-btn */
.pls-popup-close.ant-btn {
  color: var(--pls-popup-close-color);
  border: none;
  background: transparent;
  height: auto;
  line-height: normal;
  transition: all var(--pls-popup-transition-duration) var(--pls-popup-transition-timing);
}



/* ============================================ */
/* POPUP CONTENT */
/* ============================================ */

.pls-popup-content {
  padding: var(--pls-popup-content-padding);
  display: flex;
  flex-direction: column;
  gap: var(--pls-popup-content-gap);
}

/* ============================================ */
/* POPUP FOOTER */
/* ============================================ */

.pls-popup-footer {
  padding: var(--pls-popup-footer-padding);
}

/* ============================================ */
/* POPUP LIST ITEMS (Menu-style popups) */
/* ============================================ */

.pls-popup-list {
  margin: 0;
  padding: var(--ant-spacing-md) 0;
  list-style: none;
}

.pls-popup-list li {
  margin: 0;
  padding: 0;
}

.pls-popup-list li a,
.pls-popup-list li button {
  display: block;
  width: 100%;
  padding: var(--pls-popup-item-padding);
  min-height: var(--pls-popup-item-height);
  display: flex;
  align-items: center;
  color: var(--pls-popup-item-text-color);
  text-decoration: none;
  border: none;
  background: none;
  font-size: var(--ant-font-size);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--pls-popup-transition-duration) var(--pls-popup-transition-timing);
}

.pls-popup-list li a:hover,
.pls-popup-list li button:hover {
  background: var(--pls-popup-item-bg-hover);
  color: var(--pls-popup-item-text-color-hover);
}

.pls-popup-list li a.disabled,
.pls-popup-list li button:disabled {
  color: var(--pls-popup-item-text-color-disabled);
  cursor: default;
  pointer-events: none;
}

.pls-popup-list li a.danger:hover,
.pls-popup-list li button.danger:hover {
  background: var(--ant-color-error);
  color: white;
}

/* ============================================ */
/* POPUP ICONS */
/* ============================================ */

.pls-popup-list li a i,
.pls-popup-list li button i {
  margin-right: var(--ant-spacing-sm);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

/* ============================================ */
/* POPUP SCROLLBAR (Custom for consistency) */
/* ============================================ */

.pls-popup-container::-webkit-scrollbar {
  width: var(--pls-popup-scrollbar-width);
}

.pls-popup-container::-webkit-scrollbar-track {
  background: transparent;
}

.pls-popup-container::-webkit-scrollbar-thumb {
  background-color: var(--pls-popup-scrollbar-thumb-color);
  border-radius: var(--ant-border-radius-sm);
}

.pls-popup-container::-webkit-scrollbar-thumb:hover {
  background-color: var(--pls-popup-scrollbar-thumb-color-hover);
}

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

@media screen and (max-width: 768px) {
  .pls-popup-container {
    width: calc(100vw - var(--ant-spacing-lg));
    max-width: var(--pls-popup-width);
    margin-left: var(--ant-spacing-sm);
    margin-right: var(--ant-spacing-sm);
  }
}