/* ============================================
   BJP OPERATION REFERENCE SYSTEM — Design Tokens
   ============================================ */
:root {
  /* Brand */
  --navy-900: #061732;
  --navy-800: #0B2447;
  --navy-700: #143461;
  --navy-600: #1F4A82;
  --navy-500: #2C66A8;
  --navy-100: #DCE6F4;
  --navy-50:  #EEF3FB;

  --orange-700: #C8470F;
  --orange-600: #E8541A;
  --orange-500: #F26419;
  --orange-400: #FF7D3B;
  --orange-100: #FCE3D2;
  --orange-50:  #FFF2E8;

  /* Neutrals (cool slight-blue tone) */
  --ink-900: #0E1622;
  --ink-800: #1A2433;
  --ink-700: #2A3445;
  --ink-600: #475467;
  --ink-500: #667085;
  --ink-400: #98A2B3;
  --ink-300: #D0D5DD;
  --ink-200: #E4E7EC;
  --ink-100: #EFF1F5;
  --ink-50:  #F6F7F9;
  --bg:      #F2F4F7;
  --white:   #FFFFFF;

  /* Semantic */
  --status-processing-bg: #DCE6F4;
  --status-processing-fg: #143461;
  --status-pending-bg:    #FEF3C7;
  --status-pending-fg:    #92400E;
  --status-failed-bg:     #FEE2E2;
  --status-failed-fg:     #991B1B;
  --status-complete-bg:   #D1FAE5;
  --status-complete-fg:   #065F46;
  --status-warn:          #F59E0B;
  --status-danger:        #DC2626;
  --status-ok:            #10B981;

  /* Radii */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.04), 0 1px 1px rgba(16,24,40,0.04);
  --shadow-md: 0 4px 12px rgba(16,24,40,0.06), 0 2px 4px rgba(16,24,40,0.04);
  --shadow-lg: 0 12px 32px rgba(16,24,40,0.12), 0 4px 8px rgba(16,24,40,0.06);

  /* Layout */
  --sidebar-w: 248px;
  --topbar-h: 56px;

  /* Fonts */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 14px; }

/* ===== App shell ===== */
.app {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* ===== Sidebar ===== */
.sidebar {
  width: var(--sidebar-w);
  background: var(--navy-800);
  color: #C5D2E5;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
}
.sidebar__brand {
  padding: 18px 16px 18px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  gap: 10px;
  align-items: center;
}
.sidebar__logo {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--orange-500), var(--orange-700));
  display: grid; place-items: center;
  color: white;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.sidebar__title {
  display: flex; flex-direction: column;
  min-width: 0;
}
.sidebar__title-line1 {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.sidebar__title-line2 {
  font-size: 13px;
  color: white;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.sidebar__section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  padding: 16px 18px 6px;
  font-weight: 500;
}

.sidebar__nav {
  padding: 8px 8px;
  flex: 1;
  overflow-y: auto;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  color: #C5D2E5;
  text-decoration: none;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}
.nav-item:hover {
  background: rgba(255,255,255,0.05);
  color: white;
}
.nav-item.is-active {
  background: var(--navy-700);
  color: white;
  position: relative;
}
.nav-item.is-active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 8px; bottom: 8px;
  width: 3px;
  background: var(--orange-500);
  border-radius: 0 3px 3px 0;
}
.nav-item .nav-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}
.nav-item.is-active .nav-icon { opacity: 1; }
.nav-item .nav-chev {
  margin-left: auto;
  opacity: 0.5;
  transition: transform 0.15s;
}
.nav-item.is-expanded .nav-chev { transform: rotate(90deg); }

.nav-sub {
  padding-left: 32px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 6px;
}
.nav-sub .nav-item {
  font-size: 12.5px;
  padding: 7px 12px;
  color: rgba(255,255,255,0.65);
}
.nav-sub .nav-item.is-active {
  background: rgba(242,100,25,0.12);
  color: var(--orange-400);
}
.nav-sub .nav-item.is-active::before {
  left: -24px;
}

.sidebar__profile {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.sidebar__profile .avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--navy-600);
  display: grid; place-items: center;
  color: white;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
