/**
 * Form Renderer Styles
 * Styles for rendered form output (interactive and print modes)
 * Used by BlockRenderer::getStyles()
 */

/* Signatra signature font */
@font-face {
    font-family: 'Signatra';
    src: url('/assets/fonts/Signatra.ttf') format('truetype'),
         url('/assets/fonts/Signatra.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.form-block-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
}

.form-block {
    margin-bottom: 0.5rem;
}

.form-block[hidden],
.form-conditional-block[hidden] {
    display: none !important;
}

/* Title Blocks */
.form-title-1 { font-size: 1.75rem; font-weight: 600; margin-bottom: 0.5rem; }
.form-title-2 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.35rem; }

/* Section Header */
.form-section-header {
    font-size: 1.1rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 0.25rem;
}
.form-section-divider {
    border: none;
    border-top: 1px solid #ddd;
    margin: 0.25rem 0 0.5rem;
}

/* Paragraph */
.form-paragraph {
    margin: 0.35rem 0;
    --paragraph-font-size: 11pt; /* Default, overridden by inline style */
}

/* Force all child elements to use the paragraph's font size */
.form-paragraph p,
.form-paragraph div,
.form-paragraph span,
.form-paragraph li,
.form-paragraph b,
.form-paragraph i,
.form-paragraph u,
.form-paragraph strong,
.form-paragraph em {
    font-size: var(--paragraph-font-size);
}

/* Allow <font> tags to keep their own size (for inline formatting) */
.form-paragraph font {
    font-size: revert;
}

/* Image */
.form-image {
    margin: 0.35rem 0;
}
.form-image img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}
.form-image-caption {
    font-size: 0.875rem;
    color: #666;
    margin-top: 0.5rem;
    font-style: italic;
}
.form-image-placeholder {
    padding: 2rem;
    border: 2px dashed #ddd;
    border-radius: 0.5rem;
    color: #999;
}

/* Lists */
.form-bullet-list, .form-numbered-list {
    margin: 0.35rem 0;
    padding-left: 1.5rem;
}
.form-bullet-list li, .form-numbered-list li {
    margin-bottom: 0.25rem;
}

/* Rich content lists - custom markers that scale with font size */
.form-rich-content ul, .form-rich-content ol {
    padding-left: 0;
    list-style: none;
}
.form-rich-content ol {
    counter-reset: list-counter;
}
.form-rich-content li {
    display: flex;
    align-items: baseline;
    margin-bottom: 0.25em;
}
.form-rich-content ol > li {
    counter-increment: list-counter;
}
.form-rich-content ol > li::before {
    content: counter(list-counter) ".";
    min-width: 1.5em;
    margin-right: 0.35em;
    text-align: right;
    flex-shrink: 0;
}
.form-rich-content ul > li::before {
    content: "•";
    min-width: 1em;
    margin-right: 0.5em;
    flex-shrink: 0;
}
/* Nested lists belong below their parent text, not in its flex row. */
.form-rich-content li:has(> ul),
.form-rich-content li:has(> ol) {
    display: block;
    position: relative;
    padding-left: 1.85em;
}
.form-rich-content li:has(> ul)::before,
.form-rich-content li:has(> ol)::before {
    position: absolute;
    left: 0;
    top: 0;
    margin-right: 0;
}
.form-rich-content li > ul,
.form-rich-content li > ol {
    margin-top: 0.35em;
}
/* Inherit font size from content */
.form-rich-content li:has(> font[size="1"]) { font-size: x-small; }
.form-rich-content li:has(> font[size="2"]) { font-size: small; }
.form-rich-content li:has(> font[size="3"]) { font-size: medium; }
.form-rich-content li:has(> font[size="4"]) { font-size: large; }
.form-rich-content li:has(> font[size="5"]) { font-size: x-large; }
.form-rich-content li:has(> font[size="6"]) { font-size: xx-large; }
.form-rich-content li:has(> font[size="7"]) { font-size: xxx-large; }

