/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-dark: #0B0F19;
    --card-bg: rgba(22, 29, 48, 0.65);
    --border-color: rgba(255, 255, 255, 0.08);
    --text-primary: #F3F4F6;
    --text-secondary: #9CA3AF;
    --primary: #7C3AED;
    --primary-hover: #6D28D9;
    --accent-green: #10B981;
    --accent-red: #F43F5E;
    --accent-blue: #3B82F6;
    --erp-color: #EAB308;
    --crm-color: #06B6D4;
    --knowledge-color: #10B981;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
}

h1, h2, h3, .logo {
    font-family: 'Outfit', sans-serif;
}

/* App Container Layout */
.app-container {
    display: flex;
    height: 100vh;
    width: 100vw;
}

/* Sidebar Styling */
.sidebar {
    width: 280px;
    background-color: rgba(17, 24, 39, 0.95);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 2rem 1.5rem;
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.3s ease;
    overflow-x: hidden;
    flex-shrink: 0;
}

/* Sidebar Toggle button styling */
.sidebar-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

.sidebar-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

/* Sidebar Collapsed state overrides */
.sidebar.collapsed {
    width: 72px;
    padding: 2rem 0.75rem;
}

.sidebar.collapsed .logo,
.sidebar.collapsed .logo-sub,
.sidebar.collapsed .company-switcher-container,
.sidebar.collapsed .nav-label {
    display: none;
}

.sidebar.collapsed .brand-row {
    justify-content: center !important;
    width: 100%;
}


.sidebar.collapsed .nav-group {
    padding-left: 0;
    margin-left: 0;
    border-left: none;
    gap: 0.75rem;
}

.sidebar.collapsed .nav-icon {
    margin-right: 0;
    font-size: 1.25rem;
}

.sidebar.collapsed .sidebar-footer {
    text-align: center;
}

.sidebar-header {
    margin-bottom: 3rem;
}

.logo {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.logo-accent {
    color: var(--primary);
}

.logo-sub {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 4px;
}

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex-grow: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 12px;
    transition: all 0.25s ease;
}

.nav-item:hover, .nav-item.active {
    color: var(--text-primary);
    background-color: rgba(124, 58, 237, 0.15);
    transform: translateX(4px);
}

.nav-item.active {
    border-left: 3px solid var(--primary);
}

.sidebar.collapsed .nav-item,
.sidebar.collapsed .nav-item.active,
.sidebar.collapsed .nav-item:hover {
    justify-content: center;
    padding: 0.85rem 0;
    transform: none !important;
    border-left: none !important;
}

/* Phase 0 spine (Sprint 7 Task 0.2): primary/secondary sidebar tiering.
   Secondary entries stay persistent nav destinations — visually subordinate,
   never drill-down-only (Decision 40). */
.nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--border-color);
    margin-top: 0.25rem;
}

.nav-group-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: 0.7;
    padding: 0.5rem 0.75rem 0.25rem;
    white-space: nowrap;
}

.nav-section-divider {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 -0.25rem;
    padding: 0 1.25rem;
    border-top: 1px solid var(--border-color);
}

.nav-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: 0.7;
    padding-top: 0.6rem;
    white-space: nowrap;
}

.nav-item.nav-secondary {
    font-size: 0.88rem;
    padding: 0.6rem 1.25rem;
    opacity: 0.85;
}

.nav-item.nav-secondary:hover, .nav-item.nav-secondary.active {
    opacity: 1;
}

.sidebar.collapsed .nav-section-divider {
    padding: 0;
    margin: 0.5rem 0.75rem;
}

