/* Personal workspace typography aligned with the enterprise prototype. */
body {
  font-size: 11px !important;
}

button,
input,
select,
textarea,
.btn,
.input,
.select,
.data-row,
.quote-item,
.history-item,
.product-card,
.workspace-nav-link,
.workspace-account-name {
  font-size: 11px !important;
}

.field > label,
.form-grid label,
.table th,
.quote-table th,
.quote-head,
.history-grid-head,
.data-head,
.dialog label,
.dialog-head p,
.hint,
.muted,
.count,
.workspace-account-role,
.workspace-theme-label {
  font-size: 10px !important;
}

.page-head h2,
.dialog-head h3,
.section-title,
.card h3 {
  font-size: 15px !important;
}

.table td,
.quote-table td,
.quote-item b,
.history-item b,
.data-row strong {
  font-size: 11px !important;
}

.data-row small,
.quote-item small,
.history-item small,
.product-card p,
.status-pill {
  font-size: 9px !important;
}

@media (max-width: 680px) {
  html,
  body,
  .workspace-content {
    max-width: 100%;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  .workspace-content::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
  }

  .modal,
  .overlay,
  .payment-overlay,
  .verify-overlay,
  .order-editor-overlay,
  .draft-editor-overlay,
  .avatar-preview {
    align-items: center !important;
    justify-content: center !important;
    place-items: center !important;
  }

  .modal > .dialog,
  .overlay > .dialog,
  .payment-overlay > .payment-dialog,
  .verify-overlay > .verify-dialog,
  .avatar-preview > .preview-box,
  .workspace-edition-dialog,
  .workspace-team-invite-dialog,
  .workspace-announcement-dialog {
    width: min(560px, calc(100vw - 64px)) !important;
    max-width: calc(100vw - 64px) !important;
    max-height: calc(100dvh - 96px) !important;
  }

  .order-editor-overlay > .order-editor-stage,
  .draft-editor-overlay > .draft-editor-stage {
    width: calc(100vw - 64px) !important;
    max-width: calc(100vw - 64px) !important;
    height: calc(100dvh - 96px) !important;
    max-height: calc(100dvh - 96px) !important;
  }

  body {
    -webkit-text-size-adjust: 100%;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
  select,
  .input,
  .select {
    height: 28px !important;
    min-height: 28px !important;
    font-size: 12px !important;
  }

  textarea {
    min-height: 28px !important;
    font-size: 12px !important;
  }

  button,
  .btn {
    min-height: 34px !important;
    font-size: 11px !important;
  }

  .workspace-nav-link {
    min-height: 44px;
  }

  button,
  .btn,
  a,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }

  .dialog,
  .modal-dialog,
  .preview-box {
    max-width: calc(100vw - 16px) !important;
  }
}

@media (max-width: 680px), (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  .draft-editor-close,
  .order-editor-close {
    top: 8px !important;
    right: 8px !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    display: inline-grid !important;
    place-items: center;
    padding: 0 !important;
    border: 1px solid rgba(118, 137, 164, 0.2) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #526175 !important;
    box-shadow: none !important;
    line-height: 1;
    touch-action: manipulation;
  }

  .draft-editor-close [data-icon],
  .draft-editor-close svg,
  .order-editor-close [data-icon],
  .order-editor-close svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    display: block;
  }
}