﻿.bundle-tile-editor {
    background-color: inherit !important;
    color: inherit !important;
}

/* Grid Layout */
.bundle-tile-editor .k-listview-content {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 8px !important;
    row-gap: 8px !important;
    column-gap: 8px !important;
    align-items: stretch;
    overflow: visible;
    position: relative;
    padding-top: 6px;
}

@media (max-width: 599.98px) {
    .bundle-tile-editor .k-listview-content {
        gap: 6px !important;
        row-gap: 6px !important;
        column-gap: 6px !important;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    }
}

@media (min-width: 600px) and (max-width: 899.98px) {
    .bundle-tile-editor .k-listview-content {
        gap: 6px !important;
        row-gap: 6px !important;
        column-gap: 6px !important;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    }
}

@media (min-width: 900px) {
    .bundle-tile-editor .k-listview-content {
        gap: 12px !important;
        row-gap: 12px !important;
        column-gap: 12px !important;
        grid-template-columns: repeat(auto-fill, minmax(375px, 1fr)) !important;
    }
}

/* Listview Item (Tile Card) */
.bundle-tile-editor .listview-item {
    position: relative;
    top: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    border: 1px solid white;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box !important;
    background-color: #3b3b3b;
    color: inherit;
    transition: top .22s ease, box-shadow .22s ease, border-color .22s ease;
    will-change: top, box-shadow;
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    contain: layout paint;
    min-width: 260px;
    margin: 0 !important;
}

@media (min-width: 900px) {
    .bundle-tile-editor .listview-item {
        min-width: 350px;
        max-width: 425px;
    }
}

.bundle-tile-editor .listview-item:hover,
.bundle-tile-editor .listview-item:focus-visible {
    top: -4px;
    box-shadow: 0 0 0 2px rgba(255,152,0,.65), 0 6px 16px -6px rgba(0,0,0,.55), 0 3px 6px -2px rgba(0,0,0,.45);
    border-color: var(--lmr-BUTTON_BG) !important;
    outline: none;
}

.bundle-tile-editor .listview-item:hover *,
.bundle-tile-editor .listview-item:focus-visible * {
    color: inherit;
    fill: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .bundle-tile-editor .listview-item {
        transition: border-color .15s linear, box-shadow .15s ease;
    }
    
    .bundle-tile-editor .listview-item:hover,
    .bundle-tile-editor .listview-item:focus-visible {
        top: 0;
        box-shadow: 0 0 0 2px rgba(255,152,0,.65);
    }
}

/* Single Object Mode */
.bundle-tile-editor .listview-item.single-object {
    max-width: 100%;
    transition: none;
}

.bundle-tile-editor .listview-item.single-object:hover,
.bundle-tile-editor .listview-item.single-object:focus-visible {
    top: 0;
    box-shadow: none;
    outline: 0;
    border-color: white !important;
}

.bundle-tile-editor .k-listview-content:has(.listview-item.single-object) {
    display: flex !important;
}

/* Toolbar */
.bundle-tile-editor .lmr-toolbar {
    margin: 0px !important;
}

/* Pager */
.bundle-tile-editor .k-listview-pager {
    background-color: inherit;
    color: inherit;
    flex-direction: column-reverse;
}

.bundle-tile-editor .k-listview-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.bundle-tile-editor .k-pager-first {
    border-bottom-left-radius: 10px !important;
    border-top-left-radius: 10px !important;
}

.bundle-tile-editor .k-pager-last {
    border-bottom-right-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

/* Telerik Icon Styles */
.bundle-tile-editor .listview-item-rows .k-icon {
    border: 2px solid orange;
    border-radius: 50%;
}

/* Header */
.bundle-tile-editor .listview-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
}

.bundle-tile-editor .listview-item-header-actions {
    display: flex;
    justify-content: space-between;
    column-gap: 4px;
}

.bundle-tile-editor .listview-item h7 {
    font-weight: 600;
}

.listview-item-rows > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-right: 4px;
    flex-wrap: wrap;
    width: 100%;
}

.listview-item-rows > div:has(details) {
    padding-bottom: 0px;
    padding-top: 2px;
}

.listview-item-row h7 {
    font-weight: 600;
}

.listview-item-row {
    padding-left: 4px;
    padding-right: 0px;
}

.listview-item-rows > .listview-item-row {
    padding-right: 4px;
}

.listview-item-rows > .listview-item-row:has(.listview-item-row-nested) {
    padding-right: 0px;
}

.listview-item-rows > .listview-item-row:has(.listview-item-row-nested) .listview-item-row-nested {
    padding-right: 4px !important;
}

.listview-item-row > span:nth-child(2) {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow: visible;
    text-overflow: unset;
/*    flex: 1 1 auto;*/
    min-width: 0;
    max-width: 100%;
}

