/* Clauses Page Styles - Matches Templates Page Design */

.clauses-page {
    max-width: none;
    width: 100%;
    min-width: 1200px;
    outline: none;
}

/* Page Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.page-title h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.page-title p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

.page-actions {
    display: flex;
    gap: 12px;
}

/* Status Tabs */
.status-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-tertiary);
    padding: 4px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.status-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.status-tab:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.5);
}

.status-tab.active {
    background: white;
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tab-count {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--border-primary);
    color: var(--text-muted);
}

.status-tab.active .tab-count {
    background: var(--color-primary-bg);
    color: var(--color-primary);
}

.tab-count.highlight {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    font-weight: 600;
}

/* My Approvals Tab */
.status-tab.my-approvals {
    margin-left: auto;
    border-left: 1px solid var(--text-faint);
    padding-left: 20px;
}

.status-tab.my-approvals i {
    font-size: 14px;
}

.status-tab.my-approvals.active {
    background: linear-gradient(135deg, var(--color-primary-bg), #ede9fe);
    color: #4f46e5;
}

.status-tab.my-approvals.active .tab-count {
    background: #4f46e5;
    color: white;
}

.status-tab.my-approvals .tab-count.highlight {
    background: var(--color-danger);
    color: white;
    animation: pulse-badge-initial 0.6s ease-out 2, pulse-badge-subtle 2s ease-in-out 1.2s infinite;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
}

/* Large initial pulse - plays 2 times on page load */
@keyframes pulse-badge-initial {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.8);
    }
    50% {
        transform: scale(1.4);
        box-shadow: 0 0 0 12px rgba(220, 38, 38, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    }
}

/* Subtle continuous pulse - plays after initial animation */
@keyframes pulse-badge-subtle {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0);
    }
}

/* Filters Bar */
.filters-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 16px;
}

.filters-left {
    display: flex;
    gap: 12px;
}

.filters-right {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
}

.filter-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: white;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
}

.filter-dropdown i {
    color: var(--text-placeholder);
    font-size: 14px;
}

.filter-dropdown select {
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    padding-right: 20px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M2.5 4.5l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
}

.filter-dropdown select:focus {
    outline: none;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: white;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    min-width: 264px;
}

.search-box i {
    color: var(--text-placeholder);
    font-size: 14px;
}

.search-box input {
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--text-secondary);
    width: 100%;
    outline: none;
}

.search-box input::placeholder {
    color: var(--text-placeholder);
}

/* Clauses Table */
.clauses-table {
    background: white;
    border-radius: 16px;
    border: 1px solid var(--border-primary);
    overflow: visible;
    min-width: 1100px;
    width: 100%;
}

.clauses-page .table-header {
    display: grid;
    grid-template-columns: 48px minmax(280px, 1fr) 140px 110px 110px 80px 110px 120px;
    padding: 14px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-radius: 16px 16px 0 0;
    gap: 12px;
    white-space: nowrap;
}

.clauses-page .clause-row {
    display: grid;
    grid-template-columns: 48px minmax(280px, 1fr) 140px 110px 110px 80px 110px 120px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--bg-tertiary);
    align-items: center;
    border-left: 4px solid transparent;
    transition: background 0.2s ease, border-left-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    gap: 12px;
}

.clause-row:hover {
    background: var(--bg-secondary);
    border-left-color: var(--color-warning);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    z-index: 1;
}

.clause-row.selected {
    background: var(--color-primary-bg-subtle);
}

/* Checkbox */
.checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid var(--text-faint);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.checkbox:hover {
    border-color: var(--text-placeholder);
}

