/* ---- Fields -----------------------------------------------------------------
   The primitives in resources/js/ui are shared with the public forum, so the
   control panel restyles them from here rather than editing them: each one
   carries a data-ui hook put there for exactly this. Colours stay the tokens',
   so a repalette still repaints all of it.

   These rules are unlayered on purpose. That is what lets them beat the
   Tailwind utilities the primitives are written in — including the ring, which
   is a box-shadow and so has to be overwritten rather than unset.
   -------------------------------------------------------------------------- */
[data-ui='input'] {
    background-color: var(--tk-field-bg);
    border-color: var(--tk-field-line);
    box-shadow: none;
}

/* The panel's own density: a field is the height of the topbar search and the
   toolbar's, set in the size the tables are already read at. The taller default
   the primitives ship belongs to the forum, where a form is the whole page. */
[data-ui='input']:not(textarea) {
    height: var(--tk-field-height);
}

[data-ui='input'],
[data-ui='input'] input {
    font-size: var(--tk-field-font-size);
}

/* Prose keeps its own height, but not the forum's floor: a box asked for with
   rows="2" was coming out four lines tall and opening a hole in the card. */
textarea[data-ui='input'] {
    min-height: var(--tk-field-textarea-min);
}

[data-ui='input'] {
    padding-inline: var(--tk-field-px);
}

/* A field is sized to what goes in it. The longest category, forum or tag name
   on this install is nineteen characters; this lane holds about fifty. Prose
   keeps the full line, and a field that truly needs the column asks by name
   with data-width="full" — a utility class cannot win against an unlayered
   rule, so the escape hatch has to be an attribute. */
[data-ui='input']:not(textarea):not([data-width='full']) {
    max-width: var(--tk-field-measure);
}

[data-ui='input'][aria-invalid='true'] {
    border-color: var(--tk-danger);
}

/* The border is the focus, not a halo. The fill lifts to the surface so the
   field being typed into is the one pale thing on the panel. */
[data-ui='input']:focus-visible,
[data-ui='input']:focus-within {
    background-color: var(--tk-field-bg-focus);
    border-color: var(--tk-primary);
    box-shadow: none;
}

[data-ui='input'][aria-invalid='true']:is(:focus-visible, :focus-within) {
    border-color: var(--tk-danger);
}

/* On a bar that is already the sunken step the contrast runs the other way, so
   a filter there keeps the surface instead of dissolving into the bar. */
[data-ui='toolbar'] [data-ui='input']:not(:disabled) {
    background-color: var(--tk-surface);
}

/* Flat, with no well: a locked field should not look like somewhere to type. */
[data-ui='input']:disabled,
[data-ui='input'][data-disabled] {
    background-color: var(--tk-field-disabled-bg);
    box-shadow: none;
}

/* ---- Menus ------------------------------------------------------------------
   The lists those fields open, on the same terms and through the same kind of
   hook. The primitives ship the forum's sizing, where a menu is most of what is
   on screen; here it drops beside fields that are already 13px and rows that are
   already 26 high, and a 36-high option in a 3px box reads as two designs met in
   the middle. Select, the searchable picker and a row's own menu all land here.
   -------------------------------------------------------------------------- */
/* No inset: an option runs the full width of the list, so the highlight under
   the pointer is a band across it rather than a lozenge floating inside a
   frame. The box clips its own corners, so nothing escapes. */
[data-ui='menu'] {
    padding: 0;
    font-size: var(--tk-field-font-size);
}

/* The pickers put their own inset on the scrolling box inside the frame,
   which is a second place for the same padding to hide. */
[data-ui='menu-viewport'] {
    padding: 0;
}

/* A step taller than a table row and a step under the field that opened it:
   a list is pointed at rather than read down, so a row wants room to be hit.
   Square, because a rounded row inside a squared box is the tell that two
   designs met here. */
[data-ui='menu-item'] {
    padding-block: 0.3125rem;
    padding-inline: var(--tk-field-px);
    border-radius: 0;
    font-size: var(--tk-field-font-size);
}

/* The band under the pointer is the one the tables already use, so a list and
   a row answer to a hand the same way. Something destructive keeps its own. */
[data-ui='menu-item'][data-highlighted]:not([data-danger]) {
    background-color: var(--tk-primary-soft);
}

/* What is already chosen, said twice over. A tick alone at this size is easy
   to run past, and the word is the thing being read. */
[data-ui='menu-item'][data-state='checked'] {
    color: var(--tk-primary);
    font-weight: 500;
}

/* Room at the end for the tick, which only the pickers draw. */
[data-menu='choice'] [data-ui='menu-item'] {
    padding-inline-end: 1.5rem;
}

/* Centred on the first line rather than on the item, which may carry a second
   one under it, and cut to the size of the chevron on the field above. */
[data-ui='menu-tick'] {
    top: 0.5rem;
}

[data-ui='menu-tick'] svg {
    width: 0.875rem;
    height: 0.875rem;
}