/* --- CRM Birdie CHR : compléments au design system caviste --- */
.chr-badge {
    display: inline-block;
    margin-left: .45rem;
    padding: .08rem .4rem;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 4px;
    font-size: .62rem;
    letter-spacing: .08em;
    color: var(--brand);
    vertical-align: middle;
}
.link-btn {
    border: 0; background: none; color: inherit; font: inherit;
    cursor: pointer; padding: 0;
}
.link-btn:hover { text-decoration: underline; }

.status-pill {
    display: inline-flex; align-items: center; gap: .25rem;
    border-radius: 999px; padding: .14rem .55rem;
    font-size: .74rem; font-weight: 600; white-space: nowrap;
}
.status-prospect      { background: var(--warn-soft); color: var(--brand-darker); border: 1px solid #EBD3A2; }
.status-client        { background: var(--ok-soft);   color: var(--ok);          border: 1px solid #CFE3BE; }
.status-ancien        { background: var(--surface-alt); color: var(--ink-3);     border: 1px solid var(--line-strong); }
.status-pas_interesse { background: var(--danger-soft); color: var(--danger);    border: 1px solid #EBC3C0; }

.status-select {
    appearance: none;
    -webkit-appearance: none;
    max-width: 100%;
    padding: .28rem 1.35rem .28rem .55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b665f' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .45rem center;
}
.status-select.status-prospect      { background-color: var(--warn-soft); color: var(--brand-darker); border-color: #EBD3A2; }
.status-select.status-client        { background-color: var(--ok-soft);   color: var(--ok);          border-color: #CFE3BE; }
.status-select.status-ancien        { background-color: var(--surface-alt); color: var(--ink-3);     border-color: var(--line-strong); }
.status-select.status-pas_interesse { background-color: var(--danger-soft); color: var(--danger);    border-color: #EBC3C0; }
.status-select:focus { outline: none; box-shadow: 0 0 0 3px rgba(217,155,40,.16); }

.cell-visit { min-width: 118px; }
.visit-date-input {
    width: 100%;
    min-width: 112px;
    padding: .3rem .4rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-alt);
    color: var(--ink);
    font: inherit;
    font-size: .8rem;
}
.visit-date-input:focus { outline: none; border-color: var(--brand); background: var(--surface); }
.quick-save-state {
    display: block;
    min-height: 1rem;
    margin-top: .2rem;
    color: var(--ink-3);
    font-size: .7rem;
    opacity: 0;
    transition: opacity .2s;
}
.quick-save-state.is-visible { opacity: 1; }
.quick-save-state.is-saved { color: var(--ok); }
.quick-save-state.is-error { color: var(--danger); }

table.clients thead .sort-btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}
table.clients thead .sort-btn:hover { color: var(--brand-dark); }
table.clients thead th[aria-sort="ascending"] .sort-btn,
table.clients thead th[aria-sort="descending"] .sort-btn { color: var(--brand-darker); }
.sort-icon { font-size: .68rem; opacity: .55; }
th[aria-sort="ascending"] .sort-icon,
th[aria-sort="descending"] .sort-icon { opacity: 1; }

.note-preview {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; color: var(--ink-2); font-size: .86rem;
}
.note-date { color: var(--ink-3); font-size: .75rem; margin-top: .15rem; }
.muted { color: var(--ink-3); }

.title-row { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
.page-title { margin: 0; font-size: 1.55rem; letter-spacing: -.02em; }
.page-sub { margin: .2rem 0 0; color: var(--ink-2); font-size: .92rem; }
.result-count { color: var(--ink-3); font-size: .9rem; font-weight: 400; }
.list-empty {
    margin-top: .8rem; padding: 1.2rem; text-align: center;
    color: var(--ink-3); border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
}
.cell-note { max-width: 340px; }
.note-input {
    min-height: 48px;
    resize: vertical;
    line-height: 1.4;
    background: var(--surface-alt);
    font-size: .84rem;
}
.note-input:focus { background: var(--surface); }
.note-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .35rem;
    min-height: 1.1rem;
    margin-top: .2rem;
}
.note-save-state {
    color: var(--ink-3);
    font-size: .72rem;
    opacity: 0;
    transition: opacity .2s;
}
.note-save-state.is-visible { opacity: 1; }
.note-save-state.is-saved { color: var(--ok); }
.note-save-state.is-error { color: var(--danger); }
.client-name {
    display: flex;
    align-items: flex-start;
    gap: .3rem;
}
.client-edit {
    flex: 0 0 auto;
    padding: .05rem .2rem;
    margin-top: .08rem;
    color: var(--ink-3);
    font-size: .78rem;
}
.client-edit:hover { color: var(--ink); }

.detail-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.5rem;
}
.detail-field .label {
    display: block; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--ink-3); font-weight: 600; margin-bottom: .15rem;
}
.detail-field .value { color: var(--ink); overflow-wrap: anywhere; }

.notes-feed { display: flex; flex-direction: column; gap: .8rem; }
.note-item {
    background: var(--surface-alt); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: .7rem .85rem;
}
.note-meta { font-size: .75rem; color: var(--ink-3); margin-bottom: .25rem; }
.note-body { white-space: pre-wrap; }

.audit-list { display: flex; flex-direction: column; gap: .45rem; font-size: .82rem; }
.audit-item { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.audit-item:last-child { border-bottom: none; }
.audit-when { color: var(--ink-3); font-size: .74rem; }
.audit-change { color: var(--ink-2); }
.audit-change s { color: var(--danger); }
.audit-change strong { color: var(--ok); }

.map-wrap { position: relative; }
.page-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.map-panel[hidden] { display: none; }
.map-panel {
    position: absolute; top: 12px; right: 12px; width: 320px; z-index: 500;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: 0 8px 24px rgba(31,29,26,.16);
    padding: 1rem;
}
.map-panel h3 { margin: 0 0 .35rem; }
.crm-pin { background: none; border: 0; }
.map-panel .panel-close {
    position: absolute; top: .5rem; right: .6rem; border: 0; background: none;
    font-size: 1.1rem; cursor: pointer; color: var(--ink-3);
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid label { display: block; font-size: .8rem; color: var(--ink-2); font-weight: 600; margin-bottom: .25rem; }
.form-grid input, .form-grid select, .form-grid textarea {
    width: 100%; padding: .5rem .6rem; border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); font: inherit; font-size: .9rem;
    background: var(--surface); color: var(--ink);
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(217,155,40,.16);
}
.form-actions { display: flex; gap: .6rem; margin-top: 1.25rem; }
.field-hint { font-size: .76rem; color: var(--ink-3); margin-top: .2rem; }

@media (max-width: 900px) {
    .map-layout { grid-template-columns: 1fr; }
    #map { height: 60vh; }
    .map-panel { position: static; width: auto; margin-top: .75rem; }
    .form-grid { grid-template-columns: 1fr; }
    .cell-status, .cell-visit {
        display: inline-block !important;
        width: calc(50% - .35rem) !important;
        vertical-align: top;
    }
    .cell-status { margin-right: .6rem; }
    .cell-visit { min-width: 0; }
    .status-select, .visit-date-input { width: 100%; }
}

@media (max-width: 700px) {
    .header-nav {
        width: 100%;
        flex-wrap: wrap;
        gap: .35rem .85rem;
        font-size: .8rem;
    }
    .header-nav a, .header-nav span, .header-nav button { white-space: nowrap; }
    .panel-actions { flex-wrap: wrap; }
}