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

frontend/src/App.css

@@ -347,6 +347,52 @@
   padding-left: 0;
 }
 
+/* ===== Мобильный сайдбар: оверлей и бэкдроп (Tabler-style) ===== */
+.sidebar-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1035;
+  background: rgba(0, 0, 0, 0.4);
+  transition: opacity 0.2s ease;
+}
+body.sidebar-overlay-open {
+  overflow: hidden;
+  touch-action: none;
+}
+
+@media (max-width: 767.98px) {
+  .page .navbar-vertical .navbar-collapse {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: min(100vw, 280px);
+    max-width: 280px;
+    z-index: 1040;
+    background: #1e293b;
+    margin: 0;
+    padding: 1rem 0;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
+    flex-direction: column;
+  }
+  .page .navbar-vertical .navbar-collapse.show {
+    display: flex !important;
+  }
+  .page-wrapper {
+    margin-left: 0 !important;
+  }
+  .navbar-vertical .nav-link,
+  .navbar-vertical .dropdown-item {
+    min-height: 44px;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    display: flex;
+    align-items: center;
+  }
+}
+
 /* Responsive navbar */
 @media (max-width: 991.98px) {
   .navbar-collapse {
@@ -461,7 +507,7 @@
 
 /* Responsive sizing for small screens */
 @media (max-width: 992px) {
-  .header-actions { gap: 0.4rem; }
+  .header-actions { gap: 0.4rem; flex-wrap: wrap; }
   .header-actions .btn {
     padding: 0.35rem 0.6rem;
     font-size: 0.875rem;
@@ -474,6 +520,30 @@
   .header-actions { width: 100%; }
 }
 
+/* Мобильные отступы контента */
+@media (max-width: 767.98px) {
+  .page-body .container-fluid,
+  .page-body .container-xl {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+  .card .card-body {
+    padding: 0.75rem 1rem;
+  }
+  .offcanvas-start {
+    width: min(320px, 100vw) !important;
+    max-width: 100vw !important;
+  }
+  .modal-dialog {
+    margin: 0.5rem;
+    max-width: calc(100% - 1rem);
+  }
+  .modal-fullscreen-sm-down .modal-dialog {
+    max-width: 100%;
+    margin: 0;
+  }
+}
+
 /* Custom responsive adjustments */
 @media (max-width: 992px) {
   .page-wrapper {