/* Etap 185: techniczny katalog komponentow UI. Style sa globalne, bo ekran przekazuje
   RenderFragmenty do wspolnych komponentow i nie powinien generowac scoped-CSS atrybutow. */
.vario-ui-catalog-workbench {
    height: 100%;
    min-height: 0;
    background: var(--vario-color-surface-page);
}

.vario-ui-catalog-shell {
    height: calc(100% - 68px);
}

.vario-ui-catalog-search-panel {
    min-height: 0;
}

.vario-ui-catalog-search-form,
.vario-ui-catalog-render-host {
    display: contents;
}

.vario-ui-catalog-search-panel .vario-list-document-tabs {
    flex: 1 1 auto !important;
    overflow: visible !important;
}

.vario-ui-catalog-search-panel .vario-list-document-actions {
    flex: 0 0 auto !important;
}

.vario-ui-catalog-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
}

.vario-ui-catalog-preview-grid section {
    min-width: 0;
    border-right: 1px solid var(--vario-color-border-subtle);
    padding-right: 14px;
}

.vario-ui-catalog-preview-grid section:last-child {
    border-right: 0;
    padding-right: 0;
}

.vario-ui-catalog-preview-grid h3 {
    margin: 0 0 10px;
    color: var(--vario-color-text-strong);
    font: 800 12px/16px var(--vario-font-family-ui);
}

.vario-ui-catalog-button-row,
.vario-ui-catalog-status-row,
.vario-ui-catalog-field-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.vario-ui-catalog-field-row {
    align-items: start;
}

.vario-ui-catalog-summary {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 12px 14px;
}

.vario-ui-catalog-summary h2 {
    margin: 0;
    color: var(--vario-color-text-strong);
    font: 900 16px/20px var(--vario-font-family-ui);
}

.vario-ui-catalog-summary dl {
    display: grid;
    gap: 6px;
    margin: 0;
}

.vario-ui-catalog-summary dl div {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 8px;
}

.vario-ui-catalog-summary dt {
    color: var(--vario-color-text-muted);
    font: 700 10px/14px var(--vario-font-family-ui);
}

.vario-ui-catalog-summary dd {
    margin: 0;
    color: var(--vario-color-text-strong);
    font: 800 11px/14px var(--vario-font-family-ui);
}

.vario-ui-lookup-sample {
    display: grid;
    gap: 6px;
    width: min(420px, 100%);
}

.vario-ui-lookup-sample>label {
    color: var(--vario-color-text-strong);
    font: var(--vario-font-field-label);
}

.vario-ui-lookup-sample>div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    gap: 6px;
}

.vario-ui-lookup-sample ul {
    display: grid;
    gap: 0;
    max-height: 72px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--vario-color-border-soft);
    border-radius: var(--vario-radius-md);
    background: #fff;
    list-style: none;
}

.vario-ui-lookup-sample li {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 8px;
    padding: 5px 9px;
    border-bottom: 1px solid var(--vario-color-border-subtle);
    color: var(--vario-color-text-strong);
    font: 700 11px/15px var(--vario-font-family-ui);
}

.vario-ui-lookup-sample li:last-child {
    border-bottom: 0;
}

@media (max-width: 1100px) {

    html body .modal-content.vario-directory-service-card-modal .vario-feature-grid,
    html body .modal-content.vario-directory-vehicle-card-modal .vario-feature-grid,
    html[data-vario-theme] body .modal-content.vario-directory-service-card-modal .vario-feature-grid,
    html[data-vario-theme] body .modal-content.vario-directory-vehicle-card-modal .vario-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .vario-ui-catalog-preview-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .vario-ui-catalog-preview-grid section {
        border-right: 0;
        border-bottom: 1px solid var(--vario-color-border-subtle);
        padding-right: 0;
        padding-bottom: 12px;
    }
}