/* APG365 V.1.0.0 - final mobile cascade (loaded only up to 768px). */
html { overflow-x: hidden; scrollbar-gutter: auto; }
body { overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
body.mobile-menu-open { overflow: hidden; }

.auth-card {
  background-image: none !important;
  background-color: #edf3e9 !important;
}
.auth-right-form { padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom)); }
.auth-form-card { width: 100%; max-width: 390px; padding: 24px 20px; border-radius: 18px; }
.auth-logo-img { width: 86px; height: 86px; }

.sidebar {
  z-index: 1002;
  width: min(82vw, 292px);
  height: 100dvh;
  padding: 12px 14px max(14px, env(safe-area-inset-bottom));
  align-items: stretch;
  overflow-y: auto;
}
.sidebar-brand { flex-direction: row; justify-content: flex-start; padding: 8px 8px 14px; text-align: left; }
.sidebar .brand-logo { width: 50px; height: 50px; flex: 0 0 50px; }
.sidebar .brand-text { align-items: flex-start; }
.sidebar-menu { margin-top: 14px; gap: 4px; }
.sidebar .menu-item { min-height: 48px; }
.mobile-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1001;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(17, 30, 23, .46);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
body.mobile-menu-open .mobile-sidebar-backdrop { display: block; }

.main-content {
  margin-left: 0 !important;
  padding-top: 112px !important;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
  min-height: 100dvh;
  overflow: visible;
}
.top-header {
  left: 0 !important;
  height: 112px !important;
  padding: max(6px, env(safe-area-inset-top)) 12px 8px !important;
  display: grid !important;
  grid-template-areas: "left right" "search search" !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 42px 44px !important;
  gap: 6px 8px !important;
}
.header-left { grid-area: left; overflow: visible; gap: 8px; }
.menu-toggle-btn { width: 38px; height: 38px; flex: 0 0 38px; }
.page-title-area { display: block !important; min-width: 0; }
.page-title-area h2 { font-size: 15px !important; line-height: 1.1; }
.page-title-area p { display: none !important; }
.global-search {
  grid-area: search !important;
  grid-column: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.global-search-input-row { height: 42px; border-radius: 11px; }
#global-search-input { font-size: 16px !important; }
.global-search input::placeholder { color: var(--text-secondary) !important; }
.global-search-popover {
  position: fixed;
  top: 108px;
  left: 10px;
  right: 10px;
  transform: none;
  width: auto;
  min-width: 0;
  max-height: calc(100dvh - 190px);
}
.header-right { grid-area: right; gap: 6px; min-width: 0; }
.header-right .live-clock-card,
.header-right .support-ticket-btn,
.header-right #birthday-alert-bell,
.header-right #low-stock-alert-bell,
.header-right .network-inline-message { display: none !important; }
.network-status-badge { min-height: 34px; padding: 6px 9px; }
.network-status-badge .status-text { display: inline !important; font-size: 10px; }
.header-profile-btn { width: 36px; height: 36px; }
.profile-dropdown { position: fixed; top: 52px; right: 10px; }

.content-body { width: 100%; padding: 14px 12px 20px !important; overflow: visible; }
.content-section.active { min-width: 0; }
.dashboard-tabs, .cadastros-tabs, .settings-tabs, .analytics-tabs, .inventory-tabs {
  max-width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dashboard-tabs::-webkit-scrollbar, .cadastros-tabs::-webkit-scrollbar,
.settings-tabs::-webkit-scrollbar, .analytics-tabs::-webkit-scrollbar,
.inventory-tabs::-webkit-scrollbar { display: none; }
.dashboard-tabs .tab-btn, .cadastros-tabs .tab-btn, .settings-tabs .tab-btn,
.analytics-tabs .tab-btn, .inventory-tabs .tab-btn { flex: 0 0 auto; min-height: 42px; }
.metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
.metric-card { min-width: 0; padding: 16px; }
.dashboard-charts-grid, .charts-grid, .analytics-grid, .stats-grid, .settings-grid,
.form-row-grid, .form-row-grid-3 { grid-template-columns: minmax(0, 1fr) !important; }
.glassmorphic, .card { max-width: 100%; }
.data-table-container, .table-responsive, .table-container, .data-table-wrapper {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
.data-table, .inventory-table, table { font-size: 12px; }
input, select, textarea, button, .btn { touch-action: manipulation; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
.btn { min-height: 44px; }

.modal-overlay { align-items: flex-end; padding: 0 !important; }
.modal-card, .large-modal-card, .receipt-modal-card, .barcode-modal-card {
  width: 100% !important;
  max-width: none !important;
  max-height: 92dvh !important;
  border-radius: 18px 18px 0 0 !important;
}
.toast-container { left: 10px; right: 10px; bottom: calc(82px + env(safe-area-inset-bottom)); }
.toast { min-width: 0; max-width: none; width: 100%; }

.mobile-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  height: calc(66px + env(safe-area-inset-bottom));
  padding: 6px 8px max(6px, env(safe-area-inset-bottom));
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 2px;
  border-top: 1px solid var(--border-color);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 -8px 25px rgba(34, 55, 43, .10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.dark-theme .mobile-bottom-nav { background: rgba(28, 35, 31, .97); }
.mobile-bottom-nav button {
  position: relative;
  min-width: 0;
  height: 52px;
  padding: 5px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 10px;
  font-weight: 650;
}
.mobile-bottom-nav button svg { width: 20px; height: 20px; }
.mobile-bottom-nav button.active { color: var(--accent-color); background: rgba(var(--accent-color-rgb), .09); }
.mobile-bottom-nav .mobile-nav-primary {
  height: 58px;
  margin-top: -13px;
  color: white;
  border-radius: 18px;
  background: var(--accent-color);
  box-shadow: 0 8px 20px rgba(var(--accent-color-rgb), .32);
}
.mobile-bottom-nav .mobile-nav-primary.active { color: white; background: var(--accent-color); }

.mobile-pos-steps {
  position: sticky;
  top: 118px;
  z-index: 30;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: -2px 0 12px;
  padding: 5px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 18px rgba(34, 55, 43, .08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.dark-theme .mobile-pos-steps { background: rgba(28, 35, 31, .94); }
.mobile-pos-steps button {
  min-width: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
}
.mobile-pos-steps button > span { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-tertiary); font-size: 10px; }
.mobile-pos-steps button.active { color: white; background: var(--accent-color); }
.mobile-pos-steps button.active > span { color: var(--accent-color); background: white; }

html.pos-view-active, html.pos-view-active body, html.pos-view-active .main-content,
html.pos-view-active .content-body, html.pos-view-active #view-pos.active {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
#view-pos .pos-layout { display: block !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
#view-pos .pos-products-panel, #view-pos .pos-cart-container,
#view-pos .pos-cart-block, #view-pos .pos-checkout-block {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
html[data-mobile-pos-step="products"] #view-pos .pos-cart-container,
html[data-mobile-pos-step="cart"] #view-pos .pos-products-panel,
html[data-mobile-pos-step="cart"] #view-pos .pos-checkout-block,
html[data-mobile-pos-step="checkout"] #view-pos .pos-products-panel,
html[data-mobile-pos-step="checkout"] #view-pos .pos-cart-block { display: none !important; }
#view-pos .pos-controls { position: sticky; top: 178px; z-index: 20; padding: 10px; background: rgba(255, 255, 255, .96); }
body.dark-theme #view-pos .pos-controls { background: rgba(28, 35, 31, .96); }
#view-pos .pos-controls .search-input-box, #view-pos .pos-controls .category-select-wrapper { width: 100%; min-width: 0 !important; max-width: none; }
#view-pos .pos-grid { max-height: none !important; overflow: visible !important; }
#view-pos .pos-card { min-height: 82px; }
#view-pos .pos-cart-block, #view-pos .pos-checkout-block { padding: 14px 12px; }
#view-pos .cart-items-container { height: auto !important; min-height: 190px !important; max-height: none !important; overflow: visible !important; }

@media (max-width: 430px) {
  .metrics-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .metric-card { min-height: 132px; }
  .global-search-advanced { grid-template-columns: 1fr; }
  .global-search-advanced .btn { grid-column: 1; }
  .network-status-badge .status-text { display: none !important; }
  .mobile-pos-steps button { gap: 3px; font-size: 10px; }
  #view-pos .payment-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}