:target {
    outline: none!important;
    padding: 0!important;
}
:root {
    --height: 3rem;
}
body:has(#theme-switcher:checked) {

}

.dashboard h1:first-of-type {
    margin-top: 0!important;
}
main > footer {
    max-width: 100%!important;
    position: fixed;
    z-index: 20;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    margin: 4rem 0 0 0!important;
    height: var(--height);
    padding: 0!important;
    background-color: var(--base);
    box-shadow: var(--shadow);
}
main>* {
    max-width: min(768px, 90vw)!important;
    margin: 0 auto!important;
}
main h1 {
    margin: 0!important;
    font-size: var(--large);
}
main h1 + p + h2 {
    font-size: var(--medium);
    text-transform: none;
    margin: 0!important;
}
.replace {
    max-width: 90vw!important;
    margin: 1rem auto!important;
}

.dash .replace {
    text-align: center;
}
.dash input {
    text-align: center;
}
.dash .true-false {
    display: flex;
    justify-content: center;
    margin: 0;
}
.dash button[type=submit] {
    width: 50%;
    margin: 1rem auto;
}


form h2 {
    margin: .5rem 0 1.5rem!important;
}

.dashboard-nav {
    height: var(--height);
    max-width:100vw;
    padding: 0 .5rem;
}
.dashboard-nav ul {
    height: var(--height);
    overflow-x: auto;
}
.dashboard-nav li + li:before {
    display: none!important;
}
.dashboard-nav a {
    height: var(--height);
    min-width: var(--height);
    padding: 0 .75rem;
    color: var(--contrast)!important;
}
.dashboard-nav a .icon {
    margin: 0;
}
.dashboard-nav a span {
    display: none;
}
.dashboard-nav .current a:hover,
.dashboard-nav a:hover {
    background-color: var(--action-0)!important;
    color: var(--action-contrast)!important;
}
.dashboard-nav .current a {
    background-color: var(--base-100)!important;
    color: var(--contrast)!important;
}
.dashboard-nav .current a span {
    display: block;
}



/* Loading states */
main {
    opacity: 1;
    transition: opacity .3s ease-in-out;
    padding-bottom: 7rem;
    min-height: calc(100vh - 12rem);
}

main.transitioning {
    opacity: 0;
}
.loading {
    opacity: .7;
}


/*Upload overlay*/
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--overlay-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 9999;
}

.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.loading-overlay .wrapper {
    background-color: var(--base);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    max-width: 90%;
    width: 400px;
}

.upload-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--base-200);
    border-top: 5px solid var(--action-0);
    border-radius: 50%;
    margin: 0 auto 1rem;
    animation: spin 1s linear infinite;
}

.upload-status h3 {
    margin: 0 0 .5rem;
    color: var(--contrast);
}

.upload-message {
    margin: 0;
    color: var(--contrast-100);
    font-size: var(--small);
}



/* Optional: Add a pulsing effect to the text */
.upload-message {
    animation: flicker 2s infinite;
}

@keyframes flicker {
    0% { opacity: .6; }
    50% { opacity: 1; }
    100% { opacity: .6; }
}

.form-section {
    max-height: 0;
    transform: scale(0);
    visibility: hidden;
}
form:not(:has(.form-section.active)) .form-section:first-of-type,
.form-section.active {
    max-height: fit-content;
    transform: scale(1);
    visibility: visible;
}



.form-sections {
    --height: fit-content;
    position: fixed;
    bottom: 3rem;
    left: 0;
    right: 0;
    background-color: var(--base-100);
    box-shadow: var(--shadow);
    z-index: 10;
}
.form-sections ul {
    gap: 0;
}
.form-sections li {
    width: 50%;
}

.form-sections a:visited,
.form-sections a {
    padding: .25rem;
    width: 100%;
    color: var(--contrast);
}
.replace:not(:has(.form-section.active)) .form-sections li:first-of-type a,
.current a {
    background-color: var(--base-200);
    color: var(--contrast);
}
.form-sections .icon {
    margin: 0;
}
@media (min-width: 768px){
    .form-sections ul {
        flex-wrap: nowrap;
    }
    .form-sections li {
        width: 100%;
    }
}

.submit-container {
    position: fixed;
    z-index: 20;
}
.submit-container button {
    padding: 0;
    width: 3rem;
    height: 3rem;
    color: var(--contrast-200);
    background-color: var(--base-200);
    justify-content: center;
    border: 3px solid transparent;
}
.submit-container .save-popup {
    position: absolute;
    z-index: -1;
    top: calc(50% - (1.875rem / 2));
    font-size: var(--small);
    background-color: var(--action-0);
    color: var(--action-contrast);
    padding: .25rem .5rem;
    border-radius: 4px;
    white-space: nowrap;
    visibility: hidden;
    transition: all var(--transition-base);
    opacity: 0;
}
.submit-container .icon {
    --w: 2em;
}
.save-popup::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-top: .5rem solid transparent;
    border-bottom: .5rem solid transparent;
}
.save-popup.show {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 767px){
    .submit-container {
        top: 3.5rem;
        right: .5rem;
    }
    .save-popup {
        right: 0;
    }
    .save-popup:before{
        right: -.25rem;
        border-left: .5rem solid var(--action-0);
    }
    .save-popup.show {
        right: calc(100% + .5rem);
    }
}
@media (min-width: 768px){
    .submit-container {
        bottom: 6rem;
        left: .5rem;
    }
    .save-popup {
        left: 0;
    }
    .save-popup:before{
        left: -.25rem;
        border-right: .5rem solid var(--action-0);
    }
    .save-popup.show {
        left: calc(100% + .5rem);
    }
}

.autosaving span.save,
.autosaving button[type=submit] {
    border-color: var(--base-200);
    border-top-color: var(--action-0);
    border-bottom-color: var(--action-50);
    border-radius: 50%;
    color: var(--contrast-200);
    transition: color .25s var(--timing) var(--function);
    transition-property: color, background-color, border;
    animation: spin 1s linear infinite;
}
.autosaving .submit-container {
    animation: pulse 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes pulse {
    0% {
        transform: scale(.85);
        opacity: .6;
    }
    50% {
        transform:scale(1);
        opacity: 1; }
    100% {
        transform: scale(.85);
        opacity: .6; }
}

.item-link[href=""]{
    display: none;
}
.item-link {
    position: fixed;
    bottom: 5rem;
    right: 1.5rem;
    text-transform: uppercase;
    color: var(--action-0);
    background-color: var(--base);
    border-radius: 4px;
    padding: .25rem .5rem;
    box-shadow: var(--subtle);
}
.field {
    margin: 3rem .5rem;
}
.field:has([required]) label::after {
    content: 'required';
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23B7332E" viewBox="0 0 256 256"><path d="M214.86,180.12a8,8,0,0,1-11,2.74L136,142.13V216a8,8,0,0,1-16,0V142.13L52.12,182.86a8,8,0,1,1-8.23-13.72L112.45,128,43.89,86.86a8,8,0,1,1,8.23-13.72L120,113.87V40a8,8,0,0,1,16,0v73.87l67.88-40.73a8,8,0,1,1,8.23,13.72L143.55,128l68.56,41.14A8,8,0,0,1,214.86,180.12Z"></path></svg>');
    display: inline-block;
    background-position: left center;
    background-size: 1.2em;
    padding-left: 1.3em;
    background-repeat: no-repeat;
    font-weight: 100;
    text-transform: none;
    font-size: .75em;
    vertical-align: super;

}
.field:has([required]) label {
    position: relative;
}
.repeater-items .field {
    margin: 1rem 0;
}
.taxonomy .field-group-header {
    display: flex;
    justify-content: space-between;
}

.add-item-btn {
    padding: .5em;
    background: var(--base-100);
    border: 1px solid var(--contrast-200);
    border-radius: .25rem;
    cursor: pointer;
    font-size: .875rem;
}
.add-item-btn .icon {
    --w: 1.5em;
}

.add-item-btn:hover {
    background: var(--base-200);
}
summary .type-label {
    display: flex;
    align-items: center;
    gap: 1rem;
}
summary .type-label .icon {
    position: relative;
    top: -.25em;
}

/** Tabs **/
.tabs {
    display: flex;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--base-200);
    flex-wrap: wrap;
}
.tabs.parent {
    max-width: 100vw;
    background-color: var(--base);
    padding: .5rem;
    width: 100vw;
    position: relative;
    left: -2.1rem;
    margin: 1rem 0;
}
.tab-content h2 {
    font-size: var(--large);
    margin: 0!important;
}
.tab-content .tab-navigation,
.tab-content button[type=submit] {
    display: inline-flex;
    width: 48%;
    background-color: var(--action-200);
    color: var(--contrast-200);
}

.tab-navigation.next {
    display: flex;
    margin-left: auto;
}
.tab-content .tab-navigation + button {
    display: inline-flex;
    margin-left: 3%;
}

.tabs > button {
    padding: .75rem 1.5rem;
    border-radius: 0;
    border: none;
    background: none;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    color: inherit;
}
.tabs > button h2 {
    font-size: 1.1rem;
    line-height: 1;
    margin: 0!important;
}
.tabs > button:hover,
.tabs > button:focus {
    background-color: var(--base-200);
}
.tabs > button::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--action-50);
    transition: width .3s;
}
.tabs > button.active::after {
    width: 100%;
}

.tabs > button.add-item-btn {
    margin-left: auto;
    background-color: var(--action-50);
    border-radius: 4px;
    padding: .5em;
    font-weight: normal;
    border: 1px solid var(--action-50);
}
.tabs > button.add-item-btn:focus,
.tabs > button.add-item-btn:hover {
    background-color: var(--base);
}

.type-filter:not(.active) span:not(.count){
    display: none;
}
.type-filter:not(.active):hover span:not(.count){
    display: block;
}
/** News **/
.item-grid.list-view .item.news {
    flex-direction: column;
}
.item.news h3 {
    font-size: var(--medium);
    margin: 0!important;
}
.item.news summary .image {
    width: 5rem;
    background-color: var(--base-200);
    border-radius: 4px;
    aspect-ratio: 1;
}
.item.news summary {
    gap: 1rem;
}
.item.news summary .summary {
    width: 100%;
}
.item.news summary .header {
    display: flex;
    justify-content: space-between;
    padding: .5rem 0;
}
.item .vote {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .5em;
    margin-top: auto;
}
.vote .count {
    white-space: nowrap;
}
.item .vote .count:nth-of-type(2) {
    margin-right: 2rem;
}
/** Favourites **/
.favourites-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
main button {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.my-lists {
    margin: .5rem 0;
}

details.uploader .file-upload-container {
    margin: 1rem var(--mr) 1rem var(--ml);
    max-width: var(--maxWidth);
}
details .no-items {
    text-align: center;
    font-style: italic;
    background-color: var(--base-50);
    padding: var(--outerPadding);
    border-radius: var(--innerRadius);
}

.controls {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between;
}

.controls label .icon + span {
    transform: scaleX(0);
    max-width: 0;
}

.type-filters:hover label:hover .icon + span,
.controls label:hover .icon + span,
.controls :checked + label .icon + span {
    transform: scaleX(1);
    max-width: fit-content;
}
.type-filters,
.view-controls {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/** Generalized Type Filters **/
details.type-filters {
    flex-direction: column;
}
details.type-filters form.filters {
    flex-direction: column;
}

details.type-filters div.filters {
    flex-wrap: wrap;
}

details.type-filters .order-options {
    width: 100%;
    display: flex;
}
details.type-filters .order-options > div {
    display: flex;
}
details.type-filters .order-by {
    width: 100%;
}
details.type-filters .order-by .radio-group-label {
    width: 100%;
    display: flex;
    gap: 1rem;
}
details.type-filters label {
    display: flex;
    align-items: center;
    gap: .5rem;
}

details.type-filters label {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .35rem;
    white-space: nowrap;
    width: fit-content;
    height: fit-content;
    cursor: pointer;
    border: 1px solid var(--base-200);
    border-radius: 4px;
    font-size: .875rem;
    transition: border-color var(--transition-base);
    margin-bottom: .5rem;
}
.filter-toggle .icon {
    margin-right: .5rem;
}
details.type-filters label:hover,
details.type-filters input:checked + label {
    background-color: var(--light-0);
    border-color: var(--action-0);
    color: var(--action-0);
}
details.type-filters .order-direction {
    justify-content: flex-end;
}

/** Generalized Modal **/

/* Grid */
.create-item {
    left: auto!important;
    right: 1rem;
    bottom: var(--offHeight)!important;
}
body:has(.group-display:not([hidden])) button.create-item{
    display: none;
}
.uploader .groups,
.item-grid {
    --padding: 0;
    padding: var(--padding);
    transition: padding var(--transition-base);
}
.uploader .groups,
.item-grid.grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .5rem;
    margin-top: 2rem;
}

.item-grid.empty {
    grid-template-columns: repeat(1, 1fr)!important;
}
.item-grid.empty div {
    text-align: center;
    border-radius: var(--innerRadius);
    background-color: var(--base-100);
}
.item-grid.empty h3 .icon {
    display: inline-flex;
    vertical-align: middle;
    margin: 0 1rem;
}
.uploader .group,
.item {
    width: calc(100% - (var(--padding) * 2));
}
.item-grid .item {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.item-grid .item .logo {
    --w: 100%;
    opacity: .2;
}
/** Grid View **/
.item-grid:not(.list-view) .item {
    display: flex;
    position: relative;
    flex-direction: column;
}
.item-grid:not(.list-view) button.favourite,
.item-grid:not(.list-view) .item-select label {
    position: absolute;
    z-index: 15;
    width: 3em;
    height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    top: .125rem;
    padding: 0!important;
    border-radius: var(--innerRadius);
    background-color: var(--overlay-light);
    color: var(--base-200);
}
.item-grid:not(.list-view) button.favourite:hover,
.item-grid:not(.list-view) .item-select label:hover {
    background-color: var(--overlay-heavy);
    color: var(--contrast);
}
.item-grid:not(.list-view) .item-select label::before {
    border-color: var(--base-200);
    position: relative;
    top: 0;
    left: 0;
    transform: none;
}

.item-grid:not(.list-view) .item-select label::after {
    left: calc(50% - 4px)!important;
}
.item-grid:not(.list-view) .item-select label:hover::before {
    border-color: var(--contrast);
}
.item-grid:not(.list-view) .item-select label {
    left: .1255rem;
}
.item-grid:not(.list-view) button.favourite {
    right: .125rem;
}
.item-grid:not(.list-view) img {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}
/** List View **/
.replace:not(:has(.list-view)) button[data-view=grid],
.replace:has(.list-view) button[data-view=list] {
    background-color: var(--base);
}
.item-grid.list-view .item {
    display: flex;
    position: relative;
    flex-direction: row;
    margin: .5rem 0;
    padding: .25rem .5rem;
    gap: .5rem;
}
.item-grid.list-view .item:nth-of-type(even){
    background-color: var(--base-100);
}

.item-grid.list-view .item-select label{
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    padding: 0 .5rem!important;
}
.item-grid.list-view .item-select label::after {
    /*left: calc(50% - 4px)!important;*/
}
.item-grid.list-view .item-select label::before {
    position: relative;
    top: 0;
    transform: none;
}
.item-grid.list-view .item-select label:hover {
    background-color: var(--base);
}

.item-grid.list-view .item-select label:hover::before {
    border-color: var(--action-0);
}
.item-grid.list-view img {
    width: 200px;
    height: 200px;
    aspect-ratio: 1;
    object-fit: cover;
}
.item-grid.list-view .item-info {
    width: 100%;
}
.item-grid .item-info h3 {
    margin: 0!important;
    text-align: right;
    font-size: var(--medium);
    text-transform: none;
}
.item-grid .item-info a {
    text-align: right;
    width: 100%;
    display: block;
    font-weight: normal;
    font-family: var(--body);
}
.item-grid .item-info a::before,
.item-grid .item-info a::after {
    display: none;
}
.item-grid.list-view .item-info .toggle-notes {
    display: none;
}
.item-grid.list-view .item-info .notes-content[hidden]{
    display: block!important;
}
.item-grid.list-view .item-info .notes-content {
    margin-top: 1rem;
}
.no-favourites {
    text-align: center;
}
.no-favourites h3 {
    margin: 0 auto!important;
}
/**
Limit reached
 */
.reached .current {
    color: var(--action-50);
}
.reached textarea,
.reached input {
    border: 2px solid var(--action-50);
}
/**
Groups
 */
.groups {
    gap: 1rem;
}
details.uploaded .file-upload-container,
details:not(.uploaded) .selection-container {
    display: none;
}
.uploading + .selection-container {
    display: flex!important;
}
.selection-container #save-changes {
    position: sticky;
    top: 3rem;
    left: 100%;
    border: 1px solid transparent;
    background-color: var(--action-50);
    box-shadow:var(--shadow);
    z-index: 5;
}
.selection-container #save-changes:hover {
    background-color: var(--base);
    border: 1px solid var(--action-50);
    color: 1px solid var(--action-50);
}

