/* Central sizes for form fields and action buttons. Every input, select, date field and action button
   has the height of the list search box (.module-search), so edit forms stay as compact as the lists.
   Keep sizes here only: screen CSS files may set colors and layout, never height, padding or font-size of these controls. */
:root {
   --field-height: 34px;
   --field-radius: var(--radius);
   --field-font: 10px;
   --field-pad: 11px
}

/* Search box above the lists (reference size). */
.module-search {
   box-sizing: border-box;
   min-height: var(--field-height);
   padding: 0 var(--field-pad)
}

/* Text, number, date inputs and selects of the edit forms. */
.profile-name-input {
   box-sizing: border-box;
   height: var(--field-height);
   padding: 0 var(--field-pad);
   border-radius: var(--field-radius);
   font-size: var(--field-font)
}

select.profile-name-input,
input[type=date].profile-name-input {
   padding-right: 6px
}

/* Drop-down fields (every <select>, 2026-10-07): the native arrow hugged the right border, so it is drawn here as a small bold "V" (10px wide, 10px away from the edge).
   The V is two diagonal strokes made of gradients in currentColor (follows the text color: both themes, disabled state), no color literal and no image.
   One rule for every select, with the specificity of the screen rules that set a select background (the forms.css order breaks the tie), repeated for
   :disabled, whose screen rules are one class heavier. */
select:not([multiple]):not([size]),
select:disabled:not([multiple]):not([size]) {
   -webkit-appearance: none;
   appearance: none;
   padding-right: 26px;
   background-image: linear-gradient(45deg, transparent 36%, currentColor 36%, currentColor 64%, transparent 64%), linear-gradient(135deg, transparent 36%, currentColor 36%, currentColor 64%, transparent 64%);
   background-size: 5px 5px, 5px 5px;
   background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
   background-repeat: no-repeat
}

/* Read-only boxes that sit in the same row as inputs. */
.check-digit {
   box-sizing: border-box;
   height: var(--field-height)
}

/* Solid action buttons (save, confirm removal). */
.profile-save,
.danger-button,
.address-danger,
.stock-remove-button {
   box-sizing: border-box;
   height: var(--field-height);
   padding: 0 14px;
   border-radius: var(--field-radius);
   font-size: var(--field-font);
   justify-content: center
}

/* Text buttons in the same footer keep the same height, so the row stays aligned. */
.profile-cancel,
.danger-link,
.address-remove {
   min-height: var(--field-height);
   padding-top: 0;
   padding-bottom: 0
}

/* Checkbox cards (title + short hint) and plain checkbox rows: compact, at least one field high. */
.permission-option {
   box-sizing: border-box;
   min-height: var(--field-height);
   padding: 6px var(--field-pad);
   border-radius: var(--field-radius)
}

.permission-option input,
.branch-active input {
   width: 14px;
   height: 14px;
   flex-shrink: 0
}

.permission-option strong {
   font-size: var(--field-font);
   line-height: 1.3
}

.permission-option small {
   font-size: 8px;
   line-height: 1.35;
   margin-top: 2px
}

.branch-active {
   min-height: var(--field-height);
   font-size: var(--field-font)
}

.product-address-movement {
   box-sizing: border-box;
   min-height: var(--field-height);
   padding: 0 var(--field-pad);
   font-size: var(--field-font)
}

.product-address-movements.is-inline .product-address-movement {
   min-height: 28px;
   padding: 0 8px
}

.product-address-movement input {
   width: 14px;
   height: 14px;
   flex-shrink: 0;
   margin: 0
}

/* Inline edit of a barcode inside its grid row (Produtos › Códigos de barras): same height as the row buttons. */
.product-barcode-grid .profile-name-input {
   height: 28px;
   padding: 0 8px
}

/* Supply sources of an address type (wms-supply): editing inside the grid row, 28px. */
.address-type-sources .profile-name-input {
   height: 28px;
   padding: 0 8px
}