.checkbox.checked {
    background: var(--color-primary);
    border-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M10 3L4.5 8.5 2 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Clause Info */
.clause-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.clause-name {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.clause-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clause-name-link {
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s;
}

.clause-name-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.version-badge {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--border-primary);
    color: var(--text-muted);
    border-radius: 4px;
    font-weight: 500;
}

.clause-description {
    font-size: 13px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clause-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.tag {
    font-size: 11px;
    padding: 2px 8px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border-radius: 4px;
}

.tag.more {
    background: var(--border-primary);
}

/* Practice Area Badges */
.practice-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.practice-badge.general {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.practice-badge.corporate {
    background: var(--color-primary-bg);
    color: var(--color-info-text);
}

.practice-badge.litigation {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.practice-badge.realestate {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.practice-badge.ip {
    /* IP was purple — swapped to a neutral teal/cyan tone so the pill stays
       distinct from Corporate (blue) while honouring the no-purple rule. */
    background: #cffafe;
    color: #155e75;
}

.practice-badge.employment {
    background: #fce7f3;
    color: #9d174d;
}

.practice-badge.tax {
    background: var(--color-danger-bg);
    color: var(--color-danger-dark);
}

.practice-badge.family {
    background: #ffedd5;
    color: #9a3412;
}

.practice-badge.more {
    background: var(--border-primary);
    color: var(--text-muted);
    font-size: 11px;
}

/* Multiple Practice Badges Container */
.practice-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Practice Area Multi-select (Tags-style) */
.practice-area-select-container {
    position: relative;
}

.practice-area-select {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 46px;
    padding: 8px 40px 8px 12px;
    background: #fafafa;
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.practice-area-select:hover {
    border-color: #c7d2fe;
    background: #ffffff;
}

.practice-area-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 12px;
    /* Engage primary-blue gradient — was indigo (#6366f1 → #4f46e5),
       which read as purple. Now uses the same token as the page's
       primary buttons. */
    background: var(--color-primary-gradient);
    color: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.025em;
    box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
    transition: all 0.15s ease;
}

.practice-area-tag:hover {
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 100%);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
    transform: translateY(-1px);
}

.practice-area-tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: all 0.15s ease;
    font-size: 10px;
}

.practice-area-tag-remove:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.1);
}

.practice-area-placeholder {
    color: var(--text-placeholder);
    font-size: 14px;
    font-style: italic;
}

.practice-area-dropdown-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-placeholder);
    font-size: 14px;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.practice-area-select-container:has(.practice-area-dropdown) .practice-area-dropdown-icon {
    transform: translateY(-50%) rotate(180deg);
}

.practice-area-dropdown-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

.practice-area-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: white;
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    padding: 6px;
}

.practice-area-dropdown-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    border-radius: 8px;
    user-select: none;
    transition: all 0.15s ease;
}

.practice-area-dropdown-item:hover {
    background: #f5f3ff;
    color: #4f46e5;
}

.practice-area-dropdown-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #6366f1;
    cursor: pointer;
    margin: 0;
    pointer-events: none;
    border-radius: 4px;
}

.practice-area-dropdown-item input[type="checkbox"]:checked + span {
    color: #4f46e5;
    font-weight: 500;
}

.practice-area-dropdown-item span {
    flex: 1;
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    width: fit-content;
}

