/**
 * skydb-modal.css — shell styling for the central .skydb-popup modal.
 * Visual reference: phorio.com popup_window manageobjectdata.
 *
 * Phorio header is a single 36px row with: small icon · title · close X.
 * Body padding 0 so the legacy template's #edit_content grid fills it.
 * Modal sits centered on the viewport (NOT pushed down by the WP admin bar).
 *
 * Brand color: every accent (header bar, primary buttons, links, focus
 * highlights, selection) uses `var(--bs-primary)` — Bootstrap's CSS
 * variable that's compiled from `$primary` in
 * `src/sass/theme/child_theme_variables.scss`. Change `$primary` once and
 * the whole modal palette follows. Don't introduce hex literals here.
 */

/* ---------------------------------------------------------------- modal:
 * Force the .modal container to fill the actual viewport, regardless of
 * the WP admin-bar's `html { margin-top:32px }` shift that otherwise pulls
 * fixed elements down. Bootstrap defaults this but we re-assert. */
.skydb-popup.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Ensure the dialog inside is centered both axes — Bootstrap's
 * .modal-dialog-centered class handles vertical via flex; we just need
 * .modal as the flex container. */
.skydb-popup .modal-dialog {
    margin: auto !important;
    display: flex;
    align-items: center;
    min-height: 100%;
}
@media (min-width: 960px) {
    .skydb-popup .modal-dialog { max-width: 920px; }
}

/* Stacked-modal offset: the parent modal stays visible behind the child so
 * the user sees the stack depth. Driven by data-skydb-stack-pos which
 * skydb-modal.js sets to the modal's position in the live stack (1, 2, 3…).
 * Position 1 (the only or bottom-most modal) gets no offset so it stays
 * dead-center — important on narrow viewports. */
.skydb-popup[data-skydb-stack-pos="2"] .modal-dialog { transform: translate(20px, 20px); }
.skydb-popup[data-skydb-stack-pos="3"] .modal-dialog { transform: translate(40px, 40px); }
.skydb-popup[data-skydb-stack-pos="4"] .modal-dialog { transform: translate(60px, 60px); }
.skydb-popup[data-skydb-stack-pos="5"] .modal-dialog { transform: translate(80px, 80px); }
.skydb-popup[data-skydb-stack-pos="6"] .modal-dialog { transform: translate(100px, 100px); }
.skydb-popup[data-skydb-stack-pos="7"] .modal-dialog { transform: translate(120px, 120px); }
.skydb-popup[data-skydb-stack-pos="8"] .modal-dialog { transform: translate(140px, 140px); }
.skydb-popup[data-skydb-stack-pos="9"] .modal-dialog { transform: translate(160px, 160px); }
/* Skip the offset on small viewports — every pixel of horizontal real
 * estate is precious. Stacked modals on mobile are already disambiguated
 * by their backdrops. */
@media (max-width: 760px) {
    .skydb-popup[data-skydb-stack-pos] .modal-dialog { transform: none !important; }
}

