/* ============================================================================
   reco.css — RedConduit Framework Styles
   Served as /css/reco.css via WebUI.Common StaticWebAssets.
   Do NOT edit in consuming projects — override in your own site.css instead.
   ============================================================================ */

/* ── Toast container ─────────────────────────────────────────────────────────── */
.toast-container { z-index: 15000; }

/* ── AJAX spinner overlay ───────────────────────────────────────────────────── */
.ajax-spinner-overlay {
    position: absolute; inset: 0;
    background: rgba(255,255,255,.6);
    z-index: 10;
}

/* ── User profile badges ────────────────────────────────────────────────────── */
.user-prof-badge { display:inline-flex; align-items:center; gap:4px; font-size:0.85rem; padding:2px 4px; border-radius:4px; background-color:var(--bs-light); border:1px solid var(--bs-border-color-translucent); }
.user-prof-badge .badge-avatar { width:24px; height:24px; border-radius:50%; object-fit:cover; display:block; }
.user-profiles-info-field .badge-avatar { width:32px; height:32px; }
.popover .popover-thumb { width:64px; height:64px; border-radius:8px; object-fit:cover; display:block; }
.user-prof-badge.opacity-50 { opacity:0.55; }
.user-name { line-height:1.1; }

/* ── AJAX viewport skeleton loader ──────────────────────────────────────────── */
.ajax-skeleton {
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 0.375rem;
    border: 1px solid #e9ecef;
}
.ajax-skeleton .spinner-border-sm { width:1.5rem; height:1.5rem; border-width:0.2em; }

