/* =========================================================
   Dealmelio — Comprehensive Design Polish
   Applied globally to standardize UI/UX
========================================================= */

/* ===========================================
   🎨 ENHANCED DESIGN TOKENS
=========================================== */
:root {
  /* Refined Typography Scale */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 24px;
  
  /* Font Weights - Consistent */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  
  /* Enhanced Shadow System */
  --shadow-button: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-button-hover: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-popup: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Consistent Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===========================================
   🔤 TYPOGRAPHY STANDARDIZATION
=========================================== */
body {
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  line-height: var(--leading-normal) !important;
  color: var(--text-primary) !important;
  font-weight: var(--font-normal) !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans) !important;
  font-weight: var(--font-semibold) !important;
  line-height: var(--leading-tight) !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}

h1 { font-size: var(--text-2xl) !important; }
h2 { font-size: var(--text-xl) !important; }
h3 { font-size: var(--text-lg) !important; }
h4 { font-size: var(--text-base) !important; }

/* Labels and Secondary Text */
label {
  font-size: var(--text-sm) !important;
  font-weight: var(--font-medium) !important;
  color: var(--text-secondary) !important;
  line-height: var(--leading-normal) !important;
}

.text-muted,
.muted {
  color: var(--text-secondary) !important;
  font-size: var(--text-sm) !important;
}

/* ===========================================
   🔘 STANDARDIZED BUTTON SYSTEM
=========================================== */

/* Base Button - Foundation for all buttons */
.btn,
button.btn,
.button {
  /* Layout */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-2) !important;
  
  /* Sizing */
  padding: 8px 16px !important;
  height: 36px !important;
  min-width: fit-content !important;
  
  /* Typography */
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--font-semibold) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: center !important;
  
  /* Visual */
  background: var(--surface) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-button) !important;
  
  /* Interaction */
  cursor: pointer !important;
  transition: all var(--transition-fast) !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.btn:hover:not(:disabled),
button.btn:hover:not(:disabled) {
  background: var(--hover-bg) !important;
  border-color: var(--border-medium) !important;
  box-shadow: var(--shadow-button-hover) !important;
}

.btn:active:not(:disabled),
button.btn:active:not(:disabled) {
  box-shadow: var(--shadow-button) !important;
}

.btn:disabled,
button.btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Button Variants */

/* Primary Button - Main actions */
.btn.primary,
button.btn.primary,
.btn-primary,
#contactSaveBtn,
#folderSaveBtn,
#advSave,
#saveFilterConfirm,
#__deal_save,
button[id*="Save"][class*="primary"],
button[id*="save"][class*="primary"] {
  background: #2563eb !important; /* var(--primary-600) - Hardcoded for safety */
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.18) !important;
}

.btn.primary:hover:not(:disabled),
button.btn.primary:hover:not(:disabled),
#contactSaveBtn:hover:not(:disabled),
#folderSaveBtn:hover:not(:disabled),
#advSave:hover:not(:disabled),
#saveFilterConfirm:hover:not(:disabled),
#__deal_save:hover:not(:disabled),
button[id*="Save"][class*="primary"]:hover:not(:disabled),
button[id*="save"][class*="primary"]:hover:not(:disabled) {
  background: #1d4ed8 !important; /* var(--primary-700) */
  border-color: #1d4ed8 !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.22) !important;
}

/* Success Button - keep single accent (blue) to reduce noise */
.btn.success,
button.btn.success,
.btn-success {
  background: var(--primary-600) !important;
  border-color: var(--primary-600) !important;
  color: #ffffff !important;
}

.btn.success:hover:not(:disabled),
button.btn.success:hover:not(:disabled) {
  background: var(--primary-700) !important;
  border-color: var(--primary-700) !important;
}

/* Warning/Edit buttons - neutral (avoid orange) */
.btn.warning,
button.btn.warning,
.btn-warning,
.btn.edit-btn,
.edit-btn {
  background: var(--surface) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-button) !important;
}

.btn.warning:hover:not(:disabled),
button.btn.warning:hover:not(:disabled),
.btn.edit-btn:hover:not(:disabled) {
  background: var(--hover-bg) !important;
  border-color: var(--border-medium) !important;
  box-shadow: var(--shadow-button-hover) !important;
}


