/* ============================================================
   KIPUS — MODERN HEADER
   Requires kipus.css (design tokens & BS5 overrides).
   ============================================================ */

/* ── Header bar ──────────────────────────────────────── */
.main-header.navbar {
  background: #f5f6f8 !important;
  border-bottom: 1px solid #e8eaed !important;
  box-shadow: none !important;
  min-height: 56px !important;
  padding: 0 1.25rem !important;
  font-family: var(--font-main) !important;
}

/* ── Hamburger toggle ────────────────────────────────── */
.main-header .kp-pushmenu {
  color: var(--tx-muted) !important;
  padding: 0.35rem 0.5rem !important;
  border-radius: var(--item-radius) !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  line-height: 1 !important;
}

.main-header .kp-pushmenu:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--tx-primary) !important;
}

/* ── Generic nav-link style ──────────────────────────── */
.main-header .navbar-nav .nav-link {
  color: var(--tx-secondary) !important;
  font-size: 1rem !important;
  padding: 0.4rem 0.55rem !important;
  border-radius: var(--item-radius) !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.main-header .navbar-nav .nav-link:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--tx-primary) !important;
}

/* ── Search pill ─────────────────────────────────────── */
.main-header .kp-search-inner {
  border: 1px solid var(--sb-border) !important;
  border-radius: 8px !important;
  padding: 0.38rem 0.75rem !important;
  width: 210px !important;
  cursor: text !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, width 0.2s ease !important;
}

.main-header .kp-search-inner:focus-within {
  border-color: var(--kp-red) !important;
  box-shadow: 0 0 0 3px var(--kp-red-ring) !important;
  width: 270px !important;
}

.main-header .kp-search-icon {
  color: var(--tx-muted) !important;
  font-size: 0.78rem !important;
}

.main-header .kp-search-input {
  outline: none !important;
  color: var(--tx-primary) !important;
  font-size: 0.82rem !important;
  min-width: 0 !important;
}

.main-header .kp-search-input::placeholder { color: var(--tx-muted) !important; }

.main-header .kp-search-kbd {
  font-family: var(--font-mono) !important;
  font-size: 0.6rem !important;
  font-weight: 500 !important;
  color: var(--tx-muted) !important;
  background: #f5f6f8 !important;
  border: 1px solid #dde1e8 !important;
  border-radius: 4px !important;
  padding: 1px 5px !important;
  transition: opacity 0.15s ease !important;
}

.main-header .kp-search-inner:focus-within .kp-search-kbd { opacity: 0 !important; }

/* ── Notification / message badges ───────────────────── */
.main-header .navbar-badge {
  font-family: var(--font-mono) !important;
  font-size: 0.58rem !important;
  font-weight: 600 !important;
  padding: 2px 5px !important;
  border-radius: 20px !important;
  top: 3px !important;
  right: 2px !important;
}

.main-header .badge.bg-warning,
.main-header .navbar-badge.bg-warning,
.main-header .badge.bg-danger,
.main-header .navbar-badge.bg-danger {
  background: var(--kp-red) !important;
  color: #fff !important;
}

/* ── Dropdown menus ──────────────────────────────────── */
.main-header .dropdown-menu {
  border: 1px solid var(--sb-border) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  border-radius: 10px !important;
  padding: 0.35rem !important;
  font-family: var(--font-main) !important;
  min-width: 240px !important;
}

.main-header .dropdown-item {
  border-radius: 6px !important;
  font-size: 0.85rem !important;
  color: var(--tx-primary) !important;
  padding: 0.5rem 0.75rem !important;
  transition: background 0.12s ease !important;
}

.main-header .dropdown-item:hover { background: var(--item-hover) !important; }

.main-header .dropdown-header {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--tx-muted) !important;
  padding: 0.5rem 0.75rem 0.3rem !important;
}

.main-header .dropdown-divider {
  border-color: var(--sb-border) !important;
  margin: 0.25rem 0 !important;
}

.main-header .dropdown-footer {
  font-size: 0.8rem !important;
  color: var(--kp-red) !important;
  text-align: center !important;
  font-weight: 500 !important;
}

/* ── User avatar (header) ────────────────────────────── */
.main-header .kp-header-avatar {
  width: 32px !important;
  height: 32px !important;
  background: var(--kp-red) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: opacity 0.15s ease !important;
  box-shadow: 0 1px 3px rgba(153, 27, 27, 0.3) !important;
}

.main-header .kp-header-avatar:hover { opacity: 0.85 !important; }

.main-header .kp-header-avatar-img {
  width: 32px !important;
  height: 32px !important;
  object-fit: cover !important;
}

.main-header .kp-um-avatar-img {
  width: 36px !important;
  height: 36px !important;
  object-fit: cover !important;
}

/* ── Hide AdminLTE elements replaced by our layout ───── */
.main-header [data-widget="fullscreen"],
.main-header [data-widget="control-sidebar"],
.main-header [data-widget="navbar-search"] {
  display: none !important;
}