.status-badge .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-badge.draft {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.status-badge.draft .status-dot {
    background: var(--text-placeholder);
}

.status-badge.pending {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.status-badge.pending .status-dot {
    background: var(--color-warning);
}

.status-badge.approved {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.status-badge.approved .status-dot {
    background: var(--color-success-light);
}

.status-badge.rejected {
    background: var(--color-danger-bg);
    color: var(--color-danger-dark);
}

.status-badge.rejected .status-dot {
    background: var(--color-danger);
}

/* Source Badges */
.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

.source-badge i {
    font-size: 12px;
}

.source-badge.manual {
    color: var(--text-muted);
}

.source-badge.engage {
    color: var(--color-purple);
    font-weight: 500;
}

.source-badge.document {
    color: var(--color-purple);
}

.source-badge.ai {
    color: var(--color-success);
}

/* Usage Count */
.col-usage {
    text-align: center;
}

.usage-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 4px 10px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
}

.usage-count.has-usage {
    background: var(--color-primary-bg);
    color: var(--color-info-text);
}

/* Date Cell */
.date-cell {
    font-size: 13px;
    color: var(--text-secondary);
}

.date-cell .time {
    font-size: 11px;
    color: var(--text-placeholder);
}

/* Actions */
.action-dropdown {
    position: relative;
}

.btn-action-menu {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: white;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.btn-action-menu:hover {
    background: var(--bg-secondary);
    border-color: var(--text-faint);
}

.action-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.action-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    min-width: 160px;
    z-index: 100;
    overflow: hidden;
}

.action-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.action-menu-item:hover {
    background: var(--bg-tertiary);
}

.action-menu-item i {
    font-size: 14px;
    color: var(--text-muted);
}

.action-menu-item.success {
    color: var(--color-success);
}

.action-menu-item.success i {
    color: var(--color-success);
}

.action-menu-item.danger {
    color: var(--color-danger);
}

.action-menu-item.danger i {
    color: var(--color-danger);
}

.action-menu-divider {
    height: 1px;
    background: var(--border-primary);
    margin: 4px 0;
}

/* Table Footer */
.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-top: 1px solid var(--border-primary);
}

.pagination-info {
    font-size: 13px;
    color: var(--text-muted);
}

.pagination {
    display: flex;
    gap: 4px;
}

.page-btn {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: white;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}

.page-btn:hover:not(:disabled) {
    background: var(--bg-tertiary);
    border-color: var(--text-faint);
}

.page-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-ellipsis {
    display: flex;
    align-items: center;
    padding: 0 8px;
    color: var(--text-placeholder);
}

/* Quick Actions Panel */
.quick-actions {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: #1f2937;
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    z-index: 100;
}

.selected-count {
    font-size: 14px;
    color: white;
    font-weight: 500;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
}

.quick-action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.empty-state i {
    font-size: 48px;
    color: var(--text-faint);
    margin-bottom: 16px;
}

.empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* Loading */
.loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
}

/* Modal Styles */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 1001;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
}

.modal.show {
    display: block;
}

.modal.modal-lg {
    max-width: 700px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-primary);
}

.modal-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s;
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(90vh - 140px);
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-secondary);
}

/* Compact Confirmation Modal (approve/reject style) */
.modal.modal-confirm {
    width: auto;
    max-width: 340px;
    text-align: center;
    padding: 24px 24px 20px;
    border-radius: 12px;
}

.modal-confirm-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 18px;
}

.modal-confirm-icon.success {
    background: var(--color-success-bg, #dcfce7);
    color: var(--color-success-text, #166534);
}

.modal-confirm-icon.danger {
    background: var(--color-danger-bg-subtle, #fef2f2);
    color: var(--color-danger, #dc2626);
}

.modal-confirm-body h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.modal-confirm-body p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
}

.modal-confirm-body p strong {
    color: var(--text-primary);
}

.modal-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.modal-confirm-actions .btn {
    padding: 8px 20px;
    font-size: 13px;
}

/* Form Elements */
.form-group {
    margin-bottom: 20px;
}

.form-row {
    display: flex;
    gap: 16px;
}

.form-row .form-group {
    flex: 1;
}

.form-row .form-group.flex-1 {
    flex: 1;
}

.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.form-label .required {
    color: var(--color-danger);
}

.form-input,
.form-select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--text-faint);
    border-radius: 8px;
    /* Without this, <textarea class="form-input"> (Description) falls back to the browser's
       default monospace font while <input> fields inherit the app font — inherit keeps them matched. */
    font-family: inherit;
    font-size: 14px;
    color: var(--text-secondary);
    transition: border-color 0.15s;
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-value {
    font-size: 14px;
    color: var(--text-secondary);
    padding: 8px 0;
}

.form-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

textarea.form-input {
    resize: vertical;
    min-height: 80px;
}

.clause-content-editor {
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
}

.clause-content-preview {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 15px;
    line-height: 1.8;
    padding: 24px;
    background: #ffffff;
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    white-space: pre-wrap;
    max-height: 400px;
    overflow-y: auto;
    color: #1f2937;
    letter-spacing: 0.01em;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}

.clause-content-preview .placeholder-highlight {
    display: inline;
    background: linear-gradient(135deg, var(--color-primary-bg) 0%, #e0e7ff 100%);
    color: var(--color-info-text);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #bfdbfe;
}

/* Tags Input */
.tags-input-container {
    margin-bottom: 4px;
}

.tags-input {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--text-faint);
    border-radius: 8px;
    min-height: 42px;
    align-items: center;
}

.tags-input:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.tag-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--border-primary);
    border-radius: 4px;
    font-size: 13px;
    color: var(--text-secondary);
}

.tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
}

.tag-remove:hover {
    color: var(--color-danger);
}

.tag-input-field {
    flex: 1;
    min-width: 100px;
    border: none;
    outline: none;
    font-size: 14px;
    padding: 4px 0;
}

.tags-display {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Alerts */
.alert-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--color-danger-bg-subtle);
    border: 1px solid var(--color-danger-border);
    border-radius: 8px;
    color: var(--color-danger-dark);
    font-size: 14px;
}

.alert-success {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    color: var(--color-success-text);
    font-size: 14px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.warning-text {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-warning-text);
    font-size: 14px;
}

.validation-error {
    display: block;
    color: var(--color-danger);
    font-size: 12px;
    margin-top: 4px;
}

/* Buttons — see design-tokens.css for canonical button rules. */

/* Spinner */
.spinner-border {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 2px;
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

/* Version History Modal */
.modal.modal-xl {
    width: 95%;
    max-width: 1462px;
}

.version-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.version-history-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.15s;
}

.version-history-item:hover {
    border-color: var(--text-faint);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.version-history-item.active-version {
    background: var(--color-primary-bg-subtle);
    border-color: #93c5fd;
}

.version-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.version-number {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-primary);
}

.active-badge {
    background: var(--color-primary);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
}

.version-details {
    margin-bottom: 12px;
}

.version-meta {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.version-meta i {
    margin-right: 4px;
}

.version-approval {
    font-size: 12px;
    color: var(--color-success);
    margin-bottom: 8px;
}

.version-preview {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 10px 12px;
    background: white;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.version-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border-primary);
}

/* .btn-sm modifiers consolidated into design-tokens.css. The .btn-sm.btn-outline
   filter pill variant (used in the status filter row) is kept page-scoped below. */
.btn-sm.btn-outline {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--text-faint);
}

.btn-sm.btn-outline:hover {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.btn-sm.btn-outline.active {
    background: var(--color-warning-bg);
    border-color: #fcd34d;
    color: var(--color-warning-text);
}

/* Version Comparison Modal */
.comparison-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 24px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.comparison-version {
    text-align: center;
}

.version-label {
    display: block;
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
}

.version-date {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.comparison-arrow {
    color: var(--text-placeholder);
    font-size: 20px;
}

.comparison-summary {
    margin-bottom: 24px;
}

.comparison-summary h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.change-indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.change-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.no-changes {
    font-size: 14px;
    color: var(--text-muted);
    font-style: italic;
}

.comparison-section {
    margin-bottom: 24px;
}

.comparison-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.clauses-page .comparison-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.comparison-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    overflow: hidden;
}

.panel-header {
    padding: 10px 14px;
    background: var(--border-primary);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

.panel-content {
    padding: 14px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: pre-wrap;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    max-height: 400px;
    overflow-y: auto;
}

.text-muted {
    color: var(--text-muted);
    font-style: italic;
}

/* Expandable Row Styles */
.expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s;
}

.expand-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.clause-row.has-child {
    border-left: 3px solid #fcd34d;
}

.draft-indicator {
    font-size: 10px;
    padding: 2px 8px;
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border-radius: 4px;
    font-weight: 500;
    margin-left: 8px;
}

/* Child Row Styles */
.clause-row.child-row {
    background: #fefce8;
    border-left: 3px solid #fcd34d;
    padding-left: 24px;
}

.clause-row.child-row:hover {
    background: #fef9c3;
}

.clause-row.child-row.loading {
    padding: 16px;
}

.child-indicator {
    width: 16px;
    height: 16px;
    border-left: 2px solid var(--text-faint);
    border-bottom: 2px solid var(--text-faint);
    border-radius: 0 0 0 4px;
    margin-left: 4px;
}

.version-badge.draft {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

/* Rich Text Editor Styles */
.clause-rich-editor {
    border: 1px solid var(--text-faint);
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;   /* white "document" on the gray canvas (see .clause-editor-center) */
    /* Flex column so the contenteditable inside can flex:1 and fill the
       remaining height of its parent form-group. */
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.clause-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-primary);
}

.toolbar-group {
    display: flex;
    gap: 2px;
    padding-right: 8px;
    border-right: 1px solid var(--text-faint);
}

.toolbar-group:last-child {
    border-right: none;
    padding-right: 0;
}

.toolbar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.15s;
}

