/* ============================================================================
   IESMAC ERP — Material skin over Phoenix Bootstrap 5.3
   SPRINT 5 · Navigation: Tabs, Nav-pills, Stepper, Breadcrumb extensions
   ----------------------------------------------------------------------------
   Depends on: material-skin.css (Sprint 1) — for tokens
   Load order:
     1. theme.min.css        (Phoenix core)
     2. user.min.css         (empty Phoenix slot)
     3. style.css            (existing tweaks)
     4. material-skin.css           (Sprint 1)
     5. material-skin-surfaces.css  (Sprint 3)
     6. material-skin-data.css      (Sprint 4)
     7. material-skin-navigation.css   ← THIS FILE

   Tenant theming: All brand color references use --md-* variables only.
   ============================================================================ */


/* ============================================================================
   1. NAV-TABS — primary tabs with sliding indicator
   ============================================================================ */

html body .nav-tabs {
  border-bottom: 1px solid var(--md-surface-divider);
  margin-bottom: 0;
  gap: 0;
  --bs-nav-tabs-border-width: 0;
  --bs-nav-tabs-border-color: transparent;
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-color: var(--md-primary-40);
  --bs-nav-tabs-link-active-border-color: transparent;
  --bs-nav-tabs-link-hover-border-color: transparent;
}

html body .nav-tabs .nav-link,
html body .nav-tabs .nav-item .nav-link {
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  padding: 8px 14px 11px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--md-neutral-40) !important;
  letter-spacing: 0;
  position: relative;
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  border-radius: 0 !important;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
  margin-bottom: -1px;
}

html body .nav-tabs .nav-link:hover,
html body .nav-tabs .nav-link:focus {
  color: var(--md-neutral-10) !important;
  background-color: var(--md-neutral-98) !important;
  border-bottom-color: transparent !important;
}

html body .nav-tabs .nav-link.active,
html body .nav-tabs .nav-item.show .nav-link {
  color: var(--md-primary-40) !important;
  border-bottom: 2px solid var(--md-primary-40) !important;
  background-color: transparent !important;
  font-weight: 500 !important;
}

html body .nav-tabs .nav-link:focus-visible {
  outline: 2px solid var(--md-primary-40);
  outline-offset: -2px;
  border-radius: var(--md-radius-sm) !important;
}

/* Disabled tab */
html body .nav-tabs .nav-link.disabled,
html body .nav-tabs .nav-link:disabled {
  color: var(--md-neutral-70) !important;
  background-color: transparent !important;
  cursor: not-allowed;
}

/* Icon inside tab */
html body .nav-tabs .nav-link > .ti,
html body .nav-tabs .nav-link > i {
  font-size: 14px;
  line-height: 1;
}

