diff --git a/ui/src/css/app.css b/ui/src/css/app.css
index a6e6244..8ddf457 100644
--- a/ui/src/css/app.css
+++ b/ui/src/css/app.css
@@ -1801,3 +1801,195 @@ body {
     max-height: calc(100vh - 180px) !important;
   }
 }
+
+/* ===========================================================
+   PHONE TABLE-FIRST LAYOUT (NO DESKTOP IMPACT)
+   =========================================================== */
+@media (max-width: 768px) {
+  .page-layout,
+  .statement-page {
+    height: calc(100dvh - 52px) !important;
+    min-height: calc(100dvh - 52px) !important;
+    display: flex !important;
+    flex-direction: column !important;
+    overflow: hidden !important;
+  }
+
+  .filter-sticky {
+    flex: 0 0 auto;
+    max-height: 42dvh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .table-area,
+  .table-scroll,
+  .table-wrap {
+    flex: 1 1 auto !important;
+    min-height: 0 !important;
+    height: auto !important;
+    overflow: hidden !important;
+  }
+
+  .balance-table,
+  .statement-table,
+  .prod-table {
+    flex: 1 1 auto !important;
+    min-height: 0 !important;
+    height: 100% !important;
+  }
+
+  .balance-table .q-table__container,
+  .statement-table .q-table__container,
+  .prod-table .q-table__container {
+    height: 100% !important;
+    display: flex !important;
+    flex-direction: column !important;
+    min-height: 0 !important;
+  }
+
+  .balance-table .q-table__middle,
+  .statement-table .q-table__middle,
+  .prod-table .q-table__middle {
+    flex: 1 1 auto !important;
+    min-height: 0 !important;
+    max-height: none !important;
+    overflow: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .balance-table thead th,
+  .statement-table thead th,
+  .prod-table thead th {
+    position: sticky !important;
+    top: 0 !important;
+    z-index: 30 !important;
+    background: #fff !important;
+  }
+
+  .balance-table .totals-row th {
+    top: 34px !important;
+    z-index: 29 !important;
+  }
+}
+
+@media (max-width: 768px) and (orientation: landscape) {
+  .filter-sticky {
+    max-height: 34dvh;
+  }
+
+  .sticky-bar {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* Finance pages mobile compact mode */
+@media (max-width: 768px) {
+  .balance-table .q-th,
+  .balance-table .q-td,
+  .statement-table .q-th,
+  .statement-table .q-td {
+    font-size: 10px !important;
+    line-height: 1.15 !important;
+    padding: 3px 4px !important;
+  }
+
+  .balance-table .q-th,
+  .statement-table .q-th {
+    white-space: nowrap !important;
+  }
+
+  .balance-table .q-td,
+  .statement-table .q-td {
+    max-width: 110px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* Finance critical columns: more readable on phones */
+  .balance-table td[data-col="ana_cari_adi"],
+  .balance-table th[data-col="ana_cari_adi"],
+  .statement-table td[data-col="ana_cari_adi"],
+  .statement-table th[data-col="ana_cari_adi"] {
+    max-width: 200px !important;
+    min-width: 180px !important;
+  }
+
+  .balance-table td[data-col="piyasa"],
+  .balance-table th[data-col="piyasa"],
+  .statement-table td[data-col="piyasa"],
+  .statement-table th[data-col="piyasa"] {
+    max-width: 130px !important;
+    min-width: 110px !important;
+  }
+
+  .balance-table td[data-col="risk_durumu"],
+  .balance-table th[data-col="risk_durumu"],
+  .statement-table td[data-col="risk_durumu"],
+  .statement-table th[data-col="risk_durumu"] {
+    max-width: 150px !important;
+    min-width: 130px !important;
+  }
+
+  .balance-table .prbr-cell,
+  .statement-table .prbr-cell {
+    white-space: pre-line !important;
+    word-break: break-word !important;
+    max-width: 160px;
+  }
+
+  .balance-table .q-table__top,
+  .statement-table .q-table__top {
+    min-height: 34px !important;
+    padding: 4px 6px !important;
+    font-size: 12px !important;
+  }
+
+  .sticky-bar .q-btn .block,
+  .sticky-bar .q-btn .q-btn__content {
+    gap: 4px;
+  }
+}
+
+@media (max-width: 768px) and (orientation: landscape) {
+  .balance-table .q-th,
+  .balance-table .q-td,
+  .statement-table .q-th,
+  .statement-table .q-td {
+    font-size: 9.5px !important;
+    padding: 2px 4px !important;
+  }
+
+  .balance-table .q-td,
+  .statement-table .q-td {
+    max-width: 90px;
+  }
+
+  .balance-table td[data-col="ana_cari_adi"],
+  .balance-table th[data-col="ana_cari_adi"],
+  .statement-table td[data-col="ana_cari_adi"],
+  .statement-table th[data-col="ana_cari_adi"] {
+    max-width: 180px !important;
+    min-width: 160px !important;
+  }
+
+  .balance-table td[data-col="piyasa"],
+  .balance-table th[data-col="piyasa"],
+  .statement-table td[data-col="piyasa"],
+  .statement-table th[data-col="piyasa"] {
+    max-width: 120px !important;
+    min-width: 100px !important;
+  }
+
+  .balance-table td[data-col="risk_durumu"],
+  .balance-table th[data-col="risk_durumu"],
+  .statement-table td[data-col="risk_durumu"],
+  .statement-table th[data-col="risk_durumu"] {
+    max-width: 130px !important;
+    min-width: 110px !important;
+  }
+}