/* ============================================================================
   EditPopup.css — SlrmModal design system (from solrm-popups.html)
   ----------------------------------------------------------------------------
   Shared popup skin for:
     - SlrmModal    (JavaScript/slrmModal.js)    — chrome for any popup
     - SlrmEditForm (JavaScript/slrmEditForm.js) — record edit/view (_E) forms

   All classes are namespaced `slrm-*` and scoped under `.slrm-modal`, so they
   cannot collide with or leak into the legacy `.edit-window` / `.general`
   popups that have not been migrated yet.

   Template modifier on `.slrm-modal`:
     .slrm-tmpl-single  narrow single column
     .slrm-tmpl-with-pane  wide split: fields + media/contextual pane
     .slrm-tmpl-two-column  wide 2-col, no pane
     .slrm-tmpl-compact  compact action popup / confirmation
   ============================================================================ */

.slrm-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 10, 30, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

:root {
    --slrm-purple:       var(--primary-purple);
    --slrm-purple-hover: var(--primary-purple-hover);
    --slrm-surface:      #ffffff;
    --slrm-surface-2:    #f7f8fa;
    --slrm-border:       #e3e6ec;
    --slrm-border-light: #edf0f4;
    --slrm-text-1:       #1a1d23;
    --slrm-text-2:       #52596b;
    --slrm-text-muted:   #9199a8;
    --slrm-text-hint:    #6b7280;
    --slrm-green:        #15803d;
    --slrm-red:          #b91c1c;
    --slrm-red-bg:       #fee2e2;
    --slrm-amber-link:   #b45309;
    --slrm-amber-bg:     #fef3c7;
}

.slrm-modal {
    background: var(--slrm-surface);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 82vh;
    max-width: calc(100vw - 48px);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--slrm-text-1);
}

/* Template widths / heights (JS can override width inline) */
.slrm-modal.slrm-tmpl-single {
    width: 460px;
}

/* with-pane sizes to its content like single/two-column (base max-height: 82vh caps tall
   forms, at which point the fields pane / serial list scroll internally). */
.slrm-modal.slrm-tmpl-with-pane {
    width: 930px;
}

.slrm-modal.slrm-tmpl-with-pane.slrm-no-pane {
    max-width: 460px;
}
.slrm-modal.slrm-tmpl-with-pane.slrm-no-pane .slrm-media-pane {
    display: none;
}

/* Devices popup (Linked Serials pane): wider pane for long serials, modal grows to keep
   the fields grid comfortable. Scoped via the generic slrm-prog-{Program} class added by
   slrmEditForm.js mount(); other with-pane forms (Orders/Installations) keep the defaults. */
.slrm-modal.slrm-tmpl-with-pane.slrm-prog-Devices {
    width: 1160px;
}
.slrm-modal.slrm-prog-Devices .slrm-media-pane {
    width: 600px;
}

.slrm-modal.slrm-tmpl-with-pane.slrm-prog-InstallationsViewOnly {
    width: 800px;
}

/* two-column sizes to its content like single (base max-height: 82vh caps long forms;
   the body scrolls past that). A fixed height belongs only to with-pane, whose media
   pane needs a stable box — here it just left dead space under short forms. */
.slrm-modal.slrm-tmpl-two-column {
    width: 680px;
}

/* Inline variant (SlrmModal.open({ inline: true })): the popup structure placed in-flow on a
   page — card chrome instead of the floating overlay, natural height (the page scrolls, not
   the form). Must stay below the template width rules so width:auto wins. */
.slrm-modal.slrm-inline {
    width: auto;
    max-width: none;
    max-height: none;
    border: 1px solid var(--slrm-border);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.05);
}

.slrm-modal.slrm-inline .slrm-modal-body {
    overflow: visible;
}

.slrm-modal.slrm-inline .slrm-fields-pane {
    overflow-y: visible;
}

.slrm-modal.slrm-tmpl-compact {
    width: 440px;
    height: auto;
}

/* ---- Header ---- */
.slrm-modal .slrm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--slrm-border-light);
    flex-shrink: 0;
}

.slrm-modal .slrm-modal-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    /* long titles shrink and ellipsize instead of pushing the close button out */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slrm-modal-header .slrm-modal-close {
    flex-shrink: 0;
}

.slrm-modal .slrm-modal-close {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--slrm-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
    flex-shrink: 0;
}

.slrm-modal .slrm-modal-close:hover {
    background: var(--slrm-surface-2);
    color: var(--slrm-text-1);
}

/* ---- Body ---- */
.slrm-modal .slrm-modal-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* single / two-column / compact: ONE scroll region holding the fields (buildBody returns a
   plain wrapper). The flex default above is for with-pane only (fields pane + media pane).
   Without this, two-column's wrapper sat as a non-growing flex child → fields squished to
   content width with dead space where a pane would be. */
.slrm-modal.slrm-tmpl-single .slrm-modal-body,
.slrm-modal.slrm-tmpl-two-column .slrm-modal-body,
.slrm-modal.slrm-tmpl-compact .slrm-modal-body {
    display: block;
    overflow-y: auto;
    flex: 1;
    padding: 8px 24px;
    scrollbar-width: thin;
    scrollbar-color: #c4c9d4 transparent;
}

.slrm-modal .slrm-fields-pane {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 12px 24px;
    scrollbar-width: thin;
    scrollbar-color: #c4c9d4 transparent;
}

/* WebKit fallback (Safari / older Chrome that ignore scrollbar-color): same thin, rounded,
   light-grey scroller the rest of the new design uses. */
.slrm-modal .slrm-modal-body::-webkit-scrollbar,
.slrm-modal .slrm-fields-pane::-webkit-scrollbar,
.slrm-modal .slrm-media-pane::-webkit-scrollbar {
    width: 8px;
}
.slrm-modal .slrm-modal-body::-webkit-scrollbar-track,
.slrm-modal .slrm-fields-pane::-webkit-scrollbar-track,
.slrm-modal .slrm-media-pane::-webkit-scrollbar-track {
    background: transparent;
}
.slrm-modal .slrm-modal-body::-webkit-scrollbar-thumb,
.slrm-modal .slrm-fields-pane::-webkit-scrollbar-thumb,
.slrm-modal .slrm-media-pane::-webkit-scrollbar-thumb {
    background: #c4c9d4;
    border-radius: 4px;
}
.slrm-modal .slrm-modal-body::-webkit-scrollbar-thumb:hover,
.slrm-modal .slrm-fields-pane::-webkit-scrollbar-thumb:hover,
.slrm-modal .slrm-media-pane::-webkit-scrollbar-thumb:hover {
    background: #a8adba;
}

