/* Forms and dialogs, one look across the office.

   Every field the app builds through UI.field (and the sign-in fields in
   app.js) uses the same markup: a control, a <label>, and a decorative
   <fieldset> that used to draw a notched outline with the label floating
   into it. That made a form look unfinished - empty fields showed their label
   large inside the box, filled ones showed it small on the border, so a half
   filled form had two kinds of label at once.

   Here the label always sits above its field, the field is a plain white box
   with a hairline border, and focus is a coloured border with a soft ring. It
   is the same pattern the toolbars and the platform sign-in already use, so
   a dialog now looks like the page it opened from. Only layout lives here;
   colours come from the palette's tokens. */
@media screen {

/* --- the field ---------------------------------------------------------- */

:root body .gfield {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
:root body .gfield .gfield__outline { display: none; }

:root body .gfield .gfield__label {
  order: -1;
  position: static;
  inset: auto;
  transform: none;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg);
  white-space: normal;
  pointer-events: auto;
  transition: none;
}
/* The floated states of the old label all collapse into the one above. */
:root body .gfield > :is(input, textarea):focus ~ .gfield__label,
:root body .gfield > :is(input, textarea):not(:placeholder-shown) ~ .gfield__label,
:root body .gfield.gfield--up .gfield__label,
:root body .gfield.gfield--select .gfield__label {
  top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
:root body .gfield__req { color: var(--danger); font-weight: 700; }
:root body .gfield__opt { color: var(--fg-subtle); font-weight: 400; font-size: 12px; }

:root body .gfield > :is(input, select, textarea) {
  width: 100%;
  min-height: 44px;
  height: auto;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background-color: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
:root body .gfield > textarea { min-height: 96px; resize: vertical; }
:root body .gfield.gfield--select > select { padding-inline-end: 36px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { :root body .gfield > :is(input, select, textarea):hover:not(:disabled):not(:focus) { border-color: var(--fg-subtle); } }
:root body .gfield > :is(input, select, textarea):focus,
:root body .gfield > :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus-ring) 22%, transparent);
}
:root body .gfield > [aria-invalid='true'] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent);
}
:root body .gfield > :is(input, select, textarea):disabled { background-color: var(--surface-alt); color: var(--fg-muted); cursor: not-allowed; }

/* The single-space placeholder that drove the floating label stays hidden; a
   real one (an example code, a phone format) is now shown, quietly. */
:root body .gfield > :is(input, textarea)::placeholder { color: transparent; }
:root body .gfield > :is(input, textarea):not([placeholder=' '])::placeholder { color: var(--fg-subtle); opacity: 1; }

/* A chevron for selects where the browser draws none of its own. */
:root body .gfield.gfield--select::after {
  top: auto;
  bottom: 19px;
  inset-inline-end: 15px;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  border-color: var(--fg-muted);
}

/* The password eye sits inside the box, which is now below the label. */
:root body .gfield.gfield--reveal > input { padding-inline-end: 48px; }
:root body .gfield.gfield--reveal .gfield__reveal {
  top: auto;
  bottom: 2px;
  inset-inline-end: 4px;
  transform: none;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  color: var(--fg-muted);
}
@media (hover: hover) and (pointer: fine) { :root body .gfield.gfield--reveal .gfield__reveal:hover { color: var(--fg); background: var(--surface-alt); } }

:root body .field { margin-block-end: 0; }
:root body .field > .hint { margin-block-start: 6px; color: var(--fg-subtle); font-size: 12px; }
:root body .formgrid { gap: 16px 20px; align-items: start; }
:root body .modal__body > .field + .field,
:root body .modal__body > p + .field,
:root body .modal__body > .alert + .field { margin-block-start: 16px; }
:root body .mini-check--field { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--fg); margin: 4px 0 0; }

/* --- the dialog --------------------------------------------------------- */

/* A solid sheet. The translucent glass let the page show through the body
   while the header and footer turned opaque the moment the form scrolled,
   so the dialog was two different materials at once. */
:root body dialog.modal {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgb(16 32 38 / .28);
}
:root body dialog.modal::backdrop { background: rgb(16 32 38 / .45); }

:root body .modal__head {
  align-items: flex-start;
  padding: 18px 24px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
:root body .modal__titles { min-width: 0; }
:root body .modal__head h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--fg); }
:root body .modal__sub { margin-top: 2px; font-size: 13px; color: var(--fg-muted); overflow-wrap: anywhere; }
:root body dialog.modal .modal__head > .modal__close {
  flex: none;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fg-muted);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) { :root body dialog.modal .modal__head > .modal__close:hover { background: var(--surface-alt); color: var(--fg); } }

:root body .modal__body { padding: 20px 24px 24px; }

/* Actions sit at the end of the row at their natural width, the primary
   last, mirrored in Pashto and Dari like everything else. They are not
   stretched to fill the row: a half-width Save reads as a banner. */
:root body .modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
:root body dialog.modal .modal__foot > .btn {
  width: auto;
  min-width: 96px;
  height: 40px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}
:root body dialog.modal .modal__foot > .btn:not(.btn--primary):not(.btn--danger) {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--fg);
}
@media (hover: hover) and (pointer: fine) { :root body dialog.modal .modal__foot > .btn:not(.btn--primary):not(.btn--danger):hover:not(:disabled) { background: var(--surface-alt); } }
:root body dialog.modal .modal__foot > .btn--danger { background: var(--danger-fill, #c05239); border-color: var(--danger-fill, #c05239); color: #ffffff; }

/* A card's own save button follows the same rule: one action, at the end
   of the row, at its natural width. The page-wide "paired actions share a
   width" rule in office.css is for pairs; applied to a lone button it
   stretched Save across the whole card. */
:root body .main .card__foot { background: var(--surface); }
:root body .main :is(.card__foot, .card__foot > .row):has(> .btn:only-child) {
  display: flex;
  justify-content: flex-end;
}
:root body .main :is(.card__foot, .card__foot > .row):has(> .btn:only-child) > .btn {
  width: auto;
  min-width: 120px;
  height: 40px;
  min-height: 40px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

@media (max-width: 600px) {
  :root body dialog.modal { border-radius: 16px; }
  :root body :is(.modal__head, .modal__body, .modal__foot) { padding-inline: 16px; }
  :root body dialog.modal .modal__foot > .btn { flex: 1; }
}
}