/* Application styles */

/*
 * Shared disclosure styling for the report card. Used by both the
 * shares strip and the version-history strip so the two sit identically
 * on the same card. Native <details>/<summary> for the a11y/keyboard
 * win, with the browser's default triangle hidden and a custom rotating
 * chevron driven by [open].
 */
.report-disclosure summary { list-style: none; }
.report-disclosure summary::-webkit-details-marker { display: none; }
.report-disclosure summary::marker { content: ""; }
.report-disclosure[open] .report-disclosure-chevron {
  transform: rotate(180deg);
}
.report-disclosure-chevron {
  transition: transform 150ms ease-in-out;
}


/*
 * Stimulus hydration gate.
 *
 * Until app/javascript/controllers/application.js sets
 * `document.documentElement.dataset.stimulusReady = "true"`, every element
 * carrying `data-action="..."` is unclickable. This eliminates the
 * race-condition class where a user clicks a Stimulus-bound button before
 * its controller has registered — Stimulus silently drops those clicks
 * (no error, no UI feedback), which is what produced the "click does
 * nothing on first load" symptom in the session-form modal.
 *
 * The `cursor: wait` gives users visible "page is still loading" feedback
 * during the (usually sub-100ms) window before Stimulus has booted. If
 * this window is ever long enough to be perceptible on a real session, it
 * means we have a real boot-performance issue worth profiling — not a
 * silent input bug.
 */
html:not([data-stimulus-ready]) [data-action] {
  pointer-events: none;
  cursor: wait;
}

/* Custom RTL styles */
[dir="rtl"] .placeholder-ltr {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
  background-color: #f3f4f6;
  padding: 0 4px;
  border-radius: 4px;
  font-family: monospace;
}

/* Hide the original select when custom dropdown is active */
.custom-select.hidden-native {
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Custom dropdown container */
.custom-dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* Custom dropdown button */
.custom-dropdown-button {
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.custom-dropdown-button:hover {
  border-color: #9ca3af;
}

.custom-dropdown-button:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 1px #6366f1;
}

/* Custom dropdown chevron */
.custom-dropdown-chevron {
  width: 1rem;
  height: 1rem;
  color: #9ca3af;
  transition: transform 0.2s;
}

.custom-dropdown.open .custom-dropdown-chevron {
  transform: rotate(180deg);
}

/* Custom dropdown menu */
.custom-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 0.25rem;
}

.custom-dropdown-option {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-bottom: 1px solid #f3f4f6;
}

.custom-dropdown-option:hover {
  background-color: #f3f4f6;
}

.custom-dropdown-option.selected {
  background-color: #eff6ff;
  color: #1d4ed8;
}

/* Remove default styling in Firefox */
select.custom-select::-moz-focus-inner {
  border: 0 !important;
}

/* Remove default styling in Chrome/Safari */
select.custom-select::-webkit-outer-spin-button,
select.custom-select::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

select.custom-select:hover {
  border-color: #9ca3af !important;
}

select.custom-select:focus {
  outline: none !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 1px #6366f1 !important;
}

/* Form focus styles */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Transition for interactive elements */
.btn,
.form-input,
.form-textarea,
.form-select,
a {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Semantic Color System */
:root {
  --color-primary: #4A90E2;
  --color-secondary: #B0AEE0;
  --color-text: #4A4A4A;
  --color-background: #ffffff;
  --color-success: #7ED6A4;
  --color-primary-hover: #357ABD;
  --color-secondary-hover: #9B98D8;
  --color-text-light: #6B7280;
  --color-border: #E5E7EB;
}

/* Semantic Button Styles */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-background);
  border: 1px solid var(--color-primary);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

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

.btn-primary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
}

