/* ==========================================================
   WHALE OS Navigation System v1.0
   Header • Sidebar • Tabs • Breadcrumbs • Navigation
   ========================================================== */

:root{
  --nav-height:72px;
  --sidebar-width:300px;
  --breadcrumb-height:48px;
}

/* Header */

.app-header{
  height:var(--nav-height);
  background:var(--header-bg);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(20px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-inline:24px;
  position:sticky;
  top:0;
  z-index:1000;
}

.app-header .brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  color:var(--text-primary);
}

.app-header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

/* Sidebar */

.sidebar{
  width:var(--sidebar-width);
  background:var(--sidebar-bg);
  border-inline-end:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:20px;
  gap:10px;
}

.sidebar-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:var(--radius-md);
  color:var(--text-secondary);
  cursor:pointer;
  transition:var(--transition-all);
}

.sidebar-item:hover{
  background:var(--surface-hover);
  color:var(--text-primary);
}

.sidebar-item.active{
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:600;
}

/* Breadcrumb */

.breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:var(--breadcrumb-height);
  color:var(--text-secondary);
  font-size:13px;
}

.breadcrumb a{
  color:inherit;
  text-decoration:none;
}

.breadcrumb a:hover{
  color:var(--accent);
}

.breadcrumb-separator{
  opacity:.5;
}

/* Tabs */

.tabs{
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid var(--border);
}

.tab{
  padding:12px 18px;
  color:var(--text-secondary);
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:var(--transition-all);
}

.tab:hover{
  color:var(--text-primary);
}

.tab.active{
  color:var(--accent);
  border-color:var(--accent);
  font-weight:600;
}

/* Workspace Nav */

.workspace-nav{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.workspace-chip{
  padding:8px 14px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text-secondary);
  cursor:pointer;
  transition:var(--transition-all);
}

.workspace-chip:hover{
  background:var(--surface-hover);
}

.workspace-chip.active{
  background:var(--accent-soft);
  color:var(--accent);
  border-color:var(--accent);
}

/* Pagination */

.pagination{
  display:flex;
  align-items:center;
  gap:8px;
}

.page-btn{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
  cursor:pointer;
  transition:var(--transition-all);
}

.page-btn:hover{
  background:var(--surface-hover);
}

.page-btn.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}