/*
 * CoPlanner — Standard tab component styles.
 *
 * Overrides Bootstrap 5's default 3-sided border-box tab appearance with a
 * clean underline-only style. All values measured from the rendered
 * management-dashboard tab implementation.
 *
 * Applies globally to every .nav-tabs in the app. Page-specific colour
 * overrides (e.g. #managementTabs purple accent) should be scoped by their
 * own ID/class selector and placed in the relevant view or CSS file.
 */

/* ── Tab container ──────────────────────────────────────────────────────── */
.nav-tabs {
  border-bottom: 2px solid #e9ecef;
}

/* ── Individual tab links ───────────────────────────────────────────────── */
/* Remove Bootstrap's default 3-sided border-box; use underline-only instead */
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: #6c757d;
  font-weight: 500;
  margin-bottom: -2px;           /* align underline with container border */
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.nav-tabs .nav-link:hover:not(.active) {
  color: var(--cp-active-color, #1890ff);
  border-bottom-color: rgba(24, 144, 255, 0.3);
  background-color: rgba(24, 144, 255, 0.05);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--cp-active-color, #1890ff);
  border-color: transparent;
  border-bottom-color: var(--cp-active-color, #1890ff);
  background-color: rgba(24, 144, 255, 0.05);
}

/* Disabled state */
.nav-tabs .nav-link.disabled {
  color: #adb5bd;
  border-color: transparent;
  background-color: transparent;
}

/* ── Tab pane fade-in animation ─────────────────────────────────────────── */
.tab-pane.fade.show {
  animation: cp-tab-fadein 0.2s ease-out;
}

@keyframes cp-tab-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Skeleton loader for lazy-loaded tab content ────────────────────────── */
/* .dashboard-skeleton is kept as an alias for the management dashboard partials */
.cp-tab-skeleton,
.dashboard-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: cp-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}

@keyframes cp-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Legacy alias for management dashboard skeleton partials */
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Mobile: horizontal scroll on small screens ─────────────────────────── */
@media (max-width: 768px) {
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .nav-tabs .nav-link {
    white-space: nowrap;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}