.skeleton-content { max-width:600px; width:100%; text-align:center; }
.skeleton-bar {
    background: linear-gradient(90deg,#e9ecef 25%,#f8f9fa 50%,#e9ecef 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 0.25rem;
    margin-bottom: 0.75rem;
    height: 1rem;
}
.skeleton-title      { height:1.5rem; width:60%; margin:0 auto 0.5rem; }
.skeleton-subtitle   { height:1rem;   width:40%; margin:0 auto 1.5rem; }
.skeleton-line       { width:100%; }
.skeleton-line-short { width:70%; margin-left:auto; margin-right:auto; }

@keyframes skeleton-loading {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* ── AJAX viewport transition ───────────────────────────────────────────────── */
[data-ajax-viewport] { transition: opacity 0.2s ease-in-out; }

@media (prefers-color-scheme: dark) {
    .ajax-skeleton { background:#212529; border-color:#495057; }
    .skeleton-bar  { background:linear-gradient(90deg,#495057 25%,#6c757d 50%,#495057 75%); background-size:200% 100%; }
}

/* ── Slim Mode ───────────────────────────────────────────────────────────────── */
/* Applied when a page is loaded inside a scanner result host, inline row        */
/* viewport, or inline create tab (slim=1 in query).                             */

.ix-slim .form-control  { font-size:.875rem !important; padding:.25rem .5rem !important; }
.ix-slim .form-select   { font-size:.875rem !important; padding:.2rem  .5rem !important; }
.ix-slim .form-check-label { font-size:.875rem; }
.ix-slim .input-group > .form-control,
.ix-slim .input-group > .form-select { font-size:.875rem !important; padding:.25rem .5rem !important; }

.ix-slim label.form-label { font-size:.75rem; margin-bottom:.125rem; font-weight:500; }

.ix-slim .mb-3 { margin-bottom:.375rem !important; }
.ix-slim .mb-4 { margin-bottom:.5rem   !important; }
.ix-slim .mt-4 { margin-top:  .5rem   !important; }

.ix-slim .card          { border:none !important; box-shadow:none !important; }
.ix-slim .card-body     { padding:.5rem .625rem; }
.ix-slim .card-footer   { padding:.375rem .625rem; background:transparent;
                           border-top:1px solid var(--bs-border-color-translucent); }

.ix-slim .form-section-heading,
.ix-slim h5.form-section-label { font-size:.7rem; text-transform:uppercase;
                                   letter-spacing:.06em; opacity:.65; margin-top:.5rem; }

/* Floating labels — always-floated style, no DOM change needed */
.ix-slim .autoform-field .mb-3:has(> label.form-label) {
    position: relative;
    padding-top: 1.3rem;
    margin-bottom: .5rem !important;
}
.ix-slim .autoform-field .mb-3 > label.form-label {
    position: absolute; top:.05rem; left:0; right:0;
    font-size:.68rem !important; font-weight:600;
    color: var(--bs-secondary);
    margin:0; line-height:1.25; padding:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    z-index:1;
}

/* Sticky save bar */
.ix-slim-footer {
    position: sticky; bottom:0; z-index:10;
    background: var(--bs-body-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-top: 1px solid var(--bs-border-color-translucent) !important;
}

/* Slim related tabs toggle */
.ix-slim-related .btn-outline-secondary { border-style:dashed; font-size:.75rem; }
.ix-slim-related .detail-tabs           { margin-top:.5rem; }

/* ── Inline viewport row actions — active state ─────────────────────────────── */
/* When a [data-ix-inline] button has .active, its row viewport is open.        */
/* Bootstrap's .active already handles solid background for btn-outline-*.      */
/* The dropdown-item variant needs a custom indicator.                           */
.dropdown-item[data-ix-inline].active {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-weight: 600;
}
.dropdown-item[data-ix-inline].active::before {
    content: '▶ ';
    font-size: .65em;
    vertical-align: middle;
}

/* Select2 — reduced size in slim panels */
.ix-slim .select2-container .select2-selection--single          { height:calc(1.5em + .5rem + 2px); }
.ix-slim .select2-container .select2-selection--single .select2-selection__rendered { line-height:calc(1.5em + .5rem); font-size:.875rem; }
.ix-slim .select2-container .select2-selection__arrow           { height:calc(1.5em + .5rem + 2px); }

/* ── Select2 Bootstrap-5 dark theme overrides ───────────────────────────────── */
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection { background-color:transparent !important; border:1px solid #495057; }
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single { background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color:#dee2e6 !important; }
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder { color:#dee2e6 !important; }
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice { color:#dee2e6 !important; border:1px solid var(--bs-gray-600); }
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { background-color:transparent !important; color:#dee2e6 !important; }
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown { color:#dee2e6 !important; border:1px solid #495057 !important; background-color:var(--bs-body-bg); }
html[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown.select2-results__options .select2-results__option[role=group] .select2-results__group { color:var(--bs-secondary-color) !important; }

/* ── Object Display Templates ───────────────────────────────────────────────── */
.object-display-compact { display:flex; gap:.5rem; align-items:flex-start; font-size:.75rem; line-height:1.3; padding:.25rem; background:#f8f9fa; border-radius:4px; }
.object-compact-image   { flex-shrink:0; }
.object-compact-thumb   { width:50px; height:50px; object-fit:cover; border-radius:4px; border:1px solid #dee2e6; }
.object-compact-content { flex:1; min-width:0; }

.object-display-compact .autoform-group           { margin-bottom:.35rem !important; }
.object-display-compact .autoform-group-title     { font-size:.7rem !important; font-weight:600; margin-bottom:.2rem !important; color:#6c757d; text-transform:uppercase; }
.object-display-compact .row                      { gap:.25rem !important; }
.object-display-compact .col-md-6,
.object-display-compact .col-md-12               { padding:0 !important; }
.object-display-compact .autoform-field           { margin-bottom:.25rem !important; }
.object-display-compact .form-label               { font-size:.65rem !important; font-weight:600; margin-bottom:.1rem !important; color:#6c757d; }
.object-display-compact .fw-medium                { font-size:.75rem !important; font-weight:500 !important; color:#212529; }
.object-display-compact .card                     { margin-bottom:.35rem !important; border:1px solid #e9ecef !important; border-radius:4px !important; box-shadow:none !important; }
.object-display-compact .card-header              { padding:.25rem .5rem !important; font-size:.7rem !important; background:#fff !important; border-bottom:1px solid #e9ecef !important; cursor:pointer; }
.object-display-compact .card-body                { padding:.35rem !important; font-size:.7rem !important; }
.object-display-compact .badge                    { font-size:.65rem !important; padding:.15rem .35rem !important; }
.object-display-compact .object-display-compact   { background:#fff; border:1px solid #e9ecef; border-radius:3px; padding:.2rem; }

.object-display-card .object-image    { border-radius:8px; object-fit:cover; max-width:100%; height:auto; }
.object-display-card .card-header     { background:linear-gradient(to right,rgba(13,202,240,.1),transparent); }
.object-display-card .object-display-card { margin-left:1rem; border-left-color:#0dcaf0; }
.object-display-card .form-label      { font-weight:600; margin-bottom:.25rem; }

@media (max-width:767px) {
    .object-compact-thumb     { width:40px; height:40px; }
    .object-display-compact   { font-size:.7rem; }
}