/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0f1117;
  --bg2: #181c27;
  --bg3: #1e2333;
  --border: #2a2f45;
  --text: #e8eaf0;
  --text-muted: #7a8099;
  --accent: #4f7cff;
  --accent-hover: #6b94ff;
  --green: #3ddc84;
  --red: #ff6b6b;
  --amber: #ffb347;
  --sidebar-w: 220px;
}

html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); font-size: 16px; }

/* Login Screen */
.login-view {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.login-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 48px 40px;
  text-align: center;
  max-width: 400px;
  width: 90vw;
}

.login-logo {
  width: 180px;
  height: auto;
  margin-bottom: 24px;
}

.login-card h1 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.login-hint {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 28px;
  line-height: 1.5;
}

.login-btn {
  background: white;
  color: #333;
  border: 1px solid #ddd;
  padding: 12px 28px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.login-btn:hover {
  background: #f5f5f5;
  border-color: #bbb;
}

.login-error {
  margin-top: 16px;
  font-size: 13px;
  color: var(--red);
}

/* Top Bar */
.top-bar {
  display: flex;
  align-items: center;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 52px;
  flex-shrink: 0;
}

.top-brand {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
  margin-right: 32px;
}

.top-tabs { display: flex; gap: 4px; height: 100%; }

.top-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  padding: 0 16px;
  cursor: pointer;
  transition: all 0.15s;
  height: 100%;
  display: flex;
  align-items: center;
}

.top-tab:hover { color: var(--text); }
.top-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* User badge */
.user-badge {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-name {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.logout-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.logout-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

/* Layout */
.layout { display: flex; height: calc(100vh - 52px); overflow: hidden; }

/* Pipeline View (full-width) */
.pipeline-view {
  height: calc(100vh - 52px);
  overflow-y: auto;
  padding: 24px;
}

.pipeline-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-w);
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 24px 16px;
}

.mode-nav { display: flex; flex-direction: column; gap: 6px; flex: 1; }

.mode-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  color: var(--text-muted);
  transition: all 0.15s;
  position: relative;
}
.mode-btn:hover { background: var(--bg3); color: var(--text); border-color: var(--border); }
.mode-btn.active { background: var(--bg3); color: var(--text); border-color: var(--accent); }

.mode-icon { font-size: 16px; display: block; margin-bottom: 2px; }
.mode-label { font-size: 14px; font-weight: 600; display: block; }
.mode-desc { font-size: 11px; color: var(--text-muted); display: block; margin-top: 2px; line-height: 1.3; }
.mode-btn.active .mode-desc { color: #9aa0c0; }

.issue-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: var(--red);
  color: white;
  font-size: 11px;
  font-weight: 700;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.sidebar-footer { margin-top: 16px; }
.clear-btn {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
}
.clear-btn:hover { border-color: var(--red); color: var(--red); }

/* Main */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }

/* API Banner */
.api-banner {
  background: #2a1f0a;
  border-bottom: 1px solid var(--amber);
  padding: 12px 24px;
}
.api-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--amber);
}
.api-banner-inner input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  max-width: 340px;
}
.api-banner-inner button {
  background: var(--amber);
  color: #1a1000;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}

/* Panels */
.panel { display: none; flex-direction: column; height: 100%; overflow: hidden; }
.panel.active { display: flex; }

.panel-header {
  padding: 28px 32px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.panel-header h1 { font-size: 22px; font-weight: 700; color: var(--text); }
.panel-hint { margin-top: 6px; font-size: 13px; color: var(--text-muted); line-height: 1.5; }

/* Chat thread */
.chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.message { display: flex; flex-direction: column; gap: 4px; }

.message-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.message.user .message-label { color: var(--accent); }
.message.assistant .message-label { color: var(--green); }

.message-body {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.message.user .message-body {
  background: var(--bg3);
  border-color: var(--accent);
}

.message-actions { display: flex; gap: 8px; margin-top: 6px; }
.flag-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
}
.flag-btn:hover { border-color: var(--red); color: var(--red); }

/* Input area */
.input-area {
  padding: 20px 32px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-shrink: 0;
  background: var(--bg);
}

.input-area textarea {
  flex: 1;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 12px 16px;
  font-size: 15px;
  font-family: inherit;
  resize: none;
  line-height: 1.5;
  transition: border-color 0.15s;
}
.input-area textarea:focus { outline: none; border-color: var(--accent); }
.input-area textarea::placeholder { color: var(--text-muted); }

.send-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.15s;
  white-space: nowrap;
  align-self: flex-end;
}
.send-btn:hover { background: var(--accent-hover); }
.send-btn:disabled { background: var(--bg3); color: var(--text-muted); cursor: not-allowed; }

/* Thinking indicator */
.thinking { color: var(--text-muted); font-style: italic; font-size: 14px; padding: 8px 0; }

/* Issues panel */
.issues-list { flex: 1; overflow-y: auto; padding: 24px 32px; display: flex; flex-direction: column; gap: 16px; }

.empty-state { color: var(--text-muted); font-size: 15px; text-align: center; margin-top: 40px; }

.issue-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  border-radius: 10px;
  padding: 16px 20px;
  position: relative;
}
.issue-card-time { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.issue-card-desc { font-size: 15px; color: var(--text); line-height: 1.5; }
.issue-card-context { font-size: 12px; color: var(--text-muted); margin-top: 8px; font-style: italic; border-top: 1px solid var(--border); padding-top: 8px; }
.issue-card-actions { margin-top: 10px; }
.suggest-edit-btn {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s;
}
.suggest-edit-btn:hover { background: var(--accent); color: white; }
.suggest-edit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.issue-delete {
  position: absolute;
  top: 12px; right: 14px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
}
.issue-delete:hover { color: var(--red); }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  width: 480px;
  max-width: 90vw;
}
.modal h2 { font-size: 20px; margin-bottom: 12px; }
.modal-context { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; font-style: italic; max-height: 60px; overflow: hidden; }
.modal input[type="text"] {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 10px 14px;
  font-size: 15px;
  font-family: inherit;
  margin-bottom: 10px;
  transition: border-color 0.15s;
}
.modal input[type="text"]:focus { outline: none; border-color: var(--accent); }
.modal input[type="text"]::placeholder { color: var(--text-muted); }
.modal textarea {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 20px;
}
.modal textarea:focus { outline: none; border-color: var(--accent); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.modal-cancel {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.modal-cancel:hover { color: var(--text); border-color: var(--text-muted); }
.modal-confirm {
  background: var(--red);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.modal-confirm:hover { opacity: 0.85; }

/* Edits panel */
.edits-main {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.suggestions-area { display: flex; flex-direction: column; gap: 16px; }

.suggestion-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.suggestion-card-header {
  padding: 12px 18px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.suggestion-doc { font-size: 12px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; }
.suggestion-section { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.suggestion-rationale {
  padding: 12px 18px;
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  border-bottom: 1px solid var(--border);
}
.suggestion-diff { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.diff-block { border-radius: 8px; padding: 10px 14px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.diff-block.current { background: rgba(255, 107, 107, 0.08); border: 1px solid rgba(255, 107, 107, 0.2); color: var(--text-muted); text-decoration: line-through; }
.diff-block.proposed { background: rgba(61, 220, 132, 0.08); border: 1px solid rgba(61, 220, 132, 0.2); color: var(--text); }
.diff-editable {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.diff-editable:focus { border-color: var(--green); background: rgba(61, 220, 132, 0.13); }
.diff-editable-hint { font-size: 10px; color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.diff-label { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 4px; }
.diff-label.current { color: var(--red); }
.diff-label.proposed { color: var(--green); }
.suggestion-actions {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.approve-btn {
  background: var(--green);
  color: #0a1a0f;
  border: none;
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.approve-btn:hover { opacity: 0.85; }
.reject-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.reject-btn:hover { border-color: var(--red); color: var(--red); }

.thinking-edits { color: var(--text-muted); font-style: italic; font-size: 14px; padding: 12px 0; }

/* Pending queue */
.pending-area {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.pending-header {
  background: var(--bg3);
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.pending-count {
  background: var(--amber);
  color: #1a0f00;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}
.pending-list { display: flex; flex-direction: column; }
.pending-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.pending-item:last-child { border-bottom: none; }
.pending-item-doc { font-size: 11px; color: var(--accent); font-weight: 600; }
.pending-item-section { color: var(--text-muted); font-size: 12px; }

/* Selection tooltip */
.selection-tooltip {
  position: fixed;
  z-index: 200;
  background: var(--red);
  border-radius: 6px;
  padding: 6px 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  transform: translateX(-50%);
  pointer-events: auto;
}
.selection-tooltip button {
  background: transparent;
  border: none;
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.selection-tooltip::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--red);
}

/* Process Panel — Sub-tabs */
.process-subtabs {
  display: flex;
  gap: 4px;
  margin-top: 14px;
}

.process-subtab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s;
}

.process-subtab:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

.process-subtab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.process-subtab-content {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Process Panel — Content */
.process-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
}

.process-section {
  margin-bottom: 32px;
}

.process-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

/* Accordion */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.accordion-item {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s;
}

.accordion-item.open {
  border-color: var(--accent);
}

.accordion-header {
  width: 100%;
  background: transparent;
  border: none;
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  transition: background 0.15s;
}

.accordion-header:hover {
  background: var(--bg3);
}

.accordion-title { flex: 1; }

.accordion-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: 12px;
}

.accordion-print-btn {
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s;
}

.accordion-print-btn:hover {
  color: var(--accent);
}

.accordion-chevron {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.accordion-meta {
  padding: 0 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meta-row {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.meta-label {
  font-weight: 700;
  color: var(--accent);
}

.accordion-body {
  border-top: 1px solid var(--border);
}

.accordion-content {
  padding: 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.accordion-content h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 16px 0 8px;
  color: var(--accent);
}

.accordion-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 12px 0;
}

.accordion-content th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
}

.accordion-content td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
}

.accordion-content blockquote {
  border-left: 3px solid var(--amber);
  padding: 8px 14px;
  margin: 12px 0;
  color: var(--amber);
  font-size: 13px;
  background: rgba(255, 179, 71, 0.05);
  border-radius: 0 8px 8px 0;
}

.accordion-content ul {
  padding-left: 20px;
  margin: 8px 0;
}

.accordion-content li {
  margin-bottom: 4px;
  line-height: 1.6;
}

.accordion-content strong {
  color: var(--text);
}

.accordion-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}

.accordion-content p {
  margin: 8px 0;
}

.accordion-content code {
  background: var(--bg3);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 13px;
}

/* View Full Document button */
.view-full-doc-btn {
  margin-top: 12px;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s;
}

.view-full-doc-btn:hover {
  background: var(--accent);
  color: white;
}

/* Full document modal */
.modal-wide {
  width: 800px;
  max-width: 95vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.modal-doc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  flex-shrink: 0;
}

.modal-doc-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}

.modal-print {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  transition: all 0.15s;
}

.modal-print:hover {
  color: var(--text);
  border-color: var(--accent);
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}

.modal-close:hover {
  color: var(--text);
}

.modal-doc-body {
  flex: 1;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.7;
}

.modal-doc-body h3 { font-size: 14px; font-weight: 700; margin: 16px 0 8px; color: var(--accent); }
.modal-doc-body table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0; }
.modal-doc-body th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 11px; text-transform: uppercase; }
.modal-doc-body td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: top; }
.modal-doc-body blockquote { border-left: 3px solid var(--amber); padding: 8px 14px; margin: 12px 0; color: var(--amber); font-size: 13px; background: rgba(255, 179, 71, 0.05); border-radius: 0 8px 8px 0; }
.modal-doc-body ul { padding-left: 20px; margin: 8px 0; }
.modal-doc-body li { margin-bottom: 4px; line-height: 1.6; }
.modal-doc-body p { margin: 8px 0; }
.modal-doc-body hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.modal-doc-body code { background: var(--bg3); padding: 1px 5px; border-radius: 4px; font-size: 13px; }

/* Print header and footer (hidden on screen) */
.print-header, .print-footer {
  display: none;
}

/* Role card items */
.role-card-item .accordion-content.loading {
  color: var(--text-muted);
  font-style: italic;
}

/* Documents list */
.docs-stage-group {
  margin-bottom: 20px;
}

.docs-stage-heading {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.doc-card {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 6px;
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: all 0.15s;
}

.doc-card:hover {
  border-color: var(--accent);
  background: var(--bg3);
}

.doc-card-name { flex: 1; }

.doc-card-arrow {
  color: var(--accent);
  font-size: 16px;
  margin-left: 12px;
  flex-shrink: 0;
}

.docs-empty {
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  padding: 8px 0;
}

/* Pipeline Panel */
#panel-pipeline { overflow-y: auto; }

/* Pipeline Stats Grid */
.pipeline-stats, .pipeline-leads, .pipeline-proposals {
  padding: 24px 32px 0;
}
.pipeline-proposals { padding-bottom: 24px; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
}

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-total .stat-number { color: var(--accent); }
.stat-forecast .stat-number { color: var(--green); }
.stat-unassigned .stat-number { color: var(--amber); }

/* Owner chips */
.stats-owners { margin-bottom: 24px; }
.stats-owners h3 { font-size: 14px; color: var(--text-muted); margin-bottom: 8px; }
.owner-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.owner-chip {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 13px;
  color: var(--text);
}

/* Leads Table */
.leads-table { overflow-x: auto; }
.leads-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.leads-table th {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.leads-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.leads-table tr:hover { background: var(--bg2); }
.leads-table tr.overdue { background: rgba(255, 107, 107, 0.08); }
.leads-table tr.stale { background: rgba(255, 179, 71, 0.08); }

.lead-company { font-weight: 600; }
.forecast { font-family: monospace; }

/* Tier badges */
.tier-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.tier-immediate { background: rgba(255, 107, 107, 0.2); color: var(--red); }
.tier-hot { background: rgba(255, 179, 71, 0.2); color: var(--amber); }
.tier-warm { background: rgba(79, 124, 255, 0.2); color: var(--accent); }
.tier-long { background: rgba(122, 128, 153, 0.2); color: var(--text-muted); }
.tier-lost { background: rgba(122, 128, 153, 0.1); color: var(--text-muted); text-decoration: line-through; }

.unassigned { color: var(--amber); font-style: italic; }
.overdue-badge {
  background: var(--red);
  color: white;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 4px;
}

/* Proposals */
.proposals-list { display: flex; flex-direction: column; gap: 8px; }
.proposal-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.proposal-header { font-size: 14px; margin-bottom: 4px; }
.proposal-detail { font-size: 13px; color: var(--text-muted); }
.proposal-notes { font-size: 12px; color: var(--text-muted); margin-top: 6px; font-style: italic; }

.empty-state { color: var(--text-muted); font-style: italic; padding: 24px; text-align: center; }

/* Pipeline section headers */
#pipeline-leads h3, #pipeline-proposals h3 {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Pipeline Toolbar / Search */
.pipeline-toolbar {
  padding: 0 32px 16px;
}

#pipeline-search {
  width: 100%;
  max-width: 400px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  padding: 10px 16px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s;
}
#pipeline-search:focus { outline: none; border-color: var(--accent); }
#pipeline-search::placeholder { color: var(--text-muted); }

/* Sortable column headers */
.leads-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
  white-space: nowrap;
}
.leads-table th.sortable:hover { color: var(--accent); }
.leads-table th.sortable .sort-arrow {
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.4;
}
.leads-table th.sortable.sort-active .sort-arrow { opacity: 1; color: var(--accent); }

/* Clickable lead rows */
.leads-table tbody tr { cursor: pointer; transition: background 0.1s; }
.leads-table tbody tr:hover { background: var(--bg3) !important; }

/* Lead Detail Slide-out Panel */
.lead-detail-panel {
  position: fixed;
  top: 52px;
  right: 0;
  width: 420px;
  max-width: 90vw;
  height: calc(100vh - 52px);
  background: var(--bg2);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0,0,0,0.4);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideInRight 0.2s ease-out;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.lead-detail-header {
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}

.lead-detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.lead-detail-close:hover { color: var(--text); }

.lead-detail-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  padding-right: 40px;
}

.lead-detail-contact {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
}

.lead-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lead-detail-section h4 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.lead-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Salesperson dropdown */
.salesperson-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.salesperson-select {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  padding: 8px 12px;
  cursor: pointer;
  min-width: 160px;
  transition: border-color 0.15s;
}

.salesperson-select:hover,
.salesperson-select:focus {
  border-color: var(--green);
  outline: none;
}

.salesperson-status {
  font-size: 12px;
  color: var(--green);
  transition: opacity 0.3s;
}

.lead-detail-field {
  background: var(--bg3);
  border-radius: 8px;
  padding: 10px 12px;
}

.lead-detail-field-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.lead-detail-field-value {
  font-size: 14px;
  color: var(--text);
}

#lead-detail-nextstep {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}

.lead-detail-notes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lead-note-item {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
}

.lead-detail-activity {
  font-size: 13px;
  color: var(--text-muted);
}

/* Email View */
.email-view {
  height: calc(100vh - 52px);
  display: flex;
  overflow: hidden;
}

.email-container {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
}

/* Email detail panel: side-by-side inside flex row, not fixed */
#email-detail-panel {
  position: relative;
  top: auto;
  right: auto;
  height: 100%;
  overflow-y: auto;
  flex-shrink: 0;
}

/* Sync Status Bar */
.email-sync-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 32px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.sync-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}

.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.sync-dot.green { background: var(--green); }
.sync-dot.amber { background: var(--amber); }
.sync-dot.red { background: var(--red); }
.sync-dot.syncing {
  background: var(--accent);
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

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

.sync-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.sync-btn:hover { background: var(--border); }
.sync-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Phase 2: Email Sections --- */

.email-section {
  padding: 20px 32px;
  border-bottom: 1px solid var(--border);
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.section-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.section-summary {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: auto;
}

.section-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

.section-badge {
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 600;
}

.empty-state.calm {
  color: var(--green);
  font-size: 14px;
  padding: 16px 0;
}

/* Action Cards */
.action-cards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.action-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: 8px;
  padding: 14px 16px;
}

.action-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.action-card-date {
  font-size: 12px;
  color: var(--text-muted);
}

.action-card-salesperson {
  font-size: 11px;
  font-weight: 600;
  background: var(--bg3);
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 4px;
  padding: 2px 7px;
  margin-left: auto;
  white-space: nowrap;
}

.action-card-headline {
  font-size: 14px;
  font-weight: 600;
  color: var(--amber);
  margin-bottom: 6px;
}

.action-card-detail {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 4px;
  display: flex;
  gap: 8px;
}

.action-card-sender {
  font-weight: 500;
  color: var(--text);
}

.action-card-recommendation {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 10px;
}

.action-card-actions {
  display: flex;
  gap: 8px;
}

.action-card-btn {
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: background 0.15s;
}

.action-card-btn.dismiss {
  background: var(--bg2);
  color: var(--text-muted);
}

.action-card-btn.dismiss:hover { background: var(--border); }

.action-card-btn.view {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.action-card-btn.view:hover { background: var(--accent-hover); }

/* New Leads Cards */
.new-leads-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}

.new-lead-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: 8px;
  padding: 14px 16px;
}

.new-lead-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.new-lead-company {
  font-size: 14px;
  font-weight: 600;
}

.new-lead-detail {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.new-lead-type {
  color: var(--accent);
}

.new-lead-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

.new-lead-pipeline-link {
  color: var(--accent);
  text-decoration: none;
  margin-left: auto;
}

.new-lead-pipeline-link:hover { text-decoration: underline; }

.tier-badge {
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.tier-badge.tier-a { background: var(--green); color: #000; }
.tier-badge.tier-b { background: var(--accent); color: #fff; }
.tier-badge.tier-c { background: var(--text-muted); color: #fff; }

.stage-badge {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
}

/* Client Activity Feed */
.client-activity-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.client-activity-row {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.client-activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s;
}

.client-activity-header:hover { background: var(--bg2); }

.client-activity-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.client-activity-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.client-activity-count {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.client-activity-latest {
  font-size: 13px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.client-activity-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.client-activity-date {
  font-size: 12px;
  color: var(--text-muted);
}

.client-activity-arrow {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.client-activity-row.expanded .client-activity-arrow {
  transform: rotate(180deg);
}

.waiting-badge {
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.client-activity-threads {
  display: none;
  border-top: 1px solid var(--border);
  padding: 8px 16px;
  background: var(--bg2);
}

.client-activity-row.expanded .client-activity-threads {
  display: block;
}

.activity-thread-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.activity-thread-row:last-child { border-bottom: none; }

.thread-direction {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.activity-thread-row.outbound .thread-direction { color: var(--green); }
.activity-thread-row.inbound .thread-direction { color: var(--accent); }

.thread-from {
  font-weight: 500;
  white-space: nowrap;
  min-width: 120px;
}

.thread-subject {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.thread-date {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Activity Log (collapsed section) */
.section-header.collapsible {
  cursor: pointer;
  user-select: none;
}

.section-header.collapsible:hover { opacity: 0.8; }

.collapse-arrow {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.activity-log-body {
  margin-top: 10px;
}

/* Lead email history in pipeline detail */
.lead-email-history {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.view-all-emails-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
}

.view-all-emails-link:hover { text-decoration: underline; }

.email-stats {
  display: flex;
  gap: 16px;
  padding: 24px 32px 0;
  flex-wrap: wrap;
}

.email-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  gap: 16px;
  flex-wrap: wrap;
}

.email-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.email-filter-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}

.email-filter-btn:hover { border-color: var(--accent); color: var(--text); }
.email-filter-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
.email-filter-btn.flagged-filter.active { background: var(--amber); border-color: var(--amber); color: #000; }

.email-process-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.email-process-btn:hover { background: var(--accent-hover); }

.email-list {
  padding: 0 32px 32px;
}

.email-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
  gap: 12px;
}

.email-row:hover { border-color: var(--accent); }
.email-row.review-pending { border-left: 3px solid var(--amber); }
.email-row.review-dismissed { opacity: 0.5; }

.email-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.email-row-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.email-category-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #000;
  white-space: nowrap;
}

.email-sender {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

.email-subject-text {
  color: var(--text-muted);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-confidence {
  font-size: 12px;
  color: var(--text-muted);
  font-family: monospace;
}

.email-date {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.email-flag {
  color: var(--amber);
  font-size: 16px;
}

.email-status-badge {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.email-approve-btn, .email-dismiss-btn {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 11px;
  cursor: pointer;
  background: var(--bg3);
  color: var(--text);
  transition: all 0.15s;
}

.email-approve-btn:hover { background: var(--green); color: #000; border-color: var(--green); }
.email-dismiss-btn:hover { background: var(--red); color: white; border-color: var(--red); }

/* Email Process Modal Form */
.email-form {
  padding: 20px;
}

.email-form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.email-form-field {
  flex: 1;
}

.email-form-field.full-width {
  width: 100%;
  margin-bottom: 12px;
}

.email-form-field label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.email-form-field input,
.email-form-field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}

.email-form-field textarea {
  resize: vertical;
  min-height: 120px;
}

.email-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

/* Email Result */
.email-result {
  padding: 20px;
  border-top: 1px solid var(--border);
}

.email-result-success h3 {
  margin-bottom: 12px;
  font-size: 16px;
}

.email-result-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.email-result-error {
  color: var(--red);
  padding: 12px;
  background: rgba(255,107,107,0.1);
  border-radius: 8px;
}

.email-result-info {
  color: var(--amber);
  padding: 12px;
  background: rgba(255,179,71,0.1);
  border-radius: 8px;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Print styles */
@media print {
  /* Hide everything except the doc modal */
  body { background: white; }
  .top-bar, .team-view, .pipeline-view, .email-view, #flag-modal,
  .selection-tooltip, .modal-doc-actions, .login-view { display: none !important; }

  /* Reset modal to fill page */
  .modal-overlay {
    position: static !important;
    background: none !important;
    display: block !important;
  }
  .modal.modal-wide {
    width: 100%; max-width: 100%; max-height: none;
    padding: 0; border: none; border-radius: 0;
    background: white; color: black;
    box-shadow: none;
  }
  .modal-doc-header {
    border-bottom: 2px solid #333;
    margin-bottom: 20px;
    padding-bottom: 12px;
  }
  .modal-doc-header h2 { color: black; font-size: 20px; }
  .modal-doc-body {
    overflow: visible;
    color: black;
  }

  /* Typography */
  .modal-doc-body h3 { color: #333; }
  .modal-doc-body p, .modal-doc-body li, .modal-doc-body td, .modal-doc-body strong { color: black; }
  .modal-doc-body table { border: 1px solid #999; }
  .modal-doc-body th { border-bottom: 2px solid #333; color: #333; background: #f0f0f0 !important; }
  .modal-doc-body td { border-bottom: 1px solid #ccc; }
  .modal-doc-body blockquote {
    border-left: 3px solid #666;
    color: #333;
    background: #f5f5f5 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .modal-doc-body code { background: #eee; color: black; }
  .modal-doc-body hr { border-top-color: #ccc; }

  /* GRG Logo header */
  .print-header {
    display: block !important;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #3D2816;
  }
  .print-logo {
    width: 200px;
    height: auto;
  }

  /* Date footer */
  .print-footer {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    padding-top: 12px;
    border-top: 1px solid #ccc;
    font-size: 11px;
    color: #666;
  }

  /* Page break control */
  .modal-doc-body tr, .modal-doc-body blockquote { break-inside: avoid; }
  .modal-doc-body h3 { break-after: avoid; }
}