:root {
    --bg: #f3f5f9;
    --line: #d8deea;
    --text: #182234;
    --muted: #5d6d85;
    --primary: #0b63f6;
    --primary-hover: #084ec3;
    --danger: #bf2f2f;
    --sidebar-background: var(--nwc-navy);
    --sidebar-background-popover: #0d1b2af2;
    --sidebar-background-hover: #425563;
    --sidebar-inner-border-color: #303f49;
    --sub-sidebar-width: 260px;
    --top-panel-height: 50px;
    --buttons-gray-color: #56657b;
    --text-gray-color: #64748b;
    --tabs-panel-color: #212529;
    --light-gray-border: #d8deea;
    --selection-gray-background-color: #e5e7eb;
    --card-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

* {
    box-sizing: border-box;
}

* [hidden] {
    display: none !important;
}

/* Suppress the layout-shifting left-border dirty indicator from the WC component library.
   border-inline-start + padding-inline-start shifts content 17px right on first keystroke. */
.wc-ui-form-dialog-dirty .wc-ui-form-dialog-content {
    border-inline-start: none;
    padding-inline-start: 0;
}

html,
body,
#app-theme,
#wc-app,
.wc-app-root,
.wc-app-content {
    margin: 0;
    width: 100%;
    height: 100%;
}

#app-theme {
    display: flex;
    flex-direction: column;
}

button,
input {
    font: inherit;
}

/* ── Session warning dialog ─────────────────────────────────────────────── */

.session-warning-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    text-align: center;
}

.session-warning-icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    border: 0.1875rem solid #e8924a;
    color: #e8924a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.session-warning-icon iconify-icon {
    display: flex;
    width: 2.25rem;
    height: 2.25rem;
}

.session-warning-message {
    margin: 0;
    color: var(--text);
    font-size: 0.9375rem;
}

.session-warning-progress-track {
    width: 100%;
    height: 0.75rem;
    background: #e0e4ed;
    border-radius: 0.375rem;
    overflow: hidden;
    margin: 0.25rem 0;
}

.session-warning-progress-bar {
    height: 100%;
    border-radius: 0.375rem;
    background: linear-gradient(to right, #3a7a62, #52a085);
    transition: width 1s linear;
}

.session-warning-time {
    margin: 0;
    font-style: italic;
    color: var(--muted);
    font-size: 0.875rem;
}

.wc-app-root {
    overflow: hidden;
}

.wc-app-content {
    overflow: auto;
}

.login-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
    background: url("/wc/assets/brand/public/images/loginAnimationPoster.png") no-repeat center/cover;
}

.login-background-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.32s ease;
    pointer-events: none;
    z-index: 0;
}

.login-background-video.login-background-video-ready {
    opacity: 1;
}

.login-background-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(12, 22, 38, 0.32), rgba(12, 22, 38, 0.72));
}

.login-card {
    position: relative;
    z-index: 2;
    width: min(430px, 100%);
    padding: 28px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.login-brand {
    width: min(22.5rem, 100%);
    max-height: 5rem;
    object-fit: contain;
    margin-bottom: 0.375rem;
}

.login-title {
    margin: 0;
    font-size: 28px;
    line-height: 1.1;
}

.login-subtitle {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 8px;
}

.login-label {
    align-self: flex-start;
    font-size: 13px;
    font-weight: 600;
    color: #344761;
}

.login-password-row {
    width: 100%;
    display: none;
    gap: 8px;
}

.login-submit,
.login-sso {
    width: 100%;
    border: 0;
    border-radius: 8px;
    min-height: 42px;
    font-size: 14px;
    font-weight: 600;
}

.login-submit {
    cursor: pointer;
    --mod-button-height: 2.625rem;
}

.login-submit[disabled] {
    cursor: default;
}

.login-submit-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--mod-button-height, 2.625rem);
    width: 100%;
    line-height: 1;
}

.login-message {
    width: 100%;
    min-height: 20px;
    font-size: 13px;
}

.login-message-info {
    color: var(--muted);
}

.login-message-error {
    color: var(--danger);
}

.login-link {
    width: fit-content;
    color: #0b56d3;
    font-size: 13px;
    text-decoration: none;
}

.login-link:hover {
    text-decoration: underline;
}

.login-link-disabled,
.login-link-disabled:hover {
    pointer-events: none;
    cursor: default;
    opacity: 0.62;
    text-decoration: none;
}

.login-divider {
    margin-top: 4px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
}

.login-sso {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    text-decoration: none;
    border: 1px solid #c9d1df;
    background: #fff;
    color: #4e5d73;
    cursor: pointer;
}

.login-sso:hover {
    background: #f7f9fd;
}

.login-footer {
    margin-top: 10px;
    text-align: center;
    font-size: 11px;
    color: #75839a;
}

.app-shell {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
    background: var(--bg);
    overflow: hidden;
}

.app-top-bar {
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    height: var(--top-panel-height);
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    z-index: 50;
    align-items: center;
}

/* Slot kept for backward compat — now inside sub-sidebar header */
.app-top-bar-sidebar-slot {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
    flex: 1;
    position: relative;
}

/* Collapsed nav pills shown in topbar when sidebar is hidden */
.app-topbar-collapsed-nav {
    display: none;
    align-items: center;
    gap: 2px;
    padding: 0 0.5rem;
    flex-shrink: 0;
    height: 100%;
    width: var(--sub-sidebar-width);
}

.app-topbar-collapsed-nav-visible {
    display: flex;
    justify-content: space-around;
}

.app-topbar-collapsed-logo {
    flex: unset;
    height: 2.25rem;
    width: auto;
}

.app-topbar-logo-square {
    width: 1.5rem;
    height: 1.5rem;
    background: #111;
    border-radius: 0.3125rem;
    display: inline-block;
    flex-shrink: 0;
}

.app-shell-body {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-main-sidebar {
    display: none;
}

.logo-container {
    display: flex;
    align-items: center;
    position: relative;
}

.logo-icon {
    display: block;
    height: 3rem;
    object-fit: contain;
}

.logo-full-sidebar {
    display: block;
    width: 100%;
    max-width: 156px;
    height: auto;
}

.app-sidebar-nav {
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.app-sub-sidebar {
    flex: 0 0 var(--sub-sidebar-width);
    width: var(--sub-sidebar-width);
    background: var(--sidebar-background);
    color: #d9e1ee;
    border-right: 1px solid var(--sidebar-inner-border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
    scrollbar-width: none;
    transition:
    width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    flex-basis 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.22s ease,
    border-width 0.28s ease;
}

.app-sub-sidebar-instant .app-sub-sidebar {
    transition: none !important;
}

.app-shell-sub-hidden .app-sub-sidebar {
    width: 0;
    flex-basis: 0;
    opacity: 0;
    border-right-width: 0;
    overflow: hidden;
    pointer-events: none;
}

.app-sub-sidebar-header {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: var(--top-panel-height);
    border-bottom: 1px solid var(--sidebar-inner-border-color);
    background: var(--sidebar-background);
}

.app-sub-sidebar-back {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    border-left: 3px solid var(--nwc-accent);
    border-bottom: 1px solid var(--sidebar-inner-border-color);
    background: rgba(16, 163, 127, 0.08);
    padding: 0.625rem 0.875rem 0.625rem 0.75rem;
    color: #bbb;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--nwc-duration-fast), color var(--nwc-duration-fast);
}

.app-sub-sidebar-back-arrow {
    flex: 0 0 auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: var(--nwc-accent);
}

.app-sub-sidebar-back-arrow:hover {
    color: #ffffff;
}

.app-sub-sidebar-back-title {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 600;
    color: #d9e1ee;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-sub-sidebar-back-badge {
    border-radius: 0.25rem;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    background: rgba(16, 163, 127, 0.20);
    color: var(--nwc-accent);
    border: 1px solid rgba(16, 163, 127, 0.30);
    padding: 0.0625rem 0.3125rem;
    margin-left: auto;
}

.app-sub-sidebar-title {
    min-width: 0;
    flex: 1 1 auto;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-sub-sidebar-toggle iconify-icon,
.app-section-switcher-btn iconify-icon {
    display: flex;
    height: 2rem;
    width: 2rem;
    margin-block-start: 0;
    margin-inline-start: 0;
}

.app-sub-sidebar-toggle,
.app-section-switcher-btn {
    border: 0 !important;
    border-radius: 0.5rem;
    display: flex;
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    color: var(--nwc-text-secondary);
    background: transparent !important;
    box-shadow: none !important;
    transition:
    background-color var(--nwc-duration-normal) ease,
    transform var(--nwc-duration-normal) ease;
}

.app-sub-sidebar-toggle:hover,
.app-section-switcher-btn:hover {
    background: var(--nwc-raw-dark-2) !important;
    color: #bbb;
}

.app-sub-sidebar-toggle-collapsed {
    transform: rotate(180deg);
}

.app-sub-sidebar-switcher-collapsed:hover,
.app-sub-sidebar-toggle-collapsed:hover {
    background: #f0f0ee !important;
    color: var(--nwc-text-secondary);
}

.app-sub-sidebar-logo {
    height: 2.25rem;
    width: auto;
    object-fit: contain;
    flex: 1;
}

.app-section-popover {
    position: absolute;
    top: 3.25rem;
    left: 0.75rem;
    width: 12.5rem;
    z-index: 200;
    background: var(--sidebar-background-popover);
    border: 1px solid #333;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.app-section-popover-hidden {
    display: none;
}

.app-section-popover-btn {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    gap: 0.675rem;
    padding: 0.5rem 0.675rem;
    border-radius: 0.325rem;
    cursor: pointer;
    justify-content: flex-start;
    transition: background var(--nwc-duration-fast);
}

.app-section-popover-btn:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #ddd !important;
}

.app-section-popover-btn-content {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
}

.app-section-popover-btn-selected {
    background: var(--nwc-accent-subtle) !important;
    font-weight: 600;
    padding-left: 0.75rem;
    border-left: 2px solid var(--nwc-accent) !important;
}

.app-section-popover-btn-selected .app-section-popover-btn-icon,
.app-section-popover-btn-selected .app-section-popover-btn-label {
    color: var(--nwc-accent);
}

.app-section-popover-btn-icon {
    width: 1.4rem;
    height: 1.4rem;
    object-fit: contain;
}

.app-section-popover-btn-label {
    font-size: 0.85rem;
    color: #e6ebf4;
    font-weight: 300;
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-sub-sidebar-content {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}

.app-sub-group {
    margin-bottom: 1rem;
}

.app-sub-group-title {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    margin: 0 .375rem;
    font-weight: 700;
    color: var(--nwc-text-form-labels);
    padding: 0.875rem 1rem 0.25rem;
    white-space: nowrap;
}

.app-sub-section-label {
    font-size: .875rem;
    font-weight: 600;
    color: #e6ebf4;
    padding: 1rem .75rem .5rem;
}

.app-sub-item-content {
    width: 100%;
    text-align: left;
    color: #96999B;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.41rem 0.625rem;
    margin: 0.06rem 0.5rem;
    font-weight: 300;
    font-size: 0.85rem;
    line-height: 1;
    border-radius: 0.5rem;
    transition: all var(--nwc-duration-normal) linear;
}

.app-sub-item-content:hover {
    background: rgba(255,255,255,0.06);
    color: #ddd;
}

.app-sub-item-btn-selected {
    background: var(--nwc-accent-subtle) !important;
    font-weight: 600;
    border-left: 2px solid var(--nwc-accent) !important;
    margin-left: 0.25rem;
    padding-left: 0.75rem;
}

.app-sub-item-btn-selected .app-sub-item-icon,
.app-sub-item-btn-selected .app-sub-item-label {
    color: var(--nwc-accent);
}

.app-sub-item-icon {
    width: 1.15rem;
    height: 1.15rem;
    object-fit: contain;
    flex: 0 0 auto;
}

.app-sub-item-label {
    flex: 1 1 auto;
    min-width: 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.5;
    transition: all var(--nwc-duration-normal) linear;
}

.app-sub-item-btn-selected .app-sub-item-label {
    font-weight: 600;
}

.app-main-column {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.app-top-panel {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    height: 100%;
}

.app-top-panel-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    height: inherit;
    min-width: 0;
    flex-wrap: nowrap;
}

.app-top-panel-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 240px;
    height: inherit;
}

.app-page-title-icon {
    width: 1.1rem;
    height: 1.1rem;
    object-fit: contain;
}

.app-page-title {
    font-size: 16px;
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    overflow: hidden;
    height: inherit;
}

.app-breadcrumb > span {
    font-size: 0.9rem;
    font-weight: 300;
}

.app-breadcrumb-ancestor {
    color: #6b7280;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.app-breadcrumb-sep {
    color: #9ca3af;
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
}

.app-breadcrumb-current {
    color: #1e293b;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-top-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin-left: auto;
    min-width: 0;
    height: inherit;
}

.app-top-actions > * {
    flex: 0 0 auto;
    min-width: 0;
}

.app-aria-launcher {
    --app-aria-launcher-size: 2.25rem;
    --nwc-button-icon-only-padding: 0.125rem;
    --nwc-button-image-icon-size: calc(var(--app-aria-launcher-size) - 0.25rem);
    --nwc-button-image-icon-filter: brightness(0) saturate(100%) invert(58%) sepia(86%) saturate(424%) hue-rotate(121deg) brightness(88%) contrast(89%);
    width: var(--app-aria-launcher-size);
    height: var(--app-aria-launcher-size);
    display: block;
}

.context-switcher-icon {
    width: 1.25rem;
    height: 1.25rem;
    object-fit: contain;
    flex: 0 0 auto;
}

.context-switcher-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 0;
}

.context-switcher-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-user-badge,
.app-user-trigger {
    white-space: nowrap;
}

.selection-dialog-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(13, 20, 33, 0.42);
    z-index: 1200;
}

.selection-dialog-overlay.selection-dialog-open {
    display: flex;
}

.selection-dialog-card {
    width: min(560px, 100%);
    max-height: min(78vh, 720px);
    overflow: auto;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(24, 34, 52, 0.08);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
}

.selection-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #e4e9f2;
}

.selection-dialog-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.selection-dialog-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}

.selection-dialog-subtitle {
    font-size: 14px;
    line-height: 1.45;
    color: var(--muted);
}

.selection-dialog-close {
    border: 1px solid #d5dbe7;
    border-radius: 10px;
    background: #f7f9fc;
    color: #44546c;
    font-weight: 600;
    padding: 10px 14px;
    cursor: pointer;
}

.selection-dialog-options {
    display: grid;
    gap: 12px;
    padding: 20px 24px 24px;
}

.selection-dialog-option {
    width: 100%;
    text-align: left;
    display: grid;
    gap: 6px;
    border: 1px solid #d8deea;
    border-radius: 14px;
    background: #fff;
    padding: 16px 18px;
    cursor: pointer;
    transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.selection-dialog-option:hover {
    border-color: #9fb8ea;
    box-shadow: 0 10px 24px rgba(11, 99, 246, 0.08);
    transform: translateY(-1px);
}

.selection-dialog-option-active {
    border-color: var(--primary);
    background: linear-gradient(180deg, rgba(11, 99, 246, 0.04), rgba(11, 99, 246, 0.08));
}

.selection-dialog-option-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.selection-dialog-option-description,
.selection-dialog-empty {
    font-size: 13px;
    line-height: 1.45;
    color: var(--muted);
}

.selection-dialog-empty {
    padding: 18px;
    border: 1px dashed #cfd6e4;
    border-radius: 14px;
    background: #f8fafc;
}

.modal-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(18, 31, 56, 0.42);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 2200;
}

.modal-dialog-overlay.modal-dialog-open {
    display: flex;
}

.modal-dialog-card {
    width: min(640px, 100%);
    max-height: min(88vh, 860px);
    overflow: auto;
    background: #fff;
    border-radius: 22px;
    border: 1px solid rgba(206, 214, 228, 0.9);
    box-shadow: 0 24px 64px rgba(16, 33, 61, 0.24);
    display: flex;
    flex-direction: column;
}

.modal-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 1.5rem 1rem;
    border-bottom: 1px solid #edf2f7;
}

.modal-dialog-heading {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.modal-dialog-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tabs-panel-color);
}

.modal-dialog-subtitle {
    font-size: 0.92rem;
    color: var(--text-gray-color);
}

.modal-dialog-close,
.modal-dialog-btn {
    border: 1px solid #d0d8e5;
    border-radius: 10px;
    background: #fff;
    color: #344761;
    padding: 0.72rem 1rem;
    font-weight: 600;
    cursor: pointer;
}

.modal-dialog-close:hover,
.modal-dialog-btn:hover:enabled {
    background: #f8fafc;
}

.modal-dialog-btn:disabled,
.modal-dialog-close:disabled {
    opacity: 0.7;
    cursor: default;
}

.modal-dialog-btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.modal-dialog-btn-primary:hover:enabled {
    background: var(--primary-hover);
}

.modal-dialog-btn-danger {
    color: #9b1c1c;
    border-color: rgba(155, 28, 28, 0.2);
    background: #fff5f5;
}

.modal-dialog-btn-danger:hover:enabled {
    background: #fee2e2;
}

.modal-dialog-body {
    padding: 1.35rem 1.5rem 1rem;
}

.modal-dialog-footer {
    padding: 0 1.5rem 1.4rem;
}

.confirm-dialog-message {
    font-size: 0.96rem;
    line-height: 1.5;
    color: #31445f;
}

.confirm-dialog-actions,
.token-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.token-dialog {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.token-dialog-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.token-dialog-section {
    padding: 1rem 1.1rem;
    border: 1px solid #e7edf6;
    border-radius: 16px;
    background: #fafcff;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.token-dialog-section-title {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--tabs-panel-color);
}

.token-dialog-field {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
}

.token-dialog-meta {
    padding: 0.95rem 1rem;
    border: 1px solid #edf2f7;
    border-radius: 14px;
    background: #fff;
}

.token-dialog-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}

.token-dialog-value {
    font-size: 0.96rem;
    color: #1f2d3d;
    line-height: 1.4;
}

.token-dialog-input {
    max-width: 220px;
    border: 1px solid #ced6e4;
    border-radius: 10px;
    padding: 0.72rem 0.85rem;
    background: #fff;
}

.token-dialog-input:focus {
    outline: 0;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(11, 99, 246, 0.12);
}

.token-dialog-note,
.token-dialog-status {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--text-gray-color);
}

.token-dialog-status {
    min-height: 1.5rem;
}

.token-dialog-status-error {
    color: var(--danger);
}

.project-study-datasets-editor {
    gap: 1.25rem;
}

.project-study-datasets-editor-runs,
.project-study-datasets-dialog-runs {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.project-study-datasets-editor-grid-shell,
.project-study-datasets-dialog-grid-shell {
    border: 1px solid #e7edf6;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
}

.project-study-datasets-editor-grid-shell {
    min-height: 30rem;
    height: min(36rem, calc(100vh - 22rem));
}

.project-study-datasets-dialog-grid-shell {
    min-height: 22rem;
    height: 22rem;
}

.project-study-datasets-dialog-empty-state {
    padding: 2.25rem 1.25rem;
    border: 1px dashed #dbe5f0;
    border-radius: 16px;
    background: #fff;
}

.project-study-datasets-dialog-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.project-study-datasets-run-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.9rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.12);
    color: #0f766e;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.wc-ui-read-only-value {
    color: #1abc9c;
}

.lookup-code-toolbar {
    display: flex;
    justify-content: flex-end;
}

.lookup-code-status {
    min-height: 1.4rem;
    font-size: 0.9rem;
    color: var(--text-gray-color);
}

.lookup-code-status-error {
    color: var(--danger);
}

.lookup-code-empty {
    border: 1px dashed #d6e0eb;
    border-radius: 14px;
    background: #fff;
    padding: 1rem 1.1rem;
    color: var(--text-gray-color);
    line-height: 1.5;
}

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

.role-assignment-row {
    display: grid;
    grid-template-columns: minmax(180px, 2fr) minmax(140px, 1fr) minmax(140px, 1fr) auto auto auto;
    gap: 0.75rem;
    align-items: end;
    padding: 0.9rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
}

.role-assignment-field {
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
}

.admin-users-environment-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.admin-users-project-roles-table {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.admin-users-project-roles-empty {
    padding: 1rem 1.1rem;
    color: var(--text-gray-color);
    line-height: 1.5;
}

.admin-users-project-roles-actions {
    display: flex;
    justify-content: flex-end;
}

.admin-users-project-role-checks {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.admin-users-project-role-dialog .wc-ui-field sp-picker {
    width: 100%;
}

.app-user-avatar {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
    flex-shrink: 0;
}

.app-user-menu {
    position: relative;
    height: inherit;
    padding: 0.4rem;
}

.app-user-trigger {
    justify-content: space-between;
    height: inherit;
    padding: 0 0.4rem;
    align-self: center;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.88rem;
    border-radius: 100rem;
    transition: background-color var(--nwc-duration-fast);
}

.app-user-trigger:hover {
    background-color: #0000000A;
}

.app-user-trigger[aria-expanded=true] {
    background-color: var(--nwc-accent-subtle);
    color: black;
}

.app-user-trigger[aria-expanded=true] .app-user-icon {
    transform: rotate(180deg);
}

.app-user-trigger[aria-expanded=true] .app-user-name {
    color: black;
}

.app-user-icon {
    transition: transform var(--nwc-duration-slow) cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.app-user-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    color: #1e293b;
    font-weight: 500;
}

.app-user-name {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--nwc-text-secondary);
    font-size: 0.9rem;
}

.app-user-dropdown {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    display: none;
    color: black;
    width: 17rem;
    padding: 0.9rem 0.5rem 0.5rem;
    flex-direction: column;
    border: 1px solid rgba(24, 34, 52, 0.1);
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.18);
    z-index: 40;
}

.app-user-menu-open .app-user-dropdown {
    display: flex;
}

.app-user-menu-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0.6rem 0.85rem;
}

.app-user-menu-avatar {
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
}

.app-user-menu-identity {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.app-user-menu-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-user-menu-role {
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--muted);
}

.app-user-menu-section {
    display: flex;
    flex-direction: column;
    padding: 0.6rem 0;
}

.app-user-menu-section-footer {
    border-top: 1px solid #e4e9f2;
    padding-bottom: 0;
}

.app-user-menu-action {
    text-align: left;
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background var(--nwc-duration-fast) ease, color var(--nwc-duration-fast) ease;
}

.app-user-menu-action:hover {
    background: var(--nwc-accent-subtle);
    color: var(--nwc-accent);
}

.app-user-menu-action-danger {
    color: #dc3545 !important;
}

.app-main-content {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 1rem;
    background: var(--nwc-basic-background);
}

.app-main-content .wc-structured-panel-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title actions"
        "desc actions";
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.2rem;
}

.app-main-content .wc-structured-panel-heading {
    grid-area: title;
    min-width: 0;
}

.app-main-content .wc-structured-panel-desc {
    grid-area: desc;
    min-width: 0;
}

.app-main-content .wc-structured-panel-actions {
    grid-area: actions;
    width: auto;
    align-self: center;
}

@media (max-width: 720px) {
    .app-main-content .wc-structured-panel-header {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "desc"
            "actions";
        align-items: flex-start;
    }

    .app-main-content .wc-structured-panel-actions {
        width: 100%;
    }
}

.legacy-module-card {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: calc(100% - 4px);
    height: 100%;
}

.app-content-title {
    font-size: 24px;
    font-weight: 700;
}

.app-content-description {
    font-size: 14px;
    color: var(--muted);
}

.app-content-description:empty {
    display: none;
}

.app-content-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.app-grid-page-surface {
    height: 100%;
    min-height: 0;
}

.app-grid-page-grid-shell {
    min-height: 20rem;
    height: calc(100vh - var(--grid-chrome-height, 8rem));
}

.aria-assistant-page,
.aria-assistant-page > .wc-structured-panel-content,
.aria-assistant-root {
    min-height: 0;
    height: 100%;
}

.aria-assistant-page {
    overflow: hidden;
}

.aria-assistant-page > .wc-structured-panel-content {
    padding: 0;
}

.aria-assistant-root {
    display: flex;
    flex-direction: column;
}

.aria-assistant-float-button {
    white-space: nowrap;
}

.aria-guided-highlight {
    z-index: 20;
    outline: 3px solid #2f80ed;
    outline-offset: 3px;
    box-shadow: 0 0 0 7px rgba(47, 128, 237, 0.18), 0 0 24px rgba(47, 128, 237, 0.38);
    border-radius: 6px;
    animation: aria-guided-highlight-pulse 1.2s ease-in-out infinite;
}

@keyframes aria-guided-highlight-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 7px rgba(47, 128, 237, 0.16), 0 0 20px rgba(47, 128, 237, 0.32);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(47, 128, 237, 0.24), 0 0 30px rgba(47, 128, 237, 0.45);
    }
}

/* SDTM Library panels nest the grid shell inside zone sections that have no explicit height,
   so height:100% resolves to 0. Give the shell a concrete height so AG Grid rows render. */
.library-sdtm-surface .app-grid-page-grid-shell {
    height: 500px;
    min-height: 500px;
}

/* Results Terminology Parameters grid sits inside a Core Config card with no explicit
   height, so height:100% resolves to 0. Pin a concrete height so AG Grid rows render. */
.core-config-rtp-grid-shell,
.core-config-ps-grid-shell,
.core-config-as-grid-shell {
    height: clamp(16rem, 40vh, 30rem);
    min-height: 16rem;
}

.core-config-rtp-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Compound & Classification tab panels — vertical spacing between the A/B/C
   sub-section cards within each tab. */
.compound-tab-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.75rem;
}

/* Estimand intercurrent events — fixed event rows, one strategy dropdown each
   (wireframe: Intercurrent Event / Strategy table). */