/* ------------------------------------------------------------ shell */
.skydb-popup .modal-content {
    background-color: #eeeeee;
    color: #222;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}

/* --------------------------- header: single row, title vertically centred */
.skydb-popup .modal-header {
    background-color: var(--bs-primary);
    color: #ffffff;
    border: 0;
    padding: 12px 20px;     /* match Phorio's larger header padding */
    min-height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}
.skydb-popup .modal-header .modal-title {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    margin: 0;
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.skydb-popup .modal-header .btn-close {
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    padding: 0;
    width: 18px;
    height: 18px;
    background-size: 12px 12px;
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.9;
}
.skydb-popup .modal-header .btn-close:hover { opacity: 1; }

/* Side-toggle button: hidden on desktop (right panel always visible),
 * shown on narrow viewports as a "Toggle details" button so the right
 * panel can be revealed as a slide-in overlay. */
.skydb-popup .modal-header .skydb-side-toggle { display: none; }
@media (max-width: 959px) {
    .skydb-popup .modal-header .skydb-side-toggle {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: rgba(255,255,255,0.18);
        border: 1px solid rgba(255,255,255,0.4);
        color: #fff;
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 3px;
        cursor: pointer;
    }
    .skydb-popup .modal-header .skydb-side-toggle:hover { background: rgba(255,255,255,0.28); }
}

.skydb-popup .modal-body { padding: 0; }

/* manageobjectdata field-table column widths — the "value" column needs
 * to be wider than the "data field" column so the inputs don't sit
 * uncomfortably far right inside the modal. Browser default would size
 * the columns ~50/50; we shift the input column ~40px to the LEFT by
 * narrowing the label column accordingly.
 *
 *   col 1 .skydb-field-label  → 30% (data-field name; short labels)
 *   col 2 (no class)          → auto-fill, gets the width back
 *   col 3 .skydb-field-source → 32px fixed (the trailing tool icon)
 */
.skydb-popup .skydb-field-table {
    width: 100%;
    table-layout: fixed;
}
.skydb-popup .skydb-field-table th.skydb-field-label,
.skydb-popup .skydb-field-table td.skydb-field-label {
    width: 30%;
}
.skydb-popup .skydb-field-table th.skydb-field-source,
.skydb-popup .skydb-field-table td.skydb-field-source {
    width: 32px;
}
.skydb-popup .skydb-field-input {
    width: 100%;
}

/* jQuery autocomplete dropdown — the plugin appends .acResults to
 * <body> with position:absolute and no z-index, so by default it
 * renders BEHIND the Bootstrap modal (z 1055+). Bump it above the
 * modal so the suggestions are actually visible while the modal is
 * open. */
body > .acResults {
    z-index: 11000 !important;
    background: #fff;
    border: 1px solid #aaa;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    max-height: 240px;
    overflow-y: auto;
    font-size: 13px;
}
body > .acResults ul { margin: 0; padding: 0; list-style: none; }
body > .acResults li { padding: 4px 8px; cursor: pointer; }
body > .acResults li.acHighlight,
body > .acResults li:hover { background: var(--bs-primary); color: #fff; }

/* Phorio's #edit_tool is the category-tree / color-picker / map-picker
 * popup opened by the inline tool icons next to each data row. Legacy
 * code centers it via a jQuery plugin (.fixedCenter()) we no-op'd in
 * skydb-modal.js, so we position it here ourselves.
 *
 * Visual reference (Phorio popup_window):
 *   - dark gray panel (#333) with green header bar
 *   - body shows the cat_cat tree as side-by-side columns; the active
 *     column has a lavender (#dcd9ee) background, others stay dark
 *   - footer is dark with the running "selected value" text + Cancel/Select
 *
 * Centred over .modal-body via position:absolute (modal-body is the
 * nearest positioned ancestor — Bootstrap default). */
.skydb-popup #edit_tool {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 320px;
    max-width: 90%;
    max-height: 85%;
    background: #333;
    color: #fff;
    border-radius: 8px;
    padding: 0;
    z-index: 10013;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: none;                   /* shown via $('#edit_tool').show() */
    flex-direction: column;
    overflow: hidden;                /* rounded corners clip cleanly */
}
.skydb-popup #edit_tool[style*="display: block"],
.skydb-popup #edit_tool[style*="display:block"] {
    display: flex !important;        /* re-cast the inline display:block */
}
.skydb-popup #edit_tool #edit_tool_header {
    background: var(--bs-primary);
    height: auto !important;
    padding: 8px 12px !important;
    flex: 0 0 auto;
}
.skydb-popup #edit_tool #edit_tool_header_left {
    color: #fff;
    padding: 0 !important;
    font-weight: 400;
    line-height: 1.3;
    float: none !important;
}
.skydb-popup #edit_tool #edit_tool_header_left strong {
    font-weight: 700;
}
.skydb-popup #edit_tool #edit_tool_header_right {
    padding: 0 !important;
    margin-left: 12px;
}
.skydb-popup #edit_tool #edit_tool_content {
    /* Body of the tool — for the category tree it gets .cat_cat added by
     * toolCategory(). Stay dark by default; .cat_cat columns inside paint
     * their own lavender background. */
    background: transparent;
    color: #fff;
    padding: 12px !important;
    flex: 1 1 auto;
    overflow: auto;
    min-height: 60px;
}
.skydb-popup #edit_tool #edit_tool_selected {
    background: #2a2a2a;
    color: #ccc;
    padding: 6px 12px !important;
    font-size: 13px;
    flex: 0 0 auto;
}
.skydb-popup #edit_tool #edit_tool_selected_value {
    color: #fff;
}
.skydb-popup #edit_tool #edit_tool_footer {
    background: #2a2a2a;
    padding: 10px 12px !important;
    min-height: 48px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.skydb-popup #edit_tool #edit_tool_footer > div {
    float: none !important;
    margin: 0 !important;
    display: flex;
    gap: 8px;
}
.skydb-popup #edit_tool .closeicon {
    width: 14px;
    height: 14px;
    cursor: pointer;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%23fff' d='M4.7 3.3 8 6.6l3.3-3.3 1.4 1.4L9.4 8l3.3 3.3-1.4 1.4L8 9.4l-3.3 3.3-1.4-1.4L6.6 8 3.3 4.7z'/></svg>") center/contain no-repeat;
}

