/********************************/
/* ----- Inventory Cards ------ */
/********************************/

.inventory-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.inventory-card {
    background-color: var(--color-background-paper);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inventory-card-preview img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.inventory-card-details {
    padding: 1rem;
    flex-grow: 1;
}

.inventory-card-details p {
    margin: 0 0 0.5rem 0;
    font-size: var(--font-size-xs);
}

.inventory-card-cta {
    padding: 0.5rem 1rem;
    text-align: right;
}

/*********************************/
/* ----- Paginator Styles ------ */
/*********************************/

/* For accessibility: hide elements visually but keep them for screen readers */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.inventory-paginator {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.paginator-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

/* Base styles for paginator icons */
.paginator-controls .icon {
    display: inline-flex; /* Use flex to center the SVG */
    align-items: center;
    justify-content: center;
    margin: 0 0.5rem;
    transition: transform 0.3s ease;
    border-bottom: none; /* remove underline from links */
    line-height: 1;
}

.paginator-controls .icon .icon-svg {
    width: 24px;
    height: 24px;
    filter: invert(62%) sepia(8%) saturate(0%) hue-rotate(189deg) brightness(96%) contrast(92%); /* --color-text-secondary: #999 */
    transition: filter 0.3s ease;
}

.paginator-controls .icon:hover {
    transform: scale(1.2);
    background-color: transparent;
}

.paginator-controls .icon:hover .icon-svg {
    filter: invert(79%) sepia(26%) saturate(1478%) hue-rotate(218deg) brightness(92%) contrast(89%); /* --color-primary-light: #B39DDB */
}

/* Wrapper for the select dropdown to allow for custom styling */
.paginator-select-wrapper {
    position: relative;
    display: inline-block;
}

.paginator-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 1px solid var(--color-text-secondary);
    border-radius: 4px;
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--font-size-s);
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.paginator-select:hover {
    border-color: var(--color-primary-light);
}

.paginator-select:focus {
    outline: none;
    border-color: var(--color-primary-main);
    box-shadow: 0 0 0 2px rgba(147, 112, 219, 0.4); /* Focus ring with primary color */
}

.paginator-dropdown-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none; /* So it doesn't block clicks on the select */
    filter: invert(62%) sepia(8%) saturate(0%) hue-rotate(189deg) brightness(96%) contrast(92%); /* --color-text-secondary: #999 */
    transition: filter 0.3s ease;
}

.paginator-select-wrapper:hover .paginator-dropdown-icon {
    filter: invert(79%) sepia(26%) saturate(1478%) hue-rotate(218deg) brightness(92%) contrast(89%); /* --color-primary-light: #B39DDB */
}

/* ----- Carousel for Inventory ----- */

.inventory-card-preview {
    position: relative; /* Needed for absolute positioning of nav buttons */
    overflow: hidden; /* This is the main container for the carousel */
}

/* This wrapper will contain all images and will slide left/right */
.carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

/* Each image inside the carousel */
.carousel-item {
    min-width: 100%;
    box-sizing: border-box;
}

.carousel-item img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block; /* Removes bottom space under the image */
}

/* Container for navigation buttons */
.carousel-nav {
    position: absolute;
    top: 80%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 0.5rem;
    pointer-events: none; /* Allows clicks to pass through unless on a button */
}

/* Individual navigation buttons */
.carousel-nav .icon {
    pointer-events: auto; /* Makes the buttons clickable */
    background-color: rgba(0, 0, 0, 0.3); /* Slight background for visibility */
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-nav-left,
.carousel-nav-right {
    border-bottom: none !important;
}