feat: Add mobile-optimized card layout and compact UI for all report views

- Add mobile card layout for Invoices, Treasury, and Trial Balance views
- Implement two-row mobile toolbar with icon-only action buttons
- Add uniform totals grid across all views with compact number formatting
- Move profile menu to hamburger menu on mobile devices
- Fix company selector and period selector truncation on mobile
- Add mobile-specific CSS with responsive breakpoints

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

reports-app/frontend/src/components/dashboard/CompanySelectorMini.vue

@@ -497,18 +497,55 @@ export default {
 /* Mobile adjustments */
 @media (max-width: 768px) {
   .company-selector-mini {
-    max-width: none;
-    width: 100%;
+    max-width: 200px;
+    width: auto;
   }
 
   .company-trigger {
     min-width: auto;
+    max-width: 200px;
+    padding: var(--space-xs) var(--space-sm);
+  }
+
+  .company-info {
+    max-width: 140px;
+  }
+
+  .company-name {
+    font-size: var(--text-xs);
+    max-width: 140px;
+  }
+
+  .company-code {
+    font-size: 10px;
   }
 
   .company-dropdown-panel {
-    left: -16px;
-    right: -16px;
-    width: calc(100% + 32px);
+    position: fixed;
+    left: 8px;
+    right: 8px;
+    top: 60px;
+    width: auto;
+    max-height: 70vh;
+  }
+}
+
+/* Extra small screens */
+@media (max-width: 400px) {
+  .company-selector-mini {
+    max-width: 160px;
+  }
+
+  .company-trigger {
+    max-width: 160px;
+  }
+
+  .company-info {
+    max-width: 110px;
+  }
+
+  .company-name {
+    max-width: 110px;
   }
 }
 </style>

reports-app/frontend/src/components/dashboard/PeriodSelectorMini.vue

@@ -349,18 +349,36 @@ export default {
 /* Mobile adjustments */
 @media (max-width: 768px) {
   .period-selector-mini {
-    max-width: none;
-    width: 100%;
+    max-width: 140px;
+    width: auto;
   }
 
   .period-trigger {
     min-width: auto;
+    padding: var(--space-xs) var(--space-sm);
+  }
+
+  .period-info {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-xs);
+  }
+
+  .period-label {
+    display: none;
+  }
+
+  .period-name {
+    font-size: var(--text-xs);
   }
 
   .period-dropdown-panel {
-    left: -16px;
-    right: -16px;
-    width: calc(100% + 32px);
+    position: fixed;
+    left: 8px;
+    right: 8px;
+    top: 60px;
+    width: auto;
+    max-height: 70vh;
   }
 }
 </style>

reports-app/frontend/src/components/layout/DashboardHeader.vue

@@ -29,7 +29,7 @@
           v-model="selectedCompany"
           @company-changed="onCompanyChanged"
         />
-        <div class="user-menu-container">
+        <div class="user-menu-container mobile-hide">
           <div class="header-user" @click="toggleUserMenu">
             <i class="pi pi-user"></i>
             <span class="desktop-only">{{
@@ -311,5 +311,10 @@ export default {
   .user-dropdown-item {
     padding: var(--space-sm);
   }
+
+  /* Hide profile menu on mobile - use hamburger menu instead */
+  .mobile-hide {
+    display: none !important;
+  }
 }
 </style>

reports-app/frontend/src/components/layout/HamburgerMenu.vue

@@ -75,6 +75,16 @@
               <span>Statistici cache</span>
             </router-link>
           </li>
+        </ul>
+      </div>
+
+      <!-- Profile Section (at bottom) -->
+      <div class="menu-section menu-profile">
+        <div class="profile-info">
+          <i class="pi pi-user"></i>
+          <span>{{ currentUser?.username || 'Utilizator' }}</span>
+        </div>
+        <ul class="menu-list">
           <li class="menu-item">
             <router-link
               to="/telegram"
@@ -86,6 +96,12 @@
               <span>Telegram Bot</span>
             </router-link>
           </li>
+          <li class="menu-item">
+            <a href="#" class="menu-link" @click.prevent="handleLogout">
+              <i class="menu-icon pi pi-sign-out"></i>
+              <span>Deconectare</span>
+            </a>
+          </li>
         </ul>
       </div>
     </nav>
@@ -93,6 +109,10 @@
 </template>
 
 <script>
+import { computed } from "vue";
+import { useRouter } from "vue-router";
+import { useAuthStore } from "../../stores/auth";
+
 export default {
   name: "HamburgerMenu",
   props: {
@@ -103,12 +123,29 @@ export default {
   },
   emits: ["close"],
   setup(props, { emit }) {
+    const router = useRouter();
+    const authStore = useAuthStore();
+
+    const currentUser = computed(() => authStore.currentUser);
+
     const closeMenu = () => {
       emit("close");
     };
 
+    const handleLogout = async () => {
+      try {
+        authStore.logout();
+        closeMenu();
+        await router.push("/login");
+      } catch (error) {
+        console.error("Logout error:", error);
+      }
+    };
+
     return {
+      currentUser,
       closeMenu,
+      handleLogout,
     };
   },
 };