/**
 * Global responsive fixes for admin panel and shared pages.
 * Loaded from all main layouts so every page benefits.
 */

/* ── Base: prevent page-level horizontal scroll ── */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
.page,
.wrapper,
#kt_content,
#kt_post,
#kt_content_container {
  max-width: 100%;
}

/* ── Content area padding on small screens ── */
@media (max-width: 991.98px) {
  #kt_content_container.container-xxl {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .content {
    padding-top: 0.5rem;
  }
}

@media (max-width: 575.98px) {
  #kt_content_container.container-xxl {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* ── Header / breadcrumb / toolbar ── */
@media (max-width: 991.98px) {
  #kt_header .header-brand {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  #kt_header .toolbar .container-fluid {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #kt_header .page-title {
    width: 100%;
    margin-right: 0 !important;
  }

  #kt_header .page-title h1 {
    font-size: 1.35rem !important;
    line-height: 1.3;
  }

  #kt_header .breadcrumb {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  #kt_header .d-flex.align-items-center.gap-3 {
    align-self: flex-end;
  }
}

/* ── Card headers: stack search + actions on mobile ── */
@media (max-width: 991.98px) {
  .card-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem;
  }

  .card-header.table-responsive {
    overflow: visible !important;
  }

  .card-header .card-title,
  .card-header .card-toolbar {
    width: 100%;
    margin: 0 !important;
  }

  .card-header .card-toolbar .d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-start !important;
  }

  .card-header .form-control.w-250px,
  .card-header .form-control.w-300px {
    width: 100% !important;
    max-width: 100%;
  }

  .card-header .d-flex.align-items-center.position-relative.my-1 {
    width: 100%;
  }
}

/* ── Tables & DataTables: horizontal scroll inside card ── */
.table-responsive,
.card-body.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.dataTables_wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dataTables_wrapper .dataTables_scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dataTables_wrapper table.dataTable {
  width: 100% !important;
}

@media (max-width: 767.98px) {
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    float: none;
    text-align: left;
    margin-bottom: 0.5rem;
  }

  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none;
    text-align: center;
    margin-top: 0.5rem;
  }

  .dataTables_wrapper .dataTables_paginate .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ── Summary / stat rows ── */
@media (max-width: 575.98px) {
  .row > [class*="col-md-2"] h1,
  .row > [class*="col-md-3"] h1,
  .alert h1 {
    font-size: 1.75rem !important;
  }

  .status-card,
  .alert.text-center.pt-5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* ── Forms & filters ── */
@media (max-width: 767.98px) {
  .row.g-5 > [class*="col-md-"],
  .row.g-6 > [class*="col-md-"],
  .row > [class*="col-lg-"] {
    margin-bottom: 0.5rem;
  }

  .d-flex.flex-wrap.gap-3,
  .d-flex.flex-wrap.gap-2 {
    gap: 0.5rem !important;
  }

  .btn-group {
    flex-wrap: wrap;
  }
}

/* ── Modals ── */
@media (max-width: 575.98px) {
  .modal-dialog {
    margin: 0.5rem auto;
    max-width: calc(100% - 1rem);
  }

  .modal-lg,
  .modal-xl {
    max-width: calc(100% - 1rem);
  }

  .modal-body {
    padding: 1rem;
  }
}

/* ── Auth pages (login / reset) ── */
@media (max-width: 991.98px) {
  .app-blank .p-12 {
    padding: 2rem !important;
  }
}

@media (max-width: 575.98px) {
  .app-blank .p-12 {
    padding: 1.25rem !important;
  }

  .app-blank .w-lg-500px,
  .app-blank .w-md-500px {
    width: 100% !important;
    max-width: 100%;
  }
}

/* ── Admin minimal layout ── */
@media (max-width: 575.98px) {
  .top-bar .d-flex.justify-content-between {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.75rem;
  }

  .main-content {
    padding: 0.75rem;
  }
}

/* ── Charts ── */
@media (max-width: 767.98px) {
  .dashboard-chart-wrap,
  canvas {
    max-width: 100%;
  }

  .dashboard-chart-wrap {
    min-height: 220px;
    height: 240px;
  }
}

/* ── Dashboard spotlight / top stats ── */
@media (max-width: 991.98px) {
  .dash-spotlight-row > [class*="col-"] {
    margin-bottom: 1rem;
  }

  .dash-champion-panel {
    flex-direction: column;
    text-align: center;
  }

  #topStatsRow .col-xl-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 575.98px) {
  #topStatsRow .col-xl-3,
  #topStatsRow .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .fs-2x {
    font-size: 1.5rem !important;
  }
}

/* ── Select2 dropdowns ── */
@media (max-width: 575.98px) {
  .select2-container {
    max-width: 100% !important;
  }
}

/* ── Footer ── */
@media (max-width: 575.98px) {
  #kt_footer .container-fluid {
    text-align: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* ── Login / auth card width ── */
@media (max-width: 767.98px) {
  .app-blank .w-md-600px,
  .app-blank .w-lg-500px {
    width: 100% !important;
    max-width: 100%;
    padding: 1.25rem !important;
  }
}

/* ── Public site (site.blade.php layout) ── */
@media (max-width: 991.98px) {
  .navbar-default .container,
  .navbar-default .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (max-width: 767.98px) {
  .site-content img,
  .main-content img {
    max-width: 100%;
    height: auto;
  }

  .table-responsive {
    margin-bottom: 1rem;
  }
}