.core-config-estimand-events {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.core-config-estimand-event-empty {
    font-size: 0.82rem;
    color: #6E6E6E;
}

.core-config-estimand-event-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    background: #F4F6F8;
    font-size: 0.82rem;
    color: #334155;
}

.core-config-estimand-event-label {
    font-weight: 600;
}

/* Submission Targets — selected regulatory authorities shown as removable chips
   above the "+ Add authority" dropdown (Core Config wireframe Card 1). */
.core-config-authority-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

.core-config-authority-chips-empty {
    font-size: 0.82rem;
    color: #6E6E6E;
}

.core-config-authority-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.625rem;
    border-radius: 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    background: #EEF2F6;
    color: #334155;
}

.core-config-authority-chip-remove {
    cursor: pointer;
    opacity: 0.6;
    font-size: 0.72rem;
    line-height: 1;
}

.core-config-authority-chip-remove:hover {
    opacity: 1;
}

.core-config-authority-picker-host {
    max-width: 21.25rem;
}

.library-tlf-surface .app-grid-page-grid-shell {
    height: calc(100vh - 22rem);
    min-height: 12.5rem;
}

.app-grid-page-grid-shell:not(.ag-theme-quartz) {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-grid-page-grid-shell:not(.ag-theme-quartz) > .wc-structured-panel {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.app-grid-page-grid-shell:not(.ag-theme-quartz) > .wc-structured-panel > .wc-structured-panel-content {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
}

.embedded-grid-panel {
    min-height: 0;
    width: 100%;
    height: 100%;
}

.embedded-grid-panel > .wc-structured-panel-content {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
}

.tabbed-content-shell.tabbed-grid-shell {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tabbed-grid-body {
    flex: 1 1 auto;
    min-height: 0;
}

.app-content-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #31445f;
}

.app-content-list li {
    margin: 3px 0;
}

.app-status {
    min-height: 22px;
    font-size: 13px;
}

.app-status:empty {
    display: none;
}

.app-status-info {
    color: var(--muted);
}

.app-status-error {
    color: var(--danger);
}

.projects-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
}

.projects-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
}

.projects-panel-heading {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.projects-panel-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--tabs-panel-color);
}

.projects-panel-subtitle {
    color: var(--text-gray-color);
    font-size: 0.95rem;
}

.projects-panel-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.projects-search-input,
.records-search-input {
    min-width: 260px;
    max-width: 320px;
    border: 1px solid #ced6e4;
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    background: #fff;
}

.projects-search-input:focus,
.records-search-input:focus {
    outline: 0;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(11, 99, 246, 0.12);
}

.wc-ui-records-actions-cell {
    justify-content: flex-end;
}

.wc-ui-records-action-menu {
    position: relative;
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.wc-ui-records-menu-trigger {
    min-width: 2.1rem;
    padding: 0.42rem 0.62rem;
    font-size: 1.1rem;
    line-height: 1;
}

.wc-ui-records-action-dropdown {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 30;
    display: none;
    flex-direction: column;
    gap: 0.22rem;
    min-width: 11.5rem;
    padding: 0.35rem;
    border: 1px solid #d0d8e5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.12);
}

.wc-ui-records-action-dropdown-open {
    display: flex;
}

.wc-ui-records-action-item {
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #344761;
    padding: 0.52rem 0.68rem;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

.wc-ui-records-action-item:hover {
    background: #f8fafc;
}

.wc-ui-records-action-item-danger {
    color: #9b1c1c;
}

.wc-ui-records-action-item-danger:hover {
    background: #fff5f5;
}

.projects-panel-summary {
    color: var(--text-gray-color);
    font-size: 0.92rem;
}

.projects-table,
.records-table {
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.project-overview-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.detail-screen {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.detail-screen-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.detail-screen-heading {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.detail-screen-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--tabs-panel-color);
}

.detail-screen-subtitle {
    color: var(--text-gray-color);
    font-size: 0.95rem;
}

.detail-screen-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.detail-screen-actions:empty,
.detail-screen-summary:empty,
.detail-screen-tabs:empty {
    display: none;
}

.detail-screen-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.detail-screen-summary-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.95rem 1rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

.detail-screen-summary-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-gray-color);
}

.detail-screen-summary-value {
    font-size: 1rem;
    line-height: 1.45;
    color: var(--text);
    word-break: break-word;
}

.detail-screen-summary-value-empty {
    color: var(--muted);
}

.detail-screen-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.detail-screen-body {
    display: flex;
    flex-direction: column;
    margin-top: 0.5em;
    gap: 18px;
    min-height: 0;
}

.projects-table-row,
.records-table-row {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr) minmax(140px, 1fr) 110px;
    gap: 1rem;
    align-items: center;
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid #edf2f7;
}

.projects-table-row:last-child,
.records-table-row:last-child {
    border-bottom: 0;
}

.projects-table-row-header,
.records-table-row-header {
    background: #f8fafc;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.projects-table-cell,
.records-table-cell {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.projects-empty-state,
.records-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 3rem 1.5rem;
    text-align: center;
}

.projects-empty-image,
.records-empty-image {
    width: 160px;
    max-width: 100%;
    height: auto;
    opacity: 0.94;
}

.projects-empty-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tabs-panel-color);
}

.projects-empty-subtitle,
.records-empty-subtitle {
    max-width: 32rem;
    color: var(--text-gray-color);
    font-size: 0.92rem;
}

.entity-details-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
}

.entity-details-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.entity-details-heading {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.entity-details-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--tabs-panel-color);
}

.entity-details-subtitle {
    color: var(--text-gray-color);
    font-size: 0.95rem;
}

.entity-details-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.entity-details-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem;
}

.entity-details-item {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1rem 1rem 1.05rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
    min-height: 112px;
}

.entity-details-item-wide {
    grid-column: 1 / -1;
    min-height: 140px;
}

.entity-details-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-gray-color);
}

.entity-details-value {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

.entity-details-value-empty {
    color: var(--muted);
}

.entity-details-state {
    width: 100%;
    min-height: 360px;
    border: 1px dashed #cfd7e6;
    border-radius: 18px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 2rem;
    text-align: center;
}

.entity-details-state-loading {
    background:
    radial-gradient(circle at top, rgba(11, 99, 246, 0.08), rgba(248, 250, 252, 0.98) 56%);
}

.entity-details-state-error {
    border-color: rgba(191, 47, 47, 0.22);
    background:
    radial-gradient(circle at top, rgba(191, 47, 47, 0.08), rgba(255, 250, 250, 0.98) 56%);
}

.entity-details-state-image {
    width: min(180px, 100%);
    height: auto;
    opacity: 0.96;
}

.entity-details-spinner {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 4px solid rgba(11, 99, 246, 0.18);
    border-top-color: var(--primary);
    animation: entity-details-spin 0.9s linear infinite;
}

.entity-details-state-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tabs-panel-color);
}

.entity-details-state-subtitle {
    max-width: 34rem;
    font-size: 0.95rem;
    color: var(--text-gray-color);
    line-height: 1.55;
}

@keyframes entity-details-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.admin-project-surface {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-project-surface-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.admin-project-surface-heading {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.admin-project-surface-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
}

.admin-project-surface-subtitle {
    color: #64748b;
    font-size: 0.98rem;
    max-width: 60rem;
}

.admin-project-surface-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
}

.surface-tabs {
    --mod-tabs-divider-size: 0;
    --mod-tabs-selection-indicator-color: transparent;
    --mod-tabs-item-horizontal-spacing: 0;
    --mod-tabs-color: #5b6776;
    --mod-tabs-color-hover: #334155;
    --mod-tabs-color-selected: #0f8b69;
    --mod-tabs-color-key-focus: #10a37f;
    display: block;
    width: 100%;
}

.surface-tabs::part(tablist) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem;
    align-items: flex-end;
    border-bottom: 1px solid #d7dee8;
    padding-bottom: 0.1rem;
    background: none;
}

.surface-tabs sp-tab.surface-tab {
    border: 1px solid #d7dee8;
    border-radius: 10px 10px 0 0;
    border-bottom-color: transparent;
    background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
    padding: 0 1rem 0;
    color: inherit;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.surface-tabs sp-tab.surface-tab:hover {
    border-color: rgba(16, 163, 127, 0.34);
    background: linear-gradient(180deg, #ffffff 0%, #f3fbf8 100%);
    color: #334155;
}

.surface-tabs sp-tab.surface-tab:focus-visible {
    outline: 2px solid rgba(16, 163, 127, 0.34);
    outline-offset: 2px;
}

.surface-tabs sp-tab.surface-tab[selected],
.surface-tabs sp-tab.surface-tab-active {
    background: linear-gradient(180deg, #fbfffd 0%, #e2f5ec 100%);
    color: #0f8b69;
    border-color: rgba(16, 163, 127, 0.44);
    border-left: 3px solid #10a37f;
    box-shadow:
            inset 0 2px 0 0 color-mix(in srgb, #6ee7b7 72%, white 28%),
            inset 3px 0 0 0 #10a37f,
            0 10px 22px rgba(16, 163, 127, 0.08);
    font-weight: 700;
    padding-left: calc(1rem - 2px);
    transform: translateY(1px);
}

.surface-tabs sp-tab.surface-tab[selected]:hover,
.surface-tabs sp-tab.surface-tab-active:hover {
    color: #0f8b69;
    border-color: rgba(16, 163, 127, 0.52);
}

.surface-tabs sp-tab.surface-tab[disabled] {
    color: #9aa6b2;
    border-color: #e2e8f0;
    background: #f8fafc;
    cursor: not-allowed;
    opacity: 1;
}

.perm-action-menu {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.perm-action-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 200;
    min-width: 140px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 4px 0;
}

.perm-action-dropdown.perm-action-dropdown-open {
    display: block;
}

.perm-action-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #334155;
    white-space: nowrap;
}

.perm-action-item:hover {
    background: #f1f5f9;
}

.perm-action-item.perm-action-item-danger {
    color: #dc2626;
}

.perm-action-item.perm-action-item-danger:hover {
    background: #fef2f2;
}

.activity-metric-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 0.9rem;
    margin: 0.25rem 0;
}

.activity-metric-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
    padding: 1rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.activity-metric-card-label {
    font-size: 0.77rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.activity-metric-card-value {
    font-size: 1.55rem;
    font-weight: 800;
    color: #0f172a;
}

.activity-metric-card-detail {
    font-size: 0.86rem;
    color: #475569;
}

.activity-filters,
.message-template-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: flex-end;
    margin: 0.1rem 0 0.15rem;
}

.activity-filter-control,
.message-template-filter-control {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 180px;
}

.activity-filter-label,
.message-template-filter-label {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.admin-message-body-editor {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    width: 100%;
}

.admin-message-body-editor-panel {
    min-width: 0;
    width: 100%;
}

.admin-message-body-editor .wc-ui-rich-text-editor-host,
.admin-message-body-editor .wc-ui-code-editor-host {
    min-height: 22rem;
    height: 22rem;
}

@media (max-width: 900px) {
    .admin-message-body-editor .wc-ui-rich-text-editor-host,
    .admin-message-body-editor .wc-ui-code-editor-host {
        min-height: 20rem;
        height: 20rem;
    }
}

.library-automapper-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.library-automapper-step {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: #fff;
    color: #64748b;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.library-automapper-step-active {
    border-color: rgba(37, 99, 235, 0.25);
    color: #0f172a;
}

.library-automapper-step:not(.library-automapper-step-active) .library-automapper-step-badge {
    background: #e5e7eb;
    color: #64748b;
}

.library-automapper-step-badge {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background: #dbeafe;
    color: #1d4ed8;
    flex: 0 0 auto;
}

.library-automapper-step-label {
    font-weight: 700;
    line-height: 1.35;
}

.library-automapper-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: #fff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

.library-automapper-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}

.library-automapper-subsection-title {
    margin-top: 0.5rem;
}

.library-automapper-export-note,
.library-automapper-loading,
.library-automapper-raw-type {
    color: #64748b;
    line-height: 1.5;
}

.library-automapper-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.library-automapper-empty-state {
    margin: 0;
}

.library-automapper-grid-shell {
    min-height: 26rem;
}

.library-automapper-grid-cell {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    line-height: 1.45;
    white-space: normal;
}

.library-automapper-multiline {
    white-space: pre-line;
    word-break: break-word;
}

.library-automapper-raw-name {
    font-weight: 700;
    color: #0f172a;
}

.library-automapper-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: lowercase;
    color: #fff;
}

.library-automapper-badge-confidence {
    background: #16a34a;
    text-transform: none;
}

.library-automapper-badge-ml {
    background: #7c3aed;
}

.library-automapper-badge-rule {
    background: #2563eb;
}

.library-automapper-badge-neutral {
    background: #64748b;
}

.library-automapper-mapping-confirmed {
    background: rgba(220, 252, 231, 0.7);
}

.library-automapper-mapping-unconfirmed {
    background: rgba(255, 247, 237, 0.82);
}

.library-reference-program-status {
    padding: 0 0.2rem;
}

.library-reference-program-host {
    min-height: 52rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.library-reference-program-root .btn-save,
.library-reference-program-root .btn-back {
    display: none;
}

/* ── ARS editor full-height card override ─────────────────────── */
/* Strip card chrome; keep height: 100% so the flex inside resolves */
.legacy-module-card:has(.project-sapars-root),
.legacy-module-card:has(.project-ards-root) {
    height: 100%;
    min-height: unset;
    padding: 0;
    gap: 0;
    border: none;
    border-radius: 12px;
    box-shadow: none;
    background: transparent;
}

/* Hide title, description, and bottom status bar for ARS pages */
.legacy-module-card:has(.project-sapars-root) > .app-content-title,
.legacy-module-card:has(.project-sapars-root) > .app-content-description,
.legacy-module-card:has(.project-sapars-root) > .app-status,
.legacy-module-card:has(.project-ards-root) > .app-content-title,
.legacy-module-card:has(.project-ards-root) > .app-content-description,
.legacy-module-card:has(.project-ards-root) > .app-status {
    display: none;
}

/* Establish containing block so absolute root resolves correctly */
.app-content-body:has(.project-sapars-root),
.app-content-body:has(.project-ards-root) {
    position: relative;
}

/* Hide inline status text (non-error); keep errors visible */
.project-sapars-status:not(.wc-ui-status-error),
.project-ards-status:not(.wc-ui-status-error) {
    display: none;
}

.project-sapars-status.wc-ui-status-error,
.project-ards-status.wc-ui-status-error {
    padding: 0.5rem 0.75rem;
    font-size: 13px;
    flex-shrink: 0;
}

.project-sapars-host,
.project-ards-host {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

/* ── ARS Reporting Events editor full-bleed layout ────────────── */
/* Activated by .ars-editor-active on the wc-structured-panel root */

.app-main-content:has(.ars-editor-active) {
    padding: 0;
    overflow: hidden;
}

/* Restore padding so the panel header (title + buttons) isn't flush */
.app-main-content:has(.ars-editor-active) .wc-structured-panel-header {
    padding: 1rem;
}

.legacy-module-card:has(.ars-editor-active) {
    padding: 0;
    gap: 0;
    height: 100%;
    min-height: unset;
    border: none;
    box-shadow: none;
    background: transparent;
}

.wc-structured-panel.ars-editor-active {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.wc-structured-panel.ars-editor-active > .wc-structured-panel-content {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: unset;
    padding: 0 1rem 1rem;
}

.wc-structured-panel.ars-editor-active .ars-editor-view {
    flex: 1;
    min-height: 37.5rem;
    display: flex;
    flex-direction: column;
}

.wc-structured-panel.ars-editor-active .project-sapars-host {
    flex: 1;
    min-height: 0;
    height: 100%;
}

.library-standards-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem;
}

.library-standards-readonly {
    background: rgba(248, 250, 252, 0.92);
    color: #64748b;
}

.library-standards-details-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
}

.library-standards-details-table {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.library-standards-details-table .records-table-row,
.library-standards-details-table .records-table-row-header {
    align-items: start;
}

.library-standards-details-cell {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.45;
    word-break: break-word;
}

.tlg-preview-status {
    margin-top: 0.25rem;
}

.tlg-preview-designer-host {
    min-height: 44rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 24px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.library-flow-empty-state,
.library-flow-editor-loading {
    min-height: 18rem;
}

.library-flow-editor-surface {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.library-flow-versions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.library-flow-versions-title {
    color: #475569;
    line-height: 1.5;
}

.library-flow-versions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.library-flow-versions-grid-shell {
    min-height: 22rem;
    height: 22rem;
}

.library-flow-version-notes {
    white-space: normal;
    line-height: 1.45;
}

.library-flow-flags-row {
    align-items: center;
    gap: 1rem;
}

.library-flow-code-stack {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
    width: 100%;
}

.library-flow-code {
    width: 100%;
}

.library-flow-code .wc-ui-code-editor-host {
    min-height: 22rem;
    height: 22rem;
}

@media (max-width: 900px) {
    .library-flow-code .wc-ui-code-editor-host {
        min-height: 20rem;
        height: 20rem;
    }
}

.activity-detail-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.activity-detail-row:last-child {
    border-bottom: 0;
}

.activity-detail-label {
    font-weight: 700;
    color: #334155;
}

.activity-detail-value {
    color: #475569;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── AuditTrailDialog ─────────────────────────────────────────────────── */

.audit-trail-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--nwc-text-muted);
    margin-bottom: 0.4rem;
}

.audit-trail-eyebrow > span {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.audit-trail-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.audit-trail-title > span {
    font-size: 1.25rem;
    font-weight: 500;
    color: black;
    letter-spacing: -0.005em;
}

.audit-trail-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.audit-trail-body {
    display: flex;
    flex-direction: column;
}

.audit-trail-record-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.125rem 0.5625rem 0.125rem 0.1875rem;
    background: var(--nwc-raw-gray-50);
    border: 1px solid var(--nwc-basic-border);
    border-radius: 100rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--nwc-text-muted);
}

.audit-trail-pill-av {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--nwc-accent), #1c3152);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.audit-trail-record-pill > span {
    font-size: 0.85rem;
}

.audit-trail-timeline {
    max-height: 22rem;
    overflow: auto;
    scrollbar-width: thin;
}

.audit-trail-event {
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    gap: 0.875rem;
}

.audit-trail-event + .audit-trail-event {
    margin-top: 0.25rem;
}

.audit-trail-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.audit-trail-marker {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--nwc-accent);
}

.audit-trail-event--created .audit-trail-marker {
    background: rgba(26, 188, 156, 0.13);
    color: var(--nwc-accent);
}

.audit-trail-event--updated .audit-trail-marker {
    background: rgba(79, 111, 155, 0.14);
    color: #44597d;
}

.audit-trail-event--unblinded .audit-trail-marker {
    background: rgba(180, 83, 9, 0.13);
    color: #b45309;
}

.audit-trail-line {
    flex: 1;
    width: 0.125rem;
    background: var(--nwc-raw-gray-50);
    margin: 0.25rem 0;
}

.audit-trail-event:last-child .audit-trail-line {
    display: none;
}

.audit-trail-content {
    padding-bottom: 1.25rem;
}

.audit-trail-event:last-child .audit-trail-content {
    padding-bottom: 0.25rem;
}

.audit-trail-ev-title {
    font-weight: 500;
    color: black;
    line-height: 1.2;
    padding-top: 0.25rem;
}

.audit-trail-ev-time {
    font-family: monospace;
    color: var(--nwc-text-muted);
}

.audit-trail-ev-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.5rem;
}

.audit-trail-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.35rem;
    background: var(--bg);
    border: 1px solid var(--nwc-border-subtle);
    border-radius: 0.3125rem;
}

.audit-trail-chip > span {
    font-size: 0.75rem;
    color: var(--nwc-text-muted);
}

.audit-trail-chip-lbl {
    color: var(--nwc-text-muted);
}

.audit-trail-chip-val {
    color: black !important;
    font-weight: 500;
}

.audit-trail-chip-val--na {
    color: var(--nwc-text-muted);
    font-weight: 400;
    font-style: italic;
}

.audit-trail-chip-val--mono {
    font-family: monospace;
    font-size: 0.72rem !important;
}

.audit-trail-chip-val--italic {
    font-style: italic;
    font-weight: 400;
    color: var(--nwc-text-muted);
}

.audit-trail-who-av {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--nwc-accent), #1c3152);
    color: white;
    font-size: 0.45rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.audit-trail-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.audit-trail-footer-note {
    font-size: 0.72rem;
    color: var(--nwc-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.audit-trail-footer-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.project-snapshots-readonly {
    background: rgba(248, 250, 252, 0.92);
    color: #64748b;
}

.tag-manager-input-row,
.project-snapshots-tag-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
}

.secrets-editor-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
}

.wc-ui-field > .wc-ui-field-action {
    width: auto;
    flex-shrink: 0;
    align-self: flex-start;
}

.wc-ui-field-wrapper > :first-child {
    width: 100%;
}

.wc-ui-field > .wc-ui-field-action.admin-secrets-reveal {
    width: fit-content;
}

.wc-ui-field:has(.wc-ui-note) {
    align-items: flex-start;
}

.wc-ui-field:has(.wc-ui-note) > .wc-ui-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 34px;
}

.tag-manager-list,
.project-snapshots-tags {
    display: grid;
    gap: 0.7rem;
}

.tag-manager-row,
.project-snapshots-tag-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.92);
}

.tag-manager-copy,
.project-snapshots-tag-copy {
    display: grid;
    gap: 0.25rem;
}

.project-snapshots-tag-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tag-manager-name,
.project-snapshots-tag-name {
    color: #0f172a;
    font-weight: 600;
}

.tag-manager-meta,
.tag-manager-empty,
.project-snapshots-tag-meta,
.project-snapshots-tag-empty {
    color: #64748b;
    line-height: 1.45;
}

.tag-manager-empty,
.project-snapshots-tag-empty {
    padding: 0.95rem 1rem;
    border: 1px dashed rgba(148, 163, 184, 0.35);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.85);
}

.project-snapshots-confirm-copy {
    display: grid;
    gap: 0.8rem;
    color: #475569;
    line-height: 1.5;
}

.project-snapshots-confirm-warning {
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    border: 1px solid rgba(248, 113, 113, 0.28);
    background: rgba(254, 242, 242, 0.96);
    color: #991b1b;
}

.project-uploads-root {
    display: grid;
    gap: 1rem;
    max-width: 960px;
}

.project-uploads-root .wc-ui-field > sp-picker {
    min-width: 0;
}

.project-uploads-root .wc-ui-section {
    padding-top: 2.5rem;
}

.project-uploads-actions {
    justify-content: flex-start;
}

.project-uploads-progress {
    display: grid;
    gap: 0.8rem;
}

.project-uploads-progress-row {
    display: none;
    grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
}

.project-uploads-progress-label {
    font-size: 0.86rem;
    font-weight: 600;
    color: #475569;
}

.project-uploads-progress-track {
    height: 0.8rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(226, 232, 240, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.project-uploads-progress-fill {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #0f766e 0%, #2dd4bf 100%);
    transition: width 0.2s ease;
}

.project-uploads-progress-fill-zfs {
    background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
}

.project-uploads-progress-value {
    min-width: 3rem;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
}

.study-datasets-import-list,
.study-datasets-snapshots {
    display: grid;
    gap: 0.75rem;
}

.study-datasets-import-row,
.study-datasets-snapshot-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.92);
}

.study-datasets-import-copy,
.study-datasets-snapshot-copy {
    color: #475569;
    line-height: 1.45;
    white-space: pre-wrap;
}

.study-datasets-snapshots-empty,
.execution-record-empty,
.study-datasets-runs-empty {
    padding: 0.95rem 1rem;
    border: 1px dashed rgba(148, 163, 184, 0.35);
    border-radius: 14px;
    color: #64748b;
    background: rgba(248, 250, 252, 0.85);
}

@media (max-width: 900px) {
    .library-domains-actions {
        width: 100%;
        margin-left: 0;
    }

    .library-domains-actions {
        width: 100%;
    }

    .library-domains-grid-shell {
        min-height: 24rem;
        height: auto;
    }

    .library-esign-actions {
        width: 100%;
        margin-left: 0;
    }

    .library-esign-actions {
        width: 100%;
    }

    .library-vendors-actions {
        width: 100%;
        margin-left: 0;
    }

    .library-vendors-actions {
        width: 100%;
    }

    .library-sources-actions {
        width: 100%;
        margin-left: 0;
    }

    .library-sources-actions {
        width: 100%;
    }

    .library-destinations-actions {
        width: 100%;
        margin-left: 0;
    }

    .library-destinations-actions {
        width: 100%;
    }

    .project-study-datasets-actions {
        width: 100%;
        margin-left: 0;
    }

    .project-study-datasets-actions {
        width: 100%;
    }

    .project-study-datasets-grid-shell {
        min-height: 24rem;
        height: auto;
    }
}

.execution-record-table,
.study-datasets-runs-table {
    display: grid;
    gap: 0.6rem;
}

.execution-record-row,
.study-datasets-runs-row {
    display: grid;
    grid-template-columns: 72px minmax(150px, 1fr) minmax(160px, 1.1fr) minmax(160px, 1.1fr) minmax(160px, 1fr) minmax(120px, 0.8fr) minmax(120px, 0.8fr) minmax(240px, 1.35fr);
    gap: 0.6rem;
    align-items: center;
}

.execution-record-row-header,
.study-datasets-runs-row-header {
    padding: 0 0.2rem;
}

.execution-record-row:not(.execution-record-row-header),
.study-datasets-runs-row:not(.study-datasets-runs-row-header) {
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.9);
}

.execution-record-cell,
.study-datasets-runs-cell {
    font-size: 0.9rem;
    color: #475569;
    word-break: break-word;
}

