/* Salesforce Lightning Experience Design System (SLDS Inspired & Mobile Optimized) */

:root {
  --sf-blue: #0176D3;
  --sf-blue-hover: #014486;
  --sf-cloud-blue: #00A1E0;
  --sf-navy: #032D60;
  --sf-navy-dark: #001639;
  --sf-bg: #B0C4DF;
  --sf-page-bg: #F3F3F3;
  --sf-border: #DDDBDA;
  --sf-text-main: #181818;
  --sf-text-muted: #514F4D;
  --sf-success: #2E844A;
  --sf-warning: #FE9339;
  --sf-danger: #BA0517;
}

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--sf-page-bg);
  color: var(--sf-text-main);
  overflow-x: hidden;
}

/* Hide scrollbars for clean mobile tab bars */
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

/* Custom Scrollbar for desktop panels */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

/* Salesforce Waffle Grid Icon */
.sf-waffle {
  display: grid;
  grid-template-columns: repeat(3, 4px);
  gap: 2.5px;
  width: 17px;
  height: 17px;
}
.sf-waffle span {
  width: 4px;
  height: 4px;
  background-color: #FFFFFF;
  border-radius: 1px;
}

/* Salesforce Lightning Path (Stage Chevrons) */
.sf-path {
  display: flex;
  align-items: center;
  overflow-x: auto;
  border-radius: 4px;
  background: #FFFFFF;
  border: 1px solid #DDDBDA;
  padding: 4px;
  -webkit-overflow-scrolling: touch;
}
.sf-path-item {
  position: relative;
  flex: 1;
  text-align: center;
  padding: 8px 12px 8px 20px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #514F4D;
  background: #F3F3F3;
  clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%, 10px 50%);
  margin-right: -6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.sf-path-item:first-child {
  clip-path: polygon(0% 0%, calc(100% - 10px) 0%, 100% 50%, calc(100% - 10px) 100%, 0% 100%);
  padding-left: 12px;
}
.sf-path-item.active { background: #0176D3; color: #FFFFFF; }
.sf-path-item.complete { background: #2E844A; color: #FFFFFF; }

/* Salesforce Sub-nav Active State */
.nav-item-active {
  color: #0176D3 !important;
  border-bottom: 3px solid #0176D3 !important;
  font-weight: 700 !important;
  background-color: rgba(1, 118, 211, 0.05) !important;
}

/* Kanban Column Drag & Drop Styles */
.kanban-col { transition: background-color 0.2s ease, border-color 0.2s ease; }
.kanban-col.drag-over {
  background-color: #E8F4FE !important;
  border: 2px dashed #0176D3 !important;
}
.kanban-card { cursor: grab; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.kanban-card:active { cursor: grabbing; }
.kanban-card.dragging { opacity: 0.4; transform: scale(0.98); }

/* Gauge Chart Center Label */
.gauge-container { position: relative; }
.gauge-center-text {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

/* React Hot Toast Bottom-Right Animations */
@keyframes reactHotToastInBottom {
  0% {
    transform: translate3d(0, 100%, 0) scale(0.6);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes reactHotToastOutBottom {
  0% {
    transform: translate3d(0, 0, -1px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 100%, -1px) scale(0.75);
    opacity: 0;
  }
}

.react-hot-toast-enter {
  animation: reactHotToastInBottom 0.35s cubic-bezier(0.21, 1.02, 0.71, 1) forwards;
}

.react-hot-toast-exit {
  animation: reactHotToastOutBottom 0.3s cubic-bezier(0.06, 0.71, 0.55, 1) forwards;
}

/* Funnel Chart Styles */
.funnel-bar { transition: width 0.5s ease-out, background-color 0.2s ease; }
.funnel-bar:hover { filter: brightness(0.95); }

/* Badges */
.sf-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25;
}
.sf-badge-new { background-color: #E8F4FE; color: #0176D3; }
.sf-badge-working { background-color: #FEF3D6; color: #9C6500; }
.sf-badge-contacted { background-color: #E6F4EA; color: #137333; }
.sf-badge-qualified { background-color: #D1E7DD; color: #0F5132; }
.sf-badge-unqualified { background-color: #F8D7DA; color: #842029; }

.sf-badge-prospecting { background-color: #E8F4FE; color: #0176D3; }
.sf-badge-qualification { background-color: #E0F2FE; color: #0369A1; }
.sf-badge-proposal { background-color: #FEF9C3; color: #A16207; }
.sf-badge-negotiation { background-color: #FFEDD5; color: #C2410C; }
.sf-badge-closed-won { background-color: #DCFCE7; color: #15803D; }
.sf-badge-closed-lost { background-color: #FEE2E2; color: #B91C1C; }

/* Modal Backdrop Blur */
.modal-backdrop {
  background-color: rgba(3, 45, 96, 0.5);
  backdrop-filter: blur(2px);
}