/* Category tree (.cat_cat) — cascading lavender columns, one per level.
 * Phorio renders columns as <div class="level_2|level_3|…"> with item divs
 * inside. JS shows the leftmost column on open and reveals deeper columns
 * as the user drills down. */
.skydb-popup #edit_tool_content.cat_cat {
    display: flex !important;
    align-items: stretch;
    gap: 1px;
    background: #333;
    padding: 0 !important;
}
.skydb-popup #edit_tool_content.cat_cat > div {
    background: #dcd9ee;             /* lavender column */
    color: #222;
    padding: 4px 0;
    min-width: 140px;
    max-height: 360px;
    overflow-y: auto;
}
.skydb-popup #edit_tool_content.cat_cat > div > div {
    padding: 4px 28px 4px 12px;       /* room for the right-arrow / plus */
    cursor: pointer;
    position: relative;
    line-height: 1.3;
    font-size: 13px;
}
.skydb-popup #edit_tool_content.cat_cat > div > div:hover,
.skydb-popup #edit_tool_content.cat_cat > div > div.activefield {
    background: #c9c4e0;
    font-weight: 700;
}
/* Suppress the legacy inline background-image set by toolCategory() — it
 * points to /cfiles/images/icons/arrow_right_peppermint.png which we
 * don't ship; the pseudo-elements below render the indicators instead. */
.skydb-popup #edit_tool_content.cat_cat > div > div {
    background-image: none !important;
}
/* Non-leaf items (no data-final="t") → small green right-arrow */
.skydb-popup #edit_tool_content.cat_cat > div > div:not([data-final="t"]):after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-style: solid;
    border-width: 4px 0 4px 5px;
    border-color: transparent transparent transparent var(--bs-primary);
}
/* Leaf items (data-final="t") → green "select" plus circle */
.skydb-popup #edit_tool_content.cat_cat > div > div[data-final="t"]:after {
    content: "";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bs-primary) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%23fff' d='M5 2h2v3h3v2H7v3H5V7H2V5h3z'/></svg>") center/8px no-repeat;
}

/* Hand cursor on every interactive icon in the modal so it's obvious they
 * can be clicked. Covers all <img>s inside #datarow / #edit_content (legacy
 * uses raster icons everywhere — none are purely decorative) and the known
 * clickable helper classes (.jslink, .cursor-pointer). */
.skydb-popup #edit_content img,
.skydb-popup #datarow img,
.skydb-popup .jslink,
.skydb-popup .cursor-pointer {
    cursor: pointer;
}

/* Mobile-only close X for the slide-in source panel — hidden on desktop
 * (the panel is part of the two-column layout there, no overlay close).
 * Becomes visible + positioned in the @media (max-width: 959px) block. */
.skydb-popup .skydb-side-close { display: none; }

/* -------------------------------------------------------- loading state */
.skydb-popup .skydb-popup-loading {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    font-size: 14px;
}

/* ------------------- close 10px gap between #edit_content_left (465px) and
 * #edit_content_right (445px) inside the 920px modal — floats don't fill the
 * container by default. Stretch #edit_content_left to consume the gap so the
 * active row's dark bar visually butts up against the right panel. */
.skydb-popup #edit_content_left {
    width: 475px !important;
}

/* ------------------- data row layout (50:50 label/value with reset + tool icon columns)
 * Phorio's row is a sea of inline-block .tc cells with hard-coded pixel
 * widths — re-cast as a 4-col CSS grid so the columns line up consistently
 * with the header and multi-value inputs stack vertically under the value
 * column instead of running off the right edge. */
.skydb-popup #datarow .tr,
.skydb-popup #datarow .tr.edit_row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;  /* clean 50:50 — icons live INSIDE the cells */
    column-gap: 0;
    align-items: center;
    width: 100% !important;     /* override inline width:435px */
    min-height: 26px;
    padding: 1px 8px;
    box-sizing: border-box;
    position: relative;
}
/* Uniform compact form fields: every input, textarea and select inside the
 * modal shares the same font, padding, border, and 22px row height (Phorio
 * baseline). Bootstrap's .form-control would otherwise blow them up to
 * ~32px and inherit different font sizes per location. */
.skydb-popup input[type="text"],
.skydb-popup input[type="number"],
.skydb-popup input[type="date"],
.skydb-popup input[type="email"],
.skydb-popup input.ui-autocomplete-input,
.skydb-popup select,
.skydb-popup textarea {
    height: 22px;
    padding: 2px 6px !important;
    font-family: inherit;
    font-size: 13px !important;
    line-height: 1.3;
    color: #222;
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 2px;
    box-sizing: border-box;
    box-shadow: none;
}
/* Textareas grow vertically — keep the same horizontal/font baseline. */
.skydb-popup textarea {
    height: auto;
    min-height: 44px;
    line-height: 1.4;
    padding: 4px 6px !important;
    resize: vertical;
}
/* Bootstrap .form-control overrides — kill its outline + focus ring and
 * keep the same compact look. */
