/* =============================================================================
   V2 DESIGN SYSTEM — Legal Connection
   =============================================================================
   This file is the SINGLE SOURCE OF TRUTH for all V2 design tokens.
   All new styles must reference the CSS variables defined here.

   ARCHITECTURE:
   - Loaded LAST in legalconnect.libraries.yml (after style.css, style2.css, elyts.css)
   - Being last in the cascade, it wins over previous styles WITHOUT needing !important
   - !important is used ONLY where Bootstrap 3 has built-in !important (specific cases)
   - style.css remains untouched (legacy) — new screens/components go here

   MIGRATION:
   - When working on a screen, migrate relevant styles from style.css to this file
   - Replace hardcoded values with var(--v2-...)
   - Remove !important whenever possible after migrating

   REFERENCE: /react_app_v2/tailwind.config.js
   ============================================================================= */

/* =============================================================================
   1. DESIGN TOKENS — CSS Variables
   ============================================================================= */

:root {
  /* --- Colors: Brand --- */
  --v2-brand-green: #47b171;
  --v2-brand-green-hover: #2c854f;
  --v2-brand-red: #ff6952;
  --v2-brand-red-hover: #d04b38;

  /* --- Colors: Text --- */
  --v2-text-1: #0e1016; /* Primary text */
  --v2-text-2: #737987; /* Secondary/muted text */

  /* --- Colors: Surface --- */
  --v2-surface-bg: #f2f4f7; /* Page background */
  --v2-surface-white: #ffffff;
  --v2-surface-secondary: #e8ecf4; /* Button secondary, selected state */
  --v2-surface-disabled: #d4d9e2; /* Disabled state */

  /* --- Colors: Border --- */
  --v2-border-default: #ddd; /* Tailwind gray-200 */
  --v2-border-focus: #47b171; /* Brand green on focus */
  --v2-border-card: #ddd; /* CheckboxCard border */

  /* --- Typography: Font Family --- */
  --v2-font: 'Roboto', sans-serif;

  /* --- Typography: Sizes (text-xs → text-heading-lg) --- */
  --v2-text-xs: 12px; /* Helper text, table cells */
  --v2-text-sm: 14px; /* Labels, subtitles, body small */
  --v2-text-base: 16px; /* Body, buttons */
  --v2-text-lg: 18px;
  --v2-text-heading-sm: 20px;
  --v2-text-heading-lg: 24px; /* Modal titles */

  /* --- Typography: Line Heights --- */
  --v2-lh-xs: 16px;
  --v2-lh-sm: 20px;
  --v2-lh-base: 24px;
  --v2-lh-heading-lg: 28px;

  /* --- Typography: Font Weights --- */
  --v2-fw-regular: 400;
  --v2-fw-medium: 500;
  --v2-fw-semibold: 600;

  /* --- Border Radius --- */
  --v2-radius-sm: 6px; /* Dropdown items */
  --v2-radius-md: 8px; /* Chips, tags */
  --v2-radius-input: 12px; /* Inputs, selects, textareas (rounded-xl) */
  --v2-radius-card: 12px; /* Table cards, containers */
  --v2-radius-checkbox-card: 16px; /* CheckboxCard (rounded-2xl) */
  --v2-radius-modal: 24px; /* Modals (rounded-3xl) */
  --v2-radius-btn: 24px; /* Buttons (rounded-[24px]) */
  --v2-radius-checkbox: 6px; /* Checkbox element */

  /* --- Spacing --- */
  --v2-space-1: 4px;
  --v2-space-2: 8px;
  --v2-space-3: 12px;
  --v2-space-4: 16px;
  --v2-space-5: 20px;
  --v2-space-6: 24px;
  --v2-space-8: 32px;
  --v2-space-10: 40px; /* Modal header bottom margin, actions bottom */

  /* --- Components: Button sizes --- */
  --v2-btn-height: 45px;
  --v2-btn-min-width: 140px;
  --v2-btn-padding: 0 20px;

  /* --- Components: Input --- */
  --v2-input-height: 50px;
  --v2-input-padding: 0 16px;

  /* --- Components: Textarea --- */
  --v2-textarea-min-height: 130px;
  --v2-textarea-padding: 16px;

  /* --- Components: Uppy FileDropZone --- */
  --v2-uppy-height: 170px;

  /* --- Components: Textarea Large --- */
  --v2-textarea-large-min-height: 200px;

  /* --- Components: Modal ---
   * Two widths: `--v2-modal-width` (800px) is the default for multi-field
   * forms, multi-step wizards and data-rich cards; `--v2-modal-width-sm`
   * (600px) is reserved for compact modals — confirmation, rename, change
   * role, single-input popups. */
  --v2-modal-width: 800px;
  --v2-modal-width-sm: 600px;
  --v2-modal-padding-x: 64px;
  --v2-modal-padding-y: 40px;

  /* --- Components: CheckboxCard --- */
  --v2-checkbox-card-height: 90px;
  --v2-checkbox-card-padding: 10px 60px 10px 70px;

  /* --- Shadows --- */
  --v2-shadow-dropdown:
    0px 0px 16px -4px rgba(16, 24, 40, 0.15), 0px 4px 6px -2px rgba(16, 24, 40, 0.05);
  --v2-shadow-card: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);

  /* --- Transitions --- */
  --v2-transition-fast: 0.15s ease;
  --v2-transition-base: 0.2s ease-in-out;

  /* --- Extended: compact radio cards --- */
  --v2-radius-xs: 4px; /* Compact radio card items */
  --v2-surface-green-tint: #f6fef9; /* Light green hover/selected background */

  /* --- Extended: form element borders --- */
  --v2-border-input: #e5e7eb; /* Input/Select/Textarea border */
  --v2-border-checkbox: #9ca3af; /* Checkbox unchecked border (gray-400) */

  /* --- Status colors: Pending (amber) --- */
  --v2-status-pending-bg: #fef3c7; /* Tailwind amber-100 */
  --v2-status-pending-text: #92400e; /* Tailwind amber-800 */
  --v2-status-pending-border: #fcd34d; /* Tailwind amber-300 */

  /* --- Severity colors: High (red) --- */
  --v2-severity-high-bg: #fee2e2; /* Tailwind red-100 */
  --v2-severity-high-border: #b91c1c; /* Tailwind red-700 */
  --v2-severity-high-text: #7f1d1d; /* Tailwind red-900 */

  /* --- Severity colors: Medium (orange) --- */
  --v2-severity-med-bg: #ffedd5; /* Tailwind orange-100 */
  --v2-severity-med-border: #c2410c; /* Tailwind orange-700 */
  --v2-severity-med-text: #7c2d12; /* Tailwind orange-900 */

  /* --- Severity colors: Low (yellow) --- */
  --v2-severity-low-bg: #fef9c3; /* Tailwind yellow-100 */
  --v2-severity-low-border: #ca8a04; /* Tailwind yellow-600 */
  --v2-severity-low-text: #713f12; /* Tailwind yellow-900 */
}

/* =============================================================================
   2. REUSABLE COMPONENT CLASSES
   These classes can be added via PHP (hook_preprocess), JS, or Twig
   ============================================================================= */

/* --- Primary Button (brand-green) --- */
.v2-btn-primary {
  height: var(--v2-btn-height) !important;
  min-width: var(--v2-btn-min-width) !important;
  padding: var(--v2-btn-padding) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  font-family: var(--v2-font) !important;
  line-height: 100% !important;
  color: var(--v2-surface-white) !important;
  background-color: var(--v2-brand-green) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color var(--v2-transition-base) !important;
  text-decoration: none !important;
}

.v2-btn-primary:hover,
.v2-btn-primary:focus {
  background-color: var(--v2-brand-green-hover) !important;
  color: var(--v2-surface-white) !important;
  text-decoration: none !important;
}

.v2-btn-primary:disabled,
.v2-btn-primary.disabled {
  background-color: var(--v2-surface-disabled) !important;
  color: var(--v2-text-2) !important;
  cursor: not-allowed !important;
}

/* --- Secondary Button (surface-secondary) --- */
.v2-btn-secondary {
  height: var(--v2-btn-height) !important;
  min-width: var(--v2-btn-min-width) !important;
  padding: var(--v2-btn-padding) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  font-family: var(--v2-font) !important;
  line-height: 100% !important;
  color: var(--v2-text-1) !important;
  background-color: var(--v2-surface-secondary) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color var(--v2-transition-base) !important;
  text-decoration: none !important;
}

.v2-btn-secondary:hover,
.v2-btn-secondary:focus {
  background-color: var(--v2-surface-disabled) !important;
  color: var(--v2-text-1) !important;
  text-decoration: none !important;
}

/* --- Danger Button (brand-red) --- */
.v2-btn-danger {
  height: var(--v2-btn-height) !important;
  min-width: var(--v2-btn-min-width) !important;
  padding: var(--v2-btn-padding) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  font-family: var(--v2-font) !important;
  color: var(--v2-surface-white) !important;
  background-color: var(--v2-brand-red) !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color var(--v2-transition-base) !important;
  text-decoration: none !important;
}

.v2-btn-danger:hover,
.v2-btn-danger:focus {
  background-color: var(--v2-brand-red-hover) !important;
  color: var(--v2-surface-white) !important;
  text-decoration: none !important;
}

/* --- Default V2 Label --- */
.v2-label {
  font-size: var(--v2-text-sm) !important;
  line-height: var(--v2-lh-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-1) !important;
  font-family: var(--v2-font) !important;
  margin-bottom: var(--v2-space-2) !important;
  display: block !important;
  background-color: transparent !important;
  padding: 0 !important;
}

/* --- Default V2 Input / Select --- */
.v2-input {
  width: 100% !important;
  min-height: var(--v2-input-height) !important;
  padding: var(--v2-input-padding) !important;
  font-size: var(--v2-text-xs) !important;
  line-height: var(--v2-lh-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-2) !important;
  font-family: var(--v2-font) !important;
  background-color: var(--v2-surface-white) !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color var(--v2-transition-fast) !important;
}

.v2-input:focus {
  border-color: var(--v2-border-focus) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* --- Default V2 Textarea --- */
.v2-textarea {
  width: 100%;
  min-height: var(--v2-textarea-min-height);
  padding: var(--v2-textarea-padding);
  font-size: var(--v2-text-xs);
  line-height: var(--v2-lh-xs);
  font-weight: var(--v2-fw-regular);
  color: var(--v2-text-2);
  font-family: var(--v2-font);
  background-color: var(--v2-surface-white);
  border: 1px solid var(--v2-border-default);
  border-radius: var(--v2-radius-input);
  resize: none;
  box-shadow: none;
  outline: none;
}

.v2-textarea:focus {
  border-color: var(--v2-border-focus);
  outline: none;
  box-shadow: none;
}

/* --- V2 Textarea Large modifier (e.g. "Contract Note" fields) --- */
.v2-textarea--large {
  min-height: var(--v2-textarea-large-min-height);
}

/* --- ModalHeader: wrapper --- */
.v2-modal-header {
  text-align: center;
  margin-bottom: var(--v2-space-10);
}

/* --- ModalHeader: title --- */
.v2-modal-title {
  font-size: var(--v2-text-heading-lg);
  line-height: var(--v2-lh-heading-lg);
  font-weight: var(--v2-fw-semibold);
  color: var(--v2-text-1);
  font-family: var(--v2-font);
  margin: 0 0 var(--v2-space-2) 0;
  text-align: center;
}

/* --- ModalHeader: subtitle --- */
.v2-modal-subtitle {
  font-size: var(--v2-text-sm);
  line-height: var(--v2-lh-sm);
  font-weight: var(--v2-fw-regular);
  color: var(--v2-text-2);
  font-family: var(--v2-font);
  margin: var(--v2-space-2) 0 0 0;
  text-align: center;
}

/* --- Actions layout V2 (flex justify-between) --- */
.v2-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: var(--v2-space-6);
  margin-bottom: var(--v2-space-10);
}

.v2-actions--end {
  justify-content: flex-end;
}

/* --- V2 Card container (tables, lists) --- */
.v2-card {
  background-color: var(--v2-surface-white);
  border-radius: var(--v2-radius-card);
  box-shadow: var(--v2-shadow-card);
  overflow: hidden;
}

/* --- V2 Dropdown menu --- */
.v2-dropdown-panel {
  background-color: var(--v2-surface-white);
  border-radius: var(--v2-radius-card);
  box-shadow: var(--v2-shadow-dropdown);
  padding: 10px;
  width: 140px;
  border: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  z-index: 100;
}

.v2-dropdown-item {
  display: block;
  font-size: var(--v2-text-xs);
  font-weight: var(--v2-fw-regular);
  line-height: var(--v2-lh-sm);
  color: var(--v2-text-1);
  padding: 4px 8px;
  margin-bottom: 2px;
  border-radius: var(--v2-radius-sm);
  cursor: pointer;
  transition: background-color var(--v2-transition-fast);
  text-decoration: none;
}

.v2-dropdown-item:hover {
  background-color: #f3f3f3;
  color: var(--v2-text-1);
  text-decoration: none;
}

.v2-dropdown-item--danger {
  color: var(--v2-brand-red);
}

.v2-dropdown-item:last-child {
  margin-bottom: 0;
}

/* --- V2 Helper text --- */
.v2-helper-text {
  font-size: var(--v2-text-xs);
  line-height: var(--v2-lh-xs);
  font-weight: var(--v2-fw-regular);
  color: var(--v2-text-2);
  font-family: var(--v2-font);
  margin-top: var(--v2-space-1);
  display: block;
}

/* --- V2 Form group spacing --- */
.v2-form-group {
  margin-bottom: var(--v2-space-5);
}

/* --- V2 Checkbox row (checkbox input + inline label text, flex aligned) --- */
.v2-checkbox-row {
  display: flex !important;
  align-items: center !important;
  gap: var(--v2-space-3) !important;
  cursor: pointer !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-base) !important;
  color: var(--v2-text-1) !important;
  margin-bottom: var(--v2-space-2) !important;
  user-select: none !important;
}

.v2-checkbox-row input[type='checkbox'] {
  flex-shrink: 0 !important;
}

/* --- V2 FileDropZone (Uppy wrapper utility class) ---
   Usage: add class="v2-file-dropzone" to the element wrapping the Uppy dashboard.
   All child Uppy selectors are styled via this class — no per-form overrides needed.
   ----------------------------------------------------------------- */

.v2-file-dropzone .uppy-Dashboard-inner {
  background-color: var(--v2-surface-white) !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
  height: var(--v2-uppy-height) !important;
  width: 100% !important;
}

.v2-file-dropzone .uppy-Dashboard-innerWrap {
  height: 100% !important;
  border-radius: var(--v2-radius-input) !important;
  overflow: hidden !important;
}

.v2-file-dropzone .uppy-Dashboard-AddFiles {
  border: none !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

.v2-file-dropzone .uppy-Dashboard-AddFiles-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--v2-text-sm) !important;
  line-height: var(--v2-lh-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-1) !important;
  font-family: var(--v2-font) !important;
}

.v2-file-dropzone .uppy-Dashboard-AddFiles-list {
  margin: var(--v2-space-1) 0 0 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  height: auto !important;
}

.v2-file-dropzone .uppy-Dashboard-note,
.v2-file-dropzone .uppy-DashboardContent-title {
  font-size: var(--v2-text-sm) !important;
  line-height: var(--v2-lh-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-1) !important;
  font-family: var(--v2-font) !important;
}

.v2-file-dropzone .uppy-Dashboard-browse {
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-brand-green) !important;
  font-family: var(--v2-font) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  padding: 0 !important;
  height: auto !important;
  line-height: var(--v2-lh-sm) !important;
}

.v2-file-dropzone .uppy-Dashboard-browse:hover {
  color: var(--v2-brand-green-hover) !important;
  text-decoration: underline !important;
}

.v2-file-dropzone .uppy-Dashboard-Item {
  border-bottom: 1px solid var(--v2-border-default) !important;
  padding: var(--v2-space-2) 12px !important;
}

.v2-file-dropzone .uppy-Dashboard-Item-name {
  font-size: var(--v2-text-xs) !important;
  line-height: var(--v2-lh-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-1) !important;
  font-family: var(--v2-font) !important;
}

.v2-file-dropzone .uppy-Dashboard-Item-statusSize {
  font-size: var(--v2-text-xs) !important;
  color: var(--v2-text-2) !important;
}

.v2-file-dropzone .uppy-Dashboard-Item-action--remove {
  color: var(--v2-text-2) !important;
}

.v2-file-dropzone .uppy-Dashboard-Item-action--remove:hover {
  color: var(--v2-brand-red) !important;
}

.v2-file-dropzone .uppy-Dashboard-Item-progress .uppy-Dashboard-Item-progressIndicator {
  color: var(--v2-brand-green) !important;
}

/* =============================================================================
   3. SHARED MULTI-STEP FORM ACTIONS
   Actions container + primary/secondary button styles shared by all V2 modal forms.
   When migrating a new form: add its selectors here — properties stay defined once.
   ============================================================================= */

/* --- Actions container --- */
form.add_request_wrap_page_1 #edit-actions,
form.add_request_wrap_page_2 #edit-actions,
form.add_request_wrap_page_3 #edit-actions,
form.add_contract_wrap_page_1 .form-actions,
form.add_contract_wrap_page_2 .form-actions,
form.add_contract_wrap_page_3 .form-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: var(--v2-space-6) !important;
  margin-bottom: var(--v2-space-10) !important;
  gap: var(--v2-space-2) !important;
}

/* Remove old float + clearfix artifacts from elyts.css */
form.add_request_wrap_page_1 #edit-actions:after,
form.add_request_wrap_page_2 #edit-actions::after,
form.add_request_wrap_page_3 #edit-actions::before,
form.add_request_wrap_page_3 #edit-actions::after {
  display: none !important;
}

form.add_request_wrap_page_1 #edit-next {
  float: none !important;
}

/* --- Button base: inline-flex alignment for all form buttons --- */
form.add_request_wrap_page_1 button,
form.add_request_wrap_page_1 a.v2-cancel-btn,
form.add_request_wrap_page_2 button,
form.add_request_wrap_page_3 button,
form.add_contract_wrap_page_1 button,
form.add_contract_wrap_page_1 a.btn,
form.add_contract_wrap_page_1 .v2-cancel-btn,
form.add_contract_wrap_page_2 button,
form.add_contract_wrap_page_2 a.btn,
form.add_contract_wrap_page_3 button,
form.add_contract_wrap_page_3 a.btn,
form#node-contract-repository-form .v2-cancel-btn,
form#node-contract-repository-edit-form .v2-cancel-btn,
form.add_contract_playbook_wrap_page_1 .v2-cancel-btn,
form.add_contract_playbook_wrap_page_2 .v2-cancel-btn,
form.file-version-control-file-versions .v2-cancel-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* --- Primary button (Next / Submit) --- */
form.add_request_wrap_page_1 button[name='next'],
form.request_page_2_contract button[name='next'],
form.add_request_wrap_page_2 #edit-submit,
form.add_request_wrap_page_3 #edit-actions #edit-submit,
form.add_contract_wrap_page_1 button[type='submit'].btn-primary:not(.contract_go_back),
form.add_contract_wrap_page_2 button[type='submit'].btn-primary:not(.contract_go_back),
form.add_contract_wrap_page_3 button[type='submit'].btn-primary:not(.contract_go_back) {
  height: var(--v2-btn-height) !important;
  min-width: var(--v2-btn-min-width) !important;
  padding: var(--v2-btn-padding) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  font-family: var(--v2-font) !important;
  color: var(--v2-surface-white) !important;
  background-color: var(--v2-brand-green) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  margin-left: auto !important;
  transition: background-color var(--v2-transition-base) !important;
}

form.add_request_wrap_page_1 button[name='next']:hover,
form.add_request_wrap_page_1 button[name='next']:focus,
form.request_page_2_contract button[name='next']:hover,
form.request_page_2_contract button[name='next']:focus,
form.add_request_wrap_page_2 #edit-submit:hover,
form.add_request_wrap_page_2 #edit-submit:focus,
form.add_request_wrap_page_3 #edit-actions #edit-submit:hover,
form.add_request_wrap_page_3 #edit-actions #edit-submit:focus,
form.add_contract_wrap_page_1 button[type='submit'].btn-primary:not(.contract_go_back):hover,
form.add_contract_wrap_page_1 button[type='submit'].btn-primary:not(.contract_go_back):focus,
form.add_contract_wrap_page_2 button[type='submit'].btn-primary:not(.contract_go_back):hover,
form.add_contract_wrap_page_2 button[type='submit'].btn-primary:not(.contract_go_back):focus,
form.add_contract_wrap_page_3 button[type='submit'].btn-primary:not(.contract_go_back):hover,
form.add_contract_wrap_page_3 button[type='submit'].btn-primary:not(.contract_go_back):focus {
  background-color: var(--v2-brand-green-hover) !important;
  color: var(--v2-surface-white) !important;
  box-shadow: none !important;
  outline: none !important;
}

form.add_request_wrap_page_1 button[name='next']:active,
form.add_request_wrap_page_2 #edit-submit:active,
form.add_request_wrap_page_3 #edit-actions #edit-submit:active,
form.add_contract_wrap_page_1 button[type='submit'].btn-primary:not(.contract_go_back):active,
form.add_contract_wrap_page_2 button[type='submit'].btn-primary:not(.contract_go_back):active,
form.add_contract_wrap_page_3 button[type='submit'].btn-primary:not(.contract_go_back):active {
  background-color: var(--v2-brand-green-hover) !important;
}

/* Disabled state — request form Next button only */
form.add_request_wrap_page_1 button[name='next']:disabled,
form.add_request_wrap_page_1 button[name='next'].disabled,
form.add_request_wrap_page_2 #edit-submit:disabled,
form.add_request_wrap_page_2 #edit-submit[disabled] {
  background-color: var(--v2-surface-disabled) !important;
  color: var(--v2-text-2) !important;
  cursor: not-allowed !important;
}

/* --- Secondary button (Cancel / Go Back) --- */
form.add_request_wrap_page_1 .v2-cancel-btn,
form.add_request_wrap_page_2 button.contract_go_back,
form.add_request_wrap_page_3 button.contract_go_back,
form.add_request_wrap_page_3 button.back-button,
form.add_request_wrap_page_3 #edit-actions #edit-previous,
form.add_contract_wrap_page_1 .v2-cancel-btn,
form#node-contract-repository-form .v2-cancel-btn,
form#node-contract-repository-edit-form .v2-cancel-btn,
form.add_contract_playbook_wrap_page_1 .v2-cancel-btn,
form.add_contract_playbook_wrap_page_2 .v2-cancel-btn,
form.file-version-control-file-versions .v2-cancel-btn,
form.add_contract_wrap_page_1 button.btn-default,
form.add_contract_wrap_page_1 a.btn-default,
form.add_contract_wrap_page_2 button.btn-default,
form.add_contract_wrap_page_2 a.btn-default,
form.add_contract_wrap_page_3 button.btn-default,
form.add_contract_wrap_page_3 a.btn-default,
form.add_contract_wrap_page_1
  button:not([type='submit']):not(.uppy-Dashboard-browse):not(.uppy-DashboardContent-back):not(
    .uppy-Dashboard-Item-action--remove
  ),
form.add_contract_wrap_page_2
  button:not([type='submit']):not(.uppy-Dashboard-browse):not(.uppy-DashboardContent-back):not(
    .uppy-Dashboard-Item-action--remove
  ),
form.add_contract_wrap_page_3
  button:not([type='submit']):not(.uppy-Dashboard-browse):not(.uppy-DashboardContent-back):not(
    .uppy-Dashboard-Item-action--remove
  ),
form.add_contract_wrap_page_1 button.contract_go_back,
form.add_contract_wrap_page_2 button.contract_go_back,
form.add_contract_wrap_page_3 button.contract_go_back {
  height: var(--v2-btn-height) !important;
  min-width: var(--v2-btn-min-width) !important;
  padding: var(--v2-btn-padding) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  font-family: var(--v2-font) !important;
  color: var(--v2-text-1) !important;
  background-color: var(--v2-surface-secondary) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background-color var(--v2-transition-base) !important;
}

form.add_request_wrap_page_1 .v2-cancel-btn:hover,
form.add_request_wrap_page_1 .v2-cancel-btn:focus,
form.add_request_wrap_page_2 button.contract_go_back:hover,
form.add_request_wrap_page_2 button.contract_go_back:focus,
form.add_request_wrap_page_3 button.contract_go_back:hover,
form.add_request_wrap_page_3 button.contract_go_back:focus,
form.add_request_wrap_page_3 button.back-button:hover,
form.add_request_wrap_page_3 button.back-button:focus,
form.add_request_wrap_page_3 #edit-actions #edit-previous:hover,
form.add_request_wrap_page_3 #edit-actions #edit-previous:focus,
form.add_contract_wrap_page_1 .v2-cancel-btn:hover,
form.add_contract_wrap_page_1 .v2-cancel-btn:focus,
form#node-contract-repository-form .v2-cancel-btn:hover,
form#node-contract-repository-form .v2-cancel-btn:focus,
form#node-contract-repository-edit-form .v2-cancel-btn:hover,
form#node-contract-repository-edit-form .v2-cancel-btn:focus,
form.add_contract_playbook_wrap_page_1 .v2-cancel-btn:hover,
form.add_contract_playbook_wrap_page_1 .v2-cancel-btn:focus,
form.add_contract_playbook_wrap_page_2 .v2-cancel-btn:hover,
form.add_contract_playbook_wrap_page_2 .v2-cancel-btn:focus,
form.file-version-control-file-versions .v2-cancel-btn:hover,
form.file-version-control-file-versions .v2-cancel-btn:focus,
form.add_contract_wrap_page_1 button.btn-default:hover,
form.add_contract_wrap_page_1 button.btn-default:focus,
form.add_contract_wrap_page_1 a.btn-default:hover,
form.add_contract_wrap_page_1 a.btn-default:focus,
form.add_contract_wrap_page_2 button.btn-default:hover,
form.add_contract_wrap_page_2 button.btn-default:focus,
form.add_contract_wrap_page_2 a.btn-default:hover,
form.add_contract_wrap_page_2 a.btn-default:focus,
form.add_contract_wrap_page_3 button.btn-default:hover,
form.add_contract_wrap_page_3 button.btn-default:focus,
form.add_contract_wrap_page_3 a.btn-default:hover,
form.add_contract_wrap_page_3 a.btn-default:focus,
form.add_contract_wrap_page_1 button:not([type='submit']):hover,
form.add_contract_wrap_page_1 button:not([type='submit']):focus,
form.add_contract_wrap_page_2 button:not([type='submit']):hover,
form.add_contract_wrap_page_2 button:not([type='submit']):focus,
form.add_contract_wrap_page_3 button:not([type='submit']):hover,
form.add_contract_wrap_page_3 button:not([type='submit']):focus,
form.add_contract_wrap_page_1 button.contract_go_back:hover,
form.add_contract_wrap_page_1 button.contract_go_back:focus,
form.add_contract_wrap_page_2 button.contract_go_back:hover,
form.add_contract_wrap_page_2 button.contract_go_back:focus,
form.add_contract_wrap_page_3 button.contract_go_back:hover,
form.add_contract_wrap_page_3 button.contract_go_back:focus {
  background-color: var(--v2-surface-disabled) !important;
  color: var(--v2-text-1) !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
}

/* =============================================================================
   4. REQUEST FORM — Shared wrapper (/node/add/request)
   ============================================================================= */

/* --- Modal wrapper (ModalRenderer) --- */
.add_request_wrap {
  max-width: var(--v2-modal-width) !important;
  padding: var(--v2-modal-padding-y) var(--v2-modal-padding-x) !important;
  border: none !important;
  border-radius: var(--v2-radius-modal) !important;
  background-color: var(--v2-surface-white) !important;
  box-shadow: none !important;
  margin: 30px auto !important;
}

/* =============================================================================
   3b. SHARED MODAL HEADER — All V2 forms
   ModalHeader title + subtitle shared across all multi-step forms.
   When migrating a new form: add its selector to these two blocks only.
   ============================================================================= */

/* --- ModalHeader: title (all V2 forms) --- */
form.add_request_wrap_page_1 .page-cover-title,
form.add_request_wrap_page_2 .page-cover-title,
form.add_contract_wrap_page_1 .page-cover-title,
form.add_contract_wrap_page_2 .page-cover-title,
form.add_contract_wrap_page_3 .page-cover-title,
form#node-contract-repository-form .page-cover-title,
form#node-contract-repository-edit-form .page-cover-title,
.upload-new-version-wrap .page-cover-title {
  text-align: center !important;
  font-size: var(--v2-text-heading-lg) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  font-weight: var(--v2-fw-semibold) !important;
  color: var(--v2-text-1) !important;
  font-family: var(--v2-font) !important;
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
}

/* Title margin override: contract form has no subtitle, so title carries bottom spacing */
form.add_contract_wrap_page_1 .page-cover-title,
form.add_contract_wrap_page_2 .page-cover-title,
form.add_contract_wrap_page_3 .page-cover-title,
form#node-contract-repository-form .page-cover-title,
form#node-contract-repository-edit-form .page-cover-title,
.upload-new-version-wrap .page-cover-title {
  margin-bottom: var(--v2-space-6) !important;
}

/* --- Contract wizard step 2: grid layout so title and Fill Form button share one row.
     Uses form IDs (specificity 1,x,x) to beat the node-form flex-column rule in
     style.css (specificity 0,3,1). Covers both add (node-contract-form) and edit
     (node-contract-edit-form) forms.                                                --- */
form#node-contract-form.add_contract_wrap_page_2,
form#node-contract-edit-form.add_contract_wrap_page_2 {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: center !important;
  column-gap: var(--v2-space-4) !important;
}

/* All direct children span both columns by default (full-width rows) */
form#node-contract-form.add_contract_wrap_page_2 > *,
form#node-contract-edit-form.add_contract_wrap_page_2 > * {
  grid-column: 1 / -1 !important;
}

/* Title: row 2 col 1, left-aligned, shares row with the button */
form#node-contract-form.add_contract_wrap_page_2 > .page-cover-title,
form#node-contract-edit-form.add_contract_wrap_page_2 > .page-cover-title {
  grid-column: 1 !important;
  grid-row: 2 !important;
  margin-bottom: var(--v2-space-6) !important;
  text-align: left !important;
}

/* Fill Form button: row 2 col 2 */
form#node-contract-form.add_contract_wrap_page_2 > .contract-fill-form-btn,
form#node-contract-edit-form.add_contract_wrap_page_2 > .contract-fill-form-btn {
  grid-column: 2 !important;
  grid-row: 2 !important;
  position: static !important;
  margin-bottom: var(--v2-space-6) !important;
  justify-self: end !important;
}

/* --- Fill Form button: "Ask AI" style.
     Uses form IDs (specificity 1,x,x) to beat the btn-default background-image:none
     rule (specificity 0,2,2) that lives in the same file.                          --- */
form#node-contract-form .contract-fill-form-btn,
form#node-contract-edit-form .contract-fill-form-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 46px !important;
  padding: 0 20px !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #2e87a3 0%, #52dcff 55%, #aef0f8 100%) !important;
  background-size: 200% 200% !important;
  animation: ai-border-shimmer 4s ease infinite !important;
  color: #fff !important;
  font-family: var(--v2-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
}

form#node-contract-form .contract-fill-form-btn::before,
form#node-contract-edit-form .contract-fill-form-btn::before {
  content: '' !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7 0.5L8.1 5.4L13 6.5L8.1 7.6L7 12.5L5.9 7.6L1 6.5L5.9 5.4Z' fill='white'/%3E%3Cpath d='M11.5 0L12 2L14 2.5L12 3L11.5 5L11 3L9 2.5L11 2Z' fill='white' opacity='0.7'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  flex-shrink: 0 !important;
}

form#node-contract-form .contract-fill-form-btn:hover,
form#node-contract-edit-form .contract-fill-form-btn:hover {
  opacity: 0.85 !important;
  color: #fff !important;
}

/* AI fill-form loader: spinning ring shown while the request is in flight */
.lc-ai-fill-loader {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(46, 135, 163, 0.25);
  border-top-color: #2e87a3;
  border-radius: 50%;
  animation: lc-ai-loader-spin 0.7s linear infinite;
  vertical-align: middle;
}
@keyframes lc-ai-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- ModalHeader: subtitle (forms that include a subtitle below the title) --- */
form.add_request_wrap_page_1 .page-cover-title-description,
form.add_request_wrap_page_2 .page-cover-title-description {
  text-align: center !important;
  font-size: var(--v2-text-sm) !important;
  line-height: var(--v2-lh-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-2) !important;
  font-family: var(--v2-font) !important;
  margin: var(--v2-space-2) 0 var(--v2-space-10) 0 !important;
  padding: 0 !important;
}

/* =============================================================================
   3c. SHARED STEP PROGRESS INDICATORS
   Two HTML variants of the V2 stepper. Both use the same design tokens.
   Adding the stepper to a new modal requires no per-form CSS — styles apply by ID.
   —
   Variant A — ul#progressbar: steps stacked vertically with labels below circles
                Used in: Contract Template Form (multi-step wizard)
   Variant B — #matterv2-progressbar: inline steps connected by a dash separator
                Used in: Request Form page 2
   ============================================================================= */