/* ── User dropdown nav-link ──────────────────────────── */
.main-header .kp-user-dropdown .nav-link {
  padding: 0 !important;
  background: transparent !important;
  line-height: 1 !important;
}

/* ── User dropdown menu ──────────────────────────────── */
.main-header .kp-user-menu {
  min-width: 220px !important;
  padding: 0.4rem !important;
  border: 1px solid var(--sb-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  background: #fff !important;
}

.main-header .kp-user-menu-header {
  padding: 0.65rem 0.75rem 0.75rem !important;
}

.main-header .kp-um-avatar {
  width: 36px !important;
  height: 36px !important;
  background: var(--kp-red) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
}

.main-header .kp-um-info {
  gap: 2px !important;
}

.main-header .kp-um-name {
  font-size: 0.85rem !important;
  color: var(--tx-primary) !important;
}

.main-header .kp-um-role {
  font-size: 0.72rem !important;
  color: var(--tx-muted) !important;
}

.main-header .kp-user-menu .dropdown-item {
  border-radius: 7px !important;
  font-size: 0.855rem !important;
  color: var(--tx-primary) !important;
  padding: 0.52rem 0.75rem !important;
}

.main-header .kp-user-menu .dropdown-item:hover {
  background: var(--item-hover) !important;
  color: var(--tx-primary) !important;
}

.main-header .kp-user-menu .dropdown-item i {
  color: var(--tx-muted) !important;
  width: 14px !important;
  text-align: center !important;
}

.main-header .kp-user-menu .kp-logout { color: var(--kp-red) !important; }
.main-header .kp-user-menu .kp-logout:hover { background: var(--kp-red-alpha) !important; }
.main-header .kp-user-menu .kp-logout i { color: var(--kp-red) !important; }

.main-header .kp-user-menu .dropdown-divider {
  border-color: var(--sb-border) !important;
  margin: 0.3rem 0 !important;
}

/* ── Dark / Light mode toggle ────────────────────────── */
.main-header .kp-dark-toggle {
  width: 34px !important;
  height: 34px !important;
  border-radius: var(--item-radius) !important;
  color: var(--tx-secondary) !important;
  font-size: 0.95rem !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.main-header .kp-dark-toggle:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: var(--tx-primary) !important;
}

.main-header .kp-dark-toggle:focus-visible {
  outline: 2px solid var(--kp-red-ring) !important;
  outline-offset: 2px !important;
}

/* ── Flash suppression ───────────────────────────────── */
html.dark-mode-pending body {
  visibility: hidden !important;
}

/* ============================================================
   DARK MODE — header overrides
   ============================================================ */
[data-bs-theme="dark"] .main-header.navbar {
  background: #454d55 !important;
  border-bottom-color: #3d4349 !important;
}

[data-bs-theme="dark"] .main-header .navbar-nav .nav-link { color: #8b949e !important; }
[data-bs-theme="dark"] .main-header .navbar-nav .nav-link:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .main-header .kp-pushmenu { color: #6e7681 !important; }
[data-bs-theme="dark"] .main-header .kp-pushmenu:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e6edf3 !important;
}

[data-bs-theme="dark"] .main-header .kp-search-inner {
  background: #3a4048 !important;
  border-color: #555d65 !important;
}

[data-bs-theme="dark"] .main-header .kp-search-inner:focus-within { border-color: var(--kp-red) !important; }
[data-bs-theme="dark"] .main-header .kp-search-input { color: #e6edf3 !important; }
[data-bs-theme="dark"] .main-header .kp-search-kbd {
  background: #3a4048 !important;
  border-color: #555d65 !important;
  color: #8b949e !important;
}

[data-bs-theme="dark"] .main-header .dropdown-menu {
  background: #3d4349 !important;
  border-color: #555d65 !important;
}

[data-bs-theme="dark"] .main-header .dropdown-item { color: #cdd5df !important; }
[data-bs-theme="dark"] .main-header .dropdown-item:hover { background: rgba(255, 255, 255, 0.08) !important; }
[data-bs-theme="dark"] .main-header .dropdown-divider { border-color: #555d65 !important; }

[data-bs-theme="dark"] .main-header .kp-user-menu {
  background: #3d4349 !important;
  border-color: #555d65 !important;
}

[data-bs-theme="dark"] .main-header .kp-user-menu .dropdown-item { color: #cdd5df !important; }
[data-bs-theme="dark"] .main-header .kp-user-menu .dropdown-item:hover { background: rgba(255, 255, 255, 0.06) !important; }

[data-bs-theme="dark"] .main-header .kp-user-menu .kp-logout { color: #f87171 !important; }
[data-bs-theme="dark"] .main-header .kp-user-menu .kp-logout:hover { background: rgba(153, 27, 27, 0.18) !important; }
[data-bs-theme="dark"] .main-header .kp-user-menu .kp-logout i { color: #f87171 !important; }

[data-bs-theme="dark"] .main-header .kp-dark-toggle { color: #8b949e !important; }
[data-bs-theme="dark"] .main-header .kp-dark-toggle:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e6edf3 !important;
}