.sidebar__profile-info {
  flex: 1;
  min-width: 0;
}
.sidebar__profile-name {
  color: white;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar__profile-role {
  color: rgba(255,255,255,0.55);
  font-size: 11.5px;
  font-family: var(--font-mono);
}
.sidebar__profile-menu {
  background: none; border: none; color: rgba(255,255,255,0.5);
  padding: 4px; cursor: pointer;
}
.sidebar__profile-menu:hover { color: white; }

/* ===== Main area ===== */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.topbar {
  height: var(--topbar-h);
  background: white;
  border-bottom: 1px solid var(--ink-200);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  flex-shrink: 0;
}
.topbar__crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-500);
}
.topbar__crumbs .crumb-sep { color: var(--ink-300); }
.topbar__crumbs .crumb-current { color: var(--ink-900); font-weight: 600; }

.topbar__actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.topbar__search {
  display: flex; align-items: center; gap: 6px;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 6px;
  padding: 6px 10px;
  width: 260px;
  color: var(--ink-500);
  font-size: 13px;
}
.topbar__search input {
  border: none; background: none; outline: none;
  flex: 1;
  color: var(--ink-900);
}
.topbar__icon-btn {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: 1px solid var(--ink-200);
  background: white;
  color: var(--ink-600);
  display: grid; place-items: center;
}
.topbar__icon-btn:hover { background: var(--ink-50); color: var(--ink-900); }

.content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}
.page-title {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.page-subtitle {
  color: var(--ink-500);
  font-size: 13px;
  margin: 0;
}

/* ===== Card ===== */
.card {
  background: white;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card__header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ink-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card__subtitle {
  font-size: 12px;
  color: var(--ink-500);
  margin: 2px 0 0;
}
.card__body { padding: 18px; }
.card__body--flush { padding: 0; }

/* ===== Button ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  line-height: 1.2;
  white-space: nowrap;
}
.btn--primary {
  background: var(--orange-500);
  color: white;
  border-color: var(--orange-500);
  box-shadow: 0 1px 2px rgba(242,100,25,0.3);
}
.btn--primary:hover { background: var(--orange-600); border-color: var(--orange-600); }
.btn--secondary {
  background: white;
  color: var(--navy-800);
  border-color: var(--navy-800);
}
.btn--secondary:hover { background: var(--navy-50); }
.btn--ghost {
  background: white;
  color: var(--ink-700);
  border-color: var(--ink-300);
}
.btn--ghost:hover { background: var(--ink-50); color: var(--ink-900); }
.btn--danger {
  background: white;
  color: var(--status-failed-fg);
  border-color: #FCA5A5;
}
.btn--danger:hover { background: var(--status-failed-bg); }
.btn--sm { padding: 5px 10px; font-size: 12px; }
.btn--lg { padding: 10px 18px; font-size: 14px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ===== Form ===== */
.form-group { margin-bottom: 14px; }
.label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: 6px;
}
.label .label-hint {
  font-weight: 400;
  color: var(--ink-500);
  margin-left: 6px;
}
.input, .select, .textarea {
  width: 100%;
  background: white;
  border: 1px solid var(--ink-300);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 13.5px;
  color: var(--ink-900);
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--orange-500);
  box-shadow: 0 0 0 3px var(--orange-50);
}
.textarea { resize: vertical; min-height: 96px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; }
.select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%23667085' d='M6 8L2 4h8z'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }

/* ===== Badge ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7;
}
.badge--processing { background: var(--status-processing-bg); color: var(--status-processing-fg); }
.badge--pending    { background: var(--status-pending-bg);    color: var(--status-pending-fg); }
.badge--failed     { background: var(--status-failed-bg);     color: var(--status-failed-fg); }
.badge--complete   { background: var(--status-complete-bg);   color: var(--status-complete-fg); }
.badge--neutral    { background: var(--ink-100);              color: var(--ink-700); }
.badge--orange     { background: var(--orange-50);            color: var(--orange-700); }
.badge--blue       { background: var(--navy-50);              color: var(--navy-700); }

/* ===== Table ===== */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table thead th {
  background: var(--ink-50);
  text-align: left;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ink-200);
  white-space: nowrap;
}
.table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ink-100);
  vertical-align: middle;
}
.table tbody tr:hover { background: var(--ink-50); }
.table tbody tr:last-child td { border-bottom: none; }
.table .mono { font-family: var(--font-mono); font-size: 12px; color: var(--ink-700); }
.table .doc-name { font-weight: 600; color: var(--ink-900); }
.table .row-checkbox { width: 18px; }
.table .row-actions { white-space: nowrap; }

