/* KVPL Medical Claims v3.2.4
   Compact Employee Edit photo field and non-sticky Employee Utilisation
   header. The report header deliberately scrolls with the table so overlap
   is impossible. */

@media screen {
  /* Keep the familiar compact edit-form presentation: one small photo preview
     and one vertically arranged upload field, with no experimental wide grid. */
  .employee-photo-row-v324 {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 16px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 14px !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
    border: 1px solid #e1e7f0 !important;
    border-radius: 13px !important;
    background: #f8fafd !important;
    box-sizing: border-box !important;
  }

  .employee-photo-preview-v324 {
    display: grid !important;
    place-items: center !important;
    width: 72px !important;
    min-width: 72px !important;
    height: 64px !important;
    overflow: hidden !important;
  }

  .employee-photo-preview-v324 > .employee-profile-avatar-lg {
    display: grid !important;
    place-items: center !important;
    position: static !important;
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    margin: 0 !important;
  }

  .employee-photo-control-v324 {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  .employee-photo-control-v324 .employee-photo-upload,
  .employee-photo-control-v324 .employee-photo-label,
  .employee-photo-control-v324 .file-picker {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 640px !important;
    box-sizing: border-box !important;
  }

  .employee-photo-control-v324 > .field-help {
    display: block !important;
    margin: 6px 0 0 !important;
    line-height: 1.4 !important;
  }

  .employee-photo-control-v324 > .photo-remove-check {
    display: inline-flex !important;
    margin: 8px 0 0 !important;
  }

  /* Permanent overlap prevention. The Employee Utilisation heading remains a
     normal table header and scrolls out with its rows. No sticky element or
     stacking layer remains in this table. */
  .utilisation-report-scroll-v324 {
    position: relative !important;
    isolation: auto !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
    background: #ffffff !important;
  }

  .utilisation-report-scroll-v324 > .utilisation-report-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  .utilisation-report-scroll-v324 > .utilisation-report-table > thead,
  .utilisation-report-scroll-v324 > .utilisation-report-table > thead > tr,
  .utilisation-report-scroll-v324 > .utilisation-report-table > thead > tr > th {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto !important;
    transform: none !important;
  }

  .utilisation-report-scroll-v324 > .utilisation-report-table > thead {
    display: table-header-group !important;
  }

  .utilisation-report-scroll-v324 > .utilisation-report-table > thead > tr > th {
    height: 44px !important;
    padding: 10px 12px !important;
    background: #f8fafd !important;
    background-image: none !important;
    background-clip: border-box !important;
    color: #526075 !important;
    border-top: 1px solid #e4eaf3 !important;
    border-bottom: 1px solid #dce3ed !important;
    box-shadow: none !important;
  }

  .utilisation-report-scroll-v324 > .utilisation-report-table > tbody,
  .utilisation-report-scroll-v324 > .utilisation-report-table > tbody > tr,
  .utilisation-report-scroll-v324 > .utilisation-report-table > tbody > tr > td {
    position: static !important;
    z-index: auto !important;
    transform: none !important;
  }

  @media (max-width: 680px) {
    .employee-photo-row-v324 {
      grid-template-columns: 60px minmax(0, 1fr) !important;
      column-gap: 12px !important;
      padding: 10px !important;
    }

    .employee-photo-preview-v324 {
      width: 60px !important;
      min-width: 60px !important;
      height: 58px !important;
    }

    .employee-photo-preview-v324 > .employee-profile-avatar-lg {
      width: 54px !important;
      min-width: 54px !important;
      height: 54px !important;
    }
  }
}