/* ════════════════════════════════════════════════════════════════
   FRONT-END LEAD ACCORDION  [user_reserved_leads]
   Mirrors the admin panel design language.
════════════════════════════════════════════════════════════════ */

/* ── Two-panel wrapper ───────────────────────────────────────── */

.lr-leads-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.lr-leads-wrapper .lr-leads {
    flex: 1;
    min-width: 0;
    max-width: none; /* override single-panel max-width */
}

@media (max-width: 860px) {
    .lr-leads-wrapper {
        flex-direction: column;
    }
    .lr-leads-wrapper .lr-leads {
        width: 100%;
    }
}

/* ── Design tokens ──────────────────────────────────────────── */

.lr-leads {
    --lr-accent:         #0148fa;
    --lr-accent-hover:   #0139d6;
    --lr-accent-light:   #eff5ff;
    --lr-accent-border:  #b3d0ff;

    --lr-success:        #059669;
    --lr-success-bg:     #ecfdf5;
    --lr-success-border: #a7f3d0;

    --lr-danger:         #dc2626;
    --lr-danger-bg:      #fef2f2;
    --lr-danger-border:  #fecaca;

    --lr-kept:           #d97706;
    --lr-kept-bg:        #fffbeb;
    --lr-kept-border:    #fde68a;

    --lr-text:           #111827;
    --lr-text-muted:     #6b7280;
    --lr-border:         #e5e7eb;
    --lr-surface:        #ffffff;
    --lr-bg:             #f9fafb;

    --lr-radius-sm:      4px;
    --lr-radius:         8px;
    --lr-shadow:         0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --lr-shadow-md:      0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--lr-text);
    max-width: 860px;

    /* Card wrapper */
    border: 1px solid var(--lr-border);
    border-radius: var(--lr-radius);
    overflow: hidden;
    box-shadow: var(--lr-shadow-md);
}

/* ── Zones section — teal accent cascade ─────────────────────── */

.lr-leads--zones {
    --lr-accent:        #0d9488;
    --lr-accent-hover:  #0f766e;
    --lr-accent-light:  #f0fdfa;
    --lr-accent-border: #99f6e4;
    margin-bottom: 16px;
}

.lr-leads--zones .lr-leads__header {
    background: #f0fdfa;
    border-bottom-color: #99f6e4;
}

.lr-leads--zones .lr-leads__header-icon {
    color: #0d9488;
}

/* ── Active (reserved) section — green accent cascade ────────── */

.lr-leads--active {
    --lr-accent:        #16a34a;
    --lr-accent-hover:  #15803d;
    --lr-accent-light:  #f0fdf4;
    --lr-accent-border: #bbf7d0;
}

.lr-leads--active .lr-leads__header {
    background: #f0fdf4;
    border-bottom-color: #bbf7d0;
}

.lr-leads--active .lr-leads__header-icon {
    color: #16a34a;
}

/* ── Kept panel — amber accent cascade ───────────────────────── */

.lr-leads--kept-panel {
    --lr-accent:        var(--lr-kept);
    --lr-accent-hover:  #b45309;
    --lr-accent-light:  var(--lr-kept-bg);
    --lr-accent-border: var(--lr-kept-border);
}

.lr-leads--kept-panel .lr-leads__header {
    background: var(--lr-kept-bg);
    border-bottom-color: var(--lr-kept-border);
}
.lr-leads--kept-panel .lr-leads__header-icon {
    color: var(--lr-kept);
}

/* Kept count badge (kept for specificity) */
.lr-leads__count--kept {
    background: var(--lr-kept);
}

/* Kept item open accent bar */
.lr-leads__item--kept[open] {
    border-left-color: var(--lr-kept);
}
.lr-leads__item--kept[open] .lr-leads__chevron {
    border-color: var(--lr-kept);
}
.lr-leads__item--kept[open] .lr-leads__chevron::after {
    border-color: var(--lr-kept);
}
.lr-leads__item--kept .lr-leads__row:hover {
    background: var(--lr-kept-bg);
}

/* ── Wrapper notice (login gate) ────────────────────────────── */

.lr-leads__notice {
    padding: 12px 16px;
    border-radius: var(--lr-radius);
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid transparent;
    margin-bottom: 16px;
}
.lr-leads__notice--error {
    background: var(--lr-danger-bg);
    color: var(--lr-danger);
    border-color: var(--lr-danger-border);
}

/* ── Header bar ─────────────────────────────────────────────── */