/* Divider */
.form-divider { border: none; }
.form-divider-solid { border-top: 1px solid #333; }
.form-divider-dashed { border-top: 1px dashed #333; }
.form-divider-dotted { border-top: 1px dotted #333; }
.form-divider-double { border-top: 3px double #333; }

/* Column Layout */
.form-column-layout {
    margin: 0.35rem 0;
    min-width: 0;
}
.form-column {
    min-height: 20px;
    min-width: 0;
}
.form-column .form-block:last-child {
    margin-bottom: 0;
}

/* Table mode — column_layout renders as a CSS grid where every cell is a
   distinct grid item placed in row-major order. Because all cells share
   one grid, row N of column 1 and row N of column 2 auto-size to the same
   height — fixing alignment when one column's content (e.g. an initials
   block) is much taller than the other's.

   Borders are drawn per-cell using border-right (column dividers) and
   border-bottom (row dividers); last-col/last-row cells drop theirs.
   Outer borders come from the wrapper. Each toggle is independent. */
.form-column-layout.table-mode {
    margin-top: 0;
    margin-bottom: 0;
    border-top:    1px solid #374151;
    border-left:   1px solid #374151;
    border-right:  1px solid #374151;
    border-bottom: 1px solid #374151;
    box-sizing: border-box;
}
.form-column-layout.table-mode.no-outer-borders {
    border-top:    none !important;
    border-left:   none !important;
    border-right:  none !important;
    border-bottom: none !important;
}
.form-column-layout.table-mode .form-cell {
    padding: 0.4rem 0.5rem;
    min-height: 1.5rem;
    min-width: 0;
    box-sizing: border-box;
    border-right:  1px solid #374151; /* column divider */
    border-bottom: 1px solid #374151; /* row divider */
    /* Flex column so the valign-* classes can position cell content
       vertically within the stretched cell height. Default = top. */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.form-column-layout.table-mode.valign-middle  .form-cell { justify-content: center; }
.form-column-layout.table-mode.valign-bottom  .form-cell { justify-content: flex-end; }
/* Stretch: children fill the cell height (e.g. an initials capture box
   that should grow to the tallest sibling cell's row). */
.form-column-layout.table-mode.valign-stretch .form-cell > * { flex: 1 1 auto; }
.form-column-layout.table-mode .form-cell.last-col  { border-right:  none; }
.form-column-layout.table-mode .form-cell.last-row  { border-bottom: none; }
.form-column-layout.table-mode.no-column-dividers .form-cell { border-right:  none !important; }
.form-column-layout.table-mode.no-row-dividers    .form-cell { border-bottom: none !important; }
.form-column-layout.table-mode.table-column-flow .form-cell {
    gap: 0.35rem;
}
.form-column-layout.table-mode.table-column-flow .form-cell > .form-block:first-child { margin-top: 0; }
.form-column-layout.table-mode.table-column-flow .form-cell > .form-block:last-child { margin-bottom: 0; }

/* Stacked table rows (separate column_layout blocks in table mode): overlap
   so the bottom of one and top of the next collapse to a single line. */
.form-column-layout.table-mode + .form-column-layout.table-mode {
    margin-top: -1px;
}

/* Header cells — first row when is_header_row flag is set */
.form-column-layout.table-mode .form-cell.header-cell {
    background: #f3f4f6;
    font-weight: 600;
}

/* Staff and portal fill surfaces follow the active theme. Printed and static
   previews retain the neutral document colors above. */
.form-fill-container .form-column-layout.table-mode,
.form-fill-container .form-column-layout.table-mode .form-cell {
    border-color: var(--border-color, #374151);
}
.form-fill-container .form-column-layout.table-mode .form-cell.header-cell {
    background: var(--card-bg, var(--secondary-dark, #f3f4f6));
    color: var(--text-primary, #111827);
}

/* Reset spacing on nested blocks inside cells so padding shows cleanly */
.form-column-layout.table-mode .form-cell > .form-block:first-child { margin-top: 0; }
.form-column-layout.table-mode .form-cell > .form-block:last-child  { margin-bottom: 0; }
.form-column-layout.table-mode .form-cell .form-custom-field,
.form-column-layout.table-mode .form-cell .form-fillable-field,
.form-column-layout.table-mode .form-cell .form-date-field {
    margin: 0;
    min-width: 0;
}

@media print {
    .form-column-layout.table-mode,
    .form-column-layout.table-mode .form-cell { border-color: #000; }
    .form-column-layout.table-mode .form-cell.header-cell {
        background: #e5e7eb !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
/* Normalize spacing inside columns so rows align across columns */
.form-column .form-custom-field,
.form-column .form-fillable-field,
.form-column .form-date-field {
    margin: 0;
    min-width: 0;
}

/* Ensure form fields in columns stretch to full width */
.form-column .fillable-input,
.form-column input[type="text"],
.form-column input[type="email"],
.form-column input[type="number"],
.form-column input[type="tel"],
.form-column input[type="date"],
.form-column input[type="time"],
.form-column input[type="datetime-local"],
.form-column select,
.form-column textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.form-column .custom-dropdown-wrapper,
.form-column .custom-dropdown-display {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
/* Normalize input heights so different field types match across columns */
.form-column input[type="text"],
.form-column input[type="number"],
.form-column input[type="email"],
.form-column input[type="tel"],
.form-column input[type="date"],
.form-column input[type="password"],
.form-column select {
    height: 1.875rem;
    padding: 0.25rem 0.4rem;
}
/* Hide number spinners for cleaner alignment */
.form-column input[type="number"]::-webkit-outer-spin-button,
.form-column input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.form-column input[type="number"] {
    -moz-appearance: textfield;
}

/* Column vertical alignment options */
.form-column.align-top {
    align-self: start;
}
.form-column.align-middle {
    align-self: center;
}
.form-column.align-bottom {
    align-self: end;
}
.form-column.align-stretch {
    align-self: stretch;
}

.column-empty-hint {
    padding: 1rem;
    text-align: center;
    color: #9ca3af;
    border: 1px dashed #d1d5db;
    border-radius: 4px;
    font-size: 0.875rem;
}

/* Signature Blocks */
.form-signature-block { margin: 0.35rem 0; }

.signature-preview-box {
    border: 2px dashed #3b82f6;
    background: #eff6ff;
    border-radius: 6px;
    padding: 0.75rem;
    text-align: center;
}
.signature-preview-icon { color: #3b82f6; margin-bottom: 0.25rem; }
.signature-preview-label { font-weight: 600; color: #1e40af; font-size: 0.9rem; }
.signature-preview-hint { font-size: 0.8rem; color: #6b7280; margin-top: 0.125rem; }

.signature-awaiting-box {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.5rem;
}
.signature-label { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.25rem; color: #000; }
.awaiting-badge { font-weight: normal; font-style: italic; color: #333; font-size: 0.8rem; }
.signature-line {
    border-bottom: 2px solid #333;
    height: 40px;
    margin: 0.5rem 0;
    cursor: pointer;
}
.signature-tap-hint {
    text-align: center;
    color: #6b7280;
    font-size: 0.875rem;
}

.signature-completed-box {
    padding: 0.5rem 0;
}
.signature-image {
    max-height: 50px;
    margin: 0.25rem 0;
}
.signature-typed {
    font-family: 'Signatra', 'Brush Script MT', 'Segoe Script', cursive;
    font-size: 2rem;
    color: #1a365d;
    padding: 0.25rem 0;
    border-bottom: 1px solid #2d3748;
    display: inline-block;
    min-width: 180px;
}
.signature-printed-name, .signature-date {
    font-size: 0.8rem;
    color: #374151;
    margin: 0.125rem 0;
}

/* Print signature */
.signature-print-box { margin: 0.5rem 0; }
.signature-line-print {
    border-bottom: 1px solid #000;
    height: 30px;
    margin: 0.25rem 0;
}
.signature-field { margin: 0.25rem 0; color: #000; }
.field-label { font-size: 0.875rem; color: #000; font-weight: 500; }
.field-line { display: inline-block; width: 200px; border-bottom: 1px solid #000; }
.field-line-short { display: inline-block; width: 120px; border-bottom: 1px solid #000; }

/* Initials Blocks — compact variant of signature styles. Inline so multiple
   initials boxes flow alongside checklist items rather than stacking. */
.form-initials-block {
    margin: 0.2rem 0;
    display: inline-block;
    vertical-align: middle;
}

.initials-preview-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    border: 2px dashed #3b82f6;
    background: #eff6ff;
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
    min-width: 80px;
}
.initials-preview-icon { color: #3b82f6; }
.initials-preview-label { font-weight: 600; color: #1e40af; font-size: 0.75rem; }
.initials-preview-hint { font-size: 0.7rem; color: #6b7280; }

.initials-awaiting-box {
    display: inline-block;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    min-width: 80px;
}
.initials-label { font-weight: 600; font-size: 0.78rem; color: #000; margin-bottom: 0.15rem; }
.initials-line {
    border-bottom: 2px solid #333;
    height: 28px;
    margin: 0.25rem 0;
    cursor: pointer;
    min-width: 70px;
}
.initials-instructions { font-size: 0.72rem; color: #374151; margin: 0 0 0.15rem; }

.initials-completed-box {
    display: inline-block;
    padding: 0.2rem 0;
    vertical-align: middle;
}
.initials-image { max-height: 36px; vertical-align: middle; }
.initials-typed {
    font-family: 'Signatra', 'Brush Script MT', 'Segoe Script', cursive;
    font-size: 1.4rem;
    color: #1a365d;
    padding: 0.1rem 0.35rem;
    border-bottom: 1px solid #2d3748;
    display: inline-block;
    min-width: 50px;
    letter-spacing: 0.05em;
}
.initials-date { font-size: 0.72rem; color: #374151; margin-left: 0.35rem; display: inline-block; }

.initials-print-box { display: inline-block; margin: 0.25rem 0.35rem 0.25rem 0; }
.initials-header-label { font-size: 0.75rem; font-weight: 500; color: #000; }
.initials-line-print {
    display: inline-block;
    border-bottom: 1px solid #000;
    width: 70px;
    height: 18px;
    margin: 0 0.35rem;
    vertical-align: bottom;
}
.initials-field { display: inline-block; margin-left: 0.35rem; color: #000; font-size: 0.75rem; }

/* Builder-preview visibility toggles (mirror signature-screen-only/print-only). */
.initials-screen-only { display: inline-flex; }
.initials-print-only { display: none; }

/* Acknowledgement */
.form-acknowledgement { margin: 0.5rem 0; padding: 0.5rem; background: #f9fafb; border-radius: 8px; }
.acknowledgement-statement { margin-bottom: 0.35rem; }
.acknowledgement-checkbox { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.acknowledgement-checkbox input { width: 18px; height: 18px; }
.checkbox-box { display: inline-block; width: 14px; height: 14px; border: 1px solid #000; margin-right: 0.5rem; }

/* Date Field */
.form-date-field { margin: 0.35rem 0; }
.form-date-field label { display: block; font-weight: 500; margin-bottom: 0.25rem; }
.form-date-field input { padding: 0.25rem 0.5rem; border: 1px solid #d1d5db; border-radius: 4px; }

/* Custom Field */
.form-custom-field { margin: 0.35rem 0; }
.form-custom-field > label { display: block; font-weight: 500; margin-bottom: 0.25rem; }
.form-custom-field input[type="text"],
.form-custom-field input[type="email"],
.form-custom-field input[type="tel"],
.form-custom-field input[type="number"],
.form-custom-field input[type="date"],
.form-custom-field input[type="password"],
.form-custom-field select,
.form-custom-field textarea {
    width: 100%;
    padding: 0.25rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
}
.form-custom-field textarea { min-height: 40px; }
.radio-group, .checkbox-group { display: flex; flex-direction: column; gap: 0.125rem; }
.radio-group label, .checkbox-group label { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; font-weight: normal; line-height: 1.3; }
.radio-group input[type="radio"], .checkbox-group input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }

/* Label Position Variants — apply to both custom and date fields.
   The block renderer emits label-first HTML for above/left and
   input-first HTML for right/below, so default block layout handles
   above/below; flex handles the two side-by-side cases. */
.form-date-field.label-left,
.form-custom-field.label-left,
.form-date-field.label-right,
.form-custom-field.label-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.form-date-field.label-left > label,
.form-custom-field.label-left > label,
.form-date-field.label-right > label,
.form-custom-field.label-right > label {
    display: inline-block;
    margin-bottom: 0;
    white-space: nowrap;
    flex-shrink: 0;
}

.form-date-field.label-left > input,
.form-date-field.label-left > span,
.form-custom-field.label-left > input,
.form-custom-field.label-left > select,
.form-custom-field.label-left > textarea,
.form-custom-field.label-left > .fillable-input,
.form-custom-field.label-left > .fillable-radio-group,
.form-custom-field.label-left > .fillable-checkbox-group,
.form-custom-field.label-left > .fillable-yes-no-group,
.form-custom-field.label-left > .custom-dropdown-wrapper,
.form-custom-field.label-left > .staff-search-wrapper,
.form-custom-field.label-left > .total-time-inputs,
.form-date-field.label-right > input,
.form-date-field.label-right > span,
.form-custom-field.label-right > input,
.form-custom-field.label-right > select,
.form-custom-field.label-right > textarea,
.form-custom-field.label-right > .fillable-input,
.form-custom-field.label-right > .fillable-radio-group,
.form-custom-field.label-right > .fillable-checkbox-group,
.form-custom-field.label-right > .fillable-yes-no-group,
.form-custom-field.label-right > .custom-dropdown-wrapper,
.form-custom-field.label-right > .staff-search-wrapper,
.form-custom-field.label-right > .total-time-inputs {
    flex: 1;
    min-width: 0;
    width: auto;
}

.form-date-field.label-below > label,
.form-custom-field.label-below > label {
    margin-bottom: 0;
    margin-top: 0.25rem;
}

/* Info Boxes */
.form-info-box {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.5rem;
    margin: 0.5rem 0;
    background: #f9fafb;
}
.info-box-title { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 600; }
.info-field { margin: 0.25rem 0; }
.info-label { font-weight: 500; margin-right: 0.5rem; }
.layout-horizontal .info-box-content { display: flex; flex-wrap: wrap; gap: 1rem; }
.layout-grid .info-box-content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }

/* Agency Info Box */
.agency-info-box.layout-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border-bottom: 2px solid #3b82f6;
    border-radius: 0;
}
.agency-logo img { max-height: 60px; }
.agency-name { font-size: 1.25rem; font-weight: 600; }
.agency-address, .agency-phone, .agency-email { font-size: 0.875rem; color: #6b7280; }

/* Repeating Section */
.form-repeating-section { margin: 0.5rem 0; }
.repeating-section-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.35rem; }
.repeating-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.5rem;
    margin-bottom: 0.35rem;
    background: #fff;
}
.repeating-item-header {
    font-weight: 500;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0.35rem;
}
.btn-add-item {
    padding: 0.5rem 1rem;
    background: #f3f4f6;
    border: 1px dashed #9ca3af;
    border-radius: 4px;
    cursor: pointer;
}
.btn-add-item:hover { background: #e5e7eb; }

/* Conditional Block */
.form-conditional-block { margin: 0.5rem 0; }
.conditional-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #6b7280;
    background: #fef3c7;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

/* Placeholder preview */
.placeholder-preview {
    background: #dbeafe;
    padding: 0 0.25rem;
    border-radius: 2px;
    font-family: monospace;
    font-size: 0.875em;
}

/* Fillable Fields */
.form-fillable-field { margin: 0.35rem 0; }

/* Fillable field label position variants — used in the fill/signing modal
   when a custom field has an assigned slot (wraps the label + role badge
   in a .fillable-field-header). Class names must match what block-renderer.php
   emits (label-{left,right,below,hidden}). */
.form-fillable-field.label-left,
.form-fillable-field.label-right { display: flex; align-items: flex-start; gap: 0.75rem; }
.form-fillable-field.label-left > .fillable-field-header,
.form-fillable-field.label-right > .fillable-field-header { flex-shrink: 0; padding-top: 0.4rem; margin-bottom: 0; }
.form-fillable-field.label-left > .fillable-input,
.form-fillable-field.label-left > .fillable-radio-group,
.form-fillable-field.label-left > .fillable-checkbox-group,
.form-fillable-field.label-left > .fillable-yes-no-group,
.form-fillable-field.label-left > .fillable-single-checkbox,
.form-fillable-field.label-left > .custom-dropdown-wrapper,
.form-fillable-field.label-left > .staff-search-wrapper,
.form-fillable-field.label-left > .total-time-inputs,
.form-fillable-field.label-left > select,
.form-fillable-field.label-left > textarea,
.form-fillable-field.label-right > .fillable-input,
.form-fillable-field.label-right > .fillable-radio-group,
.form-fillable-field.label-right > .fillable-checkbox-group,
.form-fillable-field.label-right > .fillable-yes-no-group,
.form-fillable-field.label-right > .fillable-single-checkbox,
.form-fillable-field.label-right > .custom-dropdown-wrapper,
.form-fillable-field.label-right > .staff-search-wrapper,
.form-fillable-field.label-right > .total-time-inputs,
.form-fillable-field.label-right > select,
.form-fillable-field.label-right > textarea { flex: 1; min-width: 0; }
.form-fillable-field.label-left > .fillable-value-print,
.form-fillable-field.label-left > .fillable-line-print,
.form-fillable-field.label-left > .fillable-textarea-print,
.form-fillable-field.label-left > .fillable-options-print,
.form-fillable-field.label-left > .fillable-single-checkbox-print,
.form-fillable-field.label-right > .fillable-value-print,
.form-fillable-field.label-right > .fillable-line-print,
.form-fillable-field.label-right > .fillable-textarea-print,
.form-fillable-field.label-right > .fillable-options-print,
.form-fillable-field.label-right > .fillable-single-checkbox-print { flex: 1; min-width: 0; }
.form-fillable-field.label-right { flex-direction: row-reverse; }
.form-fillable-field.label-below {
    display: flex;
    flex-direction: column;
}
.form-fillable-field.label-below > .fillable-field-header {
    order: 2;
    margin-top: 0.25rem;
    margin-bottom: 0;
}
.form-fillable-field.label-hidden > .fillable-field-header label { display: none; }

/* Field Width Variants (fillable + custom) */
.form-fillable-field.field-width-auto,
.form-custom-field.field-width-auto { width: auto; display: inline-block; }
.form-fillable-field.field-width-25,
.form-custom-field.field-width-25 { width: 25%; display: inline-block; }
.form-fillable-field.field-width-33,
.form-custom-field.field-width-33 { width: 33%; display: inline-block; }
.form-fillable-field.field-width-50,
.form-custom-field.field-width-50 { width: 50%; display: inline-block; }
.form-fillable-field.field-width-66,
.form-custom-field.field-width-66 { width: 66%; display: inline-block; }
.form-fillable-field.field-width-75,
.form-custom-field.field-width-75 { width: 75%; display: inline-block; }

/* Side-labeled fields with a width variant: width rules above set
   display: inline-block, which drops the flex context from the
   .label-left/.label-right rule — collapsing the gap and leaving the
   label touching the input. Restore inline-flex so the gap applies. */
.form-custom-field.label-left[class*="field-width-"],
.form-custom-field.label-right[class*="field-width-"],
.form-fillable-field.label-left[class*="field-width-"],
.form-fillable-field.label-right[class*="field-width-"] {
    display: inline-flex;
}

.fillable-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}
.fillable-field-header label {
    font-weight: 500;
    margin: 0;
}
.fillable-field-header .required-marker {
    color: #dc2626;
    margin-left: 2px;
}
.fillable-field-header .role-badge {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-weight: 500;
}
/* Inline header for single_checkbox - just shows role badge */
.fillable-field-header-inline {
    justify-content: flex-end;
    margin-bottom: 0.125rem;
}
.fillable-help-text {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0 0 0.25rem 0;
}
.fillable-input {
    width: 100%;
    padding: 0.25rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.9rem;
}
.fillable-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.total-time-value {
    display: none !important;
}
.total-time-inputs {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    max-width: 100%;
}
.total-time-part {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    white-space: nowrap;
    color: #374151;
    font-size: 0.9rem;
}
.total-time-part .fillable-input {
    width: 4.5rem;
    flex: 0 0 4.5rem;
}
.form-reference-selected {
    margin-top: 0.5rem;
}
.form-reference-card,
.form-reference-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #f9fafb;
    color: #111827;
}
/* Summary layout: consistent title column on the left, summary filling the
   rest. Title parts stack on their own lines instead of wrapping one string. */
.form-reference-display-summary {
    align-items: flex-start;
}
.form-reference-display-summary .form-reference-title {
    flex: 0 0 11rem;
    min-width: 0;
}
.form-reference-display-summary .form-reference-summary {
    flex: 1 1 auto;
    min-width: 0;
    margin-top: 0;
}
.form-reference-title-line {
    display: block;
    overflow-wrap: break-word;
}
.form-reference-title-line:first-child {
    font-weight: 600;
}
.form-reference-title-line:not(:first-child) {
    font-weight: 500;
    font-size: 0.9em;
}
.form-reference-card.error {
    color: #991b1b;
    border-color: #fecaca;
    background: #fef2f2;
}
.form-reference-card-title,
.form-reference-title {
    font-weight: 600;
    color: #111827;
}
.form-reference-card-meta,
.form-reference-empty,
.form-reference-summary-row.muted {
    color: #6b7280;
    font-size: 0.85rem;
}
.form-reference-summary-mini,
.form-reference-summary {
    margin-top: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-left: 3px solid #93c5fd;
    background: #eff6ff;
    border-radius: 4px;
    color: #111827;
}
.form-reference-summary-row {
    font-size: 0.85rem;
    line-height: 1.45;
    color: #111827;
}
.form-reference-repeat-group {
    margin-top: 0.4rem;
}
.form-reference-repeat-group:first-child {
    margin-top: 0;
}
.form-reference-repeat-title {
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
}
.form-reference-repeat-list {
    margin: 0;
    padding-left: 1.25rem;
}
.form-reference-repeat-list li {
    margin-bottom: 0.25rem;
    line-height: 1.45;
    color: #111827;
}
/* A referenced form's answers stay inside the page: a long unbroken run
   (a row of asterisks, a URL) breaks instead of pushing the card past the
   right edge, in the editor, preview, print and saved snapshots alike. */
.form-reference-card,
.form-reference-display,
.form-reference-summary,
.form-reference-summary-mini,
.form-reference-summary-row,
.form-reference-repeat-list li,
.form-reference-card-title,
.form-reference-title {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.form-reference-display > *,
.form-reference-card > * {
    min-width: 0;
}
/* A multi-line answer keeps its paragraphs in the summary. */
.form-reference-summary-row,
.form-reference-repeat-list li {
    white-space: pre-line;
}

/* Fill/edit modal uses app theme surfaces; document preview/print stays paper-like. */
.form-fill-container .form-reference-card,
.form-fill-container .form-reference-display {
    border-color: var(--border-color, #d1d5db);
    background: var(--card-bg, var(--bg-primary, #f9fafb));
    color: var(--text-primary, #111827);
}
.form-fill-container .form-reference-card.error {
    color: var(--danger, #991b1b);
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.12);
}
.form-fill-container .form-reference-card-title,
.form-fill-container .form-reference-title,
.form-fill-container .form-reference-summary-row,
.form-fill-container .form-reference-repeat-title,
.form-fill-container .form-reference-repeat-list li {
    color: var(--text-primary, #111827);
}
.form-fill-container .form-reference-card-meta,
.form-fill-container .form-reference-empty,
.form-fill-container .form-reference-summary-row.muted {
    color: var(--text-muted, #6b7280);
}
.form-fill-container .form-reference-summary-mini,
.form-fill-container .form-reference-summary {
    border-left-color: var(--accent-primary, #93c5fd);
    background: rgba(var(--accent-primary-rgb, 59, 130, 246), 0.08);
    color: var(--text-primary, #111827);
}
.form-file-upload-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0.375rem 0;
}
.form-file-upload-list[data-empty="true"] {
    display: none;
}
.form-file-upload-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.625rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    color: #111827;
}
.form-file-upload-item a {
    font-weight: 600;
    color: #1d4ed8;
}
/* Image attachments show the picture itself; the filename and size sit beside
   it so the row still reads as a document entry. */
.form-file-upload-item-image {
    align-items: flex-start;
}
.form-file-upload-item-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}
.form-file-upload-thumb {
    display: block;
    flex-shrink: 0;
    line-height: 0;
}
.form-file-upload-thumb img {
    display: block;
    max-width: 220px;
    max-height: 220px;
    width: auto;
    height: auto;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    object-fit: contain;
    background: #fff;
}
/* Printing an incident report is how it reaches a court or a caseworker, so the
   attachment has to survive the page break and stay legible on paper. */
@media print {
    .form-file-upload-item-image {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .form-file-upload-thumb img {
        max-width: 3.5in;
        max-height: 3.5in;
    }
}
.form-file-meta,
.form-file-empty,
.form-file-upload-hint {
    color: #6b7280;
    font-size: 0.8rem;
}
.form-file-upload-control {
    margin-top: 0.5rem;
}
.form-file-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.form-file-upload-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 6rem;
    padding: 1rem;
    border: 1.5px dashed #9ca3af;
    border-radius: 12px;
    background: #f9fafb;
    color: #374151;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.form-file-upload-dropzone:hover,
.form-file-upload-field.drag-over .form-file-upload-dropzone {
    border-color: #3b82f6;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.form-file-upload-field.uploading .form-file-upload-dropzone {
    opacity: 0.7;
    cursor: progress;
}
.form-file-upload-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 9999px;
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}
.form-file-upload-title {
    font-weight: 650;
    color: #111827;
}
.form-file-remove {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: #dc2626;
    cursor: pointer;
    font-size: 0.8rem;
}
.form-fill-container .form-file-upload-item {
    border-color: var(--border-color, #d1d5db);
    background: var(--card-bg, var(--bg-primary, #f9fafb));
    color: var(--text-primary, #111827);
}
.form-fill-container .form-file-upload-dropzone {
    border-color: rgba(var(--accent-primary-rgb, 59, 130, 246), 0.45);
    background: rgba(var(--accent-primary-rgb, 59, 130, 246), 0.07);
    color: var(--text-secondary, #374151);
}
.form-fill-container .form-file-upload-dropzone:hover,
.form-fill-container .form-file-upload-field.drag-over .form-file-upload-dropzone {
    border-color: var(--accent-primary, #3b82f6);
    background: rgba(var(--accent-primary-rgb, 59, 130, 246), 0.14);
    box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 59, 130, 246), 0.16);
}
.form-fill-container .form-file-upload-icon {
    background: rgba(var(--accent-primary-rgb, 59, 130, 246), 0.16);
    color: var(--accent-primary, #2563eb);
}
.form-fill-container .form-file-upload-title {
    color: var(--text-primary, #111827);
}
.form-fill-container .form-file-upload-item a {
    color: var(--accent-primary, #1d4ed8);
}
.form-fill-container .form-file-upload-thumb img {
    border-color: var(--border-color, #d1d5db);
    background: var(--card-bg, #fff);
}
.form-fill-container .form-file-meta,
.form-fill-container .form-file-empty,
.form-fill-container .form-file-upload-hint {
    color: var(--text-muted, #6b7280);
}
textarea.fillable-input { min-height: 40px; resize: vertical; }

/* Staff paragraph editor: one control in side-label/column layouts. The
   shared themed grip keeps a dragged minimum while content auto-grows. */
#fillFormModal .fill-form-main { scrollbar-gutter: stable; }
.form-textarea-control {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    flex: 1;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-textarea-control:focus-within { border-color: var(--accent-primary); box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.15); }
#fillFormContent .form-textarea-control textarea.car-autogrow {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    resize: none !important;
    overflow: hidden;
    margin-bottom: 0;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
#fillFormContent .form-textarea-control textarea.car-autogrow::-webkit-resizer { display: none; }
#fillFormContent .form-textarea-control > .car-resize-grip {
    width: 100%;
    box-sizing: border-box;
    height: 14px;
    margin: 0;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
    border-radius: 0;
    background: color-mix(in srgb, var(--accent-primary) 24%, var(--secondary-dark));
}
#fillFormContent .form-textarea-control > .car-resize-grip:hover,
#fillFormContent .form-textarea-control > .car-resize-grip.dragging,
#fillFormContent .form-textarea-control > .car-resize-grip:focus-visible {
    background: color-mix(in srgb, var(--accent-primary) 36%, var(--secondary-dark));
}
@media print { .form-textarea-control .car-resize-grip { display: none !important; } }
.fillable-radio-group, .fillable-checkbox-group, .fillable-yes-no-group {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.fillable-radio-option, .fillable-checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    line-height: 1.3;
}
.fillable-radio-option input, .fillable-checkbox-option input {
    width: 16px;
    height: 16px;
}

/* Single checkbox styles */
.fillable-single-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.fillable-single-checkbox input {
    width: 16px;
    height: 16px;
}
.fillable-single-checkbox-print {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.fillable-single-checkbox-print .option-box {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #000;
}
.fillable-single-checkbox-print.checked .option-box {
    background: #000;
}

/* Print styles for fillable fields */
.fillable-textarea-print {
    min-height: 30px;
    border: 1px solid #000;
    padding: 0.25rem;
}
.fillable-textarea-print-empty {
    min-height: 30px;
    border-bottom: 1px solid #000;
}
.fillable-options-print { display: flex; flex-wrap: wrap; gap: 1rem; }
.fillable-option-print {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.fillable-option-print .option-circle {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #000;
    border-radius: 50%;
}
.fillable-option-print.selected .option-circle {
    background: #000;
}
.fillable-option-print .option-box {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #000;
}
.fillable-option-print.checked .option-box {
    border-color: #2563eb;
    background: #2563eb;
}
.fillable-option-print.checked .option-box::after {
    content: "✓";
    position: absolute;
    top: -2px;
    left: 1px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}
.fillable-single-checkbox-print {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
}
.fillable-single-checkbox-print .option-box {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #9ca3af;
    border-radius: 3px;
    flex-shrink: 0;
    position: relative;
}
.fillable-single-checkbox-print.checked .option-box {
    border-color: #2563eb;
    background: #2563eb;
}
.fillable-single-checkbox-print.checked .option-box::after {
    content: "✓";
    position: absolute;
    top: -1px;
    left: 2px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
}
.fillable-value-print {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border: 1px solid #666;
    border-radius: 4px;
    background: #fafafa;
    min-width: 100px;
}
.fillable-line-print {
    display: inline-block;
    width: 200px;
    padding: 0.25rem 0.5rem;
    border: 1px solid #999;
    border-radius: 4px;
    background: #fff;
    min-height: 1.5em;
}
.fillable-textarea-print {
    display: block;
    padding: 0.5rem;
    border: 1px solid #666;
    border-radius: 4px;
    background: #fafafa;
    min-height: 60px;
    white-space: pre-wrap;
}

/* Custom/Date field print styles */
.field-value-print {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    min-width: 150px;
    background: #fff;
    min-height: 1.625rem;
    font-size: 0.9rem;
    line-height: 1.35;
    box-sizing: border-box;
    vertical-align: top;
}
.field-line-print {
    display: inline-block;
    width: 200px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    min-height: 1.625rem;
    background: #fff;
    box-sizing: border-box;
    vertical-align: top;
}
.field-textarea-print {
    min-height: 30px;
    padding: 0.375rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    font-size: 0.9rem;
    line-height: 1.4;
    box-sizing: border-box;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.field-textarea-print .placeholder-text {
    color: #999;
    font-style: italic;
    font-size: 0.9em;
}
.date-field-print {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    min-width: 120px;
    background: #fff;
    min-height: 1.625rem;
    font-size: 0.9rem;
    line-height: 1.35;
    box-sizing: border-box;
    vertical-align: top;
}
.field-options-print {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.15rem;
}
.option-print {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.35;
}
.option-print .option-circle {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #000;
    border-radius: 50%;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
}
.option-print.selected .option-circle {
    background: #fff;
}
.option-print .option-box {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid #000;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
}
.option-print.checked .option-box {
    background: #fff;
}
.option-print.checked .option-box::after {
    content: none;
}
.option-print .print-option-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    color: #111;
}
.option-print .print-option-svg-check {
    padding: 1px;
    box-sizing: border-box;
}
.form-column .field-value-print,
.form-column .field-line-print,
.form-column .date-field-print {
    display: block;
    width: 100%;
    max-width: 100%;
}
.filled-value {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f9fafb;
}
.filled-value.empty {
    color: #999;
    font-style: italic;
}

/* Print styles */
/* On screen, hide the print-only signature lines (they show only when printing) */
.signature-print-only {
    display: none;
}

@media print {
    /* Don't set blanket font-size here - let inline styles control individual element sizes */
    .signature-preview-box { border: 1px solid #000; background: none; }
    .form-info-box { background: none; border: 1px solid #000; }
    .btn-add-item { display: none; }

    /* Swap signature blocks: hide screen hint, show print lines */
    .signature-screen-only { display: none !important; }
    .signature-print-only { display: block !important; }

    /* Same swap for initials blocks */
    .initials-screen-only { display: none !important; }
    .initials-print-only { display: inline-block !important; }

    /* Checkbox print styling — hide native checkbox, draw a crisp box with a
       border-based checkmark. The two-border rotate technique renders sharper
       than a unicode ✓ glyph because it's pure vector and isn't subject to
       font hinting at small print sizes. */
    input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
        border: 1.5px solid #000;
        background: #fff;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        margin-right: 6px;
        box-sizing: border-box;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    input[type="checkbox"]:checked {
        background: #fff;
    }

    input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        top: 0px;
        left: 4px;
        width: 5px;
        height: 10px;
        border: solid #000;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        box-sizing: content-box;
    }

    /* Ensure checkbox labels stay on same line */
    .acknowledgement-checkbox,
    .fillable-checkbox-option,
    .fillable-single-checkbox,
    .checkbox-group label {
        display: flex !important;
        align-items: center !important;
        page-break-inside: avoid;
    }

    /* Radio button print styling — matches checkbox sizing for visual
       consistency. The inner dot is sized to sit centered inside the ring. */
    input[type="radio"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
        border: 1.5px solid #000;
        border-radius: 50%;
        background: #fff;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        margin-right: 6px;
        box-sizing: border-box;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    input[type="radio"]:checked {
        background: #000;
        background-clip: content-box;
        padding: 3px;
    }

    input[type="radio"]:checked::after {
        content: none;
    }

    /* Ensure signature images print */
    .signature-image {
        max-height: 60px;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .signature-completed-box {
        border: none;
        padding: 0.5rem 0;
    }
}

/* Staff Search Dropdown */
.staff-search-wrapper {
    position: relative;
}
.staff-search-input {
    width: 100%;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 4px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #111);
}
.staff-search-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-color, #d1d5db);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.staff-search-results.open { display: block; }
.staff-search-item {
    padding: 0.375rem 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-primary, #111);
}
.staff-search-item:hover { background: var(--bg-hover, #f3f4f6); }
.staff-search-item .staff-role {
    font-size: 0.75rem;
    color: var(--text-muted, #6b7280);
    margin-left: auto;
}
.staff-search-no-results {
    padding: 0.5rem;
    color: var(--text-muted, #9ca3af);
    font-size: 0.85rem;
    text-align: center;
}

.portal-form-wrapper .staff-search-input {
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
}

.portal-form-wrapper .staff-search-input::placeholder {
    color: #9ca3af !important;
}

.portal-form-wrapper .staff-search-input:focus {
    outline: none;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18) !important;
}

.portal-form-wrapper .staff-search-results {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

.portal-form-wrapper .staff-search-item {
    color: #111827 !important;
}

.portal-form-wrapper .staff-search-item:hover {
    background: #f3f4f6 !important;
}