.group {
    padding: 1rem .66rem;
    background-color: var(--base-50);
    border-radius: var(--outerRadius);
}
.group.empty {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 4px dashed var(--base-200);
}
.group.empty .items {
    padding: 0;
    margin-top: 0;
}

.group .group-header {
    display: flex;
    position: relative;
}
.group .group-header label {
    position: absolute;
    top: -1.5rem;
}
.group .items {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: var(--innerRadius);
    background-color: var(--base);
}
.group .item-actions {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.group .item-actions > button,
.group .item-actions label {
    flex: 1;
    padding: .25em!important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}
.group .item-actions :checked + label {
    background-color: var(--action-50);
    color: var(--contrast);
}
.group .item-actions :checked + label:hover {
    border: 1px solid var(--action-50);
    background-color: transparent;
    color: var(--action-50);
}
.group .item-actions label::before {
    display: none!important;
}

.group-item img,
.preview-item img {
    width: 250px;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1;

}
.uploading .preview-item img,
.uploading .group-item img{
    animation: uploading 3s ease-in-out infinite alternate;
}
@keyframes uploading {
    0% {
        opacity: .6;
        filter: sepia(.3) grayscale(.3);
        transform: scale(.9);
    }
    100% {
        opacity: 1;
        filter: sepia(0) grayscale(0);
        transform: scale(1);
    }
}

.image-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.group.drop {
    border: 2px dashed var(--action-0);
    background: var(--action-rgb-subtle);
}

.group .items {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.group-content {
    min-height: 100px;
    padding: 1rem;
}

.group.drop {
    background: var(--action-rgb-subtle);
    border: 2px dashed var(--action-0);
}
.gallery .group-item,
.gallery .preview-item {
    cursor: grab;
}
.group-item.dragging,
.preview-item.dragging {
    cursor: grabbing;
    opacity: .5;
}

.items {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1rem;
}

/** Gallery **/
.gallery .preview-item .move-image {
    cursor: grab;
    position: absolute;
    top: .5rem;
    left: .5rem;
    opacity: 0;
    transition: opacity .2s;
}
.gallery-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: .5rem;
    background-color: var(--base-100);
    border-radius: var(--outerRadius);
}
.gallery-preview .preview-item {
    padding: .5rem;
    background-color: var(--base);
    border-radius: var(--innerRadius);
}

.gallery .preview-item:hover .move-image {
    opacity: 1;
}

.gallery .preview-item.sortable-ghost {
    opacity: .5;
}

.gallery .preview-item.sortable-drag {
    cursor: grabbing;
}

.preview-item .upload-status {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(0,0,0,.1);
}

.preview-item.error {
    border-color: red;
}

.preview-item.complete .upload-status {
    display: none;
}

/** Settings **/
.notification-table {
    width: 100%;
}
.notification-table tr td:first-of-type {
    width: 100%;
}
.notification-table td {
    vertical-align: middle;
    padding: 0 .5rem;
}
.notification-table td + td {
    text-align: right;
}
thead th {
    width: 50%;
}

@media (max-width: 767px){
    table .radio-options {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    table .radio-options label {
        width: 85%;
        margin-bottom: 0;
    }
}

/** Favourites Lists **/
.list-card {
    background-color: var(--base-50);
    padding: 1rem;
    border-radius: var(--innerRadius);
}
.list-header {
    display: flex;
    justify-content: space-between;
}
h2 .icon {
    --w: 1.5em;
    display: inline-block;
    vertical-align: middle;
    margin-right: .75rem;
}
.list-card h3,
.list-header h2 {
    margin: 0!important;
    font-size: var(--large);
}
.list-actions {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
}
.list-header + .list-actions {
    justify-content: flex-end;
}
.create-list-btn {
    font-size: var(--small);
}
.meta-stats {
    display: flex;
    justify-content: space-between;
    font-style: italic;
}

/** Repeater **/
.add-repeater-row {
    margin-left: auto;
    border: 1px solid var(--contrast-200);
}

/** Image **/

.image-display {
    max-height: 0;
    overflow: hidden;
    transform: scaleY(0);
    transition: max-height var(--timing) var(--function);
    transition-property: max-height, transform;
}
.image-display.has-image {
    max-height: 100%;
    transform: scaleY(1);
    transition: max-height var(--timing) var(--function);
    transition-property: max-height, transform;
}
.file-upload-container {
    margin-top: 1rem;
}

.file-upload-wrapper {
    border: 2px dashed var(--action-0);
    border-radius: 4px;
    padding: 2rem;
    text-align: center;
    transition: all .3s ease;
    background: var(--action-rgb-subtle);
    position: relative;
    cursor: pointer;
}
.file-upload-wrapper h2 {
    margin: 0!important;
    font-size: var(--large);
}

.file-upload-wrapper:hover,
.dragover {
    background: var(--action-rgb-subtle-hover);
    border-color: var(--action-0)!important;
}

.file-upload-wrapper input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-upload-text {
    color: var(--contrast);
    margin: 0;
    font-family: var(--body);
}

.file-upload-text strong {
    color: var(--action-0);
    text-decoration: underline;
}

/* Error state */
.file-error {
    color: var(--action-0);
    margin-top: .5rem;
    font-size: .9em;
}

.file-upload-container.uploading,
.image-display.has-image + .file-upload-container {
    max-height: 0;
    overflow: hidden;
    transform: scaleY(0);
    transition: max-height var(--timing) var(--function), transform var(--timing) var(--function);
    transition-property: max-height, transform;
}

/** Highlighted Taxonomy **/
.highlight-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: .5rem;
    margin-top: 1rem;
}

.highlight-option {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.highlight-option label {
    margin-bottom: 0;
    font-weight: normal;
}

.highlight-option input[type=checkbox]:disabled + label {
    opacity: .5;
    cursor: not-allowed;
}

/** Item Selection **/

.item-grid {
    --padding: 0;
    padding: var(--padding);
}
.item-grid.selecting {
    --padding: .5rem;
    transition: none;
    background-color: var(--base);
}
.item {
    --padding: 0;
    height: fit-content;
    padding: var(--padding);
    max-width: calc(100% - (var(--padding) * 2));
    transition: padding var(--transition-base);
}
.selecting .item {
    opacity: .666;
}
.selecting .item:has(.select-checkbox:checked) {
    --padding: .5rem;
    opacity: 1;
    background-color: var(--action-0);
    transition: none;
}


.item-grid.preview .preview-item {
    display: flex;
    gap: 2rem;
}
.preview-item .preview-image {
    width: 36%;
}
.preview-item .remove-file {
    width: 100%;
    background-color: var(--base);
    color: var(--contrast);
}
.preview-item .field:first-of-type {
    margin-top: 0!important;
}
.preview-item + .preview-item {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--contrast-200);
}

.item-grid.preview:empty + .hint {
    display: none;
}

body:has(.item-grid.empty) .bulk-controls {
    display: none;
}
.bulk-controls {
    margin: .75rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bulk-select {
    display: flex;
    justify-content: space-between;
}

.bulk-actions[hidden]{
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    transform: scaleY(0);
    transition: transform var(--timing) var(--function);
    transition-property: transform, max-height;
    transform-origin: top;
    display: flex!important;
    align-items: center;
    gap: .5rem;
    position: relative;
}

.bulk-actions {
    max-width: 100%;
    max-height: 100%;
    transform: scaleY(1);
    transition: transform var(--timing) var(--function);
    transition-property: transform, max-height;
    overflow:visible;
    transform-origin: top;
    display: flex;
    gap: .25rem;
}
.bulk-actions select {
    margin-right: .5rem;
}

.selected-count {
    font-size: var(--small);
    font-style: italic;
    font-weight: normal;
    margin-left: 1rem;
}

.input-with-button {
    display: flex;
    gap: .5rem;
}
.input-with-button .icon {
    --w: 1.5em;
}
/** Single Edit Modal **/
dialog > form .field {
    margin: 2rem 0;
}
.edit-modal [data-field=featured_image] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1;
}

/** Bulk Edit Modal **/
.bulk-edit-modal .selected {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .5rem;
    background-color: var(--base);
    padding: .5rem;
    border-radius: var(--outerRadius);
}
.bulk-edit-modal .selected input[type=checkbox] {
    position: absolute;
}
.bulk-edit-modal .selected label::before,
.bulk-edit-modal .selected label::after {
    display: none;
}
.bulk-edit-modal .selected label {
    opacity: .5;
    padding: .5rem!important;
    aspect-ratio: 1;
    margin-bottom: 0;
    max-width: 5rem;
    height: auto;
    cursor: pointer;
}
.bulk-edit-modal .selected label:has(input:checked) {
    opacity: 1;
    padding: 0!important;
}

.bulk-edit-modal .selected img {
    max-width: 100%;
    object-fit: cover;
    aspect-ratio: 1;
    border-radius: var(--innerRadius);
}

dialog .term-list {
    display: block;
}
.pagination-info {
    position: sticky;
    background-color: var(--overlay-heavy);
    top: 0;
}
.pagination-info:empty {
    display: none;
}

/** Quill Stuff **/
.editor-container {

}
.editor-container .ql-toolbar {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: .25rem;
    gap: 1rem;
    background-color: var(--base);
    border-top-left-radius: var(--innerRadius);
    border-top-right-radius: var(--innerRadius);
    border-bottom: 4px solid var(--base-50);
}
.ql-toolbar .ql-formats {
    display: flex;
    gap: .25rem;
}
.editor-container .ql-container {
    --padding: 1rem;
    background-color: var(--base);
    border-bottom-left-radius: var(--innerRadius);
    border-bottom-right-radius: var(--innerRadius);
    height: fit-content;
    padding: 2px;
}
.editor-container .ql-container .ql-editor {
    padding: var(--padding);
    width: calc(100% - (var(--padding) * 2.5));
    height: calc(100% - (var(--padding) * 2));
}
.ql-editor img {
    max-width: 50%;
    height: auto;
}

.ql-clipboard {
    left: -100000px;
    height: 1px;
    overflow-y: hidden;
    position: absolute;
    top: 50%;
}
.ql-hidden {
    display: none;
}
.ql-tooltip {
    position: absolute;
    transform: translateY(10px);
    background-color: var(--base-100);
    border: 1px solid var(--base);
    box-shadow: 0px 0px 5px var(--overlay-heavy);
    color: var(--contrast);
    padding: 5px 12px;
    white-space: nowrap;
}

#toolbar-einks_short_bio .ql-e_image {
    display: none;
}

