/* ==========================================================================
   USER APPLICATION — NAVIGATION
   File: /user_app/assets/css/navigation.css

   Responsibility:
   - Primary application navigation
   - Sidebar navigation links
   - Nested navigation
   - Active / selected states
   - Navigation badges
   - Expand / collapse states
   - Keyboard accessibility
   - Mobile navigation helpers

   Architecture:
   variables.css
        ↓
   reset.css
        ↓
   base.css
        ↓
   layout.css
        ↓
   header.css
        ↓
   sidebar.css
        ↓
   navigation.css
   ========================================================================== */


/* ==========================================================================
   1. NAVIGATION ROOT
   ========================================================================== */

.app-navigation,
.navigation,
.user-navigation {
  width: 100%;
  min-width: 0;
}


/* ==========================================================================
   2. NAVIGATION HEADER / LABEL
   ========================================================================== */

.navigation__section {
  width: 100%;
  margin: 0 0 var(--space-5, 1.25rem);
}

.navigation__section:last-child {
  margin-bottom: 0;
}

.navigation__section-title {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);

  min-height: 2rem;
  padding: 0 var(--space-3, 0.75rem);

  color: var(--color-text-muted, #64748b);

  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  user-select: none;
}

.navigation__section-divider {
  height: 1px;
  margin: var(--space-4, 1rem) var(--space-3, 0.75rem);

  background: var(--color-border, #e2e8f0);
}


/* ==========================================================================
   3. NAVIGATION LIST
   ========================================================================== */

.navigation__list,
.navigation__sublist {
  display: flex;
  flex-direction: column;

  width: 100%;
  margin: 0;
  padding: 0;

  list-style: none;
}

.navigation__item {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

.navigation__sublist {
  position: relative;

  margin-top: var(--space-1, 0.25rem);
  margin-bottom: var(--space-1, 0.25rem);
  padding-left: var(--space-5, 1.25rem);
}


/* ==========================================================================
   4. NAVIGATION LINK
   ========================================================================== */

.navigation__link {
  position: relative;

  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);

  width: 100%;
  min-height: 2.75rem;

  margin: 0 0 var(--space-1, 0.25rem);
  padding: 0.625rem 0.75rem;

  border: 1px solid transparent;
  border-radius: var(--radius-md, 0.625rem);

  color: var(--color-text-secondary, #475569);
  background: transparent;

  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.4;

  text-align: left;
  text-decoration: none;

  cursor: pointer;

  transition:
    color var(--transition-fast, 150ms ease),
    background-color var(--transition-fast, 150ms ease),
    border-color var(--transition-fast, 150ms ease),
    box-shadow var(--transition-fast, 150ms ease),
    transform var(--transition-fast, 150ms ease);
}

.navigation__link:hover {
  color: var(--color-text-primary, #0f172a);
  background: var(--color-surface-hover, #f8fafc);
  border-color: var(--color-border, #e2e8f0);
  text-decoration: none;
}

.navigation__link:active {
  transform: translateY(1px);
}

.navigation__link:focus-visible {
  outline: none;

  border-color: var(--color-primary, #2563eb);

  box-shadow:
    0 0 0 3px
    var(--color-focus-ring, rgba(37, 99, 235, 0.18));
}


/* ==========================================================================
   5. NAVIGATION ICON
   ========================================================================== */

.navigation__icon {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: var(--icon-size-md, 1.25rem);
  height: var(--icon-size-md, 1.25rem);

  color: currentColor;

  line-height: 1;
}

.navigation__icon svg {
  display: block;

  width: 100%;
  height: 100%;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.navigation__icon img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}


/* ==========================================================================
   6. NAVIGATION LABEL
   ========================================================================== */

.navigation__label {
  min-width: 0;

  flex: 1 1 auto;

  overflow: hidden;

  color: inherit;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.navigation__description {
  display: block;

  margin-top: 0.125rem;

  color: var(--color-text-muted, #64748b);

  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-normal, 400);
  line-height: 1.35;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ==========================================================================
   7. ACTIVE NAVIGATION
   ========================================================================== */

.navigation__link.is-active,
.navigation__link.active,
.navigation__item.is-active > .navigation__link,
.navigation__item.active > .navigation__link,
.navigation__link[aria-current="page"] {
  color: var(--color-primary, #2563eb);

  background:
    var(--color-primary-soft, rgba(37, 99, 235, 0.09));

  border-color:
    var(--color-primary-border, rgba(37, 99, 235, 0.14));

  font-weight: var(--font-weight-semibold, 600);
}

.navigation__link.is-active:hover,
.navigation__link.active:hover,
.navigation__link[aria-current="page"]:hover {
  color: var(--color-primary-dark, #1d4ed8);

  background:
    var(--color-primary-soft-hover, rgba(37, 99, 235, 0.13));

  border-color:
    var(--color-primary-border, rgba(37, 99, 235, 0.18));
}

.navigation__link.is-active::before,
.navigation__link.active::before,
.navigation__link[aria-current="page"]::before {
  content: "";

  position: absolute;

  top: 50%;
  left: -1px;

  width: 3px;
  height: 1.5rem;

  border-radius: 0 var(--radius-full, 999px) var(--radius-full, 999px) 0;

  background: var(--color-primary, #2563eb);

  transform: translateY(-50%);
}


/* ==========================================================================
   8. ACTIVE ICON
   ========================================================================== */

.navigation__link.is-active .navigation__icon,
.navigation__link.active .navigation__icon,
.navigation__link[aria-current="page"] .navigation__icon {
  color: var(--color-primary, #2563eb);
}


/* ==========================================================================
   9. NAVIGATION BADGE
   ========================================================================== */

.navigation__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  min-width: 1.25rem;
  min-height: 1.25rem;

  padding: 0.125rem 0.4rem;

  border-radius: var(--radius-full, 999px);

  color: var(--color-text-secondary, #475569);
  background: var(--color-background-muted, #f1f5f9);

  font-size: 0.6875rem;
  font-weight: var(--font-weight-bold, 700);
  line-height: 1;

  white-space: nowrap;
}

.navigation__badge--primary {
  color: var(--color-primary, #2563eb);
  background: var(--color-primary-soft, rgba(37, 99, 235, 0.1));
}

.navigation__badge--success {
  color: var(--color-success, #16a34a);
  background: var(--color-success-soft, rgba(22, 163, 74, 0.1));
}

.navigation__badge--warning {
  color: var(--color-warning, #d97706);
  background: var(--color-warning-soft, rgba(217, 119, 6, 0.1));
}

.navigation__badge--danger {
  color: var(--color-danger, #dc2626);
  background: var(--color-danger-soft, rgba(220, 38, 38, 0.1));
}

.navigation__badge--info {
  color: var(--color-info, #0284c7);
  background: var(--color-info-soft, rgba(2, 132, 199, 0.1));
}


/* ==========================================================================
   10. NAVIGATION CHEVRON / TOGGLE
   ========================================================================== */

.navigation__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 1.5rem;
  height: 1.5rem;

  padding: 0;

  border: 0;
  border-radius: var(--radius-sm, 0.375rem);

  color: var(--color-text-muted, #64748b);
  background: transparent;

  cursor: pointer;

  transition:
    color var(--transition-fast, 150ms ease),
    background-color var(--transition-fast, 150ms ease),
    transform var(--transition-fast, 150ms ease);
}

.navigation__toggle:hover {
  color: var(--color-text-primary, #0f172a);
  background: var(--color-background-muted, #f1f5f9);
}

.navigation__toggle:focus-visible {
  outline: none;

  box-shadow:
    0 0 0 3px
    var(--color-focus-ring, rgba(37, 99, 235, 0.18));
}

.navigation__chevron {
  display: inline-flex;

  width: 1rem;
  height: 1rem;

  transition:
    transform var(--transition-fast, 150ms ease);
}

.navigation__chevron svg {
  width: 100%;
  height: 100%;

  fill: none;
  stroke: currentColor;

  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   11. EXPANDED / COLLAPSED NAVIGATION
   ========================================================================== */

.navigation__item.is-expanded > .navigation__link .navigation__chevron,
.navigation__item.expanded > .navigation__link .navigation__chevron,
.navigation__item[aria-expanded="true"] > .navigation__link .navigation__chevron {
  transform: rotate(90deg);
}

.navigation__item.is-collapsed > .navigation__sublist,
.navigation__item.collapsed > .navigation__sublist,
.navigation__item[aria-expanded="false"] > .navigation__sublist {
  display: none;
}

.navigation__item.is-expanded > .navigation__sublist,
.navigation__item.expanded > .navigation__sublist,
.navigation__item[aria-expanded="true"] > .navigation__sublist {
  display: flex;
}


/* ==========================================================================
   12. NESTED NAVIGATION
   ========================================================================== */

.navigation__sublist::before {
  content: "";

  position: absolute;

  top: 0.25rem;
  bottom: 0.25rem;
  left: 0.625rem;

  width: 1px;

  background: var(--color-border, #e2e8f0);
}

.navigation__subitem {
  position: relative;
}

.navigation__sublink {
  position: relative;

  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);

  width: 100%;
  min-height: 2.375rem;

  margin-bottom: 0.125rem;
  padding: 0.5rem 0.625rem 0.5rem 0.875rem;

  border: 1px solid transparent;
  border-radius: var(--radius-md, 0.625rem);

  color: var(--color-text-secondary, #475569);
  background: transparent;

  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-normal, 400);

  text-decoration: none;

  transition:
    color var(--transition-fast, 150ms ease),
    background-color var(--transition-fast, 150ms ease),
    border-color var(--transition-fast, 150ms ease);
}

.navigation__sublink:hover {
  color: var(--color-text-primary, #0f172a);
  background: var(--color-surface-hover, #f8fafc);
  text-decoration: none;
}

.navigation__sublink:focus-visible {
  outline: none;

  border-color: var(--color-primary, #2563eb);

  box-shadow:
    0 0 0 3px
    var(--color-focus-ring, rgba(37, 99, 235, 0.18));
}

.navigation__sublink.is-active,
.navigation__sublink.active,
.navigation__sublink[aria-current="page"] {
  color: var(--color-primary, #2563eb);

  background: var(--color-primary-soft, rgba(37, 99, 235, 0.08));

  font-weight: var(--font-weight-semibold, 600);
}

.navigation__subicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 1rem;
  height: 1rem;

  color: currentColor;
}

.navigation__subicon svg {
  width: 100%;
  height: 100%;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   13. DOT / STATUS INDICATOR
   ========================================================================== */

.navigation__dot {
  flex: 0 0 auto;

  width: 0.375rem;
  height: 0.375rem;

  border-radius: 50%;

  background: currentColor;
}

.navigation__dot--success {
  color: var(--color-success, #16a34a);
}

.navigation__dot--warning {
  color: var(--color-warning, #d97706);
}

.navigation__dot--danger {
  color: var(--color-danger, #dc2626);
}

.navigation__dot--info {
  color: var(--color-info, #0284c7);
}


/* ==========================================================================
   14. NAVIGATION GROUP
   ========================================================================== */

.navigation__group {
  position: relative;

  width: 100%;
}

.navigation__group + .navigation__group {
  margin-top: var(--space-2, 0.5rem);
}


/* ==========================================================================
   15. QUICK NAVIGATION / SHORTCUTS
   ========================================================================== */

.navigation__quick {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: var(--space-2, 0.5rem);

  margin-top: var(--space-3, 0.75rem);
}

.navigation__quick-link {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 2.5rem;

  padding: 0.5rem;

  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 0.625rem);

  color: var(--color-text-secondary, #475569);
  background: var(--color-surface, #ffffff);

  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-medium, 500);

  text-decoration: none;

  transition:
    color var(--transition-fast, 150ms ease),
    background-color var(--transition-fast, 150ms ease),
    border-color var(--transition-fast, 150ms ease),
    transform var(--transition-fast, 150ms ease);
}

.navigation__quick-link:hover {
  color: var(--color-primary, #2563eb);
  border-color: var(--color-primary-border, rgba(37, 99, 235, 0.2));
  background: var(--color-primary-soft, rgba(37, 99, 235, 0.06));

  text-decoration: none;
}

.navigation__quick-link:active {
  transform: translateY(1px);
}


/* ==========================================================================
   16. DISABLED NAVIGATION
   ========================================================================== */

.navigation__link.is-disabled,
.navigation__link[aria-disabled="true"],
.navigation__sublink.is-disabled,
.navigation__sublink[aria-disabled="true"] {
  color: var(--color-text-disabled, #94a3b8);

  cursor: not-allowed;

  opacity: 0.65;
  pointer-events: none;
}


/* ==========================================================================
   17. LOADING NAVIGATION
   ========================================================================== */

.navigation__item.is-loading > .navigation__link {
  cursor: wait;
}

.navigation__loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  width: 1rem;
  height: 1rem;

  border: 2px solid currentColor;
  border-right-color: transparent;

  border-radius: 50%;

  animation: navigation-spin 700ms linear infinite;
}

@keyframes navigation-spin {
  to {
    transform: rotate(360deg);
  }
}


/* ==========================================================================
   18. COLLAPSED SIDEBAR SUPPORT
   ========================================================================== */

.sidebar.is-collapsed .navigation__section-title,
body.sidebar-collapsed .navigation__section-title,
[data-sidebar-state="collapsed"] .navigation__section-title {
  width: 0;
  height: 0;

  margin: 0;
  padding: 0;

  overflow: hidden;
  opacity: 0;
}

.sidebar.is-collapsed .navigation__link,
body.sidebar-collapsed .navigation__link,
[data-sidebar-state="collapsed"] .navigation__link {
  justify-content: center;

  gap: 0;

  padding-right: 0.625rem;
  padding-left: 0.625rem;
}

.sidebar.is-collapsed .navigation__label,
body.sidebar-collapsed .navigation__label,
[data-sidebar-state="collapsed"] .navigation__label {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);
  white-space: nowrap;

  border: 0;
}

.sidebar.is-collapsed .navigation__description,
body.sidebar-collapsed .navigation__description,
[data-sidebar-state="collapsed"] .navigation__description {
  display: none;
}

.sidebar.is-collapsed .navigation__badge,
body.sidebar-collapsed .navigation__badge,
[data-sidebar-state="collapsed"] .navigation__badge {
  position: absolute;

  top: 0.25rem;
  right: 0.25rem;

  min-width: 0.625rem;
  width: 0.625rem;
  height: 0.625rem;

  padding: 0;

  overflow: hidden;

  font-size: 0;
}

.sidebar.is-collapsed .navigation__chevron,
body.sidebar-collapsed .navigation__chevron,
[data-sidebar-state="collapsed"] .navigation__chevron {
  display: none;
}

.sidebar.is-collapsed .navigation__sublist,
body.sidebar-collapsed .navigation__sublist,
[data-sidebar-state="collapsed"] .navigation__sublist {
  display: none !important;
}


/* ==========================================================================
   19. COLLAPSED NAVIGATION TOOLTIP
   --------------------------------------------------------------------------
   Works when the link contains data-tooltip or aria-label.
   ========================================================================== */

.sidebar.is-collapsed .navigation__link[data-tooltip]::after,
body.sidebar-collapsed .navigation__link[data-tooltip]::after,
[data-sidebar-state="collapsed"] .navigation__link[data-tooltip]::after {
  content: attr(data-tooltip);

  position: fixed;

  left: calc(
    var(--sidebar-collapsed-width, 80px) + 0.75rem
  );

  z-index: var(--z-tooltip, 1000);

  max-width: 15rem;

  padding: 0.5rem 0.7rem;

  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-md, 0.625rem);

  color: var(--color-text-primary, #0f172a);
  background: var(--color-surface-elevated, #ffffff);

  box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, 0.12));

  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-medium, 500);

  white-space: nowrap;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateX(-0.25rem);

  transition:
    opacity var(--transition-fast, 150ms ease),
    visibility var(--transition-fast, 150ms ease),
    transform var(--transition-fast, 150ms ease);
}

.sidebar.is-collapsed .navigation__link[data-tooltip]:hover::after,
.sidebar.is-collapsed .navigation__link[data-tooltip]:focus-visible::after,
body.sidebar-collapsed .navigation__link[data-tooltip]:hover::after,
body.sidebar-collapsed .navigation__link[data-tooltip]:focus-visible::after,
[data-sidebar-state="collapsed"] .navigation__link[data-tooltip]:hover::after,
[data-sidebar-state="collapsed"] .navigation__link[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;

  transform: translateX(0);
}


/* ==========================================================================
   20. MOBILE NAVIGATION
   ========================================================================== */

@media (max-width: 767px) {
  .navigation__section {
    margin-bottom: var(--space-4, 1rem);
  }

  .navigation__link {
    min-height: 2.875rem;

    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  .navigation__sublink {
    min-height: 2.5rem;
  }

  /*
   * Never use desktop collapsed navigation behavior on mobile.
   * Mobile sidebar should remain a readable off-canvas menu.
   */
  .sidebar.is-collapsed .navigation__section-title,
  body.sidebar-collapsed .navigation__section-title,
  [data-sidebar-state="collapsed"] .navigation__section-title {
    width: auto;
    height: auto;

    margin: revert;
    padding: revert;

    overflow: visible;
    opacity: 1;
  }

  .sidebar.is-collapsed .navigation__link,
  body.sidebar-collapsed .navigation__link,
  [data-sidebar-state="collapsed"] .navigation__link {
    justify-content: flex-start;

    gap: var(--space-3, 0.75rem);

    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  .sidebar.is-collapsed .navigation__label,
  body.sidebar-collapsed .navigation__label,
  [data-sidebar-state="collapsed"] .navigation__label {
    position: static;

    width: auto;
    height: auto;

    padding: 0;
    margin: 0;

    overflow: visible;

    clip: auto;
    white-space: nowrap;

    border: 0;
  }

  .sidebar.is-collapsed .navigation__badge,
  body.sidebar-collapsed .navigation__badge,
  [data-sidebar-state="collapsed"] .navigation__badge {
    position: static;

    width: auto;
    height: auto;

    min-width: 1.25rem;

    padding: 0.125rem 0.4rem;

    font-size: 0.6875rem;
  }

  .sidebar.is-collapsed .navigation__chevron,
  body.sidebar-collapsed .navigation__chevron,
  [data-sidebar-state="collapsed"] .navigation__chevron {
    display: inline-flex;
  }

  .sidebar.is-collapsed .navigation__sublist,
  body.sidebar-collapsed .navigation__sublist,
  [data-sidebar-state="collapsed"] .navigation__sublist {
    display: flex !important;
  }

  .sidebar.is-collapsed .navigation__link[data-tooltip]::after,
  body.sidebar-collapsed .navigation__link[data-tooltip]::after,
  [data-sidebar-state="collapsed"] .navigation__link[data-tooltip]::after {
    display: none;
  }
}


/* ==========================================================================
   21. SMALL MOBILE
   ========================================================================== */

@media (max-width: 479px) {
  .navigation__section-title {
    padding-right: 0.625rem;
    padding-left: 0.625rem;
  }

  .navigation__link {
    padding-right: 0.625rem;
    padding-left: 0.625rem;

    font-size: 0.8125rem;
  }

  .navigation__sublist {
    padding-left: 0.875rem;
  }

  .navigation__quick {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   22. TOUCH DEVICES
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
  .navigation__link:hover,
  .navigation__sublink:hover {
    color: inherit;
    background: transparent;
    border-color: transparent;
  }

  .navigation__link.is-active:hover,
  .navigation__link.active:hover,
  .navigation__link[aria-current="page"]:hover {
    color: var(--color-primary, #2563eb);
    background: var(--color-primary-soft, rgba(37, 99, 235, 0.09));
    border-color: var(--color-primary-border, rgba(37, 99, 235, 0.14));
  }
}


/* ==========================================================================
   23. DARK