diff --git a/src/admin/attendance.css b/src/admin/attendance.css
index e27b93b..a60a5e4 100644
--- a/src/admin/attendance.css
+++ b/src/admin/attendance.css
@@ -434,3 +434,22 @@
   color: var(--text-muted);
   font-family: monospace;
 }
+
+/* ============================================================================
+   Mobile (responsive)
+   ============================================================================ */
+
+/* The Leaflet map at a fixed 400px dominates a phone viewport — let it scale
+   with the viewport height (with sensible min/max) on small screens. */
+@media (max-width: 640px) {
+  .attendance-location-map {
+    height: clamp(220px, 45vh, 400px);
+  }
+}
+
+/* The clock card's 2rem padding crushes content at ~360px — tighten it. */
+@media (max-width: 480px) {
+  .attendance-clock-card {
+    padding: 1rem;
+  }
+}
diff --git a/src/admin/components.css b/src/admin/components.css
index ca5f505..02d3e5a 100644
--- a/src/admin/components.css
+++ b/src/admin/components.css
@@ -845,7 +845,9 @@
 }
 
 @media (max-width: 480px) {
-  .admin-kpi-grid {
+  .admin-kpi-grid,
+  .admin-kpi-4,
+  .admin-kpi-3 {
     grid-template-columns: 1fr;
   }
 }
diff --git a/src/admin/datepicker.css b/src/admin/datepicker.css
index f7c61b8..c60452c 100644
--- a/src/admin/datepicker.css
+++ b/src/admin/datepicker.css
@@ -197,3 +197,15 @@
 .react-datepicker__close-icon::after {
   background-color: var(--accent-color) !important;
 }
+
+/* Mobile safety net — keep the popper inside the viewport on small phones.
+   (Native date input is used on touch; this guards the rare desktop-style popper.) */
+@media (max-width: 480px) {
+  .react-datepicker-popper {
+    max-width: calc(100vw - 24px);
+  }
+
+  .react-datepicker {
+    font-size: 0.8rem !important;
+  }
+}
diff --git a/src/admin/filemanager.css b/src/admin/filemanager.css
index 74ddc3b..4995d0b 100644
--- a/src/admin/filemanager.css
+++ b/src/admin/filemanager.css
@@ -169,3 +169,31 @@
   color: var(--text-tertiary);
   cursor: help;
 }
+
+/* ============================================================================
+   File Manager — mobile
+   ============================================================================ */
+
+@media (max-width: 640px) {
+  /* Toolbar wraps so actions drop below the path instead of overflowing */
+  .fm-toolbar {
+    flex-wrap: wrap;
+  }
+
+  /* New-folder input goes full width (override the 250px desktop cap) */
+  .fm-new-folder .admin-form-input {
+    max-width: none;
+    width: 100%;
+  }
+
+  /* Breadcrumb scrolls horizontally instead of overflowing the container */
+  .fm-breadcrumb {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .fm-breadcrumb-segment {
+    flex-shrink: 0;
+  }
+}
diff --git a/src/admin/forms.css b/src/admin/forms.css
index 1858113..102391e 100644
--- a/src/admin/forms.css
+++ b/src/admin/forms.css
@@ -310,6 +310,8 @@
 }
 
 @media (max-width: 480px) {
+  .admin-form-row,
+  .admin-form-row-3,
   .admin-form-row-4,
   .admin-form-row-5 {
     grid-template-columns: 1fr;
diff --git a/src/admin/invoices.css b/src/admin/invoices.css
index 9cb7462..4d52213 100644
--- a/src/admin/invoices.css
+++ b/src/admin/invoices.css
@@ -127,9 +127,17 @@
 }
 
 @media (max-width: 640px) {
+  /* Month-nav row may wrap so it never forces horizontal page overflow */
+  .invoice-month-nav {
+    flex-wrap: wrap;
+  }
+
+  /* 44px touch target for the prev/next month buttons */
   .invoice-month-btn {
     width: 44px;
     height: 44px;
+    min-width: 44px;
+    min-height: 44px;
   }
 
   .received-upload-row {
diff --git a/src/admin/offers.css b/src/admin/offers.css
index 0fdd00f..e8891d1 100644
--- a/src/admin/offers.css
+++ b/src/admin/offers.css
@@ -464,6 +464,26 @@
   display: none;
 }
 
+/* Keep Quill picker dropdowns on-screen on narrow phones.
+   The font picker hard-codes min-width: 11rem and the color picker a fixed
+   176px width — both overflow a ~360px viewport. */
+@media (max-width: 480px) {
+  .admin-rich-editor .ql-snow .ql-picker-options,
+  .admin-rich-editor .ql-snow .ql-font .ql-picker-options,
+  .admin-rich-editor .ql-snow .ql-size .ql-picker-options {
+    min-width: 0;
+    max-width: calc(100vw - 32px);
+  }
+
+  .admin-rich-editor
+    .ql-snow
+    .ql-color-picker
+    .ql-picker-options[aria-hidden="false"] {
+    width: auto;
+    max-width: calc(100vw - 32px);
+  }
+}
+
 @media (max-width: 768px) {
   .offers-items-table .admin-table td .admin-form-input {
     font-size: 16px;
diff --git a/src/admin/tables.css b/src/admin/tables.css
index 709e20a..95aec72 100644
--- a/src/admin/tables.css
+++ b/src/admin/tables.css
@@ -65,6 +65,16 @@
   }
 }
 
+/* Row actions — enlarge touch targets so icon buttons are tappable */
+@media (max-width: 768px) {
+  .admin-table-actions a,
+  .admin-table-actions button,
+  .admin-table-actions .admin-btn-icon {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
 .admin-table-user {
   display: flex;
   align-items: center;