@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --primary: #4318FF;
  --primary-hover: #3311CC;
  --primary-light: #F4F7FE;
  --navy: #1B2559;
  --secondary: #A3AED0;
  --body-bg: #F4F7FE;
  --card-bg: #FFFFFF;
  --success: #05CD99;
  --success-bg: #E6FAF5;
  --warning: #FFB547;
  --warning-bg: #FFF8ED;
  --danger: #EE5D50;
  --danger-bg: #FEEFEE;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--body-bg);
  color: var(--navy);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* Dribbble Style Soft Cards */
.card-soft {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0px 18px 40px rgba(112, 144, 176, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.6);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-soft:hover {
  box-shadow: 0px 22px 45px rgba(112, 144, 176, 0.12);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #F4F7FE;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Dribbble Sidebar Active Pill */
.nav-link-active {
  background-color: #4318FF !important;
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0px 10px 20px rgba(67, 24, 255, 0.2);
}

.nav-link-active svg {
  stroke: #ffffff !important;
}

/* Status Badges */
.badge-success {
  background-color: #E6FAF5;
  color: #05CD99;
  border: 1px solid rgba(5, 205, 153, 0.2);
}

.badge-warning {
  background-color: #FFF8ED;
  color: #FFB547;
  border: 1px solid rgba(255, 181, 71, 0.2);
}

.badge-danger {
  background-color: #FEEFEE;
  color: #EE5D50;
  border: 1px solid rgba(238, 93, 80, 0.2);
}

.badge-info {
  background-color: #EFF4FB;
  color: #4318FF;
  border: 1px solid rgba(67, 24, 255, 0.15);
}

/* Pulse animation for active monitoring */
@keyframes pulse-dot {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.pulse-indicator {
  animation: pulse-dot 2s infinite ease-in-out;
}

/* Dribbble Search Capsule */
.search-capsule {
  background: #FFFFFF;
  border-radius: 30px;
  box-shadow: 0px 10px 25px rgba(112, 144, 176, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: all 0.2s ease;
}

.search-capsule:focus-within {
  border-color: #4318FF;
  box-shadow: 0px 10px 25px rgba(67, 24, 255, 0.15);
}

/* Modal Backdrop Blur */
.modal-backdrop {
  backdrop-filter: blur(8px);
  background-color: rgba(15, 23, 42, 0.45);
}