.execution-record-row-header .execution-record-cell,
.execution-record-row-header .study-datasets-runs-cell,
.study-datasets-runs-row-header .study-datasets-runs-cell {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.study-datasets-runs-cell-auth {
    font-weight: 700;
    color: #0f766e;
}

.execution-record-actions,
.study-datasets-runs-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.execution-log-editor {
    width: 100%;
}

.execution-log-editor .wc-ui-code-editor-host {
    min-height: 32rem;
    height: min(42rem, calc(100vh - 16rem));
}

.tlg-report-datasets {
    display: grid;
    gap: 0.65rem;
}

.tlg-report-dataset-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
    padding: 0.8rem 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.92);
}

.tlg-report-dataset-copy,
.tlg-report-datasets-empty {
    color: #475569;
    line-height: 1.45;
    white-space: pre-wrap;
}

.tlg-preview-json {
    margin: 0;
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: #0f172a;
    color: #dbeafe;
    min-height: 320px;
    max-height: 60vh;
    overflow: auto;
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.tabbed-content-shell {
    display: grid;
    gap: 1rem;
}

.project-workflows-task {
    display: grid;
    gap: 1rem;
}

.project-workflows-task-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.project-workflows-task-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
}

.project-workflows-params {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.project-workflows-param-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
}

.tabbed-content-shell {
    display: grid;
    gap: 1rem;
}

.tabbed-content-tabs,
.project-connectors-tabs {
    --mod-tabs-divider-size: 0;
    --mod-tabs-selection-indicator-color: transparent;
    --mod-tabs-item-horizontal-spacing: 0;
    --mod-tabs-color: #334155;
    --mod-tabs-color-hover: #334155;
    --mod-tabs-color-selected: #fff;
    --mod-tabs-color-key-focus: #1d4ed8;
    display: block;
    width: 100%;
}

.tabbed-content-tabs::part(tablist),
.project-connectors-tabs::part(tablist) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
    background: none;
}

.tabbed-content-tabs sp-tab.tabbed-content-tab,
.project-connectors-tabs sp-tab.project-connectors-tab {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 999px;
    background: #fff;
    color: inherit;
    font-weight: 600;
    padding: 0.55rem 0.95rem;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.tabbed-content-tabs sp-tab.tabbed-content-tab:hover,
.project-connectors-tabs sp-tab.project-connectors-tab:hover {
    border-color: rgba(29, 78, 216, 0.34);
    background: rgba(29, 78, 216, 0.05);
}

.tabbed-content-tabs sp-tab.tabbed-content-tab:focus-visible,
.project-connectors-tabs sp-tab.project-connectors-tab:focus-visible {
    outline: 2px solid rgba(29, 78, 216, 0.34);
    outline-offset: 2px;
}

.tabbed-content-tabs sp-tab.tabbed-content-tab[selected],
.project-connectors-tabs sp-tab.project-connectors-tab[selected] {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

.project-connectors-shell {
    display: grid;
    gap: 0.9rem;
}

.project-connectors-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
}

.project-connectors-filter-control {
    display: grid;
    gap: 0.35rem;
    min-width: 220px;
}

.project-connectors-filter-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

.project-connectors-filter-select {
    min-width: 220px;
}

.project-connectors-readonly {
    background: rgba(248, 250, 252, 0.92);
    color: #64748b;
}

.project-connectors-log {
    min-height: 14rem;
    font-family: "SFMono-Regular", "Menlo", "Monaco", "Consolas", monospace;
}

.project-sas2r-editor {
    display: grid;
    gap: 1rem;
}

.project-sas2r-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
}

.project-sas2r-filter-control {
    display: grid;
    gap: 0.35rem;
    min-width: 220px;
}

.project-sas2r-filter-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

.project-sas2r-filter-select {
    min-width: 220px;
}

.project-sas2r-editor-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.project-sas2r-editor-heading {
    font-size: 1.32rem;
    font-weight: 700;
    color: #0f172a;
}

.project-sas2r-editor-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.project-sas2r-editor-grid {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.project-sas2r-pane {
    height: 100%;
}

.project-sas2r-toolbar {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
}

.project-sas2r-file-name {
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.45;
}

.project-sas2r-code {
    min-height: 24rem;
    max-height: 40rem;
    overflow: auto;
    margin: 0;
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 18px;
    background: rgba(248, 250, 252, 0.82);
    color: #0f172a;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: "SFMono-Regular", "Menlo", "Monaco", "Consolas", monospace;
}

.project-sas2r-code-empty {
    color: #64748b;
}

@media (max-width: 1260px) {
    :root {
        --sub-sidebar-width: 250px;
    }

    .logo-container {
        justify-content: center;
        padding: 1rem;
        min-height: var(--top-panel-height);
    }

    .logo-icon {
        display: block;
    }

    .logo-full-sidebar {
        display: none;
    }

    .projects-table-row,
    .records-table-row {
        grid-template-columns: minmax(180px, 2fr) minmax(120px, 1fr) minmax(120px, 1fr) 90px;
    }

    .entity-details-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .execution-record-row,
    .study-datasets-runs-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1240px) {
    .app-top-panel {
        padding: 12px 16px;
    }

    .app-top-panel-container {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }

    .app-top-panel-title {
        flex: 1 1 0;
        min-width: 0;
    }

    .app-top-actions {
        width: auto;
        margin-left: auto;
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    .app-user-dropdown {
        left: auto;
        right: 0;
    }

    .project-connectors-filter-control,
    .project-connectors-filter-select,
    .project-sas2r-filter-control,
    .project-sas2r-filter-select {
        min-width: 100%;
    }

    .project-workflows-param-row {
        grid-template-columns: 1fr;
    }

    .project-snapshots-filter-control,
    .project-snapshots-filter-select {
        min-width: 100%;
    }

    .project-uploads-progress-row {
        grid-template-columns: 1fr;
    }

    .project-uploads-progress-value {
        text-align: left;
    }

    .tag-manager-input-row,
    .project-snapshots-tag-input-row {
        grid-template-columns: 1fr;
    }

    .activity-detail-row {
        grid-template-columns: 1fr;
    }

    .project-sas2r-editor-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .app-main-sidebar,
    .app-sub-sidebar,
    .app-topbar-collapsed-nav {
        display: none;
    }

    .app-top-panel {
        padding: 12px;
    }

    .app-top-panel-container {
        flex-direction: column;
        align-items: stretch;
    }

    .app-top-actions {
        justify-content: flex-start;
        margin-left: 0;
        flex-wrap: wrap;
    }

    .app-user-dropdown {
        left: 0;
        right: auto;
    }

    .selection-dialog-overlay {
        padding: 12px;
    }

    .selection-dialog-card {
        width: 100%;
        max-height: 92vh;
    }

    .selection-dialog-header {
        flex-direction: column;
        align-items: stretch;
    }

    .modal-dialog-overlay {
        padding: 12px;
    }

    .modal-dialog-card {
        width: 100%;
        max-height: 92vh;
    }

    .modal-dialog-header {
        flex-direction: column;
        align-items: stretch;
    }

    .projects-table-row,
    .projects-table-row-header,
    .records-table-row,
    .records-table-row-header {
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .token-dialog-summary {
        grid-template-columns: 1fr;
    }

    .entity-details-grid {
        grid-template-columns: 1fr;
    }

    .detail-screen-header {
        flex-direction: column;
        align-items: stretch;
    }

    .detail-screen-actions {
        justify-content: flex-start;
    }

    .admin-project-surface-header {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-project-surface-actions {
        justify-content: flex-start;
    }

    .project-folders-workspace {
        grid-template-columns: 1fr;
    }

    .activity-metric-cards {
        grid-template-columns: 1fr;
    }

    .activity-filter-control {
        min-width: 100%;
    }

    .activity-detail-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIBRARY — SDTM MAPPINGS  (library.sdtm)
   Design follows library_module_v11.html wireframe — teal/cyan palette
═══════════════════════════════════════════════════════════════════════════ */

/* Local colour tokens — SDTM teal palette (neutral tokens map to app standard vars) */
.library-sdtm-surface {
  --lsd-primary:       #00897B;
  --lsd-primary-dk:    #00695C;
  --lsd-primary-lt:    #E0F2F1;
  --lsd-accent:        #0097A7;
  --lsd-text:          var(--tabs-panel-color);
  --lsd-light:         var(--text-gray-color);
  --lsd-muted:         #B0BEC5;
  --lsd-bg:            var(--bg);
  --lsd-card:          #FFFFFF;
  --lsd-border:        var(--line);
  --lsd-border-lt:     #F0F2F5;
  --lsd-success:       #43A047;
  --lsd-success-bg:    #E8F5E9;
  --lsd-danger:        #C62828;
  --lsd-danger-bg:     #FFEBEE;
  --lsd-warn:          #F57C00;
  --lsd-shadow-sm:     0 1px 3px rgba(0,0,0,0.06);
  --lsd-shadow-md:     0 4px 12px rgba(0,0,0,0.08);
  --lsd-radius:        8px;
  --lsd-radius-lg:     12px;
  --lsd-divider:       #E8EAED;

  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 24px 28px;
  background: var(--lsd-bg);
  min-height: 100%;
  color: var(--lsd-text);
  font-size: 14px;
}

/* ── Metrics grid ── */
.library-sdtm-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.library-sdtm-metric-card {
  background: var(--lsd-card);
  border-radius: var(--lsd-radius-lg);
  padding: 18px;
  box-shadow: var(--lsd-shadow-sm);
  border: 1px solid var(--lsd-border-lt);
  border-top: 3px solid var(--lsd-primary);
  transition: box-shadow 0.2s;
}
.library-sdtm-metric-card:hover { box-shadow: var(--lsd-shadow-md); }
.library-sdtm-metric-card.metric--teal  { border-top-color: var(--lsd-primary); }
.library-sdtm-metric-card.metric--green { border-top-color: var(--lsd-success); }
.library-sdtm-metric-card.metric--blue  { border-top-color: var(--lsd-accent); }
.library-sdtm-metric-card.metric--amber { border-top-color: var(--lsd-warn); }
.library-sdtm-metric-value {
  font-size: 1.55rem;
  font-weight: 700;
  margin-bottom: 5px;
  color: var(--lsd-primary);
}
.library-sdtm-metric-card.metric--green .library-sdtm-metric-value { color: var(--lsd-success); }
.library-sdtm-metric-card.metric--blue  .library-sdtm-metric-value { color: var(--lsd-accent); }
.library-sdtm-metric-card.metric--amber .library-sdtm-metric-value { color: var(--lsd-warn); }

/* ── Card ── */
.library-sdtm-card {
  background: var(--lsd-card);
  border-radius: var(--lsd-radius-lg);
  box-shadow: var(--lsd-shadow-sm);
  border: 1px solid var(--lsd-border-lt);
  margin-bottom: 18px;
  overflow: hidden;
}
.library-sdtm-card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--lsd-border-lt);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FAFBFC;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--lsd-text);
}
.library-sdtm-card-title { font-weight: 600; font-size: 0.93rem; }
.library-sdtm-card-body { padding: 18px; }

/* ── Tab filter bar (search + dropdowns above each grid) ── */
.library-sdtm-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--lsd-card, #f8f9fa);
  border-bottom: 1px solid var(--lsd-border, #e0e0e0);
  flex-wrap: wrap;
}
.library-sdtm-filter-sel {
  background: var(--lsd-card);
  border: 1px solid var(--lsd-border, #ccc);
  border-radius: var(--lsd-radius, 4px);
  color: var(--lsd-light);
  padding: 6px 11px;
  font-size: 0.83rem;
  font-family: inherit;
  min-width: 140px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}
.library-sdtm-filter-sel:focus { border-color: var(--lsd-primary); }
.library-sdtm-status {
  padding: 8px 14px;
  font-size: 0.82rem;
  border-radius: var(--lsd-radius, 4px);
  margin: 6px 14px;
}
.library-sdtm-status--error {
  background: var(--lsd-danger-bg);
  color: var(--lsd-danger);
  border-left: 3px solid var(--lsd-danger);
}

.library-sdtm-cell-muted { color: var(--lsd-muted); }
.library-sdtm-mono {
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  font-size: 0.8rem;
  color: var(--lsd-primary-dk);
  font-weight: 600;
}
.library-sdtm-mono-blue {
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  font-size: 0.8rem;
  color: var(--lsd-accent);
  font-weight: 600;
}

/* ── Badges ── */
.library-sdtm-badge--primary { display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;font-size:0.7rem;font-weight:600;background:var(--lsd-primary-lt);color:var(--lsd-primary); }

/* ── Buttons ── */
.library-sdtm-btn {
  padding: 8px 16px;
  border-radius: var(--lsd-radius);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.library-sdtm-btn--primary {
  background: var(--lsd-primary);
  color: #fff;
}
.library-sdtm-btn--primary:hover {
  background: var(--lsd-primary-dk);
  box-shadow: var(--lsd-shadow-sm);
}
.library-sdtm-btn--secondary {
  background: var(--lsd-card);
  color: var(--lsd-text);
  border: 1px solid var(--lsd-border);
}
.library-sdtm-btn--secondary:hover { background: var(--lsd-bg); }
.library-sdtm-btn-group { display: flex; align-items: center; gap: 6px; }

/* ── Program Detail Modal ── */
.lsd-modal-body { padding: 1.35rem 1.5rem; display: flex; flex-direction: column; gap: 14px; }
.lsd-modal-footer {
  padding: 0 1.5rem 1.4rem; border-top: 1px solid var(--lsd-border-lt);
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  background: #FAFBFC; border-radius: 0 0 22px 22px;
}
.lsd-modal-section { background: var(--lsd-card); border: 1px solid var(--lsd-border-lt); border-radius: var(--lsd-radius); overflow: hidden; }
.lsd-modal-section-hdr {
  padding: 9px 14px; background: #FAFBFC; border-bottom: 1px solid var(--lsd-border-lt);
  font-size: 0.78rem; font-weight: 600; color: var(--lsd-muted); text-transform: uppercase; letter-spacing: 0.5px;
  display: flex; justify-content: space-between; align-items: center;
}
.lsd-modal-section-body { padding: 12px 14px; }
.lsd-modal-section-body--noPad { padding: 0; }
.lsd-kv { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--lsd-border-lt); }
.lsd-kv:last-child { border-bottom: none; }
.lsd-kv-k { font-size: 0.77rem; color: var(--lsd-light); font-weight: 500; }
.lsd-kv-v { font-size: 0.82rem; color: var(--lsd-text); font-weight: 600; }
.lsd-modal-code {
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  font-size: 0.76rem; color: var(--lsd-text); background: var(--lsd-bg);
  padding: 12px 14px; white-space: pre; overflow-x: auto; max-height: 300px;
  overflow-y: auto; display: block; border: none; width: 100%; box-sizing: border-box;
}

/* ── Status / loading / empty ── */
.library-sdtm-loading {
  padding: 24px 0;
  text-align: center;
  color: var(--lsd-muted);
  font-size: 0.85rem;
}
.library-sdtm-empty {
  padding: 28px 0;
  text-align: center;
  color: var(--lsd-muted);
  font-size: 0.85rem;
}

/* ── Modal layout helpers (replaces inline styles) ── */
.lsd-modal-two-col   { display: flex; gap: 14px; }
.lsd-modal-section-flex { flex: 1; }
.lsd-copy-btn--success {
  background: var(--lsd-success-bg) !important;
  color: var(--lsd-success) !important;
  border-color: var(--lsd-success) !important;
}

/* CAI-227: removed `.wc-ui-modal-close` rules added by an earlier patch.
   In nphase-wc 0.5.5 ModalDialog builds its close button via
   `Button.create().variant(GHOST).withIcon(Icon.create("lucide:x", 16))`
   and never applies the `wc-ui-modal-close` class, so those rules were
   dead code. They were also a global widget override (every modal in the
   app), which is the antipattern CAI-227 forbids — widget styling must
   be component-side, not screen-local. */

/* — Preview Dialogs (Standards, Spec, Source Metadata, Domain Template) — */
.library-sdtm-preview-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0;
  min-width: 680px;
}
/* Inside preview body, cards get wireframe-matching border + shadow */
.library-sdtm-preview-body .library-sdtm-card {
  border: 1px solid var(--lsd-border);
  border-radius: var(--lsd-radius-lg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  overflow: hidden;
  margin-bottom: 0;
}
.library-sdtm-preview-body .library-sdtm-card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--lsd-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FAFBFC;
}
.library-sdtm-preview-body .library-sdtm-card-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--lsd-text);
}
.library-sdtm-preview-body .library-sdtm-card-body {
  padding: 16px 18px;
  background: var(--lsd-card);
}