/** Content Grid **/
.all-filters {
    position: relative;
    background-color: var(--base);
    border-radius: var(--outerRadius);
    padding: .5rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.controls .radio-options {
    gap: .25rem 1rem;
}
.radio-options details {
    width: 100%;
}
.radio-options input:not(.ch) + label,
.controls input:not(.ch) + .radio-options label {
    width: fit-content!important;
    gap: 0;
    margin: 0;
    display: flex;
    padding: .25rem .5rem!important;
    align-items: center;
}

.radio-options label span {
    transform: scaleX(0);
    max-width: 0;
}
.edit-form .radio-options label span,
.radio-options label:hover span,
.radio-options :checked + label span {
    transform: scaleX(1);
    max-width: 100%;
}
.radio-options input:not(.ch):checked + label {
    padding: .25rem .5rem!important;
}
.controls .radio-options input:not(.ch):checked+label {
    background-color: var(--base-100);
    border-color: var(--contrast-200);
    color: var(--contrast)!important;
    gap: .5rem;
}

dialog .field {
    margin: 3rem 0;
}


.filters {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.filters > div > label {
    margin: 0;
}
div.filters > div {
    display: flex;
    align-items: center;
    flex: 100%;
    gap: .5rem;
}
.filters .icon {
    --w: 1.5em;
}

@media (min-width:768px){
    div.filters > div {
        flex: 1;
    }
}

.view-controls.radio-options {
    gap: .5rem;
    margin-left: auto;
}
.view-controls.radio-options label {
    padding: .25rem!important;
}

.label-group {
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
}
.label-group .icon {
    margin-right: .5rem;
}
.item-grid.table {
    display: none;
}

.item-grid summary {
    padding: 0;
    gap: 0;
}
.item-grid .item-actions {
    position: absolute;
    top: .25rem;
    right: .25rem;
    gap: .25rem;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.item-grid .item-actions button {
    width: 2em;
    height: 2em;
    border-radius: var(--innerRadius);
    background-color: var(--overlay-light);
    display: flex;
    justify-content: center;
    align-items: center;
}
.item-grid .item-actions button:focus,
.item-grid .item-actions button:hover {
    background-color: var(--overlay-heavy);
    color: var(--action-0);
}



@media (max-width: 768px){
    .replace {
        margin-top: 4rem!important;
    }
    .list-header {
        flex-wrap: wrap;
    }
    .list-card h3 {
        font-size: var(--medium);
    }
    .item-grid.list-view .item {
        align-items: center;
    }
    .item-grid.list-view img {
        width: 80px;
        height: 80px;
        aspect-ratio: 1;
        object-fit: cover;
    }
}


.term-divider {
    position: relative;
    text-align: center;
    margin: 1rem 0;
    border-bottom: 1px solid var(--base-200);
}

.term-divider span {
    background: var(--base);
    padding: 0 1rem;
    color: var(--contrast);
    font-size: .9rem;
    position: relative;
    top: .5em;
}

.common-term {
    background: var(--base-50);
    border-radius: var(--innerRadius);
}

.loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 1rem;
    color: var(--contrast-100);
    font-size: .9rem;
}

.loading-indicator svg {
    animation: spin 1s linear infinite;
}

.pagination-info {
    text-align: center;
    padding: .5rem;
    font-size: .9rem;
    color: var(--contrast-100);
    border-top: 1px solid var(--base-100);
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


.term-breadcrumb {
    margin-bottom: 1rem;
    padding: .5rem;
    background: var(--base-50);
    border-radius: 4px;
}

.back-to-parent {
    display: flex;
    align-items: center;
    gap: .5rem;
    border: none;
    background: none;
    color: var(--contrast);
    cursor: pointer;
    padding: .5rem;
    border-radius: 4px;
    font-size: var(--small);
}

.back-to-parent:hover {
    background: var(--base-100);
}

.term-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .25rem 0;
}

.toggle-children {
    border: none;
    background: none;
    padding: .25rem;
    cursor: pointer;
    color: var(--contrast);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border-radius: 4px;
}

.toggle-children:hover {
    background: var(--base-50);
}

.loading-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.loading-indicator .loading {
    width: 16px;
    height: 16px;
    border: 2px solid var(--base-100);
    border-top-color: var(--contrast);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.term-breadcrumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .5rem;
    background: var(--base-50);
    border-radius: 4px;
}

.term-breadcrumb .path {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
}

.term-breadcrumb button {
    border: none;
    background: none;
    padding: .25rem .5rem;
    border-radius: 4px;
    cursor: pointer;
    color: var(--contrast);
    font-size: var(--small);
}

.term-breadcrumb button:hover {
    background: var(--base-100);
}

.path-separator {
    color: var(--contrast-50);
}

.path-level {
    white-space: nowrap;
}

.create-new-term {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--base-100);
}
.create-new-term button {
    width: 100%;
}

.suggestion-prompt {
    font-size: var(--small);
    color: var(--contrast-50);
    margin-bottom: 1rem;
}

.create-term-form {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.form-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.name-row {
    position: relative;
}

.name-row input {
    width: 100%!important;
    padding: .5rem;
    border: 2px solid var(--base-100);
    border-radius: 4px;
    background: var(--base);
    color: var(--contrast);
}

.name-row input:focus {
    border-color: var(--action-0);
    outline: none;
}

.parent-row {
    font-size: var(--small);
}

.parent-row label {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}

.create-term-form button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    border: none;
    border-radius: 4px;
    background: var(--action-0);
    color: var(--base);
    cursor: pointer;
    font-size: var(--small);
    transition: all .2s ease;
}

.create-term-form button:hover {
    background: var(--action-50);
}

.create-term-form button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.create-term-form button svg {
    width: 16px;
    height: 16px;
}

/** Search bar and new term functionality **/
.search-bar {
    position: relative;
    display: flex;
    gap: .5rem;
    align-items: center;
    z-index: 2;
}

.search-bar input {
    flex: 1;
    /* Make room for button */
    padding: .5rem 2.5rem .5rem .5rem;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.new-term-toggle {
    margin: 2rem 0 1rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Peek effect on search bar hover */
.search-bar:hover .new-term-toggle {
    opacity: 1;
    transform: translateX(-.25rem);
}

/* Form styling */
.create-term-form {
    position: relative;
    z-index: 1;
    background: var(--base);
    border: 2px solid var(--action-0);
    border-radius: 4px;
    padding: 1rem;
    margin-top: -2px;

    /* Animation */
    transform-origin: top;
    transition: all .2s var(--function);
}

.create-term-form:not([hidden]) {
    animation: slideDown .2s var(--function);
}

.create-term-form[hidden] {
    display: block !important; /* Override hidden */
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
}

.form-row {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.form-row + .form-row {
    margin-top: .5rem;
}

@keyframes slideDown {
    from {
        transform: scaleY(0);
        opacity: 0;
    }
    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

.news.item {
    padding: 1rem!important;
}

.dashboard .checkbox-options label {
    font-weight: normal;
}

.description.space {
    margin-bottom: 4rem;
}

.invited-artist {
    display: flex;
    align-items: center;
    margin: 1rem 0;
}
.invited-artist input[type=text],
.invited-artist input[type=email] {
    width: calc(100% - .5rem);
}
.invited-artist label {
    margin: 0;
    font-weight: normal;
    white-space:nowrap;
}
.invited-artist button {
    height: fit-content;
    margin-right: .5rem;
}
.actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.actions .send-invites {
    background-color: var(--action-50);
}
.actions .send-invites:hover,
.actions .send-invites:focus {
    background-color: var(--base);
    border-color: var(--action-50);
}

.dashboard .queue-status-panel {
    bottom: var(--offHeight);
}
.dashboard .queue-status-toggle {
    bottom: 0;
}

.items-list table th {
    padding: 0 .75rem;
    text-transform: none!important;
}
.items-list table.empty tbody {
    height: 40vh;
}

/*table textarea,*/
/*table input[type=text],*/
/*table input[type=url],*/
/*table input[type=number],*/
/*table input[type=email] {*/
/*    min-width: 40vw;*/
/*}*/

.empty tfoot {
    display: none;
}

p.hint {
    margin: 0 0 .5rem 0;
    font-size: var(--small);
    font-style: italic;
}
.item-grid + .hint {
    text-align: center;
    margin-top: 2rem;
}

.image.field[data-type=single]:has(.upload-item) .file-upload-container {
    display: none;
}
.image.field[data-type=single] .upload-item {
    grid-column: 1 / -1;
}
/** UPLOADER **/
.upload-item {
    position: relative;
    border: 1px solid var(--base-200);
    border-radius: 8px;
    background: var(--base-50);
    transition: all .3s ease;
}
.upload-item:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}
.upload-item[data-status=processing] {
    border-color: var(--action-200);
    background: var(--action-100);
}
.upload-item[data-status=cached] {
    border-color: var(--secondary-0);
    background: var(--secondary-200);
}
.upload-item[data-status=uploading] {
    border-color: var(--contrast);
    background-color: var(--base-50);
}
.upload-item .preview {
    position: relative;
}
.upload-item .status {
    position: absolute;
    bottom: .25rem;
    right: .25rem;
    background-color: var(--overlay-light);
    box-shadow: var(--shadow);
    border-radius: 50%;
}
.upload-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1;
    transition: transform .3s ease;
}
.upload-item:hover img {
    transform: scale(1.05);
}

.upload-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-heavy);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: .5rem;
    opacity: 0;
    transition: opacity .3s ease;
}
.upload-item:hover .overlay,
.upload-item[data-status=processing] .overlay,
.upload-item[data-status=uploading] .overlay {
    opacity: 1;
}

.upload-item .item-actions {
    position: relative;
}

.submit-uploads {
    position: fixed;
    bottom: var(--offHeight);
    right: 1rem;
    background-color: var(--base);
    height: var(--height);
    box-shadow: var(--shadow);
}
/*** UPLOADER GROUPS ***/
.group-display {
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 2rem;
}
.preview-actions {
    position: sticky;
    padding: .5rem;
    top: var(--offHeight);
    left: 0;
    background-color: var(--base-50);
    z-index: 5;
}
.preview-actions .selected {
    display: flex;
    justify-content: space-between;
    padding-right: 2rem;
    align-items: center;
}
.preview-actions .field {
    margin: 0;
}
.preview-actions .field label {
    margin-bottom: 0;
}
.selection-actions {
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
}
[data-status=completed] .progress {
    transform: scaleY(0);
    transform-origin: top;
}
.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    padding: .5rem;
    background: var(--base);
    border: 1px solid var(--contrast-200);
    border-radius: 8px;
    min-height: 60px;
}
.preview-grid:empty {
    display: none;
}


.upload-item .progress {
    position: absolute;
    top: 2px;
    right: 2px;
    left: 2px;
}
.upload-item .actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.upload-item .actions > label {
    margin: 0 1rem;
    padding-left: 0!important;
}
.upload-item input[type=text],
.upload-item textarea,
.group-fields input[type=text],
.group-fields textarea {
    width: calc(100% - 1rem);
}
/*.upload-item .actions > label {*/
/*    !*position: absolute;*!*/
/*    padding: 1rem!important;*/
/*    margin: 0;*/
/*    !*top: .5rem;*!*/
/*    !*left: 0;*!*/
/*}*/
/*    .upload-item .actions > label::before {*/
/*        left: calc(50% - 9px)!important;*/
/*        top: calc(50% - 9px)!important;*/
/*        transform: none!important;*/
/*    }*/
/*    .upload-item .actions > label::after {*/
/*        left: 1.25rem!important;*/
/*        top: 1rem!important;*/
/*    }*/
.item-grid .upload-item summary {
    display: flex;
    align-items: center;
    font-size: var(--small);
    gap: .5rem;
    text-transform: uppercase;
}
.upload-item:has([type=checkbox]:checked) .preview {
    padding: 1rem;
    background-color: var(--secondary-200);
}
.upload-item:has([open]) {
    grid-column: 1 / -1;
}
.upload-item summary .icon {
    --w: 1.1em;
}

[draggable="true"] {
    cursor: grab;
}
[draggable="true"]:active {
    cursor: grabbing;
}

.dragging {
    opacity: .5;
    transform: rotate(5deg) scale(.95);
    transition: all .2s ease;
}

.dragover:not(.item-grid.groups) {
    background-color: var(--overlay-action-medium);
    border: 2px dashed var(--action-0);
}

