/**
 * MCC Admin — global mobile & tablet responsive overrides
 * Loaded via views/admin/partials/head.ejs on all admin pages.
 */

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

.page,
.page-main,
.main-content,
.side-app,
.main-container {
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

/*
 * DataTables Responsive hides extra columns behind a + control.
 * Admin tables should show all columns with horizontal scroll instead.
 */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
  display: none !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td:not(.child):not(.dtr-control),
table.dataTable.dtr-inline.collapsed > thead > tr > th:not(.dtr-control),
table.dataTable.dtr-inline > tbody > tr > td,
table.dataTable.dtr-inline > thead > tr > th {
  display: table-cell !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td,
table.dataTable.dtr-inline.collapsed > tbody > tr > th,
table.dataTable.dtr-inline.collapsed > thead > tr > th {
  white-space: nowrap;
}

/* ── Tablet and below (≤991px) ── */
@media (max-width: 991.98px) {
  .main-content.app-content {
    padding: 0.75rem !important;
  }

  .main-container.container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Page headers — stack title, breadcrumbs, and actions */
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem;
  }

  .page-header > .d-flex,
  .page-header .d-flex.flex-wrap {
    width: 100%;
    justify-content: flex-start !important;
  }

  .page-header.d-flex.justify-content-between > div:last-child,
  .page-header.d-flex.justify-content-between > .d-flex {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .page-header.d-flex > div:first-child {
    width: 100%;
  }

  .page-header .btn {
    font-size: 0.8125rem;
    padding: 0.45rem 0.75rem;
  }

  .page-title,
  .page-header h1 {
    font-size: 1.25rem !important;
    line-height: 1.3;
    word-break: break-word;
  }

  .page-header p,
  .page-header .text-muted {
    font-size: 0.875rem;
  }

  .page-header .breadcrumb {
    width: 100%;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    font-size: 0.8125rem;
  }

  .welcome-subtitle {
    font-size: 0.875rem;
    word-break: break-word;
  }

  /* Form columns — stack on all pages (settings, profile, CRUD, filters) */
  .row > [class*="col-md"],
  .row > [class*="col-lg"],
  .row > [class*="col-xl"],
  .form-row > [class*="col-md"],
  .form-row > [class*="col-lg"],
  .form-row > [class*="col-xl"],
  form.row.g-3 > [class*="col-md"],
  form.row.g-3 > [class*="col-lg"],
  form.row.g-3 > [class*="col-xl"],
  .card-body .row.g-3 > [class*="col-md"],
  .card-body .row.g-3 > [class*="col-lg"],
  .card-body .row.g-3 > [class*="col-xl"],
  .needs-validation [class*="col-xl"],
  .needs-validation [class*="col-md"],
  .needs-validation [class*="col-lg"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Cards */
  .card-body {
    padding: 1rem;
  }

  .card-header {
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
  }

  .card-header.d-flex {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem;
  }

  .card-header .card-title,
  .card-header h3,
  .card-header h5 {
    font-size: 1rem;
    line-height: 1.4;
    word-break: break-word;
  }

  .card-header .badge {
    display: inline-block;
    margin-top: 0.25rem;
    white-space: normal;
  }

  .card-header .badge,
  .card-header .btn {
    align-self: flex-start;
  }

  .card-header .card-options {
    width: 100%;
    margin-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }

  /* Tables — horizontal scroll */
  .table-responsive,
  .evaluate-table-scroll,
  .ber-table-scroll,
  .comparative-scroll-wrap,
  .dataTables_wrapper {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .comparative-scroll-wrap {
    max-height: none !important;
  }

  .table {
    font-size: 0.8125rem;
  }

  .table:not(.dataTable) {
    min-width: 640px;
  }

  #formsTable,
  #table1,
  .selection-table,
  .ber-items-table,
  .comparative-report-table,
  .evaluate-items-table {
    min-width: 720px;
  }

  .table th,
  .table td {
    padding: 0.45rem 0.5rem;
    vertical-align: middle;
  }

  .table .form-control,
  .table .form-select {
    min-width: 72px;
    font-size: 0.8125rem;
  }

  /* Disable horizontal sticky columns on small screens */
  .ber-items-table .sticky-col,
  .evaluate-items-table .sticky-item-col,
  .comparative-report-table thead .sticky-header-col,
  [class*="sticky-col"],
  [class*="sticky-item-col"] {
    position: static !important;
    left: auto !important;
    min-width: unset !important;
    max-width: none !important;
    width: auto !important;
    box-shadow: none !important;
  }

  /* DataTables controls */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: left !important;
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    margin-left: 0 !important;
    display: block;
    margin-top: 0.25rem;
  }

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

  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control {
    padding-left: 2rem;
  }

  /* Select2 / multiselect */
  .select2-container,
  .ms-parent {
    width: 100% !important;
    max-width: 100%;
  }

  /* Sidebar & header */
  .app.sidenav-toggled .app-content,
  .app-content {
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
  }

  .app-sidebar {
    z-index: 1050;
  }

  .app-header.header {
    padding-left: 0;
    padding-right: 0;
  }

  .app-header .main-container,
  .app-header .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .app-header .header-brand-img,
  .logo-horizontal img {
    max-height: 42px;
    width: auto;
  }

  .full-screen-link {
    display: none !important;
  }

  /* Dashboard */
  .display-6 {
    font-size: 1.5rem !important;
  }

  .card-value-text {
    font-size: 1.5rem !important;
  }

  .dashboard-hero-content {
    padding: 1.25rem !important;
  }

  /* Action button groups inside table cells */
  td .d-flex.flex-wrap.gap-2 {
    max-width: 100%;
  }

  td .d-flex.flex-wrap.gap-2 .btn-sm,
  td .btn-sm {
    font-size: 0.7rem;
    padding: 0.2rem 0.45rem;
  }

  /* Profile page — stack sidebar card and form */
  .row > .col-xl-4,
  .row > .col-xl-8,
  .row > .col-lg-4,
  .row > .col-lg-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Settings page inline article width */
  article {
    width: 100% !important;
    margin-top: 0.5rem;
  }

  /* Summernote / rich text */
  .note-editor,
  .note-editing-area {
    max-width: 100%;
  }

  /* Export buttons */
  .export-excel-btn {
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
  }

  /* Login page (also used when head partial is not included) */
  .container-login100 {
    padding: 1rem;
    min-height: auto;
  }

  .wrap-login100 {
    width: 100% !important;
    max-width: 420px;
    margin: 0 auto;
    padding: 1.5rem !important;
  }

  .login-logo {
    max-height: 80px;
    width: auto;
  }

  /* Error pages */
  .error-page .display-1 {
    font-size: 4rem !important;
  }

  .error-page .custom-emoji svg {
    width: 80px;
    height: 80px;
  }

  /* Modals */
  .modal-dialog {
    margin: 0.5rem;
    max-width: calc(100% - 1rem);
  }

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

  /* File upload */
  .fileupload,
  .dropzone {
    max-width: 100%;
  }

  /* Global loader */
  #global-loader .loader-img {
    max-width: 80vw;
  }

  /* Alerts & misc */
  .alert {
    font-size: 0.875rem;
  }

  #back-to-top {
    bottom: 1rem;
    right: 1rem;
  }

  /* RBAC dual-table pages */
  .row .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* ── Phone (≤575px) ── */
@media (max-width: 575.98px) {
  .main-content.app-content {
    padding: 0.5rem !important;
  }

  .page-header .d-flex.gap-2,
  .page-header .d-flex.flex-wrap.gap-2,
  .page-header > .d-flex {
    flex-direction: column;
    align-items: stretch !important;
  }

  .page-header .d-flex.gap-2 .btn,
  .page-header .d-flex.flex-wrap.gap-2 .btn,
  .page-header > .d-flex .btn,
  .page-header.d-flex.justify-content-between > div:last-child .btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  .page-title,
  .page-header h1 {
    font-size: 1.1rem !important;
  }

  .table {
    font-size: 0.75rem;
  }

  .ber-group-card .card-header h5,
  .card-header h5 {
    font-size: 0.9rem;
    line-height: 1.35;
  }

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

  .card-header .card-options .btn,
  .card-header .card-options .btn-group {
    width: 100%;
  }

  .card-header .card-options .btn-group .btn {
    flex: 1;
  }

  .icon-container {
    width: 48px !important;
    height: 48px !important;
  }

  .growl {
    max-width: calc(100vw - 2rem) !important;
  }

  .login100-form-title {
    font-size: 1.25rem;
  }

  .login100-form-btn {
    width: 100%;
  }
}

/* ── Landscape phone / small tablet ── */
@media (max-width: 991.98px) and (orientation: landscape) {
  .comparative-scroll-wrap {
    max-height: 70vh !important;
  }
}