/* KV rows — wireframe .kv style: key left, value right, space-between */
.library-sdtm-preview-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--lsd-divider);
}
.library-sdtm-preview-meta-row:last-child { border-bottom: none; }
.library-sdtm-preview-meta-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--lsd-light);
}
.library-sdtm-preview-meta-value {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--lsd-text);
  text-align: right;
}
/* Table variant card body */
.library-sdtm-card-body--table { padding: 0; overflow-x: auto; }
/* Preview variables / fields table — wireframe .sm-table style */
.library-sdtm-table {
  width: 100%;
  border-collapse: collapse;
}
.library-sdtm-table th {
  padding: 7px 10px;
  text-align: left;
  font-weight: 600;
  font-size: 0.68rem;
  color: var(--lsd-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #FAFBFC;
  border-bottom: 1px solid var(--lsd-divider);
  white-space: nowrap;
}
.library-sdtm-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--lsd-divider);
  color: var(--lsd-text);
  font-size: 0.82rem;
  vertical-align: middle;
}
.library-sdtm-table tr:last-child td { border-bottom: none; }
.library-sdtm-table tbody tr:hover td { background: #FAFBFC; }
/* Core badges for Required / Expected / Permitted */
.library-sdtm-badge--red    { display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:0.7rem;font-weight:600;background:#FFEBEE;color:#C62828; }
.library-sdtm-badge--orange { display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:0.7rem;font-weight:600;background:#FFF3E0;color:#E65100; }
.library-sdtm-badge--grey   { display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:0.7rem;font-weight:600;background:#ECEFF1;color:#546E7A; }
/* Fade-up animation matching wireframe modal open */
@keyframes library-sdtm-fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.library-sdtm-preview-body { animation: library-sdtm-fadeUp 0.2s ease; }

/* ── SDTM Editor Dialog Forms ──────────────────────────────────────────── */
.library-sdtm-dialog-body .wc-ui-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 2px 0;
}
.library-sdtm-dialog-body .wc-ui-section {
  background: #FAFBFC;
  border: 1px solid #E3E8EF;
  border-radius: 8px;
  padding: 12px 14px 6px;
  position: relative;
}
.library-sdtm-dialog-body .wc-ui-section-title {
  font-size: 0.69rem;
  font-weight: 700;
  color: var(--lsd-primary, #1A73E8);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--lsd-primary-lt, #E8F0FE);
}
.library-sdtm-dialog-body .wc-ui-note {
  font-size: 0.72rem;
  color: var(--lsd-muted, #8E9BAA);
  margin-bottom: 8px;
  font-style: italic;
}
.library-sdtm-dialog-body .wc-ui-field {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 10px 16px;
  padding: 8px 0;
  border-bottom: 1px solid #EEF1F5;
}
.library-sdtm-dialog-body .wc-ui-field:last-child { border-bottom: none; }
.library-sdtm-dialog-body .wc-ui-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: #3D4A5C;
  line-height: 1.3;
  white-space: nowrap;
}
.library-sdtm-dialog-body .wc-ui-field > sp-textfield,
.library-sdtm-dialog-body .wc-ui-field > sp-picker,
.library-sdtm-dialog-body .wc-ui-field > sp-textarea {
  width: 100%;
  min-width: 18rem;
}
.library-sdtm-dialog-body .wc-ui-field > sp-picker {
  --spectrum-popover-max-height: 12rem;
}
/* Model picker + optional free-text field composite */
.lsd-model-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  width: 100%;
}
.lsd-model-group > sp-picker {
  width: 100%;
}
.lsd-model-custom-wrap {
  width: 100%;
}
.lsd-model-custom-wrap sp-textfield {
  width: 100%;
}
/* Textarea fields — label on top, input full width */
.library-sdtm-dialog-body .wc-ui-field.lsd-field-full {
  grid-template-columns: 1fr;
}
.library-sdtm-dialog-body .wc-ui-field.lsd-field-full .wc-ui-label {
  margin-bottom: 0.125rem;
}

/* ── Labelled Form Layout ─────────────────────────────────────────────────── */
/* Reusable 10rem-label + 1fr-control form layout.
   Apply .cai-labelled-form to any form container that needs this shape. */

.cai-labelled-form {
    --nwc-input-border:               1px solid #c6cfd8;
    --nwc-input-border-radius:        0.375rem;
    --nwc-text-inputs:                #111827;
    --nwc-accent:                     #1abc9c;
    --nwc-accent-shadow:              0 0 0 0.1875rem rgba(26,188,156,0.13);
    --nwc-input-background-disabled:  #f8f9fb;
    --nwc-text-disabled:              #9ca3af;
    --nwc-row-hover:                  rgba(26,188,156,0.025);
}

/* Section = form card: white, 0.5rem radius.
   No overflow:hidden — Flatpickr calendar popups must render outside the card. */
.cai-labelled-form .wc-ui-section {
    background: #fff;
    border: 1px solid #dde3ec;
    border-radius: 0.5rem;
    padding: 0.375rem 0 0.625rem;
    gap: 0;
}

/* Form row: 10rem label + 1fr control */
.cai-labelled-form .wc-ui-field {
    display: grid;
    grid-template-columns: 10rem 1fr;
    align-items: start;
    gap: 0 1.125rem;
    padding: 0.5625rem 1.75rem;
    transition: background 0.12s;
}

/* Controls fill the 1fr column — overrides nphase-wc default min(70%, 28.75rem) */
.cai-labelled-form .wc-ui-field > :not(.wc-ui-label) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Label: right-aligned, muted, top-padded to sit flush with the input border */
.cai-labelled-form .wc-ui-field > .wc-ui-label {
    text-align: right;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #5c6878;
    padding-top: 0.5rem;
    line-height: 1.4;
    align-self: start;
    display: block;
    user-select: none;
}

/* Control wrapper (hint text below a picker or input): flex column */
.cai-labelled-form .wc-ui-field-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

/* nph-input: collapse internal label slot; fill the capped control column */
/* nph-input: collapse internal label slot; uncap shadow-DOM max-width */
.cai-labelled-form nph-input {
    --label-width: 0;
    --label-input-gap: 0;
    --input-max-width: 100%;
    width: 100%;
    max-width: 100%;
}

/* sp-picker: fill the capped control column */
/* sp-picker: nphase-wc hardcodes a fixed width on the host element.
   Override to fill the 1fr column. Remove once nphase-wc exposes a width CSS variable. */
.cai-labelled-form sp-picker {
    width: 100%;
    max-width: 100%;
}

/* Keep grid cells from overflowing their 1fr column */
.cai-labelled-form .cai-form-grid-2 > * {
    min-width: 0;
}
/* Validity grid sub-labels (From / Until) — muted to match section-label color */
.cai-labelled-form .cai-field-label {
    color: #9ca3af;
}

/* Hint text (Approved By note, footer note) */
.cai-labelled-form .wc-ui-note {
    font-size: 0.71875rem;
    color: #9ca3af;
    line-height: 1.4;
}

/* Section divider: solid rule spanning the content width */
.cai-labelled-form .cai-form-section-divider {
    border-top: 1px solid #dde3ec;
    margin: 0.375rem 1.75rem 0;
    padding-top: 0;
}

/* Section label: indented to align with the 1fr control column */
.cai-labelled-form .cai-form-section-label {
    padding: 0.625rem 0 0.125rem calc(10rem + 1.125rem);
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #9ca3af;
}

/* Footer note (inside the white card): indented to align with the 1fr control column */
.cai-labelled-form .wc-ui-section > .wc-ui-note {
    padding: 0.5rem 1.75rem 0.875rem calc(10rem + 2.875rem);
    font-size: 0.71875rem;
    color: #9ca3af;
    font-style: italic;
}

/* Zone A / Zone B toggle */
.library-sdtm-zone-toggle {
    display: inline-flex;
    align-items: stretch;
    align-self: flex-start;
    border: 1.5px solid var(--lsd-primary, #00897B);
    border-radius: 8px;
    margin: 12px 0;
    background: #ffffff;
}

.library-sdtm-zone-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 28px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    background: transparent;
    border: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    outline: none;
    transition: background 0.15s, color 0.15s;
}

.library-sdtm-zone-toggle-btn:first-child {
    border-radius: 6px 0 0 6px;
}

.library-sdtm-zone-toggle-btn:last-child {
    border-radius: 0 6px 6px 0;
}

.library-sdtm-zone-toggle-btn + .library-sdtm-zone-toggle-btn {
    border-left: 1.5px solid var(--lsd-primary, #00897B);
}

.library-sdtm-zone-toggle-btn--active {
    background: var(--lsd-primary, #00897B);
    color: #ffffff;
}

.library-sdtm-zone-toggle-btn--active:first-child {
    border-radius: 6px 0 0 6px;
}

.library-sdtm-zone-toggle-btn--active:last-child {
    border-radius: 0 6px 6px 0;
}

.library-sdtm-zone-toggle-btn:hover:not(.library-sdtm-zone-toggle-btn--active) {
    background: var(--lsd-primary-lt, #E0F2F1);
}

/* Refresh button inside the zone toggle pill — strip the SECONDARY-variant
   inner border so it visually integrates with the toggle bar. The wc-button
   shadow CSS reads --nwc-basic-border from the host for the base state, and
   --nwc-raw-gray-700 for the hover border-color; CSS custom properties
   inherit through the shadow DOM (and the override is scoped to this host
   only), so blanking both kills the inner <button>'s border in both states.
   Left-divider matches the zone-toggle siblings. */
.library-sdtm-zone-toggle-refresh {
    --nwc-basic-border: transparent;
    --nwc-raw-gray-700: transparent;
    border-left: 0.09375rem solid var(--lsd-primary, #00897B);
    display: inline-flex;
    align-items: stretch;
}

/* TLF Library — zone toggle (mirrors library-sdtm-zone-toggle pattern) */
.library-tlf-zone-toggle {
    display: inline-flex;
    align-items: stretch;
    align-self: flex-start;
    border: 0.09375rem solid var(--lsd-primary, #00897B);
    border-radius: 0.5rem;
    margin: 0.75rem 0;
    background: #ffffff;
}

.library-tlf-zone-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    background: transparent;
    border: none;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    outline: none;
    transition: background 0.15s, color 0.15s;
}

.library-tlf-zone-toggle-btn:first-child {
    border-radius: 0.375rem 0 0 0.375rem;
}

.library-tlf-zone-toggle-btn:last-child {
    border-radius: 0 0.375rem 0.375rem 0;
}

.library-tlf-zone-toggle-btn + .library-tlf-zone-toggle-btn {
    border-left: 0.09375rem solid var(--lsd-primary, #00897B);
}

.library-tlf-zone-toggle-btn--active {
    background: var(--lsd-primary, #00897B);
    color: #ffffff;
}

.library-tlf-zone-toggle-btn--active:first-child {
    border-radius: 0.375rem 0 0 0.375rem;
}

.library-tlf-zone-toggle-btn--active:last-child {
    border-radius: 0 0.375rem 0.375rem 0;
}

.library-tlf-zone-toggle-btn:hover:not(.library-tlf-zone-toggle-btn--active) {
    background: var(--lsd-primary-lt, #E0F2F1);
}

/* ── Derivation Spec Editor ──────────────────────────────────────────────── */

.deriv-spec-rule-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.deriv-spec-rule-key-wrap {
    flex: 1;
}

.deriv-spec-rule-value-wrap {
    flex: 2;
}

.deriv-spec-rule-remove-btn {
    flex-shrink: 0;
    margin-bottom: 0.25rem;
}

.deriv-spec-add-rule-btn {
    display: inline-block;
}

.deriv-spec-check-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.deriv-spec-check-input-wrap {
    flex: 1;
}

.deriv-spec-linked-picker-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.deriv-spec-linked-item-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0;
}

.deriv-spec-linked-item-row label {
    cursor: pointer;
    margin: 0;
}

.deriv-spec-picker-scroll {
    max-height: 24rem;
    overflow-y: auto;
}

.deriv-spec-picker-list {
    padding: 0.25rem 0;
}

.deriv-spec-picker-footer {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* ── Derivation Spec Detail Modal chips ─────────────────────────────────── */
.deriv-spec-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.25rem 0;
}
.deriv-spec-chip {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    background: var(--lsd-card);
    border: 1px solid var(--lsd-border);
    border-radius: 62.4375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--lsd-text);
    white-space: nowrap;
}

/* Make sp-textfield fill its flex wrapper inside dynamic rule rows */
.deriv-spec-check-input-wrap > sp-textfield {
    width: 100%;
}

/* SAS source code editor textarea */
.sas-source-code-editor {
    width: 100%;
    font-family: monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--spectrum-gray-300, #d0d0d0);
    border-radius: 4px;
    resize: vertical;
    background: var(--spectrum-gray-50, #fafafa);
    color: var(--spectrum-gray-900, #1a1a1a);
    box-sizing: border-box;
}

/* SAS code block in detail modal */
.sas-code-block {
    width: 100%;
    font-family: monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    padding: 0.75rem 1rem;
    background: var(--spectrum-gray-75, #f5f5f5);
    border: 1px solid var(--spectrum-gray-300, #d0d0d0);
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    margin: 0;
    box-sizing: border-box;
}

/* Inline chip list for Output & Checks rows */
.sas-chip-list-inline {
    display: inline-flex;
    flex-wrap: wrap;
}

/* ── SAS Reference Program split editor ───────────────────────────────────── */

.admin-project-surface:has(.sas-ref-editor-body) {
    flex: 1;
    min-height: 0;
    gap: 0;
}

.sas-ref-editor-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36rem;
    flex: 1;
    min-height: calc(100vh - 11rem);
    overflow: hidden;
    gap: 0;
    border: 0.0625rem solid var(--lsd-border, #dde3ec);
    border-radius: 0.5rem;
    background: var(--lsd-card, #fff);
}

.sas-ref-code-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 0.0625rem solid var(--lsd-border, #dde3ec);
}

.sas-ref-code-panel-header {
    padding: 0.75rem 1rem;
    border-bottom: 0.0625rem solid var(--lsd-border, #dde3ec);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9ca3af;
    flex-shrink: 0;
}

.sas-ref-code-panel-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.sas-ref-code-editor-mount {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.sas-ref-code-editor {
    flex: 1;
    width: 100%;
    min-height: 0;
}

.sas-ref-code-editor .wc-ui-code-editor-host {
    flex: 1;
    min-height: 100%;
    height: 100%;
}

.sas-ref-code-panel .sas-source-code-editor {
    flex: 1;
    min-height: 20rem;
    height: 100%;
    resize: none;
    border: none;
    border-radius: 0;
    padding: 1rem;
}

.sas-ref-props-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--lsd-card, #fff);
}

.sas-ref-props-header {
    padding: 0.875rem 1.25rem;
    border-bottom: 0.0625rem solid var(--lsd-border, #dde3ec);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}

.sas-ref-props-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

.sas-ref-props-body {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.sas-ref-props-form {
    --sas-ref-label-w: 11.5rem;
    --sas-ref-field-pad: 1.25rem;
    --sas-ref-field-gap: 1rem;
    --sas-ref-value-col: calc(var(--sas-ref-field-pad) + var(--sas-ref-label-w) + var(--sas-ref-field-gap));
    padding: 0.375rem 0 1.5rem;
}

.sas-ref-props-form .wc-ui-section {
    border: none;
    border-radius: 0;
    padding: 0;
    gap: 0;
    background: transparent;
}

.sas-ref-section-label {
    margin: 0.75rem 0 0;
    padding: 0.75rem var(--sas-ref-field-pad) 0.5rem;
    border-top: 0.0625rem solid #dde3ec;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: var(--nwc-text-disabled, #9ca3af);
}

.sas-ref-section-label:first-child {
    margin-top: 0;
    border-top: none;
    padding-top: 0.5rem;
}

.sas-ref-props-form .wc-ui-field {
    display: grid;
    grid-template-columns: var(--sas-ref-label-w) minmax(0, 1fr);
    align-items: center;
    gap: 0 var(--sas-ref-field-gap);
    padding: 0.4375rem var(--sas-ref-field-pad) !important;
    min-width: 0;
}

.sas-ref-props-form .wc-ui-field > .wc-ui-label {
    grid-column: 1;
    text-align: right;
    padding-top: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #5c6878;
    line-height: 1.35;
    white-space: nowrap;
}

.sas-ref-props-form .wc-ui-field:has(.wc-ui-note) {
    align-items: start;
}

.sas-ref-props-form .wc-ui-field:has(.wc-ui-note) > .wc-ui-label {
    padding-top: 0.4375rem;
}

.sas-ref-props-form .wc-ui-field > :not(.wc-ui-label) {
    grid-column: 2;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.sas-ref-props-form nph-input {
    --label-width: 0;
    --label-input-gap: 0;
    --input-max-width: 100%;
    width: 100%;
    max-width: 100%;
}

.sas-ref-props-form sp-picker,
.sas-ref-props-form nph-input,
.sas-ref-props-form sp-textfield {
    width: 100%;
    max-width: 100%;
}

.sas-ref-props-form .wc-ui-note {
    font-size: 0.71875rem;
    color: #9ca3af;
    line-height: 1.4;
    margin-top: 0.25rem;
}

.sas-ref-rule-block {
    padding: 0;
}

.sas-ref-rule-sub-label {
    padding: 0.625rem var(--sas-ref-field-pad) 0.25rem var(--sas-ref-value-col);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9ca3af;
}

.sas-ref-rule-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0 var(--sas-ref-field-pad) 0 var(--sas-ref-value-col);
    min-width: 0;
}

.sas-ref-rule-list .sas-ref-check-row,
.sas-ref-rule-list .deriv-spec-check-row {
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0;
    min-width: 0;
}

.sas-ref-rule-list .deriv-spec-check-input-wrap {
    flex: 1;
    min-width: 0;
}

.sas-ref-rule-delete-btn {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 0.1875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sas-ref-rule-delete-btn:hover {
    background: #fee2e2;
    color: #ef4444;
}

.sas-ref-log-rules .deriv-spec-check-input-wrap sp-textfield,
.sas-ref-log-rules .deriv-spec-check-input-wrap nph-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.sas-ref-add-rule-btn {
    display: inline-flex;
    align-items: center;
    margin: 0.375rem var(--sas-ref-field-pad) 0 var(--sas-ref-value-col);
    padding: 0.125rem 0;
    background: none;
    border: none;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    color: #5c6878;
    cursor: pointer;
}

.sas-ref-add-rule-btn:hover {
    color: var(--nwc-accent, #1abc9c);
}

.sas-ref-linked-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Force AG Grid column menu/filter buttons always visible (ag-theme-quartz hides them until hover) */
.ag-theme-quartz .ag-header-cell-menu-button,
.ag-theme-quartz .ag-header-cell-filter-button,
.ag-theme-quartz .ag-header-icon {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROJECTS — STUDY SETUP BLUEPRINT  (projects.sdtm.setup)
═══════════════════════════════════════════════════════════════════════════ */

.sdtm-blueprint-surface {
  --bp-primary:     #00897B;
  --bp-primary-dk:  #00695C;
  --bp-primary-lt:  #E0F2F1;
  --bp-primary-10:  rgba(0,137,123,0.10);
  --bp-accent:      #0097A7;
  --bp-text:        #37474F;
  --bp-light:       #78909C;
  --bp-muted:       #B0BEC5;
  --bp-bg:          #F5F7FA;
  --bp-card:        #FFFFFF;
  --bp-border:      #E0E4EA;
  --bp-border-lt:   #F0F2F5;
  --bp-success:     #43A047;
  --bp-success-bg:  #E8F5E9;
  --bp-warn:        #F57C00;
  --bp-warn-bg:     #FFF3E0;
  --bp-error:       #E53935;
  --bp-error-bg:    #FFEBEE;
  --bp-shadow-sm:   0 1px 3px rgba(0,0,0,0.06);
  --bp-shadow-md:   0 4px 12px rgba(0,0,0,0.08);
  --bp-radius:      8px;
  --bp-radius-lg:   12px;

  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 24px 28px;
  background: var(--bp-bg);
  min-height: 100%;
  color: var(--bp-text);
  font-size: 14px;
}

.sdtm-blueprint-panel {
  background: var(--bp-card);
  border-radius: var(--bp-radius-lg);
  border: 1px solid var(--bp-border-lt);
  box-shadow: var(--bp-shadow-sm);
  overflow: hidden;
}

.sdtm-blueprint-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--bp-border-lt);
  background: #FAFBFC;
  flex-wrap: wrap;
  gap: 12px;
}

.sdtm-blueprint-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.sdtm-blueprint-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sdtm-blueprint-meta-item > span:first-child {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--bp-muted);
  font-weight: 600;
}
.sdtm-blueprint-meta-item > span:last-child {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--bp-text);
}

.sdtm-blueprint-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.sdtm-blueprint-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
}
.sdtm-blueprint-badge.badge-draft    { background: #FFF3E0; color: var(--bp-warn); }
.sdtm-blueprint-badge.badge-locked   { background: var(--bp-success-bg); color: var(--bp-success); }
.sdtm-blueprint-badge.badge-review   { background: #E3F2FD; color: var(--bp-accent); }

.sdtm-blueprint-domain-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bp-text);
  margin-right: 6px;
}
.sdtm-blueprint-domain-select {
  padding: 6px 10px;
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius);
  font-size: 0.83rem;
  color: var(--bp-text);
  background: var(--bp-card);
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
  cursor: pointer;
}
.sdtm-blueprint-domain-select:focus { border-color: var(--bp-primary); }

.sdtm-blueprint-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--bp-border-lt);
  background: var(--bp-bg);
}

.sdtm-blueprint-init-btn {
  padding: 9px 20px;
  background: var(--bp-primary);
  color: #fff;
  border: none;
  border-radius: var(--bp-radius);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.sdtm-blueprint-init-btn:hover { background: var(--bp-primary-dk); }

.sdtm-blueprint-reopen-btn {
  padding: 7px 16px;
  background: var(--bp-card);
  color: var(--bp-warn);
  border: 1px solid var(--bp-warn);
  border-radius: var(--bp-radius);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.sdtm-blueprint-reopen-btn:hover { background: var(--bp-warn-bg); }

.sdtm-blueprint-table-shell {
  overflow-x: auto;
}

.sdtm-blueprint-table {
  width: 100%;
  border-collapse: collapse;
}
.sdtm-blueprint-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--bp-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--bp-border-lt);
  background: #FAFBFC;
  white-space: nowrap;
}
.sdtm-blueprint-table td {
  padding: 11px 14px;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--bp-border-lt);
  vertical-align: middle;
}
.sdtm-blueprint-table tr:last-child td { border-bottom: none; }
.sdtm-blueprint-table select,
.sdtm-blueprint-table input[type="text"] {
  padding: 5px 8px;
  border: 1px solid var(--bp-border);
  border-radius: 6px;
  font-size: 0.8rem;
  color: var(--bp-text);
  background: var(--bp-bg);
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
  width: 100%;
  min-width: 90px;
}
.sdtm-blueprint-table select:focus,
.sdtm-blueprint-table input[type="text"]:focus {
  border-color: var(--bp-primary);
  background: #fff;
}

.sdtm-blueprint-var-row { cursor: pointer; transition: background 0.12s; }
.sdtm-blueprint-var-row:hover td { background: #FAFBFC; }

.sdtm-blueprint-no-vars {
  padding: 28px;
  text-align: center;
  color: var(--bp-muted);
  font-size: 0.85rem;
}

.sdtm-blueprint-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 28px;
  text-align: center;
}
.sdtm-blueprint-empty-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--bp-text);
  margin-bottom: 8px;
}
.sdtm-blueprint-empty-subtitle {
  font-size: 0.85rem;
  color: var(--bp-light);
  margin-bottom: 20px;
  max-width: 420px;
  line-height: 1.55;
}

.wc-ui-records-subtitle,
.wc-ui-records-summary {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SDTM PIPELINE SCREENS — Design tokens + component CSS
   Covers Screens 01–08: AutoMapper · Domain Mapping · Production · QC ·
   Compare · Pre-P21 Validation · Pinnacle 21 · Package Ready
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens (scoped to SDTM pipeline surfaces) ─────────────────────── */
.am-surface, .dm-root, .prod-root, .qc-root, .compare-surface,
.validation-surface, .p21-surface, .package-surface {
  --sdtm-font: 'IBM Plex Sans', system-ui, sans-serif;
  --sdtm-mono: 'IBM Plex Mono', monospace;
  --sdtm-blue-900: #1B4F72;
  --sdtm-blue-800: #1A5276;
  --sdtm-blue-600: #2471A3;
  --sdtm-blue-100: #D6EAF8;
  --sdtm-blue-50:  #EBF5FB;
  --sdtm-prod-900: #1A6B3C;
  --sdtm-prod-700: #229954;
  --sdtm-prod-200: #A9DFBF;
  --sdtm-prod-50:  #EAFAF1;
  --sdtm-qc-900:   #5B2C6F;
  --sdtm-qc-700:   #7D3C98;
  --sdtm-qc-200:   #D7BDE2;
  --sdtm-qc-50:    #F5EEF8;
  --sdtm-lead-700: #B7770D;
  --sdtm-lead-200: #FAD7A0;
  --sdtm-lead-50:  #FEF9E7;
  --sdtm-success:        #166534;
  --sdtm-success-bg:     #F0FDF4;
  --sdtm-success-border: #BBF7D0;
  --sdtm-warn:           #92400E;
  --sdtm-warn-bg:        #FFFBEB;
  --sdtm-warn-border:    #FDE68A;
  --sdtm-error:          #9B1C1C;
  --sdtm-error-bg:       #FEF2F2;
  --sdtm-error-border:   #FECACA;
  --sdtm-info:           #1E3A5F;
  --sdtm-info-bg:        #EFF6FF;
  --sdtm-info-border:    #BFDBFE;
  --sdtm-gray-900: #111827;
  --sdtm-gray-700: #374151;
  --sdtm-gray-500: #6B7280;
  --sdtm-gray-400: #9CA3AF;
  --sdtm-gray-300: #D1D5DB;
  --sdtm-gray-200: #E5E7EB;
  --sdtm-gray-100: #F3F4F6;
  --sdtm-gray-50:  #F9FAFB;
  --sdtm-white:    #FFFFFF;
  --sdtm-radius:   6px;
  --sdtm-radius-lg: 10px;
  --sdtm-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --sdtm-shadow:    0 2px 8px rgba(0,0,0,.08);
  --sdtm-shadow-lg: 0 8px 24px rgba(0,0,0,.12);
  font-family: var(--sdtm-font);
  font-size: 14px;
  color: var(--sdtm-gray-900);
}

/* ── Spec version banner (Screens 2–8) ─────────────────────────────────────── */
.spec-ver-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: var(--sdtm-radius);
  margin-bottom: 10px;
  font-size: .75rem;
  border: 1px solid;
}
.spec-ver-banner.draft    { background: var(--sdtm-warn-bg);     border-color: var(--sdtm-warn-border);    color: var(--sdtm-warn); }
.spec-ver-banner.approved { background: var(--sdtm-success-bg);  border-color: var(--sdtm-success-border); color: var(--sdtm-success); }
.spec-ver-banner.locked   { background: var(--sdtm-gray-100);    border-color: var(--sdtm-gray-300);       color: var(--sdtm-gray-500); }
.map-ver-status { font-size: .65rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.map-ver-approved { background: var(--sdtm-success-bg); color: var(--sdtm-success); border: 1px solid var(--sdtm-success-border); }
.map-ver-draft    { background: #FEF9C3; color: #92400E; border: 1px solid #FDE68A; }
.map-ver-locked   { background: var(--sdtm-gray-100); color: var(--sdtm-gray-500); border: 1px solid var(--sdtm-gray-300); }
.spec-ver-note    { font-size: .68rem; font-style: italic; margin-left: auto; opacity: .75; }

/* ═══════════════════════════════════════════════════════════════════
   SCREEN 01 — AM: AUTOMAPPER RUN (Review & Refine)
   ═══════════════════════════════════════════════════════════════════ */

.am-surface { display: block; }
.am-main    { padding: 20px 24px; min-height: calc(100vh - 100px); }

/* Wizard bar */
.am-wizbar {
  height: 48px;
  background: var(--sdtm-white);
  border-bottom: 1px solid var(--sdtm-gray-200);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 0;
  position: sticky;
  top: 64px;
  z-index: 200;
  box-shadow: var(--sdtm-shadow-sm);
  margin: -20px -24px 20px;
}
.am-wiz-study {
  min-width: 160px;
  flex-shrink: 0;
  padding-right: 14px;
  border-right: 1px solid var(--sdtm-gray-200);
}
.am-wiz-study-name { font-weight: 700; font-size: .82rem; color: var(--sdtm-gray-900); display: block; }
.am-wiz-study-meta { font-size: .68rem; color: var(--sdtm-gray-500); margin-top: 1px; display: block; }
.am-wiz-steps {
  display: flex;
  align-items: center;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 10px;
  gap: 0;
}
.am-wiz-steps::-webkit-scrollbar { display: none; }
.am-wiz-node {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: var(--sdtm-radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s;
  flex-shrink: 0;
}
.am-wiz-node:hover                    { background: var(--sdtm-gray-100); }
.am-wiz-node.am-wiz-node--active      { background: var(--sdtm-blue-50); }
.am-wiz-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  font-weight: 700;
  flex-shrink: 0;
}
.am-wiz-num--active { background: var(--sdtm-blue-600); color: #fff; }
.am-wiz-num--idle   { background: var(--sdtm-gray-200); color: var(--sdtm-gray-500); }
.am-wiz-num--done   { background: var(--sdtm-success);  color: #fff; }
.am-wiz-lbl { font-size: .72rem; font-weight: 500; color: var(--sdtm-gray-500); }
.am-wiz-node.am-wiz-node--active .am-wiz-lbl { color: var(--sdtm-blue-600); font-weight: 600; }
.am-wiz-sep { color: var(--sdtm-gray-300); font-size: .65rem; margin: 0 2px; flex-shrink: 0; }
.am-wiz-actions {
  display: flex;
  gap: 6px;
  padding-left: 12px;
  border-left: 1px solid var(--sdtm-gray-200);
  flex-shrink: 0;
}

/* Stage header */
.am-stage-hdr {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sdtm-gray-200);
}
.am-stage-num {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .78rem;
  color: #fff;
  flex-shrink: 0;
  margin-top: 1px;
  background: var(--sdtm-blue-900);
}
.am-stage-info    { flex: 1; }
.am-stage-title   { font-size: 1.05rem; font-weight: 700; color: var(--sdtm-gray-900); line-height: 1.2; }
.am-stage-desc    { font-size: .78rem; color: var(--sdtm-gray-500); margin-top: 3px; }
.am-stage-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Buttons */
.am-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: var(--sdtm-radius);
  font-size: .8rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  font-family: var(--sdtm-font);
}
.am-btn:disabled { opacity: .4; cursor: not-allowed; }
.am-btn--primary   { background: var(--sdtm-blue-900); color: #fff; }
.am-btn--primary:hover { background: var(--sdtm-blue-800); }
.am-btn--secondary { background: var(--sdtm-white); color: var(--sdtm-gray-700); border: 1px solid var(--sdtm-gray-300); }
.am-btn--secondary:hover { border-color: var(--sdtm-blue-600); color: var(--sdtm-blue-600); }
.am-btn--sm  { padding: 4px 10px; font-size: .72rem; }
.am-btn--xs  { padding: 2px 8px;  font-size: .65rem; }
.am-btn--full { width: 100%; justify-content: center; }

/* Badges */
.am-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: .65rem;
  font-weight: 600;
  white-space: nowrap;
}
.am-badge--success { background: var(--sdtm-success-bg); color: var(--sdtm-success); border: 1px solid var(--sdtm-success-border); }
.am-badge--warn    { background: var(--sdtm-warn-bg);    color: var(--sdtm-warn);    border: 1px solid var(--sdtm-warn-border); }
.am-badge--error   { background: var(--sdtm-error-bg);   color: var(--sdtm-error);   border: 1px solid var(--sdtm-error-border); }
.am-badge--info    { background: var(--sdtm-info-bg);    color: var(--sdtm-info);    border: 1px solid var(--sdtm-info-border); }
.am-badge--runtime { background: var(--sdtm-gray-100);   color: var(--sdtm-gray-500); border: 1px solid var(--sdtm-gray-300); }

/* Context banner */
.am-context-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: var(--sdtm-info-bg);
  border: 1px solid var(--sdtm-info-border);
  border-radius: var(--sdtm-radius);
  font-size: .78rem;
  color: var(--sdtm-info);
  margin-bottom: 14px;
}
.am-banner-icon { flex-shrink: 0; font-size: 1rem; }
.am-banner-msg  { flex: 1; line-height: 1.5; }
.am-sync-badge  {
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--sdtm-success-bg);
  color: var(--sdtm-success);
  border: 1px solid var(--sdtm-success-border);
  white-space: nowrap;
}

/* Study Setup Snapshot panel */
.am-snapshot-panel {
  background: var(--sdtm-white);
  border: 1px solid var(--sdtm-gray-200);
  border-radius: var(--sdtm-radius-lg);
  padding: 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.am-snapshot-label { min-width: 140px; flex-shrink: 0; }
.am-snapshot-label-title { font-size: .78rem; font-weight: 700; color: var(--sdtm-gray-900); display: block; }
.am-snapshot-label-meta  { font-size: .65rem; color: var(--sdtm-gray-500); margin-top: 2px; display: block; }
.am-snapshot-cols  { display: flex; flex: 1; gap: 0; border: 1px solid var(--sdtm-gray-200); border-radius: var(--sdtm-radius); overflow: hidden; }
.am-snapshot-col   { flex: 1; padding: 8px 12px; border-right: 1px solid var(--sdtm-gray-200); }
.am-snapshot-col:last-child { border-right: none; }
.am-snapshot-col-label { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--sdtm-gray-400); display: block; margin-bottom: 3px; }
.am-snapshot-col-value { font-size: .82rem; font-weight: 600; color: var(--sdtm-gray-900); }
.am-snapshot-btn-wrap  { display: flex; align-items: center; flex-shrink: 0; }

/* Execution review section */
.am-exec-review-section { margin-top: 4px; }
.am-exec-review-hdr { margin-bottom: 12px; }
.am-section-title { font-size: .78rem; font-weight: 700; color: var(--sdtm-gray-900); display: block; }
.am-section-desc  { font-size: .72rem; color: var(--sdtm-gray-500); margin-top: 2px; display: block; }

/* Card grid */
.am-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Cards */
.am-card {
  background: var(--sdtm-white);
  border: 1px solid var(--sdtm-gray-200);
  border-radius: var(--sdtm-radius-lg);
  overflow: hidden;
}
.am-card-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--sdtm-gray-200);
  background: var(--sdtm-gray-50);
}
.am-card-hdr-right { display: flex; align-items: center; gap: 8px; }
.am-card-title { font-size: .88rem; font-weight: 700; color: var(--sdtm-gray-900); }
.am-card-body  { padding: 14px; }
.am-card-desc  { font-size: .75rem; color: var(--sdtm-gray-500); line-height: 1.5; margin-bottom: 10px; display: block; }

/* Stat grid */
.am-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--sdtm-gray-200); border-radius: var(--sdtm-radius); overflow: hidden; margin-bottom: 10px; }
.am-stat-cell { padding: 9px 10px; text-align: center; border-right: 1px solid var(--sdtm-gray-200); }
.am-stat-cell:last-child { border-right: none; }
.am-stat-val  { font-size: 1.1rem; font-weight: 700; line-height: 1.2; display: block; }
.am-stat-val--success { color: var(--sdtm-success); }
.am-stat-val--info    { color: var(--sdtm-blue-600); }
.am-stat-val--co      { color: #5B21B6; }
.am-stat-val--warn    { color: var(--sdtm-warn); }
.am-stat-val--error   { color: var(--sdtm-error); }
.am-stat-lbl  { font-size: .6rem; text-transform: uppercase; letter-spacing: .4px; color: var(--sdtm-gray-400); font-weight: 600; margin-top: 2px; display: block; }

/* Alerts */
.am-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 11px;
  border-radius: var(--sdtm-radius);
  font-size: .78rem;
  line-height: 1.5;
  margin-bottom: 10px;
}
.am-alert-icon { flex-shrink: 0; }
.am-alert--warn    { background: var(--sdtm-warn-bg);    border: 1px solid var(--sdtm-warn-border);    color: var(--sdtm-warn); }
.am-alert--success { background: var(--sdtm-success-bg); border: 1px solid var(--sdtm-success-border); color: var(--sdtm-success); }
.am-alert--info    { background: var(--sdtm-info-bg);    border: 1px solid var(--sdtm-info-border);    color: var(--sdtm-info); }
.am-alert--error   { background: var(--sdtm-error-bg);   border: 1px solid var(--sdtm-error-border);   color: var(--sdtm-error); }

/* Drawers */
.am-drawer { background: var(--sdtm-white); border: 1px solid var(--sdtm-gray-200); border-radius: var(--sdtm-radius-lg); overflow: hidden; margin-top: 14px; }
.am-drawer--hidden { display: none; }
.am-ct-note { font-size: .68rem; color: var(--sdtm-gray-500); }

/* Table */
.am-tbl { width: 100%; border-collapse: collapse; font-size: .79rem; }
.am-tbl th {
  background: var(--sdtm-gray-50);
  padding: 7px 11px;
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--sdtm-gray-500);
  border-bottom: 1px solid var(--sdtm-gray-200);
  text-align: left;
  white-space: nowrap;
}
.am-tbl td { padding: 7px 11px; border-bottom: 1px solid var(--sdtm-gray-100); vertical-align: middle; }
.am-tbl tr:last-child td { border-bottom: none; }
.am-tbl tr:hover td { background: var(--sdtm-gray-50); }
.am-td-mono { font-family: var(--sdtm-mono); font-size: .75rem; }
.am-td-bold { font-weight: 600; }
.am-td-spec  { font-size: .75rem; color: var(--sdtm-gray-700); }
.am-td-interp { font-size: .75rem; color: var(--sdtm-gray-700); }
.am-row--confirmed { background: #F0FDF4; }
.am-row--warn      { background: #FFFBEB; }
.am-row--error     { background: #FEF2F2; }
.am-select {
  padding: 4px 8px;
  border: 1px solid var(--sdtm-gray-300);
  border-radius: var(--sdtm-radius);
  font-size: .75rem;
  font-family: var(--sdtm-font);
  background: var(--sdtm-white);
  color: var(--sdtm-gray-900);
  cursor: pointer;
}

/* Status bar */
.am-status-bar { padding: 8px 12px; border-radius: var(--sdtm-radius); font-size: .78rem; margin-top: 12px; }
.am-status-bar--hidden { display: none; }
.am-status-bar--ok    { background: var(--sdtm-success-bg); border: 1px solid var(--sdtm-success-border); color: var(--sdtm-success); display: block; }
.am-status-bar--error { background: var(--sdtm-error-bg);   border: 1px solid var(--sdtm-error-border);   color: var(--sdtm-error);   display: block; }

/* ═══════════════════════════════════════════════════════════════════
   SCREEN 02 — DM: DOMAIN MAPPING
   ═══════════════════════════════════════════════════════════════════ */

.dm-root { display: block; }

/* ═══════════════════════════════════════════════════════════════════
   SCREEN 03 — PRODUCTION PROGRAMMING
   ═══════════════════════════════════════════════════════════════════ */

/* Utility: .hidden hides any element (used by all SDTM surfaces) */
.hidden { display: none !important; }

/* Outer column container */
.prod-root {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Split pane — two-column grid */
.prod-split-pane {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 14px;
  align-items: start;
}

/* Left pane — domain list */
.prod-left-pane {
  background: var(--sdtm-white);
  border: 1px solid var(--sdtm-gray-200);
  border-radius: var(--sdtm-radius-lg);
  overflow: hidden;
  position: sticky;
  top: 104px;
}
.prod-domain-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 11px;
  background: var(--sdtm-gray-50);
  border-bottom: 1px solid var(--sdtm-gray-200);
}
.prod-panel-title  { font-size: .75rem; font-weight: 700; color: var(--sdtm-gray-900); }
.prod-domain-count { font-size: .7rem; font-family: var(--sdtm-mono); color: var(--sdtm-success); }
.prod-domain-list  { overflow-y: auto; max-height: calc(100vh - 220px); }
.prod-domain-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--sdtm-gray-100);
  cursor: pointer;
  transition: background .1s;
  border-left: 2px solid transparent;
}
.prod-domain-chip:hover              { background: var(--sdtm-gray-50); }
.prod-domain-chip.active,
.prod-domain-chip.selected           { background: var(--sdtm-prod-50); border-left-color: var(--sdtm-prod-700); }
.prod-chip-name  { font-family: var(--sdtm-mono); font-weight: 600; font-size: .75rem; flex: 1; }
.prod-chip-badge {
  font-size: .58rem;
  font-weight: 800;
  font-family: var(--sdtm-mono);
  padding: 2px 5px;
  border-radius: 4px;
  background: #DBEAFE;
  color: #1E40AF;
  flex-shrink: 0;
}

/* Chip status labels */
.prod-chip-status { font-size: .6rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; white-space: nowrap; flex-shrink: 0; }
.prod-chip-status.approved    { background: var(--sdtm-success-bg); color: var(--sdtm-success); border: 1px solid var(--sdtm-success-border); }
.prod-chip-status.generated   { background: var(--sdtm-info-bg);    color: var(--sdtm-info);    border: 1px solid var(--sdtm-info-border); }
.prod-chip-status.not-started { background: var(--sdtm-gray-100);   color: var(--sdtm-gray-500); border: 1px solid var(--sdtm-gray-300); }

/* Right pane — program detail */
.prod-right-pane {
  background: var(--sdtm-white);
  border: 1px solid var(--sdtm-gray-200);
  border-radius: var(--sdtm-radius-lg);
  overflow: hidden;
}
.prod-det-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--sdtm-gray-50);
  border-bottom: 1px solid var(--sdtm-gray-200);
}
.prod-det-name    { font-family: var(--sdtm-mono); font-weight: 700; font-size: .92rem; flex: 1; }
.prod-det-badge   {
  width: 36px; height: 32px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 800; font-family: var(--sdtm-mono);
  background: #FEE2E2; color: #991B1B; flex-shrink: 0;
}
.prod-det-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.prod-det-meta    { display: flex; align-items: center; gap: 8px; padding: 5px 14px; border-bottom: 1px solid var(--sdtm-gray-200); background: var(--sdtm-gray-50); }

/* Program status badge (in det-meta) */
.prod-status-badge { font-size: .65rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; border: 1px solid; }
.prod-status-badge.status-not-started { background: var(--sdtm-gray-100);   color: var(--sdtm-gray-500); border-color: var(--sdtm-gray-300); }
.prod-status-badge.status-generated   { background: var(--sdtm-info-bg);    color: var(--sdtm-info);    border-color: var(--sdtm-info-border); }
.prod-status-badge.status-approved    { background: var(--sdtm-success-bg); color: var(--sdtm-success); border-color: var(--sdtm-success-border); }
.prod-status-badge.status-error       { background: var(--sdtm-error-bg);   color: var(--sdtm-error);   border-color: var(--sdtm-error-border); }

/* Language bar */
.prod-lang-bar   { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--sdtm-gray-50); border: 1px solid var(--sdtm-gray-200); border-radius: var(--sdtm-radius); }
.prod-lang-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--sdtm-gray-500); }
.prod-lang-btn {
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--sdtm-gray-300);
  font-size: .7rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--sdtm-font);
  background: var(--sdtm-white);
  color: var(--sdtm-gray-600);
  transition: all .12s;
}
.prod-lang-btn.active { background: var(--sdtm-prod-900); color: #fff; border-color: var(--sdtm-prod-900); }
.prod-lang-btn:hover:not(.active) { border-color: var(--sdtm-prod-700); color: var(--sdtm-prod-900); }

/* Tab bar */
.prod-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--sdtm-gray-200);
  background: var(--sdtm-white);
}
.prod-tab-btn {
  padding: 9px 14px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--sdtm-gray-500);
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: all .12s;
  font-family: var(--sdtm-font);
  background: transparent;
}
.prod-tab-btn:hover { color: var(--sdtm-gray-700); }
.prod-tab-btn.active { color: var(--sdtm-prod-900); border-bottom-color: var(--sdtm-prod-900); font-weight: 600; }

