@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

/*
========================================
  VARIABLES
========================================
*/
:root {
  /* Base Colors */
  --primary-color: #3B6DD1;
  --primary-color-rgb: 59, 109, 209;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --light-color: #f8f9fa;
  --dark-color: #212529;
  --lightest-color: #ffffff;
  --darkest-color: #000000;
  --inactive-color: #01226D;

  /* Background Colors */
  --bg-body: #f5f7fb;
  --bg-card: #ffffff;
  --bg-header: #ffffff;
  --bg-row-even: #ffffff;
  --bg-row-odd: #f9fafb; /* light gray */
  --hover-bg: rgba(var(--primary-color-rgb), 0.08);

  /* Text & Borders */
  --text-color: #222;
  --border-color: #b4c0d3;

  /* Typography */
  --font-base: 'Poppins', 'Segoe UI', sans-serif;
  --bs-body-font-family: 'Poppins', 'Segoe UI', sans-serif; /* For Bootstrap compatibility */
  --font-size-base: 1rem; /* 16px */
  --line-height-base: 1.6;

  /* Spacing Units */
  --spacing-xs: 0.25rem;  /* 4px */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 1.5rem;   /* 24px */
  --spacing-xl: 2rem;     /* 32px */

  /* Border Radius */
  --border-radius-sm: 0.2rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;

  /* Container */
  --container-max-width: 1120px;
}

/*
========================================
  GLOBAL RESETS & BASE STYLES
========================================
*/
body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  background-color: var(--bg-body);
  color: var(--text-color);
  margin: 0;
}

/* Box Sizing for all elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
========================================
  TYPOGRAPHY
========================================
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--primary-color);
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
  font-weight: 700;
  line-height: 1.2;
}

h1 {
  font-size: 2.25rem; /* ~36px */
}

h2 {
  font-size: 1.875rem; /* ~30px */
}

h3 {
  font-size: 1.5rem;   /* ~24px */
}

h4 {
  font-size: 1.25rem;  /* ~20px */
}

label {
  font-weight: 600;
  font-size: 0.9rem; /* ~14.4px */
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-xs);
  display: block;
  color: var(--primary-color);
}

/* used for warnings inside a lable */
.warning-text {
  display: block;
  font-weight: normal;
  font-size: 0.8rem;
  color: black;
  margin-top: 2px;
}

/*
========================================
  LAYOUT HELPERS
========================================
*/
.page-container {
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding: var(--spacing-md);
}

.form-wrapper {
  width: 100%;
  max-width: var(--container-max-width); /* Can be smaller if needed, e.g., 800px */
  margin: var(--spacing-md) auto;
  /* Padding is handled by elements within or .panel */
}

/*
========================================
  FORM ELEMENTS
========================================
*/
input,
select,
textarea {
  font-family: inherit;
  font-size: 0.95rem;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  width: 100%;
  background-color: var(--lightest-color);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary-color);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/*
========================================
  PANEL (Card-like container)
========================================
*/
.panel {
  background-color: var(--bg-card);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--border-color);
  /* A more subtle shadow for modern look, can be themed */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-top: var(--spacing-lg);
}

/* Specific panel styling from original if distinct from generic card */
.panel.primary-bordered {
  border: 2px solid var(--primary-color);
  box-shadow: 0 6px 24px rgba(var(--primary-color-rgb), 0.2);
}