.slrm-modal .slrm-fields-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 28px;
}

.slrm-modal.slrm-tmpl-single .slrm-fields-grid,
.slrm-modal.slrm-tmpl-with-pane .slrm-fields-grid {
    grid-template-columns: minmax(0, 1fr);
}

.slrm-modal .slrm-fields-grid .slrm-span-full {
    grid-column: 1 / -1;
}

/* ---- Right media / contextual pane (with-pane template) ---- */
.slrm-modal .slrm-media-pane {
    width: 400px;
    flex-shrink: 0;
    border-left: 1px solid var(--slrm-border-light);
    background: var(--slrm-surface-2);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #c4c9d4 transparent;
}

.slrm-modal .slrm-media-label {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--slrm-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}

/* Active-periods pane section (Installations hook) */
.slrm-modal .slrm-periods {
    font-size: 12.5px;
    overflow-y: auto;
    max-height: 200px;
}

.slrm-modal .slrm-period-row {
    display: grid;
    grid-template-columns: 90px 90px auto;
    gap: 16px;
    padding: 2px 0;
}

.slrm-modal .slrm-period-head {
    color: var(--slrm-text-muted);
    border-bottom: 1px solid var(--slrm-border-light);
}

/* Date-picker calendar buttons inside any compact/edit popup use the new thin-line
   calendar icon instead of the legacy Images/c1.png (which still serves the _V filter
   rows). Scoped to .slrm-modal so it only affects popup date pickers. */
.slrm-modal .data-box input[type="button"] {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20fill='none'%20viewBox='0%200%2024%2024'%20stroke='%2352596b'%20stroke-width='2'%20stroke-linecap='round'%3E%3Crect%20x='3'%20y='4.5'%20width='18'%20height='17'%20rx='2'/%3E%3Cline%20x1='3'%20y1='9'%20x2='21'%20y2='9'/%3E%3Cline%20x1='8'%20y1='2.5'%20x2='8'%20y2='6'/%3E%3Cline%20x1='16'%20y1='2.5'%20x2='16'%20y2='6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
}

/* Icon-only Call button INSIDE the phone input, sharing one underline — same
   pattern as the calendar button on date fields (.slrm-date-wrap). Wired by the
   Installations hook (wirePhones). */
.slrm-modal .slrm-call-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: var(--input-underline);
    transition: border-color 0.15s;
}

.slrm-modal .slrm-call-wrap:focus-within {
    border-bottom-color: var(--input-underline-focus);
}

.slrm-modal .slrm-call-wrap .slrm-input {
    border-bottom: none !important;
    flex: 1 1 auto;
    min-width: 0;
}

.slrm-modal .slrm-call-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--slrm-text-2);
}

.slrm-modal .slrm-call-btn:hover {
    color: var(--slrm-purple);
}

.slrm-modal .slrm-call-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.slrm-modal .slrm-photo-strip {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.slrm-modal .slrm-photo-thumb {
    width: 115px;
    height: 115px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    background: var(--slrm-surface);
    border: 1px solid var(--slrm-border);
    flex-shrink: 0;
}

.slrm-modal .slrm-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
}

.slrm-modal .slrm-photo-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 14px;
    height: 14px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    cursor: pointer;
    border: none;
}

.slrm-modal .slrm-photo-remove:hover {
    background: rgba(185, 28, 28, 0.85);
}

.slrm-modal .slrm-photo-add {
    width: 115px;
    height: 115px;
    border-radius: 8px;
    border: 1.5px dashed #d1d5db;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    color: var(--slrm-text-muted);
    font-size: 10px;
}

.slrm-modal .slrm-photo-add:hover {
    border-color: var(--slrm-purple);
    color: var(--slrm-purple);
}

.slrm-modal .slrm-map-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--slrm-purple);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

.slrm-modal .slrm-map-link:hover {
    opacity: 0.7;
}

/* ---- Generic pane section wrapper (declarative PaneSections) ---- */
.slrm-modal .slrm-pane-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Serial-list pane sections must stretch to fill the pane's height so the list scrolls
   and the barcode row stays pinned at the bottom, instead of trailing after a short list. */
.slrm-modal .slrm-pane-section:has(> .slrm-serials) {
    flex: 1;
    min-height: 0;
}

/* ---- Hierarchy pane section (Linked Serials tree) ---- */
.slrm-modal .slrm-hierarchy {
    overflow-x: hidden;
}
.slrm-modal .slrm-hierarchy-leaf,
.slrm-modal .slrm-hierarchy-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    min-width: 0;
    font-size: 12.5px;
    line-height: 1.45;
}
.slrm-modal .slrm-hierarchy-branch {
    margin-top: 10px;
}
.slrm-modal .slrm-hierarchy-branch details {
    width: 100%;
    min-width: 0;
}
.slrm-modal .slrm-hierarchy-branch summary {
    cursor: pointer;
}
.slrm-modal .slrm-hierarchy-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    color: var(--slrm-text-1);
}
.slrm-modal .slrm-hierarchy-value {
    flex: 0 0 auto;
    margin-left: auto;
    padding-top: 1px;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #6314A8;
    text-align: right;
}

/* ---- Serial-list pane section ---- */
.slrm-modal .slrm-serials {
    flex: 1;
    min-height: 0;
}
.slrm-modal .slrm-serials-title {
    margin-bottom: 12px;
}
.slrm-modal .slrm-serials-search {
    position: relative;
    margin-bottom: 12px;
}
.slrm-modal .slrm-serials-search-icon {
    display: flex;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--slrm-text-muted);
    pointer-events: none;
}
.slrm-modal .slrm-serials-search .slrm-serials-search-input {
    width: 100%;
    padding-left: 22px;
    font-size: 12.5px;
}
.slrm-modal .slrm-serials-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 80px;
    scrollbar-width: thin;
    scrollbar-color: #c4c9d4 transparent;
}
.slrm-modal .slrm-serials-list::-webkit-scrollbar { width: 8px; }
.slrm-modal .slrm-serials-list::-webkit-scrollbar-track { background: transparent; }

