/* admin-header.css — Shared header, nav, avatar, and menu styles for admin pages.
   Import via <link rel="stylesheet" href="/css/admin-header.css"> before page-specific styles. */

/* ── HEADER BAR ──────────────────────────────────── */
.admin-header {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  padding: 16px 24px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.admin-header h1 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── BADGE (override background/color per page) ── */
.admin-badge {
  font-size: 10px;
  padding: 3px 8px;
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
  border-radius: 4px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ── HEADER RIGHT ────────────────────────────────── */
.header-right {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: #94a3b8;
  position: relative;
}

/* ── NAV LINKS ───────────────────────────────────── */
.header-nav-link {
  color: #94a3b8;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  transition: all 0.15s;
}
.header-nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

/* ── HEADER SEARCH BUTTON ────────────────────────── */
/* Search trigger for the dark header bar (mirrors nav-grid-btn). Rendered by
   js/ui/header-search.js, which wires it to the page's own search UI via
   data-action / a window function; optional .hsb-label / .hsb-kbd children
   give the labeled "Search ⌘K" form the admin panel uses. */
.header-search-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #94a3b8;
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
  line-height: 0;
  font-family: inherit;
}
.header-search-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}
/* Labeled variant (admin): a filled pill matching the .shortcuts-btn sitting
   next to it — an outlined button beside a filled one reads as a different
   class of control. The icon-only variant keeps the outlined nav-grid-btn
   look because THAT is what sits beside it on manufacturing/orders. */
.header-search-btn.has-label {
  padding: 4px 10px;
  line-height: 1.4;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}
.header-search-btn.has-label:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.header-search-btn .hsb-label {
  font-size: 12px;
  font-weight: 500;
}
.header-search-btn .hsb-kbd {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  padding: 1px 4px;
  font-family: inherit;
}
/* Width hedge alongside pointer: coarse — headless gates (and mouse-driven
   narrow windows) don't report a coarse pointer, so width alone must also
   guarantee the 40px target. */
@media (pointer: coarse), (max-width: 768px) {
  .header-search-btn {
    min-width: 40px;
    min-height: 40px;
  }
  .header-search-btn .hsb-kbd {
    display: none;
  }
}
@media (max-width: 480px) {
  /* Icon-only on phones — the 40px target above keeps it tappable. */
  .header-search-btn .hsb-label {
    display: none;
  }
  .header-search-btn.has-label {
    padding: 5px;
  }
}

/* ── AVATAR BUTTON ───────────────────────────────── */
.admin-avatar-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-family: inherit;
  position: relative;
}
.admin-avatar-btn:hover {
  background: rgba(37, 99, 235, 0.55);
  border-color: rgba(255, 255, 255, 0.45);
}
.admin-avatar-btn.open {
  background: rgba(37, 99, 235, 0.65);
  border-color: #fff;
}

/* ── DROPDOWN MENU ───────────────────────────────── */
.admin-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 260px;
  background: #fff;
  border-radius: 12px;
  box-shadow:
    0 20px 50px rgba(15, 23, 42, 0.18),
    0 0 0 1px var(--border);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.97);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 200;
  overflow: hidden;
}
.admin-menu-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* ── MENU PROFILE ────────────────────────────────── */
.admin-menu-profile {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
}
.admin-menu-profile .profile-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.admin-menu-profile .profile-email {
  font-size: 12px;
  color: var(--muted);
}
.admin-menu-profile .profile-role {
  display: inline-block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent);
}

/* ── MENU ITEMS ──────────────────────────────────── */
.admin-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  text-decoration: none;
}
.admin-menu-item:hover {
  background: #f1f5f9;
}
.admin-menu-item.danger {
  color: #dc2626;
}
.admin-menu-item.danger:hover {
  background: #fef2f2;
}

/* ── MOBILE ──────────────────────────────────────── */
@media (max-width: 768px) {
  .header-nav-link {
    display: none;
  }
  .admin-header h1 {
    font-size: 16px;
    gap: 8px;
  }
}
@media (max-width: 600px) {
  /* The injected #userEmail span (admin-menu.js) is ~150px — on phones it
     pushes the avatar past the viewport edge (long page titles + 360px).
     The avatar dropdown shows the same email, so nothing is lost. */
  .header-right #userEmail {
    display: none;
  }
}