.btn-secondary {
  background-color: var(--color-background);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

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

.btn-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

.btn-add {
  background-color: var(--color-background);
  color: var(--color-text-light);
  border: 2px dashed var(--color-border);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-add:hover {
  background-color: #F9FAFB;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-add:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

/* Semantic Form Styles */
.form-input,
.form-textarea,
.form-select {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.75rem;
  color: var(--color-text);
  background-color: var(--color-background);
  transition: all 0.2s ease;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1);
}

.form-label {
  display: block;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.form-card {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.form-actions {
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .form-actions {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
  }
  
  a {
    text-decoration: none;
    color: inherit;
  }
}

/* Custom Select Styling - Remove default appearance completely */
select.appearance-none,
select[class*="appearance-none"],
.appearance-none select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  background-color: white !important;
}

/* More specific selectors for form selects */
form select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
}

/* For WebKit browsers */
select.appearance-none::-webkit-outer-spin-button,
select.appearance-none::-webkit-inner-spin-button,
form select::-webkit-outer-spin-button,
form select::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* For Firefox */
select.appearance-none::-moz-focus-inner,
form select::-moz-focus-inner {
  border: 0 !important;
}

/* IE/Edge specific */
select.appearance-none::-ms-expand,
form select::-ms-expand {
  display: none !important;
}

/* Super specific rule for patient gender dropdown */
select[name="patient[gender]"],
#patient_gender {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
  background-color: white !important;
}

/* Final Report Display Styles */

/* Final report content display styles */
.final-report-content h1 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  margin-top: 1.5rem !important;
  line-height: 1.2 !important;
  color: #1f2937 !important; /* gray-800 */
}

.final-report-content h2 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.75rem !important;
  margin-top: 1.25rem !important;
  line-height: 1.3 !important;
  color: #374151 !important; /* gray-700 */
}

.final-report-content h3 {
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  margin-bottom: 0.5rem !important;
  margin-top: 1rem !important;
  line-height: 1.4 !important;
  color: #4b5563 !important; /* gray-600 */
}

/* RTL/LTR support */
/* 1.3 — the same three alignment rules as the editor and the PDF
   (reports/_editor_content_v2.html.erb, layouts/pdf_paged.html.erb): unset
   body text justified, not in table cells, and a heading never justified. */
.final-report-content p:not([style*="text-align"]) { text-align: justify; }
.final-report-content table p:not([style*="text-align"]) { text-align: start; }
.final-report-content table p[style*="text-align: justify"] { text-align: start !important; }
.final-report-content :is(h1, h2, h3, h4)[style*="text-align: justify"] { text-align: start !important; }
.final-report-content p[dir="rtl"],
.final-report-content h1[dir="rtl"],
.final-report-content h2[dir="rtl"],
.final-report-content h3[dir="rtl"] {
  text-align: right;
  direction: rtl;
}

.final-report-content p[dir="ltr"],
.final-report-content h1[dir="ltr"],
.final-report-content h2[dir="ltr"],
.final-report-content h3[dir="ltr"] {
  text-align: left;
  direction: ltr;
}

.final-report-content p {
  margin-bottom: 1rem;
  color: #374151; /* gray-700 */
  line-height: 1.6;
}

.final-report-content p:last-child {
  margin-bottom: 0;
}

