.sidepanel-header {
    position: sticky;
    top: 0;
    background: white;
    z-index: 20;
    padding: 1rem;
    /* --panel-header-height: calc(1rem * 2 + 1.6em); */
    /* padding + line height */
    flex-shrink: 0;
    box-shadow: -4px 0 18px rgba(0, 0, 0, 0.08);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* Match expand/contract icon color to Bootstrap .btn-close look */
.sidepanel-header #panel-expand-toggle .bi {
    color: rgba(0, 0, 0, 0.5);
    font-size: 1rem;
}

.sidepanel-header #panel-expand-toggle:hover .bi,
.sidepanel-header #panel-expand-toggle:focus .bi {
    color: rgba(0, 0, 0, 0.75);
}

.sidepanel-tabs {
    position: sticky;
    top: 70px;
    /* top: var(--panel-header-height); */
    /* match the height of your header */
    background: white;
    z-index: 19;
    padding: 0.75rem 1rem;
    /* matches p-3 */
    margin: 0;
    border-bottom: 1px solid #e5e5e5;
    flex-shrink: 0;
}

.sidepanel-tabs .nav-link {
    color: #6c757d;
    /* bootstrap's text-muted */
}

.sidepanel-tabs .nav-link:hover {
    color: #343a40;
}

.sidepanel-tabs .nav-link.active {
    color: #000;
    font-weight: 500;
    border-bottom-color: #c62828;
}

.sidepanel-section {
    padding: 1rem;
    padding-bottom: 2rem;
    flex-grow: 1;
    /* Takes ALL remaining vertical space */
    overflow-y: auto;
    /* THIS is the scrollbar */
    min-height: 0;
    /* same as p-3 */
}

#sidepanel-container {
    position: absolute;
    top: 0;
    right: 0;

    /* CRITICAL: It MUST fill the height of its parent (.content-wrapper) */
    height: 100%;

    width: 0;
    overflow: hidden;
    /* z-index: 1050; */
    /* Ensure it overlaps content */
    transition: width 0.3s ease;
}

.sidepanel {
    /* CRITICAL: Must fill the container (100% of #sidepanel-container) */
    width: 100%;
    height: 100%;

    /* CRITICAL: Define the internal Flex structure */
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Important for flex children */

    /* Apply all border/shadow styles here */
    background: #ffffff;
    border-left: 1px solid #dcdcdc;
    box-shadow: -4px 0 18px rgba(0, 0, 0, 0.08);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}



body.sidepanel-open #sidepanel-container {
    /* width: 450px; */
    width: 49%;
    overflow: visible;
    /* panel open width */
    /* max-width: 480px; optional safety limit */
    /* min-width: 320px; optional minimum */
}

#main-content-wrapper {
    transition: margin-right 0.3s ease;

    /* REMOVE: height: 100vh; */
    /* REMOVE: overflow-y: auto; */

    flex-grow: 1;
    /* Keep this: ensures it fills all space in .content-wrapper */
    display: flex;
    flex-direction: column;
    /* CRITICAL: To allow the card to take up 100% of its height */
    /* flex-direction: column; */
    min-height: 0;
    overflow-y: visible;
}

/* When the side panel is open, shrink main content */
.sidepanel-open #main-content-wrapper {
    /* margin-right: 450px; */
    margin-right: 50%;
    /* must match panel width */
}

/* Expanded (fullscreen) mode: override widths and layout */
body.sidepanel-open.sidepanel-expanded #sidepanel-container {
    width: 100%;
}

body.sidepanel-open.sidepanel-expanded #main-content-wrapper {
    margin-right: 0;
}

body.sidepanel-open .new-label {
    display: none;
}


@media (max-width: 768px) {
    body.sidepanel-open #main-content-wrapper {
        margin-right: 0;
        /* do NOT push content */
    }

    body.sidepanel-open #sidepanel-container {
        width: 100%;
        /* full overlay */
    }

    /* Hide 'More' label in sidepanel header on mobile */
    .sidepanel-header .more-label {
        display: none;
    }

    /* On mobile, expanded behaves the same (full overlay, no push) */
    body.sidepanel-open.sidepanel-expanded #sidepanel-container {
        width: 100%;
    }

    body.sidepanel-open.sidepanel-expanded #main-content-wrapper {
        margin-right: 0;
    }
}


.formpanel-container {
    /* border-top-left-radius: 12px; */
    /* border-top-right-radius: 12px; */
    border-radius: 12px;

}

.formpanel {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    z-index: 25;
    box-shadow: -4px 0 18px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
}

/* the form itself must be a flex column and allow children to shrink */
.form-panel-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* fill available height */
    min-height: 0;
    /* CRITICAL: allows child to scroll */
    border-radius: 12px;

}

/* header */
.form-panel-header {
    flex: 0 0 auto;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    padding: 1rem;
    z-index: 2;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* scroll wrapper: this is the element that actually scrolls */
.form-panel-scroll {
    flex: 1 1 auto;
    min-height: 0;
    /* CRITICAL: lets this element shrink and scroll */
    overflow-y: auto;
    margin-bottom: 2rem;
}

/* inner body (optional styling) */
.form-panel-body {
    padding: 1rem;
}

/* footer inside the form, stays below the scroll area */
.form-panel-footer {
    flex: 0 0 auto;
    background: #fff;
    border-top: 1px solid #e5e5e5;
    padding: 1rem;
    padding-bottom: 2rem;
    z-index: 3;
    position: sticky;
    bottom: 0px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* #table-container {
    opacity: 0.05;
    animation: fadeIn 0.01s ease-in forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
} */

/* #table-container {
    opacity: 0;
    transition: opacity 0.25s ease-in;
} */



.table-active {
    background-color: #B3E0FF !important;
    /* light blue */
    transition: background-color 0.3s ease;
}

/* .part-row.selected {
    background-color: #fff3cd !important;
    transition: background-color 0.3s ease;
} */

.flash-highlight {
    background-color: #FFFACD !important;
    transition: background-color 0.5s ease;
}

/* 1. Main Table Container Styling */
.styled-inventory-table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    /* subtle shadow for floating effect */
    background-color: white;
    border-radius: 8px;
    /* Slightly rounded corners */
    overflow: hidden;
    /* Ensures rounded corners clip content */
}

/* 2. Table Header (thead) Styling */
.styled-inventory-table thead {
    border-bottom: 2px solid #e0e0e0;
    /* A distinct separator line under the header */
}

.styled-inventory-table th {
    text-align: left;
    padding: 12px 16px;
    /* font-size: 11px; */
    font-weight: 600;
    color: #666;
    /* Slightly muted color for header text */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}


/* 3. Table Body (tbody) Styling */
.styled-inventory-table td {
    padding: 12px 16px;
    /* font-size: 14px; */
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    /* Thin, light separator between rows */
    vertical-align: middle;
}

/* Remove the border from the very last row */
.styled-inventory-table tbody tr:last-child td {
    border-bottom: none;
}

/* Hover effect for rows */
.styled-inventory-table tbody tr:hover {
    /* background-color: #3498DB; */
    cursor: pointer;
}

td.part-number {
    color: var(--color-info);
    font-weight: bold;
    /* text-decoration: underline; */
}

/* .styled-inventory-table tbody tr:hover td {
    color: #f0f0f0;
} */


/* Checkbox styling */
input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: #1a73e8;
    /* Change checkbox color */
}


/* 1. Ensure the parent container fills the available height */
.full-height-card-container {
    flex-grow: 1;
    display: flex;
    /* Makes the card fill its space */
    flex-direction: column;
}

/* 2. The Card itself must be a Flex Column */
.modern-scroll-card {
    flex-grow: 1;
    /* Card takes up all height */
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Important for flex children */

    /* Your existing styling */
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
}

/* 3. The Header is fixed height */
.modern-card-header {
    flex-shrink: 0;
    border-top-left-radius: 0.75rem !important;
    border-top-right-radius: 0.75rem !important;
    background-color: #ffffff;
    border-bottom: 1px solid rgba(8, 6, 9, 1);
    font-size: 1.2rem;
    font-weight: 500;
    /* color: #333; */
    color: #c71a1a;
}

/* 4. The Card Body takes the remaining space and scrolls */
.card-body-scroll-area {
    flex-grow: 1;
    /* Takes ALL remaining space */
    overflow-y: auto;
    /* CRITICAL: Card Body is now the scrollbar */
    min-height: 0;

    /* Note: Remove p-3 from here if you want content padding to scroll with it,
       and apply it inside an inner div instead. */
}

/* Sidepanel expand toggle compact styling to match .btn-close */
/* .sidepanel-header #panel-expand-toggle {
    padding: 0;
    line-height: 1;
    background: transparent;
    border: 0;
} */