/*
  The Nervus System application shell — compact global header, contextual workspace
  tabs / breadcrumb, account menu and mobile navigation sheet. Loaded by
  every app page after the page's own CSS. The shell replaces the old
  persistent sidebar entirely: page content starts at the left edge and
  owns the full width below a 52px header (+40px context bar only where a
  workspace has sibling destinations or the page sits deeper).
*/

:root {
  /* Literal The Nervus System values (jarvis-design-system.css) rather than --db-*:
     some pages still redefine --db-* for their own content, and the shell
     must look identical on every page. */
  --jx-header-h: 52px;
  --jx-context-h: 40px;
  --jx-shell-h: 52px;
  --jx-ink: #0b1626;
  --jx-muted: #5d6b85;
  --jx-faint: #94a1b8;
  --jx-line: #dce3ed;
  --jx-surface: #ffffff;
  --jx-hover: #eff3f8;
  --jx-bg: #f7f9fc;
  --jx-primary: #1e3a8a;
  --jx-primary-soft: #eaf0fb;
  --jx-accent: #65a30d;
  --jx-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --jx-display: "Libre Caslon Condensed", Georgia, "Times New Roman", serif;
}

/* ============ Shell frame ============ */

.jx-shell {
  position: sticky;
  top: 0;
  z-index: 1000;
  font-family: var(--jx-font);
  background: var(--jx-surface);
  border-bottom: 1px solid var(--jx-line);
}

/* Several legacy page stylesheets style every <header> (fixed, dark,
   blurred); the shell's header must ignore them. */
.jx-shell .jx-header {
  position: static;
  inset: auto;
  z-index: auto;
  background: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
  transition: none;
}

.jx-header {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--jx-header-h);
  padding: 0 20px;
  max-width: none;
}

.jx-shell a, .jx-sheet a { text-decoration: none; }
.jx-shell button { font-family: inherit; }

/* The Nervus System: the mark (brand/) and the logo's wide, thin capitals */
.jx-brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: 18px;
  color: var(--db-text, #0f172a) !important;
  font-family: "Jura", "Inter", system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.jx-brand-mark { width: 30px; height: 30px; flex: 0 0 auto; display: block; }
@media (max-width: 1180px) { .jx-brand-the, .jx-brand-sys { display: none; } }

/* ============ Primary destinations ============ */

.jx-primary { display: flex; align-items: center; gap: 2px; height: 100%; }

.jx-primary-group { position: relative; display: flex; align-items: center; height: 100%; }

.jx-primary-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--jx-muted) !important;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
.jx-primary-group .jx-primary-link { padding-right: 4px; border-radius: 8px 0 0 8px; }
.jx-primary-link:hover, .jx-primary-group:hover .jx-primary-link { background: var(--jx-hover); color: var(--jx-ink) !important; }
.jx-primary-link.is-active { color: var(--jx-primary) !important; }
.jx-primary-link.is-active::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -9px;
  height: 2px;
  border-radius: 2px;
  background: var(--jx-primary);
}
.jx-primary-group .jx-primary-link.is-active::after { right: 4px; }

.jx-caret {
  display: grid;
  place-items: center;
  width: 20px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 0 8px 8px 0;
  background: none;
  color: var(--jx-faint);
  cursor: pointer;
}
.jx-primary-group:hover .jx-caret, .jx-caret:hover, .jx-caret[aria-expanded="true"] { background: var(--jx-hover); color: var(--jx-ink); }

/* ============ Menus (workspace + account) ============ */

.jx-menu {
  position: absolute;
  top: calc(100% - 4px);
  left: 0;
  z-index: 1010;
  display: flex;
  flex-direction: column;
  min-width: 260px;
  padding: 6px;
  border: 1px solid var(--jx-line);
  border-radius: 12px;
  background: var(--jx-surface);
  box-shadow: 0 12px 32px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06);
}
.jx-menu[hidden] { display: none; }

.jx-menu-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--jx-ink) !important;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.jx-menu-item:hover, .jx-menu-item:focus-visible { background: var(--jx-hover); outline: none; }
.jx-menu-item[aria-current="page"] .jx-menu-label { color: var(--jx-primary); }
.jx-menu-label { font-weight: 650; }
.jx-menu-desc { color: var(--jx-faint); font-size: 12px; }
.jx-menu-sep { height: 1px; margin: 4px 6px; background: var(--jx-line); }

/* ============ Search / jump ============ */

.jx-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 340px;
  min-width: 0;
  height: 34px;
  margin-left: auto;
  padding: 0 8px 0 12px;
  border: 1px solid var(--jx-line);
  border-radius: 999px;
  background: var(--jx-bg);
  color: var(--jx-faint);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.jx-search:hover, .jx-search:focus-visible { border-color: var(--jx-primary); color: var(--jx-muted); outline: none; }
