/* =========================================================
   V270 - FIELD TANGGAL SERAGAM SAFARI iPHONE / iPAD
   Berlaku global untuk seluruh halaman yang memakai head_html().

   Tujuan:
   - mencegah input[type="date"] melebar keluar kartu/grid di iOS/iPadOS;
   - menghapus ketergantungan pada -webkit-fill-available yang dapat
     menghitung lebar hingga padding container;
   - menjaga native date picker tetap dapat dibuka dengan mengetuk field;
   - menyamakan alignment, tinggi, dan spacing field tanggal.
   ========================================================= */

/* Grid/flex item harus boleh mengecil mengikuti container. */
html body .field{
  min-width:0;
  max-width:100%;
}

html body .field input[type="date"]{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  inline-size:100% !important;
  max-inline-size:100% !important;
  min-inline-size:0 !important;
  box-sizing:border-box !important;
  margin-left:0 !important;
  margin-right:0 !important;
  overflow:hidden !important;
  text-align:left !important;
}

/* Safari membungkus nilai tanggal dalam sub-control dengan ukuran sendiri. */
html body .field input[type="date"]::-webkit-date-and-time-value{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
  text-align:left;
  box-sizing:border-box;
}

html body .field input[type="date"]::-webkit-datetime-edit{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0;
  overflow:hidden;
  text-align:left;
  box-sizing:border-box;
}

html body .field input[type="date"]::-webkit-datetime-edit-fields-wrapper{
  min-width:0;
  max-width:100%;
  padding:0;
}

/*
 * Khusus WebKit touch (iPhone/iPad).
 * Jangan memakai -webkit-fill-available: pada Safari iPad nilai ini dapat
 * melewati content-box dan mengambil area padding kartu.
 */
@supports (-webkit-touch-callout:none){
  html body .field input[type="date"]{
    -webkit-appearance:none !important;
    appearance:none !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    inline-size:100% !important;
    max-inline-size:100% !important;
    min-inline-size:0 !important;
    font-size:16px !important;
    line-height:1.35 !important;
    text-align:left !important;
    padding-right:44px !important;
    background-color:#fff;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 14px center;
    background-size:18px 18px;
  }

  /* Hilangkan indikator native agar tidak bertumpuk dengan ikon seragam. */
  html body .field input[type="date"]::-webkit-calendar-picker-indicator{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    opacity:0;
    cursor:pointer;
  }

  /* Form lama V268/V269 memakai contain/overflow pada wrapper tanggal. */
  html body .field:has(input[type="date"]){
    position:relative;
    min-width:0 !important;
    max-width:100% !important;
    contain:none !important;
  }
}

/* iPad portrait/landscape: jaga track grid tetap boleh menyusut. */
@media (min-width:761px) and (max-width:1180px){
  html body .grid-2 > .field,
  html body .grid-3 > .field,
  html body .grid-4 > .field,
  html body .op-filter-v54 > .field,
  html body .op-grid-v54 > .field,
  html body .v7640-upload-fields-v58 > .field{
    min-width:0 !important;
    max-width:100% !important;
  }
}

/* iPhone: hindari auto-zoom dan pastikan field tetap di dalam padding kartu. */
@media (max-width:760px){
  html body .field input[type="date"]{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    font-size:16px !important;
  }
}