/* BOTSAUTO Frontend Styles with CSS Variables */

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

/* License Text Fallback (when JavaScript is disabled) */
.botsauto-license-text-fallback {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 13px;
    color: #4D4D4D;
    margin: 16px 0 0 0;
    line-height: 1.4;
}

.botsauto-license-text-fallback a {
    color: inherit;
    text-decoration: underline;
}

.botsauto-license-text-fallback img {
    vertical-align: text-bottom;
    height: 22px;
    margin-left: 3px;
}

.botsauto-docked-bar {
    position: fixed;
    inset: auto var(--ba-docked-right) var(--ba-docked-bottom) auto;
    width: min(var(--ba-docked-width), max(0px, calc(100vw - var(--ba-docked-right, 24px) - 16px)));
    max-width: var(--ba-docked-width);
    min-width: min(260px, var(--ba-docked-width), max(0px, calc(100vw - var(--ba-docked-right, 24px) - 16px)));
    background: var(--ba-docked-bg);
    color: var(--ba-docked-fg);
    border-radius: var(--ba-docked-radius);
    box-shadow: var(--ba-docked-shadow);
    display: none;
    opacity: 0;
    transform: translateY(calc(var(--ba-docked-gap) / 2));
    transition: opacity .18s ease, transform .18s ease;
    padding-block: var(--ba-docked-padding-block);
    padding-inline: var(--ba-docked-padding-inline);
    gap: var(--ba-docked-gap);
    z-index: var(--ba-docked-z);
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    overflow: hidden;
}

.botsauto-docked-bar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--ba-docked-accent);
    pointer-events: none;
}

