/* ═══════════════════════════════════════════════════════════════════
   SITHIYAM OS v5.1 — NAVIGATION COMPONENTS
   Floating pill nav, command palette, status ribbon
   ═══════════════════════════════════════════════════════════════════ */

/* ── Floating Pill Nav Bar ──────────────────────────────────────── */
.nav-pill {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 48px;
  padding: 0 6px 0 14px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--b1);
  border-radius: var(--r5);
  box-shadow: var(--sh2);
  white-space: nowrap;
}

/* Brand: ★ Sithiyam OS */
.nav-pill__brand {
  font-family: var(--fu);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .03em;
  color: var(--t1);
  margin-right: 4px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--r4);
  transition: background .15s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-pill__brand:hover { background: var(--gg); }

.nav-pill__star {
  color: var(--g3);
  font-size: 15px;
}
.nav-pill__os {
  font-family: var(--fd);
  font-weight: 400;
  font-style: italic;
  font-size: 11px;
  color: var(--g4);
}

/* Separator line between brand and nav items */
.nav-pill__sep {
  width: 1px;
  height: 20px;
  background: var(--b1);
  margin: 0 6px;
  flex-shrink: 0;
}

/* Nav items — clean flat text, no arrows */
.nav-pill__item {
  position: relative;
  padding: 6px 14px;
  font-family: var(--fu);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--t3);
  cursor: pointer;
  border-radius: var(--r4);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background .15s, color .15s;
  user-select: none;
}
.nav-pill__item:hover { background: var(--gg); color: var(--t1); }

/* Active state — filled pill for direct screen items (e.g. Home) */
.nav-pill__item.on {
  background: var(--t1);
  color: #fff;
}
.nav-pill__item.on:hover {
  background: var(--t1);
  color: #fff;
}

/* Has-active: subtle gold accent when a group item has an active child */
.nav-pill__item.has-active {
  color: var(--g3, #C49A3C);
  background: rgba(196,154,60,.09);
}
.nav-pill__item.has-active:hover {
  background: rgba(196,154,60,.14);
  color: var(--g3, #C49A3C);
}

/* Open dropdown state — subtle highlight (not the dark active pill) */
.nav-pill__item.open {
  background: var(--gg);
  color: var(--t1);
}

/* Dropdown arrow — hidden by default for clean look */
.nav-pill__dd-icon {
  display: none;
}

/* Dropdown */
.nav-pill__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: var(--bgf);
  border: 1px solid var(--b1);
  border-radius: var(--r2);
  box-shadow: var(--sh3);
  padding: 8px;
  z-index: 1001;
  animation: fadeIn .12s var(--eio);
  /* Override legacy styles.css nav-group-dropdown: always visible + clickable when shown */
  opacity: 1 !important;
  pointer-events: auto !important;
}
.nav-pill__item.open .nav-pill__dropdown { display: block; }
/* Transparent hover bridge: fills the gap so mouse can travel from nav item to dropdown */
.nav-pill__item.open .nav-pill__dropdown::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.nav-pill__dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r1);
  cursor: pointer;
  transition: background .12s;
  white-space: nowrap;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--fb);
  font-size: 13px;
  color: var(--t1);
}
.nav-pill__dd-item:hover { background: var(--bgr); }
.nav-pill__dd-item.on { background: var(--gg); }

.nav-pill__dd-item > span:first-child {
  font-size: 16px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.nav-pill__dd-item > div {
  display: flex;
  flex-direction: column;
}
.nav-pill__dd-item > div:first-of-type {
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
}
.nav-pill__dd-item small {
  font-size: 11px;
  color: var(--t4);
  font-weight: 400;
}

/* Right side container */
.nav-pill__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Cmd+K button — clean icon button */
.nav-pill__cmd {
  width: 34px;
  height: 34px;
  border-radius: var(--r4);
  background: var(--bgr);
  border: 1px solid var(--b0);
  color: var(--t4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
  padding: 0;
}
.nav-pill__cmd:hover { background: var(--gg); border-color: var(--b2); color: var(--t2); }
.nav-pill__cmd svg { width: 14px; height: 14px; }

/* Avatar */
.nav-pill__avatar {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--g7), var(--g5));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fu);
  font-size: 11px;
  font-weight: 800;
  color: var(--g1);
  cursor: pointer;
  overflow: visible;
  flex-shrink: 0;
}

