:root {
  --titlebar-height: 0px;
  --sidebar-width: 100%;
}

.mobile-shell #title-bar {
  display: none !important;
}

.mobile-shell #app-container {
  display: block;
  height: 100vh;
}

.mobile-shell #sidebar {
  position: fixed;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  min-width: 0;
  border-left: none;
  border-top: 1px solid var(--border);
  background: rgba(10, 10, 10, 0.97);
  backdrop-filter: blur(16px);
  z-index: 100;
}

.mobile-shell .sidebar-brand,
.mobile-shell .sidebar-footer {
  display: none;
}

.mobile-shell .nav-menu {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
}

.mobile-shell .nav-item {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  border-right: none;
  border-top: 2px solid transparent;
  border-radius: 12px;
  min-height: 60px;
}

.mobile-shell .nav-item.active {
  border-top-color: var(--primary);
}

.mobile-shell .nav-icon {
  font-size: 16px;
  width: auto;
}

.mobile-shell .nav-text {
  font-size: 11px;
  text-align: center;
}

.mobile-shell #main-content {
  height: 100vh;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(100px + env(safe-area-inset-bottom, 0px));
}

.mobile-shell .page-header,
.mobile-shell .page-actions,
.mobile-shell .form-row,
.mobile-shell .section-header-row,
.mobile-shell .session-product-item,
.mobile-shell .session-mode-history-item,
.mobile-shell .day-history-stats,
.mobile-shell .expense-row,
.mobile-shell .expense-row-main,
.mobile-shell .session-row {
  flex-direction: column;
  align-items: stretch;
}

.mobile-shell .page-actions > *,
.mobile-shell .search-wrapper,
.mobile-shell .filter-wrapper,
.mobile-shell .search-input,
.mobile-shell .filter-select,
.mobile-shell .page-actions .btn {
  width: 100%;
}

.mobile-shell .stats-bar,
.mobile-shell .report-summary,
.mobile-shell .daily-live-stats {
  grid-template-columns: repeat(2, 1fr);
}

.mobile-shell .devices-grid,
.mobile-shell .products-grid,
.mobile-shell .settings-grid {
  grid-template-columns: 1fr;
}

.mobile-shell .device-prices {
  flex-direction: column;
  gap: 6px;
}

.mobile-shell .modal {
  padding: 10px;
}

.mobile-shell .modal-content,
.mobile-shell .modal-large,
.mobile-shell .modal-small {
  width: 100%;
  max-width: 100%;
  max-height: calc(100vh - 20px);
  margin: 0;
  border-radius: 18px;
}

.mobile-shell .modal-body {
  padding: 18px;
}

.mobile-shell .session-timer-bar,
.mobile-shell .session-mode-actions {
  grid-template-columns: 1fr;
}

.mobile-shell .session-mode-history-stats {
  align-items: flex-start;
  text-align: right;
}

.mobile-shell .report-section,
.mobile-shell .daily-sessions-list,
.mobile-shell .daily-expenses-list {
  overflow-x: auto;
}

.mobile-shell .report-table {
  min-width: 720px;
}

.mobile-shell .form-actions {
  flex-direction: column;
}

.mobile-shell .form-actions .btn {
  width: 100%;
}

.mobile-shell .toast-container {
  width: calc(100vw - 24px);
}

@media (max-width: 420px) {
  .mobile-shell .stats-bar,
  .mobile-shell .report-summary,
  .mobile-shell .daily-live-stats {
    grid-template-columns: 1fr;
  }
}