/* /Components/Account.razor.rz.scp.css */
.profile-links[b-lfxhnremg9] {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    right: 56px;
    top: 22px;
    z-index: 11;
    display: flex;
    align-items: center;
}

    .profile-links span[b-lfxhnremg9] {
        font-weight: 600;
        font-style: normal;
    }

    .profile-links a[b-lfxhnremg9] {
        color: var(--content-text);
        text-decoration: none;
        font-weight: 600;
        transition: color 0.2s;
        font-style: normal;
    }
    /* Separator via CSS only */
    .profile-links span[b-lfxhnremg9]::after {
        content: "/";
        display: inline-block;
        margin: 0 8px;
        color: var(--content-text);
        opacity: 0.6;
        font-weight: 600;
        font-style: normal;
        transition: transform .3s ease;
    }

    .profile-links a:hover[b-lfxhnremg9] {
        transform: scale(1.1);
        text-decoration: none;
    }

@media (max-width: 576px) {
    .profile-links[b-lfxhnremg9] {
        flex-direction: column;
    }

        .profile-links span[b-lfxhnremg9]::after {
            content: none;
        }
}
/* /Components/AdministrationEditor.razor.rz.scp.css */
.dialog-backdrop[b-mjt5yj033v] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.dialog[b-mjt5yj033v] {
    background: var(--content-bg);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 100%;
    position: relative;
}

    .dialog p.title[b-mjt5yj033v] {
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--content-text);
        margin: 0 0 1rem;
        font-family: 'Arial', sans-serif;
        text-transform: capitalize;
        letter-spacing: 0.02em;
    }

h2[b-mjt5yj033v] {
    margin-top: 0;
    font-size: 1.5em;
    color: var(--content-text);
}

h3[b-mjt5yj033v] {
    /* Updated from --violet-main */
    color: var(--content-text-secondary);
}

label[b-mjt5yj033v] {
    display: block;
    margin: 10px 0 5px;
    font-weight: bold;
    color: var(--content-text);
}

.administration[b-mjt5yj033v] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tabs[b-mjt5yj033v] {
    border-bottom: 3px solid var(--pink);
}


[b-mjt5yj033v] input.item-name, [b-mjt5yj033v] textarea.item-notes, [b-mjt5yj033v] select.item-selector, [b-mjt5yj033v] input.item-file {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    /* Updated from --border-grey */
    border: 1px solid var(--content-border);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    background-color: var(--content-input-bg);
    /* Updated from --text-dark */
    color: var(--content-text);
}

[b-mjt5yj033v] textarea.item-notes {
    resize: vertical;
    height: 100px;
}

[b-mjt5yj033v] select.item-selector {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="7" viewBox="0 0 12 7" fill="none"><path d="M1.07273 -4.77646e-07L-4.64082e-08 1.0617L6 7L12 1.0617L10.9273 -4.68904e-08L6 4.87661L1.07273 -4.77646e-07Z" fill="%23919191"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

    [b-mjt5yj033v] select.item-selector:focus {
        outline: none;
        /* Updated from --violet-dark */
        border-color: var(--dark-grey);
        /* Updated to use --dark-grey and --pink for consistent shadow styling */
        box-shadow: 0 0 5px var(--pink);
    }

[b-mjt5yj033v] input.item-file {
    cursor: pointer;
    padding: 8px 8px 8px 0;
}

    [b-mjt5yj033v] input.item-file:focus {
        outline: none;
        /* Updated from --violet-dark */
        border-color: var(--dark-grey);
        /* Updated to use --dark-grey and --pink for consistent shadow styling */
        box-shadow: 0 0 5px var(--pink);
    }

.button-container[b-mjt5yj033v] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.button-container-right[b-mjt5yj033v] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

.save-button[b-mjt5yj033v], .cancel-button[b-mjt5yj033v], .ok-button[b-mjt5yj033v] {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.save-button[b-mjt5yj033v], .ok-button[b-mjt5yj033v] {
    /* Updated from --pink-main */
    background-color: var(--pink);
    color: var(--white);
}

.cancel-button[b-mjt5yj033v] {
    background-color: transparent;
    /* Updated from --pink-main */
    border: 1px solid var(--pink);
    /* Updated from --pink-main */
    color: var(--pink);
}

p.error[b-mjt5yj033v] {
    color: var(--red);
}

.save-button:hover[b-mjt5yj033v], .cancel-button:hover[b-mjt5yj033v], .ok-button[b-mjt5yj033v] {
    opacity: 0.9;
}

.close-button[b-mjt5yj033v] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    color: var(--content-text);
    padding: 5px;
}

    .close-button:hover[b-mjt5yj033v] {
        color: var(--red);
    }


.actions-cell[b-mjt5yj033v] {
    position: relative;
    text-align: center;
}

.submenu-toggle[b-mjt5yj033v] {
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    /* Updated from --violet-dark */
    color: var(--dark-grey);
    padding: 5px;
}

    .submenu-toggle:hover[b-mjt5yj033v] {
        /* Updated from --violet-main */
        color: var(--dark-grey);
    }

.submenu[b-mjt5yj033v] {
    position: absolute;
    top: 0;
    right: 100%;
    margin-right: 5px;
    background: var(--white);
    /* Updated from --border-grey */
    border: 1px solid var(--light-grey);
    border-radius: 6px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    min-width: 120px;
    display: block;
}

.submenu-item[b-mjt5yj033v] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.9em;
    /* Updated from --text-dark */
    color: var(--black);
}

    .submenu-item:hover[b-mjt5yj033v] {
        /* Updated from --pink-light */
        background: var(--light-grey);
    }

    .submenu-item .icon[b-mjt5yj033v] {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 8px;
        background-size: contain;
        background-repeat: no-repeat;
    }

.edit-option .icon[b-mjt5yj033v] {
    /* Updated SVG fill color from #7E57C2 (Violet) to %23989088 (--dark-grey) */
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23989088" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>');
}

.delete-option .icon[b-mjt5yj033v] {
    /* Updated SVG fill color from #f44336 (Red) to %23d3000f (--red) */
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23d3000f" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
}

.audit-option .icon[b-mjt5yj033v] {
    /* Updated SVG fill color from #7E57C2 (Violet) to %23989088 (--dark-grey) */
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23989088" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14l-5-5 1.41-1.41L11 13.17V7h2v6.17l2.59-2.58L17 12l-5 5z"/></svg>');
}

.add-button[b-mjt5yj033v] {
    padding: 10px 20px 10px 2.2rem;
    border: none;
    border-radius: 10px; /* Made more rounded */
    cursor: pointer;
    /* Changed background to black */
    background-color: var(--black);
    color: var(--white);
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23fff" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>');
    background-repeat: no-repeat;
    background-position: left 0.8rem center;
    background-size: 1.2rem;
    font-family: 'Arial', sans-serif;
    text-transform: lowercase; /* Set text to lowercase */
}

/* Removed .add-button:hover block to eliminate hover effects */

.supplier[b-mjt5yj033v], .block[b-mjt5yj033v] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.block-header[b-mjt5yj033v] {
    display: flex;
    justify-content: end;
}

[b-mjt5yj033v] input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    /* Updated from --text-dark */
    border: 2px solid var(--black);
    border-radius: 4px;
    background-color: var(--white);
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    margin-right: 8px;
}

    [b-mjt5yj033v] input[type="checkbox"]:checked {
        /* Updated from --violet-dark */
        background-color: var(--dark-grey);
        /* Updated from --violet-dark */
        border-color: var(--dark-grey);
    }

        [b-mjt5yj033v] input[type="checkbox"]:checked::after {
            content: "✔";
            color: var(--white);
            font-size: 14px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    [b-mjt5yj033v] input[type="checkbox"]:hover {
        /* Updated from --violet-dark */
        border-color: var(--dark-grey);
        /* Updated to use --pink for consistent shadow styling */
        box-shadow: 0 0 5px var(--pink);
    }

    [b-mjt5yj033v] input[type="checkbox"]:focus {
        outline: none;
        /* Updated to use --pink for consistent shadow styling */
        box-shadow: 0 0 0 3px var(--pink);
    }

.square-colour[b-mjt5yj033v] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: inline-block;
}

    .square-colour.red[b-mjt5yj033v] {
        background-color: var(--red);
    }

    .square-colour.green[b-mjt5yj033v] {
        /* Updated from --pink-main */
        background-color: var(--pink);
    }

    .square-colour.yellow[b-mjt5yj033v] {
        /* Now using the new --yellow variable */
        background-color: var(--yellow);
    }

    .square-colour.black[b-mjt5yj033v] {
        background-color: var(--black);
    }



/* /Components/Capabilities.razor.rz.scp.css */
.data-table[b-e2cr5yxtjb] {
    margin-top: 28px;
}

.status[b-e2cr5yxtjb] {
    display: inline-block;
    /*padding: 10px;*/
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/*.status.grey {
    background-color: color-mix(in srgb, var(--dark-grey) 12%, transparent);
    color: var(--dark-grey);
    border-color: color-mix(in srgb, var(--dark-grey) 35%, transparent);
}

.status.yellow {
    background-color: color-mix(in srgb, var(--yellow) 15%, transparent);
    color: color-mix(in srgb, var(--yellow) 80%, #000);
    border-color: color-mix(in srgb, var(--yellow) 50%, transparent);
}

.status.orange {
    background-color: color-mix(in srgb, var(--orange) 12%, transparent);
    color: var(--orange);
    border-color: color-mix(in srgb, var(--orange) 40%, transparent);
}

.status.green {
    background-color: color-mix(in srgb, var(--green) 15%, transparent);
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 40%, transparent);
}

.status.red {
    background-color: color-mix(in srgb, var(--pink) 15%, transparent);
    color: var(--pink);
    border-color: color-mix(in srgb, var(--pink) 40%, transparent);
}*/

/*.green {
    color: var(--green);
    font-weight: 600;
}

.yellow {
    color: var(--yellow);
    font-weight: 600;
}

.orange {
    color: var(--orange);
    font-weight: 600;
}

.red {
    color: var(--pink);
    font-weight: 600;
}

.gray,
.grey {
    color: var(--dark-grey);
    font-weight: 600;
}
*/


/*select*/
.dark .form-container[b-e2cr5yxtjb]  select.item-selector {
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="7" viewBox="0 0 12 7" fill="none"><path d="M1.07273 0L0 1.0617L6 7L12 1.0617L10.9273 0L6 4.87661L1.07273 0Z" fill="%23ffffff"/></svg>');
}

.dark .form-container[b-e2cr5yxtjb]  select.item-selector:focus {
    outline: none;
    border: var(--outline) 2px solid;
    box-shadow: none;
}
/* /Components/Carousel.razor.rz.scp.css */
.carousel[b-5ezdxqc7k9] {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.carousel__list[b-5ezdxqc7k9] {
    height: 100%;
    width: 100%;
    display: flex;
    list-style: none;
    margin-left: 0;
}

/*.slider-track {
    width: 100%;
    height: 100%;
    transition: all 0.8s ease-in-out;
}
*/
.carousel__item[b-5ezdxqc7k9] {
    height: 100%;
    width: 100%;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    opacity: 0;
    transition: opacity 2s ease;
}

.carousel__item.active[b-5ezdxqc7k9] {
    opacity: 1;
}
/* /Components/DeleteModal.razor.rz.scp.css */
.delete-backdrop[b-oee4gns2be] {
    position: fixed;
    inset: 0; 
    background: rgba(0, 0, 0, 0.5); 
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-modal[b-oee4gns2be] {
    background: var(--content-bg);
    padding: 40px 48px 36px 48px;
    max-width: 540px;
    width: 100%;
    position: relative;
    max-height: 70vh;
    overflow-y: auto;
}

.dark .delete-modal[b-oee4gns2be] {
    background: #393939;
}

.delete-container[b-oee4gns2be] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.delete-buttons[b-oee4gns2be] {
    display: flex;
    gap: 15px;
}

.action-button.delete[b-oee4gns2be]{
    background-color: var(--red);
    border-color: var(--red);
}

.action-button.delete:hover[b-oee4gns2be] {
    background-color: var(--white);
    color: var(--red);
}
/* /Components/Documents.razor.rz.scp.css */

.data-table[b-jfwzfwduh2]{
    margin-top: 28px;
}


.selected-file[b-jfwzfwduh2] {
    padding-top: 12px;
    border-top: 1px solid var(--content-border);
    text-align: center;
    font-weight: bold;
}

.selected-file p[b-jfwzfwduh2] {
    margin: 0;
    padding: 10px 0;
    font-size: 14px;
    color: var(--content-text);
    font-weight: 500;
}


.progress-status[b-jfwzfwduh2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
    text-align: center;
}

.spinner[b-jfwzfwduh2] {
    width: 50px;
    height: 50px;
    border: 4px solid var(--content-border);
    border-top-color: var(--pink);
    border-radius: 50%;
    animation: spin-b-jfwzfwduh2 1s linear infinite;
}

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

.progress-message[b-jfwzfwduh2] {
    margin: 0;
    font-size: 16px;
    color: var(--content-text-secondary);
    font-weight: 500;
}



.status-green[b-jfwzfwduh2] {
    color: var(--green);
}

.status-grey[b-jfwzfwduh2] {
    color: var(--dark-grey);
}

.status-red[b-jfwzfwduh2] {
    color: var(--pink);
}

.status-yellow[b-jfwzfwduh2] {
    color: var(--yellow);
}

/*date input*/
.dark .form-container[b-jfwzfwduh2]  input.item-date::-webkit-calendar-picker-indicator {
    filter: invert(1); /* turns dark icon white */
}

.dark .form-container[b-jfwzfwduh2]  select.item-selector:focus {
    outline: none;
    border: var(--outline) 2px solid;
    box-shadow: none;
}

.dark .form-container[b-jfwzfwduh2]  select.item-selector {
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="7" viewBox="0 0 12 7" fill="none"><path d="M1.07273 0L0 1.0617L6 7L12 1.0617L10.9273 0L6 4.87661L1.07273 0Z" fill="%23ffffff"/></svg>');
}

.expiring-soon[b-jfwzfwduh2] {
    color: var(--red);
    font-weight: 500;
}

.dark .expiring-soon[b-jfwzfwduh2] {
    color: var(--pink);
}
/* /Components/EntityEditor.razor.rz.scp.css */
.tabs[b-39bgawh698]{
    height:fit-content !important;
    padding-top: 22px;
}
/*--------------table------------------*/
.data-table thead tr[b-39bgawh698] {
    border-bottom: none;
}

.data-table tr[b-39bgawh698] {
    border-bottom: #F5F5F5 solid 1px;
}

.dark .data-table tr[b-39bgawh698] {
    border-bottom: #F5F5F5 solid 1px;
}

    .data-table tr:last-child[b-39bgawh698], .dark .data-table tr:last-child[b-39bgawh698] {
        border-bottom: none;
    }


label[b-39bgawh698] {
    display: block;
    margin: 10px 0 5px;
    font-weight: bold;
    color: var(--content-text);
}

/* Consolidated form field styling for Blazor deep penetration */
[b-39bgawh698] input.item-name,
[b-39bgawh698] input.item-date,
[b-39bgawh698] textarea.item-notes,
[b-39bgawh698] select.item-selector,
[b-39bgawh698] input.item-file {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    /* Updated from --border-grey */
    border: 1px solid var(--content-border);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
    font-family: inherit;
    background-color: var(--content-input-bg);
    /* Updated from --text-dark */
    color: var(--content-text);
    cursor:pointer;
}


/*date input*/
.dark[b-39bgawh698]  input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1); /* turns dark icon white */
}



[b-39bgawh698] textarea.item-notes {
    resize: vertical;
    height: 100px;
}

[b-39bgawh698] select.item-selector {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="7" viewBox="0 0 12 7" fill="none"><path d="M1.07273 -4.77646e-07L-4.64082e-08 1.0617L6 7L12 1.0617L10.9273 -4.68904e-08L6 4.87661L1.07273 -4.77646e-07Z" fill="%23919191"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}



/* Larger select appearance inside dialog */
.dialog[b-39bgawh698]  select.item-selector {
    padding: 12px 14px;
    min-height: 48px;
    font-size: 14px;
}

    [b-39bgawh698] select.item-selector:focus {
        outline: none;
        /* Updated from --violet-dark */
        /*border-color: var(--dark-grey);*/
        /* Updated to use --dark-grey and --pink for consistent shadow styling */
        
        border: var(--outline) 2px solid;
    }

[b-39bgawh698] input.item-file {
    cursor: pointer;
    padding: 8px 8px 8px 0;
}

    [b-39bgawh698] input.item-file:focus {
        outline: none;
        /* Updated from --violet-dark */
        border-color: var(--dark-grey);
        /* Updated to use --dark-grey and --pink for consistent shadow styling */
        box-shadow: 0 0 5px var(--pink);
    }


.validation-errors[b-39bgawh698] {
    list-style: none;
    text-align: end;
    margin-top: 10px;
}


p.error[b-39bgawh698] {
    color: var(--red);
}


.supplier[b-39bgawh698] {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}

.supplier-header h1[b-39bgawh698] {
    font-weight: 600;
    font-size: 42px;
    leading-trim: NONE;
    text-transform: capitalize;
}

.tab-button[b-39bgawh698] {
    min-width: 213px;
    height: 30px;
    background: var(--content-bg);
    color: var(--content-text);
    border: var(--content-text) 1px solid;
    font-weight: 600;
    cursor: pointer;
    margin-right: 0;
    margin-bottom: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0 18px;
    letter-spacing: 0.2px;
    transition: background-color 0.3s ease, color 0.3s ease;
}


    .tab-button.active[b-39bgawh698],
    .tab-button.active:visited[b-39bgawh698] {
        background: var(--content-text);
        color: var(--content-bg);
        border-color: var(--content-bg);
        border: none;
        z-index: 4;
        font-weight: 800;
    }


    .tab-button:hover[b-39bgawh698],
    .tab-button:focus[b-39bgawh698] {
        background: var(--content-text);
        color: var(--content-bg);
        border-color: var(--content-bg);
        outline: none;
    }

.action-button[b-39bgawh698]{
    gap: 0;
}

.action-button .icon-reset[b-39bgawh698], .action-button .icon-start[b-39bgawh698]{
    width: 16px; 
    height: 16px;
}

/* Removed local submenu styles - using global styles from app.css */

/* factory tab factory list table */
.factories-tab .data-table td:not(.countries-td):not(.status-td)[b-39bgawh698]{
    min-width: 150px;
    max-width: none;
}

/* .factories-tab .data-table td.capabilities-td{
    width: 35%;
} */
.factories-tab .data-table td.countries-td[b-39bgawh698], .factories-tab .data-table td.status-td[b-39bgawh698]{
    max-width: 130px;
}

.supplier[b-39bgawh698], .block[b-39bgawh698] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.block-header[b-39bgawh698] {
    display: flex;
    justify-content: end;
    gap:2rem;
}

[b-39bgawh698] input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    /* Updated from --text-dark */
    border: 2px solid var(--black);
    border-radius: 4px;
    background-color: var(--white);
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    margin-right: 8px;
}

    [b-39bgawh698] input[type="checkbox"]:checked {
        /* Updated from --violet-dark */
        background-color: var(--dark-grey);
        /* Updated from --violet-dark */
        border-color: var(--dark-grey);
    }

        [b-39bgawh698] input[type="checkbox"]:checked::after {
            content: "✔";
            color: var(--white);
            font-size: 14px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

    [b-39bgawh698] input[type="checkbox"]:focus {
        outline: none;
        /* Updated to use --pink for consistent shadow styling */
        box-shadow: 0 0 0 3px var(--pink);
    }

.square-colour[b-39bgawh698] {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: inline-block;
}

    .square-colour.red[b-39bgawh698] {
        background-color: var(--red);
    }

    .square-colour.green[b-39bgawh698] {
        /* Updated from --pink-main */
        background-color: var(--pink);
    }

    .square-colour.yellow[b-39bgawh698] {
        /* Now using the new --yellow variable */
        background-color: var(--yellow);
    }

    .square-colour.black[b-39bgawh698] {
        background-color: var(--black);
    }


.capabilities[b-39bgawh698] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.factory-link[b-39bgawh698] {
    display: inline-flex;
    gap: 8px;
    color: var(--content-text) !important;
    font-weight: 600;
    font-size: 24px;
}

.factory-list.factory-link[b-39bgawh698]{
    font-size: 14px;
}

.factory-link:hover[b-39bgawh698] {
    color: var(--pink) !important;
}

/* Factories container and individual factory blocks */
.factories[b-39bgawh698] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.factory[b-39bgawh698] {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    /* padding: 1.5rem;
    border-left: 3px solid var(--content-border);
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--content-border) 5%, transparent); */
}

/* Supplier header: tabs on left, status-banner on right */
.supplier-header[b-39bgawh698] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 24px;
}

.supplier-header .tabs[b-39bgawh698] {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.supplier-header .status-banner[b-39bgawh698] {
    display: flex;
    align-items: center;
}

/* Status badge styles */
.status-green[b-39bgawh698],
.status-grey[b-39bgawh698],
.status-red[b-39bgawh698],
.status-yellow[b-39bgawh698] {
    display: inline-block;
    padding: 0.4rem 1.1rem;
    /*border-radius: 9999px;*/
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.status-green[b-39bgawh698] {
    background-color: color-mix(in srgb, var(--green) 15%, transparent);
    color: var(--green);
    border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
}

.status-grey[b-39bgawh698] {
    background-color: color-mix(in srgb, var(--dark-grey) 15%, transparent);
    color: var(--dark-grey);
    border: 1px solid color-mix(in srgb, var(--dark-grey) 40%, transparent);
}

.status-red[b-39bgawh698] {
    background-color: color-mix(in srgb, var(--pink) 15%, transparent);
    color: var(--pink);
    border: 1px solid color-mix(in srgb, var(--pink) 40%, transparent);
}

.status-yellow[b-39bgawh698] {
    background-color: color-mix(in srgb, var(--yellow) 15%, transparent);
    color: var(--yellow);
    border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent);
}

/* ════════════════════════════════════════════════════════════════════
   SOAP STATUS BLOCK
   ════════════════════════════════════════════════════════════════════ */

.soap-status-block[b-39bgawh698] {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 24px;
}

@media (max-width: 1024px) {
    .soap-status-block[b-39bgawh698] {
        overflow-x: auto;
    }
}

.soap-status-block h2[b-39bgawh698]{
    font-weight: 600;
    font-size: 30px;
    width: 100%;
    border-bottom: 1px solid var(--outline);
    margin-top: 16px;
}

/* ── Top row: status cards ───────────────────────────────────────── */
.soap-status-block .row[b-39bgawh698] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap:40px;
}

/* Individual status card */
.status-block[b-39bgawh698] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(195px, calc(25% - 50px));
    min-width: fit-content;
}

    .status-block h3[b-39bgawh698] {
        font-size: 14px;
        font-weight: 400;
    }

/* ── Generic .status badge ───────────────────────────────────────── */
.status[b-39bgawh698] {
    display: inline-block;
    /*padding: 0.3rem 0.9rem;*/
    /*border-radius: 9999px;*/
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.03em;
    border: 1px solid transparent;
}

/* Colour variants */
.status.pending[b-39bgawh698] {
    background-color: color-mix(in srgb, var(--dark-grey) 12%, transparent);
    color: var(--dark-grey);
    border-color: color-mix(in srgb, var(--dark-grey) 35%, transparent);
}

.status.in-progress[b-39bgawh698],
.status.in-progress-existing[b-39bgawh698],
.status.in-progress-new[b-39bgawh698],
.status.partial-received[b-39bgawh698],
.status.under-review[b-39bgawh698],
.status.partially-validated[b-39bgawh698],
.status.preparation[b-39bgawh698],
.status.scheduled[b-39bgawh698] {
    background-color: color-mix(in srgb, var(--yellow) 15%, transparent);
    color: color-mix(in srgb, var(--yellow) 80%, #000);
    border-color: color-mix(in srgb, var(--yellow) 50%, transparent);
}

.status.completed[b-39bgawh698] {
    background-color: color-mix(in srgb, var(--orange) 12%, transparent);
    color: var(--orange);
    border-color: color-mix(in srgb, var(--orange) 40%, transparent);
}

.status.approved[b-39bgawh698],
.status.approved-legacy[b-39bgawh698] {
    background-color: color-mix(in srgb, var(--green) 15%, transparent);
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 40%, transparent);
}

.status.rejected[b-39bgawh698] {
    background-color: color-mix(in srgb, var(--pink) 15%, transparent);
    color: var(--pink);
    border-color: color-mix(in srgb, var(--pink) 40%, transparent);
}

.factory-status-row .status[b-39bgawh698], .soap-status-block .status[b-39bgawh698] {
    padding: 3px 9px;
}

/* Direct colour-named variants (grey / yellow / orange / green / red) */
.factory-status-row .status.grey[b-39bgawh698] {
    background-color: color-mix(in srgb, var(--dark-grey) 12%, transparent);
    color: var(--dark-grey);
    border-color: color-mix(in srgb, var(--dark-grey) 35%, transparent);
}

.factory-status-row .status.yellow[b-39bgawh698] {
    background-color: color-mix(in srgb, var(--yellow) 15%, transparent);
    color: color-mix(in srgb, var(--yellow) 80%, #000);
    border-color: color-mix(in srgb, var(--yellow) 50%, transparent);
}

.factory-status-row .status.orange[b-39bgawh698] {
    background-color: color-mix(in srgb, var(--orange) 12%, transparent);
    color: var(--orange);
    border-color: color-mix(in srgb, var(--orange) 40%, transparent);
}

.factory-status-row .status.green[b-39bgawh698] {
    background-color: color-mix(in srgb, var(--green) 15%, transparent);
    color: var(--green);
    border-color: color-mix(in srgb, var(--green) 40%, transparent);
}

.factory-status-row .status.red[b-39bgawh698] {
    background-color: color-mix(in srgb, var(--pink) 15%, transparent);
    color: var(--pink);
    border-color: color-mix(in srgb, var(--pink) 40%, transparent);
}

/* ── Status selector dropdown ────────────────────────────────────── */
.status-selector[b-39bgawh698] {
    appearance: none;
    -webkit-appearance: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 3px 24px 3px 9px;
    border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
    border-radius: 4px;
    background-color: color-mix(in srgb, var(--green) 15%, transparent);
    color: var(--green);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .status-selector:focus[b-39bgawh698] {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 25%, transparent);
    }

.status-selector.yellow[b-39bgawh698] {
    border-color: color-mix(in srgb, var(--yellow) 50%, transparent);
    background-color: color-mix(in srgb, var(--yellow) 15%, transparent);
    color: color-mix(in srgb, var(--yellow) 80%, #000);
}

    .status-selector.yellow:focus[b-39bgawh698] {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--yellow) 30%, transparent);
    }

.status-selector.orange[b-39bgawh698] {
    border-color: color-mix(in srgb, var(--orange) 40%, transparent);
    background-color: color-mix(in srgb, var(--orange) 12%, transparent);
    color: var(--orange);
}

    .status-selector.orange:focus[b-39bgawh698] {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 25%, transparent);
    }

.status-selector.red[b-39bgawh698] {
    border-color: color-mix(in srgb, var(--pink) 40%, transparent);
    background-color: color-mix(in srgb, var(--pink) 15%, transparent);
    color: var(--pink);
}

    .status-selector.red:focus[b-39bgawh698] {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--pink) 25%, transparent);
    }

.status-selector.grey[b-39bgawh698] {
    border-color: color-mix(in srgb, var(--dark-grey) 35%, transparent);
    background-color: color-mix(in srgb, var(--dark-grey) 12%, transparent);
    color: var(--dark-grey);
}

    .status-selector.grey:focus[b-39bgawh698] {
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--dark-grey) 20%, transparent);
    }
/* ---------- Color Classes for Spans ---------- */
/*.green {
    color: var(--green);
    font-weight: 600;
}

.yellow {
    color: var(--yellow);
    font-weight: 600;
}

.orange {
    color: var(--orange);
    font-weight: 600;
}

.red {
    color: var(--pink);
    font-weight: 600;
}

.gray,
.grey {
    color: var(--dark-grey);
    font-weight: 600;
}*/


/* ── Factory status table ────────────────────────────────────────── */
.table-container[b-39bgawh698] {
    overflow-x: auto;
}

.data-table td .capabilities > span.capability[b-39bgawh698]{
    margin-right: 10px;
    font-weight: 400;
    white-space: nowrap;
}

.data-table td .capabilities > span.capability:not(.ellipsis)[b-39bgawh698] {
    display: block;
}

.data-table td .capabilities > span.capability:not(:last-child)[b-39bgawh698]{
    margin-bottom: 5px;
}