/* --- Variant A: ul#progressbar --- */
ul#progressbar {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 var(--v2-space-8) 0 !important;
  gap: 48px !important;
}

ul#progressbar .progressbar_status {
  display: none !important;
}

ul#progressbar li {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}

ul#progressbar li span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background-color: var(--v2-surface-secondary) !important;
  color: var(--v2-text-2) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-medium) !important;
  font-family: var(--v2-font) !important;
  line-height: 1 !important;
}

ul#progressbar li.active span {
  background-color: var(--v2-brand-green) !important;
  color: var(--v2-surface-white) !important;
}

ul#progressbar li strong {
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-2) !important;
  font-family: var(--v2-font) !important;
}

ul#progressbar li.active strong {
  color: var(--v2-text-1) !important;
  font-weight: var(--v2-fw-medium) !important;
}

/* --- Variant B: #matterv2-progressbar --- */
.my-form-wrapper {
  margin-bottom: var(--v2-space-6) !important;
}

#matterv2-progressbar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--v2-space-2) !important;
  font-family: var(--v2-font) !important;
  margin: 0 auto !important;
}

#matterv2-progressbar .mv2pb-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background-color: var(--v2-surface-secondary) !important;
  color: var(--v2-text-2) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-medium) !important;
  font-family: var(--v2-font) !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

#matterv2-progressbar .mv2pb-num.mv2pb-active {
  background-color: var(--v2-brand-green) !important;
  color: var(--v2-surface-white) !important;
}

#matterv2-progressbar .mv2pb-title {
  color: var(--v2-text-2) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-xs) !important;
}

#matterv2-progressbar .mv2pb-title.mv2pb-active {
  color: var(--v2-text-1) !important;
  font-weight: var(--v2-fw-medium) !important;
}

#matterv2-progressbar .mv2pb-dash {
  display: inline-block !important;
  width: 32px !important;
  height: 1px !important;
  background-color: var(--v2-border-default) !important;
  flex-shrink: 0 !important;
}

/* =============================================================================
   4. REQUEST FORM — Page 1 (form.add_request_wrap_page_1)
   "Request Type" step — CheckboxCards + Actions
   ============================================================================= */

/* --- CheckboxCard: container --- */
#edit-field-request-type > div.form-type-radio {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 100% !important;
  height: var(--v2-checkbox-card-height) !important;
  padding: var(--v2-checkbox-card-padding) !important;
  border: 1px solid var(--v2-border-card) !important;
  border-radius: var(--v2-radius-checkbox-card) !important;
  cursor: pointer !important;
  background-color: var(--v2-surface-white) !important;
  margin-bottom: var(--v2-space-4) !important;
  position: relative !important;
  transition: border-color var(--v2-transition-base) !important;
  box-sizing: border-box !important;
}

/* Card hover */
#edit-field-request-type > div.form-type-radio:hover {
  border-color: var(--v2-brand-green) !important;
}

/* Card checked state */
#edit-field-request-type > div.form-type-radio.active,
#edit-field-request-type > div.form-type-radio:has(input:checked) {
  border-color: var(--v2-brand-green) !important;
}

/* Hide native radio input */
form.add_request_wrap_page_1 .form-type-radio .form-radio {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

/* Card label — title text */
form.add_request_wrap_page_1 .form-type-radio .control-label {
  display: block !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: 25px !important;
  color: var(--v2-text-1) !important;
  font-family: var(--v2-font) !important;
  cursor: pointer !important;
}

/* Remove old ::before indicator injected by elyts.css */
form.add_request_wrap_page_1 .form-type-radio .control-label::before {
  display: none !important;
  content: none !important;
}

/* Card subtitle text */
form.add_request_wrap_page_1 .mfv2-p1-option {
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-2) !important;
  font-family: var(--v2-font) !important;
  margin-top: var(--v2-space-1) !important;
  margin-left: 0 !important;
}

/* Circular indicator — right side via ::after */
#edit-field-request-type > div.form-type-radio::after {
  content: '' !important;
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  border: 1px solid var(--v2-border-card) !important;
  border-radius: 50% !important;
  background-color: var(--v2-surface-white) !important;
  transition:
    border-color var(--v2-transition-base),
    background-color var(--v2-transition-base) !important;
}

/* Indicator checked — green fill with white inner dot */
#edit-field-request-type > div.form-type-radio.active::after,
#edit-field-request-type > div.form-type-radio:has(input:checked)::after {
  background-color: var(--v2-brand-green) !important;
  border-color: var(--v2-brand-green) !important;
  box-shadow:
    inset 0 0 0 4px var(--v2-brand-green),
    inset 0 0 0 6px var(--v2-surface-white) !important;
}

/* Indicator hover */
#edit-field-request-type > div.form-type-radio:hover::after {
  border-color: var(--v2-brand-green) !important;
}

/* Icon — left side via ::before */
#edit-field-request-type > div.form-type-radio::before {
  content: '' !important;
  position: absolute !important;
  left: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 28px !important;
  height: 28px !important;
  display: block !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* General Inquiry icon */
#edit-field-request-type > div.form-type-radio:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.4996 9.00224C10.6758 8.50136 11.0236 8.079 11.4814 7.80998C11.9391 7.54095 12.4773 7.4426 13.0006 7.53237C13.524 7.62213 13.9986 7.89421 14.3406 8.30041C14.6825 8.70661 14.8697 9.22072 14.8689 9.75168C14.8689 11.2506 12.6205 12 12.6205 12M12.6495 15H12.6595M12.4996 20C17.194 20 20.9996 16.1944 20.9996 11.5C20.9996 6.80558 17.194 3 12.4996 3C7.8052 3 3.99962 6.80558 3.99962 11.5C3.99962 12.45 4.15547 13.3636 4.443 14.2166C4.55119 14.5376 4.60529 14.6981 4.61505 14.8214C4.62469 14.9432 4.6174 15.0286 4.58728 15.1469C4.55677 15.2668 4.48942 15.3915 4.35472 15.6408L2.71906 18.6684C2.48575 19.1002 2.36909 19.3161 2.3952 19.4828C2.41794 19.6279 2.50337 19.7557 2.6288 19.8322C2.7728 19.9201 3.01692 19.8948 3.50517 19.8444L8.62619 19.315C8.78127 19.299 8.85881 19.291 8.92949 19.2937C8.999 19.2963 9.04807 19.3029 9.11586 19.3185C9.18478 19.3344 9.27145 19.3678 9.44478 19.4345C10.3928 19.7998 11.4228 20 12.4996 20Z' stroke='%230E1016' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Contract icon */
#edit-field-request-type > div.form-type-radio:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='19' viewBox='0 0 16 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 1.71562V5.02006C9.5 5.4681 9.5 5.69212 9.58175 5.86325C9.65365 6.01378 9.76839 6.13616 9.90951 6.21286C10.0699 6.30006 10.28 6.30006 10.7 6.30006H13.7979M9.5 13.5H5M11 10.3H5M14 7.89058V13.66C14 15.0041 14 15.6762 13.7548 16.1896C13.539 16.6412 13.1948 17.0083 12.7715 17.2384C12.2902 17.5 11.6601 17.5 10.4 17.5H5.6C4.33988 17.5 3.70982 17.5 3.22852 17.2384C2.80516 17.0083 2.46095 16.6412 2.24524 16.1896C2 15.6762 2 15.0041 2 13.66V5.34C2 3.99587 2 3.32381 2.24524 2.81042C2.46095 2.35883 2.80516 1.99168 3.22852 1.76158C3.70982 1.5 4.33988 1.5 5.6 1.5H8.00883C8.55916 1.5 8.83432 1.5 9.09327 1.56631C9.32285 1.6251 9.54233 1.72207 9.74364 1.85366C9.9707 2.00208 10.1653 2.20963 10.5544 2.62471L12.9456 5.17529C13.3347 5.59037 13.5293 5.79792 13.6684 6.04012C13.7918 6.25485 13.8827 6.48896 13.9378 6.73384C14 7.01005 14 7.30356 14 7.89058Z' stroke='%230E1016' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* Contract Review icon */
#edit-field-request-type > div.form-type-radio:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 12.5V6.8C20 5.11984 20 4.27976 19.673 3.63803C19.3854 3.07354 18.9265 2.6146 18.362 2.32698C17.7202 2 16.8802 2 15.2 2H8.8C7.11984 2 6.27976 2 5.63803 2.32698C5.07354 2.6146 4.6146 3.07354 4.32698 3.63803C4 4.27976 4 5.11984 4 6.8V17.2C4 18.8802 4 19.7202 4.32698 20.362C4.6146 20.9265 5.07354 21.3854 5.63803 21.673C6.27976 22 7.11984 22 8.8 22H12M14.5 19L16.5 21L21 16.5' stroke='%230E1016' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* =============================================================================
   5. CONTRACT TEMPLATE FORM — All Pages (form.add_contract_wrap_page_N)
   "Add Template" — /node/add/contract — 3-step form (Name, Document, Field Settings)
   Migration layer: replaces hardcoded values in style.css with var(--v2-...)
   ============================================================================= */

/* --- Form card — same v2 modal width as the rest of the wizard --- */
form.node-contract-form.node-form.add_contract_wrap_page_1,
form.node-contract-form.node-form.add_contract_wrap_page_2,
form.node-contract-form.node-form.add_contract_wrap_page_3 {
  max-width: var(--v2-modal-width) !important;
  padding: var(--v2-space-10) 80px !important;
}

/* --- Labels --- */
form.add_contract_wrap_page_1 .form-item label,
form.add_contract_wrap_page_2 .form-item label,
form.add_contract_wrap_page_3 .form-item label,
form.add_request_wrap_page_2 .form-item label,
form.add_request_wrap_page_3 .form-item label,
form.add_request_wrap_page_2 .control-label {
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  font-family: var(--v2-font) !important;
  color: var(--v2-text-1) !important;
  margin-bottom: var(--v2-space-2) !important;
  display: block !important;
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  line-height: var(--v2-lh-sm) !important;
}

/* --- Helper text --- */
form.add_contract_wrap_page_1 .help-block,
form.add_contract_wrap_page_2 .help-block,
form.add_contract_wrap_page_3 .help-block,
form.add_request_wrap_page_2 .help-block,
form.add_request_wrap_page_2 .description,
form.add_request_wrap_page_3 .help-block,
form.add_request_wrap_page_3 .description {
  font-size: var(--v2-text-xs) !important;
  line-height: var(--v2-lh-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-2) !important;
  font-family: var(--v2-font) !important;
  margin-top: var(--v2-space-1) !important;
}

/* --- Form field group spacing --- */
form.add_contract_wrap_page_1 .form-group,
form.add_contract_wrap_page_1 > .field--type-string,
form.add_contract_wrap_page_1 > .field--type-text-long,
form.add_contract_wrap_page_1 > .field--type-boolean,
form.add_contract_wrap_page_1 > .field--type-file,
form.add_request_wrap_page_2 .form-group,
form.add_request_wrap_page_2 .form-item,
form.add_request_wrap_page_3 .form-item {
  margin-bottom: var(--v2-space-5) !important;
}

/* --- Text inputs --- */
form.add_contract_wrap_page_1 .form-item input[type='text'],
form.add_contract_wrap_page_1 .form-item input[type='email'],
form.add_contract_wrap_page_1 .form-item input[type='number'],
form.add_contract_wrap_page_2 .form-item input[type='text'],
form.add_contract_wrap_page_2 .form-item input[type='email'],
form.add_contract_wrap_page_2 .form-item input[type='number'],
form.add_contract_wrap_page_3 .form-item input[type='text'],
form.add_contract_wrap_page_3 .form-item input[type='email'],
form.add_contract_wrap_page_3 .form-item input[type='number'],
form.add_request_wrap_page_2 .form-item input[type='text'],
form.add_request_wrap_page_2 .form-item input[type='email'],
form.add_request_wrap_page_3 .form-item input[type='text'],
form.add_request_wrap_page_3 .form-item input[type='email'],
form.add_request_wrap_page_3 .form-item input[type='number'],
form.add_request_wrap_page_3 .form-item input[type='date'],
form.add_request_wrap_page_2 input.form-control,
form.add_request_wrap_page_2 input.form-text {
  min-height: var(--v2-input-height) !important;
  padding: var(--v2-input-padding) !important;
  font-size: var(--v2-text-xs) !important;
  line-height: var(--v2-lh-xs) !important;
  color: var(--v2-text-2) !important;
  font-family: var(--v2-font) !important;
  background-color: var(--v2-surface-white) !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
  box-shadow: none !important;
  outline: 0 !important;
  transition: border-color var(--v2-transition-fast) !important;
}

/* --- Textareas --- */
form.add_contract_wrap_page_1 .form-item textarea,
form.add_contract_wrap_page_2 .form-item textarea,
form.add_contract_wrap_page_3 .form-item textarea,
form.add_request_wrap_page_2 .form-item textarea,
form.add_request_wrap_page_3 .form-item textarea,
form.add_request_wrap_page_2 textarea.form-control {
  padding: var(--v2-textarea-padding) !important;
  font-size: var(--v2-text-xs) !important;
  line-height: var(--v2-lh-xs) !important;
  color: var(--v2-text-2) !important;
  font-family: var(--v2-font) !important;
  background-color: var(--v2-surface-white) !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
  box-shadow: none !important;
  outline: 0 !important;
  min-height: var(--v2-textarea-min-height) !important;
  transition: border-color var(--v2-transition-fast) !important;
  resize: none !important;
}

/* --- Select dropdowns --- */
form.add_contract_wrap_page_1 .form-item select,
form.add_contract_wrap_page_2 .form-item select,
form.add_contract_wrap_page_3 .form-item select,
form.add_request_wrap_page_2 .form-item select,
form.add_request_wrap_page_3 .form-item select,
form.add_request_wrap_page_2 select.form-control,
form.add_request_wrap_page_2 select.form-select {
  min-height: var(--v2-input-height) !important;
  padding: var(--v2-input-padding) !important;
  font-size: var(--v2-text-xs) !important;
  line-height: var(--v2-lh-xs) !important;
  color: var(--v2-text-2) !important;
  font-family: var(--v2-font) !important;
  background-color: var(--v2-surface-white) !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
  box-shadow: none !important;
  outline: 0 !important;
  cursor: pointer !important;
}

/* --- Focus states --- */
form.add_contract_wrap_page_1 .form-item input:focus,
form.add_contract_wrap_page_1 .form-item select:focus,
form.add_contract_wrap_page_1 .form-item textarea:focus,
form.add_contract_wrap_page_2 .form-item input:focus,
form.add_contract_wrap_page_2 .form-item select:focus,
form.add_contract_wrap_page_2 .form-item textarea:focus,
form.add_contract_wrap_page_3 .form-item input:focus,
form.add_contract_wrap_page_3 .form-item select:focus,
form.add_contract_wrap_page_3 .form-item textarea:focus,
form.add_request_wrap_page_2 .form-item input:focus,
form.add_request_wrap_page_2 .form-item select:focus,
form.add_request_wrap_page_2 .form-item textarea:focus,
form.add_request_wrap_page_3 .form-item input:focus,
form.add_request_wrap_page_3 .form-item select:focus,
form.add_request_wrap_page_3 .form-item textarea:focus,
form.add_request_wrap_page_2 input.form-control:focus,
form.add_request_wrap_page_2 select.form-control:focus,
form.add_request_wrap_page_2 textarea.form-control:focus {
  border-color: var(--v2-border-focus) !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* --- CKEditor: hide accessibility voice label --- */
form.add_contract_wrap_page_1 .ck.ck-label.ck-voice-label,
form.add_contract_wrap_page_2 .ck.ck-label.ck-voice-label,
form.add_contract_wrap_page_3 .ck.ck-label.ck-voice-label {
  display: none !important;
}

/* --- CKEditor: content area styling --- */
form.add_contract_wrap_page_1 .ck.ck-editor .ck-editor__main > .ck-content,
form.add_contract_wrap_page_2 .ck.ck-editor .ck-editor__main > .ck-content,
form.add_contract_wrap_page_3 .ck.ck-editor .ck-editor__main > .ck-content {
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
  min-height: var(--v2-textarea-min-height) !important;
  padding: var(--v2-textarea-padding) !important;
  box-shadow: none !important;
}

form.add_contract_wrap_page_1 .ck.ck-editor .ck-editor__main > .ck-content.ck-focused,
form.add_contract_wrap_page_2 .ck.ck-editor .ck-editor__main > .ck-content.ck-focused,
form.add_contract_wrap_page_3 .ck.ck-editor .ck-editor__main > .ck-content.ck-focused {
  border-color: var(--v2-border-focus) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* --- Checkbox container: tighten vertical spacing --- */
form.add_contract_wrap_page_1 .field--type-boolean.form-group {
  margin-bottom: var(--v2-space-1) !important;
}

form.add_contract_wrap_page_1 .field--type-boolean.form-group .form-type-checkbox {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* --- Checkbox label --- */
form.add_contract_wrap_page_1 label.option,
form.add_contract_wrap_page_2 label.option,
form.add_contract_wrap_page_3 label.option {
  display: flex !important;
  align-items: center !important;
  gap: var(--v2-space-2) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-1) !important;
  font-family: var(--v2-font) !important;
  background-color: transparent !important;
  padding: 0 !important;
  line-height: var(--v2-lh-sm) !important;
}

/* --- Checkbox input --- */
form.add_contract_wrap_page_1 label.option input[type='checkbox'],
form.add_contract_wrap_page_2 label.option input[type='checkbox'],
form.add_contract_wrap_page_3 label.option input[type='checkbox'] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  cursor: pointer !important;
}

/* Go back button when it also has .btn-primary class (specificity override) */
form.add_contract_wrap_page_1 button.contract_go_back.btn-primary,
form.add_contract_wrap_page_2 button.contract_go_back.btn-primary,
form.add_contract_wrap_page_3 button.contract_go_back.btn-primary,
form.add_request_wrap_page_3 button.contract_go_back.btn-primary {
  color: var(--v2-text-1) !important;
  background-color: var(--v2-surface-secondary) !important;
  background-image: none !important;
  border: none !important;
}

form.add_contract_wrap_page_1 button.contract_go_back.btn-primary:hover,
form.add_contract_wrap_page_1 button.contract_go_back.btn-primary:focus,
form.add_contract_wrap_page_2 button.contract_go_back.btn-primary:hover,
form.add_contract_wrap_page_2 button.contract_go_back.btn-primary:focus,
form.add_contract_wrap_page_3 button.contract_go_back.btn-primary:hover,
form.add_contract_wrap_page_3 button.contract_go_back.btn-primary:focus,
form.add_request_wrap_page_3 button.contract_go_back.btn-primary:hover,
form.add_request_wrap_page_3 button.contract_go_back.btn-primary:focus {
  background-color: var(--v2-surface-disabled) !important;
  color: var(--v2-text-1) !important;
}

/* Hide glyphicon in skip links */
form.add_contract_wrap_page_1 a.new-matter-client-skip .glyphicon,
form.add_contract_wrap_page_2 a.new-matter-client-skip .glyphicon,
form.add_contract_wrap_page_3 a.new-matter-client-skip .glyphicon {
  display: none !important;
}

/* =============================================================================
   6. REQUEST FORM — PAGE 2 (form.add_request_wrap_page_2)
   "Fill in the Fields" step — General Inquiry, Contract, Contract Review
   Migration layer: replaces hardcoded values in style.css with var(--v2-...)
   ============================================================================= */

/* --- Select custom arrow (override browser default) --- */
form.add_request_wrap_page_2 select.form-control,
form.add_request_wrap_page_2 select.form-select,
form.add_request_wrap_page_2 .form-item select,
form.add_request_wrap_page_3 .form-item select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737987' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px !important;
  padding-right: 36px !important;
}

/* --- Bootstrap panel reset --- */
form.add_request_wrap_page_2 .panel,
form.add_request_wrap_page_2 .panel-default,
form.add_request_wrap_page_2 .panel-body {
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Hide "The department" helper text (redundant in Contract Review flow) --- */
form.add_request_wrap_page_2 #edit-custom-fields-wrapper .form-type-select .description {
  display: none !important;
}

/* --- Shared global Uppy reset (applies to all Uppy instances) --- */
.uppy-Dashboard {
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
  background-color: var(--v2-surface-white) !important;
}

.uppy-Dashboard .uppy-Dashboard-inner {
  border: none !important;
  border-radius: var(--v2-radius-input) !important;
}

.uppy-Dashboard .uppy-Dashboard-AddFiles {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border: none !important;
  width: 100% !important;
  height: 100% !important;
}

.uppy-Dashboard .uppy-Dashboard-browse {
  color: var(--v2-brand-green) !important;
}

.uppy-Dashboard .uppy-Dashboard-browse:hover {
  color: var(--v2-brand-green-hover) !important;
}

/* --- Header bar: align Cancel + title vertically --- */
.uppy-Dashboard .uppy-DashboardContent-bar {
  align-items: center !important;
}

.uppy-Dashboard .uppy-DashboardContent-title {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* --- Cancel button inside the file-selected view (uppy-DashboardContent-bar) --- */
.uppy-Dashboard .uppy-DashboardContent-back {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--v2-brand-green) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: var(--v2-lh-sm) !important;
  padding: 0 0 0 var(--v2-space-3) !important;
  min-width: unset !important;
  height: auto !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.uppy-Dashboard .uppy-DashboardContent-back:hover {
  color: var(--v2-brand-green-hover) !important;
  text-decoration: underline !important;
  background: transparent !important;
}

/* --- Remove-file (X) button: override Uppy's own size rule and our secondary-btn rule --- */
.uppy-Dashboard .uppy-Dashboard-Item-action--remove,
.uppy-Dashboard:not(.uppy-size--md):not(.uppy-Dashboard--singleFile.uppy-size--height-md)
  .uppy-Dashboard-Item-action--remove {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px !important;
  width: 24px !important;
  height: 24px !important;
  min-width: unset !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.uppy-Dashboard .uppy-Dashboard-Item-action--remove:hover,
.uppy-Dashboard:not(.uppy-size--md):not(.uppy-Dashboard--singleFile.uppy-size--height-md)
  .uppy-Dashboard-Item-action--remove:hover {
  background: rgba(255, 105, 82, 0.08) !important;
}

.uppy-Dashboard .uppy-Dashboard-Item-action--remove svg,
.uppy-Dashboard:not(.uppy-size--md):not(.uppy-Dashboard--singleFile.uppy-size--height-md)
  .uppy-Dashboard-Item-action--remove
  svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

/* Hide the filled circle background; show only the X path */
.uppy-Dashboard .uppy-Dashboard-Item-action--remove svg path:first-child {
  fill: transparent !important;
}

.uppy-Dashboard .uppy-Dashboard-Item-action--remove svg path:last-child {
  fill: var(--v2-text-2) !important;
}

.uppy-Dashboard .uppy-Dashboard-Item-action--remove:hover svg path:last-child {
  fill: var(--v2-brand-red) !important;
}

/* --- Contract Review: Uppy FileDropZone (form.add_request_wrap_page_2) --- */
form.add_request_wrap_page_2 .uppy-Dashboard-inner {
  background-color: var(--v2-surface-white) !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
  height: var(--v2-uppy-height) !important;
  width: 100% !important;
}

form.add_request_wrap_page_2 .uppy-Dashboard-innerWrap {
  border-radius: var(--v2-radius-input) !important;
  overflow: hidden !important;
}

form.add_request_wrap_page_2 .uppy-Dashboard-AddFiles {
  border: none !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}

form.add_request_wrap_page_2 .uppy-Dashboard-AddFiles-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--v2-text-sm) !important;
  line-height: var(--v2-lh-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-1) !important;
  font-family: var(--v2-font) !important;
}

form.add_request_wrap_page_2 .uppy-Dashboard-AddFiles-list {
  margin: var(--v2-space-1) 0 0 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  height: auto !important;
}

form.add_request_wrap_page_2 .uppy-Dashboard-note,
form.add_request_wrap_page_2 .uppy-DashboardContent-title {
  font-size: var(--v2-text-sm) !important;
  line-height: var(--v2-lh-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-1) !important;
  font-family: var(--v2-font) !important;
}

form.add_request_wrap_page_2 .uppy-Dashboard-browse {
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-brand-green) !important;
  font-family: var(--v2-font) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  padding: 0 !important;
  height: auto !important;
  line-height: var(--v2-lh-sm) !important;
}

form.add_request_wrap_page_2 .uppy-Dashboard-browse:hover {
  color: var(--v2-brand-green-hover) !important;
  text-decoration: underline !important;
}

form.add_request_wrap_page_2 .uppy-Dashboard-Item {
  border-bottom: 1px solid var(--v2-border-default) !important;
  padding: var(--v2-space-2) 12px !important;
}

form.add_request_wrap_page_2 .uppy-Dashboard-Item-name {
  font-size: var(--v2-text-xs) !important;
  line-height: var(--v2-lh-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-1) !important;
  font-family: var(--v2-font) !important;
}

form.add_request_wrap_page_2 .uppy-Dashboard-Item-statusSize {
  font-size: var(--v2-text-xs) !important;
  color: var(--v2-text-2) !important;
}

form.add_request_wrap_page_2 .uppy-Dashboard-Item-action--remove {
  color: var(--v2-text-2) !important;
}

form.add_request_wrap_page_2 .uppy-Dashboard-Item-action--remove:hover {
  color: var(--v2-brand-red) !important;
}

form.add_request_wrap_page_2 .uppy-Dashboard-Item-progress .uppy-Dashboard-Item-progressIndicator {
  color: var(--v2-brand-green) !important;
}

/* =============================================================================
   7. REQUEST FORM — PAGE 2 CONTRACT (form.request_page_2_contract)
   Inherits: Section 3 (buttons/actions), Section 3b (ModalHeader),
             Section 3c (stepper), Section 5 (labels/fields), Section 6 (select arrow/panel)
   Contract-specific: flex ordering, panel cleanup, radio button cards
   ============================================================================= */

/* --- Flex column layout + full-width children --- */
form.request_page_2_contract {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

form.request_page_2_contract > * {
  width: 100% !important;
}

/* --- Flex order assignments (stepper → title → subtitle → group → dept → contract type → custom fields → actions) --- */
form.request_page_2_contract .my-form-wrapper {
  order: 0 !important;
}
form.request_page_2_contract .page-cover-title {
  order: 1 !important;
}
form.request_page_2_contract .page-cover-title-description {
  order: 2 !important;
}
form.request_page_2_contract > div.form-item-lc-group {
  order: 3 !important;
  margin-bottom: var(--v2-space-5) !important;
}
form.request_page_2_contract #edit-custom-fields-wrapper {
  order: 4 !important;
  margin-top: 0 !important;
  margin-bottom: var(--v2-space-5) !important;
}
form.request_page_2_contract .v2-contract-type-select {
  order: 5 !important;
  margin-bottom: var(--v2-space-5) !important;
}
form.request_page_2_contract #edit-field-custom-contract-title-wrapper {
  order: 6 !important;
  margin-bottom: var(--v2-space-5) !important;
}
form.request_page_2_contract #edit-field-contract-requirement-wrapper {
  order: 7 !important;
  margin-bottom: var(--v2-space-5) !important;
}
form.request_page_2_contract #edit-actions {
  order: 99 !important;
}

/* --- Panel cleanup: custom fields wrapper --- */
form.request_page_2_contract #edit-custom-fields-wrapper {
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

form.request_page_2_contract #edit-custom-fields-wrapper .form-group {
  margin-bottom: 0 !important;
}

form.request_page_2_contract #edit-custom-fields-wrapper > .panel-heading {
  display: none !important;
}

form.request_page_2_contract #edit-custom-fields-wrapper .panel-body {
  display: block !important;
  height: auto !important;
  opacity: 1 !important;
  overflow: visible !important;
}

form.request_page_2_contract fieldset.contract_type_list_to_selct::after {
  content: none !important;
  display: none !important;
}

/* --- Remove legacy subtitle pseudo-element --- */
form.request_page_2_contract .page-cover-title::after {
  content: none !important;
  display: none !important;
}

/* --- Hide redundant department description ("The department") --- */
form.request_page_2_contract #edit-custom-fields-wrapper .description {
  display: none !important;
}

/* --- Hide glyphicon icon on Save button --- */
form.request_page_2_contract #edit-actions #edit-submit .glyphicon {
  display: none !important;
}

/* --- Utility: .v2-hidden CSS class used for JS button toggling and Drupal #states fallback --- */
form.request_page_2_contract #edit-actions #edit-submit.v2-hidden,
form.request_page_2_contract #edit-actions #edit-next.v2-hidden,
form.request_page_2_contract #edit-actions #edit-previous.v2-hidden,
form.request_page_2_contract .v2-hidden {
  display: none !important;
}

/* --- Contract type radio button cards --- */
form.request_page_2_contract .form-type-radio {
  margin: 0 !important;
}

form.request_page_2_contract .fieldset-wrapper {
  padding-left: 0 !important;
}

form.request_page_2_contract legend,
form.request_page_2_contract .fieldset-legend {
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-2) !important;
  margin-bottom: var(--v2-space-1) !important;
}

form.request_page_2_contract .form-type-radio .form-radio {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

form.request_page_2_contract .form-type-radio .control-label {
  display: flex !important;
  align-items: center !important;
  padding: 0 var(--v2-space-3) !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-xs) !important;
  cursor: pointer !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-1) !important;
  background-color: var(--v2-surface-white) !important;
  background-image: none !important;
  height: 44px !important;
  position: relative !important;
  margin-bottom: 0 !important;
  transition:
    border-color var(--v2-transition-base),
    background-color var(--v2-transition-base) !important;
}

form.request_page_2_contract .form-type-radio .control-label:hover {
  border-color: var(--v2-brand-green) !important;
  background-color: var(--v2-surface-green-tint) !important;
}

form.request_page_2_contract .form-type-radio .control-label::before {
  content: '' !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  border: 2px solid var(--v2-border-default) !important;
  border-radius: 50% !important;
  margin-right: var(--v2-space-2) !important;
  background-color: var(--v2-surface-white) !important;
  transition:
    border-color var(--v2-transition-base),
    background-color var(--v2-transition-base) !important;
}

form.request_page_2_contract .form-type-radio:has(input:checked) .control-label {
  border-color: var(--v2-brand-green) !important;
  background-color: var(--v2-surface-green-tint) !important;
}

form.request_page_2_contract .form-type-radio:has(input:checked) .control-label::before {
  border-color: var(--v2-brand-green) !important;
  background-color: var(--v2-brand-green) !important;
  box-shadow: inset 0 0 0 3px var(--v2-surface-white) !important;
}

/* =============================================================================
   8. REQUEST FORM — PAGE 3 CONTRACT STEP 2 (form.add_request_wrap_page_3)
   "Fill in the Fields" — dynamic fields rendered from the selected contract template.
   Inherits: Section 3 (buttons/actions), Section 3b (ModalHeader),
             Section 3c (stepper), Section 5 (labels/fields), Section 6 (select arrow)
   Specific: flex column layout, currency prefix hide, glyphicon hide
   ============================================================================= */

/* --- Flex column layout + full-width children --- */
form.add_request_wrap_page_3 {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

form.add_request_wrap_page_3 > * {
  width: 100% !important;
}

/* --- Hide currency prefix ($) on currency fields --- */
form.add_request_wrap_page_3 .contract_currency_field > span {
  display: none !important;
}

/* --- Hide glyphicon icon on Save button --- */
form.add_request_wrap_page_3 #edit-actions #edit-submit .glyphicon {
  display: none !important;
}

/* =============================================================================
   9. USERS TAB — ADD USER MODAL (#user-details-wrapper)
   Inline panel rendered on /organization/:id?tab_org=v-pills-users
   v2 ModalRenderer / Input / Button / Radio styling
   ============================================================================= */

/* --- Panel container --- */
#user-details-wrapper {
  background-color: var(--v2-surface-white) !important;
  border: none !important;
  border-radius: var(--v2-radius-modal) !important;
  box-shadow: 0px 0px 16px -4px rgba(16, 24, 40, 0.08) !important;
  padding: 0 !important;
  margin-top: var(--v2-space-5) !important;
  overflow: hidden !important;
  max-width: var(--v2-modal-width-sm) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- Panel heading (ModalHeader pattern) --- */
#user-details-wrapper .panel-heading {
  background: none !important;
  border: none !important;
  padding: 50px var(--v2-modal-padding-x) 0 var(--v2-modal-padding-x) !important;
  text-align: center !important;
}

#user-details-wrapper .panel-title {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  font-weight: var(--v2-fw-semibold) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  color: var(--v2-text-1) !important;
  margin-bottom: var(--v2-space-10) !important;
}

/* --- Panel body --- */
#user-details-wrapper .panel-body {
  padding: 0 var(--v2-modal-padding-x) var(--v2-space-10) var(--v2-modal-padding-x) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* --- Form group spacing --- */
#user-details-wrapper .panel-body > .form-group {
  margin-bottom: var(--v2-space-5) !important;
}