.listview-item-row:nth-child(even):not(:has(details)) {
    background-color: #484747;
    border-radius: 2px;
}

.listview-item-row:nth-child(odd):not(:has(details)) {
    background-color: #3b3b3b;
    border-radius: 2px;
}

.listview-item-row:has(details) {
    padding-bottom: 0px;
    padding-top: 0px;
    padding-right: 0px;
    background-color: transparent;
    border-radius: 0;
}

.listview-item-rows > .listview-item-row:has(details) {
    padding-right: 4px;
}

.listview-item-row:has(.listview-item-row-nested) > h7 {
    padding-bottom: 4px;
}

.listview-item-row:has(> details) {
    padding-left: 0px !important;
    margin-bottom: 4px
}

.listview-item-row > details,
.listview-item-rows > details {
    margin-top: 4px;
    width: -webkit-fill-available;
}

.listview-item-result:has(div) {
    display: contents;
}

.listview-item-result > div:not(.listview-item-row-nested) {
    display: flex;
    justify-content: space-between;
}

.listview-item-result:has(details) {
    width: 100%;
    display: block;
}

.listview-item-row-nested {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 0px;
}

.listview-item-result > .listview-item-row-nested:first-of-type {
    margin-top: 4px;
}

.listview-item-row-nested h7 {
    font-weight: 600;
}

.listview-item-row-nested .listview-item-result {
    padding-right: 0px;
    word-break: break-all;
}

.listview-item-row-nested:nth-child(even) {
    background-color: #484747;
    border-radius: 2px;
}

.listview-item-row-nested:nth-child(odd) {
    background-color: #3b3b3b;
    border-radius: 2px;
}

.listview-item-row-nested:nth-child(odd) > .listview-item-result > .listview-item-row-nested:nth-child(odd) {
    background-color: #484747;
}

.listview-item-row-nested:nth-child(odd) > .listview-item-result > .listview-item-row-nested:nth-child(even) {
    background-color: #3b3b3b;
}

.listview-item-row-nested:nth-child(even) > .listview-item-result > .listview-item-row-nested:nth-child(odd) {
    background-color: #3b3b3b;
}

.listview-item-row-nested:nth-child(even) > .listview-item-result > .listview-item-row-nested:nth-child(even) {
    background-color: #484747;
}

.listview-item-row-nested .listview-item-row-nested .listview-item-row-nested:nth-child(odd) {
    background-color: #484747;
}

.listview-item-row-nested .listview-item-row-nested .listview-item-row-nested:nth-child(even) {
    background-color: #3b3b3b;
}

.listview-item-row-nested:nth-child(odd):has(.listview-item-row-nested) {
    padding-right: 0px;
    border: #484747 dashed 1.5px;
    display: block;
}

.listview-item-row-nested:nth-child(even):has(.listview-item-row-nested) {
    padding-right: 0px;
    border: #3b3b3b dashed 1.5px;
    display: block;
}

.listview-item-row-nested:has(details) {
    display: block;
    padding-bottom: 0px;
    padding-top: 2px;
    padding-right: 0px;
}

.listview-item-row-nested:has(details),
.listview-item-row-nested:has(details) .listview-item-result {
    padding-left: 0px;
    padding-right: 0px;
}

.listview-item-row-nested:has(.listview-item-row-nested) {
    padding-bottom: 0px;
    padding-right: 0px;
}

.listview-item-row-nested:has(.listview-item-row-nested) > h7 {
    padding-bottom: 0.5rem;
}

.listview-item-row-nested .listview-item-result:has(div) {
    display: flex;
    gap: 0px;
    flex-wrap: wrap;
}

/* Details Accordion */
details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 0.5em 0.5em 0;
}

summary {
    font-weight: bold;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
}

details[open] {
    padding: 0.5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: 0.5em;
}

details[open] > summary {
    background-color: var(--lmr-BUTTON_BG);
}

details details {
    margin-left: 0px;
    margin-right: 0px;
}

details > details {
    margin-top: 8px
}

details .listview-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-right: 4px;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
}

    details .listview-item-row .k-checkbox-wrap {
        margin-left: auto;
        padding-right: 0px;
    }

    details .listview-item-row h7 {
        min-width: fit-content;
        white-space: nowrap;
        padding-right: 8px;
    }

    details .listview-item-row .listview-item-result {
        flex: 1 !important;
        text-align: right;
    }

details .listview-item-row-nested {
    width: 100%;
    margin-left: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

/* Text Preview Component */
.text-preview {
    border-radius: 10px;
    border: 2px solid grey;
    padding-right: 5px;
    padding-left: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
}

.bundle-tile-editor div:has(> span.text-preview) {
    padding-left: 4px;
}



