/**
 * woodelivery Merchant Hub - Portal Stylesheet
 * High-performance, clean bento aesthetics for store operators.
 */

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

:root {
  --portal-bg: #F4F5F7;
  --portal-surface: #FFFFFF;
  --portal-sidebar: #0B0D0E;
  --portal-onyx: #111315;
  --portal-mint: #4EFA94;
  --portal-mint-hover: #40DF83;
  --portal-forest: #163828;
  --portal-border: #E5E7EB;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--portal-bg);
  color: var(--portal-onyx);
  font-size: 14px;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Sidebar Navigation Items */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: 14px;
  font-size: 0.825rem;
  font-weight: 600;
  color: #64748B;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

.nav-item:hover {
  color: #111315;
  background-color: #F1F5F9;
}

.nav-item.active {
  color: #111315;
  background-color: var(--portal-mint);
  box-shadow: 0 4px 14px rgba(78, 250, 148, 0.25);
  font-weight: 700;
}

.nav-item.active i {
  color: #111315;
}

/* Secret Key Masking */
.secret-mask {
  filter: blur(4px);
  user-select: none;
  transition: filter 0.2s ease;
}

.secret-revealed {
  filter: none;
  user-select: all;
}

/* Custom Scrollbar for tables */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Card Transitions */
.portal-card {
  background-color: #FFFFFF;
  border: 1px solid var(--portal-border);
  border-radius: 24px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.portal-card:hover {
  border-color: #CBD5E1;
}

/* Status Pulse */
.pulse-mint {
  box-shadow: 0 0 0 0 rgba(78, 250, 148, 0.7);
  animation: pulse-mint 2s infinite;
}

@keyframes pulse-mint {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(78, 250, 148, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(78, 250, 148, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(78, 250, 148, 0);
  }
}