/* Tab panels */
.prod-tab-panel        { display: block; }
.prod-tab-panel.hidden { display: none; }

/* Code / log blocks */
.prod-code-block {
  background: #1C2333;
  padding: 12px 14px;
  font-family: var(--sdtm-mono);
  font-size: .68rem;
  line-height: 1.9;
  color: #CBD5E1;
  overflow-x: auto;
  max-height: 420px;
  overflow-y: auto;
  margin: 0;
  white-space: pre;
}
.prod-log-block {
  padding: 12px 14px;
  font-family: var(--sdtm-mono);
  font-size: .72rem;
  line-height: 1.8;
  color: var(--sdtm-gray-700);
  background: #FAFAFA;
  max-height: 420px;
  overflow-y: auto;
}
.prod-log-line         { display: block; }
.prod-log-line.note    { color: var(--sdtm-success); }
.prod-log-line.warning { color: var(--sdtm-warn); }
.prod-log-line.error   { color: var(--sdtm-error); }
.prod-output-block { padding: 14px; font-family: var(--sdtm-mono); font-size: .72rem; line-height: 1.8; white-space: pre-wrap; max-height: 420px; overflow-y: auto; }
.prod-code-note  { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; background: #252D3D; border-bottom: 1px solid rgba(255,255,255,.08); }
.prod-note-text  { font-size: .65rem; color: rgba(255,255,255,.4); font-family: var(--sdtm-font); }
.prod-ai-conf    { font-size: .65rem; color: var(--sdtm-gray-400); margin-left: 6px; }

/* Spinner */
.prod-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--sdtm-gray-300); border-top-color: var(--sdtm-prod-700); border-radius: 50%; animation: sdtm-spin .7s linear infinite; vertical-align: middle; }
.prod-spinner.hidden { display: none; }

/* Action bar */
.prod-action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--sdtm-gray-50);
  border: 1px solid var(--sdtm-gray-200);
  border-radius: var(--sdtm-radius);
}
.prod-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--sdtm-radius);
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid var(--sdtm-gray-300);
  cursor: pointer;
  font-family: var(--sdtm-font);
  background: var(--sdtm-white);
  color: var(--sdtm-gray-700);
  transition: all .15s;
}
.prod-action-btn:disabled { opacity: .4; cursor: not-allowed; }
.prod-action-btn.primary  { background: var(--sdtm-prod-900); color: #fff; border-color: var(--sdtm-prod-900); }
.prod-action-btn.primary:hover { background: var(--sdtm-prod-700); }
.prod-action-btn.success  { background: var(--sdtm-success); color: #fff; border-color: var(--sdtm-success); }
.prod-action-btn.success:hover { background: var(--sdtm-prod-700); }

/* Progress */
.prod-progress-wrap  { flex: 1; }
.prod-progress-label { font-size: .72rem; color: var(--sdtm-gray-500); white-space: nowrap; }

/* Status bar */
.prod-status-bar        { padding: 8px 12px; border-radius: var(--sdtm-radius); font-size: .78rem; margin-top: 4px; }
.prod-status-bar.hidden { display: none; }
.prod-status-bar.success { background: var(--sdtm-success-bg); border: 1px solid var(--sdtm-success-border); color: var(--sdtm-success); }
.prod-status-bar.error   { background: var(--sdtm-error-bg);   border: 1px solid var(--sdtm-error-border);   color: var(--sdtm-error); }

/* Empty state */
.prod-empty-state { padding: 40px; text-align: center; color: var(--sdtm-gray-400); font-size: .82rem; }

/* ═══════════════════════════════════════════════════════════════════
   SCREEN 04 — QC PROGRAMMING
   ═══════════════════════════════════════════════════════════════════ */

/* Root is a flex column: langBar → actionBar → independenceBanner → splitPane → statusBar */
.qc-root { display: flex; flex-direction: column; gap: 8px; }

/* Split pane is the 2-column grid */
.qc-split-pane {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 14px;
  align-items: start;
}

/* Language bar */
.qc-lang-bar   { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--sdtm-white); border: 1px solid var(--sdtm-qc-200); border-radius: var(--sdtm-radius-lg); }
.qc-lang-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--sdtm-qc-700); }
.qc-lang-btn {
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--sdtm-qc-200);
  font-size: .7rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--sdtm-font);
  background: var(--sdtm-white);
  color: var(--sdtm-qc-700);
  transition: all .12s;
}
.qc-lang-btn.active { background: var(--sdtm-qc-900); color: #fff; border-color: var(--sdtm-qc-900); }
.qc-lang-btn:hover:not(.active) { background: var(--sdtm-qc-50); }
.qc-progress-wrap  { flex: 1; }
.qc-progress-label { font-size: .7rem; font-family: var(--sdtm-mono); color: var(--sdtm-qc-700); }

/* Action bar */
.qc-action-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--sdtm-white);
  border: 1px solid var(--sdtm-qc-200);
  border-radius: var(--sdtm-radius-lg);
}
.qc-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--sdtm-radius);
  font-size: .75rem;
  font-weight: 600;
  border: 1px solid var(--sdtm-qc-200);
  cursor: pointer;
  font-family: var(--sdtm-font);
  background: var(--sdtm-white);
  color: var(--sdtm-qc-900);
  transition: all .15s;
}
.qc-action-btn:disabled { opacity: .4; cursor: not-allowed; }
.qc-action-btn.primary  { background: var(--sdtm-qc-900); color: #fff; border-color: var(--sdtm-qc-900); }
.qc-action-btn.primary:hover { background: var(--sdtm-qc-700); }
.qc-action-btn.success  { background: var(--sdtm-success); color: #fff; border-color: var(--sdtm-success); }
.qc-action-btn.success:hover { filter: brightness(.92); }

/* Spinner */
.qc-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--sdtm-gray-300);
  border-top-color: var(--sdtm-qc-700);
  border-radius: 50%;
  animation: sdtm-spin .7s linear infinite;
}
.qc-spinner.hidden { display: none; }

/* Independence banner */
.qc-independence-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  background: var(--sdtm-qc-50);
  border: 1px solid var(--sdtm-qc-200);
  border-radius: var(--sdtm-radius-lg);
  font-size: .73rem;
  color: var(--sdtm-qc-900);
  line-height: 1.5;
}

/* Left pane */
.qc-left-pane {
  background: var(--sdtm-white);
  border: 1px solid var(--sdtm-qc-200);
  border-radius: var(--sdtm-radius-lg);
  overflow: hidden;
  position: sticky;
  top: 104px;
}
.qc-domain-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 11px;
  background: var(--sdtm-qc-50);
  border-bottom: 1px solid var(--sdtm-qc-200);
}
.qc-panel-title  { font-size: .75rem; font-weight: 700; color: var(--sdtm-qc-900); }
.qc-domain-count { font-size: .7rem; font-family: var(--sdtm-mono); color: var(--sdtm-qc-700); }
.qc-domain-list  { overflow-y: auto; max-height: calc(100vh - 220px); }
.qc-domain-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--sdtm-gray-100);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: background .1s;
}
.qc-domain-chip:hover { background: var(--sdtm-gray-50); }
.qc-domain-chip.active,
.qc-domain-chip.selected { background: var(--sdtm-qc-50); border-left-color: var(--sdtm-qc-700); }
.qc-chip-badge  { font-size: .6rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; white-space: nowrap; flex-shrink: 0; }
.qc-chip-name   { font-family: var(--sdtm-mono); font-weight: 600; font-size: .75rem; flex: 1; }
.qc-chip-define {
  font-size: .58rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  background: #EDE9FE;
  color: #5B21B6;
  border: 1px solid #DDD6FE;
  flex-shrink: 0;
}
.qc-chip-status { font-size: .6rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; white-space: nowrap; flex-shrink: 0; }
.qc-chip-status.completed  { background: var(--sdtm-success-bg);  color: var(--sdtm-success);  border: 1px solid var(--sdtm-success-border); }
.qc-chip-status.reviewed   { background: var(--sdtm-qc-50);       color: var(--sdtm-qc-700);   border: 1px solid var(--sdtm-qc-200); }
.qc-chip-status.generated  { background: var(--sdtm-info-bg);     color: var(--sdtm-info);     border: 1px solid var(--sdtm-info-border); }
.qc-chip-status.not-started { background: var(--sdtm-gray-100);  color: var(--sdtm-gray-500); border: 1px solid var(--sdtm-gray-300); }

/* Right pane */
.qc-right-pane {
  background: var(--sdtm-white);
  border: 1px solid var(--sdtm-qc-200);
  border-radius: var(--sdtm-radius-lg);
  overflow: hidden;
}
.qc-det-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--sdtm-qc-50);
  border-bottom: 1px solid var(--sdtm-qc-200);
}
/* Square domain-code badge (e.g. "AE", "LB") */
.qc-det-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--sdtm-qc-900);
  color: #fff;
  border-radius: 6px;
  font-size: .7rem;
  font-weight: 800;
  font-family: var(--sdtm-mono);
  flex-shrink: 0;
}
.qc-det-name    { font-family: var(--sdtm-mono); font-weight: 700; font-size: .92rem; flex: 1; }
.qc-det-meta    { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-bottom: 1px solid var(--sdtm-gray-100); }
.qc-det-actions { display: flex; gap: 6px; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--sdtm-gray-100); }

/* Status badge */
.qc-status-badge { font-size: .65rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; border: 1px solid; }
.qc-status-badge.status-not-started { background: var(--sdtm-gray-100);   color: var(--sdtm-gray-500); border-color: var(--sdtm-gray-300); }
.qc-status-badge.status-generated   { background: var(--sdtm-info-bg);    color: var(--sdtm-info);    border-color: var(--sdtm-info-border); }
.qc-status-badge.status-reviewed    { background: var(--sdtm-qc-50);      color: var(--sdtm-qc-700);  border-color: var(--sdtm-qc-200); }
.qc-status-badge.status-completed   { background: var(--sdtm-success-bg); color: var(--sdtm-success); border-color: var(--sdtm-success-border); }

/* Define count badge */
.qc-define-count {
  font-size: .6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  background: #EDE9FE;
  color: #5B21B6;
  border: 1px solid #DDD6FE;
}
.qc-define-count.hidden { display: none; }

/* Tab bar */
.qc-tab-bar { display: flex; border-bottom: 1px solid var(--sdtm-gray-200); background: var(--sdtm-white); }
.qc-tab-btn {
  padding: 9px 14px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--sdtm-gray-500);
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: var(--sdtm-font);
  transition: color .1s;
}
.qc-tab-btn.active { color: var(--sdtm-qc-900); border-bottom-color: var(--sdtm-qc-900); font-weight: 600; }
.qc-tab-btn:hover:not(.active) { color: var(--sdtm-qc-700); }

/* Tab panels */
.qc-tab-panel        { display: block; }
.qc-tab-panel.hidden { display: none; }

/* Code blocks */
.qc-code-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: #1C2333;
  color: rgba(255,255,255,.4);
  font-size: .65rem;
  font-family: var(--sdtm-font);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.qc-code-block {
  background: #1C2333;
  padding: 12px 14px;
  font-family: var(--sdtm-mono);
  font-size: .68rem;
  line-height: 1.9;
  color: #CBD5E1;
  overflow-x: auto;
  max-height: 420px;
  overflow-y: auto;
  margin: 0;
}
.qc-log-block {
  padding: 12px 14px;
  font-family: var(--sdtm-mono);
  font-size: .72rem;
  line-height: 1.8;
  color: var(--sdtm-gray-700);
  background: #FAFAFA;
  max-height: 420px;
  overflow-y: auto;
}
.qc-log-line         { display: block; }
.qc-log-line.note    { color: var(--sdtm-success); }
.qc-log-line.warning { color: var(--sdtm-warn); }
.qc-log-line.error   { color: var(--sdtm-error); }
.qc-output-block { padding: 14px; font-family: var(--sdtm-mono); font-size: .72rem; }
.qc-output-note  { font-size: .72rem; color: var(--sdtm-gray-500); padding: 6px 14px; background: var(--sdtm-warn-bg, #FFFBEB); border-bottom: 1px solid var(--sdtm-warn-border, #FDE68A); font-style: italic; }

/* QC note panel */
.qc-note-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--sdtm-qc-200);
  border-radius: var(--sdtm-radius);
  font-size: .78rem;
  font-family: var(--sdtm-font);
  background: var(--sdtm-qc-50);
  color: var(--sdtm-qc-900);
  resize: vertical;
  min-height: 60px;
  line-height: 1.5;
  box-sizing: border-box;
}
.qc-note-textarea:focus { outline: none; border-color: var(--sdtm-qc-700); }
.qc-note-actions { display: flex; gap: 6px; margin-top: 6px; }
.qc-note-hint    { font-size: .68rem; color: var(--sdtm-gray-400); margin-top: 4px; }

/* Status bar */
.qc-status-bar {
  padding: 7px 14px;
  font-size: .78rem;
  border-radius: var(--sdtm-radius-lg);
  border: 1px solid transparent;
}
.qc-status-bar.hidden  { display: none; }
.qc-status-bar.success { background: var(--sdtm-success-bg); color: var(--sdtm-success); border-color: var(--sdtm-success-border); }
.qc-status-bar.error   { background: var(--sdtm-error-bg);   color: var(--sdtm-error);   border-color: var(--sdtm-error-border); }

/* ═══════════════════════════════════════════════════════════════════
   SCREEN 05 — COMPARE & DIAGNOSTICS
   ═══════════════════════════════════════════════════════════════════ */

/* compare-surface is the two-column root (left panel + right panel) */
.compare-surface {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 14px;
  align-items: start;
}

/* Stats row — inside right panel */
.compare-stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.compare-stats-row > * {
  background: var(--sdtm-white);
  border: 1px solid var(--sdtm-gray-200);
  border-radius: var(--sdtm-radius-lg);
  padding: 11px;
  text-align: center;
}

/* Two-pane layout */
.compare-left-panel {
  background: var(--sdtm-white);
  border: 1px solid var(--sdtm-gray-200);
  border-radius: var(--sdtm-radius-lg);
  overflow: hidden;
  position: sticky;
  top: 104px;
}
.compare-right-panel {
  background: var(--sdtm-white);
  border: 1px solid var(--sdtm-gray-200);
  border-radius: var(--sdtm-radius-lg);
  overflow: hidden;
}
.compare-domain-list { overflow-y: auto; max-height: calc(100vh - 220px); }

/* Domain rows */
.domain-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--sdtm-gray-100);
  cursor: pointer;
  transition: background .1s;
}
.domain-row:hover { background: var(--sdtm-gray-50); }
.domain-row.selected { background: var(--sdtm-blue-50); border-left: 2px solid var(--sdtm-blue-600); }
.domain-badge {
  width: 30px;
  height: 26px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  font-weight: 800;
  font-family: var(--sdtm-mono);
  flex-shrink: 0;
  background: #DBEAFE;
  color: #1E40AF;
}
.domain-name  { font-size: .78rem; font-weight: 600; color: var(--sdtm-gray-900); }
.domain-info  { flex: 1; min-width: 0; }
.domain-meta  { font-size: .62rem; color: var(--sdtm-gray-400); }
.domain-mismatch-detail { font-size: .6rem; color: var(--sdtm-error); }

/* Filter row */
.compare-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--sdtm-gray-50);
  border-bottom: 1px solid var(--sdtm-gray-200);
}
.filter-btn {
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid var(--sdtm-gray-300);
  font-size: .65rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--sdtm-font);
  background: var(--sdtm-white);
  color: var(--sdtm-gray-600);
  transition: all .12s;
}
.filter-btn.active { background: var(--sdtm-blue-900); color: #fff; border-color: var(--sdtm-blue-900); }

/* Detail header */
.compare-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--sdtm-gray-50);
  border-bottom: 1px solid var(--sdtm-gray-200);
}
.detail-domain-title { font-family: var(--sdtm-mono); font-weight: 700; font-size: .92rem; flex: 1; }
/* detail-pane wraps the tab bar and panels — no extra padding so panels fill edge-to-edge */
.compare-detail-pane { overflow: hidden; }

/* Run all row */
.compare-run-all-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--sdtm-info-bg);
  border-bottom: 1px solid var(--sdtm-info-border);
  font-size: .75rem;
}

/* Tab bar */
.compare-tab-bar {
  display: flex;
  border-bottom: 1px solid var(--sdtm-gray-200);
  overflow-x: auto;
  scrollbar-width: none;
}
.compare-tab-bar::-webkit-scrollbar { display: none; }

