/**
 * KSE mobile polish — shared responsive overrides for workspace, auth, and marketing.
 */

/* Prevent horizontal page scroll on small screens */
body.ws-app,
body.kse-gate,
body.kse-onboarding-page,
.hm-page {
  overflow-x: clip;
  max-width: 100%;
}

/* Workspace list rows (used on WAPT, assets, engagements) */
.ws-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.ws-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--kse-line);
  border-radius: 12px;
  background: #fff;
}

/* iOS: 16px inputs avoid focus zoom */
@media (max-width: 860px) {
  .ws-input,
  .ws-form input,
  .ws-form select,
  .ws-form textarea,
  .kse-set__input,
  .kse-setmodal__otp,
  .kse-setmodal__field .kse-set__input,
  .kse-gate input,
  .kse-gate select,
  .kse-gate textarea,
  .ob-input,
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="text"],
  input[type="url"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Safe areas (notched phones) */
@supports (padding: max(0px)) {
  body.ws-app .ws-content {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-bottom: max(2.5rem, env(safe-area-inset-bottom));
  }

  body.ws-app .ws-topbar {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  body.ws-app .ws-sidebar {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  body.kse-gate {
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }

  /* Onboarding keeps chrome (header/footer) edge-to-edge; pad only the scene. */
  body.kse-onboarding-page .kse-ob-scene {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 860px) {
  .ws-page-head--split {
    flex-direction: column;
    align-items: stretch;
  }

  .ws-page-head--split > .ws-btn,
  .ws-page-head--split > a.ws-btn,
  .ws-page-head--split > form {
    width: 100%;
  }

  .ws-page-head--split .ws-btn {
    justify-content: center;
  }

  .ws-icon-btn,
  .ws-btn,
  .ws-nav__item,
  .kse-set__item {
    min-height: 44px;
  }

  .ws-icon-btn {
    min-width: 44px;
  }

  .ws-table-wrap {
    -webkit-overflow-scrolling: touch;
    margin-inline: -0.25rem;
    padding-inline: 0.25rem;
  }

  .ws-table {
    min-width: 36rem;
  }

  .ws-table th,
  .ws-table td {
    padding: 0.65rem 0.55rem;
    font-size: 0.82rem;
  }

  .ws-list__item {
    flex-direction: column;
    align-items: stretch;
  }

  .ws-list__item .ws-btn,
  .ws-list__item form,
  .ws-list__item a.ws-btn {
    width: 100%;
  }

  .ws-token-row,
  .ws-form--inline {
    flex-direction: column;
    align-items: stretch;
  }

  .ws-choice-row {
    flex-direction: column;
    align-items: stretch;
  }

  .ws-palette {
    display: flex;
    align-items: flex-end;
    padding: 0.5rem;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }

  .ws-palette__panel,
  .ws-modal__panel {
    width: 100%;
    margin: 0;
    max-height: min(88dvh, calc(100dvh - 1rem - env(safe-area-inset-top)));
    overflow-y: auto;
  }

  .kse-setmodal {
    align-items: flex-end;
    padding: 0.5rem;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }

  .kse-setmodal__dialog {
    width: 100%;
    max-height: min(90dvh, calc(100dvh - 1rem - env(safe-area-inset-top)));
    overflow-y: auto;
  }

  .kse-set__hero-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.15rem 1.1rem;
  }

  .kse-set__identity {
    width: 100%;
    flex-wrap: wrap;
  }

  .kse-set__form-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .kse-set__form-foot .ws-btn {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .ws-analytics-kpis {
    grid-template-columns: 1fr;
  }

  .ws-topbar__right .ws-avatar {
    display: none;
  }

  .ws-search-trigger span {
    max-width: 9rem;
  }
}

@media (max-width: 400px) {
  .ws-content {
    padding-inline: 0.85rem;
  }

  .ws-page-head h1 {
    font-size: 1.45rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-sidebar {
    transition: none;
  }
}