.toolbar-btn:hover {
    background: var(--border-primary);
    color: var(--text-primary);
}

.toolbar-btn:active,
.toolbar-btn.active {
    background: var(--color-primary-bg);
    color: var(--color-primary);
}

.toolbar-btn i {
    font-size: 14px;
}

/* Clause page typography only — the box model (8.5in page width, canvas, padding/margins,
   shadow, scrolling) is owned by the shared .engage-editor-content / .engage-editor-canvas. */
.clause-content-editable {
    /* Base font defaults to Times New Roman 12pt — matches the font toolbar's default selection so
       unstyled text and the dropdown agree. Per-run font marks override this. */
    font-family: 'Times New Roman', Times, serif;
    font-size: 12pt;
    line-height: 1.6;
    color: #1f2937;
    outline: none;
}

.clause-content-editable:focus {
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.clause-content-editable:empty::before {
    content: attr(data-placeholder);
    color: var(--text-placeholder);
    font-style: italic;
    pointer-events: none;
}

.clause-content-editable p {
    margin: 0 0 1em 0;
}

.clause-content-editable p:last-child {
    margin-bottom: 0;
}

.clause-content-editable ul,
.clause-content-editable ol {
    margin: 0 0 1em 0;
    padding-left: 1.5em;
}

.clause-content-editable li {
    margin-bottom: 0.25em;
}

/* ProseMirror base styles now live in the shared engage-editor.css (.engage-editor-content),
   applied to every surface, not just clauses. */

/* ============================================
   Clause Editor Tokens Panel
   ============================================ */

/* #301: Clause Details view renders via the shared <Modal> (Size="xl" + this class) — widen it. */
.eng-modal.clause-view-modal {
    width: 95%;
    max-width: 1462px;
}

/* Clause editor modal layout */
/* Full-screen editor surface (mirrors the Template editor): fills the area right of the
   collapsed nav rail and below the top nav. The nav collapse is triggered by .clause-editor-page
   via :has() in MainLayout, the same mechanism the template editor uses. */
.clause-editor-page {
    position: fixed;
    top: 60px;      /* below the fixed top nav */
    left: 64px;     /* right of the collapsed 64px nav rail */
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    /* Opaque backdrop so the Clauses list chrome (page header, tabs, status pills) behind the
       overlay never shows through. --bg-light is only defined in dark mode, so it resolved to
       transparent in light mode — hence the leftover elements. Fallback keeps it opaque either way. */
    background: var(--bg-secondary, #f1f5f9);
}

/* Collapse the app nav rail to the 64px icon rail while the clause editor is open — the same
   :has() mechanism the template editor uses (MainLayout), but kept here in a static sheet so it
   applies on a hard-refresh without recompiling the layout. Higher specificity than the base
   .sidebar 240px !important rule, so it wins. The rail APPEARANCE (hidden labels, centered
   icons, hover tooltips) lives in nav-rail.css, extended there for .clause-editor-page. */
.page:has(.clause-editor-page) .sidebar {
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.clause-editor-modal {
    display: flex;
    flex-direction: column;
    /* Fill the editor surface. Body is a 3-column layout (meta sidebar | content editor |
       tokens sidebar), each handling its own scroll. */
    width: 100%;
    height: 100%;
    min-height: 0;
    background: #ffffff;
    overflow: hidden;
}

.clause-editor-modal.show {
    display: flex;
}

/* Top action bar — mirrors the Template editor's .template-action-bar. */
.clause-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    min-height: 60px;
    flex-shrink: 0;
    padding: 0 24px;
    background: #ffffff;
    border-bottom: 1px solid var(--border-primary);
}

.clause-action-bar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.clause-action-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.clause-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.clause-back-btn i {
    font-size: 16px;
}

.clause-back-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.clause-action-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
}

.clause-action-divider {
    width: 1px;
    height: 24px;
    background: var(--border-primary);
    flex-shrink: 0;
}

.clause-action-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* Original Edit Clause header treatment — a blue-filled pencil/plus in a light-blue circle. */
.clause-action-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #dbeafe;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.clause-action-badge i {
    color: #2563eb;
    font-size: 15px;
}