/* Counter badge inside tab — neutral */
html body .nav-tabs .nav-link .tab-count,
html body .nav-tabs .nav-link .badge {
  background-color: var(--md-neutral-95) !important;
  color: var(--md-neutral-30) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  padding: 0 6px !important;
  border-radius: var(--md-radius-lg) !important;
  min-width: 18px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Active tab — its counter switches to tonal teal */
html body .nav-tabs .nav-link.active .tab-count,
html body .nav-tabs .nav-link.active .badge {
  background-color: var(--md-primary-90) !important;
  color: var(--md-primary-10) !important;
}

/* Alert badge inside tab — danger red for "unread" or "issues" */
html body .nav-tabs .nav-link .tab-alert,
html body .nav-tabs .nav-link .badge.bg-danger {
  background-color: var(--md-error-400) !important;
  color: #FFFFFF !important;
  min-width: 16px;
  height: 16px;
  font-size: 10px !important;
  padding: 0 5px !important;
  border-radius: var(--md-radius-lg) !important;
}

/* Tab content fade animation */
html body .tab-content > .tab-pane {
  display: none;
  opacity: 0;
  transition: opacity 200ms ease;
}

html body .tab-content > .tab-pane.active,
html body .tab-content > .tab-pane.show {
  display: block;
  opacity: 1;
}

html body .tab-content > .tab-pane.show.active {
  display: block;
  opacity: 1;
}

/* Vertical tabs variant (left-side rail) */
html body .nav-tabs.flex-column,
html body .nav-tabs-vertical {
  border-bottom: 0;
  border-right: 1px solid var(--md-surface-divider);
  padding-right: 0;
}

html body .nav-tabs.flex-column .nav-link,
html body .nav-tabs-vertical .nav-link {
  border-bottom: 0 !important;
  border-right: 2px solid transparent !important;
  margin-bottom: 0;
  margin-right: -1px;
  text-align: left;
  justify-content: flex-start;
  width: 100%;
  padding: 9px 14px !important;
}

html body .nav-tabs.flex-column .nav-link.active,
html body .nav-tabs-vertical .nav-link.active {
  border-bottom: 0 !important;
  border-right: 2px solid var(--md-primary-40) !important;
}

/* Scrollable tabs on overflow */
html body .nav-tabs-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html body .nav-tabs-scroll::-webkit-scrollbar {
  display: none;
}

html body .nav-tabs-scroll .nav-link {
  white-space: nowrap;
  flex-shrink: 0;
}


/* ============================================================================
   2. NAV-PILLS — secondary tabs, filter chips
   ============================================================================ */

html body .nav-pills {
  gap: 5px;
  --bs-nav-pills-border-radius: var(--md-radius-pill);
  --bs-nav-pills-link-active-color: #FFFFFF;
  --bs-nav-pills-link-active-bg: var(--md-primary-40);
}

html body .nav-pills .nav-link,
html body .nav-pills .nav-item .nav-link {
  background-color: var(--md-surface-tinted) !important;
  border: 0 !important;
  color: var(--md-neutral-30) !important;
  padding: 5px 11px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: var(--md-radius-pill) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  transition: background-color 140ms ease, color 140ms ease;
}

html body .nav-pills .nav-link:hover,
html body .nav-pills .nav-link:focus {
  background-color: var(--md-primary-95) !important;
  color: var(--md-primary-10) !important;
}

html body .nav-pills .nav-link.active,
html body .nav-pills .show > .nav-link {
  background-color: var(--md-primary-40) !important;
  color: #FFFFFF !important;
}

html body .nav-pills .nav-link.active:hover {
  background-color: var(--md-primary-30) !important;
}

html body .nav-pills .nav-link:focus-visible {
  outline: 2px solid var(--md-primary-40);
  outline-offset: 2px;
}

/* Outlined chip variant — for secondary filter rows */
html body .nav-pills.nav-pills-outlined .nav-link,
html body .nav-chips .nav-link {
  background-color: var(--md-surface-card) !important;
  border: 1px solid var(--md-primary-90) !important;
  color: var(--md-neutral-30) !important;
  padding: 4px 10px !important;
}

html body .nav-pills.nav-pills-outlined .nav-link:hover,
html body .nav-chips .nav-link:hover {
  background-color: var(--md-primary-95) !important;
  border-color: var(--md-primary-80) !important;
  color: var(--md-primary-10) !important;
}

html body .nav-pills.nav-pills-outlined .nav-link.active,
html body .nav-chips .nav-link.active {
  background-color: var(--md-primary-90) !important;
  border-color: var(--md-primary-40) !important;
  color: var(--md-primary-10) !important;
}


/* ============================================================================
   3. STEPPER — horizontal (primary) and vertical (wizard)
   ============================================================================ */

/* Container */
html body .stepper,
html body .md-stepper {
  font-family: 'Inter', sans-serif;
  --stepper-size: 28px;
  --stepper-rail-color: var(--md-neutral-95);
  --stepper-rail-active-color: var(--md-primary-40);
}

/* Horizontal stepper */
html body .stepper.stepper-horizontal,
html body .stepper-horizontal {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  position: relative;
  padding: 6px 0;
}

/* Connector rail — base (full width, gray) */
html body .stepper-horizontal::before {
  content: '';
  position: absolute;
  top: calc(6px + var(--stepper-size) / 2 - 1px);
  left: calc(100% / var(--stepper-count, 5) / 2);
  right: calc(100% / var(--stepper-count, 5) / 2);
  height: 2px;
  background-color: var(--stepper-rail-color);
  z-index: 0;
}

/* Connector progress overlay — set via --stepper-progress (0–100) inline */
html body .stepper-horizontal::after {
  content: '';
  position: absolute;
  top: calc(6px + var(--stepper-size) / 2 - 1px);
  left: calc(100% / var(--stepper-count, 5) / 2);
  width: calc((100% - 100% / var(--stepper-count, 5)) * var(--stepper-progress, 0) / 100);
  height: 2px;
  background-color: var(--stepper-rail-active-color);
  z-index: 0;
  transition: width 320ms ease;
}

/* Step item */
html body .stepper-horizontal .step,
html body .stepper-horizontal .stepper-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  padding: 0 6px;
}

