/* Single-line controls can clip to the font's own ascent/descent even with a
   taller CSS line-height. Protect entered text and placeholders with the same
   typeface and enough room for Thai stacked vowels, tones and lower vowels.
   The control font embeds these metrics for Safari versions that do not support
   the override descriptors. Build it with scripts/build_workspace_control_font.py. */
@font-face {
  font-family: WorkspaceControl;
  src: url('../assets/fonts/SFProTH-Controls.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  ascent-override: 125%;
  descent-override: 50%;
  line-gap-override: 0%;
  font-display: swap;
}

/* Shared field rhythm for static forms and dynamically inserted subforms. */
@media screen {
  :root[data-workspace] body :is(.task-form, #ticket-form, .account-panel > form) {
    row-gap: 16px;
    align-content: start;
  }
  :root[data-workspace] body :is(form, dialog) .form-grid {
    row-gap: 14px;
    column-gap: 14px;
    align-content: start;
    align-items: start;
  }
  :root[data-workspace] body :is(form, dialog) label:not(.inline-check):not(.upload-label):not(.button) {
    gap: 6px;
    min-width: 0;
    align-content: start;
  }
  :root[data-workspace] body #finance-master-fields {
    display: grid;
    gap: 16px;
    min-width: 0;
    align-content: start;
  }
  :root[data-workspace] body :is(.master-checks, .workflow-signing-options) {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: flex-start;
  }
  :root[data-workspace] body .master-checks label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
  }
  :root[data-workspace] body .master-checks input { flex: none; }
  :root[data-workspace] body #asset-upload-fields {
    display: grid;
    gap: 16px;
    align-content: start;
  }
  /* A tall list must not stretch the editor's field rows or footer. */
  :root[data-workspace] body .master-layout { min-height: 0; align-items: start; }
  :root[data-workspace] body #finance-master-form { align-self: start; }
  /* Project members use the dialog's normal flow, without a nested scroll area. */
  #project-detail-form #project-member-list {
    max-height: none;
    height: auto;
    overflow: visible;
  }
  :root[data-workspace] body #finance-master-form .dialog-actions {
    position: static;
    margin-block: 0;
    padding-block: 14px;
  }
  :root[data-workspace] body form > .form-error:empty { display: none; }
  :root[data-workspace] body .dialog-actions { gap: 10px; }
  :root[data-workspace] body :is(form, dialog) .form-grid + :is(label, .master-checks) {
    margin-top: 0;
  }
  @media (max-width: 720px) {
    :root[data-workspace] body :is(.task-form, #ticket-form, .account-panel > form, #finance-master-fields) { row-gap: 14px; }
    :root[data-workspace] body :is(form, dialog) .form-grid { row-gap: 12px; }
    :root[data-workspace] body .workflow-signing-options { gap: 12px; }
  }
}

/* Numeric entry and usable targets across Office/Helpdesk, including dynamic forms. */
@media screen {
  /* Thai combining marks need a full line box, including in generated pickers.
     Keep vertical padding explicit so legacy component padding cannot crop it. */
  :root[data-workspace] body :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']):not([type='range']):not([type='color']), select, textarea) {
    font-family: WorkspaceControl, var(--fw-font-family);
    line-height: 1.8;
    box-sizing: border-box;
  }
  /* Values and placeholders must use identical metrics and line boxes. */
  :root[data-workspace] body :is(input, textarea)::placeholder {
    font-family: inherit;
    line-height: inherit;
  }
  :root[data-workspace] body :is(label, .suggestion-options [role='option']) { line-height: 1.8; }
  :root[data-workspace] body :is(form, dialog) :is(input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']), select:not([multiple])) {
    min-height: 48px;
    height: auto;
    padding-block: 8px;
    padding-inline: 16px;
    font-size: 16px;
    box-sizing: border-box;
  }
  :root[data-workspace] body :is(form, dialog) select:not([multiple]) { padding-inline-end: 44px; }
  :root[data-workspace] body :is(form, dialog) textarea { padding: 12px 16px; font-size: 16px; line-height: 1.8; }
  :root[data-workspace] body :is(.finance-document-item, .finance-wht-item) :is(input, select) { padding-block: 4px; }
  :root[data-workspace] body input[type='number'] {
    appearance: textfield;
    -moz-appearance: textfield;
    font-variant-numeric: tabular-nums;
    text-align: right;
    padding-inline: 16px;
  }
  :root[data-workspace] input[type='number']::-webkit-inner-spin-button,
  :root[data-workspace] input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  :root[data-workspace] body .number-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
  :root[data-workspace] body .number-field > label { margin: 0; }
  :root[data-workspace] body .number-control {
    display: grid;
    grid-template-columns: 44px minmax(0,1fr) 44px;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 1px;
    border: 1px solid var(--ws-control-line);
    border-radius: 12px;
    background: var(--ws-surface);
  }
  :root[data-workspace] body .number-control:focus-within { border-color: var(--ws-focus); box-shadow: 0 0 0 3px color-mix(in srgb,var(--ws-focus) 18%,transparent); }
  :root[data-workspace] body .number-control > input[type='number'] {
    width: 100%; min-width: 0; height: 44px; min-height: 44px;
    padding: 0 8px; border: 0; border-radius: 6px; box-shadow: none;
    background: transparent; text-align: center; font-size: 16px;
  }
  :root[data-workspace] body .number-control > input:focus { outline: 2px solid var(--ws-focus); outline-offset: -2px; }
  :root[data-workspace] body .number-step {
    display: grid; place-items: center;
    width: 44px; min-width: 44px; height: 44px; min-height: 44px;
    margin: 0; padding: 0; border: 1px solid var(--ws-line); border-radius: 8px;
    background: var(--ws-raised); color: var(--ws-text);
    font: inherit; font-size: 22px; line-height: 1; box-shadow: none;
    cursor: pointer; touch-action: manipulation;
  }
  :root[data-workspace] body .number-step:hover:not(:disabled) { color: var(--ws-accent); background: var(--ws-hover); border-color: var(--ws-accent); }
  :root[data-workspace] body .number-step:active:not(:disabled) { background: var(--ws-accent-soft); }
  :root[data-workspace] body .number-step:focus-visible { outline: 2px solid var(--ws-focus); outline-offset: 1px; }
  :root[data-workspace] body .number-step:disabled { opacity: .4; cursor: not-allowed; }
  :root[data-workspace] body .number-control:is(.is-disabled,.is-readonly) { background: var(--ws-raised); }
  :root[data-workspace] body :is(input,select,textarea)[aria-invalid='true'] { border-color: var(--ws-danger); }
  :root[data-workspace] body .number-control:has([aria-invalid='true']) { border-color: var(--ws-danger); }
  /* Preserve the denser, keyboard-driven document grid rather than adding buttons per cell. */
  #finance-document-form .finance-sheet input[type='number'] { padding-inline: 8px; }
}

@media screen and (min-width: 721px) {
  :root[data-workspace] body .time-compose { grid-template-columns: 140px 180px minmax(0,1fr) auto; }
}