/* /assets/js/styles/ops.css — mxAURA Ops Console */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; background: #0B0F19; color: #E2E8F0; overflow: hidden; font-size: 14px; }
a { text-decoration: none; color: inherit; cursor: pointer; }

/* ═══ TOPBAR ═══ */
.dk-topbar { height: 48px; background: #111827; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; border-bottom: 1px solid #1F2937; position: sticky; top: 0; z-index: 100; }
.dk-topbar-left { display: flex; align-items: center; gap: 12px; }
.dk-logo { font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -0.3px; }
.dk-logo-aura { color: #7c3aed; }
.dk-logo-tm { font-size: 9px; font-weight: 500; color: #7c3aed; vertical-align: top; opacity: 0.7; }
.dk-logo-tag { font-size: 9px; font-weight: 700; letter-spacing: 2px; color: #10B981; background: rgba(16,185,129,0.15); padding: 2px 8px; border-radius: 4px; }
.dk-topbar-right { display: flex; align-items: center; gap: 16px; }
.dk-admin-name { font-size: 12px; color: #6B7280; }
.dk-logout-btn { background: none; border: 1px solid #374151; color: #9CA3AF; padding: 3px 10px; border-radius: 4px; font-size: 11px; cursor: pointer; }
.dk-logout-btn:hover { border-color: #6B7280; color: #fff; }
/* Time display control. Sits left of the operator name because it changes what
   every number on the page means. */
.dk-tz-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid #374151; color: #9CA3AF; padding: 3px 9px; border-radius: 4px; font-size: 11px; font-family: "JetBrains Mono", monospace; cursor: pointer; }
.dk-tz-btn:hover { border-color: #7c3aed; color: #C4B5FD; }
.dk-tz-btn svg { opacity: 0.6; flex-shrink: 0; }

/* ═══ LAYOUT ═══ */
.dk-layout { display: flex; height: calc(100vh - 48px); }
.dk-sidebar { width: 190px; background: #111827; padding: 8px 0; display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; overflow-y: auto; border-right: 1px solid #1F2937; }
.dk-nav-group { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: #4B5563; padding: 16px 16px 6px; text-transform: uppercase; }
/* v3.1.1018: a section header reads like a page link (same size, weight and colour), with its pages indented under it. */
.dk-sidebar .dk-nav-group[role="button"] { font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #9CA3AF; padding: 8px 16px; margin-top: 2px; border-left: 2px solid transparent; }
/* v3.1.1102: icon, name, then the chevron right after the name. */
.dk-sidebar .dk-nav-group[role="button"] .dk-nav-gicon { flex-shrink: 0; }
.dk-sidebar .dk-nav-group[role="button"] .dk-nav-chev { margin-left: -2px; flex-shrink: 0; }
.dk-sidebar .dk-nav-items .dk-nav-link { padding-left: 30px; }
/* v3.1.904: sections fold. The header is the toggle; the chevron turns when folded. */
.dk-sidebar .dk-nav-group[role="button"] { display: flex; align-items: center; justify-content: flex-start; gap: 8px; cursor: pointer; user-select: none; }
.dk-sidebar .dk-nav-group[role="button"]:hover, .dk-sidebar .dk-nav-group[role="button"]:focus-visible { color: #E5E7EB; background: rgba(255,255,255,0.03); outline: none; }
.dk-nav-chev { transition: transform 0.15s; opacity: 0.7; }
.dk-nav-group.collapsed .dk-nav-chev { transform: rotate(-90deg); }
.dk-nav-items { display: flex; flex-direction: column; gap: 1px; }
.dk-nav-group.collapsed + .dk-nav-items { display: none; }
.dk-nav-link { display: flex; align-items: center; gap: 8px; padding: 8px 16px; color: #9CA3AF; font-size: 13px; font-weight: 500; border-left: 2px solid transparent; transition: all 0.1s; }
.dk-nav-link:hover { color: #E5E7EB; background: rgba(255,255,255,0.03); }
.dk-nav-link.active { color: #10B981; background: rgba(16,185,129,0.08); border-left-color: #10B981; }
.dk-nav-link svg { flex-shrink: 0; opacity: 0.7; }
.dk-nav-link.active svg { opacity: 1; }
.dk-main { flex: 1; overflow-y: auto; padding: 24px 28px; }

/* ═══ PAGE ═══ */
.dk-page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.dk-page-header h1 { font-size: 20px; font-weight: 700; color: #F3F4F6; }
.dk-back-link { font-size: 11px; color: #10B981; display: block; margin-bottom: 4px; }
.dk-back-link:hover { text-decoration: underline; }
.dk-section { margin-top: 32px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.dk-section h2 { font-size: 14px; font-weight: 600; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.5px; }
.dk-section-count { font-size: 12px; color: #6B7280; font-weight: 400; margin-left: 8px; text-transform: none; letter-spacing: 0; }
.dk-loading { text-align: center; padding: 48px; color: #6B7280; }
.dk-empty { text-align: center; padding: 40px; color: #4B5563; }
.dk-empty-sm { padding: 16px; color: #4B5563; font-size: 13px; }
.dk-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 8px; padding: 14px; color: #FCA5A5; font-size: 13px; }
.dk-hint { color: #6B7280; font-size: 12px; }
.dk-text-green { color: #34D399; }
.dk-text-red { color: #F87171; }
.dk-text-muted { color: #6B7280; font-size: 12px; }
.dk-footer-ts { margin-top: 20px; font-size: 11px; color: #4B5563; }

/* ═══ VITALS ROW ═══ */
.dk-vitals-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.dk-vital { background: #111827; border: 1px solid #1F2937; border-radius: 8px; padding: 12px 16px; text-align: center; min-width: 110px; flex: 1; }
.dk-vital-val { font-size: 24px; font-weight: 700; color: #F3F4F6; font-family: "JetBrains Mono", monospace; }
.dk-vital-label { font-size: 10px; font-weight: 600; color: #6B7280; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.dk-vital-ok { border-color: rgba(16,185,129,0.3); }
.dk-vital-err { border-color: rgba(239,68,68,0.3); }
.dk-vital-ok .dk-vital-val { color: #34D399; }
.dk-vital-err .dk-vital-val { color: #F87171; }
/* Amber tier. accountsView has referenced .dk-vital-warn since dormancy
   shipped and the class never existed, so those tiles rendered as plain
   neutral — a warning that looks identical to normal is not a warning. */
.dk-vital-warn { border-color: rgba(245,158,11,0.35); }
.dk-vital-warn .dk-vital-val { color: #FBBF24; }

/* ═══ FLEET GRID ═══ */
.dk-fleet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 8px; margin-top: 8px; }
.dk-worker-card { background: #111827; border: 1px solid #1F2937; border-radius: 8px; padding: 12px 14px; cursor: pointer; transition: all 0.15s; }
.dk-worker-card:hover { border-color: #374151; background: #1a2234; }
.dk-wc-ok { border-left: 3px solid #10B981; }
.dk-wc-err { border-left: 3px solid #EF4444; }
.dk-wc-gray { border-left: 3px solid #374151; opacity: 0.5; cursor: default; }
.dk-wc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dk-wc-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dk-wc-ok .dk-wc-dot { background: #10B981; box-shadow: 0 0 6px rgba(16,185,129,0.4); }
.dk-wc-err .dk-wc-dot { background: #EF4444; box-shadow: 0 0 6px rgba(239,68,68,0.4); }
.dk-wc-gray .dk-wc-dot { background: #374151; }
.dk-wc-name { font-size: 12px; font-weight: 600; color: #E5E7EB; font-family: "JetBrains Mono", monospace; }
.dk-wc-meta { display: flex; justify-content: space-between; font-size: 11px; color: #6B7280; }

/* ═══ ALERTS ═══ */
.dk-alert { padding: 10px 14px; border-radius: 8px; font-size: 12px; margin-bottom: 12px; }
.dk-alert-err { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #FCA5A5; }
.dk-alert-ok { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); color: #6EE7B7; padding: 12px 16px; border-radius: 8px; }
.dk-muted { color: #6B7280; font-size: 13px; }

/* ═══ CARDS ═══ */
.dk-card-row { display: grid; grid-template-columns: 300px 1fr; gap: 12px; }
.dk-card { background: #111827; border: 1px solid #1F2937; border-radius: 8px; padding: 16px; }
.dk-card h3 { font-size: 13px; font-weight: 600; color: #9CA3AF; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.3px; }
.dk-card-wide { min-width: 0; }
.dk-kv { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 6px 0; border-bottom: 1px solid #1F2937; }
.dk-kv:last-child { border-bottom: none; }
.dk-kv > span:first-child { color: #6B7280; }
.dk-kv-err { color: #F87171; }
.dk-status-ok { color: #34D399; font-weight: 600; }
.dk-status-err { color: #F87171; font-weight: 600; }
.dk-pre { font-family: "JetBrains Mono", monospace; font-size: 11px; color: #9CA3AF; background: #0B0F19; border: 1px solid #1F2937; border-radius: 6px; padding: 12px; overflow: auto; max-height: 400px; white-space: pre-wrap; word-break: break-all; }

/* ═══ TABLES ═══ */
.dk-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dk-table th { text-align: left; padding: 8px 10px; font-weight: 600; color: #6B7280; border-bottom: 1px solid #1F2937; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.dk-table td { padding: 8px 10px; border-bottom: 1px solid rgba(31,41,55,0.5); vertical-align: middle; color: #D1D5DB; }
.dk-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.dk-table-compact td { padding: 5px 8px; font-size: 11px; }
.dk-table-mono td { font-family: "JetBrains Mono", monospace; font-size: 11px; }
.dk-table-scroll { overflow-x: auto; }
/* v3.1.955: ten rows (about 28 px each, one line) under a header that stays put; the rest scroll. */
.dk-table-capped { max-height: 316px; overflow: auto; border: 1px solid #1F2937; border-radius: 6px; }
.dk-table-capped td { white-space: nowrap; }
/* v3.1.958: Clear / Show all beside a list's heading. */
.dk-clear-bar { display: flex; align-items: center; gap: 10px; }
.dk-clear-btn { padding: 3px 10px; font-size: 11px; }
.dk-table-capped thead th { position: sticky; top: 0; z-index: 1; background: #0B0F19; }
/* v3.1.1109: a section heading with its action at the right (Credential Vault: Add secret). */
.dk-section-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* v3.1.1109: the vault's rows scroll under a header that stays put; the list uses the height the window has. */
.vault-scroll { max-height: calc(100vh - 320px); min-height: 200px; margin-bottom: 28px; }
.dk-cell-date { font-size: 11px; color: #6B7280; white-space: nowrap; }
.dk-cell-detail { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6B7280; }
.dk-tr-pass td { color: #D1D5DB; }
.dk-tr-fail td { color: #FCA5A5; }
.dk-tr-skip td { color: #6B7280; }

/* ═══ BADGES ═══ */
.dk-badge { display: inline-block; padding: 2px 7px; border-radius: 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.dk-badge-pass { background: rgba(16,185,129,0.15); color: #34D399; }
.dk-badge-fail { background: rgba(239,68,68,0.15); color: #F87171; }
.dk-badge-skip { background: rgba(107,114,128,0.2); color: #9CA3AF; }
.dk-badge-suite { background: rgba(99,102,241,0.15); color: #A5B4FC; }
.dk-code-sm { font-family: "JetBrains Mono", monospace; font-size: 10px; background: #1F2937; padding: 1px 5px; border-radius: 3px; color: #9CA3AF; }
.dk-code-xs { font-family: "JetBrains Mono", monospace; font-size: 9px; background: #1F2937; padding: 1px 4px; border-radius: 3px; color: #6B7280; }

/* ═══ BUTTONS ═══ */
.dk-btn { padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: all 0.15s; }
.dk-btn-primary { background: #10B981; color: #fff; }
.dk-btn-primary:hover { background: #059669; }
.dk-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.dk-btn-outline { background: transparent; border: 1px solid #374151; color: #D1D5DB; }
.dk-btn-outline:hover { border-color: #6B7280; color: #fff; }
.dk-btn-sm { font-size: 11px; padding: 3px 8px; border-radius: 4px; cursor: pointer; }
.dk-refresh-btn { padding: 5px 12px; background: #1F2937; border: 1px solid #374151; border-radius: 6px; font-size: 12px; color: #9CA3AF; cursor: pointer; }
.dk-refresh-btn:hover { border-color: #6B7280; color: #fff; }
.dk-link-btn { background: none; border: none; color: #10B981; font-size: 12px; cursor: pointer; font-weight: 500; }
.dk-link-btn:hover { text-decoration: underline; }

/* ═══ TEST HARNESS ═══ */
.dk-test-actions { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.dk-test-summary { display: flex; gap: 16px; align-items: center; padding: 12px 16px; background: #111827; border: 1px solid #1F2937; border-radius: 8px; margin-bottom: 12px; }
.dk-test-stat { font-size: 13px; color: #9CA3AF; }
.dk-test-stat span { font-weight: 700; font-size: 18px; margin-right: 4px; }
.dk-ts-pass span { color: #34D399; }
.dk-ts-fail span { color: #F87171; }
.dk-ts-skip span { color: #6B7280; }

/* ═══ CREDENTIAL VAULT ═══ */
.dk-age-badge { display: inline-block; padding: 2px 6px; border-radius: 10px; font-size: 10px; font-weight: 600; }
.dk-age-ok { background: rgba(16,185,129,0.15); color: #34D399; }
.dk-age-warn { background: rgba(245,158,11,0.15); color: #FBBF24; }
.dk-age-old { background: rgba(239,68,68,0.15); color: #F87171; }
.dk-age-unknown { background: rgba(107,114,128,0.15); color: #6B7280; }
.dk-groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; margin-top: 8px; }
.dk-group-card { background: #111827; border: 1px solid #1F2937; border-radius: 8px; padding: 14px; }
.dk-group-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.dk-group-header strong { font-family: "JetBrains Mono", monospace; font-size: 13px; color: #E5E7EB; }
.dk-group-desc { font-size: 11px; color: #6B7280; margin-bottom: 8px; }
.dk-group-workers { display: flex; flex-wrap: wrap; gap: 4px; }

/* ═══ QUERY EXPLORER ═══ */
.dk-quick-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.dk-quick-btn { padding: 6px 12px; background: #1F2937; border: 1px solid #374151; border-radius: 6px; color: #D1D5DB; font-size: 12px; cursor: pointer; transition: all 0.15s; }
.dk-quick-btn:hover { border-color: #10B981; color: #10B981; }
.dk-query-area { margin-bottom: 16px; }
.dk-sql-input { width: 100%; background: #111827; border: 1px solid #1F2937; border-radius: 8px; padding: 12px; color: #E5E7EB; font-family: "JetBrains Mono", monospace; font-size: 13px; resize: vertical; outline: none; }
.dk-sql-input:focus { border-color: #10B981; }
.dk-query-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.dk-query-meta { font-size: 12px; color: #6B7280; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }

/* ═══ CONFIG ═══ */
.dk-config-input { background: #0B0F19; border: 1px solid #1F2937; border-radius: 4px; padding: 4px 8px; color: #E5E7EB; font-family: "JetBrains Mono", monospace; font-size: 13px; width: 200px; outline: none; }
.dk-config-input:focus { border-color: #10B981; }
.dk-schema-grid { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.dk-schema-table { background: #111827; border: 1px solid #1F2937; border-radius: 6px; }
.dk-schema-table summary { padding: 10px 14px; cursor: pointer; display: flex; align-items: center; gap: 12px; font-size: 13px; }
.dk-schema-table summary:hover { background: rgba(255,255,255,0.02); }
.dk-schema-table summary code { font-family: "JetBrains Mono", monospace; font-weight: 600; color: #E5E7EB; }
.dk-schema-table[open] { border-color: #374151; }
.dk-schema-table[open] summary { border-bottom: 1px solid #1F2937; }

/* ═══ LOGIN ═══ */
.dk-login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0B0F19; }
.dk-login-card { background: #111827; border: 1px solid #1F2937; border-radius: 12px; padding: 36px; width: 380px; max-width: 90vw; }
.dk-login-logo { font-size: 26px; font-weight: 700; color: #F3F4F6; text-align: center; margin-bottom: 4px; }
.dk-login-tag { text-align: center; font-size: 9px; font-weight: 700; letter-spacing: 3px; color: #10B981; margin-bottom: 28px; }
.dk-login-field { margin-bottom: 14px; }
.dk-login-field label { display: block; font-size: 12px; font-weight: 500; color: #6B7280; margin-bottom: 5px; }
.dk-login-field input { width: 100%; padding: 9px 12px; background: #0B0F19; border: 1px solid #1F2937; border-radius: 6px; color: #E5E7EB; font-size: 14px; outline: none; }
.dk-login-field input:focus { border-color: #10B981; }
.dk-login-btn { width: 100%; padding: 9px; background: #10B981; color: #fff; border: none; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 6px; }
.dk-login-btn:hover { background: #059669; }
.dk-login-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.dk-login-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 6px; padding: 10px; color: #FCA5A5; font-size: 12px; margin-bottom: 14px; }
.dk-login-note { text-align: center; font-size: 11px; color: #4B5563; margin-top: 14px; }

/* ═══ MODALS ═══ */
.dk-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; }
.dk-modal { background: #111827; border: 1px solid #1F2937; border-radius: 12px; width: 460px; max-width: 90vw; box-shadow: 0 20px 60px rgba(0,0,0,0.5); overflow: hidden; }
.dk-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #1F2937; }
.dk-modal-header h3 { font-size: 15px; font-weight: 600; color: #F3F4F6; margin: 0; }
.dk-modal-close { background: none; border: none; font-size: 20px; color: #6B7280; cursor: pointer; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
.dk-modal-close:hover { background: #1F2937; color: #E5E7EB; }
.dk-modal-body { padding: 20px; }
.dk-modal-body p { font-size: 13px; color: #9CA3AF; line-height: 1.6; margin: 0 0 12px; }
.dk-modal-note { font-size: 12px; color: #4B5563; }
.dk-modal-field { margin-top: 16px; }
.dk-modal-field label { display: block; font-size: 12px; font-weight: 600; color: #6B7280; margin-bottom: 6px; }
.dk-modal-input { width: 100%; padding: 8px 12px; background: #0B0F19; border: 1px solid #1F2937; border-radius: 6px; font-size: 14px; color: #E5E7EB; outline: none; }
.dk-modal-input:focus { border-color: #10B981; }
.dk-modal-input::placeholder { color: #4B5563; }
.dk-modal-select { width: 100%; padding: 8px 12px; background: #0B0F19; border: 1px solid #1F2937; border-radius: 6px; font-size: 13px; color: #E5E7EB; outline: none; }
.dk-modal-select:focus { border-color: #10B981; }
.dk-modal-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 6px; padding: 8px 12px; margin-top: 12px; color: #FCA5A5; font-size: 12px; }
.dk-modal-success { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); border-radius: 6px; padding: 8px 12px; margin-top: 12px; color: #34D399; font-size: 12px; }
.dk-modal-footer { display: flex; gap: 8px; padding: 14px 20px; border-top: 1px solid #1F2937; }

/* ═══ AI MODAL ═══ */
.dk-ai-modal { width: 680px; max-width: 95vw; max-height: 85vh; display: flex; flex-direction: column; }
.dk-ai-header-left { display: flex; align-items: center; gap: 10px; }
.dk-ai-header-right { display: flex; align-items: center; gap: 10px; }
.dk-ai-model-select { background: #0B0F19; border: 1px solid #1F2937; border-radius: 4px; color: #9CA3AF; font-size: 11px; padding: 3px 8px; outline: none; cursor: pointer; }
.dk-ai-model-select:focus { border-color: #10B981; }
.dk-ai-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dk-ai-context-bar { display: flex; align-items: center; gap: 12px; padding: 8px 20px; background: rgba(16,185,129,0.05); border-bottom: 1px solid #1F2937; }
.dk-ai-context-type { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #10B981; background: rgba(16,185,129,0.15); padding: 2px 8px; border-radius: 4px; }
.dk-ai-context-hint { font-size: 11px; color: #4B5563; }
.dk-ai-messages { flex: 1; overflow-y: auto; padding: 16px 20px; min-height: 200px; max-height: 50vh; display: flex; flex-direction: column; gap: 12px; }
.dk-ai-message { border-radius: 8px; padding: 12px 14px; }
.dk-ai-msg-assistant { background: rgba(16,185,129,0.05); border: 1px solid rgba(16,185,129,0.1); }
.dk-ai-msg-user { background: #1F2937; border: 1px solid #374151; align-self: flex-end; max-width: 85%; }
.dk-ai-msg-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); color: #FCA5A5; font-size: 12px; }
.dk-ai-msg-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 11px; color: #6B7280; font-weight: 600; }
.dk-ai-tokens { font-size: 10px; color: #4B5563; margin-left: auto; font-weight: 400; }
.dk-ai-msg-body { font-size: 13px; color: #D1D5DB; line-height: 1.65; }
.dk-ai-msg-body strong { color: #E5E7EB; }
.dk-ai-msg-user .dk-ai-msg-body { font-size: 13px; color: #E5E7EB; }
.dk-ai-h3 { font-size: 14px; font-weight: 700; color: #F3F4F6; margin: 12px 0 6px; }
.dk-ai-h4 { font-size: 13px; font-weight: 600; color: #E5E7EB; margin: 10px 0 4px; }
.dk-ai-li { padding-left: 12px; margin: 2px 0; font-size: 13px; }
.dk-ai-code { font-family: "JetBrains Mono", monospace; font-size: 11px; background: #0B0F19; border: 1px solid #1F2937; border-radius: 6px; padding: 10px; margin: 8px 0; overflow-x: auto; color: #9CA3AF; }
.dk-ai-inline-code { font-family: "JetBrains Mono", monospace; font-size: 11px; background: #1F2937; padding: 1px 5px; border-radius: 3px; color: #10B981; }
.dk-ai-input-row { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid #1F2937; }
.dk-ai-input { flex: 1; background: #0B0F19; border: 1px solid #1F2937; border-radius: 6px; padding: 8px 12px; color: #E5E7EB; font-size: 13px; outline: none; }
.dk-ai-input:focus { border-color: #10B981; }
.dk-ai-input::placeholder { color: #4B5563; }
.dk-ai-footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 20px; border-top: 1px solid #1F2937; }
.dk-ai-footer-hint { font-size: 10px; color: #374151; }
.dk-ai-thinking { display: flex; align-items: center; gap: 10px; padding: 16px; color: #6B7280; font-size: 13px; }
.dk-ai-spinner { width: 16px; height: 16px; border: 2px solid #1F2937; border-top: 2px solid #10B981; border-radius: 50%; animation: dk-spin 0.8s linear infinite; }
@keyframes dk-spin { to { transform: rotate(360deg); } }

/* AI Analyze button — used across views */
.dk-ai-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25); border-radius: 4px; color: #10B981; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.dk-ai-btn:hover { background: rgba(16,185,129,0.2); border-color: #10B981; }
.dk-ai-btn svg { flex-shrink: 0; }

/* ── Prompt Packs ─────────────────────────────────────────────────────── */

.pk-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: start;
}

.pk-sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
}

.pk-section-btn {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  padding: 10px 12px;
  background: #111827;
  border: 1px solid #1F2937;
  border-radius: 6px;
  color: #E5E7EB;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.pk-section-btn:hover { border-color: #374151; background: #161E2E; }

.pk-section-btn.active {
  border-color: #10B981;
  background: #0F1F1A;
}

.pk-section-name { font-weight: 600; }

.pk-section-meta {
  font-size: 11px;
  color: #6B7280;
  font-variant-numeric: tabular-nums;
}

.pk-none { color: #F59E0B; }

.pk-editor {
  background: #111827;
  border: 1px solid #1F2937;
  border-radius: 8px;
  padding: 20px;
  min-height: 400px;
}

.pk-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #1F2937;
  margin-bottom: 16px;
}

.pk-editor-head h2 { margin: 0 0 4px; font-size: 17px; color: #F3F4F6; }

.pk-version-controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.pk-select,
.pk-input {
  background: #0B1220;
  border: 1px solid #1F2937;
  border-radius: 6px;
  color: #E5E7EB;
  font-family: inherit;
  font-size: 12px;
  padding: 7px 10px;
}

.pk-input { width: 100%; }

.pk-select:focus,
.pk-input:focus,
.pk-textarea:focus { outline: none; border-color: #10B981; }

/* Whether the version on screen is the one doing the work is the single most
   important thing on this page. */
.pk-status-line {
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 18px;
}

.pk-status-line.live { background: #0F1F1A; color: #34D399; border: 1px solid #10B981; }
.pk-status-line.past { background: #1A1206; color: #FBBF24; border: 1px solid #92400E; }

.pk-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9CA3AF;
  margin: 18px 0 4px;
}

.pk-hint {
  font-size: 12px;
  line-height: 18px;
  color: #6B7280;
  margin-bottom: 8px;
}

.pk-hint em { color: #9CA3AF; font-style: italic; }

.pk-textarea {
  width: 100%;
  box-sizing: border-box;
  background: #0B1220;
  border: 1px solid #1F2937;
  border-radius: 6px;
  color: #E5E7EB;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 19px;
  padding: 12px;
  resize: vertical;
}

.pk-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #1F2937;
}

.pk-activate-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9CA3AF;
  cursor: pointer;
}

.pk-activate-toggle input { accent-color: #10B981; }

@media (max-width: 1000px) {
  .pk-layout { grid-template-columns: 1fr; }
  .pk-sidebar { position: static; }
}

/* ── Build version under the logo ─────────────────────────────────────── */

.dk-logo-stack { display: flex; flex-direction: column; gap: 1px; }

.dk-app-version {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
  user-select: none;
  line-height: 1;
  min-height: 10px;
}

/* ── Ask AI ───────────────────────────────────────────────────────────── */
/* A button, not a nav row: it opens a modal rather than navigating, and the
   two should not look alike. Pinned to the bottom of the column with the nav
   groups now sitting together above it. */

.dk-ask-ai-btn {
  margin-top: auto;
  margin-bottom: 14px;
  margin-left: 12px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 12px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid #10B981;
  border-radius: 7px;
  color: #10B981;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.dk-ask-ai-btn:hover {
  background: #10B981;
  color: #0B1220;
}

.dk-ask-ai-btn svg { flex-shrink: 0; }

/* ── Prompt Packs: drafts and releases ────────────────────────────────── */

.pk-status-line.draft {
  background: #101A2E;
  color: #93C5FD;
  border: 1px solid #1D4ED8;
}

.dk-btn-ghost {
  background: transparent;
  border: 1px solid #374151;
  border-radius: 6px;
  color: #9CA3AF;
  font-family: inherit;
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
}

.dk-btn-ghost:hover { color: #E5E7EB; border-color: #4B5563; }

.pk-releases {
  margin-top: 20px;
  background: #111827;
  border: 1px solid #1F2937;
  border-radius: 8px;
  padding: 16px 20px;
}

.pk-rel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
}

.pk-rel-title { font-size: 14px; font-weight: 600; color: #F3F4F6; }

.pk-rel-hint { font-size: 12px; color: #6B7280; margin-top: 2px; }

.pk-rel-list { display: flex; flex-direction: column; gap: 6px; }

.pk-rel-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 9px 12px;
  background: #0B1220;
  border: 1px solid #1F2937;
  border-radius: 6px;
}

.pk-rel-label { font-size: 13px; color: #E5E7EB; font-weight: 500; }

.pk-rel-meta { font-size: 11px; color: #6B7280; font-variant-numeric: tabular-nums; }

.pk-rel-empty {
  font-size: 12px;
  color: #6B7280;
  padding: 14px;
  border: 1px dashed #1F2937;
  border-radius: 6px;
}

/* ── Credential Vault: action buttons ───────────────────────────────────────── */
/* Matches the Ask AI button treatment (green outline, hover fill) without the
   icon. Used by both Set / Rotate (table rows) and Add secret. */
.vault-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid #10B981;
  border-radius: 7px;
  color: #10B981;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.vault-btn:hover {
  background: #10B981;
  color: #0B1220;
}

/* ── Fleet: partial reachability ──────────────────────────────────────────── */
/* Amber is a distinct state, not a shade of red. It means exactly one of the
   two planes is failing — the worker runs but its public domain does not
   resolve, or the domain serves while the service binding fails. The fix lives
   in DNS/routing, not in the worker, so it must not look like an outage. */
.dk-wc-warn { border-left: 3px solid #F59E0B; }
.dk-wc-warn .dk-wc-dot { background: #F59E0B; box-shadow: 0 0 6px rgba(245,158,11,0.4); }
.dk-wc-idle { border-left: 3px solid #6B7280; }
.dk-wc-idle .dk-wc-dot { background: #6B7280; }

.dk-alert-warn {
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.3);
  color: #FCD34D;
}

/* v3.1.140 — vault buttons at text scale. The pill buttons dominated every row;
   at font size they read as row furniture and the value gets the width. */
.vault-ibtn { font-size: inherit; line-height: 1; padding: 1px 7px; margin-right: 6px;
  background: transparent; border: 1px solid #2f4f46; color: #35d0a0; border-radius: 5px; cursor: pointer; }
.vault-ibtn:hover { background: #12241f; }
.vault-ibtn:disabled { opacity: .5; cursor: default; }
.vault-danger { border-color: #6b2f3a; color: #ff7d92; }
.dk-modal { background: #0d1720; border: 1px solid #24313d; border-radius: 10px;
  padding: 20px 22px; max-width: 460px; width: 92%; color: #dfe9f1; }

/* ── v3.1.262: Dispatch / API pages ─────────────────────────────────────── */
.dk-alert-red { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.4); color: #FCA5A5; border-radius: 8px; padding: 10px 14px; margin: 8px 0 14px; font-size: 13px; }
.dk-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.dk-section-head h3 { margin: 0; font-size: 13px; font-weight: 700; color: #E5E7EB; letter-spacing: .02em; }
.dk-empty-inline { padding: 12px 14px; color: #6B7280; font-size: 13px; text-align: left; }
.dk-mono { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: #CBD5E1; word-break: break-all; }
.dk-text-ok { color: #10B981; }
/* v3.1.503: .dk-input did not exist. Anything using it rendered as a browser-default box - square
   corners, light border - which is what made the prompt preview look foreign to the rest of deck.
   Defined here on the same tokens as .dk-modal-input, the most-used field in the console, and
   .dk-select realigned to match it exactly so a text box and a select never disagree. */
.dk-input, .dk-select {
  /* No width here on purpose. .dk-select is already used for the small hours pickers in apiView and
     dispatchView; forcing 100% would stretch them across the page. Width belongs to the layout that
     owns the field, which is .pk-field below. */
  box-sizing: border-box;
  padding: 8px 12px;
  background: #0B0F19;
  border: 1px solid #1F2937;
  border-radius: 6px;
  font-size: 13px; font-family: inherit; line-height: 1.35;
  color: #E5E7EB; outline: none;
  transition: border-color .12s;
}
.dk-input:focus, .dk-select:focus { border-color: #10B981; }
.dk-input::placeholder { color: #4B5563; }
.dk-input:disabled, .dk-select:disabled { opacity: .5; cursor: not-allowed; }
.dk-select { appearance: none; padding-right: 30px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #6B7280 50%), linear-gradient(135deg, #6B7280 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.dk-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .03em; border: 1px solid #374151; color: #D1D5DB; }
.dk-tag-warn { border-color: rgba(245,158,11,0.5); color: #FCD34D; }
.dk-tag-write_failed, .dk-tag-error { border-color: rgba(239,68,68,0.5); color: #FCA5A5; }
.dk-tag-blocked { border-color: rgba(245,158,11,0.5); color: #FCD34D; }
.dk-tag-throttled { border-color: rgba(59,130,246,0.5); color: #93C5FD; }
.dk-vital-warn { border-color: rgba(245,158,11,0.4); }
.dk-tag-ok { border-color: rgba(16,185,129,0.5); color: #6EE7B7; }
.dk-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.dk-th-sort:hover { color: #F3F4F6; }
.dk-th-sort.is-sorted { color: #10B981; }

/* Public API page: one column grid for every table so numbers line up down
   the page. Label columns fill the left; each numeric column is 14% and
   right-aligned, starting at the same x whatever the table. */
.dk-api-grid { table-layout: fixed; width: 100%; }
.dk-api-grid th, .dk-api-grid td { overflow: hidden; text-overflow: ellipsis; }
.dk-api-grid th:not(:first-child), .dk-api-grid td:not(:first-child) { width: 14%; text-align: right; font-variant-numeric: tabular-nums; }
.dk-api-labels-1 th:first-child, .dk-api-labels-1 td:first-child { width: auto; }
.dk-api-labels-2 th:nth-child(2), .dk-api-labels-2 td:nth-child(2) { width: 28%; text-align: left; }
.dk-api-labels-2 th:first-child, .dk-api-labels-2 td:first-child { width: auto; }

/* Query Plane: the denied/cleared tables can run to hundreds of rows. They
   scroll inside a window; the acknowledge panel stays reachable. */
#dk-plane-view .dk-table-scroll { max-height: 420px; overflow: auto; }

/* v3.1.477: Query Plane header actions - the Flush link sits beside Refresh. */
.pl-header-actions { display: flex; align-items: center; gap: 10px; }

/* v3.1.478: Parked Dispatches page. Stat cards colour by state; the "oldest age" card is the one
   that matters and turns amber past half the window, red past 90%. */
#dk-parked-view .dk-stats, #dk-loadtest-view .dk-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
#dk-parked-view .dk-stat, #dk-loadtest-view .dk-stat { background: #111827; border: 1px solid #1F2937; border-radius: 10px; padding: 14px 16px; }
#dk-parked-view .dk-stat-value, #dk-loadtest-view .dk-stat-value { font-size: 26px; font-weight: 700; color: #F3F4F6; font-variant-numeric: tabular-nums; }
#dk-parked-view .dk-stat-label, #dk-loadtest-view .dk-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #6B7280; margin-top: 4px; }
#dk-parked-view .dk-stat-sub, #dk-loadtest-view .dk-stat-sub { font-size: 11px; color: #9CA3AF; margin-top: 6px; }
#dk-parked-view .dk-stat.accent, #dk-loadtest-view .dk-stat.accent { border-color: rgba(99,102,241,0.5); }
#dk-parked-view .dk-stat.ok .dk-stat-value, #dk-loadtest-view .dk-stat.ok .dk-stat-value { color: #34D399; }
#dk-parked-view .dk-stat.warn, #dk-loadtest-view .dk-stat.warn { border-color: rgba(245,158,11,0.5); } #dk-parked-view .dk-stat.warn .dk-stat-value, #dk-loadtest-view .dk-stat.warn .dk-stat-value { color: #FCD34D; }
#dk-parked-view .dk-stat.danger, #dk-loadtest-view .dk-stat.danger { border-color: rgba(239,68,68,0.6); } #dk-parked-view .dk-stat.danger .dk-stat-value, #dk-loadtest-view .dk-stat.danger .dk-stat-value { color: #F87171; }
#dk-parked-view .dk-table-dense td, #dk-loadtest-view .dk-table-dense td { padding: 6px 8px; font-size: 11px; }
#dk-parked-view .dk-cell-wrap, #dk-loadtest-view .dk-cell-wrap { max-width: 320px; white-space: normal; word-break: break-word; color: #9CA3AF; }
#dk-parked-view code { font-family: "JetBrains Mono", monospace; font-size: 11px; color: #A5B4FC; }
.dk-badge-ok     { background: rgba(16,185,129,0.15); color: #34D399; }
.dk-badge-warn   { background: rgba(245,158,11,0.15); color: #FCD34D; }
.dk-badge-danger { background: rgba(239,68,68,0.15);  color: #F87171; }
.dk-badge-info   { background: rgba(99,102,241,0.15); color: #A5B4FC; }
.dk-badge-muted  { background: rgba(107,114,128,0.2); color: #9CA3AF; }

/* ============================================================================
   Prompt Packs (v3.1.502 - rebuilt)

   The previous version put the tabs, the blurb, the preview and the variable
   list inside .dk-page-header, which is display:flex with space-between. Every
   one of them became a COLUMN in a single row: the title wrapped to three
   lines and the panels floated across the page. Nothing below is inside that
   header any more; the page is three stacked blocks - head, tools, workspace.
   ============================================================================ */

.pk-head { margin-bottom: 18px; }
.pk-head-row {
  display: flex; align-items: center; gap: 20px;
  flex-wrap: wrap;
}
.pk-title { font-size: 20px; font-weight: 700; color: #F3F4F6; white-space: nowrap; margin: 0; }
.pk-head-blurb {
  margin: 8px 0 0; max-width: 78ch;
  font-size: 12px; line-height: 1.55; color: #9CA3AF;
}

/* Pack switcher. A dropdown in a header was missed entirely; tabs are a
   control you cannot walk past. */
.pk-packtabs { display: flex; gap: 4px; }
.pk-packtab {
  padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid #1F2937; border-radius: 6px;
  background: #0F1623; color: #9CA3AF; transition: color .12s, border-color .12s;
}
.pk-packtab:hover { color: #E5E7EB; border-color: #374151; }
.pk-packtab.active { background: #1A1333; color: #C4B5FD; border-color: #6D28D9; }

/* ---- Tools drawer: preview + variables ---------------------------------- */
.pk-tools {
  margin-bottom: 20px;
  border: 1px solid #1F2937; border-radius: 8px; background: #0F1623;
}
.pk-tools-summary {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; cursor: pointer; list-style: none;
  border-radius: 8px;
}
.pk-tools-summary::-webkit-details-marker { display: none; }
.pk-tools-summary::before {
  content: "\25B8"; color: #6B7280; font-size: 11px; transition: transform .12s;
}
.pk-tools[open] > .pk-tools-summary::before { transform: rotate(90deg); }
.pk-tools[open] > .pk-tools-summary { border-bottom: 1px solid #1F2937; border-radius: 8px 8px 0 0; }
.pk-tools-title { font-size: 13px; font-weight: 600; color: #E5E7EB; }
.pk-tools-sub { font-size: 12px; color: #6B7280; }
.pk-tools-body { padding: 14px; }
.pk-tools-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .pk-tools-grid { grid-template-columns: minmax(0, 1fr); } }
.pk-tools-col { min-width: 0; }
.pk-tools-col--vars { border-left: 1px solid #1F2937; padding-left: 18px; }
@media (max-width: 1100px) { .pk-tools-col--vars { border-left: none; padding-left: 0; border-top: 1px solid #1F2937; padding-top: 14px; } }

.pk-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.pk-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pk-field .dk-input, .pk-field .dk-select, .pk-combo-input { width: 100%; }
.pk-field-full { margin-top: 10px; }
.pk-field-label {
  font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #9CA3AF;
}
.pk-optional { text-transform: none; letter-spacing: 0; color: #4B5563; }
.pk-tools-actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.pk-preview-check { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9CA3AF; cursor: pointer; }

.pk-vars-list { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.pk-var {
  font-size: 11px; padding: 3px 7px; border-radius: 4px; cursor: pointer;
  border: 1px solid #1F2937; background: rgba(255,255,255,0.03); color: #CBD5E1;
  transition: border-color .12s, color .12s;
}
.pk-var:hover { border-color: #6D28D9; color: #E5E7EB; }
.pk-vars-note { margin: 0; font-size: 11px; line-height: 1.55; color: #6B7280; }

/* ---- Preview output ------------------------------------------------------ */
.pk-preview-out { margin-top: 16px; border-top: 1px solid #1F2937; padding-top: 14px; }
.pk-pv-idle { margin: 0; font-size: 12px; color: #6B7280; }
.pk-pv-head { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 10px; }
.pk-pv-stat { font-size: 12px; color: #CBD5E1; display: flex; align-items: baseline; gap: 7px; }
.pk-pv-k { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: #6B7280; }
.pk-pv-stat--warn { color: #FCD34D; }
.pk-pv-warn {
  padding: 7px 10px; margin-bottom: 10px; border-radius: 5px; font-size: 12px; line-height: 1.5;
  border: 1px solid #78350F; background: rgba(245,158,11,0.08); color: #FCD34D;
}
.pk-pv-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .pk-pv-grid { grid-template-columns: minmax(0, 1fr); } }
.pk-pv-pane { min-width: 0; }
.pk-pv-vars { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.pk-pv-vars td { padding: 4px 6px; border-bottom: 1px solid #131C2B; vertical-align: top; color: #E5E7EB; }
.pk-pv-vars td:first-child { width: 140px; }
.pk-pv-vars code { color: #A78BFA; font-size: 11px; }
.pk-pv-fallback td { color: #6B7280; }
.pk-pv-tag {
  margin-left: 6px; padding: 1px 5px; border-radius: 3px; font-size: 10px;
  border: 1px solid #374151; color: #9CA3AF;
}
.pk-pv-pre {
  white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.55;
  max-height: 380px; overflow-y: auto; padding: 10px 12px; margin: 6px 0 0;
  border: 1px solid #1F2937; border-radius: 5px; background: #0B1220; color: #CBD5E1;
}
.pk-pv-pre--short { max-height: 200px; }

/* ---- Workspace ----------------------------------------------------------- */
.pk-sidebar-head {
  padding: 0 2px 8px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  color: #6B7280; border-bottom: 1px solid #1F2937; margin-bottom: 8px;
}

/* ---- Account combobox (v3.1.503) ----------------------------------------- */
.pk-field-first { margin-top: 0; margin-bottom: 12px; }
.pk-combo { position: relative; }
.pk-combo-input { padding-right: 30px; }
.pk-combo-input::-webkit-search-cancel-button, .pk-combo-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }   /* v3.1.909: type=search without the browser X */
.pk-combo-menu {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 280px; overflow-y: auto;
  border: 1px solid #1F2937; border-radius: 6px; background: #0B0F19;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
}
.pk-combo-opt {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 8px 12px; border: none; background: none; cursor: pointer; text-align: left;
  border-bottom: 1px solid #111827;
}
.pk-combo-opt:last-child { border-bottom: none; }
.pk-combo-opt:hover, .pk-combo-opt.active { background: #111C2E; }
.pk-combo-name { font-size: 13px; color: #E5E7EB; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-combo-type { flex: 0 0 auto; margin-left: 8px; }   /* v3.1.908: Company or Agency beside the name */
.pk-combo-meta { font-size: 11px; color: #6B7280; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.pk-combo-empty { padding: 10px 12px; font-size: 12px; color: #6B7280; }

/* ---- Section swap without a jump (v3.1.504) ------------------------------
   loadSection used to replace the editor with a one-line loading div. That
   shortens the document, the browser clamps scrollTop to the new maximum, and
   the taller content coming back leaves you somewhere else: the page appears
   to jump on every section click made from halfway down. The outgoing content
   now stays put, dimmed and inert, with its height pinned until the new
   content is laid out.

   Dimming is applied to the CHILDREN so the status badge stays legible, and
   overflow-anchor keeps the browser from re-anchoring mid-swap. */
.pk-editor { position: relative; overflow-anchor: none; }
.pk-editor--busy > * { opacity: .35; transition: opacity .1s; }
.pk-editor--busy { pointer-events: none; }
.pk-editor--busy::after {
  content: attr(data-busy);
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid #1F2937; background: #0B0F19; color: #9CA3AF;
  font-size: 12px; white-space: nowrap; pointer-events: none;
}

/* The sidebar sticks to the very top, so a section button could sit under the
   sticky console header while being clicked. A small offset keeps the list
   clear of it and stops the click target from feeling misplaced. */
.pk-sidebar { top: 12px; }


/* v3.1.596: provider and model for the whole pack, above the versions table.
   Outside the version list on purpose: swapping the model is not an edit to the doctrine and must
   not require publishing a new version of it. */
.pk-modelbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 10px 12px; margin: 0 0 12px;
  border: 1px solid var(--dk-border, #2A3444); border-radius: 8px;
}
.pk-modelbar-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pk-modelbar-controls .dk-input { min-width: 170px; }
.pk-modelbar--none { border-style: dashed; }

/* v3.1.893: Spend trend. Spend going up is the warning direction. */
.dk-delta { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; font-family: "JetBrains Mono", monospace; }
.dk-delta-up { color: #F87171; }
.dk-delta-down { color: #34D399; }
.dk-delta-flat { color: #6B7280; }

/* v3.1.910: a modal taller than the window scrolls inside itself. Every .dk-modal had overflow hidden
   and no height limit, so the bottom of a long result (the prompt preview) sat off-screen with no way
   to reach it. */
.dk-modal { max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; }

/* v3.1.918: Prompt components modal. One collapsible block per component. */
.pk-pc { border: 1px solid #24313d; border-radius: 6px; margin: 0 0 8px; padding: 8px 10px; }
.pk-pc > summary { cursor: pointer; list-style: revert; line-height: 24px; }
.pk-pc > .pk-pv-pre { margin-top: 8px; max-height: none; white-space: pre-wrap; }

/* v3.1.926: the model is chosen per version, in the versions table. */
.pk-vmodel { min-width: 200px; max-width: 260px; }

/* v3.1.1034: scrollbars, the same quiet style as the app (mxa-app base/polish.css). */
* { scrollbar-width: thin; scrollbar-color: rgba(100, 116, 139, 0.35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background-color: rgba(100, 116, 139, 0.35); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; min-height: 32px; }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(100, 116, 139, 0.6); }
*::-webkit-scrollbar-corner { background: transparent; }