/* Danger Button - Destructive actions (Delete) */
.btn.danger,
button.btn.danger,
.btn-danger,
.btn.delete-btn,
.delete-btn {
  background: var(--surface) !important;
  border-color: var(--danger-200) !important;
  color: var(--danger-600) !important;
  box-shadow: var(--shadow-button) !important;
}

.btn.danger:hover:not(:disabled),
button.btn.danger:hover:not(:disabled),
.btn.delete-btn:hover:not(:disabled) {
  background: var(--danger-50) !important;
  border-color: var(--danger-300) !important;
  color: var(--danger-700) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15) !important;
}

/* Ghost Button - Subtle actions */
.btn.ghost,
button.btn.ghost,
.btn-ghost {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.btn.ghost:hover:not(:disabled),
button.btn.ghost:hover:not(:disabled) {
  background: var(--hover-bg) !important;
  border-color: var(--border-light) !important;
  box-shadow: var(--shadow-button) !important;
}

/* Button Sizes */
.btn.small,
.btn-sm {
  padding: 6px 12px !important;
  height: 30px !important;
  font-size: var(--text-sm) !important;
}

.btn.large,
.btn-lg {
  padding: 12px 24px !important;
  height: 44px !important;
  font-size: var(--text-lg) !important;
}

/* Icon-only buttons */
.btn.icon,
.btn-icon {
  padding: 8px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
}

.btn.icon.small {
  padding: 6px !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
}

/* ===========================================
   📝 STANDARDIZED FORM ELEMENTS
=========================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
textarea,
select {
  /* Layout */
  display: block !important;
  width: 100% !important;
  
  /* Sizing */
  padding: 8px 12px !important;
  height: 36px !important;
  
  /* Typography */
  font-family: var(--font-sans) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--font-normal) !important;
  line-height: var(--leading-normal) !important;
  color: var(--text-primary) !important;
  
  /* Visual */
  background: var(--surface) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-xs) !important;
  
  /* Interaction */
  transition: all var(--transition-fast) !important;
  outline: none !important;
}

textarea {
  height: auto !important;
  min-height: 80px !important;
  resize: vertical !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary-500) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), var(--shadow-xs) !important;
}

input:disabled,
textarea:disabled,
select:disabled {
  background: var(--gray-100) !important;
  color: var(--text-tertiary) !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-tertiary) !important;
  opacity: 0.7 !important;
}

/* ===========================================
   🎴 STANDARDIZED CARDS & SURFACES
=========================================== */
.card,
.panel,
.folderPane,
.listPane,
.detailPane,
.modal-content {
  background: var(--surface) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-card) !important;
}

/* Contact List Cards - Let existing styles handle layout, just add subtle enhancements */
/* Removed conflicting styles that override the working contact list layout */

/* Deal, Document, Relationship Cards */
.deal-card,
.document-card,
.relationship-card,
.detailSection .card-item {
  background: var(--surface) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  padding: var(--space-4) !important;
  margin-bottom: var(--space-3) !important;
  box-shadow: var(--shadow-xs) !important;
  transition: all var(--transition-fast) !important;
}

.deal-card:hover,
.document-card:hover,
.relationship-card:hover {
  border-color: var(--border-medium) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ===========================================
   🎯 STANDARDIZED SPACING
=========================================== */

/* Section Spacing */
.detailSection,
section {
  padding: var(--space-4) !important;
}

.detailSection:last-child {
  margin-bottom: 0 !important;
}

/* Headers */
.paneHead,
.panel-header,
.section-header {
  padding: var(--space-3) var(--space-4) !important;
  margin-bottom: var(--space-3) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

/* Lists */
ul, ol {
  padding-left: var(--space-5) !important;
  margin: var(--space-3) 0 !important;
}

li {
  margin-bottom: var(--space-2) !important;
}

/* Gaps and Gutters */
.flex-gap,
.grid-gap {
  gap: var(--space-3) !important;
}

.flex-gap-sm,
.grid-gap-sm {
  gap: var(--space-2) !important;
}

.flex-gap-lg,
.grid-gap-lg {
  gap: var(--space-4) !important;
}

/* ===========================================
   🎭 MODALS & POPUPS
=========================================== */
.modal-overlay,
.overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 9998 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: fadeIn var(--transition-base) ease-out !important;
}

.modal,
.modal-wrapper {
  position: relative !important;
  background: var(--surface) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-modal) !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
  overflow: hidden !important;
  z-index: 9999 !important;
  animation: scaleIn var(--transition-base) ease-out !important;
}