/* Step circle indicator */
html body .stepper-horizontal .step-indicator,
html body .stepper-horizontal .step > .indicator,
html body .stepper-horizontal .stepper-step > .step-circle {
  width: var(--stepper-size);
  height: var(--stepper-size);
  border-radius: 50%;
  background-color: var(--md-neutral-95);
  color: var(--md-neutral-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 0 0 4px var(--md-surface-card);
  flex-shrink: 0;
  transition: background-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

/* Step label */
html body .stepper-horizontal .step-label,
html body .stepper-horizontal .step > .label,
html body .stepper-horizontal .stepper-step > .step-label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--md-neutral-40);
  margin-top: 8px;
  text-align: center;
  line-height: 1.3;
  letter-spacing: 0;
}

/* Step supporting text */
html body .stepper-horizontal .step-supporting,
html body .stepper-horizontal .step > .supporting,
html body .stepper-horizontal .stepper-step > .step-supporting {
  font-size: 10.5px;
  color: var(--md-neutral-50);
  margin-top: 2px;
  text-align: center;
  line-height: 1.3;
}

/* State: completed */
html body .stepper-horizontal .step.completed .step-indicator,
html body .stepper-horizontal .step.completed > .indicator,
html body .stepper-horizontal .stepper-step.completed > .step-circle,
html body .stepper-horizontal .step[data-state="completed"] .step-indicator {
  background-color: var(--md-primary-40);
  color: #FFFFFF;
}

html body .stepper-horizontal .step.completed .step-label,
html body .stepper-horizontal .stepper-step.completed .step-label,
html body .stepper-horizontal .step[data-state="completed"] .step-label {
  color: var(--md-neutral-10);
}

/* State: active */
html body .stepper-horizontal .step.active .step-indicator,
html body .stepper-horizontal .step.active > .indicator,
html body .stepper-horizontal .stepper-step.active > .step-circle,
html body .stepper-horizontal .step[data-state="active"] .step-indicator {
  background-color: var(--md-surface-card);
  color: var(--md-primary-40);
  box-shadow: 0 0 0 2px var(--md-primary-40), 0 0 0 6px var(--md-surface-card);
}

html body .stepper-horizontal .step.active .step-label,
html body .stepper-horizontal .stepper-step.active .step-label,
html body .stepper-horizontal .step[data-state="active"] .step-label {
  color: var(--md-primary-40);
  font-weight: 600;
}

html body .stepper-horizontal .step.active .step-supporting,
html body .stepper-horizontal .stepper-step.active .step-supporting,
html body .stepper-horizontal .step[data-state="active"] .step-supporting {
  color: var(--md-warning-800);
}

/* State: pending (default — no extra class needed but explicit ok) */
html body .stepper-horizontal .step.pending .step-indicator,
html body .stepper-horizontal .stepper-step.pending > .step-circle,
html body .stepper-horizontal .step[data-state="pending"] .step-indicator {
  background-color: var(--md-neutral-95);
  color: var(--md-neutral-50);
}

/* State: error */
html body .stepper-horizontal .step.error .step-indicator,
html body .stepper-horizontal .stepper-step.error > .step-circle,
html body .stepper-horizontal .step[data-state="error"] .step-indicator {
  background-color: var(--md-error-50);
  color: var(--md-error-600);
  box-shadow: 0 0 0 2px var(--md-error-400), 0 0 0 6px var(--md-surface-card);
}