@keyframes dragHover {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.drag-hover {
    animation: dragHover .6s ease-in-out infinite;
}

/** GROUP **/
.empty-group {
    padding: 20px;
    text-align: center;
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px dashed var(--action-200);
    border-radius: var(--innerRadius);
    margin: 10px 0;
    cursor: pointer;
    transition: all .2s ease;
    aspect-ratio: 16/9;
}
.item-grid.groups {
    grid-template-columns: 1fr;
}

.item-grid.group .item-grid.group {
    min-height: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    border: 2px dashed var(--action-200);
    border-radius: var(--innerRadius);
    margin: 10px 0;
    cursor: pointer;
    transition: all .2s ease;
    aspect-ratio: 1;
    text-align: center;
}
.empty-group:hover,
.empty-group.dragover,
.item-grid.group .item-grid.group:hover,
.item-grid.group .item-grid.group.dragover {
    border-color: var(--action-0);
    background-color: var(--overlay-action-light);
    color: var(--action-50);
}

.upload-group {
    background-color: var(--base-100);
    border-radius: var(--innerRadius);
    border: 1px solid var(--contrast-200);
}
.group-actions {
    width: 100%;
    gap: .5rem;
}
.group-actions button {
    width: 100%;
}

body:has(.selection-actions[hidden]) button.create-group,
body:has(.selection-actions[hidden]) button.add-selection-to-group {
    display: none;
}

/** RESTORE FROM CACHE **/
.restore-notification {
    border-radius: var(--innerRadius);
    box-shadow: var(--shadow);
    padding: 1rem;
    background: var(--base-200);
    border: 1px solid var(--contrast-200);
    border-top-width: 4px;
    border-bottom-width: 4px;
}
.restore-content {
    display: flex;
    align-items: center;
}
.restore-actions .selection-controls {
    display: flex;
    gap: .5rem;
}

.restore-actions button {
    white-space: nowrap;
}
.restore-actions .action-buttons {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.restore-actions .action-buttons button {
    width: 100%;
}

label.restore-item {
    border-radius: .5rem;
    padding: 0;
    background-color: transparent;
    filter: grayscale(50);
    opacity: .8;
    transition: padding var(--transition-base);
    transition-property: padding, background-color;
    cursor: pointer;
}
label.restore-item:has(input:checked) {
    filter: grayscale(0);
    opacity: 1;
    padding: 1rem;
    background-color: var(--secondary-200);
}

.upload-item .featured + label {
    width: 2em;
    height: 2em;
    border-radius: var(--innerRadius);
    background-color: var(--overlay-light);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0!important;
    border: none;
}

input.featured + label .icon {
    --w: 1.25em;
}
input.featured + label .icon + .icon {
    position: absolute;
}
input.featured + label .star-fill,
input.featured:checked + label .star {
    transform: scale(0);
}
input.featured:checked + label .star-fill,
input.featured + label .star {
    transform: scale(1);
}
/**TODO: Double check needed **/
/*!* Centralized Upload Manager CSS *!*/

/*!* Global Upload Status Bar *!*/
/*.all-uploads {*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    background: var(--surface);*/
/*    border-bottom: 1px solid var(--border);*/
/*    padding: .75rem 1rem;*/
/*    z-index: 1000;*/
/*    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);*/
/*    backdrop-filter: blur(10px);*/
/*    display: none; !* Hidden by default *!*/
/*}*/

/*.upload-summary {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    margin-bottom: .5rem;*/
/*}*/

/*.all-uploads .active {*/
/*    font-weight: 500;*/
/*    color: var(--contrast);*/
/*    font-size: .9rem;*/
/*}*/

/*.upload-summary button {*/
/*    padding: .5rem 1rem;*/
/*    border: 1px solid var(--border);*/
/*    border-radius: 4px;*/
/*    background: var(--surface);*/
/*    color: var(--contrast);*/
/*    cursor: pointer;*/
/*    transition: all .3s ease;*/
/*    font-size: .875rem;*/
/*    margin-left: .5rem;*/
/*}*/

/*.upload-summary button:hover {*/
/*    background: var(--action-0);*/
/*    color: var(--action-contrast);*/
/*    border-color: var(--action-0);*/
/*}*/

/*!* Upload Drop Zones *!*/
/*.file-upload-container {*/
/*    position: relative;*/
/*    padding: .25rem;*/
/*    transition: border-color var(--transition-base),*/
/*    background-color var(--transition-base),*/
/*    padding var(--transition-base);*/
/*}*/

/*.file-upload-container.dragover {*/
/*    background-color: var(--action-rgb-subtle);*/
/*    border-color: var(--action-0);*/
/*    padding: .75rem;*/
/*}*/
/*    .dragover .file-upload-wrapper {*/
/*        transform: scale(1.02);*/
/*    }*/


/*!* Upload Actions *!*/
/*.upload .actions {*/
/*    display: flex;*/
/*    gap: .25rem;*/
/*    justify-content: flex-end;*/
/*}*/

/*.upload .actions button {*/
/*    background: rgba(0, 0, 0, .7);*/
/*    color: white;*/
/*    border: none;*/
/*    padding: .25rem;*/
/*    border-radius: 4px;*/
/*    cursor: pointer;*/
/*    transition: background .3s ease;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

/*.upload .actions button:hover {*/
/*    background: rgba(0, 0, 0, .9);*/
/*}*/

/*.upload .actions button svg {*/
/*    width: 16px;*/
/*    height: 16px;*/
/*}*/

/*!* Status Indicator *!*/
/*.status {*/
/*    position: absolute;*/
/*    top: .5rem;*/
/*    right: .5rem;*/
/*    width: 24px;*/
/*    height: 24px;*/
/*    border-radius: 50%;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    font-size: .8rem;*/
/*    font-weight: bold;*/
/*    z-index: 2;*/
/*    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);*/
/*}*/

/*.status.processing {*/
/*    background: var(--warning);*/
/*    color: var(--warning-contrast);*/
/*}*/

/*.status.processed {*/
/*    background: var(--info);*/
/*    color: var(--info-contrast);*/
/*}*/

/*.status.cached {*/
/*    background: var(--info);*/
/*    color: var(--info-contrast);*/
/*}*/

/*.status.uploading {*/
/*    background: var(--action-0);*/
/*    color: var(--action-contrast);*/
/*}*/

/*.status.uploaded {*/
/*    background: var(--success);*/
/*    color: var(--success-contrast);*/
/*}*/

/*.status.error {*/
/*    background: var(--error);*/
/*    color: var(--error-contrast);*/
/*}*/

/*!* Upload Metadata *!*/
/*.upload .metadata {*/
/*    padding: 1rem;*/
/*    border-top: 1px solid var(--border);*/
/*    background: var(--surface);*/
/*}*/

/*.upload .metadata .metadata-field {*/
/*    margin-bottom: .75rem;*/
/*}*/

/*.upload .metadata .metadata-field:last-child {*/
/*    margin-bottom: 0;*/
/*}*/

/*.upload .metadata label {*/
/*    display: block;*/
/*    margin-bottom: .25rem;*/
/*    font-weight: 500;*/
/*    font-size: .9rem;*/
/*    color: var(--contrast);*/
/*}*/

/*.upload .metadata input,*/
/*.upload .metadata textarea {*/
/*    width: 100%;*/
/*    padding: .5rem;*/
/*    border: 1px solid var(--border);*/
/*    border-radius: 4px;*/
/*    font-size: .9rem;*/
/*    transition: border-color .3s ease, box-shadow .3s ease;*/
/*}*/

/*.upload .metadata input:focus,*/
/*.upload .metadata textarea:focus {*/
/*    outline: none;*/
/*    border-color: var(--action-0);*/
/*    box-shadow: 0 0 0 2px var(--action-rgb-subtle);*/
/*}*/

/*.upload .metadata textarea {*/
/*    resize: vertical;*/
/*    min-height: 2.5rem;*/
/*}*/

/*!* Field Type Specific Styles *!*/

/*!* Single Image Field *!*/
/*.upload.field[data-upload-type="single"] .upload-preview-grid {*/
/*    grid-template-columns: 1fr;*/
/*    max-width: 400px;*/
/*}*/

/*!* Gallery Field *!*/
/*.upload.field[data-upload-type="gallery"] .upload-preview-grid {*/
/*    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));*/
/*}*/

/*!* Avatar Field *!*/
/*.upload.field[data-upload-type="avatar"] .upload-preview-grid {*/
/*    grid-template-columns: 1fr;*/
/*    max-width: 200px;*/
/*}*/

/*.upload.field[data-upload-type="avatar"] .upload-preview {*/
/*    aspect-ratio: 1;*/
/*    border-radius: 50%;*/
/*    overflow: hidden;*/
/*}*/

/*!* Spinner Animation *!*/
/*.spinner {*/
/*    width: 12px;*/
/*    height: 12px;*/
/*    border: 2px solid transparent;*/
/*    border-top: 2px solid currentColor;*/
/*    border-radius: 50%;*/
/*    animation: spin 1s linear infinite;*/
/*}*/

/*@keyframes spin {*/
/*    0% { transform: rotate(0deg); }*/
/*    100% { transform: rotate(360deg); }*/
/*}*/

/*@keyframes shimmer {*/
/*    0% { transform: translateX(-100%); }*/
/*    100% { transform: translateX(100%); }*/
/*}*/

/*!* Responsive Design *!*/
/*@media (max-width: 768px) {*/
/*    .all-uploads {*/
/*        position: relative;*/
/*        top: auto;*/
/*        left: auto;*/
/*        right: auto;*/
/*    }*/

/*    .upload-summary {*/
/*        flex-direction: column;*/
/*        gap: .5rem;*/
/*        align-items: stretch;*/
/*    }*/

/*    .upload-summary button {*/
/*        margin-left: 0;*/
/*        width: 100%;*/
/*    }*/

/*    .upload-preview-grid {*/
/*        grid-template-columns: 1fr;*/
/*        gap: .75rem;*/
/*    }*/

/*    .upload.field[data-upload-type="gallery"] .upload-preview-grid {*/
/*        grid-template-columns: repeat(2, 1fr);*/
/*    }*/
/*}*/

/*!* Dark Mode Support *!*/
/*@media (prefers-color-scheme: dark) {*/
/*    .upload-overlay {*/
/*        background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.6));*/
/*    }*/

/*}*/

/*!* High Contrast Mode *!*/
/*@media (prefers-contrast: high) {*/
/*    .upload-item {*/
/*        border-width: 2px;*/
/*    }*/

/*    .status {*/
/*        border: 2px solid currentColor;*/
/*    }*/

/*}*/

/*!* Reduced Motion *!*/
/*@media (prefers-reduced-motion: reduce) {*/
/*    .upload-item:hover {*/
/*        transform: none;*/
/*    }*/

/*    .upload-item:hover .upload-preview img {*/
/*        transform: none;*/
/*    }*/

/*    .spinner,*/
/*    .shimmer {*/
/*        animation: none;*/
/*    }*/
/*}*/

/*!* Focus Management *!*/
/*.upload-item:focus-within {*/
/*    outline: 2px solid var(--action-0);*/
/*    outline-offset: 2px;*/
/*}*/

/*.upload .actions button:focus {*/
/*    outline: 2px solid var(--action-0);*/
/*    outline-offset: 2px;*/
/*}*/

/*!* Loading States *!*/
/*.upload.field.processing {*/
/*    pointer-events: none;*/
/*    opacity: .7;*/
/*}*/

/*.upload.field.processing::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    background: rgba(255, 255, 255, .5);*/
/*    backdrop-filter: blur(2px);*/
/*    z-index: 10;*/
/*}*/

/*!* Field Capacity Indicators *!*/
/*.upload.field[data-at-capacity="true"] .file-upload-container {*/
/*    opacity: .5;*/
/*    pointer-events: none;*/
/*}*/

/*.upload.field[data-at-capacity="true"]::before {*/
/*    content: 'Maximum files reached';*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    background: var(--warning);*/
/*    color: var(--warning-contrast);*/
/*    padding: .5rem 1rem;*/
/*    border-radius: 4px;*/
/*    font-size: .875rem;*/
/*    z-index: 5;*/
/*}*/

/*!* Integration with existing form styles *!*/
/*.upload.field {*/
/*    position: relative;*/
/*}*/

/*.upload.field .upload-preview-grid {*/
/*    margin-top: .5rem;*/
/*}*/

/*!* Ensure global status doesn't interfere with fixed elements *!*/
/*body.has-global-upload-status {*/
/*    padding-top: 80px;*/
/*}*/

/*!* Animation for upload completion *!*/
/*@keyframes uploadSuccess {*/
/*    0% { transform: scale(1); }*/
/*    50% { transform: scale(1.05); }*/
/*    100% { transform: scale(1); }*/
/*}*/

/*.upload-item[data-status="uploaded"] {*/
/*    animation: uploadSuccess .6s ease-out;*/
/*}*/
/*!* Batch Processing Progress Bar *!*/
/*.batch-progress {*/
/*    margin: 1rem 0;*/
/*    padding: 1rem;*/
/*    background: var(--color-background-secondary, #f8f9fa);*/
/*    border: 1px solid var(--color-border, #e1e5e9);*/
/*    border-radius: 8px;*/
/*    transition: opacity .3s ease;*/
/*}*/

/*.batch-progress.completed {*/
/*    background: var(--color-success-light, #d4edda);*/
/*    border-color: var(--color-success, #28a745);*/
/*}*/

/*.progress-info {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    margin-bottom: .5rem;*/
/*    font-size: .9rem;*/
/*}*/

/*.progress-message {*/
/*    color: var(--color-text-secondary, #6c757d);*/
/*    font-weight: 500;*/
/*}*/

/*.progress-count {*/
/*    color: var(--color-text-primary, #212529);*/
/*    font-weight: 600;*/
/*    font-variant-numeric: tabular-nums;*/
/*}*/

/*.progress .bar {*/
/*    width: 100%;*/
/*    height: 8px;*/
/*    background: var(--color-background-tertiary, #e9ecef);*/
/*    border-radius: 4px;*/
/*    overflow: hidden;*/
/*}*/

/*.progress .fill {*/
/*    height: 100%;*/
/*    background: linear-gradient(90deg,*/
/*    var(--color-primary, #007cba) 0%,*/
/*    var(--color-primary-light, #0096dd) 100%*/
/*    );*/
/*    border-radius: 4px;*/
/*    transition: width .3s ease;*/
/*    position: relative;*/
/*}*/

/*!* Animated progress indicator *!*/
/*.progress .fill::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    background: linear-gradient(*/
/*            90deg,*/
/*            transparent 0%,*/
/*            rgba(255,255,255,.3) 50%,*/
/*            transparent 100%*/
/*    );*/
/*    animation: progress-shine 2s ease-in-out infinite;*/
/*}*/

/*@keyframes progress-shine {*/
/*    0% { transform: translateX(-100%); }*/
/*    100% { transform: translateX(100%); }*/
/*}*/

/*!* Completed state styling *!*/
/*.progress.completed .fill {*/
/*    background: linear-gradient(90deg,*/
/*    var(--color-success, #28a745) 0%,*/
/*    var(--color-success-light, #34ce57) 100%*/
/*    );*/
/*}*/

/*.progress.completed .progress-message {*/
/*    color: var(--color-success-dark, #155724);*/
/*}*/

/*!* Dark mode support *!*/
/*@media (prefers-color-scheme: dark) {*/
/*    .progress {*/
/*        background: var(--color-background-secondary-dark, #2d3436);*/
/*        border-color: var(--color-border-dark, #636e72);*/
/*    }*/

/*    .progress .bar {*/
/*        background: var(--color-background-tertiary-dark, #636e72);*/
/*    }*/
/*}*/

/*!* ✅ Grouping System CSS *!*/

/*!* Upload field container with grouping support *!*/
/*.upload.field.groupable {*/
/*    display: grid;*/
/*    grid-template-columns: 1fr 300px;*/
/*    gap: 20px;*/
/*    min-height: 400px;*/
/*}*/

/*.upload.field.groupable .upload-main {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/

/*.upload.field.groupable .upload-sidebar {*/
/*    border-left: 2px solid #e0e0e0;*/
/*    padding-left: 20px;*/
/*}*/

/*!* Preview grid for groupable uploads *!*/
/*.upload-preview-grid.groupable {*/
/*    min-height: 200px;*/
/*    border: 2px dashed #ddd;*/
/*    border-radius: 8px;*/
/*    padding: 15px;*/
/*    background: #fafafa;*/
/*}*/

/*.upload-preview-grid.groupable:empty::after {*/
/*    content: "Drop images here or click to upload";*/
/*    display: block;*/
/*    text-align: center;*/
/*    color: #666;*/
/*    font-style: italic;*/
/*    padding: 40px 20px;*/
/*}*/

/*!* Upload items with drag support *!*/
/*.upload-item[draggable] {*/
/*    cursor: grab;*/
/*    transition: transform .2s ease, box-shadow .2s ease;*/
/*}*/

/*.upload-item[draggable]:hover {*/
/*    transform: translateY(-2px);*/
/*    box-shadow: 0 4px 8px rgba(0,0,0,.1);*/
/*}*/

/*.upload-item.dragging {*/
/*    opacity: .5;*/
/*    transform: rotate(5deg);*/
/*    cursor: grabbing;*/
/*}*/

/*!* Groups container *!*/
/*.groups-container {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 15px;*/
/*    max-height: 600px;*/
/*    overflow-y: auto;*/
/*    padding: 10px;*/
/*    background: #f9f9f9;*/
/*    border-radius: 8px;*/
/*}*/

/*.groups-container .new-group-section {*/
/*    text-align: center;*/
/*    padding: 20px;*/
/*    border: 2px dashed #ccc;*/
/*    border-radius: 8px;*/
/*    background: white;*/
/*    cursor: pointer;*/
/*    transition: all .2s ease;*/
/*}*/

/*.groups-container .new-group-section:hover {*/
/*    border-color: #2196F3;*/
/*    background: #f0f8ff;*/
/*}*/

/*.new-group-btn {*/
/*    background: #2196F3;*/
/*    color: white;*/
/*    border: none;*/
/*    padding: 10px 20px;*/
/*    border-radius: 6px;*/
/*    cursor: pointer;*/
/*    font-size: 14px;*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    gap: 8px;*/
/*}*/

/*.new-group-btn:hover {*/
/*    background: #1976D2;*/
/*}*/

/*!* Individual groups *!*/
/*.upload-group {*/
/*    background: white;*/
/*    border: 1px solid #e0e0e0;*/
/*    border-radius: 8px;*/
/*    padding: 15px;*/
/*    transition: all .2s ease;*/
/*}*/

/*.upload-group.drag-hover {*/
/*    border-color: #2196F3;*/
/*    background: #f0f8ff;*/
/*    box-shadow: 0 2px 8px rgba(33, 150, 243, .2);*/
/*}*/

/*.group-header {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    margin-bottom: 15px;*/
/*    padding-bottom: 10px;*/
/*    border-bottom: 1px solid #f0f0f0;*/
/*}*/

/*.group-info {*/
/*    flex: 1;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: 5px;*/
/*}*/

/*.group-name {*/
/*    border: 1px solid #ddd;*/
/*    border-radius: 4px;*/
/*    padding: 6px 10px;*/
/*    font-size: 14px;*/
/*    font-weight: 500;*/
/*    background: white;*/
/*    transition: border-color .2s ease;*/
/*}*/

/*.group-name:focus {*/
/*    outline: none;*/
/*    border-color: #2196F3;*/
/*    box-shadow: 0 0 0 2px rgba(33, 150, 243, .2);*/
/*}*/

/*.group-name:empty::before {*/
/*    content: "Enter group name...";*/
/*    color: #999;*/
/*    font-style: italic;*/
/*}*/

/*.group-count {*/
/*    font-size: 12px;*/
/*    color: #666;*/
/*    font-weight: normal;*/
/*}*/

/*.group-actions {*/
/*    display: flex;*/
/*    gap: 8px;*/
/*}*/

/*.delete-group {*/
/*    background: #f44336;*/
/*    color: white;*/
/*    border: none;*/
/*    padding: 6px 8px;*/
/*    border-radius: 4px;*/
/*    cursor: pointer;*/
/*    font-size: 12px;*/
/*    transition: background .2s ease;*/
/*}*/

/*.delete-group:hover {*/
/*    background: #d32f2f;*/
/*}*/

/*!* Group drop zone *!*/
/*.group-drop-zone {*/
/*    min-height: 80px;*/
/*    border: 2px dashed #ccc;*/
/*    border-radius: 6px;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    margin-bottom: 15px;*/
/*    transition: all .2s ease;*/
/*    background: #fafafa;*/
/*}*/

/*.group-drop-zone p {*/
/*    color: #666;*/
/*    font-style: italic;*/
/*    margin: 0;*/
/*    font-size: 14px;*/
/*}*/

/*.group-drop-zone.drag-hover {*/
/*    border-color: #4CAF50;*/
/*    background: #f1f8e9;*/
/*}*/

/*!* Group items *!*/
/*.group-items {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));*/
/*    gap: 10px;*/
/*    margin-bottom: 15px;*/
/*}*/

/*.group-item {*/
/*    position: relative;*/
/*    background: white;*/
/*    border: 1px solid #e0e0e0;*/
/*    border-radius: 6px;*/
/*    overflow: hidden;*/
/*    transition: all .2s ease;*/
/*}*/

/*.group-item:hover {*/
/*    box-shadow: 0 2px 8px rgba(0,0,0,.1);*/
/*}*/

/*.group-item-preview {*/
/*    position: relative;*/
/*    width: 100%;*/
/*    height: 80px;*/
/*    overflow: hidden;*/
/*}*/

/*.group-item-preview img {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover;*/
/*}*/

/*.group-item-overlay {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    right: 0;*/
/*    background: rgba(0,0,0,.7);*/
/*    padding: 4px;*/
/*    opacity: 0;*/
/*    transition: opacity .2s ease;*/
/*}*/

/*.group-item:hover .group-item-overlay {*/
/*    opacity: 1;*/
/*}*/

/*.remove-from-group {*/
/*    background: #f44336;*/
/*    color: white;*/
/*    border: none;*/
/*    padding: 4px 6px;*/
/*    border-radius: 3px;*/
/*    cursor: pointer;*/
/*    font-size: 10px;*/
/*}*/

/*.remove-from-group:hover {*/
/*    background: #d32f2f;*/
/*}*/

/*!* Group metadata fields *!*/
/*.group-metadata {*/
/*    padding-top: 15px;*/
/*    border-top: 1px solid #f0f0f0;*/
/*}*/

/*.group-metadata .metadata-field {*/
/*    margin-bottom: 12px;*/
/*}*/

/*.group-metadata label {*/
/*    display: block;*/
/*    font-size: 12px;*/
/*    font-weight: 500;*/
/*    color: #333;*/
/*    margin-bottom: 4px;*/
/*}*/

/*.group-metadata input,*/
/*.group-metadata textarea {*/
/*    width: 100%;*/
/*    border: 1px solid #ddd;*/
/*    border-radius: 4px;*/
/*    padding: 6px 8px;*/
/*    font-size: 13px;*/
/*    transition: border-color .2s ease;*/
/*}*/

/*.group-metadata input:focus,*/
/*.group-metadata textarea:focus {*/
/*    outline: none;*/
/*    border-color: #2196F3;*/
/*    box-shadow: 0 0 0 2px rgba(33, 150, 243, .2);*/
/*}*/

/*.group-metadata textarea {*/
/*    resize: vertical;*/
/*    min-height: 60px;*/
/*}*/

/*!* Drag feedback animations *!*/
/*@keyframes dragHover {*/
/*    0% { transform: scale(1); }*/
/*    50% { transform: scale(1.02); }*/
/*    100% { transform: scale(1); }*/
/*}*/

/*.drag-hover {*/
/*    animation: dragHover .6s ease-in-out infinite;*/
/*}*/

/*!* Status indicators for grouped uploads *!*/
/*.upload-group[data-status="uploading"] {*/
/*    border-color: #FF9800;*/
/*    background: #fff8f0;*/
/*}*/

/*.upload-group[data-status="uploaded"] {*/
/*    border-color: #4CAF50;*/
/*    background: #f1f8e9;*/
/*}*/

/*.upload-group[data-status="error"] {*/
/*    border-color: #f44336;*/
/*    background: #ffebee;*/
/*}*/

/*!* Progress indicators for groups *!*/
/*.group-progress {*/
/*    height: 3px;*/
/*    background: #f0f0f0;*/
/*    border-radius: 2px;*/
/*    overflow: hidden;*/
/*    margin-top: 10px;*/
/*}*/

/*.group-progress-fill {*/
/*    height: 100%;*/
/*    background: #2196F3;*/
/*    transition: width .3s ease;*/
/*    border-radius: 2px;*/
/*}*/

/*!* Responsive design *!*/
/*@media (max-width: 768px) {*/
/*    .upload.field.groupable {*/
/*        grid-template-columns: 1fr;*/
/*        gap: 15px;*/
/*    }*/

/*    .upload.field.groupable .upload-sidebar {*/
/*        border-left: none;*/
/*        border-top: 2px solid #e0e0e0;*/
/*        padding-left: 0;*/
/*        padding-top: 15px;*/
/*    }*/

/*    .group-items {*/
/*        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));*/
/*        gap: 8px;*/
/*    }*/

/*    .groups-container {*/
/*        max-height: 400px;*/
/*    }*/
/*}*/

/*!* Accessibility improvements *!*/
/*.upload-item.groupable:focus {*/
/*    outline: 2px solid #2196F3;*/
/*    outline-offset: 2px;*/
/*}*/

/*.group-drop-zone:focus-within {*/
/*    border-color: #2196F3;*/
/*    background: #f0f8ff;*/
/*}*/

/*!* High contrast mode support *!*/
/*@media (prefers-contrast: high) {*/
/*    .upload-group {*/
/*        border-width: 2px;*/
/*    }*/

/*    .group-drop-zone {*/
/*        border-width: 3px;*/
/*    }*/

/*    .upload-item.groupable.dragging {*/
/*        border: 3px solid #2196F3;*/
/*    }*/
/*}*/

/*!* Selection Controls *!*/
/*.selection-controls {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 1rem;*/
/*    flex-wrap: wrap;*/
/*}*/

/*.selection-actions {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 1rem;*/
/*    padding: .5rem 1rem;*/
/*    background-color: var(--action-50);*/
/*    border-radius: var(--innerRadius);*/
/*    color: var(--contrast);*/
/*    font-size: .9rem;*/
/*}*/

/*.selection-actions button {*/
/*    background: rgba(255, 255, 255, .2);*/
/*    border: 1px solid rgba(255, 255, 255, .3);*/
/*    color: inherit;*/
/*    padding: .25rem .5rem;*/
/*    border-radius: var(--innerRadius);*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: .25rem;*/
/*}*/

/*.selection-actions button:hover {*/
/*    background: rgba(255, 255, 255, .3);*/
/*}*/

/*.selection-count {*/
/*    font-weight: bold;*/
/*}*/

/*!* Preview Actions *!*/
/*.preview-actions {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    padding: 1rem;*/
/*    background-color: var(--base-100);*/
/*    border-radius: var(--outerRadius);*/
/*    margin-bottom: 1rem;*/
/*}*/

/*!* Upload Item Enhancements *!*/
/*.upload-item {*/
/*    position: relative;*/
/*    background: var(--base);*/
/*    border-radius: var(--innerRadius);*/
/*    overflow: hidden;*/
/*    cursor: pointer;*/
/*    transition: transform .2s ease, box-shadow .2s ease;*/
/*}*/

/*.upload-item:hover {*/
/*    transform: translateY(-2px);*/
/*    box-shadow: var(--shadow);*/
/*}*/

/*.upload-item[draggable="true"] {*/
/*    cursor: grab;*/
/*}*/

/*.upload-item.dragging {*/
/*    cursor: grabbing;*/
/*    opacity: .5;*/
/*    transform: rotate(5deg) scale(.95);*/
/*}*/

/*.upload-item.selected {*/
/*    border: 2px solid var(--action-50);*/
/*    background: rgba(var(--action-rgb), .05);*/
/*}*/

/*.upload-item .preview {*/
/*    position: relative;*/
/*    aspect-ratio: 1;*/
/*}*/

/*.upload-item img {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover;*/
/*}*/

/*.upload-item .overlay {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    background: rgba(0, 0, 0, .6);*/
/*    opacity: 0;*/
/*    transition: opacity .2s ease;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: space-between;*/
/*    padding: .5rem;*/
/*}*/

/*.upload-item:hover .overlay,*/
/*.upload-item.selected .overlay {*/
/*    opacity: 1;*/
/*}*/

/*.upload-item .actions input[type="checkbox"] {*/
/*    margin: 0;*/
/*    transform: scale(1.2);*/
/*}*/

/*.upload-item .actions label {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    cursor: pointer;*/
/*}*/

/*!* Status Indicator *!*/
/*.upload-item .status {*/
/*    position: absolute;*/
/*    top: .5rem;*/
/*    right: .5rem;*/
/*    width: 1.5rem;*/
/*    height: 1.5rem;*/
/*    border-radius: 50%;*/
/*    background: var(--base);*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);*/
/*}*/

/*.upload-item[data-status="processing"] .status {*/
/*    background: var(--warning);*/
/*}*/

/*.upload-item[data-status="uploaded"] .status {*/
/*    background: var(--success);*/
/*}*/

/*.upload-item[data-status="error"] .status {*/
/*    background: var(--danger);*/
/*}*/

/*!* Group Enhancements *!*/
/*.upload-group {*/
/*    background: var(--base-50);*/
/*    border-radius: var(--outerRadius);*/
/*    padding: 1rem;*/
/*    margin-bottom: 1rem;*/
/*    border: 2px solid transparent;*/
/*    transition: border-color .2s ease, background-color .2s ease;*/
/*}*/

/*.upload-group.dragover {*/
/*    border-color: var(--action-50);*/
/*    background: rgba(var(--action-rgb), .05);*/
/*}*/

/*.group-header {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    margin-bottom: 1rem;*/
/*}*/

/*.group-info {*/
/*    flex: 1;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: .25rem;*/
/*}*/

/*.group-name {*/
/*    font-size: 1.1rem;*/
/*    font-weight: 500;*/
/*    border: none;*/
/*    background: transparent;*/
/*    color: var(--text);*/
/*    padding: .25rem 0;*/
/*    border-bottom: 1px solid transparent;*/
/*    transition: border-color .2s ease;*/
/*}*/

/*.group-name:focus {*/
/*    outline: none;*/
/*    border-bottom-color: var(--action-50);*/
/*}*/

/*.group-count {*/
/*    font-size: .85rem;*/
/*    color: var(--text-muted);*/
/*}*/

/*.group-actions {*/
/*    display: flex;*/
/*    gap: .5rem;*/
/*}*/

/*.group-actions button {*/
/*    background: var(--base);*/
/*    border: 1px solid var(--base-200);*/
/*    border-radius: var(--innerRadius);*/
/*    padding: .5rem;*/
/*    cursor: pointer;*/
/*    transition: all .2s ease;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/

/*.group-actions button:hover {*/
/*    background: var(--action-50);*/
/*    color: var(--contrast);*/
/*    border-color: var(--action-50);*/
/*}*/

/*.group-actions .delete-group:hover {*/
/*    background: var(--danger);*/
/*    border-color: var(--danger);*/
/*}*/

/*!* Group Content *!*/
/*.group-content {*/
/*    min-height: 120px;*/
/*}*/

/*.group-drop-zone {*/
/*    border: 2px dashed var(--base-300);*/
/*    border-radius: var(--innerRadius);*/
/*    padding: 2rem;*/
/*    text-align: center;*/
/*    color: var(--text-muted);*/
/*    transition: all .2s ease;*/
/*    cursor: pointer;*/
/*}*/

/*.group-drop-zone:hover,*/
/*.group-drop-zone.dragover {*/
/*    border-color: var(--action-50);*/
/*    background: rgba(var(--action-rgb), .05);*/
/*    color: var(--action-50);*/
/*}*/

/*.group-items {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));*/
/*    gap: 1rem;*/
/*    padding: 1rem 0;*/
/*}*/

/*.group-item {*/
/*    position: relative;*/
/*    aspect-ratio: 1;*/
/*    border-radius: var(--innerRadius);*/
/*    overflow: hidden;*/
/*    background: var(--base);*/
/*    transition: transform .2s ease;*/
/*}*/

/*.group-item:hover {*/
/*    transform: scale(1.02);*/
/*}*/

/*.group-item img {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover;*/
/*}*/

/*.group-item .overlay {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    background: rgba(0, 0, 0, .6);*/
/*    opacity: 0;*/
/*    transition: opacity .2s ease;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    gap: .5rem;*/
/*}*/

/*.group-item:hover .overlay {*/
/*    opacity: 1;*/
/*}*/

/*.group-item .overlay button {*/
/*    background: rgba(255, 255, 255, .9);*/
/*    border: none;*/
/*    border-radius: 50%;*/
/*    width: 2rem;*/
/*    height: 2rem;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    cursor: pointer;*/
/*    transition: all .2s ease;*/
/*}*/

/*.group-item .set-featured {*/
/*    color: var(--warning);*/
/*}*/

/*.group-item .set-featured:hover {*/
/*    background: var(--warning);*/
/*    color: white;*/
/*}*/

/*.group-item .remove-from-group:hover {*/
/*    background: var(--danger);*/
/*    color: white;*/
/*}*/

/*!* Empty Group State *!*/
/*.empty-group {*/
/*    border: 4px dashed var(--base-200);*/
/*    border-radius: var(--innerRadius);*/
/*    padding: 2rem;*/
/*    text-align: center;*/
/*    color: var(--text-muted);*/
/*    aspect-ratio: 1;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    cursor: pointer;*/
/*    transition: all .2s ease;*/
/*}*/

/*.empty-group:hover,*/
/*.empty-group.dragover {*/
/*    border-color: var(--action-50);*/
/*    background: rgba(var(--action-rgb), .05);*/
/*    color: var(--action-50);*/
/*}*/

/*!* Sidebar *!*/
/*.sidebar {*/
/*    background: var(--base-50);*/
/*    border-radius: var(--outerRadius);*/
/*    padding: 1.5rem;*/
/*    min-height: 400px;*/
/*}*/

/*.sidebar .header {*/
/*    margin-bottom: 1.5rem;*/
/*}*/

/*.sidebar h4 {*/
/*    margin: 0 0 .5rem 0;*/
/*    color: var(--text);*/
/*}*/

/*.sidebar .hint {*/
/*    font-size: .85rem;*/
/*    color: var(--text-muted);*/
/*    margin: .25rem 0;*/
/*}*/

/*.new-group {*/
/*    width: 100%;*/
/*    background: var(--action-50);*/
/*    color: var(--contrast);*/
/*    border: none;*/
/*    border-radius: var(--innerRadius);*/
/*    padding: .75rem;*/
/*    margin-bottom: 1rem;*/
/*    cursor: pointer;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    gap: .5rem;*/
/*    font-weight: 500;*/
/*    transition: background-color .2s ease;*/
/*}*/

/*.new-group:hover {*/
/*    background: rgba(var(--action-rgb), .8);*/
/*}*/

/*!* Layout *!*/
/*.group-display {*/
/*    display: grid;*/
/*    grid-template-columns: 2fr 1fr;*/
/*    gap: 2rem;*/
/*    margin-top: 2rem;*/
/*}*/

/*.preview-wrap {*/
/*    min-height: 400px;*/
/*}*/

/*.preview-grid {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));*/
/*    gap: 1rem;*/
/*    padding: 1rem;*/
/*    background: var(--base-100);*/
/*    border-radius: var(--outerRadius);*/
/*    min-height: 200px;*/
/*}*/

/*.preview-grid:empty::after {*/
/*    content: "No images uploaded yet. Drag files here or click to upload.";*/
/*    grid-column: 1 / -1;*/
/*    text-align: center;*/
/*    color: var(--text-muted);*/
/*    padding: 2rem;*/
/*    border: 2px dashed var(--base-300);*/
/*    border-radius: var(--innerRadius);*/
/*}*/

/*!* File Upload Container *!*/
/*.file-upload-container.dragover {*/
/*    border-color: var(--action-50);*/
/*    background: rgba(var(--action-rgb), .05);*/
/*}*/

/*!* Responsive Design *!*/
/*@media (max-width: 768px) {*/
/*    .group-display {*/
/*        grid-template-columns: 1fr;*/
/*        gap: 1rem;*/
/*    }*/

/*    .preview-actions {*/
/*        flex-direction: column;*/
/*        align-items: stretch;*/
/*        gap: 1rem;*/
/*    }*/

/*    .selection-controls {*/
/*        justify-content: space-between;*/
/*    }*/

/*    .preview-grid {*/
/*        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));*/
/*    }*/

/*    .group-items {*/
/*        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));*/
/*    }*/
/*}*/

/*!* Animation for upload progress *!*/
/*@keyframes uploadProgress {*/
/*    0% { transform: translateX(-100%); }*/
/*    100% { transform: translateX(100%); }*/
/*}*/

/*.upload-item[data-status="uploading"] .progress .bar::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    height: 100%;*/
/*    width: 20%;*/
/*    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);*/
/*    animation: uploadProgress 1.5s infinite;*/
/*}*/

/*!* Accessibility *!*/
/*.upload-item:focus-within,*/
/*.group-item:focus-within,*/
/*.upload-group:focus-within {*/
/*    outline: 2px solid var(--action-50);*/
/*    outline-offset: 2px;*/
/*}*/

/*!* High contrast mode support *!*/
/*@media (prefers-contrast: high) {*/
/*    .upload-item.selected {*/
/*        border-width: 3px;*/
/*    }*/

/*    .group-drop-zone.dragover {*/
/*        border-width: 3px;*/
/*    }*/
/*}*/
/*.restore-notification {*/
/*    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);*/
/*    border: 1px solid #ffc107;*/
/*    border-left: 4px solid #ff6b35;*/
/*    border-radius: var(--outerRadius);*/
/*    padding: 1.5rem;*/
/*    margin-bottom: 1.5rem;*/
/*    box-shadow: 0 4px 12px rgba(255, 107, 53, .15);*/
/*    animation: slideInFromTop .4s ease-out;*/
/*    transition: opacity .3s ease, transform .3s ease;*/
/*}*/

/*@keyframes slideInFromTop {*/
/*    from {*/
/*        transform: translateY(-20px);*/
/*        opacity: 0;*/
/*    }*/
/*    to {*/
/*        transform: translateY(0);*/
/*        opacity: 1;*/
/*    }*/
/*}*/

/*.restore-content {*/
/*    display: grid;*/
/*    grid-template-columns: auto 1fr auto;*/
/*    gap: 1rem;*/
/*    align-items: start;*/
/*}*/

/*.restore-icon {*/
/*    font-size: 1.5rem;*/
/*    color: #ff6b35;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    width: 2.5rem;*/
/*    height: 2.5rem;*/
/*    background: rgba(255, 107, 53, .1);*/
/*    border-radius: 50%;*/
/*    flex-shrink: 0;*/
/*}*/

/*.restore-message {*/
/*    min-width: 0; !* Allow text to wrap *!*/
/*}*/

/*.restore-message h4 {*/
/*    margin: 0 0 .5rem 0;*/
/*    color: #d63384;*/
/*    font-size: 1.1rem;*/
/*    font-weight: 600;*/
/*}*/

/*.restore-message p {*/
/*    margin: 0 0 .5rem 0;*/
/*    color: #6c5419;*/
/*    line-height: 1.4;*/
/*}*/

/*.restore-message p:last-child {*/
/*    margin-bottom: 0;*/
/*}*/

/*.restore-message .warning {*/
/*    background: rgba(220, 53, 69, .1);*/
/*    border: 1px solid rgba(220, 53, 69, .2);*/
/*    border-radius: var(--innerRadius);*/
/*    padding: .5rem .75rem;*/
/*    margin-top: .75rem;*/
/*    font-size: .9rem;*/
/*}*/

/*.restore-message .warning strong {*/
/*    color: #dc3545;*/
/*}*/

/*.restore-actions {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    gap: .5rem;*/
/*    flex-shrink: 0;*/
/*}*/

/*.start-over-btn {*/
/*    background: #dc3545;*/
/*    color: white;*/
/*    border: none;*/
/*    border-radius: var(--innerRadius);*/
/*    padding: .5rem 1rem;*/
/*    font-size: .9rem;*/
/*    font-weight: 500;*/
/*    cursor: pointer;*/
/*    transition: all .2s ease;*/
/*    white-space: nowrap;*/
/*}*/

/*.start-over-btn:hover {*/
/*    background: #c82333;*/
/*    transform: translateY(-1px);*/
/*    box-shadow: 0 2px 4px rgba(220, 53, 69, .3);*/
/*}*/

/*.start-over-btn:active {*/
/*    transform: translateY(0);*/
/*}*/

/*.dismiss-notification {*/
/*    background: transparent;*/
/*    border: 1px solid #6c5419;*/
/*    color: #6c5419;*/
/*    border-radius: var(--innerRadius);*/
/*    padding: .5rem;*/
/*    cursor: pointer;*/
/*    transition: all .2s ease;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    width: 2rem;*/
/*    height: 2rem;*/
/*}*/

/*.dismiss-notification:hover {*/
/*    background: #6c5419;*/
/*    color: white;*/
/*}*/

/*!* Start Over Confirmation Dialog *!*/
/*.start-over-confirmation {*/
/*    border: none;*/
/*    border-radius: var(--outerRadius);*/
/*    padding: 0;*/
/*    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);*/
/*    max-width: 500px;*/
/*    width: 90vw;*/
/*}*/

/*.start-over-confirmation::backdrop {*/
/*    background: rgba(0, 0, 0, .6);*/
/*    backdrop-filter: blur(4px);*/
/*}*/

/*.confirmation-content {*/
/*    padding: 2rem;*/
/*    background: var(--base);*/
/*    border-radius: var(--outerRadius);*/
/*}*/

/*.confirmation-content h3 {*/
/*    margin: 0 0 1rem 0;*/
/*    color: #dc3545;*/
/*    font-size: 1.25rem;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: .5rem;*/
/*}*/

/*.confirmation-content h3::before {*/
/*    content: "⚠️";*/
/*    font-size: 1.5rem;*/
/*}*/

/*.confirmation-content p {*/
/*    margin: 0 0 1rem 0;*/
/*    color: var(--text);*/
/*    line-height: 1.5;*/
/*}*/

/*.confirmation-content ul {*/
/*    margin: 0 0 1rem 1rem;*/
/*    color: var(--text);*/
/*}*/

/*.confirmation-content li {*/
/*    margin-bottom: .25rem;*/
/*}*/

/*.confirmation-actions {*/
/*    display: flex;*/
/*    gap: 1rem;*/
/*    justify-content: flex-end;*/
/*    margin-top: 1.5rem;*/
/*    padding-top: 1rem;*/
/*    border-top: 1px solid var(--base-200);*/
/*}*/

/*.confirm-start-over {*/
/*    background: #dc3545;*/
/*    color: white;*/
/*    border: none;*/
/*    border-radius: var(--innerRadius);*/
/*    padding: .75rem 1.5rem;*/
/*    font-weight: 500;*/
/*    cursor: pointer;*/
/*    transition: all .2s ease;*/
/*}*/

/*.confirm-start-over:hover {*/
/*    background: #c82333;*/
/*}*/

/*.cancel-start-over {*/
/*    background: var(--base-100);*/
/*    color: var(--text);*/
/*    border: 1px solid var(--base-300);*/
/*    border-radius: var(--innerRadius);*/
/*    padding: .75rem 1.5rem;*/
/*    cursor: pointer;*/
/*    transition: all .2s ease;*/
/*}*/

/*.cancel-start-over:hover {*/
/*    background: var(--base-200);*/
/*}*/

/*!* Responsive Design *!*/
/*@media (max-width: 768px) {*/
/*    .restore-content {*/
/*        grid-template-columns: 1fr;*/
/*        gap: 1rem;*/
/*        text-align: center;*/
/*    }*/

/*    .restore-icon {*/
/*        margin: 0 auto;*/
/*    }*/

/*    .restore-actions {*/
/*        flex-direction: row;*/
/*        justify-content: center;*/
/*        align-items: center;*/
/*    }*/

/*    .start-over-btn {*/
/*        order: 2;*/
/*    }*/

/*    .dismiss-notification {*/
/*        order: 1;*/
/*    }*/

/*    .confirmation-actions {*/
/*        flex-direction: column-reverse;*/
/*    }*/

/*    .confirmation-actions button {*/
/*        width: 100%;*/
/*    }*/
/*}*/

/*!* Reduced motion preference *!*/
/*@media (prefers-reduced-motion: reduce) {*/
/*    .restore-notification {*/
/*        animation: none;*/
/*    }*/

/*    .start-over-btn:hover {*/
/*        transform: none;*/
/*    }*/
/*}*/

/*!* High contrast mode *!*/
/*@media (prefers-contrast: high) {*/
/*    .restore-notification {*/
/*        border-width: 2px;*/
/*        border-left-width: 6px;*/
/*    }*/

/*    .restore-message .warning {*/
/*        border-width: 2px;*/
/*    }*/
/*}*/

/*!* Dark mode adjustments *!*/
/*@media (prefers-color-scheme: dark) {*/
/*    .restore-notification {*/
/*        background: linear-gradient(135deg, #3d3d00 0%, #4a4a00 100%);*/
/*        border-color: #ffc107;*/
/*        color: #fff3cd;*/
/*    }*/

/*    .restore-message p {*/
/*        color: #fff3cd;*/
/*    }*/

/*    .restore-message .warning {*/
/*        background: rgba(220, 53, 69, .2);*/
/*        border-color: rgba(220, 53, 69, .4);*/
/*        color: #ffb3ba;*/
/*    }*/

/*    .dismiss-notification {*/
/*        border-color: #fff3cd;*/
/*        color: #fff3cd;*/
/*    }*/

/*    .dismiss-notification:hover {*/
/*        background: #fff3cd;*/
/*        color: #3d3d00;*/
/*    }*/
/*}*/

/*.dragover {*/
/*    background-color: rgba(var(--primary-rgb), .1);*/
/*    border: 2px dashed var(--primary-color);*/
/*    border-radius: 8px;*/
/*}*/

/*.upload-item.dragging {*/
/*    opacity: .5;*/
/*    transform: scale(.95);*/
/*    transition: all .2s ease;*/
/*}*/

/*.group-drop-zone {*/
/*    min-height: 60px;*/
/*    border: 2px dashed #ccc;*/
/*    border-radius: 8px;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    color: #666;*/
/*    transition: all .2s ease;*/
/*}*/

/*.group-drop-zone.dragover {*/
/*    border-color: var(--primary-color);*/
/*    background-color: rgba(var(--primary-rgb), .05);*/
/*    color: var(--primary-color);*/
/*}*/

/*.empty-group {*/
/*    padding: 20px;*/
/*    text-align: center;*/
/*    border: 2px dashed #ddd;*/
/*    border-radius: 8px;*/
/*    margin: 10px 0;*/
/*    cursor: pointer;*/
/*    transition: all .2s ease;*/
/*}*/

/*.empty-group:hover {*/
/*    border-color: var(--primary-color);*/
/*    background-color: rgba(var(--primary-rgb), .02);*/
/*}*/

/*.group-item.featured {*/
/*    border: 2px solid gold;*/
/*    position: relative;*/
/*}*/

/*.group-item.featured::after {*/
/*    content: "⭐";*/
/*    position: absolute;*/
/*    top: 5px;*/
/*    right: 5px;*/
/*    background: gold;*/
/*    border-radius: 50%;*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    font-size: 12px;*/
/*}*/

/*.upload-item[draggable="true"] {*/
/*    cursor: grab;*/
/*}*/

/*.upload-item[draggable="true"]:active {*/
/*    cursor: grabbing;*/
/*}*/

/*.selection-actions {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 10px;*/
/*    padding: 10px;*/
/*    background: rgba(var(--primary-rgb), .05);*/
/*    border-radius: 6px;*/
/*    border: 1px solid rgba(var(--primary-rgb), .2);*/
/*}*/

/*.group-display .sidebar {*/
/*    min-width: 300px;*/
/*    max-width: 350px;*/
/*    background: #f9f9f9;*/
/*    border-left: 1px solid #eee;*/
/*    padding: 20px;*/
/*}*/

/*.group-display .preview-wrap {*/
/*    flex: 1;*/
/*    padding: 20px;*/
/*}*/

/*.group-display {*/
/*    display: flex;*/
/*    gap: 20px;*/
/*    margin-top: 20px;*/
/*    border: 1px solid #ddd;*/
/*    border-radius: 8px;*/
/*    overflow: hidden;*/
/*}*/

/* Touch Drag & Drop Styles */

/* Original item being dragged */
.upload-item.dragging {
    opacity: .5;
    transform: scale(.95);
    transition: opacity .2s ease, transform .2s ease;
}

/* Touch drag preview element */
.drag-preview {
    background: var(--bg-elevated);
    border: 2px solid var(--accent-primary);
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.drag-preview * {
    pointer-events: none;
}

/* Drop target states for touch */
.dragover {
    background-color: var(--accent-primary-alpha);
    border: 2px dashed var(--accent-primary);
    transform: scale(1.02);
    transition: all .2s ease;
}

.dragover::after {
    content: "Drop here";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--accent-primary);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    z-index: 1;
    pointer-events: none;
}

/* Enhanced touch targets for mobile */
@media (hover: none) and (pointer: coarse) {
    .upload-item {
        min-height: 44px; /* Apple's recommended minimum touch target */
        touch-action: manipulation;
    }

    .upload-item [data-upload-id] {
        cursor: grab;
        -webkit-user-select: none;
        user-select: none;
    }

    .upload-item.dragging {
        cursor: grabbing;
    }

    /* Larger touch targets for action buttons */
    .upload-item .actions button {
        min-width: 44px;
        min-height: 44px;
        padding: 12px;
    }

    /* Group containers more touch-friendly */
    .item-grid.groups .empty-group {
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    .group-content {
        padding: 0;
        width: 100%;
    }

    /* Better visual feedback for group areas */
    .item-grid.group,
    .item-grid.groups {
        border: 2px solid transparent;
        border-radius: 8px;
        transition: border-color .2s ease, background-color .2s ease;
    }

    .item-grid.group.dragover,
    .item-grid.groups.dragover {
        border-color: var(--accent-primary);
        background-color: var(--accent-primary-alpha);
    }
}

/* Haptic feedback animation */
@keyframes feedback {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.feedback {
    animation: feedback .2s ease;
}

/* Prevent text selection during touch drag */
.dragging,
.dragging * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Long press visual feedback */
.upload-item:active {
    transform: scale(.98);
    transition: transform .1s ease;
}

/* Better spacing for touch interfaces */
@media (hover: none) {

    .item-grid.groups {
        gap: 16px;
    }

    .group-item {
        margin: 8px;
    }
}

/* Accessibility improvements for touch */
.upload-item:focus-visible {
    outline: 3px solid var(--accent-primary);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .dragover {
        border-width: 3px;
        border-style: solid;
    }

    .drag-preview {
        border-width: 3px;
    }
}
/* Touch Drag & Drop Styles */

/* Original item being dragged */
.upload-item.dragging {
    opacity: .5;
    transform: scale(.95);
    transition: opacity .2s ease, transform .2s ease;
}

/* Touch drag preview element */
.drag-preview {
    background: var(--bg-elevated);
    border: 2px solid var(--accent-primary);
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.drag-preview * {
    pointer-events: none;
}

/* Multi-item drag preview */
.drag-preview.multi-item {
    /* Container styles handled in JS for dynamic positioning */
}
.drag-preview img {
    max-width: 200px;
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
}

.drag-preview.multi-item .selection-count-badge {
    background: var(--accent-primary);
    color: white;
    border: 2px solid white;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

/* Enhanced visual feedback for multiple selection */
.upload-item.selected.dragging {
    opacity: .3;
    transform: scale(.9);
    border: 2px solid var(--accent-primary);
}

/* Stacked preview animation */
@keyframes stack-preview {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateX(var(--stack-x, 0)) translateY(var(--stack-y, 0)) rotate(var(--stack-rotation, 0deg)) scale(1.05);
        opacity: var(--stack-opacity, .8);
    }
}

.drag-preview.multi-item > * {
    animation: stack-preview .2s ease-out forwards;
}

/* Drop target states for touch */
.dragover {
    background-color: var(--accent-primary-alpha);
    border: 2px dashed var(--accent-primary);
    transform: scale(1.02);
    transition: all .2s ease;
}

.dragover::after {
    content: "Drop here";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--accent-primary);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    z-index: 1;
    pointer-events: none;
}

/* Enhanced drop feedback for multiple items */
.dragover.multi-drop::after {
    content: "Drop " attr(data-item-count) " items here";
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

/* Pulsing animation for multi-item drop zones */
.dragover.multi-drop {
    animation: multi-drop-pulse 1s infinite alternate;
}

@keyframes multi-drop-pulse {
    0% {
        background-color: var(--accent-primary-alpha);
        transform: scale(1.02);
    }
    100% {
        background-color: var(--accent-secondary-alpha, var(--accent-primary-alpha));
        transform: scale(1.04);
    }
}

/* Enhanced touch targets for mobile */
@media (hover: none) and (pointer: coarse) {
    .upload-item {
        min-height: 44px; /* Apple's recommended minimum touch target */
        touch-action: manipulation;
    }

    .upload-item [data-upload-id] {
        cursor: grab;
        -webkit-user-select: none;
        user-select: none;
    }

    .upload-item.dragging {
        cursor: grabbing;
    }

    /* Larger touch targets for action buttons */
    .upload-item .actions button {
        min-width: 44px;
        min-height: 44px;
        padding: 12px;
    }

    /* Group containers more touch-friendly */
    .item-grid.groups .empty-group {
        padding: 1rem;
        margin: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    /* Better visual feedback for group areas */
    .item-grid.group,
    .item-grid.groups {
        border: 2px solid transparent;
        border-radius: 8px;
        transition: border-color .2s ease, background-color .2s ease;
    }

    .item-grid.group.dragover,
    .item-grid.groups.dragover {
        border-color: var(--accent-primary);
        background-color: var(--accent-primary-alpha);
    }
}

/* Haptic feedback animation */
@keyframes feedback {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.feedback {
    animation: feedback .2s ease;
}

/* Prevent text selection during touch drag */
.dragging,
.dragging * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Long press visual feedback */
.upload-item:active {
    transform: scale(.98);
    transition: transform .1s ease;
}

/* Better spacing for touch interfaces */
@media (hover: none) {

    .item-grid.groups {
        gap: 16px;
    }

    .group-item {
        margin: 8px;
    }
}

/* Accessibility improvements for touch */
.upload-item:focus-visible {
    outline: 3px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Enhanced selection states for touch */
.upload-item.selected {
    border: 2px solid var(--accent-primary);
    background-color: var(--accent-primary-alpha);
}

.upload-item.selected.dragging {
    border-color: var(--accent-secondary);
    background-color: var(--accent-secondary-alpha);
}

/* Touch feedback animations */
.feedback-start {
    animation: feedback-start .3s ease;
}

.feedback-success {
    animation: feedback-success .5s ease;
}

.feedback-error {
    animation: feedback-error .5s ease;
}

@keyframes feedback-start {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); background-color: var(--accent-primary-alpha); }
    100% { transform: scale(1); }
}

@keyframes feedback-success {
    0% { transform: scale(1); }
    25% { transform: scale(1.1); background-color: var(--success-alpha); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes feedback-error {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); background-color: var(--error-alpha); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}

/* Multi-selection visual enhancements */
.upload-item.selected::after {
    content: "✓";
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--accent-primary);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    z-index: 10;
}

/* Selection count in drag preview */
.selection-count-badge {
    animation: badge-appear .3s ease;
}

@keyframes badge-appear {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .dragover {
        border-width: 3px;
        border-style: solid;
    }

    .drag-preview {
        border-width: 3px;
    }

    .upload-item.selected {
        border-width: 3px;
    }
}

.drag-preview.multi-item {
    position: relative;
    width: 120px !important;
    height: 120px !important;
    /* Ensure consistent sizing for multi-item previews */
}

.drag-preview.multi-item img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1;
    border-radius: 6px;
}

/* Fix stacked item positioning */
.drag-preview.multi-item > .upload-item {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 6px;
    overflow: hidden;
}

.drag-preview.multi-item > .upload-item:nth-child(1) {
    top: 0;
    left: 0;
    z-index: 3;
    opacity: 1;
    transform: rotate(-2deg);
}

.drag-preview.multi-item > .upload-item:nth-child(2) {
    top: 4px;
    left: 4px;
    z-index: 2;
    opacity: .85;
    transform: rotate(1deg);
}

.drag-preview.multi-item > .upload-item:nth-child(3) {
    top: 8px;
    left: 8px;
    z-index: 1;
    opacity: .7;
    transform: rotate(-1deg);
}

/* Selection count badge positioning */
.drag-preview.multi-item .selection-count-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--accent-primary);
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    font-family: system-ui, -apple-system, sans-serif;
    box-shadow: 0 2px 8px rgba(0,0,0,.3);
    z-index: 20;
    line-height: 1;
}

/* Ensure drag preview is always visible */
.drag-preview {
    pointer-events: none;
    z-index: 10000 !important;
}

/* Remove any transforms that might interfere with positioning */
.drag-preview.multi-item .upload-item .progress,
.drag-preview.multi-item .upload-item .actions,
.drag-preview.multi-item .upload-item .status,
.drag-preview.multi-item .upload-item details {
    display: none !important;
}

/* Clean up the visual during multi-drag */
.upload-item.selected.dragging {
    opacity: .3;
    transform: scale(.95);
    border: 2px dashed var(--accent-primary);
    background-color: var(--accent-primary-alpha);
}

/* Improved drop zone feedback for multiple items */
.dragover.multi-drop {
    animation: multi-drop-pulse .8s infinite ease-in-out;
    border-style: solid;
}

@keyframes multi-drop-pulse {
    0%, 100% {
        background-color: var(--accent-primary-alpha);
        transform: scale(1.02);
        border-color: var(--accent-primary);
    }
    50% {
        background-color: var(--accent-secondary-alpha, var(--accent-primary-alpha));
        transform: scale(1.04);
        border-color: var(--accent-secondary, var(--accent-primary));
    }
}

/* Enhanced feedback for successful drops */
@keyframes drop-success {
    0% {
        background-color: var(--success-alpha);
        transform: scale(1.1);
    }
    100% {
        background-color: transparent;
        transform: scale(1);
    }
}

.drop-success {
    animation: drop-success .6s ease-out;
}

.drag-preview {
    border: 2px solid red !important;
    background: rgba(255, 0, 0, .1) !important;
}

.drag-preview.multi-item {
    border: 2px solid blue !important;
    background: rgba(0, 0, 255, .1) !important;
}

.dragging {
    opacity: .5 !important;
    border: 2px dashed orange !important;
}

.dragover {
    background: rgba(0, 255, 0, .2) !important;
    border: 2px dashed green !important;
}

.dragover.multi-drop::before {
    content: "Drop " attr(data-item-count) " items here";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, .8);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    z-index: 1000;
    pointer-events: none;
}

.drag-preview {
    /* Ensure drag preview is always visible */
    position: fixed !important;
    z-index: 9999 !important;
    pointer-events: none !important;

    /* Improve visual appearance */
    box-shadow: 0 8px 25px rgba(0,0,0,.3);
    border-radius: 8px;
    overflow: hidden;

    /* Ensure it's not affected by parent transforms or overflow */
    transform-style: preserve-3d;
}

.drag-preview.multi-item {
    /* Ensure proper stacking context for multi-item previews */
    isolation: isolate;
}

.drag-preview .upload-item {
    /* Ensure child items are positioned correctly */
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.drag-preview .upload-item img {
    /* Prevent image layout issues during drag */
    max-width: 100%;
    height: auto;
    display: block;
}

/* Debug styles - remove in production */
.drag-preview {
    border: 2px solid red !important;
}

.drag-preview.multi-item {
    border: 2px solid blue !important;
}

/* Hide complex UI elements in drag preview */
.drag-preview details,
.drag-preview .actions,
.drag-preview .progress {
    display: none !important;
}

/* Simplify the preview to just show the image */
.drag-preview .preview {
    width: 100% !important;
    height: 100% !important;
}

.drag-preview .preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}


.upload-group summary {
    padding: 0!important;
}


/* Mobile-First Image Grouping Layout - Using Existing Templates */

/* Base mobile layout - stack everything vertically */
@media (max-width: 768px) {

    .item-grid.preview details,
    .item-grid.group details {
        display: none;
    }
    .group-display {
        display: flex;
        flex-direction: column;
        gap: 0;
        height: calc(100vh - var(--height) - var(--height));
        position: fixed;
        top: var(--height);
        bottom: var(--height);
        left: 0;
        right: 0;
        z-index:999;
    }

    .preview-wrap,
    .sidebar {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        overflow-y: auto;
    }
    /* Preview section - top half of screen */
    .preview-wrap {
        background: var(--base);
        border-bottom: 2px solid var(--action-0);
    }

    /* Preview actions - sticky at top */
    .preview-actions {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--base);
        border-bottom: 1px solid var(--base-200);
        flex-shrink: 0;
    }

    /* Preview grid - scrollable area */
    .item-grid.preview {
        flex: 1;
        grid-template-columns: repeat(3, 1fr);
        gap: .75rem;
        padding: .5rem;
        margin-top: 0;
    }
    .item-grid + .hint {
        margin-top: 0;
    }

    /* Groups section - bottom half with sticky header */
    .sidebar {
        background: var(--base-200);
        border-top: 3px solid var(--action-50);
    }

    /* Groups header - sticky */
    .sidebar .header {
        border-bottom: 1px solid var(--base-200);
        padding: 1rem;
        flex-shrink: 0;
    }

    /* Create group button */
    .create-group-from-selection {
        margin: 0 1rem 1rem 1rem;
        flex-shrink: 0;
        min-height: 44px; /* Touch target */
        padding: .75rem 1rem;
        font-size: .9rem;
    }

    /* Groups container - scrollable */
    .item-grid.groups {
        flex: 1;
        margin: 0;
        grid-template-columns: repeat(2, 1fr); /* Single column on mobile */
        gap: 1rem;
    }

    /* Enhanced empty group for mobile */
    .empty-group {
        aspect-ratio: unset;
        grid-column: 1/-1;
        transition: all .2s ease;
    }

    .item-grid.groups .item-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .item-grid.groups .item-grid details {
        display: none;
    }

    .empty-group:hover,
    .empty-group.dragover {
        border-color: var(--action-0);
        background: var(--action-rgb-subtle-hover);
        transform: scale(1.02);
    }

    /* Upload button - fixed at bottom */
    .submit-uploads {
        position: fixed !important;
        bottom: var(--offHeight);
        right: .5rem;
        z-index: 20;
        height: 3rem;
        font-size: 1.1rem;
        font-weight: 600;
        box-shadow: var(--shadow);
        border-radius: var(--outerRadius);
    }

    .submit-uploads:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0,0,0,.2);
    }

    /* Enhanced upload items for mobile */
    .upload-item {
        border-radius: var(--innerRadius);
        overflow: hidden;
        background: var(--base);
        border: 1px solid var(--base-200);
        transition: transform .2s ease;
    }

    .upload-item:hover {
        transform: scale(1.02);
    }

    /* Mobile-friendly actions overlay */
    .upload-item .actions {
        padding: .5rem;
    }

    .upload-item .actions button {
        min-width: 44px;
        min-height: 44px;
        padding: .75rem;
        border-radius: var(--innerRadius);
    }

    /* Better checkbox targets */
    .upload-item .upload-select + label {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--innerRadius);
    }

    /* Enhanced group styling for mobile */
    .upload-group {
        background: var(--base-100);
        border-radius: var(--innerRadius);
        border: 1px solid var(--base-200);
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .upload-group .group-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        padding-bottom: .5rem;
        border-bottom: 1px solid var(--base-200);
        flex-wrap: wrap;
        gap: .5rem;
    }

    .upload-group .group-actions {
        display: flex;
        gap: .5rem;
        flex-wrap: wrap;
    }

    .upload-group .group-actions button {
        flex: 1;
        min-width: 100px;
        min-height: 44px;
        padding: .5rem .75rem;
        font-size: .9rem;
        border-radius: var(--innerRadius);
    }

    .upload-group .item-grid.group {
        grid-template-columns: repeat(2, 1fr);
        gap: .5rem;
        margin-bottom: 1rem;
    }

    .upload-group .group-item {
        aspect-ratio: 1;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid var(--base-200);
    }

    /* Hide file upload container on mobile when in grouping mode */
    .group-display:not([hidden]) ~ .file-upload-container {
        display: none;
    }

    /* Enhanced selection controls for mobile */
    .selection-controls {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .selection-controls .selected {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .5rem;
    }

    .selection-actions {
        display: flex;
        padding: 0;
    }

    .selection-actions button {
        flex: 1;
        padding: .25rem;
        font-size: .9rem;
        border-radius: var(--innerRadius);
    }

    /* Enhanced dragging states for mobile */
    .upload-item.dragging {
        opacity: .7;
        transform: scale(.95) rotate(3deg);
        z-index: 1000;
        box-shadow: 0 8px 25px rgba(0,0,0,.3);
    }

    .dragover {
        background: var(--action-rgb-subtle) !important;
        border-color: var(--action-0) !important;
        transform: scale(1.05);
        animation: mobile-drop-pulse .8s infinite ease-in-out;
    }

    @keyframes mobile-drop-pulse {
        0%, 100% {
            background-color: var(--action-rgb-subtle);
            transform: scale(1.02);
        }
        50% {
            background-color: var(--action-rgb-subtle-hover);
            transform: scale(1.04);
        }
    }

    /* Enhanced selection states */
    .upload-item.selected {
        border: 2px solid var(--action-0);
        background-color: var(--action-rgb-subtle);
    }

    .upload-item.selected::after {
        content: '✓';
        position: absolute;
        top: .5rem;
        right: .5rem;
        background: var(--action-0);
        color: white;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: bold;
        z-index: 10;
        animation: selection-pop .3s ease;
    }

    @keyframes selection-pop {
        0% {
            transform: scale(0);
            opacity: 0;
        }
        70% {
            transform: scale(1.2);
            opacity: 1;
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* Enhanced details/summary for mobile */
    .upload-item details summary {
        padding: .75rem;
        background: var(--base-100);
        border-radius: var(--innerRadius);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: .5rem;
        font-size: .9rem;
        font-weight: 500;
        min-height: 44px; /* Touch target */
    }

    .upload-item details[open] summary {
        border-radius: var(--innerRadius) var(--innerRadius) 0 0;
        border-bottom: 1px solid var(--base-200);
    }

    /* Enhanced forms for mobile */
    .upload-meta input,
    .upload-meta textarea {
        padding: .75rem;
        font-size: 16px; /* Prevents zoom on iOS */
        border-radius: var(--innerRadius);
        border: 2px solid var(--base-200);
        transition: border-color .2s ease;
    }

    .upload-meta input:focus,
    .upload-meta textarea:focus {
        border-color: var(--action-0);
        outline: none;
        box-shadow: 0 0 0 3px var(--action-rgb-subtle);
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .group-display {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .item-grid.preview {
        grid-template-columns: repeat(4, 1fr);
    }

    .item-grid.groups {
        grid-template-columns: repeat(2, 1fr);
    }
}


body:has(.group-display:not([hidden])) {
    overflow:hidden;
}

.today_hours .group-fields {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: .5rem;
}
.today_hours .field {
    margin: 0;
}


.jvb-integration-connection {
    background: var(--base);
    border: 2px solid var(--base-200);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    transition: all 0.3s ease;
}


/* Integration Grid */
.jvb-integrations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

/* Connection Header */
.jvb-connection-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #ddd;
}

.jvb-service-info h3.jvb-service-name {
    font-weight: bold;
    text-transform: uppercase;
    color: var(--contrast);
}

.jvb-service-description {
    margin: 0;
    color: var(--contrast-50);
}

.jvb-connection-status {
    text-align: right;
    min-width: 150px;
}

.jvb-status-indicator {
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

.jvb-connection-status.connected .jvb-status-indicator {
    color: #22c55e;
}

.jvb-connection-status.disconnected .jvb-status-indicator {
    color: #ef4444;
}

.jvb-status-text {
    font-weight: bold;
    font-size: var(--small);
    text-transform: uppercase;
}

.jvb-last-tested {
    display: block;
    color: #888;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Settings Section */
.jvb-settings-section,
.jvb-integration-settings {
    margin-bottom: 1.5rem;
}

.jvb-integration-settings h4 {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--contrast);
    text-transform: uppercase;
}

/* Form Fields */
.jvb-form-field {
    margin-bottom: 1rem;
}

.jvb-form-field label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: var(--contrast);
    text-transform: uppercase;
}

.jvb-form-field input,
.jvb-form-field select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
    background: white;
    transition: border-color 0.3s ease;
}

.jvb-form-field input:focus,
.jvb-form-field select:focus {
    outline: none;
    border-color: var(--action-50);
    box-shadow: 0 0 0 3px rgba(var(--action-rgb), 0.1);
}

.jvb-form-field .description {
    font-size: 0.8rem;
    color: #666;
    margin-top: 0.5rem;
    line-height: 1.4;
}

/* Checkbox Labels */
.jvb-checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    text-transform: none !important;
    font-weight: normal !important;
    cursor: pointer;
}

.jvb-checkbox-label input[type="checkbox"] {
    width: auto !important;
    margin: 0;
}

/* Settings Help */
.jvb-settings-help {
    background: var(--base-200);
    border: 1px solid var(--base);
    border-radius: 4px;
    padding: 1rem;
    margin-top: 1rem;
}

.jvb-settings-help ol {
    margin: 0.5rem 0 0 1.5rem;
    padding: 0;
}

.jvb-settings-help a {
    text-decoration: none;
    font-weight: bold;
}

/* Connection Actions */
.jvb-connection-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    border-top: 2px solid #ddd;
    padding-top: 1rem;
    align-items: center;
}

