Accessibility improvements.

Thanks to xet7 !

client/components/main/layouts.css

@@ -52,9 +52,15 @@ input,
 select,
 textarea,
 button {
-  font: clamp(12px, 2.5vw, 16px) Roboto, Poppins, "Helvetica Neue", Arial, Helvetica, sans-serif;
-  line-height: 1.3;
+  font: clamp(14px, 2.5vw, 18px) Roboto, Poppins, "Helvetica Neue", Arial, Helvetica, sans-serif;
+  line-height: 1.4;
   color: #4d4d4d;
+  /* Improve text rendering */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  /* Better text selection */
+  -webkit-user-select: text;
+  user-select: text;
 }
 html {
   font-size: 100%;
@@ -460,20 +466,234 @@ a:not(.disabled).is-active i.fa {
 .no-scrollbars::-webkit-scrollbar {
   display: none !important;
 }
+/* ========================================
+   MOBILE & TABLET RESPONSIVE IMPROVEMENTS
+   ======================================== */
+
+/* Mobile devices (up to 800px) */
 @media screen and (max-width: 800px) {
   #content {
     margin: 1px 0px 0px 0px;
     height: calc(100% - 0px);
+    /* Improve touch scrolling */
+    -webkit-overflow-scrolling: touch;
   }
   #content > .wrapper {
     margin-top: 0px;
+    padding: 8px;
   }
   .wrapper {
     height: calc(100% - 31px);
     margin: 0px;
+    padding: 8px;
   }
   .panel-default {
-    width: 83vw;
+    width: 95vw;
+    max-width: 95vw;
+    margin: 0 auto;
+  }
+  
+  /* Improve touch targets */
+  button, .btn, .js-toggle, .js-color-choice, .js-reaction, .close {
+    min-height: 44px;
+    min-width: 44px;
+    padding: 12px 16px;
+    font-size: 16px; /* Prevent zoom on iOS */
+    touch-action: manipulation;
+  }
+  
+  /* Form elements */
+  input, select, textarea {
+    font-size: 16px; /* Prevent zoom on iOS */
+    padding: 12px;
+    min-height: 44px;
+    touch-action: manipulation;
+  }
+  
+  /* Cards and lists */
+  .minicard {
+    min-height: 48px;
+    padding: 12px;
+    margin-bottom: 8px;
+    touch-action: manipulation;
+  }
+  
+  .list {
+    margin: 0 8px;
+    min-width: 280px;
+  }
+  
+  /* Board canvas */
+  .board-canvas {
+    padding: 8px;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  /* Header mobile layout */
+  #header {
+    padding: 8px;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  
+  #header-quick-access {
+    flex-direction: column;
+    gap: 8px;
+  }
+  
+  /* Modal mobile optimization */
+  #modal .modal-content,
+  #modal .modal-content-wide {
+    width: 95vw;
+    max-width: 95vw;
+    margin: 2vh auto;
+    padding: 16px;
+    max-height: 90vh;
+    overflow-y: auto;
+  }
+  
+  /* Table mobile optimization */
+  table {
+    font-size: 14px;
+    width: 100%;
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  /* Admin panel mobile optimization */
+  .setting-content .content-body {
+    flex-direction: column;
+    gap: 16px;
+    padding: 8px;
+  }
+  
+  .setting-content .content-body .side-menu {
+    width: 100%;
+    order: 2;
+  }
+  
+  .setting-content .content-body .main-body {
+    order: 1;
+    min-height: 60vh;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* Tablet devices (768px - 1024px) */
+@media screen and (min-width: 768px) and (max-width: 1024px) {
+  #content > .wrapper {
+    padding: 12px;
+  }
+  
+  .wrapper {
+    padding: 12px;
+  }
+  
+  .panel-default {
+    width: 90vw;
+    max-width: 90vw;
+  }
+  
+  /* Touch-friendly but more compact */
+  button, .btn, .js-toggle, .js-color-choice, .js-reaction, .close {
+    min-height: 48px;
+    min-width: 48px;
+    padding: 10px 14px;
+  }
+  
+  .minicard {
+    min-height: 40px;
+    padding: 10px;
+  }
+  
+  .list {
+    margin: 0 12px;
+    min-width: 300px;
+  }
+  
+  .board-canvas {
+    padding: 12px;
+  }
+  
+  #header {
+    padding: 12px 16px;
+  }
+  
+  #modal .modal-content {
+    width: 80vw;
+    max-width: 600px;
+  }
+  
+  #modal .modal-content-wide {
+    width: 90vw;
+    max-width: 800px;
+  }
+  
+  .setting-content .content-body {
+    gap: 20px;
+  }
+  
+  .setting-content .content-body .side-menu {
+    width: 250px;
+  }
+}
+
+/* Large displays and digital signage (1920px+) */
+@media screen and (min-width: 1920px) {
+  body {
+    font-size: 18px;
+  }
+  
+  button, .btn, .js-toggle, .js-color-choice, .js-reaction, .close {
+    min-height: 56px;
+    min-width: 56px;
+    padding: 16px 20px;
+    font-size: 18px;
+  }
+  
+  .minicard {
+    min-height: 56px;
+    padding: 16px;
+    font-size: 18px;
+  }
+  
+  .list {
+    margin: 0 20px;
+    min-width: 360px;
+  }
+  
+  .board-canvas {
+    padding: 20px;
+    max-width: 2400px;
+    margin: 0 auto;
+  }
+  
+  #header {
+    padding: 20px 32px;
+    max-width: 2400px;
+    margin: 0 auto;
+  }
+  
+  #modal .modal-content {
+    width: 600px;
+  }
+  
+  #modal .modal-content-wide {
+    width: 1000px;
+  }
+  
+  .setting-content .content-body {
+    gap: 32px;
+    max-width: 2400px;
+    margin: 0 auto;
+  }
+  
+  .setting-content .content-body .side-menu {
+    width: 320px;
   }
 }
 .inline-input {