.clause-editor-modal .modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.clause-editor-modal .modal-header h2 {
    flex: 1;
}

.clause-editor-modal .modal-header-actions {
    display: flex;
    gap: 8px;
}

.clause-editor-modal .modal-footer {
    justify-content: flex-end;
    width: 100%;
    flex-shrink: 0;   /* stay pinned below the scrolling body — never clipped */
}

/* 3-column editor body: meta sidebar | content editor | tokens sidebar. */
.modal-body-with-sidebar {
    display: flex;
    gap: 0;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

/* LEFT — metadata sidebar (Clause Name, Description, Practice Areas, Tags). Scrolls on its own. */
.clause-meta-sidebar {
    width: 340px;
    min-width: 340px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-primary);
    overflow-y: auto;
    padding: 20px;
    background: #f8fafc;
}

/* CENTER — the content editor fills the available height. */
.clause-editor-center {
    flex: 1;
    min-width: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Gray canvas around the white "document" — matches the template / letter editors
       (.editor-canvas / .document-wrapper both use var(--border-primary)), so the area the
       content doesn't fill reads the same across all three editors. */
    background: var(--border-primary);
}

/* The Content form-group (holding the rich editor) grows to fill the center height. */
.clause-editor-center > .form-group:has(.engage-editor) {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.clause-editor-center > .form-group:has(.engage-editor) > label {
    flex-shrink: 0;
}

.clause-tokens-sidebar {
    width: 340px;
    min-width: 340px;
    flex-shrink: 0;
    border-left: 1px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    /* No scroll here — the inner .tokens-list owns the scrolling. A scrollbar on this outer
       column too would be the redundant "outer" bar. */
    overflow: hidden;
}

/* .tokens-sidebar-header rules removed — the inner "Intapp Tokens" h4
   header is no longer rendered. The "Tokens" toggle in the modal header
   names the panel. */

.tokens-sidebar-content {
    flex: 1;
    min-height: 0;
    /* Flex column so the token list (.tokens-list) can flex:1 and fill the sidebar down to
       the footer — the Request ID input + search stay their natural height on top. Without
       this the list was a fixed height and left dead space at the bottom of the sidebar. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px;
}

.tokens-sidebar-content .token-request-input,
.tokens-sidebar-content .tokens-search {
    flex-shrink: 0;
}

.tokens-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.tokens-sidebar-content .token-request-input {
    padding: 0 0 12px;
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: 12px;
}

.tokens-sidebar-content .token-input-row {
    display: flex;
    gap: 6px;
}

.tokens-sidebar-content .token-input-row .form-input {
    flex: 1;
    padding: 6px 10px;
    font-size: 13px;
}

.tokens-sidebar-content .token-input-row .btn-sm {
    padding: 6px 10px;
}

.tokens-sidebar-content .token-error {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 6px 8px;
    background: var(--color-danger-bg-subtle);
    border: 1px solid var(--color-danger-border);
    border-radius: 4px;
    color: var(--color-danger);
    font-size: 11px;
}

.tokens-sidebar-content .cached-token-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 6px 8px;
    background: var(--color-info-bg-subtle, #e8f4fd);
    border: 1px solid var(--color-info-border, #b6d4e8);
    border-radius: 4px;
    color: var(--text-muted);
    font-size: 11px;
}

.tokens-sidebar-content .tokens-search {
    padding: 0 0 8px;
}

.tokens-sidebar-content .search-input-wrapper {
    position: relative;
}

.tokens-sidebar-content .search-input-wrapper i {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-placeholder);
    font-size: 12px;
}

.tokens-sidebar-content .search-input-wrapper input {
    width: 100%;
    padding: 6px 10px 6px 28px;
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    font-size: 12px;
}

.tokens-sidebar-content .tokens-list {
    /* Fill down to the footer via flex (.tokens-list flex:1) rather than a fixed cap. The old
       max-height: calc(70vh - 200px) was from the centered-modal layout and left dead space
       below the list in the full-screen editor. */
    overflow-y: auto;
}

.tokens-sidebar-content .token-category h5 {
    font-size: 10px;
    text-transform: uppercase;
    color: #64748b;
    margin: 12px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-primary);
    letter-spacing: 0.5px;
    font-weight: 600;
}

