/* ══════════════════════════════════════════════════════════════════
   LISTING-PAGE — Layout 2 colonnes unifié (sidebar + main + 3 vues)
   Utilisé par : documents, devis, réunions, sondages, journal,
                 annuaire, utilisateurs.
   ══════════════════════════════════════════════════════════════════ */
.listing-page-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 1024px) {
    .listing-page-layout { grid-template-columns: 1fr; }
}

/* ─── Sidebar (filtres) ─── */
.listing-page-sidebar { display: flex; flex-direction: column; gap: 2px; }
.listing-page-sidebar__content { display: flex; flex-direction: column; gap: 2px; }

/* ─── Toggle "Filtres" — mobile uniquement ─── */
.listing-page-filters-toggle { display: none; }

@media (max-width: 1024px) {
    /* La sidebar devient un panneau repliable */
    .listing-page-sidebar {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        margin-bottom: .25rem;
        overflow: hidden;
    }
    .listing-page-filters-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 11px 14px;
        background: transparent;
        border: none;
        font-size: 14px;
        color: var(--color-text);
        cursor: pointer;
        text-align: left;
    }
    .listing-page-filters-toggle:hover { background: var(--color-bg); }
    .listing-page-filters-toggle__icon { font-size: 15px; line-height: 1; }
    .listing-page-filters-toggle__label { font-weight: 600; }
    .listing-page-filters-toggle__current {
        color: var(--color-primary);
        font-weight: 500;
        font-size: 13px;
        margin-left: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 60%;
    }
    .listing-page-filters-toggle__current:not(:empty)::before {
        content: '· ';
        color: var(--color-muted);
        font-weight: 400;
    }
    .listing-page-filters-toggle__arrow {
        margin-left: 6px;
        font-size: 12px;
        color: var(--color-muted);
        transition: transform .2s;
    }
    .listing-page-filters-toggle[aria-expanded="true"] .listing-page-filters-toggle__arrow {
        transform: rotate(180deg);
    }
    /* Contenu replié par défaut sur mobile */
    .listing-page-sidebar__content {
        display: none;
        padding: 4px 8px 8px;
        border-top: 1px solid var(--color-border);
    }
    .listing-page-sidebar.is-open .listing-page-sidebar__content {
        display: flex;
    }
    .listing-page-sidebar__content .listing-page-sidebar__divider:first-child {
        display: none;
    }
}
.listing-page-sidebar__divider {
    height: 1px;
    background: var(--color-border);
    margin: 10px 0 6px;
}
.listing-page-tree { list-style: none; margin: 0; padding: 0; }
.listing-page-cat {
    display: flex; justify-content: space-between; align-items: center;
    padding: .5rem .75rem;
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--color-muted);
    text-decoration: none;
    transition: background .15s;
}
.listing-page-cat:hover {
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
}
.listing-page-cat--active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 500;
}
.listing-page-cat__icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.listing-page-cat__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 8px;
}
.listing-page-cat__count {
    font-size: 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 1px 7px;
    color: var(--color-muted);
}
/* Mode "compact" pour les sous-listes (ex. rôles dans /residence/users) */
.listing-page-cat--compact {
    padding-top: .35rem;
    padding-bottom: .35rem;
}

/* ─── Main ─── */
.listing-page-main { min-width: 0; }

.listing-page-search {
    display: flex;
    gap: 8px;
    margin-bottom: 1rem;
}
.listing-page-search .form-input { flex: 1; }

/* ─── Toolbar (tri + view toggle + slot extra) ─── */
.listing-page-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.listing-page-toolbar__group {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    color: var(--color-muted);
}
.listing-page-toolbar__spacer { flex: 1; }

.listing-page-view-toggle {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
}
.listing-page-view-toggle button {
    border: none;
    background: var(--color-surface);
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-muted);
}
.listing-page-view-toggle button.is-active {
    background: var(--color-primary);
    color: #fff;
}

/* ─── Vues liste / grille (cartes via .listing-card) ─── */
.listing-page-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.listing-page-list--list {
    grid-template-columns: 1fr;
    gap: 8px;
}
.listing-page-list--grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ─── Vue tableau ─── */
.listing-page-table-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    /* Scroll horizontal au lieu de tronquer les colonnes (EMAIL annuaire,
       LIEU/TYPE réunions…) sur tablette/mobile. Les cellules restent en
       white-space:nowrap ; le tableau déborde et devient défilable. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.listing-page-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.listing-page-table thead {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.listing-page-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.listing-page-table__sortable { cursor: pointer; user-select: none; }
.listing-page-table__sortable:hover { color: var(--color-text); }
.listing-page-table__sortable.is-sorted { color: var(--color-primary); }
.listing-page-table__sort-arrow {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    color: var(--color-primary);
}

.listing-page-table__row {
    border-top: 1px solid var(--color-border);
    transition: background .12s;
}
.listing-page-table__row:first-child { border-top: 0; }
.listing-page-table__row:hover { background: var(--color-bg); }
.listing-page-table__row td {
    padding: 10px 12px;
    vertical-align: middle;
}
.listing-page-table__row--muted td { opacity: .55; }
.listing-page-table__row--clickable { cursor: pointer; }
.listing-page-table__nowrap { white-space: nowrap; }

/* Largeur fixe pour colonne actions (icônes alignées à droite) */
.listing-page-table__col-actions {
    width: 1px;
    padding-right: 12px;
    white-space: nowrap;
}
.listing-page-table .btn--icon {
    width: 30px; height: 30px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; line-height: 1;
}

