/* Mobile modal polish: compact, native controls stay inside the card. */
@media (max-width: 760px){
  .modal-wrap{align-items:flex-end!important;padding:0!important;background:rgba(12,28,55,.32)!important;backdrop-filter:blur(5px)}
  .modal{width:100%!important;max-width:none!important;max-height:88dvh!important;overflow:auto!important;border-radius:28px 28px 0 0!important;padding:24px 20px calc(24px + env(safe-area-inset-bottom))!important;box-shadow:0 -18px 55px rgba(23,54,100,.16)!important}
  .modal h2{font-size:24px!important;margin:0 0 18px!important;color:#102a55}
  .modal .form-grid{display:grid!important;grid-template-columns:1fr!important;gap:14px!important}
  .modal .field{min-width:0!important;margin:0!important}
  .modal .field label,.modal fieldset legend{font-weight:800!important;color:#667a9a!important;margin-bottom:7px!important}
  .modal input,.modal select,.modal textarea{box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;height:54px!important;border:1px solid #d9e3f1!important;border-radius:16px!important;padding:0 15px!important;background:#fff!important;font-size:17px!important;color:#102a55!important}

  /* Member, Bazar and Schedule use the same compact date treatment. */
  .modal:has(#memberForm) #memberForm .field:has(>input[type=date]),
  .modal:has(#bazarForm) #bazarForm .field:has(>input[type=date]),
  .modal:has(#scheduleProForm) #scheduleProForm .field:has(>input[type=date]){position:relative!important}
  .modal:has(#memberForm) #memberForm .field:has(>input[type=date])::after,
  .modal:has(#bazarForm) #bazarForm .field:has(>input[type=date])::after,
  .modal:has(#scheduleProForm) #scheduleProForm .field:has(>input[type=date])::after{content:"";position:absolute!important;right:14px!important;bottom:16px!important;width:18px!important;height:18px!important;background:#2a70d6!important;pointer-events:none!important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3v3m10-3v3M4.5 9h15M6 5h12a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3v3m10-3v3M4.5 9h15M6 5h12a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
  .modal:has(#memberForm) #memberForm input[type=date],
  .modal:has(#bazarForm) #bazarForm input[type=date],
  .modal:has(#scheduleProForm) #scheduleProForm input[type=date]{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;height:50px!important;min-height:50px!important;box-sizing:border-box!important;-webkit-appearance:none!important;appearance:none!important;padding:0 44px 0 14px!important;border:1px solid #d9e3f1!important;border-radius:14px!important;background:#fff!important;color:#102a55!important;text-align:left!important;text-align-last:left!important;overflow:hidden!important;font-size:16px!important;font-weight:600!important;font-variant-numeric:tabular-nums!important;letter-spacing:0!important;line-height:normal!important;box-shadow:0 4px 14px rgba(31,67,118,.045)!important}
  .modal:has(#memberForm) #memberForm input[type=date]:focus,
  .modal:has(#bazarForm) #bazarForm input[type=date]:focus,
  .modal:has(#scheduleProForm) #scheduleProForm input[type=date]:focus{border-color:#4b8ee9!important;box-shadow:0 0 0 3px rgba(42,112,214,.10),0 5px 16px rgba(31,67,118,.055)!important;outline:none!important}
  .modal:has(#memberForm) #memberForm input[type=date]::-webkit-date-and-time-value,
  .modal:has(#bazarForm) #bazarForm input[type=date]::-webkit-date-and-time-value,
  .modal:has(#scheduleProForm) #scheduleProForm input[type=date]::-webkit-date-and-time-value{display:flex!important;align-items:center!important;justify-content:flex-start!important;width:auto!important;min-width:0!important;height:100%!important;min-height:100%!important;margin:0!important;padding:0!important;text-align:left!important;transform:none!important;line-height:normal!important}
  .modal:has(#memberForm) #memberForm input[type=date]::-webkit-datetime-edit,
  .modal:has(#bazarForm) #bazarForm input[type=date]::-webkit-datetime-edit,
  .modal:has(#scheduleProForm) #scheduleProForm input[type=date]::-webkit-datetime-edit{display:flex!important;align-items:center!important;justify-content:flex-start!important;width:auto!important;min-width:0!important;height:100%!important;min-height:100%!important;margin:0!important;padding:0!important;text-align:left!important;transform:none!important;line-height:normal!important}
  .modal:has(#memberForm) #memberForm input[type=date]::-webkit-datetime-edit-fields-wrapper,
  .modal:has(#bazarForm) #bazarForm input[type=date]::-webkit-datetime-edit-fields-wrapper,
  .modal:has(#scheduleProForm) #scheduleProForm input[type=date]::-webkit-datetime-edit-fields-wrapper{display:flex!important;align-items:center!important;justify-content:flex-start!important;width:auto!important;min-width:0!important;height:100%!important;margin:0!important;padding:0!important}
  .modal:has(#memberForm) #memberForm input[type=date]::-webkit-calendar-picker-indicator,
  .modal:has(#bazarForm) #bazarForm input[type=date]::-webkit-calendar-picker-indicator,
  .modal:has(#scheduleProForm) #scheduleProForm input[type=date]::-webkit-calendar-picker-indicator{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;opacity:0!important;cursor:pointer!important}

  /* Keep only the requested forms denser; unrelated modal layouts are untouched. */
  .modal:has(#memberForm) #memberForm .form-grid,
  .modal:has(#scheduleProForm) #scheduleProForm .form-grid{gap:11px!important}
  .modal:has(#memberForm) #memberForm input,
  .modal:has(#memberForm) #memberForm select,
  .modal:has(#scheduleProForm) #scheduleProForm input,
  .modal:has(#scheduleProForm) #scheduleProForm select{height:50px!important;min-height:50px!important;border-radius:14px!important;font-size:16px!important}
  .modal:has(#memberForm) .photo-picker{margin:12px 0!important;padding:11px 12px!important;border-radius:15px!important}
  .modal:has(#memberForm) .actions,
  .modal:has(#scheduleProForm) .actions{margin-top:15px!important}

  .modal textarea{height:auto!important;min-height:104px!important;padding-top:14px!important;resize:vertical}
  .modal fieldset.field{border:1px solid #dce5f1!important;border-radius:18px!important;padding:12px 14px!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .modal fieldset.field label{display:flex!important;align-items:center!important;gap:8px!important;margin:0!important;font-weight:700!important;color:#314765!important}
  .modal fieldset.field input[type=checkbox]{width:22px!important;height:22px!important;padding:0!important;flex:0 0 auto!important}
  .modal .actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:18px!important}
  .modal .actions .btn{width:100%!important;min-height:50px!important;border-radius:15px!important}
  .schedule-mail-box{margin-top:4px;padding:13px 14px;border-radius:16px;background:#f4f8ff;border:1px solid #dce8fa;color:#526987;font-size:13px;line-height:1.45}
  .schedule-mail-box b{display:block;color:#173a6c;margin-bottom:3px}
  .schedule-email-toggle{display:flex!important;align-items:center!important;gap:10px!important;padding:10px 12px!important;border:1px solid #dce6f1!important;border-radius:14px!important;background:#f6f9fd!important}
  .schedule-email-toggle input{width:20px!important;height:20px!important;min-height:20px!important;flex:0 0 20px!important;margin:0!important;accent-color:#1777e8}
  .schedule-email-toggle span{min-width:0}
  .schedule-email-toggle b,.schedule-email-toggle small{display:block}
  .schedule-email-toggle b{font-size:12px;color:#17345b}
  .schedule-email-toggle small{margin-top:2px;font-size:9px;line-height:1.35;color:#7b8ba1}

  html[data-theme="dark"] .modal:has(#memberForm) .field label,
  html[data-theme="dark"] .modal:has(#bazarForm) .field label,
  html[data-theme="dark"] .modal:has(#scheduleProForm) .field label{color:#9db0c5!important}
  html[data-theme="dark"] .modal:has(#scheduleProForm)>h2{color:#f5f8ff!important}
  html[data-theme="dark"] .modal:has(#memberForm) #memberForm .field:has(>input[type=date])::after,
  html[data-theme="dark"] .modal:has(#bazarForm) #bazarForm .field:has(>input[type=date])::after,
  html[data-theme="dark"] .modal:has(#scheduleProForm) #scheduleProForm .field:has(>input[type=date])::after{background:#75afff!important}
  html[data-theme="dark"] .modal:has(#memberForm) #memberForm input[type=date],
  html[data-theme="dark"] .modal:has(#bazarForm) #bazarForm input[type=date],
  html[data-theme="dark"] .modal:has(#scheduleProForm) #scheduleProForm input[type=date]{background:#101f31!important;color:#edf5ff!important;-webkit-text-fill-color:#edf5ff!important;border-color:#304a62!important;color-scheme:dark!important}
}