/*
========================================
  BUTTONS
========================================
*/
.btn {
  display: inline-block;
  font-family: var(--font-base);
  font-weight: 600;
  font-size: 0.9rem; /* ~14.4px */
  line-height: 1.5;
  color: var(--text-color); /* Default text color, overridden by variants */
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.5rem 1.25rem; /* Increased padding */
  border-radius: var(--border-radius-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-decoration: none;
}

.btn:focus,
.btn.focus {
  outline: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
}

/* Primary Button */
.btn-primary {
  color: var(--lightest-color);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-primary:hover {
  background-color: color-mix(in srgb, var(--primary-color) 85%, var(--darkest-color));
  border-color: color-mix(in srgb, var(--primary-color) 80%, var(--darkest-color));
  color: var(--lightest-color);
}

/* Secondary Button */
.btn-secondary {
  color: var(--lightest-color);
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.btn-secondary:hover {
  background-color: color-mix(in srgb, var(--secondary-color) 85%, var(--darkest-color));
  border-color: color-mix(in srgb, var(--secondary-color) 80%, var(--darkest-color));
  color: var(--lightest-color);
}

/* Outline Primary Button */
.btn-outline-primary {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-outline-primary:hover {
  color: var(--lightest-color);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* Outline Secondary Button */
.btn-outline-secondary {
  color: var(--secondary-color);
  border-color: var(--secondary-color);
}

.btn-outline-secondary:hover {
  color: var(--lightest-color);
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

/* Small Button */
.btn-sm {
  padding: 0.3rem 0.75rem; /* Adjusted padding */
  font-size: 0.8rem;   /* ~12.8px */
  border-radius: var(--border-radius-sm);
}

/* For Bootstrap's d-grid */
.d-grid .btn.btn-sm {
  width: auto; /* Maintain original if needed */
  /* Padding and font-size inherited from .btn-sm */
}

/* Button Group (General styling for Bootstrap's .btn-group might be sufficient) */
.btn-group-sm > .btn,
.btn-group-sm > .btn-group > .btn {
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  border-radius: var(--border-radius-sm); /* Apply consistent small radius */
  /* Removed fixed height, rely on padding. min-width from original was 75px */
  min-width: 70px;
}

/* Toggle Radio Button Group */
.btn-group-toggle > .btn {
  margin-bottom: 0; /* Bootstrap override */
  /* Use standard button padding, adjust if fixed height appearance is truly needed */
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid var(--border-color);
  transition: all 0.15s ease-in-out;
  /* Removed fixed height */
}

.btn-group-toggle > .btn + .btn {
  margin-left: -1px;
}

.btn-group-toggle > .btn:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group-toggle > .btn:first-of-type,
.btn-group-toggle > input:first-of-type + .btn {
  border-top-left-radius: var(--border-radius-md);
  border-bottom-left-radius: var(--border-radius-md);
}

.btn-group-toggle > .btn:last-of-type,
.btn-group-toggle > input:last-of-type + .btn {
  border-top-right-radius: var(--border-radius-md);
  border-bottom-right-radius: var(--border-radius-md);
}

/* Bootstrap .btn-check is often used with .btn-group-toggle */
.btn-check {
  position: absolute;
  clip: rect(0,0,0,0);
  pointer-events: none;
}

.btn-group-toggle > .btn:hover {
  background-color: rgba(var(--primary-color-rgb), 0.05);
  border-color: var(--primary-color);
  color: var(--primary-color);
  z-index: 1; /* Ensure hover styles are on top */
}

.btn-check:focus + .btn {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
  z-index: 1;
}

.btn-check:checked + .btn {
  background-color: var(--primary-color);
  color: var(--lightest-color);
  border-color: var(--primary-color);
  z-index: 2; /* Ensure checked is on top */
}

.btn-check:checked + .btn.btn-outline-secondary {
  background-color: var(--secondary-color);
  color: var(--lightest-color);
  border-color: var(--secondary-color);
}

/*
========================================
  SUBCLIENTS - ACTS LIKE A FORM ELEMENT LOOKS LIKE SIMPLE TABLE
========================================
*/

#clients-multiselect {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: 0.5rem;
  font-size: 0.95rem;
  background-color: white;
  height: auto;
  min-height: 7rem;
}


/*
========================================
  NAVIGATION - NAVBAR
========================================
*/
.navbar {
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 1030; /* Standard Bootstrap navbar z-index */
  position: sticky;
  top: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  /* Apply max-width and centering through a container inside or this directly */
  /* max-width: var(--container-max-width); */
  /* margin: 0 auto; */ /* If navbar itself should be constrained */
  /* border-radius: var(--border-radius-lg); */ /* If navbar has rounded corners */
}

/* If using Bootstrap's .container or .container-fluid inside navbar */
.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl {
  max-width: var(--container-max-width);
  /* margin: 0 auto; */ /* Bootstrap containers handle this */
}

.navbar-nav {
  /* Default to column for mobile (Bootstrap does this with .navbar-collapse) */
  display: flex;
  flex-direction: column; /* Mobile first: default */
  align-items: flex-start;
  gap: var(--spacing-xs);
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  color: var(--dark-color);
  font-size: 0.9rem; /* ~15px */
  font-weight: 500;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  transition: all 0.2s ease-in-out;
  display: block; /* Ensures padding applies correctly */
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  background-color: var(--hover-bg);
  color: var(--primary-color);
  text-decoration: none;
}

/* .navbar-nav .nav-link.active {
  background-color: var(--primary-color);
  color: var(--lightest-color) !important;
  font-weight: 600;
}
*/

.navbar-nav .nav-link.active {
    text-decoration: underline;
    text-decoration-color: var(--primary-color);
}


/* Desktop navigation layout */
@media (min-width: 992px) { /* Bootstrap's lg breakpoint */
  .navbar-nav {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .navbar-nav .nav-link {
    padding: var(--spacing-sm) var(--spacing-md); /* More horizontal padding on desktop */
  }
}

/*
========================================
  LIST GROUP
========================================
*/
.list-group-item {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--lightest-color);
  margin-bottom: var(--spacing-sm);
}

.list-group-item.active {
  background-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
  border-color: color-mix(in srgb, var(--primary-color) 40%, transparent);
  color: var(--primary-color);
}

/*
========================================
  CARDS (Modern Data Card)
========================================
*/
.data-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary-color);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  font-size: 0.95rem;
  color: var(--text-color);
}

/*
========================================
  TABLES
========================================
*/

/* Modern Table Styling */
.table-modern {
  width: 100%;
  border-collapse: separate; /* For border-radius on table */
  border-spacing: 0;
  border-radius: var(--border-radius-lg);
  overflow: hidden; /* Clips children to the border-radius */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  background-color: var(--bg-card);
  margin-bottom: var(--spacing-md);
}

.table-modern th,
.table-modern td {
  padding: var(--spacing-sm) var(--spacing-md); /* Consistent padding */
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-color);
}

.table-modern th {
  background-color: var(--light-color); /* Or var(--bg-header) */
  color: var(--dark-color);
  font-weight: 600;
  border-top: 1px solid var(--border-color); /* if first row header */
  border-bottom-width: 2px; /* Stronger line under headers */
  border-bottom-color: var(--primary-color);
}

.table-modern tbody tr:last-child td {
  border-bottom: 0; /* No border for the last row cells */
}

.table-modern tbody tr:nth-child(odd) td {
  background-color: rgba(var(--primary-color-rgb), 0.03);
}

.table-modern tbody tr:nth-child(even) td {
  background-color: var(--bg-card); /* Or var(--bg-row-even) */
}

.table-modern tbody tr:hover td {
  background-color: var(--hover-bg);
  cursor: pointer;
}

/* Responsive Table-Card Hybrid */
.record-results {
  /* Mobile First: Card View */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.record-row {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-md);
  background-color: var(--bg-row-even);
  position: relative; /* For absolutely positioned elements like checkbox-cell */
  transition: background-color 0.2s ease;
}

.record-row.header {
  display: none; /* Headers typically handled differently in card view or omitted */
}

.record-cell {
  padding: var(--spacing-xs) 0;
}

.record-cell > span {
  font-weight: 600; /* Label for the data */
  margin-right: var(--spacing-xs);
  color: var(--primary-color);
}

.checkbox-cell {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
}

.action-cell {
  margin-top: var(--spacing-sm);
  display: flex;
  gap: var(--spacing-sm);
}

.record-row:hover {
  background-color: var(--hover-bg);
}

/* Desktop: Table View */
@media (min-width: 768px) {
  .record-results {
    display: table;
    width: 100%;
    border-collapse: collapse;
    border-radius: 0; /* Table doesn't need radius if rows handle it, or apply to wrapper */
  }

  .record-row {
    display: table-row;
    border: none; /* Individual row borders removed for table view */
    padding: 0;
    background-color: transparent; /* Reset from card view */
  }

  .record-row.header {
    display: table-row; /* Show header in table view */
    background-color: var(--bg-header) !important; /* Override nth-child if needed */
    font-weight: 600;
    border-bottom: 2px solid var(--dark-color);
  }

  .record-row.header .record-cell {
    border-bottom: 2px solid var(--dark-color);
    background-color: var(--bg-header);
  }

  .record-row:not(.header):nth-child(odd) {
    background-color: var(--bg-row-odd);
  }

  .record-row:not(.header):nth-child(even) {
    background-color: var(--bg-row-even);
  }

  .record-row:not(.header):hover,
  .record-row:not(.header):hover .record-cell {
    background-color: var(--hover-bg);
  }

  .record-cell {
    display: table-cell;
    padding: var(--spacing-sm) var(--spacing-md);
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color); /* Standard table row lines */
  }

  .record-row.header .record-cell {
    border-bottom-width: 2px; /* Header distinct bottom border */
    border-bottom-color: var(--dark-color);
  }

  .record-row:last-child .record-cell {
    border-bottom: none;
  }

  .record-cell > span { /* Hide labels in table view */
    display: none;
  }

  .checkbox-cell,
  .action-cell {
    width: 50px; /* Fixed width for consistency */
    text-align: center;
  }

  .checkbox-cell {
    position: static; /* Reset from card view */
  }

  .action-cell {
    margin-top: 0; /* Reset from card view */
  }
}

/*
========================================
  MERGE LOGIC COMPONENT
========================================
*/
.merge-group {
  margin-left: var(--spacing-md); /* Default 16px */
  padding: var(--spacing-md);
  border-left: 3px solid var(--primary-color);
  background-color: color-mix(in srgb, var(--primary-color) 5%, var(--bg-body));
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-md);
  position: relative;
  transition: box-shadow 0.3s ease;
}