.data-table td .capabilities > span.ellipsis:not(:last-child)[b-39bgawh698]::after {
  content: " ...";
}

p.capabilities[b-39bgawh698]{
    display: block;
}

.expand-capabilities-btn[b-39bgawh698] {
    background: transparent;
    color: var(--pink);
    border: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: underline;
}

.expand-capabilities-btn:hover[b-39bgawh698] {
    transform: translateY(-2px);
}
 

.factory-status-row[b-39bgawh698] {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
}

.factory-status-column[b-39bgawh698] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: fit-content;
}

.factory-status-column:not(.capability-col)[b-39bgawh698] {
    width: min(195px, 25%);
}

.factory-status-column .column-header[b-39bgawh698] {
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    color: var(--outline);
    white-space: nowrap;
}

.factory-status-column .column-content[b-39bgawh698] {
    display: flex;
    align-items: center;
    vertical-align: middle;
}

.factory-status-column .column-content .status[b-39bgawh698] {
    width: 100%;
}

.factory-status-row .factory-link[b-39bgawh698]{
    font-weight: 600;
}


/* ── Overall status banner ───────────────────────────────────────── */
.overall-status-banner[b-39bgawh698] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    background-color: var(--content-bg);
    border: 2px solid var(--content-border);
}

.overall-status-banner .status[b-39bgawh698] {
    font-size: 1.15rem;
    padding: 0.55rem 1.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

/* ── No-data empty state ─────────────────────────────────────────── */
.no-data[b-39bgawh698] {
    color: var(--dark-grey);
    font-size: 16px;
    font-weight: 600;
    font-style: italic;
    padding: 0.5rem 0;
}

/* ── Guide items layout ──────────────────────────────────────────── */
.documents[b-39bgawh698]{
    background-color:#F5F5F5;
    padding: 21px 48px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.dark .documents[b-39bgawh698]{
    background-color: color-mix(in srgb, var(--dark-grey) 12%, transparent);
}

.document-guide h4[b-39bgawh698]{
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase ;
}

.document-guide[b-39bgawh698] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.guide-blocks[b-39bgawh698]{
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.guide-block[b-39bgawh698] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.guide-block h5[b-39bgawh698]{
    font-weight: 400;
    font-size: 14px;
}

.guide-items[b-39bgawh698] {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    flex-wrap: wrap;
}

.guide-item[b-39bgawh698] {
    font-size: 12px;
    width: fit-content;
    min-width: 110px;
    position: relative;
}

.guide-item-close[b-39bgawh698] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    padding: 0;
    background: var(--dark-grey);
    color: var(--white);
    border: none;
    border-radius: 50%;
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    z-index: 1;
}

.guide-item-close:hover[b-39bgawh698] {
    background: var(--pink);
}

.guide-item span[b-39bgawh698]{
    width: 100%;
}

.documents[b-39bgawh698]  .data-table{
    margin-top: 0;
    background-color: var(--white);
}

.documents[b-39bgawh698]  .data-table thead{
    background-color: #FAFAFA;
}

.documents[b-39bgawh698]  .data-table th, .documents[b-39bgawh698]  .data-table td{
    padding: 10px 20px;
    font-size: 12px;
}

/* ── Icon styles ─────────────────────────────────────────────────── */

/* /Components/EntityForm.razor.rz.scp.css */

/* ============================================
   ENTITY FORM - Clean & Consistent Styles
   Based on FactoryForm styles
   Cross-browser: Chrome, Edge, Safari
   ============================================ */

/* Base Reset */
.entity-form[b-sjamnyn1da] {
    padding: 20px 0 20px 0;
    color: var(--content-text);
    background: var(--content-bg);
    font-size: 15px;
}

.entity-form *[b-sjamnyn1da],
.entity-form *[b-sjamnyn1da]::before,
.entity-form *[b-sjamnyn1da]::after {
    box-sizing: border-box;
}

.entity-form h2[b-sjamnyn1da]{
    font-weight: 600;
    font-size: 20px;
     color: var(--content-text);
    text-transform: uppercase;
}

.entity-form h2.entity-form-title[b-sjamnyn1da]{
    font-size: 30px;
    border-bottom: 2px solid var(--dark-grey);
    margin-bottom: 40px;
    text-transform: none;
}
.rep-header[b-sjamnyn1da] {
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    color: #909090;
}

/* Global Input Styles - Blazor compatible (excludes checkbox/radio) */
.entity-form input[type="text"][b-sjamnyn1da],
.entity-form input[type="number"][b-sjamnyn1da],
.entity-form input[type="date"][b-sjamnyn1da],
.entity-form select[b-sjamnyn1da],
.entity-form textarea[b-sjamnyn1da],
.entity-form[b-sjamnyn1da]  input:not([type="checkbox"]):not([type="radio"]),
.entity-form[b-sjamnyn1da]  select,
.entity-form[b-sjamnyn1da]  textarea,
.entity-form[b-sjamnyn1da]  input::placeholder{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--content-border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: var(--content-text);
    background: var(--content-input-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/*date input*/
.dark .entity-form[b-sjamnyn1da]  input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1); /* turns dark icon white */
}

/* Checkbox and Radio base styles */
.entity-form input[type="checkbox"][b-sjamnyn1da],
.entity-form input[type="radio"][b-sjamnyn1da] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    max-width: 18px;
    flex-shrink: 0;
    accent-color: #d64d7d;
    cursor: pointer;
}

[b-sjamnyn1da] input[type="radio"] {
    accent-color: #d64d7d;
    cursor: pointer;
}


.entity-form input:not([type="checkbox"]):not([type="radio"]):focus[b-sjamnyn1da],
.entity-form select:focus[b-sjamnyn1da],
.entity-form textarea:focus[b-sjamnyn1da],
.entity-form[b-sjamnyn1da]  input:not([type="checkbox"]):not([type="radio"]):focus,
.entity-form[b-sjamnyn1da]  select:focus,
.entity-form[b-sjamnyn1da]  textarea:focus {
    outline: none;
    border-color: #d64d7d;
    box-shadow: 0 0 0 3px rgba(214, 77, 125, 0.1);
}

.entity-form input:not([type="checkbox"]):not([type="radio"]):disabled[b-sjamnyn1da],
.entity-form select:disabled[b-sjamnyn1da],
.entity-form textarea:disabled[b-sjamnyn1da],
.entity-form[b-sjamnyn1da]  input:not([type="checkbox"]):not([type="radio"]):disabled,
.entity-form[b-sjamnyn1da]  select:disabled,
.entity-form[b-sjamnyn1da]  textarea:disabled {
    background: var(--content-input-disabled-bg);
    color: var(--content-input-disabled-text);
    border-color: var(--content-border);
    cursor: not-allowed;
}

.entity-form[b-sjamnyn1da]  .valid.modified:not([type=checkbox]) {
    border-color: #28a745;
}

.entity-form[b-sjamnyn1da]  .invalid {
    border-color: #dc3545;
}

/* EV Scoring specific width */
.entity-form #ev-scoring[b-sjamnyn1da] {
    width: 120px;
    max-width: 120px;
}

/* Global Label Styles */
    .entity-form label[b-sjamnyn1da] {
        display: block;
        color: var(--content-text);
        margin-bottom: 10px;
        font-weight: 400;
        font-size: 14px;
    }

    /*Representative label Styles*/
.entity-form .key-rep-grid label[b-sjamnyn1da] {
    font-size: 16px;
    font-weight: 600;
}

/* Divider */
.divider[b-sjamnyn1da] {
    display: block;
    border: none;
    border-top: 1px solid var(--content-border);
    margin: 32px 0;
    padding: 0;
    height: 0;
}

/* ============================================
   CHECKBOX GRID (Column Layout)
   ============================================ */
.checkbox-grid[b-sjamnyn1da] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 28px;
    margin-bottom: 28px;
}

.checkbox-grid div[b-sjamnyn1da] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    cursor: pointer;
}

.checkbox-grid label[b-sjamnyn1da] {
    margin-bottom: 0;
    cursor: pointer;
    flex: 1;
}

.checkbox-grid input[type="checkbox"][b-sjamnyn1da] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    max-width: 18px;
    flex-shrink: 0;
    border: 2px solid var(--content-border);
    border-radius: 4px;
    background: var(--content-input-bg);
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
}

.checkbox-grid input[type="checkbox"]:checked[b-sjamnyn1da] {
    background: #d64d7d;
    border-color: #d64d7d;
}

.checkbox-grid input[type="checkbox"]:checked[b-sjamnyn1da]::before {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.checkbox-grid input[type="checkbox"]:focus[b-sjamnyn1da] {
    outline: none;
    border-color: #d64d7d;
    box-shadow: 0 0 0 3px rgba(214, 77, 125, 0.1);
}

.save-button[b-sjamnyn1da] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 50px;
    background: var(--black);
    color: var(--white);
    border: var(--black) 1px solid;
    cursor: pointer;
    transition: background 0.2s;
    font-weight: 600;
    font-size: 14px;
    height: fit-content;
}

    .save-button span[b-sjamnyn1da] {
        display: inline-block;
        filter: invert(1) brightness(1.2) saturate(0);
        -webkit-filter: invert(1) brightness(1.2) saturate(0);
        width: 12px;
        height: 12px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        flex-shrink: 0;
        margin-right: 0;
    }

    .save-button:hover span[b-sjamnyn1da] {
        filter: invert(1) brightness(0) saturate(0);
    }

.save-button:hover[b-sjamnyn1da] {
    background: var(--white);
    color: var(--black);
}

.form-footer[b-sjamnyn1da] {
    margin-top: 32px;
    padding-top: 28px;
    /*border-top: 1px solid var(--content-border);*/
    min-height: 150px;
}

.form-footer.left-align[b-sjamnyn1da] {
    display: flex;
    justify-content: flex-start;
}

.form-footer.right-align[b-sjamnyn1da] {
    display: flex;
    justify-content: flex-end;
}

.form-footer.sticky[b-sjamnyn1da]{
    position: sticky;
    bottom: 0;
    width: 100%;
    left: 0;
    background-color: var(--content-bg);
    border-top: 1px solid var(--black);
    padding-top: 0;
    align-items: center;
    min-height: 130px;
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 20px;
}


/* ============================================
   ACTION AREA (Export/Import)
   ============================================ */
.action-area-wrapper[b-sjamnyn1da] {
    margin: 24px 0;
    padding: 20px;
    background: var(--content-surface);
    border: 2px dashed var(--content-border);
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dark .action-area-wrapper[b-sjamnyn1da] {
    background:#393939;

}

.action-text[b-sjamnyn1da] {
    color: var(--content-text);
    margin-bottom: 16px;
    font-weight: 400;
    font-size: 16px;
    max-width: 1118px;
}

.action-buttons[b-sjamnyn1da] {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}


[b-sjamnyn1da] #ev-scoring {
    width: 120px;
    max-width: 120px;
}


.std-btn[b-sjamnyn1da] {
    min-width: 236px;
}


/* ============================================
   FORM SECTIONS
   ============================================ */
.section[b-sjamnyn1da] {
    margin-bottom: 40px;
}

.section-title[b-sjamnyn1da] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--content-text);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--content-border);
}

.subtitle[b-sjamnyn1da] {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--content-text-secondary);
    margin-left: 8px;
}

.container[b-sjamnyn1da] {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Typography and Headers */
h2[b-sjamnyn1da] {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--content-text);
    margin-top: 30px;
    margin-bottom: 15px;
}

h3[b-sjamnyn1da] {
    font-size: 1em;
    font-weight: bold;
    color: var(--outline);
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Grid Layout System */
.grid-4[b-sjamnyn1da], .grid-3[b-sjamnyn1da], .grid-2[b-sjamnyn1da] {
    display: grid;
    row-gap: 14px;
    column-gap: 50px;
    margin-bottom: 20px;
    align-items: start;
}

.grid-4[b-sjamnyn1da] {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.grid-3[b-sjamnyn1da] {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-2[b-sjamnyn1da] {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

/* Form Field Styling */
.form-group[b-sjamnyn1da] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-sizing: border-box;
    padding-bottom: 12px;
}

/* Form Row - Multiple form-groups on same line with minimal gap */
.form-row[b-sjamnyn1da] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

.form-row .form-group[b-sjamnyn1da] {
    flex: 1;
    min-width: 200px;
}

/* Form Row Left - Form-groups on same row, stacked from left, no expansion */
.form-row-left[b-sjamnyn1da] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

.fg-label[b-sjamnyn1da] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--content-text-secondary);
    margin-bottom: 8px;
}

.fg-input[b-sjamnyn1da] {
    width: 100%;
}

/* Number input specific styling */
.fg-input input[type="number"][b-sjamnyn1da] {
    width: 120px;
    max-width: 120px;
}

label[b-sjamnyn1da] {
    font-size: 0.85em;
    color: var(--content-text-secondary);
    margin-bottom: 5px;
    font-weight: 500;
}

/* Key Representatives Grid */
.key-rep-grid[b-sjamnyn1da] {
    display: grid;
    grid-template-columns: 180px repeat(5, 1fr);
    gap: 28px;
    align-items: center;
    margin-bottom: 20px;
}

/* Audit Grids */
.audit-grid[b-sjamnyn1da] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 20px;
}

/* Revenue Grid */
.revenue-grid[b-sjamnyn1da] {
    display: grid;
    grid-template-columns: 200px repeat(3, 1fr);
    gap: 28px;
    align-items: center;
    margin-top: 10px;
}

/* Other existing styles... */

/* Full Width Form Group */
.form-group.full-width[b-sjamnyn1da] {
    width: 100%;
}

/* Notes Textarea */
.notes-textarea[b-sjamnyn1da] {
    min-height: 100px;
    resize: vertical;
}

/* Media Queries */
@media (max-width: 900px) {
    .key-rep-grid[b-sjamnyn1da], .audit-grid[b-sjamnyn1da], .revenue-grid[b-sjamnyn1da] {
        grid-template-columns: 1fr;
        gap: 5px;
    }
}

/*.icon-download { background: none; }
.icon-download::before { content: "↓ "; color: #fff; }*/
/*.icon-upload::before { content: "↑ "; color: #fff; }*/
/*.icon-save::before { content: "✓ "; color: #fff; }*/


[b-sjamnyn1da] .validation-errors {
    font-size: 16px;
    list-style: none;
    column-count: 2;
    column-gap: 1rem;
    flex-direction: column;
    padding: 10px;
}

@media (max-width: 1024px) {
    [b-sjamnyn1da] .validation-errors {
        column-count: 1;
    }
}

.audits-button[b-sjamnyn1da] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 22px;
    background: transparent;
    color: var(--black);
    border: var(--black) 1px solid;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    margin-bottom: 32px;
    font-weight: 600;
    font-size: 14px;
}

.dark .audits-button[b-sjamnyn1da]{
    background: white;
}

.audits-button:hover[b-sjamnyn1da] {
    background: var(--black);
    color: var(--white);
}

/* /Components/EntityViewer.razor.rz.scp.css */
  /* --- Main Section Styling --- */
        .container[b-j0xiisagcn] {
            padding: 40px 0 50px 0;
            display: grid;        
            column-gap: 120px;
            grid-template-columns: repeat(3, 1fr);
            row-gap: 70px;
        }

        .span-col-2[b-j0xiisagcn] {
            grid-column: span 2;
        }

        
        .info-section[b-j0xiisagcn] {
            break-inside: avoid;
        }
        
        .info-section:last-child[b-j0xiisagcn] {
            margin-bottom: 0;
        }


        /* Sub-headers (like CEO, Domestic market) */
        .sub-header[b-j0xiisagcn] {
            font-size: 16px;
            font-weight: 800;
            color: var(--content-text);
            margin-top: 25px;
            padding-bottom: 5px;
            margin-bottom: 5px;
            text-transform: capitalize;
            border-bottom: var(--content-text) 1px solid;
        }

        /* Standard Row: Label Left, Value Right */
        .info-row[b-j0xiisagcn] {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            padding: 5px 0;
            gap: 30px;
        }

        /* Label Styling */
        .info-row label[b-j0xiisagcn], 
        .info-row .label[b-j0xiisagcn] {
            font-weight: 600;
            color: var(--content-text);
            font-size: 14px;
            margin-right: 20px;
            /*flex-shrink: 0;*/
            /*min-width: fit-content;*/
            /*opacity: 0.7;*/
        }

        /* Value Styling */
        .info-row .value[b-j0xiisagcn] {
            font-weight: 400;
            color: var(--content-text);
            font-size: 14px;
            text-align: right;
            word-break: break-word;
        }

        /* Green Text modifier for "Yes" values */
        .value.success[b-j0xiisagcn] {
            color: #4cd964; /* Adjust green to match screenshot */
            font-weight: 500;
        }

        /* --- Split Rows (Two Columns) for Representatives --- */
        .split-row[b-j0xiisagcn] {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            gap: 40px;
        }

        .split-col[b-j0xiisagcn] {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .split-col:has(> label)[b-j0xiisagcn] {
            flex-direction: row;
            justify-content: space-between;
            align-items: baseline;
        }
        
        .split-col:has(> .sub-header)[b-j0xiisagcn] {
            flex-direction: column;
            justify-content: flex-start;
        }
        
        .split-col label[b-j0xiisagcn] {
            font-weight: 600;
            color: var(--content-text);
            font-size: 14px;
        }
        
        .split-col .value[b-j0xiisagcn] {
            font-weight: 400;
            color: var(--content-text);
            font-size: 14px;
        }

        .line-break[b-j0xiisagcn]{
            border-top: 1px solid var(--content-border);
        }
        
        /* Notes Section */
        .notes-content[b-j0xiisagcn] {
            font-size: 14px;
            line-height: 1.6;
            color: var(--content-text);
            text-align: justify;
            white-space: pre-wrap;
            min-height: 100px;
            border: var(--content-border) 1px solid;
            padding: 5px 10px;
        }

        .notes-section[b-j0xiisagcn] {
            padding-bottom: 40px;
        }

        /* Audit Tables */
        .audit-table[b-j0xiisagcn] {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }

        .audit-table th[b-j0xiisagcn],
        .audit-table td[b-j0xiisagcn] {
            padding: 8px 12px;
            text-align: left;
            border-bottom: 1px solid var(--content-border);
            font-size: 14px;
        }

        .audit-table th[b-j0xiisagcn] {
            font-weight: 800;
            color: var(--content-text);
        }

        .audit-table td[b-j0xiisagcn] {
            font-weight: 400;
            color: var(--content-text);
        }

        /* NDA Documents Table */
        .nda-documents[b-j0xiisagcn] {
            width: 100%;
            border-collapse: collapse;
            table-layout: auto;
            font-size: 14px;
            margin-top: 15px;
        }

        .nda-documents thead[b-j0xiisagcn] {
            height: 48px;
            border-bottom: #797979 1px solid;
        }

        .nda-documents th[b-j0xiisagcn] {
            text-align: left;
            padding: 15px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            white-space: nowrap;
            color: #797979;
        }

        .nda-documents td[b-j0xiisagcn] {
            font-size: 14px;
            padding: 15px;
            vertical-align: middle;
            color: var(--content-text);
        }

        .dark .nda-documents tr[b-j0xiisagcn] {
            border-bottom: #F5F5F5 solid 1px;
        }

        .nda-documents tr[b-j0xiisagcn] {
            border-bottom: #F5F5F5 solid 1px;
        }

        .nda-documents tr:last-child[b-j0xiisagcn],
        .dark .nda-documents tr:last-child[b-j0xiisagcn] {
            border-bottom: none;
        }

        /* Mobile Responsiveness */
        @media (max-width: 600px) {
            /*.info-section h2 { font-size: 24px; }*/
            .split-row[b-j0xiisagcn] { flex-direction: column; gap: 0; }
            .split-col[b-j0xiisagcn] { padding: 4px 0; }
            .audit-table th[b-j0xiisagcn],
            .audit-table td[b-j0xiisagcn] {
                padding: 6px 8px;
                font-size: 12px;
            }
        }

        /* Desktop med: Two-Column Layout */
        @media (max-width: 1560px) {
            .container[b-j0xiisagcn] {
                grid-template-columns: repeat(2, 1fr);
                row-gap: 60px;
            }

            .span-col-2[b-j0xiisagcn] {
                grid-column: span 1;
            }
        }

        @media (max-width: 1280px) {
            .container[b-j0xiisagcn] {
                grid-template-columns: 1fr;
                row-gap: 40px;
            }
        }

        


        /* Text color modifiers for semantic tag colors */
 .status-green[b-j0xiisagcn] {
    color: var(--green); /* green text from global variable */
}
.status-yellow[b-j0xiisagcn] {
    color: var(--yellow); /* yellow text (uses existing variable) */
}
.status-red[b-j0xiisagcn] {
    color: var(--pink); /* red/pink text */
}
.status-grey[b-j0xiisagcn] {
    color: var(--dark-grey); /* gray text */
}
.status-orange[b-j0xiisagcn] {
    color: var(--orange); /* green text from global variable */
}


.scroll-up-btn[b-j0xiisagcn] {
    position: fixed;
    bottom: 60px;
    right: 40px;
    display: display;
    width: 54px;
    height: 54px;
    background-color: var(--black);
    border: var(--black) 1px solid;
    color: var(--white);
    justify-content: center;
    align-items: center;
    overflow: hidden;
    -webkit-transition: all .3s linear;
    -ms-transition: all .3s linear;
    transition: all .3s linear;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    z-index: 10;
}

    .scroll-up-btn.active[b-j0xiisagcn] {
        opacity: 1;
        pointer-events: auto;
    }

.scroll-up-btn:hover[b-j0xiisagcn]{
    color: var(--black);
    background-color: var(--white);
}

        /* Document Link Styles */
.document-link[b-j0xiisagcn] {
    color: #d946ef;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s;
}

.document-link:hover[b-j0xiisagcn] {
    color: #c026d3;
}
/* /Components/ExternalBrowser.razor.rz.scp.css */


.search-and-filters[b-j8bg7p566g] {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
}

.search-box[b-j8bg7p566g] {
    display: flex;
    flex-direction: column;
    width: calc(50% - 8px);
    min-width: 300px;
}

.search-box-items[b-j8bg7p566g] {
    display: flex;
    align-items: center;
}

.search-box[b-j8bg7p566g]  form {
    flex: 1;
    display: flex;
    flex-direction: column;
}

  [b-j8bg7p566g]  .search-box input {
        height: 30px;
        border: none;
        background: var(--light-grey);
        font-size: 14px;
        color: var(--black);
        padding: 0 32px;
        width: 100%;
        box-sizing: border-box;
        font-weight: 600;
        outline: none;
        letter-spacing: 0.5px;
        box-shadow: none;
    }

  [b-j8bg7p566g]  .search-box input::placeholder {
        color: var(--content-text-secondary);
        opacity: 1;
        font-size: 14px;
        font-weight: 400;
    }

.search-input[b-j8bg7p566g] {
    min-width: 200px;
}

    .search-box .icon[b-j8bg7p566g] {
        color: var(--dark-grey);
    }


.buttons-row[b-j8bg7p566g]{
    display:flex;
    gap: 15px;
}


.clear-btn[b-j8bg7p566g] {
    background: var(--white);
    color: var(--black);
    border: 2px solid var(--black);
    padding: 0 28px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    letter-spacing: 0.5px;
    text-transform: lowercase;
    margin-left: 8px;
    height: 30px;
}

.clear-btn:hover[b-j8bg7p566g] {
    background: var(--content-surface-hover);
}

[b-j8bg7p566g] .search-box .validation-message {
    margin-top: 8px;
    width: 100%;
    font-size:smaller;
}

.inspiration-grid[b-j8bg7p566g] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(267px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.grid-item[b-j8bg7p566g] {
    position: relative;
    height: 267px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px);
    animation: fadeUp-b-j8bg7p566g 500ms ease forwards;
}

@keyframes fadeUp-b-j8bg7p566g {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.overlay[b-j8bg7p566g] {
    position: absolute;
    top: 0;
    opacity:0;
    height: 100%;
    width: 100%;
    background: #FDB9FFE5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    gap: 10px;
    transition: opacity .5s ease;
}

.grid-item:hover .overlay[b-j8bg7p566g] {
    opacity: 1;
}

.overlay-title[b-j8bg7p566g] {
    font-weight: 700;
    font-size: 16px;
    color: var(--black);
}

.overlay-text[b-j8bg7p566g] {
    font-weight: 400;
    font-size: 14px;
    color: var(--black);
}

    .grid-item img[b-j8bg7p566g] {
        width: 100%;
        height: 100%;
        /* KEY PROPERTY: Stretches and crops the image to cover the 150px container without distortion */
        object-fit: cover;
        display: block; /* Removes any default bottom spacing */
    }

.inspiration-search[b-j8bg7p566g] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
   
}


/* --- New Pagination Container for Centering --- */
.pagination-container[b-j8bg7p566g] {
    /* This container fills the viewport and centers its content (.pagination) */
    display: flex;
    justify-content: center; /* HORIZONTAL CENTERING */
    align-items: center; /* VERTICAL CENTERING */
  
}
/* --- Pagination Container (The actual component) --- */
.pagination[b-j8bg7p566g] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    max-width: fit-content;
    width: 100%;
    gap: 20px; 
}

/* --- Page Status Text --- */
#page-status[b-j8bg7p566g] {
    font-size: 14px;
    font-weight: 600; 
    color: var(--outline); 
    text-align: center;
    flex: 1;
}

/* --- Button Base Styles (Previous and Next) --- */
.previous[b-j8bg7p566g], .next[b-j8bg7p566g] {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--black);
    color: var(--white);
    border: var(--black) 1px solid;
    border-radius: 24px;
    padding: 8px 24px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: all .3s ease;
}

    /* --- Button Hover State --- */
    .previous:hover[b-j8bg7p566g], .next:hover[b-j8bg7p566g] {
        background-color: var(--white);
        color: var(--black);
    }

    /* --- Button Disabled State --- */
    .previous:disabled[b-j8bg7p566g], .next:disabled[b-j8bg7p566g] {
        opacity: 0.5; /* disabled:opacity-50 */
        cursor: not-allowed; /* disabled:cursor-not-allowed */
        box-shadow: none;
    }

    /* --- Icon Spacing --- */
    .previous svg[b-j8bg7p566g] {
        margin-right: 0.25rem;
    }

    .next svg[b-j8bg7p566g] {
        margin-left: 0.25rem;
    }

/* --- Responsiveness for larger screens (sm: breakpoint) --- */

@media (min-width: 640px) {
    .pagination[b-j8bg7p566g] {
        padding: 1.25rem; /* sm:p-5 */
    }

    .previous[b-j8bg7p566g], .next[b-j8bg7p566g] {
        padding: 0.75rem 1.5rem; /* sm:px-6 sm:py-3 */
    }
}

/*smaller screens*/
@media (max-width: 1024px) {

    .inspiration-grid[b-j8bg7p566g] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .inspiration-grid[b-j8bg7p566g] {
        grid-template-columns: 1fr;
    }

    .search-box[b-j8bg7p566g]{
        width: 100%;
    }
}

@media (max-width: 576px) {
    .inspiration-search[b-j8bg7p566g]{
        gap:0;
    }
    .inspiration-grid[b-j8bg7p566g] {
        row-gap: 24px;
        margin: 24px 0;
    }
}
/* /Components/FactoryEditor.razor.rz.scp.css */




h2[b-r6wgcnljfx] {
    margin-top: 0;
    font-size: 1.5em;
    /* Updated to use --dark-grey */
    color: var(--content-text);
}

/* Removed h3 styling as it was not present in EntityEditor.razor.css and used older variables */

label[b-r6wgcnljfx] {
    display: block;
    margin: 10px 0 5px;
    font-weight: bold;
    color: var(--content-text);
}

/* Consolidated form field styling to match EntityEditor.razor.css */
[b-r6wgcnljfx] input.item-name, [b-r6wgcnljfx] textarea.item-notes, [b-r6wgcnljfx] select.item-selector, [b-r6wgcnljfx] input.item-date, [b-r6wgcnljfx] input.item-file {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    /* Updated to use --light-grey from EntityEditor.razor.css */
    border: 1px solid var(--content-border);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
    font-family: inherit;
    background-color: var(--content-input-bg);
    /* Updated to use --black from EntityEditor.razor.css */
    color: var(--content-text);
    cursor: pointer;
}

/*date input*/
.dark[b-r6wgcnljfx]  input.item-date::-webkit-calendar-picker-indicator {
    filter: invert(1); /* turns dark icon white */
}

[b-r6wgcnljfx] textarea.item-notes {
    resize: vertical;
    height: 100px;
}