/* Diff table */
.diff-stats-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--sdtm-gray-50);
  border-bottom: 1px solid var(--sdtm-gray-200);
  font-size: .75rem;
  font-weight: 600;
}
.diff-table-body { width: 100%; border-collapse: collapse; font-size: .78rem; }
.diff-row { display: grid; grid-template-columns: 140px 1fr 1fr 60px 80px; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--sdtm-gray-100); align-items: center; }
.diff-row:hover { background: var(--sdtm-gray-50); }
.diff-prod-val { font-family: var(--sdtm-mono); font-size: .72rem; color: var(--sdtm-prod-900); }
.diff-qc-val   { font-family: var(--sdtm-mono); font-size: .72rem; color: var(--sdtm-qc-900); }
.diff-records  { font-size: .68rem; color: var(--sdtm-gray-400); }
.diff-action   { display: flex; gap: 4px; }
.mtype-intentional {
  background: #F5F3FF;
  color: #5B21B6;
  border: 1px solid #DDD6FE;
  font-size: .6rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
}

/* Log / LST */
.diag-log-content { font-family: var(--sdtm-mono); font-size: .72rem; line-height: 1.8; color: var(--sdtm-gray-700); padding: 12px 14px; background: #FAFAFA; max-height: 360px; overflow-y: auto; }
.diag-severity-row { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border-bottom: 1px solid var(--sdtm-gray-100); font-size: .75rem; }
.lst-content  { font-family: var(--sdtm-mono); font-size: .7rem; line-height: 1.8; color: var(--sdtm-gray-700); padding: 12px 14px; background: #FAFAFA; max-height: 360px; overflow-y: auto; white-space: pre; }
.lst-controls { display: flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--sdtm-gray-50); border-bottom: 1px solid var(--sdtm-gray-200); }
.lst-toggle   { padding: 3px 9px; border-radius: 4px; border: 1px solid var(--sdtm-gray-300); font-size: .65rem; font-weight: 600; cursor: pointer; background: var(--sdtm-white); font-family: var(--sdtm-font); }
.lst-toggle.active { background: var(--sdtm-blue-900); color: #fff; border-color: var(--sdtm-blue-900); }

/* Status bar */
.compare-status-bar { padding: 8px 14px; font-size: .78rem; border-radius: var(--sdtm-radius); margin-top: 10px; }
.compare-status-bar.ok,
.compare-status-bar.success { background: var(--sdtm-success-bg); border: 1px solid var(--sdtm-success-border); color: var(--sdtm-success); }
.compare-status-bar.error   { background: var(--sdtm-error-bg);   border: 1px solid var(--sdtm-error-border);   color: var(--sdtm-error); }
.compare-status-bar.hidden  { display: none; }

/* Spinner (standalone, no inline) for compare screen */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--sdtm-gray-300);
  border-top-color: var(--sdtm-blue-600);
  border-radius: 50%;
  animation: sdtm-spin .7s linear infinite;
  vertical-align: middle;
}
.spinner.hidden { display: none; }

/* Tab buttons inside compare-tab-bar */
.compare-tab-bar .tab-btn {
  padding: 9px 14px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--sdtm-gray-500);
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font-family: var(--sdtm-font);
  white-space: nowrap;
  transition: color .1s;
}
.compare-tab-bar .tab-btn.active { color: var(--sdtm-blue-900); border-bottom-color: var(--sdtm-blue-900); font-weight: 600; }
.compare-tab-bar .tab-btn:hover:not(.active) { color: var(--sdtm-gray-700); }

/* Compare panel visibility */
.compare-panel        { display: block; }
.compare-panel.hidden { display: none; }

/* Domain row status chips */
.status-chip { font-size: .6rem; font-weight: 700; padding: 1px 6px; border-radius: 3px; white-space: nowrap; border: 1px solid; flex-shrink: 0; }
.status-chip.status-match    { background: var(--sdtm-success-bg); color: var(--sdtm-success); border-color: var(--sdtm-success-border); }
.status-chip.status-mismatch { background: var(--sdtm-error-bg);   color: var(--sdtm-error);   border-color: var(--sdtm-error-border); }
.status-chip.status-error    { background: var(--sdtm-error-bg);   color: var(--sdtm-error);   border-color: var(--sdtm-error-border); }
.status-chip.status-not-run  { background: var(--sdtm-gray-100);   color: var(--sdtm-gray-500); border-color: var(--sdtm-gray-300); }

/* Diff table missing classes */
.diff-row-header span { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--sdtm-gray-500); }
.diff-var   { font-family: var(--sdtm-mono); font-size: .75rem; font-weight: 600; color: var(--sdtm-gray-900); }
.diff-mismatch-type { font-size: .6rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; white-space: nowrap; }
.mtype-match       { background: var(--sdtm-success-bg); color: var(--sdtm-success); border: 1px solid var(--sdtm-success-border); }
.mtype-prog-error  { background: var(--sdtm-error-bg);   color: var(--sdtm-error);   border: 1px solid var(--sdtm-error-border); }

/* Severity tags in diagnostics panel */
.sev-tag { font-size: .62rem; font-weight: 700; padding: 2px 7px; border-radius: 3px; border: 1px solid; }
.sev-tag.sev-error   { background: var(--sdtm-error-bg);   color: var(--sdtm-error);   border-color: var(--sdtm-error-border); }
.sev-tag.sev-warning { background: #FFFBEB;                 color: #92400E;             border-color: #FDE68A; }

/* Query raised tag */
.query-raised-tag { font-size: .65rem; color: var(--sdtm-blue-600); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════
   SCREEN 06 — VALIDATION (Pre-P21 Readiness)
   ═══════════════════════════════════════════════════════════════════ */

.validation-surface { display: block; }

.validation-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--sdtm-white);
  border: 1px solid var(--sdtm-gray-200);
  border-radius: var(--sdtm-radius);
  margin-bottom: 12px;
}
.filter-select {
  padding: 5px 9px;
  border: 1px solid var(--sdtm-gray-300);
  border-radius: var(--sdtm-radius);
  font-size: .78rem;
  font-family: var(--sdtm-font);
  background: var(--sdtm-white);
  color: var(--sdtm-gray-700);
  cursor: pointer;
}
.filter-select:focus { outline: none; border-color: var(--sdtm-blue-600); }

.validation-summary {
  display: flex;
  gap: 0;
  border: 1px solid var(--sdtm-gray-200);
  border-radius: var(--sdtm-radius-lg);
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--sdtm-white);
}
.stat-value  { font-size: 1.3rem; font-weight: 700; line-height: 1.1; display: block; }
.stat-label  { font-size: .6rem; text-transform: uppercase; letter-spacing: .4px; color: var(--sdtm-gray-400); font-weight: 600; margin-top: 2px; display: block; }
.stat-error   .stat-value { color: var(--sdtm-error); }
.stat-warning .stat-value { color: var(--sdtm-warn); }
.stat-notice  .stat-value { color: var(--sdtm-blue-600); }
.stat-info    .stat-value { color: var(--sdtm-gray-500); }

.findings-table-wrapper { border: 1px solid var(--sdtm-gray-200); border-radius: var(--sdtm-radius-lg); overflow: hidden; }
.findings-table { width: 100%; border-collapse: collapse; font-size: .79rem; }
.findings-table th {
  background: var(--sdtm-gray-50);
  padding: 7px 11px;
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--sdtm-gray-500);
  border-bottom: 1px solid var(--sdtm-gray-200);
  text-align: left;
  white-space: nowrap;
}
.findings-table td { padding: 8px 11px; border-bottom: 1px solid var(--sdtm-gray-100); vertical-align: middle; }
.findings-table tr:last-child td { border-bottom: none; }
.findings-table tr:hover td { background: var(--sdtm-gray-50); }

/* Status bar — shared by validation, p21, package */
.status-bar { padding: 8px 12px; border-radius: var(--sdtm-radius); margin-top: 10px; font-size: .78rem; }
.status-bar.ok     { background: var(--sdtm-success-bg); border: 1px solid var(--sdtm-success-border); color: var(--sdtm-success); }
.status-bar.error  { background: var(--sdtm-error-bg);   border: 1px solid var(--sdtm-error-border);   color: var(--sdtm-error); }
.status-bar.hidden { display: none; }
.status-msg { font-size: .78rem; }

/* Inline spinner */
.spinner-inline {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--sdtm-gray-300);
  border-top-color: var(--sdtm-blue-600);
  border-radius: 50%;
  animation: sdtm-spin .7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes sdtm-spin { to { transform: rotate(360deg); } }

/* ── Shared button styles (used across screens 05–08) ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: var(--sdtm-blue-800, #1E40AF);
  color: #fff;
  border: 1px solid var(--sdtm-blue-800, #1E40AF);
  border-radius: var(--sdtm-radius);
  font-size: .78rem;
  font-weight: 600;
  font-family: var(--sdtm-font);
  cursor: pointer;
  transition: all .12s;
}
.btn-primary:hover:not(:disabled)   { background: var(--sdtm-blue-900, #1E3A8A); }
.btn-primary:disabled                { opacity: .45; cursor: not-allowed; }
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: var(--sdtm-white);
  color: var(--sdtm-gray-700);
  border: 1px solid var(--sdtm-gray-300);
  border-radius: var(--sdtm-radius);
  font-size: .78rem;
  font-weight: 600;
  font-family: var(--sdtm-font);
  cursor: pointer;
  transition: all .12s;
}
.btn-secondary:hover:not(:disabled) { background: var(--sdtm-gray-50); }
.btn-secondary:disabled              { opacity: .45; cursor: not-allowed; }
.btn-warning {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: #FFFBEB;
  color: #92400E;
  border: 1px solid #FDE68A;
  border-radius: var(--sdtm-radius);
  font-size: .78rem;
  font-weight: 600;
  font-family: var(--sdtm-font);
  cursor: pointer;
  transition: all .12s;
}
.btn-sm  { padding: 3px 8px;  font-size: .7rem; }
.btn-xs  { padding: 2px 6px;  font-size: .65rem; font-weight: 600; border-radius: 3px; cursor: pointer; font-family: var(--sdtm-font); }
.btn-lg  { padding: 8px 18px; font-size: .85rem; }
.btn-fix    { background: var(--sdtm-success-bg); color: var(--sdtm-success); border: 1px solid var(--sdtm-success-border); }
.btn-accept { background: var(--sdtm-info-bg);    color: var(--sdtm-info);    border: 1px solid var(--sdtm-info-border); }
.btn-csdrg  { background: var(--sdtm-gray-100);   color: var(--sdtm-gray-600); border: 1px solid var(--sdtm-gray-300); }
.btn-save   { background: var(--sdtm-blue-800, #1E40AF); color: #fff; border: 1px solid var(--sdtm-blue-800, #1E40AF); }
.btn-fix:hover, .btn-accept:hover, .btn-csdrg:hover, .btn-save:hover { filter: brightness(.92); }

/* Stat cell (shared between compare and validation) */
.stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  min-width: 0;
}

/* Severity badge in findings tables (validation + p21) */
.sev-badge { font-size: .6rem; font-weight: 700; padding: 2px 6px; border-radius: 3px; display: inline-block; }
.sev-badge.sev-error   { background: #FEF2F2; color: #9B1C1C; border: 1px solid #FECACA; }
.sev-badge.sev-warning { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.sev-badge.sev-notice  { background: var(--sdtm-info-bg); color: var(--sdtm-info); border: 1px solid var(--sdtm-info-border); }

/* Status badge in findings table */
.status-badge { font-size: .6rem; font-weight: 700; padding: 2px 6px; border-radius: 3px; display: inline-block; border: 1px solid; }
.status-badge.st-open     { background: var(--sdtm-error-bg);   color: var(--sdtm-error);   border-color: var(--sdtm-error-border); }
.status-badge.st-resolved { background: var(--sdtm-success-bg); color: var(--sdtm-success); border-color: var(--sdtm-success-border); }
.status-badge.st-closed   { background: var(--sdtm-gray-100);   color: var(--sdtm-gray-500); border-color: var(--sdtm-gray-300); }

/* Validation-specific table cells */
.rule-id      { font-family: var(--sdtm-mono); font-size: .72rem; color: var(--sdtm-blue-600); }
.msg-cell     { max-width: 280px; word-break: break-word; font-size: .77rem; }
.actions-cell { white-space: nowrap; }
.autofix-yes  { font-size: .65rem; font-weight: 700; color: var(--sdtm-success); }
.p21-risk     { font-size: .65rem; font-weight: 600; color: var(--sdtm-warn); }
.empty-msg    { text-align: center; padding: 20px; color: var(--sdtm-gray-400); font-size: .8rem; }
.resolved     { font-size: .65rem; color: var(--sdtm-gray-400); font-style: italic; }

/* Row severity colouring for finding rows */
.finding-row.sev-error   > td { border-left: 3px solid var(--sdtm-error); }
.finding-row.sev-warning > td:first-child { border-left: 3px solid var(--sdtm-warn); }

/* ═══════════════════════════════════════════════════════════════════
   SCREEN 07 — P21 VALIDATION (Pinnacle 21)
   ═══════════════════════════════════════════════════════════════════ */

.p21-surface { display: block; }

.p21-table-wrapper { border: 1px solid var(--sdtm-gray-200); border-radius: var(--sdtm-radius-lg); overflow: hidden; }

.p21-compare-panel {
  background: var(--sdtm-white);
  border: 1px solid var(--sdtm-gray-200);
  border-radius: var(--sdtm-radius-lg);
  overflow: hidden;
  margin-top: 14px;
}

/* Profile selector */
.profile-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--sdtm-gray-50); border-bottom: 1px solid var(--sdtm-gray-200); }
.profile-label { font-size: .72rem; font-weight: 700; color: var(--sdtm-gray-700); flex-shrink: 0; }
.btn-profile {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--sdtm-gray-300);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--sdtm-font);
  background: var(--sdtm-white);
  color: var(--sdtm-gray-600);
  transition: all .12s;
}
.btn-profile.active { background: var(--sdtm-blue-900); color: #fff; border-color: var(--sdtm-blue-900); }
.btn-profile:hover:not(.active) { border-color: var(--sdtm-blue-600); color: var(--sdtm-blue-600); }

/* Resolution controls */
.resolution-select {
  padding: 4px 8px;
  border: 1px solid var(--sdtm-gray-300);
  border-radius: var(--sdtm-radius);
  font-size: .73rem;
  font-family: var(--sdtm-font);
  background: var(--sdtm-white);
  color: var(--sdtm-gray-900);
  cursor: pointer;
}
.just-input {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--sdtm-gray-300);
  border-radius: var(--sdtm-radius);
  font-size: .73rem;
  font-family: var(--sdtm-font);
  background: var(--sdtm-white);
  color: var(--sdtm-gray-900);
}
.just-input:focus { outline: none; border-color: var(--sdtm-blue-600); }

/* Severity chips */
.p21-severity-e { background: #FEF2F2; color: #9B1C1C; border: 1px solid #FECACA; font-size: .6rem; font-weight: 700; padding: 2px 6px; border-radius: 3px; display: inline-block; }
.p21-severity-w { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A;  font-size: .6rem; font-weight: 700; padding: 2px 6px; border-radius: 3px; display: inline-block; }
.p21-severity-n { background: var(--sdtm-info-bg); color: var(--sdtm-info); border: 1px solid var(--sdtm-info-border); font-size: .6rem; font-weight: 700; padding: 2px 6px; border-radius: 3px; display: inline-block; }

/* P21 compare panel internals */
.p21-compare-panel {
  display: flex;
  padding: 14px;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.compare-section { flex: 1; min-width: 140px; }
.compare-section h4 { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--sdtm-gray-400); margin: 0 0 8px; }
.compare-stat   { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--sdtm-gray-100); font-size: .78rem; }
.compare-label  { color: var(--sdtm-gray-500); font-size: .75rem; }
.compare-value  { font-weight: 700; font-size: .92rem; color: var(--sdtm-gray-900); font-family: var(--sdtm-mono); }
.compare-arrow  { font-size: 1.5rem; color: var(--sdtm-gray-300); align-self: center; padding: 0 8px; }
.stat-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: .78rem; }
.p21-stat { font-size: .78rem; font-weight: 600; }
.p21-stat b { font-size: 1rem; }
.p21-stat.error   { color: var(--sdtm-error); }
.p21-stat.warning { color: var(--sdtm-warn); }
.p21-stat.notice  { color: var(--sdtm-blue-600); }
.p21-stat.pass    { color: var(--sdtm-success); }

/* P21 findings table cells */
.desc-cell   { max-width: 300px; word-break: break-word; font-size: .77rem; }
.res-cell    { min-width: 120px; }
.just-cell   { min-width: 160px; }
.action-cell { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════
   SCREEN 08 — PACKAGE READY
   ═══════════════════════════════════════════════════════════════════ */

.package-surface { display: block; }

/* Tab bar */
.tab-bar {
  display: flex;
  border-bottom: 2px solid var(--sdtm-gray-200);
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab {
  padding: 10px 18px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--sdtm-gray-500);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: all .12s;
  font-family: var(--sdtm-font);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}
.tab:hover { color: var(--sdtm-gray-700); }
.tab.active { color: var(--sdtm-blue-800); border-bottom-color: var(--sdtm-blue-800); font-weight: 700; }

/* Tab panels for package screen */
.tab-panel        { display: none; }
.tab-panel.active { display: block; }
.tab-panel.hidden { display: none; }

/* Gates grid */
.gates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.gate-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--sdtm-radius-lg);
  font-size: .78rem;
  border: 1px solid;
}
.gate-card.gate-pass { background: var(--sdtm-success-bg); border-color: var(--sdtm-success-border); }
.gate-card.gate-warn { background: #FFFBEB;                 border-color: #FDE68A; }
.gate-card.gate-fail { background: var(--sdtm-error-bg);   border-color: var(--sdtm-error-border); }
.gate-icon { font-size: 1rem; font-weight: 900; flex-shrink: 0; line-height: 1; }
.gate-icon.pass { color: var(--sdtm-success); }
.gate-icon.warn { color: #92400E; }
.gate-icon.fail { color: var(--sdtm-error); }
.gate-body   { flex: 1; min-width: 0; }
.gate-id     { font-family: var(--sdtm-mono); font-size: .65rem; color: var(--sdtm-gray-400); }
.gate-label  { font-size: .78rem; font-weight: 600; color: var(--sdtm-gray-900); margin-top: 2px; }
.gate-detail { font-size: .68rem; color: var(--sdtm-gray-500); margin-top: 3px; word-break: break-word; }
/* Legacy grid children fallback */
.gates-grid > *.pass { background: var(--sdtm-success-bg); border-color: var(--sdtm-success-border); color: var(--sdtm-success); }
.gates-grid > *.fail { background: var(--sdtm-error-bg);   border-color: var(--sdtm-error-border);   color: var(--sdtm-error); }
.gates-grid > *.warn { background: var(--sdtm-warn-bg);    border-color: var(--sdtm-warn-border);    color: var(--sdtm-warn); }

/* Datasets table */
.datasets-table { width: 100%; border-collapse: collapse; font-size: .79rem; }
.datasets-table th {
  background: var(--sdtm-gray-50);
  padding: 7px 11px;
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--sdtm-gray-500);
  border-bottom: 1px solid var(--sdtm-gray-200);
  text-align: left;
}
.datasets-table td { padding: 8px 11px; border-bottom: 1px solid var(--sdtm-gray-100); vertical-align: middle; }
.datasets-table tr:last-child td { border-bottom: none; }
.datasets-table tr:hover td { background: var(--sdtm-gray-50); }

/* Generate row */
.generate-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--sdtm-info-bg);
  border: 1px solid var(--sdtm-info-border);
  border-radius: var(--sdtm-radius);
  margin-bottom: 14px;
}

/* Settings form */
.settings-form { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

/* Panel toolbar */
.panel-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--sdtm-gray-50);
  border-bottom: 1px solid var(--sdtm-gray-200);
}