.skydb-popup .form-control,
.skydb-popup input.form-control,
.skydb-popup select.form-control,
.skydb-popup textarea.form-control {
    height: 22px;
    padding: 2px 6px !important;
    font-size: 13px !important;
    line-height: 1.3;
    border: 1px solid #aaa;
    border-radius: 2px;
    box-shadow: none;
}
.skydb-popup .form-control:focus,
.skydb-popup input:focus,
.skydb-popup select:focus,
.skydb-popup textarea:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 2px rgba(65,188,156,0.25);
    outline: 0;
}
/* Override the inline pixel widths on each cell so they obey the grid.
 * Padding is reset to 0 here but specific cells (e.g. value cell) re-apply
 * their own padding below — so don't use !important on padding. */
.skydb-popup #datarow .tr > .tc,
.skydb-popup #datarow .tr > .tcr {
    width: auto !important;
    padding: 0;
}
/* Row layout — semantic, no positional indexes:
 *   .tc:first-child       = label (always the first cell in the row)
 *   .tcr                  = reset-icon cell (unique class)
 *   .tc:has(input,select,textarea) = value cell (only one with form fields)
 *   .tc:last-child        = tool-icon cell (last cell, contains tool/add icons)
 * Reset + tool icons are absolutely positioned so they don't fight the
 * 2-col grid for vertical real estate. */

/* Label cell — col 1.
 * Top-anchored so on multi-value rows (where the value cell stacks many
 * inputs vertically) the label sits next to the FIRST input, not
 * centred over the middle one. The parent .tr uses
 * `align-items: center` for grid items, so we must override per-cell
 * with `align-self: start` to place the label at the row's top edge. */
.skydb-popup #datarow .tr > .tc:first-child {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    display: flex;
    align-items: flex-start;
    min-height: 24px;
    padding-top: 4px;
    padding-left: 8px;
}

/* Reset (.tcr) — sits TOP-aligned, immediately to the left of the first
 * delete icon. The first delete icon lives in the value cell's icon
 * column (col 1 of the value cell's grid), centred in an 18px slot
 * starting at the row midpoint — so .tcr just needs to sit flush left
 * of that midpoint, with a 2px breathing gap before the delete icon. */
.skydb-popup #datarow .tr > .tcr {
    position: absolute;
    left: 50%;
    top: 4px;
    transform: translateX(-100%);
    margin-left: -2px;        /* small gap before the first delete icon */
    width: 20px;
    height: 20px;
    text-align: right;
    z-index: 2;
}
/* Reset icon img inside .tcr has inline `style="margin-top:4px"` from the
 * template — kill it so both icons share the exact same baseline. */
.skydb-popup #datarow .tr > .tcr img {
    margin: 0 !important;
    display: block;
}

/* Value cell — the .tc that contains inputs/selects/textareas.
 * Layout the cell as a 2-column grid so each img.delete + input pair
 * lays out as one row (delete icon left, input right). With auto-flow
 * the n inputs of a multi-value field stack into n rows. Reserve 40px
 * on the right for the tool icon column (notepad + add icons). */
.skydb-popup #datarow .tr > .tc:has(input, select, textarea) {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: 18px 1fr;
    column-gap: 6px;
    row-gap: 4px;
    align-items: center;
    min-width: 0;
    align-self: center;
    padding-right: 40px;
}
.skydb-popup #datarow .tr > .tc:has(input, select, textarea) input[type="text"],
.skydb-popup #datarow .tr > .tc:has(input, select, textarea) input[type="number"] {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
}
/* Delete icon sits in column 1 of the value cell, on the same row as
 * its input. No absolute positioning — the grid auto-flow places each
 * img+input pair correctly. */
.skydb-popup #datarow .tr > .tc:has(input) img.delete,
.skydb-popup #datarow .tr > .tc:has(input) img.hidden_icon {
    width: 16px;
    height: 16px;
    margin: 0;
    align-self: center;
    justify-self: center;
}

/* Tool cell — last .tc (no inputs); absolute on the right gutter, TOP-
 * anchored so on multi-value rows the tool/add-field icons sit on the
 * line of the FIRST input (matches Phorio), not centred over the
 * middle one. */
.skydb-popup #datarow .tr > .tc:last-child:not(:has(input, select, textarea)) {
    position: absolute;
    right: 8px;
    top: 4px;
    display: flex;
    align-items: center;
    gap: 2px;
    z-index: 2;
}