html body .stepper-horizontal .step.error .step-label,
html body .stepper-horizontal .step[data-state="error"] .step-label {
  color: var(--md-error-800);
}


/* ----- Vertical stepper ----- */

html body .stepper.stepper-vertical,
html body .stepper-vertical {
  display: flex;
  flex-direction: column;
  gap: 0;
}

html body .stepper-vertical .step,
html body .stepper-vertical .stepper-step {
  display: flex;
  gap: 14px;
  padding-bottom: 14px;
  position: relative;
}

html body .stepper-vertical .step:last-child {
  padding-bottom: 0;
}

/* Vertical rail (left column) — circle + connector line */
html body .stepper-vertical .step > .rail,
html body .stepper-vertical .step-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: var(--stepper-size, 28px);
}

html body .stepper-vertical .step .step-indicator,
html body .stepper-vertical .step > .rail > .indicator,
html body .stepper-vertical .stepper-step > .rail > .step-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: var(--md-neutral-95);
  color: var(--md-neutral-50);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

html body .stepper-vertical .step > .rail > .connector,
html body .stepper-vertical .step .step-connector {
  width: 2px;
  flex: 1;
  background-color: var(--md-neutral-95);
  margin-top: 2px;
  min-height: 16px;
}

html body .stepper-vertical .step:last-child > .rail > .connector,
html body .stepper-vertical .step:last-child .step-connector {
  display: none;
}

/* Step content (right column) */
html body .stepper-vertical .step > .step-content,
html body .stepper-vertical .step > .content {
  flex: 1;
  padding-bottom: 4px;
}

html body .stepper-vertical .step .step-label,
html body .stepper-vertical .step > .step-content > .label {
  font-size: 13px;
  font-weight: 600;
  color: var(--md-neutral-40);
  line-height: 1.35;
}

html body .stepper-vertical .step .step-supporting,
html body .stepper-vertical .step > .step-content > .supporting {
  font-size: 11.5px;
  color: var(--md-neutral-40);
  margin-top: 2px;
  line-height: 1.35;
}

/* Step body — form content for active step */
html body .stepper-vertical .step .step-body,
html body .stepper-vertical .step > .step-content > .body {
  margin-top: 10px;
}

/* Vertical states */

html body .stepper-vertical .step.completed .step-indicator,
html body .stepper-vertical .step[data-state="completed"] .step-indicator {
  background-color: var(--md-primary-40);
  color: #FFFFFF;
}

html body .stepper-vertical .step.completed > .rail > .connector,
html body .stepper-vertical .step[data-state="completed"] .step-connector {
  background-color: var(--md-primary-40);
}

html body .stepper-vertical .step.completed .step-label,
html body .stepper-vertical .step[data-state="completed"] .step-label {
  color: var(--md-neutral-10);
}

html body .stepper-vertical .step.active .step-indicator,
html body .stepper-vertical .step[data-state="active"] .step-indicator {
  background-color: var(--md-surface-card);
  color: var(--md-primary-40);
  box-shadow: 0 0 0 2px var(--md-primary-40);
}

html body .stepper-vertical .step.active .step-label,
html body .stepper-vertical .step[data-state="active"] .step-label {
  color: var(--md-primary-40);
}

html body .stepper-vertical .step.error .step-indicator,
html body .stepper-vertical .step[data-state="error"] .step-indicator {
  background-color: var(--md-error-50);
  color: var(--md-error-600);
  box-shadow: 0 0 0 2px var(--md-error-400);
}

html body .stepper-vertical .step.error .step-label,
html body .stepper-vertical .step[data-state="error"] .step-label {
  color: var(--md-error-800);
}

/* Summary chip inside completed step */
html body .stepper-vertical .step .step-summary {
  margin-top: 8px;
  padding: 8px 12px;
  background-color: var(--md-surface-tinted);
  border-radius: var(--md-radius-lg);
  font-size: 11.5px;
  color: var(--md-primary-10);
}

/* Step actions row (Back / Continue) */
html body .stepper-vertical .step .step-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}