[b-r6wgcnljfx] select.item-selector {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Updated SVG fill color to black to match EntityEditor.razor.css */
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><polygon points="0,0 10,0 5,10" fill="%23000000"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
}

    [b-r6wgcnljfx] select.item-selector:focus {
        outline: none;
        /* Updated to use --dark-grey and --pink */
        border-color: var(--dark-grey);
        box-shadow: 0 0 5px var(--pink);
    }

/* Combined with general input styling above for consistency with EntityEditor.razor.css */

[b-r6wgcnljfx] input.item-file:focus {
    outline: none;
    /* Updated to use --dark-grey and --pink */
    border-color: var(--dark-grey);
    box-shadow: 0 0 5px var(--pink);
}

.button-container[b-r6wgcnljfx] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.button-container-right[b-r6wgcnljfx] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

/* Combined button styles to match EntityEditor.razor.css structure */
.save-button[b-r6wgcnljfx], .cancel-button[b-r6wgcnljfx], .ok-button[b-r6wgcnljfx] {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.save-button[b-r6wgcnljfx], .ok-button[b-r6wgcnljfx] {
    /* Updated to use --pink from EntityEditor.razor.css */
    background-color: var(--pink);
    color: var(--white);
}

.cancel-button[b-r6wgcnljfx] {
    background-color: transparent;
    /* Updated to use --pink from EntityEditor.razor.css */
    border: 1px solid var(--pink);
    color: var(--pink);
}

p.error[b-r6wgcnljfx] {
    /* Assuming a --red variable exists or keeping standard red */
    color: red;
}

/* Removed specific hover styles to match EntityEditor.razor.css preference for no button hover effects */

.close-button[b-r6wgcnljfx] {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    color: var(--content-text);
    padding: 5px;
}

    .close-button:hover[b-r6wgcnljfx] {
        color: #f44336; /* Keeping red on hover */
    }


/* Removed local submenu styles - using global styles from app.css */


.supplier[b-r6wgcnljfx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 40px;
}

.supplier[b-r6wgcnljfx], .block[b-r6wgcnljfx] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.block-header[b-r6wgcnljfx] {
    display: flex;
    justify-content: end;
}

.field-two[b-r6wgcnljfx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}



.tab-button[b-r6wgcnljfx] {
    min-width: 213px;
    height: 30px;
    background: var(--content-bg);
    color: var(--content-text);
    border: var(--content-text) 1px solid;
    font-weight: 600;
    cursor: pointer;
    margin-right: 0;
    margin-bottom: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0 18px;
    letter-spacing: 0.2px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .tab-button.active[b-r6wgcnljfx],
    .tab-button.active:visited[b-r6wgcnljfx] {
        background: var(--content-text);
        color: var(--content-bg);
        border-color: var(--content-bg);
        border: none;
        z-index: 4;
        font-weight: 800;
    }

    .tab-button:hover[b-r6wgcnljfx],
    .tab-button:focus[b-r6wgcnljfx] {
        background: var(--content-text);
        color: var(--content-bg);
        border-color: var(--content-bg);
        outline: none;
    }

/* Supplier header: h1 + status-banner side by side */
.supplier-header[b-r6wgcnljfx] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 24px;
}

.supplier-header h1[b-r6wgcnljfx] {
    font-weight: 600;
    font-size: 42px;
    leading-trim: NONE;
    text-transform: capitalize;
}

.supplier-header .tabs[b-r6wgcnljfx] {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.supplier-header .status-banner[b-r6wgcnljfx] {
    display: flex;
    align-items: center;
}

/* Status badge styles */
.status-green[b-r6wgcnljfx],
.status-grey[b-r6wgcnljfx],
.status-red[b-r6wgcnljfx],
.status-yellow[b-r6wgcnljfx] {
    display: inline-block;
    padding: 0.4rem 1.1rem;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.status-green[b-r6wgcnljfx] {
    background-color: color-mix(in srgb, var(--green) 15%, transparent);
    color: var(--green);
    border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
}

.status-grey[b-r6wgcnljfx] {
    background-color: color-mix(in srgb, var(--dark-grey) 15%, transparent);
    color: var(--dark-grey);
    border: 1px solid color-mix(in srgb, var(--dark-grey) 40%, transparent);
}

.status-red[b-r6wgcnljfx] {
    background-color: color-mix(in srgb, var(--pink) 15%, transparent);
    color: var(--pink);
    border: 1px solid color-mix(in srgb, var(--pink) 40%, transparent);
}

.status-yellow[b-r6wgcnljfx] {
    background-color: color-mix(in srgb, var(--yellow) 15%, transparent);
    color: var(--yellow);
    border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent);
}
/* /Components/FactoryForm.razor.rz.scp.css */
.prod-site_header[b-2qfl9ak3ln] {
    font-weight: 600;
    font-size: 30px;
    border-bottom: 1px solid var(--outline);
    margin-top: 34px;
}
/* ============================================
   ENTITY FORM - Clean & Consistent Styles
   Based on FactoryForm styles
   Cross-browser: Chrome, Edge, Safari
   ============================================ */
/* Base Reset */
.entity-form[b-2qfl9ak3ln] {
    padding: 20px 0 20px 0;
    color: var(--content-text);
    background: var(--content-bg);
    font-size: 15px;
}

.entity-form *[b-2qfl9ak3ln],
.entity-form *[b-2qfl9ak3ln]::before,
.entity-form *[b-2qfl9ak3ln]::after {
    box-sizing: border-box;
}

/* Global Input Styles - Blazor compatible (excludes checkbox/radio) */
.entity-form input[type="text"][b-2qfl9ak3ln],
.entity-form input[type="number"][b-2qfl9ak3ln],
.entity-form input[type="date"][b-2qfl9ak3ln],
.entity-form select[b-2qfl9ak3ln],
.entity-form textarea[b-2qfl9ak3ln],
.entity-form[b-2qfl9ak3ln]  input:not([type="checkbox"]):not([type="radio"]),
.entity-form[b-2qfl9ak3ln]  select,
.entity-form[b-2qfl9ak3ln]  textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--content-border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    color: var(--content-text);
    background: var(--content-input-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Number input specific styling */
.entity-form input[type="number"][b-2qfl9ak3ln] {
    width: 120px !important;
    max-width: 120px !important;
}

/* Checkbox and Radio base styles */
/*.filter-checkbox input[type="checkbox"]:checked + .checkbox-indicator, .filter-checkbox input[type="radio"]:checked + .checkbox-indicator{
    background: var(--pink);
    border-color: var(--pink);
}*/

[b-2qfl9ak3ln] input[type="checkbox"] {
    accent-color: var(--pink);
    border-color: var(--pink);
}

[b-2qfl9ak3ln] input[type="radio"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    max-width: 18px;
    flex-shrink: 0;
    accent-color: var(--pink);
    cursor: pointer;
}


.entity-form input:not([type="checkbox"]):not([type="radio"]):disabled[b-2qfl9ak3ln],
.entity-form select:disabled[b-2qfl9ak3ln],
.entity-form textarea:disabled[b-2qfl9ak3ln],
.entity-form[b-2qfl9ak3ln]  input:not([type="checkbox"]):not([type="radio"]):disabled,
.entity-form[b-2qfl9ak3ln]  select:disabled,
.entity-form[b-2qfl9ak3ln]  textarea:disabled {
    background: var(--content-input-disabled-bg);
    color: var(--content-input-disabled-text);
    border-color: var(--content-border);
    cursor: not-allowed;
}


/*date input*/
.dark .entity-form[b-2qfl9ak3ln]  input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1); /* turns dark icon white */
}

.entity-form[b-2qfl9ak3ln]  .valid.modified:not([type=checkbox]) {
    border-color: #28a745;
}

.entity-form[b-2qfl9ak3ln]  .invalid {
    border-color: #dc3545;
}

/* Global Label Styles */
.entity-form label[b-2qfl9ak3ln] {
    display: block;
    font-size: 14px;
    color: var(--content-text-secondary);
    margin-bottom: 10px;
}

/* Divider */
.divider[b-2qfl9ak3ln] {
    display: block;
    border: none;
    border-top: 1px solid var(--content-border);
    margin: 32px 0;
    padding: 0;
    height: 0;
}

/* ============================================
   HEADER
   ============================================ */
.form-header[b-2qfl9ak3ln] {
    margin-bottom: 32px;
}

.form-header .header-row[b-2qfl9ak3ln] {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 24px;
}

.meta-item[b-2qfl9ak3ln] {
    flex: 1 1 180px;
    min-width: 160px;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.meta-item label[b-2qfl9ak3ln] {
    font-size: 14px;
    font-weight: 400;
    color: var(--content-text);
    margin-bottom: 0;
    white-space: nowrap;
}

.meta-item input[b-2qfl9ak3ln] {
    min-width: 0;
    width: 100%;
}

/* ============================================
   SECTIONS
   ============================================ */
.section[b-2qfl9ak3ln] {
    margin-bottom: 40px;
    padding-top: 8px;
}

.section-title[b-2qfl9ak3ln] {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--content-text);
    margin-bottom: 14px;
}

.subtitle[b-2qfl9ak3ln] {
    font-size: 0.85rem;
    color: var(--content-text-secondary);
    font-weight: 500;
    margin-left: 8px;
}

.section-sub[b-2qfl9ak3ln] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--content-text);
    margin: 24px 0 18px;
}

/* ============================================
   FORM GRID LAYOUTS
   ============================================ */
.grid-4[b-2qfl9ak3ln], .grid-3[b-2qfl9ak3ln], .grid-5[b-2qfl9ak3ln] {
    display: grid;
    row-gap: 14px;
    column-gap: 50px;
    margin-bottom: 20px;
    align-items: start;
}

.grid-4[b-2qfl9ak3ln] {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.grid-5[b-2qfl9ak3ln] {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-3[b-2qfl9ak3ln] {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Form Field Styling */
.form-group[b-2qfl9ak3ln] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-sizing: border-box;
    padding-bottom: 12px;
}

.fg-label[b-2qfl9ak3ln] {
    font-size: 14px;
    font-weight: 400;
    color: var(--content-text);
    margin-bottom: 8px;
}

.fg-input[b-2qfl9ak3ln] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fg-input input[type="checkbox"][b-2qfl9ak3ln] {
    flex-shrink: 0;
    width: auto;
    max-width: none;
}

.fg-input span[b-2qfl9ak3ln] {
    margin: 0;
}

/* Inline checkbox style */
.checkbox-inline[b-2qfl9ak3ln] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.checkbox-inline label[b-2qfl9ak3ln] {
    margin-bottom: 0;
    cursor: pointer;
}

/* Checkbox Row */
.checkbox-row[b-2qfl9ak3ln] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.checkbox-row input[type="checkbox"][b-2qfl9ak3ln] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    max-width: 18px;
    flex-shrink: 0;
    accent-color:var(--pink);
}

.checkbox-row label[b-2qfl9ak3ln] {
    font-weight: 600;
    color: var(--pink);
    margin-bottom: 0;
    flex: 0 0 auto;
}

/* Radio Row */
.radio-row[b-2qfl9ak3ln] {
    display: flex;
    gap: 24px;
}

.radio-row label[b-2qfl9ak3ln] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    margin-bottom: 0;
    cursor: pointer;
}

.radio-row input[type="radio"][b-2qfl9ak3ln] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    max-width: 18px;
    flex-shrink: 0;
    accent-color: var(--pink);
}

/* ============================================
   COMPLIANCE ROW (Checkbox + Textarea Layout)
   ============================================ */
.compliance-row[b-2qfl9ak3ln] {
    display: grid;
    grid-template-columns: minmax(250px, 0.4fr) 1fr;
    gap: 24px;
    align-items: start;
    margin-bottom: 24px;
}

.compliance-row .compliance-check[b-2qfl9ak3ln] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.compliance-row .compliance-check .fg-label[b-2qfl9ak3ln] {
    margin-bottom: 0;
}

.compliance-row .compliance-check .fg-input[b-2qfl9ak3ln] {
    flex-direction: row;
    gap: 8px;
}

.compliance-row .compliance-details[b-2qfl9ak3ln] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100%;
}

.compliance-row .compliance-details .fg-label[b-2qfl9ak3ln] {
    margin-bottom: 0;
}

.compliance-row .compliance-details .fg-input[b-2qfl9ak3ln] {
    flex-grow: 1;
}

.compliance-row .compliance-details textarea[b-2qfl9ak3ln] {
    min-height: 80px;
    resize: vertical;
}

/* Full-width compliance row for single textareas */
.compliance-row > div:only-child[b-2qfl9ak3ln] {
    grid-column: 1 / -1;
}

.compliance-row > div:only-child .fg-label[b-2qfl9ak3ln] {
    margin-bottom: 0;
}

.compliance-row > div:only-child .fg-input[b-2qfl9ak3ln] {
    flex-grow: 1;
}

.compliance-row > div:only-child textarea[b-2qfl9ak3ln] {
    min-height: 80px;
    resize: vertical;
}

/* ============================================
   KEY REPRESENTATIVES TABLE
   ============================================ */
.keyrepresentatives[b-2qfl9ak3ln] {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 32px;
    -webkit-overflow-scrolling: touch;
}

.keyrepresentatives-header[b-2qfl9ak3ln],
.keyrepresentatives-row[b-2qfl9ak3ln] {
    display: grid;
    grid-template-columns: 220px repeat(5, 1fr);
    gap: 24px;
    align-items: center;
    padding: 16px 0;
    min-width: 0;
}

.keyrepresentatives-row > div[b-2qfl9ak3ln] {
    min-width: 0;
}

.keyrepresentatives-header[b-2qfl9ak3ln] {
    font-size: 14px;
    font-weight: 600;
    color: var(--content-text-secondary);
    text-transform: uppercase;
    padding-bottom: 14px;
    margin-bottom: 8px;
}

.keyrepresentatives-header > div[b-2qfl9ak3ln] {
    padding: 6px 8px;
}


.keyrepresentatives-row > div:first-child p[b-2qfl9ak3ln] {
    margin: 0;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--content-text);
}

/* ============================================
   CHECKBOX GRID (Column Layout)
   ============================================ */
.checkbox-grid[b-2qfl9ak3ln] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 28px;
    margin-bottom: 28px;
    margin-top: 20px;
}

.checkbox-grid div[b-2qfl9ak3ln] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    cursor: pointer;
}

.checkbox-grid label[b-2qfl9ak3ln] {
    margin-bottom: 0;
    cursor: pointer;
    flex: 1;
    font-size: 14px;
}

.checkbox-grid input[type="checkbox"][b-2qfl9ak3ln] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    max-width: 18px;
    flex-shrink: 0;
    border: 2px solid var(--content-border);
    border-radius: 4px;
    background: var(--content-input-bg);
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s, background 0.2s;
}

.checkbox-grid input[type="checkbox"]:checked[b-2qfl9ak3ln] {
    background: var(--pink);
    border-color: var(--pink);
}

.checkbox-grid input[type="checkbox"]:checked[b-2qfl9ak3ln]::before {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.checkbox-grid input[type="checkbox"]:focus[b-2qfl9ak3ln] {
    outline: none;
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(214, 77, 125, 0.1);
}

.caps-title[b-2qfl9ak3ln] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--content-text);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--content-border);
}

/* ============================================
   CHECKBOX LIST (Column Layout)
   ============================================ */
.checkbox-list[b-2qfl9ak3ln] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px 28px;
    margin-bottom: 28px;
}

.checkbox-list label[b-2qfl9ak3ln] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
    margin-bottom: 0;
    cursor: pointer;
}

/* ============================================
   MARKET CHECKBOXES
   ============================================ */
/* ============================================
   DATA TABLES (Key Sales, Key Products)
   ============================================ */
.group-row[b-2qfl9ak3ln] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 40px;
    margin-bottom: 24px;
}

.keysales[b-2qfl9ak3ln],
.keyproducts[b-2qfl9ak3ln] {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 32px;
}

.keysales table[b-2qfl9ak3ln],
.keyproducts table[b-2qfl9ak3ln] {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

.keysales thead th[b-2qfl9ak3ln],
.keyproducts thead th[b-2qfl9ak3ln] {
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: var(--content-text-secondary);
    text-transform: uppercase;
    padding: 16px 14px;
    white-space: nowrap;
}

.keysales tbody td[b-2qfl9ak3ln],
.keyproducts tbody td[b-2qfl9ak3ln] {
    padding: 14px;
    min-width: 100px;
}

.keysales tbody td input[b-2qfl9ak3ln],
.keyproducts tbody td input[b-2qfl9ak3ln],
.keysales tbody td[b-2qfl9ak3ln]  input,
.keyproducts tbody td[b-2qfl9ak3ln]  input {
    width: 100%;
    min-width: 80px;
    box-sizing: border-box;
}

.customer-refs td[b-2qfl9ak3ln]{
    padding: 8px 16px 8px 0;
}

/* ============================================
   INFO PAIR (Policy/Catalog Questions)
   ============================================ */
.info-pair[b-2qfl9ak3ln] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px;
}

.info-row[b-2qfl9ak3ln] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: start;
    min-width: 0;
}

.info-row.half-label[b-2qfl9ak3ln] {
    grid-template-columns: 1fr 1fr;
}

.info-label[b-2qfl9ak3ln] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--content-text-secondary);
}

.info-input[b-2qfl9ak3ln] {
    width: 100%;
}

/* ============================================
   EQUIPMENT TABLES
   ============================================ */
.equip-table[b-2qfl9ak3ln],
.lab-table[b-2qfl9ak3ln] {
    margin-bottom: 32px;
}

.equip-header[b-2qfl9ak3ln],
.lab-header[b-2qfl9ak3ln],
.equip-row[b-2qfl9ak3ln],
.lab-row[b-2qfl9ak3ln] {
    display: grid;
    grid-template-columns: 1fr 1fr 140px;
    gap: 24px;
    align-items: center;
    margin-bottom: 18px;
    min-width: 0;
}

.equip-header[b-2qfl9ak3ln],
.lab-header[b-2qfl9ak3ln] {
    font-size: 14px;
    font-weight: 600;
    color: var(--content-text-secondary);
    text-transform: uppercase;
    padding-bottom: 8px;
}

/* ============================================
   BUILDINGS TABLE
   ============================================ */
.build-table[b-2qfl9ak3ln] {
    margin-bottom: 32px;
    margin-top: 8px;
    border: 1px solid var(--content-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--content-bg);
}

.build-header[b-2qfl9ak3ln] {
    display: grid;
    grid-template-columns: 1.5fr 1fr 2fr 0.8fr;
    gap: 16px;
    border-bottom: 1px solid var(--content-border);
    padding: 12px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--content-text-secondary);
    text-transform: uppercase;
}

    .build-header > div[b-2qfl9ak3ln] {
        font-weight: 600;
        color: var(--content-text-secondary);
        font-size: 14px;
    }

.build-row[b-2qfl9ak3ln] {
    display: grid;
    grid-template-columns: 1.5fr 1fr 2fr 0.8fr;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--content-border);
    min-width: 0;
}

.build-row:last-child[b-2qfl9ak3ln] {
    border-bottom: none;
}

.build-row:hover[b-2qfl9ak3ln] {
    background: var(--content-surface-hover);
}

.build-row > div[b-2qfl9ak3ln] {
    min-width: 0;
}

.build-row input[type="text"][b-2qfl9ak3ln] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--content-border);
    border-radius: 4px;
    font-size: 0.9rem;
}

.build-row input[type="checkbox"][b-2qfl9ak3ln] {
    width: 18px;
    height: 18px;
    accent-color: var(--pink);
}

/* ============================================
   AUDIT GRIDS
   ============================================ */
.audit-grid[b-2qfl9ak3ln] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-bottom: 32px;
}

.audit-grid label[b-2qfl9ak3ln] {
    font-weight: 600;
    color: var(--content-text);
}

.audit-grid input[type="text"][b-2qfl9ak3ln],
.audit-grid input[type="date"][b-2qfl9ak3ln] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--content-border);
    border-radius: 4px;
    font-size: 14px;
}

.audit-grid input[disabled][b-2qfl9ak3ln] {
    background-color: var(--content-input-disabled-bg);
    color: var(--content-input-disabled-text);
    cursor: not-allowed;
}

.audit-item[b-2qfl9ak3ln] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--content-border);
    border-radius: 8px;
    background: var(--content-surface);
}

.audit-item .form-group[b-2qfl9ak3ln] {
    margin-bottom: 0;
}

.audit-item .fg-input input[type="date"][b-2qfl9ak3ln] {
    width: 100% !important;
    max-width: 100% !important;
}

/* ============================================
   NOTES TEXTAREA
   ============================================ */


.notes-section label[b-2qfl9ak3ln] {
    font-size: 14px;
    color: var(--content-text);
    margin-bottom: 12px;
    display: block;
}

