/* Shared text, select, numeric, date, and time edit geometry. */
.sarus-edit, .sarus-select, .sarus-number, .sarus-date, .sarus-time { width: 100%; min-height: 40px; height: 40px; border: 1px solid var(--sarus-control-border); border-radius: var(--sarus-radius); padding: 6px 9px; background: var(--sarus-control-bg); color: var(--sarus-text); outline: none; }
.sarus-edit:focus, .sarus-select:focus, .sarus-number:focus, .sarus-date:focus, .sarus-time:focus { border-color: var(--sarus-primary); box-shadow: 0 0 0 3px rgba(32, 107, 196, 0.12); }
.sarus-edit:disabled, .sarus-select:disabled, .sarus-number:disabled, .sarus-date:disabled, .sarus-time:disabled { opacity: .7; cursor: not-allowed; }
.sarus-edit[readonly] { background: var(--sarus-surface); color: var(--sarus-muted); }
/* Custom native select arrow, shared by light and dark themes. */
.sarus-select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f829a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px; }
body[data-theme="dark"] .sarus-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8b8cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.sarus-select option { background: var(--sarus-control-bg); color: var(--sarus-text); }
/* Compact numeric and spin-edit wrapper using the shared Sarus triangle controls. */
.sarus-spinedit, .sarus-spin, .sarus-number-wrap { position: relative; display: inline-block; width: 6rem; min-width: 6rem; }
.sarus-spinedit--narrow, .sarus-spin--narrow { width: 52px; min-width: 52px; }
.sarus-spinedit .sarus-number, .sarus-spin .sarus-number, .sarus-number-wrap .sarus-number { width: 100%; min-width: 0; padding-left: 8px; padding-right: calc(1.35rem + 9px); text-align: right; }
/* Spin-edit increment and decrement controls. */
.sarus-spinedit__buttons, .sarus-spin-buttons { position: absolute; top: 1px; right: 1px; bottom: 1px; display: flex; width: 1.35rem; flex-direction: column; border-left: 1px solid var(--sarus-control-border); background: transparent; }
.sarus-spinedit__btn, .sarus-spin-button { flex: 1; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; background: transparent; color: var(--sarus-muted); cursor: pointer; }
.sarus-spinedit__btn:hover, .sarus-spinedit__btn:focus-visible, .sarus-spin-button:hover, .sarus-spin-button:focus-visible { background: var(--sarus-hover); color: var(--sarus-text); outline: none; }
/* Standard up and down triangle indicators. */
.sarus-spinedit__triangle, .sarus-spin-triangle { display: block; width: 0; height: 0; }
.sarus-spinedit__triangle--up, .sarus-spin-triangle-up { border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 5px solid currentColor; }
.sarus-spinedit__triangle--down, .sarus-spin-triangle-down { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
/* Remove inconsistent browser number spinners when using Sarus controls. */
input[type="number"].sarus-number::-webkit-inner-spin-button, input[type="number"].sarus-number::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
input[type="number"].sarus-number { appearance: textfield; -moz-appearance: textfield; }
/* Password edit wrapper and visibility toggle. */
.sarus-password-wrap { position: relative; }
.sarus-password-wrap > .sarus-edit { padding-right: 42px; }
.sarus-password-toggle { position: absolute; top: 3px; right: 4px; width: 34px; height: 34px; border: 0; padding: 7px; background: transparent; color: var(--sarus-muted); cursor: pointer; }
.sarus-password-toggle svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.sarus-password-toggle:hover, .sarus-password-toggle:focus-visible { color: var(--sarus-primary); outline: none; }