/**
 * Responsive styles - ECOLEPAY Dashboard
 * Améliore l'affichage sur mobile et tablette
 */

/* ========== Viewport & base ========== */
html {
  -webkit-text-size-adjust: 100%;
}
body {
  overflow-x: hidden;
}

/* ========== Main content area ========== */
@media (max-width: 991px) {
  .br-mainpanel {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .br-mainpanel .pd-x-20,
  .br-mainpanel .pd-30 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  .br-mainpanel .row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
  .br-mainpanel .row > [class*="col-"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

@media (max-width: 575px) {
  .br-mainpanel .pd-x-20,
  .br-mainpanel .pd-30 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* ========== Header ========== */
@media (max-width: 575px) {
  .br-header-right .logged-name {
    display: none !important;
  }
  .br-header-right .nav-link-profile {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .dropdown-menu-header.wd-200,
  .dropdown-menu-header.wd-300 {
    max-width: calc(100vw - 2rem);
    right: 0;
    left: auto;
  }
}

/* ========== Logo ========== */
@media (max-width: 991px) {
  .br-logo img {
    max-height: 42px !important;
    width: auto !important;
  }
}

/* ========== Cards ========== */
@media (max-width: 767px) {
  .card-header.d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .card-header.d-flex.justify-content-between {
    flex-direction: column;
    align-items: flex-start;
  }
  .card-header .form-control-sm,
  .card-header select {
    width: 100% !important;
    max-width: 100%;
  }
  /* Blocs titre + boutons dans les cartes */
  .card .d-flex.justify-content-between,
  .card .d-flex.align-items-center.justify-content-between {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .card .d-flex.justify-content-between > div:last-child,
  .card .d-flex.align-items-center.justify-content-between > div:last-child {
    width: 100%;
  }
  .card .d-flex .btn {
    margin-bottom: 0.25rem;
  }
}

/* ========== Tables & DataTables – scroll horizontal ========== */
/* Conteneur : permet le scroll gauche-droite sur tout l'écran (accueil, base élèves, etc.) */
.br-mainpanel .table-wrapper,
.br-mainpanel .dataTables_wrapper,
.br-mainpanel .table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  display: block;
}
/* Table ne rétrécit pas : déclenche la barre de défilement horizontal */
.br-mainpanel .table-wrapper table,
.br-mainpanel .dataTables_wrapper .dataTable,
.br-mainpanel .dataTables_wrapper table.dataTable,
.br-mainpanel .table-responsive table {
  min-width: max-content;
  width: 100%;
}
/* Legacy : sans .br-mainpanel */
.table-wrapper,
.dataTables_wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.table-responsive {
  min-height: 0.01%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 767px) {
  .table-wrapper,
  .dataTables_wrapper {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .dataTables_wrapper .dataTables_scroll {
    overflow-x: auto !important;
  }
  .dataTables_wrapper .dataTables_scrollBody {
    overflow-x: auto !important;
  }
  .dataTables_wrapper .table {
    margin-bottom: 0;
  }
}

/* Boutons d'export DataTables */
.dt-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
@media (max-width: 575px) {
  .dt-buttons .btn {
    font-size: 0.8rem;
    padding: 0.35rem 0.5rem;
  }
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    text-align: left;
    margin-bottom: 0.5rem;
  }
  .dataTables_wrapper .dataTables_length select {
    margin: 0 0.25rem;
  }
}

/* ========== Forms & filters ========== */
@media (max-width: 767px) {
  .card-body .row .col-lg-3,
  .card-body .row .col-lg-4,
  .card-body .row .col-md-4,
  .card-body .row .col-md-6 {
    margin-bottom: 0.75rem;
  }
  .card-body .btn {
    margin-bottom: 0.5rem;
  }
}
@media (max-width: 575px) {
  .form-control,
  .select2-container {
    width: 100% !important;
  }
}

/* ========== Services dashboard (comptabilité, accueil) ========== */
@media (max-width: 991px) {
  .services-row-top,
  .services-row-bottom {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}
@media (max-width: 575px) {
  .services-row-top,
  .services-row-bottom {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .service-card .pd-25,
  .services-row-top .pd-25,
  .services-row-bottom .pd-25 {
    padding: 1rem !important;
  }
  .services-row-top .tx-24,
  .services-row-bottom .tx-24 {
    font-size: 1.1rem;
  }
}

/* ========== Page titles ========== */
@media (max-width: 575px) {
  .br-mainpanel h4,
  .pd-30 h4 {
    font-size: 1.15rem;
  }
  .br-mainpanel .mg-b-5 {
    margin-bottom: 0.25rem !important;
  }
}

/* ========== Buttons & actions ========== */
@media (max-width: 575px) {
  .btn-group {
    flex-wrap: wrap;
  }
  .btn-group .btn {
    margin-bottom: 0.25rem;
  }
}

/* ========== Select2 responsive ========== */
@media (max-width: 575px) {
  .select2-container {
    width: 100% !important;
  }
  .select2-dropdown {
    max-width: calc(100vw - 2rem);
  }
}

/* ========== Login page ========== */
@media (max-width: 575px) {
  .login-wrapper.wd-300 {
    width: 100%;
    max-width: 100%;
    margin: 1rem;
    padding: 1rem !important;
  }
  .signin-logo img {
    max-width: 120px !important;
  }
}

/* ========== Utilities - padding/margin on small screens ========== */
@media (max-width: 767px) {
  .mg-t-20 { margin-top: 1rem !important; }
  .mg-b-20 { margin-bottom: 1rem !important; }
}

@media (max-width: 575px) {
  .mg-t-20 { margin-top: 0.75rem !important; }
  .mg-b-20 { margin-bottom: 0.75rem !important; }
}