/* Header: 50:50 grid so "value" header sits at the same x as the input
 * left edge in every row. */
.skydb-popup #edit_content_left_head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 2px 8px !important;
}
.skydb-popup #edit_content_left_head_left {
    width: auto !important;
    grid-column: 1;
}
.skydb-popup #edit_content_left_head_right {
    width: auto !important;
    grid-column: 2;
}

/* ------------------- active row: same dark gray as #edit_content_right (#666),
 * stretched to the full width of #edit_content_left so it visually butts up
 * against the right panel without a gap. */
.skydb-popup #datarow .tr.tr_edit,
.skydb-popup #datarow .tr.edit_row:focus-within {
    background-color: #666 !important;
    color: #fff;
    width: 100% !important;   /* override the inline style="width:435px" */
    box-sizing: border-box;
}
.skydb-popup #datarow .tr.tr_edit .tcr,
.skydb-popup #datarow .tr.tr_edit .tc,
.skydb-popup #datarow .tr.edit_row:focus-within .tcr,
.skydb-popup #datarow .tr.edit_row:focus-within .tc {
    background-color: transparent;
}

/* ------------------- input field area: more breathing room */
.skydb-popup #datarow .tc input[type="text"],
.skydb-popup #datarow .tc input[type="number"] {
    padding: 4px 8px;
    margin-right: 6px;
}

/* Active field highlight — Phorio paints the focused input yellow so the
 * user can see exactly which value (especially the freshly-added empty
 * row in a multi-value field) the cursor is on. The .activefield class
 * is toggled by manageobjectdata.js on focusin. */
.skydb-popup #datarow .tr input[type="text"].activefield,
.skydb-popup #datarow .tr input[type="number"].activefield,
.skydb-popup #datarow .tr input[type="text"]:focus,
.skydb-popup #datarow .tr input[type="number"]:focus {
    background-color: #fff8a8 !important;     /* Phorio yellow */
    border-color: #d6c560 !important;
    outline: none;
}

/* ------------------- scrollbar on the LEFT side of the data-fields list
 * (Phorio uses jScrollPane with `.jspVerticalBar { left: 0 }`; we mimic the
 * effect with the direction:rtl trick — scrollbar moves to the left edge,
 * children keep ltr reading order). */
.skydb-popup #edit_content_left_scrollable {
    direction: rtl;
    /* override the template's inline `style="overflow: hidden"` which was
     * meant for jScrollPane (we don't load that library; rely on native
     * webkit scrollbar styled below to look like jScrollPane). */
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
.skydb-popup #edit_content_left_scrollable > * {
    direction: ltr;
}

/* Native webkit scrollbar fallback — matches Phorio jScrollPane look:
 * track #dde (light blue-gray), thumb #bbd (medium blue-gray), 10px wide.
 * Position on LEFT inside the modal via direction:rtl on the scrollable
 * container. Used until OverlayScrollbars takes over (custom-themed below). */
.skydb-popup ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.skydb-popup ::-webkit-scrollbar-track {
    background: #dde;
}
.skydb-popup ::-webkit-scrollbar-thumb {
    background: #bbd;
    border-radius: 0;
}
/* Keep the thumb identical on hover/active so the scrollbar never changes
 * appearance while the user interacts with it. */
.skydb-popup ::-webkit-scrollbar-thumb:hover,
.skydb-popup ::-webkit-scrollbar-thumb:active {
    background: #bbd;
}
/* Firefox */
.skydb-popup #edit_content_left_scrollable {
    scrollbar-width: thin;
    scrollbar-color: #bbd #dde;
}

/* OverlayScrollbars custom theme — matches Phorio jScrollPane look:
 * scrollbar on the LEFT side, track #dde, handle #bbd, hand cursor. */
.os-theme-skydb {
    --os-size: 10px;
    --os-padding-perpendicular: 0;
    --os-padding-axis: 0;
    --os-track-border-radius: 0;
    --os-track-bg: #dde;
    /* OverlayScrollbars' built-in :hover rule swaps the track background to
     * --os-track-bg-hover (default `none` → transparent), which makes the
     * lower track area look like it's "disappearing". Pin all hover/active
     * variants to the same colours so the scrollbar never changes. */
    --os-track-bg-hover: #dde;
    --os-track-bg-active: #dde;
    --os-handle-border-radius: 0;
    --os-handle-bg: #bbd;
    --os-handle-bg-hover: #bbd;
    --os-handle-bg-active: #bbd;
    --os-handle-min-size: 30px;
    /* Lock perpendicular size so the handle doesn't grow/shrink on hover. */
    --os-handle-perpendicular-size: 100%;
    --os-handle-perpendicular-size-hover: 100%;
    --os-handle-perpendicular-size-active: 100%;
}
/* Kill OverlayScrollbars' transitions entirely so any state change is
 * instantaneous (no fade/animate that could look glitchy). */
