<div>
    <style>
        /* Amount component unified focus styles */
        .amount-wrapper:focus-within {
            border-color: rgb(var(--color-accent)) !important;
            outline: none;
            box-shadow: 0 0 0 1px rgb(var(--color-accent) / 0.5);
        }

        .amount-wrapper input:focus {
            outline: none !important;
            box-shadow: none !important;
            border: none !important;
        }
    </style>
    @isset($label)
        <x-jetstream.label :value="$label" for="hours" />
    @else
        <x-jetstream.label for="hours" value="{{ __('Amount of time') }}" />
    @endisset
    
    <!-- Unified border wrapper with proper ARIA labeling -->
    <div class="amount-wrapper mt-1 flex items-center rounded-md border border-theme-primary bg-theme-background shadow-sm overflow-hidden transition-colors duration-200 {{ $maxLengthHoursInput > 4 ? 'w-full' : 'w-40' }}"
         role="group"
         aria-labelledby="hours-label">

        @if(!platform_trans('platform_currency_position_end', null, false))
            <!-- Currency symbol prefix (when position_end is false) -->
            <span class="bg-theme-background px-3 py-2 text-sm text-theme-secondary select-none" aria-hidden="true">{{ platform_currency_symbol() }}</span>
        @endif

        <!-- Hours input -->
        <input id="hours"
               class="@error('hours') is-invalid @enderror {{ $maxLengthHoursInput > 4 ? 'flex-1' : 'w-14' }} bg-transparent border-0 px-2 py-2 text-right placeholder-theme-light focus:ring-0 sm:text-sm"
               maxlength="{{ $maxLengthHoursInput }}" min="0" name="hours"
               oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, {{ $maxLengthHoursInput }})"
               placeholder="{{ __('hh') }}" step="1" type="text" value="{{ old('hours') }}"
               aria-label="{{ trans_with_platform('Hours') }}"
               wire:model.blur.number="hours">

        <!-- Colon separator -->
        <span class="bg-theme-background px-1 py-2 text-sm text-theme-secondary select-none" aria-hidden="true">:</span>

        <!-- Minutes input -->
        <input id="minutes"
               class="@error('minutes') is-invalid @enderror w-14 bg-transparent border-0 px-2 py-2 text-left placeholder-theme-light focus:ring-0 sm:text-sm"
               max="59" maxlength="2" min="0" name="minutes"
               onblur="if(this.value.length === 1) this.value = '0' + this.value"
               oninput="this.value = Math.min(59, Math.max(0, this.value.replace(/[^0-9]/g, '').slice(0, 2)))"
               placeholder="{{ __('mm') }}" step="1" type="text" value="{{ old('minutes') }}"
               aria-label="{{ __('Minutes') }}"
               wire:model.blur.number="minutes">

        @if(platform_trans('platform_currency_position_end', null, false))
            <!-- Currency symbol suffix (when position_end is true) -->
            <span class="bg-theme-background px-3 py-2 text-sm text-theme-secondary select-none" aria-hidden="true">{{ platform_currency_symbol() }}</span>
        @endif
    </div>
</div>