.jx-search svg { flex: 0 0 auto; color: var(--jx-primary); }
.jx-search-text { flex: 1; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.jx-kbd {
  flex: 0 0 auto;
  padding: 1px 6px;
  border: 1px solid var(--jx-line);
  border-radius: 5px;
  background: var(--jx-surface);
  color: var(--jx-faint);
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 700;
}

/* ============ Actions ============ */

.jx-actions { display: flex; align-items: center; gap: 4px; margin-left: 10px; }

.jx-icon-btn {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--jx-muted) !important;
}
.jx-icon-btn:hover, .jx-icon-btn.is-active { background: var(--jx-hover); color: var(--jx-primary) !important; }
.jx-icon-btn[hidden] { display: none; }
.jx-inbox, .jx-approvals { position: relative; }
.jx-badge {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--db-accent, #65a30d);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
.jx-badge[hidden] { display: none; }

.jx-user { position: relative; }
.jx-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--jx-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
}
.jx-avatar:hover, .jx-avatar[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--jx-primary-soft); }
.jx-user-menu { left: auto; right: 0; top: calc(100% + 8px); min-width: 230px; }
.jx-user-card { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--jx-line); }
.jx-user-card strong { color: var(--jx-ink); font-size: 13px; }
.jx-user-card span { color: var(--jx-faint); font-size: 12px; overflow-wrap: anywhere; }

.jx-menu-btn {
  display: none;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-left: -6px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--jx-ink);
  cursor: pointer;
}
.jx-menu-btn:hover { background: var(--jx-hover); }

/* ============ Context bar: workspace tabs or breadcrumb ============ */

.jx-context { height: var(--jx-context-h); border-top: 1px solid var(--jx-line); background: var(--jx-surface); }
.jx-context-inner {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 100%;
  padding: 0 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.jx-context-inner::-webkit-scrollbar { display: none; }
.jx-context-label {
  display: flex;
  align-items: center;
  margin-right: 10px;
  padding-right: 12px;
  border-right: 1px solid var(--jx-line);
  color: var(--jx-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.jx-tab {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--jx-muted) !important;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.jx-tab:hover { color: var(--jx-ink) !important; }
.jx-tab.is-active { color: var(--jx-ink) !important; }
.jx-tab.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; background: var(--jx-accent); }

.jx-trail { align-items: center; gap: 4px; }
.jx-crumb { color: var(--jx-muted) !important; font-size: 13px; font-weight: 600; white-space: nowrap; }
a.jx-crumb { padding: 3px 6px; border-radius: 6px; }
a.jx-crumb:hover { background: var(--jx-hover); color: var(--jx-primary) !important; }
.jx-crumb.is-current { max-width: 48ch; overflow: hidden; padding: 3px 6px; color: var(--jx-ink) !important; text-overflow: ellipsis; }
.jx-crumb-sep { color: var(--jx-faint); font-size: 12px; }

/* ============ Mobile navigation sheet ============ */

.jx-sheet { position: fixed; inset: 0; z-index: 1100; background: rgba(15, 23, 42, .35); font-family: var(--jx-font); }
.jx-sheet[hidden] { display: none; }
.jx-sheet-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(320px, 86vw);
  padding: 18px 14px;
  overflow-y: auto;
  background: var(--jx-surface);
  box-shadow: 0 0 40px rgba(15, 23, 42, .18);
}
.jx-sheet-heading { padding: 0 10px 4px; color: var(--jx-faint); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.jx-sheet-link { display: flex; flex-direction: column; gap: 1px; padding: 9px 10px; border-radius: 8px; color: var(--jx-ink) !important; font-size: 14px; font-weight: 650; }
.jx-sheet-link span { color: var(--jx-faint); font-size: 12px; font-weight: 500; }
.jx-sheet-link:hover, .jx-sheet-link.is-active { background: var(--jx-primary-soft); }
.jx-sheet-link.is-active { color: var(--jx-primary) !important; }
.jx-sheet-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--jx-line); color: var(--jx-muted); font-size: 13px; }
.jx-sheet-logout { padding: 6px 10px; border: 1px solid var(--jx-line); border-radius: 8px; background: var(--jx-surface); color: var(--jx-ink); font-size: 12.5px; font-weight: 600; cursor: pointer; }
body.jx-sheet-open { overflow: hidden; }

/* ============ Page frame: content owns the full width ============
   The page wrappers below used to reserve 220–260px for the sidebar and
   48px for a fixed top bar; the shell is in normal flow (sticky), so
   both offsets are gone. */

body.jx-app { margin: 0; padding-top: 0; }

/* ============ Responsive ============ */

@media (max-width: 1100px) {
  .jx-menu-desc { display: none; }
  .jx-search { flex-basis: 220px; }
}

@media (max-width: 860px) {
  .jx-search-text, .jx-kbd { display: none; }
  .jx-search { flex: 0 0 auto; width: 34px; padding: 0; justify-content: center; }
  .jx-brand { margin-right: 10px; }
}

@media (max-width: 720px) {
  .jx-header { padding: 0 14px; }
  .jx-menu-btn { display: grid; }
  .jx-primary { display: none; }
  .jx-icon-btn { display: none; }
  .jx-brand { font-size: 20px; }
  .jx-context-inner { padding: 0 14px; }
  .jx-context-label { display: none; }
}

/* Agent Authority › Pause: shown under the header while Nodis is paused */
.jx-paused {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 20px;
  background: var(--db-warning-soft, #fef3c7);
  color: var(--db-text, #1f2937);
  border-bottom: 1px solid var(--db-border, #e5e7eb);
  font-size: 13px;
}
.jx-paused span { flex: 1; min-width: 0; }
.jx-paused-resume {
  border: 1px solid var(--db-border-strong, #d1d5db);
  background: var(--db-surface, #fff);
  color: inherit;
  border-radius: 6px;
  padding: 3px 12px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.jx-paused a { color: var(--brand-primary, #1e3a8a); }
@media (max-width: 640px) { .jx-paused { padding: 6px 16px; flex-wrap: wrap; } }