.notes-section textarea[b-2qfl9ak3ln],
.notes-section[b-2qfl9ak3ln]  textarea {
    width: 100%;
    min-height: 160px;
    padding: 9px 11px;
    resize: vertical;
    line-height: 1.4;
    border: 1px solid var(--content-border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    color: var(--content-text);
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.notes-section[b-2qfl9ak3ln]  textarea::placeholder{
    color: var(--content-text);
}

/* ============================================
   FOOTER & BUTTONS
   ============================================ */
.form-footer[b-2qfl9ak3ln] {
    margin-top: 32px;
    min-height: 150px;
}

.form-footer.left-align[b-2qfl9ak3ln] {
    display: flex;
    justify-content: flex-start;
}

.form-footer.right-align[b-2qfl9ak3ln] {
    display: flex;
    justify-content: flex-end;
}

.form-footer.sticky[b-2qfl9ak3ln]{
    position: sticky;
    bottom: 0;
    width: 100%;
    left: 0;
    background-color: var(--content-bg);
    border-top: 1px solid var(--black);
    padding-top: 0;
    align-items: center;
    min-height: 130px;
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 20px;
}

.save-button[b-2qfl9ak3ln] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 50px;
    background: var(--black);
    color: var(--white);
    border: var(--black) 1px solid;
    cursor: pointer;
    transition: background 0.2s;
    font-weight: 600;
    font-size: 14px;
    height: fit-content;
}

.save-button:hover[b-2qfl9ak3ln] {
    background: var(--white);
    color: var(--black);
}

.save-button span[b-2qfl9ak3ln] {
    display: inline-block;
    filter: invert(1) brightness(1.2) saturate(0);
    -webkit-filter: invert(1) brightness(1.2) saturate(0);
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    flex-shrink: 0;
    margin-right: 0;
}

.save-button:hover span[b-2qfl9ak3ln] {
    filter: invert(1) brightness(0) saturate(0);
}

/* ============================================
   ACTION AREA (Export/Import)
   ============================================ */
.action-area-wrapper[b-2qfl9ak3ln] {
    margin: 24px 0;
    padding: 20px;
    background: var(--content-surface);
    border: 2px dashed var(--content-border);
    border-radius: 10px;
    text-align: center;
}

.dark .action-area-wrapper[b-2qfl9ak3ln] {
    background: #393939;
}

.action-text[b-2qfl9ak3ln] {
    color: var(--content-text);
    font-size: 16px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.action-buttons[b-2qfl9ak3ln] {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.std-btn[b-2qfl9ak3ln] {
    min-width: 236px;
}



.audits-button[b-2qfl9ak3ln] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 22px;
    background: transparent;
    color: var(--black);
    border: var(--black) 1px solid;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    margin-bottom: 32px;
    margin-top: 8px;
    font-weight: 600;
    font-size: 14px;
}

.dark .audits-button[b-2qfl9ak3ln] {
    background: white;
}

.audits-button:hover[b-2qfl9ak3ln] {
    background: var(--black);
    color: var(--white);
}


/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */
@media (max-width: 900px) {
    .keyrepresentatives-header[b-2qfl9ak3ln],
    .keyrepresentatives-row[b-2qfl9ak3ln] {
        grid-template-columns: 160px repeat(5, 1fr);
    }
    
    .info-row[b-2qfl9ak3ln],
    .info-row.half-label[b-2qfl9ak3ln] {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .prod-row[b-2qfl9ak3ln] {
        grid-template-columns: 1fr 100px;
    }
    
    .group-row[b-2qfl9ak3ln] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .form-header .header-row[b-2qfl9ak3ln] {
        grid-template-columns: 1fr;
    }
    
    .grid-4[b-2qfl9ak3ln] {
        grid-template-columns: 1fr;
    }
    
    .grid-5[b-2qfl9ak3ln] {
        grid-template-columns: 1fr;
    }
    
    .keyrepresentatives-header[b-2qfl9ak3ln] {
        display: none;
    }
    
    .keyrepresentatives-row[b-2qfl9ak3ln] {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px 0;
    }
    
    .keyrepresentatives-row > div:first-child[b-2qfl9ak3ln] {
        margin-bottom: 8px;
    }
    
    .caps-row[b-2qfl9ak3ln] {
        flex-direction: column;
    }
    
    .caps-list[b-2qfl9ak3ln] {
        grid-template-columns: 1fr;
    }
    
    .market-row[b-2qfl9ak3ln] {
        flex-direction: column;
        gap: 12px;
    }
    
    .audit-grid[b-2qfl9ak3ln] {
        grid-template-columns: 1fr;
    }
    
    .audit-item[b-2qfl9ak3ln] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .equip-header[b-2qfl9ak3ln],
    .lab-header[b-2qfl9ak3ln] {
        display: none;
    }
    
    .equip-row[b-2qfl9ak3ln],
    .lab-row[b-2qfl9ak3ln] {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px 0;
        border-bottom: 1px solid var(--content-border);
    }
    
    .build-header[b-2qfl9ak3ln] {
        display: none;
    }
    
    .build-row[b-2qfl9ak3ln] {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px 0;
        border-bottom: 1px solid var(--content-border);
    }
    
    .keysales thead[b-2qfl9ak3ln],
    .keyproducts thead[b-2qfl9ak3ln] {
        display: none;
    }
    
    .keysales tbody tr[b-2qfl9ak3ln],
    .keyproducts tbody tr[b-2qfl9ak3ln] {
        display: block;
        padding: 12px 0;
        border-bottom: 1px solid var(--content-border);
    }
    
    .keysales tbody td[b-2qfl9ak3ln],
    .keyproducts tbody td[b-2qfl9ak3ln] {
        display: block;
        padding: 6px 0;
        border: none;
    }
    
    .action-buttons[b-2qfl9ak3ln] {
        flex-direction: column;
        align-items: center;
    }
}

/* Document Link Styles */
.document-link[b-2qfl9ak3ln] {
    color: #d946ef;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s;
}

.document-link:hover[b-2qfl9ak3ln] {
    color: #c026d3;
}
/* /Components/FactoryViewer.razor.rz.scp.css */
  /* --- Main Section Styling --- */

        .container[b-xw37ycwo1a] {
            padding: 40px 0 50px 0;
            display: grid;
            column-gap: 120px;
            grid-template-columns: repeat(3, 1fr);
            row-gap: 70px;
        }

        .info-section[b-xw37ycwo1a] {
            break-inside: avoid;
        }
        
        .info-section:last-child[b-xw37ycwo1a] {
            margin-bottom: 0;
        }


        /* Sub-headers (like CEO, Domestic market) */
        .sub-header[b-xw37ycwo1a] {
            font-size: 16px;
            font-weight: 800;
            color: var(--content-text);
            margin-top: 25px;
            margin-bottom: 10px;
            text-transform: capitalize;
        }

        /* Standard Row: Label Left, Value Right */
        .info-row[b-xw37ycwo1a] {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            padding: 5px 0;
            gap: 30px;
        }

        /* Label Styling */
        .info-row label[b-xw37ycwo1a], 
        .info-row .label[b-xw37ycwo1a] {
            font-weight: 600;
            color: var(--content-text);
            font-size: 14px;
            margin-right: 20px;
            flex-shrink: 0;
            min-width: fit-content;
            /*opacity: 0.7;*/
        }

        /* Value Styling */
        .info-row .value[b-xw37ycwo1a] {
            font-weight: 400;
            color: var(--content-text);
            font-size: 14px;
            text-align: right;
            word-break: break-word;
        }

        /* Green Text modifier for "Yes" values */
        .value.success[b-xw37ycwo1a] {
            color: #4cd964; /* Adjust green to match screenshot */
            font-weight: 500;
        }

        /* --- Split Rows (Two Columns) for Representatives --- */
        .split-row[b-xw37ycwo1a] {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            gap: 40px;
        }

        .split-col[b-xw37ycwo1a] {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .split-col:has(> label)[b-xw37ycwo1a] {
            flex-direction: row;
            justify-content: space-between;
            align-items: baseline;
        }
        
        .split-col:has(> .sub-header)[b-xw37ycwo1a] {
            flex-direction: column;
            justify-content: flex-start;
        }
        
        .split-col label[b-xw37ycwo1a] {
            font-weight: 400;
            color: var(--content-text-secondary);
            font-size: 13px;
            opacity: 0.7;
        }
        
        .split-col .value[b-xw37ycwo1a] {
            font-weight: 600;
            color: var(--content-text);
            font-size: 14px;
        }
        
        /* Notes Section */
        .notes-content[b-xw37ycwo1a] {
            font-size: 14px;
            line-height: 1.6;
            color: var(--content-text);
            text-align: justify;
            white-space: pre-wrap;
        }

        .notes-section[b-xw37ycwo1a] {
            padding-bottom: 40px;
        }

        /* Mobile Responsiveness */
        @media (max-width: 600px) {
            .info-section h2[b-xw37ycwo1a] { font-size: 24px; }
            .split-row[b-xw37ycwo1a] { flex-direction: column; gap: 0; }
            .split-col[b-xw37ycwo1a] { padding: 4px 0; }
            .audit-table th[b-xw37ycwo1a],
            .audit-table td[b-xw37ycwo1a] {
                padding: 6px 8px;
                font-size: 12px;
            }
        }

    /* Tablet: One-Column Layout */
    /* @media (min-width: 768px) {
                .container {
                    grid-template-columns: 1fr;
                    row-gap: 40px;
                }
            }*/


        /* Desktop med: Two-Column Layout */
        @media (max-width: 1560px) {
            .container[b-xw37ycwo1a] {
                grid-template-columns: repeat(2, 1fr);
                row-gap: 60px;
            }
        }

        @media (max-width: 1280px) {
            .container[b-xw37ycwo1a] {
                grid-template-columns: 1fr;
                row-gap: 40px;
            }
        }

        /* Audit Tables */
        .audit-table[b-xw37ycwo1a] {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }

        .audit-table th[b-xw37ycwo1a],
        .audit-table td[b-xw37ycwo1a] {
            padding: 8px 12px;
            text-align: left;
            border-bottom: 1px solid var(--content-border);
            font-size: 14px;
        }

        .audit-table th[b-xw37ycwo1a] {
            font-weight: 800;
            color: var(--content-text);
        }

        .audit-table td[b-xw37ycwo1a] {
            font-weight: 400;
            color: var(--content-text);
        }

        /* Key Sales & Key Products Tables */
        .key-sales-table[b-xw37ycwo1a],
        .key-products-table[b-xw37ycwo1a] {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }

        .key-sales-table th[b-xw37ycwo1a],
        .key-sales-table td[b-xw37ycwo1a],
        .key-products-table th[b-xw37ycwo1a],
        .key-products-table td[b-xw37ycwo1a] {
            padding: 8px 12px;
            text-align: left;
            border-bottom: 1px solid var(--content-border);
            font-size: 14px;
        }

        .key-sales-table th[b-xw37ycwo1a],
        .key-products-table th[b-xw37ycwo1a] {
            font-weight: 800;
            color: var(--content-text);
        }

        .key-sales-table td[b-xw37ycwo1a],
        .key-products-table td[b-xw37ycwo1a] {
            font-weight: 400;
            color: var(--content-text);
        }

        .key-sales-table td:nth-child(2)[b-xw37ycwo1a],
        .key-sales-table td:nth-child(3)[b-xw37ycwo1a] {
            text-align: right;
        }

        .key-sales-table th:nth-child(2)[b-xw37ycwo1a],
        .key-sales-table th:nth-child(3)[b-xw37ycwo1a] {
            text-align: right;
        }


.scroll-up-btn[b-xw37ycwo1a] {
    position: fixed;
    bottom: 60px;
    right: 40px;
    display: flex;
    width: 54px;
    height: 54px;
    background-color: var(--black);
    border: var(--black) 1px solid;
    color: var(--white);
    justify-content: center;
    align-items: center;
    overflow: hidden;
    -webkit-transition: all .3s linear;
    -ms-transition: all .3s linear;
    transition: all .3s linear;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    z-index: 10;
}

    .scroll-up-btn.active[b-xw37ycwo1a] {
        opacity: 1;
        pointer-events: auto;
    }

    .scroll-up-btn:hover[b-xw37ycwo1a] {
        color: var(--black);
        background-color: var(--white);
    }

        /* Document Link Styles */
.document-link[b-xw37ycwo1a] {
    color: #d946ef;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s;
}

.document-link:hover[b-xw37ycwo1a] {
    color: #c026d3;
}
/* /Components/InspirationBrowser.razor.rz.scp.css */

.search-and-filters[b-wkcq0qmp6z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.left-search[b-wkcq0qmp6z] {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1 1 auto;
    min-width: 320px;
    max-width: calc(50% - 8px);
    background: var(--light-grey);
    height: 30px;
}


.search-box[b-wkcq0qmp6z] {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 0;
    height: 100%;
}

.search-box input[b-wkcq0qmp6z] {
    border: none;
    outline: none;
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    color: var(--content-text);
    padding: 0 32px;
}


.right-search[b-wkcq0qmp6z] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-select[b-wkcq0qmp6z] {
    padding: 0 13px 0 17px;
    border: none;
    background-color: var(--black);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 14px;
    color: var(--white);
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    height: 30px;
    min-width: 160px;
    text-transform: capitalize;
}

    .filter-select:hover[b-wkcq0qmp6z] {
        background-color: #FEBAFF;
        color: var(--black);
    }


.arrow-up[b-wkcq0qmp6z]::before,
.arrow-down[b-wkcq0qmp6z]::before {
    display: inline-block;
    line-height: 1;
    color: var(--white);
    font-weight: 800;
    transform: translateY(0px);
    content: "";
}

.filter-select:hover .arrow-up[b-wkcq0qmp6z]::before,
.filter-select:hover .arrow-down[b-wkcq0qmp6z]::before {
    color: var(--black);
}

.arrow-up[b-wkcq0qmp6z]::before {
    content: "↑";
}

.arrow-down[b-wkcq0qmp6z]::before {
    content: "↓";
}

.inspiration-grid[b-wkcq0qmp6z] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 40px;
    margin: 40px 0;
}

.grid-item[b-wkcq0qmp6z] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 410px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    opacity: 0;
    transform: translateY(12px);
    animation: fadeUp-b-wkcq0qmp6z 500ms ease forwards;
}

@keyframes fadeUp-b-wkcq0qmp6z {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.img-cont[b-wkcq0qmp6z] {
    width: 100%;
    height: 315px;
    overflow: hidden;
    position: relative;
}

.overlay[b-wkcq0qmp6z] {
    position: absolute;
    top: 0;
    opacity: 0;
    height: 100%;
    width: 100%;
    background: #FDB9FFE5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: opacity .5s ease;
}

.grid-item:hover .overlay[b-wkcq0qmp6z]{
    opacity: 1;
}

.overlay-title[b-wkcq0qmp6z] {
    font-weight: 600;
    font-size: 30px;
    color: var(--outline);
}

.grid-item img[b-wkcq0qmp6z] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.card-content[b-wkcq0qmp6z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.coming-soon[b-wkcq0qmp6z] {
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--black);
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 600;
    padding: 16px 32px;
    text-transform: lowercase;
    letter-spacing: 0.5px;
    z-index: 2;
}


.title h3[b-wkcq0qmp6z] {
    font-weight: 600;
    font-size: 42px;
    color: var(--outline);
    text-decoration: none;
    padding: 0 21px;
    text-align: center;
}



.subtitle[b-wkcq0qmp6z] {
    font-weight: 600;
    font-size: 24px;
}

@media (max-width: 1024px) {

    .inspiration-grid[b-wkcq0qmp6z] {
        grid-template-columns: repeat(2, 1fr);
    }
    .filter-select[b-wkcq0qmp6z]{
        min-width: 120px;
    }
}


@media (max-width: 768px) {
    .inspiration-grid[b-wkcq0qmp6z] {
        grid-template-columns: 1fr;
    }
    .search-and-filters[b-wkcq0qmp6z] {
        flex-direction: column;
        align-items: start;
    }
    .search-box input[b-wkcq0qmp6z] {
        width: 100%;
    }
}


@media (max-width: 576px) {
    .title h3[b-wkcq0qmp6z] {
        font-size: 32px;
        line-height: 1;
    }

    .inspiration-grid[b-wkcq0qmp6z] {
        row-gap: 24px;
        margin: 24px 0;
    }

    .grid-item[b-wkcq0qmp6z] {
        min-height: 200px;
    }

    .img-cont[b-wkcq0qmp6z] {
        height: 200px;
    }

    .search-and-filters[b-wkcq0qmp6z]{
        gap:10px;
    }

    .left-search[b-wkcq0qmp6z] {
        min-width: 250px;
    }
}
/* /Components/Layout/LoginLayout.razor.rz.scp.css */
.wrapper[b-iiwigc9nc5] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 100vh;
    box-sizing: border-box;
    overflow: hidden; /* Added to prevent main page scroll */
    background-image: url("img/login_gradient_background.png"); /* Added per design instructions */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

header[b-iiwigc9nc5] {
    width: 100%;
    position: relative;
    flex-shrink: 0;
}

.header-top[b-iiwigc9nc5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 100px;
}


.main-container[b-iiwigc9nc5] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Prevents scroll from main content overflow */
    box-sizing: border-box;
}

footer[b-iiwigc9nc5] {
    background-color: var(--black);
    color: var(--white);
    text-align: center;
    padding: 15px 0;
    font-size: 0.9em;
    flex-shrink: 0;
}



/* Error UI */
#blazor-error-ui[b-iiwigc9nc5] {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: #dc3545;
    color: white;
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

    #blazor-error-ui .reload[b-iiwigc9nc5] {
        color: white;
        text-decoration: underline;
        margin-left: 0.5rem;
    }

    #blazor-error-ui .dismiss[b-iiwigc9nc5] {
        cursor: pointer;
        margin-left: 0.5rem;
        font-size: 1.2rem;
    }



@media (max-width: 768px) {
    .header-top > img[b-iiwigc9nc5] {
        width: 150px;
    }
}

@media (max-width: 576px) {
    .header-top > img[b-iiwigc9nc5] {
        width: 120px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.wrapper[b-u4mgdebxv9] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--content-bg);
}
header[b-u4mgdebxv9] {
    width: 100%;
    position: relative;
    background: var(--gradient-light-pink-red); 
}

.header-top[b-u4mgdebxv9]{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 100px;
}


.profile-links[b-u4mgdebxv9] {
    font-size: 1.2rem;
    font-weight: 500;
    z-index: 11;
}

.header-pink-red[b-u4mgdebxv9] {
    z-index: 2;
    border-bottom: 4px solid var(--black);
    padding: 0 100px;
}


.nav-tabs[b-u4mgdebxv9] {
    display: flex;
    gap: 14px;
    z-index: 3;
    margin-bottom: 0;
}


[b-u4mgdebxv9] .tab {
    min-width: 177px;
    height: 36px;
    background: var(--white);
    color: var(--black);
    border: none;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    position: relative;
    text-decoration: none;
    padding: 0 32px;
}

    [b-u4mgdebxv9] .tab.active,
    [b-u4mgdebxv9] .tab.active:visited, [b-u4mgdebxv9] .tab:hover {
        background: var(--black);
        color: var(--white);
        box-shadow: none;
        z-index: 4;
    }


[b-u4mgdebxv9] .header-bottom {
    background: var(--content-bg);
    border-bottom: none; 
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 0 100px;
}


/* Header-bottom tabs (zone-tabs / zone-tab)  */
[b-u4mgdebxv9] .zone-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    z-index: 2;
    gap: 1.2rem;           
    padding: 22px 0;
    align-items: center;
    white-space: nowrap;
    padding-left: 0;
}

/* .tabs stays in the normal document flow */
[b-u4mgdebxv9] .tabs {
    display: flex;
    flex-direction: row;
    gap: 1.2rem;
    padding: 22px 0;
    flex-wrap: wrap;
    align-items: center;
    white-space: nowrap;
    padding-left: 0;
}