.lr-leads__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--lr-bg);
    border-bottom: 1px solid var(--lr-border);
}

.lr-leads__header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lr-leads__header-icon {
    width: 18px;
    height: 18px;
    color: var(--lr-accent);
    flex-shrink: 0;
}

.lr-leads__title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--lr-text);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.lr-leads__count {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background: var(--lr-accent);
    color: #fff;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* ── Accordion item (<details>) ─────────────────────────────── */

.lr-leads__item {
    background: var(--lr-surface);
    border-top: 1px solid var(--lr-border);
    transition: background 0.15s;
}

/* Accent left bar on open item */
.lr-leads__item[open] {
    border-left: 3px solid var(--lr-accent);
}

/* Remove native marker */
.lr-leads__item > summary { list-style: none; }
.lr-leads__item > summary::-webkit-details-marker { display: none; }

/* ── Summary row (collapsed state) ──────────────────────────── */

.lr-leads__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    cursor: pointer;
    user-select: none;
    background: var(--lr-bg);
    transition: background 0.15s;
}

.lr-leads__row:hover {
    background: var(--lr-accent-light);
}

/* Animated chevron */
.lr-leads__chevron {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--lr-text-muted);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lr-leads__chevron::after {
    content: '';
    border: solid var(--lr-text-muted);
    border-width: 0 1.5px 1.5px 0;
    width: 5px;
    height: 5px;
    transform: rotate(-45deg);
    margin-left: -1px; /* nudge right for visual centering of ">" shape */
    transition: border-color 0.15s, transform 0.15s;
}

.lr-leads__item[open] .lr-leads__chevron {
    border-color: var(--lr-accent);
    transform: rotate(90deg);
}
.lr-leads__item[open] .lr-leads__chevron::after {
    border-color: var(--lr-accent);
}

.lr-leads__row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.lr-leads__row-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--lr-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lr-leads__row-date {
    font-size: 0.78rem;
    color: var(--lr-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Badges ─────────────────────────────────────────────────── */

.lr-leads__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border: 1px solid transparent;
    flex-shrink: 0;
}
.lr-leads__badge::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.lr-leads__badge--reserved {
    background: var(--lr-success-bg);
    color: var(--lr-success);
    border-color: var(--lr-success-border);
}
.lr-leads__badge--kept {
    background: var(--lr-kept-bg);
    color: var(--lr-kept);
    border-color: var(--lr-kept-border);
}
.lr-leads__badge--sm {
    font-size: 0.65rem;
    padding: 2px 8px;
}

/* ── Expanded body ──────────────────────────────────────────── */

.lr-leads__body {
    padding: 20px 24px 24px;
    border-top: 1px solid var(--lr-border);
    background: var(--lr-bg);
}

/* ── Meta strip ─────────────────────────────────────────────── */

.lr-leads__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 0;
}

.lr-leads__meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lr-leads__meta-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--lr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.lr-leads__meta-item > span:not(.lr-leads__meta-label):not(.lr-leads__badge) {
    font-size: 0.875rem;
    color: var(--lr-text);
}

.lr-leads__meta-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--lr-accent);
    text-decoration: none;
    transition: color 0.15s;
}
.lr-leads__meta-link:hover { color: var(--lr-accent-hover); text-decoration: underline; }
.lr-leads__meta-link svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

/* ── Section divider ────────────────────────────────────────── */

.lr-leads__divider {
    height: 1px;
    background: var(--lr-border);
    margin: 18px 0;
}

/* ── Custom fields panel ─────────────────────────────────────── */

.lr-leads__fields {
    margin-bottom: 0;
}

.lr-leads__fields-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--lr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 12px;
}

.lr-leads__fields-grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
    gap: 2px;
    margin: 0;
    border: 1px solid var(--lr-border);
    border-radius: var(--lr-radius-sm);
    overflow: hidden;
}

.lr-leads__field-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 14px;
    background: var(--lr-surface);
    border-right: 1px solid var(--lr-border);
    border-bottom: 1px solid var(--lr-border);
}

.lr-leads__field-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--lr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}

.lr-leads__field-value {
    font-size: 0.875rem;
    color: var(--lr-text);
    margin: 0;
    word-break: break-word;
}

.lr-leads__field-link {
    color: var(--lr-accent);
    text-decoration: none;
    word-break: break-all;
}
.lr-leads__field-link:hover { text-decoration: underline; }

/* ── Action zone ────────────────────────────────────────────── */

.lr-leads__action-zone { }

