/* Cartes « facture » pour les tableaux (voir assets/js/responsive-cards.js)
   + mise en page compacte commune des pages de liste sur petit écran. */

.rc-cards { display: none; }

/* ===================== Petits écrans (<= 768px) ===================== */
@media screen and (max-width: 768px) {
  .rc-hidden-mobile { display: none !important; }
  .fixedHeader-floating, .fixedHeader-locked { display: none !important; }
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate { display: none !important; }

  .rc-cards { display: block; margin: 6px 0; }

  /* Le conteneur direct du tableau (bloc blanc encadré) ne double pas le cadre des cartes */
  .rc-parent { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; }

  .rc-card {
    position: relative;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 5px solid #036666;
    border-radius: 16px;
    box-shadow: 0 4px 16px -6px rgba(15, 23, 42, .08);
    margin: 0 0 10px;
    padding: 10px 10px;
    color: #1f2937;
    font-family: 'Inter', 'Cairo', sans-serif;
    line-height: 1.2;
  }
  .rc-card[hidden] { display: none !important; }
  .rc-card.rc-note { border-left-color: #94a3b8; text-align: center; font-weight: 700; }
  .rc-card, .rc-card * { box-sizing: border-box; }
  /* Neutralise les tailles forcées par les pages (« * { font-size: 26px !important } ») */
  .rc-card * { font-size: inherit !important; }
  .rc-card { font-size: 15px; }

  .rc-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
  .rc-title { flex: 1; min-width: 0; font-weight: 700; font-size: 18px !important; overflow-wrap: anywhere; }
  .rc-title-label { color: #6b7280; font-weight: 600; font-size: 14px !important; }
  .rc-title-value { color: #036666; font-weight: 800; font-size: 20px !important; }
  .rc-check { width: 22px; height: 22px; accent-color: #036666; flex: 0 0 auto; cursor: pointer; }

  /* Mini-tableau libellé / valeur : mise en page « facture » */
  .rc-cards { max-width: 100%; overflow: hidden; }
  .rc-card { max-width: 100%; overflow: hidden; }
  .rc-card .rc-mini {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0 0 8px !important;
    border: 1px solid #b6cdf2;
    display: table !important;
  }
  .rc-card .rc-mini th,
  .rc-card .rc-mini td {
    border: 1px solid #b6cdf2 !important;
    padding: 2px 3px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    vertical-align: middle;
    overflow-wrap: anywhere;
    word-break: normal !important;
    white-space: normal !important;
    position: static !important;
    cursor: default;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    height: auto !important;
  }
  .rc-card .rc-mini th { background: #f1f6ff !important; color: #1f3b63 !important; font-weight: 700; font-size: 13px !important; }
  .rc-card .rc-mini td { background: #fff !important; color: #1f2937 !important; font-weight: 600; font-size: 15px !important; }
  .rc-card .rc-mini tr { background: transparent !important; border: 0 !important; }
  .rc-card .rc-mini th *, .rc-card .rc-mini td * { color: inherit; }

  .rc-actions { display: flex; gap: 8px; justify-content: center; margin-top: 2px; }
  .rc-btn {
    flex: 0 0 56px; min-width: 0; height: auto; margin: 0;
    padding: 8px 10px; border: 0; border-radius: 4px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 700; font-size: 16px !important; text-transform: uppercase;
    color: #fff; cursor: pointer; box-shadow: none;
    background: #036666;
  }
  .rc-btn-main { flex: 1; background: #1e88e5; }
  .rc-btn-main:hover { background: #1565c0; }
  .rc-btn-danger { background: #f44336; }
  .rc-btn i, .rc-btn svg, .rc-btn img { color: #fff; }
}

/* ============ Mise en page commune des pages de liste (body.rc-page) ============ */

/* Grands écrans : formulaire de filtres sur UNE seule ligne */
@media screen and (min-width: 769px) {
  .rc-page .filters-form {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    align-items: flex-end !important;
    width: 100%;
  }
  .rc-page .filters-form .filter-group {
    flex: 1 1 0 !important;
    min-width: 84px !important;
    width: auto !important;
    max-width: none !important;
  }
  .rc-page .filters-form .filter-group.date-range {
    flex: 2 1 0 !important;
    min-width: 270px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  .rc-page .filters-form .filter-group label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rc-page .filters-form .filter-group select,
  .rc-page .filters-form .filter-group input { width: 100% !important; min-width: 0 !important; }
  .rc-page .filters-form .filter-buttons { flex: 0 0 auto !important; margin: 0 !important; width: auto !important; min-width: max-content !important; white-space: nowrap !important; display: flex !important; flex-wrap: nowrap !important; gap: 6px !important; align-items: center !important; }
}

/* Petits écrans : titre minimal, filtres sur 2 colonnes avec textes -30 % */
@media screen and (max-width: 768px) {
  .rc-page { padding: 6px !important; }
  .rc-page h1 { font-size: 16.9px !important; line-height: 1.2 !important; margin: 0 0 6px !important; padding: 0 !important; }
  .rc-page .page-header {
    display: flex !important;
    padding: 3px 10px !important; margin: 0 0 6px !important; border-radius: 10px !important;
    gap: 8px !important; flex-wrap: nowrap !important; flex-direction: row !important;
    justify-content: space-between !important; align-items: center !important; min-height: 0 !important; text-align: start !important;
  }
  .rc-page .page-header > * { margin: 0 !important; }
  /* Bandeau secondaire (titre du tableau + total) */
  .rc-page .card-header {
    display: flex !important;
    padding: 4px 10px !important; margin: 0 0 6px !important; border-radius: 10px !important;
    flex-direction: row !important; gap: 8px !important; align-items: center !important; justify-content: space-between !important;
  }
  .rc-page .card-header h5, .rc-page .card-header h2, .rc-page .card-header h3 {
    font-size: 16.9px !important; line-height: 1.2 !important; margin: 0 !important;
  }
  .rc-page .card-header .total-amount { font-size: 15.6px !important; margin: 0 !important; }
  .rc-page .card-header .badge, .rc-page .card-header .total-amount .badge {
    font-size: 15.6px !important; line-height: 1.2 !important; padding: 2px 10px !important; border-radius: 8px !important;
  }
  .rc-page .page-header::before { display: none !important; }
  .rc-page .page-header h1, .rc-page .page-header h2 { font-size: 16.9px !important; line-height: 1.2 !important; margin: 0 !important; }
  .rc-page .page-header .row-count, .rc-page .page-header .badge, .rc-page #rowCount {
    font-size: 15.6px !important; line-height: 1.2 !important; padding: 1px 8px !important; border-radius: 8px !important;
  }

  .rc-page .header-section {
    display: flex !important; padding: 3px 10px !important; margin: 0 0 6px !important; border-radius: 10px !important;
    align-items: center !important; justify-content: space-between !important; gap: 8px !important; min-height: 0 !important;
  }
  .rc-page .header-section h2 { font-size: 16.9px !important; line-height: 1.2 !important; margin: 0 !important; }
  .rc-page .header-section #rowCount { font-size: 15.6px !important; }
  .rc-page .action-buttons { margin: 0 0 6px !important; }
  .rc-page .filters-container { padding: 8px !important; margin-bottom: 8px !important; }
  .rc-page .filters-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px 10px !important;
    align-items: end !important;
    flex-direction: initial !important;
  }
  .rc-page .filters-form .filter-group { min-width: 0 !important; width: auto !important; max-width: none !important; }
  .rc-page .filters-form .filter-group.date-range {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px 10px !important;
  }
  .rc-page .filters-form .filter-group.date-range > div { min-width: 0; }
  .rc-page .filters-form .filter-group label {
    font-size: 16.8px !important; margin-bottom: 3px !important; line-height: 1.15 !important; white-space: normal !important;
  }
  .rc-page .filters-form .filter-group select,
  .rc-page .filters-form .filter-group input {
    width: 100% !important; min-width: 0 !important; height: auto !important;
    padding: 7px 8px !important; font-size: 15.7px !important; border-radius: 6px !important;
  }
  .rc-page .filters-form .filter-buttons {
    grid-column: 1 / -1 !important; justify-content: center !important; margin: 4px auto 0 !important; width: auto !important;
  }

  /* Pages Tailwind : en-tete (titre + filtres) a marquer avec .rc-head / .rc-filters */
  .rc-head { flex-wrap: wrap !important; gap: 6px 10px !important; margin-bottom: 8px !important; }
  .rc-head h1, .rc-head .rc-title { font-size: 16.9px !important; line-height: 1.2 !important; gap: 6px !important; }
  .rc-head h1 svg { width: 20px !important; height: 20px !important; }
  .rc-head .rc-filters {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 8px 10px !important;
    width: 100% !important;
  }
  .rc-head .rc-filters > *:not(.select2-hidden-accessible) {
    min-width: 0 !important; width: 100% !important; max-width: 100% !important;
    font-size: 15.7px !important; padding-top: 6px !important; padding-bottom: 6px !important;
  }
  .rc-head .rc-filters .select2-container { width: 100% !important; grid-column: 1 / -1; }
  .rc-head .rc-filters .select2-selection { min-height: 0 !important; font-size: 15.7px !important; }
  .rc-head .rc-filters .rc-total { grid-column: 1 / -1; text-align: center; }
  .rc-head .rc-filters > select:only-of-type, .rc-head .rc-filters > select:first-child { grid-column: 1 / -1; }

  /* Formulaire de filtres compact (liste_troupeau_repro...) : plages Min/Max sur UNE ligne
     (libellé + 2 champs), listes déroulantes 2 par ligne, total pleine largeur. */
  .rc-shell { padding: 10px !important; border-top-width: 3px !important; }
  .rc-head { margin-bottom: 6px !important; gap: 4px 8px !important; }
  .rc-head .rc-filters { gap: 6px 8px !important; }
  .rc-head .rc-filters .rc-range {
    grid-column: 1 / -1; display: flex !important; align-items: center !important; gap: 6px !important;
    border: 0 !important; padding: 0 !important; margin: 0 !important;
  }
  .rc-head .rc-filters .rc-range label { flex: 0 0 auto !important; white-space: nowrap; margin: 0 !important; font-size: 15px !important; }
  .rc-head .rc-filters .rc-range input { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; padding: 4px 6px !important; font-size: 15px !important; }
  .rc-head .rc-filters > select { margin: 0 !important; padding-inline-start: 8px !important; }
  .rc-head .rc-filters .rc-total { padding: 4px 8px !important; margin: 0 !important; }

  /* En-tête à filtres (liste_reforme, liste_troupeau_repro) : ligne 1 = liste déroulante
     (le champ est enveloppé par l'icône micro) + total côte à côte ; le multi-sélecteur
     (select2) occupe la ligne suivante en pleine largeur. */
  .rc-head .rc-filters > .haloub-voice-field-wrap { min-width: 0 !important; width: 100% !important; order: 1; grid-column: auto !important; padding: 0 !important; }
  .rc-head .rc-filters > .haloub-voice-field-wrap > select { width: 100% !important; margin: 0 !important; padding-top: 3px !important; padding-bottom: 3px !important; line-height: 1.3 !important; }
  .rc-head .rc-filters > .rc-total-inline { order: 2; grid-column: auto !important; display: block !important; text-align: center; padding: 8px 6px !important; line-height: 1.3 !important; align-self: stretch; }
  .rc-head .rc-filters > .select2 { order: 3; grid-column: 1 / -1 !important; }
  .rc-head .rc-filters .select2-selection--multiple { min-height: 36px !important; padding: 0 4px !important; display: flex !important; align-items: center !important; }
  .rc-head .rc-filters .select2-selection__rendered { margin: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap; align-items: center; width: 100%; }
  .rc-head .rc-filters .select2-search--inline { flex: 1 1 auto !important; width: 100% !important; float: none !important; }
  .rc-head .rc-filters .select2-search__field { margin: 0 !important; height: 28px !important; line-height: 28px !important; width: 100% !important; }
  /* Barre « Search » de DataTables : sans grandes marges */
  .rc-shell .dataTables_wrapper > div:first-child { margin-bottom: 4px !important; }
  .rc-shell .dataTables_filter { margin: 0 !important; }
  .rc-shell .dataTables_filter input { padding: 4px 8px !important; margin-inline-start: 6px !important; }

  /* Barre de filtres « .filters-container > .filters-row » (liste_Vel, liste_Dg, liste_VTar,
     liste_VGest, liste_jumeau) : recherche pleine largeur, puis 2 filtres par ligne,
     boutons côte à côte, marges réduites (plus de filtres empilés un par ligne). */
  .filters-container { padding: 8px !important; margin-bottom: 8px !important; border-radius: 12px !important; }
  .filters-container .filters-row {
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 4px 8px !important; align-items: end !important; margin: 0 !important; flex-direction: initial !important;
  }
  .filters-container .filters-row > .filter-group { min-width: 0 !important; width: auto !important; flex: none !important; gap: 1px !important; }
  .filters-container .filters-row > .filter-group:first-child { grid-column: 1 / -1 !important; }
  .filters-container .filters-row .filter-group label { font-size: 15px !important; line-height: 1.15 !important; margin: 0 !important; white-space: normal !important; }
  .filters-container .filters-row .filter-group input,
  .filters-container .filters-row .filter-group select { width: 100% !important; min-width: 0 !important; padding: 5px 8px !important; border-radius: 8px !important; }
  .filters-container .filters-row .filter-group > button,
  .filters-container .filters-row > button { width: 100% !important; margin: 0 !important; padding: 6px 10px !important; }
}