/* Shared HR module responsive layout. Desktop appearance stays unchanged. */

/* Patients/Partners: keep scrollbar space; do not let Bootstrap padding-right shift the page. */
html {
  overflow-y: scroll !important;
  scrollbar-gutter: stable !important;
}

body.modal-open {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

body.modal-open .site-header,
body.modal-open header.site-header {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

.container,
.container-fluid {
  min-width: 0;
}

.table-container {
  min-width: 0;
  max-width: 100%;
}

.dataTables_wrapper > .row.crm-dt-excel-row,
.dataTables_wrapper > .row:has(> [class*="col"] > .dt-buttons):not(:has(.dataTables_length)):not(:has(.dataTables_filter)) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.table-container .dataTables_wrapper > .row:has(.dataTables_length),
.table-container .dataTables_wrapper > .row:has(.dataTables_filter) {
  display: none !important;
  margin: 0 !important;
}

.modal-content,
.modal-body,
.modal-header,
.modal-footer {
  min-width: 0;
}

.modal-footer {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.file-row {
  flex-wrap: wrap;
  min-width: 0;
}

/* ── Tablet: keep tables, drop forced min-widths that cause overflow ── */
@media (max-width: 991.98px) {
  .table-container table.table,
  .table-container table.tabela,
  .table-container table[id],
  #employeeTable,
  #contractTable,
  #payrollTable,
  #leaveTable,
  #leaveBalancesTable,
  #txnTable,
  #recruitmentTable,
  #applicantsTable,
  #travelTable,
  #travelReportTable,
  #AttendanceTable,
  #MonthlySummaryTable,
  #overtimeTable,
  #monthlySummaryTable,
  #requestsTable,
  #hrAuditTable {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* ── Mobile / small tablet ── */
@media (max-width: 767.98px) {
  .container,
  .container-fluid {
    width: 100%;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100%;
    height: auto;
  }

  /* Page title + action toolbars */
  .container > .d-flex.justify-content-between,
  .container-fluid > .d-flex.justify-content-between,
  .applicants-page-wrap > .d-flex.justify-content-between {
    flex-wrap: wrap;
    align-items: flex-start !important;
    gap: 10px;
  }

  .container > .d-flex.justify-content-between > .d-flex,
  .container > .d-flex.justify-content-between > div:last-child {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .container > .d-flex.justify-content-between .btn,
  .container > .d-flex.justify-content-between a.btn {
    flex: 1 1 auto;
  }

  /* Inputs / selects stretch when space is tight */
  .table-container .form-control,
  .table-container .form-select,
  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_length select,
  .modal-body .form-control,
  .modal-body .form-select,
  .modal-body .select2-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_length {
    float: none !important;
    text-align: left !important;
    width: 100%;
  }

  .dataTables_wrapper .dataTables_filter label,
  .dataTables_wrapper .dataTables_length label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  /* Modals fit the viewport (Bootstrap and custom overlays) */
  .modal {
    padding: 0.75rem !important;
  }

  .modal-dialog,
  .modal .modal-dialog.modal-lg,
  .modal .modal-dialog.modal-xl,
  .modal .modal-dialog.modal-md,
  #addEmployeeModal .modal-dialog,
  #editEmployeeModal .modal-dialog,
  #viewEmployeeModal .modal-dialog,
  #addLeaveModal .modal-dialog,
  #editLeaveModal .modal-dialog,
  #viewLeaveModal .modal-dialog,
  #signedUploadModal .modal-dialog,
  #addLeaveModal .modal-dialog.modal-lg,
  #editLeaveModal .modal-dialog.modal-lg,
  #viewLeaveModal .modal-dialog.modal-lg,
  #viewApplicantModal .modal-dialog,
  #dailyHoursModal .modal-dialog,
  #createRequestModal .modal-dialog,
  #requestDetailsModal .modal-dialog,
  #hrOvertimeConfirmModal .modal-dialog,
  .otpm-modal .modal-dialog,
  #addContractModal .modal-content,
  #editContractModal .modal-content,
  #viewContractModal .modal-content,
  #exportPayrollModal .modal-dialog,
  #exportPayrollModal .modal-dialog.modal-md {
    max-width: calc(100vw - 1.5rem) !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0.75rem auto !important;
  }

  #viewJobModal.crm-employee-modal .modal-dialog,
  #viewJobModal.crm-employee-modal .crm-employee-modal-dialog,
  #viewPayrollModal.crm-employee-modal .modal-dialog,
  #viewPayrollModal.crm-employee-modal .crm-employee-modal-dialog,
  #editPayrollModal.crm-employee-modal .modal-dialog,
  #editPayrollModal.crm-employee-modal .crm-employee-modal-dialog,
  #viewAuditEventModal.crm-employee-modal .modal-dialog,
  #viewAuditEventModal.crm-employee-modal .crm-employee-modal-dialog {
    width: var(--crm-patient-modal-card-width, 95%) !important;
    max-width: var(--crm-patient-modal-max-width, 1200px) !important;
    height: var(--crm-modal-viewport-height, 100vh) !important;
    max-height: var(--crm-modal-viewport-height, 100vh) !important;
    margin: 0 auto !important;
  }

  #addJobModal.crm-employee-modal .modal-dialog,
  #addJobModal.crm-employee-modal .crm-employee-modal-dialog,
  #editJobModal.crm-employee-modal .modal-dialog,
  #editJobModal.crm-employee-modal .crm-employee-modal-dialog {
    width: min(1200px, 55%) !important;
    max-width: min(1200px, 55%) !important;
    height: var(--crm-modal-viewport-height, 100vh) !important;
    max-height: var(--crm-modal-viewport-height, 100vh) !important;
    margin: 0 auto !important;
  }

  #viewJobModal.crm-employee-modal .modal-content,
  #viewJobModalBody,
  #addJobModal.crm-employee-modal .modal-content,
  #addJobModalBody,
  #editJobModal.crm-employee-modal .modal-content,
  #editJobModalBody,
  #viewPayrollModal.crm-employee-modal .modal-content,
  #viewPayrollModalBody,
  #editPayrollModal.crm-employee-modal .modal-content,
  #editPayrollModalBody,
  #viewAuditEventModal.crm-employee-modal .modal-content,
  #viewAuditEventModalBody {
    height: 100% !important;
    max-height: none !important;
  }

  .modal-content,
  #exportPayrollModal .modal-content,
  #addContractModal .modal-content,
  #editContractModal .modal-content,
  #viewContractModal .modal-content,
  #offerApplicantModal .modal-content,
  #hireApplicantModal .modal-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: calc(100vh - 1.5rem);
    height: auto !important;
  }

  .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-header .modal-title,
  .modal-header h3,
  .modal-header h5 {
    font-size: 1.1rem;
    overflow-wrap: anywhere;
  }

  .modal-footer .btn {
    flex: 1 1 auto;
    min-height: 40px;
  }

  /* Touch-friendly row actions */
  .actions-cell .btn,
  td.actions-cell .btn {
    min-height: 40px;
    min-width: 72px;
    padding: 6px 14px;
  }

  .d-flex.flex-nowrap {
    flex-wrap: wrap !important;
  }

  /* Long text stays inside the viewport */
  td,
  th,
  .employee-fullname,
  .badge,
  .status-badge {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .status-badge {
    min-width: 0 !important;
    max-width: none !important;
    white-space: normal !important;
  }

  .file-row {
    flex-direction: column;
    align-items: stretch !important;
  }

  .file-row .btn,
  .file-row label.btn {
    margin-left: 0 !important;
    width: 100%;
  }

  /* Year pickers used on leave admin pages */
  .hr-yearpicker {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Management tables → labeled cards ── */
  .table-container {
    overflow-x: visible !important;
    padding: 12px !important;
  }

  .table-container table.table,
  .table-container table.tabela,
  .table-container table[id] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .table-container table.table > thead,
  .table-container table.tabela > thead,
  .table-container table[id] > thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
  }

  /* Do not use !important on display — DataTables hides paged-out rows inline. */
  .table-container table.table > tbody > tr,
  .table-container table.tabela > tbody > tr,
  .table-container table[id] > tbody > tr {
    display: block;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
  }

  [data-bs-theme="light"] .table-container table > tbody > tr {
    background-color: #fbfbfb !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
  }

  [data-bs-theme="dark"] .table-container table > tbody > tr {
    background-color: #0d1e2b !important;
    border: 1px solid #212c35 !important;
  }

  .table-container table.table > tbody > tr > td,
  .table-container table.tabela > tbody > tr > td,
  .table-container table[id] > tbody > tr > td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 12px;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 9px 14px !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
    white-space: normal !important;
    text-align: right;
    box-sizing: border-box;
  }

  .table-container table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    flex: 0 0 auto;
    max-width: 42%;
    text-align: left;
    white-space: normal;
  }

  [data-bs-theme="light"] .table-container table > tbody > tr > td[data-label]::before {
    color: #64748b;
  }

  [data-bs-theme="dark"] .table-container table > tbody > tr > td[data-label]::before {
    color: #94a3b8;
  }

  .table-container table > tbody > tr > td:last-child {
    border-bottom: none !important;
  }

  .table-container table > tbody > tr > td.actions-cell,
  .table-container table > tbody > tr > td:last-child:has(.btn) {
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    text-align: left;
  }

  .table-container table > tbody > tr > td.actions-cell::before,
  .table-container table > tbody > tr > td:last-child:has(.btn)::before {
    display: none !important;
  }

  .table-container table > tbody > tr > td.dataTables_empty,
  .table-container table > tbody > tr > td[colspan] {
    display: block !important;
    text-align: center;
    border-bottom: none !important;
  }

  .table-container table > tbody > tr > td.dataTables_empty::before,
  .table-container table > tbody > tr > td[colspan]::before {
    display: none !important;
  }
}

@media (max-width: 479.98px) {
  .container,
  .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }

  .modal-footer .btn {
    width: 100%;
    flex: 1 1 100%;
  }

  .custom-pagination-footer .pagination-btn {
    min-height: 40px;
    min-width: 40px;
  }
}