/* Phone and tablet layout for ERP, quick sales, and the customer-facing store. */
.mobile-open-hint, .mobile-section-back { display: none; }
@media (max-width: 700px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  body { font-size: 16px; }
  input, select, textarea, button { font-size: 16px; }

  /* ERP sign-in */
  .login-screen { display: block; min-height: 100dvh; padding: 16px; }
  .login-card { width: 100%; max-width: 430px; margin: 0 auto; padding: 30px 20px; border-radius: 16px; }
  .login-card h1 { font-size: 28px; margin-top: 22px; }
  .login-card form { margin-top: 22px; }
  .login-card label { margin-top: 14px; }
  .login-card form button { min-height: 46px; }
  .login-card .text-button { white-space: normal; line-height: 1.35; }

  /* ERP working pages */
  .app aside { position: static; z-index: 20; height: auto; padding: 14px 12px 16px; box-shadow: 0 2px 9px #17223b10; }
  .app aside .brand { font-size: 22px; }
  .app aside .subtitle { display: block; }
  .mobile-open-hint { display: block; margin: 8px 0 0; color: var(--muted); font-size: 12px; }
  .app nav { margin-top: 13px; display: grid; grid-template-columns: 1fr; gap: 7px; max-width: 100%; overflow: visible; }
  .app nav button { width: 100%; min-height: 48px; padding: 12px 13px; border: 1px solid #e2e5ef; border-radius: 10px; background: #fff; touch-action: manipulation; }
  .app nav button.active { border-color: #c9c2ff; }
  .app .profile-nav { margin-top: 9px; }
  .app .account { display: flex; margin-top: 14px; padding: 14px 4px 0; }
  main { padding: 16px 12px 28px; }
  header { margin-bottom: 16px; }
  header h1 { font-size: 24px; line-height: 1.2; }
  header p { font-size: 13px; }
  .panel { padding: 15px; margin-top: 14px; border-radius: 11px; }
  .panel h2 { font-size: 18px; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar > button, .toolbar > a { width: 100%; text-align: center; }
  .stats { gap: 10px; }
  .stat { padding: 14px; }
  .stat strong { font-size: 25px; }
  .form-grid { gap: 10px; }
  .form-grid button, .sales-workspace-link { width: 100%; min-height: 44px; }
  .telegram-connection { padding: 13px; border: 1px solid #d9d1ff; border-radius: 11px; background: #f7f5ff; }
  .telegram-connection p { margin: 6px 0 10px; line-height: 1.4; }
  .telegram-connection button, .telegram-open-bot { width: 100%; min-height: 44px; margin-top: 8px; text-align: center; }
  .telegram-open-bot { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
  #telegram-link-status { display: grid; gap: 7px; margin-top: 11px; overflow-wrap: anywhere; }
  .table-wrap { width: 100%; margin: 0 -3px; padding: 0 3px; -webkit-overflow-scrolling: touch; }
  th, td { padding: 10px 8px; font-size: 13px; }
  .toast { right: 12px; left: 12px; bottom: 14px; text-align: center; }
  .workspace-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  .workspace-tabs button { flex: 0 0 auto; min-height: 42px; }
  .profile-photo, .profile-placeholder { width: 62px; height: 62px; }
  .profile-placeholder { font-size: 20px; }
  .process-steps li { align-items: flex-start; flex-wrap: wrap; }
  .process-steps li button { width: 100%; margin: 4px 0 0; }
  .process-assignment { width: 100%; }
  .daily-progress { min-width: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .daily-progress button { grid-column: 1 / -1; min-height: 40px; }
  .daily-progress input { width: 100%; }
  .mobile-section-back { display: none; }

  /* Two taps on a section open this focused, full-width working view. */
  body.mobile-section-focus .app { display: block; }
  body.mobile-section-focus .app aside { display: none; }
  body.mobile-section-focus .app main { max-width: none; padding: 16px 12px 34px; }
  body.mobile-section-focus .app main > header { position: sticky; z-index: 15; top: 0; margin: -16px -12px 16px; padding: 14px 12px; background: #f7f8fc; box-shadow: 0 2px 9px #17223b10; }
  body.mobile-section-focus .mobile-section-back { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 11px; white-space: nowrap; }
  body.mobile-section-focus #content { min-height: calc(100dvh - 120px); }
}

@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .profile-heading { gap: 10px; }
  .profile-heading h2 { font-size: 18px; }
  .icon-button { min-width: 40px; min-height: 40px; }
}

/* Quick sales terminal */
@media (max-width: 700px) {
  .terminal-header { height: auto; min-height: 62px; padding: 10px 14px; gap: 8px 14px; flex-wrap: wrap; }
  .terminal-header .brand { font-size: 22px; }
  .terminal-header > div { order: 3; width: 100%; }
  .terminal-header .back { margin-left: auto; font-size: 13px; }
  .terminal { padding: 10px; gap: 12px; }
  .terminal-main, .cart, .search-panel, .return-panel { padding: 14px; border-radius: 11px; }
  .mode-buttons { display: grid; grid-template-columns: 1fr 1fr; }
  .mode-buttons button { min-height: 43px; padding: 8px; }
  .search-box { grid-template-columns: 1fr; }
  .search-box input { min-height: 46px; }
  .search-box button { min-height: 44px; }
  .filters select { width: 100%; min-width: 0; }
  .search-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .search-product { min-height: 145px; padding: 11px; }
  .search-product strong { font-size: 14px; }
  .cart-line { grid-template-columns: minmax(0, 1fr) 64px 66px 34px; gap: 5px; }
  .cart-line input { min-height: 40px; }
  .pay-actions, .pay-actions-four { gap: 8px; }
  .pay-actions button { min-height: 48px; }
  .payment-overlay, .terminal-product-overlay { padding: 10px; align-items: end; }
  .payment-modal, .terminal-product-card { width: 100%; max-height: calc(100dvh - 20px); padding: 18px 15px; border-radius: 15px 15px 10px 10px; }
  .payment-modal-head h2 { font-size: 21px; }
  .payment-total strong { font-size: 21px; }
  .terminal-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .terminal-product-tile { min-height: 225px; grid-template-rows: 100px auto auto auto auto; padding: 9px; }
  .terminal-product-image { height: 100px; }
}

@media (max-width: 360px) {
  .search-results, .terminal-product-grid { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: 1fr 58px 60px 30px; }
}

/* Customer-facing website */
@media (max-width: 700px) {
  .shop-header { height: auto; min-height: 62px; padding: 10px 14px; gap: 8px; flex-wrap: wrap; }
  .shop-brand { font-size: 22px; }
  .shop-header nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .shop-header nav::-webkit-scrollbar { display: none; }
  .shop-header nav button { flex: 0 0 auto; min-height: 40px; }
  .shop-main { padding: 18px 12px 40px; }
  .shop-hero { min-height: 250px; padding: 25px 20px; border-radius: 16px; }
  .shop-hero h1 { font-size: 29px; }
  .shop-hero p { font-size: 16px; }
  .shop-section-head { align-items: flex-start; flex-direction: column; gap: 4px; margin: 24px 0 13px; }
  .shop-section-head h1, .shop-section-head h2 { font-size: 23px; }
  .shop-grid { gap: 9px; }
  .shop-card { border-radius: 11px; }
  .shop-image, .shop-image-placeholder { height: 140px; }
  .shop-card-body { padding: 10px; }
  .shop-card h3 { font-size: 14px; }
  .shop-price { font-size: 16px; }
  .shop-card button { min-height: 40px; margin-top: 8px; padding: 8px; }
  .shop-panel { padding: 14px; }
  .shop-cart-line { grid-template-columns: 52px minmax(0, 1fr) 64px 28px; gap: 7px; }
  .shop-cart-line img, .shop-cart-thumb { width: 52px; height: 52px; }
  .shop-cart-line input { min-height: 40px; }
  .shop-checkout input, .shop-checkout select { min-height: 44px; }
  .shop-checkout .shop-primary { min-height: 48px; }
  .shop-toast { right: 12px; left: 12px; bottom: 14px; text-align: center; }
}

@media (max-width: 360px) {
  .shop-grid { grid-template-columns: 1fr; }
  .shop-image, .shop-image-placeholder { height: 180px; }
}