.slrm-modal .slrm-bom {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.slrm-modal .slrm-bom-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.slrm-modal .slrm-bom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
}
.slrm-modal .slrm-bom-name {
    flex: 1;
    min-width: 100px;
}
.slrm-modal .slrm-bom-qty {
    color: var(--slrm-text-muted);
}
.slrm-modal .slrm-bom-serial {
    width: 160px;
}
.slrm-modal .slrm-bom-serial.slrm-input-error {
    border-bottom-color: var(--slrm-red) !important;
}
.slrm-modal .slrm-bom.slrm-has-error [data-slrm-bom-error] {
    display: block;
    color: var(--slrm-red);
    font-size: 12px;
}
.slrm-modal .slrm-serials-list::-webkit-scrollbar-thumb { background: #c4c9d4; border-radius: 4px; }
.slrm-modal .slrm-serial-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--slrm-border-light);
}
.slrm-modal .slrm-serial-row:last-child { border-bottom: none; }
.slrm-modal .slrm-serial-row.slrm-hidden { display: none; }
.slrm-modal .slrm-serial-text { font-size: 13px; color: var(--slrm-text-1); }
.slrm-modal .slrm-serial-row.slrm-unconfirmed .slrm-serial-text { color: var(--slrm-text-muted); font-style: italic; }
.slrm-modal .slrm-serial-remove {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 4px;
    background: #fee2e2;
    color: var(--slrm-red);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
}
.slrm-modal .slrm-serial-remove:hover { background: rgba(185, 28, 28, 0.85); color: #fff; }
.slrm-modal .slrm-serials-footer {
    flex-shrink: 0;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--slrm-border-light);
}
.slrm-modal .slrm-serials-entry {
    display: flex;
    align-items: center;
    gap: 6px;
}
.slrm-modal .slrm-serials-input {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
}
.slrm-modal .slrm-serials-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1px solid var(--slrm-border);
    border-radius: 6px;
    background: var(--slrm-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.slrm-modal .slrm-serials-btn-add { color: var(--slrm-purple); }
.slrm-modal .slrm-serials-btn-import { color: var(--slrm-text-muted); }
.slrm-modal .slrm-serials-btn-clear { color: var(--slrm-red); }
.slrm-modal .slrm-serials-btn:hover { border-color: currentColor; }
.slrm-modal .slrm-serials-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.slrm-modal .slrm-serials-error { margin-top: 8px; }
.slrm-modal .slrm-serials.slrm-has-error .slrm-serials-input {
    border-bottom-color: var(--slrm-red) !important;
}
.slrm-modal .slrm-serials.slrm-has-error .slrm-field-error {
    display: block;
}

.slrm-modal.slrm-tmpl-with-pane:has(.ls-panel) { width: 1170px; }
.slrm-modal.slrm-tmpl-with-pane:has(.ls-panel) .slrm-media-pane { width: 660px; }
.slrm-modal .ls-panel { width: 100%; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.slrm-modal .ls-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 11px; border-bottom: 1px solid var(--slrm-border-light); margin-bottom: 6px; }
.slrm-modal .ls-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.55px; color: #9199a8; }
.slrm-modal .ls-kit { display: flex; align-items: baseline; gap: 10px; padding: 9px 4px 8px; margin-bottom: 3px; border-bottom: 1px solid var(--slrm-border-light); }
.slrm-modal .ls-kit-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--slrm-text-1); display: flex; align-items: baseline; gap: 7px; white-space: nowrap; overflow: hidden; }
.slrm-modal .ls-kit-name .ls-nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.slrm-modal .ls-kit-name .ls-meta { font-size: 11px; font-weight: 500; color: var(--slrm-text-muted); }
.slrm-modal .ls-kit.current .ls-nm,
.slrm-modal .ls-kit.current .ls-serial,
.slrm-modal .ls-row.current .ls-name,
.slrm-modal .ls-row.current .ls-serial,
.slrm-modal .ls-grp.current > summary .ls-nm,
.slrm-modal .ls-grp.current > summary .ls-serial { color: var(--slrm-purple); }
.slrm-modal .ls-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.slrm-modal .ls-chip svg { width: 12px; height: 12px; }
.slrm-modal .ls-chip.ok { background: #dcfce7; color: var(--slrm-green); }
.slrm-modal .ls-chip.none { background: #eef0f3; color: var(--slrm-text-muted); }
.slrm-modal .ls-key-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 600; white-space: nowrap; background: #fef3c7; color: #b45309; margin-right: 8px; }
.slrm-modal .ls-key-badge.present { background: #dcfce7; color: var(--slrm-green); }
.slrm-modal .ls-tree { overflow-y: auto; max-height: 420px; padding: 3px 0 5px; }
.slrm-modal .ls-grp { margin: 0; }
.slrm-modal .ls-grp > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 6px 4px; cursor: pointer; user-select: none; }
.slrm-modal .ls-grp > summary::-webkit-details-marker { display: none; }
.slrm-modal .ls-chev { width: 12px; height: 12px; color: var(--slrm-text-muted); flex-shrink: 0; transition: transform .15s; }
.slrm-modal .ls-grp:not([open]) .ls-chev { transform: rotate(-90deg); }
.slrm-modal .ls-grp-name { font-size: 13.5px; font-weight: 600; color: var(--slrm-text-1); flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 7px; overflow: hidden; }
.slrm-modal .ls-grp-name .ls-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slrm-modal .ls-grp-name .ls-meta { font-size: 11px; font-weight: 500; color: var(--slrm-text-muted); white-space: nowrap; }
.slrm-modal .ls-grp-kids { padding: 0 0 3px 20px; }
.slrm-modal .ls-row { display: flex; align-items: center; gap: 10px; padding: 4px; }
.slrm-modal .ls-row.top .ls-name { font-size: 13.5px; color: var(--slrm-text-1); font-weight: 500; }
.slrm-modal .ls-stat { width: 16px; height: 16px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.slrm-modal .ls-stat svg { width: 100%; height: 100%; }
.slrm-modal .ls-stat.linked { color: var(--slrm-green); }
.slrm-modal .ls-stat.missing { color: #b9bfca; }
.slrm-modal .ls-name { flex: 1; min-width: 0; font-size: 13px; color: var(--slrm-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slrm-modal .ls-meta-inline { color: var(--slrm-text-muted); font-weight: 500; font-size: 11px; }
.slrm-modal .ls-right { margin-left: auto; flex-shrink: 0; }
.slrm-modal .ls-serial { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--slrm-text-1); max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.slrm-modal .ls-slot { font-size: 12px; color: var(--slrm-text-muted); font-weight: 500; padding-bottom: 1px; border-bottom: 1.4px dashed #c4cad4; }

.slrm-modal .slrm-import-error-row {
    display: flex;
    gap: 12px;
    padding: 5px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--slrm-border-light);
}
.slrm-modal .slrm-import-error-key {
    min-width: 130px;
    color: var(--slrm-red);
    flex-shrink: 0;
}

/* ---- Footer ---- */
.slrm-modal .slrm-modal-footer {
    padding: 14px 24px 18px;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--slrm-border-light);
    flex-shrink: 0;
    gap: 4px;
}

.slrm-modal .slrm-footer-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
}

.slrm-modal .slrm-footer-left {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* ---- Field primitives ---- */
.slrm-modal .slrm-field {
    display: flex;
    flex-direction: column;
    padding: 9px 0 1px;
}

.slrm-modal .slrm-field-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--slrm-text-1);
    text-transform: capitalize;
    letter-spacing: 0.2px;
    margin-bottom: 3px;
}

.slrm-modal .slrm-field-label .slrm-required {
    color: var(--slrm-purple);
}

/* ---- Field help tooltip (Design-System component) ---------------------------
   "i" icon after a field label (FieldDef.HelpText → FormRenderer, or
   SlrmTooltip.iconHtml from JS). The floating tip is ONE shared node that
   slrmTooltip.js appends to <body> and positions fixed on hover/focus, so it
   never clips inside scrolling modal panes and auto-flips to stay on screen.
   Unscoped (not under .slrm-modal): the icon is reusable on any page markup. */
.slrm-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    color: #9199a8;
    cursor: help;
    flex-shrink: 0;
    margin-left: 4px;
    vertical-align: text-bottom;
    outline: none;
}

.slrm-help:hover,
.slrm-help:focus-visible {
    color: #5b21b6;
}

.slrm-help svg {
    width: 13px;
    height: 13px;
    display: block;
}

.slrm-help-tip {
    position: fixed;
    z-index: 10020;
    display: none;
    width: max-content;
    max-width: 222px;
    background: #241a3d;
    color: #fff;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    padding: 7px 9px;
    border-radius: 7px;
    box-shadow: 0 6px 18px rgba(15, 10, 30, 0.22);
    pointer-events: none;
}

.slrm-help-tip.slrm-help-tip-open {
    display: block;
    animation: slrmTipIn .12s ease;
}

@keyframes slrmTipIn {
    from { opacity: 0; transform: translateY(3px); }
}

.slrm-help-tip-arrow {
    position: absolute;
    top: 100%;
    border: 5px solid transparent;
    border-top-color: #241a3d;
}

.slrm-help-tip-below .slrm-help-tip-arrow {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #241a3d;
}

/* Label + copy-to-clipboard button row (FormDef.CopyButtonField, e.g. SlowQueries' Query field) */
.slrm-modal .slrm-field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.slrm-modal .slrm-field-label-row .slrm-field-label {
    margin-bottom: 0;
}

.slrm-modal .slrm-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--slrm-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.12s, background 0.12s, border-color 0.12s;
}

.slrm-modal .slrm-copy-btn svg {
    flex: none;
}

.slrm-modal .slrm-copy-btn:hover {
    color: var(--slrm-text-1);
    background: var(--slrm-surface-2);
    border-color: var(--slrm-border);
}

.slrm-modal .slrm-input,
.slrm-modal .slrm-select,
.slrm-modal .slrm-date,
.slrm-modal .slrm-textarea {
    width: 100%;
    padding: 2px 0 4px;
    border-radius: 0;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--slrm-text-1);
    background: transparent;
    outline: none;
}

