.contract-picker-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: .45rem;
}

.contract-offer-groups {
    flex: 1 1 340px;
    min-width: 0;
    display: grid;
    gap: .75rem;
    align-content: start;
}

.contract-offer-group h4 {
    margin: 0;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-secondary, #999);
}

.contract-offer-group > p {
    color: var(--text-secondary, #999);
    font-size: .68rem;
    margin: .12rem 0 .3rem;
}

.contract-offer-card {
    align-items: center;
    border: 1px solid var(--border, #333);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    gap: .55rem;
    margin-top: .3rem;
    padding: .45rem .6rem;
    transition: border-color .15s ease, background .15s ease;
}

.contract-offer-card:hover,
.contract-offer-card:focus-within,
.contract-offer-card.selected {
    background: var(--bg-card-hover, rgba(254, 249, 129, .06));
    border-color: var(--accent, #fef981);
}

.contract-offer-card input { margin: 0; flex-shrink: 0; }
.contract-offer-card span { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.contract-offer-card strong { font-size: .78rem; }
.contract-offer-card small { color: var(--text-secondary, #999); font-size: .68rem; line-height: 1.3; }

/* Info panel keeps its dark card in both themes — every text color is
   explicit so light-theme inheritance can never make it dark-on-dark. */
.contract-offer-info {
    flex: 1 1 240px;
    min-width: 0;
    align-self: start;
    background: #171717;
    border: 1px solid #333;
    border-radius: 10px;
    color: #fff;
    padding: .9rem;
    position: sticky;
    top: 1rem;
}

.contract-offer-info strong {
    color: #fff;
    font-size: .82rem;
}

.contract-offer-info p,
.contract-offer-info dd {
    color: #c7c7c7;
    font-size: .76rem;
    line-height: 1.45;
}

.contract-offer-info dl { margin: .8rem 0 0; }
.contract-offer-info dt { color: #fef981; font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.contract-offer-info dd { margin: .12rem 0 .65rem; }

@media (max-width: 820px) {
    .contract-offer-groups, .contract-offer-info { flex-basis: 100%; }
    .contract-offer-info { position: static; }
}

/* 2026-09-22 (Nizar): inside a .detail-item the generic rules won (dashboard.css `input { width:100% }`
   squeezed the text to width 0 next to a full-width radio; `.detail-item label` made the card uppercase
   and grey). Explicit resets, higher specificity than both. */
.detail-item .contract-offer-card,
.detail-item .contract-offer-card strong,
.detail-item .contract-offer-card small {
    text-transform: none;
    letter-spacing: 0;
}
.detail-item .contract-offer-card { display: flex; color: var(--text-primary, #eee); font-size: .8rem; font-weight: 400; }
.detail-item .contract-offer-card input[type="radio"] { width: 1rem; height: 1rem; flex: 0 0 auto; padding: 0; margin: 0; accent-color: var(--accent, #fef981); }
.detail-item .contract-offer-card strong { font-size: .8rem; font-weight: 600; color: var(--text-primary, #eee); }
.detail-item .contract-offer-card small { font-size: .7rem; color: var(--text-secondary, #999); }
.detail-item .contract-offer-group h4, .detail-item .contract-offer-group > p { text-transform: none; letter-spacing: 0; }
.detail-item .contract-offer-group h4 { text-transform: uppercase; letter-spacing: .05em; }

/* The dark info panel keeps its light text in the light theme too (the generic .detail-item p rule won). */
.detail-item .contract-offer-info p, .detail-item .contract-offer-info dd { color: #d6d6d6; }
.detail-item .contract-offer-info strong { color: #fff; }
.detail-item .contract-offer-info dt { color: #fef981; }

/* CRM sheet edit form (2026-09-23): folded dropdown, and the form rules (uppercase labels, 100 % inputs,
   dark-theme paragraph colours) kept out of the cards. */
.contract-offer-disclosure { border: 1px solid var(--border, #333); border-radius: 6px; background: var(--bg-card, transparent); }
.contract-offer-disclosure > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .75rem; font-size: .85rem; }
.contract-offer-disclosure > summary::-webkit-details-marker { display: none; }
.contract-offer-disclosure > summary .contract-offer-current { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-primary, #eee); }
.contract-offer-disclosure > summary .contract-offer-change { font-size: .72rem; color: var(--accent-text, #6b21a8); text-transform: none; letter-spacing: 0; border: 1px solid currentColor; border-radius: 999px; padding: .12rem .55rem; }
.contract-offer-disclosure[open] > summary { border-bottom: 1px solid var(--border, #333); }
.contract-offer-disclosure > .contract-picker-layout { padding: .75rem; margin-top: 0; }
.form-group .contract-offer-card, .form-group .contract-offer-card strong, .form-group .contract-offer-card small,
.form-group .contract-offer-group > p { text-transform: none; letter-spacing: 0; }
.form-group .contract-offer-card { display: flex; font-size: .8rem; font-weight: 400; color: var(--text-primary, #eee); margin: .3rem 0 0; }
.form-group .contract-offer-card input[type="radio"] { width: 1rem; height: 1rem; flex: 0 0 auto; padding: 0; margin: 0; }
.form-group .contract-offer-card strong { font-size: .8rem; font-weight: 600; }
.form-group .contract-offer-card small { font-size: .7rem; color: var(--text-secondary, #999); }
.form-group .contract-offer-group h4 { margin-top: .5rem; }
.form-group .contract-offer-info p, .form-group .contract-offer-info dd { color: #d6d6d6; }
.form-group .contract-offer-info strong { color: #fff; }
.form-group .contract-offer-info dt { color: #fef981; }