.tokens-sidebar-content .token-category:first-child h5 {
    margin-top: 0;
}

.tokens-sidebar-content .token-item {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    margin: 3px 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    cursor: grab;
    transition: all 0.15s;
    font-size: 12px;
}

.tokens-sidebar-content .token-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateX(2px);
}

.tokens-sidebar-content .token-item:active {
    cursor: grabbing;
}

.tokens-sidebar-content .token-item.dragging {
    opacity: 0.4;
}

.tokens-sidebar-content .token-item .token-name {
    font-weight: 500;
    color: #334155;
    margin-bottom: 2px;
}

.tokens-sidebar-content .token-item .token-code {
    font-family: 'Consolas', monospace;
    font-size: 10px;
    color: #64748b;
    background: #e2e8f0;
    padding: 1px 4px;
    border-radius: 2px;
    align-self: flex-start;
}

/* The token's current resolved value (from the Intapp request) — green so it reads as live data,
   distinct from the gray code. Truncated with an ellipsis; the title attr shows the full value. */
.tokens-sidebar-content .token-item .token-value {
    margin-top: 3px;
    font-size: 11px;
    color: #15803d;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tokens-empty-small {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 15px;
    text-align: center;
    color: var(--text-placeholder);
}

.tokens-empty-small i {
    font-size: 24px;
    margin-bottom: 8px;
    opacity: 0.5;
}

.tokens-empty-small p {
    margin: 0;
    font-size: 12px;
}

/* Clause editor drop target */
.clause-content-editable.drop-target {
    outline: 2px dashed var(--color-primary);
    outline-offset: -2px;
    background: rgba(37, 99, 235, 0.05);
}