.merge-group:hover {
  box-shadow: 0 0 5px rgba(var(--primary-color-rgb), 0.3);
}

.merge-group.nested-2 {
  margin-left: var(--spacing-xl); /* Deeper indent for nested, e.g., 32px */
  background-color: color-mix(in srgb, var(--primary-color) 10%, var(--bg-body));
}

.group-header {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

/* Base styling for logic buttons */
.logic-btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--primary-color);
  background-color: var(--lightest-color); /* White background */
  color: var(--primary-color);              /* Primary text */
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 1; /* Ensure full opacity for unselected */
}

/* Selected logic button based on data-logic */
/* .merge-group[data-logic="AND"] .logic-btn.and,
.merge-group[data-logic="OR"] .logic-btn.or {
  background-color: var(--primary-color);
  color: var(--lightest-color);
  box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
  z-index: 1;
} */
/* Active button */
.logic-btn.active {
  background-color: var(--primary-color);
  color: var(--lightest-color);
  box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
}

/* Optional subtle hover for unselected button */
.logic-btn:hover {
  transform: scale(1.05);
  background-color: rgba(var(--primary-color-rgb), 0.05);
}


/* Optional: keep consistent spacing */
.logic-toggle-group {
  display: inline-flex;
  gap: var(--spacing-xs);
}

