<div class="!flex !items-start">
    <!-- Toggle Switch with Tooltip -->
    <div class="!relative !inline-block !flex-shrink-0 !mr-2">
        <!-- Tooltip content -->
        <div class="!absolute !bottom-full !left-1/2 !transform !-translate-x-1/2 !mb-2 !px-3 !py-2 !text-sm !font-medium !text-white !bg-gray-900 !rounded-md !whitespace-nowrap !z-50 !opacity-0 !pointer-events-none !transition-opacity !duration-200"
             ng-class="{
                 '!opacity-100': showDisabledTooltip,
                 '!opacity-0': !showDisabledTooltip
             }"
             ng-show="disabled">
            <span>{{disabledText}}</span>
            <!-- Tooltip arrow - positioned for center alignment -->
            <div class="!absolute !top-full !left-1/2 !transform !-translate-x-1/2 !w-0 !h-0 !border-l-4 !border-r-4 !border-t-4 !border-transparent !border-t-gray-900"></div>
        </div>

        <!-- Toggle Switch -->
        <label ng-attr-for="{{inputId}}" class="!inline-flex !relative
            !text-zinc-900 !font-normal
            !items-center !text-sm"
               ng-class="{'!cursor-pointer': !disabled, '!cursor-not-allowed': disabled}"
               ng-mouseenter="disabled && (showDisabledTooltip = true)"
               ng-mouseleave="showDisabledTooltip = false">
            <input type="checkbox"
                   ng-attr-id="{{inputId}}"
                   class="!sr-only peer"
                   ng-model="internalModel"
                   ng-disabled="disabled">
            <div class="
                !w-10 !h-[22px] !rounded-full !transition-colors !duration-200 !ease-in-out
                peer peer-focus:!outline-none peer-focus:!ring-2 peer-focus:!ring-offset-1 peer-focus:!ring-blue-500
                after:!content-[''] after:!absolute after:!top-[2px] after:!left-[2px]
                after:!bg-white after:!border-gray-300 after:!border after:!rounded-full
                after:!h-[18px] after:!w-[18px]
                after:!transition-all after:!duration-200 after:!ease-in-out
                peer-checked:after:!translate-x-[18px] peer-checked:after:!border-white"
                 ng-class="{
                    '!bg-gray-200 peer-checked:!bg-black': !disabled,
                    '!bg-gray-100 peer-checked:!bg-gray-300': disabled
                }"
                 ng-style="disabled && {'opacity': '0.5'}">
            </div>
        </label>
    </div>

    <!-- Text Content (unchanged styling) -->
    <div class="!flex-grow">
        <label ng-attr-for="{{inputId}}" class="!block !text-sm !font-medium !text-[#333E48] !cursor-pointer !mb-0">{{labelText}}</label>
        <p ng-show="descriptionText" class="!text-sm !text-gray-500" style="white-space: pre-line">{{descriptionText}}</p>
    </div>
</div>