/* ==========================================================================
   OORKANAKU Village Governance ERP - Top Navbar
   Fixed navbar with search, actions, dropdowns
   ========================================================================== */

/* ── Navbar Base ── */
.ok-navbar {
  background: var(--ok-bg-navbar);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
}

/* ── Hamburger Menu (Mobile) ── */
.ok-navbar-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--ok-text-primary);
  font-size: 1.25rem;
  border-radius: var(--ok-radius-lg);
  cursor: pointer;
  transition: all var(--ok-transition-fast);
}

.ok-navbar-hamburger:hover {
  background: var(--ok-bg-hover);
}

/* ── Logo Text ── */
.ok-navbar-logo {
  display: flex;
  align-items: center;
  gap: var(--ok-space-2);
  font-size: var(--ok-text-lg);
  font-weight: var(--ok-font-bold);
  color: var(--ok-text-primary);
  text-decoration: none;
  white-space: nowrap;
}

.ok-navbar-logo:hover {
  color: var(--ok-saffron);
}

.ok-navbar-logo-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--ok-radius-md);
  background: linear-gradient(135deg, #FF6B00, #FFD700);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ok-white);
  font-size: 1rem;
}

/* ── Search Bar ── */
.ok-navbar-search {
  position: relative;
  max-width: 480px;
  width: 100%;
}

.ok-navbar-search-input {
  width: 100%;
  height: 40px;
  padding: 0 var(--ok-space-4) 0 var(--ok-space-10);
  border: 1px solid var(--ok-border-primary);
  border-radius: var(--ok-radius-xl);
  background: var(--ok-bg-secondary);
  color: var(--ok-text-primary);
  font-size: var(--ok-text-sm);
  font-family: var(--ok-font-family);
  transition: all var(--ok-transition-fast);
  outline: none;
}

.ok-navbar-search-input::placeholder {
  color: var(--ok-text-muted);
}

.ok-navbar-search-input:focus {
  border-color: var(--ok-saffron);
  background: var(--ok-bg-primary);
  box-shadow: 0 0 0 3px var(--ok-saffron-light);
}

.ok-navbar-search-icon {
  position: absolute;
  left: var(--ok-space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ok-text-muted);
  font-size: 0.875rem;
  pointer-events: none;
}

.ok-navbar-search-kbd {
  position: absolute;
  right: var(--ok-space-3);
  top: 50%;
  transform: translateY(-50%);
  padding: 2px var(--ok-space-2);
  font-size: var(--ok-text-xs);
  font-family: var(--ok-font-mono);
  color: var(--ok-text-muted);
  background: var(--ok-bg-tertiary);
  border: 1px solid var(--ok-border-primary);
  border-radius: var(--ok-radius-sm);
  line-height: 1;
}

/* ── Navbar Actions ── */
.ok-navbar-action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--ok-text-secondary);
  font-size: 1.125rem;
  border-radius: var(--ok-radius-lg);
  cursor: pointer;
  transition: all var(--ok-transition-fast);
}

.ok-navbar-action:hover {
  background: var(--ok-bg-hover);
  color: var(--ok-text-primary);
}

.ok-navbar-action:active {
  transform: scale(0.95);
}

/* ── Notification Bell ── */
.ok-navbar-action .ok-notification-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: var(--ok-radius-full);
  background: var(--ok-sacred-red);
  border: 2px solid var(--ok-bg-navbar);
}

/* ── Notification Dropdown ── */
.ok-notification-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-height: 480px;
  background: var(--ok-bg-card);
  border: 1px solid var(--ok-border-primary);
  border-radius: var(--ok-radius-xl);
  box-shadow: var(--ok-shadow-dropdown);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--ok-transition-fast);
  overflow: hidden;
}

.ok-notification-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ok-notification-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ok-space-4);
  border-bottom: 1px solid var(--ok-border-secondary);
}

.ok-notification-dropdown-header h4 {
  font-size: var(--ok-text-md);
  font-weight: var(--ok-font-semibold);
  margin: 0;
}

.ok-notification-dropdown-body {
  overflow-y: auto;
  max-height: 360px;
}

.ok-notification-item {
  display: flex;
  gap: var(--ok-space-3);
  padding: var(--ok-space-3) var(--ok-space-4);
  border-bottom: 1px solid var(--ok-border-secondary);
  cursor: pointer;
  transition: background var(--ok-transition-fast);
}

.ok-notification-item:hover {
  background: var(--ok-bg-hover);
}

.ok-notification-item.unread {
  background: var(--ok-saffron-light);
}