.os-theme-skydb .os-scrollbar-handle,
.os-theme-skydb .os-scrollbar-track {
    transition: none !important;
}
/* Make the track click-receptive so clicking the empty area above/below
 * the handle scrolls the viewport to that position (paired with
 * clickScroll: 'instant' in the JS init). The cursor is already pointer
 * via the rule a few blocks above. */
.os-theme-skydb .os-scrollbar-track {
    pointer-events: auto !important;
    touch-action: none;
}
/* Pin the vertical scrollbar to the very top of its parent so the top of
 * the scrollbar track aligns with the top of the first data row (no gap
 * from OverlayScrollbars' default padding-axis). */
.os-theme-skydb.os-scrollbar-vertical {
    top: 0 !important;
    bottom: 0 !important;
}
/* Make sure the first row sits flush with the top of the scrollable
 * container — no inherited top margin from the legacy template. */
.skydb-popup #edit_content_left_scrollable,
.skydb-popup #datarow {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.skydb-popup #datarow .tr:first-child {
    margin-top: 0 !important;
}
/* Cursor hand on the entire scrollbar (handle, track, wrapper) so the
 * pointer changes the moment the user enters the scrollbar area, not
 * just when they pixel-perfect hit the handle. */
.os-theme-skydb,
.os-theme-skydb .os-scrollbar-track,
.os-theme-skydb .os-scrollbar-handle,
.os-theme-skydb .os-scrollbar-handle:hover,
.os-theme-skydb .os-scrollbar-handle:active {
    cursor: pointer !important;
}
/* Position the vertical scrollbar on the LEFT (Phorio convention). */
.os-theme-skydb.os-scrollbar-vertical {
    left: 0 !important;
    right: auto !important;
}

/* ------------------- footer: compact + vertically centred row.
 * Phorio layout: LEFT = "Select more data fields:" label + input field +
 * postit icons. RIGHT = Next-step select + Submit button. DOM order in
 * the template is RIGHT first, LEFT second (because of legacy float:left/
 * right) — use flex `order` to swap them back visually. The "data field"
 * input on the left is placed under the value-column header above. */
.skydb-popup #edit_footer {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 6px 12px;
    gap: 8px;
    min-height: 44px;
}
/* Footer-left mirrors the data-row layout: label cell | input cell | tool
 * icon cell — same 1fr | 1fr grid, tool icon absolute on the right gutter
 * like in the rows. Selectors are semantic (target the unique IDs that
 * already exist in the template) so no positional :nth-child fragility. */
.skydb-popup #edit_footer_left {
    order: 1;
    flex: 0 0 475px;
    width: 475px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
    align-items: center;
    float: none !important;
    box-sizing: border-box;
    padding: 0 8px;
    position: relative;     /* anchor the absolute tool icon */
}
.skydb-popup #edit_footer_left > * { margin: 0; float: none !important; }

/* Label cell — every direct child that has neither input nor icon. */
.skydb-popup #edit_footer_left > div:not(:has(input, select, textarea, img)) {
    grid-column: 1;
    grid-row: 1;
    padding: 0 !important;
    width: auto !important;
    font-size: 13px;
}

/* Input wrapper — the .div containing #addrow */
.skydb-popup #edit_footer_left > div:has(#addrow) {
    grid-column: 2;
    grid-row: 1;
    padding: 0 40px 0 0 !important;     /* gutter for tool icon, mirrors row */
    width: auto !important;
}
.skydb-popup #edit_footer_left #addrow {
    width: 100% !important;
    box-sizing: border-box;
}

/* Tool icon (#showrowbutton) wrapper — absolute on right, same y as input */
.skydb-popup #edit_footer_left > div:has(#showrowbutton) {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 2;
}
.skydb-popup #edit_footer_left #showrowbutton {
    margin: 0 !important;
    vertical-align: middle;
}
.skydb-popup #edit_footer_right {
    order: 2;     /* RIGHT visually */
    flex: 0 0 auto;
    display: flex;
    flex-direction: row-reverse;  /* Phorio: Submit on far right; DOM order is reverse */
    align-items: center;
    gap: 8px;
    float: none !important;
}
.skydb-popup #edit_footer_right > div {
    float: none !important;
    margin-left: 0 !important;
    display: flex;
    align-items: center;
}
.skydb-popup #edit_footer input,
.skydb-popup #edit_footer select,
.skydb-popup #edit_footer button {
    height: 28px;
    padding: 2px 8px;
    font-size: 13px;
    line-height: 1;
    box-sizing: border-box;
}
.skydb-popup #edit_footer button#save_data {
    min-width: 120px !important;
    height: 28px;
    padding: 0 16px;
}
.skydb-popup #edit_footer select#manageobjectdata-nextstep {
    max-width: 200px !important;
    height: 28px;
}
.skydb-popup #edit_footer #addrow {
    width: 200px;
}
.skydb-popup #edit_footer img {
    vertical-align: middle;
    margin: 0 2px;
}