/* --- Labels — visual style via .v2-label class on element --- */
/* --- Required asterisk --- */
#user-details-wrapper .panel-body label.form-required::after {
  color: var(--v2-brand-red) !important;
}

/* --- Text inputs — visual style via .v2-input class on element --- */

/* --- Fieldset (User role) --- */
#user-details-wrapper fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 0 var(--v2-space-5) 0 !important;
}

#user-details-wrapper fieldset legend {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-1) !important;
  border: none !important;
  margin-bottom: var(--v2-space-3) !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
}

/* --- Radio items --- */
#user-details-wrapper #edit-role > .radio {
  margin-bottom: var(--v2-space-2) !important;
  padding: 0 !important;
}

#user-details-wrapper #edit-role label.control-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-base) !important;
  color: var(--v2-text-1) !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Native radio styled as v2 circular indicator --- */
#user-details-wrapper #edit-role .form-radio {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border: 1px solid var(--v2-surface-disabled) !important;
  border-radius: 50% !important;
  background-color: var(--v2-surface-white) !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  transition:
    border-color var(--v2-transition-base),
    background-color var(--v2-transition-base),
    box-shadow var(--v2-transition-base) !important;
}

#user-details-wrapper #edit-role .form-radio:checked {
  background-color: var(--v2-brand-green) !important;
  border-color: var(--v2-brand-green) !important;
  box-shadow:
    inset 0 0 0 4px var(--v2-brand-green),
    inset 0 0 0 6px var(--v2-surface-white) !important;
}

/* --- Hide "Make this user org admin" redundant checkbox --- */
#user-details-wrapper .form-item-is-org-admin {
  display: none !important;
}

/* --- Save button — layout only (visual style via .v2-btn-primary on the element) --- */
#user-details-wrapper #edit-new-user-save {
  order: 100 !important;
  align-self: flex-end !important;
  margin-top: var(--v2-space-6) !important;
  background-image: none !important;
}

/* --- Hide icon inside save button --- */
#user-details-wrapper #edit-new-user-save .icon {
  display: none !important;
}

/* --- Cancel button — layout only (visual style via .v2-btn-secondary on the element) --- */
#user-details-wrapper #cancel-user {
  order: 101 !important;
  align-self: flex-start !important;
  margin-top: calc(-1 * var(--v2-btn-height)) !important;
  text-decoration: none !important;
}

/* =============================================================================
   10. USERS TAB — CHANGE ROLE MODAL (#bootstrap5Modal)
   Bootstrap 5 modal triggered from the 3-dot menu on the Users tab.
   v2 ModalRenderer / Radio / Button styling.
   NOTE: #bootstrap5Modal is also reused by other modals (Delete Group, Matter
   Settings). Variant-specific overrides use modifier classes (e.g.
   .delete-group-modal) and live in later sections.
   ============================================================================= */

/* --- Modal dialog — centered, v2 width --- */
#bootstrap5Modal .modal-dialog {
  max-width: var(--v2-modal-width-sm) !important;
  margin: 30px auto !important;
  transform: none !important;
}

/* --- Modal content — v2 rounded container --- */
#bootstrap5Modal .modal-content {
  border: none !important;
  border-radius: var(--v2-radius-modal) !important;
  box-shadow: var(--v2-shadow-dropdown) !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100vh - 60px) !important;
  overflow: hidden !important;
}

/* --- Modal header (ModalHeader pattern) --- */
#bootstrap5Modal .modal-header {
  border-bottom: none !important;
  padding: var(--v2-modal-padding-y) var(--v2-modal-padding-x) 0 var(--v2-modal-padding-x) !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  position: relative !important;
}

#bootstrap5Modal .modal-title {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  font-weight: var(--v2-fw-semibold) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  color: var(--v2-text-1) !important;
  text-align: center !important;
  width: 100% !important;
}

/* --- Close X button --- */
#bootstrap5Modal .btn-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  color: var(--v2-text-2) !important;
}

#bootstrap5Modal .btn-close:hover {
  color: var(--v2-text-1) !important;
}

/* --- Modal body — inner padding, scrollable for tall content --- */
#bootstrap5Modal .modal-body {
  padding: var(--v2-space-6) var(--v2-modal-padding-x) 0 var(--v2-modal-padding-x) !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}

/* --- Radio items in Change Role modal --- */
#bootstrap5Modal .org-change-user-roles-radios > div {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: var(--v2-space-3) !important;
}

#bootstrap5Modal .org-change-user-roles-radios label {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-base) !important;
  color: var(--v2-text-1) !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* --- Native radio styled as v2 circular indicator --- */
#bootstrap5Modal .org-change-user-roles-radios input[type='radio'] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border: 1px solid var(--v2-surface-disabled) !important;
  border-radius: 50% !important;
  background-color: var(--v2-surface-white) !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  transition:
    border-color var(--v2-transition-base),
    background-color var(--v2-transition-base),
    box-shadow var(--v2-transition-base) !important;
}

#bootstrap5Modal .org-change-user-roles-radios input[type='radio']:checked {
  background-color: var(--v2-brand-green) !important;
  border-color: var(--v2-brand-green) !important;
  box-shadow:
    inset 0 0 0 4px var(--v2-brand-green),
    inset 0 0 0 6px var(--v2-surface-white) !important;
}

/* --- Modal footer — v2 actions layout --- */
#bootstrap5Modal .modal-footer {
  border-top: none !important;
  padding: var(--v2-space-6) var(--v2-modal-padding-x) var(--v2-modal-padding-y)
    var(--v2-modal-padding-x) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* --- Close/Cancel button — visual style via .v2-btn-secondary class on element --- */
/* --- Update Role button — visual style via .v2-btn-primary class on element --- */

/* =============================================================================
   11. USERS TAB — REMOVE USER PAGE (form.legal-delete-org-user)
   Full-page delete confirmation at /organization/delete-user/{uid}.
   v2 DeleteModal pattern: centered card, title, description, actions.
   Cancel — .v2-btn-secondary | Remove — .v2-btn-danger
   ============================================================================= */

/* --- Page wrapper — vertically center the card --- */
form.legal-delete-org-user {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-height: 60vh !important;
  justify-content: center !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: var(--v2-space-10) 0 !important;
  filter: drop-shadow(0px 0px 16px rgba(16, 24, 40, 0.08)) !important;
}

/* --- Remove individual shadow from each child so only the form filter applies --- */
form.legal-delete-org-user > .block-org-user-wrap,
form.legal-delete-org-user > .delete-org-actions-container {
  box-shadow: none !important;
}

/* --- Card top half (title + description) --- */
.block-org-user-wrap {
  background-color: var(--v2-surface-white) !important;
  border-radius: var(--v2-radius-modal) var(--v2-radius-modal) 0 0 !important;
  padding: 50px var(--v2-modal-padding-x) 20px var(--v2-modal-padding-x) !important;
  max-width: 500px !important;
  width: 100% !important;
  text-align: center !important;
}

/* --- Suppress raw <br> spacing --- */
.block-org-user-wrap br {
  display: block !important;
  content: '' !important;
  margin-top: var(--v2-space-1) !important;
}

/* --- Title --- */
.block-org-user-wrap h2 {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  font-weight: var(--v2-fw-semibold) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  color: var(--v2-text-1) !important;
  margin: 0 0 var(--v2-space-1) 0 !important;
  text-align: center !important;
}

/* --- Description text --- */
.block-org-user-wrap {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-2) !important;
}

/* --- Actions container (card bottom half) --- */
.delete-org-actions-container {
  display: flex !important;
  justify-content: space-between !important;
  max-width: 500px !important;
  width: 100% !important;
  margin-top: 0 !important;
  padding: var(--v2-space-6) var(--v2-modal-padding-x) var(--v2-modal-padding-y)
    var(--v2-modal-padding-x) !important;
  background-color: var(--v2-surface-white) !important;
  border-radius: 0 0 var(--v2-radius-modal) var(--v2-radius-modal) !important;
  box-sizing: border-box !important;
}

/* --- Hide trash glyphicon inside Remove button --- */
.delete-org-actions-container #edit-submit .glyphicon {
  display: none !important;
}

/* --- Cancel link — visual style via .v2-btn-secondary class on element --- */
/* --- Remove button — visual style via .v2-btn-danger class on element --- */

/* --- Hide default Drupal page title (card has its own h2) --- */
form.legal-delete-org-user ~ .page-header,
.path-organization-delete-user .page-header {
  display: none !important;
}

/* =============================================================================
   12. GROUPS TAB — ADD / EDIT GROUP PAGE (.create-folder-wrap)
   JS-rendered at /my-groups?page=lc-entity--add--group.
   v2 ModalRenderer pattern: centered card, title, form field, save button.
   Label — .v2-label | Input — .v2-input | Save — .v2-btn-primary
   ============================================================================= */

/* --- Card container --- */
.create-folder-wrap.contactv2-add-group,
.create-folder-wrap.contactv2-edit-group {
  background-color: var(--v2-surface-white) !important;
  border-radius: var(--v2-radius-modal) !important;
  box-shadow: var(--v2-shadow-card) !important;
  max-width: var(--v2-modal-width-sm) !important;
  margin: var(--v2-space-10) auto !important;
  padding: var(--v2-space-10) var(--v2-modal-padding-x) !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* --- Title --- */
.create-folder-wrap.contactv2-add-group .matter-refer-title,
.create-folder-wrap.contactv2-edit-group .matter-refer-title {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  font-weight: var(--v2-fw-semibold) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  color: var(--v2-text-1) !important;
  text-align: center !important;
  margin-bottom: var(--v2-space-10) !important;
}

/* --- Back button (top-left) --- */
.create-folder-wrap .ctcf-back-button {
  position: absolute !important;
  top: var(--v2-space-4) !important;
  left: var(--v2-space-4) !important;
  color: var(--v2-text-2) !important;
  cursor: pointer !important;
}

.create-folder-wrap .ctcf-back-button:hover {
  color: var(--v2-text-1) !important;
}

/* --- Hide single-item tab navigation --- */
.create-folder-wrap .lc-tabs-tabs {
  display: none !important;
}

/* --- Form field wrapper spacing --- */
.create-folder-wrap .changeable-contents .gap {
  margin-bottom: var(--v2-space-5) !important;
}

/* --- Label — visual style via .v2-label class on element --- */
/* --- Input — visual style via .v2-input class on element --- */

/* --- Save button — float right for layout, visual style via .v2-btn-primary --- */
.create-folder-wrap #cv2-save-group-btn {
  float: right !important;
}

/* =============================================================================
   13. GROUPS TAB — DELETE GROUP MODAL (#bootstrap5Modal.delete-group-modal)
   Triggered from 3-dot menu > Delete on Groups tab (Org page).
   v2 DeleteModal pattern: centered subtitle text, danger action button.
   Delete Request button — .v2-btn-danger (applied in JS)
   Close button      — .v2-btn-secondary (applied in siteModalBS5.showModal)
   ============================================================================= */

/* --- Modal body — centered subtitle style --- */
#bootstrap5Modal.delete-group-modal .modal-body {
  text-align: center !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-2) !important;
  padding: var(--v2-space-3) var(--v2-modal-padding-x) 0 var(--v2-modal-padding-x) !important;
}

/* --- Success/thank-you state — collapse footer padding when no buttons --- */
#bootstrap5Modal.delete-group-modal .modal-footer:empty {
  padding: 0 var(--v2-modal-padding-x) var(--v2-modal-padding-y) var(--v2-modal-padding-x) !important;
}

/* =============================================================================
   14. MATTER SETTINGS — ADD/EDIT FIELD MODAL (#bootstrap5Modal.org-custom-fields-modal)
   Triggered from Matter Settings tab: "Add Field" button and 3-dot > Edit.
   Input     — .v2-input     (applied in legalc_custom_fields.js)
   Select    — .v2-input     (applied in legalc_custom_fields.js, appearance override below)
   Textarea  — .v2-textarea  (applied in legalc_custom_fields.js)
   Cancel    — .v2-btn-secondary (applied in legalc_custom_fields.js)
   Add/Save  — .v2-btn-primary  (applied in legalc_custom_fields.js)
   ============================================================================= */

/* --- Modal content: constrain to viewport so body scrolls --- */
#bootstrap5Modal.org-custom-fields-modal .modal-content {
  max-height: 90vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#bootstrap5Modal.org-custom-fields-modal .modal-body {
  overflow-y: auto !important;
  flex: 1 1 auto !important;
}

/* --- Form container — flex column, zero inherited gap --- */
#bootstrap5Modal .org-matters-custom-field-form {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-base) !important;
  color: var(--v2-text-1) !important;
}

/* --- Select elements: appearance reset + chevron (border/radius/height via .v2-input) --- */
#bootstrap5Modal .org-matters-custom-field-form select.v2-input {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  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 d='M3 4.5L6 7.5L9 4.5' stroke='%23737987' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px !important;
  padding: 6px var(--v2-space-4) !important;
  color: var(--v2-text-1) !important;
}

/* --- Checkbox (cfield-toggle-switch): v2 Checkbox pattern --- */
#bootstrap5Modal .org-matters-custom-field-form input.cfield-toggle-switch {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border: 1px solid var(--v2-border-checkbox) !important;
  border-radius: var(--v2-radius-checkbox) !important;
  background-color: var(--v2-surface-white) !important;
  cursor: pointer !important;
  margin: 0 var(--v2-space-3) 0 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  transition:
    background-color var(--v2-transition-base),
    border-color var(--v2-transition-base) !important;
  position: relative !important;
}

#bootstrap5Modal .org-matters-custom-field-form input.cfield-toggle-switch:checked {
  background-color: var(--v2-brand-green) !important;
  border-color: var(--v2-brand-green) !important;
  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 d='M2.5 6L5 8.5L9.5 3.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px !important;
}

/* --- Conditional field label --- */
#bootstrap5Modal .org-matters-custom-field-form .ocmf-conditional-label {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-1) !important;
  margin-bottom: var(--v2-space-2) !important;
  margin-top: var(--v2-space-3) !important;
}

/* --- Conditional wrapper full width --- */
#bootstrap5Modal .org-matters-custom-field-form .ocmf-conditional-wrapper {
  width: 100% !important;
}

#bootstrap5Modal .org-matters-custom-field-form .ocmf-conditional-wrapper #cf-cond-field {
  width: 100% !important;
}

#bootstrap5Modal .org-matters-custom-field-form .ocmf-conditional-wrapper #cf-cond-field select {
  width: 100% !important;
}

/* --- Add/Save Field button: override global .btn-success.btn specificity (style.css:7394) --- */
#bootstrap5Modal.org-custom-fields-modal #modal-new-org-custom-field {
  background-color: var(--v2-brand-green) !important;
  color: var(--v2-surface-white) !important;
}

#bootstrap5Modal.org-custom-fields-modal #modal-new-org-custom-field:hover,
#bootstrap5Modal.org-custom-fields-modal #modal-new-org-custom-field:focus {
  background-color: var(--v2-brand-green-hover) !important;
  color: var(--v2-surface-white) !important;
  text-decoration: none !important;
}

/* --- SelectList options container --- */
#bootstrap5Modal .org-matters-custom-field-form .org-custom-fields-multiple {
  margin-bottom: var(--v2-space-5) !important;
}

#bootstrap5Modal .org-matters-custom-field-form .org-custom-fields-multiple input.select-options {
  width: 100% !important;
  min-height: 40px !important;
  border: 1px solid var(--v2-border-input) !important;
  border-radius: var(--v2-radius-input) !important;
  padding: 0 var(--v2-space-4) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  color: var(--v2-text-1) !important;
  background-color: var(--v2-surface-white) !important;
  margin-bottom: var(--v2-space-2) !important;
  box-sizing: border-box !important;
}

/* =============================================================================
   14b. MATTER SETTINGS — DELETE FIELD MODAL (#bootstrap5Modal.delete-custom-field-modal)
   Same DeleteModal pattern as Section 13 (Delete Group).
   Delete button — .v2-btn-danger (applied in custom.js)
   Close button  — .v2-btn-secondary (applied in siteModalBS5.showModal)
   ============================================================================= */

/* --- Modal body — centered subtitle style --- */
#bootstrap5Modal.delete-custom-field-modal .modal-body {
  text-align: center !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-2) !important;
  padding: var(--v2-space-3) var(--v2-modal-padding-x) 0 var(--v2-modal-padding-x) !important;
}

/* =============================================================================
   15. CONTRACT TEMPLATES — ADD TEMPLATE FORM (#node-contract-form)
       CONTRACT TYPES — ADD TYPE FORM (#node-contract-type-form)
   Multi-step form: page 1 = Name, page 2 = Document / Description, page 3 = Field Settings.
   Source: org_detail_page.module → org_detail_page_form_node_contract_(type_)form_alter()
   CSS legacy: org_detail_page/css/style.css + legalconnect/style.css (progressbar, card, actions, CKEditor)
   Buttons:
     Next    — .v2-btn-primary  (applied in org_detail_page.module)
     Go Back — .v2-btn-secondary (applied in org_detail_page.module)
     Cancel  — .v2-btn-secondary (applied in org_detail_page.module)
   ============================================================================= */

/* --- Page card container --- */
#node-contract-form,
#node-contract-edit-form,
#node-contract-type-form,
#node-contract-type-edit-form {
  max-width: var(--v2-modal-width) !important;
  margin: var(--v2-space-8) auto !important;
  padding: var(--v2-space-8) 70px !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-modal) !important;
  background-color: var(--v2-surface-white) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* --- Page title --- */
#node-contract-form .page-cover-title,
#node-contract-type-form .page-cover-title,
#node-contract-type-edit-form .page-cover-title {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  font-weight: var(--v2-fw-bold) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  color: var(--v2-text-1) !important;
  text-align: center !important;
  margin-top: var(--v2-space-6) !important;
  margin-bottom: var(--v2-space-6) !important;
}

/* --- Form labels --- */
#node-contract-form .control-label,
#node-contract-type-form .control-label,
#node-contract-type-edit-form .control-label {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-1) !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  margin-bottom: var(--v2-space-2) !important;
  display: block !important;
  padding: 0 !important;
}

/* --- Text inputs --- */
#node-contract-form
  input.form-control:not([type='hidden']):not([type='submit']):not([type='checkbox']):not(
    [type='radio']
  ),
#node-contract-type-form
  input.form-control:not([type='hidden']):not([type='submit']):not([type='checkbox']):not(
    [type='radio']
  ),
#node-contract-type-edit-form
  input.form-control:not([type='hidden']):not([type='submit']):not([type='checkbox']):not(
    [type='radio']
  ) {
  min-height: var(--v2-input-height) !important;
  width: 100% !important;
  border: 1px solid var(--v2-border-input) !important;
  border-radius: var(--v2-radius-input) !important;
  padding: 0 var(--v2-space-4) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-1) !important;
  background-color: var(--v2-surface-white) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

#node-contract-form
  input.form-control:focus:not([type='hidden']):not([type='submit']):not([type='checkbox']):not(
    [type='radio']
  ),
#node-contract-type-form
  input.form-control:focus:not([type='hidden']):not([type='submit']):not([type='checkbox']):not(
    [type='radio']
  ),
#node-contract-type-edit-form
  input.form-control:focus:not([type='hidden']):not([type='submit']):not([type='checkbox']):not(
    [type='radio']
  ) {
  border-color: var(--v2-brand-green) !important;
  background-color: var(--v2-surface-white) !important;
  outline: none !important;
}

/* --- Helper / description text --- */
#node-contract-form .description,
#node-contract-form .help-block,
#node-contract-type-form .description,
#node-contract-type-form .help-block,
#node-contract-type-edit-form .description,
#node-contract-type-edit-form .help-block {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-2) !important;
  margin-top: var(--v2-space-1) !important;
}

/* --- Checkbox rows (Require review, Live) --- */
/* In Drupal Bootstrap 3, input[type=checkbox] is rendered INSIDE the label,
   so flex + gap must be applied to the label itself, not the wrapper div. */
#node-contract-form .form-type-checkbox,
#node-contract-form .checkbox.form-type-checkbox {
  margin-bottom: var(--v2-space-3) !important;
  padding-left: 0 !important;
}

#node-contract-form .form-type-checkbox label.control-label,
#node-contract-form .checkbox.form-type-checkbox label.control-label {
  display: flex !important;
  align-items: center !important;
  gap: var(--v2-space-3) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-1) !important;
  margin-bottom: 0 !important;
  cursor: pointer !important;
  padding: 0 !important;
  min-height: 0 !important;
}

#node-contract-form .form-type-checkbox input[type='checkbox'],
#node-contract-form .checkbox.form-type-checkbox input[type='checkbox'] {
  flex-shrink: 0 !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  position: static !important;
  float: none !important;
}

/* --- Actions / footer --- */
#node-contract-form .form-actions,
#node-contract-type-form .form-actions,
#node-contract-type-edit-form .form-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: var(--v2-space-6) !important;
}

/* --- CKEditor Description field (replaces textarea in contract-type form) --- */
#node-contract-form .ck.ck-editor,
#node-contract-type-form .ck.ck-editor,
#node-contract-type-edit-form .ck.ck-editor {
  border: none !important;
}

#node-contract-form .ck.ck-editor .ck-editor__main > .ck-content,
#node-contract-type-form .ck.ck-editor .ck-editor__main > .ck-content,
#node-contract-type-edit-form .ck.ck-editor .ck-editor__main > .ck-content {
  border: 1px solid var(--v2-border-input) !important;
  border-radius: var(--v2-radius-input) !important;
  min-height: var(--v2-textarea-min-height) !important;
  padding: var(--v2-space-4) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-1) !important;
  background-color: var(--v2-surface-white) !important;
  box-shadow: none !important;
}

#node-contract-form .ck.ck-editor .ck-editor__main > .ck-content:focus,
#node-contract-form .ck.ck-editor .ck-editor__main > .ck-content.ck-focused,
#node-contract-type-form .ck.ck-editor .ck-editor__main > .ck-content:focus,
#node-contract-type-form .ck.ck-editor .ck-editor__main > .ck-content.ck-focused,
#node-contract-type-edit-form .ck.ck-editor .ck-editor__main > .ck-content:focus,
#node-contract-type-edit-form .ck.ck-editor .ck-editor__main > .ck-content.ck-focused {
  border-color: var(--v2-brand-green) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* --- Hide CKEditor toolbar --- */
#node-contract-form .ck-editor__top,
#node-contract-type-form .ck-editor__top,
#node-contract-type-edit-form .ck-editor__top {
  display: none !important;
}

/* --- Hide Vertical Tabs section (contract type form only) --- */
#node-contract-type-form .form-type-vertical-tabs,
#node-contract-type-edit-form .form-type-vertical-tabs {
  display: none !important;
}

/* --- Helper text below text-format-wrapper --- */
#node-contract-type-form .text-format-wrapper .description,
#node-contract-type-form .text-format-wrapper .filter-wrapper,
#node-contract-type-edit-form .text-format-wrapper .description,
#node-contract-type-edit-form .text-format-wrapper .filter-wrapper {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-2) !important;
}

/* --- Form group spacing --- */
#node-contract-type-form .form-item.form-group,
#node-contract-type-form .js-text-format-wrapper,
#node-contract-type-edit-form .form-item.form-group,
#node-contract-type-edit-form .js-text-format-wrapper {
  margin-bottom: var(--v2-space-5) !important;
}

/* =============================================================================
   16. CONTRACT TEMPLATES — MANAGE FIELDS PAGE (#org-detail-page-contract-fields)
   Source: org_detail_page/src/Form/ContractFields.php
   CSS legacy: org_detail_page/css/style.css (card, actions flex)
   Buttons:
     Cancel — .v2-btn-secondary (applied in ContractFields.php)
     Save   — .v2-btn-primary   (applied in ContractFields.php)
   ============================================================================= */

/* --- Page card container --- */
#org-detail-page-contract-fields {
  max-width: var(--v2-modal-width) !important;
  margin: var(--v2-space-8) auto !important;
  padding: var(--v2-space-8) 70px !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-modal) !important;
  background-color: var(--v2-surface-white) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* --- Page title --- */
#org-detail-page-contract-fields .page-cover-title {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  font-weight: var(--v2-fw-bold) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  color: var(--v2-text-1) !important;
  text-align: center !important;
  margin-top: var(--v2-space-6) !important;
  margin-bottom: var(--v2-space-6) !important;
}

/* --- Actions / footer --- */
#org-detail-page-contract-fields .form-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: var(--v2-space-6) !important;
}

/* =============================================================================
   17. SHARED — DRUPAL DELETE CONFIRMATION PAGES (:is(form.node-confirm-form.confirmation, form#node-matter-delete-form))
   Contract Repo, Contract Templates, Contract Types, Contract Playbooks, Matters.
   v2 DeleteModal pattern rendered as a full page (not inside a modal overlay).
   Legacy: style.css (lines 8809–8943) — migrated here with CSS variable tokens.
   Buttons:
     Delete — .v2-btn-danger  (injected via PHP form alter in org_detail_page.module)
     Cancel — .v2-btn-secondary (injected via PHP form alter in org_detail_page.module)
   ============================================================================= */

/* --- Neutralize .region-content outer card so we don't double-wrap --- */
.region-content:has(> form.node-confirm-form),
.region-content:has(> form#node-matter-delete-form) {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

/* --- Hide Drupal h1 page-header and nav tabs above the form --- */
.region-content:has(> form.node-confirm-form) > h1.page-header,
.region-content:has(> form.node-confirm-form) > nav.tabs,
.region-content:has(> form#node-matter-delete-form) > h1.page-header,
.region-content:has(> form#node-matter-delete-form) > nav.tabs,
.region-content > h1.page-header:has(+ nav + form.node-confirm-form),
.region-content > h1.page-header:has(+ form.node-confirm-form),
.region-content > nav.tabs:has(+ form.node-confirm-form) {
  display: none !important;
}

/* --- Page card — centered, v2 DeleteModal dimensions --- */
:is(form.node-confirm-form.confirmation, form#node-matter-delete-form) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background-color: var(--v2-surface-white) !important;
  border: none !important;
  border-radius: var(--v2-radius-modal) !important;
  box-shadow: var(--v2-shadow-card) !important;
  max-width: 500px !important;
  margin: var(--v2-space-10) auto !important;
  padding: 50px 70px 0 70px !important;
  box-sizing: border-box !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-2) !important;
  text-align: center !important;
}

/* --- Trash icon circle (shown above .page-cover-title — v2 DeleteModal pattern) --- */
:is(form.node-confirm-form.confirmation, form#node-matter-delete-form):has(
    .page-cover-title
  )::before {
  content: '' !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background-color: rgba(255, 105, 82, 0.12) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FF6952' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 24px 24px !important;
  margin-bottom: var(--v2-space-5) !important;
  flex-shrink: 0 !important;
}

/* --- Page title (.page-cover-title injected via PHP) --- */
:is(form.node-confirm-form.confirmation, form#node-matter-delete-form) .page-cover-title {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  font-weight: var(--v2-fw-bold) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  color: var(--v2-text-1) !important;
  text-align: center !important;
  margin-bottom: var(--v2-space-3) !important;
  width: 100% !important;
}

/* --- Generic "Delete" title for forms that do not inject .page-cover-title --- */
:is(form.node-confirm-form.confirmation, form#node-matter-delete-form):not(
    :has(.page-cover-title)
  )::before {
  content: 'Delete' !important;
  display: block !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  font-weight: var(--v2-fw-bold) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  color: var(--v2-text-1) !important;
  text-align: center !important;
  margin-bottom: var(--v2-space-3) !important;
  width: 100% !important;
}

/* --- Hide hidden inputs from visual flow --- */
:is(form.node-confirm-form.confirmation, form#node-matter-delete-form) input[type='hidden'] {
  display: none !important;
}

/* --- Actions container — flex row, space-between, bottom padding --- */
:is(form.node-confirm-form.confirmation, form#node-matter-delete-form) #edit-actions {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-top: var(--v2-space-10) !important;
  padding: 0 0 var(--v2-space-10) 0 !important;
  border: none !important;
}

/* --- Delete/Submit button — .v2-btn-danger handles colors; add order + flex here --- */
:is(form.node-confirm-form.confirmation, form#node-matter-delete-form) #edit-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  order: 2 !important;
}

/* --- Hide the glyphicon-trash icon inside the Delete button --- */
:is(form.node-confirm-form.confirmation, form#node-matter-delete-form) #edit-submit .glyphicon {
  display: none !important;
}

/* --- Cancel link — .v2-btn-secondary handles colors; add order here --- */
:is(form.node-confirm-form.confirmation, form#node-matter-delete-form) #edit-cancel {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  order: 1 !important;
}

/* =============================================================================
   18. CONTRACT TYPES — ADD TYPE FIELDS PAGE (#org-detail-page-contract-type-fields)
   Step 2 of the "Add Contract Type" multi-step form. Source: ContractTypeFields.php
   CSS legacy: legalconnect/css/style.css (lines 9344–9478) — migrated with CSS variable tokens.
   Buttons:
     Go Back / Cancel — .v2-btn-secondary (applied via PHP ContractTypeFields.php)
     Save             — .v2-btn-primary   (applied via PHP ContractTypeFields.php)
   ============================================================================= */

/* --- Card container --- */
#org-detail-page-contract-type-fields {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background-color: var(--v2-surface-white) !important;
  border-radius: var(--v2-radius-modal) !important;
  box-shadow: var(--v2-shadow-card) !important;
  max-width: var(--v2-modal-width) !important;
  margin: var(--v2-space-10) auto !important;
  padding: var(--v2-space-10) 70px !important;
  box-sizing: border-box !important;
}

/* --- Page title --- */
#org-detail-page-contract-type-fields .page-cover-title {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  font-weight: var(--v2-fw-semibold) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  color: var(--v2-text-1) !important;
  text-align: center !important;
  margin-bottom: var(--v2-space-10) !important;
  width: 100% !important;
}

/* --- Table responsive — full width --- */
#org-detail-page-contract-type-fields .table-responsive {
  width: 100% !important;
}

/* --- Add Field link --- */
#org-detail-page-contract-type-fields #edit-add-field {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-brand-green) !important;
  text-decoration: none !important;
}

#org-detail-page-contract-type-fields #edit-add-field:hover {
  color: var(--v2-brand-green-hover) !important;
}

/* --- Add Field icon --- */
#org-detail-page-contract-type-fields .edit-add-field-i {
  color: var(--v2-brand-green) !important;
}

/* --- Actions container --- */
#org-detail-page-contract-type-fields #edit-actions {
  display: flex !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-top: var(--v2-space-6) !important;
  padding: 0 !important;
  border: none !important;
}

/* --- Hide glyphicon/icon span inside Save button --- */
#org-detail-page-contract-type-fields #edit-actions #edit-next .glyphicon,
#org-detail-page-contract-type-fields #edit-actions #edit-next .icon {
  display: none !important;
}

/* --- Settings link in table cells --- */
#org-detail-page-contract-type-fields td a.use-ajax {
  color: var(--v2-brand-green) !important;
  text-decoration: none !important;
  font-family: var(--v2-font) !important;
}

#org-detail-page-contract-type-fields td a.use-ajax:hover {
  color: var(--v2-brand-green-hover) !important;
}

/* =============================================================================
   19. ADD PRELOADED CONTRACT TYPE MODAL (form.org-detail-page-add-preloaded-contract-type)
   jQuery UI dialog opened from the Contract Types tab.
   CSS legacy: legalconnect/css/style.css (lines 10945–11142) — migrated with CSS variable tokens.
   JS injects:
     .v2-modal-header > .v2-modal-title + .v2-modal-subtitle  (Section 2 classes)
     .v2-btn-secondary                                         (Section 2 class, Cancel)
     .v2-preloaded-close                                       (close X button)
   PHP applies:
     .v2-btn-primary on #edit-submit                           (Section 2 class)
   ============================================================================= */

/* --- Dialog card (jQuery UI wrapper) --- */
.ui-dialog:has(form.org-detail-page-add-preloaded-contract-type) {
  width: var(--v2-modal-width-sm) !important;
  max-width: var(--v2-modal-width-sm) !important;
  background-color: var(--v2-surface-white) !important;
  border-radius: var(--v2-radius-modal) !important;
  border: none !important;
  box-shadow: var(--v2-shadow-card) !important;
  padding: var(--v2-space-10) 70px !important;
  font-family: var(--v2-font) !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  box-sizing: border-box !important;
  max-height: 90vh !important;
  overflow: hidden !important;
}

/* --- Hide default jQuery UI titlebar --- */
.ui-dialog:has(form.org-detail-page-add-preloaded-contract-type) .ui-dialog-titlebar {
  display: none !important;
}

/* --- Content area — zero padding, scrollable --- */
.ui-dialog:has(form.org-detail-page-add-preloaded-contract-type) .ui-dialog-content {
  padding: 0 !important;
  overflow-y: auto !important;
  max-height: calc(90vh - 200px) !important;
}

/* --- Hide jQuery UI buttonpane (buttons are inside the form) --- */
.ui-dialog:has(form.org-detail-page-add-preloaded-contract-type) .ui-dialog-buttonpane {
  display: none !important;
}

/* --- Close button (injected via JS as .v2-preloaded-close) --- */
.ui-dialog:has(form.org-detail-page-add-preloaded-contract-type) .v2-preloaded-close {
  position: absolute !important;
  top: var(--v2-space-4) !important;
  right: var(--v2-space-4) !important;
  width: 24px !important;
  height: 24px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 18px !important;
  line-height: 24px !important;
  color: var(--v2-text-2) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  transition: color 0.15s ease !important;
}

.ui-dialog:has(form.org-detail-page-add-preloaded-contract-type) .v2-preloaded-close:hover {
  color: var(--v2-text-1) !important;
}

/* --- ModalHeader spacing (injected via JS using Section 2 classes) --- */
.ui-dialog:has(form.org-detail-page-add-preloaded-contract-type) .v2-modal-header {
  text-align: center !important;
  margin-bottom: var(--v2-space-6) !important;
}

/* --- Actions container --- */
form.org-detail-page-add-preloaded-contract-type .form-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: var(--v2-space-6) !important;
  padding: 0 !important;
  border: none !important;
}

/* --- Primary button — scoped override to beat Bootstrap .btn/.btn-success specificity inside dialog --- */
form.org-detail-page-add-preloaded-contract-type .form-actions .v2-btn-primary {
  background-color: var(--v2-brand-green) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  height: var(--v2-btn-height) !important;
  min-width: 220px !important;
  padding: 0 var(--v2-space-5) !important;
  margin-top: 0 !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-surface-white) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color 0.2s ease !important;
}

form.org-detail-page-add-preloaded-contract-type
  .form-actions
  .v2-btn-primary:hover:not(:disabled) {
  background-color: var(--v2-brand-green-hover) !important;
}

form.org-detail-page-add-preloaded-contract-type .form-actions .v2-btn-primary:disabled {
  background-color: var(--v2-surface-disabled) !important;
  color: var(--v2-text-2) !important;
  cursor: not-allowed !important;
}

/* =============================================================================
   19b. V2 SELECTABLE CHECKLIST COMPONENT (.lc-list-all-matters context)
   Reusable styles for modal checklist rows using .lc-list-matters-item-v2 markup.
   Applies to any container with .lc-list-all-matters class (see AddPreloadedContractType.php).
   CSS legacy: legalconnect/css/style.css (lines 11051–11063) — migrated with CSS variable tokens.
   ============================================================================= */

/* --- Each row wrapper (.form-type-checkbox and .form-type-radio) --- */
#drupal-modal .lc-list-all-matters .form-type-checkbox,
#drupal-modal .lc-list-all-matters .form-type-radio {
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--v2-border-default) !important;
  cursor: pointer !important;
}

#drupal-modal .lc-list-all-matters .form-type-checkbox:last-child,
#drupal-modal .lc-list-all-matters .form-type-radio:last-child {
  border-bottom: none !important;
}

/* --- Label fills full row width --- */
#drupal-modal .lc-list-all-matters .form-type-checkbox label,
#drupal-modal .lc-list-all-matters .form-type-radio label {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Hide native checkbox/radio input (visual state shown by .checkmark span) --- */
#drupal-modal .lc-list-all-matters .form-type-checkbox input[type='checkbox'].form-checkbox,
#drupal-modal .lc-list-all-matters .form-type-radio input[type='radio'].form-radio {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* --- lc-list-matters-item-v2 — flex row, fills label width --- */
#drupal-modal .lc-list-all-matters .lc-list-matters-item-v2 {
  padding: 0 !important;
  border-bottom: none !important;
}

#drupal-modal .lc-list-all-matters .lc-list-matters-item-v2-inner {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

/* --- Icon badge container --- */
#drupal-modal .lc-list-all-matters .lc-matter-th-color-icon-wrap {
  flex-shrink: 0 !important;
}

/* --- Icon badge (background-color applied inline by PHP) --- */
#drupal-modal .lc-list-all-matters .lc-matter-th-color-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  border-radius: var(--v2-radius-card) !important;
  color: var(--v2-surface-white) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-bold) !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* --- Name area --- */
#drupal-modal .lc-list-all-matters .lc-list-matters-item-v2-right-first {
  flex: 1 !important;
  padding: 0 var(--v2-space-3) !important;
}

#drupal-modal .lc-list-all-matters .lc-list-matters-item-v2-matter-name {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-1) !important;
  line-height: var(--v2-lh-sm) !important;
}

/* --- Checkmark indicator (right column) --- */
#drupal-modal .lc-list-all-matters .lc-list-matters-item-v2-right {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#drupal-modal .lc-list-all-matters .checkmark {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
  border: 1px solid var(--v2-border-input) !important;
  background-color: var(--v2-surface-white) !important;
  flex-shrink: 0 !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease !important;
}

/* --- Checked state — SVG checkmark as background-image for perfect centering --- */
#drupal-modal .lc-list-all-matters .form-type-checkbox:has(input:checked) .checkmark,
#drupal-modal .lc-list-all-matters .form-type-radio:has(input:checked) .checkmark {
  background-color: var(--v2-brand-green) !important;
  border-color: var(--v2-brand-green) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 10px 8px !important;
}

#drupal-modal .lc-list-all-matters .form-type-checkbox:has(input:checked) .checkmark::after,
#drupal-modal .lc-list-all-matters .form-type-radio:has(input:checked) .checkmark::after {
  content: none !important;
}

/* =============================================================================
   20. CONTRACT PLAYBOOK FORM (form.add_contract_playbook_wrap_page_1 / _page_2)
   Multi-step form: page 1 = Name + Contract Type, page 2 = Rules.
   Source: org_detail_page.module → org_detail_page_form_node_contract_playbook_form_alter()
   CSS legacy: legalconnect/css/style.css (lines 10678–10943) — migrated with CSS variable tokens.
   Buttons:
     Next    — .v2-btn-primary  (applied in org_detail_page.module)
     Cancel  — .v2-btn-secondary (applied in org_detail_page.module)
     Go Back — .v2-btn-secondary (applied in org_detail_page.module)
     Save    — .v2-btn-primary   (applied in org_detail_page.module)
   ============================================================================= */

/* --- Page card container --- */
form.add_contract_playbook_wrap_page_1,
form.add_contract_playbook_wrap_page_2 {
  max-width: var(--v2-modal-width) !important;
  margin: var(--v2-space-8) auto !important;
  padding: var(--v2-space-8) 70px !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-modal) !important;
  background-color: var(--v2-surface-white) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* --- Page title --- */
form.add_contract_playbook_wrap_page_1 .page-cover-title,
form.add_contract_playbook_wrap_page_2 .page-cover-title {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  font-weight: var(--v2-fw-bold) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  color: var(--v2-text-1) !important;
  text-align: center !important;
  margin-top: var(--v2-space-6) !important;
  margin-bottom: var(--v2-space-6) !important;
}

/* --- Form labels --- */
form.add_contract_playbook_wrap_page_1 .control-label,
form.add_contract_playbook_wrap_page_2 .control-label {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-1) !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  margin-bottom: var(--v2-space-2) !important;
  display: block !important;
  padding: 0 !important;
}

/* --- Text inputs --- */
form.add_contract_playbook_wrap_page_1
  input.form-control:not([type='hidden']):not([type='submit']):not([type='checkbox']):not(
    [type='radio']
  ),
form.add_contract_playbook_wrap_page_2
  input.form-control:not([type='hidden']):not([type='submit']):not([type='checkbox']):not(
    [type='radio']
  ) {
  min-height: var(--v2-input-height) !important;
  width: 100% !important;
  border: 1px solid var(--v2-border-input) !important;
  border-radius: var(--v2-radius-input) !important;
  padding: 0 var(--v2-space-4) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-xs) !important;
  color: var(--v2-text-2) !important;
  background-color: var(--v2-surface-white) !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease-in-out !important;
}

form.add_contract_playbook_wrap_page_1 input.form-control:focus,
form.add_contract_playbook_wrap_page_2 input.form-control:focus {
  border-color: var(--v2-brand-green) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* --- Select --- */
form.add_contract_playbook_wrap_page_1 select.form-control,
form.add_contract_playbook_wrap_page_2 select.form-control {
  min-height: var(--v2-input-height) !important;
  width: 100% !important;
  border: 1px solid var(--v2-border-input) !important;
  border-radius: var(--v2-radius-input) !important;
  padding: var(--v2-space-2) var(--v2-space-4) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-xs) !important;
  color: var(--v2-text-2) !important;
  background-color: var(--v2-surface-white) !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color 0.15s ease-in-out !important;
}

form.add_contract_playbook_wrap_page_1 select.form-control:focus,
form.add_contract_playbook_wrap_page_2 select.form-control:focus {
  border-color: var(--v2-brand-green) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* --- Hide Drupal vertical tabs --- */
form.add_contract_playbook_wrap_page_1 .form-type-vertical-tabs,
form.add_contract_playbook_wrap_page_2 .form-type-vertical-tabs {
  display: none !important;
}

/* --- Form group spacing --- */
form.add_contract_playbook_wrap_page_1 .form-item.form-group,
form.add_contract_playbook_wrap_page_2 .form-item.form-group {
  margin-bottom: var(--v2-space-5) !important;
}

/* --- Actions container --- */
form.add_contract_playbook_wrap_page_1 #edit-actions,
form.add_contract_playbook_wrap_page_2 #edit-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: var(--v2-space-6) !important;
  padding: 0 !important;
  border: none !important;
}

/* --- Primary button scoped override (beats Bootstrap .btn/.btn-success inside form) --- */
form.add_contract_playbook_wrap_page_1 #edit-actions .v2-btn-primary,
form.add_contract_playbook_wrap_page_2 #edit-actions .v2-btn-primary {
  background-color: var(--v2-brand-green) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  height: var(--v2-btn-height) !important;
  min-width: 140px !important;
  padding: 0 var(--v2-space-5) !important;
  margin-top: 0 !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-surface-white) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
}

form.add_contract_playbook_wrap_page_1 #edit-actions .v2-btn-primary:hover:not(:disabled),
form.add_contract_playbook_wrap_page_2 #edit-actions .v2-btn-primary:hover:not(:disabled) {
  background-color: var(--v2-brand-green-hover) !important;
  color: var(--v2-surface-white) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* --- Secondary button scoped override --- */
form.add_contract_playbook_wrap_page_1 #edit-actions .v2-btn-secondary,
form.add_contract_playbook_wrap_page_2 #edit-actions .v2-btn-secondary {
  background-color: var(--v2-surface-secondary) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  height: var(--v2-btn-height) !important;
  min-width: 140px !important;
  padding: 0 var(--v2-space-5) !important;
  margin-top: 0 !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
}

form.add_contract_playbook_wrap_page_1 #edit-actions .v2-btn-secondary:hover,
form.add_contract_playbook_wrap_page_2 #edit-actions .v2-btn-secondary:hover {
  background-color: var(--v2-surface-disabled) !important;
  color: var(--v2-text-1) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* =============================================================================
   20b. RULES PARAGRAPH WIDGET — Step 2
   Source: #field-rules-values (Drupal paragraphs table widget)
   Layout: Rule prompt (full), Type | Expected Answer (2-col), Redline (full), Priority (full)
   ============================================================================= */

/* --- Hide Drupal utility UI elements --- */
form.add_contract_playbook_wrap_page_2 .paragraphs-tabs,
form.add_contract_playbook_wrap_page_2 .paragraphs-tabs-hide,
form.add_contract_playbook_wrap_page_2 .tabledrag-toggle-weight,
form.add_contract_playbook_wrap_page_2 .tableresponsive-toggle-columns,
form.add_contract_playbook_wrap_page_2 #edit-field-rules-wrapper thead,
form.add_contract_playbook_wrap_page_2 .field-multiple-drag,
form.add_contract_playbook_wrap_page_2 .paragraph-info,
form.add_contract_playbook_wrap_page_2 .paragraph-summary,
form.add_contract_playbook_wrap_page_2 #edit-field-rules-wrapper > .control-label {
  display: none !important;
}

/* --- Outer field wrapper --- */
form.add_contract_playbook_wrap_page_2 .field--widget-paragraphs,
form.add_contract_playbook_wrap_page_2 .field--widget-paragraphs .form-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- Table: strip Bootstrap table-striped / table-hover colors --- */
form.add_contract_playbook_wrap_page_2 #edit-field-rules-wrapper table {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

form.add_contract_playbook_wrap_page_2 #edit-field-rules-wrapper tbody tr,
form.add_contract_playbook_wrap_page_2 #edit-field-rules-wrapper tbody tr > td {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* --- Rule item inner padding --- */
form.add_contract_playbook_wrap_page_2 #edit-field-rules-wrapper tbody tr > td:last-child > div {
  padding: var(--v2-space-5) 0 !important;
}

/* --- Paragraph top bar: Rule label + actions --- */
form.add_contract_playbook_wrap_page_2 .paragraph-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: var(--v2-space-4) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

form.add_contract_playbook_wrap_page_2 .paragraph-type {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Separator: border-top on RULE label bar for non-first rules (must follow paragraph-top border:none) --- */
form.add_contract_playbook_wrap_page_2 #edit-field-rules-wrapper tbody tr + tr .paragraph-top {
  border-top: 1px solid var(--v2-border-default) !important;
  padding-top: var(--v2-space-4) !important;
}

form.add_contract_playbook_wrap_page_2 .paragraph-type-label {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-bold) !important;
  color: var(--v2-text-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* --- Paragraphs actions (Collapse + 3-dot) --- */
form.add_contract_playbook_wrap_page_2 .paragraphs-actions {
  display: flex !important;
  align-items: center !important;
  gap: var(--v2-space-2) !important;
  flex-shrink: 0 !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-icon-button-collapse {
  height: 32px !important;
  min-width: 80px !important;
  padding: 0 var(--v2-space-3) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-2) !important;
  background-color: var(--v2-surface-secondary) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.15s ease !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-icon-button-collapse:hover {
  background-color: var(--v2-surface-disabled) !important;
  color: var(--v2-text-1) !important;
}

/* --- 3-dot dropdown toggle --- */
form.add_contract_playbook_wrap_page_2 .paragraphs-dropdown {
  position: relative !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-dropdown-toggle {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  /* Do NOT override background / background-image here. The contrib
     paragraphs widget paints the 3-dot icon via background-image on
     this exact element, so blanking it out hides the toggle (and with
     it the Remove / Duplicate dropdown actions). */
  border: none !important;
  border-radius: var(--v2-radius-card) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--v2-text-2) !important;
  box-shadow: none !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-dropdown-toggle:hover {
  background-color: var(--v2-surface-secondary) !important;
  color: var(--v2-text-1) !important;
}

/* --- Dropdown panel --- */
form.add_contract_playbook_wrap_page_2 .paragraphs-dropdown-actions {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 4px) !important;
  background-color: var(--v2-surface-white) !important;
  border-radius: var(--v2-radius-card) !important;
  box-shadow: var(--v2-shadow-dropdown) !important;
  padding: var(--v2-space-2) !important;
  width: 140px !important;
  z-index: 100 !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-dropdown-action {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-1) !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 4px var(--v2-space-2) !important;
  margin-bottom: 2px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background-color 0.15s ease !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-dropdown-action:last-child {
  margin-bottom: 0 !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-dropdown-action:hover {
  background-color: var(--v2-surface-secondary) !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-dropdown-action.btn-danger {
  color: var(--v2-brand-red) !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-dropdown-action.btn-danger:hover {
  background-color: rgba(255, 105, 82, 0.08) !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-dropdown-action .glyphicon {
  display: none !important;
}

/* --- Subform background/padding reset --- */
form.add_contract_playbook_wrap_page_2 .paragraphs-subform,
form.add_contract_playbook_wrap_page_2 .paragraphs-subform .form-wrapper,
form.add_contract_playbook_wrap_page_2 .paragraphs-subform .paragraphs-content {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* --- Subform 2-column grid layout --- */
form.add_contract_playbook_wrap_page_2 .paragraphs-subform {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: var(--v2-space-5) !important;
  row-gap: 0 !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-subform .field--name-field-name,
form.add_contract_playbook_wrap_page_2 .paragraphs-subform .field--name-field-proposed-redline,
form.add_contract_playbook_wrap_page_2 .paragraphs-subform .field--name-field-priority {
  grid-column: 1 / -1 !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-subform .field--name-field-type {
  grid-column: 1 / 2 !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-subform [id^='field-expected-answer-wrapper'] {
  grid-column: 2 / 3 !important;
}

/* --- Textarea (Proposed Redline) --- */
form.add_contract_playbook_wrap_page_2 .paragraphs-subform textarea.form-control {
  min-height: 90px !important;
  width: 100% !important;
  border: 1px solid var(--v2-border-input) !important;
  border-radius: var(--v2-radius-input) !important;
  padding: var(--v2-space-3) var(--v2-space-4) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-xs) !important;
  color: var(--v2-text-2) !important;
  background-color: var(--v2-surface-white) !important;
  box-shadow: none !important;
  resize: none !important;
  transition: border-color 0.15s ease-in-out !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-subform textarea.form-control:focus {
  border-color: var(--v2-brand-green) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* --- Rule Prompt + Proposed Redline: always-on AI sparkle border (reuse Section 38) --- */
form.add_contract_playbook_wrap_page_2
  .paragraphs-subform
  .field--name-field-name
  input.form-control,
form.add_contract_playbook_wrap_page_2
  .paragraphs-subform
  .field--name-field-proposed-redline
  textarea.form-control,
form.add_contract_playbook_wrap_page_2
  [id^=\"edit-field-rules\"][id*=\"field-name\"][id$=\"value\"][type=\"text\"],
form.add_contract_playbook_wrap_page_2
  [id^=\"edit-field-rules\"][id*=\"field-proposed-redline\"][id$=\"value\"] {
  border: 2px solid transparent !important;
  border-radius: var(--v2-radius-input) !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(
        from var(--ai-spin-angle),
        var(--ai-color-1),
        var(--ai-color-2),
        var(--ai-color-1),
        var(--ai-color-2),
        var(--ai-color-1)
      )
      border-box !important;
  background-clip: padding-box, border-box !important;
  background-origin: padding-box, border-box !important;
  animation: ai-spin var(--ai-spin-duration) linear infinite !important;
  box-shadow: none !important;
  padding: var(--v2-space-3) var(--v2-space-4) !important;
}

form.add_contract_playbook_wrap_page_2
  .paragraphs-subform
  .field--name-field-name
  input.form-control:focus,
form.add_contract_playbook_wrap_page_2
  .paragraphs-subform
  .field--name-field-proposed-redline
  textarea.form-control:focus,
form.add_contract_playbook_wrap_page_2
  [id^=\"edit-field-rules\"][id*=\"field-name\"][id$=\"value\"][type=\"text\"]:focus,
form.add_contract_playbook_wrap_page_2
  [id^=\"edit-field-rules\"][id*=\"field-proposed-redline\"][id$=\"value\"]:focus {
  animation-duration: var(--ai-spin-duration-focus) !important;
  box-shadow: var(--ai-focus-glow) !important;
  outline: none !important;
}

/* Safety net: target Drupal text-full inputs inside rules widget */
form.add_contract_playbook_wrap_page_2
  .paragraphs-subform
  .field--name-field-name
  input.js-text-full.text-full.form-control {
  border: 2px solid transparent !important;
  border-radius: var(--v2-radius-input) !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(
        from var(--ai-spin-angle),
        var(--ai-color-1),
        var(--ai-color-2),
        var(--ai-color-1),
        var(--ai-color-2),
        var(--ai-color-1)
      )
      border-box !important;
  background-clip: padding-box, border-box !important;
  background-origin: padding-box, border-box !important;
  animation: ai-spin var(--ai-spin-duration) linear infinite !important;
  box-shadow: none !important;
  padding: var(--v2-space-3) var(--v2-space-4) !important;
}

form.add_contract_playbook_wrap_page_2
  .paragraphs-subform
  input.js-text-full.text-full.form-control:focus {
  animation-duration: var(--ai-spin-duration-focus) !important;
  box-shadow: var(--ai-focus-glow) !important;
  outline: none !important;
}

/* --- Contract Type form: Description (body) — AI sparkle border (reuse Section 38)
   Targets the visible CKEditor surface (`.ck-content`) — the underlying
   textarea #edit-body-0-value is hidden by CKEditor and would paint nothing.
   Selector mirrors the competitor at line ~2583 to match its specificity
   (0,1,4,0) and win via cascade order. */
#node-contract-type-form .ck.ck-editor .ck-editor__main > .ck-content {
  border: 2px solid transparent !important;
  border-radius: 12px !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(
        from var(--ai-spin-angle),
        var(--ai-color-1),
        var(--ai-color-2),
        var(--ai-color-1),
        var(--ai-color-2),
        var(--ai-color-1)
      )
      border-box !important;
  background-clip: padding-box, border-box !important;
  background-origin: padding-box, border-box !important;
  animation: ai-spin var(--ai-spin-duration) linear infinite !important;
  box-shadow: none !important;
}

/* CKEditor adds `.ck-focused` on focus. Override line ~2603 which would
   otherwise force border-color to brand-green and hide the gradient. */
#node-contract-type-form .ck.ck-editor .ck-editor__main > .ck-content.ck-focused {
  border-color: transparent !important;
  animation-duration: var(--ai-spin-duration-focus) !important;
  box-shadow: var(--ai-focus-glow) !important;
  outline: none !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-subform .form-textarea-wrapper {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* --- input-group (Type select + AJAX throbber) --- */
form.add_contract_playbook_wrap_page_2 .paragraphs-subform .input-group {
  width: 100% !important;
  display: block !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-subform .input-group .select-wrapper {
  width: 100% !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-subform .input-group-addon {
  display: none !important;
}

/* --- Expected Answer fieldset reset --- */
form.add_contract_playbook_wrap_page_2 .paragraphs-subform fieldset.fieldgroup {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-subform fieldset.fieldgroup legend {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-1) !important;
  margin-bottom: var(--v2-space-2) !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
  border: none !important;
  background: transparent !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-subform .fieldset-wrapper {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* --- Radio button group: horizontal layout --- */
form.add_contract_playbook_wrap_page_2
  .paragraphs-subform
  [id*='field-expected-answer']:not([id*='wrapper']):not(fieldset) {
  display: flex !important;
  gap: var(--v2-space-4) !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-subform .form-type-radio {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-subform .form-type-radio label.control-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--v2-space-2) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-1) !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

form.add_contract_playbook_wrap_page_2 .paragraphs-subform .form-radio {
  position: static !important;
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--v2-brand-green) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* --- "Add Rule" button --- */
form.add_contract_playbook_wrap_page_2 .field-add-more-submit {
  height: var(--v2-btn-height) !important;
  min-width: 140px !important;
  padding: 0 var(--v2-space-5) !important;
  margin-top: var(--v2-space-4) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-1) !important;
  background-color: var(--v2-surface-secondary) !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  border-radius: var(--v2-radius-btn) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s ease !important;
}

form.add_contract_playbook_wrap_page_2 .field-add-more-submit:hover {
  background-color: var(--v2-surface-disabled) !important;
  color: var(--v2-text-1) !important;
  border-color: transparent !important;
  margin-top: var(--v2-space-4) !important;
}

/* =============================================================================
   CONTRACT REPOSITORY FORM — /node/add/contract_repository
   (form#node-contract-repository-form & form#node-contract-repository-edit-form)
   ============================================================================= */

/* --- Labels --- */
form#node-contract-repository-form label.control-label,
form#node-contract-repository-edit-form label.control-label {
  font-size: var(--v2-text-sm) !important;
  line-height: var(--v2-lh-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-1) !important;
  font-family: var(--v2-font) !important;
  margin-bottom: var(--v2-space-2) !important;
  display: block !important;
  background-color: transparent !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Hide the asterisk injected by Bootstrap for required fields */
form#node-contract-repository-form label.control-label.form-required::after,
form#node-contract-repository-edit-form label.control-label.form-required::after {
  color: var(--v2-brand-red) !important;
}

/* --- Field group spacing --- */
form#node-contract-repository-form .form-group,
form#node-contract-repository-edit-form .form-group {
  margin-bottom: var(--v2-space-5) !important;
}

/* --- Text inputs --- */
form#node-contract-repository-form input.form-control,
form#node-contract-repository-edit-form input.form-control {
  width: 100% !important;
  height: var(--v2-input-height) !important;
  padding: var(--v2-input-padding) !important;
  font-size: var(--v2-text-sm) !important;
  line-height: var(--v2-lh-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-1) !important;
  font-family: var(--v2-font) !important;
  background-color: var(--v2-surface-white) !important;
  border: 1px solid var(--v2-border-input) !important;
  border-radius: var(--v2-radius-input) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color var(--v2-transition-fast) !important;
}

form#node-contract-repository-form input.form-control:focus,
form#node-contract-repository-edit-form input.form-control:focus {
  border-color: var(--v2-border-focus) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* --- Select wrapper reset (Bootstrap adds an inner wrapper) --- */
form#node-contract-repository-form .select-wrapper,
form#node-contract-repository-edit-form .select-wrapper {
  display: block !important;
  height: auto !important;
}

/* --- Selects --- */
form#node-contract-repository-form select.form-control,
form#node-contract-repository-edit-form select.form-control {
  width: 100% !important;
  height: var(--v2-input-height) !important;
  padding: 0 36px 0 16px !important;
  font-size: var(--v2-text-sm) !important;
  line-height: var(--v2-lh-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-1) !important;
  font-family: var(--v2-font) !important;
  background-color: var(--v2-surface-white) !important;
  border: 1px solid var(--v2-border-input) !important;
  border-radius: var(--v2-radius-input) !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23737987' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  cursor: pointer !important;
  transition: border-color var(--v2-transition-fast) !important;
}

form#node-contract-repository-form select.form-control:focus,
form#node-contract-repository-edit-form select.form-control:focus {
  border-color: var(--v2-border-focus) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* File dropzone: .v2-file-dropzone utility class handles all Uppy styling (see Section 2).
   The rules below only override what Uppy injects via inline styles (height: 550px),
   which requires !important even without the utility class on the wrapper. */
form#node-contract-repository-form .uppy-Dashboard,
form#node-contract-repository-edit-form .uppy-Dashboard {
  border: none !important;
  box-shadow: none !important;
}

form#node-contract-repository-form .uppy-Dashboard-inner,
form#node-contract-repository-edit-form .uppy-Dashboard-inner {
  height: var(--v2-uppy-height) !important;
  width: 100% !important;
  background-color: var(--v2-surface-white) !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
}

form#node-contract-repository-form .uppy-Dashboard-innerWrap,
form#node-contract-repository-edit-form .uppy-Dashboard-innerWrap {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

form#node-contract-repository-form .uppy-Dashboard-AddFiles,
form#node-contract-repository-edit-form .uppy-Dashboard-AddFiles {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

form#node-contract-repository-form .uppy-Dashboard-AddFiles-list,
form#node-contract-repository-edit-form .uppy-Dashboard-AddFiles-list {
  flex: 0 0 auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Actions container --- */
form#node-contract-repository-form .form-actions,
form#node-contract-repository-edit-form .form-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: var(--v2-space-6) !important;
  margin-bottom: 0 !important;
  gap: var(--v2-space-2) !important;
  width: 100% !important;
}

/* --- Save button (primary) --- */
form#node-contract-repository-form .form-actions button[type='submit'],
form#node-contract-repository-edit-form .form-actions button[type='submit'] {
  height: var(--v2-btn-height) !important;
  min-width: var(--v2-btn-min-width) !important;
  padding: var(--v2-btn-padding) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  font-family: var(--v2-font) !important;
  color: var(--v2-surface-white) !important;
  background-color: var(--v2-brand-green) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  transition: background-color var(--v2-transition-base) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

form#node-contract-repository-form .form-actions button[type='submit']:hover,
form#node-contract-repository-form .form-actions button[type='submit']:focus,
form#node-contract-repository-edit-form .form-actions button[type='submit']:hover,
form#node-contract-repository-edit-form .form-actions button[type='submit']:focus {
  background-color: var(--v2-brand-green-hover) !important;
  color: var(--v2-surface-white) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Hide the glyphicon inside the Save button */
form#node-contract-repository-form .form-actions button[type='submit'] .icon,
form#node-contract-repository-edit-form .form-actions button[type='submit'] .icon {
  display: none !important;
}

/* Hide Delete button on the edit form */
form#node-contract-repository-edit-form .form-actions a.btn-danger,
form#node-contract-repository-edit-form .form-actions a#edit-delete {
  display: none !important;
}

/* =============================================================================
   22. UPLOAD NEW VERSION FORM (form#node-file-versions-form)
   Source: file_version_control.module → file_version_control_form_node_file_versions_form_alter()
   CSS legacy: style.css lines 9765–9791 — migrated with CSS variable tokens.
   ============================================================================= */

/* --- Page card container --- */
.upload-new-version-wrap {
  max-width: var(--v2-modal-width) !important;
  margin: var(--v2-space-8) auto !important;
  padding: var(--v2-space-8) 70px !important;
  background-color: var(--v2-surface-white) !important;
  border-radius: var(--v2-radius-card) !important;
  box-shadow: var(--v2-shadow-card) !important;
}

/* --- Neutralize form.node-form generic card styling (from style.css form.node-form rule).
   Must use form ID for specificity (1,1,1) to beat style.css selector at (0,3,1). --- */
.upload-new-version-wrap form#node-file-versions-form {
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* --- Neutralize the outer region-content white card (from style2.css body.node-add-file-versions rule) --- */
.region-content:has(> .upload-new-version-wrap) {
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* --- Hide the raw Drupal page headers (h1 outside card, h2 auto-rendered inside form) --- */
.region-content:has(.upload-new-version-wrap) > h1.page-header,
.upload-new-version-wrap h2 {
  display: none !important;
}

/* --- Restore Upload requirements link (hidden globally by style.css .field--name-field-upload-new-file .description) --- */
.upload-new-version-wrap .field--name-field-upload-new-file .description {
  display: block !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  line-height: var(--v2-lh-xs) !important;
  color: var(--v2-text-2) !important;
  margin-top: var(--v2-space-2) !important;
}

/* --- Form labels --- */
.upload-new-version-wrap .control-label {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-1) !important;
  margin-bottom: var(--v2-space-2) !important;
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: block !important;
}

/* --- Form group spacing --- */
.upload-new-version-wrap .form-item.form-group {
  margin-bottom: var(--v2-space-5) !important;
}

/* --- Uppy inline height override (.v2-file-dropzone utility handles all other Uppy styles) --- */
.upload-new-version-wrap .uppy-Dashboard {
  border: none !important;
  box-shadow: none !important;
}

.upload-new-version-wrap .uppy-Dashboard-inner {
  height: var(--v2-uppy-height) !important;
  width: 100% !important;
  background-color: var(--v2-surface-white) !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
}

.upload-new-version-wrap .uppy-Dashboard-innerWrap {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.upload-new-version-wrap .uppy-Dashboard-AddFiles {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

.upload-new-version-wrap .uppy-Dashboard-AddFiles-list {
  flex: 0 0 auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Actions container --- */
.upload-new-version-wrap #edit-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: var(--v2-space-6) !important;
  margin-bottom: 0 !important;
  gap: var(--v2-space-2) !important;
}

/* --- Button base alignment --- */
.upload-new-version-wrap #edit-actions a.v2-cancel-btn,
.upload-new-version-wrap #edit-actions button.v2-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* --- Primary (Save) button --- */
.upload-new-version-wrap #edit-actions button.v2-btn-primary {
  height: var(--v2-btn-height) !important;
  min-width: var(--v2-btn-min-width) !important;
  padding: var(--v2-btn-padding) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  font-family: var(--v2-font) !important;
  color: var(--v2-surface-white) !important;
  background-color: var(--v2-brand-green) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  transition: background-color var(--v2-transition-base) !important;
}

.upload-new-version-wrap #edit-actions button.v2-btn-primary:hover,
.upload-new-version-wrap #edit-actions button.v2-btn-primary:focus {
  background-color: var(--v2-brand-green-hover) !important;
  color: var(--v2-surface-white) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Hide glyphicon inside Save button */
.upload-new-version-wrap #edit-actions button.v2-btn-primary .icon,
.upload-new-version-wrap #edit-actions button.v2-btn-primary .glyphicon {
  display: none !important;
}

/* --- Secondary (Cancel) button --- */
.upload-new-version-wrap #edit-actions a.v2-cancel-btn {
  height: var(--v2-btn-height) !important;
  min-width: var(--v2-btn-min-width) !important;
  padding: var(--v2-btn-padding) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  font-family: var(--v2-font) !important;
  color: var(--v2-text-1) !important;
  background-color: var(--v2-surface-secondary) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color var(--v2-transition-base) !important;
}

.upload-new-version-wrap #edit-actions a.v2-cancel-btn:hover,
.upload-new-version-wrap #edit-actions a.v2-cancel-btn:focus {
  background-color: var(--v2-surface-disabled) !important;
  color: var(--v2-text-1) !important;
  box-shadow: none !important;
  outline: none !important;
  text-decoration: none !important;
}

/* =============================================================================
   23. VERSION HISTORY FORM (form.file-version-control-file-versions)
   Source: FileVersionsForm.php
   CSS legacy: style.css lines 9765–9963 — migrated with CSS variable tokens.
   ============================================================================= */

/* --- Neutralize outer region-content white card --- */
.region-content:has(> form.file-version-control-file-versions) {
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* --- Hide raw Drupal h1 page-header --- */
.region-content:has(> form.file-version-control-file-versions) > h1.page-header {
  display: none !important;
}

/* --- Form card wrapper --- */
form.file-version-control-file-versions {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background-color: var(--v2-surface-white) !important;
  border-radius: var(--v2-radius-modal) !important;
  box-shadow: var(--v2-shadow-dropdown) !important;
  max-width: var(--v2-modal-width) !important;
  width: 100% !important;
  margin: var(--v2-space-8) auto !important;
  padding: var(--v2-space-8) 70px !important;
  box-sizing: border-box !important;
  font-family: var(--v2-font) !important;
}

/* --- V2 ModalHeader (injected via JS) --- */
form.file-version-control-file-versions .version-history-header {
  text-align: center !important;
  margin-bottom: var(--v2-space-6) !important;
  width: 100% !important;
}

form.file-version-control-file-versions .version-history-header .vh-title {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  font-weight: var(--v2-fw-semibold) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  color: var(--v2-text-1) !important;
  margin: 0 !important;
}

form.file-version-control-file-versions .version-history-header .vh-subtitle {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-2) !important;
  margin-top: var(--v2-space-2) !important;
  margin-bottom: 0 !important;
}

/* --- Date group headings (h6) --- */
form.file-version-control-file-versions h6 {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-top: var(--v2-space-6) !important;
  margin-bottom: var(--v2-space-3) !important;
}

form.file-version-control-file-versions #edit-file-table > div > h6:first-child {
  margin-top: 0 !important;
}

/* --- Table wrapper — full width --- */
form.file-version-control-file-versions .table-responsive,
form.file-version-control-file-versions #edit-file-table {
  width: 100% !important;
}

/* --- Table base --- */
form.file-version-control-file-versions table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  background-color: transparent !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

/* --- Table column headers --- */
form.file-version-control-file-versions table thead th {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-2) !important;
  padding: var(--v2-space-3) var(--v2-space-4) !important;
  border-bottom: 1px solid var(--v2-border-default) !important;
  background-color: var(--v2-surface-secondary) !important;
  text-align: left !important;
  white-space: nowrap !important;
  background-image: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

/* --- Table body rows --- */
form.file-version-control-file-versions table tbody tr {
  background-color: var(--v2-surface-white) !important;
  background-image: none !important;
}

form.file-version-control-file-versions table tbody tr:hover {
  background-color: var(--v2-surface-bg) !important;
}

form.file-version-control-file-versions table tbody td {
  font-size: var(--v2-text-sm) !important;
  color: var(--v2-text-1) !important;
  padding: var(--v2-space-4) var(--v2-space-4) !important;
  border-bottom: 1px solid var(--v2-border-default) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  background-color: transparent !important;
  vertical-align: middle !important;
}

form.file-version-control-file-versions table tbody tr:last-child td {
  border-bottom: none !important;
}

/* --- File name link (column 1, first line) --- */
form.file-version-control-file-versions .vh-filename-link {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-brand-green) !important;
  text-decoration: none !important;
  display: block !important;
}

form.file-version-control-file-versions .vh-filename-link:hover {
  text-decoration: underline !important;
  color: var(--v2-brand-green-hover) !important;
}

/* --- File time (column 1, second line) --- */
form.file-version-control-file-versions .vh-file-time {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-2) !important;
  display: block !important;
  margin-top: var(--v2-space-1) !important;
}

/* --- Uploaded by label (column 2, first line) --- */
form.file-version-control-file-versions .vh-added-label {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-2) !important;
  display: block !important;
  margin-bottom: var(--v2-space-1) !important;
}

/* --- Uploaded by name (column 2, second line) --- */
form.file-version-control-file-versions .vh-added-name {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-1) !important;
  display: block !important;
}

/* --- Current Version badge (disabled button) --- */
form.file-version-control-file-versions table button.is-disabled {
  height: 32px !important;
  padding: 0 var(--v2-space-3) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-medium) !important;
  font-family: var(--v2-font) !important;
  color: var(--v2-text-2) !important;
  background-color: var(--v2-surface-secondary) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: default !important;
  opacity: 1 !important;
  white-space: nowrap !important;
}

/* --- Restore button (available previous versions) --- */
form.file-version-control-file-versions table button.btn-success {
  height: 32px !important;
  padding: 0 var(--v2-space-3) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-medium) !important;
  font-family: var(--v2-font) !important;
  color: var(--v2-surface-white) !important;
  background-color: var(--v2-brand-green) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  opacity: 1 !important;
  white-space: nowrap !important;
  transition: background-color var(--v2-transition-base) !important;
}

form.file-version-control-file-versions table button.btn-success:hover {
  background-color: var(--v2-brand-green-hover) !important;
}

/* --- Actions container --- */
form.file-version-control-file-versions #edit-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: var(--v2-space-6) !important;
  margin-bottom: 0 !important;
}

/* --- Button base alignment --- */
form.file-version-control-file-versions #edit-actions a.v2-cancel-btn,
form.file-version-control-file-versions #edit-actions a.v2-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* =============================================================================
   24. RENAME CONTRACT MODAL (#siteModal.rename-contract-modal)
   Source: custom.js — siteModalManager.showModal() + shown.bs.modal handler
   CSS legacy: style.css lines 9765–9968 — migrated with CSS variable tokens.
   ============================================================================= */

/* --- Modal dialog — sizing and centering --- */
.rename-contract-modal .modal-dialog {
  max-width: var(--v2-modal-width-sm) !important;
  width: 600px !important;
  margin: auto !important;
}

/* --- Modal content card — V2 ModalRenderer --- */
.rename-contract-modal .modal-content {
  background-color: var(--v2-surface-white) !important;
  border-radius: var(--v2-radius-modal) !important;
  border: none !important;
  box-shadow: var(--v2-shadow-dropdown) !important;
  padding: var(--v2-space-10) 70px !important;
  font-family: var(--v2-font) !important;
  position: relative !important;
}

/* --- Hide default Bootstrap modal header --- */
.rename-contract-modal .modal-header {
  display: none !important;
}

/* --- V2 ModalHeader (injected by JS shown.bs.modal handler) --- */
.rename-contract-modal .rename-modal-header {
  text-align: center !important;
  margin-bottom: var(--v2-space-10) !important;
  width: 100% !important;
}

.rename-contract-modal .rename-modal-header .rm-title {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  font-weight: var(--v2-fw-semibold) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  color: var(--v2-text-1) !important;
  margin: 0 !important;
}

.rename-contract-modal .rename-modal-header .rm-subtitle {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-2) !important;
  margin-top: var(--v2-space-2) !important;
  margin-bottom: 0 !important;
}

/* --- V2 close button (injected by JS, absolute top-right) --- */
.rename-contract-modal .v2-modal-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 24px !important;
  height: 24px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  color: var(--v2-text-2) !important;
  font-size: 18px !important;
  line-height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  text-shadow: none !important;
  transition: color var(--v2-transition-base) !important;
  z-index: 10 !important;
}

.rename-contract-modal .v2-modal-close:hover {
  color: var(--v2-text-1) !important;
}

/* --- Modal body --- */
.rename-contract-modal .modal-body {
  padding: 0 !important;
  font-family: var(--v2-font) !important;
}

/* --- "Current name:" div — hidden (filename already shown in .rm-subtitle header) --- */
.rename-contract-modal .modal-body > div:first-child {
  display: none !important;
}

/* --- "New name:" row (label + input + extension) --- */
.rename-contract-modal .modal-body > div:nth-child(2) {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-1) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--v2-space-2) !important;
  margin-bottom: 0 !important;
}

/* --- Input field --- */
.rename-contract-modal #rename-contract-textfield {
  flex: 1 !important;
  min-height: var(--v2-input-height) !important;
  border: 1px solid var(--v2-border-input) !important;
  border-radius: var(--v2-radius-input) !important;
  padding: 0 var(--v2-space-4) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-2) !important;
  background-color: var(--v2-surface-white) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color var(--v2-transition-base) !important;
}

.rename-contract-modal #rename-contract-textfield:focus {
  border-color: var(--v2-brand-green) !important;
}

/* --- File extension span (.docx) --- */
.rename-contract-modal .modal-body > div:nth-child(2) span {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-2) !important;
  white-space: nowrap !important;
}

/* --- Modal footer — V2 actions layout --- */
.rename-contract-modal .modal-footer {
  padding: 0 !important;
  border-top: none !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: var(--v2-space-6) !important;
}

/* --- Cancel button (v2-cancel-btn class added via JS) --- */
.rename-contract-modal .modal-footer .btn-footer-close {
  height: var(--v2-btn-height) !important;
  min-width: var(--v2-btn-min-width) !important;
  padding: var(--v2-btn-padding) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  font-family: var(--v2-font) !important;
  color: var(--v2-text-1) !important;
  background-color: var(--v2-surface-secondary) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color var(--v2-transition-base) !important;
}

.rename-contract-modal .modal-footer .btn-footer-close:hover,
.rename-contract-modal .modal-footer .btn-footer-close:focus {
  background-color: var(--v2-surface-disabled) !important;
  color: var(--v2-text-1) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* --- Rename button (v2-btn-primary class added via JS handles most styles) --- */
.rename-contract-modal .modal-footer #modal-rename-contract-btn {
  margin-left: auto !important;
  text-decoration: none !important;
}

/* =============================================================================
   25. MOVE TO ANOTHER MATTER MODAL (.ui-dialog + form.org-detail-page-move-contract)
   jQuery UI dialog opened from Contract Repository > 3 dots > Move to another matter.
   Radio list rows reuse Section 19b (.lc-list-all-matters .form-type-radio).
   CSS legacy: style.css lines 9765–9948 — migrated with CSS variable tokens.
   ============================================================================= */

/* --- jQuery UI dialog card --- */
.ui-dialog:has(form.org-detail-page-move-contract) {
  width: var(--v2-modal-width-sm) !important;
  max-width: var(--v2-modal-width-sm) !important;
  background-color: var(--v2-surface-white) !important;
  border-radius: var(--v2-radius-modal) !important;
  border: none !important;
  box-shadow: var(--v2-shadow-dropdown) !important;
  padding: var(--v2-space-10) 70px !important;
  font-family: var(--v2-font) !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  box-sizing: border-box !important;
}

/* --- Hide default jQuery UI titlebar --- */
.ui-dialog:has(form.org-detail-page-move-contract) .ui-dialog-titlebar {
  display: none !important;
}

/* --- Dialog content area --- */
.ui-dialog:has(form.org-detail-page-move-contract) .ui-dialog-content {
  padding: 0 !important;
  overflow-y: auto !important;
  max-height: 70vh !important;
}

/* --- V2 ModalHeader (injected by JS) --- */
.ui-dialog:has(form.org-detail-page-move-contract) .move-contract-header {
  text-align: center !important;
  margin-bottom: var(--v2-space-10) !important;
  width: 100% !important;
}

.ui-dialog:has(form.org-detail-page-move-contract) .move-contract-header .mc-title {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  font-weight: var(--v2-fw-semibold) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  color: var(--v2-text-1) !important;
  margin: 0 !important;
}

.ui-dialog:has(form.org-detail-page-move-contract) .move-contract-header .mc-subtitle {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-2) !important;
  margin-top: var(--v2-space-2) !important;
  margin-bottom: 0 !important;
}

/* --- V2 close button (injected by JS as .v2-modal-close-move) --- */
.ui-dialog:has(form.org-detail-page-move-contract) .v2-modal-close-move {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 24px !important;
  height: 24px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  color: var(--v2-text-2) !important;
  font-size: 18px !important;
  line-height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  text-shadow: none !important;
  transition: color var(--v2-transition-base) !important;
  z-index: 10 !important;
}

.ui-dialog:has(form.org-detail-page-move-contract) .v2-modal-close-move:hover {
  color: var(--v2-text-1) !important;
}

/* --- Actions container (class added by JS) --- */
form.org-detail-page-move-contract .move-contract-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: var(--v2-space-6) !important;
}

/* --- Cancel button (injected by JS as .move-contract-cancel-btn) --- */
form.org-detail-page-move-contract .move-contract-cancel-btn {
  height: var(--v2-btn-height) !important;
  min-width: var(--v2-btn-min-width) !important;
  padding: var(--v2-btn-padding) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  font-family: var(--v2-font) !important;
  color: var(--v2-text-1) !important;
  background-color: var(--v2-surface-secondary) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color var(--v2-transition-base) !important;
}

form.org-detail-page-move-contract .move-contract-cancel-btn:hover,
form.org-detail-page-move-contract .move-contract-cancel-btn:focus {
  background-color: var(--v2-surface-disabled) !important;
  color: var(--v2-text-1) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* --- Move Contract button (PHP class: btn-success) --- */
form.org-detail-page-move-contract button.btn-success,
form.org-detail-page-move-contract button.form-submit {
  height: var(--v2-btn-height) !important;
  min-width: var(--v2-btn-min-width) !important;
  padding: var(--v2-btn-padding) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  font-family: var(--v2-font) !important;
  color: var(--v2-surface-white) !important;
  background-color: var(--v2-brand-green) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color var(--v2-transition-base) !important;
}

form.org-detail-page-move-contract button.btn-success:hover,
form.org-detail-page-move-contract button.btn-success:focus,
form.org-detail-page-move-contract button.form-submit:hover,
form.org-detail-page-move-contract button.form-submit:focus {
  background-color: var(--v2-brand-green-hover) !important;
  color: var(--v2-surface-white) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* --- Disabled state --- */
form.org-detail-page-move-contract button.form-submit:disabled,
form.org-detail-page-move-contract button.form-submit.form-disabled {
  background-color: var(--v2-surface-disabled) !important;
  color: var(--v2-text-2) !important;
  cursor: not-allowed !important;
}

/* =============================================================================
   26. POLICIES TAB (#v-pills-addpolicy)
   Organization Settings > Ai > Policies.
   Source: org_detail_page/src/Form/OrgDetailForm.php
   Pattern mirrors #v-pills-export-matters (position: relative + absolute button top-right).
   ============================================================================= */

/* --- Layout container --- */
#v-pills-addpolicy {
  max-width: 948px !important;
  margin: 0 auto !important;
  position: relative !important;
}

/* --- Title --- */
#v-pills-addpolicy > h3 {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-lg) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: var(--v2-lh-lg) !important;
  color: var(--v2-text-1) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

/* --- Subtitle --- */
#v-pills-addpolicy > .v2-subtitle {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-2) !important;
  margin: 0 0 var(--v2-space-5) !important;
  padding: 0 !important;
}

/* --- Add Policy button — v2 primary style, positioned top-right --- */
#v-pills-addpolicy a.new-matter-client-save.btn-success {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--v2-btn-height) !important;
  padding: var(--v2-btn-padding) !important;
  border-radius: var(--v2-radius-btn) !important;
  background-color: var(--v2-brand-green) !important;
  background-image: none !important;
  color: var(--v2-surface-white) !important;
  border: none !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: 100% !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color var(--v2-transition-base) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  z-index: 5 !important;
}

#v-pills-addpolicy a.new-matter-client-save.btn-success:hover,
#v-pills-addpolicy a.new-matter-client-save.btn-success:focus {
  background-color: var(--v2-brand-green-hover) !important;
  color: var(--v2-surface-white) !important;
  text-decoration: none !important;
}

/* --- Hide the wrapper div layout interference --- */
#v-pills-addpolicy #edit-org-privacy-docs-wrap {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* --- Empty state text --- */
#v-pills-addpolicy .empty_orgnaization_user_list p {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-2) !important;
  margin: 0 !important;
}

/* =============================================================================
   27. ORGANIZATION SETTINGS — LEFT SIDEBAR (.organization_wrap_left)
   Style source: style.css lines 8005–8147 (had a typo: .orgnaization_wrap_left).
   The PHP outputs the correct class .organization_wrap_left — this section fixes
   the mismatch so v2 sidebar styles apply.
   Reference: react_app_v2/src/components/SettingsSidebar/SettingsSidebar.tsx
   ============================================================================= */

/* --- Container — white, 308px wide, right border --- */
.organization_wrap_left {
  max-width: 220px !important;
  width: 220px !important;
  padding: var(--v2-space-5) 10px !important;
  background-color: var(--v2-surface-white) !important;
  border-right: 1px solid var(--v2-border-input) !important;
  min-height: 100vh !important;
}

/* --- Inner sidebar wrapper — reset margins --- */
.organization_wrap_left #edit-sidebar {
  margin: 0 !important;
}

/* --- "Organization Settings" heading --- */
.organization_wrap_left #edit-organization-tab > h4 {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-base) !important;
  line-height: var(--v2-lh-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-1) !important;
  margin: 10px 15px !important;
  padding: 0 !important;
}

/* --- Org row: wrap so Edit button appears below span + title --- */
.organization_wrap_left .organization_tab_inner {
  margin: 0 0 10px !important;
  padding: 0 5px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.organization_wrap_left .organization_tab_inner > .title_domain {
  flex: 1 !important;
  min-width: 0 !important;
}

.organization_wrap_left .organization_tab_inner > a.edit {
  flex-basis: 100% !important;
  margin-left: 0 !important;
  margin-top: var(--v2-space-3) !important;
}

/* --- Nav pills container — reset --- */
.organization_wrap_left #v-pills-tab {
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Section headings (General, Team And Groups, Matters, Contracts, Ai…) --- */
.organization_wrap_left #v-pills-tab > h4 {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-base) !important;
  line-height: var(--v2-lh-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-1) !important;
  margin: 10px 15px !important;
  padding: 10px 0 0 !important;
  border-top: 1px solid var(--v2-border-default) !important;
}

/* --- First section heading — top divider with extra breathing room --- */
.organization_wrap_left #v-pills-tab > h4:first-child {
  border-top: 1px solid var(--v2-border-default) !important;
  padding-top: var(--v2-space-5) !important;
  margin-top: var(--v2-space-5) !important;
}

/* --- Nav items (tabs + plain links) --- */
.organization_wrap_left #v-pills-tab .nav-link,
.organization_wrap_left #v-pills-tab > a {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  line-height: var(--v2-lh-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-1) !important;
  background: transparent !important;
  padding: 10px var(--v2-space-4) !important;
  margin: 1px 0 !important;
  border-radius: var(--v2-radius-sm) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background-color var(--v2-transition-fast) !important;
}

/* --- Icons inside nav items --- */
.organization_wrap_left #v-pills-tab .nav-link i,
.organization_wrap_left #v-pills-tab > a i {
  color: var(--v2-text-2) !important;
  margin-right: var(--v2-space-3) !important;
  font-size: var(--v2-text-sm) !important;
  width: 16px !important;
  text-align: center !important;
}

/* --- Hover state --- */
.organization_wrap_left #v-pills-tab .nav-link:hover,
.organization_wrap_left #v-pills-tab > a:hover {
  background-color: var(--v2-surface-bg) !important;
  color: var(--v2-text-1) !important;
}

/* --- Active state — v2 surface-secondary, dark text --- */
.organization_wrap_left #v-pills-tab .nav-link.active {
  background-color: var(--v2-surface-secondary) !important;
  color: var(--v2-text-1) !important;
  border-radius: var(--v2-radius-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
}

/* --- Active icon color --- */
.organization_wrap_left #v-pills-tab .nav-link.active i {
  color: var(--v2-text-1) !important;
}

/* --- Sub-tab container (nested items) --- */
.organization_wrap_left #v-pills-tab .sub-tab {
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Sub-tab nav items — indented --- */
.organization_wrap_left #v-pills-tab .sub-tab .nav-link,
.organization_wrap_left #v-pills-tab .sub-tab a {
  padding-left: 44px !important;
  font-size: var(--v2-text-sm) !important;
}

/* =============================================================================
   28. USERS TAB — PENDING REGISTRATION STATUS BADGE
   Users with pending_registration class show an amber pill badge instead of
   a plain h5 heading in the action column.
   Source: org_detail_page/src/Form/OrgDetailForm.php (getPolicies, getUsers)
   ============================================================================= */

/* --- Pending row — left accent border for visual scan --- */
#v-pills-users .users_list_user.pending_registration {
  border-left: 3px solid var(--v2-status-pending-border) !important;
  padding-left: 9px !important;
}

/* --- Badge — replaces the raw h5 inside .user_action --- */
#v-pills-users .pending_registration .user_action h5 {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--v2-space-1) !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  background-color: var(--v2-status-pending-bg) !important;
  color: var(--v2-status-pending-text) !important;
  border: 1px solid var(--v2-status-pending-border) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: var(--v2-lh-xs) !important;
  white-space: nowrap !important;
  margin: 0 var(--v2-space-2) 0 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* --- Clock icon prepended via Bootstrap Icons --- */
#v-pills-users .pending_registration .user_action h5::before {
  font-family: 'Bootstrap Icons' !important;
  content: '\F28A' !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

/* --- Mute the avatar color slightly to reinforce inactive state --- */
#v-pills-users .pending_registration .user_icon.org-entity_icon span {
  opacity: 0.65 !important;
}

/* --- Email below name — styled as muted secondary text (same as role) --- */
#v-pills-users .pending_registration .user_name.org-entity_name > span {
  color: var(--v2-text-2) !important;
  font-size: var(--v2-text-xs) !important;
  font-style: italic !important;
}

/* =============================================================================
   29. INTAKE FORM SETTINGS — FIELDS TABLE (.fields-settings-section)
   Expandable panel shown when clicking the gear icon on a setting card.
   Shows 3 columns: Name / Required / Enabled (checkbox).
   Shared by all 3 settings: General Inquiry, Contract, Contract Review.
   ============================================================================= */

/* --- Container — white card with border --- */
#v-pills-intake-form-settings .fields-settings-section {
  background-color: var(--v2-surface-white) !important;
  border-radius: var(--v2-radius-card) !important;
  border: 1px solid var(--v2-border-input) !important;
  padding: var(--v2-space-5) var(--v2-space-6) !important;
  margin: var(--v2-space-3) 0 !important;
  position: relative !important;
  box-shadow: var(--v2-shadow-card) !important;
}

/* --- Close (×) button — top-right of card --- */
#v-pills-intake-form-settings .intake-settings-fields-close {
  position: absolute !important;
  top: var(--v2-space-4) !important;
  right: var(--v2-space-4) !important;
  background: transparent !important;
  border: none !important;
  color: var(--v2-text-2) !important;
  font-size: 18px !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--v2-radius-sm) !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition:
    color var(--v2-transition-fast),
    background-color var(--v2-transition-fast) !important;
  box-shadow: none !important;
  line-height: 1 !important;
}

#v-pills-intake-form-settings .intake-settings-fields-close:hover {
  color: var(--v2-text-1) !important;
  background-color: var(--v2-surface-bg) !important;
}

/* --- Section title h4 ("Intake Form → General Inquiry") --- */
#v-pills-intake-form-settings .fields-settings-section > h4 {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-lg) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: var(--v2-lh-base) !important;
  color: var(--v2-text-1) !important;
  margin: 0 40px var(--v2-space-1) 0 !important;
  padding: 0 !important;
  border: none !important;
  text-transform: none !important;
}

/* --- Subtitle h5 ("Standard matter fields") --- */
#v-pills-intake-form-settings .fields-settings-section > h5 {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: var(--v2-lh-xs) !important;
  color: var(--v2-text-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin: 0 0 var(--v2-space-4) !important;
  padding: 0 !important;
  border: none !important;
}

/* --- Table responsive wrapper --- */
#v-pills-intake-form-settings .fields-settings-section .table-responsive {
  border: none !important;
  margin: 0 !important;
}

/* --- Table base: override Bootstrap --- */
#v-pills-intake-form-settings .fields-settings-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: transparent !important;
  margin: 0 !important;
  border: none !important;
}

/* --- Remove Bootstrap table-striped zebra rows --- */
#v-pills-intake-form-settings .fields-settings-table.table-striped > tbody > tr:nth-of-type(odd),
#v-pills-intake-form-settings .fields-settings-table.table-striped > tbody > tr:nth-of-type(even) {
  background-color: transparent !important;
}

/* --- Hover row highlight --- */
#v-pills-intake-form-settings .fields-settings-table.table-hover > tbody > tr:hover {
  background-color: var(--v2-surface-bg) !important;
}

/* --- Header row border --- */
#v-pills-intake-form-settings .fields-settings-table thead tr {
  border-bottom: 2px solid var(--v2-border-input) !important;
}

/* --- Header cells --- */
#v-pills-intake-form-settings .fields-settings-table thead th {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: var(--v2-lh-xs) !important;
  color: var(--v2-text-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: var(--v2-space-2) var(--v2-space-3) !important;
  border: none !important;
  background: transparent !important;
  white-space: nowrap !important;
}

/* --- Body rows — subtle row separator --- */
#v-pills-intake-form-settings .fields-settings-table tbody tr {
  border-bottom: 1px solid var(--v2-border-input) !important;
  background: transparent !important;
}

#v-pills-intake-form-settings .fields-settings-table tbody tr:last-child {
  border-bottom: none !important;
}

/* --- Body cells --- */
#v-pills-intake-form-settings .fields-settings-table tbody td {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-1) !important;
  padding: 14px var(--v2-space-3) !important;
  border: none !important;
  vertical-align: middle !important;
}

/* --- Required column (2nd) — centered, fixed width --- */
#v-pills-intake-form-settings .fields-settings-table thead th:nth-child(2),
#v-pills-intake-form-settings .fields-settings-table tbody td:nth-child(2) {
  text-align: center !important;
  width: 110px !important;
  font-size: var(--v2-text-xs) !important;
}

/* --- Required = Yes — green (field is mandatory, checkbox is disabled) --- */
#v-pills-intake-form-settings
  .fields-settings-table
  tbody
  tr:has(.form-checkbox[disabled])
  td:nth-child(2) {
  color: var(--v2-brand-green) !important;
  font-weight: var(--v2-fw-medium) !important;
}

/* --- Required = No — muted gray --- */
#v-pills-intake-form-settings
  .fields-settings-table
  tbody
  tr:has(.form-checkbox:not([disabled]))
  td:nth-child(2) {
  color: var(--v2-text-2) !important;
  font-weight: var(--v2-fw-regular) !important;
}

/* --- Enabled column (3rd) — centered, narrow --- */
#v-pills-intake-form-settings .fields-settings-table thead th:nth-child(3),
#v-pills-intake-form-settings .fields-settings-table tbody td:nth-child(3) {
  text-align: center !important;
  width: 80px !important;
}

/* --- Checkbox form-item wrapper in table cell — centered --- */
#v-pills-intake-form-settings .fields-settings-table .form-item {
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: unset !important;
}

/* --- Checkbox — v2 green checked style, matching Section 19b pattern --- */
#v-pills-intake-form-settings .fields-settings-table .form-checkbox {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: var(--v2-radius-checkbox) !important;
  border: 1.5px solid var(--v2-border-checkbox) !important;
  background-color: var(--v2-surface-white) !important;
  cursor: pointer !important;
  position: relative !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  transition:
    background-color var(--v2-transition-fast),
    border-color var(--v2-transition-fast) !important;
  box-shadow: none !important;
}

#v-pills-intake-form-settings .fields-settings-table .form-checkbox:checked {
  background-color: var(--v2-brand-green) !important;
  border-color: var(--v2-brand-green) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8l3.5 3.5L13 5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 12px !important;
}

#v-pills-intake-form-settings .fields-settings-table .form-checkbox:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

#v-pills-intake-form-settings .fields-settings-table .form-checkbox:hover:not(:disabled) {
  border-color: var(--v2-brand-green) !important;
}

/* =============================================================================
   30. CONTRACT TYPES LIST — REMOVE RANDOM-COLOR AVATAR CIRCLE
   The .contract_icon div contains a <span> with a random inline background-color
   generated by ContractTypeEntity::getRandomColor() on every page load.
   Source: org_detail_page/src/Custom/ContractTypeEntity.php (getOrgContractsType)
   Decision: remove the avatar entirely — keep only name + 3-dot action menu.
   ============================================================================= */

#v-pills-contracts-type .contracts_list_contract .contract_icon.org-entity_icon {
  display: none !important;
}

/* =============================================================================
   31. ADD POLICY FORM (form.node-organization-policies-form)
   Full-page form for uploading organization policy documents.
   Source: org_detail_page.module → org_detail_page_form_node_organization_policies_form_alter()
   Buttons:
     Cancel — .v2-btn-secondary  (applied via PHP form alter)
     Save   — .v2-btn-primary    (applied via PHP form alter)
   ============================================================================= */

/* --- Page card container --- */
form.node-organization-policies-form {
  max-width: var(--v2-modal-width-sm) !important;
  margin: var(--v2-space-8) auto !important;
  padding: var(--v2-space-8) 70px !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-modal) !important;
  background-color: var(--v2-surface-white) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* --- Page title --- */
form.node-organization-policies-form .page-cover-title {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  font-weight: var(--v2-fw-bold) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  color: var(--v2-text-1) !important;
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: var(--v2-space-8) !important;
}

/* --- Form label --- */
form.node-organization-policies-form .control-label {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-1) !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  margin-bottom: var(--v2-space-2) !important;
  display: block !important;
  padding: 0 !important;
}

/* --- Hide Drupal default page title (uses #title, already replaced by .page-cover-title) --- */
form.node-organization-policies-form ~ .block-page-title-block,
.node-add-organization-policies .block-page-title-block {
  display: none !important;
}

/* --- Hide vertical tabs (empty on this form) --- */
form.node-organization-policies-form .form-type-vertical-tabs {
  display: none !important;
}

/* --- Hide glyphicons on buttons --- */
form.node-organization-policies-form .icon.glyphicon {
  display: none !important;
}

/* --- Uppy FileDropZone — override 750x550 inline dimensions --- */
form.node-organization-policies-form .uppy-Dashboard-inner {
  background-color: var(--v2-surface-white) !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
  height: var(--v2-uppy-height) !important;
  width: 100% !important;
}

form.node-organization-policies-form .uppy-Dashboard-innerWrap {
  border-radius: var(--v2-radius-input) !important;
  overflow: hidden !important;
  height: 100% !important;
}

form.node-organization-policies-form .uppy-Dashboard-AddFiles {
  border: none !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  padding: 0 !important;
}

form.node-organization-policies-form .uppy-Dashboard-AddFiles-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-1) !important;
  font-family: var(--v2-font) !important;
}

form.node-organization-policies-form .uppy-Dashboard-AddFiles-list {
  margin: var(--v2-space-1) 0 0 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  height: auto !important;
}

form.node-organization-policies-form .uppy-Dashboard-browse {
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-brand-green) !important;
  text-decoration: none !important;
  font-family: var(--v2-font) !important;
  line-height: var(--v2-lh-sm) !important;
}

form.node-organization-policies-form .uppy-Dashboard-browse:hover {
  color: var(--v2-brand-green-hover) !important;
  text-decoration: underline !important;
}

form.node-organization-policies-form .uppy-Dashboard-Item {
  border-bottom: 1px solid var(--v2-border-default) !important;
  padding: var(--v2-space-2) 12px !important;
}

form.node-organization-policies-form .uppy-Dashboard-Item-name {
  font-size: var(--v2-text-xs) !important;
  line-height: var(--v2-lh-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-1) !important;
  font-family: var(--v2-font) !important;
}

form.node-organization-policies-form .uppy-Dashboard-Item-statusSize {
  font-size: var(--v2-text-xs) !important;
  color: var(--v2-text-2) !important;
}

form.node-organization-policies-form .uppy-Dashboard-Item-action--remove {
  color: var(--v2-text-2) !important;
}

form.node-organization-policies-form .uppy-Dashboard-Item-action--remove:hover {
  color: var(--v2-brand-red) !important;
}

form.node-organization-policies-form
  .uppy-Dashboard-Item-progress
  .uppy-Dashboard-Item-progressIndicator {
  color: var(--v2-brand-green) !important;
}

/* --- Helper text / upload requirements link --- */
form.node-organization-policies-form .description.help-block {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-2) !important;
  margin-top: var(--v2-space-2) !important;
}

form.node-organization-policies-form .description.help-block a {
  color: var(--v2-brand-green) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  text-decoration: none !important;
}

form.node-organization-policies-form .description.help-block a:hover {
  color: var(--v2-brand-green-hover) !important;
  text-decoration: underline !important;
}

/* --- Form group spacing --- */
form.node-organization-policies-form .form-group {
  margin-bottom: var(--v2-space-5) !important;
}

/* --- Actions: flex row, Cancel left / Save right --- */
form.node-organization-policies-form #edit-actions {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: var(--v2-space-6) !important;
  gap: var(--v2-space-3) !important;
}

/* ============================================================
   Section 32 — User Profile Page (.path-user / .user_details_full)
   ============================================================ */

/* Hide the raw Drupal page-header h1 — the h3 name inside the card serves as the title */
.path-user .page-header {
  display: none !important;
}

/* Card container — override elyts.css 800px/30px values with v2 tokens */
.user_details_full {
  max-width: var(--v2-modal-width-sm) !important;
  margin: var(--v2-space-8) auto !important;
  padding: var(--v2-space-8) 70px !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-modal) !important;
  background-color: var(--v2-surface-white) !important;
  box-sizing: border-box !important;
  position: static !important;
}

/* User name as modal header title */
.user_details_full h3 {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  font-weight: var(--v2-fw-bold) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  color: var(--v2-text-1) !important;
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: var(--v2-space-8) !important;
}

/* Field rows */
.user_details_full .user_details > div,
.user_details_full .user_email {
  display: flex !important;
  gap: 0 !important;
  align-items: center !important;
  border-bottom: 1px solid var(--v2-border-default) !important;
  padding: var(--v2-space-3) 0 !important;
}

/* Field label column */
.user_details_full .user_details > div > div:first-child,
.user_details_full .user_email .field_label {
  flex: 0 0 160px !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-1) !important;
  position: static !important;
}

/* Remove the legacy ':' pseudo-element */
.user_details_full .user_details > div > div:first-child::after {
  display: none !important;
}

/* Field value column */
.user_details_full .user_details > div > div:last-child,
.user_details_full .user_email > div:last-child {
  flex: 1 !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-2) !important;
}

/* Organization link */
.user_details_full .user_details a {
  color: var(--v2-brand-green) !important;
  text-decoration: none !important;
}

.user_details_full .user_details a:hover {
  color: var(--v2-brand-green-hover) !important;
  text-decoration: underline !important;
}

/* Actions footer — Edit button bottom-right */
.user_details_full .user_edit_actions {
  display: flex !important;
  justify-content: flex-end !important;
  margin-top: var(--v2-space-6) !important;
}

/* Hide legacy absolute-positioned edit link if it still appears */
.user_details_full > a.edit_user:not(.v2-btn-primary) {
  display: none !important;
}

/* ============================================================
   Section 33 — Copy-link button in Users tab note box
   ============================================================ */

.note_to_user_link .copy-link-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 3px 5px !important;
  margin-left: 4px !important;
  border-radius: 6px !important;
  color: #2980b9 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  transition:
    color 0.15s ease,
    background 0.15s ease !important;
  min-width: unset !important;
  height: auto !important;
}

.note_to_user_link .copy-link-btn:hover {
  color: var(--v2-brand-green) !important;
  background: rgba(71, 177, 113, 0.1) !important;
}

.note_to_user_link .copy-link-btn.copied {
  color: var(--v2-brand-green) !important;
}

/* ============================================================
   Section 34 — Matters List Page (.path-matters-list / .path-matters)
   Both paths use the same Drupal View (organization_matters).
   .path-matters-list = display page_2 (with header + footer)
   .path-matters       = display page_1 (inherits default)
   Selectors use :is() to avoid duplicating every rule.
   ============================================================ */

/* --- Page layout wrapper: max-width 948px centered, matching org tab pages --- */
:is(.path-matters-list, .path-matters) .view-organization-matters {
  position: relative !important;
  padding-top: 20px;
  max-width: 948px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- View header: title left, New Matter button right --- */
:is(.path-matters-list, .path-matters) .view-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 24px !important;
  min-height: 45px !important;
}

:is(.path-matters-list, .path-matters) .view-header h3 {
  font-family: var(--v2-font) !important;
  font-size: 20px !important;
  font-weight: var(--v2-fw-semibold) !important;
  color: var(--v2-text-1) !important;
  margin: 0 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* --- Header left: title + subtitle stacked --- */
:is(.path-matters-list, .path-matters) .matters-list-header-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* --- Page subtitle below title --- */
:is(.path-matters-list, .path-matters) .matters-list-subtitle {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-2) !important;
  margin: 0 !important;
  line-height: var(--v2-lh-sm) !important;
}

/* --- Remove white bg from Drupal Views container --- */
:is(.path-matters-list, .path-matters) .views-element-container.form-group {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* --- Remove Bootstrap gray bg from exposed form labels + v2 typography --- */
:is(.path-matters-list, .path-matters) .views-exposed-form label,
:is(.path-matters-list, .path-matters) .views-exposed-form .control-label {
  background-color: transparent !important;
  display: block !important;
  padding: 0 !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  line-height: var(--v2-lh-xs) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-2) !important;
  text-transform: none !important;
}

/* --- New Matter button: pull from bottom to top-right of view-header --- */
:is(.path-matters-list, .path-matters) p:has(> a.new-matter-client-save) {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-top: 20px !important;
  padding-right: 15px !important;
}

:is(.path-matters-list, .path-matters) a.new-matter-client-save {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--v2-btn-height) !important;
  min-width: 140px !important;
  padding: 0 20px !important;
  border-radius: var(--v2-radius-btn) !important;
  background-color: var(--v2-brand-green) !important;
  color: #fff !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  border: none !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
  cursor: pointer !important;
}

:is(.path-matters-list, .path-matters) a.new-matter-client-save:hover,
:is(.path-matters-list, .path-matters) a.new-matter-client-save:focus {
  background-color: var(--v2-brand-green-hover) !important;
  color: #fff !important;
  text-decoration: none !important;
}

:is(.path-matters-list, .path-matters) a.new-matter-client-save span {
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
}

/* --- Exposed filter form layout --- */
:is(.path-matters-list, .path-matters) .views-exposed-form .form--inline {
  display: flex !important;
  align-items: flex-end !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 12px !important;
  background: transparent !important;
  padding: 0 !important;
}

:is(.path-matters-list, .path-matters) .views-exposed-form .form-item-global-search {
  flex: 1 1 200px !important;
  margin-bottom: 0 !important;
}

:is(.path-matters-list, .path-matters) .views-exposed-form .form-item-field-matter-status-value {
  width: 180px !important;
  flex-shrink: 0 !important;
  margin-bottom: 0 !important;
}

:is(.path-matters-list, .path-matters) .views-exposed-form #edit-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Form labels --- */
:is(.path-matters-list, .path-matters) .views-exposed-form .control-label {
  font-size: var(--v2-text-xs) !important;
  color: var(--v2-text-2) !important;
  margin-bottom: 8px !important;
}

/* --- Search input --- */
:is(.path-matters-list, .path-matters) #edit-global-search {
  min-height: var(--v2-input-height) !important;
  width: 100% !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
  padding: 0 16px !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  color: var(--v2-text-2) !important;
  background-color: #fff !important;
  box-shadow: none !important;
  outline: none !important;
}

:is(.path-matters-list, .path-matters) #edit-global-search:focus {
  border-color: var(--v2-brand-green) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* --- Status select --- */
:is(.path-matters-list, .path-matters) .select-wrapper {
  position: relative !important;
}

:is(.path-matters-list, .path-matters) #edit-field-matter-status-value,
:is(.path-matters-list, .path-matters) #edit-archived {
  min-height: var(--v2-input-height) !important;
  width: 100% !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
  padding: 6px 36px 6px 16px !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  color: var(--v2-text-2) !important;
  background-color: #fff !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737987' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

:is(.path-matters-list, .path-matters) #edit-field-matter-status-value:focus,
:is(.path-matters-list, .path-matters) #edit-archived:focus {
  border-color: var(--v2-brand-green) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* --- Apply button (secondary) --- */
:is(.path-matters-list, .path-matters) #edit-submit-organization-matters {
  height: var(--v2-btn-height) !important;
  min-width: 100px !important;
  padding: 0 20px !important;
  border-radius: var(--v2-radius-btn) !important;
  background-color: var(--v2-surface-secondary) !important;
  color: var(--v2-text-1) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

:is(.path-matters-list, .path-matters) #edit-submit-organization-matters:hover {
  background-color: var(--v2-surface-disabled) !important;
}

/* --- Reset button (danger) --- */
:is(.path-matters-list, .path-matters) #edit-reset {
  height: var(--v2-btn-height) !important;
  min-width: 100px !important;
  padding: 0 20px !important;
  border-radius: var(--v2-radius-btn) !important;
  background-color: var(--v2-brand-red) !important;
  color: #fff !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

:is(.path-matters-list, .path-matters) #edit-reset:hover {
  background-color: var(--v2-brand-red-hover) !important;
}

:is(.path-matters-list, .path-matters) #edit-reset .glyphicon {
  display: none !important;
}

/* --- v2 Toggle: My matters / Organization matters --- */
:is(.path-matters-list, .path-matters) fieldset.org-matter-scope-tabs {
  display: block !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 12px 0 8px 0 !important;
  flex-basis: 100% !important;
}

:is(.path-matters-list, .path-matters) fieldset.org-matter-scope-tabs legend {
  display: none !important;
}

:is(.path-matters-list, .path-matters) fieldset.org-matter-scope-tabs .fieldset-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--v2-surface-secondary) !important;
  border-radius: 9999px !important;
  padding: 4px !important;
  height: 28px !important;
  box-sizing: content-box !important;
  max-width: 250px !important;
}

:is(.path-matters-list, .path-matters) fieldset.org-matter-scope-tabs #edit-matter-scope {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

:is(.path-matters-list, .path-matters) fieldset.org-matter-scope-tabs .form-item.radio {
  margin: 0 !important;
  padding: 0 !important;
}

:is(.path-matters-list, .path-matters) fieldset.org-matter-scope-tabs input[type='radio'] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

:is(.path-matters-list, .path-matters) fieldset.org-matter-scope-tabs label.control-label.option {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  height: 28px !important;
  border-radius: 9999px !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-semibold) !important;
  color: var(--v2-text-2) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin: 0 !important;
  white-space: nowrap !important;
  user-select: none !important;
  background: transparent !important;
  border: none !important;
}

:is(.path-matters-list, .path-matters)
  fieldset.org-matter-scope-tabs
  label.control-label.option.is-active {
  background: #fff !important;
  color: var(--v2-text-1) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

/* --- Table card container --- */
:is(.path-matters-list, .path-matters) .view-content {
  background: #fff !important;
  border-radius: var(--v2-radius-card) !important;
  border: 1px solid var(--v2-border-default) !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;
}

:is(.path-matters-list, .path-matters) .view-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* --- Table headers --- */
:is(.path-matters-list, .path-matters) .view-content table thead th {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-2) !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--v2-border-default) !important;
  background: #fff !important;
  text-transform: none !important;
  white-space: nowrap !important;
  border-top: none !important;
}

:is(.path-matters-list, .path-matters) .view-content table thead th a,
:is(.path-matters-list, .path-matters) .view-content table thead th a:visited {
  color: var(--v2-text-2) !important;
  text-decoration: none !important;
}

/* --- Sortable header links: flex row + transition --- */
:is(.path-matters-list, .path-matters) .view-content table thead th a[title^='sort by'] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: color 0.15s ease !important;
  white-space: nowrap !important;
}

:is(.path-matters-list, .path-matters) .view-content table thead th a[title^='sort by']:hover {
  color: var(--v2-brand-green) !important;
}

/* --- Hide Bootstrap glyphicon sort icons --- */
:is(.path-matters-list, .path-matters) .view-content table thead th .glyphicon {
  display: none !important;
}

/* --- Inactive sortable columns: neutral ↕ indicator --- */
:is(.path-matters-list, .path-matters)
  .view-content
  table
  thead
  th:not(.is-active)
  a[title^='sort by']::after {
  content: '' !important;
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 4.5L6 2L8.5 4.5' stroke='%23737987' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'/%3E%3Cpath d='M3.5 7.5L6 10L8.5 7.5' stroke='%23737987' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* --- Active sort column: green text --- */
:is(.path-matters-list, .path-matters) .view-content table thead th.is-active a[title^='sort by'] {
  color: var(--v2-brand-green) !important;
}

/* Currently DESC (href has sort=asc = clicking → asc = now desc): ↓ arrow */
:is(.path-matters-list, .path-matters)
  .view-content
  table
  thead
  th.is-active
  a[href*='sort=asc']::after {
  content: '' !important;
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 4.5L6 7.5L8.5 4.5' stroke='%2347B171' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

/* Currently ASC (href has sort=desc = clicking → desc = now asc): ↑ arrow */
:is(.path-matters-list, .path-matters)
  .view-content
  table
  thead
  th.is-active
  a[href*='sort=desc']::after {
  content: '' !important;
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 7.5L6 4.5L8.5 7.5' stroke='%2347B171' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

:is(.path-matters-list, .path-matters) .view-content table thead th a:hover {
  color: var(--v2-brand-green) !important;
  text-decoration: none !important;
}

:is(.path-matters-list, .path-matters) .view-content table thead th.is-active a {
  color: var(--v2-brand-green) !important;
}

:is(.path-matters-list, .path-matters) .view-content table thead th .tablesort {
  display: none !important;
}

/* --- Table body --- */
:is(.path-matters-list, .path-matters)
  .view-content
  table.table-striped
  > tbody
  > tr:nth-of-type(odd) {
  background: transparent !important;
}

:is(.path-matters-list, .path-matters) .view-content table.table-hover > tbody > tr:hover {
  background-color: rgba(232, 236, 244, 0.4) !important;
}

:is(.path-matters-list, .path-matters) .view-content table tbody tr {
  border-bottom: 1px solid var(--v2-border-default) !important;
  transition: background-color 0.1s ease !important;
}

:is(.path-matters-list, .path-matters) .view-content table tbody tr:last-child {
  border-bottom: none !important;
}

:is(.path-matters-list, .path-matters) .view-content table tbody td {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-1) !important;
  padding: 14px 16px !important;
  vertical-align: middle !important;
  border: none !important;
}

/* Title link */
:is(.path-matters-list, .path-matters) .view-content table tbody td a {
  color: var(--v2-text-1) !important;
  text-decoration: none !important;
}

:is(.path-matters-list, .path-matters) .view-content table tbody td a:hover {
  color: var(--v2-brand-green) !important;
  text-decoration: none !important;
}

/* Assigned user column secondary color */
:is(.path-matters-list, .path-matters)
  .view-content
  table
  tbody
  td.views-field-assigned-user-field {
  color: var(--v2-text-2) !important;
}

/* Date columns secondary color */
:is(.path-matters-list, .path-matters) .view-content table tbody td.views-field-changed,
:is(.path-matters-list, .path-matters) .view-content table tbody td.views-field-created {
  color: var(--v2-text-2) !important;
  font-size: var(--v2-text-xs) !important;
}

/* Actions column */
:is(.path-matters-list, .path-matters) .view-content table tbody td.views-field-nothing {
  text-align: right !important;
  white-space: nowrap !important;
  width: 48px !important;
  padding-right: 12px !important;
}

/* --- Actions dropdown --- */
:is(.path-matters-list, .path-matters) .lc-list-matters-item-v2-right {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

:is(.path-matters-list, .path-matters) .lc-list-matters-item-v2-right a.three-dot-link {
  color: var(--v2-text-2) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  padding: 4px 6px !important;
  border-radius: 6px !important;
  transition:
    color 0.15s ease,
    background-color 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
}

:is(.path-matters-list, .path-matters) .lc-list-matters-item-v2-right a.three-dot-link:hover {
  color: var(--v2-text-1) !important;
  background-color: var(--v2-surface-secondary) !important;
}

:is(.path-matters-list, .path-matters) .lc-listings-item-action-menu {
  position: absolute !important;
  right: 0 !important;
  top: 100% !important;
  margin-top: 4px !important;
  z-index: 100 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: auto !important;
  border: none !important;
}

:is(.path-matters-list, .path-matters) .lc-listings-item-action-menu-inner {
  background-color: #fff !important;
  border-radius: var(--v2-radius-card) !important;
  box-shadow: var(--v2-shadow-dropdown) !important;
  padding: 10px !important;
  width: 140px !important;
  border: none !important;
}

:is(.path-matters-list, .path-matters) .lc-listings-item-action-menu-inner a {
  display: block !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: 20px !important;
  color: var(--v2-text-1) !important;
  padding: 4px 8px !important;
  margin-bottom: 2px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
  text-decoration: none !important;
}

:is(.path-matters-list, .path-matters) .lc-listings-item-action-menu-inner a:hover {
  background-color: #f3f3f3 !important;
  text-decoration: none !important;
}

:is(.path-matters-list, .path-matters) .lc-listings-item-action-menu-inner a:last-child {
  margin-bottom: 0 !important;
}

:is(.path-matters-list, .path-matters) .lc-listings-item-action-menu-inner a[href*='delete'] {
  color: var(--v2-brand-red) !important;
}

/* ================================================================
   Matters List — Custom Fields filter frame
   Full-width framed row rendered below the standard filters.
   ================================================================ */

:is(.path-matters-list, .path-matters) .views-exposed-form .matter-custom-fields-filters {
  flex-basis: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: var(--v2-space-3) !important;
  padding: var(--v2-space-4) !important;
  margin-top: var(--v2-space-2) !important;
  border: 1px solid var(--v2-border-input) !important;
  border-radius: var(--v2-radius-input) !important;
  background-color: var(--v2-surface-bg) !important;
}

:is(.path-matters-list, .path-matters) .matter-custom-fields-header {
  flex-basis: 100% !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  line-height: var(--v2-lh-xs) !important;
  font-weight: var(--v2-fw-semibold) !important;
  color: var(--v2-text-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: var(--v2-space-2) !important;
}

:is(.path-matters-list, .path-matters) .matter-custom-fields-filters > .form-item {
  margin: 0 !important;
}

:is(.path-matters-list, .path-matters) .matter-custom-fields-filters select.form-control {
  min-height: var(--v2-input-height) !important;
  padding: 0 32px 0 var(--v2-space-3) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  color: var(--v2-text-1) !important;
  border: 1px solid var(--v2-border-input) !important;
  border-radius: var(--v2-radius-input) !important;
  background-color: var(--v2-surface-white) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737987' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right var(--v2-space-3) center !important;
  background-size: 16px !important;
  cursor: pointer !important;
}

:is(.path-matters-list, .path-matters) .matter-custom-fields-filters input.form-control {
  min-height: var(--v2-input-height) !important;
  padding: 0 var(--v2-space-4) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  color: var(--v2-text-1) !important;
  border: 1px solid var(--v2-border-input) !important;
  border-radius: var(--v2-radius-input) !important;
  background-color: var(--v2-surface-white) !important;
}

/* --- Advanced Search toggle — pill in top-right of view-header (mirrors
       contract repo). The toggle is created by matter-cf-filter-builder.js
       and prepended into .view-footer > p; CSS positions that <p> absolutely
       at the top-right of the relatively-positioned .view-organization-matters. --- */
:is(.path-matters, .path-matters-list) .view-organization-matters .view-footer > p {
  display: flex !important;
  align-items: center !important;
  gap: var(--v2-space-3) !important;
  position: absolute !important;
  top: 20px !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 5 !important;
}

:is(.path-matters, .path-matters-list) .view-organization-matters .advanced-search-toggle {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  height: var(--v2-btn-height) !important;
  padding: 0 var(--v2-space-4) !important;
  border-radius: var(--v2-radius-btn) !important;
  background-color: var(--v2-surface-secondary) !important;
  color: var(--v2-text-1) !important;
  border: none !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color var(--v2-transition-base) !important;
}

:is(.path-matters, .path-matters-list) .view-organization-matters .advanced-search-toggle:hover,
:is(.path-matters, .path-matters-list) .view-organization-matters .advanced-search-toggle:focus,
:is(.path-matters, .path-matters-list) .view-organization-matters .advanced-search-toggle.active {
  background-color: var(--v2-surface-disabled) !important;
  color: var(--v2-text-1) !important;
  text-decoration: none !important;
}

/* --- Drop the boxed look of the in-form custom-fields container so the
       Advanced Search panel reads as a single section, not a nested card.
       (Overrides the default .matter-custom-fields-filters border / padding
       defined in legalc_custom_fields.css.) --- */
:is(.path-matters, .path-matters-list)
  .views-exposed-form
  .matter-custom-fields-filters.form-group.js-form-wrapper.form-wrapper {
  flex-basis: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

:is(.path-matters, .path-matters-list) .matter-custom-fields-filters .advanced-search-content {
  flex-basis: 100% !important;
  width: 100% !important;
  margin-top: var(--v2-space-3) !important;
  padding: var(--v2-space-3) !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-card) !important;
  background-color: var(--v2-surface-white) !important;
}

/* ================================================================
   Section 35 — Org Edit Page (node-edit type-organization)
   Styles the Drupal node edit form as a v2 modal-like card
   ================================================================ */

/* --- Fix form centering (replace hardcoded margin) --- */
body.node-edit.type-organization form.node-organization-edit-form {
  margin: 40px auto !important;
}

/* --- Hide native Drupal page h1 (replaced by JS-injected v2 title) --- */
body.node-edit.type-organization h1.page-header {
  display: none !important;
}

/* --- JS-injected v2 modal title --- */
body.node-edit.type-organization .org-edit-form-header {
  text-align: center !important;
  margin-bottom: 40px !important;
}

body.node-edit.type-organization .org-edit-form-title {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  font-weight: var(--v2-fw-bold) !important;
  color: var(--v2-text-1) !important;
  margin: 0 !important;
}

/* --- Labels: remove elyts.css gray bg, apply v2 label spec --- */
body.node-edit.type-organization form label.control-label,
body.node-edit.type-organization form .form-item label {
  background: transparent !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  line-height: var(--v2-lh-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-1) !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
  display: block !important;
}

/* --- Form group spacing --- */
body.node-edit.type-organization form .form-group,
body.node-edit.type-organization form .field--type-string,
body.node-edit.type-organization form .field--type-string-long {
  margin-bottom: 20px !important;
}

/* --- Save button: exact v2 primary button spec --- */
body.node-edit.type-organization form #edit-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--v2-btn-height) !important;
  min-width: 140px !important;
  padding: 0 20px !important;
  border-radius: var(--v2-radius-btn) !important;
  background-color: var(--v2-brand-green) !important;
  color: #fff !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-md) !important;
  font-weight: var(--v2-fw-medium) !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  box-shadow: none !important;
}

body.node-edit.type-organization form #edit-submit:hover {
  background-color: var(--v2-brand-green-hover) !important;
}

/* --- Hide Bootstrap glyphicon inside Save button --- */
body.node-edit.type-organization form #edit-submit .glyphicon {
  display: none !important;
}

/* --- Actions area: Cancel left, Save right --- */
body.node-edit.type-organization form #edit-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: var(--v2-space-6) !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- Hide admin-only fields --- */
body.node-edit.type-organization form .field--name-field-ably-channel,
body.node-edit.type-organization form .entity-content-form-revision-information,
body.node-edit.type-organization form .form-type-vertical-tabs {
  display: none !important;
}

/* ================================================================
   Section 36 — Matter Page: + Invite button
   Override legacy gray color with v2 brand-green
   ================================================================ */

.lc-tabs-tabs #invite,
#invite.lc-tabs-link {
  background-color: var(--v2-brand-green) !important;
  color: #fff !important;
  font-weight: var(--v2-fw-medium) !important;
}

.lc-tabs-tabs #invite:hover,
.lc-tabs-tabs #invite:focus,
#invite.lc-tabs-link:hover,
#invite.lc-tabs-link:focus {
  background-color: var(--v2-brand-green-hover) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ================================================================
   Section 37 — Matter Invite Form (.matter-refer-page1.matter-invite-page1)
   Inline tab-panel form — styled as v2 modal card
   ================================================================ */

/* --- Card container --- */
.matter-refer-page1.matter-invite-page1 {
  border-radius: var(--v2-radius-modal) !important;
  border-color: var(--v2-border-default) !important;
  padding: 40px 70px !important;
  max-width: var(--v2-modal-width-sm) !important;
  margin: 20px auto !important;
}

/* --- Title --- */
.matter-refer-page1.matter-invite-page1 .matter-refer-title {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  font-weight: var(--v2-fw-bold) !important;
  color: var(--v2-text-1) !important;
  text-align: center !important;
  margin-bottom: 40px !important;
}

/* --- Section subtitle ("Enter Receiver Details") — v2 ModalHeader subtitle spec --- */
.matter-refer-page1.matter-invite-page1
  .matter-refer-form
  > .matter-refer-form-section:first-child {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  line-height: var(--v2-lh-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-2) !important;
  text-align: center !important;
  margin-top: -32px !important;
  margin-bottom: 40px !important;
}

/* --- Form group spacing --- */
.matter-refer-page1.matter-invite-page1 .matter-refer-form-section {
  margin-bottom: 20px !important;
}

/* --- Labels --- */
.matter-refer-page1.matter-invite-page1 .control-label {
  background: transparent !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  line-height: var(--v2-lh-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-1) !important;
  padding: 0 !important;
  margin-bottom: 8px !important;
  border-radius: 0 !important;
  display: block !important;
}

/* --- Text inputs --- */
.matter-refer-page1.matter-invite-page1 input[type='text'] {
  background-color: #fff !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
  min-height: var(--v2-input-height) !important;
  height: var(--v2-input-height) !important;
  padding: 0 16px !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  color: var(--v2-text-2) !important;
  width: 100% !important;
  box-shadow: none !important;
  outline: none !important;
}

.matter-refer-page1.matter-invite-page1 input[type='text']:focus {
  border-color: var(--v2-brand-green) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* --- Textarea --- */
.matter-refer-page1.matter-invite-page1 textarea {
  background-color: #fff !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
  min-height: 130px !important;
  padding: 16px !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  color: var(--v2-text-2) !important;
  width: 100% !important;
  resize: none !important;
  box-shadow: none !important;
}

.matter-refer-page1.matter-invite-page1 textarea:focus {
  border-color: var(--v2-brand-green) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* --- Helper / instruction text --- */
.matter-refer-page1.matter-invite-page1 .invite-lawyer-dropdown-inst {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  line-height: var(--v2-lh-xs) !important;
  color: var(--v2-text-2) !important;
  margin-top: 8px !important;
}

/* --- Role selection label --- */
.matter-refer-page1.matter-invite-page1 .invite-lawyer-roles > div:first-child {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-1) !important;
  margin-bottom: 8px !important;
}

/* --- Autocomplete dropdown --- */
.matter-refer-page1.matter-invite-page1 .invite-lawyer-dropdown-results {
  border: 1px solid var(--v2-border-default) !important;
  background-color: #fff !important;
  border-radius: var(--v2-radius-input) !important;
  box-shadow: var(--v2-shadow-dropdown) !important;
}

.matter-refer-page1.matter-invite-page1 .invite-lawyer-dropdown-results a {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  color: var(--v2-text-1) !important;
  padding: 8px 16px !important;
  display: block !important;
}

.matter-refer-page1.matter-invite-page1 .invite-lawyer-dropdown-results a:hover {
  background-color: var(--v2-surface-secondary) !important;
  text-decoration: none !important;
}

/* --- Actions row: Cancel (left) + Send invitation (right) --- */
.matter-invite-actions-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: var(--v2-space-6) !important;
}

/* --- Send invitation button: v2 primary spec --- */
.matter-refer-page1.matter-invite-page1 #invite-matter-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--v2-btn-height) !important;
  min-width: 140px !important;
  padding: 0 20px !important;
  border-radius: var(--v2-radius-btn) !important;
  background-color: var(--v2-brand-green) !important;
  color: #fff !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-md) !important;
  font-weight: var(--v2-fw-medium) !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.matter-refer-page1.matter-invite-page1 #invite-matter-submit:hover {
  background-color: var(--v2-brand-green-hover) !important;
  text-decoration: none !important;
  color: #fff !important;
}

/* =============================================================================
   38. AI SEARCH FIELD — Ask AI sparkle gradient style
   Scope: .ai-search-input-wrapper (Contract Repository and future AI fields)
   Default border: solid #3aaec4
   Focus: spinning conic-gradient between #3aaec4 and #4bc97b
   ============================================================================= */

/* @property enables smooth animation of the conic-gradient angle */
@property --ai-spin-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* Shared AI styling tokens — used by Section 38 (Contract Repository wrapper)
   and the Playbook Rule fields (lines ~3610). Edit here to retheme both.
   Note: the conic-gradient expression itself is inlined per-rule because
   `--ai-spin-angle` is `@property inherits:false` and only animates on the
   element with `animation: ai-spin`. Wrapping it in a :root variable would
   freeze the angle at its initial-value (0deg). */
:root {
  --ai-color-1: #3aaec4;
  --ai-color-2: #4bc97b;
  --ai-spin-duration: 3s;
  --ai-spin-duration-focus: 1.5s;
  --ai-focus-glow: 0 0 0 3px rgba(75, 201, 123, 0.12);
}

/* Spinning border keyframes — rotates the conic-gradient around the input */
@keyframes ai-spin {
  to {
    --ai-spin-angle: 360deg;
  }
}

/* Button shimmer keyframes (kept for the Ask AI button only) */
@keyframes ai-border-shimmer {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Default state: spinning conic-gradient border — always animating */
/* High-specificity selectors using form ID to win over Bootstrap + legacy overrides */
.ai-search-input-wrapper,
#views-exposed-form-org-contract-repo-page-1 .ai-search-input-wrapper {
  background: conic-gradient(
    from var(--ai-spin-angle),
    var(--ai-color-1),
    var(--ai-color-2),
    var(--ai-color-1),
    var(--ai-color-2),
    var(--ai-color-1)
  ) !important;
  border-radius: 14px !important;
  padding: 2px !important;
  flex: 1 !important;
  min-width: 0 !important;
  animation: ai-spin var(--ai-spin-duration) linear infinite !important;
  box-shadow: none !important;
}

/* White inner surface — creates the "gradient border" illusion */
.ai-search-input-wrapper .form-item {
  background: #fff !important;
  border-radius: 12px !important;
  margin-bottom: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Hide the label (placeholder is descriptive enough) */
.ai-search-input-wrapper .control-label {
  display: none !important;
}

/* Input: remove default border — use ID selector for maximum specificity */
#edit-semantic-search-filter,
#views-exposed-form-org-contract-repo-page-1
  .ai-search-input-wrapper
  input#edit-semantic-search-filter {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 12px !important;
  min-height: 46px !important;
  padding: 0 16px !important;
  font-size: 14px !important;
  font-family: var(--v2-font) !important;
  color: var(--v2-text-1) !important;
  width: 100% !important;
  outline: none !important;
}

#edit-semantic-search-filter::placeholder,
.ai-search-input-wrapper input#edit-semantic-search-filter::placeholder {
  color: var(--v2-text-2) !important;
  font-size: 13px !important;
}

/* Ask AI button — gradient with sparkle */
#views-exposed-form-org-contract-repo-page-1 a.search-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 46px !important;
  padding: 0 20px !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #2e87a3 0%, #52dcff 55%, #aef0f8 100%) !important;
  /* background: linear-gradient(135deg, #1c81a0 0%, #37ADC9 55%, #A5F3FC 100%) !important; */
  background-size: 200% 200% !important;
  animation: ai-border-shimmer 4s ease infinite !important;
  color: #fff !important;
  font-family: var(--v2-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: opacity 0.2s ease !important;
}

/* Sparkle icon before "Ask AI" text */
#views-exposed-form-org-contract-repo-page-1 a.search-button::before {
  content: '' !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7 0.5L8.1 5.4L13 6.5L8.1 7.6L7 12.5L5.9 7.6L1 6.5L5.9 5.4Z' fill='white'/%3E%3Cpath d='M11.5 0L12 2L14 2.5L12 3L11.5 5L11 3L9 2.5L11 2Z' fill='white' opacity='0.7'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  flex-shrink: 0 !important;
}

#views-exposed-form-org-contract-repo-page-1 a.search-button:hover {
  opacity: 0.85 !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Advanced Search toggle — height override to match v2 button standard */
a.advanced-search-toggle {
  height: 45px !important;
}

/* Fix: after prepending .advanced-search-toggle to .view-footer > p,
   the :first-child/:last-child selectors in style.css no longer target
   the correct buttons. Override using class-based selectors. */

/* Upload contract — primary button (Page display only has this single CTA;
   the "Add Multiple" button no longer ships with the view). */
.view-org-contract-repo .view-footer > p > a.new-matter-client-save:not([href*='multiple']) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--v2-btn-height) !important;
  padding: var(--v2-btn-padding) !important;
  border-radius: var(--v2-radius-btn) !important;
  background-color: var(--v2-brand-green) !important;
  background-image: none !important;
  color: var(--v2-surface-white) !important;
  border: none !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  position: static !important;
  top: auto !important;
  transition: background-color var(--v2-transition-base) !important;
}

.view-org-contract-repo .view-footer > p > a.new-matter-client-save:not([href*='multiple']):hover,
.view-org-contract-repo .view-footer > p > a.new-matter-client-save:not([href*='multiple']):focus {
  background-color: var(--v2-brand-green-hover) !important;
  color: var(--v2-surface-white) !important;
  text-decoration: none !important;
}

/* Advanced Search toggle — neutralize :first-child rules from style.css and elyts.css */
.view-org-contract-repo .view-footer > p > a.advanced-search-toggle {
  position: static !important;
  top: auto !important;
  margin-right: 0 !important;
}

/* Speed up shimmer on focus */
.ai-search-input-wrapper:has(input:focus) {
  animation-duration: var(--ai-spin-duration-focus) !important;
}

/* Invite modal actions alignment */
.matter-invite-actions-row #invite-matter-submit {
  margin-top: 0 !important;
}

/* ============================================================
   Edit Matter page (node-matter-edit-form)
   ============================================================ */

/* Page title as V2 modal header */
body.node-edit.type-matter h1.page-header {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  font-weight: var(--v2-fw-semibold) !important;
  color: var(--v2-text-1) !important;
  text-align: center !important;
  margin-bottom: 40px !important;
  margin-top: 0 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* Remove inner fieldset card — fix double background */
form#node-matter-edit-form .required-fields.field-group-fieldset,
form#node-matter-edit-form .field-group-fieldset {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Fix label gray background from elyts.css */
form#node-matter-edit-form label.control-label {
  background-color: transparent !important;
  color: var(--v2-text-1) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: var(--v2-lh-sm) !important;
  margin-bottom: 8px !important;
  display: block !important;
  padding: 0 !important;
}

/* Fix date field wrapper gray background from style2.css */
form#node-matter-edit-form #edit-field-open-date-wrapper {
  background-color: transparent !important;
}

/* Style panel-heading as V2 modal title instead of hiding it */
form#node-matter-edit-form .panel-heading {
  background: transparent !important;
  border: none !important;
  padding: 0 0 40px 0 !important;
}

form#node-matter-edit-form .panel-heading .panel-title {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  font-weight: var(--v2-fw-semibold) !important;
  color: var(--v2-text-1) !important;
  text-align: center !important;
  line-height: var(--v2-lh-heading-lg) !important;
}

/* Reset custom-fields-wrapper panel card */
form#node-matter-edit-form #edit-custom-fields-wrapper {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Form group spacing */
form#node-matter-edit-form .js-form-item,
form#node-matter-edit-form .field--type-string,
form#node-matter-edit-form .field--type-string-long,
form#node-matter-edit-form .field--type-list-string,
form#node-matter-edit-form .field--type-entity-reference,
form#node-matter-edit-form .field--type-datetime {
  margin-bottom: 20px !important;
}

/* Text inputs */
form#node-matter-edit-form input.form-control:not([type='radio']):not([type='checkbox']) {
  min-height: var(--v2-input-height) !important;
  border: 1px solid #e5e7eb !important;
  border-radius: var(--v2-radius-input) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  color: var(--v2-text-2) !important;
  padding: 0 16px !important;
  background-color: #fff !important;
  box-shadow: none !important;
}

/* Selects */
form#node-matter-edit-form select.form-control {
  min-height: var(--v2-input-height) !important;
  border: 1px solid #e5e7eb !important;
  border-radius: var(--v2-radius-input) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  color: var(--v2-text-2) !important;
  padding: 0 16px !important;
  background-color: #fff !important;
  box-shadow: none !important;
}

/* Textarea */
form#node-matter-edit-form textarea.form-control {
  min-height: 130px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: var(--v2-radius-input) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  color: var(--v2-text-2) !important;
  padding: 16px !important;
  background-color: #fff !important;
  box-shadow: none !important;
  resize: none !important;
}

/* Actions container */
form#node-matter-edit-form #edit-actions {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Save button → V2 primary */
form#node-matter-edit-form #edit-submit {
  background-color: var(--v2-brand-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  height: var(--v2-btn-height) !important;
  min-width: 140px !important;
  padding: 0 20px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

form#node-matter-edit-form #edit-submit:hover {
  background-color: var(--v2-brand-green-hover) !important;
}

/* Hide legacy glyphicon inside Save button */
form#node-matter-edit-form #edit-submit .glyphicon {
  display: none !important;
}

/* Delete button → V2 danger */
form#node-matter-edit-form #edit-actions #edit-delete {
  background-color: var(--v2-brand-red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  height: var(--v2-btn-height) !important;
  min-width: 140px !important;
  padding: 0 20px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

form#node-matter-edit-form #edit-actions #edit-delete:hover {
  background-color: var(--v2-brand-red-hover) !important;
  color: #fff !important;
}

/* ================================================================
   Section 39 — Date Picker Field (.datepicker_value_wrap / .datepicker_wrap)
   Pattern: two inputs are rendered for date fields — the first
   (.datepicker_value_wrap) is the real form submission carrier;
   the second (.datepicker_wrap) is the visible jQuery UI Datepicker input.
   The JS (custom.js) syncs the selected date from the visible input
   back into the hidden one before submission.
   Legacy fix: removed the broken `margin-bottom: -66px` hack from
   style.css — that left the input in the paint flow, intercepting
   clicks and breaking the calendar. Replaced with display:none.
   ================================================================ */

/* Hide the raw value input — still submitted with the form */
.datepicker_value_wrap {
  display: none !important;
}

/* Visible datepicker input — v2 input tokens */
.datepicker_wrap input.form-control {
  min-height: var(--v2-input-height) !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  line-height: var(--v2-lh-xs) !important;
  color: var(--v2-text-2) !important;
  padding: 0 var(--v2-space-4) !important;
  background-color: #fff !important;
  box-shadow: none !important;
  width: 100% !important;
}

.datepicker_wrap input.form-control:focus {
  border-color: var(--v2-brand-green) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* jQuery UI calendar popup — v2 design tokens */
#ui-datepicker-div {
  background: #fff !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
  box-shadow: var(--v2-shadow-dropdown) !important;
  padding: 8px !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
}

/* Calendar header */
#ui-datepicker-div .ui-datepicker-header {
  background: transparent !important;
  border: none !important;
  color: var(--v2-text-1) !important;
  padding: 4px 0 8px !important;
  border-radius: 0 !important;
}

/* Month/year title */
#ui-datepicker-div .ui-datepicker-title {
  font-family: var(--v2-font) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-1) !important;
  line-height: 24px !important;
}

/* Prev/Next month arrows */
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
  top: 4px !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
}

#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover {
  background: var(--v2-surface-secondary) !important;
  border: none !important;
}

/* Weekday header cells */
#ui-datepicker-div .ui-datepicker-calendar thead th {
  color: var(--v2-text-2) !important;
  font-family: var(--v2-font) !important;
  font-weight: var(--v2-fw-medium) !important;
  font-size: var(--v2-text-xs) !important;
  padding: 4px 0 !important;
}

/* Day cells */
#ui-datepicker-div .ui-datepicker-calendar td {
  padding: 1px !important;
}

#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {
  display: block !important;
  text-align: center !important;
  border-radius: 4px !important;
  padding: 4px !important;
  background: transparent !important;
  color: var(--v2-text-1) !important;
  border: none !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  text-decoration: none !important;
}

#ui-datepicker-div .ui-datepicker-calendar td a:hover {
  background: var(--v2-surface-secondary) !important;
  color: var(--v2-text-1) !important;
  text-decoration: none !important;
}

/* Selected day */
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-current-day a,
#ui-datepicker-div .ui-datepicker-calendar td .ui-state-active {
  background: var(--v2-brand-green) !important;
  color: #fff !important;
  border-radius: 4px !important;
}

/* Today (not selected) */
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today a {
  background: var(--v2-surface-secondary) !important;
  color: var(--v2-text-1) !important;
  font-weight: var(--v2-fw-medium) !important;
}

/* Other-month days (greyed out) */
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-other-month span,
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-unselectable span {
  color: var(--v2-text-2) !important;
  opacity: 0.5 !important;
}

/* --- Hide toggle button (contract fields) — KAN-1154 --- */
form.org-detail-page-contract-fields .tableresponsive-toggle-columns {
  display: none !important;
}

/* --- Hide toggle button (contract type fields) — KAN-1154 --- */
form.add_contract_type_wrap_page_fields .tableresponsive-toggle-columns {
  display: none !important;
}

/* --- Hide toggle button (contract create/edit wizard step 3) — KAN-1154
   org_detail_page.module injects fields_table on page_num == 3 for both
   hook_form_node_contract_form_alter and hook_form_node_contract_edit_form_alter.
   The form gets class add_contract_wrap_page_3 dynamically. --- */
form.add_contract_wrap_page_3 .tableresponsive-toggle-columns {
  display: none !important;
}

/* =============================================================================
   Section 41 — GROUP SETTINGS PANEL: MATTER TYPES (.contactv2-add-group.custom-content-type)
   Loaded via AJAX when the gear icon is clicked on /section/group/{id}.
   URL: /content-types/{gid} → LCEntityController::customForm()
   V2 pattern: card container, sub-tab nav, tag chips, table rows, action buttons.
   ============================================================================= */

/* --- Fix: force <form> inside #custom-wrapper to block (prevents flex collapse
   that pushes .form-header off-screen to x:1164 with width:0) --- */
#custom-wrapper > form {
  display: block !important;
  width: 100% !important;
}

/* --- Fix: ensure .form-header always spans full width --- */
#custom-wrapper .form-header {
  width: 100% !important;
}

/* --- Fix: clearfix so #custom-wrapper contains its floated children --- */
#custom-wrapper::after {
  content: '' !important;
  display: table !important;
  clear: both !important;
}

/* --- Card container --- */
.contactv2-add-group.custom-content-type {
  background-color: var(--v2-surface-white) !important;
  border-radius: var(--v2-radius-modal) !important;
  box-shadow: var(--v2-shadow-card) !important;
  max-width: var(--v2-modal-width) !important;
  margin: var(--v2-space-10) auto !important;
  padding: var(--v2-space-10) var(--v2-modal-padding-x) var(--v2-space-10) !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow-y: visible !important;
}

/* --- Page title --- */
.contactv2-add-group.custom-content-type .matter-refer-title {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  font-weight: var(--v2-fw-semibold) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  color: var(--v2-text-1) !important;
  text-align: center !important;
  margin-bottom: var(--v2-space-8) !important;
  display: block !important;
}

/* --- Back button --- */
.contactv2-add-group.custom-content-type .ctcf-back-button {
  position: absolute !important;
  top: var(--v2-space-4) !important;
  left: var(--v2-space-4) !important;
  color: var(--v2-text-2) !important;
  font-size: var(--v2-text-base) !important;
  cursor: pointer !important;
}

.contactv2-add-group.custom-content-type .ctcf-back-button:hover {
  color: var(--v2-text-1) !important;
  text-decoration: none !important;
}

/* --- Sub-tabs strip: show (unlike the add/edit group card which hides them) --- */
.contactv2-add-group.custom-content-type .lc-tabs-wrap.content-type-wrap .lc-tabs-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  border-bottom: 1px solid var(--v2-border-input) !important;
  border-top: none !important;
  margin: 0 0 var(--v2-space-6) 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
}

/* --- Individual sub-tab link --- */
.contactv2-add-group.custom-content-type a.lc-tabs-sub-page.sub-tabs {
  flex: 1 !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-2) !important;
  padding: var(--v2-space-2) var(--v2-space-3) !important;
  border-bottom: 2px solid transparent !important;
  white-space: nowrap !important;
  text-align: center !important;
  text-decoration: none !important;
  transition:
    color var(--v2-transition-fast),
    border-color var(--v2-transition-fast) !important;
}

/* --- Active sub-tab --- */
.contactv2-add-group.custom-content-type a.lc-tabs-sub-page.sub-tabs.active {
  color: var(--v2-text-1) !important;
  font-weight: var(--v2-fw-medium) !important;
  border-bottom: 2px solid var(--v2-brand-green) !important;
}

/* --- Hover sub-tab --- */
.contactv2-add-group.custom-content-type a.lc-tabs-sub-page.sub-tabs:hover {
  color: var(--v2-text-1) !important;
  text-decoration: none !important;
}

/* =============================================================================
   Tags section (#ctype-matter-tags)
   ============================================================================= */

/* --- Wrapper (elyts.css sets display:none on this ID — override required) --- */
#ctype-matter-tags {
  display: block !important;
  margin-bottom: var(--v2-space-5) !important;
}

/* --- Existing tags row --- */
.ctype-matter-tags-existing {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--v2-space-2) !important;
  align-items: center !important;
  min-height: 32px !important;
  margin-bottom: var(--v2-space-3) !important;
}

/* --- Tag chip (colored background comes from inline style) --- */
.ctype-tag.ctype-tag-existing {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--v2-space-1) !important;
  padding: 4px 10px !important;
  border-radius: var(--v2-radius-btn) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-surface-white) !important;
  line-height: 1.4 !important;
}

/* --- Tag span (override the global .custom-content-type span color rule) --- */
.ctype-tag.ctype-tag-existing span {
  color: var(--v2-surface-white) !important;
  font-size: var(--v2-text-xs) !important;
}

/* --- Tag delete icon --- */
.ctype-tag.ctype-tag-existing a.ctype-tag-delete {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  margin-left: 2px !important;
}

.ctype-tag.ctype-tag-existing a.ctype-tag-delete:hover {
  color: var(--v2-surface-white) !important;
}

/* --- New tag row --- */
.ctype-matter-tags-new {
  display: flex !important;
  align-items: center !important;
}

.ctype-tag.ctype-tag-new {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: var(--v2-space-2) !important;
  background-color: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* --- New tag text input --- */
.ctype-tag.ctype-tag-new input[type='text'] {
  height: 36px !important;
  min-width: 140px !important;
  border: 1px solid var(--v2-border-input) !important;
  border-radius: var(--v2-radius-input) !important;
  padding: 0 var(--v2-space-3) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  color: var(--v2-text-1) !important;
  outline: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.ctype-tag.ctype-tag-new input[type='text']:focus {
  border-color: var(--v2-border-focus) !important;
}

/* --- "add a tag" link --- */
a.ctype-tag-add {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  color: var(--v2-text-2) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  cursor: pointer !important;
}

a.ctype-tag-add:hover {
  color: var(--v2-text-1) !important;
  text-decoration: none !important;
}

/* --- Tag confirm/cancel icons --- */
a.ctype-tag-check,
a.ctype-tag-cancel {
  font-size: var(--v2-text-base) !important;
  color: var(--v2-text-2) !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

a.ctype-tag-check:hover {
  color: var(--v2-brand-green) !important;
  text-decoration: none !important;
}

a.ctype-tag-cancel:hover {
  color: var(--v2-brand-red) !important;
  text-decoration: none !important;
}

/* =============================================================================
   Form header: "Add" button row
   ============================================================================= */

.contactv2-add-group.custom-content-type .form-header {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin-top: var(--v2-space-2) !important;
  margin-bottom: var(--v2-space-5) !important;
}

/* --- "Add" button (V2 primary style) --- */
button#add-extended-content-type,
button.add-ctcf-buttons {
  height: var(--v2-btn-height) !important;
  min-width: 100px !important;
  padding: var(--v2-btn-padding) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-surface-white) !important;
  background: var(--v2-brand-green) !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  cursor: pointer !important;
  float: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--v2-space-1) !important;
  transition: background-color var(--v2-transition-base) !important;
}

button#add-extended-content-type:hover,
button.add-ctcf-buttons:hover {
  background: var(--v2-brand-green-hover) !important;
}

/* =============================================================================
   Matter Types table (.ctype-table)
   ============================================================================= */

/* --- Table card wrapper (fix Bootstrap col-md-12 float:left that collapses #custom-wrapper) --- */
.ctype-table {
  border: 1px solid var(--v2-border-input) !important;
  border-radius: var(--v2-radius-card) !important;
  overflow: hidden !important;
  margin-bottom: var(--v2-space-6) !important;
  float: none !important;
  width: 100% !important;
  clear: both !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* --- Header row --- */
.ctype-data-header {
  display: flex !important;
  align-items: center !important;
  padding: var(--v2-space-3) var(--v2-space-4) !important;
  background-color: var(--v2-surface-bg) !important;
  border-bottom: 1px solid var(--v2-border-input) !important;
}

.ctype-data-header span {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-2) !important;
}

/* --- Data rows --- */
.ctype-data-row {
  display: flex !important;
  align-items: center !important;
  padding: var(--v2-space-3) var(--v2-space-4) !important;
  border-bottom: 1px solid var(--v2-border-input) !important;
  background-color: var(--v2-surface-white) !important;
  transition: background-color var(--v2-transition-fast) !important;
}

.ctype-data-row:last-child {
  border-bottom: none !important;
}

.ctype-data-row:hover {
  background-color: var(--v2-surface-bg) !important;
}

/* Remove legacy alternating row color */
.ctype-data-row:nth-child(odd) {
  background: var(--v2-surface-white) !important;
}

.ctype-data-row:nth-child(odd):hover {
  background-color: var(--v2-surface-bg) !important;
}

/* --- Label and name text --- */
.ctype-label,
.ctype-name {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-1) !important;
}

/* Override the broad `span { color: #000 }` rule for these specific spans */
.ctype-data-row .ctype-label,
.ctype-data-row .ctype-name {
  color: var(--v2-text-1) !important;
}

/* --- Action icons --- */
i.ctype-edit-link,
i.ctype-delete-link {
  font-size: var(--v2-text-lg) !important;
  color: var(--v2-text-2) !important;
  cursor: pointer !important;
  padding: 4px !important;
  transition: color var(--v2-transition-fast) !important;
}

i.ctype-edit-link:hover {
  color: var(--v2-text-1) !important;
}

i.ctype-delete-link:hover {
  color: var(--v2-brand-red) !important;
}

/* --- Status (toggle) column: center-align --- */
.ctype-status-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ctype-status-container.header {
  justify-content: center !important;
}

/* =============================================================================
   Save Group button (a#save-all-content-type)
   ============================================================================= */

a#save-all-content-type.ctcf-save-group-button {
  display: block !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-top: var(--v2-space-5) !important;
  float: none !important;
  clear: both !important;
  height: var(--v2-btn-height) !important;
  min-width: var(--v2-btn-min-width) !important;
  padding: var(--v2-btn-padding) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: var(--v2-btn-height) !important;
  text-align: center !important;
  color: var(--v2-surface-white) !important;
  background-color: var(--v2-brand-green) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  position: static !important;
  transition: background-color var(--v2-transition-base) !important;
}

a#save-all-content-type.ctcf-save-group-button:hover {
  background-color: var(--v2-brand-green-hover) !important;
  color: var(--v2-surface-white) !important;
  text-decoration: none !important;
}

/* =============================================================================
   Section 42 — GROUP SETTINGS PANEL: CUSTOM MESSAGES (.custom-messages-page)
   URL: /lc-entity/custom-messages/edit/{gid} → LCEntityCustomMessages::getCustomMessagesPage()
   V2 pattern: card container, sub-tab nav, labeled textareas, save button.
   ============================================================================= */

/* --- Card container --- */
.contactv2-add-group.custom-messages-page {
  background-color: var(--v2-surface-white) !important;
  border-radius: var(--v2-radius-modal) !important;
  box-shadow: var(--v2-shadow-card) !important;
  max-width: var(--v2-modal-width) !important;
  margin: var(--v2-space-10) auto !important;
  padding: var(--v2-space-10) var(--v2-modal-padding-x) !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow-y: visible !important;
}

/* --- Page title --- */
.contactv2-add-group.custom-messages-page .matter-refer-title {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  font-weight: var(--v2-fw-semibold) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  color: var(--v2-text-1) !important;
  text-align: center !important;
  margin-bottom: var(--v2-space-8) !important;
  display: block !important;
}

/* --- Back button --- */
.contactv2-add-group.custom-messages-page .ctcf-back-button {
  position: absolute !important;
  top: var(--v2-space-4) !important;
  left: var(--v2-space-4) !important;
  color: var(--v2-text-2) !important;
  font-size: var(--v2-text-base) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.contactv2-add-group.custom-messages-page .ctcf-back-button:hover {
  color: var(--v2-text-1) !important;
  text-decoration: none !important;
}

/* --- Sub-tabs strip (display:none overridden — same elyts.css issue as Section 41) --- */
.contactv2-add-group.custom-messages-page .lc-tabs-wrap.content-type-wrap .lc-tabs-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  float: none !important;
  width: 100% !important;
  border-bottom: 1px solid var(--v2-border-input) !important;
  border-top: none !important;
  margin: 0 0 var(--v2-space-6) 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  box-sizing: border-box !important;
}

/* --- Individual sub-tab link (override Bootstrap col-sm-3 float + width) --- */
.contactv2-add-group.custom-messages-page a.lc-tabs-sub-page.sub-tabs {
  flex: 1 !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-2) !important;
  padding: var(--v2-space-2) var(--v2-space-3) !important;
  border-bottom: 2px solid transparent !important;
  white-space: nowrap !important;
  text-align: center !important;
  text-decoration: none !important;
  display: block !important;
  transition:
    color var(--v2-transition-fast),
    border-color var(--v2-transition-fast) !important;
}

/* --- Active sub-tab --- */
.contactv2-add-group.custom-messages-page a.lc-tabs-sub-page.sub-tabs.active {
  color: var(--v2-text-1) !important;
  font-weight: var(--v2-fw-medium) !important;
  border-bottom: 2px solid var(--v2-brand-green) !important;
}

/* --- Hover sub-tab --- */
.contactv2-add-group.custom-messages-page a.lc-tabs-sub-page.sub-tabs:hover {
  color: var(--v2-text-1) !important;
  text-decoration: none !important;
}

/* =============================================================================
   Form body (.cust-msgs-wrap)
   ============================================================================= */

/* --- Field group spacing --- */
.custom-messages-page .cust-msgs-wrap .section {
  margin-bottom: var(--v2-space-5) !important;
}

/* --- Labels (legacy style: display:flex + gray bg + wrong border-radius) --- */
.custom-messages-page label.cust-msgs-heading {
  display: block !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-1) !important;
  margin-bottom: var(--v2-space-2) !important;
}

/* --- Textareas (override gray bg, 0 border-radius, height:122px) --- */
.custom-messages-page textarea.form-control {
  display: block !important;
  width: 100% !important;
  min-height: 130px !important;
  height: auto !important;
  padding: var(--v2-space-4) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-xs) !important;
  color: var(--v2-text-1) !important;
  background-color: var(--v2-surface-white) !important;
  border: 1px solid var(--v2-border-input) !important;
  border-radius: var(--v2-radius-input) !important;
  resize: none !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  letter-spacing: normal !important;
  transition: border-color var(--v2-transition-fast) !important;
}

.custom-messages-page textarea.form-control:focus {
  border-color: var(--v2-border-focus) !important;
  background-color: var(--v2-surface-white) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* --- Helper text --- */
.custom-messages-page .cust-msgs-description {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-xs) !important;
  color: var(--v2-text-2) !important;
  margin-top: var(--v2-space-2) !important;
  margin-bottom: 0 !important;
}

/* =============================================================================
   Save Group button (a#save-group-custom-messages)
   Override: position:absolute bottom:41px right:41px + legacy green #13bb64
   ============================================================================= */

a#save-group-custom-messages.cust-msgs-save-group-button {
  display: block !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-top: var(--v2-space-6) !important;
  position: static !important;
  float: none !important;
  height: var(--v2-btn-height) !important;
  min-width: var(--v2-btn-min-width) !important;
  padding: var(--v2-btn-padding) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: var(--v2-btn-height) !important;
  text-align: center !important;
  color: var(--v2-surface-white) !important;
  background-color: var(--v2-brand-green) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color var(--v2-transition-base) !important;
}

a#save-group-custom-messages.cust-msgs-save-group-button:hover {
  background-color: var(--v2-brand-green-hover) !important;
  color: var(--v2-surface-white) !important;
  text-decoration: none !important;
}

/* =============================================================================
   Section 43 — GROUP SETTINGS PANEL: PERMISSIONS (.group-permissions)
   URL: /lc-entity/permissions/edit/{gid}
   Container: .contactv2-add-group.contactv2-edit-group (no unique page class —
   shared with Custom Messages which adds .custom-messages-page on top).
   V2 pattern: card container, sub-tab nav, 5 label+select fields, save button.
   ============================================================================= */

/* --- Card container + title + back button
   Selector covers Permissions directly, and Custom Messages via the shared
   .contactv2-edit-group class (same values, no visual difference). --- */
.contactv2-add-group.contactv2-edit-group {
  background-color: var(--v2-surface-white) !important;
  border-radius: var(--v2-radius-modal) !important;
  box-shadow: var(--v2-shadow-card) !important;
  max-width: var(--v2-modal-width) !important;
  margin: var(--v2-space-10) auto !important;
  padding: var(--v2-space-10) var(--v2-modal-padding-x) !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow-y: visible !important;
}

.contactv2-add-group.contactv2-edit-group .matter-refer-title {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-heading-lg) !important;
  font-weight: var(--v2-fw-semibold) !important;
  line-height: var(--v2-lh-heading-lg) !important;
  color: var(--v2-text-1) !important;
  text-align: center !important;
  margin-bottom: var(--v2-space-8) !important;
  display: block !important;
}

.contactv2-add-group.contactv2-edit-group .ctcf-back-button {
  position: absolute !important;
  top: var(--v2-space-4) !important;
  left: var(--v2-space-4) !important;
  color: var(--v2-text-2) !important;
  font-size: var(--v2-text-base) !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.contactv2-add-group.contactv2-edit-group .ctcf-back-button:hover {
  color: var(--v2-text-1) !important;
  text-decoration: none !important;
}

/* --- Sub-tabs strip (display:none overridden — covers Permissions + Custom Messages) --- */
.contactv2-add-group.contactv2-edit-group .lc-tabs-wrap.content-type-wrap .lc-tabs-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  float: none !important;
  width: 100% !important;
  border-bottom: 1px solid var(--v2-border-input) !important;
  border-top: none !important;
  margin: 0 0 var(--v2-space-6) 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  box-sizing: border-box !important;
}

/* --- Individual sub-tab link (override Bootstrap col-sm-3 float + width) --- */
.contactv2-add-group.contactv2-edit-group a.lc-tabs-sub-page.sub-tabs {
  flex: 1 !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-2) !important;
  padding: var(--v2-space-2) var(--v2-space-3) !important;
  border-bottom: 2px solid transparent !important;
  white-space: nowrap !important;
  text-align: center !important;
  text-decoration: none !important;
  transition:
    color var(--v2-transition-fast),
    border-color var(--v2-transition-fast) !important;
}

.contactv2-add-group.contactv2-edit-group a.lc-tabs-sub-page.sub-tabs.active {
  color: var(--v2-text-1) !important;
  font-weight: var(--v2-fw-medium) !important;
  border-bottom: 2px solid var(--v2-brand-green) !important;
}

.contactv2-add-group.contactv2-edit-group a.lc-tabs-sub-page.sub-tabs:hover {
  color: var(--v2-text-1) !important;
  text-decoration: none !important;
}

/* =============================================================================
   Permissions form body (.group-permissions)
   ============================================================================= */

/* --- Labels (legacy: display:flex + gray bg + border-radius 4px 4px 0 0) --- */
.group-permissions label.control-label {
  display: block !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  height: auto !important;
  padding: 0 !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-1) !important;
  margin-bottom: var(--v2-space-2) !important;
}

/* --- Selects (V2 select component: white bg, border, radius-12, chevron arrow) --- */
.group-permissions select.group-perms-select {
  display: block !important;
  width: 100% !important;
  height: var(--v2-input-height) !important;
  padding: 0 var(--v2-space-8) 0 var(--v2-space-4) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-1) !important;
  background-color: var(--v2-surface-white) !important;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23737987' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right var(--v2-space-3) center !important;
  background-size: 16px !important;
  border: 1px solid var(--v2-border-input) !important;
  border-radius: var(--v2-radius-input) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  margin-bottom: var(--v2-space-5) !important;
  transition: border-color var(--v2-transition-fast) !important;
}

.group-permissions select.group-perms-select:focus {
  border-color: var(--v2-border-focus) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* --- Gap divs (replaced by select margin-bottom above) --- */
.group-permissions .gap {
  display: none !important;
}

/* =============================================================================
   Save Permissions button (a#save-group-permissions)
   Override: wrong green #13bb67 + 2px border + border-radius:3px
   ============================================================================= */

a#save-group-permissions.ctcf-save-group-button {
  display: block !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-top: var(--v2-space-2) !important;
  position: static !important;
  float: none !important;
  height: var(--v2-btn-height) !important;
  min-width: var(--v2-btn-min-width) !important;
  padding: var(--v2-btn-padding) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: var(--v2-btn-height) !important;
  text-align: center !important;
  color: var(--v2-surface-white) !important;
  background-color: var(--v2-brand-green) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--v2-radius-btn) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color var(--v2-transition-base) !important;
}

a#save-group-permissions.ctcf-save-group-button:hover {
  background-color: var(--v2-brand-green-hover) !important;
  color: var(--v2-surface-white) !important;
  text-decoration: none !important;
}

/* =============================================================================
   Contract Repository — Page Layout
   ============================================================================= */

/* ---- Content area: flex column, no shadow, full available width ---- */
.contract-repo-flex > .views-element-container.form-group {
  background: transparent !important;
  padding: var(--v2-space-10) !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-shadow: none !important;
  margin-left: 0 !important;
}

/* ---- Footer modal-header layout (button row inside view-footer) ---- */
.contract-repo-flex .view-footer .modal-header p {
  display: flex !important;
  flex: 1 !important;
  justify-content: flex-end !important;
  gap: var(--v2-space-3) !important;
}

.contract-repo-flex .view-footer .modal-header {
  display: flex !important;
  align-items: center !important;
}

/* ---- Allow dropdowns to overflow the table card ---- */
.contract-repo-flex .table-responsive {
  overflow-x: visible !important;
}

/* ---- View container ---- */
.view-org-contract-repo {
  max-width: 1100px !important;
  width: 100% !important;
  position: relative !important;
}

/* ---- View footer: reset so it can be repositioned absolutely ---- */
.view-org-contract-repo .view-footer {
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =============================================================================
   Contract Repository — Header & Title
   ============================================================================= */

/* ---- Header: positioning parent for the action buttons ---- */
.view-org-contract-repo .view-header {
  position: relative !important;
  padding-right: 320px !important;
  margin-bottom: var(--v2-space-5) !important;
  width: 100%;
}

/* ---- Title: hide original text, inject v2 label via ::before ---- */
.view-org-contract-repo .view-header h3 {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

.view-org-contract-repo .view-header h3::before {
  content: 'Contract Repository' !important;
  display: block !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-lg) !important;
  line-height: 26px !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-1) !important;
}

/* ---- Subtitle via ::after ---- */
.view-org-contract-repo .view-header h3::after {
  content: 'Search, filter, and manage your contracts' !important;
  display: block !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  line-height: var(--v2-lh-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-2) !important;
  margin-top: var(--v2-space-1) !important;
}

/* =============================================================================
   Contract Repository — Table
   ============================================================================= */

/* ---- View content wrapper ---- */
.view-org-contract-repo .view-content {
  margin-top: 0 !important;
}

.view-org-contract-repo .view-content .table-responsive {
  background-color: var(--v2-surface-white) !important;
  border-radius: var(--v2-radius-card) !important;
  overflow: visible !important;
  /* Wrapper padding gives first/last cells breathing room from the card
     edge — matches the contracts-template tab card (style.css line 9989). */
  padding: 0 var(--v2-space-4) !important;
}

/* ---- Table reset ---- */
.view-org-contract-repo table.table {
  margin: 0 !important;
  border: none !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

/* ---- Strip Bootstrap alternating row color ---- */
.view-org-contract-repo table.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: transparent !important;
}

/* ---- Table header ---- */
.view-org-contract-repo table thead th {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  line-height: var(--v2-lh-xs) !important;
  font-weight: var(--v2-fw-semibold) !important;
  color: var(--v2-text-2) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 14px var(--v2-space-3) !important;
  border-top: none !important;
  border-bottom: 1px solid var(--v2-border-default) !important;
  border-left: none !important;
  border-right: none !important;
  background-color: transparent !important;
  white-space: nowrap !important;
}

/* ---- Table rows ---- */
.view-org-contract-repo table tbody tr {
  background-color: transparent !important;
  transition: background-color var(--v2-transition-fast) !important;
  border: none !important;
}

.view-org-contract-repo table tbody tr:hover {
  background-color: var(--v2-surface-bg) !important;
}