[b-u4mgdebxv9] .zone-tab, [b-u4mgdebxv9] .tab-button {
    min-width: 213px;
    height: 30px;
    background: transparent;
    color: var(--outline);
    border: var(--outline) 1px solid;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    margin-right: 0;
    margin-bottom: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0 18px;
    letter-spacing: 0.2px;
    transition: background-color 0.3s ease, color 0.3s ease;
}


    [b-u4mgdebxv9] .tab-button {
        min-width: 162px;
    }

        [b-u4mgdebxv9] .zone-tab.active,
        [b-u4mgdebxv9] .zone-tab.active:visited,
        [b-u4mgdebxv9] .tab-button.active,
        [b-u4mgdebxv9] .tab-button.active:visited {
            background: var(--black);
            color: var(--white);
            border-color: var(--black);
            z-index: 4;
            font-weight: 600;
        }


        /* Hover/focus: no animations — only change background + color to match active (letters white) */
        [b-u4mgdebxv9] .zone-tab:hover,
        [b-u4mgdebxv9] .zone-tab:focus,
        [b-u4mgdebxv9] .tab-button:hover,
        [b-u4mgdebxv9] .tab-button:focus {
            background: var(--black);
            color: var(--white);
            border-color: var(--black);
        }

    .main-container[b-u4mgdebxv9] {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .dark .main-container[b-u4mgdebxv9] {
        background-color: #353535;
    }


    .main-container.home-container[b-u4mgdebxv9] {
        background-image: url("img/home_background.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

.main-container.pim-container[b-u4mgdebxv9] {
    background-color: #FAFAFA;
}

    .dark .main-container.pim-container[b-u4mgdebxv9] {
        background-color: #353535;
    }

    .content-area[b-u4mgdebxv9] {
        flex-grow: 1;
        margin-left: 100px;
        margin-right: 100px;
        color: var(--outline);
    }

    .home-container .content-area[b-u4mgdebxv9] {
        background-color: transparent;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    footer[b-u4mgdebxv9] {
        background-color: var(--black);
        color: var(--white);
        padding: 15px 0;
        font-size: 0.9em;
    }

    .footer-content[b-u4mgdebxv9] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }





    /* Error UI */
    #blazor-error-ui[b-u4mgdebxv9] {
        display: none;
        position: fixed;
        bottom: 10px;
        right: 10px;
        background: #dc3545;
        color: white;
        padding: 1rem;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }

        #blazor-error-ui .reload[b-u4mgdebxv9] {
            color: white;
            text-decoration: underline;
            margin-left: 0.5rem;
        }

        #blazor-error-ui .dismiss[b-u4mgdebxv9] {
            cursor: pointer;
            margin-left: 0.5rem;
            font-size: 1.2rem;
        }

    @media (max-width: 1440px) {
        [b-u4mgdebxv9] .zone-tab, [b-u4mgdebxv9] .tab-button {
            min-width: 200px;
        }
    }

     @media (max-width: 1280px) {
        [b-u4mgdebxv9] .zone-tab, [b-u4mgdebxv9] .tab-button {
            min-width: 160px;
        }
    }


    @media (max-width: 1024px) {
        .header-top[b-u4mgdebxv9] {
            padding: 20px 50px;
        }

        .header-pink-red[b-u4mgdebxv9] {
            padding: 0 50px;
        }

        [b-u4mgdebxv9] .header-bottom {
            padding: 0 50px;
        }

        .content-area[b-u4mgdebxv9] {
            margin-left: 50px;
            margin-right: 50px;
        }

        [b-u4mgdebxv9] .tab {
            min-width: 100px;
            padding: 0 20px;
        }
    }

    @media (max-width: 768px) {
        .nav-tabs[b-u4mgdebxv9] {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .header-top > img[b-u4mgdebxv9] {
            width: 150px;
        }
    }

    @media (max-width: 576px) {
        .header-top > img[b-u4mgdebxv9] {
            width: 120px;
        }

    }
/* /Components/MobileTabletMessage.razor.rz.scp.css */
.mobile-message-container[b-jq5rp4zsr2], .tablet-message-container[b-jq5rp4zsr2] {
    position: fixed;
    height: 100%;
    width: 100%;
    background: #343434;
    z-index: 10;
    display: none;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 2.6rem;
}

    .mobile-message-container img[b-jq5rp4zsr2], .tablet-message-container img[b-jq5rp4zsr2], .mobile-message-container[b-jq5rp4zsr2]  a, .tablet-message-container[b-jq5rp4zsr2]  a {
        top: 5vh;
    }

    .mobile-message-container p[b-jq5rp4zsr2], .tablet-message-container p[b-jq5rp4zsr2] {
        max-width: calc(100vw - 10rem);
        color: white;
        font-weight: 500;
        text-align: center;
        top: 5vh;
    }




@media screen and (orientation: landscape) and (max-width: 768px){
    .mobile-message-container[b-jq5rp4zsr2] {
        display: flex;
    }
} 

@media screen and (orientation: portrait) and (max-width: 934px) and (min-height: 768px){
    .tablet-message-container[b-jq5rp4zsr2] {
        display: flex;
    }
}

@media screen and (orientation: portrait) and (max-width: 768px) and (max-height: 767px){
    .mobile-message-container[b-jq5rp4zsr2] {
        display: flex;
    }
}

/* /Components/Pages/Add.razor.rz.scp.css */

.form-header[b-p8czx4lygu]{
    margin-bottom:24px;
}
/* /Components/Pages/Administration.razor.rz.scp.css */
/* /Components/Pages/Entities.razor.rz.scp.css */

h1[b-us0ixn3rtx] {
    margin-top: 0;
    font-weight: 600;
    font-size: 42px;
}

.breadcrumb[b-us0ixn3rtx] {
    display: flex;
    gap: 0.2rem;
}
.breadcrumb a[b-us0ixn3rtx] {
    color: var(--content-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.breadcrumb span[b-us0ixn3rtx] {
    color: var(--pink);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.breadcrumb a:hover[b-us0ixn3rtx] {
    text-decoration: underline;
    color: var(--pink);
}
/* /Components/Pages/Factories.razor.rz.scp.css */
.breadcrumb[b-vjb0oi6wn1] {
    display: flex;
    gap: 0.2rem;
}

.breadcrumb a[b-vjb0oi6wn1]{
    color: var(--content-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.breadcrumb span[b-vjb0oi6wn1] {
    color: var(--pink);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.breadcrumb a:hover[b-vjb0oi6wn1] {
    text-decoration: underline;
    color: var(--pink);
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Main Content */
.home-title[b-vtod3odg9z] {
    text-align: center;
    margin: 2rem 0;
    color: var(--pink);
    font-size: 2.5rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

    .home-title i[b-vtod3odg9z] {
        margin-right: 0.5rem;
        color: var(--pink);
    }

.welcome-section[b-vtod3odg9z] {
    max-width: 1500px;
    padding:6rem 2rem 12rem 2rem;
    border-radius: 10px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.welcome-section > div[b-vtod3odg9z]{
    display: flex;
    flex-direction: column;
}

    .welcome-section h1[b-vtod3odg9z] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        font-size: 48px;
        font-weight: 600;
        vertical-align: middle;
        text-align: center;
        /*white-space: nowrap;*/
    }

    .welcome-section h1 .icon[b-vtod3odg9z] {
        display: block;
        width: 82px;
        height: 82px;
    }

        .welcome-section h1 .icon svg[b-vtod3odg9z] {
            width: 82px;
            height: 82px;
        }

    .welcome-section h3[b-vtod3odg9z] {
        font-weight: 600;
        font-size: 2.4rem;
        line-height: 3.4rem;
        text-align: center;
    }

    /*.welcome-section p {
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
    }

        .welcome-section p i {
            margin-right: 0.75rem;
            color: var(--pink);
        }*/

.highlight[b-vtod3odg9z] {
    color: var(--pink);
    font-weight: bold;
}


/* Responsive Design */
@media (max-width: 1400px) {
    .welcome-section h1[b-vtod3odg9z]{
        font-size: 60px;
    }
}

@media (max-width: 1280px) {
    .welcome-section h1[b-vtod3odg9z] {
        font-size: 48px;
    }
}

@media (max-width: 1024px) {
    .welcome-section h1[b-vtod3odg9z] {
        font-size: 34px;
    }

        .welcome-section h1 .icon[b-vtod3odg9z] {
            width: 60px;
            height: 60px;
        }

            .welcome-section h1 .icon svg[b-vtod3odg9z] {
                width: 60px;
                height: 60px;
            }
    .welcome-section h3[b-vtod3odg9z] {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .welcome-section h1[b-vtod3odg9z] {
        display: inline;
    }

        .welcome-section h1 .icon[b-vtod3odg9z] {
            display: none;
        }

            .welcome-section h1 .icon svg[b-vtod3odg9z] {
                display: none;
            }

}

@media (max-width: 576px) {
    .welcome-section[b-vtod3odg9z]{
        max-width: calc(100vw - 100px);
    }
}
/* /Components/Pages/Inspiration/Details.razor.rz.scp.css */
.page-header[b-bja1r9w810] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

    .page-header h1[b-bja1r9w810] {
        margin: 0;
        font-size: 2em;
        color: var(--content-text);
    }

    .page-header p[b-bja1r9w810] {
        margin: 5px 0 0;
        color: var(--content-text-secondary);
        font-size: 1em;
    }

.back-link[b-bja1r9w810] {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--outline);
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 10px;
    transition: opacity 0.2s ease;
}

    .back-link:hover[b-bja1r9w810] {
        opacity: 0.7;
    }

    .back-link i[b-bja1r9w810] {
        margin-right: 5px;
    }

.main-content[b-bja1r9w810] {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}


.main-image-section img.main-image[b-bja1r9w810] {
    width: 540px;
    height: auto;
}

.main-image-thumbnails[b-bja1r9w810] {
    display: flex;
    gap: 10px;
}

    .main-image-thumbnails img[b-bja1r9w810] {
        width: 80px;
        height: 80px;
        border-radius: 4px;
        cursor: pointer;
        border: 2px solid transparent;
        transition: border-color 0.3s ease;
    }

        .main-image-thumbnails img:hover[b-bja1r9w810] {
            border-color: var(--pink);
        }

@media (max-width: 1024px) {
        .main-image-section img.main-image[b-bja1r9w810] {
            width: 100%;
            height: auto;
            max-width: 540px;
        }
}

.text-content-section[b-bja1r9w810] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (max-width: 768px) {
    .text-content-section[b-bja1r9w810] {
        gap: 16px;
    }
}

    .text-content-section h1[b-bja1r9w810] {
        margin-top: 0;
        font-size: 2.5em;
        color: var(--content-text);
    }

    .text-content-section h4[b-bja1r9w810] {
        color: var(--ibgmain);
        margin: 0;
        font-weight: 600;
        font-size: 16px;
        vertical-align: middle;
    }

    /* Title row: title on left, actions (button) on right. Stacks on small screens */
    .title-row[b-bja1r9w810] {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 20px;
    }

    @media (max-width: 768px) {
        .title-actions[b-bja1r9w810] {
            gap: 16px;
        }
    }

    @media (max-width: 1440px) {
        .title-row[b-bja1r9w810] {
            flex-direction: column;
        }
    }

    .title-text[b-bja1r9w810] {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

        .title-text h1[b-bja1r9w810] {
            font-weight: 600;
            font-size: 42px;
            line-height: 52px;
            vertical-align: middle;
        }

    @media (max-width: 768px) {
        .title-text h1[b-bja1r9w810] {
            font-size: 28px;
            line-height: 1.5;
        }
    }

    .text-content-section p[b-bja1r9w810] {
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
    }

    .title-actions[b-bja1r9w810] {
        flex: 0 0 auto;
    }

    @media (max-width: 768px) {
        .title-row[b-bja1r9w810] {
            flex-direction: column;
            align-items: stretch;
        }

        .title-actions[b-bja1r9w810] {
            display: flex;
            justify-content: flex-start;
        }

        .webpackaging-link[b-bja1r9w810] {
            width: 100%;
            justify-content: center;
        }
    }

    .text-content-section p[b-bja1r9w810] {
        font-size: 1em;
        line-height: 1.6;
        color: var(--content-text);
    }


    /* Webpackaging external link styled as button with icon */
    .webpackaging-link[b-bja1r9w810] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: var(--webpackaging-blue); /* webpackaging brand blue */
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
        margin: 12px 0; /* vertical spacing */
    }

        .webpackaging-link .wp-icon[b-bja1r9w810] {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

            .webpackaging-link .wp-icon svg[b-bja1r9w810] {
                width: 16px;
                height: 16px;
                display: block;
            }

        .webpackaging-link:focus[b-bja1r9w810] {
            outline: none;
        }

        .webpackaging-link:focus-visible[b-bja1r9w810] {
            box-shadow: 0 0 0 3px rgba(65,167,202,0.18), 0 2px 6px rgba(0,0,0,0.12);
        }

        .webpackaging-link:hover[b-bja1r9w810],
        .webpackaging-link:focus[b-bja1r9w810] {
            transform: translateY(-3px);
            box-shadow: 0 6px 14px rgba(0,0,0,0.18);
            filter: brightness(1.03);
        }

        .webpackaging-link:active[b-bja1r9w810] {
            transform: translateY(-1px) scale(0.997);
        }


    .text-content-body[b-bja1r9w810] {
        display: flex;
        flex-direction: column;
        gap: 16px;
        font-size: 16px;
    }

        .text-content-body[b-bja1r9w810]  h2 {
            font-size: 32px
        }

        .text-content-body[b-bja1r9w810]  h3 {
            font-size: 20px
        }

        .text-content-body[b-bja1r9w810]  img {
            max-width: 90%;
        }


    .related-items-section[b-bja1r9w810] {
        margin: 80px 0;
        border-top: 1px solid var(--light-grey);
        padding-top: 30px;
    }

    .related-items-section h2[b-bja1r9w810] {
        color: var(--content-text);
        margin-bottom: 60px;
        font-weight: 600;
        font-size: 42px;
        line-height: 52px;
    }

    @media (max-width: 768px){
        .related-items-section[b-bja1r9w810] {
            margin: 40px 0;
        }

        .related-items-section h2[b-bja1r9w810] {
            font-size: 28px;
            line-height: 1.5;
            margin-bottom: 20px;
        }
    }


    .related-items-grid[b-bja1r9w810] {
        display: flex;
        gap: 54px;
        overflow-x: auto;
    }

    .related-item-card[b-bja1r9w810] {
        width: 390px;
        height: fit-content;
        text-align: center;
        text-decoration: none;
        color: var(--content-text);
        display: flex;
        transition: all .3s ease;
    }

        /* Hover / focus effects: lift card, stronger shadow, subtle bg tint */
        .related-item-card:hover[b-bja1r9w810],
        .related-item-card:focus-within[b-bja1r9w810] {
            transform: translateY(-1px);
            background-color: var(--content-surface-hover);
        }

    .dark .related-item-card:hover[b-bja1r9w810],
    .dark .related-item-card:focus-within[b-bja1r9w810] {
        background-color: var(--black);
    }

    .related-item-card img[b-bja1r9w810] {
        width: 140px;
        height: 140px;
        object-fit: cover;
    }

    .related-item-card .details[b-bja1r9w810] {
        padding: 20px;
        text-align: left;
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 250px;
    }

        .related-item-card .details h4[b-bja1r9w810] {
            margin: 0;
            font-weight: 600;
            font-size: 18px;
            color: var(--outline);
            word-break: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

    /* Ensure links inside the card inherit color and are not underlined */
    .related-item-card a[b-bja1r9w810] {
        text-decoration: none;
        color: inherit;
    }

    .related-item-card .details p[b-bja1r9w810] {
        font-size: 16px;
        color: var(--pink);
    }

    .related-item-card:active[b-bja1r9w810] {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    }


    @media (max-width: 1024px) {
        .main-content[b-bja1r9w810] {
            flex-direction: column-reverse;
        }
    }
/* /Components/Pages/Inspiration/External.razor.rz.scp.css */
.content-header[b-kw2yhb23uu] {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .content-header h1[b-kw2yhb23uu] {
        font-weight: 600;
        font-size: 42px;
        line-height: 1.2;
        color: var(--outline);
    }

    @media (max-width: 576px) {
        .content-header h1[b-kw2yhb23uu] {
            font-size: 32px;
        }
    }


    .content-header p[b-kw2yhb23uu] {
        color: var(--outline);
        font-weight: 500;
        font-size: 16px;
    }
/* /Components/Pages/Inspiration/Internal.razor.rz.scp.css */
.content-header[b-8g7mioah6m] {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .content-header h1[b-8g7mioah6m] {
        font-weight: 600;
        font-size: 42px;
        line-height: 1.2;
        color: var(--content-text);
    }

        @media (max-width: 576px) {
            .content-header h1[b-8g7mioah6m] {
                font-size: 32px;
            }
        }

    .content-header p[b-8g7mioah6m] {
        color: var(--content-text);
        font-weight: 500;
        font-size: 16px;
    }

.edition-details[b-8g7mioah6m] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
}

.details-header[b-8g7mioah6m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 0;
    flex-shrink: 0;
}

.back-button[b-8g7mioah6m] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--content-text);
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: opacity 0.2s ease;
}

.back-button[b-8g7mioah6m]::before {
    content: "←";
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    display: inline-block;
    color: var(--outline);
}

.back-button:hover[b-8g7mioah6m] {
    opacity: 0.7;
}

.std-btn[b-8g7mioah6m] {
    min-width: 147px;
}

    .std-btn span[b-8g7mioah6m] {
        width: 14px;
        height: 14px;
    }

.main-cover[b-8g7mioah6m] {
    flex: 1 1 auto;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--content-surface);
}

.main-cover iframe[b-8g7mioah6m] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border:none
}
/* /Components/Pages/Login.razor.rz.scp.css */
.login-section[b-6ohhigghqm] {
    /*background: linear-gradient(45deg, var(--red) 0%, var(--light-pink) 50%);*/
    /* Use 100% height to ensure it fits within its parent (.main-container) */
    min-height: 100%;
    height: calc(100vh - 196px);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: 123px;
    /* Prevents scroll due to padding/border */
}

h1[b-6ohhigghqm] {
    color: var(--black);
    /*text-transform:lowercase*/
}


.login-card[b-6ohhigghqm] {
    display: flex;
    flex-direction: row;
    background: var(--content-bg);
    width: 75vw;
    max-width: 1274px;
    height: 100%;
    max-height: 560px;
    overflow: hidden;
    box-sizing: border-box;
}

.login-content[b-6ohhigghqm] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 40px;
    flex: 1;
    min-width: 300px;
    height: 100%;
    box-sizing: border-box;
}

.login-image[b-6ohhigghqm] {
    background: var(--content-bg);
    width: 34.3%;
    min-width: 400px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: none;
    padding: 0;
    box-sizing: border-box;
}

    .login-image[b-6ohhigghqm]  img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        margin: 0;
        display: block;
    }

.login-card h1[b-6ohhigghqm] {
    font-size: 64px;
    margin-bottom: 32px;
    letter-spacing: 0.03em;
    color: var(--content-text);
    text-align: center;
}

.login-card p[b-6ohhigghqm] {
    color: var(--content-text-secondary);
    font-size: 1em;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
}

.sign-in-btn[b-6ohhigghqm] {
    background: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
    width: 237px;
    padding: 6px 0;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    text-align: center;
    display: inline-block;
    text-decoration: none;
}

    .sign-in-btn:hover[b-6ohhigghqm] {
        background: var(--white);
        color: var(--black);
    }

@media (max-width: 1280px) {
    .login-card h1[b-6ohhigghqm] {
        font-size: 48px;
    }
}

@media (max-width: 1024px) {
    .login-section[b-6ohhigghqm] {
        align-items: flex-start;
        padding-bottom: 20px;
    }

    .login-card[b-6ohhigghqm] {
        flex-direction: column;
        height: 100%;
        min-height: 0;
        max-height: 700px;
        margin: auto;
        width: 95vw;
        max-width: 520px;
        gap: 20px;
    }

    .login-card h1[b-6ohhigghqm]{
        margin-bottom: 0;
        font-size: 48px;
    }

    .login-content[b-6ohhigghqm]{
        gap: 40px;
    }

    .login-content[b-6ohhigghqm], .login-image[b-6ohhigghqm] {
        width: 100%;
        min-width: 0;
        height: auto;
        padding: 30px 20px;
    }
    
    .login-image[b-6ohhigghqm] {
        margin-top: 0;
        height: 100%;
        max-width: 400px;
        margin: auto;
        padding: 0 20px 30px 20px;
    }

}

@media (max-height: 800px) and (min-width: 1024px) {
    .login-section[b-6ohhigghqm] {
        padding-bottom: 60px;
    }
}
/* /Components/Pages/PIM.razor.rz.scp.css */
.main-content[b-11u9tpfrmk] {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border-radius: 1475px;
}
    .dark .main-content[b-11u9tpfrmk] {
        background: var(--content-bg);
    }

.content-card[b-11u9tpfrmk] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
    gap: 30px;
}

.welcome-title[b-11u9tpfrmk] {
    font-size: 60px;
    font-weight: 600;
    color: var(--content-text);
    text-align: center;
    line-height: 1.1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25em;
}

.welcome-title .ibg-logo[b-11u9tpfrmk] {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0.13em;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    overflow: hidden;
}

/* Ensure the SVG image inside the white circle displays with black letters */
.welcome-title .ibg-logo img[b-11u9tpfrmk] {
    width: 90px;
    height: 90px;
    display: block;
    object-fit: contain;
}

.welcome-subtitle[b-11u9tpfrmk] {
    color: var(--content-text);
    font-weight: 400;
    text-align: center;
    margin-top: 0;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    font-size: 24px;
}

/* Layout: two rows. First row has 4 items, second row has 5 items. */
.category-grid[b-11u9tpfrmk] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 36px; 
    margin-top: 10px;
    margin-bottom: 30px;
    width: auto;
    max-width: 1100px;
}

.category-item[b-11u9tpfrmk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 190px;
    height: 190px;
    background-color: #FEBAFF;
    border-radius: 50%;
    transition: transform 0.3s ease;
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    animation: circleIn-b-11u9tpfrmk 500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--i) * 80ms);
}


@keyframes circleIn-b-11u9tpfrmk {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.category-item a[b-11u9tpfrmk] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}

.category-item a img[b-11u9tpfrmk] {
    position: absolute;
    width: 190px;
    height: auto;
    object-fit: cover;
    transition: transform .3s ease;
}


.category-item:hover a img[b-11u9tpfrmk]{
    transform: scale(1.05) !important;
}

    .category-item .category-label[b-11u9tpfrmk] {
        position: relative;
        z-index: 2;
        font-weight: 600;
        color: var(--black);
        text-align: center;
        font-size: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        justify-content: center;
        text-transform: capitalize;
    }

/* Responsive adjustments */
@media (max-width: 1200px) {

    .category-item[b-11u9tpfrmk] {
        width: 160px;
        height: 160px;
    }

    .category-item a img[b-11u9tpfrmk] {
        width: 160px;
    }

    .category-item .category-label[b-11u9tpfrmk] {
        font-size: 14px;
    }

    .welcome-title .ibg-logo[b-11u9tpfrmk] {
        width: 60px;
        height: 60px;
    }

    .welcome-title .ibg-logo img[b-11u9tpfrmk] {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 1024px) {


    .category-item[b-11u9tpfrmk] {
        width: 140px;
        height: 140px;
    }

    .category-item a img[b-11u9tpfrmk] {
        width: 140px;
    }

    .welcome-title[b-11u9tpfrmk] {
        font-size: 30px;
    }

    .welcome-title .ibg-logo[b-11u9tpfrmk] {
        width: 40px;
        height: 40px;
    }

    .welcome-title .ibg-logo img[b-11u9tpfrmk] {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 600px) {
    .content-card[b-11u9tpfrmk] {
        padding-top: 32px;
        gap: 16px;
    }

    .category-grid[b-11u9tpfrmk] {
        gap: 18px;
    }

    .category-item[b-11u9tpfrmk] {
        width: 100px;
        height: 100px;
    }

    .category-item a img[b-11u9tpfrmk] {
        width: 100px;
    }

    .category-item .category-label[b-11u9tpfrmk] {
        font-size: 0.95rem;
    }

    .welcome-title .ibg-logo[b-11u9tpfrmk] {
        width: 40px;
        height: 40px;
    }

    .welcome-subtitle[b-11u9tpfrmk] {
        font-size: 16px;
        margin-bottom: 0;s
    }
}
/* /Components/Pages/PIMSearch.razor.rz.scp.css */

.pim-grid-container[b-7946olhlqr] {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    height: 100%;
}
.filter-panel[b-7946olhlqr] {
    position: relative;
    left: -100px;
    width: 210px;
    box-sizing: border-box;
    height: 100%;
    background-color: white;
}

@media (max-width: 1024px) {
    .filter-panel[b-7946olhlqr] {
        left: -50px;
    }
}

.dark .filter-panel[b-7946olhlqr] {
    background-color: #393939;
}

.filter__icon[b-7946olhlqr]{
    display: none;
}

.popup-link__mixmatch2d[b-7946olhlqr] {
    display: none !important;
}

.results-panel[b-7946olhlqr] {
    width: calc(100% - 110px);
    margin-left: -60px;
    margin-bottom: 20px;
    overflow: hidden;
}

@media (max-width: 1024px) {
    .results-panel[b-7946olhlqr] {
        margin-left: 0;
    }
}

.results-panel__title[b-7946olhlqr] {
    color: var(--black);
    font-weight: 600;
    font-size: 42px;
    line-height: 1;
    margin-top: 24px;
}
        .dark .results-panel__title[b-7946olhlqr] {
            color: #E5E5E5;
        }

.pp-search__subtitle[b-7946olhlqr] {
    font-weight: 600;
    font-size: 24px;
}

.pp-search__content[b-7946olhlqr] {
    flex-grow: 1;
}

    .pp-search__content input[b-7946olhlqr] {
        border: none;
        height: 30px;
        min-width: 38%;
        padding: 0 10px;
        font-size: 14px;
        font-weight: 600;
        background-color: var(--light-grey);
        color: var(--black);
    }

        .pp-search__content input[b-7946olhlqr]::placeholder {
            font-weight: 400;
            font-size: 14px;
            color: var(--dark-grey);
        }

.popup-link__mixmatch3d[b-7946olhlqr] {
    display: none !important;
}
.dropbtn[b-7946olhlqr] {
    cursor: pointer;
    width: 100%;
    display: flex;
    font-weight: 600;
    color: var(--pink);
    padding: 18px 18px 5px 15px;
    border-left: 3px solid var(--pink);
}

    .dropbtn:hover[b-7946olhlqr], .dropbtn.show:hover[b-7946olhlqr] {
        color: var(--pink);
    }

    .dropbtn.show[b-7946olhlqr] {
        border-left: none;
        padding: 18px;
        color: var(--content-text);
    }

    .active .dropbtn[b-7946olhlqr]{
        color: var(--pink);
    }

    .dropbtn.show[b-7946olhlqr]::after {
        border-left: 4.1px solid transparent;
        border-right: 4.1px solid transparent;
        border-top: 5px solid var(--black);
    }

    .dropbtn[b-7946olhlqr]::after, .active .dropbtn[b-7946olhlqr]::after, .active .dropbtn.show[b-7946olhlqr]::after, .dropbtn:hover[b-7946olhlqr]::after {
        content: "";
        position: absolute;
        top: 27px;
        right: 18px;
        width: 0;
        height: 0;
        border-left: 4.1px solid transparent;
        border-right: 4.1px solid transparent;
        border-top: 5px solid var(--pink);
    }


    .dark .dropbtn.show[b-7946olhlqr]::after {
        border-top: 5px solid var(--white);
    }

.dropdown[b-7946olhlqr] {
    position: relative;
    display: inline-block;
    width: 100%;
    font-weight: 600;
    border-bottom: var(--content-surface) solid 1px;
}

.dark .dropdown[b-7946olhlqr] {
    border-bottom: var(--content-surface) solid 1px;
}

.dropdown_icon[b-7946olhlqr] {
    display:none;
    
    position: absolute;
    top: 2rem;
    right: 1rem;
    cursor: pointer;
}

.show + img[b-7946olhlqr] {
    top: 2.6rem;
}

.dropdown_icon-search[b-7946olhlqr] {
    display: none;;
    position: absolute;
    top: 0px;
    right: 1.7rem;
}

#keyword-input:focus[b-7946olhlqr] {
    border: 1px solid var(--blue);
    outline: none !important;
}

.dropdown-content[b-7946olhlqr] {
    display: none;
    z-index: 1;
    list-style: none;
    margin-left: 0;
    flex-direction: column;
    gap: 5px;
    border-left: 3px solid var(--pink);
    padding:0 18px 18px 15px;
}

.type-multi-checkbox .dropdown-content[b-7946olhlqr] {
    padding: 10px 18px 18px 15px;
}


.dropdown-content a[b-7946olhlqr] {
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
}

        .dropdown-content a:hover[b-7946olhlqr] {
            color: var(--pink);

        }

.subcontent[b-7946olhlqr] {
    background-color: #E0F1FF;
    color: var(--blue);
}

.show[b-7946olhlqr] {
    display: block;
    
    margin: 0 0 0 0rem;
    
}

.show-content[b-7946olhlqr] {
    display: flex;
}

.aside-control__link-input[b-7946olhlqr] {
    color: var(--black);
    width: 100%;
    border: 1px solid #f2f2f2;
    outline: none;
    font-size: 10px;
    padding: 3px;
}

.dark .aside-control__link-input[b-7946olhlqr] {
    color: var(--white);
}

.aside-control__link-text[b-7946olhlqr] {
    font-weight: 400;
    font-size: 10px;
}

.aside-control__link-values[b-7946olhlqr] {
    background: none;
}

.aside-control__link-select[b-7946olhlqr] {
    color: var(--black);
    width: 40px;
    border: 1px solid #f2f2f2;
    outline: none;
    font-size: 10px;
    padding: 2px;
    margin-bottom: 1px;
}

.dark .aside-control__link-select[b-7946olhlqr] {
    color: var(--white);
}

.aside-control__subitem-close[b-7946olhlqr] {
    display: flex;  
    justify-content: flex-start;
    align-items: center;  
    max-width: 100%;
}

.aside-control__link-submit[b-7946olhlqr] {
    margin-top: 3px;
    background-color: var(--black);
    border: var(--black), 1px solid;
    padding: 4px 14px;
    color: white;
    cursor: pointer;
    font-size: 10px;
    transition: .3s all ease;
}

.aside-control__link-submit:hover[b-7946olhlqr] {
    background-color: var(--white);
    color: var(--black);
}

.aside-control__link-shape[b-7946olhlqr] {
    margin: 1rem 1rem 1rem 2.6rem;
}

.aside-control__subitem-shapes[b-7946olhlqr] {
    display: flex;
    flex-direction: row;
    margin: 1rem 1rem 1rem 1rem;
}

/*custom check*/
input.aside-control__link-checkbox[b-7946olhlqr] {
    text-decoration: none;
    display: inline-block;
    background-color: #fff;
    accent-color: var(--pink);
}



    .aside-control__subitem[b-7946olhlqr] {
        display: flex;
        padding-left: 0.2rem;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

.aside-control__subitem-search[b-7946olhlqr] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    font-weight: 600;
}

.form__input-wrap[b-7946olhlqr] {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 1rem 1rem 1rem 1rem;
}

.form__input-text[b-7946olhlqr] {
    margin: 1rem 1rem 1rem 1rem;
}

.select__field[b-7946olhlqr] {
    padding: 0px;
}


.pp-search__img[b-7946olhlqr] {
    height: 100%;
    width: 146px;
    object-fit: contain;
    background-color: white;
    max-height: 152px;
}


/*@media (max-width: 950px) {
    .pp-search__img {
        width: 100%;
        max-height: unset;
    }
}*/

.aside-control__link--reset[b-7946olhlqr] {
    background-color: transparent;
    color: #909090;
    border: none;
    cursor: pointer;
}

.pp-search__container[b-7946olhlqr] {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    background-color: white;
}

.dark .pp-search__container[b-7946olhlqr] {
    background-color: #353535;
}

/* @media (max-width: 950px) {
    .pp-search__container {
        flex-direction: column;
    }
} */

.pp-search__container-right[b-7946olhlqr] {
    display: flex;
    flex-direction: column;
    padding: 16px 28px 36px;
    width: 100%;
    justify-content: flex-start;
    gap: 5px;
    font-weight: 600;
}


.pp-search__name[b-7946olhlqr] {
    color: #000000;
    font-size: 18px;
    word-break: break-word;
}

@media (max-width: 1425px) {
    .pp-search__name[b-7946olhlqr] {
        font-size: 17px;
        word-break: break-word;
    }
}

.pp-search__icon-3d[b-7946olhlqr] {
    position: absolute;
    right: 0.5rem;
    bottom: 1rem;
}

.pp-search__container-right-first[b-7946olhlqr] {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.pp-search__company-name[b-7946olhlqr] {
    color: #109cf1;
    font-size: 1.4rem;
}


.pp-search__pagination-button[b-7946olhlqr] {
    background-color: #109cf1;
    padding: 0.7rem 0.3rem;
    border-radius: 1.2rem;
    color: 333;
    cursor: pointer;
}

    .pp-search__pagination-button.selected[b-7946olhlqr] {
        color: var(--pink);
        border: 1px solid var(--pink);
        background-color: transparent;
    }

.aside-control__reset[b-7946olhlqr] {
    border: none;
    height: auto;
    cursor: pointer;
    text-decoration: underline;
    font-weight: 600;
    background: none;
}

    .aside-control__reset:hover[b-7946olhlqr] {
        
        color: var(--pink);
    }

.aside-control__sublist[b-7946olhlqr] {
    margin: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
}


.dropdown__container-title[b-7946olhlqr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 1rem;
}

.pp-search__header[b-7946olhlqr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pp-search__results-content[b-7946olhlqr] {
    min-height: calc(100vh - 486px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.pp-search__header-right[b-7946olhlqr] {
    display: flex;
    gap: 1rem;
}

.pp-search__selector[b-7946olhlqr] {
    border: none;
    width: auto;
    padding: 5px 15px;
    background: var(--black);
    color: var(--white);
    font-weight: 600;
    appearance: none;
    outline: none;
    transition: all .3s ease;
}

.select-wrapper[b-7946olhlqr] {
    position: relative;
    display: inline-block;
}

    .select-wrapper[b-7946olhlqr]::after {
        content: "↓";
        position: absolute;
        right: 10px;
        top: 46%;
        transform: translateY(-50%);
        pointer-events: none;
        color: white;
    }

    .select-wrapper:hover .pp-search__selector[b-7946olhlqr] {
        background: #FEBAFF;
        color: var(--black);
    }

    .select-wrapper:hover[b-7946olhlqr]::after {
        color: var(--black);
    }

.aside-control__link-label[b-7946olhlqr] {
    text-decoration: none;
    display: inline-block;
    color: black;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    padding-left: 5px;
}

.dark .aside-control__link-label[b-7946olhlqr] {
    color: var(--white);
}

.aside-control__filter[b-7946olhlqr] {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    background-color: var(--light-grey);
    padding: 10px 18px;
    font-size: 14px;
}

.dark .aside-control__filter[b-7946olhlqr] {
    background-color: var(--black);
}

.aside-control__subitem-checkbox[b-7946olhlqr] {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 5px;
    cursor: pointer;
    gap: 4px;
}

    .aside-control__subitem-checkbox:hover label[b-7946olhlqr] {
        color: var(--pink);
    }

    .disabled[b-7946olhlqr] {
    pointer-events: none;
    filter: grayscale(1);
    opacity: 0.7;
}

.count-all[b-7946olhlqr] {
    color: #109cf1;
}

.pp-search__pagination[b-7946olhlqr] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 3rem 0;
}

.pp-search__button-first[b-7946olhlqr], .pp-search__button-prev[b-7946olhlqr], .pp-search__button-next[b-7946olhlqr], .pp-search__button-last[b-7946olhlqr] {
    width: 100px;
}

.pp-search__button-number[b-7946olhlqr] {
    width: 35px;
    margin: 0 0.5rem;
}

.pp-search__button-dots[b-7946olhlqr] {
    background-color: transparent;
    color: #109cf1;
    font-weight: bold;
    cursor: auto;
}

.pp-search__right-buttons[b-7946olhlqr] {
    display: flex;
    align-items: center;
}


.pp-button__select-source[b-7946olhlqr] {
    border: 1px solid #909090;
    background-color: transparent;
    padding: 0.7rem 1.8rem;
    color: #909090;
    margin-left: 2rem;
    display: none !important;
}

.pp-button__tag-cloud[b-7946olhlqr] {
    color: #909090;
    background-color: transparent;
    margin-left: 2rem;
    display:none !important;
}

.pp-button__select-content[b-7946olhlqr] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.pp-search__content[b-7946olhlqr] {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.icon-margin[b-7946olhlqr] {
    margin-top: 4px;
}

.pp-search__settings-list[b-7946olhlqr] {
    background-color: white;
    width: initial;
    height: initial;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.2s;
    z-index: 999;
    box-shadow: var( --shadow);
    overflow: hidden;
}

    .pp-search__settings-list.hidden[b-7946olhlqr] {
        transition: all 0.2s;
        width: 0;
        height: 0;
        display: none;
    }

.pp-search__settings[b-7946olhlqr] {
    position: absolute;
    top: 2rem;
    right: 1.8rem;
    text-align: right;
}

.pp-search__settings-list-item[b-7946olhlqr] {
    text-align: left;
}

.pp-search__icon-fav[b-7946olhlqr], .pp-search__icon-fav-comp[b-7946olhlqr], .pp-search__icon-project-comp[b-7946olhlqr], .pp-search__icon-project[b-7946olhlqr], .pp-search__icon-view-comp[b-7946olhlqr], .pp-search__icon-review-comp[b-7946olhlqr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .pp-search__icon-fav use[b-7946olhlqr] {
        fill: transparent;
    }

.pp-search__3d-container[b-7946olhlqr] {
    position: absolute;
    bottom: 1.5rem;
    right: 1.8rem;
    text-align: right;
}

.pp-search__button-favorites[b-7946olhlqr] {
    background-color: var(--white);
    border-radius: 100%;
    height: 3.5rem;
    width: 3.5rem;
    border: none;
    background-color: #F2F2F2;
    cursor: pointer;
}

.svg-3dots[b-7946olhlqr] {
    margin: 0 auto;
}

.pp-search__input-search[b-7946olhlqr] {
    margin-top: -20px;
    cursor: pointer;
}

/*card popup*/
.pp-search__popup[b-7946olhlqr] {
    display: flex;
    justify-content: flex-start;
    color: #333;
    position: absolute;
    width: calc(100vw - 342px);
    cursor: default;
    min-height: 560px;
    z-index: 100;
    background: var(--light-pink);
    padding: 22px 64px 22px 30px;
    top: 110%;
    left: -10px;
    gap: 42px;
}

@media (max-width: 1600px) {
    .pp-search__popup[b-7946olhlqr] {
        min-height: 630px;
    }
   /* .pp-search__result.open{
        margin-bottom: 630px;
    }*/
}


@media (max-width: 1360px) {
    .pp-search__popup[b-7946olhlqr] {
        min-height: 770px;
    }
   /* .pp-search__result.open{
        margin-bottom: 770px;
    }*/
}

@media (max-width: 1200px) {
    .pp-search__popup[b-7946olhlqr] {
        min-height: 655px;
    }
   /* .pp-search__result.open{
        margin-bottom: 655px;
    }*/
}

@media (max-width: 1024px) {
    .pp-search__popup[b-7946olhlqr] {
        width: calc(100vw - 280px);
        top: 100%;
        flex-direction: column-reverse;
    }
}

@media (max-width: 768px) {
    .pp-search__popup[b-7946olhlqr] {
        flex-direction: column-reverse;
        min-height: 770px;
    }
}

/*column correct for popup*/
.pp-search__result:nth-child(3n) .pp-search__popup[b-7946olhlqr] {
    left: calc(-100% - 62px);
}

.pp-search__result:nth-child(3n+1) .pp-search__popup[b-7946olhlqr] {
    left: calc(-200% - 116px);
}

@media (max-width: 1500px) {

    .pp-search__result:nth-child(3n+1) .pp-search__popup[b-7946olhlqr] {
        left: -9px;
    }

    .pp-search__result:nth-child(3n) .pp-search__popup[b-7946olhlqr] {
        left: -9px;
    }

    .pp-search__result:nth-child(2n+1) .pp-search__popup[b-7946olhlqr] {
        left: calc(-100% + -62px);
    }
}



@media (max-width: 1200px) {

    .pp-search__result:nth-child(2n+1) .pp-search__popup[b-7946olhlqr] {
        left: -9px;
    }

    .pp-search__popup[b-7946olhlqr] {
        left: -9px !important;
    }
}
/*end column correct*/


.pp-search__popup-img[b-7946olhlqr]{
    width: 24%;
    min-width: 300px;
    display: flex;
}

.pp-search__popup-image.hidden[b-7946olhlqr] {
    display: none;
}

.pp-search__popup-image[b-7946olhlqr] {
    width: 100%;
    height: 100%;
    max-height: 360px;
    object-fit: contain;
}

@media (max-width: 1200px) {
    .pp-search__popup-img[b-7946olhlqr] {
        display: none;
    }
}

.pp-search__popup-content[b-7946olhlqr] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    gap: 8px;
}


@media (max-width: 768px) {
    .pp-search__popup-content[b-7946olhlqr] {
        width: 100%;
        padding-left: 0;
        margin-bottom: 2rem;
    }
}

.pp-search__popup-subtitle[b-7946olhlqr] {
    color: #EE3D96;
    margin: 0;
    font-weight: 600;
    font-size: 16px;
}
.pp-search__popup-subtitle2[b-7946olhlqr] {
    color: #000000;
    font-weight: 600;
    font-size: 30px;
    line-height: 40px;
    vertical-align: middle;
    margin: 0;
}



.pp-search__popup-title[b-7946olhlqr] {
    font-weight: 600;
    font-size: 30px;
    line-height: 1.2;
    color: #000000;
}

.pp-search__popup-list[b-7946olhlqr] {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0 0 0;
    gap: 8px;
    padding: 0;
    list-style: none;
}

.pp-search__popup-item[b-7946olhlqr] {
    background: var(--pink);
    color: white;
    padding: 7px 24px;
    font-size: 12px;
    font-weight: 600;
}

.pp-search__popup-links[b-7946olhlqr] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 40px;
    gap: 14px;
}

.pp-search__popup-link[b-7946olhlqr] {
    padding: 5px 0;
    color: var(--white);
    text-decoration:none;
    background: var(--black);
    align-items: center;
    font-size: 14px;
    text-align: center;
    font-weight: 600;
    width: 195px;
}

    .pp-search__popup-link:hover[b-7946olhlqr], .pp-search__popup-link.selected[b-7946olhlqr] {
        color: white;
        transition: all .2s;
        background: var(--pink);
        
    }

.pp-search__popup-link span[b-7946olhlqr]{
    display: flex;
    justify-content: center;
    gap:10px;
    align-items: center;
}

.pp-search__popup-icon[b-7946olhlqr] {
    width: 0.8rem;
    margin-left: 0.8rem;
}

.pp-search__popup-close[b-7946olhlqr] {
    position: absolute;
    right: 3rem;
    top: 2rem;
    width:20px;
    height:20px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10ZM6.28042 5.21967C5.98752 4.92678 5.51265 4.92678 5.21976 5.21967C4.92687 5.51256 4.92687 5.98744 5.21976 6.28033L8.93938 9.99996L5.21967 13.7197C4.92678 14.0126 4.92678 14.4874 5.21967 14.7803C5.51256 15.0732 5.98744 15.0732 6.28033 14.7803L10 11.0606L13.7197 14.7803C14.0126 15.0732 14.4875 15.0732 14.7804 14.7803C15.0733 14.4874 15.0733 14.0126 14.7804 13.7197L11.0607 9.99996L14.7803 6.28034C15.0732 5.98745 15.0732 5.51257 14.7803 5.21968C14.4874 4.92679 14.0126 4.92679 13.7197 5.21968L10 8.9393L6.28042 5.21967Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
    z-index: 150;
}

.pp-search__popup-close__icon[b-7946olhlqr] {
    width: 1.2rem;
}
.spacer[b-7946olhlqr] {
    background: #000000;
    height: 1px;
    border: navajowhite;
    margin: 1rem 0rem;
}
/*PROGRESS BAR*/
#circular-progress[b-7946olhlqr] {
    position: relative;
    width: 10rem;
    height: 10rem;
}

    #circular-progress span[b-7946olhlqr] {
        display: block;
        width: 10rem;
        margin-left: 0.5rem;
        text-align: center;
        line-height: 10rem;
        color: var(--dark);
        font-size: 1.8rem;
        font-weight: 100;
        display: none;
    }

    #circular-progress canvas[b-7946olhlqr] {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }

    #circular-progress input[b-7946olhlqr] {
        width: 200px;
    }


/*STANDARD TABS*/
.standard__tabs[b-7946olhlqr] {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: 5rem;
    margin: 0 0 1.5rem 0;
}

@media only screen and (max-width: 768px) {
    .standard__tabs[b-7946olhlqr] {
        display: grid;
        gap: 0.7rem;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 5rem);
        margin: 0 0 1.5rem 0;
    }

    .pp-search__content[b-7946olhlqr] {
        
        flex-wrap: wrap;
    }

    .pp-button__select-source[b-7946olhlqr] {
        margin-left: 0rem;
        margin-top: 2rem;
        display:none !important;
    }

    .pp-button__tag-cloud[b-7946olhlqr] {
        margin-left: 0rem;
        margin-top: 2rem;
        display: none !important;
    }
}

.standard__tab[b-7946olhlqr] {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--light-blue);
    color: var(--gray);
    position: relative;
}

    .standard__tab.selected[b-7946olhlqr],
    .standard__tab:hover[b-7946olhlqr] {
        background-color: white;
        border: solid 0.1rem var(--blue);
        color: var(--blue);
    }



/*OVERLAY FOR VIEW PAGE*/
.view-overlay__container[b-7946olhlqr] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 70%);
}