/* User dropdown menu */
.nav-pill__user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  background: var(--bgf);
  border: 1px solid var(--b1);
  border-radius: var(--r2);
  box-shadow: var(--sh3);
  padding: 12px;
  z-index: 1001;
  animation: fadeIn .12s var(--eio);
}
.nav-pill__user-menu.open { display: block; }

.nav-pill__user-email {
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 600;
  color: var(--t2);
  padding: 4px 8px 10px;
  border-bottom: 1px solid var(--b0);
  margin-bottom: 8px;
  word-break: break-all;
}

.nav-pill__user-signout {
  display: block;
  width: 100%;
  padding: 8px 8px;
  font-family: var(--fu);
  font-size: 11px;
  font-weight: 700;
  color: var(--t3);
  background: none;
  border: none;
  border-radius: var(--r1);
  cursor: pointer;
  text-align: left;
  transition: background .12s, color .12s;
}
.nav-pill__user-signout:hover {
  background: var(--red-soft);
  color: var(--red);
}


/* ── Command Palette ────────────────────────────────────────────── */
.cmd-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--scrim);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18vh;
  opacity: 0;
  transition: opacity .15s var(--eio);
}
.cmd-overlay.open { display: flex; opacity: 1; }

.cmd-palette {
  width: 560px;
  max-width: 92vw;
  background: var(--bgf);
  border: 1px solid var(--b1);
  border-radius: var(--r3);
  box-shadow: var(--sh3);
  overflow: hidden;
  animation: scaleIn .15s var(--ease);
}

.cmd-palette__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--b1);
}

.cmd-palette__input {
  flex: 1;
  font-size: 16px;
  font-family: var(--fb);
  background: none;
  border: none;
  outline: none;
  color: var(--t1);
}

.cmd-palette__kbd {
  padding: 3px 8px;
  font-family: var(--fu);
  font-size: 10px;
  font-weight: 700;
  color: var(--t5);
  background: var(--bgr);
  border: 1px solid var(--b1);
  border-radius: var(--r0);
}

.cmd-palette__results { padding: 8px; max-height: 360px; overflow-y: auto; }

.cmd-palette__group-label {
  font-family: var(--fu);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t5);
  padding: 8px 12px 4px;
}

.cmd-palette__result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r1);
  cursor: pointer;
  font-size: 14px;
  color: var(--t1);
  transition: background .1s;
}
.cmd-palette__result:hover { background: var(--bgr); }
.cmd-palette__result span { font-size: 16px; width: 24px; text-align: center; }
.cmd-palette__result small { font-size: 12px; color: var(--t4); margin-left: auto; }


/* ── Status Ribbon ──────────────────────────────────────────────── */
.status-ribbon {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  height: 36px;
  background: var(--t1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.status-ribbon__item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-ribbon__label {
  font-family: var(--fu);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

.status-ribbon__value {
  font-family: var(--fd);
  font-size: 14px;
  font-weight: 500;
  color: var(--g7);
}

.status-ribbon__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-ribbon__sep {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,.1);
}

.pulse-dot { animation: pulse 2s infinite; }

/* ── Dirty chip (unsaved indicator) ─────────────────────────────── */
#qtDirtyChip {
  font-family: var(--fu);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--rp);
  background: rgba(196,154,60,.12);
  color: var(--g3);
  cursor: pointer;
  display: none;
}


/* ── App Shell padding for new nav ──────────────────────────────── */
/* Add top padding to account for the floating nav (80px) and bottom for ribbon (36px) */
.app {
  padding-top: 80px !important;
  padding-bottom: 44px !important;
}

/* Hide nav pill & ribbon on login screen — JS toggles body class */
body.logged-out .nav-pill,
body.logged-out .status-ribbon { display: none !important; }


/* ── Responsive: Mobile ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-pill { display: none; }
  .status-ribbon { bottom: var(--mob-nav-h); height: 28px; gap: 12px; }
  .status-ribbon__label { font-size: 8px; }
  .status-ribbon__value { font-size: 12px; }
}