#monster-contracts-layout {
    display: flex; /* Keep layout */
    flex-direction: column; /* Keep layout */
    height: calc(100vh - 5rem); /* Keep height */
    padding: 1.5rem; /* Keep padding */
    background-color: var(--clay-darkest); /* Use theme variable */
    color: var(--clay-text-primary); /* Use theme variable */
    gap: 1.5rem; /* Add gap */
}

#contracts-header {
    display: flex; /* Keep layout */
    align-items: center; /* Keep layout */
    gap: 1.5rem; /* Keep spacing */
    /* Removed bottom margin/padding/border - handled by main layout gap */
    flex-shrink: 0; /* Prevent shrinking */
}

#contracts-header .back-button {
    /* Styles handled by theme */
}

#contracts-header h1 {
    font-size: 1.5rem; /* Adjusted size */
    font-weight: 600; /* Adjusted weight */
    color: var(--clay-text-primary); /* Ensure color */
    margin: 0; /* Remove default margin */
}

#contracts-content {
    display: grid; /* Keep layout */
    grid-template-columns: 1fr 2fr; /* Keep layout */
    gap: 1.5rem; /* Keep spacing */
    flex-grow: 1; /* Keep layout */
    overflow: hidden; /* Keep layout */
}

#contracts-list-column, #contract-details-column {
    background: var(--gradient-surface); /* Use theme variable */
    border: 1px solid var(--clay-border); /* Use theme variable */
    border-radius: 0.75rem; /* Keep rounding */
    padding: 1rem; /* Adjusted padding */
    overflow-y: auto; /* Keep layout */
    box-shadow: var(--clay-shadow); /* Use theme variable */
}
#contracts-list-column {
    padding-right: 0.5rem; /* Scrollbar padding */
}
#contract-details-column {
    display: flex; /* Allow placeholder centering */
    flex-direction: column; /* Stack details vertically */
}


.contract-list-item {
    padding: 1rem; /* Keep padding */
    border-radius: 0.5rem; /* Keep rounding */
    margin-bottom: 0.75rem; /* Adjusted margin */
    cursor: pointer; /* Keep interaction */
    border: 1px solid var(--clay-border); /* Use theme variable */
    border-left-width: 4px; /* Adjust border width */
    transition: all 0.2s; /* Keep transition */
    background-color: var(--clay-dark); /* Use theme variable */
    color: var(--clay-text-secondary); /* Use theme variable */
}
.contract-list-item h4 {
    color: var(--clay-text-primary); /* Brighter title */
    margin-bottom: 0.3rem; /* Add spacing */
    font-size: 0.95rem; /* Adjust size */
}
.contract-list-item p {
    font-size: 0.8rem; /* Adjust size */
    color: var(--clay-text-muted); /* Use theme variable */
    line-height: 1.4; /* Adjust line height */
    margin: 0; /* Remove default margin */
}

/* REMOVED HOVER EFFECT FOR CONTRACT LIST ITEM
.contract-list-item:hover {
    border-color: var(--clay-focus);
    background-color: var(--clay-medium);
    transform: translateX(2px);
} */

/* Rarity Colors */
.contract-list-item.common-contract { border-left-color: var(--clay-text-tertiary); }
.contract-list-item.uncommon-contract { border-left-color: var(--clay-success); }
.contract-list-item.rare-contract { border-left-color: var(--clay-info); }

.contract-list-item.selected {
    border-color: var(--clay-focus); /* Use theme variable */
    background-color: var(--clay-medium); /* Use theme variable */
    box-shadow: inset 0 0 8px rgba(0,0,0,0.2); /* Inner shadow */
}

.contract-list-item.active-contract {
    border-color: var(--clay-success); /* Use theme variable */
    background-color: rgba(76, 175, 80, 0.1); /* Greenish tint */
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.2); /* Subtle green glow */
}
.contract-list-item.active-contract.selected {
    /* Ensure active selected has combined styles */
    border-color: var(--clay-success);
    background-color: rgba(76, 175, 80, 0.15); /* Slightly darker green tint */
}


.placeholder-text {
    display: flex; /* Keep layout */
    justify-content: center; /* Keep layout */
    align-items: center; /* Keep layout */
    height: 100%; /* Keep layout */
    color: var(--clay-text-muted); /* Use theme variable */
    text-align: center;
}

.details-header {
    display: flex; /* Keep layout */
    align-items: center; /* Keep layout */
    gap: 1rem; /* Keep spacing */
    margin-bottom: 1rem; /* Keep spacing */
    padding-bottom: 1rem; /* Add padding */
    border-bottom: 1px solid var(--clay-border); /* Use theme variable */
}

.details-header img {
    width: 50px; /* Adjusted size */
    height: 50px; /* Adjusted size */
    object-fit: contain; /* Keep layout */
    background-color: var(--clay-dark); /* Use theme variable */
    border: 1px solid var(--clay-border); /* Use theme variable */
    border-radius: 0.375rem; /* Adjusted rounding */
    padding: 0.25rem; /* Add padding */
    flex-shrink: 0;
}

.details-header h3 {
    font-size: 1.25rem; /* Adjusted size */
    font-weight: 600; /* Adjusted weight */
    color: var(--clay-text-primary); /* Use theme variable */
    margin: 0;
}

#contract-details-column > p { /* Target description */
    font-size: 0.9rem;
    color: var(--clay-text-secondary);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.details-section {
    margin-top: 1.5rem; /* Keep spacing */
}

.details-section h4 {
    font-size: 1rem; /* Adjusted size */
    font-weight: 600; /* Keep weight */
    color: var(--clay-text-tertiary); /* Use theme variable */
    margin-bottom: 0.75rem; /* Keep spacing */
    border-bottom: 1px solid var(--clay-border); /* Add divider */
    padding-bottom: 0.3rem; /* Add padding */
}

.reward-list, .target-info {
    list-style: none; /* Keep layout */
    padding: 0; /* Keep layout */
}
.target-info p {
    font-size: 0.9rem;
    color: var(--clay-text-secondary);
    margin-bottom: 0.5rem;
}

.reward-item {
    display: flex; /* Keep layout */
    align-items: center; /* Keep layout */
    gap: 0.75rem; /* Keep spacing */
    background-color: var(--clay-dark); /* Use theme variable */
    border: 1px solid var(--clay-border); /* Use theme variable */
    padding: 0.4rem 0.6rem; /* Adjusted padding */
    border-radius: 0.375rem; /* Keep rounding */
    margin-bottom: 0.5rem; /* Keep spacing */
    font-size: 0.85rem; /* Adjusted size */
}

.reward-item img {
    width: 20px; /* Adjusted size */
    height: 20px; /* Adjusted size */
}

.action-buttons {
    margin-top: auto; /* Push buttons to bottom */
    padding-top: 1.5rem; /* Add spacing above buttons */
    border-top: 1px solid var(--clay-border); /* Add divider */
    display: flex; /* Keep layout */
    gap: 1rem; /* Keep spacing */
}

.contract-btn {
    /* Styles handled by clay-theme.css */
    padding: 0.6rem 1.2rem; /* Adjusted padding */
    font-size: 0.9rem; /* Adjusted size */
    flex-grow: 1; /* Keep layout */
}

.accept-btn { /* Specific styles if needed */ }
.accept-btn:disabled { /* Specific styles if needed */ }
.abandon-btn { /* Specific styles if needed */ }