#item-edit{
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
#item-edit:nth-child(1){
    grid-row: 1/span 2;
}
#item-edit:nth-child(2),#item-edit:nth-child(3){
    grid-column: 2/span 2;
}

.max-quantity {
    font-size: 0.8em;  /* Adjust as needed */
    color: #888;        /* Adjust as needed */
    position: relative;
    left: 50%;
}

.storage-item img{
    height: 1rem;
}

.storage-item {
    display: flex; /* Use flexbox for easy alignment */
    align-items: center;
    gap: 10px; /* Add some space between elements */
}

.storage-item .title {
    flex-grow: 1; /* Allow the title to take up available space */
}


dialog[manage_storage] .content ul,
#return-location-dialog .content ul {
    list-style: none;
    padding-left: 0; 
}

dialog[manage_storage] .content ul li,
#return-location-dialog .content ul li {
    margin-bottom: 5px;   
    /* border: 1px solid red; */
}

/* Indentation to show hierarchy */
dialog[manage_storage] .content ul ul,
#return-location-dialog .content ul ul { 
    padding-left: 20px; 
}

#return-location-dialog .content li.selected {
    text-decoration: underline;
    text-decoration-thickness: 0.2rem;
    text-decoration-color: var(--acchot);
}
#return-location-dialog .collapsed {
    display:none;
}

.location-cell {
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden;    /* Hide overflow text */
    text-overflow: ellipsis; /* Show ellipsis (...) for long paths */
}

/* Show full path on hover for desktop only */
@media (hover: hover) { /* Targets devices with hover capability */
    .location-cell:hover::after {
        content: attr(title);
        position: absolute;
        transform: translate(-55%,-0.35rem);
        background-color: var(--bg2);
        border: 1px solid var(--acc2);
        padding: 5px;
        z-index: 10; /* Ensure tooltip is above other elements */
        white-space: nowrap; /* Prevent wrapping in tooltip */
    }
    .storage-item img:hover{
        height: 3rem;
    }
}

@media screen and (max-width:1200px) {
    table, #item_table, .table-container{
        max-width: 100%;
        width: 100%;
        margin: 0;
        margin-top: 1rem;
    }
    table > * {
        line-break: loose;
    }
    #item-edit{
        grid-template-columns: 1fr;
    }
    #item-edit > * {
        grid-column: span 1;
        grid-row: span 1;
    }
}
@media screen and (max-width: 700px) {
    table > * {
        font-size: smaller;
    }

    /* Hide specific columns */
    #item_table tr > td:nth-child(2),  /* Image */
    #item_table tr > td:nth-child(4),  /* Department */
    #item_table tr > td:nth-child(7),  /* Weight */
    #item_table tr > th:nth-child(2),  /* Image Header */
    #item_table tr > th:nth-child(4),  /* Department Header */
    #item_table tr > th:nth-child(7)   /* Weight Header */ {
        display: none;
    }

    /* Ensure the table looks good with hidden columns */
    #item_table table {
        width: 100%;
        table-layout: fixed;
    }

    #item_table td, #item_table th {
        word-break: break-word;
    }
}