/* Subtle underline effect for nav links */
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: .4rem;
  padding-inline: 0.1rem; padding-block: .2rem; transition: color .15s ease;
}
.nav-link::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -4px; height: 2px;
  background: linear-gradient(90deg, #93c5fd, #86efac, #fbcfe8);
  transform: scaleX(0); transform-origin: center; transition: transform .2s ease;
  border-radius: 2px;
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: var(--brand600, #2563eb); font-weight: 600; }
.nav-link.active::after { transform: scaleX(1); }

/* Icons in nav */
.nav-icon { width: 16px; height: 16px; opacity: .8; }

/* Mobile collapsible panel */
.nav-collapsible {
  overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-4px);
  transition: max-height .28s ease, opacity .28s ease, transform .28s ease;
}
.nav-collapsible[data-open="true"] {
  max-height: 420px; opacity: 1; transform: translateY(0);
}

/* Nested mobile submenu for "الحساب" when logged out */
.mobile-submenu {
  overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-4px);
  transition: max-height .26s ease, opacity .26s ease, transform .26s ease;
  padding-inline-start: .5rem;
}
.mobile-submenu[data-open="true"] {
  max-height: 180px; opacity: 1; transform: translateY(0);
}

/* Simple avatar circle */
.avatar {
  width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center; font-size: .9rem; font-weight: 700;
  background: linear-gradient(135deg, var(--brand100, #dbeafe), #fff);
  color: var(--brand800, #1e40af); border: 1px solid rgba(2,6,23,0.06);
}

/* Small dropdown */
.menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + .5rem);
  min-width: 200px; background: #fff; border: 1px solid #e5e7eb; border-radius: .75rem;
  box-shadow: 0 14px 30px rgba(2,6,23,0.12), 0 6px 12px rgba(2,6,23,0.08);
  padding: .45rem; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease; z-index: 50;
}
.menu[data-open="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; }
.menu a {
  display:flex; align-items:center; gap:.6rem; padding:.6rem .7rem; border-radius:.6rem;
  color:#0f172a; text-decoration:none; white-space: nowrap;
}
.menu a:hover { background: #f8fafc; }

/* Approval banner */
.approval-banner {
  margin: .75rem 1rem 0; border-radius: .75rem;
  background: #fef9c3; border: 1px solid #fde68a; color: #854d0e;
  padding: .6rem .8rem; display: flex; align-items: center; gap: .6rem;
}
.approval-banner button {
  margin-inline-start: auto; background: transparent; border: 0; cursor: pointer;
  color: inherit; opacity: .75;
}
.approval-banner button:hover { opacity: 1; }

/* Helper shadow */
.shadow-soft { box-shadow: 0 10px 30px rgba(2,6,23,0.08), 0 4px 12px rgba(2,6,23,0.06); }