.merge-rule {
  position: relative;
  margin-bottom: var(--spacing-md);
  background: var(--lightest-color);
  padding: var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding-top: calc(var(--spacing-sm) + 24px + var(--spacing-xs)); /* Space for delete button */
  animation: fadeIn 0.3s ease;
}

.merge-rule select,
.merge-rule input {
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-sm); /* 6px */
  font-size: 0.875rem; /* 14px */
  /* Inherits border, radius from global form styles but can be specific */
}

.delete-rule {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  background: transparent;
  color: var(--danger-color);
  border: 1px solid var(--danger-color);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-weight: bold;
  cursor: pointer;
  font-size: 1rem; /* 16px for icon like '×' */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.2s ease;
}

.delete-rule:hover {
  background-color: color-mix(in srgb, var(--danger-color) 10%, transparent);
  color: color-mix(in srgb, var(--danger-color) 80%, var(--darkest-color));
}

.group-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.group-actions button { /* Base style for action buttons in group */
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: 0.8125rem; /* 13px */
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--lightest-color);
}

.add-rule,
.add-group {
  background-color: var(--success-color);
}

.add-rule:hover,
.add-group:hover {
  background-color: color-mix(in srgb, var(--success-color) 85%, var(--darkest-color));
}

.delete-group {
  background-color: var(--danger-color);
}