/* ============================================================================
   4. BREADCRUMB EXTENSIONS — page header, detail nav
   ============================================================================ */

/* Page header card pattern — breadcrumb + title + actions */
html body .page-header,
html body .page-header-card {
  background-color: var(--md-surface-card);
  border-radius: var(--md-radius-xl);
  box-shadow: var(--md-elev-1);
  padding: 14px 18px;
  margin-bottom: 14px;
}

html body .page-header .breadcrumb {
  margin-bottom: 10px;
}

html body .page-header-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

html body .page-header-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--md-neutral-10);
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
}

html body .page-header-supporting,
html body .page-header-subtitle {
  font-size: 12.5px;
  color: var(--md-neutral-40);
  margin-top: 2px;
}

html body .page-header-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

html body .page-header-actions .btn {
  height: auto !important;
  padding: 6px 11px !important;
  font-size: 12px !important;
}

/* Detail navigation bar — back + prev/next + position indicator */
html body .detail-nav,
html body .record-nav {
  background-color: var(--md-surface-card);
  border-radius: var(--md-radius-xl);
  box-shadow: var(--md-elev-1);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
}

html body .detail-nav a,
html body .record-nav a {
  color: var(--md-neutral-30);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 400;
}

html body .detail-nav a.prev-next,
html body .detail-nav a.detail-prev,
html body .detail-nav a.detail-next,
html body .record-nav a.prev-next {
  color: var(--md-primary-40);
  font-weight: 500;
}

html body .detail-nav a:hover,
html body .record-nav a:hover {
  color: var(--md-primary-30);
}

html body .detail-nav .nav-divider,
html body .record-nav .nav-divider {
  width: 1px;
  height: 14px;
  background-color: var(--md-surface-border);
  margin: 0 4px;
}

html body .detail-nav .position-indicator,
html body .record-nav .position-indicator,
html body .detail-nav .record-position {
  margin-left: auto;
  color: var(--md-neutral-40);
  font-size: 11.5px;
}


/* ============================================================================
   5. ACCESSIBILITY — focus and reduced motion
   ============================================================================ */

html body .nav-tabs .nav-link:focus-visible,
html body .nav-pills .nav-link:focus-visible,
html body .stepper .step-indicator:focus-visible {
  outline: 2px solid var(--md-primary-40);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html body .stepper-horizontal::after { transition: none; }
  html body .tab-content > .tab-pane { transition: none; }
  html body .nav-tabs .nav-link,
  html body .nav-pills .nav-link,
  html body .stepper .step-indicator { transition: none; }
}


/* ============================================================================
   6. RESPONSIVE — mobile breakpoints
   ============================================================================ */

@media (max-width: 768px) {
  /* Tabs become horizontal scroll on mobile */
  html body .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  html body .nav-tabs::-webkit-scrollbar { display: none; }
  html body .nav-tabs .nav-link {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 8px 10px 11px !important;
    font-size: 12px !important;
  }

  /* Nav pills also wrap if too many */
  html body .nav-pills {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  /* Horizontal stepper — labels truncate */
  html body .stepper-horizontal .step-label {
    font-size: 11px;
  }
  html body .stepper-horizontal .step-supporting {
    display: none;
  }

  /* Page header stacks */
  html body .page-header-title-row {
    flex-direction: column;
    align-items: flex-start;
  }
  html body .page-header-actions {
    width: 100%;
  }

  /* Detail nav collapses */
  html body .detail-nav .record-position,
  html body .detail-nav .position-indicator {
    display: none;
  }
}

@media (max-width: 576px) {
  /* Horizontal stepper — show only active step on very small screens */
  html body .stepper-horizontal.stepper-mobile-compact .step {
    display: none;
  }
  html body .stepper-horizontal.stepper-mobile-compact .step.active {
    display: flex;
  }
}


/* ============================================================================
   END OF SPRINT 5
   Coming next:
   · Sprint 6: charts (ECharts theme integration), sparklines, gauges
   · Sprint 7: kanban, calendar, file manager, wizard, timeline
   · Sprint 8: Flatpickr, TinyMCE, Choices.js, Dropzone polish
   ============================================================================ */