/* ------------------- right panel: source-type select + date input inline.
 * The legacy template wraps them in `.form-inline` (Bootstrap 4 class that
 * doesn't exist in BS5). Re-create the inline layout with flex. */
.skydb-popup #edit_content_right .form-inline {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}
.skydb-popup #edit_content_right .form-inline > select,
.skydb-popup #edit_content_right .form-inline > input {
    flex: 0 1 auto;
    min-width: 0;
}
.skydb-popup #edit_content_right .form-inline > #source_type {
    flex: 1 1 60%;
}
.skydb-popup #edit_content_right .form-inline > #source_type_date {
    flex: 0 0 auto;
    width: 130px;
}

/* ------------------- jQuery UI datepicker (date witnessed, etc.)
 * The datepicker is appended to <body> by jquery-ui, so it is OUTSIDE
 * .skydb-popup — selectors must be global. Phorio uses a small white
 * card with a green header. */
.ui-datepicker {
    background: #fff !important;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    padding: 8px;
    font-family: inherit;
    font-size: 13px;
    width: auto !important;
    min-width: 220px;
    z-index: 100000 !important;
    color: #222;
}
.ui-datepicker-header {
    background: var(--bs-primary);
    color: #fff;
    padding: 4px 8px;
    border-radius: 3px;
    position: relative;
    margin-bottom: 4px;
}
.ui-datepicker-title {
    text-align: center;
    font-weight: 600;
    line-height: 22px;
}
.ui-datepicker-prev,
.ui-datepicker-next {
    position: absolute;
    top: 4px;
    cursor: pointer;
    padding: 2px 6px;
    color: #fff;
    user-select: none;
}
.ui-datepicker-prev { left: 6px; }
.ui-datepicker-next { right: 6px; }
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover { background: rgba(255,255,255,0.2); border-radius: 2px; }
.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon { display: none; }
.ui-datepicker-prev::before { content: "‹"; font-size: 18px; }
.ui-datepicker-next::before { content: "›"; font-size: 18px; }
.ui-datepicker-calendar {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.ui-datepicker-calendar th,
.ui-datepicker-calendar td {
    width: 14.28%;
    text-align: center;
    padding: 0;
    border: 0;
}
.ui-datepicker-calendar th {
    color: #666;
    font-weight: 600;
    font-size: 12px;
    padding: 4px 0;
}
.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
    display: block;
    padding: 4px;
    text-decoration: none;
    color: #222;
    border-radius: 2px;
}
.ui-datepicker-calendar td a:hover {
    background: #e6f7f2;
    color: #222;
}
.ui-datepicker-calendar td .ui-state-active,
.ui-datepicker-calendar td a.ui-state-active {
    background: var(--bs-primary);
    color: #fff;
}
.ui-datepicker-calendar td .ui-state-highlight {
    background: #f0f0f0;
}
.ui-datepicker-calendar td.ui-state-disabled span {
    color: #ccc;
}

/* ------------------- responsive: narrow screens (smartphone + tablet) ----
 * Layout below 960px (matches the desktop min-width: 960px breakpoint above
 * — without this alignment, viewports in the 901–959px range fall in a gap
 * where the right panel wraps below the data list):
 *   - Modal fills the viewport (no rounded corners, full height)
 *   - #edit_content_left + footer take 100% width, no float
 *   - #edit_content_right (source/details) is HIDDEN by default
 *   - Header gets a "Toggle source" button (.skydb-side-toggle, see above)
 *     that toggles `.skydb-side-open` on the .skydb-popup → slides the
 *     right panel in as a full-height overlay from the right
 *   - Right panel inputs/textareas are compressed (smaller padding, shorter)
 */
