mobile drawer + responsive polish

index.html

@@ -1218,21 +1218,118 @@ a { color: inherit; text-decoration: none; }
 }
 
 /* =========================================================================
-   Mobile responsive
+   Mobile / tablet responsive
    ========================================================================= */
+.mobile-menu-btn { display: none; }
+.sidebar-backdrop { display: none; }
+
 @media (max-width: 900px) {
   .shell {
     grid-template-columns: 1fr;
     grid-template-areas: "topbar" "main";
   }
-  .sidebar { display: none; }
-  .main { padding: 20px 16px 64px; }
+  .sidebar {
+    position: fixed;
+    top: 0; left: 0; bottom: 0;
+    width: 280px;
+    z-index: 200;
+    transform: translateX(-100%);
+    transition: transform 260ms var(--ease);
+    box-shadow: 0 0 40px rgba(0,0,0,0.4);
+    display: flex;
+  }
+  .shell.sidebar-open .sidebar { transform: translateX(0); }
+  .sidebar-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(11,14,19,0.55);
+    backdrop-filter: blur(2px);
+    z-index: 150;
+    animation: fadeIn 180ms var(--ease);
+  }
+  .mobile-menu-btn {
+    display: grid;
+    font-size: 20px;
+    margin-right: -4px;
+  }
+  .topbar { padding: 0 14px; gap: 10px; }
+  .topbar-search input { font-size: 14px; }
+  .main { padding: 20px 16px 80px; }
+  .page-header {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 14px;
+  }
   .page-title { font-size: 22px; }
-  .hero { padding: 22px; }
+  .breadcrumb { font-size: 12px; }
+
+  .hero { padding: 22px; border-radius: var(--radius-lg); }
   .hero h1 { font-size: 22px; }
-  .kanban { grid-template-columns: 1fr; }
-  .chat-layout { grid-template-columns: 1fr; height: auto; }
+  .hero p { font-size: 13.5px; }
+  .hero-stats { gap: 18px; }
+  .hero-stat .num { font-size: 22px; }
+
+  .kanban {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+  .kanban-column { min-height: auto; }
+
+  .chat-layout {
+    grid-template-columns: 1fr;
+    height: auto;
+    gap: 12px;
+  }
   .chat-channels { max-height: 200px; }
+  .chat-pane { min-height: 480px; }
+  .chat-message .body { max-width: 80%; }
+
+  .calendar-day {
+    min-height: 70px;
+    padding: 4px 5px;
+    gap: 2px;
+  }
+  .calendar-day-num { font-size: 11px; }
+  .calendar-day.today .calendar-day-num { width: 20px; height: 20px; }
+  .cal-event {
+    font-size: 10px;
+    padding: 2px 5px;
+    border-left-width: 2px;
+  }
+  .calendar-dow { padding: 6px 4px; font-size: 9.5px; }
+  .calendar-toolbar { flex-wrap: wrap; padding: 10px; gap: 8px; }
+  .calendar-month-label { min-width: 0; flex: 1; font-size: 14px; }
+
+  .grid-cards { grid-template-columns: 1fr; }
+  .list-row { padding: 10px 12px; gap: 10px; }
+  .list-row .title { font-size: 13.5px; }
+  .list-row .sub { font-size: 12px; }
+
+  .modal { max-width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
+  .modal-backdrop { align-items: flex-end; padding: 0; }
+  .modal-header, .modal-body, .modal-footer { padding-left: 16px; padding-right: 16px; }
+  .modal-footer { flex-wrap: wrap; }
+
+  .dropdown {
+    position: fixed;
+    top: var(--topbar-h);
+    left: 8px; right: 8px;
+    min-width: 0;
+    max-width: none;
+  }
+
+  .row { flex-wrap: wrap; }
+}
+
+@media (max-width: 480px) {
+  .topbar-search input::placeholder { font-size: 12px; }
+  .calendar-day { min-height: 56px; }
+  .hero { padding: 18px; }
+  .hero h1 { font-size: 20px; }
+  .hero-stats { gap: 14px; }
+  .hero-stat .num { font-size: 20px; }
+  .hero-stat .lbl { font-size: 10.5px; }
 }
   </style>
 </head>
@@ -1241,7 +1338,7 @@ a { color: inherit; text-decoration: none; }
     <div class="boot-loading">Loading ClientOS…</div>
   </div>
 
-  <script src="mock-data.js?v=4"></script>
-  <script src="app.js?v=4"></script>
+  <script src="mock-data.js?v=5"></script>
+  <script src="app.js?v=5"></script>
 </body>
 </html>