/* ============================================================
   IvoireDomi — Dashboard "Mes annonces"  v3
   ============================================================ */

:root {
    --imd-primary:      #F99522;
    --imd-primary-dark: #e07d0c;
    --imd-green:        #2FA84F;
    --imd-red:          #d63031;
    --imd-radius-sm:    4px;
    --imd-radius-md:    8px;
    --imd-radius-lg:    12px;
}

/* ── Topbar ── */
.imd-topbar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; flex-wrap: wrap !important; margin-bottom: 1.25rem !important; }
.imd-page-title { font-size: 20px !important; font-weight: 500 !important; margin: 0 !important; }
.imd-btn-publish { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: #2FA84F !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 10px 16px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; text-decoration: none !important; white-space: nowrap !important; }
.imd-btn-publish:hover { background: #268a40 !important; color: #fff !important; }

/* ── Tabs ── */
.imd-tabs-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border-bottom: 1.5px solid rgba(0,0,0,0.1) !important; margin-bottom: 1rem !important; }
.imd-tabs { display: flex !important; min-width: max-content !important; }
.imd-tab { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 9px 14px !important; font-size: 13px !important; color: #666 !important; text-decoration: none !important; border-bottom: 2px solid transparent !important; margin-bottom: -1.5px !important; white-space: nowrap !important; }
.imd-tab:hover { color: #F99522 !important; }
.imd-tab.active { color: #F99522 !important; border-bottom-color: #F99522 !important; font-weight: 500 !important; }
.imd-tab-count { font-size: 12px !important; opacity: .75 !important; }

/* ── Toolbar ── */
.imd-toolbar { background: #f7f7f7 !important; border-radius: 12px !important; padding: 12px !important; margin-bottom: .75rem !important; }

/* Une seule ligne avec tous les éléments */
.imd-toolbar-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

.imd-bulk-wrap { display: flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; }
.imd-select-bulk { padding: 8px 10px !important; border: 0.5px solid rgba(0,0,0,0.15) !important; border-radius: 8px !important; background: #fff !important; font-size: 13px !important; max-width: 140px !important; }
.imd-btn-apply { background: #F99522 !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 8px 12px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; text-decoration: none !important; white-space: nowrap !important; flex-shrink: 0 !important; }
.imd-btn-apply:hover { background: #e07d0c !important; color: #fff !important; }
.imd-results-count { font-size: 12px !important; color: #888 !important; margin: 0 !important; white-space: nowrap !important; flex-shrink: 0 !important; }

/* Groupe recherche — prend tout l'espace restant */
.imd-search-group { display: flex !important; align-items: center !important; gap: 8px !important; flex: 1 !important; min-width: 0 !important; justify-content: flex-end !important; flex-wrap: nowrap !important; }
.imd-search-wrap { position: relative !important; flex: 1 !important; min-width: 0 !important; max-width: 280px !important; }
.imd-search-input { width: 100% !important; padding: 8px 32px 8px 10px !important; border: 0.5px solid rgba(0,0,0,0.15) !important; border-radius: 8px !important; font-size: 13px !important; background: #fff !important; box-sizing: border-box !important; }
.imd-search-ico { position: absolute !important; right: 9px !important; top: 50% !important; transform: translateY(-50%) !important; color: #aaa !important; font-size: 13px !important; pointer-events: none !important; }
.imd-btn-search { background: #F99522 !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 8px 12px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; white-space: nowrap !important; flex-shrink: 0 !important; }
.imd-btn-search:hover { background: #e07d0c !important; }
.imd-btn-filter { display: inline-flex !important; align-items: center !important; gap: 5px !important; background: transparent !important; border: 1px solid #F99522 !important; border-radius: 8px !important; padding: 8px 12px !important; font-size: 13px !important; color: #F99522 !important; cursor: pointer !important; white-space: nowrap !important; flex-shrink: 0 !important; }
.imd-btn-filter.imd-open, .imd-btn-filter:hover { background: #F99522 !important; color: #fff !important; }
.imd-filter-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #fff !important; color: #F99522 !important; border-radius: 10px !important; font-size: 10px !important; font-weight: 700 !important; width: 16px !important; height: 16px !important; }

/* ── Panneau Filtres ── */
.imd-filter-panel { display: none !important; border-top: 0.5px solid rgba(0,0,0,0.1) !important; padding-top: 12px !important; margin-top: 8px !important; }
.imd-filter-panel.imd-open { display: block !important; }
.imd-filter-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.imd-filter-label { display: block !important; font-size: 11px !important; font-weight: 600 !important; color: #888 !important; text-transform: uppercase !important; letter-spacing: .04em !important; margin-bottom: 4px !important; }
.imd-filter-select, .imd-filter-input { width: 100% !important; padding: 7px 10px !important; border: 0.5px solid rgba(0,0,0,0.15) !important; border-radius: 8px !important; font-size: 13px !important; background: #fff !important; box-sizing: border-box !important; }
.imd-filter-actions { display: flex !important; gap: 8px !important; margin-top: 12px !important; }
.imd-btn-filter-apply { background: #F99522 !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 9px 18px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; flex: 1 !important; }
.imd-btn-filter-apply:hover { background: #e07d0c !important; }
.imd-btn-filter-reset { background: transparent !important; border: 0.5px solid rgba(0,0,0,0.2) !important; border-radius: 8px !important; padding: 9px 18px !important; font-size: 13px !important; color: #666 !important; cursor: pointer !important; }

/* ── Tags filtres actifs ── */
.imd-active-filters { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; margin-bottom: 10px !important; }
.imd-filter-tag { display: inline-flex !important; align-items: center !important; gap: 5px !important; background: #fff5e8 !important; color: #7a4000 !important; border: 0.5px solid #f9c07a !important; border-radius: 4px !important; padding: 3px 8px !important; font-size: 11px !important; text-decoration: none !important; }
.imd-filter-tag-x { font-size: 13px !important; }

/* ── Badges ── */
.imd-badge { display: inline-flex !important; align-items: center !important; padding: 3px 8px !important; border-radius: 4px !important; font-size: 11px !important; font-weight: 600 !important; white-space: nowrap !important; flex-shrink: 0 !important; }
.imd-badge-online  { background: #2FA84F !important; color: #fff !important; }
.imd-badge-pending { background: #F99522 !important; color: #fff !important; }
.imd-badge-refused { background: #d63031 !important; color: #fff !important; }
.imd-badge-draft   { background: rgba(0,0,0,0.06) !important; color: #555 !important; border: 0.5px solid rgba(0,0,0,0.12) !important; }
.imd-ref-tag { display: inline-flex !important; align-items: center !important; padding: 3px 6px !important; border-radius: 4px !important; background: rgba(0,0,0,0.05) !important; border: 0.5px solid rgba(0,0,0,0.1) !important; font-size: 11px !important; font-family: monospace !important; color: #555 !important; white-space: nowrap !important; flex-shrink: 0 !important; }

/* Taxonomies Houzez inline */
.imd-card-meta .taxonomy-label,
.imd-card-meta span:not(.imd-badge):not(.imd-ref-tag) {
    display: inline-flex !important; align-items: center !important; padding: 3px 8px !important;
    border-radius: 4px !important; background: rgba(0,0,0,0.05) !important;
    border: 0.5px solid rgba(0,0,0,0.1) !important; font-size: 11px !important;
    color: #555 !important; white-space: nowrap !important; flex-shrink: 0 !important;
}

/* ════════ CARTES MOBILES ════════ */
.imd-mobile-cards { display: flex !important; flex-direction: column !important; gap: 10px !important; }
.imd-prop-card { background: #fff !important; border: 0.5px solid rgba(0,0,0,0.1) !important; border-radius: 12px !important; overflow: hidden !important; }

.imd-card-main { display: flex !important; flex-direction: row !important; align-items: stretch !important; min-height: 90px !important; }
.imd-card-check { padding: 10px 4px 10px 10px !important; display: flex !important; align-items: flex-start !important; flex-shrink: 0 !important; }
.imd-card-check input[type="checkbox"] { width: 15px !important; height: 15px !important; accent-color: #F99522 !important; margin-top: 3px !important; }

.imd-card-thumb { width: 90px !important; min-width: 90px !important; flex-shrink: 0 !important; flex-grow: 0 !important; position: relative !important; overflow: hidden !important; background: #f0f0f0 !important; align-self: stretch !important; }
.imd-card-thumb img, .imd-card-thumb a img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; max-width: none !important; max-height: none !important; }
.imd-card-thumb > a { display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; }
.imd-thumb-star { position: absolute !important; top: 4px !important; left: 4px !important; background: rgba(0,0,0,.45) !important; border-radius: 3px !important; padding: 2px !important; display: flex !important; z-index: 1 !important; }
.imd-thumb-star img { width: 12px !important; height: 12px !important; position: static !important; }

.imd-card-body { flex: 1 !important; padding: 10px 12px !important; min-width: 0 !important; }
.imd-prop-title { display: block !important; font-weight: 600 !important; font-size: 13px !important; color: #F99522 !important; line-height: 1.35 !important; margin-bottom: 2px !important; text-decoration: none !important; }
.imd-prop-title:hover { color: #e07d0c !important; }
.imd-prop-addr { font-size: 11px !important; color: #888 !important; margin-bottom: 6px !important; font-style: normal !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.imd-card-meta { display: flex !important; align-items: center !important; gap: 5px !important; margin-bottom: 6px !important; overflow: hidden !important; flex-wrap: nowrap !important; }
.imd-card-price { font-weight: 700 !important; font-size: 13px !important; color: #222 !important; }

.imd-card-footer { border-top: 0.5px solid rgba(0,0,0,0.08) !important; padding: 8px 12px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; }
.imd-card-date { font-size: 11px !important; color: #888 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0 !important; }
.imd-card-date a { color: #F99522 !important; text-decoration: none !important; }
.imd-card-actions { display: flex !important; align-items: center !important; gap: 5px !important; flex-shrink: 0 !important; }
.imd-action-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: 0.5px solid rgba(0,0,0,0.12) !important; border-radius: 4px !important; padding: 5px 9px !important; font-size: 13px !important; color: #666 !important; cursor: pointer !important; text-decoration: none !important; }
.imd-action-menu, .imd-action-btn { background: transparent !important; border: 0.5px solid rgba(0,0,0,0.12) !important; border-radius: 4px !important; padding: 5px 10px !important; font-size: 15px !important; color: #666 !important; cursor: pointer !important; line-height: 1 !important; }

/* ── Dropdown — classe imd-show (pas Bootstrap .show) ── */
.imd-dropdown { position: relative !important; display: inline-block !important; }
.imd-dropdown-menu {
    display: none !important;
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 4px) !important;
    background: #fff !important;
    border: 0.5px solid rgba(0,0,0,0.15) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
    min-width: 190px !important;
    z-index: 99999 !important;
    padding: 4px 0 !important;
    list-style: none !important;
}
/* On utilise .imd-show au lieu de .show pour éviter tout conflit Bootstrap */
.imd-dropdown.imd-show > .imd-dropdown-menu { display: block !important; }
.imd-dropdown-item { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 14px !important; font-size: 13px !important; color: #333 !important; text-decoration: none !important; white-space: nowrap !important; }
.imd-dropdown-item:hover { background: #fff5e8 !important; color: #F99522 !important; }
.imd-dropdown-divider { margin: 4px 0 !important; border: none !important; border-top: 0.5px solid rgba(0,0,0,0.08) !important; }

/* ── Mobile-only / Desktop-only ── */
.imd-mobile-cards { display: flex !important; }
.imd-table-wrap   { display: none !important; }

/* ════════ TABLEAU DESKTOP ════════ */
.imd-table-wrap {
    overflow-x: hidden !important;   /* pas de scroll horizontal */
    border-radius: 12px !important;
    border: 0.5px solid rgba(0,0,0,0.1) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.imd-table-wrap table {
    width: 100% !important;
    table-layout: fixed !important;  /* colonnes fixes, rien ne déborde */
    border-collapse: collapse !important;
    font-size: 13px !important;
}
/* Largeurs de colonnes fixes — total = 100% */
.imd-table-wrap table colgroup,
.imd-table-wrap thead th:nth-child(1)  { width: 36px !important; }
.imd-table-wrap thead th:nth-child(2)  { width: 70px !important; }   /* Image */
.imd-table-wrap thead th:nth-child(3)  { width: auto !important; }   /* Titre — prend le reste */
.imd-table-wrap thead th:nth-child(4)  { width: 90px !important; }   /* Statut */
.imd-table-wrap thead th:nth-child(5)  { width: 70px !important; }   /* Transaction */
.imd-table-wrap thead th:nth-child(6)  { width: 90px !important; }   /* Référence */
.imd-table-wrap thead th:nth-child(7)  { width: 130px !important; }  /* Prix */
.imd-table-wrap thead th:nth-child(8)  { width: 70px !important; }   /* Type */
.imd-table-wrap thead th:nth-child(9)  { width: 130px !important; }  /* Date */
.imd-table-wrap thead th:nth-child(10) { width: 60px !important; }   /* Actions */

.imd-table-wrap thead th { padding: 10px 8px !important; text-align: left !important; font-weight: 600 !important; font-size: 11px !important; color: #888 !important; text-transform: uppercase !important; letter-spacing: .04em !important; background: #f7f7f7 !important; border-bottom: 0.5px solid rgba(0,0,0,0.1) !important; white-space: nowrap !important; overflow: hidden !important; }
.imd-table-wrap tbody tr { border-bottom: 0.5px solid rgba(0,0,0,0.07) !important; }
.imd-table-wrap tbody tr:last-child { border-bottom: none !important; }
.imd-table-wrap tbody tr:hover { background: #fafafa !important; }
.imd-table-wrap tbody td { padding: 10px 8px !important; vertical-align: middle !important; overflow: hidden !important; }

.imd-td-thumb { width: 70px !important; padding: 8px 6px !important; }
.imd-thumb-link { display: block !important; width: 58px !important; height: 44px !important; border-radius: 4px !important; overflow: hidden !important; position: relative !important; background: #f0f0f0 !important; flex-shrink: 0 !important; }
.imd-thumb-link img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; max-width: none !important; }

.imd-t-title { display: block !important; font-weight: 600 !important; font-size: 12px !important; color: #F99522 !important; text-decoration: none !important; line-height: 1.3 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.imd-t-title:hover { color: #e07d0c !important; }
.imd-t-addr { font-size: 11px !important; color: #888 !important; margin-top: 2px !important; font-style: normal !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.imd-td-price { font-weight: 600 !important; font-size: 12px !important; white-space: nowrap !important; }
.imd-t-date { font-size: 11px !important; color: #333 !important; white-space: nowrap !important; }
.imd-t-by { font-size: 11px !important; color: #888 !important; margin-top: 2px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.imd-t-by a { color: #F99522 !important; text-decoration: none !important; }
.imd-td-actions { text-align: center !important; overflow: visible !important; }
.imd-checkbox-label input[type="checkbox"] { width: 15px !important; height: 15px !important; accent-color: #F99522 !important; }

/* ── Pagination ── */
.imd-pagination-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; padding: 12px 0 !important; flex-wrap: wrap !important; }
.imd-pagination-info { font-size: 12px !important; color: #888 !important; margin: 0 !important; }
.imd-pagination-right { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; }
.imd-per-page-select { font-size: 12px !important; padding: 6px 10px !important; border: 0.5px solid rgba(0,0,0,0.15) !important; border-radius: 4px !important; background: #fff !important; cursor: pointer !important; }
.imd-pagination-right .houzez-pagination a,
.imd-pagination-right .houzez-pagination span { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 30px !important; height: 30px !important; border-radius: 4px !important; border: 0.5px solid rgba(0,0,0,0.15) !important; background: #fff !important; font-size: 12px !important; color: #333 !important; text-decoration: none !important; margin: 0 2px !important; }
.imd-pagination-right .houzez-pagination .current,
.imd-pagination-right .houzez-pagination a:hover { background: #F99522 !important; color: #fff !important; border-color: #F99522 !important; }

/* ════════════════════════════
   BREAKPOINT DESKTOP — 768px
════════════════════════════ */
@media (min-width: 768px) {
    .imd-page-title { font-size: 22px !important; }
    .imd-tab { font-size: 14px !important; padding: 10px 16px !important; }

    /* Toolbar sur UNE seule ligne */
    .imd-toolbar-row { flex-wrap: nowrap !important; }
    .imd-select-bulk { max-width: 160px !important; }
    .imd-search-group { flex-wrap: nowrap !important; }
    .imd-search-wrap { max-width: 220px !important; }

    .imd-filter-grid { grid-template-columns: repeat(3, 1fr) !important; }

    .imd-mobile-cards { display: none !important; }
    .imd-table-wrap   { display: block !important; }
    .imd-pagination-info { font-size: 13px !important; }
}

@media (min-width: 1024px) {
    .imd-filter-grid { grid-template-columns: repeat(6, 1fr) !important; }
    .imd-search-wrap { max-width: 280px !important; }
}