/* Content viewer */
.content-viewer {
  font-family: var(--sdtm-mono);
  font-size: .72rem;
  line-height: 1.8;
  color: var(--sdtm-gray-700);
  padding: 14px;
  background: #FAFAFA;
  max-height: 480px;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* Traceability chain */
.trace-chain { display: flex; align-items: center; flex-wrap: wrap; gap: 0; font-size: .72rem; margin-top: 8px; }
.trace-node  {
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
  margin: 2px;
  background: var(--sdtm-gray-100);
  color: var(--sdtm-gray-600);
  border: 1px solid var(--sdtm-gray-200);
}
.trace-node.active-node { background: var(--sdtm-blue-800, #1E40AF); color: #fff; border-color: var(--sdtm-blue-800, #1E40AF); }
.trace-arrow { font-size: .9rem; color: var(--sdtm-gray-300); margin: 2px; }

/* Settings form */
.form-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.form-row label { font-size: .78rem; font-weight: 600; color: var(--sdtm-gray-700); min-width: 130px; }
.form-select {
  padding: 6px 10px;
  border: 1px solid var(--sdtm-gray-300);
  border-radius: var(--sdtm-radius);
  font-size: .78rem;
  font-family: var(--sdtm-font);
  background: var(--sdtm-white);
  color: var(--sdtm-gray-700);
  cursor: pointer;
  flex: 1;
}
.form-input {
  padding: 6px 10px;
  border: 1px solid var(--sdtm-gray-300);
  border-radius: var(--sdtm-radius);
  font-size: .78rem;
  font-family: var(--sdtm-font);
  background: var(--sdtm-white);
  color: var(--sdtm-gray-700);
  flex: 1;
}
.form-select:focus, .form-input:focus { outline: none; border-color: var(--sdtm-blue-600); }

/* Dataset table badges */
.qc-badge, .p21-badge, .pkg-badge {
  font-size: .6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid;
}
.qc-badge  { background: var(--sdtm-qc-50);      color: var(--sdtm-qc-700);   border-color: var(--sdtm-qc-200); }
.p21-badge { background: var(--sdtm-gray-100);    color: var(--sdtm-gray-600); border-color: var(--sdtm-gray-300); }
.pkg-badge.st-ready { background: var(--sdtm-success-bg); color: var(--sdtm-success); border-color: var(--sdtm-success-border); }
.pkg-badge.st-error { background: var(--sdtm-error-bg);   color: var(--sdtm-error);   border-color: var(--sdtm-error-border); }

/* Package status badge st-* variants (applied as "pkg-status-badge st-{status}") */
.pkg-status-badge.st-ready    { background: var(--sdtm-success-bg); border-color: var(--sdtm-success-border); color: var(--sdtm-success); }
.pkg-status-badge.st-error    { background: var(--sdtm-error-bg);   border-color: var(--sdtm-error-border);   color: var(--sdtm-error); }
.pkg-status-badge.st-warn     { background: var(--sdtm-warn-bg);    border-color: var(--sdtm-warn-border);    color: var(--sdtm-warn); }
.pkg-status-badge.st-pending  { background: var(--sdtm-gray-100);   border-color: var(--sdtm-gray-300);       color: var(--sdtm-gray-600); }

/* Package status badge */
.pkg-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  border: 1px solid;
}
.pkg-status-badge.ready  { background: var(--sdtm-success-bg); border-color: var(--sdtm-success-border); color: var(--sdtm-success); }
.pkg-status-badge.error  { background: var(--sdtm-error-bg);   border-color: var(--sdtm-error-border);   color: var(--sdtm-error); }
.pkg-status-badge.warn   { background: var(--sdtm-warn-bg);    border-color: var(--sdtm-warn-border);    color: var(--sdtm-warn); }

/* cSDRG pct */
.csdrg-pct { font-size: .82rem; font-weight: 700; color: var(--sdtm-blue-600); }

/* Status variants used by package */
.st-ready { color: var(--sdtm-success); }
.st-error  { color: var(--sdtm-error); }

/* ═══════════════════════════════════════════════════════════════════ */

.ag-theme-quartz * {
    font-size: 1rem;
}

.records-link-btn {
    vertical-align: baseline;
}

.project-status-badge-active {
    background: rgba(16, 163, 127, 0.10);
    color: var(--nwc-accent-active);
    border: 1px solid rgba(16, 163, 127, 0.22);
}

.project-status-badge-archived {
    background: rgba(0, 0, 0, 0.04);
    color: var(--nwc-raw-gray-500);
    border: 1px solid rgba(0, 0, 0, 0.09);
}

.project-status-badge-pending {
    background: rgba(245, 158, 11, 0.08);
    color: #92580A;
    border: 1px solid rgba(245, 158, 11, 0.20);
}

/* ── Audit log "View Details" popup ──────────────────────────────────────── */
.audit-log-detail-body {
    max-height: 60vh;
    overflow-y: auto;
}

.audit-log-detail-pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.8rem;
    line-height: 1.6;
    font-family: monospace;
}

/* ── Audit log "Changes" cell rendering (Admin + Project audit grids) ───── */
.admin-audit-logs-changes-cell,
.project-audit-logs-changes-cell {
    padding: 6px 0;
    white-space: normal;
    line-height: 1.4;
    max-height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

.admin-audit-logs-changes-line,
.project-audit-logs-changes-line {
    word-break: break-word;
    margin-bottom: 2px;
}

.spinner {
    width: 1.5em;
    height: 1.5em;
    border: 2px solid black;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.spinner::after {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    background: #92580A;
    width: 0.5em;
    height: 0.5em;
    transform: translate(-50%, 50%);
    border-radius: 50%;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.picture-button {
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
    background-color: transparent;
    color: black;
}

.centered-cell-content {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

:root {
    --bs-border-width: 1px;
    --bs-border-radius: 0.375rem;
}

.alert {
    --bs-alert-bg: transparent;
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 1rem;
    --bs-alert-margin-bottom: 0rem;
    --bs-alert-color: inherit;
    --bs-alert-border-color: transparent;
    --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
    --bs-alert-border-radius: var(--bs-border-radius);
    --bs-alert-link-color: inherit;

    position: relative;
    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
    margin-bottom: var(--bs-alert-margin-bottom);
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border: var(--bs-alert-border);
    border-radius: var(--bs-alert-border-radius);
}

.alert-warning {
    --bs-alert-color: #664d03;
    --bs-alert-bg: #fff3cd;
    --bs-alert-border-color: #ffe69c;
    --bs-alert-link-color: #664d03;
}

.admin-project-roles-root {
    --grid-chrome-height: 16rem;
}

.admin-project-roles-env-content {
    display: flex;
    flex-direction: column;
}

.wc-ui-tab-content {
    gap: 1rem;
    display: flex;
    flex-direction: column;
}

/* ── Lock-screen overlay ─────────────────────────────────────────────────
 *
 * CAI-217 review fix (RSeglin): all dimensional values use REM (1rem = 16px)
 * so the layout adapts to the user's browser font-size setting. Visibility
 * is owned by the .is-hidden modifier class — Java code toggles the class,
 * never sets style.display directly. */

/* ── DevTools-proof session lock screen (CAI-217 follow-up) ─────────────────
 * Mounted as the sole <body> child while locked. The app's <sp-theme> root
 * is detached from the document, so this stylesheet is the only thing
 * styling the locked view.
 *
 * Colors are hardcoded (not var(--bs-*)) on purpose — Bootstrap CSS variables
 * may be defined inside the detached theme provider, in which case var()
 * would silently fall through to its default. Hardcoding guarantees the
 * lock screen renders correctly even with the entire app subtree gone. Do
 * not "consistency-fix" these to var(--bs-*).
 */

.session-lock-screen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #0a0e17 0%, #111827 40%, #0d1f1a 70%, #0a0e17 100%);
    /* Max 32-bit z-index — defends against browser extensions and third-party
     * scripts that inject siblings directly into <body> with their own
     * positive z-index. The detach already removes app DOM; this prevents
     * a sibling toast from painting visibly over the lock screen. */
    z-index: 2147483647;
    position: relative;
    overflow: hidden;
}

/* Background Web */
.session-lock-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
    linear-gradient(rgba(26, 188, 156, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 188, 156, 0.03) 1px, transparent 1px);
    background-size: 5rem 5rem;
    pointer-events: none;
}

/* Geometric Shapes — Circles */
.session-lock-screen-bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(6rem);
    pointer-events: none;
    animation: float 20s ease-in-out infinite;
}

.session-lock-screen-bg-shape--1 {
    width: 30rem;
    height: 30rem;
    background: rgba(26, 188, 156, 0.1);
    top: -12rem;
    right: -9rem;
    animation-delay: 0s;
}

.session-lock-screen-bg-shape--2 {
    width: 25rem;
    height: 25rem;
    background: rgba(26, 188, 156, 0.13);
    bottom: -9rem;
    left: -6rem;
    animation-delay: -7s;
}

.session-lock-screen-bg-shape--3 {
    width: 18.75rem;
    height: 18.75rem;
    background: rgba(26, 188, 156, 0.09);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -14s;
}

/* Thin Lines */
.session-lock-screen-bg-line {
    position: absolute;
    pointer-events: none;
    border: 1px solid rgba(26, 188, 156, 0.06);
    border-radius: 50%;
}

.session-lock-screen-bg-line--1 {
    width: 50rem;
    height: 50rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.session-lock-screen-bg-line--2 {
    width: 68.75rem;
    height: 68.75rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-color: rgba(26, 188, 156, 0.03);
}

/* Flow Animation */
@keyframes float {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(2rem, -1.25rem) scale(1.05);
    }
    50% {
        transform: translate(-0.95rem, 1.6rem) scale(0.95);
    }
    75% {
        transform: translate(-1.6rem, -0.95rem) scale(1.02);
    }
}

.session-lock-screen-card {
    background: var(--nwc-basic-background);
    border-radius: 0.5rem;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.5),
        0 0 80px rgba(26, 188, 156, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    padding: 1.75rem 2rem;
    min-width: 22rem;        /* 352px */
    max-width: 28rem;        /* 448px */
    display: flex;
    flex-direction: column;
}

.session-lock-screen-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
    text-align: center;
}

.session-lock-screen-subtitle {
    font-size: 0.875rem;
    color: #6c757d;
    text-align: center;
    margin-bottom: 0.5rem;
}

.session-lock-screen-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.session-lock-screen-greeting {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
}

.session-lock-screen-message {
    font-size: 0.9rem;
    color: #6c757d;
}

.session-lock-screen-password-row {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.session-lock-screen-password-input {
    width: 100%;
}

.session-lock-screen-error {
    color: #dc3545;
    font-size: 0.85rem;
}

.session-lock-screen-attempts {
    color: #6c757d;
    font-size: 0.8rem;
}

.session-lock-screen-footer {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.session-lock-screen-body .is-hidden,
.session-lock-screen-footer .is-hidden,
.session-lock-screen-password-row.is-hidden {
    display: none !important;
}

/*
 * Primary-action buttons need white label text on the teal background.
 *
 * Workaround for an `nphase-wc` bundle bug: `UiSupport.actionButton(label,
 * "wc-ui-button wc-ui-button-primary", ...)` (which `FormDialog.ActionSpec
 * .primaryAction(...)` calls under the hood) hard-codes `variant=GHOST` on
 * the inner shadow-DOM button regardless of className. The host gets the
 * teal primary background, but the inner GHOST text picks up `--nwc-accent`
 * (also teal) → invisible label. Setting `--nwc-accent: #fff` on the host
 * inherits through the shadow boundary and recolours the GHOST text white.
 *
 * Per CAI-227, the override is scoped via screen-local marker classes
 * already on our own DOM — it cannot leak to any modal we don't author:
 *   - `library-sdtm-dialog-body`  — every SDTM Library editor dialog
 *   - `library-sdtm-preview-body` — every SDTM Library preview dialog
 *   - `session-lock-screen-footer` — the lock screen (not a modal but
 *     uses the same primary-button helper)
 *
 * Remove once `nphase-wc-components` honours variant from className in
 * `actionButton(...)`.
 */
.wc-ui-modal-card:has(.library-sdtm-dialog-body) .wc-ui-button-primary,
.wc-ui-modal-card:has(.library-sdtm-preview-body) .wc-ui-button-primary,
.session-lock-screen-footer .wc-ui-button-primary {
  --nwc-accent: #fff;
}

/* SDTM Mappings — wc-button hover artifact suppression.
   ───────────────────────────────────────────────────────────────────────
   <nph-button> shadow CSS paints the inner button's :hover background
   using `var(--nwc-accent-subtle)` with its own `border-radius: 0.625rem`.
   The host (`.wc-ui-button`) has `border-radius: 999px` (pill). On hover
   both paint — the inner shaded rectangle is smaller and more square than
   the outer pill, producing "a smaller shaded button inside the real
   button". CSS custom properties inherit through the shadow boundary, so
   overriding the variant hover variables on the host suppresses the
   inner paint. The host's own .wc-ui-button :hover (border + transform)
   still fires and provides the visible feedback.

   Per CAI-227: scoped to SDTM only via `:has()` anchored on SDTM-specific
   marker classes already present on every dialog body
   (`library-sdtm-preview-body`, `library-sdtm-dialog-body`) plus the
   detail-modal footer (`lsd-modal-footer`) and the refresh icon's own
   class (`library-sdtm-zone-toggle-refresh`). Other screens using
   FormDialog / FilePickerField / Button get the nphase-wc contract
   unmodified. */
.wc-ui-modal-card:has(.library-sdtm-preview-body) .wc-ui-actions .wc-ui-button,
.wc-ui-modal-card:has(.library-sdtm-dialog-body) .wc-ui-actions .wc-ui-button,
.wc-ui-modal-card:has(.library-sdtm-dialog-body) .wc-ui-file-picker .wc-ui-button,
.lsd-modal-footer .wc-ui-button,
.library-sdtm-zone-toggle-refresh {
  /* Ghost variant hover/active — used by Close / Cancel / Refresh */
  --nwc-accent-subtle: transparent;
  --nwc-accent-subtle-strong: transparent;
  --nwc-accent-shadow: none;
  /* Secondary variant hover — used by previous SECONDARY refresh */
  --nwc-raw-gray-50: transparent;
  --nwc-raw-gray-100: transparent;
  --nwc-secondary-shadow: none;
  /* Accent variant hover — used by primary Save / Apply actions */
  --nwc-accent-hover: var(--nwc-accent);
  /* Suppress the inner-button transform so it doesn't double-stack with
     the host's :hover transform */
  --nwc-inset-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   CAI-243 Library Sources v2 — design tokens + component styles
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Status tones */
    --cai-ok:          #1D9E75;
    --cai-warn:        #B45309;
    --cai-err:         #C0322B;
    --cai-idle:        #9CA3AF;

    /* Type-badge palette */
    --cai-rest:        #0F8A5F;
    --cai-rest-soft:   #E1F4EB;
    --cai-fs:          #1E5FD0;
    --cai-fs-soft:     #E2ECFB;
    --cai-sql:         #6B3FB3;
    --cai-sql-soft:    #EFE8F8;

    /* Sources surface tokens */
    --cai-ink:         #0F1115;
    --cai-body:        #2A2F36;
    --cai-muted:       #6B7280;
    --cai-faint:       #9CA3AF;
    --cai-rule:        #E5E7EB;
    --cai-rule-strong: #D1D5DB;
    --cai-inset:       #FAFBFC;
    --cai-hover:       #F2F4F6;
    --cai-card:        #FFFFFF;
    --cai-shadow-sm:   0 0.0625rem 0 rgba(15,17,21,.04), 0 0.0625rem 0.125rem rgba(15,17,21,.05);
}

/* ── StatusBadge ──────────────────────────────────────────────────────── */

.cai-status-badge {
    display: inline-flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.cai-status-badge-row {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.cai-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.cai-status-dot--ok   { background: var(--cai-ok); }
.cai-status-dot--warn { background: var(--cai-warn); }
.cai-status-dot--err  { background: var(--cai-err); }
.cai-status-dot--idle { background: var(--cai-idle); }

.cai-status-label {
    font-size: 0.78125rem;
    font-weight: 500;
    color: var(--cai-body);
}
.cai-status-latency {
    font-size: 0.6875rem;
    color: var(--cai-muted);
    padding-left: 0.875rem; /* align under label, past dot+gap */
}

/* Pulse halo for ok + non-zero latency */
.cai-status-dot--ok.cai-status-dot--pulse {
    box-shadow: 0 0 0 0 rgba(29,158,117,.4);
    animation: cai-pulse 2s infinite;
}
@keyframes cai-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(29,158,117,.4); }
    70%  { box-shadow: 0 0 0 0.3125rem rgba(29,158,117,0); }
    100% { box-shadow: 0 0 0 0 rgba(29,158,117,0); }
}

/* ── TypeBadge ────────────────────────────────────────────────────────── */

.cai-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.1875rem 0.5625rem 0.1875rem 0.4375rem;
    border-radius: 62.4375rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}
.cai-type-badge--rest {
    color: var(--cai-rest);
    background: var(--cai-rest-soft);
}
.cai-type-badge--filesystem {
    color: var(--cai-fs);
    background: var(--cai-fs-soft);
}
.cai-type-badge--sql_database {
    color: var(--cai-sql);
    background: var(--cai-sql-soft);
}
.cai-type-badge-icon {
    font-size: 0.8125rem;
    line-height: 1;
}

/* ── VendorAvatar ─────────────────────────────────────────────────────── */

.cai-vendor-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.65625rem;
    flex-shrink: 0;
    user-select: none;
    /* Dynamic values supplied as CSS custom properties by VendorAvatar.java */
    width:            var(--cai-avatar-size, 1.75rem);
    height:           var(--cai-avatar-size, 1.75rem);
    background-color: var(--cai-avatar-bg,    #e8e8e8);
    border:           0.0625rem solid var(--cai-avatar-border, #c0c0c0);
    color:            var(--cai-avatar-color,  #6B7280);
}
.cai-vendor-avatar--lg {
    --cai-avatar-size: 2rem;
    font-size: 0.75rem;
}

/* ── HealthSummaryChips ───────────────────────────────────────────────── */

.cai-health-chips {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}
.cai-health-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.75rem 0.3125rem 0.625rem;
    border-radius: 62.4375rem;
    background: var(--cai-card);
    border: 0.0625rem solid var(--cai-rule);
    font-size: 0.78125rem;
    white-space: nowrap;
}
.cai-health-chip-count {
    font-weight: 600;
    color: var(--cai-body);
}
.cai-health-chip-label {
    color: var(--cai-muted);
}

/* ── GroupedTable ─────────────────────────────────────────────────────── */

.cai-grouped-table {
    background: var(--cai-card);
    border: 0.0625rem solid var(--cai-rule);
    border-radius: 0.5rem;
    box-shadow: var(--cai-shadow-sm);
    overflow: hidden;
}
.cai-grouped-table-group:not(:last-child) .cai-grouped-table-group-rows {
    border-bottom: 0.125rem solid var(--cai-rule);
}
.cai-grouped-table-group-header {
    background: var(--cai-inset);
    padding: 0.75rem 1.25rem;
    border-bottom: 0.0625rem solid var(--cai-rule);
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.cai-grouped-table-group-desc {
    margin-left: auto;
    font-size: 0.71875rem;
    color: var(--cai-faint);
}
.cai-grouped-table-col-header {
    display: grid;
    padding: 0.5rem 1.25rem;
    gap: 0.75rem;
    border-bottom: 0.0625rem solid var(--cai-rule);
    font-size: 0.65625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cai-muted);
}
.cai-grouped-table-row {
    display: grid;
    padding: 0.75rem 1.25rem;
    gap: 0.75rem;
    min-height: 3.5rem;
    align-items: center;
    border-bottom: 0.0625rem solid var(--cai-rule);
    cursor: pointer;
    transition: background 0.1s;
}
.cai-grouped-table-row:last-child {
    border-bottom: none;
}
.cai-grouped-table-row:hover {
    background: var(--cai-hover);
}
.cai-grouped-table-row:hover .cai-row-kebab {
    opacity: 1;
}

/* Sources list specific grid */
.cai-sources-grid {
    grid-template-columns: 1.6fr 1.5fr 7.5rem 9.6875rem 2.25rem;
}

/* ── PageActionRow ────────────────────────────────────────────────────── */

.cai-page-action-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.625rem 0;
}

/* ── EmptyStateBuilder CTA extension ─────────────────────────────────── */

.records-empty-cta {
    margin-top: 0.75rem;
}

/* ── Row kebab ────────────────────────────────────────────────────────── */

.cai-row-kebab {
    opacity: 0.4;
    transition: opacity 0.1s;
    cursor: pointer;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    border: none;
    background: transparent;
    font-size: 1.125rem;
    color: var(--cai-muted);
}
.cai-row-kebab:hover {
    opacity: 1;
    background: var(--cai-rule);
}

/* Kebab dropdown menu */
.cai-row-kebab-wrap {
    position: relative;
}
.cai-row-kebab-menu {
    display: none;
    position: fixed;
    z-index: 200;
    min-width: 10rem;
    background: var(--cai-card);
    border: 0.0625rem solid var(--cai-rule-strong);
    border-radius: 0.375rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
    padding: 0.25rem 0;
}
.cai-row-kebab-menu--open {
    display: flex;
    flex-direction: column;
}
.cai-row-kebab-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--cai-body);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    white-space: nowrap;
}
.cai-row-kebab-item:hover {
    background: var(--cai-hover);
}
.cai-row-kebab-item--danger {
    color: var(--cai-err);
}
.cai-row-kebab-item--danger:hover {
    background: #FEF2F2;
}
.cai-row-kebab-divider {
    height: 0.0625rem;
    background: var(--cai-rule);
    margin: 0.25rem 0;
}

/* ── KeyValueList ─────────────────────────────────────────────────────── */

.cai-kv-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.cai-kv-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1.75rem;
    gap: 0.375rem;
    align-items: center;
}
.cai-kv-add {
    margin-top: 0.25rem;
}
.cai-kv-remove {
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0.0625rem solid var(--cai-rule-strong);
    border-radius: 0.25rem;
    cursor: pointer;
    color: var(--cai-muted);
    font-size: 0.875rem;
    flex-shrink: 0;
}
.cai-kv-remove:hover { color: var(--cai-err); border-color: var(--cai-err); }

/* ── SecretReferencePicker ────────────────────────────────────────────── */

.cai-secret-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0 0.75rem;
    height: 2.125rem;
    background: var(--cai-card);
    border: 0.0625rem solid var(--cai-rule-strong);
    border-radius: 0.375rem;
    cursor: pointer;
    text-align: left;
    font-size: 0.8125rem;
    color: var(--cai-muted);
    transition: border-color 0.15s;
}
.cai-secret-trigger:hover {
    border-color: var(--cai-ok);
}
.cai-secret-trigger-chevron {
    margin-left: auto;
    opacity: 0.5;
    font-size: 0.6875rem;
}
.cai-secret-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0.625rem;
    background: var(--cai-inset);
    border: 0.0625rem solid var(--cai-rule);
    border-radius: 0.375rem;
    font-size: 0.78125rem;
}
.cai-secret-chip-key {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    color: var(--cai-body);
}
.cai-secret-chip-mask {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.6875rem;
    color: var(--cai-muted);
    margin-left: auto;
}
.cai-secret-chip-clear {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--cai-muted);
    padding: 0.125rem 0.25rem;
    border-radius: 0.1875rem;
    font-size: 0.875rem;
    line-height: 1;
    flex-shrink: 0;
}
.cai-secret-chip-clear:hover {
    background: var(--cai-rule);
    color: var(--cai-body);
}
.cai-secret-popover-wrap {
    position: relative;
}
.cai-secret-popover {
    position: fixed;            /* portaled to <body>; left/top/width/max-height set inline at open */
    width: 23.75rem;
    max-height: 20rem;
    background: var(--cai-card);
    border: 0.0625rem solid var(--cai-rule);
    border-radius: 0.5rem;
    box-shadow: var(--cai-shadow-sm), 0 0.5rem 1.5rem rgba(15,17,21,0.10);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cai-secret-popover-search {
    padding: 0.5rem 0.75rem;
    border-bottom: 0.0625rem solid var(--cai-rule);
}
.cai-secret-popover-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.cai-secret-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5625rem 0.875rem;
    cursor: pointer;
    border-bottom: 0.0625rem solid var(--cai-rule);
    transition: background 0.1s;
}
.cai-secret-option:last-child {
    border-bottom: none;
}
.cai-secret-option:hover,
.cai-secret-option--active {
    background: #E6F5EE;
}
.cai-secret-option-key {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.78125rem;
    color: var(--cai-body);
    font-weight: 500;
}
.cai-secret-option-desc {
    font-size: 0.71875rem;
    color: var(--cai-muted);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cai-secret-option-mask {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.6875rem;
    color: var(--cai-faint);
    flex-shrink: 0;
}
.cai-secret-popover-empty {
    padding: 2rem 0.875rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--cai-muted);
}
.cai-secret-popover-footer {
    padding: 0.5rem 0.875rem;
    border-top: 0.0625rem solid var(--cai-rule);
}
.cai-secret-popover-footer a {
    font-size: 0.78125rem;
    color: var(--cai-ok);
    text-decoration: none;
}
.cai-secret-popover-footer a:hover {
    text-decoration: underline;
}

/* ── ConnectionTestStrip ──────────────────────────────────────────────── */

.cai-test-strip {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border-radius: 0.5rem;
    border: 0.0625rem solid var(--cai-rule);
    background: var(--cai-inset);
}
.cai-test-strip--testing {
    background: #E8F0FE;
    border-color: #BFCFF8;
}
.cai-test-strip--success {
    background: var(--cai-card);
    border-color: var(--cai-rule);
}
.cai-test-strip--failure {
    background: #FCE9E7;
    border-color: #F5BDB9;
}
.cai-test-strip-icon {
    font-size: 1.125rem;
    flex-shrink: 0;
    line-height: 1.3;
}
.cai-test-strip-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.cai-test-strip-headline {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cai-body);
}
.cai-test-strip--testing .cai-test-strip-headline { color: #2F6FE8; }
.cai-test-strip--success .cai-test-strip-headline { color: var(--cai-ok); }
.cai-test-strip--failure .cai-test-strip-headline { color: var(--cai-err); }
.cai-test-strip-sub {
    font-size: 0.78125rem;
    color: var(--cai-muted);
}
.cai-test-strip-facts {
    margin-top: 0.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem 1.25rem;
}
.cai-test-strip-fact-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cai-muted);
}
.cai-test-strip-fact-value {
    font-size: 0.8125rem;
    color: var(--cai-body);
}
.cai-test-strip-fact-value--mono {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.75rem;
}
.cai-test-strip-detail {
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--cai-inset);
    border-radius: 0.25rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.71875rem;
    color: var(--cai-body);
    white-space: pre-wrap;
    word-break: break-all;
}
.cai-test-strip-footer {
    margin-top: 0.625rem;
}
.cai-test-strip-action {
    flex-shrink: 0;
    align-self: center;
}

/* ── Sources List (Wave 5c) ───────────────────────────────────────────── */

.cai-sources-page {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.75rem;
    flex: 1 0 auto;
}

/* Page header */
.cai-sources-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.cai-sources-page-title-wrap {
    flex: 1;
}
.cai-sources-page-title {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--cai-ink);
    letter-spacing: -0.015em;
    margin: 0 0 0.25rem;
}
.cai-sources-page-subtitle {
    font-size: 0.8125rem;
    color: var(--cai-muted);
    line-height: 1.55;
    max-width: 40rem;
}
.cai-sources-page-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.cai-sources-refresh-btn {
    width: 2.125rem;
    height: 2.125rem;
    border: 0.0625rem solid var(--cai-rule-strong);
    border-radius: 0.375rem;
    background: var(--cai-card);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cai-muted);
    font-size: 0.9375rem;
    transition: background 0.1s;
}
.cai-sources-refresh-btn:hover  { background: var(--cai-hover); }
.cai-sources-refresh-btn:disabled { opacity: 0.5; cursor: default; }

/* Toolbar */
.cai-sources-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.cai-sources-search-wrap {
    margin-left: auto;
    min-width: 13.75rem;
}
.cai-sources-table-slot {
    min-height: var(--cai-sources-table-min-h, 0);
}

/* Group header cells */
.cai-group-header-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}
.cai-group-source-count {
    font-size: 0.78125rem;
    color: var(--cai-muted);
}

/* Column header */
.cai-sources-col-header {
    display: grid;
    gap: 0.75rem;
    padding: 0.5rem 1.25rem;
    border-bottom: 0.0625rem solid var(--cai-rule);
    font-size: 0.65625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cai-muted);
    background: var(--cai-card);
}

/* Row cells */
.cai-sources-cell-source {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
}
.cai-sources-cell-source-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cai-sources-name {
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--cai-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cai-sources-vendor {
    font-size: 0.71875rem;
    color: var(--cai-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cai-sources-endpoint {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.75rem;
    color: var(--cai-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cai-sources-last-conn {
    font-size: 0.78125rem;
    color: var(--cai-body);
}

/* State overlays */
.cai-sources-state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.25rem;
    text-align: center;
}
.cai-sources-state-icon {
    font-size: 2.25rem;
    color: var(--cai-faint);
    margin-bottom: 0.5rem;
}
.cai-sources-state-label {
    font-size: 0.875rem;
    color: var(--cai-muted);
}

/* ── Sources Editor (Wave 5d) ─────────────────────────────────────────── */

.cai-source-editor {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Identity card */
.cai-source-identity-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.125rem;
    padding: 1.25rem;
    background: var(--cai-card);
    border: 0.0625rem solid var(--cai-rule);
    border-radius: 0.5rem;
}

/* Editor cards (connection/schedule sub-cards) */
.cai-editor-card {
    background: var(--cai-card);
    border: 0.0625rem solid var(--cai-rule);
    border-radius: 0.5rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cai-editor-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cai-ink);
}
.cai-editor-card-subtitle {
    font-size: 0.78125rem;
    color: var(--cai-muted);
    margin-top: -0.75rem;
}

/* Form layout helpers */
.cai-form-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cai-form-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.25rem;
}
.cai-form-section-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cai-muted);
    padding-top: 0.25rem;
}
.cai-form-section-hint {
    font-size: 0.75rem;
    color: var(--cai-muted);
    margin-top: -0.5rem;
}
.cai-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}
.cai-form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}
.cai-form-grid-auth {
    display: grid;
    grid-template-columns: 13.75rem 1fr;
    gap: 1rem;
    align-items: start;
}
.cai-auth-sub-form { display: flex; flex-direction: column; gap: 1rem; max-width: 32.5rem; }
.cai-auth-method   { max-width: 32.5rem; }
/* Spectrum TextField/Picker wrap their native <sp-*> element inside a <div class="sp-input">,
   and the native control does not stretch on its own. Force every auth control to fill the 32.5rem
   column so the Method picker, text fields, and secret pickers all share one standard width. */
.cai-auth-method .sp-input,
.cai-auth-sub-form .sp-input { width: 100%; }
/* Method picker is a Spectrum <sp-picker> inside a .sp-input wrapper. */
.cai-auth-method .sp-input sp-picker,
.cai-auth-sub-form .sp-input sp-picker { width: 100%; box-sizing: border-box; }
/* Text fields (Header name, Username, Token URL, Client ID, Scope) are <nph-input> custom
   elements whose shadow DOM caps the inner input at --input-max-width (28.75rem) regardless of
   the host width. CSS custom properties inherit through the shadow boundary, so overriding
   --input-max-width here lifts that cap and lets the field fill the 32.5rem column, matching the
   Method picker and secret pickers. */
.cai-auth-sub-form nph-input { width: 100%; --input-max-width: 100%; }
/* 12-column responsive grid (SQL connection form + container queries) */
.nph-grid12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}
.nph-grid12 > .col-2  { grid-column: span 2; }
.nph-grid12 > .col-3  { grid-column: span 3; }
.nph-grid12 > .col-4  { grid-column: span 4; }
.nph-grid12 > .col-6  { grid-column: span 6; }
.nph-grid12 > .col-8  { grid-column: span 8; }
.nph-grid12 > .col-12 { grid-column: span 12; }

