/* ===== MATERIAL ICONS ===== */
.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
}

/* ===== SIDEBAR ===== */
#sidebar {
  width: 260px;
  min-width: 260px;
  transition: width 200ms ease, min-width 200ms ease;
  overflow: hidden;
}

#sidebar.collapsed {
  width: 64px;
  min-width: 64px;
}

#sidebar .sidebar-label {
  transition: opacity 200ms ease, width 200ms ease;
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
}

#sidebar.collapsed .sidebar-label {
  opacity: 0;
  width: 0;
}

#sidebar .sidebar-logo-text {
  transition: opacity 200ms ease;
}

#sidebar.collapsed .sidebar-logo-text {
  opacity: 0;
  pointer-events: none;
}

#sidebar .sidebar-submenu {
  transition: max-height 200ms ease, opacity 200ms ease;
  max-height: 500px;
  opacity: 1;
  overflow: hidden;
}

#sidebar.collapsed .sidebar-submenu {
  max-height: 0;
  opacity: 0;
}

/* ===== SLIDE-OVER ===== */
.slide-over-overlay {
  animation: fadeInOverlay 200ms ease-out forwards;
}

.slide-over-panel {
  animation: slideInFromRight 200ms ease-out forwards;
}

.slide-over-panel.closing {
  animation: slideOutToRight 200ms ease-in forwards;
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInFromRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes slideOutToRight {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

/* ===== MODAL ===== */
.modal-overlay {
  animation: modalFadeIn 150ms ease forwards;
}

.modal-panel {
  animation: modalScaleIn 150ms ease forwards;
}

.modal-panel.closing {
  animation: modalScaleOut 150ms ease forwards;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

/* ===== TOAST ===== */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast-item {
  pointer-events: all;
  animation: toastSlideIn 200ms ease-out forwards;
  min-width: 280px;
  max-width: 400px;
}

.toast-item.dismissing {
  animation: toastSlideOut 200ms ease-in forwards;
}

@keyframes toastSlideIn {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toastSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(100%); }
}

/* ===== PAGE TRANSITION ===== */
.page-fade-in {
  animation: pageFadeIn 150ms ease forwards;
}

@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ===== KANBAN DRAG ===== */
.kanban-card.dragging {
  opacity: 0.6;
  cursor: grabbing;
}

.kanban-column.drag-over {
  border: 2px solid #139995 !important;
  background-color: #E6F7F7;
}

/* ===== KPI TREND ARROW ===== */
@keyframes trendBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

.trend-arrow {
  animation: trendBounce 600ms ease 300ms 2;
}

/* ===== URGENCY CRITICAL PULSE ===== */
@keyframes pulse-magenta {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199, 16, 127, 0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(199, 16, 127, 0); }
}

.pulse-magenta {
  animation: pulse-magenta 1.5s infinite;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #F4F7F7;
}

::-webkit-scrollbar-thumb {
  background: #139995;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #0F7A77;
}

/* ===== RANGE / SLIDER ===== */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: #E2E8E8;
  border-radius: 2px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #139995;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #139995;
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ===== SKELETON PULSE ===== */
@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

.skeleton-pulse {
  animation: skeletonPulse 1.5s ease-in-out infinite;
  background: #E2E8E8;
  border-radius: 4px;
}

/* ===== PRINT ===== */
@media print {
  #sidebar,
  #topbar,
  .no-print {
    display: none !important;
  }

  #main {
    margin-left: 0 !important;
    padding: 0 !important;
  }

  table thead {
    display: table-header-group;
  }

  table tr {
    page-break-inside: avoid;
  }

  body {
    background: white;
    color: black;
  }
}

/* ===== MISC UTILITIES ===== */
.nav-item-active {
  background-color: rgba(19, 153, 149, 0.15);
  color: #139995;
}

.nav-item-active .material-icons-outlined {
  color: #139995;
}

.lead-card {
  cursor: grab;
}

.lead-card:active {
  cursor: grabbing;
}

/* Heatmap cell */
.heatmap-cell {
  transition: background-color 200ms ease;
}

/* Inline edit */
.inline-edit-field {
  cursor: pointer;
  border-bottom: 1px dashed #D1D9D9;
  transition: border-color 150ms ease;
}

.inline-edit-field:hover {
  border-bottom-color: #139995;
}