/* Cellule "titre" : lien stylé uniformément */
.listing-page-table__title {
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    display: block;
}
.listing-page-table__title:hover {
    color: var(--color-primary);
    text-decoration: underline;
}
.listing-page-table__sub {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--color-muted);
}

/* ─── Empty state intégré ─── */
.listing-page-empty {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--color-muted);
}
.listing-page-empty__icon {
    font-size: 2rem;
    margin-bottom: .5rem;
}
.listing-page-empty__title {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: .25rem;
}

/* ══════════════════════════════════════════════════════════════════
   LISTING — Grille de cartes unifiée (réunions, sondages, journal, annonces)
   ══════════════════════════════════════════════════════════════════ */

/* ─── Grille responsive ─── */
.listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
}

/* ─── Carte ─── */
.listing-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .2s;
    text-decoration: none;
    color: var(--color-text);
    position: relative;
}
a.listing-card:hover,
.listing-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(0,0,0,.07);
    text-decoration: none;
    color: var(--color-text);
}
.listing-card--muted { opacity: .65; }
.listing-card--muted:hover { opacity: .85; }

/* ─── En-tête coloré ─── */
.listing-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    min-height: 42px;
}

/* ─── Corps ─── */
.listing-card__body {
    flex: 1;
    padding: 14px 16px;
}
.listing-card__title {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.35;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.listing-card__desc {
    font-size: 13px;
    color: var(--color-muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}

/* ─── Pied : métadonnées ─── */
.listing-card__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 16px;
    border-top: 1px solid var(--color-border);
    font-size: 12px;
    color: var(--color-muted);
}
.listing-card__footer span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

/* ─── Actions ─── */
.listing-card__actions {
    display: flex;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0;
}
.listing-card__actions .btn {
    padding: 3px 8px;
    font-size: 12px;
}

/* ─── Badge type/statut ─── */
.listing-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: .02em;
}
.listing-badge--blue   { background: #DBEAFE; color: #1D4ED8; }
.listing-badge--green  { background: #D1FAE5; color: #065F46; }
.listing-badge--red    { background: #FEE2E2; color: #991B1B; }
.listing-badge--amber  { background: #FEF3C7; color: #92400E; }
.listing-badge--purple { background: #EDE9FE; color: #5B21B6; }
.listing-badge--gray   { background: #F3F4F6; color: #374151; }
.listing-badge--indigo { background: var(--color-primary-lighter); color: #3730A3; }

/* Badge avec couleur custom (annonces) */
.listing-badge--custom {
    border: 1px solid currentColor;
}

/* ─── Accent visuel (numéro, date) ─── */
.listing-card__accent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}
.listing-card__accent-lg {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
}
.listing-card__accent-sm {
    font-size: 10px;
    color: var(--color-muted);
    text-transform: uppercase;
    margin-top: 2px;
    letter-spacing: .03em;
}

/* ─── Pin / indicateur spécial ─── */
.listing-card--pinned {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
}
.listing-card__pin {
    position: absolute;
    top: -1px;
    right: 12px;
    font-size: 16px;
    line-height: 1;
}

/* ─── Icône décorative dans le header ─── */
.listing-card__icon {
    font-size: 18px;
    line-height: 1;
}

/* ─── Empty state unifié ─── */
.listing-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: var(--color-muted);
    border: 1px dashed var(--color-border);
    border-radius: 10px;
}
.listing-empty__icon {
    font-size: 48px;
    margin-bottom: 1rem;
    opacity: .7;
}
.listing-empty__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: .5rem;
}

/* ─── Filtres rapides ─── */
.listing-filters {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.listing-filter {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-muted);
    cursor: pointer;
    transition: .15s;
    text-decoration: none;
}
.listing-filter:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
}
.listing-filter--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.listing-filter--active:hover {
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════════
   DETAIL / SHOW PAGE — Unified detail page layout
   ══════════════════════════════════════════════════════════════════ */

/* ─── Breadcrumb ─── */
.show-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}
.show-breadcrumb a {
    color: var(--color-muted);
    text-decoration: none;
    font-weight: 400;
}
.show-breadcrumb a:hover {
    color: var(--color-primary);
}
.show-breadcrumb__sep {
    color: var(--color-border);
}
.show-breadcrumb__current {
    font-weight: 600;
    color: var(--color-text);
}

/* ─── Info panel (top card on detail pages) ─── */
.show-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.show-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    flex-wrap: wrap;
}
.show-panel__badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.show-panel__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.show-panel__body {
    padding: 20px;
}
.show-panel__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    color: var(--color-text);
}
.show-panel__desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-text);
    white-space: pre-line;
}
.show-panel__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 20px;
    border-top: 1px solid var(--color-border);
    font-size: 13px;
    color: var(--color-muted);
}
.show-panel__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* ─── Attachments list ─── */
.show-attachments {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}
.show-attachments__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-muted);
    margin-bottom: 4px;
}
.show-attachment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--color-text);
    text-decoration: none;
    transition: border-color .15s, background .15s;
    width: fit-content;
}
.show-attachment:hover {
    border-color: var(--color-primary);
    background: var(--color-bg);
    text-decoration: none;
    color: var(--color-text);
}