/* Container query context — set on the card that contains the grid */
.nph-page-cq { container-type: inline-size; container-name: page; }

@container page (max-width: 53.75rem) {
    .nph-grid12 > .col-2,
    .nph-grid12 > .col-3,
    .nph-grid12 > .col-4 { grid-column: span 6; }
    .nph-grid12 > .col-8 { grid-column: span 12; }
}
@container page (max-width: 35rem) {
    .nph-grid12 > * { grid-column: span 12 !important; }
}
@supports not (container-type: inline-size) {
    @media (max-width: 53.75rem) {
        .nph-grid12 > .col-2,
        .nph-grid12 > .col-3,
        .nph-grid12 > .col-4 { grid-column: span 6; }
        .nph-grid12 > .col-8 { grid-column: span 12; }
    }
    @media (max-width: 35rem) {
        .nph-grid12 > * { grid-column: span 12 !important; }
    }
}

/* 2-column layout for SQL connection form */
.cai-sql-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; align-items: start; }
.cai-sql-form-col { display: flex; flex-direction: column; gap: 1rem; }

/* Section divider inside a card (Server / Credentials / Advanced) */
.cai-form-section-divider {
    padding-top: 0.25rem;
    border-top: 0.0625rem dashed var(--cai-rule, #e5e7eb);
}

/* Field label + control wrapper */
.cai-field {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
}
.cai-field-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cai-body);
}
.cai-field-label--required::after {
    content: " *";
    color: var(--cai-err);
}
/* Core Configuration page roots: space stacked section cards like
   .admin-project-surface (Create Project) does. */
.core-config-study-identity,
.core-config-standards-terminology,
.core-config-compound-classification,
.core-config-treatment-arm,
.core-config-population-set,
.core-config-statistical-analysis {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* Required marker for UiSupport.field labels (core-config picker/toggle rows). */
.wc-ui-label.wc-ui-label--required::after {
    content: " *";
    color: var(--cai-err);
}
/* Study Scope region/country checklists (was inline styles). */
.core-config-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-height: 16.25rem;
    overflow-y: auto;
}
.cai-field-hint {
    font-size: 0.71875rem;
    color: var(--cai-muted);
    margin-top: 0.1875rem;
}
.cai-field-hint--warn {
    color: var(--cai-warn);
}
.admin-secrets-tab-body {
    padding: 0.75rem 0.25rem;
}
/* EmbeddedGridPanel is height:100%, so the host needs a concrete height or AG Grid rows
   collapse to 0 (header/footer still render). */
.admin-secrets-usage-grid,
.admin-secrets-history-grid {
    min-height: 20rem;
    height: 20rem;
}
.cai-field-error {
    font-size: 0.71875rem;
    color: var(--cai-err);
    margin-top: 0.1875rem;
}
.cai-field-action-row { display: flex; align-items: center; gap: 0.5rem; }
.cai-field-action-row > :first-child { flex: 1 1 auto; min-width: 0; }

/* Segmented toggle (Password | SSH key) */
.cai-segmented {
    display: inline-flex;
    border: 0.0625rem solid var(--cai-rule-strong);
    border-radius: 0.375rem;
    overflow: hidden;
}
.cai-segmented-btn {
    padding: 0.375rem 0.875rem;
    font-size: 0.78125rem;
    border: none;
    background: var(--cai-card);
    color: var(--cai-muted);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.cai-segmented-btn + .cai-segmented-btn {
    border-left: 0.0625rem solid var(--cai-rule-strong);
}
.cai-segmented-btn--active {
    background: var(--cai-inset);
    color: var(--cai-ink);
    font-weight: 600;
}

/* Banners */
.cai-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.375rem;
    font-size: 0.78125rem;
    border: 0.0625rem solid;
}
.cai-banner--warn {
    background: #FEF9E7;
    border-color: #F9C846;
    color: #92400E;
}
.cai-banner--err {
    background: #FCE9E7;
    border-color: #F5BDB9;
    color: var(--cai-err);
}
.cai-banner--info {
    background: #E8F0FE;
    border-color: #BFCFF8;
    color: #1E5FD0;
}
.cai-banner-icon {
    flex-shrink: 0;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Datasets placeholder */
.cai-datasets-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1.25rem;
    text-align: center;
    gap: 0.5rem;
}
.cai-datasets-placeholder-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}
.cai-datasets-placeholder-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--cai-ink);
}
.cai-datasets-placeholder-body {
    font-size: 0.8125rem;
    color: var(--cai-muted);
    max-width: 27.5rem;
    line-height: 1.5;
}

/* SFTP datasets section */
.cai-datasets-sftp { display: flex; flex-direction: column; gap: 0.5rem; }
.cai-datasets-sftp-header { padding: 0 0 0.5rem; }
.cai-datasets-sftp-heading-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.cai-datasets-sftp-heading { font-size: 0.8125rem; font-weight: 600; color: var(--cai-label); }
.cai-datasets-sftp-count { font-size: 0.75rem; color: var(--cai-muted); }
.cai-datasets-sftp-subtitle { font-size: 0.75rem; color: var(--cai-muted); }
.cai-datasets-sftp-list { display: flex; flex-direction: column; gap: 0.25rem; }
.cai-datasets-sftp-row { display: grid; grid-template-columns: 1fr 1.75rem; gap: 0.25rem; align-items: center; }
.cai-datasets-sftp-input { width: 100%; padding: 0.3125rem 0.5rem; border: 0.0625rem solid var(--border); border-radius: 0.25rem; font-family: var(--mono-font); font-size: 0.78125rem; background: var(--surface); color: var(--text); }
.cai-datasets-sftp-input:focus { outline: none; border-color: var(--teal); }
.cai-datasets-sftp-remove { width: 1.5rem; height: 1.5rem; border: none; background: none; color: var(--cai-muted); cursor: pointer; border-radius: 0.25rem; font-size: 1rem; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; }
.cai-datasets-sftp-remove:hover { background: var(--surface-hover); color: var(--err); }
.cai-datasets-sftp-add-btn { margin-top: 0.25rem; padding: 0.375rem 0.75rem; border: 0.09375rem dashed var(--border); border-radius: 0.375rem; background: none; color: var(--cai-muted); cursor: pointer; font-size: 0.78125rem; text-align: left; width: 100%; }
.cai-datasets-sftp-add-btn:hover { border-color: var(--teal); color: var(--teal); }

/* SQL IDE datasets section */
.cai-sql-datasets { display: flex; flex-direction: column; gap: 0; width: 100%; overflow: hidden; }
.cai-sql-datasets-split { display: grid; grid-template-columns: 16.25rem 1fr; gap: 1rem; align-items: start; min-width: 0; overflow: hidden; }

/* Query Editor header strip — grid mirrors the split pane so right col aligns with Monaco */
.cai-query-header-strip { display: grid; grid-template-columns: 16.25rem 1fr; gap: 1rem; align-items: center; padding: 0.625rem 0 0.75rem; }
.cai-query-header-left { display: flex; align-items: center; gap: 0.5rem; }
.cai-query-header-label { font-size: 0.78125rem; font-weight: 600; color: var(--cai-muted); }
.cai-query-header-right { display: flex; align-items: center; gap: 0.5rem; }
.cai-query-name-label { font-size: 0.78125rem; font-weight: 500; color: var(--text); white-space: nowrap; }
.cai-query-header-right nphase-text-field { width: 10rem; min-width: 0; }
.cai-query-status-badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 6.1875rem; font-size: 0.6875rem; font-weight: 600; text-transform: capitalize; }
.cai-query-status-badge--draft    { background: var(--warn-soft, #fffbeb);    color: var(--warn, #d97706); }
.cai-query-status-badge--review   { background: var(--info-soft, #eff6ff);    color: var(--info, #2563eb); }
.cai-query-status-badge--approved { background: var(--tealSoft, #f0fdfa);     color: var(--teal, #0d9488); }
.cai-query-status-badge--archived { background: var(--muted-soft, #f3f4f6);   color: var(--cai-muted, #6b7280); }

/* Saved Queries tab */
.cai-saved-queries { display: flex; flex-direction: column; gap: 0; }
.cai-sq-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0 0.625rem; gap: 0.75rem; }
.cai-sq-filters { display: flex; align-items: center; gap: 0.375rem; }
.cai-sq-filter-pill { padding: 0.25rem 0.75rem; border-radius: 6.1875rem; font-size: 0.75rem; cursor: pointer; border: 0.09375rem solid var(--border); background: var(--surface); color: var(--cai-muted); }
.cai-sq-filter-pill:hover { border-color: var(--teal); color: var(--teal); }
.cai-sq-filter-pill--active { background: var(--tealSoft, #f0fdfa); color: var(--teal, #0d9488); border-color: var(--teal, #0d9488); }
.cai-sq-filter-pill--active:hover { background: var(--tealSoft, #f0fdfa); color: var(--teal, #0d9488); }
.cai-sq-table-header, .cai-sq-row { display: grid; grid-template-columns: 1.8fr 8.75rem 1.4fr 6.875rem 3rem; align-items: center; gap: 0; }
.cai-sq-th { padding: 0.375rem 0.625rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cai-muted); border-bottom: 0.125rem solid var(--border); }
.cai-sq-row { border-bottom: 0.0625rem solid var(--border-muted, #eee); }
.cai-sq-row:hover { background: var(--surface-hover); }
.cai-sq-td { padding: 0.5rem 0.625rem; font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cai-sq-name { font-family: var(--mono-font); font-weight: 500; }
.cai-sq-last-run, .cai-sq-modified { font-size: 0.75rem; color: var(--cai-muted); }
.cai-sq-actions { display: flex; gap: 0.25rem; flex-wrap: nowrap; overflow: visible; }
.cai-sq-delete-btn { color: var(--err, #bf2f2f) !important; }
.cai-sq-delete-btn:hover { background: var(--err-soft, #fef2f2) !important; }
.cai-sq-status-badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 6.1875rem; font-size: 0.6875rem; font-weight: 600; text-transform: capitalize; }
.cai-sq-status-badge--draft    { background: var(--warn-soft, #fffbeb);    color: var(--warn, #d97706); }
.cai-sq-status-badge--review   { background: var(--info-soft, #eff6ff);    color: var(--info, #2563eb); }
.cai-sq-status-badge--approved { background: var(--tealSoft, #f0fdfa);     color: var(--teal, #0d9488); }
.cai-sq-status-badge--archived { background: var(--muted-soft, #f3f4f6);   color: var(--cai-muted, #6b7280); }
.cai-sq-empty { padding: 2rem 0.75rem; text-align: center; font-size: 0.8125rem; color: var(--cai-muted); }
/* Schema browser: flex column so the body scrolls independently */
.cai-schema-browser {
    background: var(--surface-inset, #f8f9fa);
    border-radius: 0.5rem;
    border: 0.0625rem solid var(--border);
    display: flex;
    flex-direction: column;
    max-height: 36.25rem;
    overflow: hidden;
    position: sticky;
    top: 1rem;
}
.cai-schema-browser-header { flex-shrink: 0; padding: 0.625rem 0.75rem 0.5rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cai-muted); border-bottom: 0.0625rem solid var(--border); }
.cai-schema-browser-body { flex: 1; overflow-y: auto; padding: 0.25rem 0; }
.cai-schema-browser-loading, .cai-schema-browser-empty, .cai-schema-browser-error { padding: 0.75rem; font-size: 0.75rem; color: var(--cai-muted); }
.cai-schema-browser-error { color: var(--err); }
.cai-schema-table-row { padding: 0 0 0.25rem; }
.cai-schema-table-label { padding: 0.3125rem 0.75rem; font-size: 0.78125rem; font-family: var(--mono-font); cursor: pointer; user-select: none; color: var(--text); }
.cai-schema-table-label:hover { background: var(--surface-hover); }
.cai-schema-col-container { padding-left: 1rem; }
.cai-schema-col-container--hidden { display: none; }
.cai-schema-col-row { padding: 0.1875rem 0.75rem; font-size: 0.71875rem; font-family: var(--mono-font); color: var(--cai-muted); cursor: pointer; }
.cai-schema-col-row:hover { background: var(--surface-hover); color: var(--text); }
.cai-sql-editor-panel { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; width: 100%; overflow: hidden; padding-right: 1.25rem; }
.cai-sql-editor-mount { border: 0.0625rem solid var(--border); border-radius: 0.375rem; overflow: hidden; width: 100%; }
.cai-preview-grid-wrap { overflow: auto; max-height: 12.5rem; border: 0.0625rem solid var(--border); border-radius: 0.375rem; }
.cai-preview-grid { width: 100%; border-collapse: collapse; font-family: var(--mono-font); font-size: 0.75rem; }
.cai-preview-grid th { padding: 0.3125rem 0.625rem; background: var(--surface-inset, #f8f9fa); border-bottom: 0.125rem solid var(--border); text-align: left; font-weight: 600; white-space: nowrap; }
.cai-preview-grid td { padding: 0.25rem 0.625rem; border-bottom: 0.0625rem solid var(--border-muted, #eee); white-space: nowrap; max-width: 15rem; overflow: hidden; text-overflow: ellipsis; }
.cai-preview-loading { padding: 0.75rem; font-size: 0.75rem; color: var(--cai-muted); }
.cai-preview-error { padding: 0.75rem; font-size: 0.75rem; color: var(--err); }

/* Test strip wrapper inside Connection tab */
.cai-connection-test-wrap {
    margin-top: 0.25rem;
}

.project-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5em;
}

.project-description-card {
    grid-column: 1/4;
}
/* ── Workflow Editor page ─────────────────────────────────────────────────── */
.workflow-editor-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.workflow-editor-page > .wc-structured-panel-content {
    flex: 1;
    min-height: 0;
    padding: 0;
}

.cai-sftp-scan-modal-body { display:flex; flex-direction:column; gap:0.75rem; }
.cai-sftp-scan-modal-host { font-size:0.78125rem; color: var(--cai-muted); }
.cai-sftp-scan-modal-fingerprint {
    font-family: var(--mono-font); font-size:0.78125rem; padding:0.75rem;
    background: var(--surface-hover); border:0.0625rem solid var(--border);
    border-radius:0.375rem; word-break: break-all;
}
.cai-sftp-scan-modal-help { font-size:0.75rem; color: var(--cai-muted); line-height:1.5; }
.cai-sftp-scan-modal-help-code { font-family: var(--mono-font); font-size: inherit; font-style: italic; }

/* ── Modal card — suppress browser focus ring on programmatic focus (tabIndex=-1, card.focus() on open) ── */
.wc-ui-modal-card:focus {
    outline: none;
}

/* ── Profile dialog — card: strip library padding/gap, enable edge-to-edge sections (spec §9.2) ── */
.wc-ui-modal-card:has(.profile-dialog-body) {
    width: min(32.5rem, 100%);
    border-radius: 0.625rem;
    padding: 0;
    gap: 0;
    overflow: hidden;
}

/* ── Profile dialog — header: own padding, bottom border, spec typography ── */
.wc-ui-modal-card:has(.profile-dialog-body) .wc-ui-modal-header {
    padding: 1.375rem 1.5rem 1.25rem;
    border-bottom: 1px solid #dde3ec;
}

.wc-ui-modal-card:has(.profile-dialog-body) .wc-ui-modal-heading {
    gap: 0.1875rem;
}

.wc-ui-modal-card:has(.profile-dialog-body) .wc-ui-modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.005em;
    line-height: normal;
}

.wc-ui-modal-card:has(.profile-dialog-body) .wc-ui-modal-subtitle {
    font-size: 0.84375rem;
    color: #5c6878;
    line-height: 1.5;
}

/* ── Profile dialog — body: collapse library gaps so sections go edge-to-edge ── */
.wc-ui-modal-card:has(.profile-dialog-body) .wc-ui-modal-body,
.wc-ui-modal-card:has(.profile-dialog-body) .wc-ui-modal-body-wrap,
.wc-ui-modal-card:has(.profile-dialog-body) .wc-ui-modal-body-content {
    gap: 0;
}

/* Status element: no reserved height when empty ── */
.wc-ui-modal-card:has(.profile-dialog-body) .wc-ui-status {
    min-height: 0;
}

.wc-ui-modal-card:has(.profile-dialog-body) .wc-ui-status:empty {
    display: none;
}

/* ── Profile dialog — footer: spec padding, background, top border ── */
.wc-ui-modal-card:has(.profile-dialog-body) .wc-ui-modal-footer {
    padding: 1rem 1.5rem;
    background: #fcfcfd;
    border-top: 1px solid #dde3ec;
    gap: 0;
}

/* ── Profile dialog — suppress library dirty border/shift (button state is the indicator) ── */
.wc-ui-modal-body-wrap--dirty .wc-ui-modal-body-content:has(.profile-dialog-body) {
    border-inline-start: none;
    padding-inline-start: 0;
}

/* ── Profile dialog identity strip ─────────────────────────────────────── */
.profile-dialog-body .wc-ui-form {
    gap: 0.5rem;
    padding: 0.625rem 1.5rem 0.5rem;
}

.profile-dialog-identity {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.375rem 1.5rem;
    border-bottom: 1px solid #dde3ec;
    background: #fcfcfd;
}

.profile-dialog-avatar {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a7a65, #1c3152);
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
}

.profile-dialog-id-text {
    min-width: 0;
    flex: 1;
}

.profile-dialog-id-name {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.005em;
    line-height: 1.2;
}

.profile-dialog-id-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.profile-dialog-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.125rem 0.5rem;
    background: #f4f6f9;
    border: 1px solid #dde3ec;
    border-radius: 0.25rem;
    font-size: 0.78125rem;
    color: #5c6878;
    font-weight: 500;
    white-space: nowrap;
}

.profile-dialog-pill-username {
    color: #111827;
    font-weight: 500;
}

/* ── Change password aux row ────────────────────────────────────────────── */
.profile-dialog-change-password {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.875rem 1.5rem 1.125rem;
    margin-top: 0.25rem;
    font-size: 0.84375rem;
    color: #5c6878;
    border-top: 1px solid #dde3ec;
}

.profile-dialog-change-password-text {
    flex-shrink: 0;
}

.profile-dialog-change-password-link {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.84375rem;
    color: #14967d;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.profile-dialog-change-password-link:hover {
    text-decoration: underline;
}

/* ── Form: TextField custom properties (label 8.125rem, input max 21.25rem, row padding 0.75rem) ── */
.profile-dialog-body nph-text-field {
    --label-width: 8.125rem;
    --input-max-width: 21.25rem;
    padding: 0.75rem 0;
}

/* ── Default Application row — light-DOM .wc-ui-field override ──
   Match the nph-input rows above: same 10.5rem label column (the input
   component's default --label-width) and 1rem label-to-control gap. */
.profile-dialog-body .wc-ui-field { padding: 0; gap: 1rem; }
.profile-dialog-body .wc-ui-label { width: 10.5rem; min-width: 10.5rem; }

/* ── Lock icon in aux row ── */
.profile-dialog-lock-icon { color: #5c6878; flex-shrink: 0; display: block; }

/* ── Close button: muted grey icon (spec §9.6), not teal ── */
.wc-ui-modal-card:has(.profile-dialog-body) .wc-ui-modal-controls nph-button {
    --nwc-accent: #9ca3af;
    --nwc-accent-subtle: rgba(0, 0, 0, 0.06);
    --nwc-accent-subtle-strong: rgba(0, 0, 0, 0.1);
    --nwc-accent-shadow: none;
    width: 1.75rem;
    height: 1.75rem;
}

/* ── Footer Cancel button (variant=ghost set by JS): color #5c6878, no teal ── */
.wc-ui-modal-card:has(.profile-dialog-body) .wc-ui-modal-footer nph-button:first-child {
    --nwc-accent: #5c6878;
    --nwc-accent-subtle: rgba(0, 0, 0, 0.04);
    --nwc-accent-shadow: none;
}

/* ── About Dialog ────────────────────────────────────────────────────────── */

.about-modal .wc-ui-modal-card {
    width: min(36rem, 100%);
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    padding: 0;
    gap: 0;
    background: #fff;
    outline: none;
}

.about-modal .wc-ui-modal-header {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    background: transparent;
    display: flex;
    padding: 0;
    gap: 0;
}

.about-modal .wc-ui-modal-heading {
    display: none;
}

.about-modal .wc-ui-modal-header nph-button {
    --nwc-accent: rgba(255, 255, 255, 0.6);
    --nwc-accent-subtle: rgba(255, 255, 255, 0.12);
    --nwc-accent-shadow: none;

    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

.about-modal .wc-ui-modal-header nph-button:hover {
    --nwc-accent: #fff;
    transform: none;
}

.about-modal .wc-ui-modal-header nph-button:focus-visible {
    outline: 0.125rem solid rgba(255, 255, 255, 0.5);
    outline-offset: 0.125rem;
}

.about-modal .wc-ui-modal-body,
.about-modal .wc-ui-modal-body-wrap,
.about-modal .wc-ui-modal-body-content {
    padding: 0;
    margin: 0;
}

.about-modal .wc-ui-modal-footer {
    padding: 0;
    border: none;
    background: transparent;
}

/* Hero panel */
.about-dialog-hero {
    background: linear-gradient(135deg, #0d1b2a 0%, #14342f 100%);
    padding: 1.375rem 1.5rem 1.25rem;
    position: relative;
    overflow: hidden;
}

.about-dialog-hero::before {
    content: "";
    position: absolute;
    top: -2.5rem;
    right: -2.5rem;
    width: 12.5rem;
    height: 12.5rem;
    background: radial-gradient(circle, rgba(26,188,156,0.18) 0%, transparent 70%);
    pointer-events: none;
}

/* Brand lockup */
.about-dialog-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
}

.about-dialog-brand-mark {
    width: 2.25rem;
    height: 2.25rem;
    background: var(--nwc-accent);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.about-dialog-brand-mark img {
    width: 1.375rem;
    height: 1.375rem;
    display: block;
    filter: brightness(0) invert(1);
}

.about-dialog-brand-name {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.about-dialog-brand-name-text {
    display: flex;
    align-items: baseline;
    gap: 0;
    height: 1.5rem;
}

.about-dialog-brand-name-main {
    font-size: 1.1875rem;
    font-weight: 700;
    color: white;
}

.about-dialog-ai-suffix {
    color: var(--nwc-accent);
    font-size: 1.1875rem;
    font-weight: 700;
}

.about-dialog-brand-org {
    font-size: 0.75rem;
    color: var(--nwc-text-muted);
    font-weight: 300;
}

/* Product name and tagline */
.about-dialog-product-name {
    font-size: 1.375rem;
    font-weight: 600;
    color: white;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 0.25rem;
}

.about-dialog-tagline {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.65);
    margin: 0 0 0.75rem;
}

/* Version pill */
.about-dialog-version-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.5625rem;
    background: var(--nwc-accent-subtle);
    border: 0.0625rem solid rgba(26,188,156,0.3);
    border-radius: 62.4375rem;
    color: var(--nwc-accent);
    line-height: 1;
}

.about-dialog-version-pill > span {
    font-family: "DM Mono", "Fira Mono", monospace;
    font-size: 0.71875rem;
    font-weight: 500;
}

.about-dialog-version-dot {
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: var(--nwc-accent);
    box-shadow: var(--nwc-accent-shadow);
    flex-shrink: 0;
}

.about-modal .wc-ui-status {
    display: none;
}

/* Body - build information */
.about-dialog-body {
    padding: 1rem 1.5rem;
}

.about-dialog-section-title {
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nwc-text-muted);
    margin-bottom: 0.5rem;
}

.about-dialog-rows {
    display: flex;
    flex-direction: column;
}

.about-dialog-row {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 0.0625rem solid #DDE3EC;
}

.about-dialog-row:last-child {
    border-bottom: none;
}

.about-dialog-row-key {
    flex: 0 0 6.875rem;
    text-align: right;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--nwc-text-form-labels);
    padding-right: 0.75rem;
    box-sizing: border-box;
}

.about-dialog-row-value {
    flex: 1;
    min-width: 0;
    font-size: 0.78125rem;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.about-dialog-value-mono {
    font-family: "DM Mono", "Fira Mono", monospace;
    font-size: 1rem;
}

.about-dialog-value-env {
    font-family: inherit;
    font-size: 0.8125rem;
}

.about-dialog-value-muted {
    color: var(--nwc-text-muted);
}

.about-dialog-row-copy {
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 0.25rem;
    color: var(--nwc-text-muted);
    padding: 0;
    flex-shrink: 0;
}

.about-dialog-row-copy:hover {
    background: rgba(26,188,156,0.06);
    color: var(--nwc-accent);
}

.about-dialog-row-copy:focus-visible {
    opacity: 1;
    outline: 0.125rem solid var(--nwc-accent);
    outline-offset: 0.125rem;
}

/* Footer */
.about-dialog-footer {
    padding: 0.75rem 1.5rem;
    border-top: 0.0625rem solid #DDE3EC;
    background: #FCFCFD;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.about-dialog-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.about-dialog-links .about-dialog-support-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    border: none;
    background: transparent;
    color: var(--nwc-text-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}

.about-dialog-links .about-dialog-support-link * {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.about-dialog-links .about-dialog-support-link:hover {
    background: var(--nwc-accent-subtle);
    color: var(--nwc-accent);
}

.about-dialog-links .about-dialog-support-link.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.about-dialog-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


/* Legal footer */
.about-dialog-legal {
    padding: 0.5rem 1.5rem;
    background: #F4F6F9;
    border-top: 0.0625rem solid #DDE3EC;
    text-align: center;
    font-size: 0.6875rem;
    color: #9CA3AF;
    line-height: 1.4;
}

.audit-trail-modal {
    --header-padding-y-bottom: 0;
    --header-border-bottom: none;
}