:root {
    --wq-blue: #2C3E50;
    --wq-green: #18BC9C;
    --wq-light-gray: #f8f9fa;
    --wq-text-dark: #2c3e50;
}

.wq-header {
    background-color: var(--wq-blue);
    color: white;
    padding: 15px 0;
}

.wq-btn-primary {
    border-color: var(--wq-green);
    color: var(--wq-green);
}

.wq-btn-primary-active {
    background-color: var(--wq-green);
    border-color: var(--wq-green);
    color: white;
}

.wq-btn-primary:hover {
    background-color: #149c82;
    border-color: #149c82;
    color: white;
}

.nav-tabs .nav-link {
    color: var(--wq-blue);
    font-weight: 500;
}

.nav-tabs .nav-link.active {
    color: var(--wq-green);
    border-bottom: 3px solid var(--wq-green);
}

.card {
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.form-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #555;
}

/* Generator Specific */
#item-list-container .item-row {
    background: white;
    border: 1px solid #e9ecef;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    position: relative;
}

/* Group Label Styling - Light Gray Background */
.item-row.label-row {
    background-color: #d1d5db !important; /* Slightly darker gray to be distinct */
    border-left: 4px solid var(--wq-blue);
    color: #2C3E50;
}

.img-preview-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
}

#preview-frame {
    width: 100%;
    height: 800px;
    border: 1px solid #ddd;
    background: white;
}

/* Manager Specific */
.status-badge {
    font-size: 0.8rem;
    padding: 5px 10px;
    border-radius: 20px;
}

.table-hover tbody tr:hover {
    background-color: #f1f1f1;
}

.action-icon {
    cursor: pointer;
    font-size: 1.2rem;
    margin: 0 5px;
    color: #929797;
    transition: color 0.2s;
}

.action-icon:hover {
    color: var(--wq-blue);
}

.action-icon.delete:hover {
    color: #e74c3c;
}

.value-reset-icon {
    cursor: pointer;
    margin: 0 5px;
    color: #7f8c8d;
    transition: color 0.2s;
}

.value-reset-icon:hover {
    color: #ce3e12;
}