:root {
    --bronze: #a66f3b;
    --beige: #e1c5ab;
    --black: #000000;
    --white: #ffffff;
    --gray: #f4f4f4;
}

body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0; display: flex; background: var(--gray); }

/* Sidebar Navigation */
.sidebar { width: 250px; background: var(--black); color: var(--white); min-height: 100vh; position: fixed; }
.sidebar-header { background: var(--bronze); padding: 25px; text-align: center; font-weight: bold; letter-spacing: 1px; }
.nav-item { padding: 15px 25px; display: block; color: var(--beige); text-decoration: none; border-bottom: 1px solid #222; transition: 0.3s; }
.nav-item:hover { background: var(--bronze); color: var(--white); }

/* Layout Containers */
.main-content { margin-left: 250px; padding: 40px; width: 100%; box-sizing: border-box; }
.card { background: var(--white); padding: 30px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border-top: 4px solid var(--bronze); margin-bottom: 25px; }

/* Tables */
table { width: 100%; border-collapse: collapse; margin-top: 20px; background: white; }
th { background: var(--beige); padding: 12px; text-align: left; color: var(--black); font-size: 0.9em; }
td { padding: 12px; border-bottom: 1px solid #eee; font-size: 0.95em; }

/* Buttons */
.btn { background: var(--bronze); color: white; border: none; padding: 12px 24px; cursor: pointer; border-radius: 2px; text-decoration: none; display: inline-block; font-weight: bold; }
.btn:hover { opacity: 0.9; }

/* Description Popup Logic */
.desc-popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: var(--bronze);
    text-decoration: underline;
}

.desc-popup .popup-text {
    visibility: hidden;
    width: 250px;
    background-color: var(--black);
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Position above the text */
    left: 50%;
    margin-left: -125px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.85em;
    line-height: 1.4;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2);
}

.desc-popup:hover .popup-text {
    visibility: visible;
    opacity: 1;
}

/* Table Sorting Styles */
th[role="button"] {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 25px !important;
}

/* Arrows provided by table-sort-js */
.table-sort th.order-asc::after {
    content: " ▲";
    font-size: 10px;
    position: absolute;
    right: 8px;
}

.table-sort th.order-desc::after {
    content: " ▼";
    font-size: 10px;
    position: absolute;
    right: 8px;
}

/* Hide arrows on columns we don't want to sort (Description & Restock) */
.disable-sort {
    cursor: default !important;
}
.disable-sort::after {
    content: "" !important;
}