/* ===== Checkbox ===== */
.checkbox {
  width: 16px; height: 16px;
  border: 1.5px solid var(--ink-400);
  border-radius: 3px;
  background: white;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s;
}
.checkbox.is-checked {
  background: var(--orange-500);
  border-color: var(--orange-500);
}
.checkbox.is-checked::after {
  content: "";
  width: 8px; height: 4px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translate(1px, -1px);
}

/* ===== Toggle ===== */
.toggle {
  width: 38px; height: 22px;
  background: var(--ink-300);
  border-radius: 99px;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
  border: none;
  padding: 0;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: white;
  border-radius: 50%;
  transition: transform 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.toggle.is-on { background: var(--orange-500); }
.toggle.is-on::after { transform: translateX(16px); }

/* ===== Citation chip ===== */
.cite-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--orange-50);
  border: 1px solid var(--orange-100);
  color: var(--orange-700);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 1px;
  vertical-align: baseline;
  transition: background 0.12s;
}
.cite-chip:hover { background: var(--orange-100); }
.cite-chip.is-active {
  background: var(--orange-500);
  color: white;
  border-color: var(--orange-500);
}

/* ===== Progress bar ===== */
.progress {
  height: 6px;
  background: var(--ink-100);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.progress__fill {
  height: 100%;
  background: var(--orange-500);
  border-radius: 99px;
  transition: width 0.4s ease;
}
.progress--lg { height: 10px; }
.progress--xl { height: 14px; }
.progress--blue .progress__fill { background: var(--navy-600); }
.progress--green .progress__fill { background: var(--status-ok); }

/* Utility */
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.spacer { flex: 1; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-500); }
.text-xs { font-size: 11.5px; } .text-sm { font-size: 12.5px; } .text-md { font-size: 14px; } .text-lg { font-size: 16px; } .text-xl { font-size: 20px; } .text-2xl { font-size: 28px; } .text-3xl { font-size: 36px; }
.fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ===== Chat Markdown prose ===== */
.chat-md { font-size: 13.5px; line-height: 1.65; color: var(--ink-900); }
.chat-md > *:first-child { margin-top: 0 !important; }
.chat-md > *:last-child { margin-bottom: 0 !important; }
.chat-md p { margin: 0 0 10px; }
.chat-md h1, .chat-md h2, .chat-md h3, .chat-md h4 {
  font-weight: 600; margin: 14px 0 6px; line-height: 1.3;
}
.chat-md h1 { font-size: 15px; }
.chat-md h2 { font-size: 14.5px; }
.chat-md h3 { font-size: 14px; }
.chat-md h4 { font-size: 13.5px; }
.chat-md ul, .chat-md ol { margin: 4px 0 10px 20px; padding: 0; }
.chat-md li { margin-bottom: 3px; }
.chat-md table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 10px 0; }
.chat-md th { background: var(--ink-100); font-weight: 600; text-align: left; padding: 6px 10px; border: 1px solid var(--ink-200); }
.chat-md td { padding: 5px 10px; border: 1px solid var(--ink-200); vertical-align: top; }
.chat-md tbody tr:nth-child(even) { background: var(--ink-50); }
.chat-md code { font-family: var(--font-mono); font-size: 12px; background: var(--ink-100); padding: 1px 5px; border-radius: 3px; }
.chat-md pre { background: var(--ink-100); border-radius: 6px; padding: 12px 14px; overflow-x: auto; margin: 8px 0; }
.chat-md pre code { background: none; padding: 0; font-size: 12px; }
.chat-md blockquote { border-left: 3px solid var(--orange-400); margin: 8px 0; padding: 4px 0 4px 14px; color: var(--ink-600); }
.chat-md hr { border: none; border-top: 1px solid var(--ink-200); margin: 12px 0; }
.chat-md strong { font-weight: 600; }
.chat-md a { color: var(--orange-700); text-decoration: underline; }
/* Citation pills injected inline by MarkdownWithCitations */
.chat-md .cite-pill {
  display: inline-flex; align-items: center;
  padding: 1px 6px; margin: 0 2px;
  font-size: 11.5px; font-family: var(--font-mono);
  background: var(--orange-100); color: var(--orange-700);
  border: 1px solid var(--orange-300);
  border-radius: 4px; cursor: pointer; vertical-align: baseline;
  line-height: 1.5;
}
.chat-md .cite-pill:hover { background: var(--orange-200); }
.chat-md .cite-pill--missing {
  background: var(--ink-100); color: var(--ink-500);
  border-color: var(--ink-200); cursor: default;
}
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }