/* =============================================================================
   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 --- */
  --v2-modal-width:        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 */
}


/* =============================================================================
   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;
}

/* --- 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.mv2bp-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 — slightly wider than standard modal (more fields) --- */
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: 700px !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: elements toggled by JS --- */
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) !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) !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: 600px !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-type-form,
#node-contract-type-edit-form {
  max-width: 800px !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: 800px !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 (form.node-confirm-form.confirmation)
   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) {
  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 > 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 --- */
form.node-confirm-form.confirmation {
  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) --- */
form.node-confirm-form.confirmation: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) --- */
form.node-confirm-form.confirmation .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 --- */
form.node-confirm-form.confirmation: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 --- */
form.node-confirm-form.confirmation input[type="hidden"] {
  display: none !important;
}

/* --- Actions container — flex row, space-between, bottom padding --- */
form.node-confirm-form.confirmation #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 --- */
form.node-confirm-form.confirmation #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 --- */
form.node-confirm-form.confirmation #edit-submit .glyphicon {
  display: none !important;
}

/* --- Cancel link — .v2-btn-secondary handles colors; add order here --- */
form.node-confirm-form.confirmation #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: 700px !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: 600px !important;
  max-width: 600px !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: 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;
  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: 800px !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;
  background: transparent !important;
  background-image: none !important;
  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;
}

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: 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.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;
}


/* =============================================================================
   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: 800px !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: 800px !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: 600px !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: 600px !important;
  max-width: 600px !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: 308px !important;
  width: 308px !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;
}

/* --- Test Corp row — reset spacing --- */
.organization_wrap_left .organization_tab_inner {
  margin: 0 0 10px !important;
  padding: 0 5px !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: 600px !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: 600px !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)
   Matches v2 Matters.tsx component design
   ============================================================ */

/* --- Page layout wrapper: max-width 948px centered, matching org tab pages --- */
.path-matters-list .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 --- */
.path-matters-list .view-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 24px !important;
  min-height: 45px !important;
}

.path-matters-list .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 --- */
.path-matters-list .matters-list-header-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* --- Page subtitle below title --- */
.path-matters-list .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 --- */
.path-matters-list .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 --- */
.path-matters-list .views-exposed-form label,
.path-matters-list .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 --- */
.path-matters-list 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;
}

.path-matters-list 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;
}

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

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

/* --- Exposed filter form layout --- */
.path-matters-list .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;
}

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

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

.path-matters-list .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 --- */
.path-matters-list .views-exposed-form .control-label {
  font-size: var(--v2-text-xs) !important;
  color: var(--v2-text-2) !important;
  margin-bottom: 8px !important;
}

/* --- Search input --- */
.path-matters-list #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;
}

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

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

.path-matters-list #edit-field-matter-status-value {
  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;
}

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

/* --- Apply button (secondary) --- */
.path-matters-list #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;
}

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

/* --- Reset button (danger) --- */
.path-matters-list #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;
}

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

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

/* --- v2 Toggle: My matters / Organization matters --- */
.path-matters-list 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;
}

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

.path-matters-list 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;
}

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

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

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

.path-matters-list 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;
}

.path-matters-list 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 --- */
.path-matters-list .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;
}

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

/* --- Table headers --- */
.path-matters-list .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;
}

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

/* --- Sortable header links: flex row + transition --- */
.path-matters-list .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;
}

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

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

/* --- Inactive sortable columns: neutral ↕ indicator --- */
.path-matters-list .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 --- */
.path-matters-list .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 */
.path-matters-list .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 */
.path-matters-list .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;
}

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

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

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

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

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

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

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

.path-matters-list .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 */
.path-matters-list .view-content table tbody td a {
  color: var(--v2-text-1) !important;
  text-decoration: none !important;
}

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

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

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

/* Actions column */
.path-matters-list .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 --- */
.path-matters-list .lc-list-matters-item-v2-right {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.path-matters-list .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;
}

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

.path-matters-list .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;
}

.path-matters-list .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;
}

.path-matters-list .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;
}

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

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

.path-matters-list .lc-listings-item-action-menu-inner a[href*="delete"] {
  color: var(--v2-brand-red) !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: 600px !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;
}

/* 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), #3aaec4, #2bc968, #3aaec4, #2bc968, #3aaec4) !important;
  border-radius: 14px !important;
  padding: 2px !important;
  flex: 1 !important;
  min-width: 0 !important;
  animation: ai-spin 3s 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. */

/* Add contract — secondary button (was :first-child, now :nth-child(2)) */
.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: 45px !important;
  padding: 0 20px !important;
  border-radius: 24px !important;
  background-color: #E8ECF4 !important;
  background-image: none !important;
  color: #0E1016 !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;
}

.view-org-contract-repo .view-footer > p > a.new-matter-client-save:not([href*="multiple"]):hover {
  background-color: var(--v2-surface-disabled) !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: 1.5s !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;
}