/* Shared field states across public, customer, and admin pages. */
:root {
    --field-focus-border: #648b76;
    --field-focus-ring: rgba(74, 115, 91, 0.12);
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--field-focus-border);
    outline: none;
    outline-offset: 0;
    box-shadow: 0 0 0 3px var(--field-focus-ring);
}

.required-mark {
    display: inline;
    margin-inline-start: 3px;
    color: #b45345;
    font-weight: 600;
}

.required-note {
    margin: 0 0 16px;
    color: #77836e;
    font-size: 12px;
}

/* Flatpickr and Tom Select follow the workspace field styles. */
.ts-wrapper { width: 100%; min-width: 0; font-size: 12px; font-weight: 400; }
.ts-wrapper.single .ts-control { min-height: 37px; padding: 9px 30px 9px 10px; border: 1px solid #dfe5da; border-radius: 5px; background: #fff; box-shadow: none; color: #303b2a; }
.ts-wrapper.focus .ts-control { border-color: var(--field-focus-border); box-shadow: 0 0 0 3px var(--field-focus-ring); }
.invoice-form .ts-control input, .list-filters .ts-control input { min-height: 0; padding: 0 !important; border: 0; box-shadow: none; font-size: 12px; }
.ts-wrapper.single .ts-control::after { position: absolute; top: 14px; right: 12px; width: 6px; height: 6px; border-right: 1.5px solid #7c8c72; border-bottom: 1.5px solid #7c8c72; transform: rotate(45deg); content: ""; }
.ts-dropdown { z-index: 1100; overflow: hidden; border: 1px solid #dfe5d9; border-radius: 7px; background: #fff; color: #33412b; box-shadow: 0 10px 30px #1d2d1720; font-size: 12px; }
.ts-dropdown .option { padding: 10px 12px; }
.ts-dropdown .active { background: #edf3e8; color: #315e49; }
.ts-dropdown .selected { color: #315e49; font-weight: 600; }
.ts-dropdown .dropdown-input { width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid #e6ebdf; font: inherit; }
.ts-dropdown .no-results { padding: 12px; color: #7f8c72; }
.flatpickr-calendar { border: 1px solid #dfe5d9; border-radius: 8px; box-shadow: 0 12px 36px #1d2d1720; font-family: inherit; }
.flatpickr-day { color: #44573a; border-radius: 5px; }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus { border-color: #315e49; background: #315e49; color: #fff; }
.flatpickr-day:hover, .flatpickr-day:focus { border-color: #edf3e8; background: #edf3e8; }
.flatpickr-day.today { border-color: #a5b89a; }
.flatpickr-months { padding-top: 5px; }
.flatpickr-current-month { font-size: 13px; }
.flatpickr-current-month input.cur-year { min-height: 0; padding: 0 0 0 4px; border: 0; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
    input, select, textarea { transition: none; }
}