.view-overlay__overlay[b-7946olhlqr] {
    position: fixed;
    top: 7rem;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.view-overlay__popup[b-7946olhlqr] {
    width: 70%;
    height: 30rem;
    max-width: 50rem;
    background-color: var(--white);
}

.pp-search__results[b-7946olhlqr] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin:0;
    position: relative;
    padding:0;
    gap:36px;
    padding-top: 13px;
    flex: 0 50%;
}

@media (max-width: 1500px) {
    .pp-search__results[b-7946olhlqr] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1200px) {
    .pp-search__results[b-7946olhlqr] {
        grid-template-columns: 1fr;
    }
}

.pp-search__result[b-7946olhlqr] {
    cursor: pointer;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    min-height: 146px;
}


.dropdown-content a.selected[b-7946olhlqr] {
    color: var(--pink);
    font-weight: 600;
}

.template[b-7946olhlqr] {
    display: none !important;
}

.aside-control__subitem .aside-control__link--inner[b-7946olhlqr] {
    width: 100%;
}

.aside-control__subitem-search .aside-control__link--inner[b-7946olhlqr] {
    text-decoration:none;
    color: black;
    margin:0;
    padding:0;
}

.dark .aside-control__subitem-search .aside-control__link--inner[b-7946olhlqr]{
    color: var(--white);
}

.aside-control__subitem-search a:hover[b-7946olhlqr] {
    color: var(--pink);
}

.aside-control__count[b-7946olhlqr] {
    margin: 0;
    padding: 0;
    display: inline-block;
}

.list__tag-cloud.hidden[b-7946olhlqr] {
    display: none;
}

.list__tag-cloud[b-7946olhlqr] {
    position: absolute;
    left: 40rem;
    top: 10rem;
    height: auto;
    width: 50rem;
    padding: 2.4rem;
    z-index: 990;
    
    -webkit-box-shadow: 0 4px 8px rgb(0 0 0 / 25%);
    box-shadow: 0 4px 8px rgb(0 0 0 / 25%);
    -webkit-transform: translate3d(0,-5%,0);
    transform: translate3d(0,-5%,0);
    -webkit-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s;
    overflow-y: auto;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

    .list__tag-cloud li[b-7946olhlqr] {
        cursor: pointer;
        padding: 1rem;
        background-color: var(--light-gray);
        color: black;
    }

        .list__tag-cloud li.selected[b-7946olhlqr] {
            font-weight: bold;
            background-color: var(--blue);
            color: var(--white);
        }

.pp-search-modes[b-7946olhlqr] {
    padding: 2.4rem;
    position: absolute;
    left: 28.4rem;
    top: 9rem;
    z-index: 990;
    background-color: var(--white);
    -webkit-box-shadow: 0 4px 8px rgb(0 0 0 / 25%);
    box-shadow: 0 4px 8px rgb(0 0 0 / 25%);
    -webkit-transform: translate3d(0,-5%,0);
    transform: translate3d(0,-5%,0);
    -webkit-transition: all .5s ease-in-out 0s;
    transition: all .5s ease-in-out 0s;
    width: 60rem;
    max-height: 60vh;
    overflow-y: auto;
}

.pp-search-modes-group[b-7946olhlqr] {
    display: flex;
    padding: 2rem;
}

.pp-search-modes-group[b-7946olhlqr] {
    display: flex;
    padding: 2rem;
}

    .pp-search-modes-group label[b-7946olhlqr] {
        width: 20%;
        font-weight: bold;
    }

    .pp-search-modes-group ul[b-7946olhlqr] {
        display: flex;
        flex-wrap: wrap;
        width: 80%;
        gap: 2rem;
    }

    .pp-search-modes-group li[b-7946olhlqr] {
        cursor: pointer;
        padding: 1rem;
        background-color: var(--light-gray);
        color: black;
    }

        .pp-search-modes-group li.selected[b-7946olhlqr] {
            font-weight: bold;
            background-color: var(--blue);
            color: var(--white);
        }

#keyword-input[b-7946olhlqr] {
    width: auto;
}

.pp-search-cotainer-flex-row[b-7946olhlqr] {
    display: flex;
}


.pp-search__icon-fav[b-7946olhlqr]:after {
    content: 'Add to Favorites';
}

.pp-search__icon-fav.on[b-7946olhlqr]:after {
    content: 'Remove from Favorites';
}

.pp-search__icon-project[b-7946olhlqr]:after {
    content: 'Add to Project/Basket';
}

.pp-search__icon-fav-comp[b-7946olhlqr]:after {
    content: 'Add Supplier to Favorites';
}

.pp-search__icon-project-comp[b-7946olhlqr]:after {
    content: 'Add Supplier to Project';
}

.pp-search__icon-view-comp[b-7946olhlqr]:after {
    content: 'View Supplier & Reviews';
}

.pp-search__icon-review-comp[b-7946olhlqr]:after {
    content: 'Write Supplier Review';
}

.pp-search__icon-fav-comp.on[b-7946olhlqr]:after {
    content: 'Remove Supplier from Favorites';
}

.pp-search__icon-fav-comp use[b-7946olhlqr] {
    color: #919191;
}

.pp-search__icon-fav-comp.on use[b-7946olhlqr] {
    color: var(--blue);
}

.pp-search__icon-fav.on use[b-7946olhlqr] {
    color: var(--blue);
}

.pp-search__result.open[b-7946olhlqr] {
    border: var(--light-pink) solid 9px;
    border-bottom: var(--light-pink) solid 18px;
    margin-bottom: 560px;
    height: auto;
}

@media (max-width: 1600px) {
    /*.pp-search__popup {
        min-height: 630px;
    }*/

    .pp-search__result.open[b-7946olhlqr] {
        margin-bottom: 630px;
    }
}


@media (max-width: 1360px) {
    /*.pp-search__popup {
        min-height: 770px;
    }*/

    .pp-search__result.open[b-7946olhlqr] {
        margin-bottom: 770px;
    }
}

@media (max-width: 1200px) {
    /*.pp-search__popup {
        min-height: 655px;
    }*/

    .pp-search__result.open[b-7946olhlqr] {
        margin-bottom: 655px;
    }
}

@media (max-width: 1024px) {
   
}

@media (max-width: 768px) {
    /*.pp-search__popup {
        flex-direction: column-reverse;
        min-height: 770px;
    }*/
    .pp-search__result.open[b-7946olhlqr] {
        margin-bottom: 770px;
    }
}

.pp-search__popup.hidden[b-7946olhlqr] {
    display: none;
}

h2.pp-search__popup-subtitle[b-7946olhlqr] {
    font-size: 1.2rem;
    font-weight: normal;
    border-bottom: 1px solid var(--white);
    padding-bottom: 0.2rem;
    margin:0;
}


.pp-search__popup-description[b-7946olhlqr] {
    font-weight: 600;
    font-size: 16px;
    line-height: 130%;
    vertical-align: middle;
    margin: 1rem 0rem;
    color: #000000;
}


.pp-search__popup-loader[b-7946olhlqr] {
    border: 16px solid var(--pink);
    border-top: 16px solid var(--light-pink);
    border-radius: 50%;
    width: 12rem;
    height: 12rem;
    animation: spin-b-7946olhlqr 2s linear infinite;
}



@keyframes spin-b-7946olhlqr {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.pp-search__popup-fields[b-7946olhlqr] {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .pp-search__popup-fields dt[b-7946olhlqr] {
        margin-right: 6.5px;
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        vertical-align: middle;
    }
    .pp-search__popup-fields dl dd[b-7946olhlqr]{
        margin:0;
    }
    .pp-search__popup-fields dl[b-7946olhlqr] {
        color: #000000;
        display: flex;
        align-items: center;
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        vertical-align: middle;
    }

        .pp-search__popup-fields dl:first-child[b-7946olhlqr] {
            border-top: 1px solid var(--gray);
        }

.pp-search__popup-link.hidden[b-7946olhlqr] {
    display: none;
}

.pp-search__popup-relatedlist.hidden[b-7946olhlqr] {
    display: none;
}

.pp-search__popup-relatedlist[b-7946olhlqr] {
    display: flex;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
}

    .pp-search__popup-relatedlist li[b-7946olhlqr] {
        background: var(--blue);
        border: 2px solid var(--blue);
        font-size: 1.3rem;
    }

        .pp-search__popup-relatedlist li:hover[b-7946olhlqr] {
            background: var(--white);
            border: 2px solid var(--white);
            color: var(--blue);
        }

        .pp-search__popup-relatedlist li a[b-7946olhlqr] {
            padding: 0.2rem 0.5rem;
        }

        .pp-search__popup-relatedlist li.selected[b-7946olhlqr], .pp-search__popup-relatedlist li:hover[b-7946olhlqr] {
            background: var(--white);
            color: var(--blue)
        }

.pp-search__matching[b-7946olhlqr] {
    display: flex;
    background-color: var(--light-gray);
    padding: 2rem;
    margin-bottom: 2rem;
    gap: 5rem;
    align-items: center;
}

    .pp-search__matching img[b-7946olhlqr] {
        max-height: 20rem;
    }

    .pp-search__matching.hidden[b-7946olhlqr] {
        display: none;
    }

    .pp-search__matching h3[b-7946olhlqr] {
        font-size: 2rem;
        font-weight: normal;
    }

        .pp-search__matching h3 span[b-7946olhlqr] {
            font-weight: 600;
        }

    .pp-search__matching h2[b-7946olhlqr] {
        font-size: 4rem;
        color: var(--blue);
        font-weight: normal;
    }

.relatedLabel__mixmatch2d[b-7946olhlqr], .relatedLabel__mixmatch2dcomponent[b-7946olhlqr] {
    margin-bottom: 1rem;
    color: var(--white);
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: 1rem;
}

.selected > a[b-7946olhlqr], .selected > span[b-7946olhlqr] {
    color: var(--pink);
}

.pp-search__right-buttons button[b-7946olhlqr] {
    border: 2px solid #f2f2f2;
    width: auto;
    padding: 1rem 2rem 1rem 2rem;
    background: #f2f2f2;
    border-radius: 0.5rem;
    color: #919191;
    margin-right: 1rem;
    height: 41px;
}

.pp-chart-tooltip p[b-7946olhlqr] {
    font-size: 1.3rem;
}

.pp-chart-tooltip a[b-7946olhlqr] {
    display: block;
    padding: 0.2rem;
    text-align: center;
    background-color: var(--blue);
    font-size: 1.2rem;
    margin-top: 0.5rem;
    cursor: pointer;
}

.pp-search__categories li[b-7946olhlqr] {
    width: calc(33.333% - 0.8rem);
    height: 25rem;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.pp-search__categories ul[b-7946olhlqr] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.pp-search__categories a[b-7946olhlqr] {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 2.5rem;
    justify-content: flex-start;
}

    .pp-search__categories a h3[b-7946olhlqr] {
        background-color: rgba(200,200,200,0.4);
        color: var(--white);
        font-weight: normal;
        font-size: 2rem;
        align-self: flex-end;
        justify-self: flex-end;
        font-size: 3rem;
        line-height: 3.3rem;
        padding: 0.2rem 0.5rem;
        border-radius: 0.2rem;
    }

.chart-container h3[b-7946olhlqr] {
    display: flex;
    margin-top: 2rem;
    gap: 2rem;
    align-items: center;
}

    .chart-container h3 button[b-7946olhlqr] {
        padding: 1rem 2rem;
        color: var(--dark-gray);
    }

#loading-overlay[b-7946olhlqr] {
    position: fixed;
    top:0;
    left:0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index:99999;
    background-color:rgba(0,0,0,0.2);
}
#loading-overlay .loader[b-7946olhlqr],
#loading-overlay .loader[b-7946olhlqr]:before,
#loading-overlay .loader[b-7946olhlqr]:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7-b-7946olhlqr 1.8s infinite ease-in-out;
}

#loading-overlay .loader[b-7946olhlqr] {
    color: var(--pink);
    font-size: 10px;
    margin: 80px auto;
    position: relative;
    text-indent: -9999em;
    transform: translateZ(0);
    animation-delay: -0.16s;
}

    #loading-overlay .loader[b-7946olhlqr]:before,
    #loading-overlay .loader[b-7946olhlqr]:after {
        content: '';
        position: absolute;
        top: 0;
    }

    #loading-overlay .loader[b-7946olhlqr]:before {
        left: -3.5em;
        animation-delay: -0.32s;
    }

    #loading-overlay .loader[b-7946olhlqr]:after {
        left: 3.5em;
    }


@keyframes load7-b-7946olhlqr {
    0%, 80%, 100% {
        box-shadow: 0 2.5em 0 -1.3em;
    }

    40% {
        box-shadow: 0 2.5em 0 0;
    }
}

.aside-control__subitem-close[b-7946olhlqr] {
    height: 2rem;
   
}


.aside-control__list[b-7946olhlqr] {
    list-style:none;
    padding:0;
    margin:0;
}

    .aside-control__list > a[b-7946olhlqr] {
        color: #000;
    }


.aside-control__text--inner[b-7946olhlqr], .aside-control__reset[b-7946olhlqr], .aside-control__count[b-7946olhlqr] {
    color: #000;
}

.dark .aside-control__text--inner[b-7946olhlqr], .dark .aside-control__reset[b-7946olhlqr], .dark .aside-control__count[b-7946olhlqr] {
    color: var(--white);
}

.aside-control__subitem-search.selected .aside-control__link--inner[b-7946olhlqr] {
    color: var(--pink);
}



.aside-white-bg[b-7946olhlqr] {
    background-color: var(--white);
    color: #909090;
}

body.darkMode-active .aside-white-bg[b-7946olhlqr] {
    background-color: var(--dark);
}

body.darkMode-active .aside-control__item--empty[b-7946olhlqr] {
    background-color: var(--dark);
}

body.darkMode-active .aside-control__title[b-7946olhlqr] {
    color: var(--light-gray);
}

.aside-control__link[b-7946olhlqr] {
    display: flex;
    font-weight: 600;
    font-size: 14px;
    background: var(--light-grey);
    padding: 10px 18px;
    color: var(--black);
    text-decoration: none;
}

.dark .aside-control__link[b-7946olhlqr] {
    background: var(--black);
    color: var(--white);
}


.aside-control__item--empty[b-7946olhlqr] {
    background-color: white;
}

.pp-search__homecategories-title[b-7946olhlqr] {
    font-weight: 300;
    color: var(--blue);
}

