/* =============================================================================
   PAGE TIERS — Style sobre, harmonisé avec widgets.css
   =============================================================================
   Composants partagés réutilisés (depuis widgets.css) :
     .widget-search, .widget-create-btn, .toolbar-pill,
     .toolbar-popover-wrap, .toolbar-popover, .toolbar-popover-item,
     .row-action-icon

   Spécifiques tiers (ci-dessous) : KPI strip, aside, accordéons, events grid.

   Règle typo : aucune police < 14px.
   ============================================================================= */


/* SHELL ---------------------------------------------------------------------- */

.tiers-shell {
    background: #fff;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    border-radius: 8px;
    overflow: hidden;
}


/* KPI STRIP ----------------------------------------------------------------- */

.tiers-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #fff;
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

.tiers-kpi {
    padding: 18px 22px;
    border-right: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
    background: #fff;
}

.tiers-kpi:last-child { border-right: none; }

.tiers-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.tiers-kpi-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted, #6b7280);
    letter-spacing: 0.02em;
}

.tiers-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-text-muted, #6b7280);
    flex-shrink: 0;
}

.tiers-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text, #1a1a1a);
    line-height: 1.1;
    white-space: nowrap;
}

.tiers-kpi.is-success .tiers-kpi-label { color: #0F6E56; }
.tiers-kpi.is-success .tiers-kpi-icon  { background: rgba(15, 110, 86, 0.10); color: #0F6E56; }
.tiers-kpi.is-info    .tiers-kpi-label { color: #185FA5; }
.tiers-kpi.is-info    .tiers-kpi-icon  { background: rgba(24, 95, 165, 0.10); color: #185FA5; }
.tiers-kpi.is-accent  .tiers-kpi-label { color: #534AB7; }
.tiers-kpi.is-accent  .tiers-kpi-icon  { background: rgba(83, 74, 183, 0.10); color: #534AB7; }


/* LAYOUT --------------------------------------------------------------------- */

.tiers-layout {
    display: grid;
    grid-template-columns: 350px minmax(0, 1fr);
    min-height: 540px;
    background: #fafafa;
}


/* ASIDE --------------------------------------------------------------------- */

.tiers-aside {
    border-right: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    padding: 22px 22px 24px;
    background: #fff;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Bandeau édition au-dessus du nom */
.tiers-edit-bar {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 10px;
    background: #f5f7fb;
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 6px;
    margin-bottom: -8px;
}

.tiers-edit-bar[hidden] { display: none; }

.tiers-aside-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.tiers-name {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text, #1a1a1a);
    line-height: 1.3;
    word-break: break-word;
    flex: 1;
    min-width: 0;
}

.tiers-name input.tiers-edit-input.is-large {
    font-size: 18px;
    font-weight: 600;
    height: 34px;
    padding: 0 10px;
}

.btn-edit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: 5px;
    color: var(--color-text-secondary, #4b5563);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    flex-shrink: 0;
}

.btn-edit:hover {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.25);
    color: var(--color-text, #1a1a1a);
}

.btn-cancel, .btn-save {
    height: 28px;
    padding: 0 14px;
    font-size: 14px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.btn-cancel {
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text-muted, #6b7280);
}
.btn-cancel:hover { color: var(--color-text, #1a1a1a); background: rgba(0, 0, 0, 0.04); }

.btn-save {
    background: #2563eb;
    border: 1px solid #2563eb;
    color: #fff;
    font-weight: 500;
}
.btn-save:hover { background: #1d4ed8; border-color: #1d4ed8; }


.tiers-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--badge-color, #0F6E56);
    margin-top: -8px;
}

.tiers-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--badge-color, #0F6E56);
}


/* BLOCS ---------------------------------------------------------------------- */

.tiers-block-label {
    font-size: 14px;
    color: var(--color-text-muted, #6b7280);
    margin-bottom: 6px;
}

.tiers-block-content {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text, #1a1a1a);
}


/* BOUTON COPIER -------------------------------------------------------------- */

.btn-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: 6px;
    font-size: 14px;
    color: var(--color-text, #1a1a1a);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.btn-copy:hover {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.25);
}


/* INTERLOCUTEURS — 2×2 ------------------------------------------------------ */

.tiers-contacts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.tiers-contact {
    position: relative;
    padding: 10px 0;
    border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
}

.tiers-contact:first-child { padding-top: 4px; border-top: none; }
.tiers-contact:last-child  { padding-bottom: 0; }

.tiers-contact-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 14px;
    line-height: 1.4;
    min-width: 0;
    padding-right: 32px;
}

.tiers-contact-row + .tiers-contact-row { margin-top: 4px; }

.tiers-contact-row > * {
    flex: 1 1 50%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tiers-contact-name { font-weight: 600; color: var(--color-text, #1a1a1a); }
.tiers-contact-role { color: var(--color-text-secondary, #4b5563); }
.tiers-contact-mail { color: #185FA5; text-decoration: none; }
.tiers-contact-mail:hover { text-decoration: underline; }
.tiers-contact-phone { color: var(--color-text, #1a1a1a); text-decoration: none; }
.tiers-contact-phone:hover { text-decoration: underline; }
.tiers-contact-phone.is-empty { color: var(--color-text-muted, #9ca3af); }


/* ==== Mode édition : chaque interlocuteur dans une mini-card ============== */

.tiers-aside[data-mode="edit"] .tiers-contacts {
    gap: 10px;
}

.tiers-aside[data-mode="edit"] .tiers-contact {
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    border-radius: 6px;
    padding: 10px 36px 10px 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tiers-aside[data-mode="edit"] .tiers-contact:first-child { padding-top: 10px; }

/* En édition, les rows internes n'ont plus besoin de leur padding-right
   (l'espace pour le × est déjà géré par la card) */
.tiers-aside[data-mode="edit"] .tiers-contact-row {
    padding-right: 0;
}


.tiers-contact-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    transform: none;
    width: 24px;
    height: 24px;
    line-height: 1;
    background: #fff;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.18));
    border-radius: 5px;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

/* En édition : le bouton × s'aligne pile sur le centre vertical du 1er input
   (l'input "Nom" fait 30px de haut, donc centre = 10px padding-top + 15px). */
.tiers-aside[data-mode="edit"] .tiers-contact-remove {
    top: 13px;
    right: 10px;
}

.tiers-contact-remove:hover {
    background: rgba(163, 45, 45, 0.08);
    border-color: rgba(163, 45, 45, 0.30);
    color: #A32D2D;
}

.tiers-contact-add {
    align-self: stretch;
    background: transparent;
    border: 1px dashed var(--color-border, rgba(0, 0, 0, 0.25));
    border-radius: 6px;
    padding: 9px 14px;
    font-size: 14px;
    color: var(--color-text-secondary, #4b5563);
    cursor: pointer;
    text-align: center;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    margin-top: 4px;
}

.tiers-contact-add:hover {
    background: #fafafa;
    border-color: rgba(37, 99, 235, 0.40);
    color: #2563eb;
}


/* EDIT INPUTS --------------------------------------------------------------- */

.tiers-edit-input {
    width: 100%;
    height: 30px;
    padding: 0 10px;
    font-size: 14px;
    color: var(--color-text, #1a1a1a);
    background: #fff;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: 5px;
    outline: none;
    margin-top: 4px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    font-family: inherit;
}

textarea.tiers-edit-input,
.tiers-edit-textarea {
    height: auto;
    min-height: 64px;
    padding: 6px 10px;
    line-height: 1.45;
    resize: vertical;
}

select.tiers-edit-input {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 26px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
}

.tiers-edit-input:first-child { margin-top: 0; }

.tiers-edit-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

.tiers-edit-input.is-error {
    border-color: #A32D2D;
    background: rgba(163, 45, 45, 0.03);
}

.tiers-edit-row {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.tiers-edit-row .tiers-edit-input { margin-top: 0; flex: 1; }


/* ACCORDÉONS — intégrés dans le flux de l'aside (pas de cards flottantes) -- */

.tiers-accordion-group {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
    border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

.tiers-accordion {
    border: none;
    background: transparent;
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    margin: 0;
}

.tiers-accordion > summary {
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text, #1a1a1a);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    user-select: none;
    transition: color 0.12s ease;
}

.tiers-accordion > summary::-webkit-details-marker { display: none; }

.tiers-accordion > summary:hover {
    color: #185FA5;
}

.tiers-accordion-chevron {
    color: var(--color-text-muted, #6b7280);
    transition: transform 0.20s ease;
}

.tiers-accordion[open] > summary .tiers-accordion-chevron {
    transform: rotate(90deg);
    color: #185FA5;
}

.tiers-accordion[open] > summary {
    color: #185FA5;
}

.tiers-accordion-body {
    padding: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text, #1a1a1a);
}

.tiers-tech-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    font-size: 14px;
}

.tiers-tech-label { color: var(--color-text-muted, #6b7280); }
.tiers-tech-value { color: var(--color-text, #1a1a1a); text-align: right; }
.tiers-tech-value.is-readonly { color: var(--color-text-muted, #6b7280); }

.tiers-aside[data-mode="edit"] .tiers-tech-toggle {
    display: inline-block;
    padding: 2px 12px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: 999px;
    cursor: pointer;
    background: #fff;
    user-select: none;
    transition: background 0.10s ease, border-color 0.10s ease;
}

.tiers-aside[data-mode="edit"] .tiers-tech-toggle:hover {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.25);
}


/* WIDGETS PARTAGÉS — codes visuels alignés sur asset-invoices --------------- */

.widget-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.widget-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted, #6b7280);
    display: inline-flex;
    pointer-events: none;
}

.widget-search input[type="search"] {
    width: 100%;
    height: 32px;
    padding: 0 12px 0 32px;
    font-size: 14px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.10));
    border-radius: 6px;
    background: #f9fafb;
    color: var(--color-text, #1a1a1a);
    outline: none;
    transition: background 0.10s ease, border-color 0.10s ease;
}

.widget-search input[type="search"]::placeholder {
    color: var(--color-text-muted, #9ca3af);
}

.widget-search input:focus {
    background: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}


/* Pill bouton — style facture (fond gris pâle, libellé en bleu) */
.toolbar-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    background: #f9fafb;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.10));
    border-radius: 6px;
    font-size: 14px;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    transition: background 0.10s ease, border-color 0.10s ease, color 0.10s ease;
}

.toolbar-pill:hover {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.20);
    color: var(--color-text, #1a1a1a);
}

.toolbar-pill strong {
    color: #2563eb;
    font-weight: 600;
}

.toolbar-pill svg {
    flex-shrink: 0;
}

.toolbar-pill.is-icon {
    color: var(--color-text-secondary, #4b5563);
}

.toolbar-pill.is-icon:hover {
    color: var(--color-text, #1a1a1a);
}


/* Bouton "+ Créer" — BLEU comme dans le widget facture */
.widget-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 16px;
    background: #2563eb;
    color: #fff;
    border: 1px solid #2563eb;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.widget-create-btn:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.widget-create-btn svg {
    flex-shrink: 0;
}


/* Popovers (Année / Label) */
.toolbar-popover-wrap {
    position: relative;
    display: inline-block;
}

.toolbar-popover {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
    padding: 4px 0;
    max-height: 320px;
    overflow-y: auto;
}

.toolbar-popover[hidden] { display: none; }

.toolbar-popover-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 14px;
    color: var(--color-text, #1a1a1a);
    cursor: pointer;
    transition: background 0.10s ease;
}

.toolbar-popover-item:hover {
    background: rgba(37, 99, 235, 0.06);
    color: #1d4ed8;
}

.toolbar-popover-item.is-active {
    background: rgba(37, 99, 235, 0.10);
    color: #1d4ed8;
    font-weight: 600;
}


/* row-action-icon (boutons crayon/poubelle dans les lignes) */
.row-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.row-action-icon svg { width: 16px; height: 16px; }

.row-action-icon:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-text, #1a1a1a);
    border-color: var(--color-border, rgba(0, 0, 0, 0.10));
}


/* CHIPS Associé à ----------------------------------------------------------- */

.tiers-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    max-width: 100%;
}

.tiers-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 10px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    font-size: 14px;
    color: var(--color-text, #1a1a1a);
}

.tiers-chip-remove {
    background: transparent;
    border: none;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 4px;
}

.tiers-chip-remove:hover { color: #A32D2D; }

.tiers-chip-input-wrap { position: relative; }

.tiers-chip-input {
    height: 24px;
    padding: 0 8px;
    width: 100px;
    font-size: 14px;
    border: 1px dashed var(--color-border, rgba(0, 0, 0, 0.25));
    border-radius: 4px;
    background: #fff;
    outline: none;
}

.tiers-chip-input:focus { border-style: solid; border-color: #2563eb; }

.tiers-chip-suggest {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    padding: 4px 0;
}

.tiers-chip-suggest-item {
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
}

.tiers-chip-suggest-item:hover {
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
}


/* MODE ÉDITION — état visuel ----------------------------------------------- */

.tiers-aside[data-mode="edit"] {
    background: #fcfcff;
}


/* ZONE PRINCIPALE ----------------------------------------------------------- */

.tiers-main {
    display: flex;
    flex-direction: column;
    background: #fafafa;
    min-width: 0;
}


/* TABS ---------------------------------------------------------------------- */

.tiers-tab-bar {
    display: flex;
    gap: 0;
    padding: 0 22px;
    background: #fff;
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    flex-wrap: wrap;
}

.tiers-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.tiers-tab:hover { color: var(--color-text, #1a1a1a); }

.tiers-tab.is-active {
    color: var(--color-text, #1a1a1a);
    border-bottom-color: var(--color-text, #1a1a1a);
    font-weight: 600;
}

.tiers-tab-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text, #1a1a1a);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
}

.tiers-tab-pill.is-danger { background: rgba(163, 45, 45, 0.10); color: #A32D2D; }

.tiers-tab-panel[hidden] { display: none; }


/* TOOLBAR SUIVI ------------------------------------------------------------- */

.tiers-suivi-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
    background: #fafafa;
    flex-wrap: wrap;
}

.tiers-suivi-spacer { flex: 1; }

/* Nav mois/année — design léger pour s'aligner sur le ton sobre des autres pills */
.tiers-nav {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    height: 32px;
}

.tiers-nav-btn {
    width: 28px;
    background: #fff;
    border: none;
    color: var(--color-text-muted, #6b7280);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.10s ease, color 0.10s ease;
}

.tiers-nav-btn:hover { background: #f5f5f5; color: var(--color-text, #1a1a1a); }
.tiers-nav-btn:disabled { opacity: 0.4; cursor: default; }

.tiers-nav-month {
    border: none;
    border-left: 1px solid var(--color-border, rgba(0, 0, 0, 0.10));
    border-right: 1px solid var(--color-border, rgba(0, 0, 0, 0.10));
    background: #fff;
    padding: 0 8px;
    font-size: 14px;
    color: var(--color-text, #1a1a1a);
    outline: none;
    width: 130px;
    font-family: inherit;
    cursor: pointer;
}

.tiers-nav-month:focus { background: #fafbff; }


/* EVENT GRID ---------------------------------------------------------------- */

.tiers-event-grid {
    display: flex;
    flex-direction: column;
    background: #fafafa;
}

.tiers-event {
    display: grid;
    grid-template-columns: 36px 130px minmax(180px, 1fr) 220px 100px 90px;
    column-gap: 14px;
    align-items: start;
    padding: 14px 22px;
    background: #fff;
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
    transition: background 0.10s ease;
}

.tiers-event:hover { background: #fafafa; }

.tiers-event.is-overdue {
    background: rgba(163, 45, 45, 0.02);
    box-shadow: inset 3px 0 0 #A32D2D;
}

.tiers-event.is-overdue:hover { background: rgba(163, 45, 45, 0.04); }


.tiers-event-col-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
}

.tiers-bell {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: var(--color-text, #1a1a1a);
    line-height: 0;
    transition: background 0.10s ease, opacity 0.10s ease;
}

.tiers-bell:hover { background: rgba(0, 0, 0, 0.05); }
.tiers-bell.is-off { color: var(--color-text-muted, #9ca3af); opacity: 0.35; }
.tiers-bell.is-on  { color: var(--color-text, #1a1a1a); }
.tiers-bell.is-overdue.is-on { color: #A32D2D; }


.tiers-event-col-date { min-width: 0; }

.tiers-date {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text, #1a1a1a);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tiers-assignee {
    font-size: 14px;
    color: var(--color-text-muted, #6b7280);
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.tiers-event-col-title { min-width: 0; }

.tiers-title {
    font-size: 14px;
    color: var(--color-text, #1a1a1a);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tiers-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.tiers-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
    border-radius: 3px;
    background: #fff;
    font-size: 14px;
    color: var(--color-text-secondary, #4b5563);
    line-height: 1.3;
    white-space: nowrap;
}

.tiers-tag-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tiers-cell-muted { color: var(--color-text-light, #9ca3af); }


/* DOCUMENT — cartouche unifiée -------------------------------------------- */

.tiers-event-col-doc { min-width: 0; }

.tiers-doc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: 5px;
    background: #fff;
    font-size: 14px;
    color: var(--color-text, #1a1a1a);
    text-decoration: none;
    max-width: 100%;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.10s ease, border-color 0.10s ease;
}

.tiers-doc-chip:hover {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.25);
}

.tiers-doc-chip svg {
    color: var(--color-text-muted, #6b7280);
    flex-shrink: 0;
}

a.tiers-doc-chip .tiers-doc-name { color: #185FA5; }

.tiers-doc-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

details.tiers-doc-chip { position: relative; padding: 0; border: none; }

details.tiers-doc-chip > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    color: var(--color-text, #1a1a1a);
}

details.tiers-doc-chip > summary::-webkit-details-marker { display: none; }

details.tiers-doc-chip > summary:hover {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.25);
}

.tiers-doc-chevron {
    color: var(--color-text-muted, #6b7280);
    transition: transform 0.15s ease;
    margin-left: 2px;
}

details.tiers-doc-chip[open] .tiers-doc-chevron { transform: rotate(90deg); }

details.tiers-doc-chip ul {
    position: absolute;
    z-index: 10;
    top: calc(100% + 4px);
    left: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    padding: 6px 0;
    margin: 0;
    list-style: none;
    font-size: 14px;
}

details.tiers-doc-chip ul li { padding: 6px 14px; }
details.tiers-doc-chip ul a { color: #185FA5; text-decoration: none; }
details.tiers-doc-chip ul a:hover { text-decoration: underline; }


/* STATUT -------------------------------------------------------------------- */

.tiers-event-col-status { min-width: 0; }

.tiers-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 3px;
    border: 1px solid;
    font-size: 14px;
    line-height: 1.3;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tiers-status.is-created  { color: var(--color-text-muted, #6b7280); border-color: rgba(0, 0, 0, 0.15); }
.tiers-status.is-read     { color: #185FA5; border-color: rgba(24, 95, 165, 0.30); }
.tiers-status.is-progress { color: #BA7517; border-color: rgba(186, 117, 23, 0.30); }
.tiers-status.is-done     { color: #0F6E56; border-color: rgba(15, 110, 86, 0.30); }


/* ACTIONS ------------------------------------------------------------------- */

.tiers-event-col-actions {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 4px;
}

.row-action-icon.is-danger:hover {
    background: rgba(163, 45, 45, 0.08);
    color: #A32D2D;
    border-color: rgba(163, 45, 45, 0.20);
}


/* POPOVER LABEL — utilise les classes partagées widgets.css ---------------- */

.tiers-suivi-toolbar .toolbar-popover-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.toolbar-popover-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}


/* EMPTY runtime ------------------------------------------------------------- */

.tiers-grid-empty-runtime {
    padding: 40px 22px;
    text-align: center;
    color: var(--color-text-light, #9ca3af);
    font-style: italic;
    font-size: 14px;
    background: #fff;
}


/* PAGINATION ---------------------------------------------------------------- */

.tiers-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 22px;
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.06));
    background: #fafafa;
    font-size: 14px;
    color: var(--color-text-muted, #6b7280);
}

.tiers-pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tiers-pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid var(--color-border, rgba(0, 0, 0, 0.15));
    border-radius: 5px;
    font-size: 14px;
    color: var(--color-text, #1a1a1a);
    cursor: pointer;
    transition: background 0.10s ease, border-color 0.10s ease;
}

.tiers-pagination-btn:hover:not(:disabled) {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.25);
}
.tiers-pagination-btn:disabled { opacity: 0.45; cursor: default; }

.tiers-pagination-pages {
    font-weight: 500;
    color: var(--color-text, #1a1a1a);
    padding: 0 8px;
}


/* MASQUER L'ENCART "EN COURS TTC" du widget facture quand il est dans tiers
   (le KPI Encours est déjà affiché dans le bandeau haut de la fiche tiers) */
.tiers-tab-panel .toolbar-kpi { display: none !important; }


/* RESPONSIVE 800–1000px ----------------------------------------------------- */

@media (max-width: 1000px) {

    .tiers-layout { grid-template-columns: 1fr; }

    .tiers-aside {
        border-right: none;
        border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    }

    /* Toolbar suivi : wrap propre */
    .tiers-suivi-toolbar {
        gap: 8px;
    }

    /* Recherche prend toute la première ligne quand on commence à manquer de place */
    .tiers-suivi-toolbar .widget-search {
        flex: 1 1 100%;
        max-width: none;
    }

    /* Tableau : 2 rangées par ligne */
    .tiers-event {
        grid-template-columns: 36px 130px minmax(0, 1fr) 100px 90px;
        grid-template-areas:
            "icon date  doc    status actions"
            ".    title title  title  title";
        row-gap: 8px;
    }

    .tiers-event .tiers-event-col-icon    { grid-area: icon; }
    .tiers-event .tiers-event-col-date    { grid-area: date; }
    .tiers-event .tiers-event-col-doc     { grid-area: doc; }
    .tiers-event .tiers-event-col-status  { grid-area: status; }
    .tiers-event .tiers-event-col-actions { grid-area: actions; }
    .tiers-event .tiers-event-col-title   { grid-area: title; padding-top: 2px; }
}


/* RESPONSIVE < 800px : cartes ---------------------------------------------- */

@media (max-width: 800px) {

    .tiers-kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .tiers-kpi { border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.06)); }
    .tiers-kpi:nth-child(odd)  { border-right: 1px solid var(--color-border, rgba(0, 0, 0, 0.06)); }
    .tiers-kpi:nth-child(even) { border-right: none; }

    .tiers-tab-bar { padding: 0 14px; }
    .tiers-suivi-toolbar { padding: 10px 14px; }

    /* Recherche pleine largeur, autres pills sur la seconde ligne */
    .tiers-suivi-toolbar .widget-search { flex: 1 1 100%; max-width: none; }
    .tiers-suivi-toolbar .widget-create-btn { margin-left: auto; }

    /* Tableau en cartes empilées */
    .tiers-event {
        grid-template-columns: 36px minmax(0, 1fr) 90px;
        grid-template-areas:
            "icon date    actions"
            "icon title   title"
            ".    doc     doc"
            ".    status  status";
        gap: 6px 12px;
        padding: 14px 16px;
    }

    .tiers-event .tiers-event-col-icon    { grid-area: icon; }
    .tiers-event .tiers-event-col-date    { grid-area: date; }
    .tiers-event .tiers-event-col-title   { grid-area: title; }
    .tiers-event .tiers-event-col-doc     { grid-area: doc; }
    .tiers-event .tiers-event-col-status  { grid-area: status; }
    .tiers-event .tiers-event-col-actions { grid-area: actions; justify-content: flex-end; }
}


@media (max-width: 500px) {
    .tiers-kpi-strip { grid-template-columns: 1fr; }
    .tiers-kpi { border-right: none !important; }
    .tiers-aside, .tiers-suivi-toolbar, .tiers-event { padding-left: 14px; padding-right: 14px; }

    /* KPI valeur peut être longue : autorise wrap */
    .tiers-kpi-value { white-space: normal; font-size: 19px; }
}


/* RICH EDITOR dans tiers-main ---------------------------------------------- */

.tiers-main .rich-editor {
    margin: 0;
    padding: 14px 22px 20px;
    border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    background: #fafafa;
}

@media (max-width: 800px) {
    .tiers-main .rich-editor { padding: 12px 14px 18px; }
}