/* Projects -> Connectors v2 — list screen styles. Reuses the shared design tokens + generic component
   classes (.cai-status-pill*, .cai-status-dot*, grid atoms) from clinical-ai-wc.css; this file adds only the
   .cai-connectors-* shell. Java sets no inline styles. */

.cai-connectors-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--cai-border, #dde3ec);
    background: #fff;
    color: var(--cai-ink, #111827);
    border-radius: 0.375rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}

.cai-connectors-action--primary {
    background: var(--cai-teal, #1abc9c);
    border-color: var(--cai-teal, #1abc9c);
    color: #fff;
}

.cai-connectors-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.cai-connectors-card {
    border: 1px solid var(--cai-border, #dde3ec);
    border-radius: 0.5rem;
    padding: 0.75rem 0.9rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.cai-connectors-card--fail .cai-connectors-card-value {
    color: #b91c1c;
}

.cai-connectors-card--blind {
    background: #fff8f4;
    border-color: #f0d4c0;
}

.cai-connectors-card--blind .cai-connectors-card-value {
    color: #b45309;
}

.cai-connectors-card-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cai-ink, #111827);
    line-height: 1;
}

.cai-connectors-card-label {
    font-size: 0.75rem;
    color: var(--cai-muted, #5c6878);
}

.cai-connectors-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    /* Small left inset so the search input's focus ring isn't clipped against the content edge. */
    padding-left: 0.25rem;
}

.cai-connectors-search {
    flex: 1 1 15rem;
    min-width: 12.5rem;
    max-width: 22.5rem;
    border: 1px solid var(--cai-border, #dde3ec);
    border-radius: 0.375rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.8125rem;
}

.cai-conn-filter-select {
    min-width: 9.375rem;
}

/* Staleness banner */
.cai-conn-stale-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #fffaf0;
    border: 1px solid #f5d9a8;
    border-radius: 0.5rem;
    padding: 0.7rem 1rem;
    margin-bottom: 0.875rem;
    font-size: 0.8125rem;
    color: #92400e;
    line-height: 1.45;
}

.cai-conn-stale-banner-icon {
    flex-shrink: 0;
    color: #b45309;
}

.cai-conn-stale-banner-text {
    flex: 1;
}

/* Standard-user-view toggle row */
.cai-conn-suview {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.875rem;
    font-size: 0.75rem;
    color: var(--cai-muted, #5c6878);
}

.cai-conn-suview-label {
    color: var(--cai-ink, #111827);
    font-weight: 500;
}

.cai-conn-suview-hint {
    color: var(--cai-muted, #5c6878);
}

.cai-connectors-placeholder {
    border-top: 1px dashed #f0d4c0;
    background: #fff8f4;
    color: #b45309;
    font-size: 0.8125rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.375rem;
    margin-bottom: 0.6rem;
}

.cai-connectors-grid-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Deterministic viewport height (mirrors .app-grid-page-grid-shell). A flex-based height collapses once the
   grid sits inside the TabPanel web component (its shadow DOM breaks the flex chain) and AG-Grid measures 0
   while the tab is hidden — so the grid must own a concrete height that survives tab show/hide. */
.cai-connectors-grid-shell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--grid-chrome-height, 22rem));
    min-height: 20rem;
}

/* Taller rows so the two-line Connector cell (name + meta) isn't clipped, and vertically-centered
   cells (same fix as the Library -> Sources SQL Saved Queries grid). */
.cai-connectors-grid {
    --ag-row-height: 5rem;
}

.cai-connectors-grid .ag-cell {
    display: flex;
    align-items: center;
}

/* ── Connectors / Runs tabs ── */
.cai-connectors-tab {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Runs-tab grid host — same deterministic-height fix; the runs tab has less chrome above the grid (no summary
   strip / filter bar), so a smaller chrome offset. */
.cai-connectors-runs-shell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--grid-chrome-height, 12rem));
    min-height: 20rem;
}

/* ── Run-details dialog ── */
.cai-conn-run-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.cai-conn-run-log {
    width: 100%;
    min-height: 9rem;
}
.cai-conn-run-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.cai-connectors-state {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    color: var(--cai-muted, #5c6878);
    font-size: 0.875rem;
}

.cai-connectors-empty {
    padding: 2rem;
    text-align: center;
    color: var(--cai-muted, #5c6878);
    font-size: 0.875rem;
}

/* Connector cell (name line + badges + meta). The grid wrapper has no per-row class hook, so the
   blinded/stale cue is a left accent on this cell rather than a full-row tint. */
.cai-conn-cell {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.3;
    padding: 0.1rem 0;
}

.cai-conn-cell--blinded {
    border-left: 3px solid #e0a060;
    padding-left: 0.5rem;
    margin-left: -0.5rem;
}

.cai-conn-cell--stale {
    border-left: 3px solid #f0c060;
    padding-left: 0.5rem;
    margin-left: -0.5rem;
}

.cai-conn-name-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.cai-conn-name {
    font-weight: 500;
    color: var(--cai-ink, #111827);
}

.cai-conn-shield {
    color: #b45309;
    flex-shrink: 0;
}

.cai-conn-meta {
    font-size: 0.75rem;
    color: var(--cai-muted, #5c6878);
}

/* Inline badges (type / blinded / stale / orphaned) */
.cai-conn-badge {
    font-size: 0.595rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.12rem 0.42rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}

.cai-conn-badge--type {
    background: #eef3fb;
    color: #1d4ed8;
    border: 1px solid #d7e3f4;
}

.cai-conn-badge--blind {
    background: #fff8f4;
    color: #b45309;
    border: 1px solid #f0d4c0;
}

.cai-conn-badge--stale {
    background: #fff3d6;
    color: #92400e;
    border: 1px solid #f5d9a8;
}

.cai-conn-badge--orphan {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Last-run status: shared dot + label */
.cai-conn-run {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.cai-conn-run-empty {
    color: var(--cai-muted, #5c6878);
}

/* ── Create stepper (C-CREATE) ─────────────────────────────────────────────── */

.cai-conn-create-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #f0c36d;
    background: #fdf6e3;
    color: #8a6d3b;
    border-radius: 0.5rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
}

.cai-conn-create-banner-icon {
    color: #b8860b;
}

.cai-conn-create-error {
    border: 1px solid #e6b0b0;
    background: #fcecec;
    color: #a12d2d;
    border-radius: 0.5rem;
    padding: 0.55rem 0.9rem;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
}

/* Stepper page shell — fills the content area (width:100% defeats the flex shrink-to-content), capped for
   readability and centered. The circular stepper itself is .cai-stepper* in clinical-ai-wc.css. */
.cai-conn-create-wrap {
    /* Fill the viewport like the grid/list screens (no narrow centered max-width cap). */
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 2rem 1.5rem;
    /* Fill the viewport vertically: a flex column pins the footer near the bottom (short mouse
       travel, always in the same place), and a fixed body min-height keeps every step the same
       height so the layout no longer "jumps" when steps with more/less content swap in. */
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 10rem);
}

.cai-conn-create-body {
    flex: 1 1 auto;
    min-height: 28rem;
    margin-bottom: 1rem;
}

.cai-conn-create-panel {
    border: 1px solid var(--cai-border, #dde3ec);
    border-radius: 0.5rem;
    padding: 1rem 1.1rem;
    background: #fff;
}

/* Step transition: fade the active step in on every switch. showStep() toggles [hidden] on the panels,
   and per the CSS spec a display:none → visible change restarts the animation — so this replays for all
   switch paths (Next/Back, clicking a step circle, and the review "Change" links) with zero JS. */
@keyframes cai-conn-step-fade {
    from { opacity: 0; transform: translateY(0.375rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.cai-conn-create-panel:not([hidden]) {
    animation: cai-conn-step-fade 0.22s ease;
}

@media (prefers-reduced-motion: reduce) {
    .cai-conn-create-panel:not([hidden]) {
        animation: none;
    }
}

.cai-conn-create-panel-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cai-ink, #111827);
    margin-bottom: 0.2rem;
}

.cai-conn-create-panel-hint {
    font-size: 0.8125rem;
    color: var(--cai-muted, #5c6878);
    margin-bottom: 0.9rem;
}

.cai-conn-create-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.85rem;
    max-width: 32rem;
}

.cai-conn-create-field-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cai-ink, #111827);
}

.cai-conn-create-input {
    border: 1px solid var(--cai-border, #dde3ec);
    border-radius: 0.375rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.8125rem;
    width: 100%;
    box-sizing: border-box;
}

.cai-conn-create-textarea {
    min-height: 4rem;
    resize: vertical;
}

.cai-conn-create-note {
    font-size: 0.8125rem;
    color: var(--cai-muted, #5c6878);
    background: #f6f8fa;
    border-radius: 0.375rem;
    padding: 0.6rem 0.8rem;
}

.cai-conn-create-dataset-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.cai-conn-create-dataset-row,
.cai-conn-create-ack-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.2rem;
}

.cai-conn-create-dataset-name {
    font-size: 0.875rem;
    color: var(--cai-ink, #111827);
}

.cai-conn-create-dirwalk {
    border-top: 1px dashed var(--cai-border, #dde3ec);
    margin-top: 0.6rem;
    padding-top: 0.75rem;
}

.cai-conn-create-dirwalk-msg {
    font-size: 0.8125rem;
    color: var(--cai-muted, #5c6878);
    margin-bottom: 0.6rem;
}

.cai-conn-create-verify {
    font-size: 0.8125rem;
    color: #1f7a4d;
    margin-top: 0.5rem;
}

.cai-conn-create-verify--err {
    color: #a12d2d;
}

.cai-conn-create-acks {
    border-top: 1px solid var(--cai-border, #dde3ec);
    margin-top: 0.9rem;
    padding-top: 0.85rem;
}

.cai-conn-create-acks-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #8a6d3b;
    margin-bottom: 0.4rem;
}

.cai-conn-create-ack-text {
    font-size: 0.8125rem;
    color: var(--cai-ink, #111827);
}

.cai-conn-create-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--cai-border, #dde3ec);
}

.cai-conn-create-footer-left,
.cai-conn-create-footer-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cai-conn-create-btn {
    border: 1px solid var(--cai-border, #dde3ec);
    background: #fff;
    color: var(--cai-ink, #111827);
    border-radius: 0.375rem;
    padding: 0.45rem 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}

.cai-conn-create-btn--primary {
    background: var(--cai-teal, #1abc9c);
    border-color: var(--cai-teal, #1abc9c);
    color: #fff;
}

.cai-conn-create-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Amber lock note (dataset mutual exclusion). */
.cai-conn-create-note--amber {
    background: rgba(245, 158, 11, 0.10);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.32);
}

/* Step 1 — source row-cards. */
.cai-conn-src-search {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--cai-border, #dde3ec);
    border-radius: 0.375rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.8125rem;
    margin-bottom: 0.85rem;
}

/* Responsive card grid — fills the width with even, readable cards instead of one narrow column. */
.cai-conn-src-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 0.6rem;
}

.cai-conn-src-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--cai-border, #dde3ec);
    border-radius: 0.375rem;
    padding: 0.65rem 0.85rem;
    cursor: pointer;
}

.cai-conn-src-row:hover {
    border-color: var(--cai-teal, #1abc9c);
}

.cai-conn-src-row--selected {
    border: 1.5px solid var(--cai-teal, #1abc9c);
    background: rgba(26, 188, 156, 0.08);
}

.cai-conn-src-radio {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1.5px solid var(--cai-border, #dde3ec);
    flex-shrink: 0;
}

.cai-conn-src-row--selected .cai-conn-src-radio {
    border-color: var(--cai-teal, #1abc9c);
    background: radial-gradient(circle, #fff 3px, var(--cai-teal, #1abc9c) 4px);
}

.cai-conn-src-main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

/* Row 1: source name (primary) left, type pill (secondary) right. Row 2: vendor left, health right. */
.cai-conn-src-line1,
.cai-conn-src-line2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cai-conn-src-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cai-ink, #111827);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The type is secondary metadata inside the card — tone the pill down vs the source name.
   The label font-size is set EXPLICITLY (not via inheritance) and at high specificity so it
   wins over the global .cai-type-badge default regardless of stylesheet order. */
.cai-conn-src-main .cai-type-badge {
    font-size: 0.625rem;
    padding: 0.125rem 0.4375rem;
    flex-shrink: 0;
}
.cai-conn-src-main .cai-type-badge .cai-type-badge-label {
    font-size: 0.625rem;
    font-weight: 600;
}
.cai-conn-src-main .cai-type-badge .cai-type-badge-icon {
    font-size: 0.6875rem;
}

.cai-conn-src-vendorgroup {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.cai-conn-src-vendor {
    font-size: 0.75rem;
    color: var(--cai-muted, #5c6878);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Health reads inline on one line (dot · label · latency), right-aligned — not stacked above the vendor. */
.cai-conn-src-line2 .cai-status-badge {
    flex-direction: row;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}
.cai-conn-src-line2 .cai-status-latency {
    padding-left: 0;
}

.cai-conn-src-blindq {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #b45309;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.32);
    border-radius: 0.25rem;
    padding: 0.05rem 0.4rem;
}

/* Step 2 — locked (greyed) dataset rows. */
.cai-conn-create-dataset-row--locked {
    opacity: 0.45;
    pointer-events: none;
}

/* Step 4 — schedule cadence cards. */
.cai-conn-sched-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}

.cai-conn-sched-card {
    border: 1px solid var(--cai-border, #dde3ec);
    border-radius: 0.375rem;
    padding: 0.65rem 0.8rem;
    cursor: pointer;
    background: #fff;
}

.cai-conn-sched-card:hover {
    border-color: var(--cai-teal, #1abc9c);
}

.cai-conn-sched-card--selected {
    border: 1.5px solid var(--cai-teal, #1abc9c);
    background: rgba(26, 188, 156, 0.08);
}

.cai-conn-sched-card--disabled {
    opacity: 0.5;
    pointer-events: none;
}

.cai-conn-sched-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cai-ink, #111827);
}

.cai-conn-sched-detail {
    font-size: 0.6875rem;
    color: var(--cai-muted, #5c6878);
    margin-top: 0.1rem;
}

/* Step 5 — review sections. */
.cai-conn-review-section {
    border: 1px solid var(--cai-border, #dde3ec);
    border-radius: 0.375rem;
    margin-bottom: 0.6rem;
    overflow: hidden;
}

.cai-conn-review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.85rem;
    background: #f6f8fa;
    border-bottom: 1px solid var(--cai-border, #dde3ec);
}

.cai-conn-review-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cai-muted, #5c6878);
}

.cai-conn-review-change {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cai-teal, #1abc9c);
    cursor: pointer;
}

.cai-conn-review-kv {
    display: flex;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.3rem 0.85rem;
    font-size: 0.8125rem;
}

.cai-conn-review-k {
    color: var(--cai-muted, #5c6878);
}

.cai-conn-review-v {
    font-weight: 500;
    text-align: right;
    word-break: break-all;
}

/* ── Connector EDIT page (flat editor — connector-edit-revised.html) ───────────── */
.cai-conn-edit-wrap {
    /* Fill the viewport like the grid/list screens (no narrow centered max-width cap);
       the input fields keep their own max-width so they don't stretch edge-to-edge. */
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 2rem 3rem;
}

.cai-conn-edit-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.1rem;
}

.cai-conn-edit-titlerow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cai-conn-edit-title {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--cai-ink, #111827);
}

/* Header left column: title row, source→destination line, help note — tightly stacked, one bold line. */
.cai-conn-edit-header-main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.cai-conn-edit-subtitle {
    font-size: 0.8125rem;
    color: var(--cai-muted, #5c6878);
}

.cai-conn-edit-note {
    font-size: 0.78rem;
    color: var(--cai-muted, #9ca3af);
}

.cai-conn-edit-blind-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.18rem 0.5rem;
    border-radius: 0.3125rem;
    background: var(--cai-amber-bg, rgba(245, 158, 11, 0.1));
    color: var(--cai-amber-tx, #b45309);
    border: 1px solid var(--cai-amber-line, rgba(245, 158, 11, 0.32));
}

.cai-conn-edit-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.cai-conn-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    color: var(--cai-muted, #5c6878);
    white-space: nowrap;
}

.cai-conn-edit-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

.cai-conn-edit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.cai-conn-edit-btn--outline {
    background: #fff;
    color: var(--cai-teal-dark, #14967d);
    border-color: var(--cai-teal, #1abc9c);
}

.cai-conn-edit-btn--primary {
    background: var(--cai-teal, #1abc9c);
    color: #fff;
    font-weight: 600;
}

.cai-conn-edit-btn--danger {
    background: #fff;
    color: var(--cai-danger, #dc2626);
    border-color: #f0b4b4;
}

.cai-conn-edit-error {
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid #f0b4b4;
    color: var(--cai-danger, #dc2626);
    border-radius: 0.375rem;
    padding: 0.6rem 0.9rem;
    font-size: 0.8125rem;
    margin-bottom: 1rem;
}

.cai-conn-edit-loading {
    font-size: 0.8125rem;
    color: var(--cai-muted, #5c6878);
    padding: 1rem;
}

.cai-conn-edit-stale {
    background: var(--cai-amber-bg, rgba(245, 158, 11, 0.1));
    border: 1px solid var(--cai-amber-line, rgba(245, 158, 11, 0.32));
    border-radius: 0.5rem;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.1rem;
}

.cai-conn-edit-stale-h {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cai-amber-tx, #b45309);
    margin-bottom: 0.45rem;
}

.cai-conn-edit-stale-impact {
    font-size: 0.75rem;
    color: var(--cai-amber-tx, #b45309);
    margin-bottom: 0.6rem;
}

.cai-conn-edit-stale-btn {
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--cai-amber-line, rgba(245, 158, 11, 0.32));
    background: #fff;
    color: var(--cai-amber-tx, #b45309);
    border-radius: 0.3125rem;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
}

.cai-conn-edit-card {
    background: #fff;
    border: 1px solid var(--cai-border, #dde3ec);
    border-radius: 0.5rem;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1.1rem;
}

.cai-conn-edit-section-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cai-muted, #9ca3af);
    margin-bottom: 0.85rem;
}

/* The cards fill the (now wider) viewport, but inputs/comboboxes stay a consistent, readable
   width — they don't stretch the full card from edge to edge. */
.cai-conn-edit-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
    max-width: 40rem;
}

.cai-conn-edit-field-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cai-muted, #5c6878);
}

.cai-conn-edit-input {
    border: 1px solid var(--cai-border-dark, #c6cfd8);
    border-radius: 0.375rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.84rem;
    width: 100%;
    box-sizing: border-box;
}

.cai-conn-edit-hint {
    font-size: 0.7rem;
    color: var(--cai-muted, #9ca3af);
}

.cai-conn-edit-active-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.cai-conn-edit-ro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    border: 1px solid var(--cai-border, #dde3ec);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--cai-surface, #f4f6f9);
}

.cai-conn-edit-ro-name {
    font-size: 0.84rem;
    color: var(--cai-ink, #111827);
}

.cai-conn-edit-ro-type {
    font-size: 0.7rem;
    color: var(--cai-muted, #9ca3af);
    margin-top: 0.1rem;
}

.cai-conn-edit-change-btn {
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--cai-border-dark, #c6cfd8);
    background: #fff;
    border-radius: 0.3125rem;
    padding: 0.32rem 0.7rem;
    cursor: pointer;
    color: var(--cai-teal-dark, #14967d);
    white-space: nowrap;
}

.cai-conn-edit-source-selector {
    margin: 0.5rem 0 0.85rem;
    max-width: 40rem;
}

/* Keep the schedule cards aligned with the field column (don't span the full wide card). */
.cai-conn-edit-card .cai-conn-sched-grid {
    max-width: 42rem;
}

.cai-conn-edit-datasets {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cai-conn-edit-chips {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    align-items: center;
}

.cai-conn-edit-chip {
    font-size: 0.75rem;
    background: #fff;
    border: 1px solid var(--cai-border-dark, #c6cfd8);
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--cai-muted, #5c6878);
}

.cai-conn-edit-chip--blind {
    background: var(--cai-amber-bg, rgba(245, 158, 11, 0.1));
    border-color: var(--cai-amber-line, rgba(245, 158, 11, 0.32));
    color: var(--cai-amber-tx, #b45309);
}

.cai-conn-edit-chip-x {
    cursor: pointer;
    font-weight: 600;
    color: var(--cai-muted, #9ca3af);
}

.cai-conn-edit-audit {
    font-size: 0.7rem;
    color: var(--cai-amber-tx, #b45309);
    background: var(--cai-amber-bg, rgba(245, 158, 11, 0.1));
    border: 1px solid var(--cai-amber-line, rgba(245, 158, 11, 0.32));
    border-radius: 0.375rem;
    padding: 0.4rem 0.65rem;
    margin: 0 0 0.6rem;
    display: inline-block;
}

.cai-conn-edit-locked {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--cai-border, #dde3ec);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--cai-surface, #f4f6f9);
    color: var(--cai-muted, #5c6878);
}

.cai-conn-edit-zone-val {
    font-family: var(--cai-mono, monospace);
    font-size: 0.84rem;
    color: var(--cai-ink, #111827);
}

.cai-conn-edit-pathwrap {
    border: 1px solid var(--cai-border, #dde3ec);
    border-radius: 0.375rem;
    padding: 0.65rem 0.8rem;
    background: var(--cai-surface, #f4f6f9);
}

.cai-conn-edit-pathwrap--blind {
    background: var(--cai-blind-bg, #fff8f4);
    border-color: var(--cai-blind-line, #f0d4c0);
}

.cai-conn-edit-path-line {
    font-family: var(--cai-mono, monospace);
    font-size: 0.75rem;
    word-break: break-all;
    margin-bottom: 0.5rem;
    color: var(--cai-ink, #111827);
}

.cai-conn-edit-path-foot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.cai-conn-edit-verify {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    color: var(--cai-teal-dark, #14967d);
    background: var(--cai-teal-dim, rgba(26, 188, 156, 0.13));
    border: 1px solid #bfe3d3;
    padding: 0.18rem 0.55rem;
    border-radius: 0.3125rem;
    font-weight: 500;
}

.cai-conn-edit-verify--err {
    color: var(--cai-danger, #dc2626);
    background: rgba(220, 38, 38, 0.08);
    border-color: #f0b4b4;
}

.cai-conn-edit-reverify {
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid var(--cai-border-dark, #c6cfd8);
    background: #fff;
    border-radius: 0.3125rem;
    padding: 0.25rem 0.55rem;
    cursor: pointer;
    color: var(--cai-muted, #5c6878);
}

.cai-conn-edit-stub {
    font-size: 0.72rem;
    color: var(--cai-muted, #9ca3af);
    text-align: center;
    margin: 0.4rem 0 1rem;
}

.cai-conn-edit-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}