.jvb-connection-actions .button {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    padding: 0.6rem 1.2rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.jvb-connect-button.button-primary {
    background: var(--action-50);
    border-color: var(--action-50);
    color: white;
    --o: .2;
    box-shadow: 0 2px 4px var(--action-rgb);
}

.jvb-connect-button.button-primary:hover {
    background: #e6007a;
    border-color: #e6007a;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(var(--action-rgb), 0.3);
}

.jvb-test-button {
    background: white;
    border-color: #22c55e;
    color: #22c55e;
}

.jvb-test-button:hover {
    background: #22c55e;
    color: white;
}

.jvb-sync-button {
    background: white;
    border-color: var(--action-50);
    color: var(--action-50);
}

.jvb-sync-button:hover {
    background: var(--action-50);
    color: white;
}

.jvb-disconnect-button {
    color: #ef4444 !important;
    border: none !important;
    background: none !important;
    text-decoration: underline;
    margin-left: auto;
}

.jvb-disconnect-button:hover {
    color: #dc2626 !important;
    background: none !important;
}

/* Loading States */
.jvb-integration-form.loading .button {
    opacity: 0.7;
    pointer-events: none;
}

.jvb-integration-form.loading .jvb-connect-button::after {
    content: ' (Saving...)';
}

.jvb-integration-form.loading .jvb-test-button::after {
    content: ' (Testing...)';
}

/* Responsive Design */
@media (max-width: 768px) {
    .jvb-integrations-grid {
        grid-template-columns: 1fr;
    }

    .jvb-connection-header {
        flex-direction: column;
        gap: 1rem;
    }

    .jvb-connection-status {
        text-align: left;
        min-width: auto;
    }

    .jvb-connection-actions {
        flex-direction: column;
    }

    .jvb-connection-actions .button {
        width: 100%;
        text-align: center;
    }

    .jvb-disconnect-button {
        margin-left: 0 !important;
    }
}

form .tabs {
    position: sticky;
    top: var(--offHeight);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--base);
}
.tabs.icon {
    position: relative;
    top: 0;
    z-index: 0;
    background: transparent;
    margin: 0;
    border: none;
}