.final-report-content ul {
  list-style-type: disc;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.final-report-content ul li {
  margin-bottom: 0.25rem;
}

.final-report-content ol {
  list-style-type: decimal;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.final-report-content ol li {
  margin-bottom: 0.25rem;
}

/* RTL support for lists - simple approach */
.final-report-content .rtl-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
}

.final-report-content .rtl-list li {
  text-align: right;
  margin-bottom: 0.25rem;
  list-style: none;
}

.final-report-content li {
  color: #374151; /* gray-700 */
  line-height: 1.6;
}

.final-report-content a {
  color: #2563eb; /* blue-600 */
  text-decoration: underline;
}

.final-report-content a:hover {
  color: #1d4ed8; /* blue-700 */
}

.final-report-content strong {
  font-weight: 700;
}

.final-report-content em {
  font-style: italic;
}

.final-report-content u {
  text-decoration: underline;
}

.final-report-content blockquote {
  border-left: 4px solid #d1d5db; /* gray-300 */
  padding-left: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
  font-style: italic;
  color: #374151; /* gray-700 */
}

.final-report-content pre {
  background-color: #f3f4f6; /* gray-100 */
  padding: 1rem;
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.final-report-content code {
  background-color: #f3f4f6; /* gray-100 */
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.final-report-content hr {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  border-top: 1px solid #d1d5db; /* gray-300 */
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
}

/* Sliding menu overlay */
.menu-overlay {
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  inset: 0;
  z-index: 40;
}

/* Sortable drag and drop styles */
.sortable-ghost {
  opacity: 0.4;
  background: #f3f4f6;
  transform: rotate(2deg);
}

.sortable-chosen {
  cursor: grabbing !important;
}

.sortable-drag {
  opacity: 0.8;
  transform: rotate(-2deg);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.drag-handle {
  transition: all 0.2s ease;
}

/* Inline editable fields */
.form-card input[type="text"]:focus,
.form-card textarea:focus {
  background-color: rgba(59, 130, 246, 0.05);
  border-radius: 0.25rem;
  padding: 0.25rem;
  margin: -0.25rem;
}

/* Focused question card styling - Google Forms style */
.question-card.focused {
  border-left: 4px solid var(--color-primary);
  transition: border-left 0.2s ease;
}

.question-card:not(.focused) {
  border-left: 4px solid transparent;
  transition: border-left 0.2s ease;
}

/* Required checkbox styling - match brand color */
.question-card input[type="checkbox"] {
  accent-color: var(--color-primary);
  border-color: var(--color-primary);
}

.question-card input[type="checkbox"]:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.question-card input[type="checkbox"]:focus {
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
  border-color: var(--color-primary);
}

/* Remove default select styling for inline language selector */
select.border-0 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2rem;
}


/* RTL Support for Todo Items */
[dir="rtl"] .todo-item {
  text-align: right;
}

[dir="rtl"] .editable-title,
[dir="rtl"] .editable-description {
  text-align: right;
}

/* Enhanced Sidebar Tabs */
.sidebar-tab {
  transition: all 0.2s ease;
  border-bottom: 2px solid transparent;
  position: relative;
}

.sidebar-tab:hover:not(.active) {
  background-color: rgba(59, 130, 246, 0.05) !important;
  border-bottom-color: rgba(59, 130, 246, 0.3) !important;
}

.sidebar-tab.active {
  background-color: #3B82F6 !important;
  border-bottom-color: #3B82F6 !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2) !important;
}

.sidebar-tab.active i {
  color: white !important;
}

.sidebar-tab.active span {
  color: white !important;
}

.sidebar-tab.active #tasks-count,
.sidebar-tab.active #notes-count {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

.sidebar-tab:not(.active) #tasks-count,
.sidebar-tab:not(.active) #notes-count {
  background-color: #f3f4f6 !important;
  color: #6b7280 !important;
}

/* Sidebar tab content animations */
.sidebar-tab-content {
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced file upload area */
.file-upload-area {
  transition: all 0.2s ease;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.file-upload-area:hover {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #60a5fa;
}

.file-upload-area.drag-over {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-color: #3b82f6;
  transform: scale(1.02);
}

/* Note indicators */
.note-indicator {
  transition: all 0.2s ease;
}

.note-indicator.saving {
  color: #f59e0b;
}

.note-indicator.saved {
  color: #10b981;
}

.note-indicator.error {
  color: #ef4444;
}

/* Enhanced scrollbars for sidebar content */
.sidebar-scroll::-webkit-scrollbar {
  width: 4px;
}

.sidebar-scroll::-webkit-scrollbar-track {
  background: #f8fafc;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Compact sidebar view adjustments */
.sidebar-compact-view #notes-section {
  padding: 1rem;
}

.sidebar-compact-view #notes-section h2 {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.sidebar-compact-view .btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.sidebar-compact-view .document-item {
  padding: 0.75rem;
}

.sidebar-compact-view .document-item h3 {
  font-size: 0.875rem;
}

.sidebar-compact-view .document-item p {
  font-size: 0.75rem;
}

.sidebar-compact-view .document-item .flex.items-center.text-xs {
  font-size: 0.6875rem;
}

.sidebar-compact-view .document-item .inline-flex {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
}

/* Hide large empty states in sidebar */
.sidebar-compact-view #empty-notes-state,
.sidebar-compact-view #empty-documents-state {
  padding: 2rem 1rem;
}

.sidebar-compact-view #empty-notes-state h3,
.sidebar-compact-view #empty-documents-state h3 {
  font-size: 0.875rem;
}

.sidebar-compact-view #empty-notes-state p,
.sidebar-compact-view #empty-documents-state p {
  font-size: 0.75rem;
}