.slrm-modal .slrm-input,
.slrm-modal .slrm-select,
.slrm-modal .slrm-date,
.slrm-modal .slrm-textarea,
table.sortable thead input[type="text"]:not(.input-error),
table.sortable thead select:not(.select-error) {
    border: none !important;
    border-bottom: var(--input-underline) !important;
    transition: border-color 0.15s;
}

.slrm-modal .slrm-textarea {
    resize: none;
    min-height: 52px;
    line-height: 1.5;
}

/* Uniform control height so every field row lines up regardless of type. Each control
   otherwise sized to its own intrinsic box — a bare input's line-box, a native select's
   intrinsic height, or (autocomplete/date) the flex-wrapper sized by its taller icon button —
   so mixed-type rows had misaligned underlines. One height on every single-line variant makes
   the bottom borders share a baseline. Scoped to .slrm-fields-grid (record forms); textarea
   (multi-line) and checkbox are intentionally excluded. */
.slrm-modal .slrm-fields-grid .slrm-input,
.slrm-modal .slrm-fields-grid .slrm-select,
.slrm-modal .slrm-fields-grid .slrm-date,
.slrm-modal .slrm-fields-grid .slrm-field-value,
.slrm-modal .slrm-fields-grid .bina-complete-wrapper,
.slrm-modal .slrm-fields-grid .slrm-date-wrap,
.slrm-modal .slrm-fields-grid .slrm-call-wrap {
    box-sizing: border-box;
    height: 30px;
}

.slrm-modal .slrm-fields-grid .bina-complete-wrapper .slrm-input,
.slrm-modal .slrm-fields-grid .slrm-date-wrap .slrm-input,
.slrm-modal .slrm-fields-grid .slrm-call-wrap .slrm-input {
    height: 100%;
}

.slrm-modal .slrm-input:focus,
.slrm-modal .slrm-select:focus,
.slrm-modal .slrm-date:focus,
.slrm-modal .slrm-textarea:focus,
table.sortable thead input[type="text"]:not(.input-error):focus,
table.sortable thead select:not(.select-error):focus {
    border-bottom-color: var(--input-underline-focus) !important;
}

/* Default.css forces every placeholder to 16px !important; inherit keeps it at the input's size. */
.slrm-modal input::placeholder,
.slrm-modal textarea::placeholder,
.slrm-modal input::-webkit-input-placeholder,
.slrm-modal textarea::-webkit-input-placeholder {
    color: #d1d5db;
    font-size: inherit !important;
    font-family: inherit;
}

/* header/filters selects: appearance none also stops Chrome's native-select hover repaint that nudged the text down */
.slrm-modal .slrm-select,
table.sortable thead select,
.thf-select {
    appearance: none;
    cursor: pointer;
    padding-right: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c4c9d4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
}


.slrm-modal .comm-lang-display {
    box-sizing: border-box;
    height: 30px;
    padding: 2px 18px 4px 0;
    border-bottom: var(--input-underline);
    font-size: 13.5px;
    color: var(--slrm-text-1);
    transition: border-color 0.15s;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c4c9d4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
}

.slrm-modal .comm-lang-arrow {
    display: none;
}

.slrm-modal .comm-lang-text {
    font-size: 13.5px;
    color: var(--slrm-text-1);
}

.slrm-modal .comm-lang-text.comm-lang-placeholder {
    color: #d1d5db;
}

.slrm-modal .comm-lang-ms.is-open .comm-lang-display {
    border-bottom-color: var(--input-underline-focus);
}

.slrm-modal .comm-lang-readonly .comm-lang-display {
    border-bottom-color: transparent;
}

/* Autocomplete (binaComplete) wraps .slrm-input in .bina-complete-wrapper and appends a
   dropdown-icon button after the input. The underline lived on the input alone, so it stopped
   before the icon. Move it onto the wrapper (input drops its own border) so it spans the full
   field width, under the icon too. The icon button's own glyph/background is left untouched. */
.slrm-modal .bina-complete-wrapper {
    display: flex !important;
    float: none !important;
    align-items: center;
    width: 100% !important;
    /* No position:relative here — the suggestions list is absolutely positioned and its top is
       computed via .position() against the existing offset parent; making the wrapper the offset
       parent would collapse that top and misplace the list. */
    border-bottom: var(--input-underline);
    transition: border-color 0.15s;
}
table.sortable thead .bina-complete-wrapper {
    border-bottom: var(--input-underline);
    transition: border-color 0.15s;
}
.slrm-modal .bina-complete-wrapper:focus-within,
table.sortable thead .bina-complete-wrapper:focus-within {
    border-bottom-color: var(--input-underline-focus);
}
.slrm-modal .bina-complete-wrapper .slrm-input,
table.sortable thead .bina-complete-wrapper input[type="text"] {
    border-bottom: none !important;
    flex: 1 1 auto;
    min-width: 0;
}
.slrm-modal .bina-complete-wrapper .input-group-btn,
table.sortable thead .bina-complete-wrapper .input-group-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    /* BinaComplete.css puts a border-bottom on .input-group-btn — with the underline now on the
       wrapper that shows as a second line under the icon. Drop it (the caret is a bg image). */
    border-bottom: none !important;
}
.slrm-modal .slrm-field.slrm-has-error .bina-complete-wrapper,
table.sortable thead .bina-complete-wrapper:has(.input-error) {
    border-bottom-color: var(--slrm-red);
}

.slrm-modal .bina-complete-wrapper .dropdown-menu-button,
.slrm-modal .bina-complete-wrapper .dropdown-menu-button:hover,
table.sortable thead .bina-complete-wrapper .dropdown-menu-button,
table.sortable thead .bina-complete-wrapper .dropdown-menu-button:hover {
    appearance: none;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23c4c9d4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat;
    background-position: right 2px center;
    background-size: 10px 6px;
}

/* Date field: text input + calendar button share one underline (like the autocomplete). The
   Dynarch (JSCal2) popup is wired in slrmEditForm.initFields. */
.slrm-modal .slrm-date-wrap {
    display: flex;
    align-items: center;
    width: 100%;
}
.slrm-modal .slrm-date-wrap,
table.sortable thead .data-box {
    border-bottom: var(--input-underline);
    transition: border-color 0.15s;
}
.slrm-modal .slrm-date-wrap:focus-within,
table.sortable thead .data-box:focus-within {
    border-bottom-color: var(--input-underline-focus);
}
.slrm-modal .slrm-date-wrap .slrm-input,
table.sortable thead .data-box input[type="text"] {
    border-bottom: none !important;
    flex: 1 1 auto;
    min-width: 0;
}
.slrm-modal .slrm-date-btn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--slrm-text-2);
}
.slrm-modal .slrm-date-btn:hover {
    color: var(--slrm-purple);
}
.slrm-modal .slrm-field.slrm-has-error .slrm-date-wrap,
table.sortable thead .data-box:has(.input-error) {
    border-bottom-color: var(--slrm-red);
}

/* Range field: one label over both bounds, the two controls side by side with a static "to"
   between them. Two markups, one look — FieldDef.Range in the edit form (.slrm-range) and
   kind:'range' in the action popup (.slrm-af-range-*). Each side keeps the full control chrome
   of its own type, so a date range gets two calendar buttons and a numeric range two plain
   underlined inputs. */
.slrm-modal .slrm-range,
.slrm-af-range-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
}

.slrm-modal .slrm-range-side,
.slrm-af-range-field {
    flex: 1 1 0;
    min-width: 0;
}

.slrm-modal .slrm-range-sep,
.slrm-af-range-sep {
    flex: 0 0 auto;
    font-size: 11.5px;
    line-height: 1;
    color: var(--slrm-text-hint);
    user-select: none;
}

.slrm-modal .slrm-field-range.slrm-has-error .slrm-range-sep,
.slrm-af.slrm-has-error .slrm-af-range-sep {
    color: var(--slrm-red);
}

.DynarchCalendar-topCont {
    z-index: 10010 !important;
}

.slrm-modal .slrm-field-value {
    font-size: 13.5px;
    color: var(--slrm-text-2);
    padding: 2px 0 4px;
    border-bottom: var(--input-underline-width) solid transparent;
    min-height: 22px;
}

.slrm-modal .slrm-field-value.slrm-sa-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom-color: var(--input-underline-color);
}

.slrm-modal .slrm-check {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.slrm-modal .slrm-check input {
    width: 14px;
    height: 14px;
    accent-color: var(--slrm-purple);
    cursor: pointer;
}

/* ---- Buttons ---- */
.slrm-modal .slrm-btn-primary {
    padding: 7px 20px;
    background: var(--slrm-purple);
    color: white;
    border: none;
    border-radius: 7px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.slrm-modal .slrm-btn-primary:hover {
    background: var(--slrm-purple-hover);
}

.slrm-modal .slrm-btn-success {
    padding: 7px 20px;
    background: var(--slrm-green);
    color: white;
    border: none;
    border-radius: 7px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.slrm-modal .slrm-btn-success:hover {
    background: #166534;
}

.slrm-modal .slrm-btn-danger {
    padding: 7px 20px;
    background: var(--slrm-red);
    color: white;
    border: none;
    border-radius: 7px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.slrm-modal .slrm-btn-danger:hover {
    background: #991b1b;
}

.slrm-modal .slrm-btn-text {
    padding: 7px 11px;
    background: transparent;
    border: none;
    border-radius: 7px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}

.slrm-modal .slrm-btn-cancel {
    color: var(--slrm-text-muted);
}

.slrm-modal .slrm-btn-cancel:hover {
    color: var(--slrm-text-1);
    background: var(--slrm-surface-2);
}

.slrm-modal .slrm-btn-reject {
    color: #b45309;
}

.slrm-modal .slrm-btn-reject:hover {
    background: #fef3c7;
}

.slrm-modal .slrm-btn-return {
    color: var(--slrm-red);
}

.slrm-modal .slrm-btn-return:hover {
    background: #fee2e2;
}

.slrm-modal .slrm-btn-text.slrm-btn-color-red {
    color: var(--slrm-red);
}

.slrm-modal .slrm-btn-text.slrm-btn-color-red:hover {
    background: var(--slrm-red-bg);
}

.slrm-modal .slrm-btn-text.slrm-btn-color-amber {
    color: var(--slrm-amber-link);
}

.slrm-modal .slrm-btn-text.slrm-btn-color-amber:hover {
    background: var(--slrm-amber-bg);
}

/* ---- Error states ---- */
.slrm-modal .slrm-field.slrm-has-error .slrm-input,
.slrm-modal .slrm-field.slrm-has-error .slrm-select,
.slrm-modal .slrm-field.slrm-has-error .slrm-date,
.slrm-modal .slrm-field.slrm-has-error .slrm-textarea {
    border-bottom-color: var(--slrm-red) !important;
}

.slrm-modal .slrm-field.slrm-has-error .slrm-field-label {
    color: var(--slrm-red);
}

.slrm-modal .slrm-field-error {
    font-size: 11px;
    color: var(--slrm-red);
    margin-top: 3px;
    line-height: 1.3;
    display: none;
}

.slrm-modal .slrm-field.slrm-has-error .slrm-field-error {
    display: block;
}

.slrm-modal .slrm-form-error {
    display: none;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    background: #fff1f1;
    border-top: 1px solid #fecaca;
    border-bottom: 1px solid #fecaca;
    flex-shrink: 0;
}

.slrm-modal .slrm-form-error.slrm-show {
    display: flex;
}

.slrm-modal .slrm-form-error svg {
    color: var(--slrm-red);
    flex-shrink: 0;
    margin-top: 1px;
}

.slrm-modal .slrm-form-error-text {
    font-size: 12.5px;
    color: var(--slrm-red);
    line-height: 1.4;
}

/* ---- Confirmation (destructive) tone for compact template ---- */
.slrm-modal .slrm-warning-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fef3c7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 4px 0 2px;
}

.slrm-modal .slrm-warning-text {
    font-size: 13.5px;
    color: var(--slrm-text-2);
    line-height: 1.6;
    padding: 4px 0 8px;
}

.slrm-modal .slrm-warning-text strong {
    color: var(--slrm-text-1);
    font-weight: 500;
}

/* ---- Disabled fields: drop the underline (kept transparent, not removed, so the fixed
   control height and row alignment are preserved). slrmEditForm.initFields stamps
   .slrm-field-disabled on the field whose control is disabled, so this covers both bare
   controls and the autocomplete/date/call wrappers (whose border lives on the wrapper, not
   the input) without relying on :has(). ---- */
.slrm-modal .slrm-field-disabled .slrm-input,
.slrm-modal .slrm-field-disabled .slrm-select,
.slrm-modal .slrm-field-disabled .slrm-date,
.slrm-modal .slrm-field-disabled .slrm-textarea,
.slrm-modal .slrm-field-disabled .bina-complete-wrapper,
.slrm-modal .slrm-field-disabled .slrm-date-wrap,
.slrm-modal .slrm-field-disabled .slrm-call-wrap {
    border-bottom-color: transparent !important;
    cursor: default;
}

/* ---- Read-only (view) mode: neutralise focus affordances ---- */
.slrm-modal.slrm-view-mode .slrm-input,
.slrm-modal.slrm-view-mode .slrm-select,
.slrm-modal.slrm-view-mode .slrm-date,
.slrm-modal.slrm-view-mode .slrm-textarea {
    cursor: default;
}

/* ============================================================================
   Photo lightbox template (SlrmModal.lightbox) — minimal header with a
   position counter, dark image stage with overlay prev/next arrows, and a
   thumbnail strip. No footer.
   ============================================================================ */
.slrm-modal.slrm-tmpl-lightbox {
    width: min(1130px, calc(100vw - 48px));
    height: 92vh;
    max-height: 92vh;
}

.slrm-modal.slrm-tmpl-lightbox .slrm-modal-header {
    padding: 12px 16px;
}

.slrm-modal.slrm-tmpl-lightbox .slrm-modal-title {
    font-size: 14px;
}

.slrm-modal.slrm-tmpl-lightbox .slrm-modal-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.slrm-modal.slrm-tmpl-lightbox .slrm-modal-footer {
    display: none;
}

/* Counter + rotate grouped with the close button on the header's right */
.slrm-lightbox-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slrm-lightbox-count {
    font-size: 12px;
    color: var(--slrm-text-muted);
}

.slrm-lightbox-rotate {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--slrm-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.slrm-lightbox-rotate:hover {
    background: var(--slrm-surface-2);
    color: var(--slrm-text-1);
}

.slrm-lightbox-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.slrm-lightbox-stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    cursor: zoom-in;
}

.slrm-lightbox-stage img.slrm-zoomed {
    cursor: zoom-out;
}

.slrm-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}

.slrm-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.3);
}

.slrm-lightbox-nav[data-nav="-1"] { left: 12px; }
.slrm-lightbox-nav[data-nav="1"]  { right: 12px; }

.slrm-lightbox-thumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-top: 1px solid var(--slrm-border-light);
    background: var(--slrm-surface);
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: thin;
}

.slrm-lightbox-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid transparent;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.15s;
}

.slrm-lightbox-thumb:hover {
    opacity: 1;
}

.slrm-lightbox-thumb.slrm-marked {
    border-color: var(--slrm-green);
}

.slrm-lightbox-thumb.slrm-active {
    border-color: var(--slrm-purple);
    opacity: 1;
}

.slrm-lightbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================================
   Adopted map dialogs (SlrmForms.dialog cfg className: 'slrm-map-modal') —
   the host carries a fixed-size Google Map, so the body hugs it edge-to-edge
   instead of adding form padding (which forced overflow scrollbars).
   ============================================================================ */
.slrm-modal.slrm-map-modal {
    height: 72vh;
}

/* minimal header (Map Template A — fullscreen single account) */
.slrm-modal.slrm-map-modal .slrm-modal-header {
    padding: 12px 16px;
}

.slrm-modal.slrm-map-modal .slrm-modal-title {
    font-size: 14px;
}

.slrm-modal.slrm-map-modal .slrm-modal-body {
    padding: 0;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.slrm-modal.slrm-map-modal .map-dialog {
    display: flex !important;
    height: 100%;
}

/* The inline px sizes on the canvas/panel serve the legacy jQuery-UI dialog;
   inside the modal the canvas flexes to fill and the panel is fixed at 240px
   (Map Template B — split). */
.slrm-modal.slrm-map-modal .slrm-map-canvas {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    flex: 1;
    min-width: 0;
}

.slrm-modal.slrm-map-modal .slrm-mapinfo {
    width: 240px !important;
    height: auto !important;
    flex-shrink: 0;
}

/* split template: the info panel owns title + close, so no standard header */
.slrm-modal.slrm-map-split .slrm-modal-header {
    display: none;
}

.slrm-modal.slrm-map-modal .slrm-modal-footer {
    display: none;
}

/* The hand-rolled "x" inside .map-dialog hosts is jQuery-UI-era chrome
   (that design hides the real titlebar close); the modal header has its own. */
.slrm-modal .map-dialog-x {
    display: none;
}

/* ----------------------------------------------------------------------------
   Map info panel (Map Template B — the split map's right-hand sidebar). Class-
   based so the new-design modal and the legacy dialog share one markup; the
   host div lives in the _V page (adopted by SlrmForms.dialog).
   Hardcoded hex (not --slrm-* vars) on purpose: the same markup renders in the
   legacy jQuery-UI dialog, which is OUTSIDE .slrm-modal where those vars live,
   so var() would not resolve there.
   ---------------------------------------------------------------------------- */
.slrm-mapinfo {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border-left: 1px solid #edf0f4;
}

.slrm-mapinfo-head {
    padding: 16px 18px;
    border-bottom: 1px solid #edf0f4;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

/* lets long names shrink instead of pushing the close button out */
.slrm-mapinfo-head > div:first-child {
    min-width: 0;
}

.slrm-mapinfo-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #1a1d23;
    overflow-wrap: break-word;
}

.slrm-mapinfo-sub {
    font-size: 13px;
    color: #52596b;
    margin-top: 2px;
    overflow-wrap: break-word;
}

.slrm-mapinfo-close {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #9199a8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.slrm-mapinfo-close:hover {
    background: #f7f8fa;
    color: #1a1d23;
}

.slrm-mapinfo-body {
    padding: 14px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.slrm-mapinfo-lbl {
    font-size: 12.5px;
    font-weight: 600;
    color: #1a1d23;
    text-transform: capitalize;
    letter-spacing: 0.2px;
    margin-bottom: 6px;
}

.slrm-mapinfo-radius {
    display: flex;
    align-items: center;
    gap: 8px;
}

.slrm-mapinfo-radius input {
    width: 60px;
    font-size: 13.5px;
    padding: 5px 8px;
    border: 1px solid #e3e6ec;
    border-radius: 7px;
    text-align: center;
}

.slrm-mapinfo-radius span {
    font-size: 13px;
    color: #9199a8;
}

.slrm-mapinfo-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.slrm-mapinfo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

.slrm-mapinfo-row span:first-child {
    color: #52596b;
}

.slrm-mapinfo-row span:last-child {
    font-weight: 500;
    color: #1a1d23;
}

.slrm-mapinfo-legend {
    margin-top: auto;
    padding: 12px 14px;
    border: 1px solid #edf0f4;
    border-radius: 8px;
    background: #f7f8fa;
}

.slrm-mapinfo-legend-title {
    font-size: 10.5px;
    font-weight: 600;
    color: #1a1d23;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}

.slrm-mapinfo-legend-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.slrm-mapinfo-legend-row + .slrm-mapinfo-legend-row {
    margin-top: 5px;
}

.slrm-mapinfo-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.slrm-mapinfo-legend-row span:last-child {
    font-size: 12.5px;
    color: #52596b;
}

/* ============================================================================
   Template D — Action popup (SlrmForms.action): single-column, task-focused
   popups (export / import / give-free…). Rendered by slrmForms.js from a field
   schema; new-design only (the legacy branch uses the jQuery-UI dialog skin).
   Ported from solrm-popups.html "Template D — Action".
   ============================================================================ */
.slrm-modal.slrm-tmpl-action {
    width: 440px;
}

.slrm-modal.slrm-tmpl-action .slrm-modal-body {
    display: block;
    padding: 8px 24px;
    overflow-y: auto;
    flex: 1;
}

/* Action field row (label above control) */
.slrm-af {
    display: flex;
    flex-direction: column;
    padding: 10px 0 2px;
}

.slrm-af-lbl {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--slrm-text-1);
    text-transform: capitalize;
    letter-spacing: 0.2px;
    margin-bottom: 4px;
}

.slrm-af input[type="text"],
.slrm-af input[type="number"],
.slrm-af input[type="date"],
.slrm-af select,
.slrm-af textarea {
    width: 100%;
    padding: 2px 0 4px;
    /* !important defeats global input-border rules that otherwise box the control inside the
       modal. More specific rules (.complete-select, .slrm-date-wrap .slrm-input) still strip even
       the bottom border so wrapped controls show only their wrapper's single underline. */
    border: none !important;
    border-bottom: var(--input-underline) !important;
    border-radius: 0;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--slrm-text-1);
    background: transparent;
    outline: none;
    transition: border-color 0.15s;
}

.slrm-af input:focus,
.slrm-af select:focus,
.slrm-af textarea:focus {
    border-bottom-color: var(--input-underline-focus);
}

.slrm-af select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 18px;
    background-image: url("data:image/svg+xml,%3Csvg%20width='10'%20height='6'%20viewBox='0%200%2010%206'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M1%201l4%204%204-4'%20stroke='%23c4c9d4'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px center;
}

.slrm-af textarea {
    resize: none;
    min-height: 80px;
    line-height: 1.5;
}

/* Autocomplete (binaComplete) inside an action popup. The input carries `complete-select`
   (+ slrm-input); binaComplete wraps it in .bina-complete-wrapper, which already gets the
   shared underline. Kill the input's OWN box border so the field shows a single underline
   (not a full box drawn around the whole control). */
.slrm-modal .slrm-af .bina-complete-wrapper .complete-select,
.slrm-modal .slrm-af .complete-select,
.slrm-modal .bina-complete-wrapper input[type="text"].complete-select {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 2px 0 4px;
}

/* Date field (kind:'date') — reuses the .slrm-date-wrap chrome; adds an optional
   free-typed time input to the right of the calendar button for datetime ranges. */
.slrm-modal .slrm-af-date {
    margin-top: 2px;
}
/* Date box inside a From/Until range cell fills the cell width. */
.slrm-modal .slrm-af-range-field .slrm-af-date {
    width: 100%;
    margin-top: 0;
}
.slrm-modal .slrm-af-date .slrm-af-time {
    flex: 0 0 54px;
    width: 54px;
    text-align: center;
    padding-left: 6px;
}

/* Checkbox field (inline) */
.slrm-af-check {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
}

.slrm-af-check input {
    width: 14px;
    height: 14px;
    accent-color: var(--slrm-purple);
    cursor: pointer;
    flex-shrink: 0;
}

.slrm-af-check label {
    font-size: 13px;
    color: var(--slrm-text-2);
    cursor: pointer;
}

/* File picker */
.slrm-af-file {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.slrm-af-file-btn {
    padding: 5px 12px;
    background: var(--slrm-surface-2);
    border: 1px solid var(--slrm-border);
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--slrm-text-2);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}

.slrm-af-file-btn:hover {
    border-color: var(--slrm-purple);
    color: var(--slrm-purple);
}

.slrm-af-file-name {
    font-size: 12.5px;
    color: var(--slrm-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Info rows (import field-list hints) */
.slrm-af-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 0;
}

.slrm-af-info-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.slrm-af-info-row > span {
    font-size: 12px;
    color: var(--slrm-text-muted);
    /* Collapsed to 2 lines by default; the Show toggle expands it (matches the legacy
       compact-span + Show behaviour on the import descriptions). */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.slrm-af-info-row.slrm-af-info-expanded > span {
    -webkit-line-clamp: unset;
    overflow: visible;
}

.slrm-af-show {
    font-size: 12px;
    color: var(--text-muted);
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
    flex-shrink: 0;
    padding: 0;
}

.slrm-af-show:hover {
    color: var(--primary-purple);
}

/* Field-level error */
.slrm-af.slrm-has-error input,
.slrm-af.slrm-has-error select,
.slrm-af.slrm-has-error textarea {
    border-bottom-color: var(--slrm-red) !important;
}

.slrm-af.slrm-has-error .slrm-af-lbl {
    color: var(--slrm-red);
}

.slrm-af.slrm-has-error .slrm-call-wrap,
.slrm-af.slrm-has-error .bina-complete-wrapper {
    border-bottom-color: var(--slrm-red);
}

.slrm-af-error {
    font-size: 11.5px;
    color: var(--slrm-red);
    margin-top: 4px;
    display: none;
}

.slrm-af.slrm-has-error .slrm-af-error {
    display: block;
}

/* Post-submit result text (import counts, etc.) */
.slrm-af-result {
    font-size: 13px;
    color: var(--slrm-text-2);
    line-height: 1.6;
    padding: 8px 0;
    white-space: pre-line;
}

/* ---- List popups: flush table inside the modal body (Revenue Recognition) ---- */
.slrm-modal.slrm-list-modal .slrm-modal-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.slrm-modal .slrm-list-summary {
    padding: 8px 24px;
    flex-shrink: 0;
}
.slrm-modal .slrm-list-scroll {
    overflow-x: auto;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #c4c9d4 transparent;
}
.slrm-modal .slrm-list-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.slrm-modal .slrm-list-scroll::-webkit-scrollbar-thumb { background: #c4c9d4; border-radius: 99px; }
.slrm-modal .slrm-list-scroll::-webkit-scrollbar-corner { background: transparent; }
.slrm-modal .slrm-list-table {
    width: 100%;
    border-collapse: collapse;
}
.slrm-modal .slrm-list-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-header);
    text-transform: uppercase;
    letter-spacing: 0.55px;
    white-space: nowrap;
    user-select: none;
    background: var(--surface);
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.slrm-modal .slrm-list-table thead th.slrm-list-r {
    text-align: right;
}
.slrm-modal .slrm-list-table tbody tr {
    border-bottom: 1px solid var(--border-light);
}
.slrm-modal .slrm-list-table tbody tr:last-child {
    border-bottom: none;
}
.slrm-modal .slrm-list-table tbody td {
    padding: 9px 14px;
    font-size: 13px;
    color: var(--text-1);
    white-space: nowrap;
    vertical-align: middle;
}
.slrm-modal .slrm-list-table tbody td.slrm-list-n {
    text-align: right;
    font-size: 12.5px;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}
.slrm-modal .slrm-list-table th:first-child,
.slrm-modal .slrm-list-table td:first-child {
    padding-left: 24px;
}
.slrm-modal .slrm-list-table th:last-child,
.slrm-modal .slrm-list-table td:last-child {
    padding-right: 24px;
}