Refactor admin modals: replace backdrop divs with native <dialog> elements for improved accessibility and functionality

admin/index.php

@@ -239,11 +239,10 @@ $announcements = get_all_announcements();
     </div>
   </main>
 
-  <!-- Modal Backdrop: Announcement Editor (Create / Edit) — server-rendered
-       open/closed via the is-open class, since this page has no JS file;
-       the underlying save is still a plain form POST + reload, unchanged. -->
-  <div class="admin-modal-backdrop<?= ($isCreatingNew || $editItem) ? ' is-open' : '' ?>" role="dialog" aria-modal="true" aria-labelledby="modal-ann-title">
-    <div class="admin-modal">
+  <!-- Modal: Announcement Editor (Create / Edit). The server marks it
+       data-open-on-load for ?new / ?edit URLs and index.js opens it with
+       showModal(); saving is still a plain form POST + reload. -->
+  <dialog class="admin-modal" id="modal-ann" aria-labelledby="modal-ann-title"<?= ($isCreatingNew || $editItem) ? ' data-open-on-load' : '' ?>>
       <div class="modal-header">
         <h2 id="modal-ann-title"><?= $editItem ? '✏️ Edit Announcement' : '✨ New Announcement' ?></h2>
         <a href="index.php" class="modal-close" aria-label="Close dialog">&times;</a>
@@ -317,8 +316,7 @@ $announcements = get_all_announcements();
           <a href="index.php" class="btn btn-outline">Cancel</a>
         </div>
       </form>
-    </div>
-  </div>
+  </dialog>
 
   <script src="index.js" defer></script>