/* ============================================================
   FLEXICAR DIAGRAMS — Shared Styles
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: #0a0a14; color: #e0e0e0; overflow: hidden; height: 100vh; }
body.spa { display: flex; }
body.spa > #root { display: flex; width: 100%; height: 100%; }

/* --- Loading --- */
.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; width: 100%; gap: 16px; }
.spinner { width: 32px; height: 32px; border: 3px solid #1a1a30; border-top-color: #e94560; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading p { font-size: 13px; color: #555; }

/* --- Sidebar --- */
.sidebar { width: 260px; min-width: 260px; background: #0d0d1a; border-right: 1px solid #1a1a30; display: flex; flex-direction: column; z-index: 10; }
.sidebar-header { padding: 20px 20px 16px; border-bottom: 1px solid #1a1a30; }
.sidebar-header h1 { font-size: 16px; font-weight: 700; color: #e94560; letter-spacing: 0.5px; }
.sidebar-header p { font-size: 11px; color: #555; margin-top: 4px; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 0; }
.nav-section { padding: 0 12px; margin-bottom: 8px; }
.nav-section-title { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #444; padding: 8px 8px 6px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin: 2px 0; border-radius: 8px; cursor: pointer; transition: all 0.15s; border: 1px solid transparent; font-size: 13px; color: #888; text-decoration: none; }
.nav-item:hover { background: #111128; color: #ccc; border-color: #1a1a30; }
.nav-item.active { background: #161640; color: #fff; border-color: #e94560; }
.nav-item .nav-icon { display: flex; align-items: center; opacity: 0.6; width: 20px; }
.nav-item.active .nav-icon { opacity: 1; }
.nav-label { flex: 1; }
.nav-badge { font-size: 9px; background: #1a1a30; color: #666; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.nav-item.active .nav-badge { background: #e94560; color: #fff; }
.kbd { font-size: 9px; color: #333; background: #111; padding: 1px 5px; border-radius: 3px; border: 1px solid #222; font-family: monospace; }
.sidebar-footer { padding: 12px 16px; border-top: 1px solid #1a1a30; }
.sidebar-shortcut { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #444; cursor: pointer; padding: 6px 8px; border-radius: 6px; transition: all 0.15s; }
.sidebar-shortcut:hover { background: #111128; color: #888; }
.sidebar-shortcut .kbd { margin-left: auto; }

/* --- Content area --- */
.content { flex: 1; position: relative; overflow: hidden; }
.view-wrapper { width: 100%; height: 100%; position: absolute; inset: 0; }

/* --- XYFlow dark theme overrides --- */
.react-flow { background: #0a0a14 !important; }
.react-flow__node { padding: 0; border-radius: 0; font-size: inherit; color: inherit; box-shadow: none !important; background: transparent !important; border: none !important; }
.react-flow__node.selected { box-shadow: none !important; }
.react-flow__handle { width: 6px; height: 6px; background: #3a3a60 !important; border: none !important; min-width: 0; min-height: 0; opacity: 0.3; transition: opacity 0.2s; }
.react-flow__node:hover .react-flow__handle { opacity: 1; }
.react-flow__edge-path { stroke-width: 2; }
.react-flow__controls { background: transparent !important; border: 1px solid #2a2a50; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important; }
.react-flow__controls button { background: #161630 !important; border: none !important; border-bottom: 1px solid #1a1a30 !important; color: #999; fill: #999; width: 28px; height: 28px; }
.react-flow__controls button:hover { background: #1e1e40 !important; color: #fff; fill: #fff; }
.react-flow__controls button svg { fill: currentColor; }
.react-flow__minimap { background: #0d0d1a !important; border: 1px solid #1a1a30 !important; border-radius: 8px; overflow: hidden; }
.react-flow__minimap-mask { fill: rgba(10, 10, 20, 0.7) !important; }
.react-flow__attribution { display: none !important; }
.react-flow__background pattern circle { fill: #1e1e3a; }
.react-flow__panel { margin: 10px !important; }

/* --- Custom XYFlow node --- */
.xy-node { background: #161630; border: 1px solid #2a2a50; border-radius: 10px; overflow: hidden; transition: box-shadow 0.2s, border-color 0.2s; min-width: 140px; }
.xy-node:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.4); border-color: #3a3a60; }
.xy-node-header { padding: 8px 14px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; display: flex; align-items: center; gap: 8px; }
.xy-node-body { padding: 10px 14px; font-size: 13px; line-height: 1.4; color: #ccc; }
.xy-node[data-type="start"] .xy-node-header { background: #1a3a2a; color: #2ecc71; }
.xy-node[data-type="decision"] .xy-node-header { background: #1a2a3a; color: #3498db; }
.xy-node[data-type="action"] .xy-node-header { background: #2a1a3a; color: #9b59b6; }
.xy-node[data-type="data"] .xy-node-header { background: #3a2a1a; color: #f39c12; }
.xy-node[data-type="danger"] .xy-node-header { background: #3a1a1a; color: #e74c3c; }
.xy-node[data-type="success"] .xy-node-header { background: #1a3a2a; color: #1abc9c; }
.xy-node[data-type="info"] .xy-node-header { background: #1a1a2e; color: #74b9ff; }

/* --- Sequence Diagram --- */
.seq-container { width: 100%; height: 100%; overflow: hidden; cursor: grab; position: relative; }
.seq-container:active { cursor: grabbing; }
.seq-canvas { position: absolute; transform-origin: 0 0; }
.seq-svg text { font-family: 'Segoe UI', system-ui, sans-serif; }
.seq-actor-label { font-size: 13px; font-weight: 600; fill: #fff; }
.seq-actor-sublabel { font-size: 10px; fill: #aaa; }
.seq-lifeline { stroke-dasharray: 6 4; }
.seq-msg-label { font-size: 11px; fill: #ccc; }
.seq-msg-note { font-size: 10px; fill: #666; font-style: italic; }
.seq-phase-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; fill: #e94560; text-transform: uppercase; }
.seq-phase-line { stroke-dasharray: 4 4; }
.seq-fragment-label { font-size: 10px; font-weight: 600; letter-spacing: 0.5px; }
.seq-self-path { fill: none; }

/* --- Table --- */
.table-container { padding: 24px; height: 100%; overflow: auto; background: #0a0a14; }
.table-search { margin-bottom: 16px; }
.table-search input { background: #161630; border: 1px solid #2a2a50; color: #eee; padding: 10px 16px; border-radius: 8px; width: 320px; font-size: 14px; outline: none; transition: border-color 0.2s; }
.table-search input:focus { border-color: #e94560; }
.table-search input::placeholder { color: #444; }
.req-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.req-table thead th { background: #111122; color: #777; padding: 10px 8px; text-align: center; font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; position: sticky; top: 0; z-index: 2; border-bottom: 2px solid #1e1e3a; cursor: pointer; user-select: none; transition: color 0.15s; }
.req-table thead th:hover { color: #e94560; }
.req-table thead th:first-child { text-align: left; min-width: 240px; padding-left: 16px; }
.req-table thead th .sort-arrow { margin-left: 4px; font-size: 10px; }
.req-table tbody td { padding: 9px 8px; text-align: center; border-bottom: 1px solid #111122; transition: background 0.1s; }
.req-table tbody td:first-child { text-align: left; padding-left: 16px; font-weight: 500; }
.req-table tbody tr:hover td { background: #161630; }
.req-table .check { color: #2ecc71; font-weight: bold; font-size: 15px; }
.req-table .cross { color: #252530; font-size: 15px; }
.group-row td { background: #0d1a30 !important; padding: 14px 16px !important; font-weight: 700 !important; font-size: 14px !important; color: #e94560 !important; border-bottom: 2px solid #1a2a4a !important; letter-spacing: 0.5px; }
.doc-count { margin-left: auto; background: #1a1a2e; color: #888; font-size: 11px; padding: 2px 8px; border-radius: 6px; font-weight: 400; }

/* --- Chart --- */
.chart-container { padding: 24px; height: 100%; display: flex; flex-direction: column; background: #0a0a14; }
.chart-container h3 { font-size: 15px; color: #999; margin-bottom: 16px; font-weight: 400; }
.chart-wrapper { flex: 1; min-height: 0; }
.recharts-cartesian-grid-horizontal line, .recharts-cartesian-grid-vertical line { stroke: #1e1e3a; }
.recharts-text { fill: #888 !important; font-size: 11px !important; }
.recharts-tooltip-wrapper { outline: none; }
.custom-tooltip { background: #1a1a2e; border: 1px solid #2a2a50; border-radius: 8px; padding: 12px 16px; font-size: 12px; }
.custom-tooltip .tt-title { color: #fff; font-weight: 600; margin-bottom: 8px; }
.custom-tooltip .tt-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; color: #aaa; }
.custom-tooltip .tt-dot { width: 8px; height: 8px; border-radius: 50%; }

/* --- Command Palette (cmdk) --- */
.cmdk-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding-top: 18vh; backdrop-filter: blur(4px); }
.cmdk-dialog { width: 520px; background: #12122a; border: 1px solid #2a2a50; border-radius: 12px; overflow: hidden; box-shadow: 0 16px 64px rgba(0,0,0,0.6); }
[cmdk-input] { width: 100%; padding: 16px 18px; background: transparent; border: none; border-bottom: 1px solid #1a1a30; color: #eee; font-size: 15px; font-family: inherit; outline: none; }
[cmdk-input]::placeholder { color: #444; }
[cmdk-list] { padding: 8px; max-height: 320px; overflow: auto; }
[cmdk-item] { padding: 10px 12px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 12px; font-size: 13px; color: #aaa; transition: none; }
[cmdk-item][data-selected='true'] { background: #1e1e40; color: #fff; }
[cmdk-item] svg { opacity: 0.5; }
[cmdk-item][data-selected='true'] svg { opacity: 1; }
[cmdk-empty] { padding: 24px; text-align: center; color: #555; font-size: 13px; }
.cmdk-badge { font-size: 10px; margin-left: auto; color: #555; background: #1a1a30; padding: 2px 8px; border-radius: 4px; }
[cmdk-item][data-selected='true'] .cmdk-badge { background: #2a2a50; color: #aaa; }
.cmdk-shortcut { font-size: 10px; color: #333; margin-left: auto; font-family: monospace; }

/* --- Floating Tooltip --- */
.tip-popup { background: #1a1a2e; border: 1px solid #2a2a50; border-radius: 6px; padding: 6px 10px; font-size: 11px; color: #ccc; z-index: 50; max-width: 220px; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,0.4); }

/* --- Sonner toast overrides --- */
[data-sonner-toaster] [data-sonner-toast] { background: #161630 !important; border: 1px solid #2a2a50 !important; color: #e0e0e0 !important; }
[data-sonner-toaster] [data-sonner-toast] [data-description] { color: #888 !important; }

/* --- Zoom controls (sequence diagram) --- */
.zoom-controls { position: absolute; bottom: 20px; right: 20px; display: flex; gap: 8px; z-index: 10; }
.zoom-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #2a2a50; background: #161630; color: #999; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
.zoom-btn:hover { background: #1e1e40; color: #fff; border-color: #3a3a60; }

/* --- Export bar --- */
.export-bar { position: absolute; top: 12px; right: 12px; display: flex; gap: 4px; z-index: 10; }
.export-btn { display: flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 8px; border: 1px solid #2a2a50; background: #161630; color: #999; font-size: 12px; font-family: inherit; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.export-btn:hover { background: #1e1e40; color: #fff; border-color: #3a3a60; }
.export-btn:disabled { opacity: 0.5; cursor: wait; }
.export-btn-copy { background: #1a1a3a; border-color: #3a3a60; color: #ccc; }
.export-btn-copy:hover { background: #252550; color: #fff; border-color: #e94560; }
.export-dropdown { position: relative; }
.export-menu { position: absolute; top: calc(100% + 4px); right: 0; background: #12122a; border: 1px solid #2a2a50; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.5); min-width: 120px; }
.export-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 14px; border: none; background: transparent; color: #aaa; font-size: 12px; font-family: inherit; cursor: pointer; transition: all 0.1s; }
.export-menu button:hover { background: #1e1e40; color: #fff; }
.export-menu button + button { border-top: 1px solid #1a1a30; }

/* --- MDX Renderer --- */
.mdx-container { display: flex; height: 100%; overflow: hidden; }
.mdx-editor { flex: 4; min-width: 280px; display: flex; flex-direction: column; border-right: 1px solid #1a1a30; }
.mdx-preview-pane { flex: 6; display: flex; flex-direction: column; overflow: hidden; }
.mdx-pane-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #0d0d1a; border-bottom: 1px solid #1a1a30; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #555; }
.mdx-status { font-size: 10px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.mdx-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mdx-header-right { display: flex; align-items: center; gap: 10px; }
.mdx-filename { font-size: 10px; font-weight: 400; text-transform: none; letter-spacing: 0; color: #e94560; background: #1a1a2e; padding: 2px 8px; border-radius: 4px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdx-autosaved { font-size: 9px; color: #2ecc71; text-transform: none; letter-spacing: 0; animation: mdx-fade 1.5s ease-out forwards; }
@keyframes mdx-fade { 0% { opacity: 1; } 100% { opacity: 0; } }
.mdx-toolbar { display: flex; align-items: center; gap: 4px; padding: 6px 10px; background: #0d0d1a; border-bottom: 1px solid #1a1a30; }
.mdx-tool-btn { display: flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 6px; border: 1px solid #2a2a50; background: #161630; color: #888; font-size: 11px; font-family: inherit; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.mdx-tool-btn:hover { background: #1e1e40; color: #fff; border-color: #3a3a60; }
.mdx-tool-primary { border-color: #3a3a60; color: #ccc; }
.mdx-tool-primary:hover { border-color: #e94560; color: #fff; }
.mdx-textarea { flex: 1; resize: none; background: #0a0a14; color: #ccc; border: none; padding: 20px; font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 13px; line-height: 1.6; outline: none; tab-size: 2; }
.mdx-textarea::placeholder { color: #333; }
.mdx-error { padding: 20px; overflow: auto; }
.mdx-error pre { background: #2a1a1a; border: 1px solid #4a2a2a; color: #e74c3c; padding: 16px; border-radius: 8px; font-size: 12px; font-family: monospace; white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow: auto; }
.mdx-preview { flex: 1; overflow-y: auto; padding: 24px 32px; }
.mdx-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; }
.mdx-loading p { font-size: 12px; color: #555; }

/* MDX rendered content */
.mdx-preview h1 { font-size: 28px; font-weight: 700; color: #fff; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 2px solid #1e1e3a; }
.mdx-preview h2 { font-size: 22px; font-weight: 600; color: #eee; margin: 28px 0 12px; padding-bottom: 8px; border-bottom: 1px solid #1a1a30; }
.mdx-preview h3 { font-size: 18px; font-weight: 600; color: #ddd; margin: 24px 0 10px; }
.mdx-preview h4 { font-size: 15px; font-weight: 600; color: #ccc; margin: 20px 0 8px; }
.mdx-preview p { font-size: 14px; line-height: 1.7; color: #bbb; margin: 0 0 12px; }
.mdx-preview strong { color: #fff; font-weight: 600; }
.mdx-preview em { color: #aaa; }
.mdx-preview a { color: #e94560; text-decoration: none; }
.mdx-preview a:hover { text-decoration: underline; }
.mdx-preview ul, .mdx-preview ol { padding-left: 24px; margin: 0 0 12px; }
.mdx-preview li { font-size: 14px; line-height: 1.7; color: #bbb; margin: 4px 0; }
.mdx-preview hr { border: none; border-top: 1px solid #1e1e3a; margin: 24px 0; }
.mdx-preview blockquote { border-left: 3px solid #e94560; background: #111122; padding: 12px 16px; margin: 12px 0; border-radius: 0 6px 6px 0; }
.mdx-preview blockquote p { color: #aaa; margin: 0; }
.mdx-preview code { background: #1a1a2e; color: #e94560; padding: 2px 6px; border-radius: 4px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.9em; }
.mdx-preview pre { background: #111122; border: 1px solid #1e1e3a; border-radius: 8px; padding: 16px; margin: 12px 0; overflow-x: auto; }
.mdx-preview pre code { background: none; color: #ccc; padding: 0; font-size: 13px; line-height: 1.5; }
.mdx-preview table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.mdx-preview thead th { background: #111122; color: #888; padding: 10px 12px; text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #1e1e3a; }
.mdx-preview tbody td { padding: 8px 12px; border-bottom: 1px solid #111122; color: #bbb; }
.mdx-preview tbody tr:hover td { background: #161630; }
.mdx-preview img { max-width: 100%; border-radius: 8px; margin: 12px 0; }
.mdx-preview del { color: #666; }
.mdx-preview input[type="checkbox"] { margin-right: 6px; accent-color: #e94560; }

/* --- MDX File List Panel --- */
.mdx-filelist { width: 200px; min-width: 200px; background: #0d0d1a; border-right: 1px solid #1a1a30; display: flex; flex-direction: column; overflow: hidden; }
.mdx-filelist-header { padding: 10px 12px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #444; border-bottom: 1px solid #1a1a30; background: #0d0d1a; }
.mdx-filelist-items { flex: 1; overflow-y: auto; padding: 6px 0; }
.mdx-file-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; margin: 2px 6px; border-radius: 6px; cursor: pointer; transition: all 0.15s; border: 1px solid transparent; }
.mdx-file-item:hover { background: #111128; border-color: #1a1a30; }
.mdx-file-item.active { background: #161640; border-color: #e94560; }
.mdx-file-date { font-size: 12px; font-weight: 500; color: #888; line-height: 1.3; }
.mdx-file-item.active .mdx-file-date { color: #fff; }
.mdx-file-item:hover .mdx-file-date { color: #ccc; }
.mdx-file-item.active:hover .mdx-file-date { color: #fff; }
.mdx-file-name { font-size: 9px; color: #444; font-family: 'SF Mono', 'Fira Code', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdx-file-item.active .mdx-file-name { color: #e94560; }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0a0a14; }
::-webkit-scrollbar-thumb { background: #1e1e3a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2e2e4a; }