@media (max-width: 959px) {
    /* Cap the modal at the LEFT panel's desktop width (#edit_content_left
     * is 475px + a little for padding/scrollbar gutters). The source
     * panel becomes a slide-in overlay below 960px, so the dialog itself
     * never needs to be wider than the data-fields list. min(96vw, …)
     * keeps it centred with breathing room on phones, capped on tablets. */
    .skydb-popup .modal-dialog {
        max-width: min(96vw, 500px);
        margin: 16px auto !important;
        align-items: center;
    }
    .skydb-popup .modal-content {
        border-radius: 4px;
        min-height: 0;
        max-height: calc(100vh - 32px);
    }

    .skydb-popup #edit_content_left {
        float: none !important;
        width: 100% !important;
    }
    /* Footer wraps to two rows on mobile: LEFT side (Select more data fields)
     * stays on top, RIGHT side (Submit + Next step + default-source) wraps
     * to a new line below. */
    .skydb-popup #edit_footer {
        flex-wrap: wrap !important;
        min-height: 36px;
        padding: 4px 8px;
        gap: 6px;
    }
    .skydb-popup #edit_footer_left {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    .skydb-popup #edit_footer_right {
        flex: 1 1 100% !important;
        justify-content: flex-end;
    }
    /* Source/details panel: centered card overlay covering ~50% of viewport
     * height. Anchored to viewport center (left:50%, top:50%) so it sits
     * over the modal regardless of modal-dialog position. Slides in from
     * below on open. */
    .skydb-popup #edit_content_right {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        width: 92vw;
        max-width: 420px;
        height: auto;
        max-height: 70vh;
        overflow-y: auto;
        background: #5a5a5a;
        color: #fff;
        z-index: 1100;
        transform: translate(-50%, calc(-50% + 110vh));  /* off-screen below */
        transition: transform 0.28s ease;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
        padding: 44px 14px 14px;
        border-radius: 8px;
    }
    .skydb-popup.skydb-side-open #edit_content_right {
        transform: translate(-50%, -50%);
    }
    /* Close X inside the overlay (mobile only). Larger circular button so
     * it's obviously a tap target on the dark gray panel. The button is
     * injected by skydb-modal.js when the side panel opens. */
    .skydb-popup .skydb-side-close {
        display: flex;
        position: absolute;
        top: 6px;
        right: 6px;
        width: 32px;
        height: 32px;
        padding: 0;
        border: 0;
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        z-index: 1101;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .skydb-popup .skydb-side-close:hover { background: rgba(255,255,255,0.32); }

    /* Visual backdrop while side panel is open. Clicks pass through to the
     * wrapper handler in skydb-modal.js, which closes only the panel. */
    .skydb-popup.skydb-side-open::after {
        content: "";
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1090;
        cursor: pointer;
    }

    /* Compact the source-panel form fields on mobile */
    .skydb-popup #edit_content_right input,
    .skydb-popup #edit_content_right select,
    .skydb-popup #edit_content_right textarea {
        font-size: 13px;
        padding: 4px 6px;
        height: 28px;
    }
    .skydb-popup #edit_content_right textarea {
        height: auto;
        min-height: 50px;
    }
    .skydb-popup #edit_content_right h4,
    .skydb-popup #edit_content_right .source-headline {
        font-size: 13px;
        margin: 8px 0 4px;
    }
}

/* ===========================================================================
 * Brand: override the legacy Phorio teal (#1abc9c) inside .skydb-popup.
 *
 * `legacy/css/phorio-style.scoped.css` is enqueued BEFORE this file and
 * hardcodes #1abc9c on links, accent spans, and the text-selection color
 * across every `.skydb-popup ...` selector. Since we can't edit legacy
 * (per `feedback_no_edit_legacy_phorio`), restate each rule here so the
 * cascade lands on `var(--bs-primary)`. Same source as the SCSS `$primary`
 * variable — flip the SCSS variable, all of the below follows.
 * ========================================================================= */
.skydb-popup a {
    color: var(--bs-primary);
}
.skydb-popup a:hover {
    color: var(--bs-primary);
    filter: brightness(1.25);
}
.skydb-popup ::selection,
.skydb-popup ::-moz-selection {
    background: var(--bs-primary);
    color: #fff;
    text-shadow: none;
}
.skydb-popup h1 > span:not(.nocolor),
.skydb-popup h2 > span:not(.nocolor),
.skydb-popup h3 > span:not(.nocolor),
.skydb-popup h4 > span:not(.nocolor),
.skydb-popup h5 > span:not(.nocolor),
.skydb-popup h6 > span:not(.nocolor) {
    color: var(--bs-primary);
}
/* Buttons inside modals: the legacy stylesheet overrides Bootstrap's
 * .btn-primary with the teal. Restate so .btn-primary is SKYDB blue
 * everywhere (the modal-signin / modal-join "Sign in" / "Register"
 * submits, plus any future modal CTA). */
.skydb-popup .btn-primary,
.skydb-popup .btn-primary:focus {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}
.skydb-popup .btn-primary:hover,
.skydb-popup .btn-primary:active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    filter: brightness(1.1);
}