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

/* Base */
body {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  background-color: #f1f5f9;
  overflow: hidden;
}

/* Visibility helpers for page/view/modal states */
.page { display: none; }
.page.active { display: flex; }
.view { display: none; }
.view.active { display: flex; }
.modal { display: none; }
.modal.active { display: flex; }

/* Scrollbar */
.custom-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

/* Form controls */
input, select { font-size: 13px !important; }
.table-input {
  background: #fff;
  border: 1px solid #cbd5e1;
  width: 100%;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}
.table-input:focus {
  background: white;
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Navigation & accordions */
.nav-btn.active-nav {
  background: #1e293b;
  color: #3b82f6;
  border-left: 3px solid #3b82f6;
}
.nav-group-content { transition: max-height 0.3s ease-in-out; overflow: hidden; }

/* Tabs */
.tab-btn {
  padding: 10px 16px;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}
.tab-btn.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
  background: #eff6ff;
  border-radius: 8px 8px 0 0;
}
.modal-tab-content { display: none; }
.modal-tab-content.active { display: block; }

/* Landing look (used inside ERP too) */
.landing-bg { background-image: radial-gradient(circle at 50% -20%, #1e3a8a 0%, #020617 40%); }
.landing-gradient {
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Compact MVP tables: reduce row height and normalize multi-line cells */
#view-products table td,
#view-products table th,
#view-stock table td,
#view-stock table th {
  padding: 4px 10px !important;
  vertical-align: middle !important;
  line-height: 1.1 !important;
}

#view-products table td p,
#view-stock table td p {
  margin: 0 !important;
  line-height: 1.15 !important;
}

/* Specific override: reduce extra spacing from Tailwind `mt-0.5` */
#view-products table td p[class~="mt-0.5"],
#view-stock table td p[class~="mt-0.5"] {
  margin-top: 1px !important;
}