/* Document Selection Indicator System */
.document-card:focus-visible {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* Screen reader only class for announcements */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Smooth transitions for all selection states */
.document-card,
.document-card * {
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

/* Shake animation for placeholder validation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Table Column Inline Editing */
.column-name-input {
  transition: all 150ms ease-in-out;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.column-name-input:hover:not(:focus) {
  background-color: rgb(249 250 251); /* gray-50 */
  border-color: rgb(229 231 235); /* gray-200 */
}

.column-name-input:focus {
  background-color: white;
  border-color: rgb(59 130 246); /* blue-500 */
  outline: none;
  box-shadow: 0 0 0 2px rgb(191 219 254); /* blue-100 ring */
}

.column-name-input:focus:invalid {
  border-color: rgb(239 68 68); /* red-500 */
  background-color: rgb(254 242 242); /* red-50 */
}

/* Touch feedback for mobile */
@media (hover: hover) {
  .column-name-input:hover:not(:focus) {
    background-color: rgb(249 250 251);
    border-color: rgb(229 231 235);
  }
}

.column-name-input:active {
  background-color: rgb(243 244 246); /* gray-100 */
  transform: scale(0.99);
}

/* Drag handle states */
.drag-handle:hover {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 0.25rem;
}

.drag-handle:active {
  cursor: grabbing !important;
  background-color: rgba(0, 0, 0, 0.1);
}

/* ===================================
   Conditional Template Badges
   =================================== */

/* Base conditional badge styling */
.conditional-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem; /* text-xs */
  font-weight: 500; /* font-medium */
  padding: 0.125rem 0.5rem; /* py-0.5 px-2 */
  border-radius: 0.25rem; /* rounded */
  border-width: 1px;
  cursor: pointer;
  transition: all 150ms ease;
  user-select: none;
  -webkit-user-select: none;
}

.conditional-badge:hover {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

/* Dual-tone badge for preview mode (split colors) */
.conditional-dual-tone {
  background: linear-gradient(
    to right,
    rgba(219, 234, 254, 1) 0%,        /* blue-100 left side */
    rgba(219, 234, 254, 1) 50%,
    rgba(252, 231, 243, 1) 50%,       /* pink-100 right side */
    rgba(252, 231, 243, 1) 100%
  );
  color: #1f2937; /* gray-800 */
  border-left-width: 2px;
  border-right-width: 2px;
}

/* Gender conditional - Male (resolved) */
.conditional-badge[data-condition-type="genderConditional"][data-mode="resolved"][data-resolved-value] {
  /* Dynamically set via inline styles, but provide fallback */
  background-color: #dbeafe; /* blue-100 */
  color: #1e40af; /* blue-800 */
  border-color: #60a5fa; /* blue-400 */
}

/* Gender conditional - Female (resolved) - Applied via renderHTML */
.conditional-badge.bg-pink-100 {
  background-color: #fce7f3 !important; /* pink-100 */
  color: #9f1239 !important; /* pink-800 */
  border-color: #f472b6 !important; /* pink-400 */
}

/* Gender conditional - Blue variant */
.conditional-badge.bg-blue-100 {
  background-color: #dbeafe !important; /* blue-100 */
  color: #1e40af !important; /* blue-800 */
  border-color: #60a5fa !important; /* blue-400 */
}

/* Future: Green variant for other conditional types */
.conditional-badge.bg-green-100 {
  background-color: #d1fae5; /* green-100 */
  color: #065f46; /* green-800 */
  border-color: #34d399; /* green-400 */
}

/* Future: Amber variant for other conditional types */
.conditional-badge.bg-amber-100 {
  background-color: #fef3c7; /* amber-100 */
  color: #92400e; /* amber-800 */
  border-color: #fbbf24; /* amber-400 */
}

/* Future: Purple variant for other conditional types */
.conditional-badge.bg-purple-100 {
  background-color: #ede9fe; /* purple-100 */
  color: #5b21b6; /* purple-800 */
  border-color: #a78bfa; /* purple-400 */
}

/* Conditional edit popover */
.conditional-edit-popover {
  animation: popoverFadeIn 200ms ease-out;
}

@keyframes popoverFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* RTL support for conditional badges */
[dir="rtl"] .conditional-badge {
  direction: rtl;
  unicode-bidi: embed;
}

/* Ensure pipe separator respects RTL */
[dir="rtl"] .conditional-badge[data-mode="preview"]::after {
  content: none; /* Remove any pseudo-elements that might interfere */
}

/* Accessibility: Focus states */
.conditional-badge:focus-visible {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
  border-radius: 0.375rem;
}

/* Print: Show resolved value only, hide preview mode */
@media print {
  .conditional-badge[data-mode="preview"] {
    background: none !important;
    border: none !important;
    color: #000 !important;
    padding: 0 !important;
  }

  .conditional-badge[data-mode="resolved"] {
    background: none !important;
    border: none !important;
    color: #000 !important;
    padding: 0 !important;
  }

  /* Hide edit popovers in print */
  .conditional-edit-popover {
    display: none !important;
  }
}

/* Token decoration highlights for the building-block authoring editor.
   These paint on top of raw text to signal that the syntax is recognized
   — the tokens themselves stay plain-editable. */
.token-placeholder {
  background-color: #fef3c7; /* amber-100 */
  color: #92400e;            /* amber-800 */
  border-radius: 3px;
  padding: 0 2px;
}
.token-variable {
  background-color: #dbeafe; /* blue-100 */
  color: #1e3a8a;            /* blue-900 */
  border-radius: 3px;
  padding: 0 2px;
}
.token-gender {
  background-color: #fce7f3; /* pink-100 */
  color: #9d174d;            /* pink-800 */
  border-radius: 3px;
  padding: 0 2px;
}

/*
 * Building-blocks panel: dragging a category heading to reorder the shelves.
 *
 * Real CSS rather than Tailwind utilities because these classes are only ever
 * added from JavaScript, and a utility that appears nowhere in the markup is
 * a utility Tailwind has no reason to emit.
 */
.bb-dragging {
  opacity: 0.4;
}

.bb-drop-before {
  box-shadow: inset 0 2px 0 0 #2563eb;
}

.bb-drop-after {
  box-shadow: inset 0 -2px 0 0 #2563eb;
}

/*
 * Collapsed shelf. Driven off the section's data attribute rather than a
 * toggled class so the chevron and the list can never disagree, and so the
 * arrow points the reading direction in Hebrew.
 */
[data-collapsed="true"] [data-blocks-manager-chevron] {
  transform: rotate(-90deg);
}

[dir="rtl"] [data-collapsed="true"] [data-blocks-manager-chevron] {
  transform: rotate(90deg);
}

/* ---------------------------------------------------------------------------
   Editor-v2 material rows: markup that ships to EVERYONE, off by default.

   `_documents_list` and `_forms_list_body` emit a trailing marks column (the
   type badge, the note count, the AI-summary glyph), and the document viewer
   emits a notes rail. All of them are meant to appear only inside the editor's
   material pane and its docked viewer, and the rules that switch them ON are
   in reports/_editor_modes — a partial rendered only for users with the
   :editor_v2_panels flag.

   Their default-OFF rules used to live there too, which meant they were not
   default-off at all for anyone else: every non-enrolled user's docked panel
   grew a "Document"/"Form" label on each row, a wand icon and a SECOND copy of
   the note count, and every enrolled user got an unstyled, inert notes rail
   inside any document preview opened outside the editor (the viewer partial is
   in the application layout, so it renders on every page).

   A default that only exists on some pages is not a default. These live here.
   The pane's own `.pane-scroll …` and `.document-viewer-dock …` rules are more
   specific, so they still win where they apply, whatever the load order.
   --------------------------------------------------------------------------- */
.row-marks { display: none; }
.kind-badge { display: none; }
.notes-rail { display: none; }

/* The card's pen is the material pane's, not the docked panel's: that panel has
   carried Edit inside the ⋯ menu since #344 and does not need a second door to
   it. reports/_editor_modes turns it on inside .pane-scroll — the material
   pane's Blocks tab, which IS the library now, where renaming and rewriting is
   the job. Default-off lives here because this file loads on every page and
   that partial does not — see the note above .row-marks. */
.block-edit { display: none; }

/* Latin tokens inside RTL prose, wherever a finalized report is rendered on
   screen rather than into the PDF. Report#to_html emits the span; the editor
   applies the same rule as a decoration. All three have to agree, or the same
   sentence reads differently depending on where you look at it. */
.bidi-latin-isolate {
  unicode-bidi: isolate;
  direction: ltr;
}