.modal-header {
  padding: var(--space-4) var(--space-6) !important;
  border-bottom: 1px solid var(--border-light) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--gray-50) !important;
}

.modal-body {
  padding: var(--space-6) !important;
  overflow-y: auto !important;
  max-height: calc(90vh - 140px) !important;
}

.modal-footer,
.modal-foot {
  padding: var(--space-4) var(--space-6) !important;
  border-top: 1px solid var(--border-light) !important;
  background: var(--gray-50) !important;
  display: flex !important;
  gap: var(--space-3) !important;
  justify-content: flex-end !important;
}

/* Microhelp Popups */
.microhelp,
.deal-microhelp,
.popup {
  background: var(--surface) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-popup) !important;
  padding: var(--space-4) !important;
  z-index: 99999 !important;
}

/* ===========================================
   🎨 STANDARDIZED COLORS & BADGES
=========================================== */

/* Pills and Badges */
.pill,
.badge,
.tag,
.contact-pill,
.deal-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-1) !important;
  padding: 4px 10px !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--font-semibold) !important;
  border-radius: var(--radius-full) !important;
  white-space: nowrap !important;
  transition: all var(--transition-fast) !important;
}

.pill.primary,
.badge.primary {
  background: var(--primary-100) !important;
  color: var(--primary-700) !important;
  border: 1px solid var(--primary-200) !important;
}

.pill.success,
.badge.success {
  background: var(--success-100) !important;
  color: var(--success-700) !important;
  border: 1px solid var(--success-200) !important;
}

.pill.warning,
.badge.warning {
  background: var(--warning-50) !important;
  color: var(--warning-700) !important;
  border: 1px solid var(--warning-200) !important;
}

.pill.danger,
.badge.danger {
  background: var(--danger-50) !important;
  color: var(--danger-700) !important;
  border: 1px solid var(--danger-200) !important;
}

.pill.neutral,
.badge.neutral {
  background: var(--gray-100) !important;
  color: var(--gray-700) !important;
  border: 1px solid var(--gray-200) !important;
}

/* Interactive Pills (clickable) */
.pill.clickable,
.badge.clickable {
  cursor: pointer !important;
}

.pill.clickable:hover,
.badge.clickable:hover {
  filter: brightness(0.95) !important;
  transform: scale(1.05) !important;
}

/* ===========================================
   ✨ ANIMATIONS
=========================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

/* Apply animations */
.fade-in {
  animation: fadeIn var(--transition-base) ease-out !important;
}

.scale-in {
  animation: scaleIn var(--transition-base) ease-out !important;
}

.slide-up {
  animation: slideUp var(--transition-base) ease-out !important;
}

/* ===========================================
   🌈 UTILITY CLASSES
=========================================== */

/* Text Colors */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-success { color: var(--success-600) !important; }
.text-warning { color: var(--warning-600) !important; }
.text-danger { color: var(--danger-600) !important; }

/* Background Colors */
.bg-primary { background: var(--primary-50) !important; }
.bg-success { background: var(--success-50) !important; }
.bg-warning { background: var(--warning-50) !important; }
.bg-danger { background: var(--danger-50) !important; }
.bg-surface { background: var(--surface) !important; }

/* Borders */
.border { border: 1px solid var(--border-light) !important; }
.border-primary { border-color: var(--primary-300) !important; }
.border-success { border-color: var(--success-300) !important; }
.border-warning { border-color: var(--warning-300) !important; }
.border-danger { border-color: var(--danger-300) !important; }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-none { box-shadow: none !important; }

/* Border Radius */
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* Display */
.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }
.grid { display: grid !important; }
.block { display: block !important; }
.inline-block { display: inline-block !important; }
.hidden { display: none !important; }

/* ===========================================
   📱 RESPONSIVE REFINEMENTS
=========================================== */
@media (max-width: 768px) {
  /* Reduce spacing on mobile */
  :root {
    --space-4: 12px;
    --space-6: 16px;
    --space-8: 24px;
  }
  
  /* Smaller buttons */
  .btn {
    padding: 6px 12px !important;
    height: 32px !important;
    font-size: var(--text-sm) !important;
  }
  
  /* Compact form fields */
  input, select, textarea {
    padding: 6px 10px !important;
    height: 32px !important;
    font-size: var(--text-sm) !important;
  }
  
  /* Smaller cards */
  .deal-card,
  .document-card {
    padding: var(--space-3) !important;
  }
}