.ok-notification-item.unread:hover {
  background: rgba(255, 107, 0, 0.1);
}

.ok-notification-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--ok-radius-full);
  background: var(--ok-saffron-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--ok-saffron);
}

.ok-notification-content {
  flex: 1;
  min-width: 0;
}

.ok-notification-text {
  font-size: var(--ok-text-sm);
  color: var(--ok-text-primary);
  line-height: var(--ok-leading-normal);
}

.ok-notification-text strong {
  font-weight: var(--ok-font-semibold);
}

.ok-notification-time {
  font-size: var(--ok-text-xs);
  color: var(--ok-text-muted);
  margin-top: var(--ok-space-1);
}

/* ── User Dropdown ── */
.ok-user-dropdown {
  display: flex;
  align-items: center;
  gap: var(--ok-space-2);
  padding: var(--ok-space-1-5) var(--ok-space-2) var(--ok-space-1-5) var(--ok-space-1-5);
  border-radius: var(--ok-radius-xl);
  cursor: pointer;
  transition: background var(--ok-transition-fast);
  border: none;
  background: transparent;
}

.ok-user-dropdown:hover {
  background: var(--ok-bg-hover);
}

.ok-user-dropdown-avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--ok-radius-full);
  background: linear-gradient(135deg, var(--ok-saffron), var(--ok-temple-gold));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ok-text-sm);
  font-weight: var(--ok-font-bold);
  color: var(--ok-white);
  overflow: hidden;
  flex-shrink: 0;
}

.ok-user-dropdown-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ok-user-dropdown-info {
  text-align: left;
}

.ok-user-dropdown-name {
  font-size: var(--ok-text-sm);
  font-weight: var(--ok-font-semibold);
  color: var(--ok-text-primary);
  line-height: 1.2;
}

.ok-user-dropdown-role {
  font-size: var(--ok-text-xs);
  color: var(--ok-text-muted);
}

.ok-user-dropdown-arrow {
  font-size: 0.75rem;
  color: var(--ok-text-muted);
  transition: transform var(--ok-transition-fast);
}

.ok-user-dropdown.active .ok-user-dropdown-arrow {
  transform: rotate(180deg);
}

/* ── User Profile Dropdown Panel ── */
.ok-user-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  background: var(--ok-bg-card);
  border: 1px solid var(--ok-border-primary);
  border-radius: var(--ok-radius-xl);
  box-shadow: var(--ok-shadow-dropdown);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--ok-transition-fast);
  overflow: hidden;
  padding: var(--ok-space-2);
}

.ok-user-menu-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ok-user-menu-dropdown-header {
  display: flex;
  align-items: center;
  gap: var(--ok-space-3);
  padding: var(--ok-space-3);
  border-bottom: 1px solid var(--ok-border-secondary);
  margin-bottom: var(--ok-space-2);
}

.ok-user-menu-item {
  display: flex;
  align-items: center;
  gap: var(--ok-space-3);
  padding: var(--ok-space-2-5) var(--ok-space-3);
  border-radius: var(--ok-radius-lg);
  color: var(--ok-text-secondary);
  text-decoration: none;
  font-size: var(--ok-text-sm);
  transition: all var(--ok-transition-fast);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.ok-user-menu-item:hover {
  background: var(--ok-bg-hover);
  color: var(--ok-text-primary);
}

.ok-user-menu-item i {
  width: 18px;
  text-align: center;
  font-size: 0.875rem;
}

.ok-user-menu-separator {
  height: 1px;
  background: var(--ok-border-secondary);
  margin: var(--ok-space-2) 0;
}

.ok-user-menu-item.danger {
  color: var(--ok-sacred-red);
}

.ok-user-menu-item.danger:hover {
  background: var(--ok-sacred-red-light);
  color: var(--ok-sacred-red);
}

/* ── Messages Dropdown ── */
.ok-messages-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-height: 480px;
  background: var(--ok-bg-card);
  border: 1px solid var(--ok-border-primary);
  border-radius: var(--ok-radius-xl);
  box-shadow: var(--ok-shadow-dropdown);
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--ok-transition-fast);
  overflow: hidden;
}

.ok-messages-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ok-message-item {
  display: flex;
  gap: var(--ok-space-3);
  padding: var(--ok-space-3) var(--ok-space-4);
  border-bottom: 1px solid var(--ok-border-secondary);
  cursor: pointer;
  transition: background var(--ok-transition-fast);
}

.ok-message-item:hover {
  background: var(--ok-bg-hover);
}

/* ── Navbar Fullscreen Toggle ── */
.ok-fullscreen-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}