Add mobile responsiveness + PWA support

Mobile (768px):
- Tab bar: horizontal scroll with momentum, hidden scrollbar
- Header: compact layout, smaller fonts
- Tables: horizontal scroll, hide-mobile class for less important cols
- Modals: bottom-sheet style, full width
- Touch targets: min-height 36px for buttons/selects
- Toolbar: stacks vertically
- Stat cards: compact

Small phone (480px):
- Even more compact header and tabs
- Smaller table cells
- iOS zoom prevention (16px font on inputs)

PWA:
- manifest.json for Add to Home Screen
- apple-mobile-web-app-capable meta tags
- theme-color for status bar
- overscroll-behavior: none (prevent pull-to-refresh)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

style.css

@@ -970,7 +970,9 @@ span.empty {
     background: #fef2f2;
 }
 
-/* Responsive */
+/* ==================== RESPONSIVE ==================== */
+
+/* Tablet */
 @media (max-width: 1024px) {
     .content-layout {
         grid-template-columns: 1fr;
@@ -989,51 +991,237 @@ span.empty {
     }
 }
 
+/* Mobile */
 @media (max-width: 768px) {
+    /* Header: kompakti mobiilissa */
     header {
-        flex-direction: column;
-        gap: 0.75rem;
-        padding: 1rem;
-        text-align: center;
+        padding: 0.6rem 1rem;
+        gap: 0.4rem;
     }
 
-    .header-brand {
-        justify-content: center;
+    .header-left h1 {
+        font-size: 1rem;
     }
 
+    .header-brand img {
+        height: 28px;
+    }
+
+    .header-right {
+        gap: 0.3rem;
+        font-size: 0.8rem;
+    }
+
+    .header-right .btn-primary,
+    .header-right .btn-secondary {
+        padding: 5px 8px;
+        font-size: 0.75rem;
+    }
+
+    .user-info {
+        font-size: 0.78rem;
+    }
+
+    /* Tab bar: horisontaalinen scroll */
+    .tab-bar {
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none; /* Firefox */
+        padding: 0 0.5rem;
+        top: 44px; /* pienempi header */
+    }
+
+    .tab-bar::-webkit-scrollbar {
+        display: none;
+    }
+
+    .tab {
+        padding: 0.6rem 0.9rem;
+        font-size: 0.78rem;
+        white-space: nowrap;
+        flex-shrink: 0;
+    }
+
+    /* Sub-tab bar: sama horisontaalinen scroll */
+    .sub-tab-bar {
+        overflow-x: auto;
+        overflow-y: hidden;
+        -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+        padding: 0 0.5rem;
+    }
+
+    .sub-tab-bar::-webkit-scrollbar {
+        display: none;
+    }
+
+    .sub-tab {
+        padding: 0.5rem 0.8rem;
+        font-size: 0.78rem;
+        white-space: nowrap;
+        flex-shrink: 0;
+    }
+
+    /* Main container */
     .main-container {
-        padding: 1rem;
+        padding: 0.75rem;
     }
 
+    /* Lomakkeet */
     .form-grid,
     .form-grid-liittyma,
     .detail-grid {
         grid-template-columns: 1fr;
     }
 
+    /* Yhteenvetopalkki */
     .summary-bar {
         flex-direction: column;
         gap: 0.25rem;
         text-align: center;
     }
 
+    /* Taulukot: horisontaalinen scroll */
+    .table-card {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
     thead th,
     tbody td {
-        padding: 9px 10px;
-        font-size: 0.83rem;
+        padding: 8px 8px;
+        font-size: 0.8rem;
+    }
+
+    /* Toolbar: pinoa mobiilissa */
+    .toolbar {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .toolbar .search-bar {
+        width: 100%;
+    }
+
+    .toolbar .search-bar input {
+        width: 100%;
+    }
+
+    /* Modaalit: täysi leveys */
+    .modal-content {
+        max-width: 100%;
+        max-height: 95vh;
+        border-radius: 12px 12px 0 0;
+        margin-top: auto;
+    }
+
+    .modal {
+        align-items: flex-end;
+        padding: 0;
+    }
+
+    .modal-header {
+        padding: 1rem;
+    }
+
+    .modal-header h2 {
+        font-size: 1.1rem;
+    }
+
+    /* Modaalin sisältöpadding */
+    .modal-content form,
+    .modal-content .modal-body {
+        padding: 0.75rem;
+    }
+
+    /* Stat-kortit mobiilissa */
+    .stat-card {
+        padding: 0.75rem;
+    }
+
+    .stat-card h3 {
+        font-size: 0.75rem;
+    }
+
+    .stat-card .stat-number {
+        font-size: 1.3rem;
+    }
+
+    /* Sidebar: kompaktimpi */
+    .sidebar-stats .stat-card {
+        min-width: 100px;
+    }
+
+    /* Tikettinäkymä: kompaktimpi */
+    #ticket-detail-header select {
+        padding: 5px 6px !important;
+        font-size: 0.78rem !important;
+    }
+
+    /* Touch-ystävälliset napit — isommat klikattavat alueet */
+    button, .btn-primary, .btn-secondary, select {
+        min-height: 36px;
+    }
+
+    /* Piilota vähemmän tärkeät kolumnit */
+    .hide-mobile {
+        display: none !important;
     }
 }
 
+/* Pieni puhelin */
 @media (max-width: 480px) {
-    .header-right {
-        flex-direction: column;
-        width: 100%;
+    header {
+        padding: 0.5rem 0.75rem;
     }
 
-    .header-right .btn-primary,
-    .header-right .btn-secondary {
-        width: 100%;
-        text-align: center;
+    .header-left h1 {
+        font-size: 0.9rem;
+    }
+
+    /* Piilota "Vaihda yritys" teksti, näytä vain ikoni/select */
+    .header-right {
+        flex-wrap: wrap;
+        gap: 0.25rem;
+        justify-content: center;
+    }
+
+    .tab {
+        padding: 0.5rem 0.7rem;
+        font-size: 0.72rem;
+    }
+
+    .tab-bar {
+        top: 38px;
+    }
+
+    /* Taulukot: pienempi fontti */
+    thead th,
+    tbody td {
+        padding: 6px 6px;
+        font-size: 0.75rem;
+    }
+
+    /* Actions-sarake: pienemmät napit */
+    .actions-cell button {
+        padding: 3px 5px;
+        font-size: 0.75rem;
+    }
+
+    /* Modaalin lomakekentät */
+    .modal-content input,
+    .modal-content select,
+    .modal-content textarea {
+        font-size: 16px; /* Estää iOS zoom-in focuksessa */
+    }
+}
+
+/* PWA-tyylinen kokemus: estä pull-to-refresh ja bounce */
+@media (max-width: 768px) {
+    html {
+        overscroll-behavior: none;
     }
 }