/* ─── Section headings inside detail pages ─── */
.show-section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: .75rem;
    color: var(--color-text);
}

/* ─── Sidebar card on detail pages ─── */
.show-sidebar-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 16px;
}
.show-sidebar-card__title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--color-text);
}

/* ── Responsive ── */

/* Téléphone : forcer la vue « cartes » (liste).
   Sous 640px, le tableau — même rendu défilable horizontalement par
   .listing-page-table-wrap (overflow-x:auto, R1) — reste peu praticable au
   pouce. On bascule donc toutes les pages listing (annuaire, réunions,
   documents, sondages, devis, journal, users) sur la vue liste, qui rend des
   cartes déjà responsives. Toutes définissent un block view_list non vide.
   !important est INDISPENSABLE : listing-page.js pose le display en style
   INLINE sur #view-table/#view-list/#view-grid (setView), qui l'emporterait
   sinon sur ce media query. La préférence de vue
   (localStorage syndicspace_<module>_view) n'est PAS modifiée : au-dessus de
   640px le display inline reprend la main et restaure le choix table/list/grid
   de l'utilisateur, sans JS. Le sélecteur de vue est masqué car la vue est
   verrouillée sur « liste » à cette largeur. Seuil 640px = seuil téléphone
   (cohérent avec COLLAPSE_BELOW du menu ⋯ topbar), distinct du 1024px
   structurel (tiroir + 1 colonne). */
@media (max-width: 640px) {
    #view-table { display: none !important; }
    #view-grid  { display: none !important; }
    #view-list  { display: grid !important; } /* .listing-page-list--list = grille 1 colonne */
    .listing-page-view-toggle { display: none !important; }
}

@media (max-width: 480px) {
    .listing-grid { grid-template-columns: 1fr; }
    .listing-card__header { padding: 8px 12px; }
    .listing-card__body { padding: 12px; }
    .listing-card__footer { padding: 8px 12px; }
    .show-panel__header { padding: 10px 14px; }
    .show-panel__body { padding: 14px; }
    .show-panel__meta { padding: 10px 14px; }
    .show-panel__title { font-size: 17px; }
    /* Téléphone étroit : la recherche passe en pleine largeur, le bouton dessous */
    .listing-page-search { flex-wrap: wrap; }
    .listing-page-search .form-input { flex: 1 1 100%; }
}

/* ── Dark mode ── */
[data-theme="dark"] .listing-card:hover,
[data-theme="dark"] a.listing-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
[data-theme="dark"] .listing-badge--blue   { background: rgba(96, 165, 250, .15);  color: #93C5FD; }
[data-theme="dark"] .listing-badge--green  { background: rgba(52, 211, 153, .15);  color: #6EE7B7; }
[data-theme="dark"] .listing-badge--red    { background: rgba(248, 113, 113, .15); color: #FCA5A5; }
[data-theme="dark"] .listing-badge--amber  { background: rgba(251, 191, 36, .15);  color: #FDE68A; }
[data-theme="dark"] .listing-badge--purple { background: rgba(167, 139, 250, .15); color: #C4B5FD; }
[data-theme="dark"] .listing-badge--gray   { background: rgba(156, 163, 175, .15); color: #D1D5DB; }
[data-theme="dark"] .listing-badge--indigo { background: var(--color-primary-lighter); color: #C7D2FE; }
[data-theme="dark"] .listing-page-view-toggle button.is-active { color: #fff; }
[data-theme="dark"] .listing-page-cat--active { background: var(--color-primary-lighter); }