/* Token placeholder in clause content */
.clause-content-editable .token-placeholder {
    display: inline-block;
    position: relative;               /* anchor the ::after × remove button */
    background: linear-gradient(135deg, var(--color-primary-bg), #bfdbfe);
    color: var(--color-info-text);
    padding: 1px 20px 1px 6px;        /* right room reserved for the × button */
    border-radius: 3px;
    font-family: 'Consolas', monospace;
    font-size: 0.9em;
    border: 1px solid #93c5fd;
    cursor: default;
    user-select: none;
    white-space: nowrap;
}

/* Hover-reveal red × remove button — mirrors the token UX in the template editor. The click
   itself is handled in clauseEditor.js by detecting a click in the right ~20px zone (::after
   is not a real element, so it can't take its own click handler). */
.clause-content-editable .token-placeholder::after {
    content: '×';
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    background: var(--color-danger, #ef4444);
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
    line-height: 15px;
    text-align: center;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.15s;
}

.clause-content-editable .token-placeholder:hover::after {
    opacity: 1;
}

/* Token with "Always Show" enabled */
.clause-content-editable .token-placeholder.always-show {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border-color: #4ade80;
    color: #166534;
}

.clause-content-editable .token-placeholder .token-exception-icon {
    margin-right: 3px;
    font-size: 0.85em;
}

/* Token drop cursor - vertical caret indicator showing where token will be inserted */
.token-drop-cursor {
    position: fixed;
    width: 2px;
    background: var(--color-primary);
    pointer-events: none;
    z-index: 10000;
    display: none;
    border-radius: 1px;
    animation: token-cursor-blink 1s ease-in-out infinite;
}

.token-drop-cursor::before,
.token-drop-cursor::after {
    content: '';
    position: absolute;
    left: -3px;
    width: 8px;
    height: 2px;
    background: var(--color-primary);
    border-radius: 1px;
}

.token-drop-cursor::before {
    top: 0;
}

.token-drop-cursor::after {
    bottom: 0;
}

@keyframes token-cursor-blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Drop target highlight for clause editor */
.clause-content-editable.drop-target {
    outline: 2px dashed var(--color-primary);
    outline-offset: 2px;
    background-color: rgba(37, 99, 235, 0.05);
}

/* Hidden Token Styles */
.tokens-sidebar-content .token-item.hidden-token {
    background: var(--color-danger-bg-subtle);
    border-color: var(--color-danger-border);
}

.tokens-sidebar-content .token-item.hidden-token:hover {
    background: var(--color-danger-bg);
}

.tokens-sidebar-content .token-item.has-exception {
    background: var(--color-success-bg-subtle);
    border-color: #86efac;
}

.tokens-sidebar-content .token-item.has-exception:hover {
    background: #dcfce7;
}

.tokens-sidebar-content .token-item .token-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tokens-sidebar-content .token-item .hidden-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: var(--color-danger);
    font-size: 10px;
}

.tokens-sidebar-content .token-item .hidden-badge i {
    font-size: 11px;
}

.tokens-sidebar-content .token-item .exception-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    color: var(--color-success-light);
    font-size: 10px;
}

.tokens-sidebar-content .token-item .exception-badge i {
    font-size: 11px;
}

.tokens-sidebar-content .token-item .token-hidden-toggle {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border-primary);
}

.tokens-sidebar-content .token-item.hidden-token .token-hidden-toggle {
    border-top-color: var(--color-danger-border);
}

.tokens-sidebar-content .token-item.has-exception .token-hidden-toggle {
    border-top-color: #86efac;
}

.tokens-sidebar-content .token-hidden-toggle .toggle-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 11px;
}

.tokens-sidebar-content .token-hidden-toggle .toggle-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.tokens-sidebar-content .token-hidden-toggle .toggle-text {
    color: var(--text-muted);
}

.tokens-sidebar-content .token-item.hidden-token:not(.has-exception) .toggle-text {
    color: var(--color-danger);
}

.tokens-sidebar-content .token-item.has-exception .toggle-text {
    color: var(--color-success-light);
}

/* ===========================================================================
   Selection-rule reference indicator on clause rows
   ===========================================================================
   Small chip next to a clause name showing "this clause is wired into one or
   more selection rules". Hovering the chip shows the rule names via title
   attribute. Clicking the row's Delete action will be blocked by the API
   (returns 409) — the chip is the at-a-glance affordance so users see WHY
   before they try.
*/
.rule-link-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    margin-left: 6px;
    background: var(--color-info-bg, #eff6ff);
    color: var(--color-info-text, #1e40af);
    border: 1px solid var(--color-info-border, #bfdbfe);
    border-radius: 12px;
    font-size: 11px;
    line-height: 1;
    cursor: help;
    vertical-align: middle;
    flex-shrink: 0;
}

.rule-link-indicator i {
    font-size: 11px;
}

.rule-link-indicator .rule-link-count {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}