/* Lux Motion Client Hub — dedicated mobile UI */
@media (max-width: 767px) {
  html { font-size: 17px !important; -webkit-text-size-adjust: 100%; }
  body { font-size: 17px !important; line-height: 1.5; }

  .lux-app-shell main {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 17px !important;
  }

  .lux-app-shell main h1 { font-size: 30px !important; line-height: 1.08 !important; }
  .lux-app-shell main h2 { font-size: 25px !important; line-height: 1.15 !important; }
  .lux-app-shell main h3 { font-size: 21px !important; line-height: 1.2 !important; }

  .lux-app-shell main .text-sm { font-size: 16px !important; line-height: 1.55 !important; }
  .lux-app-shell main .text-xs { font-size: 15px !important; line-height: 1.5 !important; }
  .lux-app-shell main .text-\[10px\],
  .lux-app-shell main .text-\[11px\] { font-size: 14px !important; line-height: 1.45 !important; }

  .lux-app-shell aside { width: min(92vw, 360px) !important; }
  .lux-app-shell aside nav { padding: 8px !important; }
  .lux-app-shell aside nav button {
    min-height: 58px !important;
    padding: 14px 16px !important;
    font-size: 17px !important;
    line-height: 1.2 !important;
  }
  .lux-app-shell aside nav button svg { width: 21px !important; height: 21px !important; }

  .lux-app-shell header button,
  .lux-app-shell main button,
  .lux-app-shell main a {
    min-height: 48px;
    font-size: 16px !important;
  }

  .lux-app-shell main .lux-scrollbar > button {
    min-height: 50px !important;
    padding: 10px 15px !important;
    font-size: 16px !important;
    white-space: nowrap;
  }

  .lux-app-shell input,
  .lux-app-shell select,
  .lux-app-shell textarea {
    min-height: 50px !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .lux-app-shell textarea { min-height: 120px !important; }

  .lux-app-shell main section { padding-left: 14px; padding-right: 14px; }
  .lux-app-shell main .p-4 { padding: 16px !important; }
  .lux-app-shell main .p-5 { padding: 18px !important; }

  /* Data lists become readable cards instead of a squeezed desktop table. */
  .lux-app-shell main table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border-spacing: 0 !important;
    font-size: 16px !important;
  }
  .lux-app-shell main table thead { display: none !important; }
  .lux-app-shell main table tbody {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .lux-app-shell main table tr {
    display: block !important;
    width: 100% !important;
    padding: 15px 16px !important;
    border: 1px solid rgba(216,180,93,0.18) !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,0.025) !important;
  }
  .lux-app-shell main table td {
    display: flex !important;
    width: 100% !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 8px 0 !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  .lux-app-shell main table td:first-child {
    display: block !important;
    padding: 0 0 12px !important;
    margin-bottom: 5px !important;
    border-bottom: 1px solid rgba(216,180,93,0.14) !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
  }
  .lux-app-shell main table td:first-child .text-xs { margin-top: 5px; font-size: 14px !important; }
  .lux-app-shell main table td:last-child { justify-content: flex-end !important; padding-top: 4px !important; }
  .lux-app-shell main table td:last-child svg { width: 22px !important; height: 22px !important; }

  /* Make pipeline cards easy to scan with one hand. */
  .lux-app-shell main button.group { padding: 17px !important; }
  .lux-app-shell main button.group .text-base { font-size: 19px !important; }
  .lux-app-shell main button.group .text-sm { font-size: 16px !important; }
  .lux-app-shell main button.group .text-xs { font-size: 15px !important; }

  .lux-app-shell main [class*="grid-cols-"] { min-width: 0; }
  .lux-app-shell main [class*="overflow-x-auto"] { -webkit-overflow-scrolling: touch; }

  /* Keep modal editing readable and prevent tiny two-column forms. */
  .lux-app-shell .fixed.inset-0 [class*="max-w-6xl"] { width: 100% !important; max-width: 100% !important; border-radius: 0 !important; }
  .lux-app-shell .fixed.inset-0 [class*="md:grid-cols-2"] { grid-template-columns: 1fr !important; }
  .lux-app-shell .fixed.inset-0 label { font-size: 15px !important; }

  /* More visible horizontal navigation. */
  .lux-scrollbar::-webkit-scrollbar { height: 14px !important; }
}