.lr-leads__comment-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--lr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.lr-leads__required {
    color: var(--lr-danger);
    margin-left: 2px;
}

.lr-leads__textarea {
    width: 100%;
    min-height: 90px;
    padding: 10px 13px;
    border: 1px solid var(--lr-border);
    border-radius: var(--lr-radius-sm);
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--lr-text);
    background: var(--lr-surface);
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    margin-bottom: 14px;
}
.lr-leads__textarea:focus {
    outline: none;
    border-color: var(--lr-accent);
    box-shadow: 0 0 0 3px var(--lr-accent-light);
}
.lr-leads__textarea:disabled {
    background: var(--lr-bg);
    color: var(--lr-text-muted);
    cursor: not-allowed;
}

/* ── Action buttons ─────────────────────────────────────────── */

.lr-leads__btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.lr-leads__btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: var(--lr-radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    text-decoration: none;
    line-height: 1;
    box-shadow: var(--lr-shadow);
}
.lr-leads__btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.lr-leads__btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.lr-leads__btn--danger {
    background: var(--lr-danger-bg);
    color: var(--lr-danger);
    border-color: var(--lr-danger-border);
}
.lr-leads__btn--danger:hover:not(:disabled) {
    background: var(--lr-danger);
    color: #fff;
    border-color: var(--lr-danger);
}

.lr-leads__btn--success {
    background: var(--lr-success-bg);
    color: var(--lr-success);
    border-color: var(--lr-success-border);
}
.lr-leads__btn--success:hover:not(:disabled) {
    background: var(--lr-success);
    color: #fff;
    border-color: var(--lr-success);
}

.lr-leads__btn--primary {
    background: var(--lr-accent);
    color: #fff;
    border-color: var(--lr-accent);
}
.lr-leads__btn--primary:hover:not(:disabled) {
    background: var(--lr-accent-hover);
    border-color: var(--lr-accent-hover);
    color: #fff;
}

/* ── Kept lead message ──────────────────────────────────────── */

.lr-leads__kept-msg {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--lr-kept-bg);
    color: var(--lr-kept);
    border: 1px solid var(--lr-kept-border);
    border-radius: var(--lr-radius);
    font-size: 0.875rem;
    font-weight: 500;
}
.lr-leads__kept-msg svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ── Empty state ────────────────────────────────────────────── */

.lr-leads__empty {
    text-align: center;
    padding: 56px 24px;
    background: var(--lr-surface);
    color: var(--lr-text-muted);
}
.lr-leads__empty svg {
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    display: block;
    opacity: 0.25;
}
.lr-leads__empty p {
    margin: 0;
    font-size: 0.9rem;
}

/* ── Inline AJAX messages ────────────────────────────────────── */

.lead-reservation-message {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: var(--lr-radius-sm);
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 10px;
    border: 1px solid transparent;
}
.lead-reservation-message.success {
    background: var(--lr-success-bg);
    color: var(--lr-success);
    border-color: var(--lr-success-border);
}
.lead-reservation-message.error {
    background: var(--lr-danger-bg);
    color: var(--lr-danger);
    border-color: var(--lr-danger-border);
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 600px) {
    .lr-leads__row       { gap: 10px; padding: 12px 14px; }
    .lr-leads__body      { padding: 16px 14px 20px; }
    .lr-leads__meta      { gap: 16px; }
    .lr-leads__btn-row   { flex-direction: column; }
    .lr-leads__btn       { width: 100%; justify-content: center; }
    .lr-leads__row-title { font-size: 0.85rem; }
}

/* ── Lead quality rating stars ────────────────────────────────── */
.lr-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 2px;
    align-items: center;
    margin-bottom: 4px;
}

.lr-rating__input {
    display: none;
}

.lr-rating__star {
    font-size: 1.8em;
    color: #d1d5db;
    cursor: pointer;
    transition: color 0.1s;
    line-height: 1;
}

/* Filled stars on hover / selected */
.lr-rating__input:checked ~ .lr-rating__star,
.lr-rating:hover .lr-rating__star:hover,
.lr-rating:hover .lr-rating__star:hover ~ .lr-rating__star {
    color: #f59e0b;
}

.lr-rating__input:checked + .lr-rating__star {
    color: #f59e0b;
}

.lr-rating__save-status {
    margin-left: 8px;
    font-size: 0.85em;
    color: #065f46;
}

/* ── Address badge (prospect-froid-avec-adresse) ────────────── */

.lr-leads__badge--address {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}