.pp-search__homesubcategories[b-7946olhlqr] {
    display: flex;
    gap: 3rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

    .pp-search__homesubcategories li[b-7946olhlqr] {
        cursor: pointer;
        border: 1px solid var(--blue);
        color: var(--blue);
        padding: 1rem 2rem;
        flex-grow: 1;
        text-align: center;
        transition: 0.3s;
    }

        .pp-search__homesubcategories li.selected[b-7946olhlqr], .pp-search__homesubcategories li:hover[b-7946olhlqr] {
            background-color: var(--light-blue);
            color: var(--blue);
            border-color: var(--light-blue);
        }



/*ESTILOS MARCOS*/
figure.svg-container__20.svg-3dots svg[b-7946olhlqr] {
    display: none;
}
.pp-search__button-favorites[b-7946olhlqr]{
    display: none;
}

.pp-search__3d-container[b-7946olhlqr], .pp-search__settings[b-7946olhlqr]{
    display: none;
}
.pp-search__company-name[b-7946olhlqr]{
    color: var(--ibgmain);
    font-weight: 600;
}

.pp-search__container-right-third[b-7946olhlqr] {
    position: absolute;
    /*bottom: 13px;*/
    top:120px;
    right: 34px;
}
.pp-search__item-type[b-7946olhlqr] {
    color: var(--ibgmain);
    font-size: 14px;
    font-weight: 500;
}

.pp-search__item-type:hover[b-7946olhlqr] {
    font-weight: 600;
}

.pp-search__name[b-7946olhlqr] {
    color: var(--outline);
    font-size: 18px;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pp-search__link[b-7946olhlqr]{
    background-color: white;
    display: flex;
    flex-direction: column;
    color: var(--outline);
    /*height: 100%;*/
}

.dark .pp-search__link[b-7946olhlqr] {
    background-color: #353535;
    border: 1px solid #797979;
}



.pp-search__pagination-button[b-7946olhlqr] {
    background-color: var(--light-pink);
    color: #555;
    border-radius: 1.2rem;
    border: none;
}
/* /Components/Pages/PIMStatic.razor.rz.scp.css */


.content-header[b-ij4kd5ywuv] {
    margin-bottom: 20px;
}

    .content-header h1[b-ij4kd5ywuv] {
        margin: 0;
        font-size: 2em;
        color: var(--text-dark);
    }

    .content-header p[b-ij4kd5ywuv] {
        margin: 5px 0 0;
        color: var(--text-grey);
        font-size: 1em;
    }

.search-and-filters[b-ij4kd5ywuv] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.search-box[b-ij4kd5ywuv] {
    display: flex;
    align-items: center;
    flex-grow: 1;
    border: 1px solid var(--border-grey);
    border-radius: 25px;
    padding: 5px 15px;
}

    .search-box input[b-ij4kd5ywuv] {
        border: none;
        outline: none;
        flex-grow: 1;
        font-size: 1em;
        padding-left: 10px;
    }

    .search-box .icon[b-ij4kd5ywuv] {
        color: var(--text-grey);
    }

.button[b-ij4kd5ywuv] {
    padding: 10px 20px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
}

.search-btn[b-ij4kd5ywuv] {
    background-color: var(--pink-main);
    color: var(--white);
}

.filter-select[b-ij4kd5ywuv] {
    padding: 8px 15px;
    border: 1px solid var(--border-grey);
    border-radius: 25px;
    background-color: var(--white);
    font-size: 1em;
    color: var(--text-grey);
}

.pim-grid-container[b-ij4kd5ywuv] {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    gap: 20px;
}

.filter-panel[b-ij4kd5ywuv] {
    width: 250px;
    background-color: var(--light-pink-bg);
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

    .filter-panel h3[b-ij4kd5ywuv] {
        margin-top: 0;
        color: var(--pink-main);
    }

.filter-section[b-ij4kd5ywuv] {
    margin-bottom: 20px;
}

    .filter-section h4[b-ij4kd5ywuv] {
        font-size: 1.1em;
        margin: 0;
        padding-bottom: 5px;
        border-bottom: 1px solid var(--border-grey);
        color: var(--text-dark);
    }

.filter-list[b-ij4kd5ywuv] {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

    .filter-list li[b-ij4kd5ywuv] {
        font-size: 0.9em;
        color: var(--text-grey);
        margin-bottom: 5px;
    }

.results-panel[b-ij4kd5ywuv] {
    flex-grow: 1;
}

.results-header[b-ij4kd5ywuv] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

    .results-header h2[b-ij4kd5ywuv] {
        margin: 0;
        font-size: 1.5em;
        color: var(--text-dark);
    }

.results-grid[b-ij4kd5ywuv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

.product-card[b-ij4kd5ywuv] {
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 10px;
    text-align: center;
    text-decoration: none;
}

    .product-card img[b-ij4kd5ywuv] {
        width: 100%;
        height: auto;
    }

    .product-card .details[b-ij4kd5ywuv] {
        padding-top: 10px;
    }

        .product-card .details h4[b-ij4kd5ywuv] {
            margin: 0;
            font-size: 0.9em;
            color: var(--text-dark);
        }

        .product-card .details p[b-ij4kd5ywuv] {
            margin: 5px 0 0;
            font-size: 0.8em;
            color: var(--text-grey);
        }
/* /Components/Pages/PPWRAgent.razor.rz.scp.css */
.chat-page[b-wjdq8w8mhz] {
    padding: 3rem 0;
    display: flex;
    align-items: center;
    margin: 0;
    flex-direction: column;
    height: 100%;
}

.chat-page h2[b-wjdq8w8mhz]{
    font-weight: 600;
    font-size: 42px;
    max-width: 830px;
    text-align: center;
}

.chat-container[b-wjdq8w8mhz] {
    width: 100%;
    max-width: 800px;
    height: 50vh;
}

@media (max-height: 1000px) {
    .chat-container[b-wjdq8w8mhz] {
        height: 100%;
        max-height: 600px;
    }
}
/* /Components/Pages/Product.razor.rz.scp.css */
.mold_customer_owned[b-spcnjhswdb]{
    background-color: var(--ibgmain);
    color:white;
    font-weight:700;
    padding:1rem;
    display:inline-block;
    border: none;
}
.product-header[b-spcnjhswdb] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--outline);
    gap: 60px;
    margin-top: 30px;
}

.product-header_texts[b-spcnjhswdb] {
    flex: 1;
    display: flex;
    gap: 18px;
    flex-direction: column;
}

.product-header .title[b-spcnjhswdb] {
    font-weight: 600;
    font-size: 42px;
    line-height: 1.1;
    margin-bottom: 18px;
}

.product-header .subtitle[b-spcnjhswdb] {
    font-weight: 600;
    font-size: 24px;
}

.product-image-container[b-spcnjhswdb] {
    width: 360px;
    height: 360px;
    border: 1px solid var(--light-grey);
}

.product-image[b-spcnjhswdb] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tags-list[b-spcnjhswdb] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size:12px;
    font-weight: 600;
    color: var(--white);
}

.tag[b-spcnjhswdb] {
    background-color: var(--pink);
    padding: 5px 15px;
}

    .tag:hover[b-spcnjhswdb] {
        background-color: #f167ad;
    }


.links-section-wrapper[b-spcnjhswdb]{
    display: flex;
    gap:12px;
    flex-wrap: wrap;
}

.links-section[b-spcnjhswdb] {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

    .links-section a[b-spcnjhswdb] {
        background-color: var(--black);
        border: var(--black) 1px solid;
        color: var(--white);
        width: 195px;
        padding: 3px 5px;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: all .3s ease;
    }

    .links-section a:hover[b-spcnjhswdb]{
        background-color: var(--white);
        color: var(--black);
    }

        .links-section a span[class^="icon-"][b-spcnjhswdb] {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            flex-shrink: 0;
            filter: invert(1) brightness(1.2) saturate(0);
            -webkit-filter: invert(1) brightness(1.2) saturate(0);
        }

        .links-section.product-files a span[class^="icon-"][b-spcnjhswdb] {
            filter: unset;
            -webkit-filter: unset;
        }

        .links-section a:hover span[class^="icon-"][b-spcnjhswdb]{
            filter: invert(1) brightness(0) saturate(0);
            -webkit-filter: invert(1) brightness(0) saturate(0);
        }


        .links-section.product-files a span[b-spcnjhswdb]{
            text-transform: uppercase;
        }

.specifications-section[b-spcnjhswdb] {
    margin-top: 30px;
}


.spec-grid[b-spcnjhswdb] {
    column-count: 1;
    column-gap: 119px;
}

.card[b-spcnjhswdb] {
    padding-bottom: 40px;
    break-inside: avoid;
}

.card-header[b-spcnjhswdb] {
    width: 100%;
}

.card-content[b-spcnjhswdb] {
    font-size: 14px;
    color: var(--outline);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px 0;
}

    .card-content .row[b-spcnjhswdb] {
        display: flex;
        justify-content: space-between;
        gap: 20px;
    }

    .card-content .label[b-spcnjhswdb] {
        white-space: nowrap;
        font-weight: 600;
    }

    .card-content .value[b-spcnjhswdb] {
        font-weight: 400;
        text-align: right;
    }

.see-also-section[b-spcnjhswdb] {
    display: none; /* Hide this section as it's not in the new image */
}

.scroll-up-btn[b-spcnjhswdb] {
    position: fixed;
    bottom: 60px;
    right: 40px;
    display: flex;
    width: 54px;
    height: 54px;
    background-color: var(--black);
    border: var(--black) 1px solid;
    color: var(--white);
    justify-content: center;
    align-items: center;
    overflow: hidden;
    -webkit-transition: all .3s linear;
    -ms-transition: all .3s linear;
    transition: all .3s linear;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    z-index: 10;
}

    .scroll-up-btn.active[b-spcnjhswdb] {
        opacity: 1;
        pointer-events: auto;
    }

    .scroll-up-btn:hover[b-spcnjhswdb] {
        color: var(--black);
        background-color: var(--white);
    }

    .created-by[b-spcnjhswdb]{
        margin-bottom: 20px;
    }

/* Media Queries for Responsiveness */
@media (min-width: 768px) {
    .product-header[b-spcnjhswdb] {
        flex-direction: row;
        justify-content: space-between;
    }

    .spec-grid[b-spcnjhswdb] {
        column-count: 2;
    }

    .see-also-items[b-spcnjhswdb] {
        flex-direction: row;
    }
}
/* /Components/Pages/Scene.razor.rz.scp.css */
.title-bar[b-80ewpeeqne] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 100px;
	height: 50px;
}

	.title-bar h3[b-80ewpeeqne] {
		font-weight: 600;
		font-size: 24px;
	}

.toggle-scene-button[b-80ewpeeqne] {
	color: var(--outline);
	border: none;
	font-weight: 700;
	font-size: 14px;
	line-height: 10px;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s ease;
	transform: translateZ(0);
	display:flex;
	align-items: flex-end;
	gap: 8px;
}

.mixmatch-preview .toggle-scene-button:hover[b-80ewpeeqne] {
	transform: translateY(-1px);
}

.toggle-scene-button:active[b-80ewpeeqne] {
	transform: translateY(0);
}


.scene-container[b-80ewpeeqne] {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* /Components/Pages/Soap.razor.rz.scp.css */
.page-content[b-ihu7fvq1qd] {
    padding-top: 1.5rem;
   
}
/* /Components/Pages/SRM.razor.rz.scp.css */
/* New styles for Dashboard */
.dashboard-grid[b-p5fib7al3w] {
    /*display: grid;
    grid-template-columns: repeat(2, 1fr);*/
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
    color: var(--outline);
}

.chart-card[b-p5fib7al3w] {
    background-color: var(--content-bg);
    border: 1px solid var(--light-grey);
    padding: 20px;
    min-height: 397px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/*chart card widths desktop*/
.chart-card.status[b-p5fib7al3w]{
    width: calc(20% - 20px);
}


/*.chart-card.suppliers{
    width: 45%;
}*/

.chart-card.category[b-p5fib7al3w]{
   width: calc(45% - 20px);
}

.chart-card.region[b-p5fib7al3w]{
    width: 35%;
}

/*.chart-card.bar-chart{
    width: calc(55%);
}*/

/*chart card widths medium screen*/
@media (max-width: 1200px) {
    .chart-card.status[b-p5fib7al3w] {
        width: calc(35% - 20px);
    }


    /*.chart-card.suppliers {
        width: 65%;
    }*/

    .chart-card.category[b-p5fib7al3w] {
        width: 65%;
    }

    .chart-card.region[b-p5fib7al3w] {
        width: 100%;
    }

    /*.chart-card.bar-chart {
        width: 100%;
    }*/
}

@media (max-width: 768px) {
    .chart-card.status[b-p5fib7al3w], .chart-card.suppliers[b-p5fib7al3w], .chart-card.category[b-p5fib7al3w], .chart-card.region[b-p5fib7al3w], .chart-card.bar-chart[b-p5fib7al3w] {
        width: 100%;
    }
}
/*end chart widths*/

.chart-card h2[b-p5fib7al3w] {
    font-weight: 600;
    font-size: 24px;
    color: var(--outline);
}

@media (max-width: 768px) {
    .chart-card h2[b-p5fib7al3w] {
        text-align: center;
    }
}

    .chart-card p[b-p5fib7al3w] {
        font-size: 16px;
        color: var(--outline);
    }

    .chart-card img[b-p5fib7al3w] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    /*status stats specific styles*/
    .status-container[b-p5fib7al3w] {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        text-align: center;
    }

        .status-container > div[b-p5fib7al3w] {
            display: flex;
            flex-direction: column;
        }

        .status-container h4[b-p5fib7al3w] {
            font-weight: 500;
            font-size: 18px;
        }

        .status-container p[b-p5fib7al3w] {
            font-weight: 600;
            font-size: 60px;
            color: var(--pink);
            line-height: 1.2;
        }

    /* Line Chart Specific Styles */
    .line-chart-container[b-p5fib7al3w] {
        width: 100%;
        height: 200px;
    }

        .line-chart-container svg[b-p5fib7al3w] {
            width: 100%;
            height: 100%;
        }

    /*SOAP Bar Chart Specific Styles */
    .soap-container[b-p5fib7al3w] {
        display: flex;
        align-items: flex-end;
        gap: 10px;
        height: 200px;
    }

    .bar[b-p5fib7al3w] {
        width: 10%;
        border-radius: 4px 4px 0 0;
        transition: height 0.3s ease;
        position: relative;
    }

    .bar-label[b-p5fib7al3w] {
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Pie Chart Specific Styles */
    .pie-chart-container[b-p5fib7al3w] {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .pie-chart[b-p5fib7al3w] {
        width: 54%;
        aspect-ratio: 1;
        border-radius: 50%;
        position: relative;
    }

    .pie-legend[b-p5fib7al3w] {
        margin-left: 20px;
    }

    .legend-item[b-p5fib7al3w] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 5px;
    }

        .legend-item > div[b-p5fib7al3w] {
            display: flex;
            gap: 15px;
            align-items: center;
        }

    .legend-color[b-p5fib7al3w] {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        display: block;
    }

        /* New color classes for the legend */
        .legend-color.pink[b-p5fib7al3w] {
            background-color: var(--pink);
        }

        .legend-color.dark-grey-bg[b-p5fib7al3w] {
            background-color: var(--dark-grey);
        }

    .light-grey-bg[b-p5fib7al3w] {
        background-color: var(--light-grey);
    }

    .legend-color.black-bg[b-p5fib7al3w] {
        background-color: var(--black);
    }

    .pie-number[b-p5fib7al3w] {
        font-size: 18px;
        font-weight: 700;
        margin-left: 30px;
    }

    .pie-text[b-p5fib7al3w] {
        font-size: 12px;
    }

    /*region container specific styles*/
    .region-container[b-p5fib7al3w] {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

        .region-container h3[b-p5fib7al3w] {
            font-weight: 600;
            font-size: 24px;
        }

    .region-bar[b-p5fib7al3w] {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

        .region-bar .bar-fill[b-p5fib7al3w] {
            height: 24px;
            min-width: 2px;
            border-radius: 4px;
            background-color: var(--pink);
            flex-shrink: 0;
            transition: width 0.4s ease;
        }

        .region-bar .bar-label[b-p5fib7al3w] {
            position: static;
            transform: none;
            font-size: 12px;
            white-space: nowrap;
            bottom: auto;
            left: auto;
        }

    /* Combined Chart Specific Styles */
    .combined-chart-container[b-p5fib7al3w] {
        display: flex;
        align-items: flex-end;
        gap: 10px;
        height: 200px;
    }

    .combined-bar[b-p5fib7al3w] {
        width: 10%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        border-radius: 4px 4px 0 0;
        transition: height 0.3s ease;
        background-color: var(--pink); /* Primary segment color */
    }

    .combined-segment[b-p5fib7al3w] {
        width: 100%;
        /* Default background color for the first segment (pink in combined-bar) */
    }
/* /Components/Pages/Studio.razor.rz.scp.css */
body[b-ixuj1hfdsp] {
}
/* /Components/SamplatorViewer.razor.rz.scp.css */
#scene-1[b-qbwgrzaeq0] {
    height: 100%;
    width: 100%;
}
/* /Components/SoapBrowser.razor.rz.scp.css */
.table-container[b-w2pr5zwszs] {
    overflow-x: auto;
}

/* ── Entities table ──────────────────────────────────────────────── */
.soap-entities[b-w2pr5zwszs] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 14px;
}

    .soap-entities thead[b-w2pr5zwszs] {
        /* background: var(--content-table-header); */
        height: 48px;
        border-bottom: #797979 1px solid;
    }

.soap-entities .table-header[b-w2pr5zwszs] {
    text-align: left;
    padding: 15px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
    color: #797979;
}

.soap-entities td[b-w2pr5zwszs] {
    font-size: 14px;
    padding:15px;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--content-text);
}

/*generic table*/
.dark .soap-entities tr[b-w2pr5zwszs] {
    border-bottom: #F5F5F5 solid 1px;
}

.soap-entities tr[b-w2pr5zwszs] {
    border-bottom: #F5F5F5 solid 1px;
}

    .soap-entities tr:last-child[b-w2pr5zwszs], .dark .soap-entities tr:last-child[b-w2pr5zwszs] {
        border-bottom: none;
    }

/* ── Documents table ──────────────────────────────────────────────── */
.soap-documents[b-w2pr5zwszs] {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: 14px;
}

    .soap-documents thead[b-w2pr5zwszs] {
        /* background: var(--content-table-header); */
        height: 48px;
        border-bottom: #797979 1px solid;
    }

.soap-documents .table-header[b-w2pr5zwszs] {
    text-align: left;
    padding: 15px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
    color: #797979;
}

.soap-documents td[b-w2pr5zwszs] {
    font-size: 14px;
    padding: 15px;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--content-text);
}

/*generic table*/
.dark .soap-documents tr[b-w2pr5zwszs] {
    border-bottom: #F5F5F5 solid 1px;
}

.soap-documents tr[b-w2pr5zwszs] {
    border-bottom: #F5F5F5 solid 1px;
}

    .soap-documents tr:last-child[b-w2pr5zwszs], .dark .soap-documents tr:last-child[b-w2pr5zwszs] {
        border-bottom: none;
    }

.entity-link[b-w2pr5zwszs] {
    text-decoration: none;
    font-weight: 600;
    color: var(--content-text);
    text-decoration: underline;
}

    .entity-link:hover[b-w2pr5zwszs] {
        color: var(--pink);
    }

.factory-link[b-w2pr5zwszs] {
    text-decoration: none;
    font-weight: 600;
    color: var(--content-text);
    text-decoration: underline;
}

    .factory-link:hover[b-w2pr5zwszs] {
        color: var(--pink);
    }

/* ── Status colour spans ──────────────────────────────────────────── */
.green[b-w2pr5zwszs] {
    color: var(--green);
    font-weight: 600;
}

.yellow[b-w2pr5zwszs] {
    color: var(--yellow);
    font-weight: 600;
}

.orange[b-w2pr5zwszs] {
    color: var(--orange);
    font-weight: 600;
}

.grey[b-w2pr5zwszs] {
    color: var(--dark-grey);
    font-weight: 600;
}

.red[b-w2pr5zwszs] {
    color: var(--red);
    font-weight: 600;
}

/* ── Pagination ──────────────────────────────────────────────────── */
.pagination[b-w2pr5zwszs] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
    font-size: 0.875rem;
}

.page-info[b-w2pr5zwszs] {
    color: var(--dark-grey);
}

.prev-page[b-w2pr5zwszs],
.next-page[b-w2pr5zwszs] {
    background: var(--black);
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 10px;
    border: var(--black) solid 1px;
    border-radius: 24px;
    padding: 8px 24px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: all .3s ease;
}

    .prev-page:hover[b-w2pr5zwszs],
    .next-page:hover[b-w2pr5zwszs] {
        background: var(--white);
        color: var(--black);
    }
/* /Components/StudioViewer.razor.rz.scp.css */
.std-btn span[b-5ermb8gfnl]{
	height: 16px;
	margin-right: unset;
}

.back-studio_btn[b-5ermb8gfnl] {
	font-weight: 700;
	font-size: 14px;
	line-height: 10px;
	color: var(--outline);
	text-decoration: none;
	margin-top: 10px;
	border: none;
	background: none;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	transition: all 0.3s ease;
	transform: translateZ(0);
	cursor: pointer;
}

	.back-studio_btn:hover[b-5ermb8gfnl] {
		transform: translateY(-1px);
	}

	.back-studio_btn:active[b-5ermb8gfnl] {
		transform: translateY(0);
	}

.studio-title[b-5ermb8gfnl] {
	font-weight: 600;
	font-size: 42px;
	line-height: 52px;
	margin-top: 20px;
}

.mixmatch-selectors[b-5ermb8gfnl] {
	flex: 1;
	/*height: calc(100vh - 440px);*/
	margin: 20px 0;
	display: flex;
	gap: 20px;
	background: var(--content-bg);
}

@media (max-width: 1024px) {
	.mixmatch-selectors[b-5ermb8gfnl] {
		flex-direction: column;
	}
}

	.mixmatch-options[b-5ermb8gfnl] {
		overflow-y: auto;
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		align-items: center;
	}

.mixmatch-option[b-5ermb8gfnl] {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	text-decoration: none;
	color: var(--content-text);
	padding-bottom: 20px;
	box-sizing: border-box;
	cursor: pointer;
	position: relative;
	width: calc(25% - 12px);
	transition: border-color 0.15s, background 0.15s;
	opacity: 0;
	transform: translateY(12px);
	animation: fadeUp-b-5ermb8gfnl 500ms ease forwards;
	animation-delay: calc(var(--i) * 50ms);
}

@media (max-width: 1440px) {
	.mixmatch-option[b-5ermb8gfnl] {
		width: calc(33% - 12px);
	}
}

@media (max-width: 1280px) {
	.mixmatch-option[b-5ermb8gfnl] {
		width: calc(50% - 8px);
	}
}

@media (max-width: 1024px) {
	.mixmatch-option[b-5ermb8gfnl] {
		width: calc(25% - 12px);
	}
}

@keyframes fadeUp-b-5ermb8gfnl {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/*===options button===*/
.mixmatch-option .options[b-5ermb8gfnl] {
	position: absolute;
	top: 2px;
	right: 2px;
	z-index: 10;
}

	.mixmatch-option .options .options-btn[b-5ermb8gfnl] {
		width: 28px;
		height: 28px;
	}

	.mixmatch-option .options .submenu[b-5ermb8gfnl] {
		top: 28px;
		background-color: var(--white);
		color: var(--black);
		min-width: 82px;
		right: 0;
	}

	.mixmatch-option .options .submenu-item[b-5ermb8gfnl] {
		color: var(--black);
		padding: 9px 16px;
	}


		.mixmatch-option .options .submenu-item a[b-5ermb8gfnl] {
			color: black;
			gap: 5px;
			font-weight: 500;
			width: 100%;
		}

			.mixmatch-option .options .submenu-item a svg[b-5ermb8gfnl] {
				color: black;
				width: 14px;
			}

		.mixmatch-option .options .submenu-item:hover a[b-5ermb8gfnl] {
			color: var(--pink);
		}

			.mixmatch-option .options .submenu-item:hover a svg[b-5ermb8gfnl] {
				color: var(--pink);
			}

/*==end options button===*/

		.mixmatch-option:hover[b-5ermb8gfnl], .mixmatch-option.selected[b-5ermb8gfnl] {
			color: var(--pink);
		}


		.mixmatch-option span[b-5ermb8gfnl] {
			font-weight: 400;
			font-size: 14px;
			white-space: nowrap;
		}

	.mixmatch-option:hover > a > span[b-5ermb8gfnl] {
		color: var(--pink);
	}

	.mixmatch-selectors .mixmatch-option span[b-5ermb8gfnl] {
		color: var(--outline);
		text-decoration: none;
	}

	.mixmatch-selectors .mixmatch-option > a[b-5ermb8gfnl] {
		text-decoration: none;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.mixmatchoption-image[b-5ermb8gfnl] {
		display: block;
		aspect-ratio: 1;
		width: 100%;
		object-fit: cover;
		border: 1px solid #E9E6E2;
		transition: border-color 0.3s, background 0.3s;
	}

	.mixmatch-selectors .mixmatch-option .submenu-item:hover span[b-5ermb8gfnl] {
		color: var(--pink);
	}

	.mixmatch-option:hover .mixmatchoption-image[b-5ermb8gfnl] {
		border: 2px solid var(--pink);
	}

	.mixmatch-option.selected .mixmatchoption-image[b-5ermb8gfnl] {
		border: 5px solid var(--pink);
	}


	.mixmatch-preview[b-5ermb8gfnl] {
		flex: 1;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		padding: 24px;
		background: var(--content-surface);
		overflow: auto;
	}

		.mixmatch-preview .mixmatch-asset[b-5ermb8gfnl] {
			width: 100%;
			height: 100%;
			object-fit: contain; /* fit into the preview area */
		}

	.option-group[b-5ermb8gfnl] {
		/*margin-bottom: 16px;*/
		flex: 1;
		background-color: var(--content-surface);
		padding: 34px;
		display: flex;
		flex-direction: column;
		gap: 32px;
	}

		.option-group h4[b-5ermb8gfnl] {
			font-weight: 600;
			font-size: 30px;
			line-height: 1;
			color: var(--pink);
		}

	/*---complete packs----*/

	.packs-selectors[b-5ermb8gfnl] {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

		.packs-selectors > p[b-5ermb8gfnl] {
			font-weight: 500;
			font-size: 16px;
		}

		.packs-selectors .option-group[b-5ermb8gfnl] {
			background-color: transparent;
			padding: 0;
		}

		.packs-selectors .mixmatch-option[b-5ermb8gfnl] {
			width: 200px;
		}

		.packs-selectors .mixmatch-option > a[b-5ermb8gfnl] {
			color: var(--white);
			text-decoration: none;
		}


		.packs-selectors .mixmatch-option span.mixmatchoption-text[b-5ermb8gfnl] {
			display: flex;
			padding: 15px;
			justify-content: center;
			background: var(--black);
			font-size: 12px;
			font-weight: 600;
		}

	/*---end complete packs----*/

	.option-filter[b-5ermb8gfnl] {
		font-family: inherit;
		color: var(--content-text);
		outline: none;
		transition: border-color 0.12s ease, box-shadow 0.12s ease;
		box-sizing: border-box;
		background-color: var(--content-surface);
		padding: 34px;
		display: flex;
		flex-direction: column;
		gap: 32px;
	}

	html.dark .option-filter[b-5ermb8gfnl] {
		background: var(--content-surface);
	}

	.option-filter:focus[b-5ermb8gfnl] {
		border-color: var(--pink);
		box-shadow: 0 0 0 3px rgba(237, 61, 150, 0.15);
	}

	.option-filter[b-5ermb8gfnl]::placeholder {
		color: var(--content-text-secondary);
		font-style: italic;
		opacity: 0.7;
	}

	/* Form rows and fields inside the option-filter */
	.option-filter .form-row[b-5ermb8gfnl] {
		display: flex;
		gap: 12px;
		align-items: center; /* center controls vertically */
		flex-wrap: wrap;
	}

		/* Controls row (select + button) should align items horizontally */
		.option-filter .form-row.controls-row[b-5ermb8gfnl] {
			align-items: center;
			gap: 12px;
			margin-top: 32px;
		}

	/* Full width form-field used for labels above the controls */
	.option-filter .form-field.fullwidth[b-5ermb8gfnl] {
		width: 100%;
		padding-left: 4px; /* small inset so label aligns with inputs */
	}

	.option-filter .form-field[b-5ermb8gfnl] {
		display: flex;
		flex-direction: column;
		gap: 6px;
		min-width: 0; /* allow flex children to shrink on Safari */
	}

	.option-filter label[b-5ermb8gfnl] {
		font-weight: 600;
		font-size: 30px;
		line-height: 1;
		color: var(--pink);
	}

	.option-filter[b-5ermb8gfnl]  .form-field-selector,
	.option-filter[b-5ermb8gfnl]  input,
	.option-filter[b-5ermb8gfnl]  select {
		-webkit-appearance: none;
		appearance: none;
		height: 30px;
		color: var( --white);
		background-color: var( --black);
		border: var(--black) 1px solid;
		font-weight: 600;
		font-size: 14px;
		line-height: 14px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 0 20px;
		width: 160px;
		letter-spacing: 0.2px;
		box-sizing: border-box;
		transition:all .3s ease;
	}

	html.dark .option-filter[b-5ermb8gfnl]  .form-field-selector,
	html.dark .option-filter[b-5ermb8gfnl]  input,
	html.dark .option-filter[b-5ermb8gfnl]  select {
		background: var(--content-input-bg);
	}

	html.dark .option-filter[b-5ermb8gfnl]  select, html.dark .option-filter[b-5ermb8gfnl]  .form-field-selector {
		background: black;
	}

	/* Safari-specific fallback to ensure select doesn't collapse */
	@supports (-webkit-touch-callout: none) {
		.option-filter[b-5ermb8gfnl]  .form-field-selector,
		.option-filter[b-5ermb8gfnl]  select {
			min-width: 100px;
			padding: 8px 10px;
			min-height: 34px;
		}
	}

	.option-filter .select-container[b-5ermb8gfnl] {
		padding: 2px 4px;
		display: inline-block;
	}

		.option-filter .select-container[b-5ermb8gfnl]  select:hover {
			background: #FEBAFF;
			color: var(--black);
			border: #FEBAFF 1px solid;
		}

		.option-filter .select-container[b-5ermb8gfnl]  select:focus {
			outline: none;
		}

	html.dark .option-filter .select-container[b-5ermb8gfnl] {
		background: black;
	}

	/* Center the select control and submit button vertically while keeping label above */
	.option-filter[b-5ermb8gfnl]  .form-field-selector,
	.option-filter[b-5ermb8gfnl]  input,
	.option-filter[b-5ermb8gfnl]  select,
	.option-filter .submit-button[b-5ermb8gfnl] {
		align-self: center;
	}

	.option-filter .submit-button[b-5ermb8gfnl] {
		background: var(--pink);
		color: var(--white);
		border: none;
		padding: 10px 14px;
		border-radius: 8px;
		font-weight: 600;
		cursor: pointer;
		transition: background 0.12s ease;
	}

	.mixmatch-selectors .option-filter .submit-button:hover[b-5ermb8gfnl] {
		background: var(--light-pink);
		color: var(--white);
	}

	@media (max-width: 600px) {
		.mixmatch-options[b-5ermb8gfnl] {
			padding: 8px;
			gap: 8px;
		}

		.mixmatch-option[b-5ermb8gfnl] {
			flex: 0 0 calc(50% - 8px);
		}

		.mixmatchoption-image[b-5ermb8gfnl] {
			max-height: 64px;
		}
	}

	/*-------Studio home styles---------*/
	.studio-home[b-5ermb8gfnl] {
		display: flex;
		flex-direction: column;
		gap: 40px;
		margin: 8px 0;
	}


	.studio-home__banner[b-5ermb8gfnl] {
		width: 100%;
		padding: 55px 120px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: var(--gradient-red-pink);
		gap: 30px;
	}

	@media (max-width: 1024px) {
		.studio-home__banner[b-5ermb8gfnl] {
			flex-direction: column-reverse;
			align-items: start;
		}
	}


	@media (max-width: 768px) {
		.studio-home__banner[b-5ermb8gfnl] {
			padding: 40px;
		}
	}

	.studio-home__banner h2[b-5ermb8gfnl] {
		font-weight: 600;
		font-size: 60px;
		line-height: 70px;
		text-align: right;
		vertical-align: middle;
		color: var(--black);
		max-width: 600px;
		opacity: 0;
		transform: translateY(16px);
		animation: fadeUp2-b-5ermb8gfnl 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
		animation-delay: 300ms;
	}

@media (max-width: 1024px) {
	.studio-home__banner h2[b-5ermb8gfnl] {
		text-align: left;
	}
}

	@media (max-width: 576px) {
		.studio-home__banner h2[b-5ermb8gfnl] {
			font-size: 30px;
			line-height: 1.2;
		}
	}

	.studio-home__banner h2 span[b-5ermb8gfnl] {
		color: var(--white);
	}

	.studio-home__text[b-5ermb8gfnl] {
		color: var(--white);
		font-size: 16px;
		font-weight: 600;
		display: flex;
		flex-direction: column;
		gap: 30px;
		padding: 20px 0;
		max-width: 738px;
	}

	@media (max-width: 1024px) {
		.studio-home__text[b-5ermb8gfnl] {
			align-self: start;
		}
	}

		.studio-home__text p[b-5ermb8gfnl] {
			opacity: 0;
			transform: translateY(12px);
			animation: fadeUp2-b-5ermb8gfnl 500ms ease forwards;
			animation-delay: 100ms;
		}

	@media (max-width: 1580px) {
		.studio-home-buttons .std-btn[b-5ermb8gfnl]{
			padding: 6px;
		}
	}

	@media (max-width: 1480px) {
		.studio-home-buttons .std-btn[b-5ermb8gfnl]{
			padding: 6px 20px;
		}
	}

	.studio-home-buttons[b-5ermb8gfnl] {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 12px;
		align-items: center;
		max-width: 600px;
		flex-wrap: wrap;
	}

	.studio-home-buttons [class^="icon-"][b-5ermb8gfnl],
	.studio-home-buttons [class*=" icon-"][b-5ermb8gfnl] {
		filter: invert(1);
	}

	.dark .studio-home-buttons [class^="icon-"][b-5ermb8gfnl],
	.dark .studio-home-buttons [class*=" icon-"][b-5ermb8gfnl] {
		filter: invert(1);
	}

.std-btn[b-5ermb8gfnl] {
	opacity: 0;
	transform: translateY(12px);
	animation: fadeUp2-b-5ermb8gfnl 500ms ease forwards;
	animation-delay: 200ms;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	flex-shrink: 0;
	color: var(--white);
}

@keyframes fadeUp2-b-5ermb8gfnl {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.latest-saves[b-5ermb8gfnl] {
	margin-bottom: 40px;
	/* padding: 34px; */
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.latest-saves .scenes[b-5ermb8gfnl] {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	width: 100%;
}

.latest-saves .scene[b-5ermb8gfnl] {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	text-decoration: none;
	color: var(--content-text);
	position: relative;
	width: calc(12.5% - 8px);
	cursor: pointer;
	transition: transform 0.3s ease;
}

@media (max-width: 1440px) {
	.latest-saves .scene[b-5ermb8gfnl] {
		width: calc(16.5% - 8px);
	}
}

@media (max-width: 1280px) {
	.latest-saves .scene[b-5ermb8gfnl] {
		width: calc(25% - 8px);
	}
}

@media (max-width: 1024px) {
	.latest-saves .scene[b-5ermb8gfnl] {
		width: calc(33% - 12px);
	}
}

.latest-saves .scene:hover[b-5ermb8gfnl] {
	transform: translateY(-2px);
}

.latest-saves .scene a[b-5ermb8gfnl] {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	/* gap: 12px; */
	align-items: center;
	width: 100%;
}

/* .latest-saves .scene:hover .scene-image {
	border: 2px solid var(--pink);
} */

.latest-saves .scene-name[b-5ermb8gfnl] {
	font-weight: 400;
	font-size: 12px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	color: var(--white);
    background-color: var(--black);
    padding: 13px 20px;
	transition: background-color .3s ease-in;
}

.latest-saves .scene:hover .scene-name[b-5ermb8gfnl] {
	background-color: var(--pink);
} 

/*---saved preview styles---*/

.saved-preview[b-5ermb8gfnl] {
	display: flex;
	flex-direction: row;
	gap: 25px;
	background: var(--content-bg);
	margin-top: 8px;
	margin-bottom: 28px;
}

@media (max-width: 1024px) {
	.saved-preview[b-5ermb8gfnl]  {
		flex-direction: column;
	}
}

.saved-preview .option-group[b-5ermb8gfnl] {
	flex: 0 1 calc(50% - 13px);
	background-color: var(--content-surface);
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.dark .saved-preview .option-group[b-5ermb8gfnl] {
	background-color:#393939;
}

@media (max-width: 1024px) {
	.saved-preview .option-group[b-5ermb8gfnl] {
		flex: 0 1 100%;
	}
}

.saved-preview .scenes[b-5ermb8gfnl] {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	width: 100%;
}

.saved-preview .scene[b-5ermb8gfnl] {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	text-decoration: none;
	color: var(--content-text);
	position: relative;
	width: calc(25% - 15px);
	cursor: pointer;
	transition: transform 0.3s ease;
}

@media (max-width: 1440px) {
	.saved-preview .scene[b-5ermb8gfnl] {
		width: calc(33% - 12px);
	}
}

@media (max-width: 1280px) {
	.saved-preview .scene[b-5ermb8gfnl] {
		width: calc(50% - 10px);
	}
}

@media (max-width: 1024px) {
	.saved-preview .scene[b-5ermb8gfnl] {
		width: calc(33% - 12px);
	}
}

.saved-preview .scene:hover[b-5ermb8gfnl] {
	transform: translateY(-2px);
}

.saved-preview .scene a[b-5ermb8gfnl] {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	/* gap: 12px; */
	align-items: center;
	width: 100%;
}

.saved-preview .scene .selector[b-5ermb8gfnl] {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 11;
	display: flex;
	align-items: center;
	justify-content: center;
}

.saved-preview .scene .selector input[type="checkbox"][b-5ermb8gfnl] {
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: var(--pink);
	margin: 0;
}

.saved-preview .scene.selected .scene-image[b-5ermb8gfnl] {
	border: 2px solid var(--pink);
}

.group-header[b-5ermb8gfnl] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}

@media (max-width: 1440px) {
	.saved-preview .group-header[b-5ermb8gfnl] {
		flex-direction: column;
		align-items: start;
	}
}

@media (max-width: 1024px) {
	.saved-preview .group-header[b-5ermb8gfnl] {
		flex-direction: row;
		align-items: center;
	}
}

@media (max-width: 768px) {
	.saved-preview .group-header[b-5ermb8gfnl] {
		flex-direction: column;
		align-items: start;
	}
}


.group-header h4[b-5ermb8gfnl] {
	margin: 0;
	flex-shrink: 0;
}

.saved-preview .toolbar[b-5ermb8gfnl] {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
}

.saved-preview .toolbar-button[b-5ermb8gfnl] {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--content-border);
	border-radius: 6px;
	background: var(--content-surface);
	color: var(--content-text);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	font-family: inherit;
}

.saved-preview .toolbar-button:hover[b-5ermb8gfnl] {
	border-color: var(--pink);
	color: var(--pink);
}

.saved-preview .toolbar-button.delete[b-5ermb8gfnl] {
	color: var(--red);
	border-color: var(--red);
}

.saved-preview .toolbar-button.delete:hover[b-5ermb8gfnl] {
	background: var(--red);
	color: var(--white);
}

.saved-preview .scene .options[b-5ermb8gfnl] {
	position: absolute;
	top: 2px;
	right: 2px;
}

.saved-preview .scene .options .options-btn[b-5ermb8gfnl] {
	width: 28px;
	height: 28px;
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--outline);
	transition: background 0.15s, color 0.15s;
}

.saved-preview .scene .options .options-btn:hover[b-5ermb8gfnl]{
	background: var(--content-surface);
}

.saved-preview .scene .options .options-btn.open[b-5ermb8gfnl] {
	background: var(--pink);
	color: var(--white);
}

.saved-preview .scene-image[b-5ermb8gfnl],
.latest-saves .scene-image[b-5ermb8gfnl] {
	display: block;
	aspect-ratio: 1;
	width: 100%;
	object-fit: cover;
	border: 1px solid #E9E6E2; 
	transition: border-color 0.3s ease;
}

.saved-preview .scene-image-placeholder[b-5ermb8gfnl],
.latest-saves .scene-image-placeholder[b-5ermb8gfnl] {
	aspect-ratio: 1;
	width: 100%;
	border: 1px dashed #E9E6E2;
	background-color: var(--content-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--outline);
	font-size: 24px;
}

.saved-preview .scene-image-placeholder[b-5ermb8gfnl]::before,
.latest-saves .scene-image-placeholder[b-5ermb8gfnl]::before {
	content: '';
	display: block;
	width: 40px;
	height: 40px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23aaaaaa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.5;
}

/* .saved-preview .scene:hover .scene-image {
	border: 2px solid var(--pink);
} */

.saved-preview .scene-name[b-5ermb8gfnl] {
	font-weight: 400;
	font-size: 12px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	color: var(--white);
    background-color: var(--black);
    padding: 13px 20px;
	transition: background-color .3s ease-in;
}

.saved-preview .scene:hover .scene-name[b-5ermb8gfnl] {
	background-color: var(--pink);
}

.saved-preview .scene .submenu[b-5ermb8gfnl] {
	position: absolute;
	top: 28px;
	right: 0;
	background-color: var(--white);
	color: var(--black);
	min-width: 160px;
	z-index: 10;
	list-style: none;
	margin: 0;
	padding: 0;
	/* border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); */
}

.saved-preview .scene .submenu-item[b-5ermb8gfnl] {
	color: var(--black);
	padding: 0;
	list-style: none;
}

.saved-preview .scene .submenu-item:hover[b-5ermb8gfnl] {
	background: #f5f5f5;
}

.saved-preview .scene .submenu-item-link[b-5ermb8gfnl],
.saved-preview .scene .submenu-item-button[b-5ermb8gfnl] {
	color: var(--black);
	text-decoration: none;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	font-weight: 500;
	font-size: 12px;
		width: auto;
		padding: 8px 12px;
	box-sizing: border-box;
	background: none;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	font-family: inherit;
	gap: 8px;
	flex-direction: row;
}

.options .submenu-item button  > span:not([class^="icon-"]):not([class*=" icon-"])[b-5ermb8gfnl]{
    display: inline-block;
    width: auto;
}

.option-icon[b-5ermb8gfnl]{
	width: 18px;
    height: 18px;

}

/* .saved-preview .scene .submenu-item-link .submenu-icon,
.saved-preview .scene .submenu-item-button .submenu-icon {
	display: inline-block;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	filter: none;
	margin:0;
	padding: 0;
} */

.saved-preview .scene .submenu-item:hover .submenu-icon[b-5ermb8gfnl] {
	color: var(--pink);
	filter: brightness(0) saturate(100%) invert(56%) sepia(74%) saturate(1600%) hue-rotate(320deg) brightness(105%) contrast(102%);
}

.saved-preview .scene .submenu-item:hover .submenu-item-link[b-5ermb8gfnl],
.saved-preview .scene .submenu-item:hover .submenu-item-button[b-5ermb8gfnl] {
	color: var(--pink);
}

/* delete actions should be red (icon + text) and remain red on hover */
.saved-preview .scene .submenu-item-button.delete[b-5ermb8gfnl],
.saved-preview .scene .submenu-item-link.delete[b-5ermb8gfnl] {
	color: var(--red);
}
.saved-preview .scene .submenu-item:hover .submenu-item-button.delete[b-5ermb8gfnl],
.saved-preview .scene .submenu-item:hover .submenu-item-link.delete[b-5ermb8gfnl] {
	color: var(--red);
}



.saved-preview .scene .submenu-item:hover .submenu-item-link[b-5ermb8gfnl],
.saved-preview .scene .submenu-item:hover .submenu-item-button[b-5ermb8gfnl] {
	color: var(--pink);
}

.saved-preview .scene .submenu-item:hover .submenu-icon[b-5ermb8gfnl] {
	filter: brightness(0) saturate(100%) invert(47%) sepia(71%) saturate(1489%) hue-rotate(333deg) brightness(103%) contrast(98%);
}

/*---end saved preview styles---*/

/*===scene dialog===*/

.scene-rename-input[b-5ermb8gfnl] {
	display: block;
	width: 100%;
	padding: 14px 16px;
	border: 1.5px solid var(--content-border);
	border-radius: 7px;
	font-size: 14px;
	background: var(--content-input-bg);
	color: var(--outline);
	margin: 8px 0 28px;
	outline: none;
	box-sizing: border-box;
	transition: border 0.2s;
}

.scene-rename-input:focus[b-5ermb8gfnl] {
	border-color: var(--pink);
}

.scene-info[b-5ermb8gfnl] {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 16px;
}

.scene-info-image[b-5ermb8gfnl] {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 4px;
}

.scene-info-image-placeholder[b-5ermb8gfnl] {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed #E9E6E2;
	background-color: var(--content-bg);
}

.scene-info-image-placeholder[b-5ermb8gfnl]::before {
	content: '';
	display: block;
	width: 48px;
	height: 48px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23aaaaaa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.5;
}

.scene-info-details[b-5ermb8gfnl] {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px 20px;
	font-size: 14px;
}

.scene-info-details dt[b-5ermb8gfnl] {
	font-weight: 600;
	color: var(--content-text-secondary);
}

.scene-info-details dd[b-5ermb8gfnl] {
	color: var(--content-text);
	margin: 0;
	word-break: break-all;
}

.scene-delete-warning[b-5ermb8gfnl] {
	margin-top: 16px;
	font-size: 14px;
	color: var(--content-text);
	line-height: 1.6;
}

.scene-delete-btn[b-5ermb8gfnl] {
	background: var(--pink) !important;
	border-color: var(--pink) !important;
	color: var(--white) !important;
}

.scene-delete-btn:hover[b-5ermb8gfnl] {
	background: var(--white) !important;
	color: var(--pink) !important;
}

.dialog-backdrop[b-5ermb8gfnl] {
	height: 100vh;
	padding-top: 16px;
}

.scene-json[b-5ermb8gfnl] {
	font-family: 'Courier New', Courier, monospace;
	font-size: 13px;
	background: var(--content-surface);
	color: var(--content-text);
	padding: 16px;
	border-radius: 6px;
	overflow-x: auto;
	white-space: pre;
	margin-top: 16px;
	line-height: 1.6;
}

/*===end scene dialog===*/
/* /Components/SupplierBrowser.razor.rz.scp.css */
.page-container[b-wc7djdacwc] {
    margin: 0 auto;
    padding-top: 32px;
    padding-bottom: 40px;
}

.sticky[b-wc7djdacwc]{
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Factory Browser Section Layout */
.factory-browser-section[b-wc7djdacwc] {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    position: relative;
}

.search-row[b-wc7djdacwc] {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    margin-bottom: 24px;
}


[b-wc7djdacwc] .search-input {
    height: 30px;
    border: none;
    background: #E9E6E2;
    font-size: 14px;
    color: var(--content-text);
    padding: 0 32px;
    margin-right: -5px;
    width: 508px;
    max-width: 508px;
    box-sizing: border-box;
    font-weight: 600;
    outline: none;
    letter-spacing: 0.5px;
    box-shadow: none;
}

[b-wc7djdacwc] .search-input::placeholder {
    color: var(--content-text-secondary);
    opacity: 1;
    font-size: 14px;
    font-weight: 400;

}

/* Inverted clear button: same sizing as search-btn but white background with black border/text */
.clear-btn[b-wc7djdacwc] {
    background: var(--white);
    color: var(--black);
    /*border-radius: 24px;*/
    border: 2px solid var(--black);
    padding: 0 28px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    letter-spacing: 0.5px;
    text-transform: lowercase;
    margin-left: 8px;
    height: 30px;

}

.clear-btn:hover[b-wc7djdacwc] {
    background: var(--content-surface-hover);
}

.filters-label[b-wc7djdacwc] {
    background: var(--black);
    color: var(--white);
    border-radius: 24px;
    border: none;
    padding: 9px 32px;
    font-weight: 600;
    font-size: 1.2rem;
    cursor: pointer;
    letter-spacing: 0.6px;
    text-transform: lowercase;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
    position: relative;
    top: 0;
    z-index: 2;
    height: 44px;
    transition: background 0.15s, color 0.15s;
}

/* Active state for filters tab button */
.filters-label.active[b-wc7djdacwc] {
    background: var(--pink);
    color: var(--white);
}

/* For accessibility/focus */
.filters-label:focus[b-wc7djdacwc] {
    outline: 2px solid var(--pink);
    outline-offset: 2px;
}

.filters-icon[b-wc7djdacwc] {
    margin-right: 8px;
    vertical-align: middle;
}

.filters-icon rect[b-wc7djdacwc] {
    fill: var(--white);
}

.filter-toggles[b-wc7djdacwc] {
    display: flex;
    gap: 32px;
    margin-left: auto;
}

.toggle-label[b-wc7djdacwc] {
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--black);
    display: flex;
    align-items: center;
    gap: 8px;
}

.switch[b-wc7djdacwc] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.switch input[b-wc7djdacwc] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-wc7djdacwc] {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0;
    right: 0; bottom: 0;
    background: var(--black);
    border-radius: 24px;
    transition: background 0.2s;
}

.switch input:checked + .slider[b-wc7djdacwc] {
    background: var(--pink);
}
.slider[b-wc7djdacwc]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--white);
    border-radius: 50%;
    transition: transform 0.2s;
}
.switch input:checked + .slider[b-wc7djdacwc]:before {
    transform: translateX(20px);
    background: var(--white);
}

/* ---------- Left Sidebar Filters ---------- */
.filters-sidebar[b-wc7djdacwc] {
    width: 250px;
    min-width: 250px;
    background: var(--content-surface);
    /*border-radius: 16px;*/
    padding: 0;
    flex-shrink: 0;
}


.filters-header[b-wc7djdacwc] {
    padding: 20px 20px 12px;
}


.filters-title[b-wc7djdacwc] {
    color: var(--content-text);
    margin: 0;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 18px;
}

.filters-icon[b-wc7djdacwc] {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}


/*.icon-line {
    width: 22px;
    height: 3px;
    background: var(--content-text);
    border-radius: 3px;
    display: block;
}

.icon-line.short {
    width: 14px;
}*/

.clear-filters-btn[b-wc7djdacwc] {
    background: transparent;
    color: var(--content-text);
    border: none;
    font-size: 14px;
    font-weight: 600;
    text-transform: lowercase;
    cursor: pointer;
    padding: 0;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.clear-filters-btn:hover[b-wc7djdacwc] {
    color: var(--pink);
}

/* Toggle Switches Section */
.filter-toggles[b-wc7djdacwc] {
    padding: 16px 20px;
    border-bottom: 1px solid var(--light-grey);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toggle-item[b-wc7djdacwc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.toggle-item.disabled[b-wc7djdacwc] {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
}

.toggle-label-text[b-wc7djdacwc] {
    color: var(--content-text); 
    font-weight: 600;
    font-size: 14px;  
}

.toggle-item.disabled .toggle-label-text[b-wc7djdacwc] {
    color: var(--dark-grey);
}

/* Filter Sections */
.filter-sections[b-wc7djdacwc] {
    /*padding: 8px 0;*/
}

.dark .filter-sections[b-wc7djdacwc] {
    background: var(--content-surface);
}

.filter-section[b-wc7djdacwc] {
    border-bottom: 1px solid var(--white);
    /*background: var(--content-surface);*/
}

.filter-section:last-child[b-wc7djdacwc] {
    border-bottom: none;
}

.filter-section-header[b-wc7djdacwc] {
    width: 100%;
    background: transparent;
    border: none;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

.filter-section-header:hover[b-wc7djdacwc] {
    background: rgba(237, 61, 150, 0.08);
}

.filter-section.expanded .filter-section-header[b-wc7djdacwc] {
    /*background: var(--content-surface);*/
}

.filter-section-title[b-wc7djdacwc] {
    font-size: 14px;
    font-weight: 600;
    color: var(--content-text);
    letter-spacing: 0.3px;
}

.filter-section.expanded .filter-section-title[b-wc7djdacwc] {
    color: var(--pink);
}

.filter-arrow[b-wc7djdacwc] {
    font-size: 0.8rem;
    color: var(--content-text);
    transition: color 0.2s;
}

.filter-section.expanded .filter-arrow[b-wc7djdacwc] {
    color: var(--pink);
}

.filter-section-content[b-wc7djdacwc] {
    padding: 0 20px 16px;
    /*background: var(--content-surface);*/
}

.dark .filter-section.expanded[b-wc7djdacwc] {
    background: #393939;
}

.filter-section.expanded .filter-section-content[b-wc7djdacwc] {
    /*background: var(--content-surface);*/
}

/* Custom Checkboxes */
.filter-checkbox[b-wc7djdacwc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    position: relative;
}

.filter-checkbox input[type="checkbox"][b-wc7djdacwc],
.filter-checkbox input[type="radio"][b-wc7djdacwc] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.filter-checkbox input.hidden[b-wc7djdacwc] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-indicator[b-wc7djdacwc] {
    width: 12px;
    height: 12px;
    border: 1px solid var(--content-text);
    border-radius: 3px;
    background: var(--content-bg);
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s;
}

.filter-checkbox input[type="checkbox"]:checked + .checkbox-indicator[b-wc7djdacwc],
.filter-checkbox input[type="radio"]:checked + .checkbox-indicator[b-wc7djdacwc] {
    background: var(--pink);
    border-color: var(--pink);
}

.filter-checkbox input[type="checkbox"]:checked + .checkbox-indicator[b-wc7djdacwc]::after,
.filter-checkbox input[type="radio"]:checked + .checkbox-indicator[b-wc7djdacwc]::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0;
    width: 4px;
    height: 8px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.filter-checkbox span:not(.checkbox-indicator)[b-wc7djdacwc] {
    font-size: 12px;
    font-weight: 500;
    color: var(--content-text);
    letter-spacing: 0.2px;
}

/* Disabled Checkbox Variant */
.filter-checkbox.disabled[b-wc7djdacwc] {
    cursor: not-allowed;
    opacity: 0.4;
}

.filter-checkbox.disabled .checkbox-indicator[b-wc7djdacwc] {
    border:1px solid var(--light-grey);
    background: var(--content-surface);
    pointer-events: none;
}

.filter-checkbox.disabled span:not(.checkbox-indicator)[b-wc7djdacwc] {
    color: var(--dark-grey);
    pointer-events: none;
}

/* Results Area */
.filters-results[b-wc7djdacwc] {
    flex: 1;
    min-width: 0;
}

/* ---------- filter panel & cards ---------- */
.filters-panel[b-wc7djdacwc] {
    background: var(--pink);
    border-radius: 20px;
    padding: 24px 28px 16px 28px;
    margin-bottom: 24px;
    margin-top: 0;
    position: relative;
    z-index: 1;
    width: 100%;
}

.filter-segments[b-wc7djdacwc] {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

/* Card: wider white box so long titles sit on one line */
.filter-card[b-wc7djdacwc] {
    background: var(--content-bg);
    border-radius: 12px;
    padding: 20px 20px 18px 20px;
    min-width: 320px;                 /* width increased to keep titles on one line */
    max-width: 360px;
    max-height: 260px;                /* allow vertical scroll */
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--content-text) transparent; /* firefox fallback */
    position: relative;
}

/* Title styling: bigger, bold, and pink thin divider under it */
.filter-card-title[b-wc7djdacwc] {
    font-weight: 900;
    font-size: 1.15rem;
    color: var(--content-text);
    margin: 0 0 12px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--pink); /* thin pink divider under title */
    letter-spacing: 0.6px;
}

/* Options list: slightly reduced text for density, roomy spacing */
.filter-options[b-wc7djdacwc] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;               /* slightly reduced gap */
    padding-right: 8px; /* room for custom scrollbar */
}

/* Each label (option) */
.filter-options label[b-wc7djdacwc] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;      /* decreased slightly to fit more lines */
    font-weight: 600;
    color: var(--content-text);
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}

/* Make the native checkbox visually larger and with brand accent */
.filter-options input[type="checkbox"][b-wc7djdacwc] {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--pink); /* modern browsers will color the check */
    transform: translateY(-1px); /* visually align with text */
}

/* Add some padding to the right so long text doesn't collide with scrollbar */
.filter-card .filter-options[b-wc7djdacwc] {
    padding-right: 12px;
}

/* ---------- Custom scrollbar to match image ---------- */
/* Webkit browsers */
.filter-card[b-wc7djdacwc]::-webkit-scrollbar {
    width: 12px;
}

.filter-card[b-wc7djdacwc]::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
    margin-top: 6px;
    margin-bottom: 6px;
}

.filter-card[b-wc7djdacwc]::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(to bottom, var(--content-text) 0% 62%, var(--pink) 62% 100%);
    box-shadow: none;
    border: 2px solid transparent; /* keep thumb crisp against track */
}