/* ---- Table cells ---- */
.view-org-contract-repo table tbody td {
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  line-height: var(--v2-lh-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  color: var(--v2-text-1) !important;
  padding: var(--v2-space-4) var(--v2-space-3) !important;
  border-top: none !important;
  border-bottom: 1px solid var(--v2-border-default) !important;
  border-left: none !important;
  border-right: none !important;
  vertical-align: middle !important;
  word-break: break-word !important;
}

.view-org-contract-repo table tbody tr:last-child td {
  border-bottom: none !important;
}

/* ---- Name column — slightly bolder ---- */
.view-org-contract-repo table tbody td.views-field-field-contract-repo-document-2 {
  font-weight: var(--v2-fw-medium) !important;
  max-width: 200px !important;
  word-break: break-all !important;
}

/* ---- Secondary text columns ---- */
.view-org-contract-repo table tbody td.views-field-field-contract-repo-status,
.view-org-contract-repo table tbody td.views-field-field-contract-type,
.view-org-contract-repo table tbody td.views-field-field-contract-type1,
.view-org-contract-repo table tbody td.views-field-changed {
  color: var(--v2-text-2) !important;
}

/* ---- Status and Origin columns — no wrap ---- */
.view-org-contract-repo table tbody td.views-field-field-contract-repo-status,
.view-org-contract-repo table tbody td.views-field-field-contract-type {
  white-space: nowrap !important;
}

/* ---- Updated column — consistent with Status/Origin ---- */
.view-org-contract-repo .views-field-changed {
  white-space: normal !important;
}

/* ---- Download link ---- */
.view-org-contract-repo table tbody td.views-field-contract-repo-download-views-field a {
  color: var(--v2-brand-green) !important;
  text-decoration: none !important;
  font-weight: var(--v2-fw-medium) !important;
  font-size: 13px !important;
}

.view-org-contract-repo table tbody td.views-field-contract-repo-download-views-field a:hover {
  color: var(--v2-brand-green-hover) !important;
  text-decoration: underline !important;
}

.view-org-contract-repo table tbody td.views-field-contract-repo-download-views-field a i {
  color: var(--v2-brand-green) !important;
  margin-right: var(--v2-space-1) !important;
}

/* ---- Matter link ---- */
.view-org-contract-repo table tbody td.views-field-field-contract-repo-matter-1 a {
  color: var(--v2-brand-green) !important;
  text-decoration: none !important;
  font-weight: var(--v2-fw-regular) !important;
}

.view-org-contract-repo table tbody td.views-field-field-contract-repo-matter-1 a:hover {
  color: var(--v2-brand-green-hover) !important;
  text-decoration: underline !important;
}

/* ---- Actions column ---- */
.view-org-contract-repo table tbody td.views-field-contract-repo-actions-views-field {
  text-align: right !important;
  position: relative !important;
}

.view-org-contract-repo .contract-repo-vf .contract_action.org-entity-action {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* ---- 3-dot trigger — line-height:1 prevents the icon from inheriting the
       row's 20px line-height and sitting visually above the cell midline. ---- */
.view-org-contract-repo .contract-repo-vf a.three-dot-link {
  color: var(--v2-text-2) !important;
  text-decoration: none !important;
  font-size: var(--v2-text-base) !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.view-org-contract-repo .contract-repo-vf a.three-dot-link:hover {
  color: var(--v2-text-1) !important;
}

/* ---- 3-dot dropdown panel ---- */
.view-org-contract-repo .contract-repo-vf .org-entity-action-inner {
  background-color: var(--v2-surface-white) !important;
  border-radius: var(--v2-radius-card) !important;
  box-shadow: var(--v2-shadow-dropdown) !important;
  padding: 10px !important;
  min-width: 180px !important;
  border: none !important;
  z-index: 100 !important;
  position: absolute !important;
  right: 0 !important;
  top: 100% !important;
  margin-top: var(--v2-space-1) !important;
}

.view-org-contract-repo .contract-repo-vf .org-entity-action-inner.show {
  display: flex !important;
  flex-direction: column !important;
}

/* ---- Dropdown menu items ---- */
.view-org-contract-repo .contract-repo-vf .org-entity-action-inner a.three-dot-menu {
  display: block !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-1) !important;
  padding: var(--v2-space-1) var(--v2-space-2) !important;
  margin-bottom: var(--v2-space-1) !important;
  border-radius: var(--v2-radius-sm) !important;
  cursor: pointer !important;
  transition: background-color var(--v2-transition-fast) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.view-org-contract-repo .contract-repo-vf .org-entity-action-inner a.three-dot-menu:last-child {
  margin-bottom: 0 !important;
}

.view-org-contract-repo .contract-repo-vf .org-entity-action-inner a.three-dot-menu:hover {
  background-color: #f3f3f3 !important;
}

.view-org-contract-repo
  .contract-repo-vf
  .org-entity-action-inner
  a.three-dot-menu[href*='delete'] {
  color: var(--v2-brand-red) !important;
  order: 999 !important;
  margin-top: var(--v2-space-1) !important;
  margin-bottom: 0 !important;
}

.view-org-contract-repo .contract-repo-vf .org-entity-action-inner a.three-dot-menu i {
  margin-left: var(--v2-space-1) !important;
  font-size: 11px !important;
}

/* ---- Responsive: screens narrower than 1430px ---- */
@media (max-width: 1430px) {
  .view-org-contract-repo .table th,
  .view-org-contract-repo .table td {
    font-size: var(--v2-text-xs) !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* =============================================================================
   Contract Repository — Footer Buttons (repositioned to top-right of header)
   ============================================================================= */

/* ---- Button container: absolute top-right, overlaid on view-header ---- */
.view-org-contract-repo .view-footer > p {
  display: flex !important;
  align-items: center !important;
  gap: var(--v2-space-3) !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 5 !important;
}

.view-org-contract-repo .view-footer > p > br {
  display: none !important;
}

/* ---- Add Contract — secondary button ---- */
.view-org-contract-repo .view-footer > p > a:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--v2-btn-height) !important;
  padding: var(--v2-btn-padding) !important;
  border-radius: var(--v2-radius-btn) !important;
  background-color: var(--v2-surface-secondary) !important;
  background-image: none !important;
  color: var(--v2-text-1) !important;
  border: none !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: 100% !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color var(--v2-transition-base) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  position: static !important;
}

.view-org-contract-repo .view-footer > p > a:first-child:hover {
  background-color: var(--v2-surface-disabled) !important;
}

/* ---- Add Multiple — primary (green) button ---- */
.view-org-contract-repo .view-footer > p > a:last-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--v2-btn-height) !important;
  padding: var(--v2-btn-padding) !important;
  border-radius: var(--v2-radius-btn) !important;
  background-color: var(--v2-brand-green) !important;
  background-image: none !important;
  color: var(--v2-surface-white) !important;
  border: none !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-base) !important;
  font-weight: var(--v2-fw-medium) !important;
  line-height: 100% !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color var(--v2-transition-base) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  position: static !important;
}

.view-org-contract-repo .view-footer > p > a:last-child:hover {
  background-color: var(--v2-brand-green-hover) !important;
  color: var(--v2-surface-white) !important;
}

/* =============================================================================
   Contract Repository — Search Bar
   ============================================================================= */

.view-org-contract-repo .view-filters {
  margin-top: 0 !important;
  margin-bottom: var(--v2-space-4) !important;
}

#views-exposed-form-org-contract-repo-page-1 {
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

#views-exposed-form-org-contract-repo-page-1 .form--inline {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important;
}

/* ---- AI Search input wrapper ---- */
/* Note: `padding` intentionally omitted so the conic-gradient ring from
   section 38 (line ~6563, `padding: 2px`) can render around the input. */
#views-exposed-form-org-contract-repo-page-1 .ai-search-input-wrapper {
  flex: 1 1 0% !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  gap: 0 !important;
}

#views-exposed-form-org-contract-repo-page-1 .ai-search-input-wrapper label {
  display: none !important;
}

#views-exposed-form-org-contract-repo-page-1 .ai-search-input-wrapper > .form-item {
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#views-exposed-form-org-contract-repo-page-1 .ai-search-input-wrapper .form-item input {
  width: 100% !important;
  height: 42px !important;
  padding: 0 var(--v2-space-4) !important;
  border: 1px solid var(--v2-border-input) !important;
  border-radius: var(--v2-radius-input) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-1) !important;
  background-color: var(--v2-surface-white) !important;
  transition: border-color var(--v2-transition-fast) !important;
}

#views-exposed-form-org-contract-repo-page-1
  .ai-search-input-wrapper
  .form-item
  input::placeholder {
  color: var(--v2-text-2) !important;
  font-size: 13px !important;
}

#views-exposed-form-org-contract-repo-page-1 .ai-search-input-wrapper .form-item input:focus {
  border-color: var(--v2-border-focus) !important;
  box-shadow: none !important;
  outline: none !important;
}

#views-exposed-form-org-contract-repo-page-1 .ai-send-icon {
  display: none !important;
}

/* ---- Search / Ask AI button — primary pill ---- */
#views-exposed-form-org-contract-repo-page-1 .search-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  height: 42px !important;
  padding: 0 var(--v2-space-5) !important;
  border-radius: var(--v2-radius-btn) !important;
  background-color: var(--v2-brand-green) !important;
  color: var(--v2-surface-white) !important;
  border: none !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color var(--v2-transition-base) !important;
  margin-left: var(--v2-space-3) !important;
}

#views-exposed-form-org-contract-repo-page-1 .search-button:hover,
#views-exposed-form-org-contract-repo-page-1 .search-button:focus {
  background-color: var(--v2-brand-green-hover) !important;
  color: var(--v2-surface-white) !important;
  text-decoration: none !important;
}

/* ---- Advanced Search toggle — secondary pill ---- */
#views-exposed-form-org-contract-repo-page-1 .advanced-search-toggle {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  height: 42px !important;
  padding: 0 var(--v2-space-3) !important;
  border-radius: var(--v2-radius-btn) !important;
  background-color: var(--v2-surface-secondary) !important;
  color: var(--v2-text-1) !important;
  border: none !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color var(--v2-transition-base) !important;
  margin-left: var(--v2-space-2) !important;
}

#views-exposed-form-org-contract-repo-page-1 .advanced-search-toggle:hover,
#views-exposed-form-org-contract-repo-page-1 .advanced-search-toggle:focus {
  background-color: var(--v2-surface-disabled) !important;
  color: var(--v2-text-1) !important;
  text-decoration: none !important;
}

#views-exposed-form-org-contract-repo-page-1 .advanced-search-toggle.active {
  background-color: var(--v2-brand-green) !important;
  color: var(--v2-surface-white) !important;
}

/* =============================================================================
   Contract Repository — Advanced Filters
   ============================================================================= */

/* display: flex without !important so jQuery toggle() can hide with inline display:none */
#views-exposed-form-org-contract-repo-page-1 .advanced-search-content {
  flex-basis: 100% !important;
  width: 100% !important;
  display: flex;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: var(--v2-space-3) !important;
  margin-top: var(--v2-space-3) !important;
  padding: 0 !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  border: none !important;
}

/* ---- Filter labels ---- */
#views-exposed-form-org-contract-repo-page-1 .advanced-search-content label {
  display: block !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  line-height: var(--v2-lh-xs) !important;
  font-weight: var(--v2-fw-medium) !important;
  color: var(--v2-text-2) !important;
  background-color: transparent !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  text-transform: none !important;
}

/* ---- Filter form items ---- */
#views-exposed-form-org-contract-repo-page-1 .advanced-search-content .form-item {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 140px !important;
}

/* #views-exposed-form-org-contract-repo-page-1 .advanced-search-content .form-item-search-text {
  flex: 1 1 auto !important;
} */

#views-exposed-form-org-contract-repo-page-1 .advanced-search-content .select-wrapper {
  display: block !important;
  height: auto !important;
}

/* ---- Filter select ---- */
#views-exposed-form-org-contract-repo-page-1 .advanced-search-content select.form-control {
  height: 42px !important;
  padding: 0 32px 0 var(--v2-space-3) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  color: var(--v2-text-1) !important;
  border: 1px solid var(--v2-border-input) !important;
  border-radius: var(--v2-radius-input) !important;
  background-color: var(--v2-surface-white) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23737987' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right var(--v2-space-3) center !important;
  cursor: pointer !important;
  transition: border-color var(--v2-transition-fast) !important;
}

#views-exposed-form-org-contract-repo-page-1 .advanced-search-content select.form-control:focus {
  border-color: var(--v2-border-focus) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ---- Filter text input ---- */
#views-exposed-form-org-contract-repo-page-1 .advanced-search-content input.form-control {
  height: 42px !important;
  padding: 0 var(--v2-space-4) !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  color: var(--v2-text-1) !important;
  border: 1px solid var(--v2-border-input) !important;
  border-radius: var(--v2-radius-input) !important;
  background-color: var(--v2-surface-white) !important;
  transition: border-color var(--v2-transition-fast) !important;
}

#views-exposed-form-org-contract-repo-page-1
  .advanced-search-content
  input.form-control::placeholder {
  color: var(--v2-text-2) !important;
  font-size: 13px !important;
}

#views-exposed-form-org-contract-repo-page-1 .advanced-search-content input.form-control:focus {
  border-color: var(--v2-border-focus) !important;
  border-right: 1px solid var(--v2-border-focus) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ---- Apply button — primary ---- */
#views-exposed-form-org-contract-repo-page-1 .advanced-search-content .form-actions {
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#views-exposed-form-org-contract-repo-page-1 .advanced-search-content .form-actions button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  padding: 0 var(--v2-space-6) !important;
  border-radius: var(--v2-radius-btn) !important;
  background-color: var(--v2-brand-green) !important;
  color: var(--v2-surface-white) !important;
  border: none !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-medium) !important;
  cursor: pointer !important;
  transition: background-color var(--v2-transition-base) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

#views-exposed-form-org-contract-repo-page-1 .advanced-search-content .form-actions button .icon {
  display: none !important;
}

#views-exposed-form-org-contract-repo-page-1 .advanced-search-content .form-actions button:hover,
#views-exposed-form-org-contract-repo-page-1 .advanced-search-content .form-actions button:focus {
  background-color: var(--v2-brand-green-hover) !important;
  color: var(--v2-surface-white) !important;
}

/* ---- Reset button — ghost ---- */
#views-exposed-form-org-contract-repo-page-1
  .advanced-search-content
  .form-actions
  button[id^='edit-reset'] {
  border-radius: var(--v2-radius-btn) !important;
  border: 1px solid var(--v2-border-input) !important;
  background-color: var(--v2-surface-white) !important;
  color: var(--v2-text-2) !important;
  margin-left: var(--v2-space-2) !important;
  font-size: var(--v2-text-sm) !important;
}

#views-exposed-form-org-contract-repo-page-1
  .advanced-search-content
  .form-actions
  button[id^='edit-reset']:hover {
  background-color: var(--v2-brand-red) !important;
  color: var(--v2-surface-white) !important;
  border-color: var(--v2-brand-red) !important;
}

/* =============================================================================
   Contract Repository — Matter Fields frame
   ============================================================================= */

/* Full-width framed group for org custom field filters */
#views-exposed-form-org-contract-repo-page-1
  .advanced-search-content
  .contract-custom-fields-filters {
  flex-basis: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: var(--v2-space-3) !important;
  padding: var(--v2-space-4) !important;
  margin-top: var(--v2-space-2) !important;
  border: 1px solid var(--v2-border-input) !important;
  border-radius: var(--v2-radius-input) !important;
  background-color: var(--v2-surface-bg) !important;
}

/* Section label rendered by ContractCustomFieldsFilter::buildExposedForm */
#views-exposed-form-org-contract-repo-page-1
  .advanced-search-content
  .contract-custom-fields-header {
  flex-basis: 100% !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-xs) !important;
  line-height: var(--v2-lh-xs) !important;
  font-weight: var(--v2-fw-semibold) !important;
  color: var(--v2-text-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: var(--v2-space-2) !important;
}

/* Ensure child form-items inside the frame share the same input sizing */
#views-exposed-form-org-contract-repo-page-1
  .advanced-search-content
  .contract-custom-fields-filters
  > .form-item {
  margin: 0 !important;
}

/* =============================================================================
   Matter Not Found page
   ============================================================================= */

.matter-not-found-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  background-color: var(--v2-surface-bg);
  padding: var(--v2-space-8);
}

.matter-not-found-card {
  background-color: var(--v2-surface-white);
  border-radius: var(--v2-radius-modal);
  box-shadow: var(--v2-shadow-card);
  padding: 48px 64px;
  text-align: center;
  max-width: 480px;
  width: 100%;
}

.matter-not-found-icon {
  font-size: 48px;
  color: var(--v2-brand-red);
  display: block;
  margin-bottom: var(--v2-space-6);
}

.matter-not-found-title {
  font-family: var(--v2-font);
  font-size: var(--v2-text-heading-lg);
  font-weight: var(--v2-fw-semibold);
  color: var(--v2-text-1);
  margin: 0 0 var(--v2-space-4) 0;
}

.matter-not-found-text {
  font-family: var(--v2-font);
  font-size: var(--v2-text-base);
  color: var(--v2-text-2);
  line-height: var(--v2-lh-base);
  margin: 0 0 var(--v2-space-8) 0;
}

.matter-not-found-btn {
  margin: 0 auto;
}

/* =============================================================================
   CHOSEN.JS — V2 dropdown styling
   Aligns the Chosen-enhanced selects (introduced by KAN-1181) with the V2
   design tokens used by native selects/inputs elsewhere in the system.
   Targets: views exposed filters on /matters, /matters-list, and the Advanced
   Search panel on /contract-repository, plus any future Chosen instance.
   ============================================================================= */

/* --- Single-select trigger (the visible "input-like" box) --- */
.chosen-container-single .chosen-single {
  display: flex !important;
  align-items: center !important;
  height: var(--v2-input-height) !important;
  padding: var(--v2-input-padding) !important;
  padding-right: 36px !important;
  background: var(--v2-surface-white) !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
  box-shadow: none !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  font-weight: var(--v2-fw-regular) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-1) !important;
  transition: border-color var(--v2-transition-fast) !important;
}

.chosen-container-single .chosen-single span {
  margin-right: 0 !important;
  font-size: var(--v2-text-sm) !important;
  line-height: var(--v2-lh-sm) !important;
  color: inherit !important;
}

/* Placeholder / "- Any -" / "Choose an option" empty state */
.chosen-container-single .chosen-single.chosen-default,
.chosen-container-single .chosen-single.chosen-default span {
  color: var(--v2-text-2) !important;
}

/* Replace Chosen sprite arrow with a V2 chevron SVG */
.chosen-container-single .chosen-single div {
  position: absolute !important;
  top: 0 !important;
  right: 12px !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  width: 16px !important;
}

.chosen-container-single .chosen-single div b {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737987' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")
    center/12px no-repeat !important;
}

/* Open state: green focus border, flip chevron */
.chosen-container-active.chosen-with-drop .chosen-single,
.chosen-container-active .chosen-single {
  border: 1px solid var(--v2-border-focus) !important;
  box-shadow: none !important;
  background-image: none !important;
}

.chosen-container-active.chosen-with-drop .chosen-single div b {
  transform: rotate(180deg) !important;
}

/* Disabled state */
.chosen-container.chosen-disabled,
.chosen-container.chosen-disabled .chosen-single {
  background: var(--v2-surface-bg) !important;
  color: var(--v2-text-2) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* --- Multi-select trigger --- */
.chosen-container-multi .chosen-choices {
  min-height: var(--v2-input-height) !important;
  padding: 6px 12px !important;
  background: var(--v2-surface-white) !important;
  background-image: none !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
  box-shadow: none !important;
  font-family: var(--v2-font) !important;
  transition: border-color var(--v2-transition-fast) !important;
}

.chosen-container-multi.chosen-container-active .chosen-choices {
  border-color: var(--v2-border-focus) !important;
  box-shadow: none !important;
}

.chosen-container-multi .chosen-choices li.search-choice {
  margin: 4px 6px 4px 0 !important;
  padding: 4px 22px 4px 10px !important;
  background: var(--v2-surface-secondary) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--v2-radius-md) !important;
  box-shadow: none !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-1) !important;
}

.chosen-container-multi .chosen-choices li.search-field input[type='text'] {
  height: 32px !important;
  padding: 0 4px !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  color: var(--v2-text-1) !important;
  background: transparent !important;
  border: none !important;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
  top: 50% !important;
  right: 6px !important;
  transform: translateY(-50%) !important;
  background: none !important;
}

.chosen-container-multi .chosen-choices li.search-choice .search-choice-close::before {
  content: '×';
  display: block;
  font-size: 14px;
  line-height: 1;
  color: var(--v2-text-2);
}

/* --- Dropdown panel --- */
.chosen-container .chosen-drop {
  margin-top: var(--v2-space-1) !important;
  padding: var(--v2-space-2) !important;
  background: var(--v2-surface-white) !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-input) !important;
  box-shadow: var(--v2-shadow-dropdown) !important;
  overflow: hidden !important;
}

/* Inline search input inside the open drop */
.chosen-container .chosen-search {
  padding: 0 0 var(--v2-space-2) 0 !important;
  position: relative !important;
}

.chosen-container .chosen-search input[type='text'] {
  height: 40px !important;
  padding: 0 var(--v2-space-3) 0 36px !important;
  background: var(--v2-surface-white)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23737987' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E")
    no-repeat 12px center !important;
  background-size: 14px !important;
  border: 1px solid var(--v2-border-default) !important;
  border-radius: var(--v2-radius-md) !important;
  box-shadow: none !important;
  font-family: var(--v2-font) !important;
  font-size: var(--v2-text-sm) !important;
  color: var(--v2-text-1) !important;
  outline: 0 !important;
  transition: border-color var(--v2-transition-fast) !important;
}

.chosen-container .chosen-search input[type='text']:focus {
  border-color: var(--v2-border-focus) !important;
}

/* --- Results list --- */
.chosen-container .chosen-results {
  margin: 0 !important;
  padding: 0 !important;
  max-height: 280px !important;
  font-family: var(--v2-font) !important;
}

.chosen-container .chosen-results li {
  padding: var(--v2-space-2) var(--v2-space-3) !important;
  margin: 2px 0 !important;
  border-radius: var(--v2-radius-sm) !important;
  font-size: var(--v2-text-sm) !important;
  line-height: var(--v2-lh-sm) !important;
  color: var(--v2-text-1) !important;
}

.chosen-container .chosen-results li.active-result {
  cursor: pointer !important;
}

.chosen-container .chosen-results li.highlighted {
  background: var(--v2-surface-secondary) !important;
  background-image: none !important;
  color: var(--v2-text-1) !important;
}

.chosen-container .chosen-results li.result-selected {
  background: var(--v2-surface-green-tint) !important;
  color: var(--v2-text-1) !important;
  font-weight: var(--v2-fw-medium) !important;
}

.chosen-container .chosen-results li.no-results {
  background: transparent !important;
  color: var(--v2-text-2) !important;
}

.chosen-container .chosen-results li.group-result {
  padding-top: var(--v2-space-3) !important;
  font-size: var(--v2-text-xs) !important;
  font-weight: var(--v2-fw-semibold) !important;
  color: var(--v2-text-2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* =============================================================================
   CONTRACT CANONICAL — KAN-1191
   Align the canonical contract / contract_repository view with v2:
   - "Edit in Word" action button (overrides Bootstrap .btn-primary blue)
   - Boolean Off pill (neutral, so it doesn't read as a positive On state)
   ============================================================================= */

body.route-node-canonical:is(.type-contract, .type-contract_repository)
  :is(article.contract, article.contract-repository)
  .contract-canonical-actions
  .contract-edit-in-word-btn.btn.btn-primary {
  height: var(--v2-btn-height);
  min-width: var(--v2-btn-min-width);
  padding: var(--v2-btn-padding);
  font-size: var(--v2-text-base);
  font-weight: var(--v2-fw-medium);
  font-family: var(--v2-font);
  line-height: 100%;
  color: var(--v2-surface-white);
  background-color: var(--v2-brand-green);
  background-image: none;
  border: none;
  border-radius: var(--v2-radius-btn);
  box-shadow: none;
  text-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--v2-transition-base);
  text-decoration: none;
}

body.route-node-canonical:is(.type-contract, .type-contract_repository)
  :is(article.contract, article.contract-repository)
  .contract-canonical-actions
  .contract-edit-in-word-btn.btn.btn-primary:hover,
body.route-node-canonical:is(.type-contract, .type-contract_repository)
  :is(article.contract, article.contract-repository)
  .contract-canonical-actions
  .contract-edit-in-word-btn.btn.btn-primary:focus {
  background-color: var(--v2-brand-green-hover);
  color: var(--v2-surface-white);
  text-decoration: none;
}

/* Off variant of boolean pill — neutral. legalc_preprocess_field() tags the
 * field wrapper with .field--value-off / .field--value-on so the two
 * states can read differently (the existing rule in elyts.css colors both
 * the same green, which makes "Off" look affirmative). */
body.route-node-canonical:is(.type-contract, .type-contract_repository)
  :is(article.contract, article.contract-repository)
  .field--type-boolean.field--label-inline.field--value-off
  > .field--item {
  background: var(--v2-surface-secondary);
  color: var(--v2-text-2);
  border-color: var(--v2-border-default);
}

/* =============================================================================
   CONTRACT CANONICAL R2 — KAN-1191
   Elevate the canonical view into a v2 modal-like card: drop the legacy 1px
   border in favour of v2-shadow-card + v2-radius-card, widen the breathing
   room to match v2 modal padding, and migrate label / subtitle / value-box
   colors and font sizes to v2 tokens. Builds on the R1 block above (Edit-in-
   Word button + Off pill) — together the two blocks form a single v2-aligned
   surface for contract / contract_repository canonical pages.
   ============================================================================= */

/* `.node-edit` is added on the body of the canonical contract / repo page too
 * (project naming quirk — see body classes), and elyts.css ships a
 * `.node-edit.type-contract_repository.route-node-canonical .region-content`
 * rule that sets the legacy 10px / 30·48px / 1px-border card. Match that
 * specificity by including `.node-edit` here so the v2 modal-like card wins. */
body.node-edit.route-node-canonical:is(.type-contract, .type-contract_repository) .region-content {
  border: none;
  border-radius: var(--v2-radius-modal);
  box-shadow: var(--v2-shadow-card);
  padding: var(--v2-modal-padding-y) var(--v2-modal-padding-x);
}

body.route-node-canonical:is(.type-contract, .type-contract_repository)
  h1.page-header
  .contract-page-title-label {
  color: var(--v2-text-2);
}

body.route-node-canonical:is(.type-contract, .type-contract_repository)
  :is(article.contract, article.contract-repository)
  .field--label-above
  > .field--label,
body.route-node-canonical:is(.type-contract, .type-contract_repository)
  :is(article.contract, article.contract-repository)
  .field--label-inline
  > .field--label {
  font-size: var(--v2-text-sm);
  color: var(--v2-text-1);
}

body.route-node-canonical:is(.type-contract, .type-contract_repository)
  :is(article.contract, article.contract-repository)
  .field--label-above
  > .field--item,
body.route-node-canonical:is(.type-contract, .type-contract_repository)
  :is(article.contract, article.contract-repository)
  .field--label-above
  > .field--items {
  border-color: var(--v2-border-default);
  background: var(--v2-surface-white);
  color: var(--v2-text-1);
}

/* Document file row: the outer .field--item is already flex (elyts) but the
 * inner <span class="file"> wrapping icon + filename + size is display:block,
 * so the three pieces fall back to baseline alignment with different font
 * sizes (icon 26px, link 14px, size 13px) — looks ragged. Flex the inner
 * wrapper too, shrink the icon, and pull every label to v2-text-sm so the
 * row reads as one even line next to the 45px Edit-in-Word button. */
body.route-node-canonical:is(.type-contract, .type-contract_repository)
  :is(article.contract, article.contract-repository)
  :is(.field--name-field-contract-document, .field--name-field-contract-repo-document)
  .file {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--v2-space-3);
}

body.route-node-canonical:is(.type-contract, .type-contract_repository)
  :is(article.contract, article.contract-repository)
  :is(.field--name-field-contract-document, .field--name-field-contract-repo-document)
  .file-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

body.route-node-canonical:is(.type-contract, .type-contract_repository)
  :is(article.contract, article.contract-repository)
  :is(.field--name-field-contract-document, .field--name-field-contract-repo-document)
  .file-icon
  .icon {
  font-size: 20px;
  line-height: 1;
}

body.route-node-canonical:is(.type-contract, .type-contract_repository)
  :is(article.contract, article.contract-repository)
  :is(.field--name-field-contract-document, .field--name-field-contract-repo-document)
  .file-link {
  margin-right: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.route-node-canonical:is(.type-contract, .type-contract_repository)
  :is(article.contract, article.contract-repository)
  :is(.field--name-field-contract-document, .field--name-field-contract-repo-document)
  .file-link
  a,
body.route-node-canonical:is(.type-contract, .type-contract_repository)
  :is(article.contract, article.contract-repository)
  :is(.field--name-field-contract-document, .field--name-field-contract-repo-document)
  .file-size {
  font-size: var(--v2-text-sm);
  line-height: var(--v2-lh-sm);
}

body.route-node-canonical:is(.type-contract, .type-contract_repository)
  :is(article.contract, article.contract-repository)
  :is(.field--name-field-contract-document, .field--name-field-contract-repo-document)
  .file-size {
  margin-left: 0;
  color: var(--v2-text-2);
  flex-shrink: 0;
}

/* The actions container ships with both Bootstrap's .form-group margin-bottom
 * (forms.less = 15px) and the project's elyts.css override (10px) — neither
 * makes sense for a single inline action button sitting in a flex file row.
 * Zero it only for this container (do NOT touch .form-group globally — that
 * would shift every form in the app). */
body.route-node-canonical:is(.type-contract, .type-contract_repository)
  :is(article.contract, article.contract-repository)
  .contract-canonical-actions.form-group {
  margin-bottom: 0;
}

/* Cancel footer — left-aligned secondary action injected via
 * legalc_node_view(). Sits below all node fields inside the card. */
body.route-node-canonical:is(.type-contract, .type-contract_repository) .contract-canonical-footer {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--v2-space-6);
}

/* =============================================================================
   44. MATTER CANONICAL — Modal-style card on /node/{matter_id} (full view mode)
   Template: themes/custom/legalconnect/templates/node--matter--full.html.twig
   Wrapper:  .matter-pade-details.contactv2-add-group       (v2 modal card)
   Sections: h3 (heading) + .field--label + value(s)
   Footer:   .matter-canonical-footer   (Cancel left, Go to matter right)
   Buttons:  Cancel — .v2-btn-secondary (injected via legalc_preprocess_node)
             Go to matter — .lc-button.view-matter-goto-btn (v2 primary tokens)
   ============================================================================= */

/* --- Card container --- */
body.path-node.page-node-type-matter .matter-pade-details.contactv2-add-group {
  background-color: var(--v2-surface-white);
  border-radius: var(--v2-radius-modal);
  box-shadow: var(--v2-shadow-card);
  max-width: 760px;
  margin: var(--v2-space-10) auto;
  padding: var(--v2-modal-padding-y) var(--v2-modal-padding-x);
  box-sizing: border-box;
  font-family: var(--v2-font);
}

/* --- Section headings --- */
body.path-node.page-node-type-matter .matter-pade-details h3 {
  font-family: var(--v2-font);
  font-size: var(--v2-text-heading-sm);
  font-weight: var(--v2-fw-semibold);
  line-height: var(--v2-lh-base);
  color: var(--v2-text-1);
  margin: var(--v2-space-6) 0 var(--v2-space-4) 0;
  padding: 0;
  border: none;
}

body.path-node.page-node-type-matter .matter-pade-details h3:first-child {
  margin-top: 0;
}

/* --- Field labels (Matter Name, Description, Status, etc.) --- */
body.path-node.page-node-type-matter .matter-pade-details .field--label,
body.path-node.page-node-type-matter .matter-pade-details .field__label {
  font-family: var(--v2-font);
  font-size: var(--v2-text-sm);
  font-weight: var(--v2-fw-medium);
  line-height: var(--v2-lh-sm);
  color: var(--v2-text-1);
  margin: var(--v2-space-3) 0 var(--v2-space-1) 0;
  padding: 0;
  background: transparent;
}

/* --- Field values: matter-label (Matter Name), field items --- */
body.path-node.page-node-type-matter .matter-pade-details .matter-label,
body.path-node.page-node-type-matter .matter-pade-details .field--item,
body.path-node.page-node-type-matter .matter-pade-details .field__item {
  font-family: var(--v2-font);
  font-size: var(--v2-text-sm);
  font-weight: var(--v2-fw-regular);
  line-height: var(--v2-lh-sm);
  color: var(--v2-text-2);
}

/* Override legacy style.css rule (.matter-pade-details.contactv2-add-group
   .matter-label span) that forces #333 + font-weight:unset on inner span. */
body.path-node.page-node-type-matter .matter-pade-details .matter-label,
body.path-node.page-node-type-matter .matter-pade-details .matter-label span {
  color: var(--v2-text-2);
  font-weight: var(--v2-fw-regular);
}

/* --- Footer: Cancel (left) + Go to matter (right). Spacing only, no rule. --- */
body.path-node.page-node-type-matter .matter-pade-details .matter-canonical-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--v2-space-8);
}

/* --- Go to matter button — v2 primary tokens, beats legacy .lc-button
       (selector specificity 0,5,1 wins over .lc-button = 0,1,0). --- */
body.path-node.page-node-type-matter
  .matter-pade-details
  .matter-canonical-footer
  a.view-matter-goto-btn.lc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--v2-btn-height);
  min-width: var(--v2-btn-min-width);
  padding: var(--v2-btn-padding);
  font-family: var(--v2-font);
  font-size: var(--v2-text-base);
  font-weight: var(--v2-fw-medium);
  line-height: 100%;
  color: var(--v2-surface-white);
  background-color: var(--v2-brand-green);
  background-image: none;
  border: none;
  border-radius: var(--v2-radius-btn);
  box-shadow: none;
  text-shadow: none;
  text-decoration: none;
  float: none;
  margin: 0;
  transition: background-color var(--v2-transition-base);
}

body.path-node.page-node-type-matter
  .matter-pade-details
  .matter-canonical-footer
  a.view-matter-goto-btn.lc-button:hover,
body.path-node.page-node-type-matter
  .matter-pade-details
  .matter-canonical-footer
  a.view-matter-goto-btn.lc-button:focus {
  background-color: var(--v2-brand-green-hover);
  color: var(--v2-surface-white);
  text-decoration: none;
}