.botsauto-docked-bar.is-visible {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.botsauto-docked-bar .ba-row,
.botsauto-docked-bar .botsauto-docked-actions,
.botsauto-docked-bar .botsauto-docked-toggle {
    display: flex;
    width: 100%;
    min-width: 0;
    gap: var(--ba-docked-gap);
    align-items: stretch;
    flex-wrap: nowrap;
}

.botsauto-docked-bar .ba-row--top,
.botsauto-docked-bar .botsauto-docked-expanded {
    align-items: center;
}

.botsauto-docked-bar .ba-row--bottom,
.botsauto-docked-bar .botsauto-docked-collapsed {
    gap: var(--ba-docked-toggle-gap, var(--ba-docked-gap));
}

.botsauto-docked-bar .ba-docked-perc,
.botsauto-docked-bar .botsauto-docked-progress {
    font-family: inherit;
    font-size: var(--ba-docked-progress-font-size, var(--ba-docked-progress-size, 22px)) !important;
    font-weight: var(--ba-docked-progress-font-weight, var(--ba-docked-progress-weight, 600));
    letter-spacing: var(--ba-docked-progress-letter-spacing, var(--ba-docked-progress-letter, 0));
    line-height: var(--ba-docked-progress-line-height, var(--ba-docked-progress-line, 1.2));
    color: inherit;
    margin: var(--botsauto-docked-perc-margin, 0 12px 0 8px);
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.botsauto-docked-bar .ba-row--top .ba-btn {
    flex: 1 1 auto;
    min-width: 0;
}

.botsauto-docked-bar .ba-row--bottom .ba-btn {
    flex: 1 1 0;
    min-width: 0;
}

.botsauto-docked-bar .ba-btn {
    margin: var(--ba-docked-button-margin);
    width: auto;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-top: min(var(--ba-button-padding-top, 10px), clamp(8px, 1.3vw, 12px));
    padding-bottom: min(var(--ba-button-padding-bottom, 10px), clamp(8px, 1.3vw, 12px));
    padding-left: min(var(--ba-button-padding-left, 20px), clamp(12px, 1.6vw, 18px));
    padding-right: min(var(--ba-button-padding-right, 20px), clamp(12px, 1.6vw, 18px));
    background: var(--botsauto-docked-btn-bg, var(--ba-btn-bg, var(--ba-button-bg)));
    color: var(--botsauto-docked-btn-text, var(--ba-btn-text, var(--ba-button-text)));
    border-color: var(--botsauto-docked-btn-border, var(--ba-btn-border, var(--ba-button-border, var(--botsauto-docked-btn-bg, var(--ba-button-bg)))));
}

.botsauto-docked-bar .ba-btn:hover,
.botsauto-docked-bar .ba-btn:focus,
.botsauto-docked-bar .ba-btn:focus-visible {
    background: var(--botsauto-docked-btn-hover, var(--botsauto-docked-btn-bg, var(--ba-btn-hover, var(--ba-button-bg-hover))));
    color: var(--botsauto-docked-btn-hover-text, var(--botsauto-docked-btn-text, var(--ba-btn-hover-text, var(--ba-button-text-hover))));
    border-color: var(--botsauto-docked-btn-hover-border, var(--botsauto-docked-btn-border, var(--ba-btn-hover-border, var(--ba-button-border-hover, var(--botsauto-docked-btn-hover, var(--ba-button-bg-hover))))));
}

.botsauto-docked-bar .ba-btn:active {
    background: var(--botsauto-docked-btn-active, var(--botsauto-docked-btn-bg, var(--ba-btn-active, var(--ba-button-bg-active))));
    color: var(--botsauto-docked-btn-active-text, var(--botsauto-docked-btn-text, var(--ba-btn-active-text, var(--ba-button-text-active))));
    border-color: var(--botsauto-docked-btn-active-border, var(--botsauto-docked-btn-border, var(--ba-btn-active-border, var(--ba-button-border-active, var(--botsauto-docked-btn-active, var(--ba-button-bg-active))))));
}

@media print {
    .botsauto-docked-bar {
        display: none !important;
    }
}

/* Extra safety: ensure all elements respect padding and borders in width calculation */
.botsauto-checklist, .botsauto-checklist * {
    box-sizing: border-box;
}

/* Checklist Root Container */
.botsauto-checklist-root {
    background-color: var(--ba-container-bg);
    color: var(--ba-container-text);
}

/* Phase Headers */
.botsauto-phase {
    background-color: var(--ba-phase-bg);
    color: var(--ba-phase-text);
}

.botsauto-phase-title {
    color: var(--ba-phase-text);
}

details.botsauto-phase > summary.phase-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    list-style: none;
    position: relative;
}

details.botsauto-phase > summary.phase-toggle::-webkit-details-marker {
    display: none;
}

details.botsauto-phase > summary.phase-toggle::marker {
    content: "";
    font-size: 0;
}

/* Phase Descriptions */
.botsauto-phase-desc,
.botsauto-phase-description {
    background-color: var(--ba-phase-desc-bg);
    color: var(--ba-phase-desc-text);
    border-color: var(--ba-phase-desc-border);
}

/* Questions */
.botsauto-question {
    background-color: var(--ba-question-bg);
    color: var(--ba-question-text);
    border-color: var(--ba-question-border);
}

.botsauto-question-label {
    color: var(--ba-question-text);
}

.botsauto-question-group.is-filter-hidden,
.botsauto-phase.is-filter-hidden {
    display: none !important;
}

.entry-content .botsauto-checklist-wrapper .botsauto-section-title {
    background: transparent;
    color: var(--botsauto-accent-color);
}

/* BOTSAUTO STATE MACHINE - Unified CSS selectors for item states */

/* Base item styling with state-scoped text color variable */
.botsauto-item {
    color: var(--ba-itm-text, var(--ba-item-text, inherit));
}

.botsauto-item .botsauto-item-text-inner {
    color: var(--ba-itm-text, var(--ba-item-text, inherit));
}

/* Active (baseline) state - normal items */
.botsauto-item.is-active {
    background-color: var(--ba-item-bg);
    color: var(--ba-item-text);
    border-color: var(--ba-item-border);
}

.botsauto-item.is-active .botsauto-item-text-inner {
    color: var(--ba-item-text);
}

/* Checked state - completed items */
.botsauto-item.is-checked {
    background-color: var(--ba-checked-bg);
    color: var(--ba-checked-text);
    border-color: var(--ba-checked-border);
}

.botsauto-item.is-checked .botsauto-item-text-inner {
    color: var(--ba-checked-text);
}

/* Optional strikethrough for checked items, if configured */
.botsauto-item.is-checked .botsauto-item-text {
    text-decoration-line: line-through;
    text-decoration-color: var(--ba-checked-decoration);
}

/* If a dedicated icon within the item should change color when checked */
.botsauto-item.is-checked .botsauto-item-icon {
    color: var(--ba-checked-icon);
    fill: var(--ba-checked-icon);
}

/* NVT (Not Applicable) state - uses state-scoped CSS variable */
.botsauto-item.is-nvt {
    background-color: var(--ba-nvt-bg);
    color: var(--ba-nvt-text);
    border-color: var(--ba-nvt-border);
    --ba-itm-text: var(--ba-nvt-text, #666666);
}

.botsauto-item.is-nvt .botsauto-item-text-inner {
    color: var(--ba-itm-text, var(--ba-nvt-text, #666666));
    text-decoration: var(--ba-nvt-decoration);
}

/* Legacy NVT class support - maps to new state-scoped approach */
.botsauto-item.nvt {
    background-color: var(--ba-nvt-bg);
    color: var(--ba-nvt-text);
    border-color: var(--ba-nvt-border);
    --ba-itm-text: var(--ba-nvt-text, #666666);
}

.botsauto-item.nvt .botsauto-item-text-inner {
    color: var(--ba-itm-text, var(--ba-nvt-text, #666666));
    text-decoration: var(--ba-nvt-decoration);
}

/* NVT state precedence - NVT must override checked and normal states */
/* State-scoped approach - no !important needed */
.botsauto-item.nvt .botsauto-item-text,
.botsauto-item.nvt .botsauto-item-text-inner {
    color: var(--ba-itm-text, var(--ba-nvt-text, #666666));
}

.botsauto-item.nvt.is-checked .botsauto-item-text-inner,
.botsauto-item.nvt .botsauto-item-text-inner {
    color: var(--ba-itm-text, var(--ba-nvt-text, #666666));
    text-decoration: var(--ba-nvt-decoration);
}

/* Ensure NVT text color overrides any checked state styling */
.botsauto-item.nvt input:checked + label .botsauto-item-text,
.botsauto-item.nvt input:checked + label .botsauto-item-text-inner,
.botsauto-item.nvt.is-checked .botsauto-item-text-inner {
    color: var(--ba-itm-text, var(--ba-nvt-text, #666666));
    text-decoration: var(--ba-nvt-decoration);
}

/* NVT badge styling - canonical selector */
.botsauto-item.nvt .botsauto-nvt-label {
    display: inline-flex !important;
    align-items: center;
    white-space: normal;
    margin-left: 0.5rem;
    padding: 2px 6px;
    font-size: 0.75em;
    font-weight: 600;
    border-radius: 3px;
    /* Badge styling will be applied via inline styles from admin settings */
}

/* Backward compatibility - support legacy .nvt-badge during transition */
.botsauto-item.nvt .nvt-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 6px;
    font-size: 0.75em;
    font-weight: 600;
    border-radius: 3px;
    white-space: normal;
    /* Badge styling will be applied via inline styles from admin settings */
}

/* Ensure badge can wrap with content when needed */
.botsauto-item.nvt .botsauto-answer-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .5em;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

/* NVT-specific text wrapping - allow text to wrap naturally */
.botsauto-item.nvt .botsauto-item-text,
.botsauto-item.nvt .botsauto-item-text-inner {
    flex: 1 1 0%;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Text container display is now controlled by flex layout */

/* Answer row layout - enforce horizontal alignment */
.botsauto-answer-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .5em;
    width: 100%;
    overflow: visible;
}

.botsauto-answer-row .botsauto-checkbox { 
    order: 0; 
}
.botsauto-answer-row .botsauto-item-text { 
    order: 2; 
    flex: 1 1 auto; 
    min-width: 0; 
}
.botsauto-answer-row .botsauto-item-info { 
    order: 3;   /* tooltip icon default right */
    flex: 0 0 auto; 
}
.botsauto-answer-row .botsauto-nvt-label { 
    order: 4;   /* NVT stays right */
    flex: 0 0 auto; 
}
.botsauto-answer-row .botsauto-note-btn { 
    order: 5;   /* Note stays right */
    flex: 0 0 auto; 
}

/* Only move the tooltip icon when its own class says so */
.botsauto-answer-row .botsauto-item-info.align-left {
    order: 1;               /* immediately after the checkbox */
    margin-right: .5rem;    /* spacing before the label */
    margin-left: 0;
}

/* Above alignment - position tooltip icon above the item text */
.botsauto-answer-row .botsauto-item-info.align-above {
    order: 0;               /* before everything else */
    width: 100%;            /* full width */
    margin-bottom: .5rem;   /* spacing below the icon */
    justify-content: center; /* center the icon */
}

/* Grid layout for "Above" alignment using :has() selector */
/* This overrides the flex layout when align-above is active */
.botsauto-answer-row:has(.botsauto-item-info.align-above) {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "checkbox icon"
        "checkbox text";
    align-items: start;
    gap: .5em;
}

.botsauto-answer-row:has(.botsauto-item-info.align-above) .botsauto-checkbox {
    grid-area: checkbox;
}

.botsauto-answer-row:has(.botsauto-item-info.align-above) .botsauto-item-info {
    grid-area: icon;
    justify-self: start;
    margin: 0 0 .25rem 0;
}

.botsauto-answer-row:has(.botsauto-item-info.align-above) .botsauto-item-text {
    grid-area: text;
}

/* Keep focus ring and hit area unchanged */
.botsauto-item-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;         /* ensure a good tap target */
    min-height: 32px;
    margin: 0 !important;
    padding: 0 !important;
}

.botsauto-item-info i,
.botsauto-item-info svg {
    color: inherit;
    fill: currentColor;
}

/* Text elements - allow shrinking and wrapping */
.botsauto-item-text,
.botsauto-item-text-inner {
    flex: 1 1 0%;
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Icons and controls - fixed size, no growing/shrinking */
.botsauto-checkbox,
.botsauto-note-icon,
.botsauto-nvt-icon,
.botsauto-nvt-label,
.botsauto-note-btn,
.botsauto-nvt-toggle {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    max-width: 100%;
    white-space: normal;
}

/* NVT label specific styling */
.botsauto-item .botsauto-nvt-label {
    max-width: 100%;
    white-space: normal;
    padding: 0 8px;
}

/* Safety caps - prevent any fixed widths from causing overflow */
.botsauto-item {
    position: relative;
    z-index: 0;
    max-width: 100%;
    overflow: visible;
    /* Margin and padding will be applied via admin settings */
}

/* Defensive: hide NVT badge if somehow left behind in non-NVT states */
.botsauto-item:not(.nvt) .nvt-badge,
.botsauto-item:not(.nvt) .botsauto-nvt-label {
    display: none !important;
}

/* Ensure badge is visible when in NVT state, regardless of text content */
.botsauto-item.nvt .botsauto-nvt-label {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* NVT text styling - state-scoped approach */
/* These rules ensure NVT text styling works reliably across all plugin contexts */
.botsauto-checklist .botsauto-item.nvt .botsauto-item-text-inner,
.botsauto-checklist .botsauto-item.nvt .botsauto-item-text-inner {
    color: var(--ba-itm-text, var(--ba-nvt-text, #666666));
    text-decoration: var(--ba-nvt-decoration);
}

.botsauto-wrapper .botsauto-item.nvt .botsauto-item-text-inner,
.botsauto-wrapper .botsauto-item.nvt .botsauto-item-text-inner {
    color: var(--ba-itm-text, var(--ba-nvt-text, #666666));
    text-decoration: var(--ba-nvt-decoration);
}

.botsauto-container .botsauto-item.nvt .botsauto-item-text-inner,
.botsauto-container .botsauto-item.nvt .botsauto-item-text-inner {
    color: var(--ba-itm-text, var(--ba-nvt-text, #666666));
    text-decoration: var(--ba-nvt-decoration);
}

/* Backward compatibility - support legacy .nvt class during transition */
.botsauto-item.nvt {
    background-color: var(--ba-nvt-bg);
    color: var(--ba-nvt-text);
    border-color: var(--ba-nvt-border);
}

.botsauto-item.nvt .botsauto-item-text-inner {
    color: var(--ba-itm-text, var(--ba-nvt-text, #666666));
    text-decoration: var(--ba-nvt-decoration);
}

/* Legacy NVT state precedence - NVT must override checked and normal states */
/* State-scoped approach - no !important needed */
.botsauto-item.nvt.is-checked .botsauto-item-text-inner,
.botsauto-item.nvt .botsauto-item-text-inner {
    color: var(--ba-itm-text, var(--ba-nvt-text, #666666));
    text-decoration: var(--ba-nvt-decoration);
}

/* Ensure legacy NVT text color overrides any checked state styling */
.botsauto-item.nvt input:checked + label .botsauto-item-text-inner,
.botsauto-item.nvt.is-checked .botsauto-item-text-inner {
    color: var(--ba-itm-text, var(--ba-nvt-text, #666666));
    text-decoration: var(--ba-nvt-decoration);
}

.botsauto-item.nvt .botsauto-nvt-label,
.botsauto-item.nvt .nvt-badge {
    display: inline-flex !important;
}

.botsauto-item:not(.nvt) .botsauto-nvt-label,
.botsauto-item:not(.nvt) .nvt-badge {
    display: none !important;
}

/* Notes */
.botsauto-note {
    background-color: var(--ba-note-bg);
    color: var(--ba-note-text);
    border-color: var(--ba-note-border);
}

/* Info Popup/Modal */
.botsauto-info-content {
    background-color: var(--ba-modal-bg);
    color: var(--ba-modal-text);
    border-color: var(--ba-modal-border);
}

.botsauto-info-content p {
    color: var(--ba-modal-text);
}

.botsauto-info-content a {
    color: var(--ba-link);
}

.botsauto-info-content a:hover {
    color: var(--ba-link-hover);
}

/* Toggle Buttons (Uitklapknoppen) - using strict precedence */
.botsauto-toggle-buttons button {
    color: var(--ba-toggle-text);
    background-color: var(--ba-toggle-bg);
    border-color: var(--ba-toggle-border);
}

.botsauto-toggle-buttons button .botsauto-toggle-icon {
    color: var(--ba-toggle-icon);
    fill: var(--ba-toggle-icon);
}

.botsauto-toggle-buttons button:hover {
    background-color: var(--ba-toggle-hover-bg);
}

.botsauto-toggle-buttons button:focus-visible {
    outline: 2px solid var(--ba-toggle-focus);
    outline-offset: 2px;
}

/* Toggle open state - prefer ARIA, fallback to class */
.botsauto-toggle-buttons button[aria-expanded="true"],
.botsauto-toggle-buttons button.is-open,
.botsauto-toggle-buttons button.active {
    color: var(--ba-toggle-open-text);
    background-color: var(--ba-toggle-open-bg);
    border-color: var(--ba-toggle-open-border);
}

.botsauto-toggle-buttons button[aria-expanded="true"] .botsauto-toggle-icon,
.botsauto-toggle-buttons button.is-open .botsauto-toggle-icon,
.botsauto-toggle-buttons button.active .botsauto-toggle-icon {
    color: var(--ba-toggle-open-icon);
    fill: var(--ba-toggle-open-icon);
}

/* Progress Bar Structure with margins and shadows support */
.botsauto-progress {
  display: block;            /* ensures vertical margins take effect */
  width: 100%;
  position: relative;
  overflow: hidden;
  --ba-pg-height-effective: var(--ba-pg-h, var(--ba-checklist-progress-height, 14px));
  --ba-pg-thumb-size-effective: var(--ba-pg-thumb-size, 52px);
  /* Vars ? visible defaults */
  height: var(--ba-pg-height-effective);
  background: var(--ba-pg-bg, var(--ba-checklist-progress-track, color-mix(in srgb, #D14292 8%, #eeeeee)));
  border: var(--ba-pg-bwid, 0) solid var(--ba-pg-bcol, var(--ba-checklist-progress-border, color-mix(in srgb, #006633 35%, transparent)));
  border-radius: var(--ba-pg-brad, var(--ba-checklist-progress-radius, 6px));
  
  /* Margins - use CSS vars if set, otherwise default breathing room */
  margin-top: var(--ba-pg-mt, 0);
  margin-right: var(--ba-pg-mr, 0);
  margin-bottom: var(--ba-pg-mb, 0);
  margin-left: var(--ba-pg-ml, 0);
  
  /* Track shadow (applied to wrapper/track) */
  box-shadow: var(--ba-pg-shadow-track, none);
}

/* Hide progress bar when protected container is rendered */
.botsauto-protected-container .botsauto-progress {
  display: none !important;
}

@supports selector(:has(*)) {
  body:has(.botsauto-protected-container) .botsauto-progress {
    display: none !important;
  }
}

/* Higher specificity rules to override theme resets that set margin: 0 */
.botsauto-checklist .botsauto-progress,
.botsauto-wrapper .botsauto-progress,
.botsauto-container .botsauto-progress,
[id^="botsauto-wrapper-"] .botsauto-progress {
  margin-top: var(--ba-pg-mt, 0);
  margin-right: var(--ba-pg-mr, 0);
  margin-bottom: var(--ba-pg-mb, 0);
  margin-left: var(--ba-pg-ml, 0);
}

/* ==============================================
   PROGRESS BAR MARGIN OVERRIDE - Theme margin:auto !important fix
   ============================================== */
/* 
 * Theme rule: .entry-content div, .entry-content table {
 *   margin-top: auto !important;
 *   margin-bottom: auto !important;
 * }
 * 
 * This scoped override defeats the theme rule with higher specificity
 * and ensures configured Top/Bottom margins apply reliably.
 */

/* Scoped override: Target progress bar wrapper within checklist root */
/* Higher specificity: .entry-content .botsauto-checklist-root .botsauto-progress-wrapper */
.entry-content .botsauto-checklist-root .botsauto-progress-wrapper,
.entry-content .botsauto-checklist-root .ba-progress,
.entry-content .botsauto-checklist .botsauto-progress-wrapper,
.entry-content .botsauto-checklist .ba-progress,
.botsauto-checklist-root .botsauto-progress-wrapper,
.botsauto-checklist-root .ba-progress,
.botsauto-checklist .botsauto-progress-wrapper,
.botsauto-checklist .ba-progress {
  /* Override theme's margin:auto !important with configured values */
  margin-top: var(--ba-pg-mt, 0) !important;
  margin-bottom: var(--ba-pg-mb, 0) !important;
  /* Preserve horizontal margins */
  margin-right: var(--ba-pg-mr, 0);
  margin-left: var(--ba-pg-ml, 0);
  /* Prevent margin collapse - use flow-root formatting context */
  display: flow-root;
}

/* Ensure progress bar itself respects wrapper margins */
.entry-content .botsauto-checklist-root .botsauto-progress-wrapper .botsauto-progress,
.entry-content .botsauto-checklist-root .ba-progress .botsauto-progress,
.entry-content .botsauto-checklist .botsauto-progress-wrapper .botsauto-progress,
.entry-content .botsauto-checklist .ba-progress .botsauto-progress,
.botsauto-checklist-root .botsauto-progress-wrapper .botsauto-progress,
.botsauto-checklist-root .ba-progress .botsauto-progress,
.botsauto-checklist .botsauto-progress-wrapper .botsauto-progress,
.botsauto-checklist .ba-progress .botsauto-progress {
  /* When wrapper has margins, progress bar should not add its own */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-right: 0;
  margin-left: 0;
}

/* Progress Bar Wrapper (Plan B approach) */
.botsauto-progress-wrapper { 
  display: flow-root;         /* prevents margin-collapsing */
  width: 100%;
  position: relative;
}
/*
 * Do not use margin for progress-info spacing.
 * Themes may override div margins with !important.
 * Use padding as the reliable visual spacing mechanism.
 */
.entry-content .botsauto-checklist-root .botsauto-intro-progress-wrap > .botsauto-progress-info,
.entry-content .botsauto-checklist .botsauto-intro-progress-wrap > .botsauto-progress-info,
.botsauto-checklist-root .botsauto-intro-progress-wrap > .botsauto-progress-info,
.botsauto-checklist .botsauto-intro-progress-wrap > .botsauto-progress-info {
  display: block !important;
  box-sizing: border-box !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  padding-top: var(--ba-pgi-pt, 0px) !important;
  padding-right: var(--ba-pgi-pr, 0px) !important;
  padding-bottom: var(--ba-pgi-pb, 0px) !important;
  padding-left: var(--ba-pgi-pl, 0px) !important;
  min-height: auto !important;
  overflow: visible !important;
}
.botsauto-progress-wrapper--slider {
  --ba-pg-wrapper-thumb-gap: 0px;
  padding-top: var(--ba-pg-wrapper-thumb-gap);
  padding-bottom: var(--ba-pg-wrapper-thumb-gap);
}
.botsauto-progress-wrapper--slider:has(.botsauto-progress[data-thumb-enabled="1"]) {
  --ba-pg-wrapper-thumb-gap: max(0px, calc((var(--ba-pg-thumb-size-effective, var(--ba-pg-thumb-size, 52px)) - var(--ba-pg-height-effective, var(--ba-pg-h, 14px))) / 2));
}

/* Plan B: Wrapper margins take precedence over progress bar margins */
.botsauto-progress-wrapper[style*="margin"] .botsauto-progress {
  margin-top: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}

/* Per-instance CSS fallback (Plan B) - highest specificity */
[id^="botsauto-ba-pg-"] .botsauto-progress {
  /* Margins will be set via per-instance CSS */
}
.botsauto-progress__fill {
  position: absolute; top: 0; left: 0;
  height: 100%;
  background: var(--ba-pg-fill, var(--ba-checklist-progress-fill, #008AD6));
  transition: width .35s ease, background-color .25s ease, box-shadow .25s ease;
  border-radius: inherit;
  
  /* Fill shadow (applied to filled portion) */
  box-shadow: var(--ba-pg-shadow-fill, none);
}
.botsauto-progress__thumb {
  display: none;
}
.botsauto-progress-wrapper--slider .botsauto-progress[data-thumb-enabled="1"] {
  overflow: visible;
}
.botsauto-progress-wrapper--slider .botsauto-progress__thumb {
  position: absolute;
  top: 50%;
  left: clamp(calc(var(--ba-pg-thumb-size-effective, var(--ba-pg-thumb-size, 52px)) / 2), var(--ba-pg-percent, 0%), calc(100% - (var(--ba-pg-thumb-size-effective, var(--ba-pg-thumb-size, 52px)) / 2)));
  width: var(--ba-pg-thumb-size-effective, var(--ba-pg-thumb-size, 52px));
  height: var(--ba-pg-thumb-size-effective, var(--ba-pg-thumb-size, 52px));
  transform: translate(-50%, -50%);
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.75), rgba(255,255,255,0) 34%),
    linear-gradient(135deg, var(--ba-pg-fill, #008AD6), #00306a);
  color: var(--ba-pg-thumb-text, #ffffff);
  border: var(--ba-pg-thumb-border-width, 4px) solid var(--ba-pg-thumb-border-color, #ffffff);
  box-shadow: var(--ba-pg-thumb-shadow-css, 0 10px 24px rgba(0,48,106,.28));
  font-family: inherit;
  font-size: clamp(12px, calc(var(--ba-pg-thumb-size-effective, var(--ba-pg-thumb-size, 52px)) * .28), 16px);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  transition: left .35s ease, background-color .25s ease, box-shadow .25s ease;
}
.botsauto-progress-wrapper--slider .botsauto-progress[data-thumb-shadow="none"] .botsauto-progress__thumb {
  box-shadow: none;
}
.botsauto-progress__thumb-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
  white-space: nowrap;
  font: inherit;
  color: inherit;
}
.botsauto-progress-wrapper--slider .botsauto-progress[data-thumb-enabled="1"] .botsauto-progress__thumb {
  display: flex;
}
.botsauto-progress-wrapper--classic .botsauto-progress__thumb,
.botsauto-progress-wrapper--thumb-disabled .botsauto-progress__thumb {
  display: none !important;
}
.botsauto-progress__label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ba-pg-text, var(--ba-checklist-progress-text, inherit));
  font: inherit; pointer-events: none;
}
.botsauto-progress-wrapper--slider .botsauto-progress[data-label-visible="0"] .botsauto-progress__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.botsauto-progress-wrapper--classic .botsauto-progress__label,
.botsauto-progress-wrapper--slider .botsauto-progress[data-label-visible="1"] .botsauto-progress__label {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  display: flex;
}

@media (max-width: 640px) {
  .botsauto-progress-wrapper--slider .botsauto-progress {
    --ba-pg-height-effective: var(--ba-pg-h, 12px);
    --ba-pg-thumb-size-effective: var(--ba-pg-thumb-size, 42px);
  }

  .botsauto-progress-wrapper--slider .botsauto-progress__thumb {
    font-size: clamp(11px, calc(var(--ba-pg-thumb-size-effective, var(--ba-pg-thumb-size, 42px)) * .26), 14px);
  }
}

/* Intro/Outro */
.botsauto-intro {
    background-color: var(--ba-intro-bg);
    color: var(--ba-intro-text);
}

.botsauto-outro {
    background-color: var(--ba-outro-bg);
    color: var(--ba-outro-text);
}

/* Badges/Meta */
.botsauto-badge {
    background-color: var(--ba-badge-bg);
    color: var(--ba-badge-text);
}

/* Video Elements */
.botsauto-video-border {
    border-color: var(--ba-video-border);
}

.botsauto-video-shadow {
    box-shadow: 0 0 5px var(--ba-video-shadow);
}

.botsauto-video-play {
    color: var(--ba-video-play);
}

/* Audio Player Styles - Using Opmaak-based CSS variables */
/* All styling options from "Audio Player Styling" in Opmaak settings are applied here */
.botsauto-audio-player,
.entry-content .botsauto-checklist-root .botsauto-audio-player,
.entry-content .botsauto-checklist .botsauto-audio-player,
.botsauto-checklist-root .botsauto-audio-player,
.botsauto-checklist .botsauto-audio-player {
    /* Background and text colors from Opmaak settings */
    background-color: var(--ba-audio-bg, #f0f0f0);
    color: var(--ba-audio-text, #333333);
    
    /* Border: uses border-color from settings, width is 1px (configurable via CSS if needed) */
    border: 1px solid var(--ba-audio-border, #cccccc);
    
    /* Box shadow from Opmaak settings */
    box-shadow: 0 0 5px var(--ba-audio-shadow, rgba(0,0,0,0.1));
    
    /* Margins: fully configurable from Opmaak settings, normalized with units */
    margin-top: var(--ba-audio-margin-top, 0);
    margin-right: var(--ba-audio-margin-right, 0);
    margin-bottom: var(--ba-audio-margin-bottom, 0);
    margin-left: var(--ba-audio-margin-left, 0);
    
    /* Padding: fully configurable from Opmaak settings, normalized with units */
    padding-top: var(--ba-audio-padding-top, 8px);
    padding-right: var(--ba-audio-padding-right, 10px);
    padding-bottom: var(--ba-audio-padding-bottom, 8px);
    padding-left: var(--ba-audio-padding-left, 10px);
    
    /* Layout */
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    gap: var(--ba-audio-gap, 0.5rem); /* Space between label and audio element */
}

/* Label above the audio player */
.botsauto-audio-label {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--ba-audio-text, #333333);
    margin: 0; /* Gap property on parent handles spacing */
    padding: 0; /* user can override in the future */
    display: block;
}

/* HTML5 audio element - Fallback styling for when Plyr.js is not available */
/* NOTE: Native audio controls have very limited styling support. For full styling control, */
/* Plyr.js is used (see botsauto-plyr.css). These styles are kept as fallback only. */
.botsauto-audio-player audio {
    width: 100%;
    outline: none;
    background-color: var(--ba-audio-control-bg, #ffffff);
    margin: 0; /* Let parent container handle spacing */
}

/* Controls – Chrome/Edge/Safari (WebKit) - FALLBACK ONLY */
/* These pseudo-selectors have limited browser support and inconsistent styling. */
/* Plyr.js provides full styling control. These are kept for JS-disabled fallback. */
.botsauto-audio-player audio::-webkit-media-controls-panel {
    background-color: var(--ba-audio-control-bg, #ffffff);
}

.botsauto-audio-player audio::-webkit-media-controls-timeline {
    background-color: var(--ba-audio-control-track, #007cba);
}

.botsauto-audio-player audio::-webkit-media-controls-current-time-display,
.botsauto-audio-player audio::-webkit-media-controls-time-remaining-display {
    color: var(--ba-audio-text, #333333);
}

.botsauto-audio-player audio::-webkit-media-controls-play-button {
    background-color: var(--ba-audio-control-fill, #007cba);
    border-radius: 50%;
}

.botsauto-audio-player audio::-webkit-media-controls-timeline-container {
    background-color: var(--ba-audio-control-track, #007cba);
}

/* Note: The filled portion of the timeline (progress) is difficult to style consistently
   across browsers. For full control, Plyr.js is recommended (see botsauto-plyr.css).
   The accent/fill color (audio_control_fill) is primarily used for play button and
   other accent elements where browser support allows. */

.botsauto-audio-player audio::-webkit-media-controls-volume-slider {
    background-color: var(--ba-audio-control-track, #007cba);
}

.botsauto-audio-player audio::-webkit-media-controls-mute-button {
    background-color: var(--ba-audio-control-fill, #007cba);
}

/* Firefox - FALLBACK ONLY */
.botsauto-audio-player audio::-moz-media-controls {
    background-color: var(--ba-audio-control-bg, #ffffff);
}

/* Focus States */
.botsauto-focus {
    background-color: var(--ba-focus-bg);
    color: var(--ba-focus-text);
    outline: 2px solid var(--ba-focus-ring);
}

/* Hover States */
.botsauto-hover:hover {
    background-color: var(--ba-hover-bg);
    color: var(--ba-hover-text);
}
/* Unified button reset for anchors, buttons, inputs, and labels */
.botsauto-btn,
a.botsauto-btn,
button.botsauto-btn,
input[type="button"].botsauto-btn,
input[type="submit"].botsauto-btn,
input[type="reset"].botsauto-btn,
label.botsauto-btn {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ba-button-gap, 0.5em);
    background: var(--ba-btn-bg, var(--ba-button-bg));
    color: var(--ba-btn-text, var(--ba-button-text));
    border: 1px solid var(--ba-btn-border, var(--ba-button-border, var(--ba-btn-bg, var(--ba-button-bg))));
    border-radius: var(--ba-button-border-radius, 4px);
    padding: var(--ba-button-padding-top, 10px) var(--ba-button-padding-right, 20px) var(--ba-button-padding-bottom, 10px) var(--ba-button-padding-left, 20px);
    font-family: inherit;
    font-size: var(--ba-button-font-size, inherit);
    font-weight: var(--ba-button-font-weight, 600);
    line-height: var(--ba-button-line-height, 1.2);
    text-decoration: none;
    cursor: pointer;
    margin-top: var(--ba-button-margin-top, 10px);
    margin-right: var(--ba-button-margin-right, 10px);
    margin-bottom: var(--ba-button-margin-bottom, 10px);
    margin-left: var(--ba-button-margin-left, 10px);
    box-sizing: border-box;
    vertical-align: middle;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.botsauto-btn[hidden],
.botsauto-phase-complete-btn[hidden],
.botsauto-phase-reconfirm-btn[hidden],
.botsauto-phase-reopen-btn[hidden] {
    display: none !important;
}

/* Maintain visited state parity for anchors */
a.botsauto-btn:visited {
    color: var(--ba-btn-text, var(--ba-button-text));
    background: var(--ba-btn-bg, var(--ba-button-bg));
}

.botsauto-btn:hover,
a.botsauto-btn:hover,
button.botsauto-btn:hover,
input[type="button"].botsauto-btn:hover,
input[type="submit"].botsauto-btn:hover,
input[type="reset"].botsauto-btn:hover,
label.botsauto-btn:hover {
    background: var(--ba-btn-hover, var(--ba-button-bg-hover));
    color: var(--ba-btn-hover-text, var(--ba-button-text-hover));
    border-color: var(--ba-btn-hover-border, var(--ba-button-border-hover, var(--ba-btn-hover, var(--ba-button-bg-hover))));
    text-decoration: none;
}

.botsauto-btn:focus,
a.botsauto-btn:focus,
button.botsauto-btn:focus,
input[type="button"].botsauto-btn:focus,
input[type="submit"].botsauto-btn:focus,
input[type="reset"].botsauto-btn:focus,
label.botsauto-btn:focus,
.botsauto-btn:focus-visible,
a.botsauto-btn:focus-visible,
button.botsauto-btn:focus-visible,
input[type="button"].botsauto-btn:focus-visible,
input[type="submit"].botsauto-btn:focus-visible,
input[type="reset"].botsauto-btn:focus-visible,
label.botsauto-btn:focus-visible {
    outline: 2px solid var(--ba-btn-focus, var(--ba-focus-ring));
    outline-offset: 2px;
}

.botsauto-btn:active,
a.botsauto-btn:active,
button.botsauto-btn:active,
input[type="button"].botsauto-btn:active,
input[type="submit"].botsauto-btn:active,
input[type="reset"].botsauto-btn:active,
label.botsauto-btn:active {
    background: var(--ba-btn-active, var(--ba-button-bg-active));
    color: var(--ba-btn-active-text, var(--ba-button-text-active));
    border-color: var(--ba-btn-active-border, var(--ba-button-border-active, var(--ba-btn-active, var(--ba-button-bg-active))));
    transform: translateY(1px);
    text-decoration: none;
}

/* Legacy primary button alias – deprecated but kept for backward compatibility */
.botsauto-btn-primary,
a.botsauto-btn-primary,
button.botsauto-btn-primary,
input[type="button"].botsauto-btn-primary,
input[type="submit"].botsauto-btn-primary,
input[type="reset"].botsauto-btn-primary,
label.botsauto-btn-primary {
    /* Intentionally empty: use .botsauto-btn for styling */
}

.botsauto-btn-secondary {
    background: var(--ba-btn-bg, var(--ba-button-secondary-bg));
    color: var(--ba-btn-text, var(--ba-button-secondary-text));
    border-color: var(--ba-btn-border, var(--ba-button-secondary-bg));
}

.botsauto-btn-secondary:hover {
    background: var(--ba-btn-hover, var(--ba-button-bg-hover));
    color: var(--ba-btn-hover-text, var(--ba-button-text-hover));
}

.botsauto-btn-secondary:focus,
.botsauto-btn-secondary:focus-visible {
    outline: 2px solid var(--ba-focus-ring);
    outline-offset: 2px;
}

.botsauto-btn-secondary:active {
    background: var(--ba-btn-active, var(--ba-button-bg-active));
    color: var(--ba-btn-active-text, var(--ba-button-text-active));
}

/* Disabled state for all button types */
.botsauto-btn[disabled],
.botsauto-btn.is-disabled,
a.botsauto-btn[disabled],
button.botsauto-btn[disabled],
input[type="button"].botsauto-btn[disabled],
input[type="submit"].botsauto-btn[disabled],
input[type="reset"].botsauto-btn[disabled],
label.botsauto-btn[disabled] {
    opacity: var(--ba-button-disabled-opacity, 0.6);
    cursor: not-allowed;
    pointer-events: none;
}

.botsauto-btn[disabled]:focus,
.botsauto-btn.is-disabled:focus,
a.botsauto-btn[disabled]:focus,
button.botsauto-btn[disabled]:focus,
input[type="button"].botsauto-btn[disabled]:focus,
input[type="submit"].botsauto-btn[disabled]:focus,
input[type="reset"].botsauto-btn[disabled]:focus,
label.botsauto-btn[disabled]:focus {
    outline: none;
    box-shadow: none;
}

.botsauto-heading {
    color: var(--ba-heading);
}

.botsauto-link {
    color: var(--ba-link);
}

.botsauto-link:hover {
    color: var(--ba-link-hover);
    opacity: 0.8;
}

.botsauto-success {
    color: var(--ba-success);
}

.botsauto-text {
    color: var(--ba-text);
}

.botsauto-bg {
    background-color: var(--ba-surface);
}

.botsauto-bg-muted {
    background-color: var(--ba-surface-soft);
}

/* Old progress bar CSS removed - now using inline styles for admin color settings */

/* Form elements - unified styling for inputs and selects */
.botsauto-input,
.botsauto-select {
    border: 1px solid var(--ba-input-border);
    border-radius: 4px;
    padding: 8px 12px;
    color: var(--ba-input-text);
    background: var(--ba-input-bg);
    width: 100%;
    box-sizing: border-box;
    appearance: none; /* consistent rendering */
}

.botsauto-input:focus,
.botsauto-select:focus {
    border-color: var(--ba-input-focus-border);
    outline: none;
    box-shadow: 0 0 0 2px var(--ba-focus-shadow);
}

.botsauto-input::placeholder {
    color: var(--ba-input-placeholder);
}

/* Transcript content scrollbar styling (scoped) */
.botsauto-transcript-content {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ba-btn-bg) var(--ba-input-border);
}

.botsauto-transcript-content::-webkit-scrollbar {
    width: 10px;
}

.botsauto-transcript-content::-webkit-scrollbar-track {
    background: var(--ba-input-border);
    border-radius: 10px;
}

.botsauto-transcript-content::-webkit-scrollbar-thumb {
    background-color: var(--ba-btn-bg);
    border-radius: 10px;
    border: 2px solid var(--ba-input-border);
}

.botsauto-transcript-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--botsauto-accent-color);
}

/* Ensure URL inputs with .botsauto-input class look identical to text inputs */
.botsauto-input[type="url"] {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Remove browser-specific invalid styling for URL inputs */
.botsauto-input[type="url"]:invalid {
    box-shadow: none;
    outline: none;
    border-color: var(--ba-input-border);
}

/* Ensure URL inputs maintain consistent styling even when invalid */
.botsauto-input[type="url"]:invalid:not(:focus) {
    border-color: var(--ba-input-border);
    background: var(--ba-input-bg);
}

/* Match focus state for URL inputs */
.botsauto-input[type="url"]:focus {
    border-color: var(--ba-input-focus-border);
    outline: none;
    box-shadow: 0 0 0 2px var(--ba-focus-shadow);
}

/* Bare select styling - only when admin chooses "bare" */
.botsauto-select--bare {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0;
}

.botsauto-select--bare:focus {
    outline: 2px solid currentColor;   /* keep accessible focus */
    outline-offset: 2px;
}

/* Checklist items */
.botsauto-checklist-item {
    border-left: 3px solid var(--ba-item-border);
    padding: 10px;
    margin-bottom: 10px;
    background: var(--ba-item-bg);
    color: var(--ba-item-text);
}

/* Phase title styling - ensure all phase titles are bold */
.botsauto-phase-title {
    font-weight: bold !important;
    color: var(--ba-phase-text);
    background: var(--ba-phase-bg);
}


/* Alerts and notices */
.botsauto-alert {
    padding: 12px 16px;
    border-radius: 4px;
    margin: 10px 0;
}

.botsauto-alert-success {
    background-color: var(--ba-surface-soft);
    border: 1px solid var(--ba-success);
    color: var(--ba-success);
}

.botsauto-alert-info {
    background-color: var(--ba-surface-soft);
    border: 1px solid var(--ba-link);
    color: var(--ba-link);
}

.botsauto-alert-warning {
    background-color: var(--ba-surface-soft);
    border: 1px solid var(--ba-warning);
    color: var(--ba-warning);
}

/* For buttons/badges/headings when accessibility_mode = allow_large */
.botsauto-a11y-large {
    font-size: 18.67px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}
/* Alternative: font-size:14px; font-weight:700; */

/* NVT Label Styling Isolation - CRITICAL: Background color and border ONLY on label */
/* 
 * REGRESSION PREVENTION: This rule ensures NVT label background colors are isolated
 * and never leak to other elements. The background color is applied via inline styles
 * from admin settings to ensure complete isolation.
 */
.botsauto-nvt-label {
    display: inline-flex !important;
    align-items: center;
    /* Background color and border styling will be applied via inline styles from admin settings */
}

/* MANDATORY: High-specificity CSS rules to prevent NVT label background color leakage */
/* These rules ONLY target elements that should NOT have background colors to prevent leakage */
/* CRITICAL: These rules must NOT block legitimate item background colors from admin settings */
/* 
 * FIXED REGRESSION: Previously, overly broad rules were blocking ALL background colors.
 * Now we only target specific text elements to prevent NVT label background leakage
 * while preserving admin-configured item background colors.
 */

/* Target only the text elements within NVT items to prevent label background leakage */
/* This prevents NVT label background from appearing on item text content */
.botsauto-item.botsauto-nvt .botsauto-item-text,
.botsauto-item.botsauto-nvt .botsauto-item-text-inner {
    background-color: transparent !important;
}

/* Target only the answer row text elements to prevent label background leakage */
/* This prevents NVT label background from appearing on answer row text content */
.botsauto-answer-row .botsauto-item-text,
.botsauto-answer-row .botsauto-item-text-inner {
    background-color: transparent !important;
}

/* CRITICAL: Override any existing selectors that could apply background colors to text elements */
/* This prevents NVT label background from leaking to text content */
/* NOTE: This does NOT affect container elements that may have legitimate admin background colors */
.botsauto-nvt-label *,
.botsauto-item-text *,
.botsauto-item-text-inner * {
    background-color: transparent !important;
}

/* Ensure NVT label background color is ONLY applied to the label itself */
.botsauto-nvt-label {
    /* Background color will be applied via inline styles ONLY */
    /* This ensures complete isolation from parent elements */
    display: inline-flex !important;
    align-items: center;
}

/* Mobile fallback - allow wrap only on very small screens */
@media (max-width: 400px) {
    .botsauto-answer-row { 
        flex-wrap: wrap; 
    }
}

/* Mobile Label Text Display - Show mobile text on small screens */
.botsauto-nvt-label .label--mobile { 
    display: none; 
}

@media (max-width: 576px) {
    .botsauto-nvt-label .label--desktop { 
        display: none; 
    }
    .botsauto-nvt-label .label--mobile { 
        display: inline; 
    }
}

/* ==============================================
   NOTE ATTACHMENTS INDICATOR - PAPERCLIP ICON
   ============================================== */

/* Legacy paperclip indicators removed - now using single .ba-attach-indicator element */
/* Updated: 2025-01-27 - Unified to single FA indicator, removed ::after CSS rules */

/* BOTSAUTO RESPONSIVE VIDEO TOOLTIP STYLES - VIEWPORT-BASED SCALING */
/* NOTE: Old .botsauto-item-tooltip styles removed - now using .botsauto-itp modal classes */

/* Spacing for the media block inside the tooltip */
.botsauto-tip-media { 
    margin-top: .75rem; 
}

/* Aspect-ratio wrapper so the iframe fills and scales */
.botsauto-aspect {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: .5rem;
    overflow: hidden;                   /* clip overflow */
}

.botsauto-aspect iframe,
.botsauto-aspect video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ==============================================
   ITEM TOOLTIP POPUP - Admin Configurable Styling
   ============================================== */

/* Main container - hidden by default, positioned for body append */
.botsauto-itp {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    grid: place-items center;
    pointer-events: none;
    padding: 20px;
    box-sizing: border-box;
}

/* Show when open - MUST use position: fixed; inset: 0; display: grid; place-items: center; z-index: 9999; */
.botsauto-itp[data-open] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    pointer-events: auto;
}

/* Overlay - full viewport background with admin-configured color */
.botsauto-itp__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--itp-overlay-bg, rgba(0,0,0,0.35));
    pointer-events: auto;
}

/* Dialog - centered modal with proper CSS variables and responsive design */
.botsauto-itp__dialog {
    position: relative;
    z-index: 1;
    background: var(--itp-bg, #fff);
    color: var(--itp-text, #111);
    border: var(--itp-border-width, 1px) solid var(--itp-border-color, #e0e0e0);
    border-radius: var(--itp-radius, 12px);
    box-shadow: var(--itp-shadow, 0 10px 30px rgba(0,0,0,.2));
    max-width: min(var(--itp-max-w, 720px), 95vw);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    pointer-events: auto;
}

/* Header */
.botsauto-itp__header {
    background: var(--itp-header-bg, #f8f9fa);
    color: var(--itp-header-color, #00306a);
    padding: var(--itp-header-padding-top, 12px) var(--itp-header-padding-right, 16px) var(--itp-header-padding-bottom, 12px) var(--itp-header-padding-left, 16px);
    font-size: var(--itp-title-size, 18px);
    font-weight: var(--itp-title-weight, 600);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.botsauto-itp__title {
    flex: 1;
    margin: 0;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
}

.botsauto-itp__close {
    color: var(--itp-close-color, #6c757d);
    background: var(--itp-close-bg, transparent);
    font-size: var(--itp-close-size, 16px);
    border-radius: var(--itp-close-radius, 4px);
    padding: var(--itp-close-padding-top, 8px) var(--itp-close-padding-right, 8px) var(--itp-close-padding-bottom, 8px) var(--itp-close-padding-left, 8px);
    border: none;
    cursor: pointer;
    margin-left: 12px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.botsauto-itp__close:hover {
    background: var(--itp-close-hover-bg, rgba(0,0,0,0.1));
    color: var(--itp-close-hover-color, var(--itp-close-color, #000));
}

.botsauto-itp__close:focus,
.botsauto-itp__close:focus-visible {
    /* Prefer a dedicated outline var; fallback to the existing close color; fallback again to currentColor */
    outline: 2px solid var(--itp-close-outline, var(--itp-close-color, currentColor));
    outline-offset: 2px;
}

/* Body - scrollable content */
.botsauto-itp__body {
    color: var(--itp-text, #4d4d4d) !important;
    font-size: var(--itp-body-font-size, 14px);
    line-height: var(--itp-body-line-height, 1.5);
    padding: var(--itp-body-padding-top, 16px) var(--itp-body-padding-right, 20px) var(--itp-body-padding-bottom, 16px) var(--itp-body-padding-left, 20px);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    list-style: var(--itp-list-style, disc);
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.3) transparent;
}

/* Webkit scrollbar styling for better cross-browser support */
.botsauto-itp__body::-webkit-scrollbar {
    width: 6px;
}

.botsauto-itp__body::-webkit-scrollbar-track {
    background: transparent;
}

.botsauto-itp__body::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.3);
    border-radius: 3px;
}

.botsauto-itp__body::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.5);
}

.botsauto-itp__body p {
    margin: 0 0 1em 0;
}

.botsauto-itp__body p:last-child {
    margin-bottom: 0;
}

.botsauto-itp__body a {
    color: var(--itp-link, #008ad6);
    text-decoration: none;
    transition: color 0.2s ease;
}

.botsauto-itp__body a:hover {
    color: var(--itp-link-hover, #0066cc);
    text-decoration: underline;
}

/* Ensure body text color is applied with maximum specificity */
.botsauto-itp__body,
.botsauto-itp__body *:not(a):not(.botsauto-itp__link-icon) {
    color: var(--itp-text, #4d4d4d) !important;
}

/* Link icon styling */
.botsauto-itp__link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--itp-icon-fg, transparent);
    background: var(--itp-icon-bg, transparent);
    font-size: var(--itp-icon-size, 16px);
    padding: var(--itp-icon-pad-top, 4px) var(--itp-icon-pad-right, 6px) var(--itp-icon-pad-bottom, 4px) var(--itp-icon-pad-left, 6px);
    border-radius: 3px;
    margin: 0 4px;
}

.botsauto-itp__link-icon i,
.botsauto-itp__link-icon svg {
    color: inherit;
    fill: currentColor;
}

/* External link icon styling (outside popup) */
.botsauto-link-icon {
    color: var(--ba-link-icon-fg, #00306a);
    background: var(--ba-link-icon-bg, transparent);
}

/* Custom icon link wrapper styling */
.custom-icon-link .fa-solid,
.custom-icon-link .fas {
    color: var(--ba-link-icon-fg, #00306a);
    background: var(--ba-link-icon-bg, transparent);
}

/* Footer */
.botsauto-itp__footer {
    background: var(--itp-footer-bg, #f8f9fa);
    color: var(--itp-footer-color, #6c757d);
    padding: var(--itp-footer-padding-top, 12px) var(--itp-footer-padding-right, 16px) var(--itp-footer-padding-bottom, 12px) var(--itp-footer-padding-left, 16px);
    flex: 0 0 auto;
    box-sizing: border-box;
}

/* Media content */
.botsauto-tip-media {
    margin: 1em 0;
}

.botsauto-aspect {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.botsauto-aspect iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .botsauto-itp {
        padding: 10px;
    }
    
    .botsauto-itp__dialog {
        max-width: 95vw;
        max-height: calc(var(--itp-vh, 1vh) * 95);
    }
}

@media (max-width: 480px) {
    .botsauto-itp {
        padding: 5px;
    }
    
    .botsauto-itp__dialog {
        max-width: 98vw;
        max-height: calc(var(--itp-vh, 1vh) * 98);
    }
    
    .botsauto-itp__header {
        padding: 8px 12px;
        font-size: 16px;
    }
    
    .botsauto-itp__body {
        padding: 12px 16px;
        font-size: 13px;
    }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .botsauto-itp__dialog {
        max-height: calc(100vh - 40px);
    }
}

/* Ensure dialog stays within viewport on mobile */
@media (max-height: 600px) {
    .botsauto-itp__dialog {
        max-height: calc(100vh - 20px);
    }
}

/* ==============================================
   HEADER AND SUBMIT AREA ALIGNMENT
   ============================================== */

/* Outer wrapper owns checklist margin; keep width auto to avoid horizontal overflow. */
.botsauto-checklist-outer {
  box-sizing: border-box;
}

/* Inner checklist root stays full width inside the outer wrapper. */
.botsauto-checklist {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Force all major botsauto components to full width with high specificity */
.entry-content .botsauto-checklist,
.entry-content .botsauto-header,
.entry-content .botsauto-phase,
.entry-content .botsauto-question,
.entry-content .botsauto-item {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.entry-content .botsauto-fields {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Submit-area keeps full width; header submitter margins are configured separately */
.entry-content .botsauto-submit-area {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure wrapper elements also respect full width */
.entry-content [id^="botsauto-wrapper-"] {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Main container for header - ensure full width to match .entry-content */
.botsauto-header {
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}

/* Fields container inside header - full width of parent */
.botsauto-header .botsauto-fields {
  width: 100%;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0;
  box-sizing: border-box;
}

/* Standalone fields container that may contain submit area - full width to match .entry-content */
.botsauto-fields:not(.botsauto-header .botsauto-fields) {
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}

/* Submit area - MUST match .entry-content width exactly */
.botsauto-submit-area {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  box-sizing: border-box;
}

/* Header submit area uses Opmaak > Invoervelden (header) > Marges submit-gebied */
.botsauto-header .botsauto-submit-area {
  margin-top: var(--ba-subm-mt, 0);
  margin-right: var(--ba-subm-mr, 0);
  margin-bottom: var(--ba-subm-mb, 0);
  margin-left: var(--ba-subm-ml, 0);
}

/* Ensure header content aligns properly */
.botsauto-header .botsauto-logo-title,
.botsauto-header .botsauto-title,
.botsauto-header .botsauto-logo {
  max-width: 100%;
  box-sizing: border-box;
}

/* Reset any potential theme interference */
.botsauto-checklist .botsauto-header,
.botsauto-checklist .botsauto-fields:not(.botsauto-header .botsauto-fields) {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
  max-width: 100%;
}

.botsauto-checklist .botsauto-header .botsauto-submit-area {
  margin-top: var(--ba-subm-mt, 0);
  margin-right: var(--ba-subm-mr, 0);
  margin-bottom: var(--ba-subm-mb, 0);
  margin-left: var(--ba-subm-ml, 0);
  width: 100%;
  max-width: 100%;
}

/* Override PHP-generated max-width for ALL alignment contexts */
.botsauto-checklist .botsauto-header .botsauto-fields,
.botsauto-wrapper .botsauto-header .botsauto-fields,
#botsauto-wrapper-REPLACEME .botsauto-header .botsauto-fields,
[id^="botsauto-wrapper-"] .botsauto-header .botsauto-fields {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Ensure alignment for any wrapper ID pattern */
[id^="botsauto-wrapper-"] .botsauto-header,
[id^="botsauto-wrapper-"] .botsauto-fields:not(.botsauto-header .botsauto-fields) {
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}

/* Override any theme-specific padding on entry-content or wp-block containers */
/* NOTE: .botsauto-submit-area intentionally excluded so admin fields_pad_* can apply */
.entry-content .botsauto-header,
.entry-content .botsauto-fields:not(.botsauto-header .botsauto-fields),
.wp-block .botsauto-header,
.wp-block .botsauto-fields:not(.botsauto-header .botsauto-fields) {
  padding-left: 0;
  padding-right: 0;
}

/* Mobile/Tablet responsive alignment */
@media (max-width: 991px) {
  .botsauto-header,
  .botsauto-fields:not(.botsauto-header .botsauto-fields),
  [id^="botsauto-wrapper-"] .botsauto-header,
  [id^="botsauto-wrapper-"] .botsauto-fields:not(.botsauto-header .botsauto-fields) {
    max-width: 100%;
    width: 100%;
    margin: 0;
    /* Remove default padding to ensure full width alignment */
    padding-left: 0;
    padding-right: 0;
  }
  
  .botsauto-submit-area,
  [id^="botsauto-wrapper-"] .botsauto-submit-area {
    max-width: 100%;
    width: 100%;
  }

  .botsauto-header .botsauto-submit-area,
  [id^="botsauto-wrapper-"] .botsauto-header .botsauto-submit-area {
    margin-top: var(--ba-subm-mt, 0);
    margin-right: var(--ba-subm-mr, 0);
    margin-bottom: var(--ba-subm-mb, 0);
    margin-left: var(--ba-subm-ml, 0);
  }
  
  /* NOTE: header submit area keeps admin-controlled fields_pad_* spacing */
}

/* ==============================================
   SUBMITTER FORM LAYOUT & VALIDATION
   ============================================== */

/* 3.1 Submitter grid & fields */
.botsauto-submitter-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;         /* vertical alignment */
  justify-items: stretch;     /* children stretch horizontally */
}
/* Submit area parent grid - full width to match .entry-content */
.botsauto-submit-area {
  display: grid;
  grid-template-columns: 1fr; /* stack on mobile/tablet by default */
  gap: 16px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

@media (min-width: 992px) {
  .botsauto-submit-area { 
    grid-template-columns: 2fr 2fr 1fr; 
    align-items: start;
  }
  .botsauto-submitter-grid { 
    grid-column: 1 / span 2; 
    grid-template-columns: 1fr 1fr; 
    display: grid !important;
    align-items: start;         /* vertical alignment */
    justify-items: stretch;     /* children stretch horizontally */
  }
  .botsauto-submitter-grid .botsauto-field:has(#botsauto-email) {
    grid-column: 1 / -1;        /* span both submitter columns so email row has full width */
  }
  .botsauto-submitter-grid .botsauto-field:has(#botsauto-email) .ba-ev__row.ba-ev--inline,
  .botsauto-submitter-grid .botsauto-field:has(#botsauto-email) .ba-ev__row[data-layout-mode="inline"] {
    flex-wrap: nowrap;          /* keep email, badge, and change button on one line */
  }
  .botsauto-password-section { grid-column: 3; margin-top: 0 !important; }
}

@media (max-width: 991.98px) {
  .botsauto-submitter-grid { 
    grid-template-columns: 1fr; 
    display: grid !important;
    align-items: start;         /* vertical alignment */
    justify-items: stretch;     /* children stretch horizontally */
  }
}

/* Force auto widths to avoid overflow in grid cells on desktop */
@media (min-width: 992px) {
  .botsauto-submitter-grid, .botsauto-password-section {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .botsauto-submit-area * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Submit-flow custom fields integration */
.botsauto-submit-flow-area {
  grid-template-columns: 1fr !important;
  gap: 12px;
}

@media (min-width: 992px) {
  .botsauto-submit-flow-area {
    grid-template-columns: 1fr !important;
  }
}

.botsauto-section.botsauto-custom-fields-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  background: var(--ba-custom-fields-bg, var(--ba-surface-soft, transparent));
  border-style: solid;
  border-color: var(--ba-custom-fields-border, var(--ba-item-border, transparent));
  border-width: var(--ba-custom-fields-border-width, 1px);
  border-radius: var(--ba-custom-fields-border-radius, var(--ba-toggle-radius, 8px));
  padding: 10px;
}

.botsauto-custom-fields-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ba-toggle-text, var(--ba-phase-desc-text, inherit));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  margin: 0;
  padding: 0;
  text-align: left;
  width: 100%;
}

.botsauto-custom-fields-toggle-icon {
  color: var(--ba-custom-fields-icon, var(--ba-toggle-icon, currentColor));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 160ms ease, transform 180ms ease;
}

.botsauto-custom-fields-toggle-icon svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.botsauto-custom-fields-section.is-expanded .botsauto-custom-fields-toggle-icon {
  transform: rotate(90deg);
}

.botsauto-custom-fields-toggle:hover .botsauto-custom-fields-toggle-icon,
.botsauto-custom-fields-toggle:focus-visible .botsauto-custom-fields-toggle-icon,
.botsauto-custom-fields-section.is-expanded .botsauto-custom-fields-toggle-icon {
  color: var(--ba-custom-fields-icon-hover, var(--ba-custom-fields-icon, var(--ba-toggle-open-icon, var(--ba-toggle-icon, currentColor))));
}

.botsauto-custom-fields-toggle:focus-visible {
  outline: 2px solid var(--ba-btn-focus, currentColor);
  outline-offset: 2px;
}

.botsauto-custom-fields-panel-wrap {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 240ms ease, opacity 180ms ease;
}

.botsauto-custom-fields-panel {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.botsauto-custom-fields-actions,
.botsauto-submit-flow-area .botsauto-submit-row {
  margin: 0;
}

.botsauto-custom-fields-rows {
  display: grid;
  gap: 10px;
}

.botsauto-custom-field-row {
  display: grid;
  gap: 8px;
}

.botsauto-custom-field-main {
  margin: 0;
}

.botsauto-custom-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.botsauto-custom-field-main-content {
  display: grid;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.botsauto-custom-field-visible-label {
  font-weight: 600;
}

.botsauto-custom-field-value {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.botsauto-custom-field input,
.botsauto-custom-field select {
  flex: 1;
  min-width: 0;
}

.botsauto-custom-field-config {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

[id^="botsauto-"] .botsauto-submit-area .botsauto-submit-flow-area .botsauto-custom-field-delete-icon,
[id^="botsauto-"] .botsauto-submit-area.botsauto-submit-flow-area .botsauto-custom-field-delete-icon {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  width: var(--ba-custom-fields-delete-size,16px);
  height: var(--ba-custom-fields-delete-size,16px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ba-custom-fields-icon,#00306a);
  opacity: .6;
  cursor: pointer;
  transition: color .2s ease, opacity .2s ease;
}

[id^="botsauto-"] .botsauto-submit-area .botsauto-submit-flow-area .botsauto-custom-field-delete-icon:hover,
[id^="botsauto-"] .botsauto-submit-area.botsauto-submit-flow-area .botsauto-custom-field-delete-icon:hover {
  color: var(--ba-custom-fields-icon-hover,#D14292);
  opacity: 1;
}

[id^="botsauto-"] .botsauto-custom-field-delete-icon svg {
  fill: currentColor;
  stroke: currentColor;
}

.botsauto-custom-field-row.is-removing {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.botsauto-custom-field-config-options {
  display: none;
}

.botsauto-custom-field-config-options.is-visible {
  display: block;
}

.botsauto-custom-field-config .botsauto-btn {
  white-space: nowrap;
}

.botsauto-custom-field-delete-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.botsauto-custom-field-delete-modal[hidden] {
  display: none !important;
}

.botsauto-custom-field-delete-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.botsauto-custom-field-delete-modal__dialog {
  position: relative;
  width: min(430px, 100%);
  background: var(--ba-modal-bg, #fff);
  color: var(--ba-modal-text, inherit);
  border: 1px solid var(--ba-modal-border, #d1d5db);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
  padding: 16px;
}

.botsauto-custom-field-delete-modal__title {
  margin: 0 0 8px;
}

.botsauto-custom-field-delete-modal__label {
  margin: 0 0 16px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.botsauto-custom-field-delete-modal__actions {
  margin: 0;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 767.98px) {
  .botsauto-custom-field-config {
    grid-template-columns: 1fr;
  }
}

/* ==============================================
   UNIFIED FORM FIELD GRID LAYOUT (SSR Contract)
   ============================================== */
/* 
 * All .botsauto-field elements use the same two-column grid on desktop:
 * - Column 1: Fixed label column (width from data-form-label-col attribute)
 * - Column 2: Controls column (input/select/email verification row)
 * 
 * Layout mode (data-layout-mode) determines behavior:
 * - "inline": Two-column grid on desktop, stacks below breakpoint
 * - "stacked": Always stacked (label above controls)
 * 
 * Breakpoint (data-stack-breakpoint) controls when inline mode stacks
 */

/* Base: Stacked layout (mobile-first approach) */
.botsauto-field {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 6px;
  align-items: start;
  justify-self: stretch;
  min-width: 0;
}

.botsauto-field > label {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 0; /* Gap handles spacing */
  text-align: left;
  line-height: 1.3;
}

/* Controls wrapper - all form controls go in column 2 */
.botsauto-field > input:not([type="hidden"]),
.botsauto-field > select,
.botsauto-field > textarea,
.botsauto-field > .ba-ev__row,
.botsauto-field > *:not(label):not(style):not(.botsauto-error) {
  grid-column: 1;
  grid-row: 2;
}

/* Desktop: Two-column grid when layout mode is "inline" */
/* Use CSS custom property for label column width (set inline on root) */
.botsauto-checklist-root[data-layout-mode="inline"] .botsauto-field {
  /* Label column width from CSS custom property, default to 280px */
}

/* Apply two-column grid on desktop for inline mode */
/* Use dynamic breakpoint from CSS custom property - note: CSS custom properties work in media queries in modern browsers */
/* Fallback: Use a reasonable default breakpoint */
@media (min-width: 768px) {
  .botsauto-checklist-root[data-layout-mode="inline"] .botsauto-field {
    grid-template-columns: var(--ba-form-label-col-width, 280px) 1fr;
    grid-template-rows: 1fr;
    column-gap: 16px;
    row-gap: 0;
  }
  
  .botsauto-checklist-root[data-layout-mode="inline"] .botsauto-field > label {
    grid-column: 1;
    grid-row: 1;
    align-self: start; /* Baseline alignment at top */
    margin-bottom: 0;
  }
  
  .botsauto-checklist-root[data-layout-mode="inline"] .botsauto-field > input:not([type="hidden"]),
  .botsauto-checklist-root[data-layout-mode="inline"] .botsauto-field > select,
  .botsauto-checklist-root[data-layout-mode="inline"] .botsauto-field > textarea,
  .botsauto-checklist-root[data-layout-mode="inline"] .botsauto-field > .ba-ev__row,
  .botsauto-checklist-root[data-layout-mode="inline"] .botsauto-field > *:not(label):not(style):not(.botsauto-error) {
    grid-column: 2;
    grid-row: 1;
    align-self: start; /* Controls start at same vertical position as labels */
  }
}

/* Stack below configured breakpoint for inline mode */
/* Note: CSS custom properties in media query max-width need to be injected dynamically via PHP */
/* For now, use a reasonable default (640px) - the PHP code will inject additional breakpoint-specific CSS */

/* Stacked mode: Always stack regardless of viewport width */
.botsauto-checklist-root[data-layout-mode="stacked"] .botsauto-field {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
}

.botsauto-checklist-root[data-layout-mode="stacked"] .botsauto-field > label {
  grid-column: 1;
  grid-row: 1;
}

.botsauto-checklist-root[data-layout-mode="stacked"] .botsauto-field > input:not([type="hidden"]),
.botsauto-checklist-root[data-layout-mode="stacked"] .botsauto-field > select,
.botsauto-checklist-root[data-layout-mode="stacked"] .botsauto-field > textarea,
.botsauto-checklist-root[data-layout-mode="stacked"] .botsauto-field > .ba-ev__row,
.botsauto-checklist-root[data-layout-mode="stacked"] .botsauto-field > *:not(label):not(style):not(.botsauto-error) {
  grid-column: 1;
  grid-row: 2;
}

/* Error messages - position after controls in grid */
.botsauto-field > .botsauto-error {
  grid-column: 1;
  grid-row: 3;
}

/* In inline mode, error spans both columns */
.botsauto-checklist-root[data-layout-mode="inline"] .botsauto-field > .botsauto-error {
  grid-column: 1 / -1; /* Span both columns */
  grid-row: 2; /* Below controls */
}

@media (min-width: 768px) {
  .botsauto-checklist-root[data-layout-mode="inline"] .botsauto-field > .botsauto-error {
    grid-column: 2; /* Error in control column on desktop */
    grid-row: 2; /* Below the control row */
  }
}

/* Eliminate any legacy first-child margins that could affect alignment */
.botsauto-checklist-root .botsauto-field > *:first-child:not(label) {
  margin-top: 0 !important;
}

/* Ensure labels have no extra top offset */
.botsauto-checklist-root .botsauto-field > label {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ==============================================
   THEME MARGIN:AUTO NEUTRALIZATION
   ============================================== */
/* 
 * Neutralize theme's margin-top:auto and margin-bottom:auto 
 * that causes vertical centering in flex/grid contexts.
 * Scoped only to checklist to avoid global side effects.
 * 
 * Theme rule: .entry-content div, .entry-content table { 
 *   margin-top: auto !important; 
 *   margin-bottom: auto !important; 
 * }
 */

/* Target divs and tables within checklist scope - override theme's !important rule */
/* Higher specificity ensures override: .entry-content .botsauto-checklist-root has higher specificity than .entry-content */
/* EXCLUDE audio player elements - they are controlled via Opmaak settings */
/* Note: :not() excludes elements with these classes, and we also need to exclude descendants */
.entry-content .botsauto-checklist-root div:not(.botsauto-audio-player):not(.plyr__controls):not(.plyr):not(.plyr--audio),
.entry-content .botsauto-checklist-root table,
.entry-content .botsauto-checklist div:not(.botsauto-audio-player):not(.plyr__controls):not(.plyr):not(.plyr--audio),
.entry-content .botsauto-checklist table,
.botsauto-checklist-root div:not(.botsauto-audio-player):not(.plyr__controls):not(.plyr):not(.plyr--audio),
.botsauto-checklist-root table,
.botsauto-checklist div:not(.botsauto-audio-player):not(.plyr__controls):not(.plyr):not(.plyr--audio),
.botsauto-checklist table {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Override the broad rule for audio player elements - allow CSS variables to control spacing */
.entry-content .botsauto-checklist-root .botsauto-audio-player .plyr__controls,
.entry-content .botsauto-checklist .botsauto-audio-player .plyr__controls,
.botsauto-checklist-root .botsauto-audio-player .plyr__controls,
.botsauto-checklist .botsauto-audio-player .plyr__controls {
  margin-top: var(--ba-audio-controls-margin-top, 0) !important;
  margin-bottom: var(--ba-audio-controls-margin-bottom, 0) !important;
  padding-top: var(--ba-audio-controls-padding-top, 0.25rem) !important;
  padding-bottom: var(--ba-audio-controls-padding-bottom, 0.25rem) !important;
}

/* Specific targeting for structural wrappers used by fields and email row */
.entry-content .botsauto-checklist-root .botsauto-field,
.entry-content .botsauto-checklist-root .botsauto-field > *,
.entry-content .botsauto-checklist-root .ba-ev__row,
.entry-content .botsauto-checklist-root .ba-ev__row > *,
.entry-content .botsauto-checklist .botsauto-field,
.entry-content .botsauto-checklist .botsauto-field > *,
.entry-content .botsauto-checklist .ba-ev__row,
.entry-content .botsauto-checklist .ba-ev__row > *,
.botsauto-checklist-root .botsauto-field,
.botsauto-checklist-root .botsauto-field > *,
.botsauto-checklist-root .ba-ev__row,
.botsauto-checklist-root .ba-ev__row > *,
.botsauto-checklist .botsauto-field,
.botsauto-checklist .botsauto-field > *,
.botsauto-checklist .ba-ev__row,
.botsauto-checklist .ba-ev__row > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Preserve intended spacing - gap/row-gap handles vertical rhythm instead of margins */
/* These rules ensure spacing is maintained via grid/flex gap properties */
.botsauto-checklist-root .botsauto-field {
  gap: 6px; /* Already set in form field layout, ensure it's preserved */
  row-gap: 6px;
}

.botsauto-checklist-root .botsauto-fields {
  gap: var(--ba-form-gap, 16px); /* Use CSS variable if available, fallback to 16px */
  row-gap: var(--ba-form-gap, 16px);
}

/* Input fields alignment for header submitter area only */
/* LABELS: text alignment */
.botsauto-header .botsauto-fields.botsauto-align-left .botsauto-submitter-grid label,
.botsauto-header .botsauto-fields.botsauto-align-left .botsauto-password-section label { text-align: left; }
.botsauto-header .botsauto-fields.botsauto-align-center .botsauto-submitter-grid label,
.botsauto-header .botsauto-fields.botsauto-align-center .botsauto-password-section label { text-align: center; }
.botsauto-header .botsauto-fields.botsauto-align-right .botsauto-submitter-grid label,
.botsauto-header .botsauto-fields.botsauto-align-right .botsauto-password-section label { text-align: right; }

/* INPUT/TEXTAREA: align text inside header controls */
.botsauto-header .botsauto-fields.botsauto-align-left .botsauto-submitter-grid input,
.botsauto-header .botsauto-fields.botsauto-align-left .botsauto-submitter-grid textarea,
.botsauto-header .botsauto-fields.botsauto-align-left .botsauto-password-section input,
.botsauto-header .botsauto-fields.botsauto-align-left .botsauto-password-section textarea { text-align: left; }
.botsauto-header .botsauto-fields.botsauto-align-center .botsauto-submitter-grid input,
.botsauto-header .botsauto-fields.botsauto-align-center .botsauto-submitter-grid textarea,
.botsauto-header .botsauto-fields.botsauto-align-center .botsauto-password-section input,
.botsauto-header .botsauto-fields.botsauto-align-center .botsauto-password-section textarea { text-align: center; }
.botsauto-header .botsauto-fields.botsauto-align-right .botsauto-submitter-grid input,
.botsauto-header .botsauto-fields.botsauto-align-right .botsauto-submitter-grid textarea,
.botsauto-header .botsauto-fields.botsauto-align-right .botsauto-password-section input,
.botsauto-header .botsauto-fields.botsauto-align-right .botsauto-password-section textarea { text-align: right; }

/* SELECT: align displayed value; include text-align-last for broader support */
.botsauto-header .botsauto-fields.botsauto-align-left .botsauto-submitter-grid select,
.botsauto-header .botsauto-fields.botsauto-align-left .botsauto-password-section select { text-align: left; text-align-last: left; }
.botsauto-header .botsauto-fields.botsauto-align-center .botsauto-submitter-grid select,
.botsauto-header .botsauto-fields.botsauto-align-center .botsauto-password-section select { text-align: center; text-align-last: center; }
.botsauto-header .botsauto-fields.botsauto-align-right .botsauto-submitter-grid select,
.botsauto-header .botsauto-fields.botsauto-align-right .botsauto-password-section select { text-align: right; text-align-last: right; }

/* GRID/POSITIONING: keep fields full width while aligning header submitter flow */
.botsauto-header .botsauto-fields.botsauto-align-left .botsauto-submit-area { justify-content: start; }
.botsauto-header .botsauto-fields.botsauto-align-center .botsauto-submit-area { justify-content: center; }
.botsauto-header .botsauto-fields.botsauto-align-right .botsauto-submit-area { justify-content: end; }

.botsauto-header .botsauto-fields.botsauto-align-left .botsauto-submitter-grid { justify-items: stretch; justify-content: start; }
.botsauto-header .botsauto-fields.botsauto-align-center .botsauto-submitter-grid { justify-items: stretch; justify-content: center; }
.botsauto-header .botsauto-fields.botsauto-align-right .botsauto-submitter-grid { justify-items: stretch; justify-content: end; }

/* 3.2 Remove any automatic required '*' markers from legacy CSS */
.botsauto-submitter .is-required > label::after,
.botsauto-submitter label.required::after {
  content: '' !important;
}

.botsauto-field.is-required > label::after {
  content: " *";
  color: var(--ba-link);
}

/* 3.3 Select styling is now handled by unified .botsauto-select rules above */

/* ==============================================
   FULL WIDTH FORM CONTROLS - CRITICAL FIX
   ============================================== */

/* Force all form controls to fill their container width */
.botsauto-input,
.botsauto-select,
.botsauto-fields input,
.botsauto-fields select,
.botsauto-fields textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Keep select consistent even with appearance resets */
.botsauto-select,
.botsauto-fields select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Ensure URL inputs look identical to text inputs */
.botsauto-fields input[type="url"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Remove browser-specific invalid styling for URL inputs when empty */
.botsauto-fields input[type="url"]:invalid {
  box-shadow: none;
  outline: none;
  border-color: inherit;
}

/* Only show error styling via our own .botsauto-error, not native */
.botsauto-fields input[type="url"]:invalid:not(:focus) {
  border-color: inherit;
  background: inherit;
}

/* ==============================================
   SUBMITTER GRID INPUT NORMALIZATION
   ============================================== 
   
   Ensures all inputs and selects within .botsauto-submitter-grid
   have exactly the same appearance, including URL inputs.
*/

.botsauto-submitter-grid input[type="text"],
.botsauto-submitter-grid input[type="email"],
.botsauto-submitter-grid input[type="url"],
.botsauto-submitter-grid input[type="tel"],
.botsauto-submitter-grid input[type="number"],
.botsauto-submitter-grid select {
    font: inherit;
    line-height: 1.4;
    box-sizing: border-box;
    width: 100%;
    padding: 0.5em 0.75em;
    border: 1px solid #2c2c2c;
    border-radius: 0;
    background-color: #ffffff;
}

/* Remove browser-specific styling for URL input */
.botsauto-submitter-grid input[type="url"] {
    -webkit-appearance: none;
    appearance: none;
}

/* Focus states for submitter grid inputs */
.botsauto-submitter-grid input[type="text"]:focus,
.botsauto-submitter-grid input[type="email"]:focus,
.botsauto-submitter-grid input[type="url"]:focus,
.botsauto-submitter-grid input[type="tel"]:focus,
.botsauto-submitter-grid input[type="number"]:focus,
.botsauto-submitter-grid select:focus {
    border-color: var(--ba-input-focus-border, #0073aa);
    outline: none;
    box-shadow: 0 0 0 2px var(--ba-focus-shadow, rgba(0, 115, 170, 0.2));
}

/* ==============================================
   ENHANCED URL INPUT OVERRIDE - THEME INDEPENDENCE
   ============================================== 
   
   High-specificity styles to ensure URL inputs look identical 
   to other text inputs, regardless of theme CSS interference.
   Uses all: unset to completely reset theme styles before
   applying BOTSAUTO design system.
*/

/* Reset ALL theme styles for URL inputs with botsauto-input class */
.botsauto-submitter-grid .botsauto-field input[type="url"].botsauto-input {
    /* Complete reset - removes ALL inherited styles */
    all: unset;
    
    /* Re-apply font inheritance */
    font: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.4;
    
    /* Core input styling - matching other input types */
    box-sizing: border-box;
    width: 100%;
    display: block;
    padding: 0.5em 0.75em;
    border: 1px solid #2c2c2c;
    border-radius: 0;
    background-color: #ffffff;
    color: inherit;
    
    /* Remove any browser-specific URL input styling */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Ensure text is visible and properly aligned */
    text-align: left;
    vertical-align: middle;
}

/* Focus state for URL inputs - matching other inputs */
.botsauto-submitter-grid .botsauto-field input[type="url"].botsauto-input:focus {
    border-color: var(--ba-input-focus-border, #0073aa);
    outline: none;
    box-shadow: 0 0 0 2px var(--ba-focus-shadow, rgba(0, 115, 170, 0.2));
    background-color: #ffffff;
}

/* Hover state for URL inputs */
.botsauto-submitter-grid .botsauto-field input[type="url"].botsauto-input:hover:not(:focus) {
    border-color: #2c2c2c;
    background-color: #ffffff;
}

/* Disabled state for URL inputs (when AI Kansenscan = "Nee") */
.botsauto-submitter-grid .botsauto-field input[type="url"].botsauto-input:disabled,
.botsauto-submitter-grid .botsauto-field.botsauto-ai-conditional input[type="url"].botsauto-input {
    opacity: 1; /* Maintain full opacity when hidden */
    cursor: default;
}

/* Error state for URL inputs */
.botsauto-submitter-grid .botsauto-field.botsauto-has-error input[type="url"].botsauto-input,
.botsauto-submitter-grid .botsauto-field input[type="url"].botsauto-input.botsauto-error {
    border-color: #d33;
    background-color: #ffffff;
}

/* Placeholder styling for URL inputs */
.botsauto-submitter-grid .botsauto-field input[type="url"].botsauto-input::placeholder {
    color: var(--ba-input-placeholder, #999);
    opacity: 1;
}

/* Remove any invalid pseudo-class styling that browsers might add */
.botsauto-submitter-grid .botsauto-field input[type="url"].botsauto-input:invalid {
    box-shadow: none;
    outline: none;
    border-color: #2c2c2c; /* Maintain normal border unless explicitly in error state */
}

/* Extra specificity to override stubborn theme styles with !important */
.botsauto .botsauto-submitter-grid .botsauto-field input[type="url"].botsauto-input {
    border: 1px solid #2c2c2c !important;
    background: #ffffff !important;
    padding: 0.5em 0.75em !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 !important;
}

/* Ensure focus state takes precedence with !important */
.botsauto .botsauto-submitter-grid .botsauto-field input[type="url"].botsauto-input:focus {
    border-color: var(--ba-input-focus-border, #0073aa) !important;
    box-shadow: 0 0 0 2px var(--ba-focus-shadow, rgba(0, 115, 170, 0.2)) !important;
}

/* ==============================================
   PDF DOWNLOAD BUTTON - BOUND TO BUTTON GROUP
   ============================================== 
   
   This section styles the PDF download button (.botsauto-pdf-download)
   using the same Appearance settings as the global Button ("Knop") group.
   The button now uses the shared .botsauto-btn classes and CSS variables.
*/

/* PDF button inherits all styles from .botsauto-btn */
.botsauto-pdf-download {
    /* All base styles are inherited from .botsauto-btn */
    /* Additional PDF-specific styles can be added here if needed */
}

/* Ensure PDF button states work with shared button system - higher specificity */
.botsauto-checklist-root .botsauto-pdf-download:hover,
.botsauto-checklist-root .botsauto-pdf-download:active,
.botsauto-checklist-root .botsauto-pdf-download:focus-visible,
.botsauto .botsauto-pdf-download:hover,
.botsauto .botsauto-pdf-download:active,
.botsauto .botsauto-pdf-download:focus-visible {
    /* All states are inherited from .botsauto-btn */
}

/* ==============================================
   ATTACHMENTS OVERVIEW - ISOLATED FEATURE
   ============================================== 
   
   This section styles the Attachments Overview feature.
   All styles are scoped under #botsauto-attachments-overview
   to prevent interference with existing checklist elements.
*/

#botsauto-attachments-overview {
  margin-top: 2rem;
  padding: 1.5rem;
  background-color: var(--ba-attachments-overview-background, #f9f9f9);
  border: 1px solid var(--ba-attachments-overview-border, #e0e0e0);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#botsauto-attachments-overview .botsauto-overview-title {
  margin: 0 0 1rem 0;
  padding: 0 0 0.75rem 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ba-attachments-title-text, #333333);
  border-bottom: 2px solid var(--ba-attachments-title-border-bottom, var(--ba-attachments-title-border, #0073aa));
}

#botsauto-attachments-overview .botsauto-overview-content {
  /* Container for overview items */
}

#botsauto-attachments-overview .botsauto-overview-item {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: var(--ba-attachments-item-background, #ffffff);
  border: 1px solid var(--ba-attachments-item-border, #dddddd);
  border-radius: 4px;
}

#botsauto-attachments-overview .botsauto-overview-item:last-child {
  margin-bottom: 0;
}

#botsauto-attachments-overview .botsauto-overview-item-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ba-attachments-item-title-text, var(--ba-attachments-item-header-text, #0073aa));
}

#botsauto-attachments-overview .botsauto-overview-attachments {
  margin: 0;
  padding: 0;
  list-style: none;
}

#botsauto-attachments-overview .botsauto-overview-attachments li {
  margin: 0.5rem 0;
  padding: 0.5rem;
  background-color: var(--ba-attachments-file-card-background, #fafafa);
  border-left: 3px solid var(--ba-attachments-list-border, #0073aa);
  transition: background-color 0.2s ease;
}

#botsauto-attachments-overview .botsauto-overview-attachments li:hover {
  background-color: var(--ba-attachments-file-card-hover-background, #f0f0f0);
}

#botsauto-attachments-overview .botsauto-overview-attachments a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ba-attachments-filename-text, var(--ba-attachments-list-text, #0073aa));
  text-decoration: none;
  font-size: 0.95rem;
}

/* Attachments Overview - Using CSS Variables for Appearance Engine Integration */
#botsauto-attachments-overview {
  color: var(--ba-attachments-overview-text, #333333);
  background-color: var(--ba-attachments-overview-background, #f9f9f9);
  border-color: var(--ba-attachments-overview-border, #e0e0e0);
  border-style: solid;
  border-width: 1px;
  border-radius: 8px;
  padding: 16px;
  margin-top: 20px;
}

#botsauto-attachments-overview .botsauto-overview-title {
  color: var(--ba-attachments-title-text, #333333);
  background-color: var(--ba-attachments-title-background, transparent);
  border-color: var(--ba-attachments-title-border, #0073aa);
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 12px 0;
  padding: 0;
}

#botsauto-attachments-overview .botsauto-overview-search {
  color: var(--ba-attachments-search-text, #333333);
  background-color: var(--ba-attachments-search-background, #ffffff);
  border-color: var(--ba-attachments-search-border, #cccccc);
  border-style: solid;
  border-width: 1px;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 16px;
  font-size: 14px;
  /* Responsive layout properties - will be overridden by more specific rules below */
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

#botsauto-attachments-overview .botsauto-overview-search input,
#botsauto-attachments-overview .botsauto-overview-search select {
  color: var(--ba-attachments-search-text, #333333);
  background-color: var(--ba-attachments-search-background, #ffffff);
  border-color: var(--ba-attachments-search-border, #cccccc);
  border-style: solid;
  border-width: 1px;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  /* Responsive properties - will be overridden by more specific rules below */
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#botsauto-attachments-overview .botsauto-overview-item {
  color: var(--ba-attachments-item-text, #333333);
  background-color: var(--ba-attachments-item-background, #ffffff);
  border-color: var(--ba-attachments-item-border, #ddd);
  border-style: solid;
  border-width: 1px;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
  font-size: 14px;
}

#botsauto-attachments-overview .botsauto-overview-item-header {
  color: var(--ba-attachments-item-header-text, #0073aa);
  background-color: var(--ba-attachments-item-header-background, transparent);
  border-color: var(--ba-attachments-item-header-border, transparent);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  padding: 0;
}

/* ==============================================
   OVERVIEW ITEM HEADER - ALIGNMENT & LAYOUT
   ============================================== */

/* Head container - single row with controlled gap and alignment */
#botsauto-attachments-overview .botsauto-overview-item-head {
  display: flex;
  flex-direction: row;
  align-items: center; /* Default: center alignment */
  gap: 0.75rem; /* Default gap M: 0.75rem (12px) */
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Vertical alignment: center (default) */
#botsauto-attachments-overview .botsauto-overview-item-head[data-oi-align="center"] {
  align-items: center;
}

/* Vertical alignment: baseline */
#botsauto-attachments-overview .botsauto-overview-item-head[data-oi-align="baseline"] {
  align-items: baseline;
}

/* Gap tokens: S / M / L */
#botsauto-attachments-overview .botsauto-overview-item-head[data-oi-gap="S"] {
  gap: 0.5rem; /* 8px */
}

#botsauto-attachments-overview .botsauto-overview-item-head[data-oi-gap="M"] {
  gap: 0.75rem; /* 12px */
}

#botsauto-attachments-overview .botsauto-overview-item-head[data-oi-gap="L"] {
  gap: 1rem; /* 16px */
}

/* Title and toggle - no top/bottom margins, use container gap */
#botsauto-attachments-overview .botsauto-overview-item-head > .botsauto-overview-item-title,
#botsauto-attachments-overview .botsauto-overview-item-head > .botsauto-overview-item-toggle {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0;
  margin-right: 0;
}

/* Title typographic normalization */
#botsauto-attachments-overview .botsauto-overview-item-head > .botsauto-overview-item-title {
  line-height: 1.25; /* Predictable line-height for single line */
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* Single line on desktop */
}

/* Toggle button normalization - match title line-height visually */
#botsauto-attachments-overview .botsauto-overview-item-head > .botsauto-overview-item-toggle {
  flex: 0 0 auto;
  min-height: 1.25em; /* Match title line-height */
  min-inline-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: none;
  border: none;
  color: var(--ba-attachments-item-header-text, #0073aa);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s ease;
}

/* Toggle icon alignment - align to text cap-height */
#botsauto-attachments-overview .botsauto-overview-item-head > .botsauto-overview-item-toggle i {
  display: inline-flex;
  align-items: center;
  vertical-align: baseline;
  font-size: 0.875em; /* Slightly smaller to match cap-height */
  line-height: 1;
}

/* RTL support - reverse order */
[dir="rtl"] #botsauto-attachments-overview .botsauto-overview-item-head {
  flex-direction: row-reverse;
}

/* ==============================================
   THEME MARGIN:AUTO NEUTRALIZATION FOR HEADER
   ============================================== */
/* 
 * Neutralize theme's margin-top:auto and margin-bottom:auto 
 * that causes vertical centering in flex/grid contexts.
 * Scoped only to overview header within checklist to avoid global side effects.
 * 
 * Theme rule: .entry-content div, .entry-content table { 
 *   margin-top: auto !important; 
 *   margin-bottom: auto !important; 
 * }
 */

/* Target head container and its immediate children within checklist scope */
.entry-content #botsauto-attachments-overview .botsauto-overview-item-head,
.entry-content #botsauto-attachments-overview .botsauto-overview-item-head > *,
#botsauto-attachments-overview .botsauto-overview-item-head,
#botsauto-attachments-overview .botsauto-overview-item-head > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Ensure no vertical auto margins interfere with alignment */
#botsauto-attachments-overview .botsauto-overview-item-header .botsauto-overview-item-head,
#botsauto-attachments-overview .botsauto-overview-item-header .botsauto-overview-item-head > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#botsauto-attachments-overview .botsauto-overview-item-title {
  color: var(--ba-attachments-item-title-text, var(--ba-attachments-item-header-text, #0073aa));
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

#botsauto-attachments-overview .botsauto-overview-attachments {
  color: var(--ba-attachments-list-text, #0073aa);
  background-color: var(--ba-attachments-list-background, transparent);
  border-color: var(--ba-attachments-list-border, #0073aa);
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: none; /* Start collapsed by default */
}

#botsauto-attachments-overview .botsauto-overview-attachments-collapsible {
  color: var(--ba-attachments-collapsible-text, #0073aa);
  background-color: var(--ba-attachments-collapsible-background, transparent);
  border-color: var(--ba-attachments-collapsible-border, #0073aa);
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: none; /* Start collapsed by default */
}

.botsauto-file-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  background: var(--ba-attachments-file-card-background, #f9fafb);
  border: 1px solid var(--ba-attachments-file-card-border, #e5e7eb);
  transition: all 0.2s ease;
  color: var(--ba-attachments-file-name-text, #111827);
}

.botsauto-file-icon-img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  display: inline-block;
  flex-shrink: 0;
}

.botsauto-file-card:hover {
  background: var(--ba-attachments-file-card-hover-background, #f1f5f9);
}

.botsauto-file-icon {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 12px;
  flex: 0 0 auto;
}

.botsauto-file-name {
  font-weight: 500;
  font-size: 13px;
  color: var(--ba-attachments-file-name-text, #111827);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.botsauto-file-size {
  font-size: 11px;
  color: var(--ba-attachments-file-size-text, #6b7280);
}

#botsauto-attachments-overview .botsauto-overview-attachments li {
  display: flex;
  flex-wrap: wrap;          /* key: allow line breaks */
  align-items: center;
  gap: 0.5rem;              /* consistent spacing between groups */
  box-sizing: border-box;
  max-width: 100%;
  padding: 8px 0;
  border-bottom: 1px solid var(--ba-attachments-item-border, #ddd);
}

#botsauto-attachments-overview .botsauto-overview-attachments li:last-child {
  border-bottom: none;
}

#botsauto-attachments-overview .botsauto-overview-file-info {
  display: flex;
  flex-wrap: wrap;          /* meta can wrap internally */
  gap: 0.5rem;
  flex: 1 1 12rem;          /* grow + shrink, base width ~12rem */
  min-width: 0;             /* key: allow flex item to shrink */
  max-width: 100%;
  align-items: flex-start;
}

#botsauto-attachments-overview .botsauto-overview-file-link {
  color: var(--ba-attachments-filename-text, var(--ba-attachments-list-text, #0073aa));
  text-decoration: none;
  display: flex;
  align-items: center;
  flex: 1 1 12rem;          /* grow + shrink, base width ~12rem */
  min-width: 0;             /* key: allow flex item to shrink */
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;   /* long names can break */
  overflow-wrap: anywhere;  /* modern safe break */
}

#botsauto-attachments-overview .botsauto-overview-file-link.botsauto-overview-file-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

#botsauto-attachments-overview .botsauto-overview-file-link.botsauto-overview-file-card-link:hover {
  color: inherit;
  text-decoration: none;
}

#botsauto-attachments-overview .botsauto-file-meta {
  min-width: 0;
  flex: 1;
}

.botsauto-submission-view img {
  max-width: none !important;
  height: auto !important;
}

.botsauto-attachments img {
  max-width: none !important;
}

#botsauto-attachments-overview .botsauto-overview-preview-link {
  flex: 0 0 auto;
  min-width: auto;
  max-width: none;
}

#botsauto-attachments-overview .botsauto-attachment-preview {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--ba-attachments-file-card-border, var(--ba-attachments-item-border, #ddd));
  background: var(--ba-attachments-preview-background, #f3f4f6);
  display: block;
}

#botsauto-attachments-overview .botsauto-overview-file-link:hover {
  text-decoration: underline;
  color: var(--ba-link-hover);
}

#botsauto-attachments-overview .botsauto-overview-attachments i {
  color: var(--ba-attachments-list-text, #0073aa);
  font-size: 1rem;
  margin-right: 8px;
}

#botsauto-attachments-overview .botsauto-overview-filename {
  flex: 1 1 12rem;          /* grow + shrink, base width ~12rem */
  min-width: 0;             /* key: allow flex item to shrink */
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;   /* long names can break */
  overflow-wrap: anywhere;  /* modern safe break */
}

#botsauto-attachments-overview .botsauto-overview-filesize {
  color: var(--ba-attachments-file-size-text, var(--ba-attachments-list-text, #0073aa));
  font-size: 0.85rem;
  font-weight: normal;
  opacity: 0.7;
  margin-right: 0.5em;
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  white-space: normal;      /* ensure they can wrap on small screens */
  overflow-wrap: anywhere;
}

#botsauto-attachments-overview .botsauto-overview-meta {
  display: inline-flex;
  flex-wrap: wrap;          /* meta can wrap internally */
  gap: 0.5rem;
  flex: 0 1 auto;           /* allow shrink */
  min-width: 0;             /* key: allow shrink inside meta */
  max-width: 100%;
  align-items: center;
}

#botsauto-attachments-overview .botsauto-overview-file-time {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  white-space: normal;      /* ensure they can wrap on small screens */
  overflow-wrap: anywhere;
  margin-left: 0.5rem;
}

#botsauto-attachments-overview .botsauto-m365-status {
  display: inline-block;
  font-size: 12px;
  line-height: 1.3;
  border-radius: 999px;
  padding: 2px 8px;
}

#botsauto-attachments-overview .botsauto-m365-status-editing {
  background: var(--ba-attachments-status-editing-background, #fff3cd);
  color: var(--ba-attachments-status-editing-text, #7a4f00);
}

#botsauto-attachments-overview .botsauto-m365-status-synced {
  background: var(--ba-attachments-status-synced-background, #dcfce7);
  color: var(--ba-attachments-status-synced-text, #0f5132);
}

#botsauto-attachments-overview .botsauto-m365-status-failed {
  background: var(--ba-attachments-status-failed-background, #ffe2e2);
  color: var(--ba-attachments-status-failed-text, #842029);
}

#botsauto-attachments-overview .botsauto-m365-status-idle {
  background: var(--ba-attachments-status-idle-background, #e2e8f0);
  color: var(--ba-attachments-status-idle-text, #1e293b);
}

/* RTL support for filesize spacing */
[dir="rtl"] #botsauto-attachments-overview .botsauto-overview-filesize {
  margin-right: 0;
  margin-left: 0.5em;
}

#botsauto-attachments-overview .botsauto-overview-file-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 0 0 auto;           /* do not grow; wrap when needed */
  min-width: 0;
  margin-left: 12px;
}

#botsauto-attachments-overview .botsauto-attachment-download,
#botsauto-attachments-overview .botsauto-attachment-delete,
#botsauto-attachments-overview .botsauto-attachment-edit,
#botsauto-attachments-overview .botsauto-attachment-mark-done {
  background-color: var(--bao-ao-dlbtn-bg);
  color: var(--bao-ao-dlbtn-text);
  border: var(--bao-ao-dlbtn-bw) var(--bao-ao-dlbtn-bstyle) var(--bao-ao-dlbtn-border);
  border-radius: var(--bao-ao-dlbtn-brad);
  padding: var(--bao-ao-dlbtn-pt) var(--bao-ao-dlbtn-pr) var(--bao-ao-dlbtn-pb) var(--bao-ao-dlbtn-pl);
  margin: var(--bao-ao-dlbtn-mt) var(--bao-ao-dlbtn-mr) var(--bao-ao-dlbtn-mb) var(--bao-ao-dlbtn-ml);
  font-size: var(--bao-ao-dlbtn-fs);
  font-weight: var(--bao-ao-dlbtn-fw);
  font-style: var(--bao-ao-dlbtn-fst);
  text-decoration: var(--bao-ao-dlbtn-td);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s ease;
}

#botsauto-attachments-overview .botsauto-attachment-download:hover,
#botsauto-attachments-overview .botsauto-attachment-delete:hover,
#botsauto-attachments-overview .botsauto-attachment-edit:hover,
#botsauto-attachments-overview .botsauto-attachment-mark-done:hover {
  background-color: var(--bao-ao-dlbtn-hover-bg);
  color: var(--bao-ao-dlbtn-hover-text);
  border-color: var(--bao-ao-dlbtn-hover-border);
}

#botsauto-attachments-overview .botsauto-attachment-download:active,
#botsauto-attachments-overview .botsauto-attachment-delete:active,
#botsauto-attachments-overview .botsauto-attachment-edit:active,
#botsauto-attachments-overview .botsauto-attachment-mark-done:active {
  background-color: var(--bao-ao-dlbtn-active-bg);
  color: var(--bao-ao-dlbtn-active-text);
  border-color: var(--bao-ao-dlbtn-active-border);
}

#botsauto-attachments-overview .botsauto-attachment-download:focus-visible,
#botsauto-attachments-overview .botsauto-attachment-delete:focus-visible,
#botsauto-attachments-overview .botsauto-attachment-edit:focus-visible,
#botsauto-attachments-overview .botsauto-attachment-mark-done:focus-visible {
  background-color: var(--bao-ao-dlbtn-focus-bg);
  color: var(--bao-ao-dlbtn-focus-text);
  border-color: var(--bao-ao-dlbtn-focus-border);
  outline: 2px solid var(--bao-ao-dlbtn-focus);
  outline-offset: 2px;
}

#botsauto-attachments-overview .botsauto-jump-to-item {
  margin-left: 10px;
  color: #008AD6;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

#botsauto-attachments-overview .botsauto-jump-to-item:hover {
  color: #D14292;
}

#botsauto-attachments-overview .botsauto-overview-loading {
  padding: 2rem;
  text-align: center;
  color: var(--ba-attachments-list-text, #0073aa);
  font-style: italic;
}

#botsauto-attachments-overview .botsauto-overview-empty {
  text-align: center;
  color: var(--ba-attachments-list-text, #0073aa);
  font-style: italic;
  padding: 2rem;
}

#botsauto-attachments-overview .botsauto-overview-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

#botsauto-attachments-overview .botsauto-overview-expand-all,
#botsauto-attachments-overview .botsauto-overview-collapse-all {
  /* Base styles - bound to Uitklapknoppen (toggle_button) Appearance group */
  color: var(--bao-ao-expbtn-text, #333);
  background-color: var(--bao-ao-expbtn-bg, transparent);
  border-color: var(--bao-ao-expbtn-border, rgba(0,0,0,.12));
  border-style: var(--bao-ao-expbtn-bstyle, solid);
  border-width: var(--bao-ao-expbtn-bw, 1px);
  border-radius: var(--bao-ao-expbtn-brad, 0.5rem);
  padding: var(--bao-ao-expbtn-pt, 0.35rem) var(--bao-ao-expbtn-pr, 0.6rem) var(--bao-ao-expbtn-pb, 0.35rem) var(--bao-ao-expbtn-pl, 0.6rem);
  margin: var(--bao-ao-expbtn-mt, 0) var(--bao-ao-expbtn-mr, 0) var(--bao-ao-expbtn-mb, 0) var(--bao-ao-expbtn-ml, 0);
  font-size: var(--bao-ao-expbtn-fs, 0.875rem);
  font-weight: var(--bao-ao-expbtn-fw, 400);
  font-style: var(--bao-ao-expbtn-fst, normal);
  text-decoration: var(--bao-ao-expbtn-td, none);
  cursor: pointer;
  display: inline-block;
  transition: all 0.2s ease;
}

#botsauto-attachments-overview .botsauto-overview-expand-all:hover,
#botsauto-attachments-overview .botsauto-overview-collapse-all:hover {
  color: var(--bao-ao-expbtn-hover-text, #0073aa);
  background-color: var(--bao-ao-expbtn-hover-bg, rgba(0,115,170,0.1));
  border-color: var(--bao-ao-expbtn-hover-border, #0073aa);
}

#botsauto-attachments-overview .botsauto-overview-expand-all:active,
#botsauto-attachments-overview .botsauto-overview-collapse-all:active {
  color: var(--bao-ao-expbtn-active-text, #005a87);
  background-color: var(--bao-ao-expbtn-active-bg, rgba(0,115,170,0.2));
  border-color: var(--bao-ao-expbtn-active-border, #005a87);
}

#botsauto-attachments-overview .botsauto-overview-expand-all:focus-visible,
#botsauto-attachments-overview .botsauto-overview-collapse-all:focus-visible {
  color: var(--bao-ao-expbtn-focus-text);
  background-color: var(--bao-ao-expbtn-focus-bg);
  border-color: var(--bao-ao-expbtn-focus-border);
  outline: 2px solid var(--bao-ao-expbtn-focus-border);
  outline-offset: 2px;
}

#botsauto-attachments-overview .botsauto-overview-clear-filters {
  /* Base styles - bound to Knop (Button) Appearance group */
  color: var(--bao-ao-clearbtn-text);
  background-color: var(--bao-ao-clearbtn-bg);
  border-color: var(--bao-ao-clearbtn-border);
  border-style: var(--bao-ao-clearbtn-bstyle);
  border-width: var(--bao-ao-clearbtn-bw);
  border-radius: var(--bao-ao-clearbtn-brad);
  padding: var(--bao-ao-clearbtn-pt) var(--bao-ao-clearbtn-pr) var(--bao-ao-clearbtn-pb) var(--bao-ao-clearbtn-pl);
  margin: var(--bao-ao-clearbtn-mt) var(--bao-ao-clearbtn-mr) var(--bao-ao-clearbtn-mb) var(--bao-ao-clearbtn-ml);
  font-size: var(--bao-ao-clearbtn-fs);
  font-weight: var(--bao-ao-clearbtn-fw);
  font-style: var(--bao-ao-clearbtn-fst);
  text-decoration: var(--bao-ao-clearbtn-td);
  cursor: pointer;
  display: inline-block;
}

#botsauto-attachments-overview .botsauto-overview-clear-filters:hover {
  color: var(--bao-ao-clearbtn-hover-text);
  background-color: var(--bao-ao-clearbtn-hover-bg);
  border-color: var(--bao-ao-clearbtn-hover-border);
}

#botsauto-attachments-overview .botsauto-overview-clear-filters:active {
  color: var(--bao-ao-clearbtn-active-text);
  background-color: var(--bao-ao-clearbtn-active-bg);
  border-color: var(--bao-ao-clearbtn-active-border);
}

#botsauto-attachments-overview .botsauto-overview-clear-filters:focus-visible {
  color: var(--bao-ao-clearbtn-focus-text);
  background-color: var(--bao-ao-clearbtn-focus-bg);
  border-color: var(--bao-ao-clearbtn-focus-border);
  outline: 2px solid var(--bao-ao-clearbtn-focus-border);
  outline-offset: 2px;
}

/* Toggle button hover state */
#botsauto-attachments-overview .botsauto-overview-item-head > .botsauto-overview-item-toggle:hover {
  color: var(--ba-link-hover);
  background-color: rgba(0, 115, 170, 0.1);
}

/* Fallback for toggle buttons outside head container (backward compatibility) */
#botsauto-attachments-overview .botsauto-overview-item-toggle:hover {
  color: var(--ba-link-hover);
  background-color: rgba(0, 115, 170, 0.1);
}

#botsauto-attachments-overview .botsauto-overview-result-count {
  color: var(--ba-attachments-list-text, #0073aa);
  font-size: 12px;
  font-style: italic;
  margin-top: 8px;
}

/* Hide overview if empty */
#botsauto-attachments-overview:empty {
  display: none;
}

/* ==============================================
   ATTACHMENTS OVERVIEW FILTER RESPONSIVENESS
   ============================================== */

/* Ensure the filter container supports wrapping and prevents overflow */
#botsauto-attachments-overview .botsauto-overview-search {
  display: flex;
  flex-wrap: wrap;          /* allow wrapping */
  gap: 0.5rem;              /* keep chip spacing */
  align-items: center;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;       /* safety net: no horizontal scroll on mobile */
}

/* Make each filter item shrinkable and prevent overflow */
#botsauto-attachments-overview .botsauto-overview-search input,
#botsauto-attachments-overview .botsauto-overview-search select,
#botsauto-attachments-overview .botsauto-overview-search button {
  display: inline-flex;     /* or flex, depending on current markup */
  align-items: center;
  min-width: 0;             /* CRITICAL: allow flex item to shrink */
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 1;           /* allow shrinking */
}

/* Truncate the text inside filter elements */
#botsauto-attachments-overview .botsauto-overview-search input,
#botsauto-attachments-overview .botsauto-overview-search select,
#botsauto-attachments-overview .botsauto-overview-search button {
  min-width: 0;             /* CRITICAL for text-overflow to work in flex */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;      /* single-line truncation */
}

/* Ensure select elements can shrink properly */
#botsauto-attachments-overview .botsauto-overview-search select {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;           /* grow and shrink as needed */
}

/* Ensure input elements can shrink properly */
#botsauto-attachments-overview .botsauto-overview-search input {
  min-width: 0;
  max-width: 100%;
  flex: 1 1 auto;           /* grow and shrink as needed */
}

/* Ensure buttons maintain minimum size but can shrink */
#botsauto-attachments-overview .botsauto-overview-search button {
  min-width: fit-content;   /* maintain button readability */
  flex-shrink: 1;
  white-space: nowrap;
}

/* RTL safety */
[dir="rtl"] #botsauto-attachments-overview .botsauto-overview-search {
  /* gap works both ways; nothing special needed */
}

/* Responsive adjustments */
@media (max-width: 640px) {
  #botsauto-attachments-overview {
    margin-top: 1.5rem;
    padding: 1rem;
  }
  
  #botsauto-attachments-overview .botsauto-overview-title {
    font-size: 1.1rem;
  }
  
  #botsauto-attachments-overview .botsauto-overview-item {
    padding: 0.75rem;
  }
  
  #botsauto-attachments-overview .botsauto-overview-item-title {
    font-size: 1rem;
  }
  
  #botsauto-attachments-overview .botsauto-overview-file-actions {
    flex-direction: column;
    gap: 4px;
  }
  
  /* Enhanced mobile responsiveness for filters */
  #botsauto-attachments-overview .botsauto-overview-search {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  
  #botsauto-attachments-overview .botsauto-overview-search input,
  #botsauto-attachments-overview .botsauto-overview-search select,
  #botsauto-attachments-overview .botsauto-overview-search button {
    width: 100%;
    max-width: 100%;
    flex: none;             /* don't grow/shrink in column layout */
  }
}

/* Very small screens - further optimizations */
@media (max-width: 480px) {
  #botsauto-attachments-overview .botsauto-overview-search input,
  #botsauto-attachments-overview .botsauto-overview-search select,
  #botsauto-attachments-overview .botsauto-overview-search button {
    font-size: 0.95em;
    padding: 0.35rem 0.5rem;
  }
  
  /* Mobile stacking layout for attachment rows */
  #botsauto-attachments-overview .botsauto-overview-attachments li {
    align-items: flex-start;
  }
  
  #botsauto-attachments-overview .botsauto-overview-file-info {
    flex-basis: 100%;     /* full width on first line */
  }
  
  #botsauto-attachments-overview .botsauto-overview-file-actions {
    flex-basis: auto;     /* wrap below filename */
    margin-left: 0;
    margin-top: 0.5rem;
  }
}

/* License Text Styling - Base styles for anchors/icons only */
/* The six configurable properties (alignment, font-size, color, max-width, margin-top, margin-bottom) 
   are applied via high-specificity CSS injection with unique IDs, not here */
.botsauto-license-text a {
    text-decoration: underline;
    color: inherit;
}

.botsauto-license-text img {
    vertical-align: text-bottom;
    height: 22px;
    margin-left: 3px;
}

/* ==============================================
   Remove Password Protection Checkbox Fix
   ============================================== */

/* Label alignment fix for remove_password_protection checkbox */
.botsauto-checklist label[for="remove-password-protection-checkbox"] {
    margin-inline-start: 6px;
    vertical-align: middle;
}

/* Additional specificity to ensure checkbox size is respected */
.botsauto-checklist .botsauto-remove-protection input[type="checkbox"][name="remove_password_protection"] {
    flex-shrink: 0;
    flex-grow: 0;
}

/* ==============================================
   Email Verification Styles
   ============================================== */

/* Email verification row container - stable markup for all states */
.botsauto-checklist .ba-ev__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ba-ev-row-gap, 8px);
    margin-top: 0; /* CRITICAL: Remove top margin to keep inline with other controls */
    padding-top: 0; /* CRITICAL: Remove top padding to keep inline with other controls */
}

/* CRITICAL: Top-align email row and Bestaande klant field on desktop to match label baselines */
/* This ensures the email label aligns perfectly with "Bestaande klant" label */
/* Desktop only: applies at viewport width >= 768px (matches form layout breakpoint) */
@media (min-width: 768px) {
    /* Top-align email verification row on desktop */
    .botsauto-checklist-root .botsauto-field > .ba-ev__row.ba-ev--inline {
        align-items: flex-start !important; /* Override any theme centering - top-align all children */
    }

    /* Ensure Bestaande klant select has no extra top margin/min-height that re-centers the row */
    /* Target the select directly within the field that contains the label */
    .botsauto-checklist-root .botsauto-field:has(label[for="botsauto-existing"]) #botsauto-existing,
    .botsauto-checklist-root .botsauto-field #botsauto-existing {
        margin-top: 0 !important;
        min-height: auto; /* Remove any min-height that could re-center */
        align-self: start !important; /* Top-align within grid cell - override any centering */
    }

    /* Ensure Bestaande klant field wrapper doesn't add vertical centering */
    .botsauto-checklist-root .botsauto-field:has(label[for="botsauto-existing"]) {
        align-items: start; /* Top-align field wrapper content (for flex fallback) */
    }

    /* Ensure first child inside control column has no top offset */
    .botsauto-checklist-root .botsauto-field > .ba-ev__row:first-child,
    .botsauto-checklist-root .botsauto-field > .ba-ev__row {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Remove any top margin/padding from email verification container */
    .botsauto-checklist-root .botsauto-field .botsauto-email-verification {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Override alignment for inline mode - top-align badge and button to match input */
    /* Remove hidden vertical offsets from inner elements */
    .botsauto-checklist-root .botsauto-field > .ba-ev__row.ba-ev--inline .ba-ev__badge-container,
    .botsauto-checklist-root .botsauto-field > .ba-ev__row.ba-ev--inline .ba-ev__change,
    .botsauto-checklist-root .botsauto-field > .ba-ev__row.ba-ev--inline .ba-ev__email {
        align-self: flex-start; /* Top-align within row container */
        margin-top: 0;
        padding-top: 0;
    }

    /* Remove first/last-child margins inside email row that could add hidden offsets */
    .botsauto-checklist-root .botsauto-field > .ba-ev__row.ba-ev--inline > *:first-child {
        margin-top: 0;
        padding-top: 0;
    }
    .botsauto-checklist-root .botsauto-field > .ba-ev__row.ba-ev--inline > *:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    /* Ensure verified badge container and icon have no hidden offsets */
    .botsauto-checklist-root .botsauto-field > .ba-ev__row.ba-ev--inline .ba-ev__badge-container,
    .botsauto-checklist-root .botsauto-field > .ba-ev__row.ba-ev--inline .ba-ev__badge-container * {
        margin-top: 0;
        padding-top: 0;
        vertical-align: top; /* Ensure icons align to top */
    }

    /* Ensure "E-mailadres wijzigen" button has no hidden offsets */
    .botsauto-checklist-root .botsauto-field > .ba-ev__row.ba-ev--inline .ba-ev__change {
        margin-top: 0;
        padding-top: 0;
        vertical-align: top;
    }
}

/* Ensure badge container and icons don't add extra line-height (mobile and desktop) */
.botsauto-checklist .ba-ev__row .ba-ev__badge-container,
.botsauto-checklist .ba-ev__row .ba-ev__change {
    line-height: 1.2; /* Tight line-height to prevent extra vertical space */
    align-self: center; /* Center align within row - overridden to flex-start on desktop inline mode */
}

/* Inline layout mode - horizontal row alignment */
.botsauto-checklist .ba-ev__row.ba-ev--inline {
    flex-direction: row !important;
    flex-wrap: wrap;
}

/* Stacked layout mode - vertical stack, always stacked */
.botsauto-checklist .ba-ev__row.ba-ev--stacked {
    flex-direction: column !important;
    align-items: stretch;
}

/* Ensure data attributes also work (backward compatibility) */
.botsauto-checklist .ba-ev__row[data-layout-mode="inline"] {
    flex-direction: row !important;
}

.botsauto-checklist .ba-ev__row[data-layout-mode="stacked"] {
    flex-direction: column !important;
    align-items: stretch;
}

/* Email input in row - takes available space */
.botsauto-checklist .ba-ev__row .ba-ev__email {
    flex: 1 1 auto;
    min-width: 200px;
}

/* Badge container in row */
.botsauto-checklist .ba-ev__row .ba-ev__badge-container {
    flex: 0 0 auto;
}

/* Change email button in row */
.botsauto-checklist .ba-ev__row .ba-ev__change {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Hide badge when visibility is disabled */
.botsauto-checklist .ba-ev__row[data-badge-visible="false"] .ba-ev__badge-container {
    display: none !important;
}

/* Hide change button when visibility is disabled */
.botsauto-checklist .ba-ev__row[data-change-button-visible="false"] .ba-ev__change {
    display: none !important;
}

/* Badge style variants */
.botsauto-checklist .ba-ev__badge--pill {
    border-radius: var(--ba-ev-radius, 8px);
    padding: 6px 12px;
}

.botsauto-checklist .ba-ev__badge--text-only {
    border-radius: 0;
    padding: 6px 0;
    background: transparent !important;
    border: none !important;
}

/* Change button style variants */
.botsauto-checklist .ba-ev__change--primary {
    background: var(--ba-ev-btn-bg, #2b6cb0) !important;
    color: var(--ba-ev-btn-text, #ffffff) !important;
    border-color: var(--ba-ev-btn-border, transparent) !important;
}

.botsauto-checklist .ba-ev__change--primary:hover {
    background: var(--ba-ev-btn-bg-hover, #2c5282) !important;
}

.botsauto-checklist .ba-ev__change--secondary {
    background: transparent !important;
    color: var(--ba-ev-btn-bg, #2b6cb0) !important;
    border: 1px solid var(--ba-ev-btn-bg, #2b6cb0) !important;
}

.botsauto-checklist .ba-ev__change--secondary:hover {
    background: var(--ba-ev-btn-bg, #2b6cb0) !important;
    color: var(--ba-ev-btn-text, #ffffff) !important;
}

.botsauto-checklist .ba-ev__change--link {
    background: transparent !important;
    color: var(--ba-ev-btn-bg, #2b6cb0) !important;
    border: none !important;
    text-decoration: underline;
    padding: 0 !important;
}

.botsauto-checklist .ba-ev__change--link:hover {
    text-decoration: none;
}

/* Email verification container */
.botsauto-checklist .botsauto-email-verification {
    margin-top: 10px;
}

/* Responsive stacking for inline mode - generated dynamically via output_frontend_style() */
/* Breakpoint-specific media queries are injected server-side based on ev_stack_breakpoint setting */
/* Stacked mode (.ba-ev--stacked) is always stacked regardless of viewport width */

/* Hide verification panel by default if data-visible is false or missing */
/* CRITICAL: These rules enforce the atomic contract between state, visibility, and markup */
.botsauto-checklist #ba-ev[data-visible="false"],
.botsauto-checklist #ba-ev:not([data-visible]) {
    display: none !important;
}

/* Show panel only when explicitly set to visible */
.botsauto-checklist #ba-ev[data-visible="true"] {
    display: block;
}

/* Additional defensive rules to prevent empty panel visibility */
.botsauto-checklist #ba-ev:empty {
    display: none !important;
}

/* Legacy selector removed - only #ba-ev is supported */
.botsauto-checklist #botsauto-email-verification {
    display: none !important; /* Prevent any legacy usage */
}

/* Email verification base styles */
.botsauto-checklist .ba-ev { 
    font-size: var(--ba-ev-font-size,14px); 
    gap: var(--ba-ev-gap,8px); 
}

/* Email and code input fields */
.botsauto-checklist .ba-ev__email,
.botsauto-checklist .ba-ev__code {
    background: var(--ba-ev-input-bg,#fff);
    color: var(--ba-ev-input-text,#1a202c);
    border: 1px solid var(--ba-ev-input-border,#cbd5e0);
    border-radius: var(--ba-ev-radius,8px);
    padding: 8px 12px;
    font-size: var(--ba-ev-font-size,14px);
}

.botsauto-checklist .ba-ev__email:focus,
.botsauto-checklist .ba-ev__code:focus {
    outline: 2px solid var(--ba-ev-input-focus,#3182ce);
    outline-offset: 1px;
}

/* All buttons */
.botsauto-checklist .ba-ev__send,
.botsauto-checklist .ba-ev__verify,
.botsauto-checklist .ba-ev__resend,
.botsauto-checklist .ba-ev__change {
    background: var(--ba-ev-btn-bg,#2b6cb0);
    color: var(--ba-ev-btn-text,#fff);
    border: 1px solid var(--ba-ev-btn-border,transparent);
    border-radius: var(--ba-ev-radius,8px);
    padding: 8px 16px;
    font-size: var(--ba-ev-font-size,14px);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.botsauto-checklist .ba-ev__send:hover,
.botsauto-checklist .ba-ev__verify:hover,
.botsauto-checklist .ba-ev__resend:hover,
.botsauto-checklist .ba-ev__change:hover {
    background: var(--ba-ev-btn-bg-hover,#2c5282);
}

/* Message styles */
.botsauto-checklist .ba-ev__msg {
    padding: 8px 12px;
    border-radius: var(--ba-ev-radius,8px);
    margin-top: var(--ba-ev-gap,8px);
    font-size: var(--ba-ev-font-size,14px);
}

.botsauto-checklist .ba-ev__msg--success { 
    background: var(--ba-ev-success-bg,#e6fffa); 
    color: var(--ba-ev-success-text,#065f46); 
    border: 1px solid var(--ba-ev-success-bg,#e6fffa);
}

.botsauto-checklist .ba-ev__msg--error { 
    background: var(--ba-ev-error-bg,#fef2f2); 
    color: var(--ba-ev-error-text,#991b1b); 
    border: 1px solid var(--ba-ev-error-bg,#fef2f2);
}

.botsauto-checklist .ba-ev__msg--info { 
    background: var(--ba-ev-info-bg,#eff6ff); 
    color: var(--ba-ev-info-text,#1e40af); 
    border: 1px solid var(--ba-ev-info-bg,#eff6ff);
}

/* Verified badge */
.botsauto-checklist .ba-ev__badge--verified { 
    background: var(--ba-ev-badge-bg,#e6fffa); 
    color: var(--ba-ev-badge-text,#065f46); 
    border-radius: var(--ba-ev-radius,8px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: var(--ba-ev-font-size,14px);
}

.botsauto-checklist .ba-ev__badge--verified .ba-ev__icon {
    color: var(--ba-ev-badge-icon-color, currentColor);
    fill: var(--ba-ev-badge-icon-color, currentColor);
}

.botsauto-checklist .ba-ev__success--hidden,
.botsauto-checklist #botsauto-verification-success-standalone[hidden] {
    display: none !important;
}

/* Email verification form elements */
.botsauto-checklist .ba-ev__form {
    margin-top: var(--ba-ev-gap);
}

/* Action buttons container */
.botsauto-checklist .ba-ev__actions {
    display: flex;
    gap: var(--ba-ev-gap);
    align-items: center;
    flex-wrap: wrap;
}

/* Email verification messages */
.botsauto-checklist .ba-ev__message {
    margin-top: var(--ba-ev-gap);
}

/* Countdown display */
.botsauto-checklist .ba-ev__countdown {
    margin-top: 5px;
    font-size: calc(var(--ba-ev-font-size) - 2px);
    color: #666;
}

/* Success badge */
.botsauto-checklist .ba-ev__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--ba-ev-radius);
    font-size: var(--ba-ev-font-size);
}

/* Badge icon */
.botsauto-checklist .ba-ev__badge i,
.botsauto-checklist .ba-ev__badge svg {
    font-size: 1.2em;
}

/* Responsive adjustments for email verification */
@media (max-width: 640px) {
    .botsauto-checklist .ba-ev__actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .botsauto-checklist .ba-ev__actions > * {
        width: 100%;
    }
}

/* ==============================================
   CSV IMPORT ROW - FRONTEND ALIGNMENT
   ============================================== */
/* 
 * CSV import row alignment styles for public checklist page.
 * Scoped with .botsauto-checklist/.botsauto-checklist-root for theme-proofing.
 * Higher specificity than admin.css to resist theme overrides.
 */

/* CSV import row - container for buttons and filename */
.botsauto-checklist .botsauto-csv-import-row,
.botsauto-checklist-root .botsauto-csv-import-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-block: var(--botsauto-csv-row-mb, 0px); /* optional top/bottom space for the row */
}

/* Button container - horizontal flex row with configurable spacing */
.botsauto-checklist .botsauto-csv-import-row .botsauto-csv-import-buttons,
.botsauto-checklist-root .botsauto-csv-import-row .botsauto-csv-import-buttons {
    display: flex;
    align-items: center;
    gap: var(--botsauto-csv-row-gap, 8px); /* space between buttons */
    flex-wrap: wrap; /* allow wrapping on smaller viewports */
}

/* Remove stray margins & normalize line-height */
.botsauto-checklist .botsauto-csv-import-row label,
.botsauto-checklist .botsauto-csv-import-row span,
.botsauto-checklist .botsauto-csv-import-row button,
.botsauto-checklist-root .botsauto-csv-import-row label,
.botsauto-checklist-root .botsauto-csv-import-row span,
.botsauto-checklist-root .botsauto-csv-import-row button {
    margin: 0;
    line-height: 1.2;
}

/* Hide native file input; label acts as the trigger */
.botsauto-checklist .botsauto-csv-import-row input[type="file"],
.botsauto-checklist-root .botsauto-csv-import-row input[type="file"] {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
    clip: rect(0, 0, 0, 0);
}

/* File trigger - uses global button appearance settings via inline styles */
/* Ensure consistent height and alignment with other buttons */
.botsauto-checklist .botsauto-csv-import-row .botsauto-file-trigger,
.botsauto-checklist-root .botsauto-csv-import-row .botsauto-file-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* All colors, backgrounds, borders, padding, font-size come from global button settings */
}

/* CSV buttons - use global button appearance settings via CSS classes */
/* Ensure consistent height and alignment */
.botsauto-checklist .botsauto-csv-import-row .botsauto-csv-preview-btn,
.botsauto-checklist .botsauto-csv-import-row .botsauto-csv-import-btn,
.botsauto-checklist .botsauto-csv-import-row .botsauto-csv-template-btn,
.botsauto-checklist .botsauto-csv-import-row .botsauto-csv-export-btn,
.botsauto-checklist .botsauto-csv-import-row .botsauto-submit-row .botsauto-btn,
.botsauto-checklist .botsauto-csv-import-row .botsauto-pdf-download,
.botsauto-checklist-root .botsauto-csv-import-row .botsauto-csv-preview-btn,
.botsauto-checklist-root .botsauto-csv-import-row .botsauto-csv-import-btn,
.botsauto-checklist-root .botsauto-csv-import-row .botsauto-csv-template-btn,
.botsauto-checklist-root .botsauto-csv-import-row .botsauto-csv-export-btn,
.botsauto-checklist-root .botsauto-csv-import-row .botsauto-submit-row .botsauto-btn,
.botsauto-checklist-root .botsauto-csv-import-row .botsauto-pdf-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: var(--ba-button-margin-top, 10px);
    margin-right: var(--ba-button-margin-right, 10px);
    margin-bottom: var(--ba-button-margin-bottom, 10px);
    margin-left: var(--ba-button-margin-left, 10px);
    width: auto !important; /* remove fixed % widths */
    flex: 0 0 auto; /* natural size from padding/text */
    /* All colors, backgrounds, borders, padding, font-size come from global button settings via .botsauto-btn */
}

/* All buttons in the row use CSS variable margins */
.botsauto-checklist .botsauto-csv-import-row .botsauto-btn,
.botsauto-checklist .botsauto-csv-import-row .botsauto-btn-primary,
.botsauto-checklist .botsauto-csv-import-row .botsauto-a11y-large,
.botsauto-checklist-root .botsauto-csv-import-row .botsauto-btn,
.botsauto-checklist-root .botsauto-csv-import-row .botsauto-btn-primary,
.botsauto-checklist-root .botsauto-csv-import-row .botsauto-a11y-large {
    margin-top: var(--ba-button-margin-top, 10px);
    margin-right: var(--ba-button-margin-right, 10px);
    margin-bottom: var(--ba-button-margin-bottom, 10px);
    margin-left: var(--ba-button-margin-left, 10px);
    width: auto !important; /* remove fixed % widths */
    flex: 0 0 auto; /* natural size from padding/text */
}

/* Filename display - positioned below buttons */
.botsauto-checklist .botsauto-csv-import-row .botsauto-csv-selected-file,
.botsauto-checklist-root .botsauto-csv-import-row .botsauto-csv-selected-file {
    display: block;
    margin-top: 0.25rem;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Focus styles are now handled globally by .botsauto-btn:focus rules above */

/* Disabled state is now handled globally by .botsauto-btn[disabled] rules above */

/* Responsive */
@media (max-width: 640px) {
    .botsauto-checklist .botsauto-csv-import-row .botsauto-csv-import-buttons,
    .botsauto-checklist-root .botsauto-csv-import-row .botsauto-csv-import-buttons {
        /* Gap is controlled by CSS variable, no override needed */
        flex-wrap: wrap; /* Allow wrapping on very small screens */
    }
    .botsauto-checklist .botsauto-csv-import-row .botsauto-csv-selected-file,
    .botsauto-checklist-root .botsauto-csv-import-row .botsauto-csv-selected-file {
        max-width: 100%;
    }
}

/* ==============================================
   PER-CHECKLIST LOGO UPLOAD
   ============================================== */
/* 
 * Styles for editable per-checklist logo feature.
 * For saved submissions, users can click the logo to upload a custom image.
 */

/* Editable logo container - cursor and hover effects */
.botsauto-logo--editable {
    position: relative;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.15s ease;
}

.botsauto-logo--editable:hover {
    opacity: 0.9;
}

.botsauto-logo--editable:focus {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 4px;
}

.botsauto-logo--editable:focus:not(:focus-visible) {
    outline: none;
}

.botsauto-logo--editable:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* Edit hint overlay - shown on hover */
.botsauto-logo__edit-hint {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.75rem;
    padding: 4px 8px;
    text-align: center;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    border-radius: 0 0 4px 4px;
    white-space: nowrap;
}

.botsauto-logo--editable:hover .botsauto-logo__edit-hint,
.botsauto-logo--editable:focus .botsauto-logo__edit-hint {
    opacity: 1;
    transform: translateY(0);
}

/* Loading state during upload */
.botsauto-logo--uploading {
    pointer-events: none;
    opacity: 0.6;
}

.botsauto-logo--uploading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 3px solid rgba(0, 0, 0, 0.2);
    border-top-color: #333;
    border-radius: 50%;
    animation: botsauto-logo-spin 0.8s linear infinite;
}

@keyframes botsauto-logo-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Success state after upload */
.botsauto-logo--success {
    animation: botsauto-logo-success-pulse 0.4s ease;
}

@keyframes botsauto-logo-success-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}

/* Ensure logo image doesn't overflow on edit hint */
.botsauto-logo--editable img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Custom logo indicator (subtle border when custom logo is active) */
.botsauto-logo--editable[data-has-custom="true"] {
    box-shadow: 0 0 0 2px rgba(0, 128, 0, 0.2);
    border-radius: 4px;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .botsauto-logo__edit-hint {
        font-size: 0.65rem;
        padding: 3px 6px;
    }
    
    .botsauto-logo--uploading::after {
        width: 20px;
        height: 20px;
        margin: -10px 0 0 -10px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .botsauto-logo--editable:focus {
        outline-width: 3px;
    }
    
    .botsauto-logo__edit-hint {
        background: #000;
        color: #fff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .botsauto-logo--editable,
    .botsauto-logo__edit-hint {
        transition: none;
    }
    
    .botsauto-logo--uploading::after {
        animation: none;
        border-color: #333;
    }
    
    .botsauto-logo--success {
        animation: none;
    }
}

/* ==============================================
   AI PROMPT MODAL - CONFIGURABLE VIA APPEARANCE SETTINGS
   ==============================================
   
   This modal displays the AI Kansenscan prompt in a popup dialog.
   All colors and styles are controlled via CSS variables from the
   Appearance settings (Opmaak instellingen), which are influenced
   by the active color palette.
   
   Optimized for readability with comfortable line-height, generous
   spacing, and responsive behavior across all screen sizes.
*/

/* Body class to prevent scrolling when modal is open */
body.botsauto-ai-prompt-modal-open {
    overflow: hidden;
}

/* Modal container - fullscreen overlay */
.botsauto-ai-prompt-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    justify-content: center;
    align-items: center;
    padding: 24px;
    box-sizing: border-box;
}

/* Modal overlay/backdrop */
.botsauto-ai-prompt-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--ba-ai-modal-overlay, rgba(0, 0, 0, 0.5));
    cursor: pointer;
}

/* Modal dialog */
.botsauto-ai-prompt-modal__dialog {
    position: relative;
    background-color: var(--ba-ai-modal-bg, #ffffff);
    color: var(--ba-ai-modal-text, #333333);
    border: 1px solid var(--ba-ai-modal-border, #cccccc);
    border-radius: var(--ba-ai-modal-radius, 12px);
    box-shadow: var(--ba-ai-modal-shadow, 0 8px 32px rgba(0, 0, 0, 0.25));
    max-width: var(--ba-ai-modal-max-width, 900px);
    width: calc(100% - 48px);
    min-width: 320px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: botsauto-modal-appear 0.2s ease-out;
}

@keyframes botsauto-modal-appear {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Modal header */
.botsauto-ai-prompt-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid var(--ba-ai-modal-border, #e0e0e0);
    flex-shrink: 0;
}

/* Modal title */
.botsauto-ai-prompt-modal__title {
    margin: 0;
    padding: 0;
    font-size: var(--ba-ai-modal-title-font-size, 20px);
    font-weight: 600;
    color: var(--ba-ai-modal-title-color, #333333);
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.35;
}

.botsauto-ai-prompt-modal__title i {
    font-size: 1em;
    opacity: 0.8;
}

/* Close icon button in header */
.botsauto-ai-prompt-modal__close-icon {
    background: transparent;
    border: none;
    padding: 10px;
    margin: -10px -10px -10px 12px;
    cursor: pointer;
    color: var(--ba-ai-modal-text, #333333);
    opacity: 0.6;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    font-size: 18px;
    line-height: 1;
    border-radius: 6px;
}

.botsauto-ai-prompt-modal__close-icon:hover,
.botsauto-ai-prompt-modal__close-icon:focus {
    opacity: 1;
    outline: none;
    background-color: rgba(0, 0, 0, 0.06);
}

/* Modal body - generous padding for comfortable reading */
.botsauto-ai-prompt-modal__body {
    padding: 28px 28px 24px 28px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Description text - clear hierarchy and comfortable reading */
.botsauto-ai-prompt-modal__description {
    margin: 0 0 20px 0;
    padding: 0;
    font-size: 15px;
    color: var(--ba-ai-modal-text, #666666);
    opacity: 0.85;
    line-height: 1.65;
    letter-spacing: 0.01em;
}

.botsauto-ai-token-budget {
    margin: 0 0 18px 0;
    padding: 14px 16px;
    border: 1px solid var(--ba-ai-modal-border, #e0e0e0);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.02);
}

.botsauto-ai-token-budget__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px 0;
}

.botsauto-ai-token-budget__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ba-ai-modal-title-color, #333333);
}

.botsauto-ai-token-budget__summary {
    font-size: 12px;
    color: var(--ba-ai-modal-text, #555555);
}

.botsauto-ai-token-budget__bar {
    position: relative;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: #e5e7eb;
}

.botsauto-ai-token-budget__bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: #22c55e;
    transition: width 0.2s ease, background-color 0.2s ease;
}

.botsauto-ai-token-budget__status {
    margin: 10px 0 8px 0;
    font-size: 13px;
    font-weight: 600;
}

.botsauto-ai-token-budget__list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.55;
}

.botsauto-ai-token-budget__list li {
    margin: 2px 0;
}

.botsauto-ai-token-budget__list li span {
    display: inline-block;
    margin-right: 8px;
}

.botsauto-ai-token-budget--safe .botsauto-ai-token-budget__bar-fill {
    background: #22c55e;
}

.botsauto-ai-token-budget--safe .botsauto-ai-token-budget__status {
    color: #15803d;
}

.botsauto-ai-token-budget--high .botsauto-ai-token-budget__bar-fill {
    background: #f59e0b;
}

.botsauto-ai-token-budget--high .botsauto-ai-token-budget__status {
    color: #b45309;
}

.botsauto-ai-token-budget--risk .botsauto-ai-token-budget__bar-fill {
    background: #ef4444;
}

.botsauto-ai-token-budget--risk .botsauto-ai-token-budget__status {
    color: #b91c1c;
}

/* Prompt textarea - optimized for readability */
.botsauto-ai-prompt-modal__textarea {
    width: 100%;
    height: var(--ba-ai-modal-textarea-height, 380px);
    min-height: 220px;
    max-height: 65vh;
    padding: 20px 22px;
    border: 1px solid var(--ba-ai-modal-textarea-border, #dee2e6);
    border-radius: 10px;
    background-color: var(--ba-ai-modal-textarea-bg, #f8f9fa);
    color: var(--ba-ai-modal-textarea-text, #333333);
    font-family: var(--ba-ai-modal-textarea-font, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace);
    font-size: var(--ba-ai-modal-textarea-font-size, 14px);
    line-height: 1.75;
    letter-spacing: 0.015em;
    tab-size: 4;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    scroll-behavior: smooth;
}

.botsauto-ai-prompt-modal__textarea:focus {
    outline: none;
    border-color: var(--ba-ai-modal-copy-btn-bg, #007cba);
    box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.12);
}

/* Custom scrollbar for textarea */
.botsauto-ai-prompt-modal__textarea::-webkit-scrollbar {
    width: 10px;
}

.botsauto-ai-prompt-modal__textarea::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 5px;
    margin: 4px;
}

.botsauto-ai-prompt-modal__textarea::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.botsauto-ai-prompt-modal__textarea::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.28);
    background-clip: padding-box;
}

/* Modal footer */
.botsauto-ai-prompt-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 24px;
    border-top: 1px solid var(--ba-ai-modal-border, #e0e0e0);
    flex-shrink: 0;
    background-color: rgba(0, 0, 0, 0.02);
}

/* Button base styles */
.botsauto-ai-prompt-modal__copy-btn,
.botsauto-ai-prompt-modal__close-btn {
    padding: 11px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
}

/* Copy button (primary style) */
.botsauto-ai-prompt-modal__copy-btn {
    background-color: var(--ba-ai-modal-copy-btn-bg, #007cba);
    color: var(--ba-ai-modal-copy-btn-text, #ffffff);
}

.botsauto-ai-prompt-modal__copy-btn:hover,
.botsauto-ai-prompt-modal__copy-btn:focus {
    filter: brightness(1.1);
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.botsauto-ai-prompt-modal__copy-btn:active {
    transform: scale(0.98);
}

/* Copy button success state */
.botsauto-ai-prompt-modal__copy-btn--success {
    background-color: #28a745 !important;
    color: #ffffff !important;
}

/* Close button (secondary style) */
.botsauto-ai-prompt-modal__close-btn {
    background-color: var(--ba-ai-modal-close-btn-bg, #6c757d);
    color: var(--ba-ai-modal-close-btn-text, #ffffff);
}

.botsauto-ai-prompt-modal__close-btn:hover,
.botsauto-ai-prompt-modal__close-btn:focus {
    filter: brightness(1.1);
    outline: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.botsauto-ai-prompt-modal__close-btn:active {
    transform: scale(0.98);
}

/* Large screens - ensure optimal line length for readability */
@media (min-width: 1200px) {
    .botsauto-ai-prompt-modal__dialog {
        width: min(calc(100% - 80px), var(--ba-ai-modal-max-width, 900px));
    }
    
    .botsauto-ai-prompt-modal__body {
        padding: 32px;
    }
    
    .botsauto-ai-prompt-modal__textarea {
        padding: 24px 26px;
        line-height: 1.8;
    }
}

/* Responsive adjustments for tablets */
@media (max-width: 960px) {
    .botsauto-ai-prompt-modal {
        padding: 20px;
    }
    
    .botsauto-ai-prompt-modal__dialog {
        width: calc(100% - 40px);
        max-width: none;
    }
    
    .botsauto-ai-prompt-modal__body {
        padding: 24px;
    }
    
    .botsauto-ai-prompt-modal__textarea {
        padding: 18px 20px;
    }
}

/* Responsive adjustments for mobile */
@media (max-width: 640px) {
    .botsauto-ai-prompt-modal {
        padding: 12px;
    }
    
    .botsauto-ai-prompt-modal__dialog {
        width: calc(100% - 24px);
        min-width: 280px;
        max-width: none;
        max-height: 94vh;
        border-radius: var(--ba-ai-modal-radius, 10px);
    }
    
    .botsauto-ai-prompt-modal__header {
        padding: 16px 18px;
    }
    
    .botsauto-ai-prompt-modal__title {
        font-size: 17px;
    }
    
    .botsauto-ai-prompt-modal__body {
        padding: 18px;
    }
    
    .botsauto-ai-prompt-modal__description {
        font-size: 14px;
        margin-bottom: 16px;
    }
    
    .botsauto-ai-prompt-modal__textarea {
        font-size: 13px;
        height: 280px;
        min-height: 200px;
        padding: 16px;
        line-height: 1.7;
        border-radius: 8px;
    }
    
    .botsauto-ai-prompt-modal__footer {
        padding: 16px 18px;
        flex-direction: column-reverse;
        gap: 10px;
    }
    
    .botsauto-ai-prompt-modal__copy-btn,
    .botsauto-ai-prompt-modal__close-btn {
        width: 100%;
        justify-content: center;
        padding: 13px 20px;
    }
}

/* Very small screens */
@media (max-width: 400px) {
    .botsauto-ai-prompt-modal {
        padding: 8px;
    }
    
    .botsauto-ai-prompt-modal__dialog {
        width: calc(100% - 16px);
        min-width: 260px;
    }
    
    .botsauto-ai-prompt-modal__header,
    .botsauto-ai-prompt-modal__body,
    .botsauto-ai-prompt-modal__footer {
        padding-left: 14px;
        padding-right: 14px;
    }
    
    .botsauto-ai-prompt-modal__textarea {
        padding: 14px;
        font-size: 12.5px;
        min-height: 180px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .botsauto-ai-prompt-modal__dialog {
        border-width: 2px;
    }
    
    .botsauto-ai-prompt-modal__textarea {
        border-width: 2px;
    }
    
    .botsauto-ai-prompt-modal__copy-btn:focus,
    .botsauto-ai-prompt-modal__close-btn:focus {
        outline: 3px solid currentColor;
        outline-offset: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .botsauto-ai-prompt-modal__dialog {
        animation: none;
    }
    
    .botsauto-ai-prompt-modal__copy-btn,
    .botsauto-ai-prompt-modal__close-btn,
    .botsauto-ai-prompt-modal__close-icon,
    .botsauto-ai-prompt-modal__textarea {
        transition: none;
    }
    
    .botsauto-ai-prompt-modal__textarea {
        scroll-behavior: auto;
    }
}

.botsauto-item-highlight {
    animation: botsautoHighlight 2s ease;
}

@keyframes botsautoHighlight {
    0% {
        background-color: #ffff6c;
    }
    100% {
        background-color: transparent;
    }
}

/* Attention/in-progress signal layer (primary status remains checkbox/NVT/open) */
.botsauto-checklist,
.botsauto-checklist-root,
.botsauto-checklist-wrapper {
    overflow: visible;
}

.botsauto-status-summary {
    margin: var(--ba-checklist-status-bar-margin, 12px 0 16px);
    padding: var(--ba-checklist-status-bar-padding, 0);
    color: var(--ba-checklist-status-bar-text, #00306a);
    background: var(--ba-checklist-status-bar-bg, transparent);
    border-color: var(--ba-checklist-status-bar-border, transparent);
    border-style: var(--ba-checklist-status-bar-border-style, none);
    border-width: var(--ba-checklist-status-bar-border-width, 0);
    border-radius: var(--ba-checklist-status-bar-radius, 0);
    font-size: var(--ba-checklist-status-bar-font-size, inherit);
    font-weight: var(--ba-checklist-status-bar-font-weight, inherit);
}

.botsauto-status-counts,
.botsauto-status-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.botsauto-status-count {
    line-height: 1.3;
    padding: 3px 7px;
    border-radius: 999px;
    color: var(--ba-checklist-progress-info-text, inherit);
}

.botsauto-status-filters {
    margin-top: 8px;
}

.botsauto-status-filter {
    cursor: pointer;
}

.botsauto-status-filter:hover,
.botsauto-status-filter:focus,
.botsauto-status-filter.active {
    outline: none;
}

.botsauto-phase-completion {
    margin: var(--ba-phase-status-bar-margin, 8px 0 12px);
    padding: var(--ba-phase-status-bar-padding, 10px 12px);
    color: var(--ba-phase-status-bar-text, #00306a);
    border-color: var(--ba-phase-status-bar-border, rgba(0, 48, 106, .28));
    border-style: var(--ba-phase-status-bar-border-style, solid);
    border-width: var(--ba-phase-status-bar-border-width, 1px);
    border-radius: var(--ba-phase-status-bar-radius, 10px);
    background: var(--ba-phase-status-bar-bg, rgba(255, 255, 255, .72));
    font-size: var(--ba-phase-status-bar-font-size, inherit);
    font-weight: var(--ba-phase-status-bar-font-weight, inherit);
    position: relative;
}

.botsauto-phase-completion-row,
.botsauto-phase-counts,
.botsauto-phase-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.botsauto-phase-completion-row {
    margin-bottom: 8px;
}

.botsauto-phase-progress {
    position: relative;
    flex: 1 1 180px;
    min-width: 140px;
    height: var(--ba-phase-status-progress-height, 12px);
    overflow: hidden;
    border: 1px solid var(--ba-phase-status-progress-border, rgba(0, 48, 106, .25));
    border-radius: var(--ba-phase-status-progress-radius, 999px);
    background: var(--ba-phase-status-progress-track, rgba(0, 48, 106, .08));
}

.botsauto-phase-progress__fill {
    display: block;
    width: var(--botsauto-phase-progress-pct, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--ba-phase-status-progress-fill, var(--ba-phase-status-active, #008AD6));
    transition: width .2s ease;
}

.botsauto-phase-progress__label {
    position: absolute;
    inset: 0;
    display: var(--ba-phase-status-progress-label-display, flex);
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    color: var(--ba-phase-status-progress-text, var(--ba-phase-status-neutral, #00306a));
}

.botsauto-phase-status-chip,
.botsauto-phase-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.25;
    color: var(--ba-phase-status-chip-text, var(--ba-phase-status-neutral, #00306a));
}

.botsauto-phase-status-chip {
    padding: var(--ba-phase-status-chip-padding, 4px 9px);
    border: 1px solid var(--ba-phase-status-chip-border, currentColor);
    border-radius: var(--ba-phase-status-chip-radius, 999px);
    background: var(--ba-phase-status-chip-bg, transparent);
    font-size: var(--ba-phase-status-chip-font-size, inherit);
    font-weight: var(--ba-phase-status-chip-font-weight, 600);
}

.botsauto-phase-status-chip[data-phase-status="completed"],
.botsauto-phase-status-chip[data-phase-status="ready_to_complete"] {
    color: var(--ba-phase-status-done, #006633);
}

.botsauto-phase-status-chip[data-phase-status="completed_with_attention"],
.botsauto-phase-status-chip[data-phase-status="needs_attention"],
.botsauto-phase-status-chip[data-phase-status="waiting_for_input"] {
    color: var(--ba-phase-status-attention, #D14292);
}

.botsauto-phase-status-chip[data-phase-status="in_progress"] {
    color: var(--ba-phase-status-active, #008AD6);
}

.botsauto-phase-status-chip[data-phase-status="review_needed"] {
    color: var(--ba-phase-status-neutral, #00306a);
}

.botsauto-phase--review-needed .botsauto-phase-status-chip[data-phase-status="review_needed"] {
    color: var(--ba-phase-status-attention, var(--ba-phase-status-neutral, #00306a));
}

.botsauto-phase-review-message {
    margin: 0 0 8px;
    color: var(--ba-phase-status-neutral, #00306a);
}

.botsauto-phase-counts {
    margin-bottom: 8px;
}

.botsauto-phase-count {
    padding: var(--ba-phase-status-count-padding, 3px 7px);
    border: 1px solid var(--ba-phase-status-count-border, transparent);
    border-radius: var(--ba-phase-status-count-radius, 999px);
    background: var(--ba-phase-status-count-bg, rgba(0, 48, 106, .06));
    color: var(--ba-phase-status-count-text, var(--ba-phase-status-neutral, #00306a));
    font-size: var(--ba-phase-status-count-font-size, inherit);
    font-weight: var(--ba-phase-status-count-font-weight, inherit);
}

.botsauto-phase-actions {
    margin-top: 0;
}

.botsauto-phase-actions .botsauto-phase-complete-btn,
.botsauto-phase-actions .botsauto-phase-reconfirm-btn,
.botsauto-phase-actions .botsauto-phase-reopen-btn {
    cursor: pointer;
}

.botsauto-attention-control {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
}

.botsauto-attention-toggle {
    cursor: pointer;
    flex-shrink: 0;
}

.botsauto-attention-toggle:disabled {
    cursor: not-allowed;
}

.botsauto-attention-chip,
.botsauto-attention-badge {
    position: absolute;
    top: 0;
    right: 12px;
    transform: translateY(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1 !important;
    pointer-events: none;
}

.botsauto-attention-chip::before,
.botsauto-attention-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 999px;
}

.botsauto-attention-menu {
    position: absolute;
    z-index: 20002;
    top: calc(100% + 6px);
    right: 0;
}

.botsauto-attention-menu--floating {
    position: fixed !important;
    z-index: 1000000 !important;
    top: auto;
    right: auto;
    left: auto;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    isolation: isolate;
}

.botsauto-attention-menu[hidden] {
    display: none !important;
}

.botsauto-attention-menu--floating[hidden] {
    display: none !important;
}

.botsauto-attention-menu button {
    display: block;
    width: 100%;
    margin: 0;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.botsauto-attention-menu button:hover,
.botsauto-attention-menu button:focus {
    outline: none;
}

.botsauto-checklist-root .botsauto-item.is-attention-menu-open,
.botsauto-checklist .botsauto-item.is-attention-menu-open,
.botsauto-item.is-attention-menu-open {
    z-index: 100000 !important;
    overflow: visible !important;
}

.botsauto-checklist-root .botsauto-item.is-attention-menu-open .botsauto-attention-control,
.botsauto-checklist .botsauto-item.is-attention-menu-open .botsauto-attention-control,
.botsauto-item.is-attention-menu-open .botsauto-attention-control {
    z-index: 100001 !important;
}

.botsauto-item.is-in-progress {
    border-left: 4px solid var(--ba-progress-mid, currentColor);
}

.botsauto-item.nvt.has-attention,
.botsauto-item.nvt.is-in-progress,
.botsauto-item.is-nvt.has-attention,
.botsauto-item.is-nvt.is-in-progress {
    border-left-color: var(--ba-nvt-border, currentColor);
    box-shadow: none;
}

.botsauto-item.nvt .botsauto-attention-badge,
.botsauto-item.is-nvt .botsauto-attention-badge,
.botsauto-item.is-checked .botsauto-attention-badge,
.botsauto-item.nvt .botsauto-attention-chip,
.botsauto-item.is-nvt .botsauto-attention-chip,
.botsauto-item.is-checked .botsauto-attention-chip {
    display: none;
}

@media (max-width: 600px) {
    .botsauto-attention-chip,
    .botsauto-attention-badge {
        position: absolute;
        top: 0;
        right: 8px;
        transform: translateY(-50%);
        display: inline-flex;
        max-width: min(220px, calc(100% - 40px));
        margin: 0;
        white-space: nowrap;
        pointer-events: none;
    }
}