/* Add a small pink indicator on the very right (visual only) */
.filter-card[b-wc7djdacwc]::after {
    content: "";
    position: absolute;
    right: 6px;
    top: 40%;
    width: 6px;
    height: 70%;
    background: linear-gradient(to bottom, transparent 0%, transparent 60%, var(--pink) 60%, var(--pink) 100%);
    border-radius: 4px;
    pointer-events: none; /* decorative only */
    transform: translateY(-50%);
    opacity: 0.9;
}

/* On hover, make thumb a bit darker for affordance */
.filter-card:hover[b-wc7djdacwc]::-webkit-scrollbar-thumb {
    filter: brightness(0.92);
}

/* Small-screen adjustments */
@media (max-width: 1200px) {
    /* reduce min-width slightly at medium widths to keep cards in view */
    .filter-card[b-wc7djdacwc] {
        min-width: 280px;
        max-width: 320px;
    }
}

@media (max-width: 900px) {
    .filter-segments[b-wc7djdacwc] {
        flex-wrap: wrap;
        gap: 10px;
    }
    .filter-card[b-wc7djdacwc] {
        min-width: 180px;   /* relaxed on small screens so cards wrap */
        max-width: 100%;
        max-height: 200px;
        padding: 16px;
    }
    .filter-card-title[b-wc7djdacwc] {
        font-size: 1rem;
    }
    .filter-options label[b-wc7djdacwc] {
        font-size: 0.92rem;
    }
}

/* fallback for firefox scrollbar look */
.filter-card[b-wc7djdacwc] {
    scrollbar-color: var(--black) transparent;
}

/* ---------- form row and selectors ---------- */
.filter-row[b-wc7djdacwc] {
    display: flex;
    gap: 0; /* Remove extra gap, use width for separation */
    margin-top: 12px;
    width: 100%;
}

.form-field[b-wc7djdacwc] {
    display: flex;
    flex-direction: column;
    flex: 1 1 50%; /* flexible, but defaults to half width */
    min-width: 0; /* Prevent overflow for long content */
    margin-right: 0; /* Remove margin between fields */
    padding-right: 16px; /* Add a bit of inner spacing for site country */
    padding-left: 16px;  /* Add a bit of inner spacing for client approved */
}

.form-field:first-child[b-wc7djdacwc] {
    padding-left: 0; /* Remove left padding for first column */
}

.form-field:last-child[b-wc7djdacwc] {
    padding-right: 0; /* Remove right padding for last column */
}

.form-field label[b-wc7djdacwc] {
    font-size: 1.05rem;
    font-weight: 900;
    margin-bottom: 8px;
    color: var(--black);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-field select[b-wc7djdacwc],
.form-field input[b-wc7djdacwc] {
    border-radius: 8px; /* inner element radius smaller since container is rounded */
    border: none; /* container provides visual border */
    padding: 8px 10px; /* reduced padding because container adds outer padding */
    font-size: 1.15rem; /* keep larger font for readability */
    background: transparent; /* inherit container background */
    color: var(--black);
    font-weight: 600;
    outline: none;
    box-shadow: none; /* remove shadow as requested */
    width: 100%;
    appearance: none;
    transition: border-color 0.15s;
}

.form-field select:focus[b-wc7djdacwc],
.form-field input:focus[b-wc7djdacwc] {
    border-color: var(--pink);
}

/* container around selects/inputs to provide rounded white background and padding */
.select-container[b-wc7djdacwc] {
    background: var(--white);
    border-radius: 14px;
    padding: 6px 10px; /* inner padding around the control */
    border: 1px solid var(--light-grey);
}

/* make containers fill their parent width */
select.select-container[b-wc7djdacwc] {
    width: 100%;
    box-sizing: border-box;
}

/* Safari / WebKit flexbox quirk fixes:
   - ensure flex items can shrink to fit by forcing min-width: 0 on the container
   - make the inner select/input use full width and have an explicit white background
   - remove native appearance where appropriate so sizing is consistent
*/
.select-container[b-wc7djdacwc] {
    min-width: 0; /* allow the container to shrink inside a flex column on Safari */
}

/* Explicit rules for the InputSelect/select elements to behave consistently across browsers */
.select-container > .form-field-selector[b-wc7djdacwc],
.select-container select[b-wc7djdacwc],
.select-container input[b-wc7djdacwc] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background-color: var(--white) !important; /* enforce white background in Safari */
    -webkit-appearance: none; /* normalize appearance in WebKit */
    -moz-appearance: none;
    appearance: none;
}

/* restore a predictable padding-right for native dropdown arrow area if you plan to add a custom chevron */
.select-container > .form-field-selector[b-wc7djdacwc] {
    padding-right: 28px; /* leave space for an inline chevron if added later */
}

/* explicit selector class for the InputSelects to ensure larger text and white background */
.form-field-selector[b-wc7djdacwc] {
    font-size: 1.2rem; /* increase font size */
    font-weight: 600;
    background: var(--white) !important; /* ensure visible white background */
    color: var(--black);
    width: 100%;
    border: none;
    padding: 6px 8px; /* inner padding to align with container */
}

/* ensure the select uses full width and block layout */
.form-field-selector[b-wc7djdacwc],
.form-field-selector select[b-wc7djdacwc],
.form-field-selector input[b-wc7djdacwc] {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* ---------- pills and remove buttons ---------- */
.filter-pill[b-wc7djdacwc] {
    background: var(--black);
    border: 1.5px solid var(--black);
    color: var(--white);
    font-weight: 500;
    padding: 5px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 8px;
    font-size: 12px;
    letter-spacing: 0.3px;
}

/* Inverted remove filters button: white background, black text/border
   Reduced font-size per request */
.remove-filters-btn[b-wc7djdacwc] {
    background: transparent;
    color: var(--outline);
    border: 1px solid var(--outline);
    /*border-radius: 16px;*/
    font-weight: 600;
    padding: 8px 10px;    /* slightly narrower */
    font-size: 12px;   /* reduced text size */
   line-height: 12px;
    cursor: pointer;
    letter-spacing: 0.5px;
}

.remove-filters-btn:hover[b-wc7djdacwc]{
    background: var(--black);
    color: var(--white);
    border: 1px solid var(--black);
}

/* small circular close button inside each pill:
   white background, black "×" text, circular, compact */
.remove-btn[b-wc7djdacwc] {
    background: var(--white);
    color: var(--black);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    width: 8px;
    height: 10px;
    min-width: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 5px;
    font-weight: 900;
    cursor: pointer;
}

/* If you want a slightly stronger outline on the circle against black pill */
.filter-pill .remove-btn[b-wc7djdacwc] {
    border: 1px solid rgba(0,0,0,0.25);
}

/* hover affordance */
.remove-btn:hover[b-wc7djdacwc] {
    background: var(--content-surface-hover);
}

/* ensure the × inside the button doesn't inherit uppercase transform */
.remove-btn[b-wc7djdacwc],
.remove-btn *[b-wc7djdacwc] {
    text-transform: none;
}

/* ---------- rest of styles remain unchanged (table, options, submenu etc.) ---------- */
.applied-filters[b-wc7djdacwc] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.table-container[b-wc7djdacwc] {
    background: var(--content-bg);
    border-radius: 14px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}

.data-table th.table-header.entity[b-wc7djdacwc], .data-table th.table-header.site-name[b-wc7djdacwc]{
    min-width: 150px;
}

.data-table th.table-header span.laptop[b-wc7djdacwc]{
    display: none;
}

@media (max-width: 1600px) {
    .data-table th.table-header span.laptop[b-wc7djdacwc]{
        display: inline;
    }

    .data-table th.table-header span.desktop[b-wc7djdacwc]{
    display: none;
}
}


.status-cell span[b-wc7djdacwc] {
    font-weight: 600;
    font-size: 14px;
}
.status-pending[b-wc7djdacwc] {
    color: var(--yellow);
}
.status-complete[b-wc7djdacwc] {
    color: #1BC47D;
}
.status-rejected[b-wc7djdacwc] {
    color: var(--pink);
}
/* .data-table td.capabilities {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    min-height: 1em;
    vertical-align: top;
    height: 100%;
} */



.data-table td.capabilities > span[b-wc7djdacwc]{
    margin-right: 10px;
    font-weight: 400;
    white-space: nowrap;
}

.data-table td.capabilities > span:not(:last-child)[b-wc7djdacwc]{
    margin-bottom: 5px;
}

.data-table td.capabilities > span:not(.ellipsis)[b-wc7djdacwc] {
    display: block;
}

.data-table td.capabilities > span.ellipsis:not(:last-child)[b-wc7djdacwc]::after {
  content: " ...";
}
 

.capability-tag[b-wc7djdacwc] {
    color: var(--pink);
    background: var(--light-pink);
    border-radius: 12px;
    padding: 2px 10px;
    margin-right: 2px;
    font-size: 0.98em;
    font-weight: 600;
}

.expand-capabilities-btn[b-wc7djdacwc] {
    background: transparent;
    color: var(--pink);
    border: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: underline;
}

.expand-capabilities-btn:hover[b-wc7djdacwc] {
    transform: translateY(-2px);
}

/* Text color modifiers for semantic tag colors */
.capability.green[b-wc7djdacwc], .status-green[b-wc7djdacwc] {
    color: var(--green); /* green text from global variable */
}
.capability.yellow[b-wc7djdacwc], .status-yellow[b-wc7djdacwc] {
    color: var(--yellow); /* yellow text (uses existing variable) */
}
.capability.red[b-wc7djdacwc], .status-red[b-wc7djdacwc] {
    color: var(--pink); /* red/pink text */
}
.capability.grey[b-wc7djdacwc], .status-grey[b-wc7djdacwc] {
    color: var(--dark-grey); /* gray text */
}
.capability.orange[b-wc7djdacwc], .status-orange[b-wc7djdacwc] {
    color: var(--orange); /* green text from global variable */
}

/* Responsive tweaks included above */

.factory-link[b-wc7djdacwc], .entity-link[b-wc7djdacwc] {
    color: var(--content-text) !important;
}
.factory-link:hover[b-wc7djdacwc], .entity-link:hover[b-wc7djdacwc] {
    text-decoration: none;
    color: var(--pink) !important;
}

.factory-link[b-wc7djdacwc]{
    text-decoration: none;
}

.factory-link:hover[b-wc7djdacwc] {
    text-decoration: underline;
    color: var(--pink);
}



/*--------------table------------------*/
.data-table thead tr[b-wc7djdacwc] {
    border-bottom:none;
}

.data-table tr[b-wc7djdacwc] {
    border-bottom: #F5F5F5 solid 1px;
}

.dark .data-table tr[b-wc7djdacwc] {
    border-bottom: #F5F5F5 solid 1px;
}

.data-table tr:last-child[b-wc7djdacwc], .dark .data-table tr:last-child[b-wc7djdacwc] {
    border-bottom: none;
}

/* ---------- Pagination ---------- */
.pagination[b-wc7djdacwc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px 0;
    margin-top: 20px;
}

.page-info[b-wc7djdacwc] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--black);
    text-transform: lowercase;
    letter-spacing: 0.3px;
}

.prev-page[b-wc7djdacwc],
.next-page[b-wc7djdacwc] {
    background: var(--black);
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 10px;
    border: var(--black) solid 1px;
    border-radius: 24px;
    padding: 8px 24px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: all .3s ease;
}

.prev-page:hover[b-wc7djdacwc],
.next-page:hover[b-wc7djdacwc] {
    background: var(--white);
    color: var(--black);
}

.prev-page:active[b-wc7djdacwc],
.next-page:active[b-wc7djdacwc] {
    transform: translateY(0px);
}

.prev-page:disabled[b-wc7djdacwc],
.next-page:disabled[b-wc7djdacwc] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ---------- No Results Message ---------- */
.no-results[b-wc7djdacwc] {
    text-align: center;
    padding: 60px 40px;
    background: var(--panel-gray);
    border-radius: 24px;
    margin: 40px 0;
}

.no-results-message[b-wc7djdacwc] {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--black);
    margin: 0 0 16px 0;
    letter-spacing: 0.3px;
}

.no-results-hint[b-wc7djdacwc] {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--dark-grey);
    margin: 0;
    letter-spacing: 0.2px;
}

/* ---------- Filter Select ---------- */
[b-wc7djdacwc] .filter-select {
    width: 100%;
    padding: 3px;
    border: 1px solid var(--light-grey);
    border-radius: 8px;
    background: var(--white);
    font-size: 1rem;
    font-weight: 500;
    color: var(--black);
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-wc7djdacwc] .filter-select:hover {
    border-color: var(--black);
}

[b-wc7djdacwc] .filter-select:focus {
    border-color: var(--black);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

option[disabled][b-wc7djdacwc] {

    color: var(--light-grey);
}

/* /Components/ThemeSelector.razor.rz.scp.css */
.theme-button[b-r9b4kynrky] {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.theme-button:hover[b-r9b4kynrky] {
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-secondary-color);
}

.theme-button:focus[b-r9b4kynrky] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}