.sidebar-footer {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.status-indicator {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent-green);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulse 1.6s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Main Content Styling */
.main-content {
    flex-grow: 1;
    padding: 2.5rem;
    overflow-y: auto;
}

.tab-header {
    margin-bottom: 2.5rem;
}

.tab-header h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.tab-header p {
    color: var(--text-secondary);
    font-size: 1rem;
}

.tab-pane {
    display: none;
    animation: fadeIn 0.4s ease;
}

.tab-pane.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Glassmorphism Common styles */
.glass {
    background: var(--card-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
}

/* Stats Cards Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.stat-card {
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.stat-card h3 {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.stat-value {
    font-size: 3.5rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.stat-footer {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: auto;
}

/* Score Dial/Ring Styles */
.score-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0;
}

.score-ring {
    position: relative;
    width: 120px;
    height: 120px;
}

.progress-ring__circle {
    transition: stroke-dashoffset 0.65s ease;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
}

.integration-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.integration-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.badge.erp { background-color: rgba(234, 179, 8, 0.15); color: var(--erp-color); border: 1px solid var(--erp-color); }
.badge.crm { background-color: rgba(6, 182, 212, 0.15); color: var(--crm-color); border: 1px solid var(--crm-color); }
.badge.knowledge { background-color: rgba(16, 185, 129, 0.15); color: var(--knowledge-color); border: 1px solid var(--knowledge-color); }
.badge.alias { background-color: rgba(148, 163, 184, 0.15); color: #94A3B8; border: 1px solid rgba(148, 163, 184, 0.3); text-transform: none; }
.badge.rel-type { background-color: rgba(124, 58, 237, 0.15); color: #A78BFA; border: 1px solid rgba(124, 58, 237, 0.3); }
.badge.gap { background-color: rgba(244, 63, 94, 0.15); color: #FB7185; border: 1px solid rgba(244, 63, 94, 0.35); text-transform: none; }
.badge.conflict { background-color: rgba(234, 179, 8, 0.15); color: #FACC15; border: 1px solid rgba(234, 179, 8, 0.35); text-transform: none; }

.progress-bar-container {
    height: 8px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--accent-green);
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* Inputs & Form Controls */
.controls-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.glass-input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.25s ease;
}

.glass-input:focus {
    border-color: var(--primary);
}

.glass-input.disabled {
    background: rgba(255, 255, 255, 0.01);
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* KEHA-257: `.select-wrapper` was removed with the per-application sync-cadence
   control, which was its only consumer in the whole tree (measured: one usage in
   app.js, one definition here). `select.glass-input` below is left alone — it was
   already dead before this change, since no select carries that class, so it is
   pre-existing and out of this item's scope rather than something this change
   orphaned. */

select.glass-input {
    appearance: none;
    padding-right: 3rem;
    cursor: pointer;
}

/* Buttons */
.btn {
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.btn-primary {
    background-color: var(--primary);
    color: #FFF;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.btn.block {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
}

/* Schema Grid Table Styles */
.table-container {
    overflow-x: auto;
    margin-bottom: 2rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.data-table th, .data-table td {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
}

.data-table th {
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.data-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.01);
}

.field-id-code {
    font-family: monospace;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
}

/* Audit Grid Panel Layout */
.audit-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2rem;
    height: calc(100vh - 180px);
}

.audit-input-panel, .audit-results-panel {
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.audit-input-panel h2, .audit-results-panel h2 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.glass-textarea {
    flex-grow: 1;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.2rem;
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    resize: none;
    outline: none;
    margin-bottom: 1.5rem;
    transition: border-color 0.25s ease;
}

.glass-textarea:focus {
    border-color: var(--primary);
}

.action-row {
    display: flex;
    justify-content: space-between;
}

.results-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    color: var(--text-secondary);
    text-align: center;
    padding: 2rem;
}

.placeholder-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    opacity: 0.4;
}

.report-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
}

.report-summary-card {
    display: flex;
    gap: 2rem;
    padding: 1.2rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.summary-metric {
    display: flex;
    flex-direction: column;
}

.metric-val {
    font-size: 1.8rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
}

.metric-val.text-red { color: var(--accent-red); }
.metric-val.text-green { color: var(--accent-green); }

.metric-lbl {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.issue-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 5px;
}

.issue-card {
    padding: 1.2rem;
    border-radius: 12px;
    background: rgba(244, 63, 94, 0.05);
    border: 1px solid rgba(244, 63, 94, 0.2);
}

.issue-card.severity-medium {
    background: rgba(234, 179, 8, 0.05);
    border: 1px solid rgba(234, 179, 8, 0.2);
}

.issue-card.severity-low {
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* KEHA-249: a PASS card. The panel used to have exactly one pass-shaped
   output — the all-or-nothing "System Fully Validated" empty state — so a
   report with both passes and gaps could only render its gaps, and a prospect
   saw a wall of red for a schema that supported most of the SOP. */
.issue-card.severity-pass {
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.issue-card.severity-pass .issue-type { color: var(--accent-green); }
.issue-card.severity-pass .issue-badge { background: rgba(16, 185, 129, 0.15); color: var(--accent-green); }

.issue-card.severity-system {
    background: rgba(148, 163, 184, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.issue-card.severity-system .issue-type { color: var(--text-secondary); }
.issue-card.severity-system .issue-badge { background: rgba(148, 163, 184, 0.15); color: var(--text-secondary); }

.audit-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0.5rem 0 0.25rem;
}

.issue-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    align-items: center;
}

.issue-type {
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.issue-card.severity-high .issue-type { color: var(--accent-red); }
.issue-card.severity-medium .issue-type { color: var(--erp-color); }
.issue-card.severity-low .issue-type { color: var(--accent-blue); }

.issue-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.issue-card.severity-high .issue-badge { background: rgba(244, 63, 94, 0.15); color: var(--accent-red); }
.issue-card.severity-medium .issue-badge { background: rgba(234, 179, 8, 0.15); color: var(--erp-color); }
.issue-card.severity-low .issue-badge { background: rgba(59, 130, 246, 0.15); color: var(--accent-blue); }

.issue-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.issue-remediation {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-secondary);
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.05);
}

.issue-remediation strong {
    color: var(--text-primary);
    font-weight: 500;
}

.hidden {
    display: none !important;
}

/* Edit Drawer Modal Slider */
.drawer {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    z-index: 1000;
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer.open {
    right: 0;
}

.drawer-content {
    height: 100%;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
}

.close-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

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

.drawer h2 {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.drawer p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.form-group label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.form-textarea {
    height: 200px;
}

/* KEHA-253: the Quill editor theme overrides that lived here are gone with
   the editor itself (option 3, comment 10551) — the description editor is a
   plain textarea styled by .glass-input/.form-textarea above. */

/* Split Tree Registry Layout */
.split-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    height: calc(100vh - 180px);
}

.hierarchy-sidebar {
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.sidebar-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
}

.tree-container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.tree-app-node {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tree-app-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.tree-object-nodes {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-left: 1.5rem;
}

.tree-obj-node {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
    transition: all 0.25s ease;
}

.tree-obj-node:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
}

.tree-obj-node.active {
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(124, 58, 237, 0.3);
    color: var(--text-primary);
    font-weight: 500;
}

.object-details-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.object-summary-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.object-summary-header h2 {
    font-size: 1.6rem;
    font-family: 'Outfit', sans-serif;
}

.object-desc-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Auth Screen Styling */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.15), transparent 60%),
                radial-gradient(circle at bottom left, rgba(139, 92, 246, 0.15), transparent 60%),
                #0B0F19;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.auth-card {
    width: 440px;
    padding: 3rem;
    border-radius: 24px;
    background: rgba(17, 24, 39, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.auth-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.auth-logo {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.75rem;
}

.auth-header h1 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.auth-header p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.auth-tabs {
    display: flex;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 2rem;
}

.auth-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.auth-tab-btn.active {
    background-color: rgba(124, 58, 237, 0.2);
    color: var(--text-primary);
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.auth-error {
    background-color: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #F87171;
    padding: 12px;
    border-radius: 10px;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 500;
}

/* Sidebar collapsed logout overrides */
.sidebar.collapsed .logout-link {
    justify-content: center;
    padding: 0.5rem 0 !important;
    color: #EF4444;
}

.sidebar.collapsed #change-pwd-btn {
    color: var(--primary) !important;
}

.sidebar.collapsed .logout-icon {
    font-size: 1.25rem;
}

/* Role Badge Styles */
.badge.admin {
    background-color: rgba(124, 58, 237, 0.15);
    color: #A78BFA;
    border: 1px solid rgba(124, 58, 237, 0.4);
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge.user-role {
    background-color: rgba(6, 182, 212, 0.15);
    color: #22D3EE;
    border: 1px solid rgba(6, 182, 212, 0.4);
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Danger / Delete Button */
.btn-danger-sm {
    background-color: rgba(244, 63, 94, 0.1);
    color: #F87171;
    border: 1px solid rgba(244, 63, 94, 0.3);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger-sm:hover {
    background-color: rgba(244, 63, 94, 0.2);
    border-color: rgba(244, 63, 94, 0.5);
    transform: translateY(-1px);
}

/* Role Selector Cards (Add User Drawer) */
.role-selector {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.role-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: left;
    color: var(--text-secondary);
}

.role-option:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.15);
}

.role-option.active {
    background: rgba(124, 58, 237, 0.1);
    border-color: rgba(124, 58, 237, 0.4);
    color: var(--text-primary);
}

.role-option-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.role-option-label {
    font-weight: 600;
    font-size: 0.95rem;
    color: inherit;
    display: block;
}

.role-option-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: block;
    margin-top: 2px;
}

/* Admin-only sidebar collapsed overrides */
.sidebar.collapsed .admin-only .nav-label {
    display: none;
}

/* Integration Manager Tab Styles */
.integrations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 2rem;
    margin-top: 1rem;
}

.integration-card {
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.integration-card:hover {
    transform: translateY(-2px);
    border-color: rgba(124, 58, 237, 0.25);
}

.card-header-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.card-app-icon {
    font-size: 2.2rem;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
}

.card-header-row h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.card-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-bottom: 2rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}

.detail-row:last-of-type {
    border-bottom: none;
}

.detail-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.detail-val {
    font-weight: 500;
    color: var(--text-primary);
}

/* Inline Connected/Disconnected Badges */
.status-indicator-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-indicator-inline.status-connected {
    background: rgba(16, 185, 129, 0.1);
    color: #34D399;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-indicator-inline.status-disconnected {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.status-indicator-inline.status-error {
    background: rgba(244, 63, 94, 0.1);
    color: #FB7185;
    border: 1px solid rgba(244, 63, 94, 0.2);
}

/* KEHA-27 c4: the third status value -- the provider refused the stored
   credential; the row needs re-authorisation. Amber, not red: the credential
   is still held and Disconnect stays reachable. */
.status-indicator-inline.status-auth_required {
    background: rgba(251, 191, 36, 0.1);
    color: #FBBF24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.status-auth_required .pulse-dot-inline {
    background-color: #FBBF24;
}

.pulse-dot-inline {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-connected .pulse-dot-inline {
    background-color: var(--accent-green);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulse-inline 1.6s infinite;
}

.status-disconnected .pulse-dot-inline {
    background-color: var(--text-secondary);
}

.status-error .pulse-dot-inline {
    background-color: var(--accent-red);
}

@keyframes pulse-inline {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Sm Select Dropdowns */
.glass-input-sm {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 12px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.glass-input-sm:focus:not([disabled]) {
    border-color: var(--primary);
}

.glass-input-sm[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.card-actions-row {
    display: flex;
    gap: 0.75rem;
    margin-top: auto;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.85rem;
}

/* Interactive Tile Hover Effects */
.tile-hover {
    transition: all 0.3s ease !important;
}
.tile-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.15) !important;
    border-color: rgba(124, 58, 237, 0.4) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.visibility-toggle-btn {
    opacity: 0.5;
    transition: all 0.2s ease;
}
.visibility-toggle-btn:hover {
    opacity: 1;
    color: #60A5FA !important;
}
.hidden-badge {
    font-weight: 500;
}

/* KEHA-240 — the Context Library selection surface.
   Every synced row is listed with its state, so the state needs a chip that
   reads at a glance in BOTH directions: a surface that only marks the
   excluded rows makes "nothing marked" ambiguous between "in use" and "not
   loaded yet". */
.selection-state {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    vertical-align: middle;
}
.selection-state.in-use {
    color: #34D399;
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.35);
}
.selection-state.excluded {
    color: #94A3B8;
    background: rgba(148, 163, 184, 0.12);
    border-color: rgba(148, 163, 184, 0.35);
}

.selection-batch-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
}

.selection-outcome {
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.selection-outcome-row {
    margin-top: 0.25rem;
    font-family: monospace;
    font-size: 0.76rem;
}


/* =============================================
   GRAPH EXPLORER (Task 8.1)
   ============================================= */

.graph-object-node {
    padding: 8px 10px;
    border-left: 2px solid rgba(99, 102, 241, 0.25);
    margin-bottom: 4px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.04);
    transition: background 0.15s;
}

.graph-object-node:hover {
    background: rgba(99, 102, 241, 0.1);
}

.graph-node-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.graph-depth-indicator {
    display: inline-block;
    font-size: 0.68rem;
    color: #818cf8;
    background: rgba(99, 102, 241, 0.12);
    border-radius: 999px;
    padding: 1px 7px;
    margin-right: 8px;
    vertical-align: middle;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Lineage section — purple-tinted, left border accent.
   Visually distinct from the relationship edges section (which has no tint).
   Required by acceptance criteria. */
.graph-lineage-section {
    background: rgba(139, 92, 246, 0.07);
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-left: 4px solid rgba(139, 92, 246, 0.5);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.graph-lineage-section h4 {
    color: #c4b5fd;
    margin: 0 0 0.75rem;
}

/* Not-found state — amber tint */
.graph-not-found {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.25rem;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 8px;
    color: #fbbf24;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Graph Explorer v2 - Semantic Badge & Dependency Tracing */
.badge.semantic-type {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
    font-size: 0.7rem;
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 600;
}

.graph-dependency-highlight {
    background: rgba(16, 185, 129, 0.12) !important;
    border-left: 3px solid #10b981 !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.2);
}

.graph-edge-highlight {
    background: rgba(16, 185, 129, 0.08) !important;
    border-left: 3px solid #10b981 !important;
}

.graph-trace-btn {
    cursor: pointer;
    background: transparent;
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 0.72rem;
    transition: all 0.15s ease;
}

.graph-trace-btn:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
}

/* The lineage drawer is wider than the shared 450px: it carries a three-column
   reference table plus a verbatim expression, and a real captured formula is
   over 200 characters. `.drawer` sets both `width` and the off-screen `right`,
   so BOTH have to move together — overriding only one leaves the panel either
   clipped or parked partly on screen. */
#formula-modal {
    width: 720px;
    right: -720px;
}

/* Required, not redundant: the `right` above is an ID selector and outranks
   `.drawer.open`, so without an ID-level open rule the panel would stay parked
   off-screen no matter how many times `.open` is added. */
#formula-modal.open {
    right: 0;
}

#formula-modal .drawer-content {
    overflow-y: auto;
}

/* A real captured reference token runs to 72 characters (a transaction-body
   join path onto a custom-record field, in the SDF formula capture under
   `fixtures/netsuite/field-objects`), and `.field-id-code` does not wrap. Left to size itself the first column
   pushed Kind and "Resolves to" off the panel — so the columns are pinned and
   the token wraps instead of the table growing. */
#formula-modal .schema-table {
    table-layout: fixed;
}

#formula-modal .schema-table th:nth-child(1) { width: 48%; }
#formula-modal .schema-table th:nth-child(2) { width: 18%; }
#formula-modal .schema-table th:nth-child(3) { width: 34%; }

.formula-ref-cell code {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* KEHA-178 — derived fields and their formula lineage in the Schema Browser.
   Violet is unused by the badge palette above, so "derived" reads as distinct
   from the ERP/CRM/knowledge type badges and from the red Hidden badge at a
   glance rather than only on inspection. */
/* KEHA-221 c2: marks a field the provider flags as a customisation.
   Teal, so it reads as distinct from the purple derived badge and the red
   hidden badge at a glance. Not clickable — unlike .derived-badge it opens
   nothing, so it carries no cursor/hover affordance. */
.custom-badge {
    display: inline-block;
    background: rgba(20, 184, 166, 0.18);
    color: #5EEAD4;
    border: 1px solid rgba(20, 184, 166, 0.45);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 5px;
    user-select: none;
}

/* KEHA-217 c1: names the installed integration app that owns a field's
   scriptid. Amber, so it reads as distinct at a glance from the teal Custom
   badge it narrows, the violet derived badge and the red hidden badge. Not
   clickable — like .custom-badge it opens nothing, so it carries no
   cursor/hover affordance. */
.integration-app-badge {
    display: inline-block;
    background: rgba(245, 158, 11, 0.18);
    color: #FCD34D;
    border: 1px solid rgba(245, 158, 11, 0.45);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 5px;
    user-select: none;
}

.derived-badge {
    display: inline-block;
    background: rgba(139, 92, 246, 0.18);
    color: #C4B5FD;
    border: 1px solid rgba(139, 92, 246, 0.45);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 5px;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
}

.derived-badge:hover {
    background: rgba(139, 92, 246, 0.32);
    border-color: #8B5CF6;
    color: #DDD6FE;
}

/* KEHA-335: the authored-provenance statement a PREP-AUTHORED formula field
   carries on every surface that renders the field. Muted, small and italic, so
   it reads as a statement ABOUT the field rather than as another badge; not
   clickable, so it carries no cursor/hover affordance. */
.authored-provenance-note {
    display: inline-block;
    margin-left: 6px;
    font-size: 0.72rem;
    font-style: italic;
    font-weight: 400;
    color: var(--text-secondary);
}

/* The stored expression, verbatim. pre-wrap keeps the source system's own line
   breaks and runs of spaces intact — this is provenance, so it is shown as
   stored rather than reflowed. */
.formula-expression {
    font-family: monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid var(--border);
    border-left: 3px solid #8B5CF6;
    border-radius: 6px;
    padding: 12px 14px;
    margin: 0;
    color: #E9D5FF;
    max-height: 220px;
    overflow-y: auto;
}

.formula-ref-cell {
    padding: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    vertical-align: top;
}

.formula-ref-note {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.formula-ref-link {
    color: #60A5FA;
    text-decoration: underline;
    cursor: pointer;
}

.formula-ref-unresolved {
    display: inline-block;
    background: rgba(148, 163, 184, 0.15);
    color: #94A3B8;
    border: 1px dashed rgba(148, 163, 184, 0.5);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
}

/* Where a lineage link lands. Deliberately a persistent marker rather than a
   fading flash: the reader arrives after a full re-render, and a highlight that
   has already faded answers nothing. */
.lineage-target {
    background: rgba(139, 92, 246, 0.12) !important;
    box-shadow: inset 3px 0 0 #8B5CF6;
}

/* ==========================================
   MCP Interactive Studio (KEHA-13)
   ========================================== */

.studio-input-panel {
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    border-radius: 12px;
}

.studio-input-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.studio-question-input {
    flex: 1 1 320px;
    min-width: 240px;
}

.studio-input-hint {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.studio-state {
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.studio-state h3 {
    margin-bottom: 0.5rem;
}

.studio-state-code, .studio-state-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.4rem;
}

#studio-error {
    border-left: 3px solid var(--accent-red);
}

#studio-ambiguous {
    border-left: 3px solid #F59E0B;
}

.studio-concept-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 0.85rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 0.85rem;
}

.studio-concept-name {
    font-size: 1.05rem;
    font-weight: 700;
}

.studio-bounding-note {
    font-size: 0.82rem;
    color: #FBBF24;
    padding: 0.5rem 1.25rem;
    margin-bottom: 0.85rem;
    border: 1px dashed rgba(251, 191, 36, 0.4);
    border-radius: 8px;
}

.studio-package-card {
    padding: 1.1rem 1.4rem;
    border-radius: 12px;
    margin-bottom: 1.1rem;
}

.studio-envelope-strip {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.6rem;
    margin-bottom: 0.75rem;
}

.studio-envelope-item code {
    color: var(--text-primary);
    word-break: break-all;
}

.studio-content-hash {
    font-size: 0.72rem;
}

.studio-object-header h3 {
    display: inline-block;
    margin-right: 0.6rem;
}

.studio-object-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-top: 0.35rem;
}

.studio-fields-details {
    margin: 0.7rem 0;
    font-size: 0.85rem;
}

.studio-fields-details summary {
    cursor: pointer;
    color: var(--text-secondary);
}

.studio-field-row {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 3px 0;
    border-bottom: 1px dashed var(--border-color);
}

.studio-field-type {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.studio-tier-section h4 {
    margin-bottom: 0.5rem;
}

.studio-tier-note {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.studio-tier-item {
    display: flex;
    gap: 0.7rem;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 5px 0;
    border-bottom: 1px dashed var(--border-color);
    font-size: 0.87rem;
}

.studio-tier-empty {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.studio-tier-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

.studio-tier-badge.tier-1 { background: rgba(124, 58, 237, 0.25); color: #C4B5FD; }
.studio-tier-badge.tier-2 { background: rgba(59, 130, 246, 0.2); color: #93C5FD; }
.studio-tier-badge.tier-3 { background: rgba(148, 163, 184, 0.18); color: #CBD5E1; }

/* Provenance badges (c3): a sourced node names its application + synced_at;
   an unsourced node shows a VISIBLE flag — absence rendered as absence. */
.prov-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 4px;
    white-space: nowrap;
}

.prov-sourced {
    background: rgba(16, 185, 129, 0.15);
    color: #6EE7B7;
}

.prov-unsourced {
    background: rgba(244, 63, 94, 0.12);
    color: #FDA4AF;
    border: 1px dashed rgba(244, 63, 94, 0.45);
}

.studio-summary-flag {
    font-size: 0.78rem;
    font-weight: 600;
    color: #FBBF24;
    border: 1px dashed rgba(251, 191, 36, 0.45);
    border-radius: 6px;
    padding: 0.45rem 0.7rem;
    margin-bottom: 0.6rem;
}

.studio-fetch-row {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    font-size: 0.8rem;
}

.studio-candidate-row {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    flex-wrap: wrap;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border-color);
    font-size: 0.88rem;
}

/* ── KEHA-244 · Metric Registry and its visual calculation/filter builder ──
   The builder renders BUSINESS LANGUAGE — registry display names, glossary
   concept names, operator words — while every control's value is a registry
   UUID. `.metric-unresolved` is the ONE visual class for a severed binding
   (c6): the definition still says what it meant (the verbatim token is shown)
   and the state is impossible to mistake for a healthy one. */

.metric-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.metric-card {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.metric-card:hover {
    border-color: var(--primary);
    background: rgba(15, 23, 42, 0.75);
}

.metric-card-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.metric-card-meta {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-top: 0.35rem;
}

.metric-builder,
.metric-detail {
    margin-top: 1.25rem;
    padding: 1.5rem;
    border-radius: 12px;
}

.metric-builder-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
}

.metric-builder-row-split {
    flex-direction: row;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.metric-builder-row-split > select {
    flex: 1 1 200px;
}

.metric-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.metric-textarea {
    resize: vertical;
    min-height: 3rem;
    font-family: inherit;
}

.metric-select {
    width: 100%;
}

.metric-section-heading {
    font-size: 0.95rem;
    margin: 1.25rem 0 0.6rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-primary);
}

.metric-predicate-row {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.metric-predicate-row > select,
.metric-predicate-row > input {
    flex: 1 1 160px;
}

.metric-builder-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

/* Provenance, honoured rather than hidden: a GENERATED placeholder is labelled
   as one so an operator never reads Keha's own filler as the provider's
   documentation (KEHA-216's description_source, rendered through
   renderSyncedText like every other synced string). */
.metric-provenance {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: -0.5rem 0 0.9rem;
    font-style: italic;
}

.metric-provenance-generated {
    color: #FBBF24;
}

.metric-state {
    padding: 0.9rem 1.1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.metric-state-error {
    border: 1px solid rgba(244, 63, 94, 0.5);
    background: rgba(244, 63, 94, 0.12);
    color: #FDA4AF;
}

/* c6 — the severed state, visible. */
.metric-severed-banner {
    border: 1px solid rgba(251, 191, 36, 0.6);
    background: rgba(251, 191, 36, 0.12);
    color: #FCD34D;
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    font-size: 0.88rem;
    margin-bottom: 1rem;
}

.metric-unresolved {
    color: #FCD34D;
    border: 1px dashed rgba(251, 191, 36, 0.6);
    border-radius: 6px;
    padding: 0 0.4rem;
    font-weight: 600;
}

.metric-badge-severed {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #FCD34D;
    border: 1px solid rgba(251, 191, 36, 0.6);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

.metric-binding-line {
    font-size: 0.88rem;
    padding: 0.35rem 0;
    border-bottom: 1px dashed var(--border-color);
}

.metric-preview {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-family: monospace;
    font-size: 0.82rem;
    white-space: pre-wrap;
    color: var(--text-primary);
}

/* ── KEHA-246 · Lifecycle, the federation recipe and the federated results ──
   The figure (`.metric-run-figure`) is the record's result_text VERBATIM with
   its unit in a SIBLING; a fail-closed status renders `.metric-run-status`
   and no figure. `.metric-stage-provenance` carries the report's label
   verbatim, and the SIMULATED one is styled so it cannot be read as live. */

.metric-lifecycle-body,
.metric-recipe-summary {
    font-size: 0.88rem;
}

.metric-disposition-badge {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--border-color);
}

.metric-disposition-approved {
    color: #86EFAC;
    border-color: rgba(134, 239, 172, 0.6);
}

.metric-disposition-draft {
    color: #FCD34D;
    border-color: rgba(251, 191, 36, 0.6);
}

.metric-lifecycle-version,
.metric-recipe-expression,
.metric-recipe-unit,
.metric-run-meta {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.metric-recipe-stale {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #FDA4AF;
    border: 1px solid rgba(244, 63, 94, 0.6);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    margin-left: 0.4rem;
}

.metric-recipe-url {
    font-family: monospace;
    font-size: 0.8rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    padding: 0.1rem 0.4rem;
}

.metric-recipe-form {
    margin-top: 0.75rem;
}

.metric-stages {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0.5rem 0 1rem;
}

.metric-stage {
    flex: 1 1 240px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.8rem 1rem;
}

.metric-stage-title {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}

.metric-stage-value {
    font-family: monospace;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.metric-stage-provenance {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--text-secondary);
    margin-top: 0.3rem;
}

.metric-stage-provenance[data-provenance="SIMULATED"] {
    color: #FBBF24;
}

.metric-run-result {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.metric-run-figure {
    font-family: monospace;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
}

.metric-run-unit,
.metric-run-formula {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.metric-run-status {
    display: inline-block;
    font-family: monospace;
    font-weight: 700;
    color: #FCD34D;
    border: 1px dashed rgba(251, 191, 36, 0.6);
    border-radius: 6px;
    padding: 0.2rem 0.6rem;
    margin: 0.5rem 0 0.3rem;
}

.metric-run-status-message,
.metric-run-failure {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.metric-run-failure {
    color: #FDA4AF;
}

.metric-run-history {
    margin: 0.75rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.metric-report-inconclusive,
.metric-report-empty,
.metric-recipe-none {
    font-size: 0.88rem;
    color: var(--text-secondary);
    font-style: italic;
}

.metric-report-inconclusive {
    color: #FCD34D;
    font-style: normal;
    font-weight: 600;
}

/* KEHA-16: Business Detective panel. */
.detective-transcript {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detective-turn {
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--text-primary);
}

.detective-turn-user {
    background: var(--surface-2);
    border: 1px solid var(--border);
    align-self: flex-end;
    max-width: 80%;
}

.detective-turn-assistant {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    align-self: flex-start;
    max-width: 90%;
}

.detective-ref {
    display: inline-block;
    min-width: 2.2rem;
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.detective-delta {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.detective-findings,
.detective-priority {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.detective-findings li,
.detective-priority li {
    margin-bottom: 0.5rem;
}