/* Recebimentos (wms-receiving): quantity/batch/validity edited inside the item grid and the final quantities of a manual decision (28px). */
.receiving-items-grid .profile-name-input,
.receiving-manual-lines .profile-name-input,
.receiving-decide .profile-name-input,
.receiving-decide-round .profile-name-input {
   height: 28px;
   padding: 0 8px
}

/* Decision in the row of the review (2026-10-08): Confirmar and Cancelar inside the grid row are as high as its fields. */
.receiving-decide .inventory-action,
.receiving-decide .profile-cancel {
   height: 28px;
   padding: 0 10px
}

/* Pedidos and Solicitações entre armazéns (wms-picking, wms-warehouse-requests): units/batch/validity of the item lines and the approval quantities/reasons are
   edited inside the grid row (28px, like the row Remover button .stock-edit.stock-delete). */
.stock-grid.picking-grid .profile-name-input {
   height: 28px;
   padding: 0 8px
}

/* Dashboard selects: master "Armazém de operação" in the top bar and the indicators period. */
.master-warehouse-selector {
   font-size: var(--field-font);
   margin-bottom: 0
}

.master-warehouse-selector select,
.period-select select {
   box-sizing: border-box;
   height: var(--field-height);
   padding: 0 6px 0 var(--field-pad);
   border-radius: var(--field-radius);
   font-size: var(--field-font)
}

/* Inventory screens (wms-inventory): outlined secondary buttons and the scope kind options are field high; picker rows are grid high (28px). */
.inventory-action,
.inventory-kind {
   box-sizing: border-box;
   height: var(--field-height);
   padding: 0 var(--field-pad);
   border-radius: var(--field-radius);
   font-size: var(--field-font)
}

/* "Novo …" list action (.new-profile, every list panel): same outlined 34px secondary button as "Atualizar" (.inventory-action), never a text link. */
button.new-profile {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   box-sizing: border-box;
   height: var(--field-height);
   padding: 0 var(--field-pad);
   border-radius: var(--field-radius);
   font-size: var(--field-font);
   border: 1px solid var(--border);
   background: var(--surface);
   color: var(--text-2);
   cursor: pointer;
   white-space: nowrap
}

button.new-profile:hover:not(:disabled) {
   border-color: var(--blue);
   color: var(--blue);
   background: var(--primary-faint)
}

button.new-profile:disabled {
   opacity: .5;
   cursor: default
}

.inventory-option {
   box-sizing: border-box;
   min-height: 28px;
   padding: 0 8px;
   font-size: var(--field-font)
}

.inventory-option input,
.inventory-kind input {
   width: 14px;
   height: 14px;
   flex-shrink: 0
}

/* Permission tree of Perfis (wms-profiles): section and screen rows field high (34px), function rows 28px, checkboxes 14px. */
.permission-tree .tree-row {
   padding: 0
}

.permission-tree .tree-label {
   box-sizing: border-box;
   min-height: var(--field-height);
   padding: 0 6px;
   margin: 0
}

.permission-tree .tree-row.is-function .tree-label {
   min-height: 28px
}

.permission-tree .tree-label input {
   width: 14px;
   height: 14px;
   flex-shrink: 0
}

/* Tab buttons (.address-tabs: Endereços, Contagem de inventário, Execução de armazenagem) are field high, like the other action buttons. */
.address-tabs button {
   box-sizing: border-box;
   height: var(--field-height);
   padding: 0 12px;
   font-size: var(--field-font)
}

/* "Claro / Escuro" switch (ThemeToggle: login and app header): field high, like the selects next to it. */
.theme-toggle {
   box-sizing: border-box;
   height: var(--field-height)
}

.theme-toggle button {
   padding: 0 9px;
   font-size: var(--field-font)
}
/* Expiry field "MM/AAAA" (Components/Shared/MonthYearInput, docs/expiry-month.md): the same field, digits aligned; the alert under it when the text is
   not a month. */
.month-year-input {
   font-variant-numeric: tabular-nums
}

.month-year-input[aria-invalid="true"] {
   border-color: var(--danger)
}

.month-year-invalid {
   display: block;
   margin-top: 4px;
   color: var(--danger-text);
   font-size: 12px
}