feat(App): implement mobile sidebar overlay with backdrop and responsive adjustments; enhance layout for better usability on small screens

frontend/src/index.css

@@ -166,20 +166,29 @@ button:focus-visible,
   transform: scale(1.05);
 }
 
-/* Minimum touch target size for mobile */
+/* Minimum touch target size for mobile (Tabler / a11y) */
 @media (max-width: 768px) {
-  .btn, .page-link, .dropdown-item {
+  .btn:not(.btn-icon), .page-link, .dropdown-item {
     min-height: 44px;
-    min-width: 44px;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
   }
   
   .btn-icon {
+    min-width: 44px;
+    min-height: 44px;
     width: 44px;
     height: 44px;
   }
+  
+  .navbar-toggler {
+    min-width: 44px;
+    min-height: 44px;
+    padding: 0.5rem;
+  }
 }
 
 /* Enhanced table row interactions */
@@ -429,21 +438,57 @@ button:focus-visible,
 }
 
 /* ===== Responsive Improvements ===== */
+@media (min-width: 576px) {
+  .w-sm-auto { width: auto !important; }
+}
 @media (max-width: 768px) {
-  .card-sm .avatar {
+  .card-sm .avatar,
+  .card .avatar.avatar-lg {
     width: 2.5rem;
     height: 2.5rem;
   }
   
-  .card-sm .h2 {
+  .card-sm .h2,
+  .card .h3.mb-0 {
     font-size: 1.25rem;
   }
   
   .table-responsive {
     font-size: 0.875rem;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .table-responsive .table {
+    margin-bottom: 0;
+  }
+  .table-responsive .table th,
+  .table-responsive .table td {
+    white-space: nowrap;
   }
   
   .btn-group {
     flex-wrap: wrap;
   }
+  
+  .page-title {
+    font-size: 1.35rem;
+  }
+  
+  .page-header .header-actions {
+    width: 100%;
+  }
+  
+  /* Карточки и ряды: компактные отступы на мобильных */
+  .row.g-3 { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; }
+  .card-title { font-size: 1rem; }
+  .card-header { padding: 0.5rem 0.75rem; }
+}
+
+/* Универсальные мобильные колонки: явный full-width ниже md */
+@media (max-width: 767.98px) {
+  .row .col-md-4:not([class*="col-12"]):not([class*="col-sm"]),
+  .row .col-md-6:not([class*="col-12"]):not([class*="col-sm"]) {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
 }