/*======================================== Table ================================================*/
/* Catalog is on the shared Account Master styling from SaleAccount.css. Its toolbar is a plain
   .top-btns-container and its table is .master-content-table1 .checkbox-data-table (variants
   live in OpeningStock.css): the checkbox column keeps the shared 50px sticky treatment,
   Product Name and the first classification are freed from the Index/Name widths, and the
   Image column keeps the sticky 150px right column.

   What stays page-specific is the second card — a three-column panel of classification
   dropdowns, an image preview and the image action buttons. Nothing on the other pages looks
   like it, so it keeps its own grid; only its position, sizing and colours follow the Account
   Master language. */

/* The toolbar above is the single-row .top-btns-container: 3rem top, 57px tall, ending at
   105px — so this panel starts at 7rem exactly where an Account Master table would. */
.top-btns-container-catalog-secondrow {
    position: fixed;
    top: 7rem;
    left: 14.5rem;
    right: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 14px;
    padding: 10px 16px;
    background: #ffffff;
    border: 1px solid #e5e9f0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(16, 24, 40, 0.05);
    transition: left 0.2s ease;
}

.top-btns-container-catalog-secondrow.sidebar-collapsed {
    left: 5.5rem;
}

/* Measured: the panel is 257px tall (11px + 235px image + 11px), starting at 112px, so it ends
   at 369px. 369 + 7 = 376px = 23.5rem keeps the same 7px gap the Account Master pages leave
   between their toolbar and their table. */
.master-table-container.catalog-table {
    top: 23.5rem;
}

/* Five stacked dropdowns filling the same height as the image preview beside them. */
.column1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.catalog-select{
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
}

/* Account Master control size — 34px with a 6px radius, like .top-btns-add-btn in the toolbar
   above. Restated here because .form-item select is 30px with a blue #0078d4 border
   (PrintPopup.css) and wins over .catalog-select select on source order. */
.catalog-select select,
.catalog-select .form-item select {
    display: block;
    width: 100%;
    height: 34px;
    background: transparent;
    border: solid 1px #ccc;
    transition: all .2s ease;
    padding: 0 15px;
    border-radius: 6px;
    font-size: 12px;
}

.catalog-select .form-item {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.catalog-select label{
    cursor: text;
    z-index: 2;
    left: 10px;
    font-size: 12px;
    font-weight: bold;
    background: #fff;
    padding: 0 3px;
    color: #999;
    transition: all .2s ease;
    top: -8px;
}

.column2 {
    display: flex;
    flex-direction: column;
}

.image-container {
    width: 100%;
    height: 235px;
    border: 1px solid #e5e9f0;
    background-color: #f5f7fa;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* soft shadow */
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.no-image {
    width: 100px;
    height: 100px;
    fill: #ccc;
    object-fit: contain;
}

/* Neutral 34px pills matching .delete-all-btn / .filter-btn in the toolbar, rather than the
   68px 20px-font blocks they were. They stay full width so the three read as one group. */
.catalog-btn {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.catalog-btn button{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 34px;
    padding: 0 15px;
    border: 1.5px solid #e5e9f0;
    border-radius: 6px;
    background: #eef0f3;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.catalog-btn button:hover {
    background: #f5f7fa;
    border-color: #d5dbe3;
}

/* Colour is still reserved for meaning: destructive red, everything else neutral. */
.catalog-delete-btn-icon {
    fill: #c0392b;
    height: 18px;
    width: 18px;
}

.catalog-reset-btn-icon,
.catalog-set-btn-icon {
    fill: #6b7280;
    height: 18px;
    width: 18px;
}