/* --- Professional Photo Upload Widget --- */

.photo-upload-box {
  width: 140px;
  height: 110px;
  border: 2px dashed #ccc;
  border-radius: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fafafa;
  cursor: pointer;
  transition: 0.2s;
}

.pager {
  display: flex;
  /*gap: 8px;*/
  justify-content: center;
  align-items: center;
  background: #e3eaee;
  position: sticky;
  margin-top: 15px;
  height: 20px;
}

/* modal */

.photo-upload-box:hover {
  border-color: #1d4ed8;
  background: #eef2ff;
}

.photo-upload-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-upload-placeholder {
  color: #666;
  font-size: 12px;
  text-align: center;
  padding: 8px;
}

.photo-upload-input {
  display: none;
}

 

.login-box {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 450px;
  padding: 25px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.thumbnail {
  width: 56px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  cursor: pointer;
}

 

.mainku {
  top: 69px;
  left: 0px;
  width: 100%;
  height: calc(100% - 75px);
}

/* Map view container follows same layout offsets as table view */
.mapku {
  top: 69px;
  left: 0px;
  width: 100%;
  height: calc(100% - 75px);
  overflow: hidden;
}

@media (min-width: 768px) {
  .mainku {
    top: 0px;
    width: calc(100% - 68px);
    height: 100%;
    left: 0px;
  }
}

@media (min-width: 768px) {
  .mapku {
    top: 0px;
    width: calc(100% - 68px);
    height: 100%;
    left: 0px;
    overflow: hidden;
  }
}
@media (min-width: 768px) {
  .dataTable {
    height: calc(100% - 190px);
  }
}

/* Custom striping for rowspan=2 */
#dataTable tbody tr:nth-child(4n+1) > td,
#dataTable tbody tr:nth-child(4n+2) > td {
  background-color: rgba(0, 0, 0, 0.025);
  --bs-table-accent-bg: rgba(0, 0, 0, 0.025);
}

/* Print Styles */
@media print {
  @page {
    margin: 1cm;
    size: auto;
  }

  /* Reset body and hide background */
  body {
    background: none !important;
    visibility: hidden; /* Hide everything initially */
    height: auto !important;
    overflow: visible !important;
  }

  /* Explicitly show what we want */
  
  /* 1. Header with Logo */
  #print-header {
    visibility: visible !important;
    display: block !important;
    position: static !important;
    height: auto !important;
    width: 100% !important;
    background: none !important;
    margin-bottom: 20px !important;
    text-align: center !important;
  }

  /* Ensure the wrapper inside header is also visible and clean */
  #print-header > div {
    visibility: visible !important;
    display: block !important;
    background: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }

  /* Logo styling */
  #print-logo {
    visibility: visible !important;
    display: inline-block !important;
    width: 80px !important; /* Slightly larger for print */
    height: auto !important;
    margin: 0 auto !important;
  }

  /* Hide the button in header */
  #print-header button {
    display: none !important;
  }

  /* 2. Main Content (Table) */
  main.mainku {
    visibility: visible !important;
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: white !important;
    top: 0 !important;
    left: 0 !important;
  }

  /* Hide the title bar and filter button inside main */
  main.mainku > div:first-child {
    display: none !important;
  }
  
  /* Hide the HR */
  main.mainku > hr {
    display: none !important;
  }

  /* Hide the filter container */
  #pilihan {
    display: none !important;
  }

  /* Show the container holding the table */
  main.mainku > .container.bg-light {
    visibility: visible !important;
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    background: white !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important; /* Override Bootstrap container max-width */
  }

  /* Table styling */
  #dataTable {
    visibility: visible !important;
    display: table !important;
    width: 100% !important;
    border-collapse: collapse !important;
    border-bottom: 1px solid #000 !important; /* Force bottom border */
  }

  /* Avoid breaking rows inside */
  #dataTable tr {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  /* Reset striping and backgrounds */
  #dataTable tbody,
  #dataTable tbody tr, 
  #dataTable tbody td {
    background-color: #ffffff !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-bg: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
  }

  /* Ensure no print color adjustment on body */
  #dataTable tbody tr, 
  #dataTable tbody td {
    -webkit-print-color-adjust: unset !important;
    print-color-adjust: unset !important;
  }

  /* Header specific styling */
  #dataTable thead th {
    background-color: #e0e0e0 !important; /* Light gray */
    color: #000 !important;
    font-size: 11pt !important; /* Larger */
    font-weight: bold !important; /* Bold */
    border: 1px solid #000 !important;
    padding: 6px !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Cell styling */
  #dataTable tbody td {
    border: 1px solid #000 !important;
    padding: 4px !important;
    font-size: 10pt !important;
  }

  /* Hide Actions column */
  #dataTable th:last-child,
  #dataTable td:last-child {
    display: none !important;
  }
  
  /* Hide Pager */
  #pager {
    display: none !important;
  }

  /* Hide offcanvas, modals, and other overlays */
  .offcanvas, .modal, .modal-backdrop {
    display: none !important;
  }
}