nav.tabs {
    height: fit-content;
}

.form-actions {
    display: flex;
}

.spinner {
    width: 12px;
    height: 12px;
    border: 2px solid transparent;
    border-top: 2px solid var(--action-50);
    border-radius: 50%;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/****************************************************************************
*
*   LOCATION FIELD
*
****************************************************************************/
/* Location field container */
.field.location {
    position: relative;
    margin-bottom: 2rem;
}


.dropdown>ul>li {
    cursor: pointer;
}
.dropdown>ul>li:hover {
    background-color: var(--base-50);
}
/* Location search wrapper */
.location-search-wrapper {
    position: relative;
    width: 100%;
}

/* Places Autocomplete wrapper */
.places-autocomplete-wrapper {
    width: 100%;
    position: relative;
}

/* Google Places Autocomplete Element */
gmp-place-autocomplete {
    font-family: var(--body);
    height: fit-content;

    /* Borders */
    border: 1px solid transparent !important;
    border-bottom: 2px solid var(--base-200, #ddd) !important;
    border-radius: var(--innerRadius, 4px) !important;

    /* Colors */
    background-color: var(--base, #fff) !important;
    color: var(--contrast, #333) !important;

    /* Interaction */
    outline: none !important;
    transition: border-color 0.2s ease !important;
}

/* Focus state */
gmp-place-autocomplete:focus,
gmp-place-autocomplete:focus-within {
    border-bottom-color: var(--action-0, #007cba) !important;
    outline: none !important;
}

/* Location preview container */
.location-preview {
    margin-top: 1rem;
}

/* Location map */
.location-map {
    width: 100%;
    height: 200px;
    border: 1px solid var(--base-200, #ddd);
    border-radius: var(--innerRadius, 4px);
    overflow: hidden;
    background-color: var(--base-100, #f5f5f5);
    position: relative;
}

/* Loading state for map */
.location-map:empty::before {
    content: "Loading map...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--base-400, #999);
    font-size: var(--small, 14px);
}

/* Location links */
.location-links {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.location-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background-color: var(--base-100, #f5f5f5);
    border: 1px solid var(--base-200, #ddd);
    border-radius: var(--innerRadius, 4px);
    text-decoration: none;
    color: var(--contrast, #333);
    font-size: var(--small, 14px);
    transition: all 0.2s ease;
}

.location-links a:hover {
    background-color: var(--base-200, #e5e5e5);
    border-color: var(--base-300, #ccc);
    transform: translateY(-1px);
}

.location-links a svg {
    width: 16px;
    height: 16px;
}

/* Google Places dropdown customization */
.pac-container {
    z-index: 9999 !important;
    border-radius: var(--innerRadius, 4px) !important;
    border: 1px solid var(--base-200, #ddd) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    margin-top: 4px !important;
    font-family: inherit !important;
}

.pac-item {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid var(--base-100, #f5f5f5) !important;
    cursor: pointer !important;
    font-size: inherit !important;
}

.pac-item:last-child {
    border-bottom: none !important;
}

.pac-item:hover,
.pac-item-selected {
    background-color: var(--base-100, #f5f5f5) !important;
}

/* Map info window */
.map-info-window {
    padding: 0.5rem;
    font-size: var(--small, 14px);
    line-height: 1.4;
    max-width: 200px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .location-links {
        flex-direction: column;
    }

    .location-links a {
        width: 100%;
        justify-content: center;
    }

    .location-map {
        height: 150px;
    }
}

/* Admin-specific styles */
.wp-admin .field.location {
    max-width: 600px;
}

.wp-admin .location-search-wrapper {
    background: #fff;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/***
HOURS SET
 */

.group-fields.hours .group-fields,
.group-fields.hours .group-fields .field {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.group-fields.hours .group-fields {
    padding: 1rem .5rem;
    gap: 1rem;
}
.group-fields.hours .group-fields:nth-of-type(2n+1) {
    background-color: var(--base);
}
.group-fields.hours .group-fields .field {
    margin: 0;
}

.group-fields.hours .true-false {
    flex: 1;
}
.group-fields.hours .time {
    position: relative;
}
.group-fields.hours .time label {
    margin: 0;
    font-size: var(--small);
    position: absolute;
    top: -1rem;
    left: 0;
    color: var(--contrast-200);
}

dialog .post_thumbnail {
    margin: 0;
}
dialog .post_thumbnail .item-grid img {
    aspect-ratio: 20/9;
}
dialog .post_title {
    margin-top: 1rem;
}
dialog nav.tabs {
    top: 0;
}

dialog .tabs h2 {
    font-size: var(--small);
    font-weight: 300;
}

dialog .tabs button {
    padding: .25rem .75rem;
}

.field:has([name=status]) .field-group {
    align-items: center;
}
.field:has([name=status]) .field-group span {
    margin-right: auto;
}


[data-type=single] [for=select-item] {
    display: none;
}
form.table img {
    max-height: 8rem;
}

.multi-select {
    width: 100%;
}
details.multi-select summary {
    display: flex;
    justify-content: flex-start;
}

.grid-view .item {
    border-radius: var(--outerRadius);
}
.grid-view img {
    border-radius: var(--innerRadius);
}

.item-grid:has(.select-item:checked) .item {
    padding: 2rem;
}
.item-grid .item:has(.select-item:checked) {
    padding: .5rem;
    background-color: var(--action-0);
}

.grid-view .item > input[type=checkbox]:not(.label-button) + label {
    padding-left: 0;
    margin: 0;
}
.grid-view .item > input[type=checkbox] + label::before {
    transform: unset;
    top: .5rem;
    left: .5rem;
}
.grid-view .item > input[type=checkbox] + label::after {
    top: .5rem;
    left: .75rem;
    transform: translateY(20%) rotate(45deg);
}