.delete-group:hover {
  background-color: color-mix(in srgb, var(--danger-color) 85%, var(--darkest-color));
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/*
========================================
  REVISIONS section of Contract Template
========================================
*/

/* Prevent column wiggle and allow overlay to overflow */
#ct_revisions td.actions {
  white-space: nowrap;
  position: relative;
  overflow: visible;
}

/* Icon + caption container */
#ct_revisions td.actions .icon-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-right: 10px;
}

/* Overlay tooltip (solid, high-contrast) */
#ct_revisions td.actions .icon-container .action-caption {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;

  display: inline-block;                 /* ensure padding/bg render nicely */
  color: #fff;
  background-color: rgba(33, 37, 41, 0.98);  /* solid/dark */
  border: 1px solid rgba(0,0,0,.25);
  box-shadow: 0 6px 18px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
  padding: 4px 8px;
  border-radius: 6px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 20;
}

/* Arrow matches the same bg color */
#ct_revisions td.actions .icon-container .action-caption::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent rgba(33, 37, 41, 0.98) transparent transparent;
}

/* Show on hover/focus */
#ct_revisions td.actions .icon-container:hover .action-caption,
#ct_revisions td.actions a:focus .action-caption,
#ct_revisions td.actions a:focus-visible .action-caption {
  opacity: 1;
  visibility: visible;
}

/* Mobile: inline text, no overlay */
@media (max-width: 767.98px) {
  #ct_revisions td.actions .icon-container .action-caption {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    margin-left: 6px;
  }
  #ct_revisions td.actions .icon-container .action-caption::after { display: none; }
}


/*
========================================
  UTILITIES (Review if Bootstrap is used, may be redundant)
========================================
*/
.d-flex {
  display: flex !important; /* Important if overriding other display properties */
}

.justify-content-between {
  justify-content: space-between !important;
}

.gap-2 { /* Assuming this means 0.5rem like Bootstrap's default */
  gap: var(--spacing-sm) !important;
}

.mt-4 { /* Assuming this means 1.5rem like Bootstrap's default */
  margin-top: var(--spacing-lg) !important;
}

.mb-3 { /* Assuming this means 1rem like Bootstrap's default */
  margin-bottom: var(--spacing-md) !important;
}

.w-100 {
  width: 100% !important;
}

/*
========================================
  MOBILE-FIRST SMALL SCREEN ADJUSTMENTS (Overrides for very small screens if needed)
========================================
*/
@media (max-width: 575.98px) {
  .page-container {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .panel {
    padding: var(--spacing-md);
    /* border-width: 1px; */ /* Already 1px by default now */
  }

  .form-wrapper {
    /* padding: 0.1rem; */ /* This seems too small, rely on page-container padding */
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
  }

  .btn {
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
  }

  .btn-sm,
  .btn-group-sm > .btn {
    /* min-width: 60px; */ /* Let content and padding define width */
    /* height: 36px; */ /* Avoid fixed height */
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
  }

  label {
    font-size: 0.85rem;
  }

  .data-card {
    font-size: 0.9rem;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .table-modern th,
  .table-modern td {
    padding: var(--spacing-xs) var(--spacing-sm);
  }
}